/* @import url('http://localhost/layzr/src/main.css'); */

/* @font-face {
	font-display: swap;
	font-family: Inter;
	font-style: normal;
	font-weight: 100;
	src: url(../font-families/inter/Inter-Thin.ttf) format("truetype")
}

@font-face {
	font-display: swap;
	font-family: Inter;
	font-style: normal;
	font-weight: 200;
	src: url(../font-families/inter/Inter-Light.ttf) format("truetype")
}

@font-face {
	font-display: swap;
	font-family: Inter;
	font-style: normal;
	font-weight: 400;
	src: url(../font-families/inter/Inter-Regular.ttf) format("truetype")
}

@font-face {
	font-display: swap;
	font-family: Inter;
	font-style: normal;
	font-weight: 500;
	src: url(../font-families/inter/Inter-Medium.ttf) format("truetype")
}

@font-face {
	font-display: swap;
	font-family: Inter;
	font-style: normal;
	font-weight: 600;
	src: url(../font-families/inter/Inter-SemiBold.ttf) format("truetype")
}

@font-face {
	font-display: swap;
	font-family: Inter;
	font-style: normal;
	font-weight: 700;
	src: url(../font-families/inter/Inter-Bold.ttf) format("truetype")
}

@font-face {
	font-display: swap;
	font-family: Inter;
	font-style: normal;
	font-weight: 800;
	src: url(../font-families/inter/Inter-ExtraBold.ttf) format("truetype")
}

@font-face {
	font-display: swap;
	font-family: Inter;
	font-style: normal;
	font-weight: 900;
	src: url(../font-families/inter/Inter-Black.ttf) format("truetype")
} */

:root {
  --ff-inter: "Inter";
  --ff-manrope: "Manrope"
}

/* @font-face {
	font-display: swap;
	font-family: Manrope;
	font-style: normal;
	font-weight: 200;
	src: url(../font-families/manrope/Manrope-ExtraLight.ttf) format("truetype")
}

@font-face {
	font-display: swap;
	font-family: Manrope;
	font-style: normal;
	font-weight: 300;
	src: url(../font-families/manrope/Manrope-Light.ttf) format("truetype")
}

@font-face {
	font-display: swap;
	font-family: Manrope;
	font-style: normal;
	font-weight: 400;
	src: url(../font-families/manrope/Manrope-Regular.ttf) format("truetype")
}

@font-face {
	font-display: swap;
	font-family: Manrope;
	font-style: normal;
	font-weight: 500;
	src: url(../font-families/manrope/Manrope-Medium.ttf) format("truetype")
}

@font-face {
	font-display: swap;
	font-family: Manrope;
	font-style: normal;
	font-weight: 600;
	src: url(../font-families/manrope/Manrope-SemiBold.ttf) format("truetype")
}

@font-face {
	font-display: swap;
	font-family: Manrope;
	font-style: normal;
	font-weight: 700;
	src: url(../font-families/manrope/Manrope-Bold.ttf) format("truetype")
}

@font-face {
	font-display: swap;
	font-family: Manrope;
	font-style: normal;
	font-weight: 800;
	src: url(../font-families/manrope/Manrope-ExtraBold.ttf) format("truetype")
} */

*,
:after,
:before {
  box-sizing: border-box;
  font: inherit;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
  tap-highlight-color: transparent
}

body,
html {
  min-height: 100%
}

html {
  font-size: 62.5%
}

img {
  background-repeat: no-repeat;
  background-size: cover;
  font-style: italic
}

canvas,
img,
picture,
svg,
video {
  display: block;
  width: 100%
}

h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
  text-wrap: pretty
}

p {
  text-wrap: pretty
}

a {
  color: inherit;
  text-decoration: none
}

i {
  font-style: italic
}

button {
  cursor: pointer
}

button:focus-visible {
  outline: none
}

form,
form input[type=email],
form input[type=number],
form input[type=password],
form input[type=text],
form select,
form textarea {
  width: 100%
}

select {
  appearance: none
}

li,
ol,
ul {
  line-height: 160%;
  list-style: none
}

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

@media(prefers-reduced-motion:no-preference) {
  :has(:target) {
    scroll-behavior: smooth;
    scroll-padding-top: 2rem
  }
}

:root {
  --default-border-radius: 0.8rem;
  --color-primary-foreground: #fff;
  --color-primary-50: var(--color-neutral-50);
  --color-primary-100: var(--color-neutral-100);
  --color-primary-200: var(--color-neutral-200);
  --color-primary-300: var(--color-neutral-300);
  --color-primary-350: var(--color-neutral-350);
  --color-primary-400: var(--color-neutral-400);
  --color-primary-450: var(--color-neutral-750);
  --color-primary-500: var(--color-neutral-800)
}

body {
  color: var(--color-neutral-900);
  font-family: var(--ff-inter);
  font-size: 1.6rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden
}

.color-primary-100 {
  color: var(--color-primary-100)
}

.color-primary-200 {
  color: var(--color-primary-200)
}

.color-primary-400 {
  color: var(--color-primary-400)
}

.color-primary-500 {
  color: var(--color-primary-500)
}

:root {
  --container-offset: 98%;
  --container-xs-width: min(320px, var(--container-offset));
  --container-sm-width: min(480px, var(--container-offset));
  --container-md-width: min(768px, var(--container-offset));
  --container-lg-width: min(1024px, var(--container-offset));
  --container-xl-width: min(1280px, var(--container-offset));
  --container-2xl-width: min(1440px, var(--container-offset));
  --container-3xl-width: min(1600px, var(--container-offset));
  --container-4xl-width: min(1800px, var(--container-offset));
  --container-5xl-width: min(1920px, var(--container-offset))
}

.container-xs {
  max-width: var(--container-xs-width)
}

.container-sm,
.container-xs {
  margin-left: auto;
  margin-right: auto;
  width: 100%
}

.container-sm {
  max-width: var(--container-sm-width)
}

.container-md {
  max-width: var(--container-md-width)
}

.container-lg,
.container-md {
  margin-left: auto;
  margin-right: auto;
  width: 100%
}

.container-lg {
  max-width: var(--container-lg-width)
}

.container-xl {
  max-width: var(--container-xl-width)
}

.container-2xl,
.container-xl {
  margin-left: auto;
  margin-right: auto;
  width: 100%
}

.container-2xl {
  max-width: var(--container-2xl-width)
}

.container-3xl {
  max-width: var(--container-3xl-width)
}

.container-3xl,
.container-4xl {
  margin-left: auto;
  margin-right: auto;
  width: 100%
}

.container-4xl {
  max-width: var(--container-4xl-width)
}

.container-5xl {
  margin-left: auto;
  margin-right: auto;
  max-width: var(--container-5xl-width);
  width: 100%
}

:root {
  --sidebar-xs-width: 16rem;
  --sidebar-sm-width: 20rem;
  --sidebar-md-width: 24rem;
  --sidebar-lg-width: 28rem;
  --sidebar-xl-width: 32rem
}

.sidebar-with-main {
  display: flex
}

.sidebar-with-main>.main {
  flex-grow: 1;
  width: 100%
}

.sidebar {
  flex-shrink: 0;
  height: 100vh;
  max-width: var(--sidebar-md-width);
  width: 100%
}

.sidebar-xs {
  max-width: var(--sidebar-xs-width)
}

.sidebar-sm {
  max-width: var(--sidebar-sm-width)
}

.sidebar-md {
  max-width: var(--sidebar-md-width)
}

.sidebar-lg {
  max-width: var(--sidebar-lg-width)
}

.sidebar-xl {
  max-width: var(--sidebar-xl-width)
}

.auth-layout {
  display: flex;
  min-height: 100vh
}

.auth-left {
  background: #fff;
  padding: 4rem 2rem
}

.auth-left,
.auth-right {
  align-items: center;
  display: flex;
  flex: 1;
  justify-content: center
}

.auth-right {
  background: linear-gradient(135deg, var(--color-primary-600) 0, var(--color-primary-800) 100%);
  overflow: hidden;
  position: relative
}

.auth-container {
  max-width: 40rem;
  padding: 0;
  width: 100%
}

.auth-info {
  align-items: center;
  bottom: 0;
  color: #fff;
  display: flex;
  justify-content: center;
  left: 0;
  padding: 2rem;
  position: absolute;
  text-align: center;
  width: 100%;
  z-index: 11
}

.auth-info p {
  max-width: 50rem
}

.auth-bg-pattern {
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0
}

.auth-bg-pattern img {
  height: 100%;
  object-fit: cover;
  width: 100%
}

.auth-overlay {
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 10
}

.auth-header {
  align-items: center;
  display: flex;
  flex-direction: column-reverse;
  gap: 2rem;
  justify-content: center;
  margin-bottom: 3rem;
  text-align: center
}

.auth-header .img-logo {
  max-width: 18rem;
}

.auth-title {
  color: var(--color-neutral-900);
  font-size: 2.4rem;
  font-weight: 600;
  margin-bottom: .8rem
}

.auth-subtitle {
  color: var(--color-neutral-600);
  font-size: 1.5rem;
  line-height: 1.5
}

.auth-footer {
  border-top: .1rem solid var(--color-neutral-200);
  margin-top: 3rem;
  padding-top: 3rem;
  text-align: center
}

.auth-footer p {
  color: var(--color-neutral-600);
  font-size: 1.4rem;
  margin-bottom: 1rem
}

.auth-footer a {
  color: var(--color-primary-600);
  font-weight: 500;
  text-decoration: none
}

.auth-footer a:hover {
  color: var(--color-primary-700);
  text-decoration: underline
}

.form-row {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin-bottom: 1.5rem
}

.checkbox-group {
  align-items: center;
  gap: .8rem
}

.checkbox-group input[type=checkbox] {
  height: 1.6rem;
  width: 1.6rem
}

.checkbox-group label {
  color: var(--color-neutral-700);
  font-size: 1.4rem
}

.forgot-password {
  color: var(--color-primary-600);
  font-size: 1.4rem;
  text-decoration: none
}

.forgot-password:hover {
  color: var(--color-primary-700);
  text-decoration: underline
}

.form-step {
  display: none
}

.form-step.active {
  display: block
}

.step-indicator {
  gap: 1rem;
  margin-bottom: 3rem
}

.step,
.step-indicator {
  display: flex;
  justify-content: center
}

.step {
  align-items: center;
  background: var(--color-neutral-200);
  border-radius: 50%;
  color: var(--color-neutral-600);
  font-size: 1.4rem;
  font-weight: 500;
  height: 3rem;
  width: 3rem
}

.step.active {
  background: var(--color-primary-500);
  color: #fff
}

.step.completed {
  background: var(--color-green-500);
  color: #fff
}

.password-requirements {
  background: var(--color-neutral-50);
  border: .1rem solid var(--color-neutral-200);
  border-radius: var(--default-border-radius);
  margin-top: 1rem;
  padding: 1.5rem
}

.password-requirements h4 {
  color: var(--color-neutral-700);
  font-size: 1.4rem;
  font-weight: 500;
  margin-bottom: .8rem
}

.requirements-list {
  list-style: none;
  margin: 0;
  padding: 0
}

.requirements-list li {
  align-items: center;
  color: var(--color-neutral-600);
  display: flex;
  font-size: 1.3rem;
  gap: .8rem;
  margin-bottom: .4rem
}

.requirements-list li:before {
  align-items: center;
  background: var(--color-neutral-300);
  border-radius: 50%;
  color: #fff;
  content: "✓";
  display: flex;
  flex-shrink: 0;
  font-size: 1.2rem;
  height: 1.6rem;
  justify-content: center;
  width: 1.6rem
}

.requirements-list li.valid:before {
  background: var(--color-green-500)
}

.code-input-group {
  display: flex;
  gap: 1rem;
  justify-content: center;
  margin: 2rem 0
}

.code-digit {
  background: #fff;
  border: .2rem solid var(--color-stone-200);
  border-radius: var(--default-border-radius);
  box-shadow: var(--shadow-sm);
  font-size: 2rem;
  font-weight: 500;
  height: 5rem;
  text-align: center;
  transition: all .15s ease;
  width: 5rem
}

.code-digit:focus {
  border-color: var(--color-primary-500);
  box-shadow: var(--ring-md-primary-300);
  outline: none
}

.code-digit.filled {
  background: var(--color-green-50);
  border-color: var(--color-green-500)
}

.success-message {
  display: none;
  padding: 2rem;
  text-align: center
}

.success-message.show {
  display: block
}

.success-message.alert {
  background-color: var(--color-green-50);
  border: .1rem solid var(--color-green-200);
  border-radius: var(--default-border-radius);
  color: var(--color-green-800);
  display: block;
  margin-bottom: 2rem;
  padding: 1.5rem
}

.success-icon {
  background: var(--color-green-100);
  color: var(--color-green-600)
}

.icon-key,
.icon-mail,
.icon-shield,
.success-icon {
  align-items: center;
  border-radius: 50%;
  display: flex;
  height: 6rem;
  justify-content: center;
  margin: 0 auto 2rem;
  padding: 1.5rem;
  width: 6rem
}

.icon-key,
.icon-mail,
.icon-mail-check,
.icon-shield {
  background: var(--color-primary-100);
  color: var(--color-primary-600)
}

.icon-mail-check {
  align-items: center;
  border-radius: 50%;
  display: flex;
  height: 6rem;
  justify-content: center;
  margin: 0 auto 2rem;
  padding: 1.5rem;
  width: 6rem
}

.email-display {
  background: var(--color-primary-50);
  border-radius: .4rem;
  color: var(--color-primary-700);
  display: inline-block;
  font-weight: 500;
  padding: .4rem .8rem
}

.verification-status {
  background: var(--color-orange-50);
  border: .1rem solid var(--color-orange-200);
  border-radius: var(--default-border-radius);
  margin: 2rem 0;
  padding: 2rem;
  text-align: center
}

.verification-status.success {
  background: var(--color-green-50);
  border-color: var(--color-green-200)
}

.verification-status.error {
  background: var(--color-red-50);
  border-color: var(--color-red-200)
}

.status-icon {
  align-items: center;
  border-radius: 50%;
  display: flex;
  height: 4rem;
  justify-content: center;
  margin: 0 auto 1rem;
  padding: .8rem;
  width: 4rem
}

.status-icon.warning {
  background: var(--color-orange-200);
  color: var(--color-orange-600)
}

.status-icon.success {
  background: var(--color-green-200);
  color: var(--color-green-600)
}

.status-icon.error {
  background: var(--color-red-200);
  color: var(--color-red-600)
}

.status-message {
  font-size: 1.5rem;
  font-weight: 500;
  margin-bottom: .5rem
}

.status-message.warning {
  color: var(--color-orange-800)
}

.status-message.success {
  color: var(--color-green-800)
}

.status-message.error {
  color: var(--color-red-800)
}

.status-description {
  color: var(--color-neutral-600);
  font-size: 1.4rem
}

.resend-section {
  margin: 3rem 0;
  text-align: center
}

.resend-info {
  background: var(--color-blue-50);
  border: .1rem solid var(--color-blue-200);
  border-radius: var(--default-border-radius);
  margin-top: 2rem;
  padding: 1.5rem;
  text-align: center
}

.resend-info p {
  color: var(--color-blue-800);
  font-size: 1.4rem;
  line-height: 1.5;
  margin: 0 0 1rem
}

.resend-timer {
  background: var(--color-neutral-100);
  border-radius: .4rem;
  color: var(--color-blue-600);
  color: var(--color-neutral-700);
  display: inline-block;
  font-weight: 500;
  margin-top: 1rem;
  padding: .5rem 1rem
}

.resend-button {
  background: none;
  border: none;
  color: var(--color-primary-600);
  cursor: pointer;
  font-weight: 500;
  text-decoration: underline
}

.resend-button:hover {
  color: var(--color-primary-700)
}

.resend-button:disabled {
  color: var(--color-neutral-400);
  cursor: not-allowed;
  text-decoration: none
}

@media (max-width:768px) {
  .auth-layout {
    flex-direction: column-reverse
  }

  .auth-right {
    min-height: 30vh;
    order: -1
  }

  .auth-left {
    padding: 2rem 1.5rem
  }

  .auth-info {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%)
  }

  .auth-image h2 {
    font-size: 2.4rem
  }

  .auth-image p {
    font-size: 1.6rem
  }

  .code-input-group {
    gap: .5rem
  }

  .code-digit {
    font-size: 1.8rem;
    height: 4rem;
    width: 4rem
  }
}

.label {
  display: block
}

.label>.required {
  color: var(--color-red-500)
}

.label-1 {
  font-size: var(--button-md-fs);
  font-weight: 500;
  margin-bottom: 1.1rem
}

.label-1.has-description {
  margin-bottom: .8rem
}

.label-1-xs {
  font-size: var(--button-xs-fs)
}

.label-1-sm {
  font-size: var(--button-sm-fs)
}

.label-1-md {
  font-size: var(--button-md-fs)
}

.label-1-lg {
  font-size: var(--button-lg-fs)
}

.label-1-xl {
  font-size: var(--button-xl-fs)
}

.label-1-description {
  font-size: var(--button-md-fs);
  font-weight: 400;
  margin-bottom: 1rem
}

.label-1-description-xs {
  font-size: var(--button-xs-fs)
}

.label-1-description-sm {
  font-size: var(--button-sm-fs)
}

.label-1-description-md {
  font-size: var(--button-md-fs)
}

.label-1-description-lg {
  font-size: var(--button-lg-fs)
}

.label-1-description-xl {
  font-size: var(--button-xl-fs)
}

.input {
  width: 100%
}

.input-1 {
  background-color: #fff;
  border: .1rem solid var(--color-neutral-200);
  border-radius: var(--default-border-radius);
  box-shadow: var(--shadow-sm);
  color: var(--color-neutral-700);
  font-size: var(--button-md-fs);
  padding: var(--button-md-y-padding) var(--button-md-x-padding)
}

.input-1:focus-visible {
  outline: .2rem solid var(--color-neutral-400)
}

.input-1-xs {
  font-size: var(--button-xs-fs);
  padding: var(--button-xs-y-padding) var(--button-xs-x-padding)
}

.input-1-sm {
  font-size: var(--button-sm-fs);
  padding: var(--button-sm-y-padding) var(--button-sm-x-padding)
}

.input-1-md {
  font-size: var(--button-md-fs);
  padding: var(--button-md-y-padding) var(--button-md-x-padding)
}

.input-1-lg {
  font-size: var(--button-lg-fs);
  padding: var(--button-lg-y-padding) var(--button-lg-x-padding)
}

.input-1-xl {
  font-size: var(--button-xl-fs);
  padding: var(--button-xl-y-padding) var(--button-xl-x-padding)
}

input[type=password] {
  font-family: Arial, sans-serif
}

.input-group {
  align-items: stretch;
  display: flex;
  flex-wrap: wrap;
  position: relative;
  width: 100%
}

.input-group>.input-1 {
  flex: 1 1 auto;
  min-width: 0;
  position: relative;
  width: 1%
}

.input-group>.input-1:not(:first-child) {
  margin-left: -.1rem
}

.input-group>.input-1:not(:first-child):not(:last-child) {
  border-radius: 0
}

.input-group>.input-1:first-child:not(:last-child) {
  border-bottom-right-radius: 0;
  border-top-right-radius: 0
}

.input-group>.input-1:last-child:not(:first-child) {
  border-bottom-left-radius: 0;
  border-top-left-radius: 0
}

.input-group-addon {
  align-items: center;
  background-color: var(--color-neutral-100);
  border: .1rem solid var(--color-neutral-200);
  color: var(--color-neutral-600);
  display: flex;
  font-size: var(--button-md-fs);
  font-weight: 400;
  line-height: 1;
  padding: var(--button-md-y-padding) var(--button-md-x-padding);
  text-align: center;
  white-space: nowrap
}

.input-group-addon:first-child {
  border-radius: var(--default-border-radius) 0 0 var(--default-border-radius);
  border-right: 0
}

.input-group-addon:last-child {
  border-left: 0;
  border-radius: 0 var(--default-border-radius) var(--default-border-radius) 0
}

.input-group-icon {
  align-items: center;
  background-color: var(--color-neutral-50);
  border: .1rem solid var(--color-neutral-200);
  color: var(--color-neutral-500);
  display: flex;
  justify-content: center;
  padding: var(--button-md-y-padding) var(--button-md-x-padding)
}

.input-group-icon:first-child {
  border-radius: var(--default-border-radius) 0 0 var(--default-border-radius);
  border-right: 0
}

.input-group-icon:last-child {
  border-left: 0;
  border-radius: 0 var(--default-border-radius) var(--default-border-radius) 0
}

.input-group-icon .icon {
  height: 1.6rem;
  width: 1.6rem
}

.input-group .button {
  position: relative;
  z-index: 2
}

.input-group .button:first-child {
  border-bottom-right-radius: 0;
  border-top-right-radius: 0
}

.input-group .button:last-child {
  border-bottom-left-radius: 0;
  border-top-left-radius: 0
}

.input-group .button:not(:first-child):not(:last-child) {
  border-radius: 0
}

.input-group-xs .input-group-addon,
.input-group-xs .input-group-icon {
  font-size: var(--button-xs-fs);
  padding: var(--button-xs-y-padding) var(--button-xs-x-padding)
}

.input-group-xs .input-group-icon .icon {
  height: 1.4rem;
  width: 1.4rem
}

.input-group-sm .input-group-addon,
.input-group-sm .input-group-icon {
  font-size: var(--button-sm-fs);
  padding: var(--button-sm-y-padding) var(--button-sm-x-padding)
}

.input-group-sm .input-group-icon .icon {
  height: 1.5rem;
  width: 1.5rem
}

.input-group-lg .input-group-addon,
.input-group-lg .input-group-icon {
  font-size: var(--button-lg-fs);
  padding: var(--button-lg-y-padding) var(--button-lg-x-padding)
}

.input-group-lg .input-group-icon .icon {
  height: 1.8rem;
  width: 1.8rem
}

.input-group-xl .input-group-addon,
.input-group-xl .input-group-icon {
  font-size: var(--button-xl-fs);
  padding: var(--button-xl-y-padding) var(--button-xl-x-padding)
}

.input-group-xl .input-group-icon .icon {
  height: 2rem;
  width: 2rem
}

.color-input {
  align-items: stretch;
  background-color: #fff;
  border: .1rem solid var(--color-neutral-200);
  border-radius: var(--default-border-radius);
  box-shadow: var(--shadow-sm);
  display: flex;
  overflow: hidden
}

.color-input:focus-within {
  outline: .2rem solid var(--color-neutral-400)
}

.color-input-text {
  flex: 1;
  font-size: var(--button-md-fs);
  padding: var(--button-md-y-padding) var(--button-md-x-padding)
}

.color-input-swatch,
.color-input-text {
  background: transparent;
  border: none;
  outline: none
}

.color-input-swatch {
  cursor: pointer;
  height: auto;
  padding: .2rem;
  width: 4rem
}

.color-input-swatch::-webkit-color-swatch-wrapper {
  overflow: hidden;
  padding: 0
}

.color-input-swatch::-webkit-color-swatch,
.color-input-swatch::-webkit-color-swatch-wrapper {
  border: none;
  border-radius: calc(var(--default-border-radius) - .2rem)
}

.color-input-swatch::-moz-color-swatch {
  border: none;
  border-radius: calc(var(--default-border-radius) - .2rem)
}

.color-input-xs .color-input-text {
  font-size: var(--button-xs-fs);
  padding: var(--button-xs-y-padding) var(--button-xs-x-padding)
}

.color-input-xs .color-input-swatch {
  width: 3.2rem
}

.color-input-sm .color-input-text {
  font-size: var(--button-sm-fs);
  padding: var(--button-sm-y-padding) var(--button-sm-x-padding)
}

.color-input-sm .color-input-swatch {
  width: 3.6rem
}

.color-input-lg .color-input-text {
  font-size: var(--button-lg-fs);
  padding: var(--button-lg-y-padding) var(--button-lg-x-padding)
}

.color-input-lg .color-input-swatch {
  width: 4.8rem
}

.color-input-xl .color-input-text {
  font-size: var(--button-xl-fs);
  padding: var(--button-xl-y-padding) var(--button-xl-x-padding)
}

.color-input-xl .color-input-swatch {
  width: 5.2rem
}

.input-field {
  display: inline-block;
  position: relative;
  width: 100%
}

.input-field input {
  width: 100%
}

.input-field.has-icon-left input {
  padding-left: 4.5rem
}

.input-field.has-icon-left .input-icon {
  left: 1.2rem
}

.input-field.has-icon-right input {
  padding-right: 4.5rem
}

.input-field.has-icon-right .input-icon {
  right: 1.2rem
}

.input-icon {
  align-items: center;
  background-color: transparent;
  border: none;
  color: var(--color-neutral-500);
  display: flex;
  justify-content: center;
  pointer-events: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1
}

.input-icon svg {
  height: 1.8rem;
  width: 1.8rem
}

.input-icon.interactive {
  border-radius: .4rem;
  cursor: pointer;
  padding: .4rem;
  pointer-events: auto;
  transition: all .15s ease
}

.input-icon.interactive:hover {
  background: var(--color-neutral-100);
  color: var(--color-neutral-700)
}

.input-icon.interactive:focus {
  background: var(--color-primary-50);
  color: var(--color-primary-600);
  outline: none
}

.input-icon.icon-primary {
  color: var(--color-primary-500)
}

.input-icon.icon-success {
  color: var(--color-green-500)
}

.input-icon.icon-warning {
  color: var(--color-orange-500)
}

.input-icon.icon-danger {
  color: var(--color-red-500)
}

.input-field.input-sm .input-icon svg {
  height: 1.6rem;
  width: 1.6rem
}

.input-field.input-sm.has-icon-left input {
  padding-left: 4rem
}

.input-field.input-sm.has-icon-right input {
  padding-right: 4rem
}

.input-field.input-sm.has-icon-left .input-icon {
  left: 1rem
}

.input-field.input-sm.has-icon-right .input-icon {
  right: 1rem
}

.input-field.input-lg .input-icon svg {
  height: 2rem;
  width: 2rem
}

.input-field.input-lg.has-icon-left input {
  padding-left: 5rem
}

.input-field.input-lg.has-icon-right input {
  padding-right: 5rem
}

.input-field.input-lg.has-icon-left .input-icon {
  left: 1.4rem
}

.input-field.input-lg.has-icon-right .input-icon {
  right: 1.4rem
}

.input-field input:focus+.input-icon,
.input-field input:focus~.input-icon {
  color: var(--color-primary-500)
}

.input-field input:focus+.input-icon.interactive,
.input-field input:focus~.input-icon.interactive {
  color: var(--color-primary-600)
}

.input-field.has-error input {
  border-color: var(--color-red-500)
}

.input-field.has-error .input-icon {
  color: var(--color-red-500)
}

.input-field.has-success input {
  border-color: var(--color-green-500)
}

.input-field.has-success .input-icon {
  color: var(--color-green-500)
}

.select-wrapper {
  display: inline-block;
  position: relative;
  width: 100%
}

.select-wrapper select {
  appearance: none;
  cursor: pointer;
  padding-right: 4rem;
  width: 100%
}

.select-wrapper:after {
  content: url(../assets/select-chevron-dark.png);
  display: block;
  pointer-events: none;
  position: absolute;
  right: 1.4rem;
  top: calc(50% + .1rem);
  transform: translateY(-50%)
}

.select-wrapper.select-sm:after {
  border-left: .4rem solid transparent;
  border-right: .4rem solid transparent;
  border-top: .4rem solid var(--color-neutral-500);
  right: 1rem
}

.select-wrapper.select-lg:after {
  border-left: .6rem solid transparent;
  border-right: .6rem solid transparent;
  border-top: .6rem solid var(--color-neutral-500);
  right: 1.4rem
}

.select-wrapper.select-xl:after {
  border-left: .7rem solid transparent;
  border-right: .7rem solid transparent;
  border-top: .7rem solid var(--color-neutral-500);
  right: 1.6rem
}

.select-wrapper.has-error:after {
  border-top-color: var(--color-red-500)
}

.select-wrapper.has-success:after {
  border-top-color: var(--color-green-500)
}

.select-wrapper select:focus+.select-wrapper:after,
.select-wrapper select:focus~.select-wrapper:after {
  border-top-color: var(--color-primary-500)
}

.checkbox {
  align-items: center;
  cursor: pointer;
  display: inline-flex;
  gap: .8rem;
  position: relative;
  user-select: none
}

.checkbox input[type=checkbox] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  border: none;
  height: 0;
  margin: 0;
  opacity: 0;
  outline: none;
  padding: 0;
  position: absolute;
  width: 0
}

.checkbox-indicator {
  align-items: center;
  background: #fff;
  border: .2rem solid var(--color-neutral-300);
  border-radius: .4rem;
  display: flex;
  flex-shrink: 0;
  height: 1.6rem;
  justify-content: center;
  position: relative;
  transition: all .15s ease;
  width: 1.6rem
}

.checkbox input[type=checkbox]:focus-visible+.checkbox-indicator {
  border-color: var(--color-primary-500);
  box-shadow: 0 0 0 .2rem var(--color-primary-200);
  outline: none
}

.checkbox:hover .checkbox-indicator {
  border-color: var(--color-neutral-400)
}

.checkbox input[type=checkbox]:checked+.checkbox-indicator {
  background: var(--color-primary-500);
  border-color: var(--color-primary-500)
}

.checkbox input[type=checkbox]:disabled+.checkbox-indicator {
  background: var(--color-neutral-100);
  border-color: var(--color-neutral-200);
  cursor: not-allowed;
  opacity: .5
}

.checkbox input[type=checkbox]:disabled:hover+.checkbox-indicator {
  border-color: var(--color-neutral-200)
}

.checkbox input[type=checkbox]:disabled:checked+.checkbox-indicator {
  background: var(--color-neutral-300);
  border-color: var(--color-neutral-300)
}

.checkbox input[type=checkbox]:disabled~.checkbox-label {
  color: var(--color-neutral-400);
  cursor: not-allowed
}

.checkbox-icon {
  color: var(--color-white);
  height: 1rem;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  transform: scale(.8);
  transition: all .15s ease;
  width: 1rem
}

.checkbox input[type=checkbox]:checked+.checkbox-indicator .checkbox-icon {
  opacity: 1;
  transform: scale(1)
}

.checkbox input[type=checkbox]:checked:hover+.checkbox-indicator .checkbox-icon {
  color: var(--color-white);
  opacity: 1;
  transform: scale(1)
}

.checkbox-label {
  color: var(--color-neutral-900);
  cursor: pointer;
  font-size: 1.4rem;
  line-height: 1.5
}

.checkbox input[type=checkbox]:disabled+.checkbox-indicator+.checkbox-label {
  color: var(--color-neutral-400);
  cursor: not-allowed
}

.checkbox-xs .checkbox-indicator {
  border-radius: .3rem;
  height: 1.4rem;
  width: 1.4rem
}

.checkbox-xs .checkbox-icon {
  height: .8rem;
  width: .8rem
}

.checkbox-xs .checkbox-label {
  font-size: 1.2rem
}

.checkbox-sm .checkbox-indicator {
  border-radius: .35rem;
  height: 1.5rem;
  width: 1.5rem
}

.checkbox-sm .checkbox-icon {
  height: .9rem;
  width: .9rem
}

.checkbox-sm .checkbox-label {
  font-size: 1.3rem
}

.checkbox-md .checkbox-indicator {
  border-radius: .4rem;
  height: 1.6rem;
  width: 1.6rem
}

.checkbox-md .checkbox-icon {
  height: 1rem;
  width: 1rem
}

.checkbox-md .checkbox-label {
  font-size: 1.4rem
}

.checkbox-lg .checkbox-indicator {
  border-radius: .5rem;
  height: 1.8rem;
  width: 1.8rem
}

.checkbox-lg .checkbox-icon {
  height: 1.2rem;
  width: 1.2rem
}

.checkbox-lg .checkbox-label {
  font-size: 1.5rem
}

.checkbox-xl .checkbox-indicator {
  border-radius: .6rem;
  height: 2rem;
  width: 2rem
}

.checkbox-xl .checkbox-icon {
  height: 1.4rem;
  width: 1.4rem
}

.checkbox-xl .checkbox-label {
  font-size: 1.6rem
}

.checkbox-success input[type=checkbox]:checked+.checkbox-indicator {
  background: var(--color-green-500);
  border-color: var(--color-green-500)
}

.checkbox-success input[type=checkbox]:checked:hover+.checkbox-indicator {
  background: var(--color-green-600);
  border-color: var(--color-green-600)
}

.checkbox-warning input[type=checkbox]:checked+.checkbox-indicator {
  background: var(--color-orange-500);
  border-color: var(--color-orange-500)
}

.checkbox-warning input[type=checkbox]:checked:hover+.checkbox-indicator {
  background: var(--color-orange-600);
  border-color: var(--color-orange-600)
}

.checkbox-danger input[type=checkbox]:checked+.checkbox-indicator {
  background: var(--color-red-500);
  border-color: var(--color-red-500)
}

.checkbox-danger input[type=checkbox]:checked:hover+.checkbox-indicator {
  background: var(--color-red-600);
  border-color: var(--color-red-600)
}

.checkbox input[type=checkbox]:indeterminate+.checkbox-indicator {
  background: var(--color-primary-600);
  border-color: var(--color-primary-600)
}

.checkbox input[type=checkbox]:indeterminate+.checkbox-indicator .checkbox-icon {
  opacity: 1;
  transform: scale(1)
}

@keyframes checkbox-check {
  0% {
    opacity: 0;
    transform: scale(.5)
  }

  to {
    opacity: 1;
    transform: scale(1)
  }
}

.checkbox input[type=checkbox]:checked+.checkbox-indicator .checkbox-icon {
  animation: checkbox-check .15s ease
}

.checkbox-group {
  display: flex;
  flex-direction: column;
  gap: 1rem
}

.checkbox-group.horizontal {
  align-items: center;
  flex-direction: row;
  gap: 2rem
}

.checkbox-group .checkbox:not(:last-child) {
  margin-bottom: 0
}

.form-group .checkbox-group {
  margin-top: .5rem
}

.form-group .checkbox-group .checkbox {
  margin-bottom: .8rem
}

.radio {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  cursor: pointer;
  user-select: none;
  position: relative;
}

.radio input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  margin: 0;
  padding: 0;
  border: none;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

.radio-indicator {
  position: relative;
  width: 1.6rem;
  height: 1.6rem;
  border: 0.2rem solid var(--color-neutral-300);
  border-radius: 50%;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 150ms ease;
  flex-shrink: 0;
}

.radio input[type="radio"]:focus-visible+.radio-indicator {
  outline: none;
  border-color: var(--color-primary-500);
  box-shadow: 0 0 0 0.2rem var(--color-primary-200);
}

.radio:hover .radio-indicator {
  border-color: var(--color-neutral-400);
}

.radio input[type="radio"]:checked+.radio-indicator {
  background: var(--color-primary-500);
  border-color: var(--color-primary-500);
}

.radio input[type="radio"]:disabled+.radio-indicator {
  opacity: 0.5;
  cursor: not-allowed;
  background: var(--color-neutral-100);
  border-color: var(--color-neutral-200);
}

.radio input[type="radio"]:disabled:hover+.radio-indicator {
  border-color: var(--color-neutral-200);
}

.radio input[type="radio"]:disabled:checked+.radio-indicator {
  background: var(--color-neutral-300);
  border-color: var(--color-neutral-300);
}

.radio input[type="radio"]:disabled~.radio-label {
  color: var(--color-neutral-400);
  cursor: not-allowed;
}

.radio-dot {
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background: white;
  opacity: 0;
  transform: scale(0.5);
  transition: all 150ms ease;
}

.radio input[type="radio"]:checked+.radio-indicator .radio-dot {
  opacity: 1;
  transform: scale(1);
}

.radio input[type="radio"]:disabled:checked+.radio-indicator .radio-dot {
  background: white;
}

.radio-label {
  font-size: 1.4rem;
  color: var(--color-neutral-900);
  line-height: 1.5;
  cursor: pointer;
}

/* Animation */
@keyframes radio-select {
  0% {
    opacity: 0;
    transform: scale(0.3);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.radio input[type="radio"]:checked+.radio-indicator .radio-dot {
  animation: radio-select 150ms ease;
}

/* Size variants */
.radio-xs .radio-indicator {
  width: 1.4rem;
  height: 1.4rem;
}

.radio-xs .radio-dot {
  width: 0.5rem;
  height: 0.5rem;
}

.radio-xs .radio-label {
  font-size: 1.2rem;
}

.radio-sm .radio-indicator {
  width: 1.5rem;
  height: 1.5rem;
}

.radio-sm .radio-dot {
  width: 0.55rem;
  height: 0.55rem;
}

.radio-sm .radio-label {
  font-size: 1.3rem;
}

.radio-md .radio-indicator {
  width: 1.6rem;
  height: 1.6rem;
}

.radio-md .radio-dot {
  width: 0.6rem;
  height: 0.6rem;
}

.radio-md .radio-label {
  font-size: 1.4rem;
}

.radio-lg .radio-indicator {
  width: 1.8rem;
  height: 1.8rem;
}

.radio-lg .radio-dot {
  width: 0.7rem;
  height: 0.7rem;
}

.radio-lg .radio-label {
  font-size: 1.5rem;
}

.radio-xl .radio-indicator {
  width: 2rem;
  height: 2rem;
}

.radio-xl .radio-dot {
  width: 0.8rem;
  height: 0.8rem;
}

.radio-xl .radio-label {
  font-size: 1.6rem;
}

/* Color variants */
.radio-success input[type="radio"]:checked+.radio-indicator {
  background: var(--color-green-500);
  border-color: var(--color-green-500);
}

.radio-success input[type="radio"]:checked:hover+.radio-indicator {
  background: var(--color-green-600);
  border-color: var(--color-green-600);
}

.radio-warning input[type="radio"]:checked+.radio-indicator {
  background: var(--color-orange-500);
  border-color: var(--color-orange-500);
}

.radio-warning input[type="radio"]:checked:hover+.radio-indicator {
  background: var(--color-orange-600);
  border-color: var(--color-orange-600);
}

.radio-danger input[type="radio"]:checked+.radio-indicator {
  background: var(--color-red-500);
  border-color: var(--color-red-500);
}

.radio-danger input[type="radio"]:checked:hover+.radio-indicator {
  background: var(--color-red-600);
  border-color: var(--color-red-600);
}

/* Group styling */
.radio-group {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.radio-group.horizontal {
  flex-direction: row;
  align-items: center;
  gap: 2rem;
}

/* Form integration */
.form-group .radio-group {
  margin-top: 0.5rem;
}

.form-group .radio-group .radio {
  margin-bottom: 0.8rem;
}


:root {
  --button-micro-fs: 1rem;
  --button-micro-x-padding: 0.4rem;
  --button-micro-y-padding: 0.2rem;
  --button-micro-gap: 0.4rem;
  --button-micro-size: 2rem;
  --button-xxs-fs: 1.1rem;
  --button-xxs-x-padding: 0.6rem;
  --button-xxs-y-padding: 0.3rem;
  --button-xxs-gap: 0.5rem;
  --button-xxs-size: 2.4rem;
  --button-xs-fs: 1.2rem;
  --button-xs-x-padding: 0.8rem;
  --button-xs-y-padding: 0.4rem;
  --button-xs-gap: 0.6rem;
  --button-xs-size: 2.7rem;
  --button-sm-fs: 1.4rem;
  --button-sm-x-padding: 1.2rem;
  --button-sm-y-padding: 0.6rem;
  --button-sm-gap: 0.8rem;
  --button-sm-size: 3.4rem;
  --button-md-fs: 1.5rem;
  --button-md-x-padding: 1.4rem;
  --button-md-y-padding: 0.8rem;
  --button-md-gap: 1rem;
  --button-md-size: 4rem;
  --button-lg-fs: 1.6rem;
  --button-lg-x-padding: 1.6rem;
  --button-lg-y-padding: 0.9rem;
  --button-lg-gap: 1.2rem;
  --button-lg-size: 4.3rem;
  --button-xl-fs: 1.7rem;
  --button-xl-x-padding: 1.8rem;
  --button-xl-y-padding: 1rem;
  --button-xl-gap: 1.4rem;
  --button-xl-size: 4.7rem
}

.button {
  align-items: center;
  background-color: var(--color-neutral-100);
  border: .1rem solid transparent;
  border-radius: var(--default-border-radius);
  color: var(--color-neutral-700);
  cursor: pointer;
  display: inline-flex;
  font-size: var(--button-md-fs);
  font-weight: 500;
  gap: 1rem;
  justify-content: center;
  padding: var(--button-md-y-padding) var(--button-md-x-padding);
  transition: all .12s;
  white-space: nowrap
}

.button.active,
.button:hover {
  background-color: var(--color-neutral-150)
}

.button:focus-visible {
  box-shadow: var(--ring-md-stone-300)
}

.button:visited {
  text-decoration: underline
}

.button[disabled],
.button[disabled]:hover,
.button[disabled]:visited {
  background-color: var(--color-neutral-100);
  color: var(--color-neutral-400);
  cursor: unset
}

.button-border {
  background-color: transparent;
  border-color: var(--color-neutral-200)
}

.button-border.active,
.button-border:hover {
  background-color: var(--color-neutral-100)
}

.button-border[disabled],
.button-border[disabled]:hover,
.button-border[disabled]:visited {
  background-color: var(--color-neutral-100);
  border-color: var(--color-neutral-350);
  color: var(--color-neutral-400)
}

.button-ghost {
  background-color: transparent
}

.button-ghost.active,
.button-ghost:hover {
  background-color: var(--color-neutral-100)
}

.button-ghost[disabled],
.button-ghost[disabled]:hover,
.button-ghost[disabled]:visited {
  background-color: var(--color-neutral-50);
  color: var(--color-neutral-400)
}

.button-link {
  background-color: transparent
}

.button-link.active,
.button-link:hover {
  background-color: transparent;
  text-decoration: underline
}

.button-subtle {
  background-color: transparent;
  color: var(--color-stone-450)
}

.button-subtle.active,
.button-subtle:hover {
  background-color: var(--color-neutral-100);
  color: var(--color-neutral-700)
}

.button-link[disabled],
.button-link[disabled]:hover,
.button-link[disabled]:visited,
.button-subtle[disabled],
.button-subtle[disabled]:hover,
.button-subtle[disabled]:visited {
  background-color: var(--color-neutral-50);
  color: var(--color-neutral-400);
  text-decoration: none
}

.button-primary {
  background-color: var(--color-primary-500);
  color: var(--color-primary-foreground)
}

.button-primary.active,
.button-primary:hover {
  background-color: var(--color-primary-450);
  color: var(--color-primary-foreground)
}

.button-primary:focus-visible {
  box-shadow: var(--ring-md-primary-300)
}

.button-primary[disabled],
.button-primary[disabled]:hover,
.button-primary[disabled]:visited {
  background-color: var(--color-primary-350);
  color: var(--color-primary-foreground)
}

.button-primary-border {
  background-color: transparent;
  border-color: var(--color-primary-500);
  color: var(--color-primary-500)
}

.button-primary-border.active,
.button-primary-border:hover {
  background-color: var(--color-primary-100);
  color: var(--color-primary-500)
}

.button-primary-border[disabled],
.button-primary-border[disabled]:active,
.button-primary-border[disabled]:hover {
  background-color: var(--color-primary-50);
  border-color: var(--color-primary-350);
  color: var(--color-primary-350)
}

.button-primary-ghost {
  background-color: transparent;
  color: var(--color-primary-500)
}

.button-primary-ghost.active,
.button-primary-ghost:hover {
  background-color: var(--color-primary-100);
  color: var(--color-primary-500)
}

.button-primary-ghost[disabled],
.button-primary-ghost[disabled]:active,
.button-primary-ghost[disabled]:hover {
  background-color: var(--color-primary-50);
  color: var(--color-primary-350)
}

.button-primary-link {
  background-color: transparent;
  color: var(--color-primary-450)
}

.button-primary-subtle {
  background-color: transparent;
  color: var(--color-primary-400)
}

.button-primary-subtle.active,
.button-primary-subtle:hover {
  background-color: var(--color-primary-100);
  color: var(--color-primary-500)
}

.button-primary-link[disabled],
.button-primary-link[disabled]:active,
.button-primary-link[disabled]:hover,
.button-primary-subtle[disabled],
.button-primary-subtle[disabled]:active,
.button-primary-subtle[disabled]:hover {
  background-color: var(--color-primary-50);
  color: var(--color-primary-350)
}

.button-primary-light {
  background-color: var(--color-primary-100);
  color: var(--color-primary-500)
}

.button-primary-light:active,
.button-primary-light:hover {
  background-color: var(--color-primary-150);
  color: var(--color-primary-500)
}

.button-danger {
  background-color: var(--color-red-600);
  color: var(--color-white)
}

.button-danger.active,
.button-danger:hover {
  background-color: var(--color-red-550);
  color: var(--color-white)
}

.button-danger[disabled],
.button-danger[disabled]:hover,
.button-danger[disabled]:visited {
  background-color: var(--color-red-350);
  color: var(--color-white);
  cursor: unset
}

.button-danger-border {
  background-color: transparent;
  border-color: var(--color-red-600);
  color: var(--color-red-600)
}

.button-danger-border.active,
.button-danger-border:hover {
  background-color: var(--color-red-50)
}

.button-danger-border[disabled],
.button-danger-border[disabled]:active,
.button-danger-border[disabled]:hover {
  background-color: var(--color-red-50);
  border-color: var(--color-red-350);
  color: var(--color-red-350)
}

.button-danger-ghost {
  background-color: transparent;
  color: var(--color-red-600)
}

.button-danger-ghost.active,
.button-danger-ghost:hover {
  background-color: var(--color-red-50)
}

.button-danger-ghost[disabled],
.button-danger-ghost[disabled]:active,
.button-danger-ghost[disabled]:hover {
  background-color: var(--color-red-50);
  color: var(--color-red-350)
}

.button-danger-link {
  background-color: transparent;
  color: var(--color-red-600)
}

.button-danger-subtle {
  background-color: transparent;
  color: var(--color-red-400)
}

.button-danger-subtle.active,
.button-danger-subtle:hover {
  background-color: var(--color-red-50);
  color: var(--color-red-600)
}

.button-danger-link[disabled],
.button-danger-link[disabled]:active,
.button-danger-link[disabled]:hover,
.button-danger-subtle[disabled],
.button-danger-subtle[disabled]:active,
.button-danger-subtle[disabled]:hover {
  background-color: var(--color-red-50);
  color: var(--color-red-350)
}

.button-warning {
  background-color: var(--color-orange-400);
  color: var(--color-white)
}

.button-warning.active,
.button-warning:hover {
  background-color: var(--color-orange-350);
  color: var(--color-white)
}

.button-warning[disabled],
.button-warning[disabled]:hover,
.button-warning[disabled]:visited {
  background-color: var(--color-orange-250);
  color: var(--color-white);
  cursor: unset
}

.button-warning-border {
  background-color: transparent;
  border-color: var(--color-orange-400);
  color: var(--color-orange-400)
}

.button-warning-border.active,
.button-warning-border:hover {
  background-color: var(--color-orange-50)
}

.button-warning-border[disabled],
.button-warning-border[disabled]:active,
.button-warning-border[disabled]:hover {
  background-color: var(--color-orange-50);
  border-color: var(--color-orange-250);
  color: var(--color-orange-250)
}

.button-warning-ghost {
  background-color: transparent;
  color: var(--color-orange-400)
}

.button-warning-ghost.active,
.button-warning-ghost:hover {
  background-color: var(--color-orange-50)
}

.button-warning-ghost[disabled],
.button-warning-ghost[disabled]:active,
.button-warning-ghost[disabled]:hover {
  background-color: var(--color-orange-50);
  color: var(--color-orange-250)
}

.button-warning-link {
  background-color: transparent;
  color: var(--color-orange-400)
}

.button-warning-subtle {
  background-color: transparent;
  color: var(--color-orange-300)
}

.button-warning-subtle.active,
.button-warning-subtle:hover {
  background-color: var(--color-orange-50);
  color: var(--color-orange-400)
}

.button-warning-link[disabled],
.button-warning-link[disabled]:active,
.button-warning-link[disabled]:hover,
.button-warning-subtle[disabled],
.button-warning-subtle[disabled]:active,
.button-warning-subtle[disabled]:hover {
  background-color: var(--color-orange-50);
  color: var(--color-orange-250)
}

.button-success {
  background-color: var(--color-green-600);
  color: var(--color-white)
}

.button-success.active,
.button-success:hover {
  background-color: var(--color-green-550);
  color: var(--color-white)
}

.button-success[disabled],
.button-success[disabled]:hover,
.button-success[disabled]:visited {
  background-color: var(--color-green-350);
  color: var(--color-white);
  cursor: unset
}

.button-success-border {
  background-color: transparent;
  border-color: var(--color-green-600);
  color: var(--color-green-600)
}

.button-success-border.active,
.button-success-border:hover {
  background-color: var(--color-green-50)
}

.button-success-border[disabled],
.button-success-border[disabled]:active,
.button-success-border[disabled]:hover {
  background-color: var(--color-green-50);
  border-color: var(--color-green-350);
  color: var(--color-green-350)
}

.button-success-ghost {
  background-color: transparent;
  color: var(--color-green-600)
}

.button-success-ghost.active,
.button-success-ghost:hover {
  background-color: var(--color-green-50)
}

.button-success-ghost[disabled],
.button-success-ghost[disabled]:active,
.button-success-ghost[disabled]:hover {
  background-color: var(--color-green-50);
  color: var(--color-green-350)
}

.button-success-link {
  background-color: transparent;
  color: var(--color-green-600)
}

.button-success-subtle {
  background-color: transparent;
  color: var(--color-green-400)
}

.button-success-subtle.active,
.button-success-subtle:hover {
  background-color: var(--color-green-50);
  color: var(--color-green-600)
}

.button-success-link[disabled],
.button-success-link[disabled]:active,
.button-success-link[disabled]:hover,
.button-success-subtle[disabled],
.button-success-subtle[disabled]:active,
.button-success-subtle[disabled]:hover {
  background-color: var(--color-green-50);
  color: var(--color-green-350)
}

.button-micro {
  font-size: var(--button-micro-fs);
  gap: var(--button-micro-gap);
  padding: var(--button-micro-y-padding) var(--button-micro-x-padding)
}

.button-xxs {
  font-size: var(--button-xxs-fs);
  gap: var(--button-xxs-gap);
  padding: var(--button-xxs-y-padding) var(--button-xxs-x-padding)
}

.button-xs {
  font-size: var(--button-xs-fs);
  gap: var(--button-xs-gap);
  padding: var(--button-xs-y-padding) var(--button-xs-x-padding)
}

.button-sm {
  font-size: var(--button-sm-fs);
  gap: var(--button-sm-gap);
  padding: var(--button-sm-y-padding) var(--button-sm-x-padding)
}

.button-md {
  font-size: var(--button-md-fs);
  gap: var(--button-md-gap);
  padding: var(--button-md-y-padding) var(--button-md-x-padding)
}

.button-lg {
  font-size: var(--button-lg-fs);
  gap: var(--button-lg-gap);
  padding: var(--button-lg-y-padding) var(--button-lg-x-padding)
}

.button-xl {
  font-size: var(--button-xl-fs);
  gap: var(--button-xl-gap);
  padding: var(--button-xl-y-padding) var(--button-xl-x-padding)
}

.button-icon {
  align-items: center;
  display: flex;
  justify-content: center
}

.button-icon.button-micro {
  height: var(--button-micro-size);
  padding: var(--button-micro-y-padding);
  width: var(--button-micro-size)
}

.button-icon.button-micro .icon {
  height: var(--button-micro-fs);
  width: var(--button-micro-fs)
}

.button-icon.button-xxs {
  height: var(--button-xxs-size);
  padding: var(--button-xxs-y-padding);
  width: var(--button-xxs-size)
}

.button-icon.button-xxs .icon {
  height: calc(var(--button-xxs-fs) + var(--button-xxs-fs)*.1);
  width: calc(var(--button-xxs-fs) + var(--button-xxs-fs)*.1)
}

.button-icon.button-xs {
  height: var(--button-xs-size);
  padding: var(--button-xs-y-padding);
  width: var(--button-xs-size)
}

.button-icon.button-xs .icon {
  height: calc(var(--button-xs-fs) + var(--button-xs-fs)*.2);
  width: calc(var(--button-xs-fs) + var(--button-xs-fs)*.2)
}

.button-icon.button-sm {
  height: var(--button-sm-size);
  padding: var(--button-sm-y-padding);
  width: var(--button-sm-size)
}

.button-icon.button-sm .icon {
  height: calc(var(--button-sm-fs) + var(--button-sm-fs)*.3);
  width: calc(var(--button-sm-fs) + var(--button-sm-fs)*.3)
}

.button-icon.button-md {
  height: var(--button-md-size);
  padding: var(--button-md-y-padding);
  width: var(--button-md-size)
}

.button-icon.button-md .icon {
  height: calc(var(--button-md-fs) + var(--button-md-fs)*.4);
  width: calc(var(--button-md-fs) + var(--button-md-fs)*.4)
}

.button-icon.button-lg {
  height: var(--button-lg-size);
  padding: var(--button-lg-y-padding);
  width: var(--button-lg-size)
}

.button-icon.button-lg .icon {
  height: calc(var(--button-lg-fs) + var(--button-lg-fs)*.5);
  width: calc(var(--button-lg-fs) + var(--button-lg-fs)*.5)
}

.button-icon.button-xl {
  height: var(--button-xl-size);
  padding: var(--button-xl-y-padding);
  width: var(--button-xl-size)
}

.button-micro .icon {
  height: var(--button-micro-fs);
  width: var(--button-micro-fs)
}

.button-xxs .icon {
  height: var(--button-xxs-fs);
  width: var(--button-xxs-fs)
}

.button-xs .icon {
  height: var(--button-xs-fs);
  width: var(--button-xs-fs)
}

.button-icon.button-xl .icon {
  height: calc(var(--button-xl-fs) + var(--button-xl-fs)*.6);
  width: calc(var(--button-xl-fs) + var(--button-xl-fs)*.6)
}

.button-sm .icon {
  height: var(--button-sm-fs);
  width: var(--button-sm-fs)
}

.button-md .icon {
  height: var(--button-md-fs);
  width: var(--button-md-fs)
}

.button-lg .icon {
  height: var(--button-lg-fs);
  width: var(--button-lg-fs)
}

.button-xl .icon {
  height: var(--button-xl-fs);
  width: var(--button-xl-fs)
}

.button-group {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem
}

.button.width-full {
  align-items: center;
  display: flex;
  justify-content: center
}

.button-white {
  background-color: var(--color-white);
  border-color: var(--color-neutral-200);
  color: var(--color-neutral-700)
}

.button-white.active,
.button-white:hover {
  background-color: var(--color-neutral-50);
  border-color: var(--color-neutral-250);
  color: var(--color-neutral-800)
}

.button-white:focus-visible {
  box-shadow: var(--ring-md-neutral-300)
}

.button-white[disabled],
.button-white[disabled]:hover,
.button-white[disabled]:visited {
  background-color: var(--color-neutral-50);
  border-color: var(--color-neutral-200);
  color: var(--color-neutral-400)
}

.button-white-border {
  background-color: transparent;
  border-color: var(--color-white);
  color: var(--color-neutral-700)
}

.button-white-border.active,
.button-white-border:hover {
  background-color: var(--color-white);
  border-color: var(--color-neutral-200);
  color: var(--color-neutral-800)
}

.button-white-border[disabled],
.button-white-border[disabled]:active,
.button-white-border[disabled]:hover {
  background-color: transparent;
  border-color: var(--color-neutral-200);
  color: var(--color-neutral-400)
}

.button-white-ghost {
  background-color: transparent;
  color: var(--color-neutral-700)
}

.button-white-ghost.active,
.button-white-ghost:hover {
  background-color: var(--color-white);
  color: var(--color-neutral-800)
}

.button-white-ghost[disabled],
.button-white-ghost[disabled]:active,
.button-white-ghost[disabled]:hover {
  background-color: transparent;
  color: var(--color-neutral-400)
}

.button-white-link {
  background-color: transparent;
  color: var(--color-neutral-700)
}

.button-white-subtle {
  background-color: var(--color-neutral-50);
  color: var(--color-neutral-700)
}

.button-white-subtle.active,
.button-white-subtle:hover {
  background-color: var(--color-white);
  color: var(--color-neutral-800)
}

.button-white-link[disabled],
.button-white-link[disabled]:active,
.button-white-link[disabled]:hover,
.button-white-subtle[disabled],
.button-white-subtle[disabled]:active,
.button-white-subtle[disabled]:hover {
  background-color: transparent;
  color: var(--color-neutral-400)
}

:root {
  --card-xs-x-padding: 1.2rem;
  --card-xs-y-padding: 1.2rem;
  --card-sm-x-padding: 1.6rem;
  --card-sm-y-padding: 1.6rem;
  --card-md-x-padding: 2rem;
  --card-md-y-padding: 2rem;
  --card-lg-x-padding: 2.4rem;
  --card-lg-y-padding: 2.4rem;
  --card-xl-x-padding: 2.8rem;
  --card-xl-y-padding: 2.8rem
}

.card {
  background-color: transparent;
  border: .1rem solid var(--color-stone-200);
  border-radius: var(--default-border-radius);
  padding: var(--card-md-y-padding) var(--card-md-x-padding)
}

.card-xs {
  padding: var(--card-xs-y-padding) var(--card-xs-x-padding)
}

.card-sm {
  padding: var(--card-sm-y-padding) var(--card-sm-x-padding)
}

.card-md {
  padding: var(--card-md-y-padding) var(--card-md-x-padding)
}

.card-lg {
  padding: var(--card-lg-y-padding) var(--card-lg-x-padding)
}

.card-xl {
  padding: var(--card-xl-y-padding) var(--card-xl-x-padding)
}

.alert {
  align-items: center;
  background-color: var(--color-neutral-50);
  border: .1rem solid transparent;
  border-radius: var(--default-border-radius);
  display: flex;
  justify-content: space-between;
  padding: 1rem 1.6rem
}

.alert .button-alert-close {
  transform: translateX(.4rem)
}

.alert .button-alert-close .icon {
  color: var(--color-neutral-500)
}

.alert .information-container {
  flex-grow: 1
}

.alert-heading {
  font-weight: 500
}

.alert-description {
  font-weight: 400
}

.alert-border,
.alert-border-alt {
  border-color: var(--color-neutral-200)
}

.alert-border-alt {
  background-color: transparent
}

.alert-primary {
  background-color: var(--color-primary-50);
  color: var(--color-primary-500)
}

.alert-primary-border,
.alert-primary-border-alt {
  border-color: var(--color-primary-200)
}

.alert-primary-border-alt {
  background-color: transparent
}

.alert-primary .button-alert-close .icon {
  color: var(--color-primary-400)
}

.alert-primary .button-alert-close:hover {
  background-color: var(--color-primary-100)
}

.alert-danger {
  background-color: var(--color-red-50);
  color: var(--color-red-500)
}

.alert-danger-border,
.alert-danger-border-alt {
  border-color: var(--color-red-200)
}

.alert-danger-border-alt {
  background-color: transparent
}

.alert-danger .button-alert-close .icon {
  color: var(--color-red-400)
}

.alert-danger .button-alert-close:hover {
  background-color: var(--color-red-100)
}

.alert-success {
  background-color: var(--color-green-50);
  color: var(--color-green-500)
}

.alert-success-border,
.alert-success-border-alt {
  border-color: var(--color-green-200)
}

.alert-success-border-alt {
  background-color: transparent
}

.alert-success .button-alert-close .icon {
  color: var(--color-green-400)
}

.alert-success .button-alert-close:hover {
  background-color: var(--color-green-100)
}

.alert-warning {
  background-color: var(--color-orange-50);
  color: var(--color-orange-500)
}

.alert-warning-border,
.alert-warning-border-alt {
  border-color: var(--color-orange-200)
}

.alert-warning-border-alt {
  background-color: transparent
}

.alert-warning .button-alert-close .icon {
  color: var(--color-orange-400)
}

.alert-warning .button-alert-close:hover {
  background-color: var(--color-orange-100)
}

.alert-centered {
  flex-direction: column;
  gap: 1rem;
  padding: 2rem 1.6rem;
  text-align: center
}

.alert-centered .information-container {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: .8rem
}

.alert-centered .alert-icon {
  height: 2.4rem;
  margin-bottom: .4rem;
  width: 2.4rem
}

.alert-centered .alert-description,
.alert-centered .alert-heading {
  margin: 0
}

.alert-centered .button-alert-close {
  align-self: flex-end;
  position: absolute;
  right: 1rem;
  top: 1rem;
  transform: none
}

.alert-centered .alert-icon-circle {
  align-items: center;
  border-radius: 50%;
  display: flex;
  height: 4rem;
  justify-content: center;
  margin-bottom: .4rem;
  width: 4rem
}

.alert-centered .alert-icon-circle .icon,
.alert-centered .alert-icon-circle svg {
  height: 2.4rem;
  width: 2.4rem
}

.alert-success .alert-icon-circle {
  background-color: var(--color-green-100);
  color: var(--color-green-600)
}

.alert-warning .alert-icon-circle {
  background-color: var(--color-orange-100);
  color: var(--color-orange-600)
}

.alert-danger .alert-icon-circle {
  background-color: var(--color-red-100);
  color: var(--color-red-600)
}

.alert-primary .alert-icon-circle {
  background-color: var(--color-primary-100);
  color: var(--color-primary-600)
}

:root {
  --list-xs-fs: 1rem;
  --list-sm-fs: 1.2rem;
  --list-md-fs: 1.4rem;
  --list-lg-fs: 1.6rem;
  --list-xl-fs: 1.8rem
}

.list-tabs {
  display: flex;
  flex-direction: column;
  font-weight: 500
}

.list-tabs>li>a {
  border-radius: var(--default-border-radius);
  color: var(--color-neutral-800)
}

.list-tabs>li.active a,
.list-tabs>li>a:hover {
  background-color: var(--color-neutral-100)
}

.list-tabs-xs {
  font-size: var(--list-xs-fs);
  gap: calc(var(--list-xs-fs) + .2rem)
}

.list-tabs-xs>li>a {
  padding: .6rem
}

.list-tabs-sm {
  font-size: var(--list-sm-fs);
  gap: calc(var(--list-sm-fs) + .2rem)
}

.list-tabs-sm>li>a {
  padding: .8rem
}

.list-tabs-md {
  font-size: var(--list-md-fs);
  gap: calc(var(--list-md-fs) + .2rem)
}

.list-tabs-md>li>a {
  padding: 1rem
}

.list-tabs-lg {
  font-size: var(--list-lg-fs);
  gap: calc(var(--list-lg-fs) + .2rem)
}

.list-tabs-lg>li>a {
  padding: 1.2rem
}

.list-tabs-xl {
  font-size: var(--list-xl-fs);
  gap: calc(var(--list-xl-fs) + .2rem)
}

.list-tabs-xl>li>a {
  padding: 1.4rem
}

.list-icon {
  display: flex;
  flex-direction: column;
  font-weight: 500
}

.list-icon>li {
  align-items: center;
  border-radius: var(--default-border-radius);
  color: var(--color-neutral-800);
  display: flex
}

.list-icon>li:hover {
  background-color: var(--color-neutral-100)
}

.list-icon>li>.icon {
  flex-shrink: 0;
  margin-right: .75rem
}

.list-icon-xs {
  font-size: var(--list-xs-fs);
  gap: calc(var(--list-xs-fs) + .2rem)
}

.list-icon-xs>li {
  padding: .6rem
}

.list-icon-xs>li>.icon {
  height: 1rem;
  width: 1rem
}

.list-icon-sm {
  font-size: var(--list-sm-fs);
  gap: calc(var(--list-sm-fs) + .2rem)
}

.list-icon-sm>li {
  padding: .8rem
}

.list-icon-sm>li>.icon {
  height: 1.2rem;
  width: 1.2rem
}

.list-icon-md {
  font-size: var(--list-md-fs);
  gap: calc(var(--list-md-fs) + .2rem)
}

.list-icon-md>li {
  padding: 1rem
}

.list-icon-md>li>.icon {
  height: 1.4rem;
  width: 1.4rem
}

.list-icon-lg {
  font-size: var(--list-lg-fs);
  gap: calc(var(--list-lg-fs) + .2rem)
}

.list-icon-lg>li {
  padding: 1.2rem
}

.list-icon-lg>li>.icon {
  height: 1.6rem;
  width: 1.6rem
}

.list-icon-xl {
  font-size: var(--list-xl-fs);
  gap: calc(var(--list-xl-fs) + .2rem)
}

.list-icon-xl>li {
  padding: 1.4rem
}

.list-icon-xl>li>.icon {
  height: 1.8rem;
  width: 1.8rem
}

.list-icon>li.active {
  background-color: var(--color-primary-100);
  color: var(--color-primary-700)
}

.list-simple {
  display: flex;
  flex-direction: column;
  font-weight: 400;
  list-style: none;
  margin: 0;
  padding: 0
}

.list-simple>li {
  align-items: center;
  color: var(--color-neutral-700);
  display: flex;
  padding: .5rem 0
}

.list-simple.list-simple-bordered>li {
  border-bottom: 1px solid var(--color-neutral-200)
}

.list-simple.list-simple-bordered>li:last-child {
  border-bottom: none
}

.list-simple>li>.icon {
  color: var(--color-neutral-500);
  flex-shrink: 0;
  height: 1.25rem;
  margin-right: .75rem;
  width: 1.25rem
}

.list-simple-compact>li {
  padding: .25rem 0
}

:root {
  --switch-xs-width: 3.2rem;
  --switch-xs-height: 2rem;
  --switch-xs-thumb: 1.4rem;
  --switch-xs-gap-y: 0.25rem;
  --switch-xs-gap-x: 0.2rem;
  --switch-sm-width: 3.8rem;
  --switch-sm-height: 2.2rem;
  --switch-sm-thumb: 1.8rem;
  --switch-sm-gap-y: 0.15rem;
  --switch-sm-gap-x: 0.2rem;
  --switch-md-width: 4.4rem;
  --switch-md-height: 2.4rem;
  --switch-md-thumb: 2rem;
  --switch-md-gap-y: 0.15rem;
  --switch-md-gap-x: 0.2rem;
  --switch-lg-width: 5rem;
  --switch-lg-height: 2.8rem;
  --switch-lg-thumb: 2.4rem;
  --switch-lg-gap-y: 0.15rem;
  --switch-lg-gap-x: 0.2rem;
  --switch-xl-width: 5.6rem;
  --switch-xl-height: 3.2rem;
  --switch-xl-thumb: 2.8rem;
  --switch-xl-gap-y: 0.15rem;
  --switch-xl-gap-x: 0.2rem
}

.switch-checkbox {
  display: inline-block;
  position: relative
}

.switch-checkbox input[type=checkbox] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  border: none;
  height: 0;
  margin: 0;
  opacity: 0;
  outline: none;
  padding: 0;
  position: absolute;
  width: 0
}

.switch-checkbox .switch-slider {
  background-color: var(--color-neutral-200);
  border: .1rem solid var(--color-neutral-300);
  border-radius: calc(var(--switch-md-height)/2);
  cursor: pointer;
  display: inline-flex;
  height: var(--switch-md-height);
  position: relative;
  transition: all .12s;
  width: var(--switch-md-width)
}

.switch-checkbox .switch-slider:before {
  background-color: var(--color-white);
  border-radius: 50%;
  box-shadow: var(--shadow-sm);
  content: "";
  height: var(--switch-md-thumb);
  left: var(--switch-md-gap-x);
  position: absolute;
  top: var(--switch-md-gap-y);
  transition: all .12s;
  width: var(--switch-md-thumb)
}

.switch-checkbox .switch-slider:hover {
  background-color: var(--color-neutral-250);
  border-color: var(--color-neutral-350)
}

.switch-checkbox input[type=checkbox]:focus-visible+.switch-slider {
  box-shadow: var(--ring-md-stone-300);
  outline: none
}

.switch-checkbox input[type=checkbox]:checked+.switch-slider {
  background-color: var(--color-primary-500);
  border-color: var(--color-primary-500)
}

.switch-checkbox input[type=checkbox]:checked+.switch-slider:hover {
  background-color: var(--color-primary-450);
  border-color: var(--color-primary-450)
}

.switch-checkbox input[type=checkbox]:checked:focus-visible+.switch-slider {
  box-shadow: var(--ring-md-primary-300)
}

.switch-checkbox input[type=checkbox]:checked+.switch-slider:before {
  transform: translateX(calc(var(--switch-md-width) - var(--switch-md-thumb) - var(--switch-md-gap-x)*2.7))
}

.switch-checkbox input[type=checkbox]:disabled+.switch-slider {
  cursor: not-allowed;
  opacity: .5
}

.switch-checkbox input[type=checkbox]:disabled+.switch-slider:hover {
  background-color: var(--color-neutral-200);
  border-color: var(--color-neutral-300)
}

.switch-checkbox input[type=checkbox]:disabled:checked+.switch-slider:hover {
  background-color: var(--color-primary-500);
  border-color: var(--color-primary-500)
}

.switch-checkbox.switch-xs .switch-slider {
  border-radius: calc(var(--switch-xs-height)/2);
  height: var(--switch-xs-height);
  width: var(--switch-xs-width)
}

.switch-checkbox.switch-xs .switch-slider:before {
  height: var(--switch-xs-thumb);
  left: var(--switch-xs-gap-x);
  top: var(--switch-xs-gap-y);
  width: var(--switch-xs-thumb)
}

.switch-checkbox.switch-xs input[type=checkbox]:checked+.switch-slider:before {
  transform: translateX(calc(var(--switch-xs-width) - var(--switch-xs-thumb) - var(--switch-xs-gap-x)*2.6))
}

.switch-checkbox.switch-sm .switch-slider {
  border-radius: calc(var(--switch-sm-height)/2);
  height: var(--switch-sm-height);
  width: var(--switch-sm-width)
}

.switch-checkbox.switch-sm .switch-slider:before {
  height: var(--switch-sm-thumb);
  left: var(--switch-sm-gap-x);
  top: var(--switch-sm-gap-y);
  width: var(--switch-sm-thumb)
}

.switch-checkbox.switch-sm input[type=checkbox]:checked+.switch-slider:before {
  transform: translateX(calc(var(--switch-sm-width) - var(--switch-sm-thumb) - var(--switch-sm-gap-x)*2.7))
}

.switch-checkbox.switch-lg .switch-slider {
  border-radius: calc(var(--switch-lg-height)/2);
  height: var(--switch-lg-height);
  width: var(--switch-lg-width)
}

.switch-checkbox.switch-lg .switch-slider:before {
  height: var(--switch-lg-thumb);
  left: var(--switch-lg-gap-x);
  top: var(--switch-lg-gap-y);
  width: var(--switch-lg-thumb)
}

.switch-checkbox.switch-lg input[type=checkbox]:checked+.switch-slider:before {
  transform: translateX(calc(var(--switch-lg-width) - var(--switch-lg-thumb) - var(--switch-lg-gap-x)*2.7))
}

.switch-checkbox.switch-xl .switch-slider {
  border-radius: calc(var(--switch-xl-height)/2);
  height: var(--switch-xl-height);
  width: var(--switch-xl-width)
}

.switch-checkbox.switch-xl .switch-slider:before {
  height: var(--switch-xl-thumb);
  left: var(--switch-xl-gap-x);
  top: var(--switch-xl-gap-y);
  width: var(--switch-xl-thumb)
}

.switch-checkbox.switch-xl input[type=checkbox]:checked+.switch-slider:before {
  transform: translateX(calc(var(--switch-xl-width) - var(--switch-xl-thumb) - var(--switch-xl-gap-x)*2.7))
}

.switch-checkbox.switch-success input[type=checkbox]:checked+.switch-slider {
  background-color: var(--color-green-600);
  border-color: var(--color-green-600)
}

.switch-checkbox.switch-success input[type=checkbox]:checked+.switch-slider:hover {
  background-color: var(--color-green-550);
  border-color: var(--color-green-550)
}

.switch-checkbox.switch-danger input[type=checkbox]:checked+.switch-slider {
  background-color: var(--color-red-600);
  border-color: var(--color-red-600)
}

.switch-checkbox.switch-danger input[type=checkbox]:checked+.switch-slider:hover {
  background-color: var(--color-red-550);
  border-color: var(--color-red-550)
}

.switch-checkbox.switch-warning input[type=checkbox]:checked+.switch-slider {
  background-color: var(--color-orange-400);
  border-color: var(--color-orange-400)
}

.switch-checkbox.switch-warning input[type=checkbox]:checked+.switch-slider:hover {
  background-color: var(--color-orange-350);
  border-color: var(--color-orange-350)
}

.switch {
  background-color: var(--color-neutral-200);
  border: .1rem solid var(--color-neutral-300);
  border-radius: calc(var(--switch-md-height)/2);
  cursor: pointer;
  display: inline-flex;
  height: var(--switch-md-height);
  position: relative;
  transition: all .12s;
  width: var(--switch-md-width)
}

.switch:before {
  background-color: var(--color-white);
  border-radius: 50%;
  box-shadow: var(--shadow-sm);
  content: "";
  height: var(--switch-md-thumb);
  left: var(--switch-md-gap-x);
  position: absolute;
  top: var(--switch-md-gap-y);
  transition: all .12s;
  width: var(--switch-md-thumb)
}

.switch:hover {
  background-color: var(--color-neutral-250);
  border-color: var(--color-neutral-350)
}

.switch:focus-visible {
  box-shadow: var(--ring-md-stone-300);
  outline: none
}

.switch[data-state=checked] {
  background-color: var(--color-primary-500);
  border-color: var(--color-primary-500)
}

.switch[data-state=checked]:hover {
  background-color: var(--color-primary-450);
  border-color: var(--color-primary-450)
}

.switch[data-state=checked]:focus-visible {
  box-shadow: var(--ring-md-primary-300)
}

.switch[data-state=checked]:before {
  transform: translateX(calc(var(--switch-md-width) - var(--switch-md-thumb) - var(--switch-md-gap-x)*2.7))
}

.switch[disabled] {
  cursor: not-allowed;
  opacity: .5
}

.switch[disabled]:hover {
  background-color: var(--color-neutral-200);
  border-color: var(--color-neutral-300)
}

.switch[disabled][data-state=checked]:hover {
  background-color: var(--color-primary-500);
  border-color: var(--color-primary-500)
}

.switch-xs {
  border-radius: calc(var(--switch-xs-height)/2);
  height: var(--switch-xs-height);
  width: var(--switch-xs-width)
}

.switch-xs:before {
  height: var(--switch-xs-thumb);
  left: var(--switch-xs-gap-x);
  top: var(--switch-xs-gap-y);
  width: var(--switch-xs-thumb)
}

.switch-xs[data-state=checked]:before {
  transform: translateX(calc(var(--switch-xs-width) - var(--switch-xs-thumb) - var(--switch-xs-gap-x)*2.6))
}

.switch-sm {
  border-radius: calc(var(--switch-sm-height)/2);
  height: var(--switch-sm-height);
  width: var(--switch-sm-width)
}

.switch-sm:before {
  height: var(--switch-sm-thumb);
  left: var(--switch-sm-gap-x);
  top: var(--switch-sm-gap-y);
  width: var(--switch-sm-thumb)
}

.switch-sm[data-state=checked]:before {
  transform: translateX(calc(var(--switch-sm-width) - var(--switch-sm-thumb) - var(--switch-sm-gap-x)*2.7))
}

.switch-md {
  border-radius: calc(var(--switch-md-height)/2);
  height: var(--switch-md-height);
  width: var(--switch-md-width)
}

.switch-md:before {
  height: var(--switch-md-thumb);
  left: var(--switch-md-gap-x);
  top: var(--switch-md-gap-y);
  width: var(--switch-md-thumb)
}

.switch-md[data-state=checked]:before {
  transform: translateX(calc(var(--switch-md-width) - var(--switch-md-thumb) - var(--switch-md-gap-x)*2.7))
}

.switch-lg {
  border-radius: calc(var(--switch-lg-height)/2);
  height: var(--switch-lg-height);
  width: var(--switch-lg-width)
}

.switch-lg:before {
  height: var(--switch-lg-thumb);
  left: var(--switch-lg-gap-x);
  top: var(--switch-lg-gap-y);
  width: var(--switch-lg-thumb)
}

.switch-lg[data-state=checked]:before {
  transform: translateX(calc(var(--switch-lg-width) - var(--switch-lg-thumb) - var(--switch-lg-gap-x)*2.7))
}

.switch-xl {
  border-radius: calc(var(--switch-xl-height)/2);
  height: var(--switch-xl-height);
  width: var(--switch-xl-width)
}

.switch-xl:before {
  height: var(--switch-xl-thumb);
  left: var(--switch-xl-gap-x);
  top: var(--switch-xl-gap-y);
  width: var(--switch-xl-thumb)
}

.switch-xl[data-state=checked]:before {
  transform: translateX(calc(var(--switch-xl-width) - var(--switch-xl-thumb) - var(--switch-xl-gap-x)*2.7))
}

.switch-danger {
  border-color: var(--color-neutral-300)
}

.switch-danger:hover {
  border-color: var(--color-neutral-350)
}

.switch-danger[data-state=checked] {
  background-color: var(--color-red-600);
  border-color: var(--color-red-600)
}

.switch-danger[data-state=checked]:hover {
  background-color: var(--color-red-550);
  border-color: var(--color-red-550)
}

.switch-success {
  border-color: var(--color-neutral-300)
}

.switch-success:hover {
  border-color: var(--color-neutral-350)
}

.switch-success[data-state=checked] {
  background-color: var(--color-green-600);
  border-color: var(--color-green-600)
}

.switch-success[data-state=checked]:hover {
  background-color: var(--color-green-550);
  border-color: var(--color-green-550)
}

.switch-warning {
  border-color: var(--color-neutral-300)
}

.switch-warning:hover {
  border-color: var(--color-neutral-350)
}

.switch-warning[data-state=checked] {
  background-color: var(--color-orange-400);
  border-color: var(--color-orange-400)
}

.switch-warning[data-state=checked]:hover {
  background-color: var(--color-orange-350);
  border-color: var(--color-orange-350)
}

.switch-group {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem
}

:root {
  --table-border-color: var(--color-neutral-200);
  --table-header-bg: transparent;
  --table-row-hover: var(--color-neutral-100);
  --table-stripe-bg: var(--color-neutral-50)
}

.table-container {
  border: .1rem solid var(--table-border-color);
  border-radius: var(--default-border-radius);
  overflow: auto;
  position: relative;
  width: 100%
}

.table {
  border-collapse: collapse;
  caption-side: bottom;
  font-size: 1.4rem;
  line-height: 1.4;
  width: 100%
}

.table th {
  background-color: var(--table-header-bg);
  color: var(--color-neutral-600);
  font-size: 1.3rem;
  font-weight: 500;
  height: 4.8rem;
  letter-spacing: 0;
  padding: 0 1.2rem;
  text-align: left;
  text-transform: none
}

.table td,
.table th {
  align-content: center;
  border-bottom: .1rem solid var(--table-border-color)
}

.table td {
  color: var(--color-neutral-900);
  padding: 1.2rem
}

.table tbody tr:last-child td {
  border-bottom: none
}

.table tbody tr:hover {
  background-color: var(--table-row-hover);
  transition: background-color .15s ease
}

.table-xs th {
  font-size: 1.2rem;
  height: 3.6rem;
  padding: 0 .8rem
}

.table-xs td {
  font-size: 1.3rem;
  padding: .8rem
}

.table-sm th {
  font-size: 1.25rem;
  height: 4.2rem;
  padding: 0 1rem
}

.table-sm td {
  font-size: 1.35rem;
  padding: 1rem
}

.table-md th {
  font-size: 1.3rem;
  height: 4.8rem;
  padding: 0 1.2rem
}

.table-md td {
  font-size: 1.4rem;
  padding: 1.2rem
}

.table-lg th {
  font-size: 1.35rem;
  height: 5.4rem;
  padding: 0 1.4rem
}

.table-lg td {
  font-size: 1.5rem;
  padding: 1.4rem
}

.table-xl th {
  font-size: 1.4rem;
  height: 6rem;
  padding: 0 1.6rem
}

.table-xl td {
  font-size: 1.6rem;
  padding: 1.6rem
}

.table-striped tbody tr:nth-child(2n) {
  background-color: var(--table-stripe-bg)
}

.table-striped tbody tr:nth-child(2n):hover {
  background-color: var(--table-row-hover)
}

.table-borderless,
.table-borderless .table-container,
.table-borderless td,
.table-borderless th {
  border: none
}

.table-ghost .table-container {
  border: none;
  border-radius: 0
}

.table-ghost td,
.table-ghost th {
  border-bottom: .1rem solid var(--table-border-color)
}

.table-ghost tbody tr:last-child td {
  border-bottom: none
}

.table td.text-center,
.table th.text-center {
  text-align: center
}

.table td.text-right,
.table th.text-right {
  text-align: right
}

.table tbody tr.row-selected {
  background-color: var(--color-neutral-100)
}

.table tbody tr.row-success {
  background-color: var(--color-green-50);
  border-left: .3rem solid var(--color-green-500)
}

.table tbody tr.row-danger {
  background-color: var(--color-red-50);
  border-left: .3rem solid var(--color-red-500)
}

.table tbody tr.row-warning {
  background-color: var(--color-orange-50);
  border-left: .3rem solid var(--color-orange-500)
}

.table tbody tr.row-info {
  background-color: var(--color-blue-50);
  border-left: .3rem solid var(--color-blue-500)
}

.table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch
}

@media (max-width:768px) {
  .table-responsive {
    font-size: 1.4rem
  }

  .table-responsive td,
  .table-responsive th {
    padding: .8rem 1rem;
    white-space: nowrap
  }
}

.table-actions {
  text-align: right;
  white-space: nowrap;
  width: 1%
}

.table-actions .button {
  margin-left: .4rem
}

.table-actions .button:first-child {
  margin-left: 0
}

.table-select {
  text-align: center;
  width: 4rem
}

.table-select input[type=checkbox] {
  height: 1.6rem;
  width: 1.6rem
}

.table th.sortable {
  cursor: pointer;
  position: relative;
  transition: background-color .15s ease;
  user-select: none
}

.table th.sortable:hover {
  background-color: var(--color-neutral-100)
}

.table th.sortable:after {
  border-bottom: .4rem solid var(--color-neutral-400);
  border-left: .4rem solid transparent;
  border-right: .4rem solid transparent;
  content: "";
  height: 0;
  opacity: .4;
  position: absolute;
  right: .8rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0
}

.table th.sortable.sort-asc:after {
  border-bottom: .4rem solid var(--color-neutral-600);
  border-top: none;
  opacity: 1
}

.table th.sortable.sort-desc:after {
  border-bottom: none;
  border-top: .4rem solid var(--color-neutral-600);
  opacity: 1
}

.table-loading {
  opacity: .6;
  pointer-events: none;
  position: relative
}

.table-loading:after {
  align-items: center;
  background: hsla(0, 0%, 100%, .8);
  bottom: 0;
  content: "";
  display: flex;
  justify-content: center;
  left: 0;
  position: absolute;
  right: 0;
  top: 0
}

.table-empty {
  color: var(--color-muted);
  padding: 4rem 2rem;
  text-align: center
}

.table caption {
  caption-side: top;
  color: var(--color-muted);
  font-size: 1.4rem;
  padding: 1rem 1.6rem;
  text-align: left
}

.table-fixed-column td:first-child,
.table-fixed-column th:first-child {
  background-color: inherit;
  left: 0;
  position: sticky;
  z-index: 10
}

.table-fixed-column thead th:first-child {
  z-index: 11
}

.badge {
  align-items: center;
  border: .1rem solid transparent;
  border-radius: .4rem;
  display: inline-flex;
  font-size: 1.2rem;
  font-weight: 500;
  gap: .4rem;
  line-height: 1;
  padding: .2rem .6rem;
  transition: all .12s;
  white-space: nowrap
}

.badge-xs {
  font-size: 1.1rem;
  padding: .1rem .4rem
}

.badge-sm {
  font-size: 1.2rem;
  padding: .2rem .6rem
}

.badge-md {
  font-size: 1.3rem;
  padding: .3rem .8rem
}

.badge-lg {
  font-size: 1.4rem;
  padding: .4rem 1rem
}

.badge-default {
  background-color: var(--color-neutral-100);
  color: var(--color-neutral-700)
}

.badge-default:hover {
  background-color: var(--color-neutral-150)
}

.badge-secondary {
  background-color: var(--color-neutral-100);
  border-color: var(--color-neutral-200);
  color: var(--color-neutral-600)
}

.badge-secondary:hover {
  background-color: var(--color-neutral-150);
  color: var(--color-neutral-700)
}

.badge-danger {
  background-color: var(--color-red-100);
  color: var(--color-red-800)
}

.badge-danger:hover {
  background-color: var(--color-red-150)
}

.badge-outline {
  background-color: transparent;
  border-color: var(--color-neutral-200);
  color: var(--color-neutral-700)
}

.badge-outline:hover {
  background-color: var(--color-neutral-100)
}

.badge-success {
  background-color: var(--color-green-100);
  color: var(--color-green-800)
}

.badge-success:hover {
  background-color: var(--color-green-150)
}

.badge-warning {
  background-color: var(--color-orange-100);
  color: var(--color-orange-800)
}

.badge-warning:hover {
  background-color: var(--color-orange-150)
}

.badge-info {
  background-color: var(--color-blue-100);
  color: var(--color-blue-800)
}

.badge-info:hover {
  background-color: var(--color-blue-150)
}

.badge-primary {
  background-color: var(--color-primary-500);
  color: var(--color-primary-foreground)
}

.badge-primary:hover {
  background-color: var(--color-primary-450)
}

.badge-muted {
  background-color: var(--color-neutral-100);
  color: var(--color-neutral-500)
}

.badge-muted:hover {
  background-color: var(--color-neutral-150)
}

.badge-ghost {
  background-color: transparent;
  color: var(--color-neutral-600)
}

.badge-ghost:hover {
  background-color: var(--color-neutral-100);
  color: var(--color-neutral-700)
}

.badge-success-outline {
  background-color: transparent;
  border-color: var(--color-green-300);
  color: var(--color-green-600)
}

.badge-success-outline:hover {
  background-color: var(--color-green-50);
  color: var(--color-green-700)
}

.badge-danger-outline {
  background-color: transparent;
  border-color: var(--color-red-300);
  color: var(--color-red-600)
}

.badge-danger-outline:hover {
  background-color: var(--color-red-50);
  color: var(--color-red-700)
}

.badge-warning-outline {
  background-color: transparent;
  border-color: var(--color-orange-300);
  color: var(--color-orange-600)
}

.badge-warning-outline:hover {
  background-color: var(--color-orange-50);
  color: var(--color-orange-700)
}

.badge-info-outline {
  background-color: transparent;
  border-color: var(--color-blue-300);
  color: var(--color-blue-600)
}

.badge-info-outline:hover {
  background-color: var(--color-blue-50);
  color: var(--color-blue-700)
}

.badge-primary-outline {
  background-color: transparent;
  border-color: var(--color-primary-300);
  color: var(--color-primary-500)
}

.badge-primary-outline:hover {
  background-color: var(--color-primary-50);
  color: var(--color-primary-600)
}

.badge .icon {
  height: 1rem;
  width: 1rem
}

.badge-xs .icon {
  height: .9rem;
  width: .9rem
}

.badge-sm .icon {
  height: 1rem;
  width: 1rem
}

.badge-md .icon {
  height: 1.1rem;
  width: 1.1rem
}

.badge-lg .icon {
  height: 1.2rem;
  width: 1.2rem
}

.badge-dot {
  padding-left: 1.4rem;
  position: relative
}

.badge-dot:before {
  background-color: currentColor;
  border-radius: 50%;
  content: "";
  height: .4rem;
  left: .6rem;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: .4rem
}

.badge-icon-left {
  flex-direction: row
}

.badge-icon-left .icon {
  margin-right: .4rem;
  order: -1
}

.badge-icon-right {
  flex-direction: row
}

.badge-icon-right .icon {
  margin-left: .4rem;
  order: 1
}

.badge-xs.badge-icon-left .icon,
.badge-xs.badge-icon-right .icon {
  margin-left: .3rem;
  margin-right: .3rem
}

.badge-sm.badge-icon-left .icon,
.badge-sm.badge-icon-right .icon {
  margin-left: .4rem;
  margin-right: .4rem
}

.badge-md.badge-icon-left .icon,
.badge-md.badge-icon-right .icon {
  margin-left: .5rem;
  margin-right: .5rem
}

.badge-lg.badge-icon-left .icon,
.badge-lg.badge-icon-right .icon {
  margin-left: .6rem;
  margin-right: .6rem
}

.badge-icon-left .icon {
  margin-left: 0
}

.badge-icon-right .icon {
  margin-right: 0
}

.badge-xs.badge-icon-left .icon {
  margin-right: .3rem
}

.badge-xs.badge-icon-right .icon {
  margin-left: .3rem
}

.badge-sm.badge-icon-left .icon {
  margin-right: .4rem
}

.badge-sm.badge-icon-right .icon {
  margin-left: .4rem
}

.badge-md.badge-icon-left .icon {
  margin-right: .5rem
}

.badge-md.badge-icon-right .icon {
  margin-left: .5rem
}

.badge-lg.badge-icon-left .icon {
  margin-right: .6rem
}

.badge-lg.badge-icon-right .icon {
  margin-left: .6rem
}

:root {
  --log-viewer-border-color: var(--color-stone-200);
  --log-viewer-bg: var(--color-white);
  --log-viewer-header-bg: var(--color-neutral-50);
  --log-viewer-row-hover: var(--color-neutral-50);
  --log-viewer-row-alt: var(--color-neutral-25);
  --log-viewer-timestamp-color: var(--color-neutral-500);
  --log-viewer-message-color: var(--color-neutral-700);
  --log-viewer-details-bg: var(--color-neutral-100);
  --log-viewer-line-height: 1.4;
  --log-viewer-font-family: "Monaco", "Menlo", "Ubuntu Mono", monospace
}

.log-viewer {
  background: var(--log-viewer-bg);
  border: .1rem solid var(--log-viewer-border-color);
  border-radius: var(--default-border-radius);
  display: flex;
  flex-direction: column;
  height: 60rem;
  max-height: 80vh;
  overflow: hidden
}

.log-header {
  align-items: center;
  background: var(--log-viewer-header-bg);
  border-bottom: .1rem solid var(--log-viewer-border-color);
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem;
  justify-content: space-between;
  padding: 1.2rem 1.6rem
}

.log-search {
  flex: 1;
  max-width: 30rem;
  min-width: 20rem;
  position: relative
}

.log-search input {
  background: var(--color-white);
  border: .1rem solid var(--color-neutral-300);
  border-radius: .4rem;
  font-size: 1.3rem;
  padding: .6rem 3.2rem .6rem 1.2rem;
  width: 100%
}

.log-search input:focus {
  border-color: var(--color-primary-500);
  box-shadow: 0 0 0 .2rem var(--color-primary-100);
  outline: none
}

.log-search-icon {
  color: var(--color-neutral-400);
  height: 1.4rem;
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1.4rem
}

.log-filters {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: .8rem
}

.log-level-filter {
  display: flex;
  gap: .4rem
}

.log-controls {
  align-items: center;
  display: flex;
  gap: .8rem
}

.log-content {
  background: var(--log-viewer-bg);
  flex: 1;
  overflow-y: auto
}

.log-entries {
  font-family: var(--log-viewer-font-family);
  font-size: 1.3rem;
  line-height: var(--log-viewer-line-height)
}

.log-entry-skeleton {
  background-color: var(--color-neutral-300)
}

.log-entry,
.log-entry-skeleton {
  align-items: flex-start;
  border-bottom: .1rem solid var(--color-neutral-100);
  display: flex;
  gap: 1.2rem;
  padding: .8rem 1.6rem;
  transition: background-color .12s
}

.log-entry:hover {
  background: var(--log-viewer-row-hover)
}

.log-entry:nth-child(2n) {
  background: var(--color-neutral-25)
}

.log-entry:nth-child(2n):hover {
  background: var(--log-viewer-row-hover)
}

.log-entry.log-entry-expanded {
  align-items: stretch;
  flex-direction: column
}

.expand-icon {
  transition: transform .12s
}

.log-entry-expanded .expand-icon {
  transform: rotate(90deg)
}

.log-entry-main {
  align-items: flex-start;
  display: flex;
  gap: 1.2rem;
  width: 100%
}

.log-meta {
  align-items: center;
  display: flex;
  flex-shrink: 0;
  gap: .8rem
}

.log-timestamp {
  color: var(--log-viewer-timestamp-color);
  font-size: 1.2rem;
  margin-top: .1rem;
  min-width: 8rem;
  white-space: nowrap
}

.log-device-info {
  align-items: center;
  display: flex;
  gap: .4rem
}

.log-browser-icon,
.log-device-icon {
  height: 1.4rem;
  opacity: .7;
  transition: opacity .12s;
  width: 1.4rem
}

.log-entry:hover .log-browser-icon,
.log-entry:hover .log-device-icon {
  opacity: 1
}

.log-browser-icon.chrome {
  color: #4285f4
}

.log-browser-icon.firefox {
  color: #ff7139
}

.log-browser-icon.safari {
  color: #0af
}

.log-browser-icon.edge {
  color: #0078d4
}

.log-browser-icon.opera {
  color: #ff1b2d
}

.log-browser-icon.brave {
  color: #fb542b
}

.log-browser-icon.unknown {
  color: var(--color-neutral-400)
}

.log-device-icon.mobile {
  color: #34d399
}

.log-device-icon.tablet {
  color: #3b82f6
}

.log-device-icon.desktop {
  color: var(--color-neutral-600)
}

.log-device-icon.unknown {
  color: var(--color-neutral-400)
}

.log-level {
  flex-shrink: 0
}

.log-message {
  color: var(--log-viewer-message-color);
  flex: 1;
  min-width: 0;
  word-break: break-word
}

.log-message-content {
  margin-bottom: .4rem
}

.log-actions {
  display: flex;
  flex-shrink: 0;
  gap: .4rem;
  margin-left: auto;
  opacity: 0;
  transition: opacity .12s
}

.log-entry:hover .log-actions {
  opacity: 1
}

.log-details {
  background: var(--log-viewer-details-bg);
  border-left: .3rem solid var(--color-neutral-300);
  border-radius: .4rem;
  display: none;
  margin-top: 1rem;
  padding: 1.2rem
}

.log-entry-expanded .log-details {
  display: block
}

.log-details pre {
  color: var(--color-neutral-700);
  font-size: 1.2rem;
  line-height: 1.4;
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word
}

.log-stack-trace {
  background: var(--color-red-50);
  border-left-color: var(--color-red-400);
  color: var(--color-red-700)
}

.log-json {
  background: var(--color-blue-50);
  border-left-color: var(--color-blue-400);
  color: var(--color-blue-700)
}

.log-entry-error {
  border-left: .3rem solid var(--color-red-500)
}

.log-entry-error .log-message {
  color: var(--color-red-700)
}

.log-entry-warning {
  border-left: .3rem solid var(--color-orange-500)
}

.log-entry-info {
  border-left: .3rem solid var(--color-blue-500)
}

.log-entry-debug {
  border-left: .3rem solid var(--color-neutral-400)
}

.log-entry-success {
  border-left: .3rem solid var(--color-green-500)
}

.log-footer {
  align-items: center;
  background: var(--log-viewer-header-bg);
  border-top: .1rem solid var(--log-viewer-border-color);
  color: var(--color-neutral-600);
  display: flex;
  font-size: 1.2rem;
  justify-content: space-between;
  padding: .8rem 1.6rem
}

.log-stats {
  display: flex;
  gap: 1.6rem
}

.log-auto-scroll {
  align-items: center;
  display: flex;
  gap: .6rem
}

.log-auto-scroll input[type=checkbox] {
  height: 1.4rem;
  width: 1.4rem
}

.log-empty {
  font-size: 1.4rem;
  height: 100%
}

.log-empty,
.log-loading {
  align-items: center;
  color: var(--color-neutral-500);
  display: flex;
  justify-content: center
}

.log-loading {
  padding: 2rem
}

.log-badge-clickable {
  cursor: pointer;
  transition: all .12s
}

.log-badge-clickable:hover {
  transform: translateY(-.1rem)
}

.log-badge-inactive {
  opacity: .4
}

.log-expand-toggle:hover {
  background: var(--color-neutral-200)
}

@media (max-width:768px) {
  .log-header {
    align-items: stretch;
    flex-direction: column;
    gap: 1rem
  }

  .log-search {
    max-width: none
  }

  .log-entry {
    flex-direction: column;
    gap: .8rem
  }

  .log-entry-main {
    flex-direction: column;
    gap: .6rem
  }

  .log-timestamp {
    min-width: auto
  }

  .log-actions {
    margin-left: 0;
    opacity: 1
  }
}

.stats-card {
  background: var(--color-white);
  border: .1rem solid var(--color-neutral-200);
  border-radius: var(--default-border-radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  padding: 2.4rem;
  position: relative;
  transition: all .2s ease
}

.stats-card:hover {
  border-color: var(--color-neutral-300);
  box-shadow: var(--shadow)
}

.stats-card.shadow-none,
.stats-card.shadow-none:hover {
  box-shadow: none
}

.stats-card.shadow-sm {
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05)
}

.stats-card.shadow-sm:hover {
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px 0 rgba(0, 0, 0, .06)
}

.stats-card.shadow-md {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06)
}

.stats-card.shadow-lg,
.stats-card.shadow-md:hover {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05)
}

.stats-card.shadow-lg:hover,
.stats-card.shadow-xl {
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 10px 10px -5px rgba(0, 0, 0, .04)
}

.stats-card.shadow-xl:hover {
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .25)
}

.stats-card-header {
  align-items: center;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-bottom: 2rem
}

.stats-card-title {
  color: var(--color-neutral-700);
  letter-spacing: -.025em;
  margin: 0
}

.stats-card-icon {
  background: var(--color-neutral-100);
  border-radius: var(--default-border-radius);
  color: var(--color-neutral-600);
  flex-shrink: 0;
  height: 4rem;
  padding: 1rem;
  width: 4rem
}

.stats-card-content {
  margin-bottom: 1.6rem
}

.stats-card-value {
  color: var(--color-neutral-800);
  letter-spacing: -.025em;
  margin-bottom: .4rem
}

.stats-card-change {
  align-items: center;
  display: flex;
  gap: .25rem;
  margin-top: .4rem
}

.stats-card-change-icon {
  height: 1.2rem;
  width: 1.2rem
}

.stats-card-change.positive {
  color: var(--color-green-600)
}

.stats-card-change.negative {
  color: var(--color-red-600)
}

.stats-card-change.neutral {
  color: var(--color-neutral-500)
}

.stats-card-description {
  color: var(--color-neutral-600);
  margin-top: .25rem
}

.stats-card.primary {
  border-color: var(--color-primary-200)
}

.stats-card.primary .stats-card-icon {
  background: var(--color-primary-100);
  color: var(--color-primary-600)
}

.stats-card.success {
  border-color: var(--color-green-200)
}

.stats-card.success .stats-card-icon {
  background: var(--color-green-100);
  color: var(--color-green-600)
}

.stats-card.warning {
  border-color: var(--color-orange-200)
}

.stats-card.warning .stats-card-icon {
  background: var(--color-orange-100);
  color: var(--color-orange-600)
}

.stats-card.danger {
  border-color: var(--color-red-200)
}

.stats-card.danger .stats-card-icon {
  background: var(--color-red-100);
  color: var(--color-red-600)
}

.stats-card-sm .stats-card-header {
  margin-bottom: 1.5rem
}

.stats-card-sm .stats-card-value {
  margin-bottom: .25rem
}

.stats-card-sm .stats-card-icon {
  height: 1.75rem;
  width: 1.75rem
}

.stats-grid {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(26rem, 1fr))
}

.stats-grid:has(.stats-card:first-child:last-child) {
  grid-template-columns: 1fr;
  max-width: 40rem
}

.stats-grid:has(.stats-card:nth-child(2):last-child) {
  grid-template-columns: repeat(2, 1fr)
}

.stats-grid:has(.stats-card:nth-child(3):last-child) {
  grid-template-columns: repeat(3, 1fr)
}

.stats-grid:has(.stats-card:nth-child(4):last-child) {
  grid-template-columns: repeat(4, 1fr)
}

.stats-grid:has(.stats-card:nth-child(5):last-child) {
  grid-template-columns: repeat(5, 1fr)
}

.stats-grid:has(.stats-card:nth-child(6):last-child) {
  grid-template-columns: repeat(6, 1fr)
}

.stats-grid.cols-1 {
  grid-template-columns: 1fr;
  max-width: 40rem
}

.stats-grid.cols-2 {
  grid-template-columns: repeat(2, 1fr)
}

.stats-grid.cols-3 {
  grid-template-columns: repeat(3, 1fr)
}

.stats-grid.cols-4 {
  grid-template-columns: repeat(4, 1fr)
}

.stats-grid.cols-5 {
  grid-template-columns: repeat(5, 1fr)
}

.stats-grid.cols-6 {
  grid-template-columns: repeat(6, 1fr)
}

.stats-collapse-1-sm {
  --stats-collapse-sm: 1
}

.stats-collapse-2-sm {
  --stats-collapse-sm: 2
}

.stats-collapse-1-md {
  --stats-collapse-md: 1
}

.stats-collapse-2-md {
  --stats-collapse-md: 2
}

.stats-collapse-3-md {
  --stats-collapse-md: 3
}

.stats-collapse-1-lg {
  --stats-collapse-lg: 1
}

.stats-collapse-2-lg {
  --stats-collapse-lg: 2
}

.stats-collapse-3-lg {
  --stats-collapse-lg: 3
}

.stats-collapse-4-lg {
  --stats-collapse-lg: 4
}

.stats-collapse-1-xl {
  --stats-collapse-xl: 1
}

.stats-collapse-2-xl {
  --stats-collapse-xl: 2
}

.stats-collapse-3-xl {
  --stats-collapse-xl: 3
}

.stats-collapse-4-xl {
  --stats-collapse-xl: 4
}

.stats-collapse-5-xl {
  --stats-collapse-xl: 5
}

@media (max-width:1200px) {
  .stats-grid.stats-grid.stats-collapse-1-xl {
    grid-template-columns: 1fr !important
  }

  .stats-grid.stats-grid.stats-collapse-2-xl {
    grid-template-columns: repeat(2, 1fr) !important
  }

  .stats-grid.stats-grid.stats-collapse-3-xl {
    grid-template-columns: repeat(3, 1fr) !important
  }

  .stats-grid.stats-grid.stats-collapse-4-xl {
    grid-template-columns: repeat(4, 1fr) !important
  }

  .stats-grid.stats-grid.stats-collapse-5-xl {
    grid-template-columns: repeat(5, 1fr) !important
  }
}

@media (max-width:1024px) {

  .stats-grid.cols-4,
  .stats-grid.cols-5,
  .stats-grid.cols-6,
  .stats-grid:has(.stats-card:nth-child(4):last-child),
  .stats-grid:has(.stats-card:nth-child(5):last-child),
  .stats-grid:has(.stats-card:nth-child(6):last-child) {
    grid-template-columns: repeat(3, 1fr);
    max-width: none
  }

  .stats-grid.stats-grid.stats-collapse-1-lg {
    grid-template-columns: 1fr !important
  }

  .stats-grid.stats-grid.stats-collapse-2-lg {
    grid-template-columns: repeat(2, 1fr) !important
  }

  .stats-grid.stats-grid.stats-collapse-3-lg {
    grid-template-columns: repeat(3, 1fr) !important
  }

  .stats-grid.stats-grid.stats-collapse-4-lg {
    grid-template-columns: repeat(4, 1fr) !important
  }
}

@media (max-width:768px) {

  .stats-grid.cols-3,
  .stats-grid.cols-4,
  .stats-grid.cols-5,
  .stats-grid.cols-6,
  .stats-grid:has(.stats-card:nth-child(3):last-child),
  .stats-grid:has(.stats-card:nth-child(4):last-child),
  .stats-grid:has(.stats-card:nth-child(5):last-child),
  .stats-grid:has(.stats-card:nth-child(6):last-child) {
    grid-template-columns: repeat(2, 1fr);
    max-width: none
  }

  .stats-grid.stats-grid.stats-collapse-1-md {
    grid-template-columns: 1fr !important
  }

  .stats-grid.stats-grid.stats-collapse-2-md {
    grid-template-columns: repeat(2, 1fr) !important
  }

  .stats-grid.stats-grid.stats-collapse-3-md {
    grid-template-columns: repeat(3, 1fr) !important
  }
}

@media (max-width:480px) {

  .stats-grid,
  .stats-grid.cols-2,
  .stats-grid.cols-3,
  .stats-grid.cols-4,
  .stats-grid.cols-5,
  .stats-grid.cols-6,
  .stats-grid:has(.stats-card:nth-child(2):last-child),
  .stats-grid:has(.stats-card:nth-child(3):last-child),
  .stats-grid:has(.stats-card:nth-child(4):last-child),
  .stats-grid:has(.stats-card:nth-child(5):last-child),
  .stats-grid:has(.stats-card:nth-child(6):last-child) {
    grid-template-columns: 1fr;
    max-width: none
  }

  .stats-grid.stats-grid.stats-collapse-1-sm {
    grid-template-columns: 1fr !important
  }

  .stats-grid.stats-grid.stats-collapse-2-sm {
    grid-template-columns: repeat(2, 1fr) !important
  }
}

.stats-card-lg .stats-card-header {
  margin-bottom: 2.5rem
}

.stats-card-lg .stats-card-value {
  margin-bottom: .5rem
}

.stats-card-lg .stats-card-icon {
  height: 2.25rem;
  width: 2.25rem
}

.stats-card.compact .stats-card-header {
  margin-bottom: 1rem
}

.stats-card.compact .stats-card-value {
  margin-bottom: .25rem
}

.stats-card-trend {
  border-top: .1rem solid var(--color-neutral-100);
  margin-top: 1.5rem;
  padding-top: 1.5rem
}

.stats-card-trend-title {
  color: var(--color-neutral-500);
  margin-bottom: .25rem
}

.stats-card-trend-value {
  color: var(--color-neutral-700)
}

.stats-card-actions {
  align-items: center;
  display: flex;
  gap: .75rem;
  margin-top: 1.5rem
}

.stats-card-actions.justify-between {
  justify-content: space-between
}

.stats-card-actions.justify-end {
  justify-content: flex-end
}

.stats-card-actions .button {
  border-radius: .6rem;
  padding: .5rem 1rem
}

.stats-card-actions .button.button-sm {
  padding: .375rem .75rem
}

.stats-card-link {
  align-items: center;
  border-radius: .5rem;
  color: var(--color-primary-600);
  display: inline-flex;
  gap: .25rem;
  margin: -.25rem -.5rem;
  padding: .25rem .5rem;
  text-decoration: none;
  transition: all .15s ease
}

.stats-card-link:hover {
  background: var(--color-primary-50);
  color: var(--color-primary-700)
}

.stats-card-link svg {
  height: 1.25rem;
  width: 1.25rem
}

.stats-card-dropdown {
  display: inline-block;
  position: relative
}

.stats-card-dropdown-toggle {
  background: none;
  border: none;
  border-radius: .4rem;
  color: var(--color-neutral-500);
  cursor: pointer;
  padding: .4rem;
  transition: all .15s ease
}

.stats-card-dropdown-toggle:hover {
  background: var(--color-neutral-100);
  color: var(--color-neutral-700)
}

.stats-card-dropdown-toggle svg {
  height: 1.6rem;
  width: 1.6rem
}

.stats-card-footer {
  align-items: center;
  border-top: .1rem solid var(--color-neutral-100);
  display: flex;
  justify-content: space-between;
  margin-top: 1.5rem;
  padding-top: 1.5rem
}

.stats-card-footer-text {
  color: var(--color-neutral-500)
}

.stats-card-badge {
  align-items: center;
  border-radius: 9999px;
  display: inline-flex;
  letter-spacing: .025em;
  padding: .25rem .75rem;
  text-transform: uppercase
}

.stats-card-badge.success {
  background: var(--color-green-100);
  color: var(--color-green-800)
}

.stats-card-badge.warning {
  background: var(--color-orange-100);
  color: var(--color-orange-800)
}

.stats-card-badge.danger {
  background: var(--color-red-100);
  color: var(--color-red-800)
}

.stats-card-badge.primary {
  background: var(--color-primary-100);
  color: var(--color-primary-800)
}

.stats-card-badge.neutral {
  background: var(--color-neutral-100);
  color: var(--color-neutral-700)
}

.dropdown {
  display: inline-block;
  position: relative
}

.dropdown-trigger {
  background: none;
  border: none;
  cursor: pointer
}

.dropdown-menu {
  background-color: var(--color-white);
  border: .1rem solid var(--color-neutral-200);
  border-radius: var(--default-border-radius);
  box-shadow: var(--shadow-lg);
  min-width: 16rem;
  opacity: 0;
  padding: .5rem;
  position: absolute;
  transform: translateY(-.5rem);
  transition: all .15s ease;
  visibility: hidden;
  z-index: 1000
}

.dropdown-menu.active {
  opacity: 1;
  transform: translateY(0);
  visibility: visible
}

.dropdown-menu.dropdown-top {
  bottom: 100%;
  margin-bottom: .5rem;
  transform: translateY(.5rem)
}

.dropdown-menu.dropdown-top.active {
  transform: translateY(0)
}

.dropdown-menu.dropdown-bottom {
  margin-top: .5rem;
  top: 100%
}

.dropdown-menu.dropdown-left {
  margin-right: .5rem;
  right: 100%;
  transform: translateX(.5rem)
}

.dropdown-menu.dropdown-left.active {
  transform: translateX(0)
}

.dropdown-menu.dropdown-right {
  left: 100%;
  margin-left: .5rem;
  transform: translateX(-.5rem)
}

.dropdown-menu.dropdown-right.active {
  transform: translateX(0)
}

.dropdown-menu.align-start {
  left: 0
}

.dropdown-menu.align-center {
  left: 50%;
  transform: translateX(-50%) translateY(-.5rem)
}

.dropdown-menu.align-center.active {
  transform: translateX(-50%) translateY(0)
}

.dropdown-menu.align-end {
  right: 0
}

.dropdown-item {
  align-items: center;
  background: none;
  border: none;
  color: var(--color-neutral-800);
  cursor: pointer;
  display: flex;
  font-size: 1.4rem;
  gap: .75rem;
  line-height: 1.4;
  padding: .75rem 1rem;
  text-decoration: none;
  transition: all .12s ease;
  width: 100%
}

.dropdown-item:focus,
.dropdown-item:hover {
  background-color: var(--color-neutral-100);
  border-radius: var(--default-border-radius);
  color: var(--color-neutral-900);
  outline: none
}

.dropdown-item:active {
  background-color: var(--color-neutral-150);
  border-radius: var(--default-border-radius)
}

.dropdown-item.disabled {
  color: var(--color-neutral-400);
  cursor: not-allowed;
  pointer-events: none
}

.dropdown-item.danger {
  color: var(--color-red-600)
}

.dropdown-item.danger:focus,
.dropdown-item.danger:hover {
  background-color: var(--color-red-50);
  border-radius: var(--default-border-radius);
  color: var(--color-red-700)
}

.dropdown-item .icon {
  flex-shrink: 0;
  height: 1.6rem;
  width: 1.6rem
}

.dropdown-item .icon-trailing {
  margin-left: auto
}

.dropdown-item.dropdown-icon-left {
  padding-left: 1rem
}

.dropdown-item.dropdown-icon-left .icon {
  margin-left: 0;
  margin-right: .75rem;
  order: -1
}

.dropdown-item.dropdown-icon-right {
  padding-right: 1rem
}

.dropdown-item.dropdown-icon-right .icon {
  margin-left: .75rem;
  margin-right: 0;
  order: 1
}

.dropdown-item.dropdown-icon-both {
  padding-left: 1rem;
  padding-right: 1rem
}

.dropdown-item.dropdown-icon-both .icon:first-child {
  margin-left: 0;
  margin-right: .75rem;
  order: -1
}

.dropdown-item.dropdown-icon-both .icon:last-child {
  margin-left: auto;
  margin-right: 0;
  order: 1
}

.dropdown-item.dropdown-icon-only {
  justify-content: center;
  min-width: 4rem;
  padding-left: 1rem;
  padding-right: 1rem
}

.dropdown-item.dropdown-icon-only .icon {
  margin: 0
}

.dropdown-menu.dropdown-sm .dropdown-item.dropdown-icon-both,
.dropdown-menu.dropdown-sm .dropdown-item.dropdown-icon-left,
.dropdown-menu.dropdown-sm .dropdown-item.dropdown-icon-right {
  gap: .5rem
}

.dropdown-menu.dropdown-sm .dropdown-item.dropdown-icon-left .icon {
  margin-right: .5rem
}

.dropdown-menu.dropdown-sm .dropdown-item.dropdown-icon-right .icon {
  margin-left: .5rem
}

.dropdown-menu.dropdown-lg .dropdown-item.dropdown-icon-left .icon {
  margin-right: 1rem
}

.dropdown-menu.dropdown-lg .dropdown-item.dropdown-icon-right .icon {
  margin-left: 1rem
}

.dropdown-shortcut {
  color: var(--color-neutral-500);
  font-size: 1.2rem;
  font-weight: 400;
  margin-left: auto
}

.dropdown-item:focus .dropdown-shortcut,
.dropdown-item:hover .dropdown-shortcut {
  color: var(--color-neutral-600)
}

.dropdown-divider {
  background-color: var(--color-neutral-200);
  border: none;
  height: .1rem;
  margin: .5rem -.5rem
}

.dropdown-submenu {
  position: relative
}

.dropdown-submenu .dropdown-menu {
  left: 100%;
  margin-left: .25rem;
  margin-top: 0;
  top: 0;
  z-index: 1001
}

.dropdown-submenu.active>.dropdown-menu,
.dropdown-submenu:hover>.dropdown-menu {
  opacity: 1;
  transform: translateY(0);
  visibility: visible
}

.dropdown-submenu>.dropdown-item {
  padding-right: 3rem;
  position: relative
}

.dropdown-submenu>.dropdown-item:after {
  border-right: .15rem solid;
  border-top: .15rem solid;
  content: "";
  height: .4rem;
  opacity: .6;
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  transform: translateY(-50%) rotate(45deg);
  width: .4rem
}

.dropdown-submenu.submenu-left .dropdown-menu {
  left: auto;
  margin-left: 0;
  margin-right: .25rem;
  right: 100%
}

.dropdown-submenu.submenu-left>.dropdown-item:after {
  left: 1rem;
  right: auto;
  transform: translateY(-50%) rotate(-135deg)
}

.dropdown-heading {
  color: var(--color-neutral-500);
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase
}

.dropdown-heading,
.dropdown-profile {
  padding: .5rem 1rem
}

.dropdown-checkbox,
.dropdown-radio {
  align-items: center;
  cursor: pointer;
  display: flex;
  gap: .75rem;
  padding: .75rem 1rem;
  transition: all .12s ease
}

.dropdown-checkbox:hover,
.dropdown-radio:hover {
  background-color: var(--color-neutral-100);
  border-radius: var(--default-border-radius)
}

.dropdown-checkbox input[type=checkbox],
.dropdown-radio input[type=radio] {
  height: 1.4rem;
  margin: 0;
  width: 1.4rem
}

.dropdown-menu.dropdown-sm {
  min-width: 12rem;
  padding: .25rem
}

.dropdown-menu.dropdown-sm .dropdown-item {
  font-size: 1.3rem;
  padding: .5rem .75rem
}

.dropdown-menu.dropdown-sm .dropdown-item .icon {
  height: 1.4rem;
  width: 1.4rem
}

.dropdown-menu.dropdown-sm .dropdown-divider {
  margin: .25rem -.25rem
}

.dropdown-menu.dropdown-lg {
  min-width: 20rem;
  padding: .75rem
}

.dropdown-menu.dropdown-lg .dropdown-item {
  font-size: 1.5rem;
  padding: 1rem 1.25rem
}

.dropdown-menu.dropdown-lg .dropdown-item .icon {
  height: 1.8rem;
  width: 1.8rem
}

.dropdown-menu.dropdown-lg .dropdown-divider {
  margin: .75rem -.75rem
}

.dropdown-backdrop {
  background: transparent;
  bottom: 0;
  display: none;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 999
}

.dropdown-backdrop.show {
  display: block
}

.dropdown-menu.fade-in {
  opacity: 0;
  transform: scale(.95);
  transition: opacity .15s ease, transform .15s ease
}

.dropdown-menu.fade-in.active {
  opacity: 1;
  transform: scale(1)
}

.dropdown-menu.slide-in {
  opacity: 0;
  transform: translateY(-1rem);
  transition: opacity .15s ease, transform .15s ease
}

.dropdown-menu.slide-in.active {
  opacity: 1;
  transform: translateY(0)
}

.dropdown-notifications {
  max-width: 40rem;
  min-width: 32rem
}

.dropdown-notifications .dropdown-heading {
  align-items: center;
  border-bottom: .1rem solid var(--color-neutral-200);
  color: var(--color-neutral-800);
  display: flex;
  font-size: 1.5rem;
  font-weight: 600;
  justify-content: space-between;
  letter-spacing: normal;
  margin: -.5rem -.5rem 0;
  padding: 1rem;
  text-transform: none
}

.dropdown-notification {
  border-bottom: .1rem solid var(--color-neutral-100);
  cursor: pointer;
  display: flex;
  gap: 1rem;
  padding: 1rem;
  transition: background-color .12s ease
}

.dropdown-notification:hover {
  background-color: var(--color-neutral-50)
}

.dropdown-notification:last-child {
  border-bottom: none
}

.dropdown-notification.unread {
  background-color: var(--color-blue-50)
}

.dropdown-notification.unread:hover {
  background-color: var(--color-blue-100)
}

.dropdown-notification-icon {
  align-items: center;
  border-radius: 50%;
  display: flex;
  flex-shrink: 0;
  height: 4rem;
  justify-content: center;
  width: 4rem
}

.dropdown-notification-icon.success {
  background-color: var(--color-green-100);
  color: var(--color-green-600)
}

.dropdown-notification-icon.info {
  background-color: var(--color-blue-100);
  color: var(--color-blue-600)
}

.dropdown-notification-icon.warning {
  background-color: var(--color-yellow-100);
  color: var(--color-yellow-600)
}

.dropdown-notification-icon.error {
  background-color: var(--color-red-100);
  color: var(--color-red-600)
}

.dropdown-notification-content {
  flex: 1;
  min-width: 0
}

.dropdown-notification-title {
  color: var(--color-neutral-800);
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 1.4;
  margin-bottom: .25rem
}

.dropdown-notification-message {
  color: var(--color-neutral-600);
  font-size: 1.3rem;
  line-height: 1.4;
  margin-bottom: .5rem
}

.dropdown-notification-time {
  color: var(--color-neutral-500);
  font-size: 1.2rem
}

.dropdown-notification-dot {
  background-color: var(--color-blue-600)
}

.dropdown-notifications-footer a {
  color: var(--color-blue-600);
  font-size: 1.3rem;
  font-weight: 500
}

.dropdown-notifications-footer a:hover {
  color: var(--color-blue-700)
}

.dropdown-notifications-empty {
  color: var(--color-neutral-500);
  padding: 3rem 2rem;
  text-align: center
}

.dropdown-notifications-empty .icon {
  color: var(--color-neutral-400);
  height: 4rem;
  margin: 0 auto 1rem;
  width: 4rem
}

.notification-badge {
  align-items: center;
  background: var(--color-red-500);
  border: .2rem solid var(--color-white);
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
  color: var(--color-white);
  display: flex;
  font-size: 1.2rem;
  font-weight: 600;
  height: 2rem;
  justify-content: center;
  line-height: 1;
  position: absolute;
  right: -.8rem;
  top: -.8rem;
  width: 2rem;
  z-index: 10
}

.notification-badge.large {
  font-size: 1.2rem;
  height: 2.2rem;
  right: -.6rem;
  top: -.6rem;
  width: 2.2rem
}

.notification-badge.small {
  font-size: 1rem;
  height: 1.4rem;
  right: -.4rem;
  top: -.4rem;
  width: 1.4rem
}

.notification-badge:empty,
.notification-badge[data-count="0"] {
  display: none
}

@media (prefers-color-scheme:dark) {
  .dropdown-menu {
    background-color: var(--color-neutral-800);
    border-color: var(--color-neutral-700)
  }

  .dropdown-item {
    color: var(--color-neutral-200)
  }

  .dropdown-item:focus,
  .dropdown-item:hover {
    background-color: var(--color-neutral-700);
    color: var(--color-white)
  }

  .dropdown-divider {
    background-color: var(--color-neutral-700)
  }

  .dropdown-heading {
    color: var(--color-neutral-400)
  }
}

.notifications-container {
  margin: 0 auto;
  max-width: 80rem;
  padding: 2rem
}

.notification {
  background-color: #fff;
  border: .1rem solid var(--color-neutral-200);
  border-radius: var(--default-border-radius);
  display: flex;
  gap: 1.2rem;
  margin-bottom: 1.2rem;
  padding: 1.6rem;
  position: relative;
  transition: all .2s ease
}

.notification:hover {
  border-color: var(--color-neutral-300);
  box-shadow: 0 .1rem .3rem rgba(0, 0, 0, .05)
}

.notification:last-child {
  margin-bottom: 0
}

.notification.unread {
  background-color: var(--color-primary-50);
  border-color: var(--color-primary-200)
}

.notification.unread:before {
  background-color: var(--color-primary-500);
  border-radius: var(--default-border-radius) 0 0 var(--default-border-radius);
  bottom: 0;
  content: "";
  left: 0;
  position: absolute;
  top: 0;
  width: .3rem
}

.notification-icon {
  align-items: center;
  border-radius: 50%;
  display: flex;
  flex-shrink: 0;
  height: 4rem;
  justify-content: center;
  width: 4rem
}

.notification-icon .icon,
.notification-icon svg {
  height: 2rem;
  width: 2rem
}

.notification-icon.success {
  background-color: var(--color-green-100);
  color: var(--color-green-600)
}

.notification-icon.error {
  background-color: var(--color-red-100);
  color: var(--color-red-600)
}

.notification-icon.warning {
  background-color: var(--color-orange-100);
  color: var(--color-orange-600)
}

.notification-icon.info {
  background-color: var(--color-blue-100);
  color: var(--color-blue-600)
}

.notification-icon.primary {
  background-color: var(--color-primary-100);
  color: var(--color-primary-600)
}

.notification-content {
  flex: 1;
  min-width: 0
}

.notification-message,
.notification-title {
  margin-bottom: .4rem
}

.notification-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
  margin-top: 1rem
}

.notification-close {
  align-items: center;
  background: none;
  border: none;
  border-radius: var(--default-border-radius);
  color: var(--color-neutral-400);
  cursor: pointer;
  display: flex;
  flex-shrink: 0;
  height: 2.4rem;
  justify-content: center;
  padding: 0;
  transition: all .2s ease;
  width: 2.4rem
}

.notification-close:hover {
  background-color: var(--color-neutral-100);
  color: var(--color-neutral-600)
}

.notification-close .icon {
  height: 1.6rem;
  width: 1.6rem
}

.notification-dot {
  background-color: var(--color-primary-500);
  border-radius: 50%;
  height: .8rem;
  position: absolute;
  right: 1.6rem;
  top: 1.6rem;
  width: .8rem
}

.notification-avatar {
  border: .2rem solid var(--color-neutral-200);
  border-radius: 50%;
  flex-shrink: 0;
  height: 4rem;
  object-fit: cover;
  width: 4rem
}

.notification-compact {
  gap: 1rem;
  padding: 1.2rem
}

.notification-compact .notification-icon {
  height: 3.2rem;
  width: 3.2rem
}

.notification-compact .notification-icon .icon {
  height: 1.6rem;
  width: 1.6rem
}

.notification-compact .notification-title {
  font-size: 1.3rem;
  margin-bottom: .2rem
}

.notification-compact .notification-message {
  font-size: 1.2rem
}

.notification-group {
  margin-bottom: 2.4rem
}

.notification-group:last-child {
  margin-bottom: 0
}

.notification-group-header {
  letter-spacing: .05rem;
  margin-bottom: 1.2rem;
  padding: 0 .4rem;
  text-transform: uppercase
}

.notifications-empty {
  padding: 4rem 2rem;
  text-align: center
}

.notifications-empty .icon {
  color: var(--color-neutral-300);
  height: 4.8rem;
  margin-bottom: 1.6rem;
  width: 4.8rem
}

.notifications-empty-title {
  margin-bottom: .8rem
}

.notifications-header {
  align-items: center;
  border-bottom: .1rem solid var(--color-neutral-200);
  display: flex;
  justify-content: space-between;
  margin-bottom: 2rem;
  padding-bottom: 1.6rem
}

.notifications-title {
  margin: 0
}

.notifications-actions {
  display: flex;
  gap: 1rem
}

.notifications-action-link {
  color: var(--color-primary-600);
  text-decoration: none;
  transition: color .2s ease
}

.notifications-action-link:hover {
  color: var(--color-primary-700);
  text-decoration: underline
}

.notifications-filters {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
  margin-bottom: 2rem
}

.notification-filter {
  background-color: #fff;
  border: .1rem solid var(--color-neutral-300);
  border-radius: var(--default-border-radius);
  color: var(--color-neutral-700);
  cursor: pointer;
  padding: .8rem 1.6rem;
  text-decoration: none;
  transition: all .2s ease
}

.notification-filter:hover {
  background-color: var(--color-neutral-50);
  border-color: var(--color-neutral-400)
}

.notification-filter.active {
  background-color: var(--color-primary-500);
  border-color: var(--color-primary-500);
  color: #fff
}

.notification-thumbnail {
  border: .1rem solid var(--color-neutral-200);
  border-radius: var(--default-border-radius);
  flex-shrink: 0;
  height: 6rem;
  object-fit: cover;
  width: 6rem
}

.notification-progress {
  margin-top: 1rem
}

.notification-progress-bar {
  background-color: var(--color-neutral-200);
  border-radius: .3rem;
  height: .6rem;
  overflow: hidden;
  width: 100%
}

.notification-progress-fill {
  background-color: var(--color-primary-500);
  border-radius: .3rem;
  height: 100%;
  transition: width .3s ease
}

.notification-progress-text {
  display: flex;
  justify-content: space-between;
  margin-top: .4rem
}

.dropdown-notification-item {
  border-bottom: .1rem solid var(--color-neutral-100);
  color: inherit;
  cursor: pointer;
  display: flex;
  gap: 1rem;
  padding: 1rem;
  text-decoration: none;
  transition: background-color .12s ease
}

.dropdown-notification-item:hover {
  background-color: var(--color-neutral-50)
}

.dropdown-notification-item:last-child {
  border-bottom: none
}

.dropdown-notification-item.unread {
  background-color: var(--color-primary-50)
}

.dropdown-notification-item.unread:hover {
  background-color: var(--color-primary-100)
}

.dropdown-notification-item .notification-icon {
  height: 3.6rem;
  width: 3.6rem
}

.dropdown-notification-item .notification-icon .icon {
  height: 1.8rem;
  width: 1.8rem
}

.dropdown-notification-item .notification-content {
  flex: 1;
  min-width: 0
}

.dropdown-notification-item .notification-message,
.dropdown-notification-item .notification-title {
  margin-bottom: .3rem
}

.dropdown-notification-item .notification-actions {
  gap: .6rem;
  margin-top: .8rem
}

.dropdown-notification-dot {
  background-color: var(--color-primary-500);
  border-radius: 50%;
  flex-shrink: 0;
  height: .8rem;
  margin-top: .3rem;
  width: .8rem
}

.dropdown-menu.dropdown-notifications {
  max-height: 60rem;
  max-width: 40rem;
  min-width: 36rem;
  overflow-y: auto
}

.dropdown-menu.dropdown-notifications .dropdown-heading {
  align-items: center;
  border-bottom: .1rem solid var(--color-neutral-200);
  display: flex;
  justify-content: space-between;
  letter-spacing: normal;
  margin: -.5rem -.5rem 0;
  padding: 1rem;
  text-transform: none
}

.dropdown-notifications-footer {
  border-top: .1rem solid var(--color-neutral-200);
  margin: 0 -.5rem -.5rem;
  padding: 1rem;
  text-align: center
}

.dropdown-notifications-footer a {
  color: var(--color-primary-600);
  text-decoration: none
}

.dropdown-notifications-footer a:hover {
  color: var(--color-primary-700);
  text-decoration: underline
}

@media (max-width:768px) {
  .notifications-container {
    padding: 1rem
  }

  .notification {
    gap: 1rem;
    padding: 1.2rem
  }

  .notification-icon {
    height: 3.2rem;
    width: 3.2rem
  }

  .notification-icon .icon {
    height: 1.6rem;
    width: 1.6rem
  }

  .notification-title {
    font-size: 1.3rem
  }

  .notification-message {
    font-size: 1.2rem
  }

  .notifications-header {
    align-items: flex-start;
    flex-direction: column;
    gap: 1.2rem
  }

  .notifications-actions {
    justify-content: flex-start;
    width: 100%
  }

  .dropdown-menu.dropdown-notifications {
    max-width: 36rem;
    min-width: 32rem
  }
}

.skeleton {
  animation: skeleton-loading 1.5s ease-in-out infinite;
  background: linear-gradient(90deg, var(--color-neutral-200) 25%, var(--color-neutral-150) 50%, var(--color-neutral-200) 75%);
  background-size: 200% 100%;
  border-radius: var(--default-border-radius);
  min-height: 1.2rem;
  overflow: hidden;
  position: relative
}

.skeleton:before {
  animation: skeleton-shimmer 1.8s ease-in-out infinite;
  background: linear-gradient(90deg, transparent, hsla(0, 0%, 100%, .4), transparent);
  content: "";
  height: 100%;
  left: -100%;
  position: absolute;
  top: 0;
  width: 100%
}

@keyframes skeleton-loading {

  0%,
  to {
    background-position: 200% 0
  }

  50% {
    background-position: -200% 0
  }
}

@keyframes skeleton-shimmer {
  0% {
    left: -100%
  }

  to {
    left: 100%
  }
}

.skeleton-text {
  height: 1.2rem;
  width: 100%
}

.skeleton-text-sm {
  height: 1rem
}

.skeleton-text-lg {
  height: 1.6rem
}

.skeleton-text-xl {
  height: 2rem
}

.skeleton-circle {
  border-radius: 50%;
  height: 4rem;
  width: 4rem
}

.skeleton-avatar {
  border-radius: 50%;
  height: 3.2rem;
  width: 3.2rem
}

.skeleton-avatar-sm {
  height: 2.4rem;
  width: 2.4rem
}

.skeleton-avatar-lg {
  height: 4.8rem;
  width: 4.8rem
}

.skeleton-button {
  border-radius: var(--default-border-radius);
  height: 3.6rem;
  width: 8rem
}

.skeleton-card {
  height: 12rem;
  width: 100%
}

.skeleton-line {
  height: .8rem;
  margin-bottom: .8rem
}

.skeleton-line:last-child {
  margin-bottom: 0
}

.skeleton-line-short {
  width: 60%
}

.skeleton-line-medium {
  width: 80%
}

.skeleton-line-full {
  width: 100%
}

.skeleton-rounded-none {
  border-radius: 0
}

.skeleton-rounded-sm {
  border-radius: .2rem
}

.skeleton-rounded {
  border-radius: .4rem
}

.skeleton-rounded-md {
  border-radius: .6rem
}

.skeleton-rounded-lg {
  border-radius: var(--default-border-radius)
}

.skeleton-rounded-xl {
  border-radius: 1.2rem
}

.skeleton-rounded-2xl {
  border-radius: 1.6rem
}

.skeleton-rounded-3xl {
  border-radius: 2.4rem
}

.skeleton-rounded-full {
  border-radius: 9999px
}

.loader {
  align-items: center;
  display: inline-flex;
  height: 2.4rem;
  justify-content: center;
  width: 2.4rem
}

@keyframes spin {
  0% {
    transform: rotate(0deg)
  }

  to {
    transform: rotate(1turn)
  }
}

@keyframes pulse {

  0%,
  to {
    opacity: 1
  }

  50% {
    opacity: .5
  }
}

@keyframes bounce {

  0%,
  20%,
  50%,
  80%,
  to {
    transform: translateY(0)
  }

  40% {
    transform: translateY(-.8rem)
  }

  60% {
    transform: translateY(-.4rem)
  }
}

.loader-spinner {
  animation: spin 1s linear infinite;
  border-top: .2rem solid var(--color-neutral-200);
  border: .2rem solid var(--color-neutral-200);
  border-radius: 50%;
  border-top-color: var(--color-primary-500);
  height: 2.4rem;
  width: 2.4rem
}

.loader-ring {
  animation: spin .8s linear infinite;
  border: .3rem solid transparent;
  border-radius: 50%;
  border-right: .3rem solid var(--color-primary-500);
  border-top: .3rem solid var(--color-primary-500);
  height: 2.4rem;
  width: 2.4rem
}

.loader-dots {
  align-items: center;
  display: flex;
  gap: .3rem
}

.loader-dots .dot {
  animation: bounce 1.4s ease-in-out infinite both;
  background: var(--color-primary-500);
  border-radius: 50%;
  height: .6rem;
  width: .6rem
}

.loader-dots .dot:first-child {
  animation-delay: -.32s
}

.loader-dots .dot:nth-child(2) {
  animation-delay: -.16s
}

.loader-dots .dot:nth-child(3) {
  animation-delay: 0s
}

.loader-pulse {
  animation: pulse 1.5s ease-in-out infinite;
  background: var(--color-primary-500);
  border-radius: 50%;
  height: 2.4rem;
  width: 2.4rem
}

.loader-bars {
  align-items: center;
  display: flex;
  gap: .2rem;
  height: 2.4rem
}

.loader-bars .bar {
  animation: bounce 1.4s ease-in-out infinite both;
  background: var(--color-primary-500);
  border-radius: .2rem;
  height: 1.2rem;
  width: .3rem
}

.loader-bars .bar:first-child {
  animation-delay: -.32s
}

.loader-bars .bar:nth-child(2) {
  animation-delay: -.16s
}

.loader-bars .bar:nth-child(3) {
  animation-delay: 0s
}

.loader-bars .bar:nth-child(4) {
  animation-delay: .16s
}

.loader-xs,
.loader-xs .loader-pulse,
.loader-xs .loader-ring,
.loader-xs .loader-spinner {
  height: 1.6rem;
  width: 1.6rem
}

.loader-xs .loader-dots .dot {
  height: .4rem;
  width: .4rem
}

.loader-xs .loader-bars {
  height: 1.6rem
}

.loader-xs .loader-bars .bar {
  height: .8rem;
  width: .2rem
}

.loader-sm,
.loader-sm .loader-pulse,
.loader-sm .loader-ring,
.loader-sm .loader-spinner {
  height: 2rem;
  width: 2rem
}

.loader-sm .loader-dots .dot {
  height: .5rem;
  width: .5rem
}

.loader-sm .loader-bars {
  height: 2rem
}

.loader-sm .loader-bars .bar {
  height: 1rem;
  width: .25rem
}

.loader-lg,
.loader-lg .loader-pulse,
.loader-lg .loader-ring,
.loader-lg .loader-spinner {
  height: 3.2rem;
  width: 3.2rem
}

.loader-lg .loader-dots .dot {
  height: .8rem;
  width: .8rem
}

.loader-lg .loader-bars {
  height: 3.2rem
}

.loader-lg .loader-bars .bar {
  height: 1.6rem;
  width: .4rem
}

.loader-xl,
.loader-xl .loader-pulse,
.loader-xl .loader-ring,
.loader-xl .loader-spinner {
  height: 4rem;
  width: 4rem
}

.loader-xl .loader-dots .dot {
  height: 1rem;
  width: 1rem
}

.loader-xl .loader-bars {
  height: 4rem
}

.loader-xl .loader-bars .bar {
  height: 2rem;
  width: .5rem
}

.loader-primary .loader-ring,
.loader-primary .loader-spinner {
  border-top-color: var(--color-primary-500)
}

.loader-primary .loader-ring {
  border-right-color: var(--color-primary-500)
}

.loader-primary .loader-bars .bar,
.loader-primary .loader-dots .dot,
.loader-primary .loader-pulse {
  background: var(--color-primary-500)
}

.loader-secondary .loader-ring,
.loader-secondary .loader-spinner {
  border-top-color: var(--color-neutral-500)
}

.loader-secondary .loader-ring {
  border-right-color: var(--color-neutral-500)
}

.loader-secondary .loader-bars .bar,
.loader-secondary .loader-dots .dot,
.loader-secondary .loader-pulse {
  background: var(--color-neutral-500)
}

.loader-success .loader-ring,
.loader-success .loader-spinner {
  border-top-color: var(--color-green-500)
}

.loader-success .loader-ring {
  border-right-color: var(--color-green-500)
}

.loader-success .loader-bars .bar,
.loader-success .loader-dots .dot,
.loader-success .loader-pulse {
  background: var(--color-green-500)
}

.loader-warning .loader-ring,
.loader-warning .loader-spinner {
  border-top-color: var(--color-orange-500)
}

.loader-warning .loader-ring {
  border-right-color: var(--color-orange-500)
}

.loader-warning .loader-bars .bar,
.loader-warning .loader-dots .dot,
.loader-warning .loader-pulse {
  background: var(--color-orange-500)
}

.loader-danger .loader-ring,
.loader-danger .loader-spinner {
  border-top-color: var(--color-red-500)
}

.loader-danger .loader-ring {
  border-right-color: var(--color-red-500)
}

.loader-danger .loader-bars .bar,
.loader-danger .loader-dots .dot,
.loader-danger .loader-pulse {
  background: var(--color-red-500)
}

.loader-info .loader-ring,
.loader-info .loader-spinner {
  border-top-color: var(--color-blue-500)
}

.loader-info .loader-ring {
  border-right-color: var(--color-blue-500)
}

.loader-info .loader-bars .bar,
.loader-info .loader-dots .dot,
.loader-info .loader-pulse {
  background: var(--color-blue-500)
}

.loader-light .loader-spinner {
  border-color: hsla(0, 0%, 100%, .3);
  border-top-color: var(--color-white)
}

.loader-light .loader-ring {
  border-bottom: .3rem solid transparent;
  border-left: .3rem solid transparent;
  border-right: .3rem solid transparent;
  border-right-color: var(--color-white);
  border-top: .3rem solid transparent;
  border-top-color: var(--color-white)
}

.loader-light .loader-bars .bar,
.loader-light .loader-dots .dot,
.loader-light .loader-pulse {
  background: var(--color-white)
}

.loader-overlay {
  align-items: center;
  backdrop-filter: blur(.2rem);
  background: hsla(0, 0%, 100%, .8);
  border-radius: inherit;
  bottom: 0;
  display: flex;
  justify-content: center;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 100
}

.loader-overlay-dark {
  background: rgba(0, 0, 0, .5)
}

.loader-overlay-blur {
  backdrop-filter: blur(.4rem)
}

.loader-fullscreen {
  align-items: center;
  backdrop-filter: blur(.3rem);
  background: hsla(0, 0%, 100%, .9);
  bottom: 0;
  display: flex;
  justify-content: center;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 1000
}

.loader-fullscreen-dark {
  background: rgba(0, 0, 0, .7)
}

.loader-with-text {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 1rem
}

.loader-with-text .loader-text {
  color: var(--color-neutral-600);
  font-size: 1.4rem;
  font-weight: 500
}

.loader-fullscreen .loader-text,
.loader-overlay .loader-text {
  color: var(--color-neutral-700)
}

.loader-fullscreen-dark .loader-text,
.loader-overlay-dark .loader-text {
  color: var(--color-white)
}

.loader-inline {
  align-items: center;
  display: inline-flex;
  vertical-align: middle
}

.loader-inline,
.loader-inline .loader-pulse,
.loader-inline .loader-ring,
.loader-inline .loader-spinner {
  height: 1.6rem;
  width: 1.6rem
}

.loader-inline .loader-dots .dot {
  height: .3rem;
  width: .3rem
}

.loader-inline .loader-bars {
  height: 1.6rem
}

.loader-inline .loader-bars .bar {
  height: .8rem;
  width: .2rem
}

.button[disabled].loading {
  pointer-events: none;
  position: relative
}

.button[disabled].loading .button-text {
  opacity: 0
}

.button[disabled].loading .loader-inline {
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%)
}

.text-center {
  text-align: center
}

.cursor-pointer {
  cursor: pointer
}

.backdrop {
  background-color: var(--color-neutral-800);
  display: none;
  height: 100vh;
  left: 0;
  opacity: .7;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 100
}

.backdrop.active {
  display: unset
}

:root {
  --color-white: #fff;
  --color-muted: var(--color-neutral-500);
  --color-neutral-50: #fafafa;
  --color-neutral-100: #f5f5f5;
  --color-neutral-150: #ededed;
  --color-neutral-200: #e5e5e5;
  --color-neutral-250: #dcdcdc;
  --color-neutral-300: #d4d4d4;
  --color-neutral-350: #bfbfbf;
  --color-neutral-400: #a3a3a3;
  --color-neutral-450: #8e8e8e;
  --color-neutral-500: #737373;
  --color-neutral-550: #636363;
  --color-neutral-600: #525252;
  --color-neutral-650: #474747;
  --color-neutral-700: #404040;
  --color-neutral-750: #313131;
  --color-neutral-800: #262626;
  --color-neutral-850: #1e1e1e;
  --color-neutral-900: #171717;
  --color-neutral-950: #0a0a0a;
  --color-stone-50: #fafaf9;
  --color-stone-100: #f5f5f4;
  --color-stone-150: #edece9;
  --color-stone-200: #e7e5e4;
  --color-stone-250: #d7d5d2;
  --color-stone-300: #d6d3d1;
  --color-stone-350: #bfbdb8;
  --color-stone-400: #a8a29e;
  --color-stone-450: #958f89;
  --color-stone-500: #78716c;
  --color-stone-550: #6e665f;
  --color-stone-600: #57534e;
  --color-stone-650: #544f48;
  --color-stone-700: #44403c;
  --color-stone-750: #3c3733;
  --color-stone-800: #292524;
  --color-stone-850: #25211e;
  --color-stone-900: #1c1917;
  --color-stone-950: #0c0a09;
  --color-zinc-50: #fafafa;
  --color-zinc-100: #f4f4f5;
  --color-zinc-150: #eaeaf0;
  --color-zinc-200: #e4e4e7;
  --color-zinc-250: #d5d5db;
  --color-zinc-300: #d4d4d8;
  --color-zinc-350: #bfbfc8;
  --color-zinc-400: #a1a1aa;
  --color-zinc-450: #8f90a1;
  --color-zinc-500: #71717a;
  --color-zinc-550: #696a75;
  --color-zinc-600: #52525b;
  --color-zinc-650: #4a4b58;
  --color-zinc-700: #3f3f46;
  --color-zinc-750: #353544;
  --color-zinc-800: #27272a;
  --color-zinc-850: #24242e;
  --color-zinc-900: #18181b;
  --color-zinc-950: #09090b;
  --color-red-50: #fef2f2;
  --color-red-100: #fee2e2;
  --color-red-150: #fed6d6;
  --color-red-200: #fecaca;
  --color-red-250: #fdb5b5;
  --color-red-300: #fca5a5;
  --color-red-350: #f98989;
  --color-red-400: #f87171;
  --color-red-450: #f05555;
  --color-red-500: #ef4444;
  --color-red-550: #e33c3c;
  --color-red-600: #dc2626;
  --color-red-650: #c92020;
  --color-red-700: #b91c1c;
  --color-red-750: #a11a1a;
  --color-red-800: #991b1b;
  --color-red-850: #881616;
  --color-red-900: #7f1d1d;
  --color-red-950: #450a0a;
  --color-green-50: #e9fcef;
  --color-green-100: #d2f5dc;
  --color-green-150: #bcefc9;
  --color-green-200: #a5e7b5;
  --color-green-250: #8fdfa2;
  --color-green-300: #79d68f;
  --color-green-350: #64cd7d;
  --color-green-400: #4fc36b;
  --color-green-450: #3db75d;
  --color-green-500: #2dab4f;
  --color-green-550: #289e49;
  --color-green-600: #239143;
  --color-green-650: #1e843d;
  --color-green-700: #1a7637;
  --color-green-750: #166931;
  --color-green-800: #125b2a;
  --color-green-850: #0f4e24;
  --color-green-900: #0b411e;
  --color-green-950: #062b13;
  --color-orange-50: #fff7ed;
  --color-orange-100: #ffedd5;
  --color-orange-150: #fed7aa;
  --color-orange-200: #fdc98f;
  --color-orange-250: #fcb574;
  --color-orange-300: #fb923c;
  --color-orange-350: #f97316;
  --color-orange-400: #ea580c;
  --color-orange-450: #dc2626;
  --color-orange-500: #c2410c;
  --color-orange-550: #a16207;
  --color-orange-600: #92400e;
  --color-orange-650: #78350f;
  --color-orange-700: #6b2c0b;
  --color-orange-750: #5a2309;
  --color-orange-800: #431407;
  --color-orange-850: #361105;
  --color-orange-900: #2c0e04;
  --color-orange-950: #1c0a03;
  --color-blue-50: #eff6ff;
  --color-blue-100: #dbeafe;
  --color-blue-150: #bfdbfe;
  --color-blue-200: #93c5fd;
  --color-blue-250: #7dd3fc;
  --color-blue-300: #60a5fa;
  --color-blue-350: #3b82f6;
  --color-blue-400: #2563eb;
  --color-blue-450: #1d4ed8;
  --color-blue-500: #1e40af;
  --color-blue-550: #1e3a8a;
  --color-blue-600: #1d4ed8;
  --color-blue-650: #1e3a8a;
  --color-blue-700: #1d4ed8;
  --color-blue-750: #172554;
  --color-blue-800: #1e3a8a;
  --color-blue-850: #172554;
  --color-blue-900: #0f172a;
  --color-blue-950: #0c1229
}

.bg-white {
  background-color: var(--color-white)
}

.bg-color-neutral-50 {
  background-color: var(--color-neutral-50)
}

.bg-color-neutral-100 {
  background-color: var(--color-neutral-100)
}

.bg-color-neutral-150 {
  background-color: var(--color-neutral-150)
}

.bg-color-neutral-200 {
  background-color: var(--color-neutral-200)
}

.bg-color-neutral-250 {
  background-color: var(--color-neutral-250)
}

.bg-color-neutral-300 {
  background-color: var(--color-neutral-300)
}

.bg-color-neutral-350 {
  background-color: var(--color-neutral-350)
}

.bg-color-neutral-400 {
  background-color: var(--color-neutral-400)
}

.bg-color-neutral-450 {
  background-color: var(--color-neutral-450)
}

.bg-color-neutral-500 {
  background-color: var(--color-neutral-500)
}

.bg-color-neutral-550 {
  background-color: var(--color-neutral-550)
}

.bg-color-neutral-600 {
  background-color: var(--color-neutral-600)
}

.bg-color-neutral-650 {
  background-color: var(--color-neutral-650)
}

.bg-color-neutral-700 {
  background-color: var(--color-neutral-700)
}

.bg-color-neutral-750 {
  background-color: var(--color-neutral-750)
}

.bg-color-neutral-800 {
  background-color: var(--color-neutral-800)
}

.bg-color-neutral-850 {
  background-color: var(--color-neutral-850)
}

.bg-color-neutral-900 {
  background-color: var(--color-neutral-900)
}

.bg-color-neutral-950 {
  background-color: var(--color-neutral-950)
}

.bg-color-stone-50 {
  background-color: var(--color-stone-50)
}

.bg-color-stone-100 {
  background-color: var(--color-stone-100)
}

.bg-color-stone-150 {
  background-color: var(--color-stone-150)
}

.bg-color-stone-200 {
  background-color: var(--color-stone-200)
}

.bg-color-stone-250 {
  background-color: var(--color-stone-250)
}

.bg-color-stone-300 {
  background-color: var(--color-stone-300)
}

.bg-color-stone-350 {
  background-color: var(--color-stone-350)
}

.bg-color-stone-400 {
  background-color: var(--color-stone-400)
}

.bg-color-stone-450 {
  background-color: var(--color-stone-450)
}

.bg-color-stone-500 {
  background-color: var(--color-stone-500)
}

.bg-color-stone-550 {
  background-color: var(--color-stone-550)
}

.bg-color-stone-600 {
  background-color: var(--color-stone-600)
}

.bg-color-stone-650 {
  background-color: var(--color-stone-650)
}

.bg-color-stone-700 {
  background-color: var(--color-stone-700)
}

.bg-color-stone-750 {
  background-color: var(--color-stone-750)
}

.bg-color-stone-800 {
  background-color: var(--color-stone-800)
}

.bg-color-stone-850 {
  background-color: var(--color-stone-850)
}

.bg-color-stone-900 {
  background-color: var(--color-stone-900)
}

.bg-color-stone-950 {
  background-color: var(--color-stone-950)
}

.bg-color-zinc-50 {
  background-color: var(--color-zinc-50)
}

.bg-color-zinc-100 {
  background-color: var(--color-zinc-100)
}

.bg-color-zinc-150 {
  background-color: var(--color-zinc-150)
}

.bg-color-zinc-200 {
  background-color: var(--color-zinc-200)
}

.bg-color-zinc-250 {
  background-color: var(--color-zinc-250)
}

.bg-color-zinc-300 {
  background-color: var(--color-zinc-300)
}

.bg-color-zinc-350 {
  background-color: var(--color-zinc-350)
}

.bg-color-zinc-400 {
  background-color: var(--color-zinc-400)
}

.bg-color-zinc-450 {
  background-color: var(--color-zinc-450)
}

.bg-color-zinc-500 {
  background-color: var(--color-zinc-500)
}

.bg-color-zinc-550 {
  background-color: var(--color-zinc-550)
}

.bg-color-zinc-600 {
  background-color: var(--color-zinc-600)
}

.bg-color-zinc-650 {
  background-color: var(--color-zinc-650)
}

.bg-color-zinc-700 {
  background-color: var(--color-zinc-700)
}

.bg-color-zinc-750 {
  background-color: var(--color-zinc-750)
}

.bg-color-zinc-800 {
  background-color: var(--color-zinc-800)
}

.bg-color-zinc-850 {
  background-color: var(--color-zinc-850)
}

.bg-color-zinc-900 {
  background-color: var(--color-zinc-900)
}

.bg-color-zinc-950 {
  background-color: var(--color-zinc-950)
}

.bg-color-red-50 {
  background-color: var(--color-red-50)
}

.bg-color-red-100 {
  background-color: var(--color-red-100)
}

.bg-color-red-200 {
  background-color: var(--color-red-200)
}

.bg-color-red-300 {
  background-color: var(--color-red-300)
}

.bg-color-red-400 {
  background-color: var(--color-red-400)
}

.bg-color-red-500 {
  background-color: var(--color-red-500)
}

.bg-color-red-600 {
  background-color: var(--color-red-600)
}

.bg-color-red-700 {
  background-color: var(--color-red-700)
}

.bg-color-red-800 {
  background-color: var(--color-red-800)
}

.bg-color-red-900 {
  background-color: var(--color-red-900)
}

.bg-color-red-950 {
  background-color: var(--color-red-950)
}

.bg-color-green-50 {
  background-color: var(--color-green-50)
}

.bg-color-green-100 {
  background-color: var(--color-green-100)
}

.bg-color-green-150 {
  background-color: var(--color-green-150)
}

.bg-color-green-200 {
  background-color: var(--color-green-200)
}

.bg-color-green-250 {
  background-color: var(--color-green-250)
}

.bg-color-green-300 {
  background-color: var(--color-green-300)
}

.bg-color-green-350 {
  background-color: var(--color-green-350)
}

.bg-color-green-400 {
  background-color: var(--color-green-400)
}

.bg-color-green-450 {
  background-color: var(--color-green-450)
}

.bg-color-green-500 {
  background-color: var(--color-green-500)
}

.bg-color-green-550 {
  background-color: var(--color-green-550)
}

.bg-color-green-600 {
  background-color: var(--color-green-600)
}

.bg-color-green-650 {
  background-color: var(--color-green-650)
}

.bg-color-green-700 {
  background-color: var(--color-green-700)
}

.bg-color-green-750 {
  background-color: var(--color-green-750)
}

.bg-color-green-800 {
  background-color: var(--color-green-800)
}

.bg-color-green-850 {
  background-color: var(--color-green-850)
}

.bg-color-green-900 {
  background-color: var(--color-green-900)
}

.bg-color-green-950 {
  background-color: var(--color-green-950)
}

.bg-color-green-975 {
  background-color: var(--green-975)
}

.bg-color-blue-50 {
  background-color: var(--color-blue-50)
}

.bg-color-blue-100 {
  background-color: var(--color-blue-100)
}

.bg-color-blue-150 {
  background-color: var(--color-blue-150)
}

.bg-color-blue-200 {
  background-color: var(--color-blue-200)
}

.bg-color-blue-250 {
  background-color: var(--color-blue-250)
}

.bg-color-blue-300 {
  background-color: var(--color-blue-300)
}

.bg-color-blue-350 {
  background-color: var(--color-blue-350)
}

.bg-color-blue-400 {
  background-color: var(--color-blue-400)
}

.bg-color-blue-450 {
  background-color: var(--color-blue-450)
}

.bg-color-blue-500 {
  background-color: var(--color-blue-500)
}

.bg-color-blue-550 {
  background-color: var(--color-blue-550)
}

.bg-color-blue-600 {
  background-color: var(--color-blue-600)
}

.bg-color-blue-650 {
  background-color: var(--color-blue-650)
}

.bg-color-blue-700 {
  background-color: var(--color-blue-700)
}

.bg-color-blue-750 {
  background-color: var(--color-blue-750)
}

.bg-color-blue-800 {
  background-color: var(--color-blue-800)
}

.bg-color-blue-850 {
  background-color: var(--color-blue-850)
}

.bg-color-blue-900 {
  background-color: var(--color-blue-900)
}

.bg-color-blue-950 {
  background-color: var(--color-blue-950)
}

.color-muted {
  color: var(--color-muted)
}

.color-white {
  color: var(--color-white)
}

.color-neutral-50 {
  color: var(--color-neutral-50)
}

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

.color-neutral-150 {
  color: var(--color-neutral-150)
}

.color-neutral-200 {
  color: var(--color-neutral-200)
}

.color-neutral-250 {
  color: var(--color-neutral-250)
}

.color-neutral-300 {
  color: var(--color-neutral-300)
}

.color-neutral-350 {
  color: var(--color-neutral-350)
}

.color-neutral-400 {
  color: var(--color-neutral-400)
}

.color-neutral-450 {
  color: var(--color-neutral-450)
}

.color-neutral-500 {
  color: var(--color-neutral-500)
}

.color-neutral-550 {
  color: var(--color-neutral-550)
}

.color-neutral-600 {
  color: var(--color-neutral-600)
}

.color-neutral-650 {
  color: var(--color-neutral-650)
}

.color-neutral-700 {
  color: var(--color-neutral-700)
}

.color-neutral-750 {
  color: var(--color-neutral-750)
}

.color-neutral-800 {
  color: var(--color-neutral-800)
}

.color-neutral-850 {
  color: var(--color-neutral-850)
}

.color-neutral-900 {
  color: var(--color-neutral-900)
}

.color-neutral-950 {
  color: var(--color-neutral-950)
}

.color-stone-50 {
  color: var(--color-stone-50)
}

.color-stone-100 {
  color: var(--color-stone-100)
}

.color-stone-150 {
  color: var(--color-stone-150)
}

.color-stone-200 {
  color: var(--color-stone-200)
}

.color-stone-250 {
  color: var(--color-stone-250)
}

.color-stone-300 {
  color: var(--color-stone-300)
}

.color-stone-350 {
  color: var(--color-stone-350)
}

.color-stone-400 {
  color: var(--color-stone-400)
}

.color-stone-450 {
  color: var(--color-stone-450)
}

.color-stone-500 {
  color: var(--color-stone-500)
}

.color-stone-550 {
  color: var(--color-stone-550)
}

.color-stone-600 {
  color: var(--color-stone-600)
}

.color-stone-650 {
  color: var(--color-stone-650)
}

.color-stone-700 {
  color: var(--color-stone-700)
}

.color-stone-750 {
  color: var(--color-stone-750)
}

.color-stone-800 {
  color: var(--color-stone-800)
}

.color-stone-850 {
  color: var(--color-stone-850)
}

.color-stone-900 {
  color: var(--color-stone-900)
}

.color-stone-950 {
  color: var(--color-stone-950)
}

.color-zinc-50 {
  color: var(--color-zinc-50)
}

.color-zinc-100 {
  color: var(--color-zinc-100)
}

.color-zinc-150 {
  color: var(--color-zinc-150)
}

.color-zinc-200 {
  color: var(--color-zinc-200)
}

.color-zinc-250 {
  color: var(--color-zinc-250)
}

.color-zinc-300 {
  color: var(--color-zinc-300)
}

.color-zinc-350 {
  color: var(--color-zinc-350)
}

.color-zinc-400 {
  color: var(--color-zinc-400)
}

.color-zinc-450 {
  color: var(--color-zinc-450)
}

.color-zinc-500 {
  color: var(--color-zinc-500)
}

.color-zinc-550 {
  color: var(--color-zinc-550)
}

.color-zinc-600 {
  color: var(--color-zinc-600)
}

.color-zinc-650 {
  color: var(--color-zinc-650)
}

.color-zinc-700 {
  color: var(--color-zinc-700)
}

.color-zinc-750 {
  color: var(--color-zinc-750)
}

.color-zinc-800 {
  color: var(--color-zinc-800)
}

.color-zinc-850 {
  color: var(--color-zinc-850)
}

.color-zinc-900 {
  color: var(--color-zinc-900)
}

.color-zinc-950 {
  color: var(--color-zinc-950)
}

.color-red-50 {
  color: var(--color-red-50)
}

.color-red-100 {
  color: var(--color-red-100)
}

.color-red-200 {
  color: var(--color-red-200)
}

.color-red-300 {
  color: var(--color-red-300)
}

.color-red-400 {
  color: var(--color-red-400)
}

.color-red-500 {
  color: var(--color-red-500)
}

.color-red-600 {
  color: var(--color-red-600)
}

.color-red-700 {
  color: var(--color-red-700)
}

.color-red-800 {
  color: var(--color-red-800)
}

.color-red-900 {
  color: var(--color-red-900)
}

.color-red-950 {
  color: var(--color-red-950)
}

.color-green-50 {
  color: var(--color-green-50)
}

.color-green-100 {
  color: var(--color-green-100)
}

.color-green-150 {
  color: var(--color-green-150)
}

.color-green-200 {
  color: var(--color-green-200)
}

.color-green-250 {
  color: var(--color-green-250)
}

.color-green-300 {
  color: var(--color-green-300)
}

.color-green-350 {
  color: var(--color-green-350)
}

.color-green-400 {
  color: var(--color-green-400)
}

.color-green-450 {
  color: var(--color-green-450)
}

.color-green-500 {
  color: var(--color-green-500)
}

.color-green-550 {
  color: var(--color-green-550)
}

.color-green-600 {
  color: var(--color-green-600)
}

.color-green-650 {
  color: var(--color-green-650)
}

.color-green-700 {
  color: var(--color-green-700)
}

.color-green-750 {
  color: var(--color-green-750)
}

.color-green-800 {
  color: var(--color-green-800)
}

.color-green-850 {
  color: var(--color-green-850)
}

.color-green-900 {
  color: var(--color-green-900)
}

.color-green-950 {
  color: var(--color-green-950)
}

.color-green-975 {
  color: var(--green-975)
}

.color-blue-50 {
  color: var(--color-blue-50)
}

.color-blue-100 {
  color: var(--color-blue-100)
}

.color-blue-150 {
  color: var(--color-blue-150)
}

.color-blue-200 {
  color: var(--color-blue-200)
}

.color-blue-250 {
  color: var(--color-blue-250)
}

.color-blue-300 {
  color: var(--color-blue-300)
}

.color-blue-350 {
  color: var(--color-blue-350)
}

.color-blue-400 {
  color: var(--color-blue-400)
}

.color-blue-450 {
  color: var(--color-blue-450)
}

.color-blue-500 {
  color: var(--color-blue-500)
}

.color-blue-550 {
  color: var(--color-blue-550)
}

.color-blue-600 {
  color: var(--color-blue-600)
}

.color-blue-650 {
  color: var(--color-blue-650)
}

.color-blue-700 {
  color: var(--color-blue-700)
}

.color-blue-750 {
  color: var(--color-blue-750)
}

.color-blue-800 {
  color: var(--color-blue-800)
}

.color-blue-850 {
  color: var(--color-blue-850)
}

.color-blue-900 {
  color: var(--color-blue-900)
}

.color-blue-950 {
  color: var(--color-blue-950)
}

:root {
  --ring-md-stone-300: transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, var(--color-stone-300) 0px 0px 0px 3px, rgba(0, 0, 0, .05) 0px 1px 2px 0px;
  --ring-md-primary-300: transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, var(--color-primary-300) 0px 0px 0px 3px, rgba(0, 0, 0, .05) 0px 1px 2px 0px;
  --input-1-shadow: 0px 0.2rem 0.25rem rgba(0, 0, 0, .04);
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, .05);
  --shadow: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px -1px rgba(0, 0, 0, .1);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -2px rgba(0, 0, 0, .1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -4px rgba(0, 0, 0, .1);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 8px 10px -6px rgba(0, 0, 0, .1);
  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, .25);
  --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, .05);
  --shadow-none: 0 0 #0000
}

.shadow-sm {
  box-shadow: var(--shadow-sm)
}

.shadow {
  box-shadow: var(--shadow)
}

.shadow-md {
  box-shadow: var(--shadow-md)
}

.shadow-lg {
  box-shadow: var(--shadow-lg)
}

.shadow-xl {
  box-shadow: var(--shadow-xl)
}

.shadow-2xl {
  box-shadow: var(--shadow-2xl)
}

.shadow-inner {
  box-shadow: var(--shadow-inner)
}

.shadow-none {
  box-shadow: var(--shadow-none)
}

.no-shadow {
  box-shadow: none
}

.width-full {
  width: 100%
}

.max-width-0 {
  max-width: 0
}

.max-width-0\.1 {
  max-width: .1rem
}

.max-width-0\.2 {
  max-width: .2rem
}

.max-width-0\.3 {
  max-width: .3rem
}

.max-width-0\.4 {
  max-width: .4rem
}

.max-width-0\.5 {
  max-width: .5rem
}

.max-width-0\.6 {
  max-width: .6rem
}

.max-width-0\.7 {
  max-width: .7rem
}

.max-width-0\.8 {
  max-width: .8rem
}

.max-width-0\.9 {
  max-width: .9rem
}

.max-width-1 {
  max-width: 1rem
}

.max-width-1\.1 {
  max-width: 1.1rem
}

.max-width-1\.2 {
  max-width: 1.2rem
}

.max-width-1\.3 {
  max-width: 1.3rem
}

.max-width-1\.4 {
  max-width: 1.4rem
}

.max-width-1\.5 {
  max-width: 1.5rem
}

.max-width-1\.6 {
  max-width: 1.6rem
}

.max-width-1\.7 {
  max-width: 1.7rem
}

.max-width-1\.8 {
  max-width: 1.8rem
}

.max-width-1\.9 {
  max-width: 1.9rem
}

.max-width-2 {
  max-width: 2rem
}

.max-width-2\.1 {
  max-width: 2.1rem
}

.max-width-2\.2 {
  max-width: 2.2rem
}

.max-width-2\.3 {
  max-width: 2.3rem
}

.max-width-2\.4 {
  max-width: 2.4rem
}

.max-width-2\.5 {
  max-width: 2.5rem
}

.max-width-2\.6 {
  max-width: 2.6rem
}

.max-width-2\.7 {
  max-width: 2.7rem
}

.max-width-2\.8 {
  max-width: 2.8rem
}

.max-width-2\.9 {
  max-width: 2.9rem
}

.max-width-3 {
  max-width: 3rem
}

.max-width-3\.1 {
  max-width: 3.1rem
}

.max-width-3\.2 {
  max-width: 3.2rem
}

.max-width-3\.3 {
  max-width: 3.3rem
}

.max-width-3\.4 {
  max-width: 3.4rem
}

.max-width-3\.5 {
  max-width: 3.5rem
}

.max-width-3\.6 {
  max-width: 3.6rem
}

.max-width-3\.7 {
  max-width: 3.7rem
}

.max-width-3\.8 {
  max-width: 3.8rem
}

.max-width-3\.9 {
  max-width: 3.9rem
}

.max-width-4 {
  max-width: 4rem
}

.max-width-4\.1 {
  max-width: 4.1rem
}

.max-width-4\.2 {
  max-width: 4.2rem
}

.max-width-4\.3 {
  max-width: 4.3rem
}

.max-width-4\.4 {
  max-width: 4.4rem
}

.max-width-4\.5 {
  max-width: 4.5rem
}

.max-width-4\.6 {
  max-width: 4.6rem
}

.max-width-4\.7 {
  max-width: 4.7rem
}

.max-width-4\.8 {
  max-width: 4.8rem
}

.max-width-4\.9 {
  max-width: 4.9rem
}

.max-width-5 {
  max-width: 5rem
}

.max-width-5\.1 {
  max-width: 5.1rem
}

.max-width-5\.2 {
  max-width: 5.2rem
}

.max-width-5\.3 {
  max-width: 5.3rem
}

.max-width-5\.4 {
  max-width: 5.4rem
}

.max-width-5\.5 {
  max-width: 5.5rem
}

.max-width-5\.6 {
  max-width: 5.6rem
}

.max-width-5\.7 {
  max-width: 5.7rem
}

.max-width-5\.8 {
  max-width: 5.8rem
}

.max-width-5\.9 {
  max-width: 5.9rem
}

.max-width-6 {
  max-width: 6rem
}

.max-width-6\.1 {
  max-width: 6.1rem
}

.max-width-6\.2 {
  max-width: 6.2rem
}

.max-width-6\.3 {
  max-width: 6.3rem
}

.max-width-6\.4 {
  max-width: 6.4rem
}

.max-width-6\.5 {
  max-width: 6.5rem
}

.max-width-6\.6 {
  max-width: 6.6rem
}

.max-width-6\.7 {
  max-width: 6.7rem
}

.max-width-6\.8 {
  max-width: 6.8rem
}

.max-width-6\.9 {
  max-width: 6.9rem
}

.max-width-7 {
  max-width: 7rem
}

.max-width-7\.1 {
  max-width: 7.1rem
}

.max-width-7\.2 {
  max-width: 7.2rem
}

.max-width-7\.3 {
  max-width: 7.3rem
}

.max-width-7\.4 {
  max-width: 7.4rem
}

.max-width-7\.5 {
  max-width: 7.5rem
}

.max-width-7\.6 {
  max-width: 7.6rem
}

.max-width-7\.7 {
  max-width: 7.7rem
}

.max-width-7\.8 {
  max-width: 7.8rem
}

.max-width-7\.9 {
  max-width: 7.9rem
}

.max-width-8 {
  max-width: 8rem
}

.max-width-8\.1 {
  max-width: 8.1rem
}

.max-width-8\.2 {
  max-width: 8.2rem
}

.max-width-8\.3 {
  max-width: 8.3rem
}

.max-width-8\.4 {
  max-width: 8.4rem
}

.max-width-8\.5 {
  max-width: 8.5rem
}

.max-width-8\.6 {
  max-width: 8.6rem
}

.max-width-8\.7 {
  max-width: 8.7rem
}

.max-width-8\.8 {
  max-width: 8.8rem
}

.max-width-8\.9 {
  max-width: 8.9rem
}

.max-width-9 {
  max-width: 9rem
}

.max-width-9\.1 {
  max-width: 9.1rem
}

.max-width-9\.2 {
  max-width: 9.2rem
}

.max-width-9\.3 {
  max-width: 9.3rem
}

.max-width-9\.4 {
  max-width: 9.4rem
}

.max-width-9\.5 {
  max-width: 9.5rem
}

.max-width-9\.6 {
  max-width: 9.6rem
}

.max-width-9\.7 {
  max-width: 9.7rem
}

.max-width-9\.8 {
  max-width: 9.8rem
}

.max-width-9\.9 {
  max-width: 9.9rem
}

.max-width-10 {
  max-width: 10rem
}

.max-width-10\.1 {
  max-width: 10.1rem
}

.max-width-10\.2 {
  max-width: 10.2rem
}

.max-width-10\.3 {
  max-width: 10.3rem
}

.max-width-10\.4 {
  max-width: 10.4rem
}

.max-width-10\.5 {
  max-width: 10.5rem
}

.max-width-10\.6 {
  max-width: 10.6rem
}

.max-width-10\.7 {
  max-width: 10.7rem
}

.max-width-10\.8 {
  max-width: 10.8rem
}

.max-width-10\.9 {
  max-width: 10.9rem
}

.max-width-11 {
  max-width: 11rem
}

.max-width-11\.1 {
  max-width: 11.1rem
}

.max-width-11\.2 {
  max-width: 11.2rem
}

.max-width-11\.3 {
  max-width: 11.3rem
}

.max-width-11\.4 {
  max-width: 11.4rem
}

.max-width-11\.5 {
  max-width: 11.5rem
}

.max-width-11\.6 {
  max-width: 11.6rem
}

.max-width-11\.7 {
  max-width: 11.7rem
}

.max-width-11\.8 {
  max-width: 11.8rem
}

.max-width-11\.9 {
  max-width: 11.9rem
}

.max-width-12 {
  max-width: 12rem
}

.size-17x17 {
  height: 1.7rem;
  width: 1.7rem
}

.margin-0 {
  margin: 0
}

.margin-0\.1 {
  margin: .1rem
}

.margin-0\.2 {
  margin: .2rem
}

.margin-0\.3 {
  margin: .3rem
}

.margin-0\.4 {
  margin: .4rem
}

.margin-0\.5 {
  margin: .5rem
}

.margin-0\.6 {
  margin: .6rem
}

.margin-0\.7 {
  margin: .7rem
}

.margin-0\.8 {
  margin: .8rem
}

.margin-0\.9 {
  margin: .9rem
}

.margin-1 {
  margin: 1rem
}

.margin-1\.1 {
  margin: 1.1rem
}

.margin-1\.2 {
  margin: 1.2rem
}

.margin-1\.3 {
  margin: 1.3rem
}

.margin-1\.4 {
  margin: 1.4rem
}

.margin-1\.5 {
  margin: 1.5rem
}

.margin-1\.6 {
  margin: 1.6rem
}

.margin-1\.7 {
  margin: 1.7rem
}

.margin-1\.8 {
  margin: 1.8rem
}

.margin-1\.9 {
  margin: 1.9rem
}

.margin-2 {
  margin: 2rem
}

.margin-2\.1 {
  margin: 2.1rem
}

.margin-2\.2 {
  margin: 2.2rem
}

.margin-2\.3 {
  margin: 2.3rem
}

.margin-2\.4 {
  margin: 2.4rem
}

.margin-2\.5 {
  margin: 2.5rem
}

.margin-2\.6 {
  margin: 2.6rem
}

.margin-2\.7 {
  margin: 2.7rem
}

.margin-2\.8 {
  margin: 2.8rem
}

.margin-2\.9 {
  margin: 2.9rem
}

.margin-3 {
  margin: 3rem
}

.margin-3\.1 {
  margin: 3.1rem
}

.margin-3\.2 {
  margin: 3.2rem
}

.margin-3\.3 {
  margin: 3.3rem
}

.margin-3\.4 {
  margin: 3.4rem
}

.margin-3\.5 {
  margin: 3.5rem
}

.margin-3\.6 {
  margin: 3.6rem
}

.margin-3\.7 {
  margin: 3.7rem
}

.margin-3\.8 {
  margin: 3.8rem
}

.margin-3\.9 {
  margin: 3.9rem
}

.margin-4 {
  margin: 4rem
}

.margin-4\.1 {
  margin: 4.1rem
}

.margin-4\.2 {
  margin: 4.2rem
}

.margin-4\.3 {
  margin: 4.3rem
}

.margin-4\.4 {
  margin: 4.4rem
}

.margin-4\.5 {
  margin: 4.5rem
}

.margin-4\.6 {
  margin: 4.6rem
}

.margin-4\.7 {
  margin: 4.7rem
}

.margin-4\.8 {
  margin: 4.8rem
}

.margin-4\.9 {
  margin: 4.9rem
}

.margin-5 {
  margin: 5rem
}

.margin-5\.1 {
  margin: 5.1rem
}

.margin-5\.2 {
  margin: 5.2rem
}

.margin-5\.3 {
  margin: 5.3rem
}

.margin-5\.4 {
  margin: 5.4rem
}

.margin-5\.5 {
  margin: 5.5rem
}

.margin-5\.6 {
  margin: 5.6rem
}

.margin-5\.7 {
  margin: 5.7rem
}

.margin-5\.8 {
  margin: 5.8rem
}

.margin-5\.9 {
  margin: 5.9rem
}

.margin-6 {
  margin: 6rem
}

.margin-6\.1 {
  margin: 6.1rem
}

.margin-6\.2 {
  margin: 6.2rem
}

.margin-6\.3 {
  margin: 6.3rem
}

.margin-6\.4 {
  margin: 6.4rem
}

.margin-6\.5 {
  margin: 6.5rem
}

.margin-6\.6 {
  margin: 6.6rem
}

.margin-6\.7 {
  margin: 6.7rem
}

.margin-6\.8 {
  margin: 6.8rem
}

.margin-6\.9 {
  margin: 6.9rem
}

.margin-7 {
  margin: 7rem
}

.margin-7\.1 {
  margin: 7.1rem
}

.margin-7\.2 {
  margin: 7.2rem
}

.margin-7\.3 {
  margin: 7.3rem
}

.margin-7\.4 {
  margin: 7.4rem
}

.margin-7\.5 {
  margin: 7.5rem
}

.margin-7\.6 {
  margin: 7.6rem
}

.margin-7\.7 {
  margin: 7.7rem
}

.margin-7\.8 {
  margin: 7.8rem
}

.margin-7\.9 {
  margin: 7.9rem
}

.margin-8 {
  margin: 8rem
}

.margin-8\.1 {
  margin: 8.1rem
}

.margin-8\.2 {
  margin: 8.2rem
}

.margin-8\.3 {
  margin: 8.3rem
}

.margin-8\.4 {
  margin: 8.4rem
}

.margin-8\.5 {
  margin: 8.5rem
}

.margin-8\.6 {
  margin: 8.6rem
}

.margin-8\.7 {
  margin: 8.7rem
}

.margin-8\.8 {
  margin: 8.8rem
}

.margin-8\.9 {
  margin: 8.9rem
}

.margin-9 {
  margin: 9rem
}

.margin-9\.1 {
  margin: 9.1rem
}

.margin-9\.2 {
  margin: 9.2rem
}

.margin-9\.3 {
  margin: 9.3rem
}

.margin-9\.4 {
  margin: 9.4rem
}

.margin-9\.5 {
  margin: 9.5rem
}

.margin-9\.6 {
  margin: 9.6rem
}

.margin-9\.7 {
  margin: 9.7rem
}

.margin-9\.8 {
  margin: 9.8rem
}

.margin-9\.9 {
  margin: 9.9rem
}

.margin-10 {
  margin: 10rem
}

.margin-10\.1 {
  margin: 10.1rem
}

.margin-10\.2 {
  margin: 10.2rem
}

.margin-10\.3 {
  margin: 10.3rem
}

.margin-10\.4 {
  margin: 10.4rem
}

.margin-10\.5 {
  margin: 10.5rem
}

.margin-10\.6 {
  margin: 10.6rem
}

.margin-10\.7 {
  margin: 10.7rem
}

.margin-10\.8 {
  margin: 10.8rem
}

.margin-10\.9 {
  margin: 10.9rem
}

.margin-11 {
  margin: 11rem
}

.margin-11\.1 {
  margin: 11.1rem
}

.margin-11\.2 {
  margin: 11.2rem
}

.margin-11\.3 {
  margin: 11.3rem
}

.margin-11\.4 {
  margin: 11.4rem
}

.margin-11\.5 {
  margin: 11.5rem
}

.margin-11\.6 {
  margin: 11.6rem
}

.margin-11\.7 {
  margin: 11.7rem
}

.margin-11\.8 {
  margin: 11.8rem
}

.margin-11\.9 {
  margin: 11.9rem
}

.margin-12 {
  margin: 12rem
}

.margin-top-0 {
  margin-top: 0
}

.margin-top-0\.1 {
  margin-top: .1rem
}

.margin-top-0\.2 {
  margin-top: .2rem
}

.margin-top-0\.3 {
  margin-top: .3rem
}

.margin-top-0\.4 {
  margin-top: .4rem
}

.margin-top-0\.5 {
  margin-top: .5rem
}

.margin-top-0\.6 {
  margin-top: .6rem
}

.margin-top-0\.7 {
  margin-top: .7rem
}

.margin-top-0\.8 {
  margin-top: .8rem
}

.margin-top-0\.9 {
  margin-top: .9rem
}

.margin-top-1 {
  margin-top: 1rem
}

.margin-top-1\.1 {
  margin-top: 1.1rem
}

.margin-top-1\.2 {
  margin-top: 1.2rem
}

.margin-top-1\.3 {
  margin-top: 1.3rem
}

.margin-top-1\.4 {
  margin-top: 1.4rem
}

.margin-top-1\.5 {
  margin-top: 1.5rem
}

.margin-top-1\.6 {
  margin-top: 1.6rem
}

.margin-top-1\.7 {
  margin-top: 1.7rem
}

.margin-top-1\.8 {
  margin-top: 1.8rem
}

.margin-top-1\.9 {
  margin-top: 1.9rem
}

.margin-top-2 {
  margin-top: 2rem
}

.margin-top-2\.1 {
  margin-top: 2.1rem
}

.margin-top-2\.2 {
  margin-top: 2.2rem
}

.margin-top-2\.3 {
  margin-top: 2.3rem
}

.margin-top-2\.4 {
  margin-top: 2.4rem
}

.margin-top-2\.5 {
  margin-top: 2.5rem
}

.margin-top-2\.6 {
  margin-top: 2.6rem
}

.margin-top-2\.7 {
  margin-top: 2.7rem
}

.margin-top-2\.8 {
  margin-top: 2.8rem
}

.margin-top-2\.9 {
  margin-top: 2.9rem
}

.margin-top-3 {
  margin-top: 3rem
}

.margin-top-3\.1 {
  margin-top: 3.1rem
}

.margin-top-3\.2 {
  margin-top: 3.2rem
}

.margin-top-3\.3 {
  margin-top: 3.3rem
}

.margin-top-3\.4 {
  margin-top: 3.4rem
}

.margin-top-3\.5 {
  margin-top: 3.5rem
}

.margin-top-3\.6 {
  margin-top: 3.6rem
}

.margin-top-3\.7 {
  margin-top: 3.7rem
}

.margin-top-3\.8 {
  margin-top: 3.8rem
}

.margin-top-3\.9 {
  margin-top: 3.9rem
}

.margin-top-4 {
  margin-top: 4rem
}

.margin-top-4\.1 {
  margin-top: 4.1rem
}

.margin-top-4\.2 {
  margin-top: 4.2rem
}

.margin-top-4\.3 {
  margin-top: 4.3rem
}

.margin-top-4\.4 {
  margin-top: 4.4rem
}

.margin-top-4\.5 {
  margin-top: 4.5rem
}

.margin-top-4\.6 {
  margin-top: 4.6rem
}

.margin-top-4\.7 {
  margin-top: 4.7rem
}

.margin-top-4\.8 {
  margin-top: 4.8rem
}

.margin-top-4\.9 {
  margin-top: 4.9rem
}

.margin-top-5 {
  margin-top: 5rem
}

.margin-top-5\.1 {
  margin-top: 5.1rem
}

.margin-top-5\.2 {
  margin-top: 5.2rem
}

.margin-top-5\.3 {
  margin-top: 5.3rem
}

.margin-top-5\.4 {
  margin-top: 5.4rem
}

.margin-top-5\.5 {
  margin-top: 5.5rem
}

.margin-top-5\.6 {
  margin-top: 5.6rem
}

.margin-top-5\.7 {
  margin-top: 5.7rem
}

.margin-top-5\.8 {
  margin-top: 5.8rem
}

.margin-top-5\.9 {
  margin-top: 5.9rem
}

.margin-top-6 {
  margin-top: 6rem
}

.margin-top-6\.1 {
  margin-top: 6.1rem
}

.margin-top-6\.2 {
  margin-top: 6.2rem
}

.margin-top-6\.3 {
  margin-top: 6.3rem
}

.margin-top-6\.4 {
  margin-top: 6.4rem
}

.margin-top-6\.5 {
  margin-top: 6.5rem
}

.margin-top-6\.6 {
  margin-top: 6.6rem
}

.margin-top-6\.7 {
  margin-top: 6.7rem
}

.margin-top-6\.8 {
  margin-top: 6.8rem
}

.margin-top-6\.9 {
  margin-top: 6.9rem
}

.margin-top-7 {
  margin-top: 7rem
}

.margin-top-7\.1 {
  margin-top: 7.1rem
}

.margin-top-7\.2 {
  margin-top: 7.2rem
}

.margin-top-7\.3 {
  margin-top: 7.3rem
}

.margin-top-7\.4 {
  margin-top: 7.4rem
}

.margin-top-7\.5 {
  margin-top: 7.5rem
}

.margin-top-7\.6 {
  margin-top: 7.6rem
}

.margin-top-7\.7 {
  margin-top: 7.7rem
}

.margin-top-7\.8 {
  margin-top: 7.8rem
}

.margin-top-7\.9 {
  margin-top: 7.9rem
}

.margin-top-8 {
  margin-top: 8rem
}

.margin-top-8\.1 {
  margin-top: 8.1rem
}

.margin-top-8\.2 {
  margin-top: 8.2rem
}

.margin-top-8\.3 {
  margin-top: 8.3rem
}

.margin-top-8\.4 {
  margin-top: 8.4rem
}

.margin-top-8\.5 {
  margin-top: 8.5rem
}

.margin-top-8\.6 {
  margin-top: 8.6rem
}

.margin-top-8\.7 {
  margin-top: 8.7rem
}

.margin-top-8\.8 {
  margin-top: 8.8rem
}

.margin-top-8\.9 {
  margin-top: 8.9rem
}

.margin-top-9 {
  margin-top: 9rem
}

.margin-top-9\.1 {
  margin-top: 9.1rem
}

.margin-top-9\.2 {
  margin-top: 9.2rem
}

.margin-top-9\.3 {
  margin-top: 9.3rem
}

.margin-top-9\.4 {
  margin-top: 9.4rem
}

.margin-top-9\.5 {
  margin-top: 9.5rem
}

.margin-top-9\.6 {
  margin-top: 9.6rem
}

.margin-top-9\.7 {
  margin-top: 9.7rem
}

.margin-top-9\.8 {
  margin-top: 9.8rem
}

.margin-top-9\.9 {
  margin-top: 9.9rem
}

.margin-top-10 {
  margin-top: 10rem
}

.margin-top-10\.1 {
  margin-top: 10.1rem
}

.margin-top-10\.2 {
  margin-top: 10.2rem
}

.margin-top-10\.3 {
  margin-top: 10.3rem
}

.margin-top-10\.4 {
  margin-top: 10.4rem
}

.margin-top-10\.5 {
  margin-top: 10.5rem
}

.margin-top-10\.6 {
  margin-top: 10.6rem
}

.margin-top-10\.7 {
  margin-top: 10.7rem
}

.margin-top-10\.8 {
  margin-top: 10.8rem
}

.margin-top-10\.9 {
  margin-top: 10.9rem
}

.margin-top-11 {
  margin-top: 11rem
}

.margin-top-11\.1 {
  margin-top: 11.1rem
}

.margin-top-11\.2 {
  margin-top: 11.2rem
}

.margin-top-11\.3 {
  margin-top: 11.3rem
}

.margin-top-11\.4 {
  margin-top: 11.4rem
}

.margin-top-11\.5 {
  margin-top: 11.5rem
}

.margin-top-11\.6 {
  margin-top: 11.6rem
}

.margin-top-11\.7 {
  margin-top: 11.7rem
}

.margin-top-11\.8 {
  margin-top: 11.8rem
}

.margin-top-11\.9 {
  margin-top: 11.9rem
}

.margin-top-12 {
  margin-top: 12rem
}

.margin-bottom-0 {
  margin-bottom: 0
}

.margin-bottom-0\.1 {
  margin-bottom: .1rem
}

.margin-bottom-0\.2 {
  margin-bottom: .2rem
}

.margin-bottom-0\.3 {
  margin-bottom: .3rem
}

.margin-bottom-0\.4 {
  margin-bottom: .4rem
}

.margin-bottom-0\.5 {
  margin-bottom: .5rem
}

.margin-bottom-0\.6 {
  margin-bottom: .6rem
}

.margin-bottom-0\.7 {
  margin-bottom: .7rem
}

.margin-bottom-0\.8 {
  margin-bottom: .8rem
}

.margin-bottom-0\.9 {
  margin-bottom: .9rem
}

.margin-bottom-1 {
  margin-bottom: 1rem
}

.margin-bottom-1\.1 {
  margin-bottom: 1.1rem
}

.margin-bottom-1\.2 {
  margin-bottom: 1.2rem
}

.margin-bottom-1\.3 {
  margin-bottom: 1.3rem
}

.margin-bottom-1\.4 {
  margin-bottom: 1.4rem
}

.margin-bottom-1\.5 {
  margin-bottom: 1.5rem
}

.margin-bottom-1\.6 {
  margin-bottom: 1.6rem
}

.margin-bottom-1\.7 {
  margin-bottom: 1.7rem
}

.margin-bottom-1\.8 {
  margin-bottom: 1.8rem
}

.margin-bottom-1\.9 {
  margin-bottom: 1.9rem
}

.margin-bottom-2 {
  margin-bottom: 2rem
}

.margin-bottom-2\.1 {
  margin-bottom: 2.1rem
}

.margin-bottom-2\.2 {
  margin-bottom: 2.2rem
}

.margin-bottom-2\.3 {
  margin-bottom: 2.3rem
}

.margin-bottom-2\.4 {
  margin-bottom: 2.4rem
}

.margin-bottom-2\.5 {
  margin-bottom: 2.5rem
}

.margin-bottom-2\.6 {
  margin-bottom: 2.6rem
}

.margin-bottom-2\.7 {
  margin-bottom: 2.7rem
}

.margin-bottom-2\.8 {
  margin-bottom: 2.8rem
}

.margin-bottom-2\.9 {
  margin-bottom: 2.9rem
}

.margin-bottom-3 {
  margin-bottom: 3rem
}

.margin-bottom-3\.1 {
  margin-bottom: 3.1rem
}

.margin-bottom-3\.2 {
  margin-bottom: 3.2rem
}

.margin-bottom-3\.3 {
  margin-bottom: 3.3rem
}

.margin-bottom-3\.4 {
  margin-bottom: 3.4rem
}

.margin-bottom-3\.5 {
  margin-bottom: 3.5rem
}

.margin-bottom-3\.6 {
  margin-bottom: 3.6rem
}

.margin-bottom-3\.7 {
  margin-bottom: 3.7rem
}

.margin-bottom-3\.8 {
  margin-bottom: 3.8rem
}

.margin-bottom-3\.9 {
  margin-bottom: 3.9rem
}

.margin-bottom-4 {
  margin-bottom: 4rem
}

.margin-bottom-4\.1 {
  margin-bottom: 4.1rem
}

.margin-bottom-4\.2 {
  margin-bottom: 4.2rem
}

.margin-bottom-4\.3 {
  margin-bottom: 4.3rem
}

.margin-bottom-4\.4 {
  margin-bottom: 4.4rem
}

.margin-bottom-4\.5 {
  margin-bottom: 4.5rem
}

.margin-bottom-4\.6 {
  margin-bottom: 4.6rem
}

.margin-bottom-4\.7 {
  margin-bottom: 4.7rem
}

.margin-bottom-4\.8 {
  margin-bottom: 4.8rem
}

.margin-bottom-4\.9 {
  margin-bottom: 4.9rem
}

.margin-bottom-5 {
  margin-bottom: 5rem
}

.margin-bottom-5\.1 {
  margin-bottom: 5.1rem
}

.margin-bottom-5\.2 {
  margin-bottom: 5.2rem
}

.margin-bottom-5\.3 {
  margin-bottom: 5.3rem
}

.margin-bottom-5\.4 {
  margin-bottom: 5.4rem
}

.margin-bottom-5\.5 {
  margin-bottom: 5.5rem
}

.margin-bottom-5\.6 {
  margin-bottom: 5.6rem
}

.margin-bottom-5\.7 {
  margin-bottom: 5.7rem
}

.margin-bottom-5\.8 {
  margin-bottom: 5.8rem
}

.margin-bottom-5\.9 {
  margin-bottom: 5.9rem
}

.margin-bottom-6 {
  margin-bottom: 6rem
}

.margin-bottom-6\.1 {
  margin-bottom: 6.1rem
}

.margin-bottom-6\.2 {
  margin-bottom: 6.2rem
}

.margin-bottom-6\.3 {
  margin-bottom: 6.3rem
}

.margin-bottom-6\.4 {
  margin-bottom: 6.4rem
}

.margin-bottom-6\.5 {
  margin-bottom: 6.5rem
}

.margin-bottom-6\.6 {
  margin-bottom: 6.6rem
}

.margin-bottom-6\.7 {
  margin-bottom: 6.7rem
}

.margin-bottom-6\.8 {
  margin-bottom: 6.8rem
}

.margin-bottom-6\.9 {
  margin-bottom: 6.9rem
}

.margin-bottom-7 {
  margin-bottom: 7rem
}

.margin-bottom-7\.1 {
  margin-bottom: 7.1rem
}

.margin-bottom-7\.2 {
  margin-bottom: 7.2rem
}

.margin-bottom-7\.3 {
  margin-bottom: 7.3rem
}

.margin-bottom-7\.4 {
  margin-bottom: 7.4rem
}

.margin-bottom-7\.5 {
  margin-bottom: 7.5rem
}

.margin-bottom-7\.6 {
  margin-bottom: 7.6rem
}

.margin-bottom-7\.7 {
  margin-bottom: 7.7rem
}

.margin-bottom-7\.8 {
  margin-bottom: 7.8rem
}

.margin-bottom-7\.9 {
  margin-bottom: 7.9rem
}

.margin-bottom-8 {
  margin-bottom: 8rem
}

.margin-bottom-8\.1 {
  margin-bottom: 8.1rem
}

.margin-bottom-8\.2 {
  margin-bottom: 8.2rem
}

.margin-bottom-8\.3 {
  margin-bottom: 8.3rem
}

.margin-bottom-8\.4 {
  margin-bottom: 8.4rem
}

.margin-bottom-8\.5 {
  margin-bottom: 8.5rem
}

.margin-bottom-8\.6 {
  margin-bottom: 8.6rem
}

.margin-bottom-8\.7 {
  margin-bottom: 8.7rem
}

.margin-bottom-8\.8 {
  margin-bottom: 8.8rem
}

.margin-bottom-8\.9 {
  margin-bottom: 8.9rem
}

.margin-bottom-9 {
  margin-bottom: 9rem
}

.margin-bottom-9\.1 {
  margin-bottom: 9.1rem
}

.margin-bottom-9\.2 {
  margin-bottom: 9.2rem
}

.margin-bottom-9\.3 {
  margin-bottom: 9.3rem
}

.margin-bottom-9\.4 {
  margin-bottom: 9.4rem
}

.margin-bottom-9\.5 {
  margin-bottom: 9.5rem
}

.margin-bottom-9\.6 {
  margin-bottom: 9.6rem
}

.margin-bottom-9\.7 {
  margin-bottom: 9.7rem
}

.margin-bottom-9\.8 {
  margin-bottom: 9.8rem
}

.margin-bottom-9\.9 {
  margin-bottom: 9.9rem
}

.margin-bottom-10 {
  margin-bottom: 10rem
}

.margin-bottom-10\.1 {
  margin-bottom: 10.1rem
}

.margin-bottom-10\.2 {
  margin-bottom: 10.2rem
}

.margin-bottom-10\.3 {
  margin-bottom: 10.3rem
}

.margin-bottom-10\.4 {
  margin-bottom: 10.4rem
}

.margin-bottom-10\.5 {
  margin-bottom: 10.5rem
}

.margin-bottom-10\.6 {
  margin-bottom: 10.6rem
}

.margin-bottom-10\.7 {
  margin-bottom: 10.7rem
}

.margin-bottom-10\.8 {
  margin-bottom: 10.8rem
}

.margin-bottom-10\.9 {
  margin-bottom: 10.9rem
}

.margin-bottom-11 {
  margin-bottom: 11rem
}

.margin-bottom-11\.1 {
  margin-bottom: 11.1rem
}

.margin-bottom-11\.2 {
  margin-bottom: 11.2rem
}

.margin-bottom-11\.3 {
  margin-bottom: 11.3rem
}

.margin-bottom-11\.4 {
  margin-bottom: 11.4rem
}

.margin-bottom-11\.5 {
  margin-bottom: 11.5rem
}

.margin-bottom-11\.6 {
  margin-bottom: 11.6rem
}

.margin-bottom-11\.7 {
  margin-bottom: 11.7rem
}

.margin-bottom-11\.8 {
  margin-bottom: 11.8rem
}

.margin-bottom-11\.9 {
  margin-bottom: 11.9rem
}

.margin-bottom-12 {
  margin-bottom: 12rem
}

.margin-left-0 {
  margin-left: 0
}

.margin-left-0\.1 {
  margin-left: .1rem
}

.margin-left-0\.2 {
  margin-left: .2rem
}

.margin-left-0\.3 {
  margin-left: .3rem
}

.margin-left-0\.4 {
  margin-left: .4rem
}

.margin-left-0\.5 {
  margin-left: .5rem
}

.margin-left-0\.6 {
  margin-left: .6rem
}

.margin-left-0\.7 {
  margin-left: .7rem
}

.margin-left-0\.8 {
  margin-left: .8rem
}

.margin-left-0\.9 {
  margin-left: .9rem
}

.margin-left-1 {
  margin-left: 1rem
}

.margin-left-1\.1 {
  margin-left: 1.1rem
}

.margin-left-1\.2 {
  margin-left: 1.2rem
}

.margin-left-1\.3 {
  margin-left: 1.3rem
}

.margin-left-1\.4 {
  margin-left: 1.4rem
}

.margin-left-1\.5 {
  margin-left: 1.5rem
}

.margin-left-1\.6 {
  margin-left: 1.6rem
}

.margin-left-1\.7 {
  margin-left: 1.7rem
}

.margin-left-1\.8 {
  margin-left: 1.8rem
}

.margin-left-1\.9 {
  margin-left: 1.9rem
}

.margin-left-2 {
  margin-left: 2rem
}

.margin-left-2\.1 {
  margin-left: 2.1rem
}

.margin-left-2\.2 {
  margin-left: 2.2rem
}

.margin-left-2\.3 {
  margin-left: 2.3rem
}

.margin-left-2\.4 {
  margin-left: 2.4rem
}

.margin-left-2\.5 {
  margin-left: 2.5rem
}

.margin-left-2\.6 {
  margin-left: 2.6rem
}

.margin-left-2\.7 {
  margin-left: 2.7rem
}

.margin-left-2\.8 {
  margin-left: 2.8rem
}

.margin-left-2\.9 {
  margin-left: 2.9rem
}

.margin-left-3 {
  margin-left: 3rem
}

.margin-left-3\.1 {
  margin-left: 3.1rem
}

.margin-left-3\.2 {
  margin-left: 3.2rem
}

.margin-left-3\.3 {
  margin-left: 3.3rem
}

.margin-left-3\.4 {
  margin-left: 3.4rem
}

.margin-left-3\.5 {
  margin-left: 3.5rem
}

.margin-left-3\.6 {
  margin-left: 3.6rem
}

.margin-left-3\.7 {
  margin-left: 3.7rem
}

.margin-left-3\.8 {
  margin-left: 3.8rem
}

.margin-left-3\.9 {
  margin-left: 3.9rem
}

.margin-left-4 {
  margin-left: 4rem
}

.margin-left-4\.1 {
  margin-left: 4.1rem
}

.margin-left-4\.2 {
  margin-left: 4.2rem
}

.margin-left-4\.3 {
  margin-left: 4.3rem
}

.margin-left-4\.4 {
  margin-left: 4.4rem
}

.margin-left-4\.5 {
  margin-left: 4.5rem
}

.margin-left-4\.6 {
  margin-left: 4.6rem
}

.margin-left-4\.7 {
  margin-left: 4.7rem
}

.margin-left-4\.8 {
  margin-left: 4.8rem
}

.margin-left-4\.9 {
  margin-left: 4.9rem
}

.margin-left-5 {
  margin-left: 5rem
}

.margin-left-5\.1 {
  margin-left: 5.1rem
}

.margin-left-5\.2 {
  margin-left: 5.2rem
}

.margin-left-5\.3 {
  margin-left: 5.3rem
}

.margin-left-5\.4 {
  margin-left: 5.4rem
}

.margin-left-5\.5 {
  margin-left: 5.5rem
}

.margin-left-5\.6 {
  margin-left: 5.6rem
}

.margin-left-5\.7 {
  margin-left: 5.7rem
}

.margin-left-5\.8 {
  margin-left: 5.8rem
}

.margin-left-5\.9 {
  margin-left: 5.9rem
}

.margin-left-6 {
  margin-left: 6rem
}

.margin-left-6\.1 {
  margin-left: 6.1rem
}

.margin-left-6\.2 {
  margin-left: 6.2rem
}

.margin-left-6\.3 {
  margin-left: 6.3rem
}

.margin-left-6\.4 {
  margin-left: 6.4rem
}

.margin-left-6\.5 {
  margin-left: 6.5rem
}

.margin-left-6\.6 {
  margin-left: 6.6rem
}

.margin-left-6\.7 {
  margin-left: 6.7rem
}

.margin-left-6\.8 {
  margin-left: 6.8rem
}

.margin-left-6\.9 {
  margin-left: 6.9rem
}

.margin-left-7 {
  margin-left: 7rem
}

.margin-left-7\.1 {
  margin-left: 7.1rem
}

.margin-left-7\.2 {
  margin-left: 7.2rem
}

.margin-left-7\.3 {
  margin-left: 7.3rem
}

.margin-left-7\.4 {
  margin-left: 7.4rem
}

.margin-left-7\.5 {
  margin-left: 7.5rem
}

.margin-left-7\.6 {
  margin-left: 7.6rem
}

.margin-left-7\.7 {
  margin-left: 7.7rem
}

.margin-left-7\.8 {
  margin-left: 7.8rem
}

.margin-left-7\.9 {
  margin-left: 7.9rem
}

.margin-left-8 {
  margin-left: 8rem
}

.margin-left-8\.1 {
  margin-left: 8.1rem
}

.margin-left-8\.2 {
  margin-left: 8.2rem
}

.margin-left-8\.3 {
  margin-left: 8.3rem
}

.margin-left-8\.4 {
  margin-left: 8.4rem
}

.margin-left-8\.5 {
  margin-left: 8.5rem
}

.margin-left-8\.6 {
  margin-left: 8.6rem
}

.margin-left-8\.7 {
  margin-left: 8.7rem
}

.margin-left-8\.8 {
  margin-left: 8.8rem
}

.margin-left-8\.9 {
  margin-left: 8.9rem
}

.margin-left-9 {
  margin-left: 9rem
}

.margin-left-9\.1 {
  margin-left: 9.1rem
}

.margin-left-9\.2 {
  margin-left: 9.2rem
}

.margin-left-9\.3 {
  margin-left: 9.3rem
}

.margin-left-9\.4 {
  margin-left: 9.4rem
}

.margin-left-9\.5 {
  margin-left: 9.5rem
}

.margin-left-9\.6 {
  margin-left: 9.6rem
}

.margin-left-9\.7 {
  margin-left: 9.7rem
}

.margin-left-9\.8 {
  margin-left: 9.8rem
}

.margin-left-9\.9 {
  margin-left: 9.9rem
}

.margin-left-10 {
  margin-left: 10rem
}

.margin-left-10\.1 {
  margin-left: 10.1rem
}

.margin-left-10\.2 {
  margin-left: 10.2rem
}

.margin-left-10\.3 {
  margin-left: 10.3rem
}

.margin-left-10\.4 {
  margin-left: 10.4rem
}

.margin-left-10\.5 {
  margin-left: 10.5rem
}

.margin-left-10\.6 {
  margin-left: 10.6rem
}

.margin-left-10\.7 {
  margin-left: 10.7rem
}

.margin-left-10\.8 {
  margin-left: 10.8rem
}

.margin-left-10\.9 {
  margin-left: 10.9rem
}

.margin-left-11 {
  margin-left: 11rem
}

.margin-left-11\.1 {
  margin-left: 11.1rem
}

.margin-left-11\.2 {
  margin-left: 11.2rem
}

.margin-left-11\.3 {
  margin-left: 11.3rem
}

.margin-left-11\.4 {
  margin-left: 11.4rem
}

.margin-left-11\.5 {
  margin-left: 11.5rem
}

.margin-left-11\.6 {
  margin-left: 11.6rem
}

.margin-left-11\.7 {
  margin-left: 11.7rem
}

.margin-left-11\.8 {
  margin-left: 11.8rem
}

.margin-left-11\.9 {
  margin-left: 11.9rem
}

.margin-left-12 {
  margin-left: 12rem
}

.margin-right-0 {
  margin-right: 0
}

.margin-right-0\.1 {
  margin-right: .1rem
}

.margin-right-0\.2 {
  margin-right: .2rem
}

.margin-right-0\.3 {
  margin-right: .3rem
}

.margin-right-0\.4 {
  margin-right: .4rem
}

.margin-right-0\.5 {
  margin-right: .5rem
}

.margin-right-0\.6 {
  margin-right: .6rem
}

.margin-right-0\.7 {
  margin-right: .7rem
}

.margin-right-0\.8 {
  margin-right: .8rem
}

.margin-right-0\.9 {
  margin-right: .9rem
}

.margin-right-1 {
  margin-right: 1rem
}

.margin-right-1\.1 {
  margin-right: 1.1rem
}

.margin-right-1\.2 {
  margin-right: 1.2rem
}

.margin-right-1\.3 {
  margin-right: 1.3rem
}

.margin-right-1\.4 {
  margin-right: 1.4rem
}

.margin-right-1\.5 {
  margin-right: 1.5rem
}

.margin-right-1\.6 {
  margin-right: 1.6rem
}

.margin-right-1\.7 {
  margin-right: 1.7rem
}

.margin-right-1\.8 {
  margin-right: 1.8rem
}

.margin-right-1\.9 {
  margin-right: 1.9rem
}

.margin-right-2 {
  margin-right: 2rem
}

.margin-right-2\.1 {
  margin-right: 2.1rem
}

.margin-right-2\.2 {
  margin-right: 2.2rem
}

.margin-right-2\.3 {
  margin-right: 2.3rem
}

.margin-right-2\.4 {
  margin-right: 2.4rem
}

.margin-right-2\.5 {
  margin-right: 2.5rem
}

.margin-right-2\.6 {
  margin-right: 2.6rem
}

.margin-right-2\.7 {
  margin-right: 2.7rem
}

.margin-right-2\.8 {
  margin-right: 2.8rem
}

.margin-right-2\.9 {
  margin-right: 2.9rem
}

.margin-right-3 {
  margin-right: 3rem
}

.margin-right-3\.1 {
  margin-right: 3.1rem
}

.margin-right-3\.2 {
  margin-right: 3.2rem
}

.margin-right-3\.3 {
  margin-right: 3.3rem
}

.margin-right-3\.4 {
  margin-right: 3.4rem
}

.margin-right-3\.5 {
  margin-right: 3.5rem
}

.margin-right-3\.6 {
  margin-right: 3.6rem
}

.margin-right-3\.7 {
  margin-right: 3.7rem
}

.margin-right-3\.8 {
  margin-right: 3.8rem
}

.margin-right-3\.9 {
  margin-right: 3.9rem
}

.margin-right-4 {
  margin-right: 4rem
}

.margin-right-4\.1 {
  margin-right: 4.1rem
}

.margin-right-4\.2 {
  margin-right: 4.2rem
}

.margin-right-4\.3 {
  margin-right: 4.3rem
}

.margin-right-4\.4 {
  margin-right: 4.4rem
}

.margin-right-4\.5 {
  margin-right: 4.5rem
}

.margin-right-4\.6 {
  margin-right: 4.6rem
}

.margin-right-4\.7 {
  margin-right: 4.7rem
}

.margin-right-4\.8 {
  margin-right: 4.8rem
}

.margin-right-4\.9 {
  margin-right: 4.9rem
}

.margin-right-5 {
  margin-right: 5rem
}

.margin-right-5\.1 {
  margin-right: 5.1rem
}

.margin-right-5\.2 {
  margin-right: 5.2rem
}

.margin-right-5\.3 {
  margin-right: 5.3rem
}

.margin-right-5\.4 {
  margin-right: 5.4rem
}

.margin-right-5\.5 {
  margin-right: 5.5rem
}

.margin-right-5\.6 {
  margin-right: 5.6rem
}

.margin-right-5\.7 {
  margin-right: 5.7rem
}

.margin-right-5\.8 {
  margin-right: 5.8rem
}

.margin-right-5\.9 {
  margin-right: 5.9rem
}

.margin-right-6 {
  margin-right: 6rem
}

.margin-right-6\.1 {
  margin-right: 6.1rem
}

.margin-right-6\.2 {
  margin-right: 6.2rem
}

.margin-right-6\.3 {
  margin-right: 6.3rem
}

.margin-right-6\.4 {
  margin-right: 6.4rem
}

.margin-right-6\.5 {
  margin-right: 6.5rem
}

.margin-right-6\.6 {
  margin-right: 6.6rem
}

.margin-right-6\.7 {
  margin-right: 6.7rem
}

.margin-right-6\.8 {
  margin-right: 6.8rem
}

.margin-right-6\.9 {
  margin-right: 6.9rem
}

.margin-right-7 {
  margin-right: 7rem
}

.margin-right-7\.1 {
  margin-right: 7.1rem
}

.margin-right-7\.2 {
  margin-right: 7.2rem
}

.margin-right-7\.3 {
  margin-right: 7.3rem
}

.margin-right-7\.4 {
  margin-right: 7.4rem
}

.margin-right-7\.5 {
  margin-right: 7.5rem
}

.margin-right-7\.6 {
  margin-right: 7.6rem
}

.margin-right-7\.7 {
  margin-right: 7.7rem
}

.margin-right-7\.8 {
  margin-right: 7.8rem
}

.margin-right-7\.9 {
  margin-right: 7.9rem
}

.margin-right-8 {
  margin-right: 8rem
}

.margin-right-8\.1 {
  margin-right: 8.1rem
}

.margin-right-8\.2 {
  margin-right: 8.2rem
}

.margin-right-8\.3 {
  margin-right: 8.3rem
}

.margin-right-8\.4 {
  margin-right: 8.4rem
}

.margin-right-8\.5 {
  margin-right: 8.5rem
}

.margin-right-8\.6 {
  margin-right: 8.6rem
}

.margin-right-8\.7 {
  margin-right: 8.7rem
}

.margin-right-8\.8 {
  margin-right: 8.8rem
}

.margin-right-8\.9 {
  margin-right: 8.9rem
}

.margin-right-9 {
  margin-right: 9rem
}

.margin-right-9\.1 {
  margin-right: 9.1rem
}

.margin-right-9\.2 {
  margin-right: 9.2rem
}

.margin-right-9\.3 {
  margin-right: 9.3rem
}

.margin-right-9\.4 {
  margin-right: 9.4rem
}

.margin-right-9\.5 {
  margin-right: 9.5rem
}

.margin-right-9\.6 {
  margin-right: 9.6rem
}

.margin-right-9\.7 {
  margin-right: 9.7rem
}

.margin-right-9\.8 {
  margin-right: 9.8rem
}

.margin-right-9\.9 {
  margin-right: 9.9rem
}

.margin-right-10 {
  margin-right: 10rem
}

.margin-right-10\.1 {
  margin-right: 10.1rem
}

.margin-right-10\.2 {
  margin-right: 10.2rem
}

.margin-right-10\.3 {
  margin-right: 10.3rem
}

.margin-right-10\.4 {
  margin-right: 10.4rem
}

.margin-right-10\.5 {
  margin-right: 10.5rem
}

.margin-right-10\.6 {
  margin-right: 10.6rem
}

.margin-right-10\.7 {
  margin-right: 10.7rem
}

.margin-right-10\.8 {
  margin-right: 10.8rem
}

.margin-right-10\.9 {
  margin-right: 10.9rem
}

.margin-right-11 {
  margin-right: 11rem
}

.margin-right-11\.1 {
  margin-right: 11.1rem
}

.margin-right-11\.2 {
  margin-right: 11.2rem
}

.margin-right-11\.3 {
  margin-right: 11.3rem
}

.margin-right-11\.4 {
  margin-right: 11.4rem
}

.margin-right-11\.5 {
  margin-right: 11.5rem
}

.margin-right-11\.6 {
  margin-right: 11.6rem
}

.margin-right-11\.7 {
  margin-right: 11.7rem
}

.margin-right-11\.8 {
  margin-right: 11.8rem
}

.margin-right-11\.9 {
  margin-right: 11.9rem
}

.margin-right-12 {
  margin-right: 12rem
}

.padding-0 {
  padding: 0
}

.padding-0\.1 {
  padding: .1rem
}

.padding-0\.2 {
  padding: .2rem
}

.padding-0\.3 {
  padding: .3rem
}

.padding-0\.4 {
  padding: .4rem
}

.padding-0\.5 {
  padding: .5rem
}

.padding-0\.6 {
  padding: .6rem
}

.padding-0\.7 {
  padding: .7rem
}

.padding-0\.8 {
  padding: .8rem
}

.padding-0\.9 {
  padding: .9rem
}

.padding-1 {
  padding: 1rem
}

.padding-1\.1 {
  padding: 1.1rem
}

.padding-1\.2 {
  padding: 1.2rem
}

.padding-1\.3 {
  padding: 1.3rem
}

.padding-1\.4 {
  padding: 1.4rem
}

.padding-1\.5 {
  padding: 1.5rem
}

.padding-1\.6 {
  padding: 1.6rem
}

.padding-1\.7 {
  padding: 1.7rem
}

.padding-1\.8 {
  padding: 1.8rem
}

.padding-1\.9 {
  padding: 1.9rem
}

.padding-2 {
  padding: 2rem
}

.padding-2\.1 {
  padding: 2.1rem
}

.padding-2\.2 {
  padding: 2.2rem
}

.padding-2\.3 {
  padding: 2.3rem
}

.padding-2\.4 {
  padding: 2.4rem
}

.padding-2\.5 {
  padding: 2.5rem
}

.padding-2\.6 {
  padding: 2.6rem
}

.padding-2\.7 {
  padding: 2.7rem
}

.padding-2\.8 {
  padding: 2.8rem
}

.padding-2\.9 {
  padding: 2.9rem
}

.padding-3 {
  padding: 3rem
}

.padding-3\.1 {
  padding: 3.1rem
}

.padding-3\.2 {
  padding: 3.2rem
}

.padding-3\.3 {
  padding: 3.3rem
}

.padding-3\.4 {
  padding: 3.4rem
}

.padding-3\.5 {
  padding: 3.5rem
}

.padding-3\.6 {
  padding: 3.6rem
}

.padding-3\.7 {
  padding: 3.7rem
}

.padding-3\.8 {
  padding: 3.8rem
}

.padding-3\.9 {
  padding: 3.9rem
}

.padding-4 {
  padding: 4rem
}

.padding-4\.1 {
  padding: 4.1rem
}

.padding-4\.2 {
  padding: 4.2rem
}

.padding-4\.3 {
  padding: 4.3rem
}

.padding-4\.4 {
  padding: 4.4rem
}

.padding-4\.5 {
  padding: 4.5rem
}

.padding-4\.6 {
  padding: 4.6rem
}

.padding-4\.7 {
  padding: 4.7rem
}

.padding-4\.8 {
  padding: 4.8rem
}

.padding-4\.9 {
  padding: 4.9rem
}

.padding-5 {
  padding: 5rem
}

.padding-5\.1 {
  padding: 5.1rem
}

.padding-5\.2 {
  padding: 5.2rem
}

.padding-5\.3 {
  padding: 5.3rem
}

.padding-5\.4 {
  padding: 5.4rem
}

.padding-5\.5 {
  padding: 5.5rem
}

.padding-5\.6 {
  padding: 5.6rem
}

.padding-5\.7 {
  padding: 5.7rem
}

.padding-5\.8 {
  padding: 5.8rem
}

.padding-5\.9 {
  padding: 5.9rem
}

.padding-6 {
  padding: 6rem
}

.padding-6\.1 {
  padding: 6.1rem
}

.padding-6\.2 {
  padding: 6.2rem
}

.padding-6\.3 {
  padding: 6.3rem
}

.padding-6\.4 {
  padding: 6.4rem
}

.padding-6\.5 {
  padding: 6.5rem
}

.padding-6\.6 {
  padding: 6.6rem
}

.padding-6\.7 {
  padding: 6.7rem
}

.padding-6\.8 {
  padding: 6.8rem
}

.padding-6\.9 {
  padding: 6.9rem
}

.padding-7 {
  padding: 7rem
}

.padding-7\.1 {
  padding: 7.1rem
}

.padding-7\.2 {
  padding: 7.2rem
}

.padding-7\.3 {
  padding: 7.3rem
}

.padding-7\.4 {
  padding: 7.4rem
}

.padding-7\.5 {
  padding: 7.5rem
}

.padding-7\.6 {
  padding: 7.6rem
}

.padding-7\.7 {
  padding: 7.7rem
}

.padding-7\.8 {
  padding: 7.8rem
}

.padding-7\.9 {
  padding: 7.9rem
}

.padding-8 {
  padding: 8rem
}

.padding-8\.1 {
  padding: 8.1rem
}

.padding-8\.2 {
  padding: 8.2rem
}

.padding-8\.3 {
  padding: 8.3rem
}

.padding-8\.4 {
  padding: 8.4rem
}

.padding-8\.5 {
  padding: 8.5rem
}

.padding-8\.6 {
  padding: 8.6rem
}

.padding-8\.7 {
  padding: 8.7rem
}

.padding-8\.8 {
  padding: 8.8rem
}

.padding-8\.9 {
  padding: 8.9rem
}

.padding-9 {
  padding: 9rem
}

.padding-9\.1 {
  padding: 9.1rem
}

.padding-9\.2 {
  padding: 9.2rem
}

.padding-9\.3 {
  padding: 9.3rem
}

.padding-9\.4 {
  padding: 9.4rem
}

.padding-9\.5 {
  padding: 9.5rem
}

.padding-9\.6 {
  padding: 9.6rem
}

.padding-9\.7 {
  padding: 9.7rem
}

.padding-9\.8 {
  padding: 9.8rem
}

.padding-9\.9 {
  padding: 9.9rem
}

.padding-10 {
  padding: 10rem
}

.padding-10\.1 {
  padding: 10.1rem
}

.padding-10\.2 {
  padding: 10.2rem
}

.padding-10\.3 {
  padding: 10.3rem
}

.padding-10\.4 {
  padding: 10.4rem
}

.padding-10\.5 {
  padding: 10.5rem
}

.padding-10\.6 {
  padding: 10.6rem
}

.padding-10\.7 {
  padding: 10.7rem
}

.padding-10\.8 {
  padding: 10.8rem
}

.padding-10\.9 {
  padding: 10.9rem
}

.padding-11 {
  padding: 11rem
}

.padding-11\.1 {
  padding: 11.1rem
}

.padding-11\.2 {
  padding: 11.2rem
}

.padding-11\.3 {
  padding: 11.3rem
}

.padding-11\.4 {
  padding: 11.4rem
}

.padding-11\.5 {
  padding: 11.5rem
}

.padding-11\.6 {
  padding: 11.6rem
}

.padding-11\.7 {
  padding: 11.7rem
}

.padding-11\.8 {
  padding: 11.8rem
}

.padding-11\.9 {
  padding: 11.9rem
}

.padding-12 {
  padding: 12rem
}

.padding-x-0 {
  padding-left: 0;
  padding-right: 0
}

.padding-x-0\.1 {
  padding-left: .1rem;
  padding-right: .1rem
}

.padding-x-0\.2 {
  padding-left: .2rem;
  padding-right: .2rem
}

.padding-x-0\.3 {
  padding-left: .3rem;
  padding-right: .3rem
}

.padding-x-0\.4 {
  padding-left: .4rem;
  padding-right: .4rem
}

.padding-x-0\.5 {
  padding-left: .5rem;
  padding-right: .5rem
}

.padding-x-0\.6 {
  padding-left: .6rem;
  padding-right: .6rem
}

.padding-x-0\.7 {
  padding-left: .7rem;
  padding-right: .7rem
}

.padding-x-0\.8 {
  padding-left: .8rem;
  padding-right: .8rem
}

.padding-x-0\.9 {
  padding-left: .9rem;
  padding-right: .9rem
}

.padding-x-1 {
  padding-left: 1rem;
  padding-right: 1rem
}

.padding-x-1\.1 {
  padding-left: 1.1rem;
  padding-right: 1.1rem
}

.padding-x-1\.2 {
  padding-left: 1.2rem;
  padding-right: 1.2rem
}

.padding-x-1\.3 {
  padding-left: 1.3rem;
  padding-right: 1.3rem
}

.padding-x-1\.4 {
  padding-left: 1.4rem;
  padding-right: 1.4rem
}

.padding-x-1\.5 {
  padding-left: 1.5rem;
  padding-right: 1.5rem
}

.padding-x-1\.6 {
  padding-left: 1.6rem;
  padding-right: 1.6rem
}

.padding-x-1\.7 {
  padding-left: 1.7rem;
  padding-right: 1.7rem
}

.padding-x-1\.8 {
  padding-left: 1.8rem;
  padding-right: 1.8rem
}

.padding-x-1\.9 {
  padding-left: 1.9rem;
  padding-right: 1.9rem
}

.padding-x-2 {
  padding-left: 2rem;
  padding-right: 2rem
}

.padding-x-2\.1 {
  padding-left: 2.1rem;
  padding-right: 2.1rem
}

.padding-x-2\.2 {
  padding-left: 2.2rem;
  padding-right: 2.2rem
}

.padding-x-2\.3 {
  padding-left: 2.3rem;
  padding-right: 2.3rem
}

.padding-x-2\.4 {
  padding-left: 2.4rem;
  padding-right: 2.4rem
}

.padding-x-2\.5 {
  padding-left: 2.5rem;
  padding-right: 2.5rem
}

.padding-x-2\.6 {
  padding-left: 2.6rem;
  padding-right: 2.6rem
}

.padding-x-2\.7 {
  padding-left: 2.7rem;
  padding-right: 2.7rem
}

.padding-x-2\.8 {
  padding-left: 2.8rem;
  padding-right: 2.8rem
}

.padding-x-2\.9 {
  padding-left: 2.9rem;
  padding-right: 2.9rem
}

.padding-x-3 {
  padding-left: 3rem;
  padding-right: 3rem
}

.padding-x-3\.1 {
  padding-left: 3.1rem;
  padding-right: 3.1rem
}

.padding-x-3\.2 {
  padding-left: 3.2rem;
  padding-right: 3.2rem
}

.padding-x-3\.3 {
  padding-left: 3.3rem;
  padding-right: 3.3rem
}

.padding-x-3\.4 {
  padding-left: 3.4rem;
  padding-right: 3.4rem
}

.padding-x-3\.5 {
  padding-left: 3.5rem;
  padding-right: 3.5rem
}

.padding-x-3\.6 {
  padding-left: 3.6rem;
  padding-right: 3.6rem
}

.padding-x-3\.7 {
  padding-left: 3.7rem;
  padding-right: 3.7rem
}

.padding-x-3\.8 {
  padding-left: 3.8rem;
  padding-right: 3.8rem
}

.padding-x-3\.9 {
  padding-left: 3.9rem;
  padding-right: 3.9rem
}

.padding-x-4 {
  padding-left: 4rem;
  padding-right: 4rem
}

.padding-x-4\.1 {
  padding-left: 4.1rem;
  padding-right: 4.1rem
}

.padding-x-4\.2 {
  padding-left: 4.2rem;
  padding-right: 4.2rem
}

.padding-x-4\.3 {
  padding-left: 4.3rem;
  padding-right: 4.3rem
}

.padding-x-4\.4 {
  padding-left: 4.4rem;
  padding-right: 4.4rem
}

.padding-x-4\.5 {
  padding-left: 4.5rem;
  padding-right: 4.5rem
}

.padding-x-4\.6 {
  padding-left: 4.6rem;
  padding-right: 4.6rem
}

.padding-x-4\.7 {
  padding-left: 4.7rem;
  padding-right: 4.7rem
}

.padding-x-4\.8 {
  padding-left: 4.8rem;
  padding-right: 4.8rem
}

.padding-x-4\.9 {
  padding-left: 4.9rem;
  padding-right: 4.9rem
}

.padding-x-5 {
  padding-left: 5rem;
  padding-right: 5rem
}

.padding-x-5\.1 {
  padding-left: 5.1rem;
  padding-right: 5.1rem
}

.padding-x-5\.2 {
  padding-left: 5.2rem;
  padding-right: 5.2rem
}

.padding-x-5\.3 {
  padding-left: 5.3rem;
  padding-right: 5.3rem
}

.padding-x-5\.4 {
  padding-left: 5.4rem;
  padding-right: 5.4rem
}

.padding-x-5\.5 {
  padding-left: 5.5rem;
  padding-right: 5.5rem
}

.padding-x-5\.6 {
  padding-left: 5.6rem;
  padding-right: 5.6rem
}

.padding-x-5\.7 {
  padding-left: 5.7rem;
  padding-right: 5.7rem
}

.padding-x-5\.8 {
  padding-left: 5.8rem;
  padding-right: 5.8rem
}

.padding-x-5\.9 {
  padding-left: 5.9rem;
  padding-right: 5.9rem
}

.padding-x-6 {
  padding-left: 6rem;
  padding-right: 6rem
}

.padding-x-6\.1 {
  padding-left: 6.1rem;
  padding-right: 6.1rem
}

.padding-x-6\.2 {
  padding-left: 6.2rem;
  padding-right: 6.2rem
}

.padding-x-6\.3 {
  padding-left: 6.3rem;
  padding-right: 6.3rem
}

.padding-x-6\.4 {
  padding-left: 6.4rem;
  padding-right: 6.4rem
}

.padding-x-6\.5 {
  padding-left: 6.5rem;
  padding-right: 6.5rem
}

.padding-x-6\.6 {
  padding-left: 6.6rem;
  padding-right: 6.6rem
}

.padding-x-6\.7 {
  padding-left: 6.7rem;
  padding-right: 6.7rem
}

.padding-x-6\.8 {
  padding-left: 6.8rem;
  padding-right: 6.8rem
}

.padding-x-6\.9 {
  padding-left: 6.9rem;
  padding-right: 6.9rem
}

.padding-x-7 {
  padding-left: 7rem;
  padding-right: 7rem
}

.padding-x-7\.1 {
  padding-left: 7.1rem;
  padding-right: 7.1rem
}

.padding-x-7\.2 {
  padding-left: 7.2rem;
  padding-right: 7.2rem
}

.padding-x-7\.3 {
  padding-left: 7.3rem;
  padding-right: 7.3rem
}

.padding-x-7\.4 {
  padding-left: 7.4rem;
  padding-right: 7.4rem
}

.padding-x-7\.5 {
  padding-left: 7.5rem;
  padding-right: 7.5rem
}

.padding-x-7\.6 {
  padding-left: 7.6rem;
  padding-right: 7.6rem
}

.padding-x-7\.7 {
  padding-left: 7.7rem;
  padding-right: 7.7rem
}

.padding-x-7\.8 {
  padding-left: 7.8rem;
  padding-right: 7.8rem
}

.padding-x-7\.9 {
  padding-left: 7.9rem;
  padding-right: 7.9rem
}

.padding-x-8 {
  padding-left: 8rem;
  padding-right: 8rem
}

.padding-x-8\.1 {
  padding-left: 8.1rem;
  padding-right: 8.1rem
}

.padding-x-8\.2 {
  padding-left: 8.2rem;
  padding-right: 8.2rem
}

.padding-x-8\.3 {
  padding-left: 8.3rem;
  padding-right: 8.3rem
}

.padding-x-8\.4 {
  padding-left: 8.4rem;
  padding-right: 8.4rem
}

.padding-x-8\.5 {
  padding-left: 8.5rem;
  padding-right: 8.5rem
}

.padding-x-8\.6 {
  padding-left: 8.6rem;
  padding-right: 8.6rem
}

.padding-x-8\.7 {
  padding-left: 8.7rem;
  padding-right: 8.7rem
}

.padding-x-8\.8 {
  padding-left: 8.8rem;
  padding-right: 8.8rem
}

.padding-x-8\.9 {
  padding-left: 8.9rem;
  padding-right: 8.9rem
}

.padding-x-9 {
  padding-left: 9rem;
  padding-right: 9rem
}

.padding-x-9\.1 {
  padding-left: 9.1rem;
  padding-right: 9.1rem
}

.padding-x-9\.2 {
  padding-left: 9.2rem;
  padding-right: 9.2rem
}

.padding-x-9\.3 {
  padding-left: 9.3rem;
  padding-right: 9.3rem
}

.padding-x-9\.4 {
  padding-left: 9.4rem;
  padding-right: 9.4rem
}

.padding-x-9\.5 {
  padding-left: 9.5rem;
  padding-right: 9.5rem
}

.padding-x-9\.6 {
  padding-left: 9.6rem;
  padding-right: 9.6rem
}

.padding-x-9\.7 {
  padding-left: 9.7rem;
  padding-right: 9.7rem
}

.padding-x-9\.8 {
  padding-left: 9.8rem;
  padding-right: 9.8rem
}

.padding-x-9\.9 {
  padding-left: 9.9rem;
  padding-right: 9.9rem
}

.padding-x-10 {
  padding-left: 10rem;
  padding-right: 10rem
}

.padding-x-10\.1 {
  padding-left: 10.1rem;
  padding-right: 10.1rem
}

.padding-x-10\.2 {
  padding-left: 10.2rem;
  padding-right: 10.2rem
}

.padding-x-10\.3 {
  padding-left: 10.3rem;
  padding-right: 10.3rem
}

.padding-x-10\.4 {
  padding-left: 10.4rem;
  padding-right: 10.4rem
}

.padding-x-10\.5 {
  padding-left: 10.5rem;
  padding-right: 10.5rem
}

.padding-x-10\.6 {
  padding-left: 10.6rem;
  padding-right: 10.6rem
}

.padding-x-10\.7 {
  padding-left: 10.7rem;
  padding-right: 10.7rem
}

.padding-x-10\.8 {
  padding-left: 10.8rem;
  padding-right: 10.8rem
}

.padding-x-10\.9 {
  padding-left: 10.9rem;
  padding-right: 10.9rem
}

.padding-x-11 {
  padding-left: 11rem;
  padding-right: 11rem
}

.padding-x-11\.1 {
  padding-left: 11.1rem;
  padding-right: 11.1rem
}

.padding-x-11\.2 {
  padding-left: 11.2rem;
  padding-right: 11.2rem
}

.padding-x-11\.3 {
  padding-left: 11.3rem;
  padding-right: 11.3rem
}

.padding-x-11\.4 {
  padding-left: 11.4rem;
  padding-right: 11.4rem
}

.padding-x-11\.5 {
  padding-left: 11.5rem;
  padding-right: 11.5rem
}

.padding-x-11\.6 {
  padding-left: 11.6rem;
  padding-right: 11.6rem
}

.padding-x-11\.7 {
  padding-left: 11.7rem;
  padding-right: 11.7rem
}

.padding-x-11\.8 {
  padding-left: 11.8rem;
  padding-right: 11.8rem
}

.padding-x-11\.9 {
  padding-left: 11.9rem;
  padding-right: 11.9rem
}

.padding-x-12 {
  padding-left: 12rem;
  padding-right: 12rem
}

.padding-y-0 {
  padding-bottom: 0;
  padding-top: 0
}

.padding-y-0\.1 {
  padding-bottom: .1rem;
  padding-top: .1rem
}

.padding-y-0\.2 {
  padding-bottom: .2rem;
  padding-top: .2rem
}

.padding-y-0\.3 {
  padding-bottom: .3rem;
  padding-top: .3rem
}

.padding-y-0\.4 {
  padding-bottom: .4rem;
  padding-top: .4rem
}

.padding-y-0\.5 {
  padding-bottom: .5rem;
  padding-top: .5rem
}

.padding-y-0\.6 {
  padding-bottom: .6rem;
  padding-top: .6rem
}

.padding-y-0\.7 {
  padding-bottom: .7rem;
  padding-top: .7rem
}

.padding-y-0\.8 {
  padding-bottom: .8rem;
  padding-top: .8rem
}

.padding-y-0\.9 {
  padding-bottom: .9rem;
  padding-top: .9rem
}

.padding-y-1 {
  padding-bottom: 1rem;
  padding-top: 1rem
}

.padding-y-1\.1 {
  padding-bottom: 1.1rem;
  padding-top: 1.1rem
}

.padding-y-1\.2 {
  padding-bottom: 1.2rem;
  padding-top: 1.2rem
}

.padding-y-1\.3 {
  padding-bottom: 1.3rem;
  padding-top: 1.3rem
}

.padding-y-1\.4 {
  padding-bottom: 1.4rem;
  padding-top: 1.4rem
}

.padding-y-1\.5 {
  padding-bottom: 1.5rem;
  padding-top: 1.5rem
}

.padding-y-1\.6 {
  padding-bottom: 1.6rem;
  padding-top: 1.6rem
}

.padding-y-1\.7 {
  padding-bottom: 1.7rem;
  padding-top: 1.7rem
}

.padding-y-1\.8 {
  padding-bottom: 1.8rem;
  padding-top: 1.8rem
}

.padding-y-1\.9 {
  padding-bottom: 1.9rem;
  padding-top: 1.9rem
}

.padding-y-2 {
  padding-bottom: 2rem;
  padding-top: 2rem
}

.padding-y-2\.1 {
  padding-bottom: 2.1rem;
  padding-top: 2.1rem
}

.padding-y-2\.2 {
  padding-bottom: 2.2rem;
  padding-top: 2.2rem
}

.padding-y-2\.3 {
  padding-bottom: 2.3rem;
  padding-top: 2.3rem
}

.padding-y-2\.4 {
  padding-bottom: 2.4rem;
  padding-top: 2.4rem
}

.padding-y-2\.5 {
  padding-bottom: 2.5rem;
  padding-top: 2.5rem
}

.padding-y-2\.6 {
  padding-bottom: 2.6rem;
  padding-top: 2.6rem
}

.padding-y-2\.7 {
  padding-bottom: 2.7rem;
  padding-top: 2.7rem
}

.padding-y-2\.8 {
  padding-bottom: 2.8rem;
  padding-top: 2.8rem
}

.padding-y-2\.9 {
  padding-bottom: 2.9rem;
  padding-top: 2.9rem
}

.padding-y-3 {
  padding-bottom: 3rem;
  padding-top: 3rem
}

.padding-y-3\.1 {
  padding-bottom: 3.1rem;
  padding-top: 3.1rem
}

.padding-y-3\.2 {
  padding-bottom: 3.2rem;
  padding-top: 3.2rem
}

.padding-y-3\.3 {
  padding-bottom: 3.3rem;
  padding-top: 3.3rem
}

.padding-y-3\.4 {
  padding-bottom: 3.4rem;
  padding-top: 3.4rem
}

.padding-y-3\.5 {
  padding-bottom: 3.5rem;
  padding-top: 3.5rem
}

.padding-y-3\.6 {
  padding-bottom: 3.6rem;
  padding-top: 3.6rem
}

.padding-y-3\.7 {
  padding-bottom: 3.7rem;
  padding-top: 3.7rem
}

.padding-y-3\.8 {
  padding-bottom: 3.8rem;
  padding-top: 3.8rem
}

.padding-y-3\.9 {
  padding-bottom: 3.9rem;
  padding-top: 3.9rem
}

.padding-y-4 {
  padding-bottom: 4rem;
  padding-top: 4rem
}

.padding-y-4\.1 {
  padding-bottom: 4.1rem;
  padding-top: 4.1rem
}

.padding-y-4\.2 {
  padding-bottom: 4.2rem;
  padding-top: 4.2rem
}

.padding-y-4\.3 {
  padding-bottom: 4.3rem;
  padding-top: 4.3rem
}

.padding-y-4\.4 {
  padding-bottom: 4.4rem;
  padding-top: 4.4rem
}

.padding-y-4\.5 {
  padding-bottom: 4.5rem;
  padding-top: 4.5rem
}

.padding-y-4\.6 {
  padding-bottom: 4.6rem;
  padding-top: 4.6rem
}

.padding-y-4\.7 {
  padding-bottom: 4.7rem;
  padding-top: 4.7rem
}

.padding-y-4\.8 {
  padding-bottom: 4.8rem;
  padding-top: 4.8rem
}

.padding-y-4\.9 {
  padding-bottom: 4.9rem;
  padding-top: 4.9rem
}

.padding-y-5 {
  padding-bottom: 5rem;
  padding-top: 5rem
}

.padding-y-5\.1 {
  padding-bottom: 5.1rem;
  padding-top: 5.1rem
}

.padding-y-5\.2 {
  padding-bottom: 5.2rem;
  padding-top: 5.2rem
}

.padding-y-5\.3 {
  padding-bottom: 5.3rem;
  padding-top: 5.3rem
}

.padding-y-5\.4 {
  padding-bottom: 5.4rem;
  padding-top: 5.4rem
}

.padding-y-5\.5 {
  padding-bottom: 5.5rem;
  padding-top: 5.5rem
}

.padding-y-5\.6 {
  padding-bottom: 5.6rem;
  padding-top: 5.6rem
}

.padding-y-5\.7 {
  padding-bottom: 5.7rem;
  padding-top: 5.7rem
}

.padding-y-5\.8 {
  padding-bottom: 5.8rem;
  padding-top: 5.8rem
}

.padding-y-5\.9 {
  padding-bottom: 5.9rem;
  padding-top: 5.9rem
}

.padding-y-6 {
  padding-bottom: 6rem;
  padding-top: 6rem
}

.padding-y-6\.1 {
  padding-bottom: 6.1rem;
  padding-top: 6.1rem
}

.padding-y-6\.2 {
  padding-bottom: 6.2rem;
  padding-top: 6.2rem
}

.padding-y-6\.3 {
  padding-bottom: 6.3rem;
  padding-top: 6.3rem
}

.padding-y-6\.4 {
  padding-bottom: 6.4rem;
  padding-top: 6.4rem
}

.padding-y-6\.5 {
  padding-bottom: 6.5rem;
  padding-top: 6.5rem
}

.padding-y-6\.6 {
  padding-bottom: 6.6rem;
  padding-top: 6.6rem
}

.padding-y-6\.7 {
  padding-bottom: 6.7rem;
  padding-top: 6.7rem
}

.padding-y-6\.8 {
  padding-bottom: 6.8rem;
  padding-top: 6.8rem
}

.padding-y-6\.9 {
  padding-bottom: 6.9rem;
  padding-top: 6.9rem
}

.padding-y-7 {
  padding-bottom: 7rem;
  padding-top: 7rem
}

.padding-y-7\.1 {
  padding-bottom: 7.1rem;
  padding-top: 7.1rem
}

.padding-y-7\.2 {
  padding-bottom: 7.2rem;
  padding-top: 7.2rem
}

.padding-y-7\.3 {
  padding-bottom: 7.3rem;
  padding-top: 7.3rem
}

.padding-y-7\.4 {
  padding-bottom: 7.4rem;
  padding-top: 7.4rem
}

.padding-y-7\.5 {
  padding-bottom: 7.5rem;
  padding-top: 7.5rem
}

.padding-y-7\.6 {
  padding-bottom: 7.6rem;
  padding-top: 7.6rem
}

.padding-y-7\.7 {
  padding-bottom: 7.7rem;
  padding-top: 7.7rem
}

.padding-y-7\.8 {
  padding-bottom: 7.8rem;
  padding-top: 7.8rem
}

.padding-y-7\.9 {
  padding-bottom: 7.9rem;
  padding-top: 7.9rem
}

.padding-y-8 {
  padding-bottom: 8rem;
  padding-top: 8rem
}

.padding-y-8\.1 {
  padding-bottom: 8.1rem;
  padding-top: 8.1rem
}

.padding-y-8\.2 {
  padding-bottom: 8.2rem;
  padding-top: 8.2rem
}

.padding-y-8\.3 {
  padding-bottom: 8.3rem;
  padding-top: 8.3rem
}

.padding-y-8\.4 {
  padding-bottom: 8.4rem;
  padding-top: 8.4rem
}

.padding-y-8\.5 {
  padding-bottom: 8.5rem;
  padding-top: 8.5rem
}

.padding-y-8\.6 {
  padding-bottom: 8.6rem;
  padding-top: 8.6rem
}

.padding-y-8\.7 {
  padding-bottom: 8.7rem;
  padding-top: 8.7rem
}

.padding-y-8\.8 {
  padding-bottom: 8.8rem;
  padding-top: 8.8rem
}

.padding-y-8\.9 {
  padding-bottom: 8.9rem;
  padding-top: 8.9rem
}

.padding-y-9 {
  padding-bottom: 9rem;
  padding-top: 9rem
}

.padding-y-9\.1 {
  padding-bottom: 9.1rem;
  padding-top: 9.1rem
}

.padding-y-9\.2 {
  padding-bottom: 9.2rem;
  padding-top: 9.2rem
}

.padding-y-9\.3 {
  padding-bottom: 9.3rem;
  padding-top: 9.3rem
}

.padding-y-9\.4 {
  padding-bottom: 9.4rem;
  padding-top: 9.4rem
}

.padding-y-9\.5 {
  padding-bottom: 9.5rem;
  padding-top: 9.5rem
}

.padding-y-9\.6 {
  padding-bottom: 9.6rem;
  padding-top: 9.6rem
}

.padding-y-9\.7 {
  padding-bottom: 9.7rem;
  padding-top: 9.7rem
}

.padding-y-9\.8 {
  padding-bottom: 9.8rem;
  padding-top: 9.8rem
}

.padding-y-9\.9 {
  padding-bottom: 9.9rem;
  padding-top: 9.9rem
}

.padding-y-10 {
  padding-bottom: 10rem;
  padding-top: 10rem
}

.padding-y-10\.1 {
  padding-bottom: 10.1rem;
  padding-top: 10.1rem
}

.padding-y-10\.2 {
  padding-bottom: 10.2rem;
  padding-top: 10.2rem
}

.padding-y-10\.3 {
  padding-bottom: 10.3rem;
  padding-top: 10.3rem
}

.padding-y-10\.4 {
  padding-bottom: 10.4rem;
  padding-top: 10.4rem
}

.padding-y-10\.5 {
  padding-bottom: 10.5rem;
  padding-top: 10.5rem
}

.padding-y-10\.6 {
  padding-bottom: 10.6rem;
  padding-top: 10.6rem
}

.padding-y-10\.7 {
  padding-bottom: 10.7rem;
  padding-top: 10.7rem
}

.padding-y-10\.8 {
  padding-bottom: 10.8rem;
  padding-top: 10.8rem
}

.padding-y-10\.9 {
  padding-bottom: 10.9rem;
  padding-top: 10.9rem
}

.padding-y-11 {
  padding-bottom: 11rem;
  padding-top: 11rem
}

.padding-y-11\.1 {
  padding-bottom: 11.1rem;
  padding-top: 11.1rem
}

.padding-y-11\.2 {
  padding-bottom: 11.2rem;
  padding-top: 11.2rem
}

.padding-y-11\.3 {
  padding-bottom: 11.3rem;
  padding-top: 11.3rem
}

.padding-y-11\.4 {
  padding-bottom: 11.4rem;
  padding-top: 11.4rem
}

.padding-y-11\.5 {
  padding-bottom: 11.5rem;
  padding-top: 11.5rem
}

.padding-y-11\.6 {
  padding-bottom: 11.6rem;
  padding-top: 11.6rem
}

.padding-y-11\.7 {
  padding-bottom: 11.7rem;
  padding-top: 11.7rem
}

.padding-y-11\.8 {
  padding-bottom: 11.8rem;
  padding-top: 11.8rem
}

.padding-y-11\.9 {
  padding-bottom: 11.9rem;
  padding-top: 11.9rem
}

.padding-y-12 {
  padding-bottom: 12rem;
  padding-top: 12rem
}

.padding-left-0 {
  padding-left: 0
}

.padding-left-0\.1 {
  padding-left: .1rem
}

.padding-left-0\.2 {
  padding-left: .2rem
}

.padding-left-0\.3 {
  padding-left: .3rem
}

.padding-left-0\.4 {
  padding-left: .4rem
}

.padding-left-0\.5 {
  padding-left: .5rem
}

.padding-left-0\.6 {
  padding-left: .6rem
}

.padding-left-0\.7 {
  padding-left: .7rem
}

.padding-left-0\.8 {
  padding-left: .8rem
}

.padding-left-0\.9 {
  padding-left: .9rem
}

.padding-left-1 {
  padding-left: 1rem
}

.padding-left-1\.1 {
  padding-left: 1.1rem
}

.padding-left-1\.2 {
  padding-left: 1.2rem
}

.padding-left-1\.3 {
  padding-left: 1.3rem
}

.padding-left-1\.4 {
  padding-left: 1.4rem
}

.padding-left-1\.5 {
  padding-left: 1.5rem
}

.padding-left-1\.6 {
  padding-left: 1.6rem
}

.padding-left-1\.7 {
  padding-left: 1.7rem
}

.padding-left-1\.8 {
  padding-left: 1.8rem
}

.padding-left-1\.9 {
  padding-left: 1.9rem
}

.padding-left-2 {
  padding-left: 2rem
}

.padding-left-2\.1 {
  padding-left: 2.1rem
}

.padding-left-2\.2 {
  padding-left: 2.2rem
}

.padding-left-2\.3 {
  padding-left: 2.3rem
}

.padding-left-2\.4 {
  padding-left: 2.4rem
}

.padding-left-2\.5 {
  padding-left: 2.5rem
}

.padding-left-2\.6 {
  padding-left: 2.6rem
}

.padding-left-2\.7 {
  padding-left: 2.7rem
}

.padding-left-2\.8 {
  padding-left: 2.8rem
}

.padding-left-2\.9 {
  padding-left: 2.9rem
}

.padding-left-3 {
  padding-left: 3rem
}

.padding-left-3\.1 {
  padding-left: 3.1rem
}

.padding-left-3\.2 {
  padding-left: 3.2rem
}

.padding-left-3\.3 {
  padding-left: 3.3rem
}

.padding-left-3\.4 {
  padding-left: 3.4rem
}

.padding-left-3\.5 {
  padding-left: 3.5rem
}

.padding-left-3\.6 {
  padding-left: 3.6rem
}

.padding-left-3\.7 {
  padding-left: 3.7rem
}

.padding-left-3\.8 {
  padding-left: 3.8rem
}

.padding-left-3\.9 {
  padding-left: 3.9rem
}

.padding-left-4 {
  padding-left: 4rem
}

.padding-left-4\.1 {
  padding-left: 4.1rem
}

.padding-left-4\.2 {
  padding-left: 4.2rem
}

.padding-left-4\.3 {
  padding-left: 4.3rem
}

.padding-left-4\.4 {
  padding-left: 4.4rem
}

.padding-left-4\.5 {
  padding-left: 4.5rem
}

.padding-left-4\.6 {
  padding-left: 4.6rem
}

.padding-left-4\.7 {
  padding-left: 4.7rem
}

.padding-left-4\.8 {
  padding-left: 4.8rem
}

.padding-left-4\.9 {
  padding-left: 4.9rem
}

.padding-left-5 {
  padding-left: 5rem
}

.padding-left-5\.1 {
  padding-left: 5.1rem
}

.padding-left-5\.2 {
  padding-left: 5.2rem
}

.padding-left-5\.3 {
  padding-left: 5.3rem
}

.padding-left-5\.4 {
  padding-left: 5.4rem
}

.padding-left-5\.5 {
  padding-left: 5.5rem
}

.padding-left-5\.6 {
  padding-left: 5.6rem
}

.padding-left-5\.7 {
  padding-left: 5.7rem
}

.padding-left-5\.8 {
  padding-left: 5.8rem
}

.padding-left-5\.9 {
  padding-left: 5.9rem
}

.padding-left-6 {
  padding-left: 6rem
}

.padding-left-6\.1 {
  padding-left: 6.1rem
}

.padding-left-6\.2 {
  padding-left: 6.2rem
}

.padding-left-6\.3 {
  padding-left: 6.3rem
}

.padding-left-6\.4 {
  padding-left: 6.4rem
}

.padding-left-6\.5 {
  padding-left: 6.5rem
}

.padding-left-6\.6 {
  padding-left: 6.6rem
}

.padding-left-6\.7 {
  padding-left: 6.7rem
}

.padding-left-6\.8 {
  padding-left: 6.8rem
}

.padding-left-6\.9 {
  padding-left: 6.9rem
}

.padding-left-7 {
  padding-left: 7rem
}

.padding-left-7\.1 {
  padding-left: 7.1rem
}

.padding-left-7\.2 {
  padding-left: 7.2rem
}

.padding-left-7\.3 {
  padding-left: 7.3rem
}

.padding-left-7\.4 {
  padding-left: 7.4rem
}

.padding-left-7\.5 {
  padding-left: 7.5rem
}

.padding-left-7\.6 {
  padding-left: 7.6rem
}

.padding-left-7\.7 {
  padding-left: 7.7rem
}

.padding-left-7\.8 {
  padding-left: 7.8rem
}

.padding-left-7\.9 {
  padding-left: 7.9rem
}

.padding-left-8 {
  padding-left: 8rem
}

.padding-left-8\.1 {
  padding-left: 8.1rem
}

.padding-left-8\.2 {
  padding-left: 8.2rem
}

.padding-left-8\.3 {
  padding-left: 8.3rem
}

.padding-left-8\.4 {
  padding-left: 8.4rem
}

.padding-left-8\.5 {
  padding-left: 8.5rem
}

.padding-left-8\.6 {
  padding-left: 8.6rem
}

.padding-left-8\.7 {
  padding-left: 8.7rem
}

.padding-left-8\.8 {
  padding-left: 8.8rem
}

.padding-left-8\.9 {
  padding-left: 8.9rem
}

.padding-left-9 {
  padding-left: 9rem
}

.padding-left-9\.1 {
  padding-left: 9.1rem
}

.padding-left-9\.2 {
  padding-left: 9.2rem
}

.padding-left-9\.3 {
  padding-left: 9.3rem
}

.padding-left-9\.4 {
  padding-left: 9.4rem
}

.padding-left-9\.5 {
  padding-left: 9.5rem
}

.padding-left-9\.6 {
  padding-left: 9.6rem
}

.padding-left-9\.7 {
  padding-left: 9.7rem
}

.padding-left-9\.8 {
  padding-left: 9.8rem
}

.padding-left-9\.9 {
  padding-left: 9.9rem
}

.padding-left-10 {
  padding-left: 10rem
}

.padding-left-10\.1 {
  padding-left: 10.1rem
}

.padding-left-10\.2 {
  padding-left: 10.2rem
}

.padding-left-10\.3 {
  padding-left: 10.3rem
}

.padding-left-10\.4 {
  padding-left: 10.4rem
}

.padding-left-10\.5 {
  padding-left: 10.5rem
}

.padding-left-10\.6 {
  padding-left: 10.6rem
}

.padding-left-10\.7 {
  padding-left: 10.7rem
}

.padding-left-10\.8 {
  padding-left: 10.8rem
}

.padding-left-10\.9 {
  padding-left: 10.9rem
}

.padding-left-11 {
  padding-left: 11rem
}

.padding-left-11\.1 {
  padding-left: 11.1rem
}

.padding-left-11\.2 {
  padding-left: 11.2rem
}

.padding-left-11\.3 {
  padding-left: 11.3rem
}

.padding-left-11\.4 {
  padding-left: 11.4rem
}

.padding-left-11\.5 {
  padding-left: 11.5rem
}

.padding-left-11\.6 {
  padding-left: 11.6rem
}

.padding-left-11\.7 {
  padding-left: 11.7rem
}

.padding-left-11\.8 {
  padding-left: 11.8rem
}

.padding-left-11\.9 {
  padding-left: 11.9rem
}

.padding-left-12 {
  padding-left: 12rem
}

.padding-right-0 {
  padding-right: 0
}

.padding-right-0\.1 {
  padding-right: .1rem
}

.padding-right-0\.2 {
  padding-right: .2rem
}

.padding-right-0\.3 {
  padding-right: .3rem
}

.padding-right-0\.4 {
  padding-right: .4rem
}

.padding-right-0\.5 {
  padding-right: .5rem
}

.padding-right-0\.6 {
  padding-right: .6rem
}

.padding-right-0\.7 {
  padding-right: .7rem
}

.padding-right-0\.8 {
  padding-right: .8rem
}

.padding-right-0\.9 {
  padding-right: .9rem
}

.padding-right-1 {
  padding-right: 1rem
}

.padding-right-1\.1 {
  padding-right: 1.1rem
}

.padding-right-1\.2 {
  padding-right: 1.2rem
}

.padding-right-1\.3 {
  padding-right: 1.3rem
}

.padding-right-1\.4 {
  padding-right: 1.4rem
}

.padding-right-1\.5 {
  padding-right: 1.5rem
}

.padding-right-1\.6 {
  padding-right: 1.6rem
}

.padding-right-1\.7 {
  padding-right: 1.7rem
}

.padding-right-1\.8 {
  padding-right: 1.8rem
}

.padding-right-1\.9 {
  padding-right: 1.9rem
}

.padding-right-2 {
  padding-right: 2rem
}

.padding-right-2\.1 {
  padding-right: 2.1rem
}

.padding-right-2\.2 {
  padding-right: 2.2rem
}

.padding-right-2\.3 {
  padding-right: 2.3rem
}

.padding-right-2\.4 {
  padding-right: 2.4rem
}

.padding-right-2\.5 {
  padding-right: 2.5rem
}

.padding-right-2\.6 {
  padding-right: 2.6rem
}

.padding-right-2\.7 {
  padding-right: 2.7rem
}

.padding-right-2\.8 {
  padding-right: 2.8rem
}

.padding-right-2\.9 {
  padding-right: 2.9rem
}

.padding-right-3 {
  padding-right: 3rem
}

.padding-right-3\.1 {
  padding-right: 3.1rem
}

.padding-right-3\.2 {
  padding-right: 3.2rem
}

.padding-right-3\.3 {
  padding-right: 3.3rem
}

.padding-right-3\.4 {
  padding-right: 3.4rem
}

.padding-right-3\.5 {
  padding-right: 3.5rem
}

.padding-right-3\.6 {
  padding-right: 3.6rem
}

.padding-right-3\.7 {
  padding-right: 3.7rem
}

.padding-right-3\.8 {
  padding-right: 3.8rem
}

.padding-right-3\.9 {
  padding-right: 3.9rem
}

.padding-right-4 {
  padding-right: 4rem
}

.padding-right-4\.1 {
  padding-right: 4.1rem
}

.padding-right-4\.2 {
  padding-right: 4.2rem
}

.padding-right-4\.3 {
  padding-right: 4.3rem
}

.padding-right-4\.4 {
  padding-right: 4.4rem
}

.padding-right-4\.5 {
  padding-right: 4.5rem
}

.padding-right-4\.6 {
  padding-right: 4.6rem
}

.padding-right-4\.7 {
  padding-right: 4.7rem
}

.padding-right-4\.8 {
  padding-right: 4.8rem
}

.padding-right-4\.9 {
  padding-right: 4.9rem
}

.padding-right-5 {
  padding-right: 5rem
}

.padding-right-5\.1 {
  padding-right: 5.1rem
}

.padding-right-5\.2 {
  padding-right: 5.2rem
}

.padding-right-5\.3 {
  padding-right: 5.3rem
}

.padding-right-5\.4 {
  padding-right: 5.4rem
}

.padding-right-5\.5 {
  padding-right: 5.5rem
}

.padding-right-5\.6 {
  padding-right: 5.6rem
}

.padding-right-5\.7 {
  padding-right: 5.7rem
}

.padding-right-5\.8 {
  padding-right: 5.8rem
}

.padding-right-5\.9 {
  padding-right: 5.9rem
}

.padding-right-6 {
  padding-right: 6rem
}

.padding-right-6\.1 {
  padding-right: 6.1rem
}

.padding-right-6\.2 {
  padding-right: 6.2rem
}

.padding-right-6\.3 {
  padding-right: 6.3rem
}

.padding-right-6\.4 {
  padding-right: 6.4rem
}

.padding-right-6\.5 {
  padding-right: 6.5rem
}

.padding-right-6\.6 {
  padding-right: 6.6rem
}

.padding-right-6\.7 {
  padding-right: 6.7rem
}

.padding-right-6\.8 {
  padding-right: 6.8rem
}

.padding-right-6\.9 {
  padding-right: 6.9rem
}

.padding-right-7 {
  padding-right: 7rem
}

.padding-right-7\.1 {
  padding-right: 7.1rem
}

.padding-right-7\.2 {
  padding-right: 7.2rem
}

.padding-right-7\.3 {
  padding-right: 7.3rem
}

.padding-right-7\.4 {
  padding-right: 7.4rem
}

.padding-right-7\.5 {
  padding-right: 7.5rem
}

.padding-right-7\.6 {
  padding-right: 7.6rem
}

.padding-right-7\.7 {
  padding-right: 7.7rem
}

.padding-right-7\.8 {
  padding-right: 7.8rem
}

.padding-right-7\.9 {
  padding-right: 7.9rem
}

.padding-right-8 {
  padding-right: 8rem
}

.padding-right-8\.1 {
  padding-right: 8.1rem
}

.padding-right-8\.2 {
  padding-right: 8.2rem
}

.padding-right-8\.3 {
  padding-right: 8.3rem
}

.padding-right-8\.4 {
  padding-right: 8.4rem
}

.padding-right-8\.5 {
  padding-right: 8.5rem
}

.padding-right-8\.6 {
  padding-right: 8.6rem
}

.padding-right-8\.7 {
  padding-right: 8.7rem
}

.padding-right-8\.8 {
  padding-right: 8.8rem
}

.padding-right-8\.9 {
  padding-right: 8.9rem
}

.padding-right-9 {
  padding-right: 9rem
}

.padding-right-9\.1 {
  padding-right: 9.1rem
}

.padding-right-9\.2 {
  padding-right: 9.2rem
}

.padding-right-9\.3 {
  padding-right: 9.3rem
}

.padding-right-9\.4 {
  padding-right: 9.4rem
}

.padding-right-9\.5 {
  padding-right: 9.5rem
}

.padding-right-9\.6 {
  padding-right: 9.6rem
}

.padding-right-9\.7 {
  padding-right: 9.7rem
}

.padding-right-9\.8 {
  padding-right: 9.8rem
}

.padding-right-9\.9 {
  padding-right: 9.9rem
}

.padding-right-10 {
  padding-right: 10rem
}

.padding-right-10\.1 {
  padding-right: 10.1rem
}

.padding-right-10\.2 {
  padding-right: 10.2rem
}

.padding-right-10\.3 {
  padding-right: 10.3rem
}

.padding-right-10\.4 {
  padding-right: 10.4rem
}

.padding-right-10\.5 {
  padding-right: 10.5rem
}

.padding-right-10\.6 {
  padding-right: 10.6rem
}

.padding-right-10\.7 {
  padding-right: 10.7rem
}

.padding-right-10\.8 {
  padding-right: 10.8rem
}

.padding-right-10\.9 {
  padding-right: 10.9rem
}

.padding-right-11 {
  padding-right: 11rem
}

.padding-right-11\.1 {
  padding-right: 11.1rem
}

.padding-right-11\.2 {
  padding-right: 11.2rem
}

.padding-right-11\.3 {
  padding-right: 11.3rem
}

.padding-right-11\.4 {
  padding-right: 11.4rem
}

.padding-right-11\.5 {
  padding-right: 11.5rem
}

.padding-right-11\.6 {
  padding-right: 11.6rem
}

.padding-right-11\.7 {
  padding-right: 11.7rem
}

.padding-right-11\.8 {
  padding-right: 11.8rem
}

.padding-right-11\.9 {
  padding-right: 11.9rem
}

.padding-right-12 {
  padding-right: 12rem
}

.padding-top-0 {
  padding-top: 0
}

.padding-top-0\.1 {
  padding-top: .1rem
}

.padding-top-0\.2 {
  padding-top: .2rem
}

.padding-top-0\.3 {
  padding-top: .3rem
}

.padding-top-0\.4 {
  padding-top: .4rem
}

.padding-top-0\.5 {
  padding-top: .5rem
}

.padding-top-0\.6 {
  padding-top: .6rem
}

.padding-top-0\.7 {
  padding-top: .7rem
}

.padding-top-0\.8 {
  padding-top: .8rem
}

.padding-top-0\.9 {
  padding-top: .9rem
}

.padding-top-1 {
  padding-top: 1rem
}

.padding-top-1\.1 {
  padding-top: 1.1rem
}

.padding-top-1\.2 {
  padding-top: 1.2rem
}

.padding-top-1\.3 {
  padding-top: 1.3rem
}

.padding-top-1\.4 {
  padding-top: 1.4rem
}

.padding-top-1\.5 {
  padding-top: 1.5rem
}

.padding-top-1\.6 {
  padding-top: 1.6rem
}

.padding-top-1\.7 {
  padding-top: 1.7rem
}

.padding-top-1\.8 {
  padding-top: 1.8rem
}

.padding-top-1\.9 {
  padding-top: 1.9rem
}

.padding-top-2 {
  padding-top: 2rem
}

.padding-top-2\.1 {
  padding-top: 2.1rem
}

.padding-top-2\.2 {
  padding-top: 2.2rem
}

.padding-top-2\.3 {
  padding-top: 2.3rem
}

.padding-top-2\.4 {
  padding-top: 2.4rem
}

.padding-top-2\.5 {
  padding-top: 2.5rem
}

.padding-top-2\.6 {
  padding-top: 2.6rem
}

.padding-top-2\.7 {
  padding-top: 2.7rem
}

.padding-top-2\.8 {
  padding-top: 2.8rem
}

.padding-top-2\.9 {
  padding-top: 2.9rem
}

.padding-top-3 {
  padding-top: 3rem
}

.padding-top-3\.1 {
  padding-top: 3.1rem
}

.padding-top-3\.2 {
  padding-top: 3.2rem
}

.padding-top-3\.3 {
  padding-top: 3.3rem
}

.padding-top-3\.4 {
  padding-top: 3.4rem
}

.padding-top-3\.5 {
  padding-top: 3.5rem
}

.padding-top-3\.6 {
  padding-top: 3.6rem
}

.padding-top-3\.7 {
  padding-top: 3.7rem
}

.padding-top-3\.8 {
  padding-top: 3.8rem
}

.padding-top-3\.9 {
  padding-top: 3.9rem
}

.padding-top-4 {
  padding-top: 4rem
}

.padding-top-4\.1 {
  padding-top: 4.1rem
}

.padding-top-4\.2 {
  padding-top: 4.2rem
}

.padding-top-4\.3 {
  padding-top: 4.3rem
}

.padding-top-4\.4 {
  padding-top: 4.4rem
}

.padding-top-4\.5 {
  padding-top: 4.5rem
}

.padding-top-4\.6 {
  padding-top: 4.6rem
}

.padding-top-4\.7 {
  padding-top: 4.7rem
}

.padding-top-4\.8 {
  padding-top: 4.8rem
}

.padding-top-4\.9 {
  padding-top: 4.9rem
}

.padding-top-5 {
  padding-top: 5rem
}

.padding-top-5\.1 {
  padding-top: 5.1rem
}

.padding-top-5\.2 {
  padding-top: 5.2rem
}

.padding-top-5\.3 {
  padding-top: 5.3rem
}

.padding-top-5\.4 {
  padding-top: 5.4rem
}

.padding-top-5\.5 {
  padding-top: 5.5rem
}

.padding-top-5\.6 {
  padding-top: 5.6rem
}

.padding-top-5\.7 {
  padding-top: 5.7rem
}

.padding-top-5\.8 {
  padding-top: 5.8rem
}

.padding-top-5\.9 {
  padding-top: 5.9rem
}

.padding-top-6 {
  padding-top: 6rem
}

.padding-top-6\.1 {
  padding-top: 6.1rem
}

.padding-top-6\.2 {
  padding-top: 6.2rem
}

.padding-top-6\.3 {
  padding-top: 6.3rem
}

.padding-top-6\.4 {
  padding-top: 6.4rem
}

.padding-top-6\.5 {
  padding-top: 6.5rem
}

.padding-top-6\.6 {
  padding-top: 6.6rem
}

.padding-top-6\.7 {
  padding-top: 6.7rem
}

.padding-top-6\.8 {
  padding-top: 6.8rem
}

.padding-top-6\.9 {
  padding-top: 6.9rem
}

.padding-top-7 {
  padding-top: 7rem
}

.padding-top-7\.1 {
  padding-top: 7.1rem
}

.padding-top-7\.2 {
  padding-top: 7.2rem
}

.padding-top-7\.3 {
  padding-top: 7.3rem
}

.padding-top-7\.4 {
  padding-top: 7.4rem
}

.padding-top-7\.5 {
  padding-top: 7.5rem
}

.padding-top-7\.6 {
  padding-top: 7.6rem
}

.padding-top-7\.7 {
  padding-top: 7.7rem
}

.padding-top-7\.8 {
  padding-top: 7.8rem
}

.padding-top-7\.9 {
  padding-top: 7.9rem
}

.padding-top-8 {
  padding-top: 8rem
}

.padding-top-8\.1 {
  padding-top: 8.1rem
}

.padding-top-8\.2 {
  padding-top: 8.2rem
}

.padding-top-8\.3 {
  padding-top: 8.3rem
}

.padding-top-8\.4 {
  padding-top: 8.4rem
}

.padding-top-8\.5 {
  padding-top: 8.5rem
}

.padding-top-8\.6 {
  padding-top: 8.6rem
}

.padding-top-8\.7 {
  padding-top: 8.7rem
}

.padding-top-8\.8 {
  padding-top: 8.8rem
}

.padding-top-8\.9 {
  padding-top: 8.9rem
}

.padding-top-9 {
  padding-top: 9rem
}

.padding-top-9\.1 {
  padding-top: 9.1rem
}

.padding-top-9\.2 {
  padding-top: 9.2rem
}

.padding-top-9\.3 {
  padding-top: 9.3rem
}

.padding-top-9\.4 {
  padding-top: 9.4rem
}

.padding-top-9\.5 {
  padding-top: 9.5rem
}

.padding-top-9\.6 {
  padding-top: 9.6rem
}

.padding-top-9\.7 {
  padding-top: 9.7rem
}

.padding-top-9\.8 {
  padding-top: 9.8rem
}

.padding-top-9\.9 {
  padding-top: 9.9rem
}

.padding-top-10 {
  padding-top: 10rem
}

.padding-top-10\.1 {
  padding-top: 10.1rem
}

.padding-top-10\.2 {
  padding-top: 10.2rem
}

.padding-top-10\.3 {
  padding-top: 10.3rem
}

.padding-top-10\.4 {
  padding-top: 10.4rem
}

.padding-top-10\.5 {
  padding-top: 10.5rem
}

.padding-top-10\.6 {
  padding-top: 10.6rem
}

.padding-top-10\.7 {
  padding-top: 10.7rem
}

.padding-top-10\.8 {
  padding-top: 10.8rem
}

.padding-top-10\.9 {
  padding-top: 10.9rem
}

.padding-top-11 {
  padding-top: 11rem
}

.padding-top-11\.1 {
  padding-top: 11.1rem
}

.padding-top-11\.2 {
  padding-top: 11.2rem
}

.padding-top-11\.3 {
  padding-top: 11.3rem
}

.padding-top-11\.4 {
  padding-top: 11.4rem
}

.padding-top-11\.5 {
  padding-top: 11.5rem
}

.padding-top-11\.6 {
  padding-top: 11.6rem
}

.padding-top-11\.7 {
  padding-top: 11.7rem
}

.padding-top-11\.8 {
  padding-top: 11.8rem
}

.padding-top-11\.9 {
  padding-top: 11.9rem
}

.padding-top-12 {
  padding-top: 12rem
}

.padding-bottom-0 {
  padding-bottom: 0
}

.padding-bottom-0\.1 {
  padding-bottom: .1rem
}

.padding-bottom-0\.2 {
  padding-bottom: .2rem
}

.padding-bottom-0\.3 {
  padding-bottom: .3rem
}

.padding-bottom-0\.4 {
  padding-bottom: .4rem
}

.padding-bottom-0\.5 {
  padding-bottom: .5rem
}

.padding-bottom-0\.6 {
  padding-bottom: .6rem
}

.padding-bottom-0\.7 {
  padding-bottom: .7rem
}

.padding-bottom-0\.8 {
  padding-bottom: .8rem
}

.padding-bottom-0\.9 {
  padding-bottom: .9rem
}

.padding-bottom-1 {
  padding-bottom: 1rem
}

.padding-bottom-1\.1 {
  padding-bottom: 1.1rem
}

.padding-bottom-1\.2 {
  padding-bottom: 1.2rem
}

.padding-bottom-1\.3 {
  padding-bottom: 1.3rem
}

.padding-bottom-1\.4 {
  padding-bottom: 1.4rem
}

.padding-bottom-1\.5 {
  padding-bottom: 1.5rem
}

.padding-bottom-1\.6 {
  padding-bottom: 1.6rem
}

.padding-bottom-1\.7 {
  padding-bottom: 1.7rem
}

.padding-bottom-1\.8 {
  padding-bottom: 1.8rem
}

.padding-bottom-1\.9 {
  padding-bottom: 1.9rem
}

.padding-bottom-2 {
  padding-bottom: 2rem
}

.padding-bottom-2\.1 {
  padding-bottom: 2.1rem
}

.padding-bottom-2\.2 {
  padding-bottom: 2.2rem
}

.padding-bottom-2\.3 {
  padding-bottom: 2.3rem
}

.padding-bottom-2\.4 {
  padding-bottom: 2.4rem
}

.padding-bottom-2\.5 {
  padding-bottom: 2.5rem
}

.padding-bottom-2\.6 {
  padding-bottom: 2.6rem
}

.padding-bottom-2\.7 {
  padding-bottom: 2.7rem
}

.padding-bottom-2\.8 {
  padding-bottom: 2.8rem
}

.padding-bottom-2\.9 {
  padding-bottom: 2.9rem
}

.padding-bottom-3 {
  padding-bottom: 3rem
}

.padding-bottom-3\.1 {
  padding-bottom: 3.1rem
}

.padding-bottom-3\.2 {
  padding-bottom: 3.2rem
}

.padding-bottom-3\.3 {
  padding-bottom: 3.3rem
}

.padding-bottom-3\.4 {
  padding-bottom: 3.4rem
}

.padding-bottom-3\.5 {
  padding-bottom: 3.5rem
}

.padding-bottom-3\.6 {
  padding-bottom: 3.6rem
}

.padding-bottom-3\.7 {
  padding-bottom: 3.7rem
}

.padding-bottom-3\.8 {
  padding-bottom: 3.8rem
}

.padding-bottom-3\.9 {
  padding-bottom: 3.9rem
}

.padding-bottom-4 {
  padding-bottom: 4rem
}

.padding-bottom-4\.1 {
  padding-bottom: 4.1rem
}

.padding-bottom-4\.2 {
  padding-bottom: 4.2rem
}

.padding-bottom-4\.3 {
  padding-bottom: 4.3rem
}

.padding-bottom-4\.4 {
  padding-bottom: 4.4rem
}

.padding-bottom-4\.5 {
  padding-bottom: 4.5rem
}

.padding-bottom-4\.6 {
  padding-bottom: 4.6rem
}

.padding-bottom-4\.7 {
  padding-bottom: 4.7rem
}

.padding-bottom-4\.8 {
  padding-bottom: 4.8rem
}

.padding-bottom-4\.9 {
  padding-bottom: 4.9rem
}

.padding-bottom-5 {
  padding-bottom: 5rem
}

.padding-bottom-5\.1 {
  padding-bottom: 5.1rem
}

.padding-bottom-5\.2 {
  padding-bottom: 5.2rem
}

.padding-bottom-5\.3 {
  padding-bottom: 5.3rem
}

.padding-bottom-5\.4 {
  padding-bottom: 5.4rem
}

.padding-bottom-5\.5 {
  padding-bottom: 5.5rem
}

.padding-bottom-5\.6 {
  padding-bottom: 5.6rem
}

.padding-bottom-5\.7 {
  padding-bottom: 5.7rem
}

.padding-bottom-5\.8 {
  padding-bottom: 5.8rem
}

.padding-bottom-5\.9 {
  padding-bottom: 5.9rem
}

.padding-bottom-6 {
  padding-bottom: 6rem
}

.padding-bottom-6\.1 {
  padding-bottom: 6.1rem
}

.padding-bottom-6\.2 {
  padding-bottom: 6.2rem
}

.padding-bottom-6\.3 {
  padding-bottom: 6.3rem
}

.padding-bottom-6\.4 {
  padding-bottom: 6.4rem
}

.padding-bottom-6\.5 {
  padding-bottom: 6.5rem
}

.padding-bottom-6\.6 {
  padding-bottom: 6.6rem
}

.padding-bottom-6\.7 {
  padding-bottom: 6.7rem
}

.padding-bottom-6\.8 {
  padding-bottom: 6.8rem
}

.padding-bottom-6\.9 {
  padding-bottom: 6.9rem
}

.padding-bottom-7 {
  padding-bottom: 7rem
}

.padding-bottom-7\.1 {
  padding-bottom: 7.1rem
}

.padding-bottom-7\.2 {
  padding-bottom: 7.2rem
}

.padding-bottom-7\.3 {
  padding-bottom: 7.3rem
}

.padding-bottom-7\.4 {
  padding-bottom: 7.4rem
}

.padding-bottom-7\.5 {
  padding-bottom: 7.5rem
}

.padding-bottom-7\.6 {
  padding-bottom: 7.6rem
}

.padding-bottom-7\.7 {
  padding-bottom: 7.7rem
}

.padding-bottom-7\.8 {
  padding-bottom: 7.8rem
}

.padding-bottom-7\.9 {
  padding-bottom: 7.9rem
}

.padding-bottom-8 {
  padding-bottom: 8rem
}

.padding-bottom-8\.1 {
  padding-bottom: 8.1rem
}

.padding-bottom-8\.2 {
  padding-bottom: 8.2rem
}

.padding-bottom-8\.3 {
  padding-bottom: 8.3rem
}

.padding-bottom-8\.4 {
  padding-bottom: 8.4rem
}

.padding-bottom-8\.5 {
  padding-bottom: 8.5rem
}

.padding-bottom-8\.6 {
  padding-bottom: 8.6rem
}

.padding-bottom-8\.7 {
  padding-bottom: 8.7rem
}

.padding-bottom-8\.8 {
  padding-bottom: 8.8rem
}

.padding-bottom-8\.9 {
  padding-bottom: 8.9rem
}

.padding-bottom-9 {
  padding-bottom: 9rem
}

.padding-bottom-9\.1 {
  padding-bottom: 9.1rem
}

.padding-bottom-9\.2 {
  padding-bottom: 9.2rem
}

.padding-bottom-9\.3 {
  padding-bottom: 9.3rem
}

.padding-bottom-9\.4 {
  padding-bottom: 9.4rem
}

.padding-bottom-9\.5 {
  padding-bottom: 9.5rem
}

.padding-bottom-9\.6 {
  padding-bottom: 9.6rem
}

.padding-bottom-9\.7 {
  padding-bottom: 9.7rem
}

.padding-bottom-9\.8 {
  padding-bottom: 9.8rem
}

.padding-bottom-9\.9 {
  padding-bottom: 9.9rem
}

.padding-bottom-10 {
  padding-bottom: 10rem
}

.padding-bottom-10\.1 {
  padding-bottom: 10.1rem
}

.padding-bottom-10\.2 {
  padding-bottom: 10.2rem
}

.padding-bottom-10\.3 {
  padding-bottom: 10.3rem
}

.padding-bottom-10\.4 {
  padding-bottom: 10.4rem
}

.padding-bottom-10\.5 {
  padding-bottom: 10.5rem
}

.padding-bottom-10\.6 {
  padding-bottom: 10.6rem
}

.padding-bottom-10\.7 {
  padding-bottom: 10.7rem
}

.padding-bottom-10\.8 {
  padding-bottom: 10.8rem
}

.padding-bottom-10\.9 {
  padding-bottom: 10.9rem
}

.padding-bottom-11 {
  padding-bottom: 11rem
}

.padding-bottom-11\.1 {
  padding-bottom: 11.1rem
}

.padding-bottom-11\.2 {
  padding-bottom: 11.2rem
}

.padding-bottom-11\.3 {
  padding-bottom: 11.3rem
}

.padding-bottom-11\.4 {
  padding-bottom: 11.4rem
}

.padding-bottom-11\.5 {
  padding-bottom: 11.5rem
}

.padding-bottom-11\.6 {
  padding-bottom: 11.6rem
}

.padding-bottom-11\.7 {
  padding-bottom: 11.7rem
}

.padding-bottom-11\.8 {
  padding-bottom: 11.8rem
}

.padding-bottom-11\.9 {
  padding-bottom: 11.9rem
}

.padding-bottom-12 {
  padding-bottom: 12rem
}

.display-flex {
  display: flex
}

.flex-column {
  flex-direction: column
}

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

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

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

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

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

.flex-wrap {
  flex-wrap: wrap
}

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

.visually-hidden {
  border: 0;
  height: 1px;
  margin: -1px;
  padding: 0;
  position: absolute !important;
  width: 1px;
  clip: rect(0 0 0 0);
  clip-path: inset(100%);
  overflow: hidden;
  white-space: nowrap
}

.gap-0\.5 {
  gap: 0.5rem;
}

.gap-1 {
  gap: 1rem
}

.gap-1\.5 {
  gap: 1.5rem
}

.gap-1\.6 {
  gap: 1.6rem
}

.gap-2 {
  gap: 2rem
}

.gap-3 {
  gap: 3rem
}

.gap-4 {
  gap: 4rem
}

.gap-5 {
  gap: 5rem
}

.hide {
  display: none !important
}

.space-y-0 {
  gap: 0
}

.space-y-0,
.space-y-0\.1 {
  display: flex;
  flex-direction: column
}

.space-y-0\.1 {
  gap: .1rem
}

.space-y-0\.2 {
  gap: .2rem
}

.space-y-0\.2,
.space-y-0\.3 {
  display: flex;
  flex-direction: column
}

.space-y-0\.3 {
  gap: .3rem
}

.space-y-0\.4 {
  gap: .4rem
}

.space-y-0\.4,
.space-y-0\.5 {
  display: flex;
  flex-direction: column
}

.space-y-0\.5 {
  gap: .5rem
}

.space-y-0\.6 {
  gap: .6rem
}

.space-y-0\.6,
.space-y-0\.7 {
  display: flex;
  flex-direction: column
}

.space-y-0\.7 {
  gap: .7rem
}

.space-y-0\.8 {
  gap: .8rem
}

.space-y-0\.8,
.space-y-0\.9 {
  display: flex;
  flex-direction: column
}

.space-y-0\.9 {
  gap: .9rem
}

.space-y-1 {
  gap: 1rem
}

.space-y-1,
.space-y-1\.1 {
  display: flex;
  flex-direction: column
}

.space-y-1\.1 {
  gap: 1.1rem
}

.space-y-1\.2 {
  gap: 1.2rem
}

.space-y-1\.2,
.space-y-1\.3 {
  display: flex;
  flex-direction: column
}

.space-y-1\.3 {
  gap: 1.3rem
}

.space-y-1\.4 {
  gap: 1.4rem
}

.space-y-1\.4,
.space-y-1\.5 {
  display: flex;
  flex-direction: column
}

.space-y-1\.5 {
  gap: 1.5rem
}

.space-y-1\.6 {
  gap: 1.6rem
}

.space-y-1\.6,
.space-y-1\.7 {
  display: flex;
  flex-direction: column
}

.space-y-1\.7 {
  gap: 1.7rem
}

.space-y-1\.8 {
  gap: 1.8rem
}

.space-y-1\.8,
.space-y-1\.9 {
  display: flex;
  flex-direction: column
}

.space-y-1\.9 {
  gap: 1.9rem
}

.space-y-2 {
  gap: 2rem
}

.space-y-2,
.space-y-2\.1 {
  display: flex;
  flex-direction: column
}

.space-y-2\.1 {
  gap: 2.1rem
}

.space-y-2\.2 {
  gap: 2.2rem
}

.space-y-2\.2,
.space-y-2\.3 {
  display: flex;
  flex-direction: column
}

.space-y-2\.3 {
  gap: 2.3rem
}

.space-y-2\.4 {
  gap: 2.4rem
}

.space-y-2\.4,
.space-y-2\.5 {
  display: flex;
  flex-direction: column
}

.space-y-2\.5 {
  gap: 2.5rem
}

.space-y-2\.6 {
  gap: 2.6rem
}

.space-y-2\.6,
.space-y-2\.7 {
  display: flex;
  flex-direction: column
}

.space-y-2\.7 {
  gap: 2.7rem
}

.space-y-2\.8 {
  gap: 2.8rem
}

.space-y-2\.8,
.space-y-2\.9 {
  display: flex;
  flex-direction: column
}

.space-y-2\.9 {
  gap: 2.9rem
}

.space-y-3 {
  gap: 3rem
}

.space-y-3,
.space-y-3\.1 {
  display: flex;
  flex-direction: column
}

.space-y-3\.1 {
  gap: 3.1rem
}

.space-y-3\.2 {
  gap: 3.2rem
}

.space-y-3\.2,
.space-y-3\.3 {
  display: flex;
  flex-direction: column
}

.space-y-3\.3 {
  gap: 3.3rem
}

.space-y-3\.4 {
  gap: 3.4rem
}

.space-y-3\.4,
.space-y-3\.5 {
  display: flex;
  flex-direction: column
}

.space-y-3\.5 {
  gap: 3.5rem
}

.space-y-3\.6 {
  gap: 3.6rem
}

.space-y-3\.6,
.space-y-3\.7 {
  display: flex;
  flex-direction: column
}

.space-y-3\.7 {
  gap: 3.7rem
}

.space-y-3\.8 {
  gap: 3.8rem
}

.space-y-3\.8,
.space-y-3\.9 {
  display: flex;
  flex-direction: column
}

.space-y-3\.9 {
  gap: 3.9rem
}

.space-y-4 {
  gap: 4rem
}

.space-y-4,
.space-y-4\.1 {
  display: flex;
  flex-direction: column
}

.space-y-4\.1 {
  gap: 4.1rem
}

.space-y-4\.2 {
  gap: 4.2rem
}

.space-y-4\.2,
.space-y-4\.3 {
  display: flex;
  flex-direction: column
}

.space-y-4\.3 {
  gap: 4.3rem
}

.space-y-4\.4 {
  gap: 4.4rem
}

.space-y-4\.4,
.space-y-4\.5 {
  display: flex;
  flex-direction: column
}

.space-y-4\.5 {
  gap: 4.5rem
}

.space-y-4\.6 {
  gap: 4.6rem
}

.space-y-4\.6,
.space-y-4\.7 {
  display: flex;
  flex-direction: column
}

.space-y-4\.7 {
  gap: 4.7rem
}

.space-y-4\.8 {
  gap: 4.8rem
}

.space-y-4\.8,
.space-y-4\.9 {
  display: flex;
  flex-direction: column
}

.space-y-4\.9 {
  gap: 4.9rem
}

.space-y-5 {
  gap: 5rem
}

.space-y-5,
.space-y-5\.1 {
  display: flex;
  flex-direction: column
}

.space-y-5\.1 {
  gap: 5.1rem
}

.space-y-5\.2 {
  gap: 5.2rem
}

.space-y-5\.2,
.space-y-5\.3 {
  display: flex;
  flex-direction: column
}

.space-y-5\.3 {
  gap: 5.3rem
}

.space-y-5\.4 {
  gap: 5.4rem
}

.space-y-5\.4,
.space-y-5\.5 {
  display: flex;
  flex-direction: column
}

.space-y-5\.5 {
  gap: 5.5rem
}

.space-y-5\.6 {
  gap: 5.6rem
}

.space-y-5\.6,
.space-y-5\.7 {
  display: flex;
  flex-direction: column
}

.space-y-5\.7 {
  gap: 5.7rem
}

.space-y-5\.8 {
  gap: 5.8rem
}

.space-y-5\.8,
.space-y-5\.9 {
  display: flex;
  flex-direction: column
}

.space-y-5\.9 {
  gap: 5.9rem
}

.space-y-6 {
  gap: 6rem
}

.space-y-6,
.space-y-6\.1 {
  display: flex;
  flex-direction: column
}

.space-y-6\.1 {
  gap: 6.1rem
}

.space-y-6\.2 {
  gap: 6.2rem
}

.space-y-6\.2,
.space-y-6\.3 {
  display: flex;
  flex-direction: column
}

.space-y-6\.3 {
  gap: 6.3rem
}

.space-y-6\.4 {
  gap: 6.4rem
}

.space-y-6\.4,
.space-y-6\.5 {
  display: flex;
  flex-direction: column
}

.space-y-6\.5 {
  gap: 6.5rem
}

.space-y-6\.6 {
  gap: 6.6rem
}

.space-y-6\.6,
.space-y-6\.7 {
  display: flex;
  flex-direction: column
}

.space-y-6\.7 {
  gap: 6.7rem
}

.space-y-6\.8 {
  gap: 6.8rem
}

.space-y-6\.8,
.space-y-6\.9 {
  display: flex;
  flex-direction: column
}

.space-y-6\.9 {
  gap: 6.9rem
}

.space-y-7 {
  gap: 7rem
}

.space-y-7,
.space-y-7\.1 {
  display: flex;
  flex-direction: column
}

.space-y-7\.1 {
  gap: 7.1rem
}

.space-y-7\.2 {
  gap: 7.2rem
}

.space-y-7\.2,
.space-y-7\.3 {
  display: flex;
  flex-direction: column
}

.space-y-7\.3 {
  gap: 7.3rem
}

.space-y-7\.4 {
  gap: 7.4rem
}

.space-y-7\.4,
.space-y-7\.5 {
  display: flex;
  flex-direction: column
}

.space-y-7\.5 {
  gap: 7.5rem
}

.space-y-7\.6 {
  gap: 7.6rem
}

.space-y-7\.6,
.space-y-7\.7 {
  display: flex;
  flex-direction: column
}

.space-y-7\.7 {
  gap: 7.7rem
}

.space-y-7\.8 {
  gap: 7.8rem
}

.space-y-7\.8,
.space-y-7\.9 {
  display: flex;
  flex-direction: column
}

.space-y-7\.9 {
  gap: 7.9rem
}

.space-y-8 {
  gap: 8rem
}

.space-y-8,
.space-y-8\.1 {
  display: flex;
  flex-direction: column
}

.space-y-8\.1 {
  gap: 8.1rem
}

.space-y-8\.2 {
  gap: 8.2rem
}

.space-y-8\.2,
.space-y-8\.3 {
  display: flex;
  flex-direction: column
}

.space-y-8\.3 {
  gap: 8.3rem
}

.space-y-8\.4 {
  gap: 8.4rem
}

.space-y-8\.4,
.space-y-8\.5 {
  display: flex;
  flex-direction: column
}

.space-y-8\.5 {
  gap: 8.5rem
}

.space-y-8\.6 {
  gap: 8.6rem
}

.space-y-8\.6,
.space-y-8\.7 {
  display: flex;
  flex-direction: column
}

.space-y-8\.7 {
  gap: 8.7rem
}

.space-y-8\.8 {
  gap: 8.8rem
}

.space-y-8\.8,
.space-y-8\.9 {
  display: flex;
  flex-direction: column
}

.space-y-8\.9 {
  gap: 8.9rem
}

.space-y-9 {
  gap: 9rem
}

.space-y-9,
.space-y-9\.1 {
  display: flex;
  flex-direction: column
}

.space-y-9\.1 {
  gap: 9.1rem
}

.space-y-9\.2 {
  gap: 9.2rem
}

.space-y-9\.2,
.space-y-9\.3 {
  display: flex;
  flex-direction: column
}

.space-y-9\.3 {
  gap: 9.3rem
}

.space-y-9\.4 {
  gap: 9.4rem
}

.space-y-9\.4,
.space-y-9\.5 {
  display: flex;
  flex-direction: column
}

.space-y-9\.5 {
  gap: 9.5rem
}

.space-y-9\.6 {
  gap: 9.6rem
}

.space-y-9\.6,
.space-y-9\.7 {
  display: flex;
  flex-direction: column
}

.space-y-9\.7 {
  gap: 9.7rem
}

.space-y-9\.8 {
  gap: 9.8rem
}

.space-y-9\.8,
.space-y-9\.9 {
  display: flex;
  flex-direction: column
}

.space-y-9\.9 {
  gap: 9.9rem
}

.space-y-10 {
  gap: 10rem
}

.space-y-10,
.space-y-10\.1 {
  display: flex;
  flex-direction: column
}

.space-y-10\.1 {
  gap: 10.1rem
}

.space-y-10\.2 {
  gap: 10.2rem
}

.space-y-10\.2,
.space-y-10\.3 {
  display: flex;
  flex-direction: column
}

.space-y-10\.3 {
  gap: 10.3rem
}

.space-y-10\.4 {
  gap: 10.4rem
}

.space-y-10\.4,
.space-y-10\.5 {
  display: flex;
  flex-direction: column
}

.space-y-10\.5 {
  gap: 10.5rem
}

.space-y-10\.6 {
  gap: 10.6rem
}

.space-y-10\.6,
.space-y-10\.7 {
  display: flex;
  flex-direction: column
}

.space-y-10\.7 {
  gap: 10.7rem
}

.space-y-10\.8 {
  gap: 10.8rem
}

.space-y-10\.8,
.space-y-10\.9 {
  display: flex;
  flex-direction: column
}

.space-y-10\.9 {
  gap: 10.9rem
}

.space-y-11 {
  gap: 11rem
}

.space-y-11,
.space-y-11\.1 {
  display: flex;
  flex-direction: column
}

.space-y-11\.1 {
  gap: 11.1rem
}

.space-y-11\.2 {
  gap: 11.2rem
}

.space-y-11\.2,
.space-y-11\.3 {
  display: flex;
  flex-direction: column
}

.space-y-11\.3 {
  gap: 11.3rem
}

.space-y-11\.4 {
  gap: 11.4rem
}

.space-y-11\.4,
.space-y-11\.5 {
  display: flex;
  flex-direction: column
}

.space-y-11\.5 {
  gap: 11.5rem
}

.space-y-11\.6 {
  gap: 11.6rem
}

.space-y-11\.6,
.space-y-11\.7 {
  display: flex;
  flex-direction: column
}

.space-y-11\.7 {
  gap: 11.7rem
}

.space-y-11\.8 {
  gap: 11.8rem
}

.space-y-11\.8,
.space-y-11\.9 {
  display: flex;
  flex-direction: column
}

.space-y-11\.9 {
  gap: 11.9rem
}

.space-y-12 {
  display: flex;
  flex-direction: column;
  gap: 12rem
}

.divider {
  margin: 3rem 0;
  position: relative;
  text-align: center
}

.divider:before {
  background: var(--color-neutral-200);
  content: "";
  height: .1rem;
  left: 0;
  position: absolute;
  right: 0;
  top: 50%
}

.divider span {
  background: #fff;
  color: var(--color-neutral-500);
  font-size: 1.4rem;
  padding: 0 2rem;
  position: relative;
  z-index: 1
}

.divider-sm {
  margin: 1.5rem 0
}

.divider-sm span {
  font-size: 1.2rem;
  padding: 0 1.5rem
}

.divider-lg {
  margin: 4rem 0
}

.divider-lg span {
  font-size: 1.6rem;
  padding: 0 2.5rem
}

.divider-primary:before {
  background: var(--color-primary-200)
}

.divider-primary span {
  color: var(--color-primary-600)
}

.divider-secondary:before {
  background: var(--color-neutral-300)
}

.divider-secondary span {
  color: var(--color-neutral-600)
}

.divider-line {
  background: var(--color-neutral-200);
  border: none;
  height: .1rem;
  margin: 2rem 0
}

.divider-line.divider-primary {
  background: var(--color-primary-200)
}

.divider-line.divider-secondary {
  background: var(--color-neutral-300)
}

.sticky {
  position: sticky
}

.top-0 {
  top: 0
}

.relative {
  position: relative
}

.heading-4xl {
  font-size: 4.4rem
}

.heading-3xl,
.heading-4xl {
  font-weight: 600;
  line-height: 1.2
}

.heading-3xl {
  font-size: 4rem
}

.heading-2xl {
  font-size: 3.6rem
}

.heading-2xl,
.heading-xl {
  font-weight: 600;
  line-height: 1.2
}

.heading-xl {
  font-size: 3.2rem
}

.heading-lg {
  font-size: 2.8rem;
  font-weight: 600;
  line-height: 1.25
}

.heading-md {
  font-size: 2.4rem;
  font-weight: 600;
  line-height: 1.3
}

.heading-sm {
  font-size: 2rem;
  font-weight: 600;
  line-height: 1.35
}

.heading-xs {
  font-size: 1.8rem;
  font-weight: 500;
  line-height: 1.4
}

.heading-2xs {
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 1.5
}

.text {
  font-size: 1.4rem;
  line-height: 1.5
}

.text,
.text-xs {
  font-weight: 400
}

.text-xs {
  font-size: 1.2rem;
  line-height: 1.4
}

.text-sm {
  font-size: 1.3rem;
  font-weight: 400;
  line-height: 1.45
}

.text-md {
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 1.5
}

.text-lg {
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1.55
}

.text-xl {
  font-size: 1.8rem
}

.text-2xl,
.text-xl {
  font-weight: 400;
  line-height: 1.6
}

.text-2xl {
  font-size: 2rem
}

.text-3xl {
  font-size: 2.2rem;
  font-weight: 400;
  line-height: 1.65
}

.text-muted {
  color: var(--color-neutral-500)
}

.text-subtle {
  color: var(--color-neutral-400)
}

.text-lead {
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1.6
}

.text-small {
  font-size: 1.2rem;
  font-weight: 400;
  line-height: 1.4
}

.text-large {
  font-size: 1.8rem;
  font-weight: 400;
  line-height: 1.55
}

.fs-1\.0 {
  font-size: 1rem
}

.fs-1\.1 {
  font-size: 1.1rem
}

.fs-1\.2 {
  font-size: 1.2rem
}

.fs-1\.3 {
  font-size: 1.3rem
}

.fs-1\.4 {
  font-size: 1.4rem
}

.fs-1\.5 {
  font-size: 1.5rem
}

.fs-1\.6 {
  font-size: 1.6rem
}

.fs-1\.7 {
  font-size: 1.7rem
}

.fs-1\.8 {
  font-size: 1.8rem
}

.fs-1\.9 {
  font-size: 1.9rem
}

.fs-2\.0 {
  font-size: 2rem
}

.fs-2\.1 {
  font-size: 2.1rem
}

.fs-2\.2 {
  font-size: 2.2rem
}

.fs-2\.3 {
  font-size: 2.3rem
}

.fs-2\.4 {
  font-size: 2.4rem
}

.fs-2\.5 {
  font-size: 2.5rem
}

.fs-2\.6 {
  font-size: 2.6rem
}

.fs-2\.7 {
  font-size: 2.7rem
}

.fs-2\.8 {
  font-size: 2.8rem
}

.fs-2\.9 {
  font-size: 2.9rem
}

.fs-3\.0 {
  font-size: 3rem
}

.fs-3\.1 {
  font-size: 3.1rem
}

.fs-3\.2 {
  font-size: 3.2rem
}

.fw-100 {
  font-weight: 100
}

.fw-200 {
  font-weight: 200
}

.fw-300 {
  font-weight: 300
}

.fw-400 {
  font-weight: 400
}

.fw-500 {
  font-weight: 500
}

.fw-600 {
  font-weight: 600
}

.fw-700 {
  font-weight: 700
}

.fw-800 {
  font-weight: 800
}

.fw-900 {
  font-weight: 900
}

.line-through {
  text-decoration: line-through
}


:root {
  --default-border-radius: 0.8rem;

  --color-primary-foreground: var(--primaryButtonTextColor);
  --color-primary-50: var(--color-neutral-50);
  --color-primary-100: var(--color-neutral-100);
  --color-primary-200: var(--color-neutral-200);
  --color-primary-300: var(--color-neutral-300);
  --color-primary-350: var(--color-neutral-350);
  --color-primary-400: var(--color-neutral-400);
  --color-primary-450: var(--primaryButtonHoverColor);
  --color-primary-500: var(--primaryButtonColor);
}

img,
video {
  border-radius: var(--default-border-radius);
}

.card {
  border-radius: calc(var(--default-border-radius) + 0.1rem);
}

.icon-option {
  background-color: var(--clr-neutral-150);
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 1.1rem;
  border-radius: 1000vmax;
}

.icon-option .icon {
  width: 3.4rem;
  height: 3.4rem;
}

.video-upload-container {
  position: relative;
}

.video-upload-container.has-video::before {
  content: "";
  background-color: #000;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  pointer-events: none;
  transition: var(--transition-default);
}

.video-upload-container.has-video:hover::before {
  opacity: 0.8;
}

.video-upload-container.has-video.no-thumbnail:hover .badge[data-is="add-video-thumbnail"] {
  display: block;
}

.video-upload-container.has-video.has-thumbnail:hover .badge[data-is="remove-video-thumbnail"] {
  display: block;
}

.video-upload-container .badge {
  position: absolute;
  top: 1rem;
  left: 1rem;
  cursor: pointer;
  user-select: none;
  display: none;
}

/********************
*	List
********************/

.list {
  color: var(--clr-neutral-800);
  display: flex;
  flex-direction: column;
}

.list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.list li:not(:first-of-type) {
  border-top: 0.1rem solid var(--clr-neutral-200);
}

.list .icon {
  fill: var(--clr-neutral-800);
  display: flex;
  justify-content: center;
  align-items: center;
  width: 1.4rem;
  height: 1.4rem;
}

.list .icon-default {
  fill: var(--clr-neutral-600);
  background-color: var(--clr-neutral-400);
  padding: 0.4rem;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 100vmax;
  cursor: pointer;
}

.list .icon-danger {
  fill: var(--clr-red-400);
  padding: 0.4rem;
  width: 2rem;
  height: 2rem;
  border: 0.1rem solid var(--clr-red-400);
  border-radius: 100vmax;
  cursor: pointer;
}

.list .icon-danger:hover {
  fill: #fff;
  background-color: var(--clr-red-400);
  transition: var(--transition-default);
}

.notification-list li {
  padding-left: 1rem;
}

.notification-list li a {
  display: flex;
  align-items: center;
  gap: 2rem;
  text-decoration: none;
  width: 100%;
}

.notification-list li:hover {
  background-color: var(--clr-neutral-200);
  cursor: pointer;
}


.notification-list li a .info {
  opacity: 0.4;
}

.notification-list li a .notification-icon {
  --color: #fff;
  --bgColor: var(--clr-neutral-200);
  fill: var(--color) !important;
  background-color: var(--bgColor) !important;
  padding: 0.8rem;
  width: 3.4rem;
  height: 3.4rem;
  border-radius: 1000vmax;
  opacity: 0.3;
}

.notification-list li.new a .notification-icon,
.notification-list li.new a .info {
  opacity: 1;
}

/********************
*	Navigation
********************/

.navigation {
  display: none;
  background-color: var(--sidebarColor);
}

.navigation-brand {
  text-decoration: none;
  font-size: 2.4rem;
  font-weight: 600;
  color: var(--clr-neutral-200);
}

.navigation-menu-icon {
  fill: var(--clr-neutral-200);
  width: 2.5rem;
  height: 2.5rem;
  cursor: pointer;
}

.navigation .flex-1 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}

.navigation-profile {
  min-width: 2.5rem;
}

/********************
*	Sidebar
********************/

.sidebar {
  --flow-spacer: 5rem;
  --width: 25rem;

  background-color: var(--sidebarColor);
  flex-shrink: 0;
  height: 100vh;
  width: 100%;
  max-width: var(--width);
  transition: var(--transition-default);
}

.sidebar-header {

  background-color: var(--sidebarHeaderColor);
  padding: 1.5rem 2.8rem;
}

.sidebar-header img {
  width: 100%;
  max-height: 5rem;
}

.sidebar-brand {
  text-decoration: none;
  font-size: 2.4rem;
  font-weight: 600;
  color: #fff;
}

.sidebar-list {
  margin-top: 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.sidebar-list>li {
  position: relative;
  width: 92%;
}

.sidebar-list li[data-count]::before {
  content: attr(data-count);
  font-size: 1rem;
  font-weight: 500;
  display: flex;
  justify-content: center;
  align-content: center;
  color: #fff;
  background-color: var(--clr-orange-400);
  width: 1.6rem;
  height: 1.6rem;
  padding-top: 0.05rem;
  border-radius: 1000vmax;
  position: absolute;
  top: 1.4rem;
  right: 2rem;
  pointer-events: none;
}

.sidebar-list>li>a {
  font-size: 1.6rem;
  text-decoration: none;
  color: var(--sidebarTextColor);
  display: block;
  gap: 0.2rem;
  flex-direction: column;
  padding: 1.2rem 1.8rem;
  border-radius: var(--default-border-radius);
}

.sidebar-list>li>a .title {
  display: flex;
  gap: 1rem;
  align-items: center;
}

.sidebar-list>li>a:hover {
  color: var(--sidebarTextActiveColor);
}

.sidebar-list>li .icon {
  fill: var(--sidebarTextColor);
  width: 1.5rem;
  height: 1.5rem;
  transition: var(--transition-default);
}

.sidebar-list>li>a:hover .icon {
  fill: var(--sidebarTextActiveColor);
}

.sidebar-list li.active .icon {
  fill: var(--sidebarTextActiveColor);
}

.sidebar-list>li.active>a {
  background-color: #ffffff14;
}

.sidebar-list>li .chevron {
  display: flex;
  fill: var(--sidebarTextColor);
  margin-left: auto;
  width: 1rem;
  height: 1.1rem;
  transform: translateY(0.2rem);
  transition: var(--transition-default);
}

.sidebar-list>li>a .detail {
  font-size: 1.2rem;
  color: var(--sidebarTextColor);
  padding-left: 2.3rem;
  transition: var(--transition-default);
}

.sidebar-list>li>a:hover .detail {
  color: var(--sidebarTextActiveColor);
}

.sidebar-list>li ul {
  background-color: var(--sidebarDropdownColor);
  height: 0;
  overflow: hidden;
  transition: var(--transition-default);
}

.sidebar-list li.active ul {
  height: unset;
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
  border-radius: var(--default-border-radius);
  overflow: auto;
  margin-top: 0.1rem;
}

.sidebar-list li.active>a {
  color: var(--sidebarTextActiveColor);
}


.sidebar-list li.active .chevron {
  fill: var(--sidebarTextActiveColor);
}

.sidebar-list>li.active>a .chevron {
  rotate: 90deg;
}

.sidebar-list>li ul li a {
  font-size: 1.5rem;
  text-decoration: none;
  color: var(--sidebarTextColor);
  display: block;
  padding-left: 4rem;
  padding-right: 2rem;
  padding-top: 0.8rem;
  padding-bottom: 0.8rem;
  position: relative;
  transition: var(--transition-default);
}

.sidebar-list>li ul li a:hover {
  color: var(--sidebarTextActiveColor);
}

.sidebar-list>li ul li.active ::before {
  content: "";
  display: block;
  width: 0.35rem;
  height: 0.35rem;
  background-color: var(--sidebarTextActiveColor);
  border-radius: 1000vmax;
  position: absolute;
  top: 50%;
  transform: translate(-1.6rem, -66%);
}

.sidebar-list>li.separator {
  font-size: 1.7rem;
  color: var(--clr-neutral-500);
  margin-bottom: 1rem;
  padding-top: 1.5rem;
  padding-bottom: 0rem;
  border-bottom: 1px solid var(--sidebarDropdownColor);
  opacity: 0.7;
}

.sidebar-body {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow-y: auto;
}

.sidebar-copyright {
  font-size: 1.2rem;
  font-weight: 300;
  text-align: center;
  color: var(--sidebarTextColor);
  padding-inline: 1rem;
}

/********************
*	Main
********************/

.main-container {
  display: flex;
  background-color: var(--pageBackgroundColor);
}

.main {
  flex-grow: 1;
}

.main-header {
  background-color: var(--pageHeaderBackgroundColor);
  display: flex;
  align-items: center;
  min-height: 6rem;
  padding-inline: 2.4rem;
  padding-block: 1rem;
  border-bottom: 1px solid var(--clr-neutral-200);
}




.main-header .icon.back {
  fill: var(--pageHeaderIconColor);
  padding: 0.9rem;
  width: 3.2rem;
  height: 3.2rem;
  border-radius: var(--default-border-radius);
  cursor: pointer;
}

.main-header .icon.back:hover {
  background-color: var(--clr-neutral-200)
}

.main-header-title {
  font-size: 1.6rem;
  font-weight: 600;
  flex-shrink: 0;
  color: var(--pageHeaderTextColor);
  margin-left: 1rem;
  position: relative;
}


.main-body {
  background-color: var(--pageBackgroundColor);
  padding: 2rem 2.5rem;
  overflow-y: auto;
}


/********************
*	Table 1
********************/

.table-1-container {
  background-color: #fff;
  border-radius: 0.6rem;
  box-shadow: rgba(17, 17, 26, 0.1) 0px 0px 16px;
  overflow: hidden;
}

.table-1-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2rem;
  border-bottom: 0.1rem solid var(--clr-neutral-200);
}

.table-1-header .heading {
  font-size: 1.7rem;
  font-weight: 600;
  color: var(--clr-neutral-700);
}

.table-1-header .button {
  font-size: 1.4rem;
  padding: 0rem;
}

.table-1-header .button:hover {
  text-decoration: underline;
}

.table-1-body table {
  width: 100%;
  border-collapse: collapse;
}

.table-1-body table tbody tr td {
  padding: 1.2rem 2rem;
}

.table-1-body table tbody tr:hover {
  background-color: var(--clr-neutral-100);
}

.table-1-body table tbody tr:not(:last-of-type) td {
  border-bottom: 0.1rem solid var(--clr-neutral-200);
}

.table-1-body table tbody tr td .value,
.table-1-body table tbody tr td .sub {
  display: block;
}

.table-1-body table tbody tr td .value {
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--clr-neutral-700);
}

.table-1-body table tbody tr td .sub {
  font-size: 1.4rem;
  font-weight: 500;
  color: var(--clr-neutral-600);
  margin-top: 0.2rem;
}

.table-1-body tr td .icon {
  fill: var(--clr-neutral-600);
  width: 2rem;
  height: 2rem;
  cursor: pointer;
}

.table-1-body tr td .icon.plus {
  fill: var(--clr-neutral-500);
  width: 1.8rem;
  height: 1.8rem;
  cursor: pointer;
}

.table-1-body tr td .icon.minus {
  fill: var(--clr-neutral-500);
  width: 1.8rem;
  height: 1.8rem;
  cursor: pointer;
  display: none;
}

.table-1-body tr.active td .icon.minus {
  display: block;
}

.table-1-body tr.active td .icon.plus {
  display: none;
}

.table-1-body tr+tr.child {
  display: none;
}

.table-1-body tr.child td>div {
  display: grid;
  grid-template-columns: 50px repeat(auto-fit, minmax(10px, 1fr));
}

.table-1-body tr.child td>div p {
  flex-grow: 1;
  padding: 1rem;
}

.table-1-body tr.active+tr.child {
  display: table-row;
}

.table-1-body .button-group .button-text {
  font-weight: 600;
  font-size: 1.3rem;
  padding: 1rem 2rem;
}

/********************
*	Sheet Table
********************/

.sheet-table-container {
  border-radius: var(--button-border-radius);
  border: 0.1rem solid var(--clr-neutral-200);
  overflow: hidden;
}

table.sheet {
  background-color: #fff;
  width: 100%;
  border-collapse: collapse;
}

table.sheet thead th,
table.sheet tbody td {
  text-align: left;
  min-height: 5.28rem;
}

table.sheet thead th {
  font-weight: 500;
  color: var(--clr-neutral-800);
  background-color: var(--clr-neutral-300);
  padding: 1.4rem 2rem;
  border-bottom: 0.1rem solid var(--clr-neutral-200);
}

table.sheet tbody tr:not(:last-of-type) {
  border-bottom: 0.1rem solid var(--clr-neutral-200);
}

table.sheet tbody tr td:not(:last-of-type) {
  border-right: 0.1rem solid var(--clr-neutral-200);
}

table.sheet tbody tr td:last-of-type {
  padding: 0 1rem;
}

table.sheet tbody td input[type="text"],
table.sheet tbody td select {
  background-color: transparent;
  width: 100%;
  padding: 0.8rem 2rem;
  border: none;
}


/********************
*	Data Table
********************/

.data-table-container {
  background-color: #fff;
}

.data-table-toolbar {
  background-color: var(--pageBackgroundColor);
  display: flex;
  align-items: center;
  padding-bottom: 1rem;
}

.data-table-toolbar .search-section {
  position: relative;
}

.data-table-toolbar .right {
  display: flex;
  gap: 1.2rem;
  margin-left: auto;
}

.data-table-toolbar-section .input-style-1 {
  border-radius: var(--tableFiltersRadius);
}

.data-table-toolbar-section-option.separator {
  margin-right: 2rem;
  position: relative;
}

.data-table-toolbar-section-option.separator::before {
  content: "";
  display: flex;
  background-color: var(--clr-neutral-300);
  width: 0.1rem;
  height: 100%;
  position: absolute;
  top: 0;
  right: -2.1rem;
  pointer-events: none;
}

.data-table-toolbar-section-option {
  position: relative;
}

.data-table-toolbar-section-option .input-style-1 {
  font-size: 1.4rem;
  background-color: #fff;
  padding: 0.9rem 1rem;
}

.data-table-toolbar-section-option select.input-style-1 {
  min-height: unset;
  min-width: 10rem;
}

.data-table-toolbar-section-option .input-style-1-label {
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--clr-neutral-600);
  margin-bottom: 0;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  transform: translate(0.5rem, -1.7rem);
}

.data-table-toolbar-section-option .input-style-2-label {
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--clr-neutral-700);
  margin-bottom: 0;
}

.data-table-toolbar .search-section .icon {
  fill: var(--clr-neutral-400);
  width: 1.5rem;
  height: 1.5rem;
  position: absolute;
  top: 51%;
  left: 1.1rem;
  transform: translateY(-50%);
  transition: var(--transition-default);
}

.data-table-toolbar .search-section .icon.cross-icon {
  width: 1.3rem;
  height: 1.3rem;
  right: 1.1rem;
  left: unset;
  cursor: pointer;
}

.data-table-toolbar .search-section .icon.cross-icon:hover {
  fill: var(--clr-primary-400);
}

.data-table-toolbar .search {
  padding-left: 4rem;
  height: 100%;
}

.data-table-toolbar .button {
  font-size: 1.4rem;
  white-space: nowrap;
  padding: 0.8rem 1.6rem;
}

.data-table-tabs {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  list-style: none;
  background-color: transparent;
  padding: 0.2rem 0.2rem;
  border-radius: var(--tableFiltersRadius);
}

.data-table-tabs li a {
  font-size: 1.4rem;
  font-weight: 400;
  text-decoration: none;
  color: var(--clr-neutral-900);
  background-color: var(--clr-neutral-300);
  display: block;
  padding: 0.6rem 2rem;
  border-radius: var(--default-border-radius);
}

.data-table-tabs li.active a {
  color: #fff;
  background-color: var(--sidebarColor);
}


.data-table {
  width: 100%;
  text-align: left;
  border-collapse: separate;
  border-spacing: 0rem 0.5rem;
  border: 0.1rem solid var(--clr-neutral-300);
  border-radius: var(--default-border-radius);
  overflow: hidden;
}

.data-table.primary thead th {
  color: var(--clr-neutral-100);
  background-color: var(--clr-primary-400);
}

.data-table thead {
  transform: translateY(-0.6rem);
}

.data-table thead.sticky {
  top: -1.5rem;
}

.data-table thead th {
  color: var(--tableHeaderTextColor);
  background-color: var(--clr-neutral-100);
}

.data-table thead th {
  font-size: 1.4rem;
  font-weight: 500;
  padding: 1.4rem 2rem;
}

.data-table tbody td {
  font-size: 1.4rem;
  font-weight: 500;
  padding: 0.8rem 2rem;
}


.data-table tbody tr td.d-table-cell:last-of-type {
  display: table-cell;

}

.data-table tbody tr:not(:last-of-type) td {
  border-bottom: 0.1rem solid var(--clr-neutral-200);
}


.data-table tr.collapsable {
  display: none;
  background-color: var(--clr-neutral-200);
}

.data-table tr.active+.collapsable {
  display: table-row;
}

.data-table tbody td .excerpt {
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
  max-width: 20rem;
  overflow: hidden;
}

.data-table tbody td .excerpt-short {
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
  max-width: 12rem;
  overflow: hidden;
}

.data-table .button-group .button {
  flex-shrink: 0;
}

.data-table .button-group .button-text {
  font-weight: 600;
  font-size: 1.3rem;
  padding: 0.6rem 1.6rem;
}

.data-table .link-button {
  color: var(--clr-mariner-400);
  text-decoration: underline;
}

.data-table-pagination-container {
  padding: 1rem 0rem;
}

.data-table-pagination {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.data-table-pagination.hide {
  display: none;
}

.data-table-pagination li {
  font-size: 1.4rem;
  font-weight: 500;
  text-align: center;
  color: var(--clr-neutral-600);
  background-color: transparent;
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 3rem;
  height: 3rem;
  padding: 0.5rem;
  border: 0.1rem solid transparent;
  border-radius: 0.4rem;
  cursor: pointer;
  user-select: none;
}

.data-table-pagination li:first-of-type,
.data-table-pagination li:last-of-type,
.data-table-pagination li:first-of-type.active,
.data-table-pagination li:last-of-type.active {
  background-color: transparent;
  border-color: var(--clr-neutral-500);
}

.data-table-pagination li.active {
  color: #fff;
  background-color: var(--clr-neutral-700);
}

.data-table-pagination li .icon {
  fill: var(--clr-neutral-600);
  width: 1rem;
  height: 1rem;
}

.data-table-pagination li:first-of-type .icon {
  transform: rotate(180deg);
}

.data-table-pagination li.hide {
  display: none;
}

.data-table-footer {
  display: flex;
  align-items: center;
  padding-inline: 2rem;
}

.data-table-footer .left {
  width: 70%;
}

.data-table-footer .right {
  width: 30%;
}

.data-table-footer .right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 2rem;
}

.data-table-footer .row-count-status {
  font-size: 1.5rem;
  margin-top: 2rem;
}


/********************
*	Eloader
********************/

.e-loader {
  position: relative;
  overflow: hidden;
}

.e-loader::after {
  content: "";
  display: flex;
  background-color: rgba(255, 255, 255, 0.9);
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}

.e-loader::before {
  content: "";
  background-color: transparent;
  display: flex;
  width: 5rem;
  height: 5rem;
  border-radius: 50%;
  border: 6px solid var(--primaryButtonColor);
  border-color: var(--primaryButtonColor) transparent var(--primaryButtonColor) transparent;
  border-radius: 1000vmax;
  position: absolute;
  top: calc(50% - 2.8rem);
  left: calc(50% - 2.8rem);
  transform: translate(-50%, -50%);
  animation: lds-dual-ring 1.2s linear infinite;
  z-index: 1;
}

.e-loader.position-bottom::before {
  top: unset;
  bottom: 1rem;
}

@keyframes lds-dual-ring {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

form .form-group:not(:first-of-type) {
  margin-top: 2rem;
}

.form-group {
  position: relative;
}

.form-group.has-right-icon .input-style-1 {
  padding-right: 3rem;
}

.form-group.has-left-icon .input-style-1 {
  padding-left: 4rem;
}

.form-group-icon {
  fill: var(--clr-neutral-400);
  width: 2.1rem;
  height: 2.1rem;
  position: absolute;
}

.form-group-icon.can-interact:hover {
  fill: var(--clr-primary-400);
  cursor: pointer;
  transition: var(--transition-default);
}

.form-group-icon.right {
  right: 1.5rem;
  top: 50%;
  transform: translate(0%, -50%);
}

.form-group-icon.left {
  left: 1.5rem;
  top: 50%;
  transform: translate(0%, -50%);
}

.form-group.inline-label label {
  font-weight: 500;
  color: var(--clr-neutral-600);
  position: absolute;
  top: 50%;
  left: 2rem;
  transform: translateY(-50%);
  opacity: 0.7;
  pointer-events: none;
}


/********************
*	Account
********************/

/* .account-container {
	min-height: 100%;
}

.account-home-icon {
	background-color: var(--clr-neutral-800);
	display: block;
	padding: 1.2rem;
	border-radius: 1000vmax;
	position: absolute;
	left: 2.5rem;
	top: 2.5rem;
}

.account-home-icon svg {
	fill: #fff;
	width: 2.6rem;
	height: 2.6rem;
}

.account-container .logo {
	max-width: 22rem;
	margin-bottom: 2rem;
}

.account-title {
	font-size: 3rem;
	font-weight: 700;
	color: var(--clr-neutral-700);
	margin-bottom: 3rem;
}

.account-description {
	text-align: center;
	max-width: 35rem;
	margin-top: 1rem;
	margin-bottom: 3rem;
}

.account-container .flex-1 {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	min-height: 100%;
}

.account-form {
	width: 100%;
	max-width: 43rem;
}

.account-form .section-divider {
	padding-top: 3rem;
	padding-bottom: 3rem;
}

.account-form-lower-link {
	font-size: 1.5rem;
	font-weight: 500;
	text-decoration: none;
	color: var(--clr-primary-400);
}

.account-form-lower-link:hover {
	text-decoration: underline;
}

.account-bg {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
	filter: grayscale(1);
}

.account-container>.grid {
	position: relative;
}

.account-container .grid:last-of-type {
	color: #fff;
	position: relative;
	height: 100vh;
}

.account-container .grid:last-of-type::after {
	content: "";
	background-color: inherit;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	opacity: inherit;
}

.account-container .grid:last-of-type .info {
	padding: 0 5rem;
	width: 100%;
	position: absolute;
	bottom: 2rem;
	left: 50%;
	z-index: 1;
	transform: translate(-50%, 0%);
}

.account-container .grid:last-of-type .info .heading {
	font-size: 3.6rem;
	font-weight: 600;
}

.account-container .grid:last-of-type .info .text {
	font-size: 1.8rem;
	line-height: 1.6;
	margin-top: 1rem;
}

.account-container-msg {
	text-align: center;
	font-size: 1.4rem;
	color: var(--clr-red-400);
	width: 100%;
	max-width: 40rem;
	padding: 0 1rem;
	position: absolute;
	bottom: 2rem;
	left: 50%;
	transform: translateX(-50%);
} */


@media (max-width: 992px) {



  .navigation {
    display: flex;
    position: relative;
    z-index: 91;
  }

  .sidebar {
    transform: translateX(-100%);
  }

  .sidebar.active {
    position: relative;
    z-index: 91;
    transform: translateX(0%);
  }

  .sidebar-header {
    display: none;
  }

  .sidebar-list {
    margin-top: 0;
  }

  .main {
    width: 100%;
    position: absolute;
    left: 0;
    right: 0;
  }

  .main-header {
    padding-right: 2rem;
  }

  .main-shortcuts .user-avatar {
    display: none;
  }

  .main-sidebar-grids {
    flex-wrap: wrap;
  }

  .main-sidebar-grids>.grid:first-of-type,
  .main-sidebar-grids>.grid:last-of-type {
    width: 100%;
  }

  .image-icon-box-container {
    flex-wrap: wrap;
  }

  .image-icon-box-container .image-icon-box {
    width: 100%;
  }

  .cards-4 .card,
  .cards-5 .card {
    width: calc(50% - 1.5rem);
  }

  .grids-3,
  .grids-4,
  .grids-5,
  .grids-10 {
    flex-wrap: wrap;
  }

  .grids-3 .grid,
  .grids-4 .grid,
  .grids-5 .grid,
  .grids-10 .grid {
    width: 100%;
  }

  .form-section-grids {
    flex-direction: column;
  }

  .form-section-grids>.grid:first-of-type,
  .form-section-grids>.grid:last-of-type {
    width: 100%;
    max-width: 100%;
  }

  .account-container .flex-1 {
    min-height: unset;
  }

  .account-container>.grid {
    min-height: 100vh;
  }

}

/* =============================================
   Chat Component
   ============================================= */

/* Main chat container */
.chat {
  display: flex;
  height: calc(100vh - 12rem);
  background-color: white;
  border: 0.1rem solid var(--color-neutral-200);
  border-radius: var(--default-border-radius);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}

/* =============================================
   Sidebar — Contacts & Online Users
   ============================================= */

.chat-sidebar {
  width: 32rem;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  border-right: 0.1rem solid var(--color-neutral-200);
  background-color: white;
}

.chat-sidebar-header {
  padding: 1.6rem;
  border-bottom: 0.1rem solid var(--color-neutral-100);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.chat-sidebar-title {
  /* Use .heading-xs with fw-700 in markup */
  margin: 0;
}

.chat-sidebar-actions {
  display: flex;
  gap: 0.6rem;
  flex-shrink: 0;
}

/* Search field inside sidebar */
.chat-search {
  padding: 1rem 1.6rem;
  border-bottom: 0.1rem solid var(--color-neutral-100);
}

.chat-search-input {
  position: relative;
}

.chat-search-input input {
  width: 100%;
  padding: 0.8rem 1rem 0.8rem 3.4rem;
  border: 0.1rem solid var(--color-neutral-200);
  border-radius: var(--default-border-radius);
  background-color: var(--color-neutral-50);
  font-size: 1.4rem;
  color: var(--color-neutral-800);
  transition: border-color 120ms ease, box-shadow 120ms ease;
  outline: none;
}

.chat-search-input input:focus {
  border-color: var(--color-primary-400);
  background-color: white;
  box-shadow: 0 0 0 0.3rem var(--color-neutral-200);
}

.chat-search-input input::placeholder {
  color: var(--color-neutral-400);
}

.chat-search-icon {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-neutral-400);
  pointer-events: none;
}

.chat-search-icon .icon {
  width: 1.6rem;
  height: 1.6rem;
}

/* Contacts list */
.chat-contacts {
  flex: 1;
  overflow-y: auto;
}

.chat-contacts::-webkit-scrollbar {
  width: 0.4rem;
}

.chat-contacts::-webkit-scrollbar-track {
  background: transparent;
}

.chat-contacts::-webkit-scrollbar-thumb {
  background-color: var(--color-neutral-200);
  border-radius: 0.2rem;
}

.chat-contacts-group {
  padding: 1.2rem 1.6rem 0.4rem;
}

.chat-contacts-group-label {
  /* Use .text-xs fw-600 text-muted in markup */
  text-transform: uppercase;
  letter-spacing: 0.06rem;
}

/* Individual contact item */
.chat-contact {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  padding: 1rem 1.6rem;
  cursor: pointer;
  transition: background-color 120ms ease;
  text-decoration: none;
  color: inherit;
}

.chat-contact:hover {
  background-color: var(--color-neutral-50);
}

.chat-contact.active {
  background-color: var(--color-primary-50);
}

.chat-contact.active .chat-contact-name {
  color: var(--color-primary-500);
}

.chat-contact-avatar {
  position: relative;
  flex-shrink: 0;
}

.chat-contact-avatar img {
  width: 4.4rem;
  height: 4.4rem;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

.chat-contact-avatar-placeholder {
  width: 4.4rem;
  height: 4.4rem;
  border-radius: 50%;
  background-color: var(--color-primary-100);
  color: var(--color-primary-500);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  font-weight: 600;
}

/* Online status dot */
.chat-status-dot {
  position: absolute;
  bottom: 0.1rem;
  right: 0.1rem;
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  border: 0.2rem solid white;
}

.chat-status-dot.online {
  background-color: var(--color-green-500);
}

.chat-status-dot.away {
  background-color: var(--color-orange-400);
}

.chat-status-dot.offline {
  background-color: var(--color-neutral-300);
}

.chat-status-dot.busy {
  background-color: var(--color-red-500);
}

.chat-contact-info {
  flex: 1;
  min-width: 0;
}

.chat-contact-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  margin-bottom: 0.3rem;
}

.chat-contact-name {
  /* Use .text-sm fw-600 in markup */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat-contact-time {
  /* Use .text-xs text-muted in markup */
  flex-shrink: 0;
}

.chat-contact-preview {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.chat-contact-last-msg {
  /* Use .text-xs text-muted in markup */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}

.chat-contact-badge {
  flex-shrink: 0;
  background-color: var(--color-primary-500);
  color: white;
  border-radius: 10rem;
  font-size: 1rem;
  font-weight: 600;
  min-width: 1.8rem;
  height: 1.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 0.5rem;
}

/* Online users section at bottom of sidebar */
.chat-online-section {
  border-top: 0.1rem solid var(--color-neutral-100);
  padding: 1.2rem 1.6rem;
}

.chat-online-section-title {
  /* Use .text-xs fw-600 text-muted in markup */
  text-transform: uppercase;
  letter-spacing: 0.06rem;
  margin-bottom: 1rem;
}

.chat-online-users {
  display: flex;
  gap: 0.8rem;
  overflow-x: auto;
  padding-bottom: 0.4rem;
}

.chat-online-users::-webkit-scrollbar {
  height: 0.3rem;
}

.chat-online-users::-webkit-scrollbar-track {
  background: transparent;
}

.chat-online-users::-webkit-scrollbar-thumb {
  background-color: var(--color-neutral-200);
  border-radius: 0.2rem;
}

.chat-online-user {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  cursor: pointer;
  flex-shrink: 0;
}

.chat-online-user-avatar {
  position: relative;
}

.chat-online-user-avatar img {
  width: 3.6rem;
  height: 3.6rem;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

.chat-online-user-avatar-placeholder {
  width: 3.6rem;
  height: 3.6rem;
  border-radius: 50%;
  background-color: var(--color-primary-100);
  color: var(--color-primary-500);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  font-weight: 600;
}

.chat-online-user-name {
  /* Use .text-xs in markup */
  text-align: center;
  max-width: 5rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* =============================================
   Main Chat Area
   ============================================= */

.chat-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background-color: var(--color-neutral-50);
}

/* Chat header — active contact info + actions */
.chat-header {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  padding: 1.2rem 2rem;
  background-color: white;
  border-bottom: 0.1rem solid var(--color-neutral-200);
  flex-shrink: 0;
}

.chat-header-avatar {
  position: relative;
  flex-shrink: 0;
}

.chat-header-avatar img {
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

.chat-header-avatar-placeholder {
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  background-color: var(--color-primary-100);
  color: var(--color-primary-500);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: 600;
}

.chat-header-info {
  flex: 1;
  min-width: 0;
}

.chat-header-name {
  /* Use .text-md fw-600 in markup */
  margin: 0 0 0.2rem;
}

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

.chat-header-status-dot {
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 50%;
  flex-shrink: 0;
}

.chat-header-status-dot.online {
  background-color: var(--color-green-500);
}

.chat-header-status-dot.away {
  background-color: var(--color-orange-400);
}

.chat-header-status-dot.offline {
  background-color: var(--color-neutral-400);
}

.chat-header-status-dot.busy {
  background-color: var(--color-red-500);
}

.chat-header-status-text {
  /* Use .text-xs text-muted in markup */
}

.chat-header-actions {
  display: flex;
  gap: 0.4rem;
  flex-shrink: 0;
}

/* =============================================
   Messages Area
   ============================================= */

.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.chat-messages::-webkit-scrollbar {
  width: 0.4rem;
}

.chat-messages::-webkit-scrollbar-track {
  background: transparent;
}

.chat-messages::-webkit-scrollbar-thumb {
  background-color: var(--color-neutral-200);
  border-radius: 0.2rem;
}

/* Date separator */
.chat-date-separator {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  margin: 1.6rem 0;
}

.chat-date-separator::before,
.chat-date-separator::after {
  content: '';
  flex: 1;
  height: 0.1rem;
  background-color: var(--color-neutral-200);
}

.chat-date-separator-text {
  /* Use .text-xs text-muted fw-500 in markup */
  white-space: nowrap;
  padding: 0.4rem 1rem;
  background-color: var(--color-neutral-200);
  border-radius: 10rem;
}

/* Message row */
.chat-message {
  display: flex;
  gap: 0.8rem;
  max-width: 75%;
  margin-bottom: 0.4rem;
  position: relative;
}

/* Hover action toolbar */
.chat-message-actions {
  position: absolute;
  top: 0;
  display: flex;
  align-items: center;
  gap: 0.2rem;
  background-color: white;
  border: 0.1rem solid var(--color-neutral-200);
  border-radius: 2rem;
  padding: 0.3rem 0.4rem;
  box-shadow: var(--shadow-sm);
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms ease;
  z-index: 10;
  white-space: nowrap;
}

.chat-message-received .chat-message-actions {
  left: calc(100% + 0.6rem);
}

.chat-message-sent .chat-message-actions {
  right: calc(100% + 0.6rem);
}

/* Invisible bridge to keep hover active across the gap */
.chat-message::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 4rem;
  pointer-events: auto;
}

.chat-message-received::after {
  left: 100%;
}

.chat-message-sent::after {
  right: 100%;
}

.chat-message:hover .chat-message-actions,
.chat-message-actions:hover,
.chat-message-actions:focus-within {
  opacity: 1;
  pointer-events: auto;
}

.chat-message-action-btn {
  width: 2.8rem;
  height: 2.8rem;
  border-radius: 50%;
  border: none;
  background: none;
  cursor: pointer;
  color: var(--color-neutral-500);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 120ms ease, color 120ms ease;
  padding: 0;
  font-size: 1.4rem;
}

.chat-message-action-btn:hover {
  background-color: var(--color-neutral-100);
  color: var(--color-neutral-700);
}

.chat-message-action-btn .icon {
  width: 1.6rem;
  height: 1.6rem;
}

.chat-message+.chat-message-sent,
.chat-message-sent+.chat-message {
  margin-top: 0.8rem;
}

.chat-message-received {
  align-self: flex-start;
}

.chat-message-sent {
  align-self: flex-end;
  flex-direction: row-reverse;
}

.chat-message-avatar {
  flex-shrink: 0;
  align-self: flex-end;
}

.chat-message-avatar img {
  width: 3.2rem;
  height: 3.2rem;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

.chat-message-avatar-placeholder {
  width: 3.2rem;
  height: 3.2rem;
  border-radius: 50%;
  background-color: var(--color-primary-100);
  color: var(--color-primary-500);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  font-weight: 600;
}

.chat-message-body {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-width: 0;
}

.chat-message-sent .chat-message-body {
  align-items: flex-end;
}

.chat-message-sender {
  /* Use .text-xs fw-600 in markup */
  padding: 0 0.4rem;
}

/* Message bubble */
.chat-bubble {
  padding: 1rem 1.4rem;
  border-radius: 1.6rem;
  word-break: break-word;
  position: relative;
}

.chat-bubble-received {
  background-color: white;
  color: var(--color-neutral-800);
  border: 0.1rem solid var(--color-neutral-200);
  border-bottom-left-radius: 0.4rem;
}

.chat-bubble-sent {
  background-color: var(--color-primary-500);
  color: var(--color-primary-foreground);
  border-bottom-right-radius: 0.4rem;
}

.chat-bubble-text {
  /* Use .text-sm in markup */
  line-height: 1.55;
}

.chat-bubble-time {
  /* Use .text-xs in markup */
  margin-top: 0.4rem;
  padding: 0 0.2rem;
}

.chat-bubble-sent .chat-bubble-time {
  color: rgba(255, 255, 255, 0.7);
}

.chat-bubble-received .chat-bubble-time {
  color: var(--color-neutral-400);
}

/* Read receipt */
.chat-message-status {
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.chat-message-status .icon {
  width: 1.4rem;
  height: 1.4rem;
}

.chat-message-status.read {
  color: var(--color-blue-500);
}

.chat-message-status.delivered {
  color: var(--color-neutral-400);
}

/* Image attachment in bubble */
.chat-bubble-image {
  border-radius: 1.2rem;
  overflow: hidden;
  max-width: 24rem;
  cursor: pointer;
}

.chat-bubble-image img {
  width: 100%;
  height: auto;
  display: block;
  transition: opacity 120ms ease;
}

.chat-bubble-image img:hover {
  opacity: 0.92;
}

/* File attachment in bubble */
.chat-bubble-file {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.4rem;
  background-color: white;
  border: 0.1rem solid var(--color-neutral-200);
  border-radius: 1.2rem;
  min-width: 22rem;
}

.chat-bubble-sent .chat-bubble-file {
  background-color: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.2);
}

.chat-bubble-file-icon {
  width: 3.6rem;
  height: 3.6rem;
  border-radius: 0.8rem;
  background-color: var(--color-primary-100);
  color: var(--color-primary-500);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.chat-bubble-sent .chat-bubble-file-icon {
  background-color: rgba(255, 255, 255, 0.2);
  color: white;
}

.chat-bubble-file-icon .icon {
  width: 1.8rem;
  height: 1.8rem;
}

.chat-bubble-file-info {
  flex: 1;
  min-width: 0;
}

.chat-bubble-file-name {
  /* Use .text-sm fw-500 in markup */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat-bubble-file-size {
  /* Use .text-xs text-muted in markup */
}

.chat-bubble-sent .chat-bubble-file-size {
  color: rgba(255, 255, 255, 0.7);
}

/* Typing indicator */
.chat-typing-indicator {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.8rem 1.4rem;
  align-self: flex-start;
}

.chat-typing-dots {
  display: flex;
  gap: 0.4rem;
  align-items: center;
}

.chat-typing-dot {
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 50%;
  background-color: var(--color-neutral-400);
  animation: chat-typing-bounce 1.2s infinite ease-in-out;
}

.chat-typing-dot:nth-child(1) {
  animation-delay: 0s;
}

.chat-typing-dot:nth-child(2) {
  animation-delay: 0.2s;
}

.chat-typing-dot:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes chat-typing-bounce {

  0%,
  80%,
  100% {
    transform: scale(0.8);
    opacity: 0.5;
  }

  40% {
    transform: scale(1.1);
    opacity: 1;
  }
}

.chat-typing-text {
  /* Use .text-xs text-muted in markup */
}

/* =============================================
   Input Area
   ============================================= */

.chat-input-area {
  padding: 1.4rem 2rem;
  background-color: white;
  border-top: 0.1rem solid var(--color-neutral-200);
  flex-shrink: 0;
}

.chat-reply-preview {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.8rem 1.2rem;
  margin-bottom: 0.8rem;
  background: var(--color-neutral-50);
  border-left: 0.3rem solid var(--color-primary-500);
  border-radius: 0 0.6rem 0.6rem 0;
  font-size: 1.3rem;
  color: var(--color-neutral-600);
}

/* ── Deleted message placeholder ── */
.chat-bubble-deleted {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 1.2rem;
  border-radius: 1.2rem;
  border: 0.1rem dashed var(--color-neutral-300);
  background: transparent;
  color: var(--color-neutral-400);
  font-style: italic;
  font-size: 1.3rem;
  user-select: none;
}

/* ── Edited label ── */
.chat-edited-label {
  font-style: italic;
  opacity: 0.6;
}

/* ── Reaction pills ── */
.chat-message-reactions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.4rem;
}

.chat-message-sent .chat-message-reactions {
  justify-content: flex-end;
}

.chat-reaction-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2rem 0.7rem;
  border-radius: 10rem;
  border: 0.1rem solid var(--color-neutral-200);
  background: var(--color-surface, #fff);
  cursor: pointer;
  font-size: 1.4rem;
  line-height: 1;
  transition: background 120ms ease, border-color 120ms ease;
}

.chat-reaction-pill:hover {
  background: var(--color-neutral-100);
  border-color: var(--color-neutral-300);
}

.chat-reaction-pill.has-reacted {
  background: color-mix(in srgb, var(--color-primary-500) 12%, transparent);
  border-color: var(--color-primary-400);
}

.chat-reaction-count {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--color-neutral-600);
}

/* ── Reaction emoji picker ── */
.chat-reaction-picker {
  position: fixed;
  z-index: 1000;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.2rem;
  padding: 0.8rem;
  background: var(--color-surface, #fff);
  border: 0.1rem solid var(--color-neutral-200);
  border-radius: 1rem;
  box-shadow: 0 0.8rem 2.4rem rgba(0, 0, 0, .12);
}

.chat-reaction-emoji-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.6rem;
  height: 3.6rem;
  font-size: 1.8rem;
  border: none;
  background: transparent;
  border-radius: 0.6rem;
  cursor: pointer;
  transition: background 100ms ease;
}

.chat-reaction-emoji-btn:hover {
  background: var(--color-neutral-100);
}

/* ── Inline edit ── */
.chat-edit-field {
  width: 100%;
  min-width: 18rem;
  padding: 0.6rem 0.8rem;
  border: 0.1rem solid var(--color-primary-400);
  border-radius: 0.6rem;
  background: var(--color-surface, #fff);
  font-size: 1.4rem;
  line-height: 1.5;
  resize: none;
  outline: none;
  box-sizing: border-box;
}

.chat-edit-actions {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 0.5rem;
}

.chat-reply-quote {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.9rem;
  margin-bottom: 0.4rem;
  border-radius: 0.6rem;
  border-left: 0.25rem solid var(--color-primary-400);
  opacity: 0.85;
}

.chat-reply-quote-sent {
  background: color-mix(in srgb, var(--color-primary-500) 15%, transparent);
  border-color: var(--color-primary-500);
  align-self: flex-end;
}

.chat-reply-quote-received {
  background: var(--color-neutral-100);
  border-color: var(--color-neutral-400);
}

.chat-reply-quote-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--color-neutral-600);
  max-width: 26rem;
}

.chat-attachment-preview {
  display: flex;
  gap: 0.8rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.chat-attachment-item {
  position: relative;
  border: 0.1rem solid var(--color-neutral-200);
  border-radius: 0.8rem;
  padding: 0.8rem 1rem;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  background-color: var(--color-neutral-50);
}

.chat-attachment-item-name {
  /* Use .text-xs in markup */
  max-width: 12rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat-attachment-remove {
  position: absolute;
  top: -0.6rem;
  right: -0.6rem;
  width: 1.8rem;
  height: 1.8rem;
  border-radius: 50%;
  background-color: var(--color-neutral-600);
  color: white;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background-color 120ms ease;
}

.chat-attachment-remove:hover {
  background-color: var(--color-neutral-800);
}

.chat-attachment-remove .icon {
  width: 1rem;
  height: 1rem;
}

.chat-input-row {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.chat-input-field {
  flex: 1;
  display: flex;
  align-items: center;
  border: 0.1rem solid var(--color-neutral-200);
  border-radius: 2.4rem;
  background-color: var(--color-neutral-50);
  padding: 0.8rem 1.4rem;
  gap: 0.6rem;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}

.chat-input-field:focus-within {
  border-color: var(--color-primary-400);
  background-color: white;
  box-shadow: 0 0 0 0.3rem var(--color-neutral-100);
}

.chat-input-field textarea {
  flex: 1;
  border: none;
  background: none;
  outline: none;
  resize: none;
  font-size: 1.4rem;
  color: var(--color-neutral-800);
  line-height: 1.5;
  max-height: 12rem;
  min-height: 2.2rem;
  padding: 0;
  overflow-y: auto;
  font-family: inherit;
}

.chat-input-field textarea::placeholder {
  color: var(--color-neutral-400);
}

.chat-input-actions {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  flex-shrink: 0;
}

.chat-send-btn {
  flex-shrink: 0;
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  background-color: var(--color-primary-500);
  color: var(--color-primary-foreground);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 120ms ease, transform 120ms ease;
  padding: 0;
}

.chat-send-btn:hover {
  background-color: var(--color-primary-450);
}

.chat-send-btn:active {
  transform: scale(0.94);
}

.chat-send-btn .icon {
  width: 1.8rem;
  height: 1.8rem;
}

/* Emoji panel */
.chat-emoji-panel {
  position: absolute;
  bottom: 7.6rem;
  right: 2rem;
  background-color: white;
  border: 0.1rem solid var(--color-neutral-200);
  border-radius: var(--default-border-radius);
  box-shadow: var(--shadow-lg);
  padding: 1.2rem;
  z-index: 100;
  width: 32rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(0.8rem);
  transition: opacity 160ms ease, visibility 160ms ease, transform 160ms ease;
}

.chat-emoji-panel.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.chat-emoji-panel-tabs {
  display: flex;
  gap: 0.4rem;
  margin-bottom: 1rem;
  border-bottom: 0.1rem solid var(--color-neutral-100);
  padding-bottom: 0.8rem;
}

.chat-emoji-tab {
  padding: 0.4rem 0.8rem;
  border-radius: 0.6rem;
  border: none;
  background: none;
  cursor: pointer;
  font-size: 1.4rem;
  transition: background-color 120ms ease;
}

.chat-emoji-tab:hover {
  background-color: var(--color-neutral-100);
}

.chat-emoji-tab.active {
  background-color: var(--color-primary-100);
}

.chat-emoji-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 0.2rem;
}

.chat-emoji-btn {
  width: 3.6rem;
  height: 3.6rem;
  border-radius: 0.6rem;
  border: none;
  background: none;
  cursor: pointer;
  font-size: 1.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 120ms ease, transform 120ms ease;
}

.chat-emoji-btn:hover {
  background-color: var(--color-neutral-100);
  transform: scale(1.2);
}

/* =============================================
   Right Info Panel (optional)
   ============================================= */

.chat-info-panel {
  width: 28rem;
  flex-shrink: 0;
  border-left: 0.1rem solid var(--color-neutral-200);
  background-color: white;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.chat-info-panel::-webkit-scrollbar {
  width: 0.4rem;
}

.chat-info-panel::-webkit-scrollbar-thumb {
  background-color: var(--color-neutral-200);
  border-radius: 0.2rem;
}

.chat-info-header {
  padding: 1.6rem;
  border-bottom: 0.1rem solid var(--color-neutral-100);
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 6.48rem;
}

.chat-info-profile {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2rem 1.6rem;
  border-bottom: 0.1rem solid var(--color-neutral-100);
}

.chat-info-profile img {
  width: 7.2rem;
  height: 7.2rem;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 1.2rem;
}

.chat-info-profile-placeholder {
  width: 7.2rem;
  height: 7.2rem;
  border-radius: 50%;
  background-color: var(--color-primary-100);
  color: var(--color-primary-500);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.4rem;
  font-weight: 600;
  margin-bottom: 1.2rem;
}

.chat-info-name {
  /* Use .heading-xs fw-700 in markup */
  margin: 0 0 0.4rem;
  text-align: center;
}

.chat-info-meta {
  /* Use .text-sm text-muted in markup */
  text-align: center;
}

.chat-info-section {
  padding: 1.6rem;
  border-bottom: 0.1rem solid var(--color-neutral-100);
}

.chat-info-section:last-child {
  border-bottom: none;
}

.chat-info-section-title {
  /* Use .text-xs fw-600 text-muted in markup */
  text-transform: uppercase;
  letter-spacing: 0.06rem;
  margin-bottom: 1rem;
}

.chat-info-media-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.4rem;
}

.chat-info-media-item {
  aspect-ratio: 1;
  border-radius: 0.6rem;
  overflow: hidden;
  cursor: pointer;
}

.chat-info-media-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 120ms ease;
}

.chat-info-media-item img:hover {
  opacity: 0.85;
}

/* =============================================
   Empty / No Chat Selected State
   ============================================= */

.chat-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.6rem;
  background-color: var(--color-neutral-50);
  padding: 4rem;
  text-align: center;
}

.chat-empty-icon {
  width: 7.2rem;
  height: 7.2rem;
  border-radius: 50%;
  background-color: var(--color-primary-100);
  color: var(--color-primary-500);
  display: flex;
  align-items: center;
  justify-content: center;
}

.chat-empty-icon .icon {
  width: 3.6rem;
  height: 3.6rem;
}

.chat-empty-title {
  /* Use .heading-xs fw-600 in markup */
  margin: 0;
}

.chat-empty-text {
  /* Use .text-sm text-muted in markup */
  margin: 0;
  max-width: 28rem;
}

/* =============================================
   Responsive
   ============================================= */

@media (max-width: 1100px) {
  .chat-info-panel {
    display: none;
  }
}

@media (max-width: 768px) {
  .chat {
    height: 100vh;
    border-radius: 0;
  }

  .chat-sidebar {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 10;
    transform: translateX(0);
    transition: transform 240ms ease;
  }

  .chat-sidebar.hidden {
    transform: translateX(-100%);
  }

  .chat-main {
    width: 100%;
  }
}


.captcha {
  display: inline-flex;
  flex-direction: column;
  gap: 1.2rem;
}

.captcha-challenge {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 1.4rem 1.6rem;
  background: var(--color-neutral-50);
  border: 0.15rem solid var(--color-neutral-200);
  border-radius: 0.8rem;
  user-select: none;
}

.captcha-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 4rem;
  height: 4rem;
  padding: 0 1rem;
  background: white;
  border: 0.15rem solid var(--color-neutral-300);
  border-radius: 0.6rem;
  font-size: 1.8rem;
  font-weight: 600;
  color: var(--color-neutral-800);
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
}

.captcha-num::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(47deg,
      transparent,
      transparent 0.3rem,
      var(--color-neutral-100) 0.3rem,
      var(--color-neutral-100) 0.4rem);
  pointer-events: none;
}

.captcha-operator {
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-neutral-500);
  line-height: 1;
}

.captcha-equals {
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-neutral-400);
  line-height: 1;
}

.captcha-question {
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-neutral-400);
}

.captcha-controls {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.captcha-input {
  width: 10rem;
  height: 4rem;
  padding: 0 1.2rem;
  font-size: 1.6rem;
  font-weight: 500;
  color: var(--color-neutral-900);
  background: white;
  border: 0.15rem solid var(--color-neutral-300);
  border-radius: 0.6rem;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
  font-family: inherit;
}

.captcha-input:focus {
  border-color: var(--color-primary-500);
  box-shadow: 0 0 0 0.3rem var(--color-primary-100);
}

.captcha-input.captcha-valid {
  border-color: var(--color-green-500);
  box-shadow: 0 0 0 0.3rem var(--color-green-100);
}

.captcha-input.captcha-invalid {
  border-color: var(--color-red-400);
  box-shadow: 0 0 0 0.3rem var(--color-red-100);
}

.captcha-refresh {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.6rem;
  height: 3.6rem;
  background: transparent;
  border: 0.15rem solid var(--color-neutral-200);
  border-radius: 0.6rem;
  color: var(--color-neutral-500);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.3s;
  flex-shrink: 0;
}

.captcha-refresh:hover {
  background: var(--color-neutral-100);
  border-color: var(--color-neutral-300);
  color: var(--color-neutral-700);
}

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

.captcha-refresh svg {
  width: 1.6rem;
  height: 1.6rem;
}

.captcha-message {
  font-size: 1.3rem;
  font-weight: 500;
  min-height: 1.8rem;
}

.captcha-message.captcha-msg-valid {
  color: var(--color-green-600);
}

.captcha-message.captcha-msg-invalid {
  color: var(--color-red-500);
}

/* Inline variant — everything on one row, no background box, message tooltip-style */
.captcha-inline {
  flex-direction: row;
  align-items: center;
  gap: 0;
}

.captcha-inline .captcha-challenge {
  background: transparent;
  border: none;
  padding: 0;
  gap: 0.6rem;
}

.captcha-inline .captcha-controls {
  gap: 0.6rem;
  margin-left: 0.6rem;
}

.captcha-inline .captcha-message {
  margin-left: 0.8rem;
  min-height: unset;
  white-space: nowrap;
}

/* Inline sizes */
.captcha-inline.captcha-sm .captcha-controls {
  margin-left: 0.4rem;
}

.captcha-inline.captcha-lg .captcha-controls {
  margin-left: 0.8rem;
}

/* Sizes */
.captcha-sm .captcha-num {
  min-width: 3.2rem;
  height: 3.2rem;
  font-size: 1.4rem;
}

.captcha-sm .captcha-operator,
.captcha-sm .captcha-equals,
.captcha-sm .captcha-question {
  font-size: 1.6rem;
}

.captcha-sm .captcha-input {
  width: 8rem;
  height: 3.2rem;
  font-size: 1.4rem;
}

.captcha-sm .captcha-refresh {
  width: 3rem;
  height: 3rem;
}

.captcha-lg .captcha-num {
  min-width: 5rem;
  height: 5rem;
  font-size: 2.2rem;
}

.captcha-lg .captcha-operator,
.captcha-lg .captcha-equals,
.captcha-lg .captcha-question {
  font-size: 2.4rem;
}

.captcha-lg .captcha-input {
  width: 12rem;
  height: 5rem;
  font-size: 1.8rem;
}

.captcha-lg .captcha-refresh {
  width: 4.4rem;
  height: 4.4rem;
}