@charset "UTF-8";
:root {
  --font-text: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-heading: inherit;
  --font-mono: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace;
  --unit: 4px;
  --body-text-size: 16px;
  --body-text-line: 1.5;
  --font-weight-semibold: 500;
  --font-weight-heavy: 900;
}

:root {
  --radius-small: 2px;
  --radius-medium: 4px;
  --radius-base: 6px;
  --radius-large: 8px;
  --radius-huge: 12px;
  --level-over-page: 100;
  --level-over-content: 200;
  --level-over-all: 300;
  --type-scale-80: 80px;
  --type-scale-64: 64px;
  --type-scale-52: 52px;
  --type-scale-48: 48px;
  --type-scale-40: 40px;
  --type-scale-32: 32px;
  --type-scale-24: 24px;
  --type-scale-20: 20px;
  --type-scale-18: 18px;
  --type-scale-16: 16px;
  --type-scale-15: 15px;
  --type-scale-14: 14px;
  --type-scale-13: 13px;
  --type-scale-12: 12px;
  --type-scale-11: 11px;
  --type-scale-10: 10px;
  --type-scale-8: 8px;
  --type-scale-6: 6px;
  --palette-black: #030612;
  --palette-white: #ffffff;
  --palette-primary-darker: #1022A0;
  --palette-primary-dark: #1027EA;
  --palette-primary-base: #1F4AFB;
  --palette-primary-mid: #8FA4FD;
  --palette-primary-light: #C7D2FE;
  --palette-primary-lighter: #E8ECFE;
  --palette-primary-lightest: #F4F6FF;
  --palette-neutral-darker: #2A2D3C;
  --palette-neutral-dark: #3F424A;
  --palette-neutral-base: #7C7C83;
  --palette-neutral-mid: #CDCDD0;
  --palette-neutral-light: #E6E6E9;
  --palette-neutral-lighter: #EDEDEE;
  --palette-neutral-lightest: #F5F5F6;
  --palette-negative-darker: #A30109;
  --palette-negative-dark: #E6000A;
  --palette-negative-base: #FF424D;
  --palette-negative-mid: #FFA0A6;
  --palette-negative-light: #FFC6C9;
  --palette-negative-lighter: #FFECED;
  --palette-negative-lightest: #FFF5F6;
  --palette-positive-darker: #106939;
  --palette-positive-dark: #1B9D56;
  --palette-positive-base: #1FC267;
  --palette-positive-mid: #84DEAC;
  --palette-positive-light: #B1EACA;
  --palette-positive-lighter: #E8F8EF;
  --palette-positive-lightest: #F4FCF7;
  --palette-active-darker: #1022A0;
  --palette-active-dark: #1027EA;
  --palette-active-base: #1F4AFB;
  --palette-active-mid: #8FA4FD;
  --palette-active-light: #C7D2FE;
  --palette-active-lighter: #E8ECFE;
  --palette-active-lightest: #F4F6FF;
  --palette-red-darker: #A30109;
  --palette-red-dark: #E6000A;
  --palette-red-base: #FF424D;
  --palette-red-mid: #FFA0A6;
  --palette-red-light: #FFC6C9;
  --palette-red-lighter: #FFECED;
  --palette-red-lightest: #FFF5F6;
  --palette-orange-darker: #B84300;
  --palette-orange-dark: #FF6105;
  --palette-orange-base: #FF8943;
  --palette-orange-mid: #FFBE98;
  --palette-orange-light: #FFD6BD;
  --palette-orange-lighter: #FFF3EC;
  --palette-orange-lightest: #FFF9F5;
  --palette-yellow-darker: #9F7E04;
  --palette-yellow-dark: #ECC01E;
  --palette-yellow-base: #F9C918;
  --palette-yellow-mid: #FBDF74;
  --palette-yellow-light: #FDE9A3;
  --palette-yellow-lighter: #FEF7DD;
  --palette-yellow-lightest: #FEFCF3;
  --palette-green-darker: #106939;
  --palette-green-dark: #1B9D56;
  --palette-green-base: #1FC267;
  --palette-green-mid: #84DEAC;
  --palette-green-light: #B1EACA;
  --palette-green-lighter: #E8F8EF;
  --palette-green-lightest: #F4FCF7;
  --palette-blue-darker: #1022A0;
  --palette-blue-dark: #1027EA;
  --palette-blue-base: #1F4AFB;
  --palette-blue-mid: #8FA4FD;
  --palette-blue-light: #C7D2FE;
  --palette-blue-lighter: #E8ECFE;
  --palette-blue-lightest: #F4F6FF;
  --palette-purple-darker: #5622A5;
  --palette-purple-dark: #6E25D5;
  --palette-purple-base: #8C38FF;
  --palette-purple-mid: #C59BFF;
  --palette-purple-light: #E2CDFF;
  --palette-purple-lighter: #F6EFFF;
  --palette-purple-lightest: #F9F5FF;
  --palette-white-5: rgba(255, 255, 255, 0.05);
  --palette-white-7: rgba(255, 255, 255, 0.07);
  --palette-white-10: rgba(255, 255, 255, 0.1);
  --palette-white-15: rgba(255, 255, 255, 0.15);
  --palette-white-20: rgba(255, 255, 255, 0.2);
  --palette-white-25: rgba(255, 255, 255, 0.25);
  --palette-white-30: rgba(255, 255, 255, 0.3);
  --palette-white-40: rgba(255, 255, 255, 0.4);
  --palette-white-50: rgba(255, 255, 255, 0.5);
  --palette-white-60: rgba(255, 255, 255, 0.6);
  --palette-white-70: rgba(255, 255, 255, 0.7);
  --palette-white-80: rgba(255, 255, 255, 0.8);
  --palette-white-90: rgba(255, 255, 255, 0.9);
  --palette-white-95: rgba(255, 255, 255, 0.95);
  --palette-black-5: rgba(3, 6, 18, 0.05);
  --palette-black-7: rgba(3, 6, 18, 0.07);
  --palette-black-10: rgba(3, 6, 18, 0.1);
  --palette-black-15: rgba(3, 6, 18, 0.15);
  --palette-black-20: rgba(3, 6, 18, 0.2);
  --palette-black-25: rgba(3, 6, 18, 0.25);
  --palette-black-30: rgba(3, 6, 18, 0.3);
  --palette-black-40: rgba(3, 6, 18, 0.4);
  --palette-black-50: rgba(3, 6, 18, 0.5);
  --palette-black-60: rgba(3, 6, 18, 0.6);
  --palette-black-70: rgba(3, 6, 18, 0.7);
  --palette-black-80: rgba(3, 6, 18, 0.8);
  --palette-black-90: rgba(3, 6, 18, 0.9);
  --palette-black-95: rgba(3, 6, 18, 0.95);
  --background-light: var(--palette-white);
  --background-dark: var(--palette-black);
  --background-primary: var(--palette-primary-base);
  --background-aluminum: var(--palette-neutral-lightest);
  --background-silver: var(--palette-neutral-lighter);
  --background-platinum: var(--palette-neutral-light);
  --body-default: var(--palette-white);
  --border-dark: var(--palette-black);
  --border-dark-low: var(--palette-black-7);
  --border-dark-mid: var(--palette-black-10);
  --border-light: var(--palette-white);
  --border-light-low: var(--palette-white-20);
  --border-light-mid: var(--palette-white-50);
  --border-primary: var(--palette-primary-base);
  --divider-default: var(--palette-black-10);
  --divider-dark-mid: var(--palette-black-25);
  --divider-dark: var(--palette-black);
  --divider-primary: var(--palette-primary-base);
  --divider-light: var(--palette-white);
  --divider-light-muted: var(--palette-white-30);
  --heading-default: var(--palette-black);
  --heading-dark-mid: var(--palette-black-70);
  --heading-muted: var(--palette-black-50);
  --heading-light: var(--palette-white-95);
  --heading-light-mid: var(--palette-white-70);
  --heading-primary: var(--palette-primary-base);
  --icon-dark: var(--palette-black);
  --icon-light: var(--palette-white);
  --icon-primary: var(--palette-primary-base);
  --inline-var-color: var(--palette-black-80);
  --inline-var-border-color: transparent;
  --inline-var-background-color: transparent;
  --inline-kbd-color: var(--palette-black-80);
  --inline-kbd-border-color: var(--palette-black-15);
  --inline-kbd-background-color: transparent;
  --inline-code-color: var(--palette-black-80);
  --inline-code-border-color: transparent;
  --inline-code-background-color: var(--palette-neutral-lightest);
  --inline-cite-color: var(--palette-black-70);
  --link-default-color: var(--palette-active-dark);
  --link-default-hover-color: var(--palette-negative-dark);
  --link-dark-color: var(--palette-black);
  --link-dark-hover-color: var(--palette-black-60);
  --link-dark-mid-color: var(--palette-black-70);
  --link-dark-mid-hover-color: var(--palette-black);
  --link-muted-color: var(--palette-black-50);
  --link-muted-hover-color: var(--palette-black);
  --link-light-color: var(--palette-white-95);
  --link-light-hover-color: var(--palette-white-60);
  --link-light-mid-color: var(--palette-white-70);
  --link-light-mid-hover-color: var(--palette-white);
  --link-primary-color: var(--palette-primary-base);
  --link-primary-hover-color: var(--palette-black);
  --overlay-light: var(--palette-white-50);
  --overlay-dark: var(--palette-black-50);
  --placeholder-default: var(--palette-black-30);
  --placeholder-light: var(--palette-white-40);
  --text-dark: var(--palette-black);
  --text-default: var(--palette-neutral-darker);
  --text-dark-mid: var(--palette-black-70);
  --text-muted: var(--palette-black-50);
  --text-success: var(--palette-positive-dark);
  --text-error: var(--palette-negative-dark);
  --text-light: var(--palette-white-90);
  --text-light-mid: var(--palette-white-70);
  --text-light-muted: var(--palette-white-50);
  --text-primary: var(--palette-primary-base);
  --shadow-100: 0 1px 3px -1px var(--palette-black-10), 0 1px 2px -1px var(--palette-black-20);
  --shadow-150: 0 3px 5px -1px var(--palette-black-10), 0 1px 3px -1px var(--palette-black-20);
  --shadow-200: 0 6px 12px -2px var(--palette-black-10), 0 3px 7px -3px var(--palette-black-20);
  --shadow-250: 0 10px 25px -5px var(--palette-black-10), 0 8px 16px -8px var(--palette-black-20);
  --shadow-300: 0 30px 60px -12px var(--palette-black-10), 0 18px 36px -18px var(--palette-black-20);
  --shadow-350: 0 50px 100px -10px var(--palette-black-20), 0 30px 60px -30px var(--palette-black-30);
}

html {
  box-sizing: border-box;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

* {
  margin: 0;
  padding: 0;
}

input, textarea, select {
  outline: none;
}

audio, canvas, video, progress, iframe {
  display: block;
  vertical-align: baseline;
}

fieldset, iframe, img {
  border: 0;
}

embed, object, img, video {
  max-width: 100%;
  height: auto;
}

button,
[type=submit] {
  -webkit-appearance: button;
}

[type=radio],
[type=checkbox] {
  vertical-align: middle;
  position: relative;
  bottom: 0.1em;
  margin-right: 2px;
}

input[type=search],
input[type=search]::-webkit-search-decoration,
input[type=search]::-webkit-search-cancel-button,
input[type=search]::-webkit-search-results-button,
input[type=search]::-webkit-search-results-decoration {
  -webkit-appearance: none;
}

::-moz-focus-inner {
  border: none;
  padding: 0;
}

@media print {
  body {
    color: #000;
  }
  a, a:link, a:visited {
    color: #000;
    text-decoration: none;
  }
  .hidden-print {
    display: none;
  }
}
@media screen {
  .visible-print {
    display: none;
  }
}
@keyframes slideUp {
  to {
    height: 0;
    padding-top: 0;
    padding-bottom: 0;
    margin-bottom: 0;
  }
}
@keyframes slideDown {
  from {
    height: 0;
    padding-top: 0;
    padding-bottom: 0;
    margin-bottom: 0;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
html {
  font-size: var(--unit);
}

body {
  --body-color: var(--text-default);
  --body-background-color: var(--body-default);
  font-family: var(--font-text);
  font-size: var(--body-text-size);
  line-height: var(--body-text-line);
  color: var(--body-color);
  background-color: var(--body-background-color);
}

*::-webkit-input-placeholder {
  color: var(--placeholder-default);
}

*::-moz-placeholder {
  color: var(--placeholder-default);
}

*::-ms-input-placeholder {
  color: var(--placeholder-default);
}

*::placeholder {
  color: var(--placeholder-default);
}

a {
  color: var(--link-default-color);
}

a:hover {
  transition: all 0.1s linear;
  color: var(--link-default-hover-color);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  --heading-font-size: inherit;
  --heading-line-height: inherit;
  font-family: var(--font-heading);
  font-style: normal;
  font-weight: bold;
  letter-spacing: -0.01em;
  font-size: var(--heading-font-size);
  line-height: var(--heading-line-height);
  color: var(--heading-default);
  text-rendering: optimizeLegibility;
}
h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
  color: inherit !important;
  display: block;
  text-decoration: none;
}
h1 a:hover,
h2 a:hover,
h3 a:hover,
h4 a:hover,
h5 a:hover,
h6 a:hover {
  color: inherit !important;
  opacity: 0.75;
  text-decoration: underline;
}

ul,
ol {
  margin-left: 20px;
}

li li {
  font-size: 1em;
}

nav ul,
nav ol {
  margin-left: 0;
  list-style: none;
}

dt {
  font-weight: bold;
}

dd + dt {
  margin-top: 0.25em;
}

address {
  font-style: normal;
}

figure > img, figure > iframe, figure > pre, figure > div {
  vertical-align: middle;
}

.alert {
  --alert-background-color: var(--palette-neutral-lighter);
  --alert-border-color: transparent;
  --alert-color: var(--palette-neutral-darker);
  --alert-padding: 4rem 5rem;
  --alert-font-size: var(--type-scale-14);
  --alert-font-weight: normal;
  --alert-line-height: var(--body-text-line);
  --alert-border-radius: var(--radius-base);
  --alert-border-width: 1px;
  --alert-border-style: solid;
  --alert-box-shadow: none;
  --alert-close-size: 14px;
  --alert-space: 0.5em;
  position: relative;
  font-weight: var(--alert-font-weight);
  font-size: var(--alert-font-size);
  line-height: var(--alert-line-height);
  padding: var(--alert-padding);
  border-radius: var(--alert-border-radius);
  border-style: var(--alert-border-style);
  border-width: var(--alert-border-width);
  box-shadow: var(--alert-box-shadow);
  background-color: var(--alert-background-color);
  border-color: var(--alert-border-color);
  color: var(--alert-color);
}
.alert h2, .alert h3, .alert h4, .alert h5, .alert h6, .alert p, .alert a {
  color: inherit;
}
.alert * + p {
  margin-top: var(--alert-space);
}
.alert a:hover {
  opacity: 0.6;
}
.alert svg {
  fill: currentColor;
}
.alert .close {
  --close-size: var(--alert-close-size);
  position: absolute;
  right: 0.65em;
  top: 0.85em;
}

.alert-info {
  --alert-background-color: var(--palette-active-lightest);
  --alert-border-color: transparent;
  --alert-color: var(--palette-active-darker);
}

.alert-success {
  --alert-background-color: var(--palette-positive-lightest);
  --alert-border-color: transparent;
  --alert-color: var(--palette-positive-darker);
}

.alert-error {
  --alert-background-color: var(--palette-negative-lightest);
  --alert-border-color: transparent;
  --alert-color: var(--palette-negative-darker);
}

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

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

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

.align-top {
  vertical-align: top;
}

.align-middle {
  vertical-align: middle;
}

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

.align-bottom {
  vertical-align: bottom;
}

@media only screen and (max-width: 767px) {
  .align-left-sm {
    text-align: left;
  }
  .align-center-sm {
    text-align: center;
  }
  .align-right-sm {
    text-align: right;
  }
  .align-top-sm {
    vertical-align: top;
  }
  .align-middle-sm {
    vertical-align: middle;
  }
  .align-baseline-sm {
    vertical-align: baseline;
  }
  .align-bottom-sm {
    vertical-align: bottom;
  }
}
[class^=bg-],
[class*=" bg-"] {
  --background-color: transparent;
  background-color: var(--background-color);
}

.bg-light {
  --background-color: var(--palette-white);
}

.bg-dark {
  --background-color: var(--palette-black);
}

.bg-primary {
  --background-color: var(--palette-primary-base);
}

.bg-aluminum {
  --background-color: var(--palette-neutral-lightest);
}

.bg-silver {
  --background-color: var(--palette-neutral-lighter);
}

.bg-platinum {
  --background-color: var(--palette-neutral-light);
}

.badge {
  --badge-background-color: var(--palette-neutral-lighter);
  --badge-border-color: transparent;
  --badge-color: var(--palette-neutral-darker);
  --badge-font-size: var(--type-scale-12);
  --badge-font-weight: var(--font-weight-semibold);
  --badge-border-radius: 99px;
  --badge-padding: 1px 4px;
  --badge-border-width: 1px;
  --badge-border-style: solid;
  --badge-line-height: 1;
  --badge-size: 20px;
  font-weight: var(--badge-font-weight);
  font-size: var(--badge-font-size);
  border-radius: var(--badge-border-radius);
  padding: var(--badge-padding);
  border-width: var(--badge-border-width);
  border-style: var(--badge-border-style);
  line-height: var(--badge-line-height);
  min-width: var(--badge-size);
  min-height: var(--badge-size);
  border-color: var(--badge-border-color);
  background-color: var(--badge-background-color);
  color: var(--badge-color);
  display: inline-flex;
  justify-content: center;
  align-items: center;
  vertical-align: middle;
  white-space: nowrap;
  text-decoration: none;
  height: auto;
}
.badge a {
  color: inherit;
  text-decoration: none;
}
.badge a:hover {
  color: inherit;
  text-decoration: underline;
}

a.badge:hover {
  opacity: 1;
  color: var(--badge-color);
  text-decoration: underline;
}

.badge-dark {
  --badge-background-color: var(--palette-black);
  --badge-border-color: transparent;
  --badge-color: var(--palette-white);
}

.badge-light {
  --badge-background-color: var(--palette-white);
  --badge-border-color: transparent;
  --badge-color: var(--palette-black);
}

.badge-large {
  --badge-font-size: var(--type-scale-14);
  --badge-size: 26px;
}

.badge-huge {
  --badge-font-size: var(--type-scale-16);
  --badge-size: 36px;
}

.badge-mega {
  --badge-font-size: var(--type-scale-20);
  --badge-size: 48px;
}

[class^=border-],
[class*=" border-"] {
  --border-color: transparent;
  border-width: 1px;
  border-style: solid;
  border-color: var(--border-color);
}

.border-top {
  border-style: none;
  border-top-style: solid;
}

.border-bottom {
  border-style: none;
  border-bottom-style: solid;
}

.border-left {
  border-style: none;
  border-left-style: solid;
}

.border-right {
  border-style: none;
  border-right-style: solid;
}

.border-off {
  border-color: transparent !important;
}

.border-dark {
  --border-color: var(--palette-black);
}

.border-dark-low {
  --border-color: var(--palette-black-7);
}

.border-dark-mid {
  --border-color: var(--palette-black-10);
}

.border-light {
  --border-color: var(--palette-white);
}

.border-light-low {
  --border-color: var(--palette-white-20);
}

.border-light-mid {
  --border-color: var(--palette-white-50);
}

.border-primary {
  --border-color: var(--palette-primary-base);
}

.border-1 {
  border-width: 1px;
}

.border-2 {
  border-width: 2px;
}

@media only screen and (max-width: 767px) {
  .border-off-sm {
    border-color: transparent !important;
  }
  .border-top-sm {
    border-style: none;
    border-top-style: solid;
  }
  .border-bottom-sm {
    border-style: none;
    border-bottom-style: solid;
  }
  .border-left-sm {
    border-style: none;
    border-left-style: solid;
  }
  .border-right-sm {
    border-style: none;
    border-right-style: solid;
  }
  .border-1-sm {
    border-width: 1px;
  }
  .border-2-sm {
    border-width: 2px;
  }
}
.brand {
  --brand-color: var(--palette-black);
  --brand-hover-color: var(--palette-black);
  --brand-font-size: var(--type-scale-16);
  --brand-font-weight: bold;
  --brand-text-transform: none;
  --brand-letter-spacing: 0;
  position: relative;
  display: flex;
  align-items: center;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  color: var(--brand-color);
  font-size: var(--brand-font-size);
  font-weight: var(--brand-font-weight);
  text-transform: var(--brand-text-transform);
  letter-spacing: var(--brand-letter-spacing);
}
.brand svg {
  fill: currentColor;
}

a.brand:hover {
  transition: all 0.1s linear;
  color: var(--brand-hover-color);
  text-decoration: underline;
}

.breadcrumb {
  --breadcrumb-link-color: var(--palette-black);
  --breadcrumb-link-hover-color: var(--palette-black-60);
  --breadcrumb-link-active-color: var(--palette-black-40);
  --breadcrumb-separator-color: var(--palette-black-25);
  --breadcrumb-font-size: var(--type-scale-14);
  --breadcrumb-line-height: var(--body-text-line);
  --breadcrumb-item-space: 2rem;
  --breadcrumb-separator: "/";
  font-size: var(--breadcrumb-font-size);
  line-height: var(--breadcrumb-line-height);
}
.breadcrumb .breadcrumb-list {
  display: flex;
  align-items: center;
}
.breadcrumb .breadcrumb-item {
  display: flex;
  align-items: center;
}
.breadcrumb .breadcrumb-item:after {
  content: var(--breadcrumb-separator);
  color: var(--breadcrumb-separator-color);
  margin-left: var(--breadcrumb-item-space);
  margin-right: var(--breadcrumb-item-space);
}
.breadcrumb .breadcrumb-item:last-child:after {
  display: none;
}
.breadcrumb .breadcrumb-item.active .breadcrumb-link {
  color: var(--breadcrumb-link-active-color);
  text-decoration: none;
}
.breadcrumb .breadcrumb-link {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: var(--breadcrumb-link-color);
}
.breadcrumb .breadcrumb-link:hover {
  text-decoration: underline;
  color: var(--breadcrumb-link-hover-color);
}

.breadcrumb-light {
  --breadcrumb-link-color: var(--palette-white-80);
  --breadcrumb-link-hover-color: var(--palette-white);
  --breadcrumb-link-active-color: var(--palette-white-50);
  --breadcrumb-separator-color: var(--palette-white-30);
}

.breadcrumb-bullet {
  --breadcrumb-separator: "∙";
}

.breadcrumb-path {
  --breadcrumb-separator: "≻";
}

.button {
  --button-background-color: transparent;
  --button-border-color: var(--palette-black-20);
  --button-color: var(--palette-neutral-darker);
  --button-hover-background-color: var(--palette-black-5);
  --button-hover-border-color: var(--palette-black-20);
  --button-hover-color: var(--palette-black);
  --button-disabled-background-color: transparent;
  --button-disabled-border-color: var(--palette-black-20);
  --button-disabled-color: var(--palette-black-80);
  --button-font-size: var(--type-scale-15);
  --button-font-weight: var(--font-weight-semibold);
  --button-border-radius: var(--radius-base);
  --button-line-height: 1;
  --button-letter-spacing: 0;
  --button-text-transform: none;
  --button-padding-y: 0;
  --button-padding-x: 23px;
  --button-border-width: 1px;
  --button-border-style: solid;
  --button-opacity: 1;
  --button-box-shadow: none;
  --button-height: 42px;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: baseline;
  text-align: center;
  font-family: inherit;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  height: var(--button-height);
  font-weight: var(--button-font-weight);
  font-size: var(--button-font-size);
  line-height: var(--button-line-height);
  letter-spacing: var(--button-letter-spacing);
  text-transform: var(--button-text-transform);
  border-radius: var(--button-border-radius);
  padding-top: calc(var(--button-padding-y) * 1px + 1px);
  padding-bottom: var(--button-padding-y);
  padding-left: var(--button-padding-x);
  padding-right: var(--button-padding-x);
  border-width: var(--button-border-width);
  border-style: var(--button-border-style);
  box-shadow: var(--button-box-shadow);
  opacity: var(--button-opacity);
  color: var(--button-color);
  border-color: var(--button-border-color);
  background-color: var(--button-background-color);
  background-image: var(--button-background-image);
}
.button:hover {
  outline: none;
}
.button:hover, .button:focus {
  background-image: none;
  text-decoration: none;
  color: var(--button-hover-color);
  border-color: var(--button-hover-border-color);
  background-color: var(--button-hover-background-color);
  background-image: var(--button-hover-background-image);
  box-shadow: var(--button-hover-box-shadow);
}
.button.disabled, .button:disabled {
  --button-opacity: 0.5;
  cursor: default;
  color: var(--button-disabled-color);
  border-color: var(--button-disabled-border-color);
  background-color: var(--button-disabled-background-color);
  background-image: var(--button-disabled-background-image);
  box-shadow: var(--button-disabled-box-shadow);
}
.button .button-icon + .button-label {
  margin-left: 6px;
}
.button .button-label + .button-icon {
  margin-left: 6px;
  margin-right: -3px;
}
.button .caret {
  --caret-thickness: 2px;
  margin-left: 4px;
  margin-right: -4px;
}

.button-primary {
  --button-background-color: var(--palette-primary-base);
  --button-border-color: transparent;
  --button-color: var(--palette-primary-lightest);
  --button-hover-background-color: var(--palette-primary-dark);
  --button-hover-border-color: transparent;
  --button-hover-color: var(--palette-primary-lightest);
  --button-disabled-background-color: var(--palette-black-70);
  --button-disabled-border-color: transparent;
  --button-disabled-color: var(--palette-white-70);
}

.button-signal {
  --button-background-color: var(--palette-yellow-base);
  --button-border-color: transparent;
  --button-color: var(--palette-yellow-lightest);
  --button-hover-background-color: var(--palette-yellow-dark);
  --button-hover-border-color: transparent;
  --button-hover-color: var(--palette-yellow-lightest);
  --button-disabled-background-color: var(--palette-black-70);
  --button-disabled-border-color: transparent;
  --button-disabled-color: var(--palette-white-70);
}

.button-dark {
  --button-background-color: var(--palette-black);
  --button-border-color: transparent;
  --button-color: var(--palette-neutral-lightest);
  --button-hover-background-color: var(--palette-neutral-darker);
  --button-hover-border-color: transparent;
  --button-hover-color: var(--palette-neutral-lightest);
  --button-disabled-background-color: var(--palette-black-70);
  --button-disabled-border-color: transparent;
  --button-disabled-color: var(--palette-white-70);
}

.button-light {
  --button-background-color: var(--palette-white-95);
  --button-border-color: transparent;
  --button-color: var(--palette-black);
  --button-hover-background-color: var(--palette-white-80);
  --button-hover-border-color: transparent;
  --button-hover-color: var(--palette-black);
  --button-disabled-background-color: var(--palette-white-95);
  --button-disabled-border-color: transparent;
  --button-disabled-color: var(--palette-black-80);
}

.button-light-outline {
  --button-background-color: transparent;
  --button-border-color: var(--palette-white-60);
  --button-color: var(--palette-white-90);
  --button-hover-background-color: var(--palette-white-7);
  --button-hover-border-color: var(--palette-white-80);
  --button-hover-color: var(--palette-white);
  --button-disabled-background-color: var(--palette-white-95);
  --button-disabled-border-color: transparent;
  --button-disabled-color: var(--palette-black-80);
}

.button-large {
  --button-font-size: var(--type-scale-16);
  --button-height: 52px;
  --button-padding-x: 29px;
}

.button-small {
  --button-font-size: var(--type-scale-14);
  --button-height: 32px;
  --button-padding-x: 14px;
  padding-top: 0;
}

.button-xsmall {
  --button-font-size: var(--type-scale-14);
  --button-height: 20px;
  --button-padding-x: 14px;
  padding-top: 0;
}


.button-round {
  --button-border-radius: 99px;
}

.card {
  position: relative;
}

.caret {
  --caret-color: currentColor;
  --caret-size: 14px;
  --caret-thickness: 1px;
  display: inline-block;
  position: relative;
  width: var(--caret-size);
  height: var(--caret-size);
}
.caret:after {
  position: absolute;
  content: "";
  width: calc(var(--caret-size) / 2);
  height: calc(var(--caret-size) / 2);
  border-bottom: var(--caret-thickness) solid var(--caret-color);
  border-right: var(--caret-thickness) solid var(--caret-color);
  top: calc(var(--caret-size) / 4);
  left: calc(var(--caret-size) / 8);
  transform: rotate(-45deg);
}

.caret-left:after {
  top: calc(var(--caret-size) / 4);
  left: calc(var(--caret-size) / 3);
  transform: rotate(135deg);
}

.caret-up:after {
  top: calc(var(--caret-size) / 3);
  left: calc(var(--caret-size) / 4);
  transform: rotate(-135deg);
}

.caret-down:after {
  top: calc(var(--caret-size) / 6);
  left: calc(var(--caret-size) / 4);
  transform: rotate(45deg);
}

.caret-strong {
  --caret-thickness: 2px;
}

.caret-large {
  --caret-size: 18px;
}

.caret-huge {
  --caret-size: 22px;
}

.centered {
  margin-left: auto;
  margin-right: auto;
}

@media only screen and (max-width: 767px) {
  .centered-sm {
    margin-left: auto;
    margin-right: auto;
  }
  .uncentered-sm {
    margin-left: initial;
    margin-right: initial;
  }
}
.checkbox,
.radio {
  --checkbox-radio-color: var(--text-default);
  --checkbox-radio-font-size: var(--type-scale-15);
  --checkbox-radio-font-weight: normal;
  --checkbox-radio-font-style: normal;
  --checkbox-radio-text-transform: none;
  --checkbox-radio-line-height: var(--body-text-line);
  --checkbox-radio-letter-spacing: 0;
  --checkbox-radio-space: 1rem;
  font-size: var(--checkbox-radio-font-size);
  font-weight: var(--checkbox-radio-font-weight);
  font-style: var(--checkbox-radio-font-style);
  line-height: var(--checkbox-radio-line-height);
  text-transform: var(--checkbox-radio-text-transform);
  letter-spacing: var(--checkbox-radio-letter-spacing);
  color: var(--checkbox-radio-color);
  cursor: pointer;
}
.checkbox.disabled,
.radio.disabled {
  opacity: 0.5;
  cursor: default;
}
.checkbox + .checkbox, .checkbox + .radio,
.radio + .checkbox,
.radio + .radio {
  margin-top: var(--checkbox-radio-space);
}

.checkbox-light,
.radio-light {
  --checkbox-radio-color: var(--text-light);
}

.checkbox-group,
.radio-group {
  --checkbox-radio-group-space: 1em;
}
.checkbox-group .checkbox,
.checkbox-group .radio,
.radio-group .checkbox,
.radio-group .radio {
  display: inline-block;
  margin-bottom: 0;
  margin-right: var(--checkbox-radio-group-space);
}

.close {
  --close-color: currentColor;
  --close-size: 14px;
  --close-thickness: 1px;
  display: inline-block;
  cursor: pointer;
  position: relative;
  width: var(--close-size);
  height: var(--close-size);
  opacity: 0.65;
}
.close:before, .close:after {
  position: absolute;
  content: "";
  top: calc((var(--close-size) - var(--close-thickness)) / 2);
  left: 0;
  right: 0;
  height: var(--close-thickness);
  background: var(--close-color);
  border-radius: var(--close-thickness);
}
.close:before {
  transform: rotate(45deg);
}
.close:after {
  transform: rotate(-45deg);
}
.close:hover {
  opacity: 1;
}

.close-strong {
  --close-thickness: 2px;
}

.close-small {
  --close-size: 10px;
}

.close-medium {
  --close-size: 12px;
}

.close-large {
  --close-size: 16px;
}

.close-huge {
  --close-size: 20px;
}

pre,
.code {
  --code-background-color: var(--palette-neutral-lightest);
  --code-color: var(--text-default);
  --code-border-color: transparent;
  --code-font-size: var(--type-scale-14);
  --code-font-family: var(--font-mono);
  --code-line-height: 1.5;
  --code-padding: 4rem;
  --code-border-radius: var(--radius-base);
  --code-border-width: 1px;
  --code-border-style: solid;
  overflow: auto;
  white-space: pre;
  font-family: var(--code-font-family);
  font-size: var(--code-font-size);
  line-height: var(--code-line-height);
  padding: var(--code-padding);
  border-radius: var(--code-border-radius);
  border-width: var(--code-border-width);
  border-style: var(--code-border-style);
  border-color: var(--code-border-color);
  background-color: var(--code-background-color);
  color: var(--code-color);
}
pre code,
.code code {
  padding: 0;
  border: 0;
  font-size: 100%;
  display: block;
  line-height: inherit;
  background: none;
}

.code-light {
  --code-background-color: var(--palette-white-20);
  --code-color: var(--text-light);
  --code-border-color: transparent;
}

.container-small {
  max-width: 400px;
}

.container-content {
  max-width: 800px;
}

.container-medium {
  max-width: 1000px;
}

.container {
  max-width: 1112px;
}

.container-large {
  max-width: 1240px;
}

.container-full {
  max-width: 100%;
}

.container-1 {
  max-width: calc((100%/12*1) - 8rem/2);
}

.container-2 {
  max-width: calc((100%/12*2) - 8rem/2);
}

.container-3 {
  max-width: calc((100%/12*3) - 8rem/2);
}

.container-4 {
  max-width: calc((100%/12*4) - 8rem/2);
}

.container-5 {
  max-width: calc((100%/12*5) - 8rem/2);
}

.container-6 {
  max-width: calc((100%/12*6) - 8rem/2);
}

.container-7 {
  max-width: calc((100%/12*7) - 8rem/2);
}

.container-8 {
  max-width: calc((100%/12*8) - 8rem/2);
}

.container-9 {
  max-width: calc((100%/12*9) - 8rem/2);
}

.container-10 {
  max-width: calc((100%/12*10) - 8rem/2);
}

.container-11 {
  max-width: calc((100%/12*11) - 8rem/2);
}

.container-12 {
  max-width: calc((100%/12*12) - 8rem/2);
}

@media only screen and (max-width: 767px) {
  .container,
  [class^=container-],
  [class*=" container-"] {
    max-width: none;
  }
}
.container-crop {
  overflow: hidden;
}

.hidden {
  display: none !important;
}

.visible {
  display: block;
}

.visible-lg,
.visible-md,
.visible-sm {
  display: none;
}

@media only screen and (min-width: 1442px) {
  .visible-lg {
    display: block;
  }
  .hidden-lg {
    display: none;
  }
}
@media only screen and (max-width: 1023px) {
  .visible-md {
    display: block;
  }
  .hidden-md {
    display: none;
  }
}
@media only screen and (max-width: 767px) {
  .visible-sm {
    display: block;
  }
  .hidden-sm {
    display: none;
  }
}
.visually-hidden {
  position: absolute;
  clip: rect(1px, 1px, 1px, 1px);
  -webkit-clip-path: inset(0px 0px 99.9% 99.9%);
  clip-path: inset(0px 0px 99.9% 99.9%);
  overflow: hidden;
  height: 1px;
  width: 1px;
  padding: 0;
  border: 0;
}

.divider,
hr {
  --divider-color: var(--divider-default);
  --divider-space: 1.5em;
  --divider-size: 1px;
  --divider-length: auto;
  --divider-style: solid;
  position: relative;
  line-height: 1;
  background: none;
  border: none;
  text-align: left;
  width: var(--divider-length);
  height: var(--divider-size);
  border-top-width: var(--divider-size);
  border-top-style: var(--divider-style);
  border-top-color: var(--divider-color);
}

hr {
  margin-top: var(--divider-space);
  margin-bottom: var(--divider-space);
}

.divider-vertical {
  border-top: none;
  width: var(--divider-size);
  height: var(--divider-length);
  border-left-width: var(--divider-size);
  border-left-style: var(--divider-style);
  border-left-color: var(--divider-color);
}

.divider-dashed {
  --divider-style: dashed;
}

.divider-dotted {
  --divider-style: dotted;
}

.divider-2 {
  --divider-size: 2px;
}

.divider-3 {
  --divider-size: 3px;
}

.divider-4 {
  --divider-size: 4px;
}

.divider-6 {
  --divider-size: 6px;
}

.divider-8 {
  --divider-size: 8px;
}

.divider-10 {
  --divider-size: 10px;
}

.divider-small {
  --divider-length: 60px;
}

.divider-medium {
  --divider-length: 80px;
}

.divider-large {
  --divider-length: 100px;
}

.divider-default {
  --divider-color: var(--palette-black-10);
}

.divider-dark-mid {
  --divider-color: var(--palette-black-25);
}

.divider-dark {
  --divider-color: var(--palette-black);
}

.divider-primary {
  --divider-color: var(--palette-primary-base);
}

.divider-light {
  --divider-color: var(--palette-white);
}

.divider-light-muted {
  --divider-color: var(--palette-white-30);
}

.edges {
  padding-left: 5rem;
  padding-right: 5rem;
}

@media only screen and (max-width: 767px) {
  .edges-sm {
    padding-left: 5rem;
    padding-right: 5rem;
  }
}
.embed-responsive {
  position: relative;
  padding: 0;
  margin: 0;
  padding-bottom: 56.25%;
  height: 0;
}
.embed-responsive iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

figcaption {
  --figcaption-color: var(--text-default);
  --figcaption-background-color: transparent;
  --figcaption-font-size: var(--type-scale-12);
  --figcaption-line-height: var(--body-text-line);
  --figcaption-font-style: normal;
  --figcaption-font-weight: normal;
  --figcaption-text-transform: none;
  --figcaption-letter-spacing: 0;
  --figcaption-space: 4px;
  --figcaption-padding: 0;
  --figcaption-border-radius: 0;
  display: block;
  margin-top: var(--figcaption-space);
  font-style: var(--figcaption-font-style);
  font-size: var(--figcaption-font-size);
  font-weight: var(--figcaption-font-weight);
  text-transform: var(--figcaption-text-transform);
  letter-spacing: var(--figcaption-letter-spacing);
  line-height: var(--figcaption-line-height);
  padding: var(--figcaption-padding);
  border-radius: var(--figcaption-border-radius);
  background-color: var(--figcaption-background-color);
  color: var(--figcaption-color);
}

.flex {
  display: flex;
}

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

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

.flex-off {
  flex: 0 !important;
}

.flex-none {
  flex: 0 0 auto !important;
}

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

.flex-top {
  align-items: flex-start !important;
}

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

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

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

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

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

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

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

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

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

.flex-overflow {
  display: flex;
  flex-wrap: nowrap !important;
  overflow-y: hidden;
  overflow-x: auto;
}

.flex-layout {
  display: flex;
}

.flex-content {
  flex-grow: 1;
  min-width: 0;
}

.flex-sidebar {
  --flex-sidebar-width: auto;
  flex: 0 0 var(--flex-sidebar-width);
}

.flex-sidebar {
  --flex-sidebar-width: 300px;
}

@media only screen and (max-width: 767px) {
  .flex-sidebar {
    --flex-sidebar-width: 100%;
  }
}
@media only screen and (max-width: 767px) {
  .flex-row-sm {
    flex-direction: row;
  }
  .flex-layout,
  .flex-column-sm {
    flex-direction: column;
  }
  .flex-off-sm {
    flex: 0 !important;
  }
  .flex-wrap-sm {
    flex-wrap: wrap;
  }
  .flex-top-sm {
    align-items: flex-start;
  }
  .flex-middle-sm {
    align-items: center;
  }
  .flex-baseline-sm {
    align-items: baseline;
  }
  .flex-bottom-sm {
    align-items: flex-end;
  }
  .flex-between-sm {
    justify-content: space-between;
  }
  .flex-around-sm {
    justify-content: space-around;
  }
  .flex-center-sm {
    justify-content: center;
  }
  .flex-start-sm {
    justify-content: flex-start;
  }
  .flex-end-sm {
    justify-content: flex-end;
  }
}
.form-item {
  --form-item-space: 5rem;
  margin-bottom: var(--form-item-space);
}

.form-item .form-item {
  margin-bottom: 0;
}

label {
  --form-label-color: var(--text-default);
  --form-background-color: transparent;
  --form-label-font-size: var(--type-scale-15);
  --form-label-line-height: var(--body-text-line);
  --form-label-font-weight: normal;
  --form-label-font-style: normal;
  --form-label-text-transform: none;
  --form-label-letter-spacing: 0;
  --form-label-space: 0.15em;
  --form-label-border-radius: 0;
  --form-label-padding: 0;
  display: block;
  font-size: var(--form-label-font-size);
  font-weight: var(--form-label-font-weight);
  font-style: var(--form-label-font-style);
  line-height: var(--form-label-line-height);
  text-transform: var(--form-label-text-transform);
  letter-spacing: var(--form-label-letter-spacing);
  margin-bottom: var(--form-label-space);
  border-radius: var(--form-label-border-radius);
  padding: var(--form-padding);
  color: var(--form-label-color);
  background-color: var(--form-label-background-color);
}

.form-label-light {
  --form-label-color: var(--text-light);
}

[class^=gr-],
[class*=" gr-"] {
  --gradient-color: transparent;
  background: var(--gradient-color);
}

.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-column-gap: 8rem;
  grid-row-gap: 8rem;
}

.grid + .grid {
  margin-top: 8rem;
}

.grid-gutterless {
  grid-column-gap: 0;
}

.grid-gapless {
  grid-row-gap: 0;
}
.grid-gapless + .grid {
  margin-top: 0;
}

.grid-auto {
  grid-template-columns: repeat(auto-fit, minmax(0px, 1fr));
}

.grid-1 {
  grid-template-columns: repeat(1, 1fr);
}

.grid-2 {
  grid-template-columns: repeat(2, 1fr);
}

.grid-3 {
  grid-template-columns: repeat(3, 1fr);
}

.grid-4 {
  grid-template-columns: repeat(4, 1fr);
}

.grid-5 {
  grid-template-columns: repeat(5, 1fr);
}

.grid-6 {
  grid-template-columns: repeat(6, 1fr);
}

.grid-7 {
  grid-template-columns: repeat(7, 1fr);
}

.grid-8 {
  grid-template-columns: repeat(8, 1fr);
}

.grid-9 {
  grid-template-columns: repeat(9, 1fr);
}

.grid-10 {
  grid-template-columns: repeat(10, 1fr);
}

.grid-11 {
  grid-template-columns: repeat(11, 1fr);
}

.grid-12 {
  grid-template-columns: repeat(12, 1fr);
}

.column-1 {
  grid-column-end: span 1;
}

.column-2 {
  grid-column-end: span 2;
}

.column-3 {
  grid-column-end: span 3;
}

.column-4 {
  grid-column-end: span 4;
}

.column-5 {
  grid-column-end: span 5;
}

.column-6 {
  grid-column-end: span 6;
}

.column-7 {
  grid-column-end: span 7;
}

.column-8 {
  grid-column-end: span 8;
}

.column-9 {
  grid-column-end: span 9;
}

.column-10 {
  grid-column-end: span 10;
}

.column-11 {
  grid-column-end: span 11;
}

.column-12 {
  grid-column-end: span 12;
}

@media only screen and (max-width: 1023px) {
  .column-1-md {
    grid-column-end: span 1;
  }
  .column-2-md {
    grid-column-end: span 2;
  }
  .column-3-md {
    grid-column-end: span 3;
  }
  .column-4-md {
    grid-column-end: span 4;
  }
  .column-5-md {
    grid-column-end: span 5;
  }
  .column-6-md {
    grid-column-end: span 6;
  }
  .column-7-md {
    grid-column-end: span 7;
  }
  .column-8-md {
    grid-column-end: span 8;
  }
  .column-9-md {
    grid-column-end: span 9;
  }
  .column-10-md {
    grid-column-end: span 10;
  }
  .column-11-md {
    grid-column-end: span 11;
  }
  .column-12-md {
    grid-column-end: span 12;
  }
  .grid-1-md {
    grid-template-columns: repeat(1, 1fr);
  }
  .grid-2-md {
    grid-template-columns: repeat(2, 1fr);
  }
  .grid-3-md {
    grid-template-columns: repeat(3, 1fr);
  }
  .grid-4-md {
    grid-template-columns: repeat(4, 1fr);
  }
  .grid-5-md {
    grid-template-columns: repeat(5, 1fr);
  }
  .grid-6-md {
    grid-template-columns: repeat(6, 1fr);
  }
  .grid-7-md {
    grid-template-columns: repeat(7, 1fr);
  }
  .grid-8-md {
    grid-template-columns: repeat(8, 1fr);
  }
  .grid-9-md {
    grid-template-columns: repeat(9, 1fr);
  }
  .grid-10-md {
    grid-template-columns: repeat(10, 1fr);
  }
  .grid-11-md {
    grid-template-columns: repeat(11, 1fr);
  }
  .grid-12-md {
    grid-template-columns: repeat(12, 1fr);
  }
}
@media only screen and (max-width: 767px) {
  .grid,
  .grid-auto {
    grid-template-columns: repeat(1, 1fr);
  }
  .column {
    grid-column-end: span 1;
  }
  .column:empty {
    display: none;
  }
  .grid-1-sm {
    grid-template-columns: repeat(1, 1fr);
  }
  .grid-2-sm {
    grid-template-columns: repeat(2, 1fr);
  }
  .grid-3-sm {
    grid-template-columns: repeat(3, 1fr);
  }
  .grid-4-sm {
    grid-template-columns: repeat(4, 1fr);
  }
  .grid-5-sm {
    grid-template-columns: repeat(5, 1fr);
  }
  .grid-6-sm {
    grid-template-columns: repeat(6, 1fr);
  }
  .grid-7-sm {
    grid-template-columns: repeat(7, 1fr);
  }
  .grid-8-sm {
    grid-template-columns: repeat(8, 1fr);
  }
  .grid-9-sm {
    grid-template-columns: repeat(9, 1fr);
  }
  .grid-10-sm {
    grid-template-columns: repeat(10, 1fr);
  }
  .grid-11-sm {
    grid-template-columns: repeat(11, 1fr);
  }
  .grid-12-sm {
    grid-template-columns: repeat(12, 1fr);
  }
}
.gutter-1 {
  grid-column-gap: 4px;
}

.gutter-2 {
  grid-column-gap: 8px;
}

.gutter-3 {
  grid-column-gap: 12px;
}

.gutter-4 {
  grid-column-gap: 16px;
}

.gutter-5 {
  grid-column-gap: 20px;
}

.gutter-6 {
  grid-column-gap: 24px;
}

.gutter-7 {
  grid-column-gap: 28px;
}

.gutter-8 {
  grid-column-gap: 32px;
}

.gutter-9 {
  grid-column-gap: 36px;
}

.gutter-10 {
  grid-column-gap: 40px;
}

.gutter-11 {
  grid-column-gap: 44px;
}

.gutter-12 {
  grid-column-gap: 48px;
}

.gutter-13 {
  grid-column-gap: 52px;
}

.gutter-14 {
  grid-column-gap: 56px;
}

.gutter-15 {
  grid-column-gap: 60px;
}

.gutter-20 {
  grid-column-gap: 80px;
}

.gutter-25 {
  grid-column-gap: 100px;
}

.gutter-30 {
  grid-column-gap: 120px;
}

@media only screen and (max-width: 1023px) {
  .gutter-1-md {
    grid-column-gap: 4px;
  }
  .gutter-2-md {
    grid-column-gap: 8px;
  }
  .gutter-3-md {
    grid-column-gap: 12px;
  }
  .gutter-4-md {
    grid-column-gap: 16px;
  }
  .gutter-5-md {
    grid-column-gap: 20px;
  }
  .gutter-6-md {
    grid-column-gap: 24px;
  }
  .gutter-7-md {
    grid-column-gap: 28px;
  }
  .gutter-8-md {
    grid-column-gap: 32px;
  }
  .gutter-9-md {
    grid-column-gap: 36px;
  }
  .gutter-10-md {
    grid-column-gap: 40px;
  }
  .gutter-11-md {
    grid-column-gap: 44px;
  }
  .gutter-12-md {
    grid-column-gap: 48px;
  }
  .gutter-13-md {
    grid-column-gap: 52px;
  }
  .gutter-14-md {
    grid-column-gap: 56px;
  }
  .gutter-15-md {
    grid-column-gap: 60px;
  }
  .gutter-20-md {
    grid-column-gap: 80px;
  }
  .gutter-25-md {
    grid-column-gap: 100px;
  }
  .gutter-30-md {
    grid-column-gap: 120px;
  }
}
@media only screen and (max-width: 767px) {
  .gutter-1-sm {
    grid-column-gap: 4px;
  }
  .gutter-2-sm {
    grid-column-gap: 8px;
  }
  .gutter-3-sm {
    grid-column-gap: 12px;
  }
  .gutter-4-sm {
    grid-column-gap: 16px;
  }
  .gutter-5-sm {
    grid-column-gap: 20px;
  }
  .gutter-6-sm {
    grid-column-gap: 24px;
  }
  .gutter-7-sm {
    grid-column-gap: 28px;
  }
  .gutter-8-sm {
    grid-column-gap: 32px;
  }
  .gutter-9-sm {
    grid-column-gap: 36px;
  }
  .gutter-10-sm {
    grid-column-gap: 40px;
  }
  .gutter-11-sm {
    grid-column-gap: 44px;
  }
  .gutter-12-sm {
    grid-column-gap: 48px;
  }
  .gutter-13-sm {
    grid-column-gap: 52px;
  }
  .gutter-14-sm {
    grid-column-gap: 56px;
  }
  .gutter-15-sm {
    grid-column-gap: 60px;
  }
  .gutter-20-sm {
    grid-column-gap: 80px;
  }
  .gutter-25-sm {
    grid-column-gap: 100px;
  }
  .gutter-30-sm {
    grid-column-gap: 120px;
  }
}
.gap-1 {
  grid-row-gap: 4px;
}

.gap-1 + .gap-1 {
  margin-top: 4px;
}

.gap-2 {
  grid-row-gap: 8px;
}

.gap-2 + .gap-2 {
  margin-top: 8px;
}

.gap-3 {
  grid-row-gap: 12px;
}

.gap-3 + .gap-3 {
  margin-top: 12px;
}

.gap-4 {
  grid-row-gap: 16px;
}

.gap-4 + .gap-4 {
  margin-top: 16px;
}

.gap-5 {
  grid-row-gap: 20px;
}

.gap-5 + .gap-5 {
  margin-top: 20px;
}

.gap-6 {
  grid-row-gap: 24px;
}

.gap-6 + .gap-6 {
  margin-top: 24px;
}

.gap-7 {
  grid-row-gap: 28px;
}

.gap-7 + .gap-7 {
  margin-top: 28px;
}

.gap-8 {
  grid-row-gap: 32px;
}

.gap-8 + .gap-8 {
  margin-top: 32px;
}

.gap-9 {
  grid-row-gap: 36px;
}

.gap-9 + .gap-9 {
  margin-top: 36px;
}

.gap-10 {
  grid-row-gap: 40px;
}

.gap-10 + .gap-10 {
  margin-top: 40px;
}

.gap-11 {
  grid-row-gap: 44px;
}

.gap-11 + .gap-11 {
  margin-top: 44px;
}

.gap-12 {
  grid-row-gap: 48px;
}

.gap-12 + .gap-12 {
  margin-top: 48px;
}

.gap-13 {
  grid-row-gap: 52px;
}

.gap-13 + .gap-13 {
  margin-top: 52px;
}

.gap-14 {
  grid-row-gap: 56px;
}

.gap-14 + .gap-14 {
  margin-top: 56px;
}

.gap-15 {
  grid-row-gap: 60px;
}

.gap-15 + .gap-15 {
  margin-top: 60px;
}

.gap-20 {
  grid-row-gap: 80px;
}

.gap-20 + .gap-20 {
  margin-top: 80px;
}

.gap-25 {
  grid-row-gap: 100px;
}

.gap-25 + .gap-25 {
  margin-top: 100px;
}

.gap-30 {
  grid-row-gap: 120px;
}

.gap-30 + .gap-30 {
  margin-top: 120px;
}

@media only screen and (max-width: 1023px) {
  .gap-1-md {
    grid-row-gap: 4px;
  }
  .gap-1-md + .gap-1-md {
    margin-top: 4px;
  }
  .gap-2-md {
    grid-row-gap: 8px;
  }
  .gap-2-md + .gap-2-md {
    margin-top: 8px;
  }
  .gap-3-md {
    grid-row-gap: 12px;
  }
  .gap-3-md + .gap-3-md {
    margin-top: 12px;
  }
  .gap-4-md {
    grid-row-gap: 16px;
  }
  .gap-4-md + .gap-4-md {
    margin-top: 16px;
  }
  .gap-5-md {
    grid-row-gap: 20px;
  }
  .gap-5-md + .gap-5-md {
    margin-top: 20px;
  }
  .gap-6-md {
    grid-row-gap: 24px;
  }
  .gap-6-md + .gap-6-md {
    margin-top: 24px;
  }
  .gap-7-md {
    grid-row-gap: 28px;
  }
  .gap-7-md + .gap-7-md {
    margin-top: 28px;
  }
  .gap-8-md {
    grid-row-gap: 32px;
  }
  .gap-8-md + .gap-8-md {
    margin-top: 32px;
  }
  .gap-9-md {
    grid-row-gap: 36px;
  }
  .gap-9-md + .gap-9-md {
    margin-top: 36px;
  }
  .gap-10-md {
    grid-row-gap: 40px;
  }
  .gap-10-md + .gap-10-md {
    margin-top: 40px;
  }
  .gap-11-md {
    grid-row-gap: 44px;
  }
  .gap-11-md + .gap-11-md {
    margin-top: 44px;
  }
  .gap-12-md {
    grid-row-gap: 48px;
  }
  .gap-12-md + .gap-12-md {
    margin-top: 48px;
  }
  .gap-13-md {
    grid-row-gap: 52px;
  }
  .gap-13-md + .gap-13-md {
    margin-top: 52px;
  }
  .gap-14-md {
    grid-row-gap: 56px;
  }
  .gap-14-md + .gap-14-md {
    margin-top: 56px;
  }
  .gap-15-md {
    grid-row-gap: 60px;
  }
  .gap-15-md + .gap-15-md {
    margin-top: 60px;
  }
  .gap-20-md {
    grid-row-gap: 80px;
  }
  .gap-20-md + .gap-20-md {
    margin-top: 80px;
  }
  .gap-25-md {
    grid-row-gap: 100px;
  }
  .gap-25-md + .gap-25-md {
    margin-top: 100px;
  }
  .gap-30-md {
    grid-row-gap: 120px;
  }
  .gap-30-md + .gap-30-md {
    margin-top: 120px;
  }
}
@media only screen and (max-width: 767px) {
  .gap-1-sm {
    grid-row-gap: 4px;
  }
  .gap-1-sm + .gap-1-sm {
    margin-top: 4px;
  }
  .gap-2-sm {
    grid-row-gap: 8px;
  }
  .gap-2-sm + .gap-2-sm {
    margin-top: 8px;
  }
  .gap-3-sm {
    grid-row-gap: 12px;
  }
  .gap-3-sm + .gap-3-sm {
    margin-top: 12px;
  }
  .gap-4-sm {
    grid-row-gap: 16px;
  }
  .gap-4-sm + .gap-4-sm {
    margin-top: 16px;
  }
  .gap-5-sm {
    grid-row-gap: 20px;
  }
  .gap-5-sm + .gap-5-sm {
    margin-top: 20px;
  }
  .gap-6-sm {
    grid-row-gap: 24px;
  }
  .gap-6-sm + .gap-6-sm {
    margin-top: 24px;
  }
  .gap-7-sm {
    grid-row-gap: 28px;
  }
  .gap-7-sm + .gap-7-sm {
    margin-top: 28px;
  }
  .gap-8-sm {
    grid-row-gap: 32px;
  }
  .gap-8-sm + .gap-8-sm {
    margin-top: 32px;
  }
  .gap-9-sm {
    grid-row-gap: 36px;
  }
  .gap-9-sm + .gap-9-sm {
    margin-top: 36px;
  }
  .gap-10-sm {
    grid-row-gap: 40px;
  }
  .gap-10-sm + .gap-10-sm {
    margin-top: 40px;
  }
  .gap-11-sm {
    grid-row-gap: 44px;
  }
  .gap-11-sm + .gap-11-sm {
    margin-top: 44px;
  }
  .gap-12-sm {
    grid-row-gap: 48px;
  }
  .gap-12-sm + .gap-12-sm {
    margin-top: 48px;
  }
  .gap-13-sm {
    grid-row-gap: 52px;
  }
  .gap-13-sm + .gap-13-sm {
    margin-top: 52px;
  }
  .gap-14-sm {
    grid-row-gap: 56px;
  }
  .gap-14-sm + .gap-14-sm {
    margin-top: 56px;
  }
  .gap-15-sm {
    grid-row-gap: 60px;
  }
  .gap-15-sm + .gap-15-sm {
    margin-top: 60px;
  }
  .gap-20-sm {
    grid-row-gap: 80px;
  }
  .gap-20-sm + .gap-20-sm {
    margin-top: 80px;
  }
  .gap-25-sm {
    grid-row-gap: 100px;
  }
  .gap-25-sm + .gap-25-sm {
    margin-top: 100px;
  }
  .gap-30-sm {
    grid-row-gap: 120px;
  }
  .gap-30-sm + .gap-30-sm {
    margin-top: 120px;
  }
}
.column-offset-1 {
  grid-column-start: 2;
}

.column-offset-2 {
  grid-column-start: 3;
}

.column-offset-3 {
  grid-column-start: 4;
}

.column-offset-4 {
  grid-column-start: 5;
}

.column-offset-5 {
  grid-column-start: 6;
}

.column-offset-6 {
  grid-column-start: 7;
}

.column-offset-7 {
  grid-column-start: 8;
}

.column-offset-8 {
  grid-column-start: 9;
}

.column-offset-9 {
  grid-column-start: 10;
}

.column-offset-10 {
  grid-column-start: 11;
}

.column-offset-11 {
  grid-column-start: 12;
}

.column-offset-12 {
  grid-column-start: 13;
}

@media only screen and (max-width: 767px) {
  [class^=column-offset-],
  [class*=" column-offset-"] {
    grid-column-start: unset;
  }
}
@media only screen and (max-width: 767px) {
  .order-first-sm {
    order: -1;
  }
  .order-last-sm {
    order: 6;
  }
  .order-1-sm {
    order: 1;
  }
  .order-2-sm {
    order: 2;
  }
  .order-3-sm {
    order: 3;
  }
  .order-4-sm {
    order: 4;
  }
  .order-5-sm {
    order: 5;
  }
  .order-6-sm {
    order: 6;
  }
}
.heading-tagline {
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.heading-semibold {
  font-weight: var(--font-weight-semibold);
}

.heading-normal {
  font-weight: normal;
}

.heading-heavy {
  font-weight: var(--font-weight-heavy);
}

[class^=heading-],
[class*=" heading-"] {
  --heading-color: var(--heading-default);
  --heading-font-size: inherit;
  --heading-line-height: inherit;
  font-size: var(--heading-font-size);
  line-height: var(--heading-line-height);
  color: var(--heading-color);
}

[class^=heading-gradient],
[class^=heading-gradient] a,
[class*=" heading-gradient"],
[class*=" heading-gradient"] a {
  display: inline-block;
  background-clip: text;
  background-color: #000;
  background-image: var(--heading-color);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
[class^=heading-gradient] a,
[class^=heading-gradient] a:hover,
[class*=" heading-gradient"] a,
[class*=" heading-gradient"] a:hover {
  opacity: 1;
}

.heading-super {
  --heading-font-size: 80px;
  --heading-line-height: 1.1;
}
.heading-giga {
  --heading-font-size: 64px;
  --heading-line-height: 1.1;
}
.heading-mega {
  --heading-font-size: 48px;
  --heading-line-height: 1.1;
}
.heading-huge {
  --heading-font-size: 40px;
  --heading-line-height: 1.2;
}
.heading-large {
  --heading-font-size: 32px;
  --heading-line-height: 1.2;
}
.heading-medium {
  --heading-font-size: 24px;
  --heading-line-height: 1.3;
}
.heading-small {
  --heading-font-size: 20px;
  --heading-line-height: 1.3;
}
.heading-micro {
  --heading-font-size: 16px;
  --heading-line-height: 1.4;
}
.heading-tagline {
  --heading-font-size: 11px;
  --heading-line-height: 1.4;
}

@media only screen and (max-width: 767px) {
  .heading-super {
    --heading-font-size: 52px;
    --heading-line-height: 1.1;
  }
  .heading-giga {
    --heading-font-size: 52px;
    --heading-line-height: 1.1;
  }
}
.heading {
  --heading-color: var(--palette-black);
}

.heading-dark-mid {
  --heading-color: var(--palette-black-70);
}

.heading-muted {
  --heading-color: var(--palette-black-50);
}

.heading-light {
  --heading-color: var(--palette-white-95);
}

.heading-light-mid {
  --heading-color: var(--palette-white-70);
}

.heading-primary {
  --heading-color: var(--palette-primary-base);
}

.hint {
  --hint-color: var(--palette-black-50);
  --hint-font-size: var(--type-scale-13);
  --hint-font-weight: normal;
  --hint-font-style: normal;
  --hint-line-height: var(--body-text-line);
  font-size: var(--hint-font-size);
  font-weight: var(--hint-font-weight);
  font-style: var(--hint-font-style);
  line-height: var(--hint-line-height);
  color: var(--hint-color);
}

label .hint {
  text-transform: none;
  font-weight: normal;
  letter-spacing: 0;
}

div.hint {
  margin-top: 2px;
}

.hint-light {
  --hint-color: var(--palette-white-70);
}

.hint-success {
  --hint-color: var(--palette-positive-dark);
}

.hint-success.hint-light {
  --hint-color: var(--palette-positive-mid);
}

.hint-error {
  --hint-color: var(--palette-negative-dark);
}

.hint-req {
  --hint-color: var(--palette-negative-base);
  --hint-font-weight: bold;
  font-size: 105%;
}

.hint-req.hint-light,
.hint-error.hint-light {
  --hint-color: var(--palette-negative-mid);
}

.icon {
  --icon-size: 1em;
  --icon-color: currentColor;
  display: inline-block;
}
.icon svg {
  display: inline-block;
  vertical-align: middle;
}

.icon-text {
  --icon-size: 1em;
  --icon-color: currentColor;
  display: inline-flex;
  align-self: center;
  position: relative;
  top: 0.125em;
}

.icon svg,
.icon-text svg {
  fill: var(--icon-color);
  height: var(--icon-size);
  width: var(--icon-size);
}

.icon-dark,
a.icon-dark {
  --icon-color: var(--palette-black);
}

.icon-light,
a.icon-light {
  --icon-color: var(--palette-white);
}

.icon-primary,
a.icon-primary {
  --icon-color: var(--palette-primary-base);
}

.icon-12 {
  --icon-size: 12px;
}

.icon-14 {
  --icon-size: 14px;
}

.icon-16 {
  --icon-size: 16px;
}

.icon-20 {
  --icon-size: 20px;
}

.icon-24 {
  --icon-size: 24px;
}

.icon-32 {
  --icon-size: 32px;
}

.icon-48 {
  --icon-size: 48px;
}

.icon-64 {
  --icon-size: 64px;
}

@media only screen and (max-width: 767px) {
  .icon-12-sm {
    --icon-size: 12px;
  }
  .icon-14-sm {
    --icon-size: 14px;
  }
  .icon-16-sm {
    --icon-size: 16px;
  }
  .icon-20-sm {
    --icon-size: 20px;
  }
  .icon-24-sm {
    --icon-size: 24px;
  }
  .icon-32-sm {
    --icon-size: 32px;
  }
  .icon-48-sm {
    --icon-size: 48px;
  }
  .icon-64-sm {
    --icon-size: 64px;
  }
}
.iconbox {
  --iconbox-space: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  text-align: center;
  line-height: 0;
  padding: var(--iconbox-space);
}

.iconbox-small {
  --iconbox-space: 4px;
}

.iconbox-medium {
  --iconbox-space: 6px;
}

.iconbox-large {
  --iconbox-space: 10px;
}

.iconbox-huge {
  --iconbox-space: 12px;
}

.image-cover {
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}
.image-cover img {
  flex-shrink: 0;
  min-width: 100%;
  min-height: 100%;
}

.image-overlay {
  --image-overlay-color: transparent;
  --image-overlay-opacity: 1;
  position: relative;
}
.image-overlay:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: var(--image-overlay-color);
  opacity: var(--image-overlay-opacity);
}

.image-overlay-light {
  --image-overlay-color: var(--palette-white-50);
}

.image-overlay-dark {
  --image-overlay-color: var(--palette-black-50);
}

.image-32 {
  width: 32px;
  height: 32px;
}

.image-48 {
  width: 48px;
  height: 48px;
}

.image-64 {
  width: 64px;
  height: 64px;
}

.image-96px {
  width: 96px;
  height: 96px;
}

.image-128 {
  width: 128px;
  height: 128px;
}

dfn,
abbr {
  font-size: 95%;
}

cite,
small,
var,
kbd,
code {
  font-size: 85%;
}

sup,
sub {
  font-size: 65%;
}

var,
code,
kbd {
  display: inline-block;
  font-family: var(--font-mono);
  font-style: normal;
  line-height: 1;
  vertical-align: baseline;
}

kbd,
code {
  border-radius: var(--radius-base);
}

kbd {
  color: var(--inline-kbd-color);
  background-color: var(--inline-kbd-background-color);
  border: 1px solid var(--inline-kbd-border-color);
  padding: 0.2em 0.4em;
}

var {
  color: var(--inline-var-color);
  background-color: var(--inline-var-background-color);
  border: 1px solid var(--inline-var-border-color);
}

code {
  position: relative;
  top: -1px;
  padding: 0.2em 0.4em 0.2em;
  color: var(--inline-code-color);
  background-color: var(--inline-code-background-color);
  border: 1px solid var(--inline-code-border-color);
}

mark {
  background-color: yellow;
  color: black;
}

b,
strong {
  font-weight: bold;
}

dfn,
abbr[title] {
  letter-spacing: 0.01em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 1px dotted rgba(0, 0, 0, 0.4);
  cursor: help;
}

cite {
  color: var(--inline-cite-color);
  font-style: italic;
}

sub,
sup {
  line-height: 1;
  margin-left: 2px;
}

sub {
  vertical-align: sub;
}

sup {
  vertical-align: super;
}

.input {
  --input-color: var(--palette-neutral-darker);
  --input-border-color: var(--palette-black-20);
  --input-background-color: var(--palette-white);
  --input-box-shadow: none;
  --input-focus-color: var(--palette-neutral-darker);
  --input-focus-border-color: transparent;
  --input-focus-outline-color: var(--palette-active-mid);
  --input-focus-background-color: var(--palette-white);
  --input-focus-box-shadow: none;
  --input-font-size: var(--type-scale-15);
  --input-line-height: var(--body-text-line);
  --input-border-radius: var(--radius-base);
  --input-padding: 0.3em 0.5em;
  --input-border-width: 1px;
  --input-border-style: solid;
  --input-outline-offset: -2px;
  --input-outline-width: 2px;
  --input-outline-style: solid;
  --input-box-shadow: none;
  --input-height: 42px;
  --input-select-toggle: url('data:image/svg+xml;utf8,<svg height="6" viewBox="0 0 10 6" width="10" xmlns="http://www.w3.org/2000/svg"><path fill="rgb(0,0,0)" opacity=".6" d="m6.6168815 3-4.44908109-4.09883609c-.22373388-.20615371-.22373388-.54039492 0-.74654863s.58647818-.20615371.81021206 0l4.85418712 4.47211041c.22373388.20615371.22373388.54039491 0 .74654862l-4.85418712 4.47211041c-.22373388.20615371-.58647818.20615371-.81021206 0s-.22373388-.54039492 0-.74654863z" fill-rule="evenodd" transform="matrix(0 1 -1 0 8 -2)"/></svg>');
  display: block;
  width: 100%;
  font-family: inherit;
  vertical-align: middle;
  font-weight: normal;
  padding: var(--input-padding);
  font-size: var(--input-font-size);
  line-height: var(--input-line-height);
  border-radius: var(--input-border-radius);
  border-width: var(--input-border-width);
  border-style: var(--input-border-style);
  border-color: var(--input-border-color);
  color: var(--input-color);
  background-color: var(--input-background-color);
  box-shadow: var(--input-box-shadow);
  height: var(--input-height);
}
.input.disabled, .input:disabled {
  resize: none;
  opacity: 0.6;
  cursor: default;
}
.input:focus {
  color: var(--input-focus-color);
  border-color: var(--input-focus-border-color);
  background-color: var(--input-focus-background-color);
  box-shadow: var(--input-focus-box-shadow);
  outline-color: var(--input-focus-outline-color);
  outline-style: var(--input-outline-style);
  outline-width: var(--input-outline-width);
  outline-offset: var(--input-outline-offset);
}
.input[type=radio], .input[type=checkbox] {
  outline: 2px solid var(--input-outline-color);
}

.input-small {
  --input-height: 36px;
  --input-font-size: var(--type-scale-14);
}

.input-large {
  --input-height: 52px;
  --input-font-size: var(--type-scale-18);
  --input-padding: 0.3em 0.4em;
}

.input-round {
  --input-border-radius: 99px;
  --input-padding: 0.3em 1em;
}

.input-light {
  --input-color: var(--palette-white-90);
  --input-border-color: var(--palette-white-40);
  --input-background-color: var(--palette-white-15);
  --input-box-shadow: none;
  --input-focus-color: var(--palette-white-90);
  --input-focus-outline-color: var(--palette-white-60);
  --input-focus-border-color: transparent;
  --input-focus-background-color: var(--palette-white-20);
}
.input-light::-webkit-input-placeholder {
  color: var(--placeholder-light);
}
.input-light::-moz-placeholder {
  color: var(--placeholder-light);
}
.input-light::-ms-input-placeholder {
  color: var(--placeholder-light);
}
.input-light::placeholder {
  color: var(--placeholder-light);
}

.input-error {
  --input-color: var(--palette-negative-dark);
  --input-border-color: var(--palette-negative-base);
  --input-outline-color: var(--palette-negative-base);
  --input-focus-color: var(--palette-negative-base);
  --input-focus-box-shadow: none;
  --input-focus-border-color: transparent;
  --input-focus-outline-color: var(--palette-negative-base);
}

.input-success {
  --input-color: var(--palette-positive-dark);
  --input-border-color: var(--palette-positive-base);
  --input-outline-color: var(--palette-positive-base);
  --input-focus-color: var(--palette-positive-base);
  --input-focus-box-shadow: none;
  --input-focus-border-color: transparent;
  --input-focus-outline-color: var(--palette-positive-base);
}

textarea,
textarea.input {
  --input-height: auto !important;
  resize: vertical;
  vertical-align: top;
}

select.input {
  -webkit-appearance: none;
  background-image: var(--input-select-toggle);
  background-repeat: no-repeat;
  background-position: right 0.65em center;
  padding-right: 28px !important;
}

select[multiple].input {
  --input-height: auto !important;
  background-image: none !important;
  padding: var(--input-padding) !important;
}

input[type=file] {
  --input-height: auto !important;
  width: auto;
  border: none;
  padding: 0;
  font-size: 13px;
  background: none;
  box-shadow: none;
  display: inline-block;
}

input[type=radio],
input[type=checkbox] {
  --input-height: auto !important;
  display: inline-block;
  width: auto;
  box-shadow: none;
  padding: 0;
}

.input-addon {
  --input-addon-color: var(--palette-black-60);
  --input-addon-background-color: var(--palette-black-5);
  --input-addon-border-color: var(--palette-black-10);
  --input-addon-font-size: 14px;
  --input-addon-padding: 0 0.85em;
  --input-addon-border-radius: var(--radius-small);
  --input-addon-border-width: 1px;
  --input-addon-border-style: solid;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  text-align: center;
  font-size: var(--input-addon-font-size);
  padding: var(--input-addon-padding);
  border-radius: var(--input-addon-border-radius);
  color: var(--input-addon-color);
  background-color: var(--input-addon-background-color);
  border-width: var(--input-addon-border-width);
  border-style: var(--input-addon-border-style);
  border-color: var(--input-addon-border-color);
}

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

.item {
  position: relative;
}

.label {
  --label-background-color: var(--palette-neutral-lighter);
  --label-border-color: transparent;
  --label-color: var(--palette-neutral-darker);
  --label-font-size: var(--type-scale-12);
  --label-font-weight: var(--font-weight-semibold);
  --label-border-radius: var(--radius-medium);
  --label-padding: 6px 10px;
  --label-border-width: 1px;
  --label-border-style: solid;
  --label-text-transform: none;
  --label-close-size: 10px;
  --label-close-space: 3px;
  font-weight: var(--label-font-weight);
  font-size: var(--label-font-size);
  border-radius: var(--label-border-radius);
  padding: var(--label-padding);
  border-width: var(--label-border-width);
  border-style: var(--label-border-style);
  text-transform: var(--label-text-transform);
  color: var(--label-color);
  border-color: var(--label-border-color);
  background-color: var(--label-background-color);
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  vertical-align: baseline;
  text-decoration: none;
  line-height: 1;
}
.label a {
  color: inherit;
  text-decoration: none;
}
.label a:hover {
  color: inherit;
  text-decoration: underline;
}
.label .close {
  --close-size: var(--label-close-size);
  margin-left: var(--label-close-space);
  margin-right: -2px;
}

a.label:hover {
  opacity: 1;
  text-decoration: underline;
  color: var(--label-color);
}

.label-dark {
  --label-background-color: var(--palette-black);
  --label-border-color: transparent;
  --label-color: var(--palette-negative-lightest);
}

.label-light {
  --label-background-color: var(--palette-white);
  --label-border-color: transparent;
  --label-color: var(--palette-black);
}

.link-stretched:after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  content: "";
}

.link-strong {
  font-weight: bold;
}

.link-semibold {
  font-weight: var(--font-weight-semibold);
}

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

.link-block {
  display: block;
}

.link-underline {
  text-decoration: underline;
}

.link-underline-off {
  text-decoration: none !important;
}

.link-ghost {
  text-decoration: none;
}

.link-ghost:hover {
  text-decoration: underline;
}

.link-icon,
.link-caret {
  display: flex;
  align-items: center;
}

.link-caret .caret {
  top: 1px;
}

.link-icon {
  --link-icon-space: 4px;
  gap: var(--link-icon-space);
}

[class^=link-],
[class*=" link-"] {
  --link-color: var(--link-default-color);
  --link-hover-color: var(--link-default-hover-color);
  --link-border-color: transparent;
  --link-hover-border-color: transparent;
  --link-background-color: transparent;
  --link-hover-background-color: transparent;
  --link-border-width: 1px;
  --link-border-style: solid;
  color: var(--link-color);
  background-color: var(--link-background-color);
  border-color: var(--link-border-color);
  border-style: var(--link-border-style);
  border-width: var(--link-border-width);
}
[class^=link-]:hover,
[class*=" link-"]:hover {
  color: var(--link-hover-color);
  background-color: var(--link-hover-background-color);
  border-color: var(--link-hover-border-color);
}

.link-mega {
  font-size: 24px;
}
.link-huge {
  font-size: 20px;
}
.link-large {
  font-size: 18px;
}
.link-medium {
  font-size: 14px;
}
.link-small {
  font-size: 13px;
}
.link-micro {
  font-size: 12px;
}

.link {
  --link-color: var(--palette-active-dark);
  --link-hover-color: var(--palette-negative-dark);
}

.link-dark {
  --link-color: var(--palette-black);
  --link-hover-color: var(--palette-black-60);
}

.link-dark-mid {
  --link-color: var(--palette-black-70);
  --link-hover-color: var(--palette-black);
}

.link-muted {
  --link-color: var(--palette-black-50);
  --link-hover-color: var(--palette-black);
}

.link-light {
  --link-color: var(--palette-white-95);
  --link-hover-color: var(--palette-white-60);
}

.link-light-mid {
  --link-color: var(--palette-white-70);
  --link-hover-color: var(--palette-white);
}

.link-primary {
  --link-color: var(--palette-primary-base);
  --link-hover-color: var(--palette-black);
}

.list-unstyled,
.list-inline,
.list-checkmark,
.list-dashed {
  list-style: none;
  margin-left: 0;
}

.list-inline li {
  display: inline;
  white-space: nowrap;
  margin-right: 0.25em;
}

.list-checkmark,
.list-dashed {
  position: relative;
}

.list-checkmark {
  --list-mark-color: var(--text-default);
  --list-mark: "✓";
  padding-left: 1.3em;
}

.list-dashed {
  --list-mark-color: var(--text-default);
  --list-mark: "—";
  padding-left: 1.35em;
}

.list-checkmark li:before,
.list-dashed li:before {
  position: absolute;
  left: 0;
  content: var(--list-mark);
  color: var(--list-mark-color);
}

.list-checkmark.list-light {
  --list-color: var(--palette-white-90);
  --list-mark-color: var(--palette-white-80);
}

.list-dashed.list-light {
  --list-color: var(--palette-white-90);
  --list-mark-color: var(--palette-white-80);
}

.list {
  --list-item-color: var(--text-default);
  --list-font-size: var(--type-scale-15);
  --list-line-height: 1.3;
  --list-item-space: 0;
  --list-item-padding-y: 6px;
  --list-item-padding-x: 0;
  --list-item-font-weight: normal;
  list-style: none;
  margin-left: 0;
  color: var(--list-color);
}
.list .list-item {
  font-size: var(--list-font-size);
  font-weight: var(--list-item-font-weight);
  line-height: var(--list-line-height);
  padding-top: var(--list-item-padding-y);
  padding-bottom: var(--list-item-padding-y);
  padding-left: var(--list-item-padding-x);
  padding-right: var(--list-item-padding-x);
  margin-bottom: var(--list-item-space);
  color: var(--list-item-color);
}
.list .list-item:last-child {
  margin-bottom: 0;
}
.list .list-item .list {
  width: 100%;
  margin-top: 3px;
  margin-bottom: 3px;
  margin-left: 5rem;
}
.list .list + h4,
.list .list + h5,
.list .list + h6 {
  margin-top: 5rem;
}
.list .label {
  margin-top: -2px;
}

.list-medium {
  --list-font-size: var(--type-scale-14);
}

.list-small {
  --list-font-size: var(--type-scale-13);
}

.list-light {
  --list-item-color: var(--palette-white-90);
}

.list-strong {
  --list-item-font-weight: bold;
}

.list-semibold {
  --list-item-font-weight: var(--font-weight-semibold);
}

.list-stacked {
  --list-item-border-color: var(--palette-black-7);
  --list-item-padding-y: 8px;
  --list-item-border-width: 1px;
  --list-item-border-style: solid;
}
.list-stacked .list-item {
  border-bottom-width: var(--list-item-border-width);
  border-bottom-style: var(--list-item-border-style);
  border-bottom-color: var(--list-item-border-color);
}
.list-stacked .list-item:last-child {
  border-bottom-color: transparent;
}

.list-stacked.list-light {
  --list-border-color: var(--palette-white-20);
}

.list-bordered {
  --list-border-color: var(--palette-black-7);
  --list-border-width: 1px;
  --list-border-style: solid;
  --list-border-radius: var(--radius-base);
  --list-item-padding-y: 6px;
  --list-item-padding-x: 12px;
  --list-item-space: 1px;
  border-width: var(--list-border-width);
  border-radius: var(--list-border-radius);
  border-style: var(--list-border-style);
  border-color: var(--list-border-color);
}
.list-bordered .list-item:last-child {
  margin-bottom: 0;
}

.list-bordered.list-light {
  --list-border-color: var(--palette-white-20);
}

.list-numbered {
  --list-number-color: var(--palette-black-60);
  --list-number-font-size: 80%;
  --list-number-width: 22px;
  counter-reset: numbers;
}
.list-numbered .list-item {
  display: flex;
  align-items: center;
  counter-increment: numbers;
}
.list-numbered .list-item:before {
  width: var(--list-number-width);
  font-size: var(--list-number-font-size);
  content: counter(numbers, decimal-leading-zero);
  color: var(--list-number-color);
}

.list-numbered.list-light {
  --list-number-color: var(--palette-white-60);
}

.list-numbered-right .list-item {
  position: relative;
  padding-right: calc(var(--list-number-width) + 4px);
}
.list-numbered-right .list-item:before {
  display: none;
}
.list-numbered-right .list-item:after {
  position: absolute;
  right: 0;
  width: var(--list-number-width);
  font-size: var(--list-number-font-size);
  content: counter(numbers, decimal-leading-zero);
  text-align: right;
  color: var(--list-number-color);
}

.menu {
  --menu-link-color: var(--palette-black);
  --menu-link-background-color: transparent;
  --menu-link-hover-color: var(--palette-black-60);
  --menu-link-hover-background-color: transparent;
  --menu-link-active-color: var(--palette-black-40);
  --menu-link-active-background-color: transparent;
  --menu-font-size: var(--type-scale-15);
  --menu-nested-margin: 5rem;
  --menu-line-height: 1.3;
  --menu-link-padding-x: 0;
  --menu-link-padding-y: 6px;
  --menu-link-font-weight: normal;
  --menu-link-active-font-weight: normal;
  --menu-item-space: 0;
  --menu-item-padding: 0;
  font-size: var(--menu-font-size);
  line-height: var(--menu-line-height);
}
.menu .menu-item {
  padding: var(--menu-item-padding);
  margin-bottom: var(--menu-item-space);
}
.menu .menu-item:last-child {
  margin-bottom: 0;
}
.menu .menu-item.active .menu-link {
  text-decoration: none;
  font-weight: var(--menu-link-active-font-weight);
  color: var(--menu-link-active-color);
  background-color: var(--menu-link-active-background-color);
}
.menu .menu-link {
  display: flex;
  align-items: center;
  flex: 1;
  text-decoration: none;
  font-weight: var(--menu-link-font-weight);
  padding-top: var(--menu-link-padding-y);
  padding-bottom: var(--menu-link-padding-y);
  padding-left: var(--menu-link-padding-x);
  padding-right: var(--menu-link-padding-x);
  color: var(--menu-link-color);
  background-color: var(--menu-link-background-color);
}
.menu .menu-link:hover {
  text-decoration: underline;
  color: var(--menu-link-hover-color);
  background-color: var(--menu-link-hover-background-color);
}
.menu .menu-link-box {
  display: flex;
  align-items: center;
}
.menu .menu {
  margin-left: var(--menu-nested-margin);
}
.menu .menu-flat {
  margin-left: 0;
}
.menu .menu-list + h4,
.menu .menu-list + h5,
.menu .menu-list + h6 {
  margin-top: 5rem;
}
.menu .label {
  margin-top: -2px;
}

.menu-medium {
  --menu-font-size: var(--type-scale-14);
}

.menu-small {
  --menu-font-size: var(--type-scale-13);
}

.menu-semibold .menu-link {
  --menu-link-font-weight: var(--font-weight-semibold);
  --menu-link-active-font-weight: var(--font-weight-semibold);
}
.menu-semibold .caret {
  --caret-thickness: 2px;
}

.menu-strong .menu-link {
  --menu-link-font-weight: bold;
  --menu-link-active-font-weight: bold;
}
.menu-strong .caret {
  --caret-thickness: 2px;
}

.menu-underline .menu-link {
  text-decoration: underline;
}

.menu-underline-off .menu-link:hover {
  text-decoration: none;
}

.menu-primary {
  --menu-link-color: var(--palette-primary-dark);
  --menu-link-hover-color: var(--palette-primary-darker);
  --menu-link-active-color: var(--palette-black-40);
}

.menu-muted {
  --menu-link-color: var(--palette-black-60);
  --menu-link-hover-color: var(--palette-black);
  --menu-link-active-color: var(--palette-black);
}

.menu-light {
  --menu-link-color: var(--palette-white-80);
  --menu-link-hover-color: var(--palette-white);
  --menu-link-active-color: var(--palette-white-50);
}

.menu-stacked {
  --menu-item-border-color: var(--palette-black-7);
  --menu-link-padding-y: 8px;
  --menu-item-border-width: 1px;
  --menu-item-border-style: solid;
}
.menu-stacked .menu-item {
  border-bottom-width: var(--menu-item-border-width);
  border-bottom-style: var(--menu-item-border-style);
  border-bottom-color: var(--menu-item-border-color);
}
.menu-stacked .menu-item:last-child {
  border-bottom-color: transparent;
}

.menu-stacked.menu-light {
  --menu-item-border-color: var(--palette-white-20);
}

.menu-pills {
  --menu-link-color: var(--palette-black);
  --menu-link-hover-background-color: var(--palette-black-10);
  --menu-link-active-color: var(--palette-neutral-lightest);
  --menu-link-active-background-color: var(--palette-black);
  --menu-link-padding-y: 6px;
  --menu-link-padding-x: 10px;
  --menu-link-border-radius: var(--radius-base);
  --menu-item-space: 1px;
}
.menu-pills .menu-link {
  border-radius: var(--menu-link-border-radius);
}
.menu-pills .menu-link:hover {
  text-decoration: none;
}

.menu-numbered {
  --menu-number-color: var(--palette-black-60);
  --menu-number-font-size: 80%;
  --menu-number-width: 22px;
}
.menu-numbered .menu-list {
  counter-reset: numbers;
}
.menu-numbered .menu-item {
  display: flex;
  align-items: center;
  counter-increment: numbers;
}
.menu-numbered .menu-item:before {
  width: var(--menu-number-width);
  font-size: var(--menu-number-font-size);
  content: counter(numbers, decimal-leading-zero);
  color: var(--menu-number-color);
}

.menu-numbered.menu-light {
  --menu-number-color: var(--palette-white-60);
}

.menu-numbered-right .menu-item:before {
  display: none;
}
.menu-numbered-right .menu-item:after {
  width: var(--menu-number-width);
  font-size: var(--menu-number-font-size);
  content: counter(numbers, decimal-leading-zero);
  text-align: right;
}

.nav {
  --nav-link-color: var(--palette-black);
  --nav-link-background-color: transparent;
  --nav-link-hover-color: var(--palette-black-60);
  --nav-link-hover-background-color: transparent;
  --nav-link-active-color: var(--palette-black-40);
  --nav-link-active-background-color: transparent;
  --nav-font-size: var(--type-scale-14);
  --nav-item-space: 6rem;
  --nav-link-padding: 0;
  --nav-link-border-radius: 0;
  --nav-link-font-weight: normal;
  --nav-link-active-font-weight: normal;
  font-size: var(--nav-font-size);
}
.nav .nav-list {
  display: flex;
  align-items: center;
}
.nav .nav-item {
  display: flex;
  align-items: center;
  margin-right: var(--nav-item-space);
}
.nav .nav-item.active .nav-link {
  text-decoration: none;
  font-weight: var(--nav-link-active-font-weight);
  color: var(--nav-link-active-color);
  background-color: var(--nav-link-active-background-color);
}
.nav .nav-link {
  display: flex;
  align-items: center;
  white-space: nowrap;
  text-decoration: none;
  line-height: 1;
  font-weight: var(--nav-link-font-weight);
  padding: var(--nav-link-padding);
  border-radius: var(--nav-link-border-radius);
  color: var(--nav-link-color);
  background-color: var(--nav-link-background-color);
}
.nav .nav-link:hover {
  text-decoration: underline;
  color: var(--nav-link-hover-color);
  background-color: var(--nav-link-hover-background-color);
}
.nav .caret {
  margin-left: 2px;
}

.nav-small {
  --nav-font-size: var(--type-scale-13);
  --nav-item-space: 5rem;
}

.nav-semibold .nav-link {
  --nav-link-font-weight: var(--font-weight-semibold);
  --nav-link-active-font-weight: var(--font-weight-semibold);
}
.nav-semibold .caret {
  --caret-thickness: 2px;
}

.nav-strong .nav-link {
  --nav-link-font-weight: bold;
  --nav-link-active-font-weight: bold;
}
.nav-strong .caret {
  --caret-thickness: 2px;
}

.nav-underline .nav-link {
  text-decoration: underline;
}

.nav-underline-off .nav-link:hover {
  text-decoration: none;
}

.nav-primary {
  --nav-link-color: var(--palette-primary-dark);
  --nav-link-hover-color: var(--palette-primary-darker);
  --nav-link-active-color: var(--palette-black-40);
}

.nav-light {
  --nav-link-color: var(--palette-white-80);
  --nav-link-hover-color: var(--palette-white);
  --nav-link-active-color: var(--palette-white-50);
}

.nav-muted {
  --nav-link-color: var(--palette-black-60);
  --nav-link-hover-color: var(--palette-black);
  --nav-link-active-color: var(--palette-black);
}

.nav-pills {
  --nav-link-color: var(--palette-black);
  --nav-link-hover-background-color: var(--palette-black-10);
  --nav-link-active-color: var(--palette-neutral-lightest);
  --nav-link-active-background-color: var(--palette-black);
  --nav-item-space: 1rem;
  --nav-link-padding: 7px 16px;
  --nav-link-border-radius: 99px;
}
.nav-pills .nav-link:hover {
  text-decoration: none;
}

.nav-pills.nav-light {
  --nav-link-color: var(--palette-white-70);
  --nav-link-hover-background-color: var(--palette-white-30);
  --nav-link-active-color: var(--palette-black);
  --nav-link-active-background-color: var(--palette-white-95);
}

.nav-points {
  --nav-border-color: var(--palette-black-10);
  --nav-link-color: var(--palette-black-50);
  --nav-link-border-color: transparent;
  --nav-link-background-color: transparent;
  --nav-link-hover-color: var(--palette-black);
  --nav-link-hover-border-color: var(--palette-black);
  --nav-link-hover-background-color: var(--palette-neutral-lightest);
  --nav-link-active-color: var(--palette-black);
  --nav-link-active-border-color: var(--palette-black);
  --nav-link-active-background-color: transparent;
  --nav-border-width: 2px;
  --nav-item-space: 1px;
  --nav-link-padding: 12px 14px 10px 14px;
}
.nav-points .nav-list {
  border-bottom-width: var(--nav-border-width);
  border-bottom-style: solid;
  border-bottom-color: var(--nav-border-color);
}
.nav-points .nav-item.active .nav-link {
  border-bottom-color: var(--nav-link-active-border-color);
}
.nav-points .nav-link {
  border-bottom-width: var(--nav-border-width);
  margin-bottom: calc(var(--nav-border-width) * -1);
  border-bottom-style: solid;
  border-bottom-color: var(--nav-link-border-color);
}
.nav-points .nav-link:hover {
  text-decoration: none;
  border-bottom-color: var(--nav-link-hover-border-color);
}

.nav-points.nav-light {
  --nav-border-color: var(--palette-white-20);
  --nav-link-color: var(--palette-white-60);
  --nav-link-hover-color: var(--palette-white);
  --nav-link-hover-border-color: var(--palette-white);
  --nav-link-hover-background-color: var(--palette-white-30);
  --nav-link-active-color: var(--palette-white);
  --nav-link-active-border-color: var(--palette-white);
}

.nav-tabs {
  --nav-link-color: var(--palette-black-50);
  --nav-link-background-color: var(--palette-black-5);
  --nav-link-hover-color: var(--palette-black);
  --nav-link-hover-background-color: var(--palette-white);
  --nav-link-active-color: var(--palette-black);
  --nav-link-active-background-color: var(--palette-white);
  --nav-item-space: 1px;
  --nav-link-padding: 12px 16px 10px 16px;
}
.nav-tabs .nav-link:hover {
  text-decoration: none;
}

.nav-tabs.nav-light {
  --nav-link-color: var(--palette-white-70);
  --nav-link-background-color: var(--palette-white-20);
}

.nav-switcher {
  --nav-border-color: var(--palette-black-10);
  --nav-link-color: var(--palette-black-50);
  --nav-link-border-color: transparent;
  --nav-link-background-color: transparent;
  --nav-link-hover-color: var(--palette-black);
  --nav-link-hover-border-color: var(--palette-black);
  --nav-link-hover-background-color: transparent;
  --nav-link-active-color: var(--palette-black);
  --nav-link-active-border-color: var(--palette-black);
  --nav-link-active-background-color: transparent;
  --nav-border-width: 1px;
  --nav-item-space: 1px;
  --nav-link-padding: 8px 16px;
  --nav-link-border-radius: 99px;
  --nav-link-border-width: 2px;
}
.nav-switcher .nav-list {
  display: inline-flex;
  border-color: var(--nav-border-color);
  border-width: var(--nav-border-width);
  border-style: solid;
  border-radius: var(--nav-link-border-radius);
}
.nav-switcher .nav-item {
  margin-top: calc(var(--nav-border-width) * -1);
  margin-bottom: calc(var(--nav-border-width) * -1);
}
.nav-switcher .nav-item.active .nav-link {
  border-color: var(--nav-link-active-border-color);
}
.nav-switcher .nav-link {
  border-width: var(--nav-link-border-width);
  border-color: var(--nav-link-border-color);
  border-style: solid;
}
.nav-switcher .nav-link:hover {
  text-decoration: none;
  border-color: var(--nav-link-hover-border-color);
}

.nav-switcher.nav-light {
  --nav-border-color: var(--palette-white-30);
  --nav-link-color: var(--palette-white-60);
  --nav-link-hover-color: var(--palette-white);
  --nav-link-hover-border-color: var(--palette-white);
  --nav-link-active-color: var(--palette-white);
  --nav-link-active-border-color: var(--palette-white);
}

.nav-centered {
  --nav-item-space: 3rem;
  flex: 1 1 auto;
}
.nav-centered .nav-list {
  justify-content: center;
}
.nav-centered .nav-item {
  margin-left: var(--nav-item-space);
  margin-right: var(--nav-item-space);
}

.nav-centered.nav-pills {
  --nav-item-space: 0.5rem;
}

.nav-centered.nav-points,
.nav-centered.nav-tabs,
.nav-centered.nav-switcher {
  --nav-item-space: 1px;
}

.nav-centered.nav-switcher {
  flex: initial;
  margin-left: auto;
  margin-right: auto;
}

.nav-right .nav-item {
  margin-left: var(--nav-item-space);
  margin-right: 0;
}

.nav-right.nav-points,
.nav-right.nav-tabs {
  --nav-item-space: 1px;
}
.nav-right.nav-points .nav-item,
.nav-right.nav-tabs .nav-item {
  margin-left: 0;
  margin-right: var(--nav-item-space);
}
.nav-right.nav-points .nav-item:last-child,
.nav-right.nav-tabs .nav-item:last-child {
  margin-right: 0;
}

.nav-right.nav-pills {
  --nav-item-space: 1rem;
}
.nav-right.nav-pills .nav-item {
  margin-left: var(--nav-item-space);
  margin-right: 0;
}

.nav-full {
  flex: 1;
}
.nav-full .nav-item {
  flex: 1;
  justify-content: center;
  margin-left: 0;
  margin-right: 0;
}
.nav-full .nav-link {
  flex: 1;
  justify-content: center;
}

.nav-full.nav-tabs .nav-item {
  margin-right: var(--nav-item-space);
}
.nav-full.nav-tabs .nav-item:last-child {
  margin-right: 0;
}

.nav-full.nav-switcher .nav-list {
  display: flex;
}

@media only screen and (max-width: 767px) {
  .nav-left-sm .nav-list {
    justify-content: start;
  }
  .nav-left-sm .nav-item {
    flex: none;
    justify-content: start;
    margin-left: 0;
    margin-right: var(--nav-item-space);
  }
  .nav-overflow-sm {
    overflow-y: hidden;
    overflow-x: auto;
    white-space: nowrap;
  }
  .nav-overflow-sm .nav-list {
    display: inline-flex;
  }
  .nav-menu-sm {
    --nav-menu-item-space: 2rem;
  }
  .nav-menu-sm .nav-list {
    flex-direction: column;
    align-items: stretch;
  }
  .nav-menu-sm .nav-item {
    margin-left: 0;
    margin-right: 0;
    margin-top: var(--nav-menu-item-space);
    margin-bottom: var(--nav-menu-item-space);
  }
  .nav-menu-sm .nav-link {
    flex: 1;
    justify-content: flex-start;
  }
  .nav-menu-sm.nav-pills .nav-item {
    margin-top: 1px;
    margin-bottom: 1px;
  }
  .nav-menu-sm.nav-points .nav-list,
  .nav-menu-sm.nav-points .nav-link,
  .nav-menu-sm.nav-tabs .nav-list,
  .nav-menu-sm.nav-tabs .nav-link,
  .nav-menu-sm.nav-switcher .nav-list,
  .nav-menu-sm.nav-switcher .nav-link {
    border: none;
  }
  .nav-menu-sm.nav-points .nav-item,
  .nav-menu-sm.nav-tabs .nav-item,
  .nav-menu-sm.nav-switcher .nav-item {
    margin-top: 0;
    margin-bottom: 1px;
  }
  .nav-uncentered-sm {
    flex: 0;
  }
  .nav-uncentered-sm .nav-list {
    justify-content: flex-start;
  }
}
.navbar {
  --navbar-height: 16rem;
}
.navbar .navbar-container {
  display: flex;
  height: var(--navbar-height);
}
.navbar .navbar-container > div {
  display: flex;
  align-items: center;
}
.navbar .brand,
.navbar .nav,
.navbar .nav-list,
.navbar .nav-item,
.navbar .nav-link {
  height: 100%;
}

[class^=offset-],
[class*=" offset-"] {
  position: relative;
}

.offset-left-1 {
  left: -4px;
}

.offset-right-1 {
  right: -4px;
}

.offset-top-1 {
  top: -4px;
}

.offset-bottom-1 {
  bottom: -4px;
}

.offset-left-2 {
  left: -8px;
}

.offset-right-2 {
  right: -8px;
}

.offset-top-2 {
  top: -8px;
}

.offset-bottom-2 {
  bottom: -8px;
}

.offset-left-3 {
  left: -12px;
}

.offset-right-3 {
  right: -12px;
}

.offset-top-3 {
  top: -12px;
}

.offset-bottom-3 {
  bottom: -12px;
}

.offset-left-4 {
  left: -16px;
}

.offset-right-4 {
  right: -16px;
}

.offset-top-4 {
  top: -16px;
}

.offset-bottom-4 {
  bottom: -16px;
}

.offset-left-5 {
  left: -20px;
}

.offset-right-5 {
  right: -20px;
}

.offset-top-5 {
  top: -20px;
}

.offset-bottom-5 {
  bottom: -20px;
}

.offset-left-6 {
  left: -24px;
}

.offset-right-6 {
  right: -24px;
}

.offset-top-6 {
  top: -24px;
}

.offset-bottom-6 {
  bottom: -24px;
}

.offset-left-7 {
  left: -28px;
}

.offset-right-7 {
  right: -28px;
}

.offset-top-7 {
  top: -28px;
}

.offset-bottom-7 {
  bottom: -28px;
}

.offset-left-8 {
  left: -32px;
}

.offset-right-8 {
  right: -32px;
}

.offset-top-8 {
  top: -32px;
}

.offset-bottom-8 {
  bottom: -32px;
}

.offset-left-9 {
  left: -36px;
}

.offset-right-9 {
  right: -36px;
}

.offset-top-9 {
  top: -36px;
}

.offset-bottom-9 {
  bottom: -36px;
}

.offset-left-10 {
  left: -40px;
}

.offset-right-10 {
  right: -40px;
}

.offset-top-10 {
  top: -40px;
}

.offset-bottom-10 {
  bottom: -40px;
}

.offset-left-11 {
  left: -44px;
}

.offset-right-11 {
  right: -44px;
}

.offset-top-11 {
  top: -44px;
}

.offset-bottom-11 {
  bottom: -44px;
}

.offset-left-12 {
  left: -48px;
}

.offset-right-12 {
  right: -48px;
}

.offset-top-12 {
  top: -48px;
}

.offset-bottom-12 {
  bottom: -48px;
}

.offset-left-13 {
  left: -52px;
}

.offset-right-13 {
  right: -52px;
}

.offset-top-13 {
  top: -52px;
}

.offset-bottom-13 {
  bottom: -52px;
}

.offset-left-14 {
  left: -56px;
}

.offset-right-14 {
  right: -56px;
}

.offset-top-14 {
  top: -56px;
}

.offset-bottom-14 {
  bottom: -56px;
}

.offset-left-15 {
  left: -60px;
}

.offset-right-15 {
  right: -60px;
}

.offset-top-15 {
  top: -60px;
}

.offset-bottom-15 {
  bottom: -60px;
}

.offset-left-20 {
  left: -80px;
}

.offset-right-20 {
  right: -80px;
}

.offset-top-20 {
  top: -80px;
}

.offset-bottom-20 {
  bottom: -80px;
}

.offset-left-25 {
  left: -100px;
}

.offset-right-25 {
  right: -100px;
}

.offset-top-25 {
  top: -100px;
}

.offset-bottom-25 {
  bottom: -100px;
}

.offset-left-30 {
  left: -120px;
}

.offset-right-30 {
  right: -120px;
}

.offset-top-30 {
  top: -120px;
}

.offset-bottom-30 {
  bottom: -120px;
}

@media only screen and (max-width: 767px) {
  .offset-off-sm {
    left: initial;
    right: initial;
    top: initial;
    bottom: initial;
  }
  .offset-left-off-sm {
    left: initial;
  }
  .offset-right-off-sm {
    right: initial;
  }
  .offset-top-off-sm {
    top: initial;
  }
  .offset-bottom-off-sm {
    bottom: initial;
  }
  .offset-left-1-sm {
    left: -4px;
  }
  .offset-right-1-sm {
    right: -4px;
  }
  .offset-top-1-sm {
    top: -4px;
  }
  .offset-bottom-1-sm {
    bottom: -4px;
  }
  .offset-left-2-sm {
    left: -8px;
  }
  .offset-right-2-sm {
    right: -8px;
  }
  .offset-top-2-sm {
    top: -8px;
  }
  .offset-bottom-2-sm {
    bottom: -8px;
  }
  .offset-left-3-sm {
    left: -12px;
  }
  .offset-right-3-sm {
    right: -12px;
  }
  .offset-top-3-sm {
    top: -12px;
  }
  .offset-bottom-3-sm {
    bottom: -12px;
  }
  .offset-left-4-sm {
    left: -16px;
  }
  .offset-right-4-sm {
    right: -16px;
  }
  .offset-top-4-sm {
    top: -16px;
  }
  .offset-bottom-4-sm {
    bottom: -16px;
  }
  .offset-left-5-sm {
    left: -20px;
  }
  .offset-right-5-sm {
    right: -20px;
  }
  .offset-top-5-sm {
    top: -20px;
  }
  .offset-bottom-5-sm {
    bottom: -20px;
  }
  .offset-left-6-sm {
    left: -24px;
  }
  .offset-right-6-sm {
    right: -24px;
  }
  .offset-top-6-sm {
    top: -24px;
  }
  .offset-bottom-6-sm {
    bottom: -24px;
  }
  .offset-left-7-sm {
    left: -28px;
  }
  .offset-right-7-sm {
    right: -28px;
  }
  .offset-top-7-sm {
    top: -28px;
  }
  .offset-bottom-7-sm {
    bottom: -28px;
  }
  .offset-left-8-sm {
    left: -32px;
  }
  .offset-right-8-sm {
    right: -32px;
  }
  .offset-top-8-sm {
    top: -32px;
  }
  .offset-bottom-8-sm {
    bottom: -32px;
  }
  .offset-left-9-sm {
    left: -36px;
  }
  .offset-right-9-sm {
    right: -36px;
  }
  .offset-top-9-sm {
    top: -36px;
  }
  .offset-bottom-9-sm {
    bottom: -36px;
  }
  .offset-left-10-sm {
    left: -40px;
  }
  .offset-right-10-sm {
    right: -40px;
  }
  .offset-top-10-sm {
    top: -40px;
  }
  .offset-bottom-10-sm {
    bottom: -40px;
  }
  .offset-left-11-sm {
    left: -44px;
  }
  .offset-right-11-sm {
    right: -44px;
  }
  .offset-top-11-sm {
    top: -44px;
  }
  .offset-bottom-11-sm {
    bottom: -44px;
  }
  .offset-left-12-sm {
    left: -48px;
  }
  .offset-right-12-sm {
    right: -48px;
  }
  .offset-top-12-sm {
    top: -48px;
  }
  .offset-bottom-12-sm {
    bottom: -48px;
  }
  .offset-left-13-sm {
    left: -52px;
  }
  .offset-right-13-sm {
    right: -52px;
  }
  .offset-top-13-sm {
    top: -52px;
  }
  .offset-bottom-13-sm {
    bottom: -52px;
  }
  .offset-left-14-sm {
    left: -56px;
  }
  .offset-right-14-sm {
    right: -56px;
  }
  .offset-top-14-sm {
    top: -56px;
  }
  .offset-bottom-14-sm {
    bottom: -56px;
  }
  .offset-left-15-sm {
    left: -60px;
  }
  .offset-right-15-sm {
    right: -60px;
  }
  .offset-top-15-sm {
    top: -60px;
  }
  .offset-bottom-15-sm {
    bottom: -60px;
  }
  .offset-left-20-sm {
    left: -80px;
  }
  .offset-right-20-sm {
    right: -80px;
  }
  .offset-top-20-sm {
    top: -80px;
  }
  .offset-bottom-20-sm {
    bottom: -80px;
  }
  .offset-left-25-sm {
    left: -100px;
  }
  .offset-right-25-sm {
    right: -100px;
  }
  .offset-top-25-sm {
    top: -100px;
  }
  .offset-bottom-25-sm {
    bottom: -100px;
  }
  .offset-left-30-sm {
    left: -120px;
  }
  .offset-right-30-sm {
    right: -120px;
  }
  .offset-top-30-sm {
    top: -120px;
  }
  .offset-bottom-30-sm {
    bottom: -120px;
  }
}
.position-relative,
.position-base {
  position: relative;
}

.position-under,
.position-over {
  position: absolute !important;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  pointer-events: none;
}
.position-under > *,
.position-over > * {
  pointer-events: all;
}

.position-under {
  z-index: 1;
}

.position-base {
  z-index: 2;
}

.position-over {
  z-index: 3;
}

.prose {
  --prose-h1-to-tag: 5rem;
  --prose-h2-to-tag: 3rem;
  --prose-h3-to-tag: 3rem;
  --prose-h4-to-tag: 2rem;
  --prose-h5-to-tag: 2rem;
  --prose-h6-to-tag: 2rem;
  --prose-tag-to-tag: 5rem;
  --prose-tag-to-h2: 10rem;
  --prose-tag-to-h3: 8rem;
  --prose-tag-to-h4: 8rem;
  --prose-tag-to-h5: 8rem;
  --prose-tag-to-h6: 8rem;
  --prose-figure-to-tag: 6rem;
  --prose-h1-font-size: 64px;
  --prose-h1-line-height: 1.1;
  --prose-h2-font-size: 32px;
  --prose-h2-line-height: 1.2;
  --prose-h3-font-size: 20px;
  --prose-h3-line-height: 1.3;
  --prose-h4-font-size: 16px;
  --prose-h4-line-height: 1.4;
  --prose-h5-font-size: 16px;
  --prose-h5-line-height: 1.4;
  --prose-h6-font-size: 16px;
  --prose-h6-line-height: 1.4;
  --prose-lead-font-size: 24px;
  --prose-lead-line-height: 1.4;
  --prose-p-font-size: 16px;
  --prose-p-line-height: 1.5;
}
.prose .prose-title {
  font-size: var(--prose-h1-font-size);
  line-height: var(--prose-h1-line-height);
}
.prose .prose-lead {
  font-size: var(--prose-lead-font-size);
  line-height: var(--prose-lead-line-height);
}
.prose .prose-title + .prose-lead {
  margin-top: var(--prose-h1-to-tag);
}
.prose .prose-body > h1 + * {
  margin-top: var(--prose-h1-to-tag);
}
.prose .prose-body > h2 + * {
  margin-top: var(--prose-h2-to-tag);
}
.prose .prose-body > h3 + * {
  margin-top: var(--prose-h3-to-tag);
}
.prose .prose-body > h4 + * {
  margin-top: var(--prose-h4-to-tag);
}
.prose .prose-body > h5 + * {
  margin-top: var(--prose-h5-to-tag);
}
.prose .prose-body > h6 + * {
  margin-top: var(--prose-h6-to-tag);
}
.prose .prose-body > * + h2 {
  margin-top: var(--prose-tag-to-h2);
}
.prose .prose-body > * + h3 {
  margin-top: var(--prose-tag-to-h3);
}
.prose .prose-body > * + h4 {
  margin-top: var(--prose-tag-to-h4);
}
.prose .prose-body > * + h5 {
  margin-top: var(--prose-tag-to-h5);
}
.prose .prose-body > * + h6 {
  margin-top: var(--prose-tag-to-h6);
}
.prose .prose-body > * + * {
  margin-top: var(--prose-tag-to-tag);
}
.prose .prose-body > figure + *, .prose .prose-body > table + *, .prose .prose-body > div + * {
  margin-top: var(--prose-figure-to-tag);
}
.prose .prose-body > h1, .prose .prose-body > h1.prose-title {
  font-size: var(--prose-h1-font-size);
  line-height: var(--prose-h1-line-height);
}
.prose .prose-body > h2 {
  font-size: var(--prose-h2-font-size);
  line-height: var(--prose-h2-line-height);
}
.prose .prose-body > h3 {
  font-size: var(--prose-h3-font-size);
  line-height: var(--prose-h3-line-height);
}
.prose .prose-body > h4 {
  font-size: var(--prose-h4-font-size);
  line-height: var(--prose-h4-line-height);
}
.prose .prose-body > h5 {
  font-size: var(--prose-h5-font-size);
  line-height: var(--prose-h5-line-height);
}
.prose .prose-body > h6 {
  font-size: var(--prose-h6-font-size);
  line-height: var(--prose-h6-line-height);
}
.prose .prose-body > p.prose-lead {
  font-size: var(--prose-lead-font-size);
  line-height: var(--prose-lead-line-height);
}
.prose .prose-body > p {
  font-size: var(--prose-p-font-size);
  line-height: var(--prose-p-line-height);
}

.push-bottom {
  margin-top: auto;
}

.push-top {
  margin-bottom: auto;
}

.push-right {
  margin-left: auto;
}

.push-left {
  margin-right: auto;
}

@media only screen and (max-width: 767px) {
  .push-bottom-sm {
    margin-top: auto;
  }
  .push-top-sm {
    margin-bottom: auto;
  }
  .push-right-sm {
    margin-left: auto;
  }
  .push-left-sm {
    margin-right: auto;
  }
  .push-bottom-off-sm {
    margin-top: initial;
  }
  .push-top-off-sm {
    margin-bottom: initial;
  }
  .push-right-off-sm {
    margin-left: initial;
  }
  .push-left-off-sm {
    margin-right: initial;
  }
}
blockquote,
.quote {
  --quote-color: var(--text-default);
  --quote-background-color: transparent;
  --quote-font-size: var(--type-scale-20);
  --quote-font-style: normal;
  --quote-font-weight: normal;
  --quote-line-height: var(--body-text-line);
  --quote-padding-x: 0;
  --quote-padding-y: 0;
  --quote-space: 0.5em;
  --quote-border-radius: 0;
  padding-top: var(--quote-padding-y);
  padding-bottom: var(--quote-padding-y);
  padding-left: var(--quote-padding-x);
  padding-right: var(--quote-padding-x);
  border-radius: var(--quote-border-radius);
  background-color: var(--quote-background-color);
}
blockquote p,
.quote p {
  font-style: var(--quote-font-style);
  font-weight: var(--quote-font-weight);
  font-size: var(--quote-font-size);
  line-height: var(--quote-line-height);
  color: var(--quote-color);
}
blockquote p + p,
.quote p + p {
  margin-top: var(--quote-space);
}
blockquote .quote-caption,
.quote .quote-caption {
  --quote-caption-color: var(--text-default);
  --quote-caption-background-color: transparent;
  --quote-caption-font-size: var(--type-scale-15);
  --quote-caption-font-style: normal;
  --quote-caption-font-weight: normal;
  --quote-caption-line-height: var(--body-text-line);
  font-style: var(--quote-caption-font-style);
  font-weight: var(--quote-caption-font-weight);
  font-size: var(--quote-caption-font-size);
  line-height: var(--quote-caption-line-height);
  color: var(--quote-caption-color);
}

.quote-light {
  --quote-color: var(--text-light);
  --quote-background-color: transparent;
}
.quote-light .quote-caption {
  --quote-caption-color: var(--text-light);
  --quote-caption-background-color: transparent;
}

.radius-circle {
  border-radius: 9999px;
}

.radius-small {
  border-radius: 2px;
}

.radius-top-small {
  border-top-left-radius: 2px;
  border-top-right-radius: 2px;
}

.radius-bottom-small {
  border-bottom-left-radius: 2px;
  border-bottom-right-radius: 2px;
}

.radius-left-small {
  border-top-left-radius: 2px;
  border-bottom-left-radius: 2px;
}

.radius-right-small {
  border-top-right-radius: 2px;
  border-bottom-right-radius: 2px;
}

.radius-medium {
  border-radius: 4px;
}

.radius-top-medium {
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}

.radius-bottom-medium {
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}

.radius-left-medium {
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}

.radius-right-medium {
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}

.radius-base {
  border-radius: 6px;
}

.radius-top-base {
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
}

.radius-bottom-base {
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
}

.radius-left-base {
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;
}

.radius-right-base {
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px;
}

.radius-large {
  border-radius: 8px;
}

.radius-top-large {
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}

.radius-bottom-large {
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}

.radius-left-large {
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
}

.radius-right-large {
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
}

.radius-huge {
  border-radius: 12px;
}

.radius-top-huge {
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}

.radius-bottom-huge {
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
}

.radius-left-huge {
  border-top-left-radius: 12px;
  border-bottom-left-radius: 12px;
}

.radius-right-huge {
  border-top-right-radius: 12px;
  border-bottom-right-radius: 12px;
}

@media only screen and (max-width: 767px) {
  .radius-off-sm {
    border-radius: 0;
  }
  .radius-circle-sm {
    border-radius: 9999px;
  }
  .radius-small-sm {
    border-radius: 2px;
  }
  .radius-top-small-sm {
    border-top-left-radius: 2px;
    border-top-right-radius: 2px;
  }
  .radius-bottom-small-sm {
    border-bottom-left-radius: 2px;
    border-bottom-right-radius: 2px;
  }
  .radius-left-small-sm {
    border-top-left-radius: 2px;
    border-bottom-left-radius: 2px;
  }
  .radius-right-small-sm {
    border-top-right-radius: 2px;
    border-bottom-right-radius: 2px;
  }
  .radius-medium-sm {
    border-radius: 4px;
  }
  .radius-top-medium-sm {
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
  }
  .radius-bottom-medium-sm {
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
  }
  .radius-left-medium-sm {
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
  }
  .radius-right-medium-sm {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
  }
  .radius-base-sm {
    border-radius: 6px;
  }
  .radius-top-base-sm {
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
  }
  .radius-bottom-base-sm {
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
  }
  .radius-left-base-sm {
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
  }
  .radius-right-base-sm {
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
  }
  .radius-large-sm {
    border-radius: 8px;
  }
  .radius-top-large-sm {
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
  }
  .radius-bottom-large-sm {
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
  }
  .radius-left-large-sm {
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
  }
  .radius-right-large-sm {
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
  }
  .radius-huge-sm {
    border-radius: 12px;
  }
  .radius-top-huge-sm {
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
  }
  .radius-bottom-huge-sm {
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
  }
  .radius-left-huge-sm {
    border-top-left-radius: 12px;
    border-bottom-left-radius: 12px;
  }
  .radius-right-huge-sm {
    border-top-right-radius: 12px;
    border-bottom-right-radius: 12px;
  }
}
.row {
  display: flex;
  flex-wrap: wrap;
}
.row .input {
  width: auto;
  flex: 1 0 auto;
}
.row > * {
  margin-top: 0;
  margin-bottom: 0;
}

.row-1 {
  gap: 4px;
}

.row-2 {
  gap: 8px;
}

.row-3 {
  gap: 12px;
}

.row-4 {
  gap: 16px;
}

.row-5 {
  gap: 20px;
}

.row-6 {
  gap: 24px;
}

.row-7 {
  gap: 28px;
}

.row-8 {
  gap: 32px;
}

.row-9 {
  gap: 36px;
}

.row-10 {
  gap: 40px;
}

.row-11 {
  gap: 44px;
}

.row-12 {
  gap: 48px;
}

.row-13 {
  gap: 52px;
}

.row-14 {
  gap: 56px;
}

.row-15 {
  gap: 60px;
}

.row-20 {
  gap: 80px;
}

.row-25 {
  gap: 100px;
}

.row-30 {
  gap: 120px;
}

@media only screen and (max-width: 767px) {
  .row-column-sm {
    flex-direction: column;
  }
  .row-1-sm {
    gap: 4px;
  }
  .row-2-sm {
    gap: 8px;
  }
  .row-3-sm {
    gap: 12px;
  }
  .row-4-sm {
    gap: 16px;
  }
  .row-5-sm {
    gap: 20px;
  }
  .row-6-sm {
    gap: 24px;
  }
  .row-7-sm {
    gap: 28px;
  }
  .row-8-sm {
    gap: 32px;
  }
  .row-9-sm {
    gap: 36px;
  }
  .row-10-sm {
    gap: 40px;
  }
  .row-11-sm {
    gap: 44px;
  }
  .row-12-sm {
    gap: 48px;
  }
  .row-13-sm {
    gap: 52px;
  }
  .row-14-sm {
    gap: 56px;
  }
  .row-15-sm {
    gap: 60px;
  }
  .row-20-sm {
    gap: 80px;
  }
  .row-25-sm {
    gap: 100px;
  }
  .row-30-sm {
    gap: 120px;
  }
}
[class^=shadow-],
[class*=" shadow-"] {
  --shadow: none;
  box-shadow: var(--shadow);
}

.shadow-100 {
  --shadow: var(--shadow-100);
}

.shadow-150 {
  --shadow: var(--shadow-150);
}

.shadow-200 {
  --shadow: var(--shadow-200);
}

.shadow-250 {
  --shadow: var(--shadow-250);
}

.shadow-300 {
  --shadow: var(--shadow-300);
}

.shadow-350 {
  --shadow: var(--shadow-350);
}

.max-20 {
  width: 20%;
  min-width: 20%;
  max-width: 20%;
}

.h-20 {
  height: 20%;
}

.max-25 {
  width: 25%;
  min-width: 25%;
  max-width: 25%;
}

.h-25 {
  height: 25%;
}

.max-30 {
  width: 30%;
  min-width: 30%;
  max-width: 30%;
}

.h-30 {
  height: 30%;
}

.max-33 {
  width: 33%;
  min-width: 33%;
  max-width: 33%;
}

.h-33 {
  height: 33%;
}

.max-40 {
  width: 40%;
  min-width: 40%;
  max-width: 40%;
}

.h-40 {
  height: 40%;
}

.max-50 {
  width: 50%;
  min-width: 50%;
  max-width: 50%;
}

.h-50 {
  height: 50%;
}

.max-60 {
  width: 60%;
  min-width: 60%;
  max-width: 60%;
}

.h-60 {
  height: 60%;
}

.max-67 {
  width: 67%;
  min-width: 67%;
  max-width: 67%;
}

.h-67 {
  height: 67%;
}

.max-70 {
  width: 70%;
  min-width: 70%;
  max-width: 70%;
}

.h-70 {
  height: 70%;
}

.max-75 {
  width: 75%;
  min-width: 75%;
  max-width: 75%;
}

.h-75 {
  height: 75%;
}

.max-80 {
  width: 80%;
  min-width: 80%;
  max-width: 80%;
}

.h-80 {
  height: 80%;
}

.max-100 {
  width: 100%;
  min-width: 100%;
  max-width: 100%;
}

.h-100 {
  height: 100%;
}

.max-off {
  max-width: none;
  min-width: none;
  width: auto;
}

.h-off {
  height: auto;
}

.vh-full {
  min-height: 100vh;
}

@media only screen and (max-width: 767px) {
  .max-auto-sm {
    max-width: none;
    min-width: none;
    width: auto;
  }
  .h-auto-sm {
    height: auto;
  }
}
.p-1 {
  padding: 4px;
}

.p-2 {
  padding: 8px;
}

.p-3 {
  padding: 12px;
}

.p-4 {
  padding: 16px;
}

.p-5 {
  padding: 20px;
}

.p-6 {
  padding: 24px;
}

.p-7 {
  padding: 28px;
}

.p-8 {
  padding: 32px;
}

.p-9 {
  padding: 36px;
}

.p-10 {
  padding: 40px;
}

.p-11 {
  padding: 44px;
}

.p-12 {
  padding: 48px;
}

.p-13 {
  padding: 52px;
}

.p-14 {
  padding: 56px;
}

.p-15 {
  padding: 60px;
}

.p-20 {
  padding: 80px;
}

.p-25 {
  padding: 100px;
}

.p-30 {
  padding: 120px;
}

.my-1 {
  margin-top: 4px;
  margin-bottom: 4px;
}

.mx-1 {
  margin-left: 4px;
  margin-right: 4px;
}

.py-1 {
  padding-top: 4px;
  padding-bottom: 4px;
}

.px-1 {
  padding-left: 4px;
  padding-right: 4px;
}

.my-2 {
  margin-top: 8px;
  margin-bottom: 8px;
}

.mx-2 {
  margin-left: 8px;
  margin-right: 8px;
}

.py-2 {
  padding-top: 8px;
  padding-bottom: 8px;
}

.px-2 {
  padding-left: 8px;
  padding-right: 8px;
}

.my-3 {
  margin-top: 12px;
  margin-bottom: 12px;
}

.mx-3 {
  margin-left: 12px;
  margin-right: 12px;
}

.py-3 {
  padding-top: 12px;
  padding-bottom: 12px;
}

.px-3 {
  padding-left: 12px;
  padding-right: 12px;
}

.my-4 {
  margin-top: 16px;
  margin-bottom: 16px;
}

.mx-4 {
  margin-left: 16px;
  margin-right: 16px;
}

.py-4 {
  padding-top: 16px;
  padding-bottom: 16px;
}

.px-4 {
  padding-left: 16px;
  padding-right: 16px;
}

.my-5 {
  margin-top: 20px;
  margin-bottom: 20px;
}

.mx-5 {
  margin-left: 20px;
  margin-right: 20px;
}

.py-5 {
  padding-top: 20px;
  padding-bottom: 20px;
}

.px-5 {
  padding-left: 20px;
  padding-right: 20px;
}

.my-6 {
  margin-top: 24px;
  margin-bottom: 24px;
}

.mx-6 {
  margin-left: 24px;
  margin-right: 24px;
}

.py-6 {
  padding-top: 24px;
  padding-bottom: 24px;
}

.px-6 {
  padding-left: 24px;
  padding-right: 24px;
}

.my-7 {
  margin-top: 28px;
  margin-bottom: 28px;
}

.mx-7 {
  margin-left: 28px;
  margin-right: 28px;
}

.py-7 {
  padding-top: 28px;
  padding-bottom: 28px;
}

.px-7 {
  padding-left: 28px;
  padding-right: 28px;
}

.my-8 {
  margin-top: 32px;
  margin-bottom: 32px;
}

.mx-8 {
  margin-left: 32px;
  margin-right: 32px;
}

.py-8 {
  padding-top: 32px;
  padding-bottom: 32px;
}

.px-8 {
  padding-left: 32px;
  padding-right: 32px;
}

.my-9 {
  margin-top: 36px;
  margin-bottom: 36px;
}

.mx-9 {
  margin-left: 36px;
  margin-right: 36px;
}

.py-9 {
  padding-top: 36px;
  padding-bottom: 36px;
}

.px-9 {
  padding-left: 36px;
  padding-right: 36px;
}

.my-10 {
  margin-top: 40px;
  margin-bottom: 40px;
}

.mx-10 {
  margin-left: 40px;
  margin-right: 40px;
}

.py-10 {
  padding-top: 40px;
  padding-bottom: 40px;
}

.px-10 {
  padding-left: 40px;
  padding-right: 40px;
}

.my-11 {
  margin-top: 44px;
  margin-bottom: 44px;
}

.mx-11 {
  margin-left: 44px;
  margin-right: 44px;
}

.py-11 {
  padding-top: 44px;
  padding-bottom: 44px;
}

.px-11 {
  padding-left: 44px;
  padding-right: 44px;
}

.my-12 {
  margin-top: 48px;
  margin-bottom: 48px;
}

.mx-12 {
  margin-left: 48px;
  margin-right: 48px;
}

.py-12 {
  padding-top: 48px;
  padding-bottom: 48px;
}

.px-12 {
  padding-left: 48px;
  padding-right: 48px;
}

.my-13 {
  margin-top: 52px;
  margin-bottom: 52px;
}

.mx-13 {
  margin-left: 52px;
  margin-right: 52px;
}

.py-13 {
  padding-top: 52px;
  padding-bottom: 52px;
}

.px-13 {
  padding-left: 52px;
  padding-right: 52px;
}

.my-14 {
  margin-top: 56px;
  margin-bottom: 56px;
}

.mx-14 {
  margin-left: 56px;
  margin-right: 56px;
}

.py-14 {
  padding-top: 56px;
  padding-bottom: 56px;
}

.px-14 {
  padding-left: 56px;
  padding-right: 56px;
}

.my-15 {
  margin-top: 60px;
  margin-bottom: 60px;
}

.mx-15 {
  margin-left: 60px;
  margin-right: 60px;
}

.py-15 {
  padding-top: 60px;
  padding-bottom: 60px;
}

.px-15 {
  padding-left: 60px;
  padding-right: 60px;
}

.my-20 {
  margin-top: 80px;
  margin-bottom: 80px;
}

.mx-20 {
  margin-left: 80px;
  margin-right: 80px;
}

.py-20 {
  padding-top: 80px;
  padding-bottom: 80px;
}

.px-20 {
  padding-left: 80px;
  padding-right: 80px;
}

.my-25 {
  margin-top: 100px;
  margin-bottom: 100px;
}

.mx-25 {
  margin-left: 100px;
  margin-right: 100px;
}

.py-25 {
  padding-top: 100px;
  padding-bottom: 100px;
}

.px-25 {
  padding-left: 100px;
  padding-right: 100px;
}

.my-30 {
  margin-top: 120px;
  margin-bottom: 120px;
}

.mx-30 {
  margin-left: 120px;
  margin-right: 120px;
}

.py-30 {
  padding-top: 120px;
  padding-bottom: 120px;
}

.px-30 {
  padding-left: 120px;
  padding-right: 120px;
}

.mb-1 {
  margin-bottom: 4px;
}

.mt-1 {
  margin-top: 4px;
}

.ml-1 {
  margin-left: 4px;
}

.mr-1 {
  margin-right: 4px;
}

.mb-n1 {
  margin-bottom: -4px;
}

.mt-n1 {
  margin-top: -4px;
}

.ml-n1 {
  margin-left: -4px;
}

.mr-n1 {
  margin-right: -4px;
}

.pt-1 {
  padding-top: 4px;
}

.pb-1 {
  padding-bottom: 4px;
}

.pl-1 {
  padding-left: 4px;
}

.pr-1 {
  padding-right: 4px;
}

.mb-2 {
  margin-bottom: 8px;
}

.mt-2 {
  margin-top: 8px;
}

.ml-2 {
  margin-left: 8px;
}

.mr-2 {
  margin-right: 8px;
}

.mb-n2 {
  margin-bottom: -8px;
}

.mt-n2 {
  margin-top: -8px;
}

.ml-n2 {
  margin-left: -8px;
}

.mr-n2 {
  margin-right: -8px;
}

.pt-2 {
  padding-top: 8px;
}

.pb-2 {
  padding-bottom: 8px;
}

.pl-2 {
  padding-left: 8px;
}

.pr-2 {
  padding-right: 8px;
}

.mb-3 {
  margin-bottom: 12px;
}

.mt-3 {
  margin-top: 12px;
}

.ml-3 {
  margin-left: 12px;
}

.mr-3 {
  margin-right: 12px;
}

.mb-n3 {
  margin-bottom: -12px;
}

.mt-n3 {
  margin-top: -12px;
}

.ml-n3 {
  margin-left: -12px;
}

.mr-n3 {
  margin-right: -12px;
}

.pt-3 {
  padding-top: 12px;
}

.pb-3 {
  padding-bottom: 12px;
}

.pl-3 {
  padding-left: 12px;
}

.pr-3 {
  padding-right: 12px;
}

.mb-4 {
  margin-bottom: 16px;
}

.mt-4 {
  margin-top: 16px;
}

.ml-4 {
  margin-left: 16px;
}

.mr-4 {
  margin-right: 16px;
}

.mb-n4 {
  margin-bottom: -16px;
}

.mt-n4 {
  margin-top: -16px;
}

.ml-n4 {
  margin-left: -16px;
}

.mr-n4 {
  margin-right: -16px;
}

.pt-4 {
  padding-top: 16px;
}

.pb-4 {
  padding-bottom: 16px;
}

.pl-4 {
  padding-left: 16px;
}

.pr-4 {
  padding-right: 16px;
}

.mb-5 {
  margin-bottom: 20px;
}

.mt-5 {
  margin-top: 20px;
}

.ml-5 {
  margin-left: 20px;
}

.mr-5 {
  margin-right: 20px;
}

.mb-n5 {
  margin-bottom: -20px;
}

.mt-n5 {
  margin-top: -20px;
}

.ml-n5 {
  margin-left: -20px;
}

.mr-n5 {
  margin-right: -20px;
}

.pt-5 {
  padding-top: 20px;
}

.pb-5 {
  padding-bottom: 20px;
}

.pl-5 {
  padding-left: 20px;
}

.pr-5 {
  padding-right: 20px;
}

.mb-6 {
  margin-bottom: 24px;
}

.mt-6 {
  margin-top: 24px;
}

.ml-6 {
  margin-left: 24px;
}

.mr-6 {
  margin-right: 24px;
}

.mb-n6 {
  margin-bottom: -24px;
}

.mt-n6 {
  margin-top: -24px;
}

.ml-n6 {
  margin-left: -24px;
}

.mr-n6 {
  margin-right: -24px;
}

.pt-6 {
  padding-top: 24px;
}

.pb-6 {
  padding-bottom: 24px;
}

.pl-6 {
  padding-left: 24px;
}

.pr-6 {
  padding-right: 24px;
}

.mb-7 {
  margin-bottom: 28px;
}

.mt-7 {
  margin-top: 28px;
}

.ml-7 {
  margin-left: 28px;
}

.mr-7 {
  margin-right: 28px;
}

.mb-n7 {
  margin-bottom: -28px;
}

.mt-n7 {
  margin-top: -28px;
}

.ml-n7 {
  margin-left: -28px;
}

.mr-n7 {
  margin-right: -28px;
}

.pt-7 {
  padding-top: 28px;
}

.pb-7 {
  padding-bottom: 28px;
}

.pl-7 {
  padding-left: 28px;
}

.pr-7 {
  padding-right: 28px;
}

.mb-8 {
  margin-bottom: 32px;
}

.mt-8 {
  margin-top: 32px;
}

.ml-8 {
  margin-left: 32px;
}

.mr-8 {
  margin-right: 32px;
}

.mb-n8 {
  margin-bottom: -32px;
}

.mt-n8 {
  margin-top: -32px;
}

.ml-n8 {
  margin-left: -32px;
}

.mr-n8 {
  margin-right: -32px;
}

.pt-8 {
  padding-top: 32px;
}

.pb-8 {
  padding-bottom: 32px;
}

.pl-8 {
  padding-left: 32px;
}

.pr-8 {
  padding-right: 32px;
}

.mb-9 {
  margin-bottom: 36px;
}

.mt-9 {
  margin-top: 36px;
}

.ml-9 {
  margin-left: 36px;
}

.mr-9 {
  margin-right: 36px;
}

.mb-n9 {
  margin-bottom: -36px;
}

.mt-n9 {
  margin-top: -36px;
}

.ml-n9 {
  margin-left: -36px;
}

.mr-n9 {
  margin-right: -36px;
}

.pt-9 {
  padding-top: 36px;
}

.pb-9 {
  padding-bottom: 36px;
}

.pl-9 {
  padding-left: 36px;
}

.pr-9 {
  padding-right: 36px;
}

.mb-10 {
  margin-bottom: 40px;
}

.mt-10 {
  margin-top: 40px;
}

.ml-10 {
  margin-left: 40px;
}

.mr-10 {
  margin-right: 40px;
}

.mb-n10 {
  margin-bottom: -40px;
}

.mt-n10 {
  margin-top: -40px;
}

.ml-n10 {
  margin-left: -40px;
}

.mr-n10 {
  margin-right: -40px;
}

.pt-10 {
  padding-top: 40px;
}

.pb-10 {
  padding-bottom: 40px;
}

.pl-10 {
  padding-left: 40px;
}

.pr-10 {
  padding-right: 40px;
}

.mb-11 {
  margin-bottom: 44px;
}

.mt-11 {
  margin-top: 44px;
}

.ml-11 {
  margin-left: 44px;
}

.mr-11 {
  margin-right: 44px;
}

.mb-n11 {
  margin-bottom: -44px;
}

.mt-n11 {
  margin-top: -44px;
}

.ml-n11 {
  margin-left: -44px;
}

.mr-n11 {
  margin-right: -44px;
}

.pt-11 {
  padding-top: 44px;
}

.pb-11 {
  padding-bottom: 44px;
}

.pl-11 {
  padding-left: 44px;
}

.pr-11 {
  padding-right: 44px;
}

.mb-12 {
  margin-bottom: 48px;
}

.mt-12 {
  margin-top: 48px;
}

.ml-12 {
  margin-left: 48px;
}

.mr-12 {
  margin-right: 48px;
}

.mb-n12 {
  margin-bottom: -48px;
}

.mt-n12 {
  margin-top: -48px;
}

.ml-n12 {
  margin-left: -48px;
}

.mr-n12 {
  margin-right: -48px;
}

.pt-12 {
  padding-top: 48px;
}

.pb-12 {
  padding-bottom: 48px;
}

.pl-12 {
  padding-left: 48px;
}

.pr-12 {
  padding-right: 48px;
}

.mb-13 {
  margin-bottom: 52px;
}

.mt-13 {
  margin-top: 52px;
}

.ml-13 {
  margin-left: 52px;
}

.mr-13 {
  margin-right: 52px;
}

.mb-n13 {
  margin-bottom: -52px;
}

.mt-n13 {
  margin-top: -52px;
}

.ml-n13 {
  margin-left: -52px;
}

.mr-n13 {
  margin-right: -52px;
}

.pt-13 {
  padding-top: 52px;
}

.pb-13 {
  padding-bottom: 52px;
}

.pl-13 {
  padding-left: 52px;
}

.pr-13 {
  padding-right: 52px;
}

.mb-14 {
  margin-bottom: 56px;
}

.mt-14 {
  margin-top: 56px;
}

.ml-14 {
  margin-left: 56px;
}

.mr-14 {
  margin-right: 56px;
}

.mb-n14 {
  margin-bottom: -56px;
}

.mt-n14 {
  margin-top: -56px;
}

.ml-n14 {
  margin-left: -56px;
}

.mr-n14 {
  margin-right: -56px;
}

.pt-14 {
  padding-top: 56px;
}

.pb-14 {
  padding-bottom: 56px;
}

.pl-14 {
  padding-left: 56px;
}

.pr-14 {
  padding-right: 56px;
}

.mb-15 {
  margin-bottom: 60px;
}

.mt-15 {
  margin-top: 60px;
}

.ml-15 {
  margin-left: 60px;
}

.mr-15 {
  margin-right: 60px;
}

.mb-n15 {
  margin-bottom: -60px;
}

.mt-n15 {
  margin-top: -60px;
}

.ml-n15 {
  margin-left: -60px;
}

.mr-n15 {
  margin-right: -60px;
}

.pt-15 {
  padding-top: 60px;
}

.pb-15 {
  padding-bottom: 60px;
}

.pl-15 {
  padding-left: 60px;
}

.pr-15 {
  padding-right: 60px;
}

.mb-20 {
  margin-bottom: 80px;
}

.mt-20 {
  margin-top: 80px;
}

.ml-20 {
  margin-left: 80px;
}

.mr-20 {
  margin-right: 80px;
}

.mb-n20 {
  margin-bottom: -80px;
}

.mt-n20 {
  margin-top: -80px;
}

.ml-n20 {
  margin-left: -80px;
}

.mr-n20 {
  margin-right: -80px;
}

.pt-20 {
  padding-top: 80px;
}

.pb-20 {
  padding-bottom: 80px;
}

.pl-20 {
  padding-left: 80px;
}

.pr-20 {
  padding-right: 80px;
}

.mb-25 {
  margin-bottom: 100px;
}

.mt-25 {
  margin-top: 100px;
}

.ml-25 {
  margin-left: 100px;
}

.mr-25 {
  margin-right: 100px;
}

.mb-n25 {
  margin-bottom: -100px;
}

.mt-n25 {
  margin-top: -100px;
}

.ml-n25 {
  margin-left: -100px;
}

.mr-n25 {
  margin-right: -100px;
}

.pt-25 {
  padding-top: 100px;
}

.pb-25 {
  padding-bottom: 100px;
}

.pl-25 {
  padding-left: 100px;
}

.pr-25 {
  padding-right: 100px;
}

.mb-30 {
  margin-bottom: 120px;
}

.mt-30 {
  margin-top: 120px;
}

.ml-30 {
  margin-left: 120px;
}

.mr-30 {
  margin-right: 120px;
}

.mb-n30 {
  margin-bottom: -120px;
}

.mt-n30 {
  margin-top: -120px;
}

.ml-n30 {
  margin-left: -120px;
}

.mr-n30 {
  margin-right: -120px;
}

.pt-30 {
  padding-top: 120px;
}

.pb-30 {
  padding-bottom: 120px;
}

.pl-30 {
  padding-left: 120px;
}

.pr-30 {
  padding-right: 120px;
}

@media only screen and (max-width: 767px) {
  .mt-off-sm {
    margin-top: 0;
  }
  .mb-off-sm {
    margin-bottom: 0;
  }
  .ml-off-sm {
    margin-left: 0;
  }
  .mr-off-sm {
    margin-right: 0;
  }
  .my-off-sm {
    margin-top: 0;
    margin-bottom: 0;
  }
  .mx-off-sm {
    margin-left: 0;
    margin-right: 0;
  }
  .p-off-sm {
    padding: 0;
  }
  .pt-off-sm {
    padding-top: 0;
  }
  .pb-off-sm {
    padding-bottom: 0;
  }
  .pl-off-sm {
    padding-left: 0;
  }
  .pr-off-sm {
    padding-right: 0;
  }
  .py-off-sm {
    padding-top: 0;
    padding-bottom: 0;
  }
  .px-off-sm {
    padding-left: 0;
    padding-right: 0;
  }
  .p-1-sm {
    padding: 4px;
  }
  .p-2-sm {
    padding: 8px;
  }
  .p-3-sm {
    padding: 12px;
  }
  .p-4-sm {
    padding: 16px;
  }
  .p-5-sm {
    padding: 20px;
  }
  .p-6-sm {
    padding: 24px;
  }
  .p-7-sm {
    padding: 28px;
  }
  .p-8-sm {
    padding: 32px;
  }
  .p-9-sm {
    padding: 36px;
  }
  .p-10-sm {
    padding: 40px;
  }
  .p-11-sm {
    padding: 44px;
  }
  .p-12-sm {
    padding: 48px;
  }
  .p-13-sm {
    padding: 52px;
  }
  .p-14-sm {
    padding: 56px;
  }
  .p-15-sm {
    padding: 60px;
  }
  .p-20-sm {
    padding: 80px;
  }
  .p-25-sm {
    padding: 100px;
  }
  .p-30-sm {
    padding: 120px;
  }
  .my-1-sm {
    margin-top: 4px;
    margin-bottom: 4px;
  }
  .mx-1-sm {
    margin-left: 4px;
    margin-right: 4px;
  }
  .py-1-sm {
    padding-top: 4px;
    padding-bottom: 4px;
  }
  .px-1-sm {
    padding-left: 4px;
    padding-right: 4px;
  }
  .my-2-sm {
    margin-top: 8px;
    margin-bottom: 8px;
  }
  .mx-2-sm {
    margin-left: 8px;
    margin-right: 8px;
  }
  .py-2-sm {
    padding-top: 8px;
    padding-bottom: 8px;
  }
  .px-2-sm {
    padding-left: 8px;
    padding-right: 8px;
  }
  .my-3-sm {
    margin-top: 12px;
    margin-bottom: 12px;
  }
  .mx-3-sm {
    margin-left: 12px;
    margin-right: 12px;
  }
  .py-3-sm {
    padding-top: 12px;
    padding-bottom: 12px;
  }
  .px-3-sm {
    padding-left: 12px;
    padding-right: 12px;
  }
  .my-4-sm {
    margin-top: 16px;
    margin-bottom: 16px;
  }
  .mx-4-sm {
    margin-left: 16px;
    margin-right: 16px;
  }
  .py-4-sm {
    padding-top: 16px;
    padding-bottom: 16px;
  }
  .px-4-sm {
    padding-left: 16px;
    padding-right: 16px;
  }
  .my-5-sm {
    margin-top: 20px;
    margin-bottom: 20px;
  }
  .mx-5-sm {
    margin-left: 20px;
    margin-right: 20px;
  }
  .py-5-sm {
    padding-top: 20px;
    padding-bottom: 20px;
  }
  .px-5-sm {
    padding-left: 20px;
    padding-right: 20px;
  }
  .my-6-sm {
    margin-top: 24px;
    margin-bottom: 24px;
  }
  .mx-6-sm {
    margin-left: 24px;
    margin-right: 24px;
  }
  .py-6-sm {
    padding-top: 24px;
    padding-bottom: 24px;
  }
  .px-6-sm {
    padding-left: 24px;
    padding-right: 24px;
  }
  .my-7-sm {
    margin-top: 28px;
    margin-bottom: 28px;
  }
  .mx-7-sm {
    margin-left: 28px;
    margin-right: 28px;
  }
  .py-7-sm {
    padding-top: 28px;
    padding-bottom: 28px;
  }
  .px-7-sm {
    padding-left: 28px;
    padding-right: 28px;
  }
  .my-8-sm {
    margin-top: 32px;
    margin-bottom: 32px;
  }
  .mx-8-sm {
    margin-left: 32px;
    margin-right: 32px;
  }
  .py-8-sm {
    padding-top: 32px;
    padding-bottom: 32px;
  }
  .px-8-sm {
    padding-left: 32px;
    padding-right: 32px;
  }
  .my-9-sm {
    margin-top: 36px;
    margin-bottom: 36px;
  }
  .mx-9-sm {
    margin-left: 36px;
    margin-right: 36px;
  }
  .py-9-sm {
    padding-top: 36px;
    padding-bottom: 36px;
  }
  .px-9-sm {
    padding-left: 36px;
    padding-right: 36px;
  }
  .my-10-sm {
    margin-top: 40px;
    margin-bottom: 40px;
  }
  .mx-10-sm {
    margin-left: 40px;
    margin-right: 40px;
  }
  .py-10-sm {
    padding-top: 40px;
    padding-bottom: 40px;
  }
  .px-10-sm {
    padding-left: 40px;
    padding-right: 40px;
  }
  .my-11-sm {
    margin-top: 44px;
    margin-bottom: 44px;
  }
  .mx-11-sm {
    margin-left: 44px;
    margin-right: 44px;
  }
  .py-11-sm {
    padding-top: 44px;
    padding-bottom: 44px;
  }
  .px-11-sm {
    padding-left: 44px;
    padding-right: 44px;
  }
  .my-12-sm {
    margin-top: 48px;
    margin-bottom: 48px;
  }
  .mx-12-sm {
    margin-left: 48px;
    margin-right: 48px;
  }
  .py-12-sm {
    padding-top: 48px;
    padding-bottom: 48px;
  }
  .px-12-sm {
    padding-left: 48px;
    padding-right: 48px;
  }
  .my-13-sm {
    margin-top: 52px;
    margin-bottom: 52px;
  }
  .mx-13-sm {
    margin-left: 52px;
    margin-right: 52px;
  }
  .py-13-sm {
    padding-top: 52px;
    padding-bottom: 52px;
  }
  .px-13-sm {
    padding-left: 52px;
    padding-right: 52px;
  }
  .my-14-sm {
    margin-top: 56px;
    margin-bottom: 56px;
  }
  .mx-14-sm {
    margin-left: 56px;
    margin-right: 56px;
  }
  .py-14-sm {
    padding-top: 56px;
    padding-bottom: 56px;
  }
  .px-14-sm {
    padding-left: 56px;
    padding-right: 56px;
  }
  .my-15-sm {
    margin-top: 60px;
    margin-bottom: 60px;
  }
  .mx-15-sm {
    margin-left: 60px;
    margin-right: 60px;
  }
  .py-15-sm {
    padding-top: 60px;
    padding-bottom: 60px;
  }
  .px-15-sm {
    padding-left: 60px;
    padding-right: 60px;
  }
  .my-20-sm {
    margin-top: 80px;
    margin-bottom: 80px;
  }
  .mx-20-sm {
    margin-left: 80px;
    margin-right: 80px;
  }
  .py-20-sm {
    padding-top: 80px;
    padding-bottom: 80px;
  }
  .px-20-sm {
    padding-left: 80px;
    padding-right: 80px;
  }
  .my-25-sm {
    margin-top: 100px;
    margin-bottom: 100px;
  }
  .mx-25-sm {
    margin-left: 100px;
    margin-right: 100px;
  }
  .py-25-sm {
    padding-top: 100px;
    padding-bottom: 100px;
  }
  .px-25-sm {
    padding-left: 100px;
    padding-right: 100px;
  }
  .my-30-sm {
    margin-top: 120px;
    margin-bottom: 120px;
  }
  .mx-30-sm {
    margin-left: 120px;
    margin-right: 120px;
  }
  .py-30-sm {
    padding-top: 120px;
    padding-bottom: 120px;
  }
  .px-30-sm {
    padding-left: 120px;
    padding-right: 120px;
  }
  .mb-1-sm {
    margin-bottom: 4px;
  }
  .mt-1-sm {
    margin-top: 4px;
  }
  .ml-1-sm {
    margin-left: 4px;
  }
  .mr-1-sm {
    margin-right: 4px;
  }
  .mb-n1-sm {
    margin-bottom: -4px;
  }
  .mt-n1-sm {
    margin-top: -4px;
  }
  .ml-n1-sm {
    margin-left: -4px;
  }
  .mr-n1-sm {
    margin-right: -4px;
  }
  .pt-1-sm {
    padding-top: 4px;
  }
  .pb-1-sm {
    padding-bottom: 4px;
  }
  .pl-1-sm {
    padding-left: 4px;
  }
  .pr-1-sm {
    padding-right: 4px;
  }
  .mb-2-sm {
    margin-bottom: 8px;
  }
  .mt-2-sm {
    margin-top: 8px;
  }
  .ml-2-sm {
    margin-left: 8px;
  }
  .mr-2-sm {
    margin-right: 8px;
  }
  .mb-n2-sm {
    margin-bottom: -8px;
  }
  .mt-n2-sm {
    margin-top: -8px;
  }
  .ml-n2-sm {
    margin-left: -8px;
  }
  .mr-n2-sm {
    margin-right: -8px;
  }
  .pt-2-sm {
    padding-top: 8px;
  }
  .pb-2-sm {
    padding-bottom: 8px;
  }
  .pl-2-sm {
    padding-left: 8px;
  }
  .pr-2-sm {
    padding-right: 8px;
  }
  .mb-3-sm {
    margin-bottom: 12px;
  }
  .mt-3-sm {
    margin-top: 12px;
  }
  .ml-3-sm {
    margin-left: 12px;
  }
  .mr-3-sm {
    margin-right: 12px;
  }
  .mb-n3-sm {
    margin-bottom: -12px;
  }
  .mt-n3-sm {
    margin-top: -12px;
  }
  .ml-n3-sm {
    margin-left: -12px;
  }
  .mr-n3-sm {
    margin-right: -12px;
  }
  .pt-3-sm {
    padding-top: 12px;
  }
  .pb-3-sm {
    padding-bottom: 12px;
  }
  .pl-3-sm {
    padding-left: 12px;
  }
  .pr-3-sm {
    padding-right: 12px;
  }
  .mb-4-sm {
    margin-bottom: 16px;
  }
  .mt-4-sm {
    margin-top: 16px;
  }
  .ml-4-sm {
    margin-left: 16px;
  }
  .mr-4-sm {
    margin-right: 16px;
  }
  .mb-n4-sm {
    margin-bottom: -16px;
  }
  .mt-n4-sm {
    margin-top: -16px;
  }
  .ml-n4-sm {
    margin-left: -16px;
  }
  .mr-n4-sm {
    margin-right: -16px;
  }
  .pt-4-sm {
    padding-top: 16px;
  }
  .pb-4-sm {
    padding-bottom: 16px;
  }
  .pl-4-sm {
    padding-left: 16px;
  }
  .pr-4-sm {
    padding-right: 16px;
  }
  .mb-5-sm {
    margin-bottom: 20px;
  }
  .mt-5-sm {
    margin-top: 20px;
  }
  .ml-5-sm {
    margin-left: 20px;
  }
  .mr-5-sm {
    margin-right: 20px;
  }
  .mb-n5-sm {
    margin-bottom: -20px;
  }
  .mt-n5-sm {
    margin-top: -20px;
  }
  .ml-n5-sm {
    margin-left: -20px;
  }
  .mr-n5-sm {
    margin-right: -20px;
  }
  .pt-5-sm {
    padding-top: 20px;
  }
  .pb-5-sm {
    padding-bottom: 20px;
  }
  .pl-5-sm {
    padding-left: 20px;
  }
  .pr-5-sm {
    padding-right: 20px;
  }
  .mb-6-sm {
    margin-bottom: 24px;
  }
  .mt-6-sm {
    margin-top: 24px;
  }
  .ml-6-sm {
    margin-left: 24px;
  }
  .mr-6-sm {
    margin-right: 24px;
  }
  .mb-n6-sm {
    margin-bottom: -24px;
  }
  .mt-n6-sm {
    margin-top: -24px;
  }
  .ml-n6-sm {
    margin-left: -24px;
  }
  .mr-n6-sm {
    margin-right: -24px;
  }
  .pt-6-sm {
    padding-top: 24px;
  }
  .pb-6-sm {
    padding-bottom: 24px;
  }
  .pl-6-sm {
    padding-left: 24px;
  }
  .pr-6-sm {
    padding-right: 24px;
  }
  .mb-7-sm {
    margin-bottom: 28px;
  }
  .mt-7-sm {
    margin-top: 28px;
  }
  .ml-7-sm {
    margin-left: 28px;
  }
  .mr-7-sm {
    margin-right: 28px;
  }
  .mb-n7-sm {
    margin-bottom: -28px;
  }
  .mt-n7-sm {
    margin-top: -28px;
  }
  .ml-n7-sm {
    margin-left: -28px;
  }
  .mr-n7-sm {
    margin-right: -28px;
  }
  .pt-7-sm {
    padding-top: 28px;
  }
  .pb-7-sm {
    padding-bottom: 28px;
  }
  .pl-7-sm {
    padding-left: 28px;
  }
  .pr-7-sm {
    padding-right: 28px;
  }
  .mb-8-sm {
    margin-bottom: 32px;
  }
  .mt-8-sm {
    margin-top: 32px;
  }
  .ml-8-sm {
    margin-left: 32px;
  }
  .mr-8-sm {
    margin-right: 32px;
  }
  .mb-n8-sm {
    margin-bottom: -32px;
  }
  .mt-n8-sm {
    margin-top: -32px;
  }
  .ml-n8-sm {
    margin-left: -32px;
  }
  .mr-n8-sm {
    margin-right: -32px;
  }
  .pt-8-sm {
    padding-top: 32px;
  }
  .pb-8-sm {
    padding-bottom: 32px;
  }
  .pl-8-sm {
    padding-left: 32px;
  }
  .pr-8-sm {
    padding-right: 32px;
  }
  .mb-9-sm {
    margin-bottom: 36px;
  }
  .mt-9-sm {
    margin-top: 36px;
  }
  .ml-9-sm {
    margin-left: 36px;
  }
  .mr-9-sm {
    margin-right: 36px;
  }
  .mb-n9-sm {
    margin-bottom: -36px;
  }
  .mt-n9-sm {
    margin-top: -36px;
  }
  .ml-n9-sm {
    margin-left: -36px;
  }
  .mr-n9-sm {
    margin-right: -36px;
  }
  .pt-9-sm {
    padding-top: 36px;
  }
  .pb-9-sm {
    padding-bottom: 36px;
  }
  .pl-9-sm {
    padding-left: 36px;
  }
  .pr-9-sm {
    padding-right: 36px;
  }
  .mb-10-sm {
    margin-bottom: 40px;
  }
  .mt-10-sm {
    margin-top: 40px;
  }
  .ml-10-sm {
    margin-left: 40px;
  }
  .mr-10-sm {
    margin-right: 40px;
  }
  .mb-n10-sm {
    margin-bottom: -40px;
  }
  .mt-n10-sm {
    margin-top: -40px;
  }
  .ml-n10-sm {
    margin-left: -40px;
  }
  .mr-n10-sm {
    margin-right: -40px;
  }
  .pt-10-sm {
    padding-top: 40px;
  }
  .pb-10-sm {
    padding-bottom: 40px;
  }
  .pl-10-sm {
    padding-left: 40px;
  }
  .pr-10-sm {
    padding-right: 40px;
  }
  .mb-11-sm {
    margin-bottom: 44px;
  }
  .mt-11-sm {
    margin-top: 44px;
  }
  .ml-11-sm {
    margin-left: 44px;
  }
  .mr-11-sm {
    margin-right: 44px;
  }
  .mb-n11-sm {
    margin-bottom: -44px;
  }
  .mt-n11-sm {
    margin-top: -44px;
  }
  .ml-n11-sm {
    margin-left: -44px;
  }
  .mr-n11-sm {
    margin-right: -44px;
  }
  .pt-11-sm {
    padding-top: 44px;
  }
  .pb-11-sm {
    padding-bottom: 44px;
  }
  .pl-11-sm {
    padding-left: 44px;
  }
  .pr-11-sm {
    padding-right: 44px;
  }
  .mb-12-sm {
    margin-bottom: 48px;
  }
  .mt-12-sm {
    margin-top: 48px;
  }
  .ml-12-sm {
    margin-left: 48px;
  }
  .mr-12-sm {
    margin-right: 48px;
  }
  .mb-n12-sm {
    margin-bottom: -48px;
  }
  .mt-n12-sm {
    margin-top: -48px;
  }
  .ml-n12-sm {
    margin-left: -48px;
  }
  .mr-n12-sm {
    margin-right: -48px;
  }
  .pt-12-sm {
    padding-top: 48px;
  }
  .pb-12-sm {
    padding-bottom: 48px;
  }
  .pl-12-sm {
    padding-left: 48px;
  }
  .pr-12-sm {
    padding-right: 48px;
  }
  .mb-13-sm {
    margin-bottom: 52px;
  }
  .mt-13-sm {
    margin-top: 52px;
  }
  .ml-13-sm {
    margin-left: 52px;
  }
  .mr-13-sm {
    margin-right: 52px;
  }
  .mb-n13-sm {
    margin-bottom: -52px;
  }
  .mt-n13-sm {
    margin-top: -52px;
  }
  .ml-n13-sm {
    margin-left: -52px;
  }
  .mr-n13-sm {
    margin-right: -52px;
  }
  .pt-13-sm {
    padding-top: 52px;
  }
  .pb-13-sm {
    padding-bottom: 52px;
  }
  .pl-13-sm {
    padding-left: 52px;
  }
  .pr-13-sm {
    padding-right: 52px;
  }
  .mb-14-sm {
    margin-bottom: 56px;
  }
  .mt-14-sm {
    margin-top: 56px;
  }
  .ml-14-sm {
    margin-left: 56px;
  }
  .mr-14-sm {
    margin-right: 56px;
  }
  .mb-n14-sm {
    margin-bottom: -56px;
  }
  .mt-n14-sm {
    margin-top: -56px;
  }
  .ml-n14-sm {
    margin-left: -56px;
  }
  .mr-n14-sm {
    margin-right: -56px;
  }
  .pt-14-sm {
    padding-top: 56px;
  }
  .pb-14-sm {
    padding-bottom: 56px;
  }
  .pl-14-sm {
    padding-left: 56px;
  }
  .pr-14-sm {
    padding-right: 56px;
  }
  .mb-15-sm {
    margin-bottom: 60px;
  }
  .mt-15-sm {
    margin-top: 60px;
  }
  .ml-15-sm {
    margin-left: 60px;
  }
  .mr-15-sm {
    margin-right: 60px;
  }
  .mb-n15-sm {
    margin-bottom: -60px;
  }
  .mt-n15-sm {
    margin-top: -60px;
  }
  .ml-n15-sm {
    margin-left: -60px;
  }
  .mr-n15-sm {
    margin-right: -60px;
  }
  .pt-15-sm {
    padding-top: 60px;
  }
  .pb-15-sm {
    padding-bottom: 60px;
  }
  .pl-15-sm {
    padding-left: 60px;
  }
  .pr-15-sm {
    padding-right: 60px;
  }
  .mb-20-sm {
    margin-bottom: 80px;
  }
  .mt-20-sm {
    margin-top: 80px;
  }
  .ml-20-sm {
    margin-left: 80px;
  }
  .mr-20-sm {
    margin-right: 80px;
  }
  .mb-n20-sm {
    margin-bottom: -80px;
  }
  .mt-n20-sm {
    margin-top: -80px;
  }
  .ml-n20-sm {
    margin-left: -80px;
  }
  .mr-n20-sm {
    margin-right: -80px;
  }
  .pt-20-sm {
    padding-top: 80px;
  }
  .pb-20-sm {
    padding-bottom: 80px;
  }
  .pl-20-sm {
    padding-left: 80px;
  }
  .pr-20-sm {
    padding-right: 80px;
  }
  .mb-25-sm {
    margin-bottom: 100px;
  }
  .mt-25-sm {
    margin-top: 100px;
  }
  .ml-25-sm {
    margin-left: 100px;
  }
  .mr-25-sm {
    margin-right: 100px;
  }
  .mb-n25-sm {
    margin-bottom: -100px;
  }
  .mt-n25-sm {
    margin-top: -100px;
  }
  .ml-n25-sm {
    margin-left: -100px;
  }
  .mr-n25-sm {
    margin-right: -100px;
  }
  .pt-25-sm {
    padding-top: 100px;
  }
  .pb-25-sm {
    padding-bottom: 100px;
  }
  .pl-25-sm {
    padding-left: 100px;
  }
  .pr-25-sm {
    padding-right: 100px;
  }
  .mb-30-sm {
    margin-bottom: 120px;
  }
  .mt-30-sm {
    margin-top: 120px;
  }
  .ml-30-sm {
    margin-left: 120px;
  }
  .mr-30-sm {
    margin-right: 120px;
  }
  .mb-n30-sm {
    margin-bottom: -120px;
  }
  .mt-n30-sm {
    margin-top: -120px;
  }
  .ml-n30-sm {
    margin-left: -120px;
  }
  .mr-n30-sm {
    margin-right: -120px;
  }
  .pt-30-sm {
    padding-top: 120px;
  }
  .pb-30-sm {
    padding-bottom: 120px;
  }
  .pl-30-sm {
    padding-left: 120px;
  }
  .pr-30-sm {
    padding-right: 120px;
  }
}
.stack {
  --stack-divider-color: transparent;
  --stack-divider-style: solid;
  --stack-divider-size: 1px;
}
.stack > * {
  position: relative;
}
.stack > *:after {
  position: absolute;
  content: "";
  bottom: 0;
  left: 0;
  width: 100%;
  height: var(--stack-divider-size);
  border-bottom-color: var(--stack-divider-color);
  border-bottom-style: var(--stack-divider-style);
  border-bottom-width: var(--stack-divider-size);
}
.stack > *:last-child {
  margin-bottom: 0;
}
.stack > *:last-child:after {
  display: none;
}

.stack-dashed {
  --stack-divider-style: dashed;
}

.stack-dotted {
  --stack-divider-style: dotted;
}

.stack-1 > * {
  margin-bottom: 4px;
}
.stack-1 > *:after {
  bottom: -2px;
}

.stack-2 > * {
  margin-bottom: 8px;
}
.stack-2 > *:after {
  bottom: -4px;
}

.stack-3 > * {
  margin-bottom: 12px;
}
.stack-3 > *:after {
  bottom: -6px;
}

.stack-4 > * {
  margin-bottom: 16px;
}
.stack-4 > *:after {
  bottom: -8px;
}

.stack-5 > * {
  margin-bottom: 20px;
}
.stack-5 > *:after {
  bottom: -10px;
}

.stack-6 > * {
  margin-bottom: 24px;
}
.stack-6 > *:after {
  bottom: -12px;
}

.stack-7 > * {
  margin-bottom: 28px;
}
.stack-7 > *:after {
  bottom: -14px;
}

.stack-8 > * {
  margin-bottom: 32px;
}
.stack-8 > *:after {
  bottom: -16px;
}

.stack-9 > * {
  margin-bottom: 36px;
}
.stack-9 > *:after {
  bottom: -18px;
}

.stack-10 > * {
  margin-bottom: 40px;
}
.stack-10 > *:after {
  bottom: -20px;
}

.stack-11 > * {
  margin-bottom: 44px;
}
.stack-11 > *:after {
  bottom: -22px;
}

.stack-12 > * {
  margin-bottom: 48px;
}
.stack-12 > *:after {
  bottom: -24px;
}

.stack-13 > * {
  margin-bottom: 52px;
}
.stack-13 > *:after {
  bottom: -26px;
}

.stack-14 > * {
  margin-bottom: 56px;
}
.stack-14 > *:after {
  bottom: -28px;
}

.stack-15 > * {
  margin-bottom: 60px;
}
.stack-15 > *:after {
  bottom: -30px;
}

.stack-20 > * {
  margin-bottom: 80px;
}
.stack-20 > *:after {
  bottom: -40px;
}

.stack-25 > * {
  margin-bottom: 100px;
}
.stack-25 > *:after {
  bottom: -50px;
}

.stack-30 > * {
  margin-bottom: 120px;
}
.stack-30 > *:after {
  bottom: -60px;
}

.stack-dark {
  --stack-divider-color: var(--palette-black);
}

.stack-dark-low {
  --stack-divider-color: var(--palette-black-7);
}

.stack-dark-mid {
  --stack-divider-color: var(--palette-black-10);
}

.stack-light {
  --stack-divider-color: var(--palette-white);
}

.stack-light-low {
  --stack-divider-color: var(--palette-white-20);
}

.stack-light-mid {
  --stack-divider-color: var(--palette-white-50);
}

.stack-primary {
  --stack-divider-color: var(--palette-primary-base);
}

table,
.table {
  --table-border-color: var(--palette-black-7);
  --table-head-border-color: var(--palette-black-7);
  --table-color: var(--text-default);
  --table-font-size: var(--type-scale-15);
  --table-line-height: var(--body-text-line);
  --table-border-style: solid;
  --table-border-width: 1px;
  --table-head-border-style: solid;
  --table-head-border-width: 1px;
  --table-padding: 0.75em 6rem 0.75em 2rem;
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
  empty-cells: show;
  font-size: var(--table-font-size);
  line-height: var(--table-line-height);
  color: var(--table-color);
}
table th,
table td,
.table th,
.table td {
  padding: var(--table-padding);
}
table th,
.table th {
  border-bottom-style: var(--table-head-border-style);
  border-bottom-width: var(--table-head-border-width);
  border-bottom-color: var(--table-head-border-color);
}
table td,
.table td {
  border-bottom-style: var(--table-border-style);
  border-bottom-width: var(--table-border-width);
  border-bottom-color: var(--table-border-color);
}

td,
th {
  text-align: left;
  vertical-align: top;
}
td:first-child,
th:first-child {
  padding-left: 0;
}

th {
  font-weight: normal;
}

thead th {
  font-weight: bold;
}

caption {
  text-align: left;
  font-style: normal;
}

.table-scrollable {
  display: block;
  overflow-x: auto;
  white-space: nowrap;
}

.table-striped {
  --table-background-color: var(--palette-neutral-lightest);
}
.table-striped tr:nth-child(odd) td {
  background-color: var(--table-background-color);
}

.table-striped td:first-child,
.table-striped th:first-child,
.table-bordered td:first-child,
.table-bordered th:first-child {
  padding-left: 2rem;
}

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

.table-light {
  --table-color: var(--text-light);
  --table-border-color: var(--palette-white-15);
  --table-head-border-color: var(--palette-white-15);
}

.table-striped.table-light {
  --table-background-color: var(--palette-white-10);
}

.text-semibold {
  font-weight: var(--font-weight-semibold);
}

.text-strong {
  font-weight: bold;
}

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

.text-mono {
  font-family: var(--font-mono);
}

.text-caps {
  text-transform: uppercase;
  letter-spacing: 0.035em;
}

.text-nowrap, .text-nowrap td, .text-nowrap th {
  white-space: nowrap;
}

[class^=text-],
[class*=" text-"] {
  --text-color: var(--text-default);
  --text-font-size: inherit;
  --text-line-height: inherit;
  font-size: var(--text-font-size);
  line-height: var(--text-line-height);
  color: var(--text-color);
}

[class^=text-gradient],
[class*=" text-gradient"] {
  display: inline-block;
  background-clip: text;
  background-color: #000;
  background-image: var(--text-color);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
[class^=text-gradient] a,
[class^=text-gradient] a:hover,
[class*=" text-gradient"] a,
[class*=" text-gradient"] a:hover {
  opacity: 1;
}

.text-mega {
  --text-font-size: 24px;
  --text-line-height: 1.5;
}
.text-huge {
  --text-font-size: 20px;
  --text-line-height: 1.5;
}
.text-large {
  --text-font-size: 18px;
  --text-line-height: 1.5;
}
.text-default {
  --text-font-size: 16px;
  --text-line-height: 1.5;
}
.text-medium {
  --text-font-size: 14px;
  --text-line-height: 1.5;
}
.text-small {
  --text-font-size: 13px;
  --text-line-height: 1.5;
}
.text-micro {
  --text-font-size: 12px;
  --text-line-height: 1.5;
}
.text-nano {
  --text-font-size: 10px;
  --text-line-height: 1.5;
}

.text-dark {
  --text-color: var(--palette-black);
}

.text {
  --text-color: var(--palette-neutral-darker);
}

.text-dark-mid {
  --text-color: var(--palette-black-70);
}

.text-muted {
  --text-color: var(--palette-black-50);
}

.text-success {
  --text-color: var(--palette-positive-dark);
}

.text-error {
  --text-color: var(--palette-negative-dark);
}

.text-light {
  --text-color: var(--palette-white-90);
}

.text-light-mid {
  --text-color: var(--palette-white-70);
}

.text-light-muted {
  --text-color: var(--palette-white-50);
}

.text-primary {
  --text-color: var(--palette-primary-base);
}

.dropdown {
  --dropdown-background-color: var(--palette-white);
  --dropdown-box-shadow: var(--shadow-300);
  --dropdown-item-divider-color: var(--palette-black-10);
  --dropdown-link-color: var(--palette-black);
  --dropdown-link-background-color: var(--palette-white);
  --dropdown-link-hover-color: var(--palette-black);
  --dropdown-link-hover-background-color: var(--palette-neutral-light);
  --dropdown-link-active-color: var(--palette-white-90);
  --dropdown-link-active-background-color: var(--palette-active-dark);
  --dropdown-link-disabled-color: var(--palette-black-40);
  --dropdown-link-disabled-background-color: var(--palette-white);
  --dropdown-font-size: var(--type-scale-15);
  --dropdown-line-height: var(--body-text-line);
  --dropdown-border-radius: var(--radius-base);
  --dropdown-level: var(--level-over-page);
  --dropdown-padding: 8px;
  --dropdown-width: 240px;
  --dropdown-item-padding: 0;
  --dropdown-item-space: 0;
  --dropdown-item-divider-width: 1px;
  --dropdown-item-divider-style: solid;
  --dropdown-item-divider-space: 1rem;
  --dropdown-link-padding: 6px 8px;
  --dropdown-link-border-radius: var(--radius-base);
  position: absolute;
  margin: 0;
  overflow: auto;
  border-radius: var(--dropdown-border-radius);
  z-index: var(--dropdown-level);
  padding: var(--dropdown-padding);
  min-width: var(--dropdown-width);
  box-shadow: var(--dropdown-box-shadow);
  font-size: var(--dropdown-font-size);
  line-height: var(--dropdown-line-height);
  background-color: var(--dropdown-background-color);
}
.dropdown .dropdown-list {
  margin: 0;
  list-style: none;
}
.dropdown .dropdown-item {
  display: flex;
  align-items: center;
  flex-flow: wrap;
  padding: var(--dropdown-item-padding);
  margin-bottom: var(--dropdown-item-space);
}
.dropdown .dropdown-item:last-child {
  margin-bottom: 0;
}
.dropdown .dropdown-item-divider {
  border-top-width: var(--dropdown-item-divider-width);
  border-top-style: var(--dropdown-item-divider-style);
  border-top-color: var(--dropdown-item-divider-color);
  padding-top: var(--dropdown-item-divider-space);
  margin-top: var(--dropdown-item-divider-space);
}
.dropdown .dropdown-link {
  display: flex;
  align-items: center;
  flex: 1;
  text-decoration: none;
  padding: var(--dropdown-link-padding);
  border-radius: var(--dropdown-link-border-radius);
  color: var(--dropdown-link-color);
  background-color: var(--dropdown-link-background-color);
}
.dropdown .dropdown-link:hover {
  color: var(--dropdown-link-hover-color);
  background-color: var(--dropdown-link-hover-background-color);
}
.dropdown .dropdown-item.active .dropdown-link {
  color: var(--dropdown-link-active-color);
  background-color: var(--dropdown-link-active-background-color) !important;
}
.dropdown .dropdown-item.disabled .dropdown-link {
  color: var(--dropdown-link-disabled-color);
  background-color: var(--dropdown-link-disabled-background-color);
}
.dropdown .dropdown-item.active .dropdown-link,
.dropdown .dropdown-item.disabled .dropdown-link {
  cursor: text;
}

.dropdown-dark {
  --dropdown-background-color: var(--palette-black);
  --dropdown-box-shadow: var(--shadow-300);
  --dropdown-item-divider-color: var(--palette-white-20);
  --dropdown-link-color: var(--palette-white-90);
  --dropdown-link-background-color: var(--palette-black);
  --dropdown-link-hover-color: var(--palette-white-90);
  --dropdown-link-hover-background-color: var(--palette-neutral-dark);
  --dropdown-link-active-color: var(--palette-white-90);
  --dropdown-link-active-background-color: var(--palette-active-base);
  --dropdown-link-disabled-color: var(--palette-white-50);
  --dropdown-link-disabled-background-color: var(--palette-black);
}

.input-number {
  --input-number-space: 40px;
  --input-number-size: 16px;
  --input-number-border-radius: var(--radius-base);
  position: relative;
  display: inline-flex;
}
.input-number input[type=number]::-webkit-inner-spin-button, .input-number input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.input-number input[type=number] {
  -moz-appearance: textfield;
  width: auto;
  text-align: center;
}
.input-number input {
  padding-left: var(--input-number-space);
  padding-right: var(--input-number-space);
}

.input-number-down,
.input-number-up {
  position: absolute;
  height: 100%;
  top: 0;
  width: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  -webkit-user-select: none;
  user-select: none;
  font-size: var(--input-number-size);
}

.input-number-up {
  right: 0;
}

.input-number-light {
  color: var(--text-light);
}

.message {
  --message-background-color: var(--palette-black);
  --message-color: var(--palette-neutral-lightest);
  --message-box-shadow: 0 20px 50px -12px var(--palette-black-40);
  --message-font-size: var(--type-scale-14);
  --message-line-height: var(--body-text-line);
  --message-border-radius: var(--radius-base);
  --message-level: var(--level-over-all);
  --message-padding: 4rem 5rem;
  position: fixed;
  top: 3rem;
  right: 3rem;
  width: 360px;
  display: flex;
  border-radius: var(--message-border-radius);
  z-index: var(--message-level);
  padding: var(--message-padding);
  box-shadow: var(--message-box-shadow);
  font-size: var(--message-font-size);
  line-height: var(--message-line-height);
  color: var(--message-color);
  background-color: var(--message-background-color);
}

.message-success {
  --message-background-color: var(--palette-positive-base);
  --message-color: var(--palette-positive-lightest);
}

.message-error {
  --message-background-color: var(--palette-negative-base);
  --message-color: var(--palette-negative-lightest);
}

.modal {
  --modal-body-background-color: var(--palette-white);
  --modal-box-shadow: var(--shadow-350);
  --modal-level: var(--level-over-content);
  --modal-border-radius: var(--radius-base);
  --modal-close-size: 20px;
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  left: 50%;
  margin-left: -50%;
  overflow-x: hidden;
  overflow-y: auto;
  z-index: var(--modal-level);
}
.modal .close {
  --close-size: var(--modal-close-size);
  position: absolute;
  right: 24px;
  top: 20px;
}
.modal .modal-box {
  position: relative;
  margin-left: auto;
  margin-right: auto;
  padding: 0;
  background-color: var(--modal-body-background-color);
  box-shadow: var(--modal-box-shadow);
  border-radius: var(--modal-border-radius);
}
.modal .modal-body {
  padding: 20px 24px;
}
.modal .modal-head {
  font-size: 18px;
  font-weight: bold;
  padding: 20px 24px 0 24px;
}
.modal .modal-head:empty {
  display: none;
}
.modal .modal-foot {
  margin-top: 8px;
  padding: 0 24px 20px 24px;
}
.modal .modal-foot:empty {
  display: none;
}

.modal-overlay {
  position: fixed;
  z-index: level(content);
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--palette-black-20);
}

.pagination {
  --pagination-link-color: var(--palette-black);
  --pagination-link-border-color: var(--palette-black-15);
  --pagination-link-background-color: transparent;
  --pagination-link-hover-color: var(--palette-black);
  --pagination-link-hover-border-color: transparent;
  --pagination-link-hover-background-color: var(--palette-black-15);
  --pagination-link-active-color: var(--palette-active-lightest);
  --pagination-link-active-border-color: var(--palette-active-base);
  --pagination-link-active-background-color: var(--palette-active-base);
  --pagination-font-size: var(--type-scale-14);
  --pagination-item-space: 1rem;
  --pagination-link-min-width: 32px;
  --pagination-link-border-width: 1px;
  --pagination-link-padding: 6px 8px;
  --pagination-link-border-radius: var(--radius-base);
  font-size: var(--pagination-font-size);
}
.pagination .pagination-list {
  display: flex;
  align-items: center;
}
.pagination .pagination-item {
  display: flex;
  align-items: center;
  margin-right: var(--pagination-item-space);
}
.pagination .pagination-item.active .pagination-link {
  text-decoration: none;
  color: var(--pagination-link-active-color);
  border-color: var(--pagination-link-active-border-color);
  background-color: var(--pagination-link-active-background-color);
}
.pagination .pagination-link {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  line-height: 1;
  border-style: solid;
  min-width: var(--pagination-link-min-width);
  border-width: var(--pagination-link-border-width);
  padding: var(--pagination-link-padding);
  border-radius: var(--pagination-link-border-radius);
  color: var(--pagination-link-color);
  border-color: var(--pagination-link-border-color);
  background-color: var(--pagination-link-background-color);
}
.pagination .pagination-link:hover {
  text-decoration: none;
  color: var(--pagination-link-hover-color);
  border-color: var(--pagination-link-hover-border-color);
  background-color: var(--pagination-link-hover-background-color);
}
.pagination .pagination-ellipsis {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.pagination .pagination-prev,
.pagination .pagination-next {
  white-space: nowrap;
}

.popover {
  --popover-background-color: var(--palette-white);
  --popover-box-shadow: var(--shadow-300);
  --popover-font-size: var(--type-scale-16);
  --popover-line-height: var(--body-text-line);
  --popover-border-radius: var(--radius-base);
  --popover-level: var(--level-over-page);
  --popover-width: 240px;
  position: absolute;
  margin: 0;
  overflow: auto;
  border-radius: var(--popover-border-radius);
  z-index: var(--popover-level);
  min-width: var(--popover-width);
  box-shadow: var(--popover-box-shadow);
  font-size: var(--popover-font-size);
  line-height: var(--popover-line-height);
  background-color: var(--popover-background-color);
}

.popover-dark {
  --popover-background-color: var(--palette-black);
  --popover-box-shadow: 0 8px 20px var(--palette-black-50), 0 1px 2px var(--palette-black-15);
}

.slider {
  --slider-disabled-background-color: var(--palette-black-20);
  --slider-track-background-color: var(--palette-black-10);
  --slider-fill-background-color: var(--palette-active-base);
  --slider-handle-background-color: var(--palette-white);
  --slider-tick-border-color: var(--palette-black-30);
  --slider-tick-color: var(--palette-black-50);
  --slider-font-size: var(--type-scale-11);
  --slider-line-height: 1.3;
  --slider-height: 6px;
  --slider-border-radius: var(--radius-base);
  --slider-handle-size: 16px;
  --slider-handle-box-shadow: 0 1px 3px var(--palette-black-50);
}
.slider:disabled, .slider.disabled {
  opacity: 0.6;
}
.slider:disabled .slider-track, .slider:disabled .slider-handle, .slider:disabled .slider-ticks, .slider.disabled .slider-track, .slider.disabled .slider-handle, .slider.disabled .slider-ticks {
  cursor: default;
}
.slider:disabled .slider-fill, .slider.disabled .slider-fill {
  background-color: var(--slider-disabled-background-color);
}
.slider .slider-track {
  cursor: pointer;
  position: relative;
  width: 100%;
  height: var(--slider-height);
  border-radius: var(--slider-border-radius);
  background-color: var(--slider-track-background-color);
}
.slider .slider-fill {
  position: absolute;
  height: var(--slider-height);
  border-radius: var(--slider-border-radius);
  background-color: var(--slider-fill-background-color);
}
.slider .slider-handle {
  cursor: pointer;
  position: absolute;
  z-index: 2;
  border-radius: 50%;
  width: var(--slider-handle-size);
  height: var(--slider-handle-size);
  margin-top: calc(var(--slider-height) * -1);
  box-shadow: var(--slider-handle-box-shadow);
  background-color: var(--slider-handle-background-color);
}
.slider .slider-ticks {
  cursor: pointer;
  position: relative;
  z-index: 1;
  min-height: 24px;
  height: var(--slider-height);
}
.slider .slider-tick {
  position: absolute;
  text-align: center;
  margin-top: 4px;
  font-size: var(--slider-font-size);
  line-height: var(--slider-line-height);
  border-left-width: 1px;
  border-left-style: solid;
  border-left-color: var(--slider-tick-border-color);
  height: var(--slider-height);
  padding-top: var(--slider-height);
  color: var(--slider-tick-color);
}

.toggle {
  --toggle-background-color: var(--palette-neutral-mid);
  --toggle-active-background-color: var(--palette-active-base);
  --toggle-handle-background-color: var(--palette-white);
  --toggle-label-font-size: var(--type-scale-15);
  --toggle-label-font-weight: normal;
  --toggle-label-line-height: var(--body-text-line);
  --toggle-label-text-transform: none;
  --toggle-label-top: 2px;
  --toggle-label-margin-left: 2px;
  --toggle-width: 36px;
  --toggle-height: 22px;
  --toggle-border-radius: calc(var(--toggle-height)/2);
  --toggle-size: 18px;
  --toggle-space: 2px;
  cursor: pointer;
  display: inline-block;
}
.toggle .toggle-checkbox {
  position: absolute;
  visibility: hidden;
}
.toggle .toggle-checkbox:checked + .toggle-toggle {
  background-color: var(--toggle-active-background-color);
}
.toggle .toggle-checkbox:checked + .toggle-toggle:before {
  left: 50%;
}
.toggle .toggle-label {
  position: relative;
  font-weight: var(--toggle-label-font-weight);
  font-size: var(--toggle-label-font-size);
  line-height: var(--toggle-label-line-height);
  text-transform: var(--toggle-label-text-transform);
  top: var(--toggle-label-top);
  margin-left: var(--toggle-label-margin-left);
}
.toggle .toggle-toggle {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  transition: background-color 0.25s;
  border-radius: var(--toggle-border-radius);
  width: var(--toggle-width);
  height: var(--toggle-height);
  background-color: var(--toggle-background-color);
}
.toggle .toggle-toggle:before,
.toggle .toggle-toggle:after {
  content: "";
}
.toggle .toggle-toggle:before {
  position: absolute;
  display: block;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);
  transition: left 0.25s;
  width: var(--toggle-size);
  height: var(--toggle-size);
  top: var(--toggle-space);
  left: var(--toggle-space);
  background-color: var(--toggle-handle-background-color);
}
.toggle:hover .toggle-toggle:before {
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5);
}


/* ------------------------------------------------------------------- */
/* ------------------------------------------------------------------- */
/* ------------------------------------------------------------------- */

/* OFA Button Kompakt - Überschreibt die bestehenden Regeln */
.ofa_button { 
    margin-top: 1px; 
    background-color: #6A93CC; 
    color: #FFFFFF; 
    border: 2px solid #4E4C4D !important; /* Dünnerer Border */
    border-radius: 3px; 
    padding: 2px 4px !important; /* Viel kleineres Padding */
    text-align: center; 
    font-size: 10px !important; /* Kleinere Schrift */
    cursor: pointer; 
    width: 100%;
    min-height: 20px !important; /* Viel kleinere Höhe */
    line-height: 1.1;
    box-sizing: border-box;
}

.ofa_button:hover { 
    background-color: #4E76B8; 
    transform: scale(1.02); /* Weniger skalieren */
}

.ofa_button.danger { 
    background-color: #dc3545; 
}

.ofa_button.danger:hover { 
    background-color: #bd2130; 
}

.ofa_button.warning { 
    background-color: #6d6d6d; 
}

.ofa_button.warning:hover { 
    background-color: #5a5a5a; 
}

/* Button Grid kompakter */
.button-grid { 
    display: grid; 
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); /* Schmaler */
    gap: 2rem !important; /* Kleinerer Abstand */
    padding: 1rem !important; /* Weniger Padding */
}

.button-group { 
    display: flex; 
    flex-direction: column; 
    gap: 1px !important; /* Sehr kleiner Abstand zwischen Buttons */
}

/* Labels kompakter */
.button-group label {
    font-size: 11px !important;
    margin-bottom: 2px !important;
    padding: 2px 0 !important;
}

/* Button-Trenner kompakter */
.button-trenner { 
    margin: 4px 0px !important; /* Viel kleinerer Abstand */
    border: none; 
    border-top: 1px solid #797979 !important; /* Dünnere Linie */
}

/* Tab Content kompakter */
.tab-content { 
    padding: 0.5rem !important; 
    padding-bottom: 1rem !important;
}

/* Responsive für sehr kleine Buttons */
@media (max-width: 768px) {
    .ofa_button {
        font-size: 8px !important;
        min-height: 18px !important;
        padding: 1px 2px !important;
    }
    
    .button-grid {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
        gap: 1rem !important;
        padding: 0.5rem !important;
    }
}

/* MQTT Manuel Publish Styling */
.mqtt-publish-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    margin-top: 10px;
    margin-bottom: 15px;
}

.mqtt-input-group {
    display: flex;
    flex-direction: column;
}

.mqtt-label {
    font-size: 12px;
    font-weight: 500;
    color: #333;
    margin-bottom: 5px;
}

.mqtt-input-group .input {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
}

.mqtt-button-container {
    display: flex;
    justify-content: center;
    margin-top: 15px;
}

.mqtt-button-container .button {
    min-width: 120px;
}

/* Responsive Design für kleinere Bildschirme */
@media (max-width: 768px) {
    .mqtt-publish-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    
    .mqtt-input-group {
        margin-bottom: 10px;
    }
}

@media (max-width: 1024px) and (min-width: 769px) {
    .mqtt-publish-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
}

/* ------------------------------------------------------------------- */
/* ------------------------------------------------------------------- */
/* ------------------------------------------------------------------- */

/* Zusätzliche Styles für die erweiterte Geräteauswahl */
.progress-container {
    width: 100%;
    background-color: #ddd;
    border-radius: 4px;
    overflow: hidden;
}

.progress-bar {
    height: 20px;
    background-color: #4CAF50;
    transition: width 0.3s ease;
    text-align: center;
    line-height: 20px;
    color: white;
    font-size: 12px;
}

.selection-display {
    background-color: #f8f9fa !important;
    border: 1px solid #dee2e6;
    border-radius: 4px;
}

.device-selection-controls {
    border: 1px solid #007bff;
    border-radius: 8px;
    padding: 10px;
    background-color: #f0f8ff;
}

.selective-commands, .forced-commands {
    border-left: 3px solid #28a745;
    padding-left: 10px;
}

.forced-commands {
    border-left-color: #dc3545;
}

.help-text {
    background-color: #e9ecef !important;
    border-left: 4px solid #007bff;
}

/* Erweiterte Styles für Auto-Select Integration */
.mode-controls {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.mode-info {
    background-color: #e7f3ff !important;
    border: 1px solid #b3d9ff;
    border-radius: 4px;
}

/* Auto-Select Button Styles */
.button.button-info {
    background-color: #17a2b8;
    color: white;
}

.button.button-info:hover {
    background-color: #138496;
}

/* Kompatibilitäts-Warnung */
.compatibility-warning {
    background-color: #fff3cd !important;
    border-color: #ffeaa7 !important;
    color: #856404 !important;
}

/* ================================================================
   CUSTOM DROPDOWN MIT GRUPPIERUNG - High Comfort Edition
   ================================================================ */

.custom-dropdown-container {
    position: relative;
    width: 100%;
    max-width: 350px; /* Optional: Maximale Breite begrenzen 350px */
}

.custom-dropdown-input {
    width: 100%;
    padding: 10px 5px 10px 12px;
    border: 1px solid var(--palette-black-20);
    border-radius: var(--radius-base);
    font-size: var(--type-scale-12);
    background-color: var(--palette-white);
    cursor: text;
    transition: all 0.2s ease;
}

.custom-dropdown-input:focus {
    outline: none;
    border-color: var(--palette-active-base);
    box-shadow: 0 0 0 3px var(--palette-active-lightest);
}

.custom-dropdown-arrow {
    position: absolute;
    right: 5px; /* Bleibt so */
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid var(--palette-black-60);
    pointer-events: none;
    transition: transform 0.3s ease;
}

.custom-dropdown-container.open .custom-dropdown-arrow {
    transform: translateY(-50%) rotate(180deg);
}

.custom-dropdown-menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: var(--palette-white);
    border: 1px solid var(--palette-black-10);
    border-radius: var(--radius-base);
    box-shadow: var(--shadow-300);
    max-height: 400px;
    overflow-y: auto;
    z-index: var(--level-over-content);
    opacity: 0;
    transform: translateY(-10px);
    pointer-events: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.custom-dropdown-container.open .custom-dropdown-menu {
    opacity: 1;
    transform: translateY(0);
    pointer-events: all;
}

.dropdown-group {
    padding: 8px 0;
    border-bottom: 1px solid var(--palette-black-7);
}

.dropdown-group:last-child {
    border-bottom: none;
}

.dropdown-group-header {
    padding: 8px 16px;
    font-size: var(--type-scale-12);
    font-weight: var(--font-weight-semibold);
    color: var(--palette-black-50);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--palette-neutral-lightest);
}

.dropdown-group-icon {
    font-size: 14px;
}

.dropdown-item {
    padding: 10px 16px 10px 40px;
    cursor: pointer;
    transition: all 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: var(--type-scale-14);
    color: var(--palette-neutral-darker);
    position: relative;
}

.dropdown-item:before {
    content: "→";
    position: absolute;
    left: 16px;
    opacity: 0;
    transform: translateX(-5px);
    transition: all 0.2s ease;
    color: var(--palette-primary-base);
    font-weight: bold;
}

.dropdown-item:hover {
    background: var(--palette-active-lightest);
    color: var(--palette-active-dark);
}

.dropdown-item:hover:before {
    opacity: 1;
    transform: translateX(0);
}

.dropdown-item.highlighted {
    background: var(--palette-active-light);
    color: var(--palette-active-darker);
}

.dropdown-item-value {
    font-family: var(--font-mono);
    font-size: var(--type-scale-8);
    color: var(--palette-black-60);
}

.dropdown-no-results {
    padding: 20px;
    text-align: center;
    color: var(--palette-black-40);
    font-style: italic;
}

/* Scrollbar Styling */
.custom-dropdown-menu::-webkit-scrollbar {
    width: 8px;
}

.custom-dropdown-menu::-webkit-scrollbar-track {
    background: var(--palette-neutral-lightest);
    border-radius: var(--radius-base);
}

.custom-dropdown-menu::-webkit-scrollbar-thumb {
    background: var(--palette-black-20);
    border-radius: var(--radius-base);
}

.custom-dropdown-menu::-webkit-scrollbar-thumb:hover {
    background: var(--palette-black-30);
}

/* Responsive Design */
@media (max-width: 768px) {
    .custom-dropdown-menu {
        max-height: 300px;
    }
    
    .dropdown-item {
        padding: 12px 16px 12px 36px;
    }
}

/* --------------------------------------------------------------- */

/* ===============================================================================
   SMS INPUT CONTAINER
   =============================================================================== */

.sms-input-wrapper {
    width: 100%;
    margin-top: 10px;
}

.sms-textarea-wrapper {
    position: relative;
    width: 100%;
}

.sms-textarea {
    width: 100%;
    min-height: 80px;
    padding: 12px;
    border: 2px solid var(--palette-black-20);
    border-radius: var(--radius-base);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    resize: vertical;
    box-sizing: border-box;
    transition: border-color 0.2s;
}

.sms-textarea:focus {
    outline: none;
    border-color: var(--palette-active-base);
    box-shadow: 0 0 0 3px var(--palette-active-lightest);
}

.sms-counter {
    margin-top: 6px;
    text-align: right;
    font-size: 12px;
    color: #666;
    font-weight: 500;
}

.sms-counter span {
    font-weight: bold;
    transition: color 0.2s;
}

/* SMS Templates */
.sms-templates {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px dashed #ddd;
}

.sms-templates-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: #555;
    margin-bottom: 8px;
}

.sms-templates-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.sms-template-btn {
    padding: 6px 12px;
    background: #f5f5f5;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 12px;
    color: #333;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 300px;
}

.sms-template-btn:hover {
    background: #0066cc;
    color: white;
    border-color: #0066cc;
}

.sms-template-btn:active {
    transform: scale(0.98);
}

/* Responsive */
@media (max-width: 768px) {
    .sms-template-btn {
        max-width: 100%;
        width: 100%;
    }
    
    .sms-templates-buttons {
        flex-direction: column;
    }
}


/* =============================================================== */
/*              MQTT PUBLISH - COMPACT LAYOUT                      */
/* =============================================================== */

/* Main Container */
.mqtt-publish-container {
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* 2-Column Layout (Parameter & Value) */
.mqtt-row-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px; /* Etwas mehr Abstand für klare Trennung */
}

.mqtt-col-half {
    flex: 1;
    min-width: 0; /* Wichtig für Textüberlauf */
    box-sizing: border-box;
    padding: 0 2px; /* Kleiner interner Puffer */
}

/* Custom Dropdowns in MQTT Row volle Breite */
.mqtt-col-half .custom-dropdown-container {
    max-width: none; /* Überschreibt die Standard max-width: 350px */
    width: 100%;
    box-sizing: border-box;
}

/* Full Width Row (Composite) */
.mqtt-row-full {
    width: 100%;
    margin-top: 4px;
}

/* Bottom Row (Device, Topic, Button) */
.mqtt-row-bottom {
    display: flex;
    gap: 8px;
    align-items: flex-end;
}

.mqtt-input-group-inline {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1;
}

.mqtt-label-inline {
    font-size: 18px;
    line-height: 1;
    flex-shrink: 0;
}

.mqtt-input-inline {
    flex: 1;
    height: 25px;
    padding: 5px 8px;
    font-size: 14px;
    border: 1px solid #d0d0d0;
    border-radius: 4px;
    min-width: 0;
}

.mqtt-input-inline:focus {
    outline: none;
    border-color: #0066cc;
    box-shadow: 0 0 0 2px rgba(0, 102, 204, 0.1);
}

/* Send Button */
.mqtt-send-button {
    width: 100px;
    height: 30px;
    padding: 0 20px;
    background: #2d2d2d;
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background 0.2s;
}

.mqtt-send-button:hover {
    background: #1a1a1a;
}

.mqtt-send-button:active {
    transform: scale(0.98);
}

/* Message Preview (EDITIERBAR) */
.mqtt-message-preview {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 12px;
}

.mqtt-preview-label {
    font-size: 13px;
    font-weight: 600;
    color: #333;
}

.mqtt-preview-input {
    width: 100%;
    padding: 10px 12px;
    font-family: 'Courier New', monospace;
    font-size: 14px;
    background: #f0f8ff;
    border: 2px solid #0066cc;
    border-radius: 4px;
    color: #0066cc;
    font-weight: 500;
}

.mqtt-preview-input:focus {
    outline: none;
    background: #e6f3ff;
    border-color: #0052a3;
    box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.15);
}

/* Labels */
.mqtt-label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: #555;
    margin-bottom: 4px;
    text-transform: none;
}

/* Compact Composite Builder - Enthält nun SmartMQTTDropdown-Instanzen */
.composite-builder-compact {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 10px;
    background: #fafafa;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
}

.composite-static {
    font-family: 'Courier New', monospace;
    color: #666;
    font-size: 13px;
    white-space: nowrap;
}

/* Composite Dropdowns - Spezielle Container für Dropdowns im Builder */
.composite-dropdown {
    display: inline-block;
}

.composite-dropdown .custom-dropdown-input {
    /* Erbt Styles von .custom-dropdown-input - kein Override nötig */
}

.composite-dropdown .custom-dropdown-menu {
    /* Erbt Styles von .custom-dropdown-menu - kein Override nötig */
}

/* Payload JSON Container */
.payload-json-container {
    width: 100%;
    margin-top: 10px;
    padding: 10px;
    background: #f0f8ff;
    border: 2px dashed #0066cc;
    border-radius: 4px;
    animation: slideDown 0.3s ease-out;
}

.payload-json-container label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: #0066cc;
    margin-bottom: 6px;
}

.payload-json-container textarea {
    width: 100%;
    min-height: 80px;
    padding: 10px;
    border: 1px solid var(--palette-black-20);
    border-radius: var(--radius-base);
    font-family: 'Courier New', monospace;
    font-size: 13px;
    resize: vertical;
    box-sizing: border-box;
}

.payload-json-container textarea:focus {
    outline: none;
    border-color: var(--palette-active-base);
    box-shadow: 0 0 0 3px var(--palette-active-lightest);
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.composite-preview-compact {
    margin-top: 8px;
    padding: 8px 10px;
    background: #f0f8ff;
    border: 1px dashed #0066cc;
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.composite-preview-compact strong {
    color: #0066cc;
    font-size: 16px;
}

.composite-preview-compact code {
    flex: 1;
    background: none;
    padding: 0;
    color: #0066cc;
    font-weight: 500;
    font-family: 'Courier New', monospace;
    font-size: 13px;
}


/* Composite Dropdown Custom Highlighting (falls benötigt) */
.composite-dropdown.composite-custom .custom-dropdown-input {
    background: #fffacd;
    border-color: #ffd700;
}

/* Responsive Design - Composite */
@media (max-width: 768px) {
    .mqtt-row-2col {
        grid-template-columns: 1fr;
    }
    
    .mqtt-row-bottom {
        flex-direction: column;
        align-items: stretch;
    }
    
    .mqtt-send-button {
        width: 100%;
    }
    
    .composite-builder-compact {
        flex-direction: column;
        align-items: stretch;
    }
    
    .composite-dropdown {
        min-width: 100%;
        max-width: 100%;
    }
    
    .composite-dropdown .custom-dropdown-input {
        max-width: 100%;
        width: 100%;
    }
}

/* --------------------------------------------------------------- */

/* OLD STYLES - KEEP FOR NOW */
.mqtt-row {
    display: flex;
    gap: 12px;
    width: 100%;
    align-items: flex-start;
}

.mqtt-row-3col {
    display: grid;
    grid-template-columns: 2fr 2fr 1fr;
    gap: 12px;
}

.mqtt-col-full {
    flex: 1;
    width: 100%;
}

.mqtt-col-3 {
    flex: 1;
}

.mqtt-input-compact {
    max-height: 32px !important;
    min-height: 32px !important;
    padding: 6px 10px !important;
    font-size: 13px;
    border: 1px solid #d0d0d0;
    border-radius: 4px;
    width: 100%;
}

.mqtt-input-compact:focus {
    outline: none;
    border-color: #0066cc;
    box-shadow: 0 0 0 2px rgba(0, 102, 204, 0.1);
}

.mqtt-publish-button {
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
}

.composite-builder {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 10px;
    background: #f8f9fa;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    min-height: 42px;
}

.composite-preview {
    margin-top: 8px;
    padding: 8px 12px;
    background: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    font-size: 13px;
}

.composite-preview code {
    color: #0066cc;
    font-weight: 600;
}

/* --------------------------------------------------------------- */

/* Subtree/Collapsible Support */
.dropdown-group-items {
    max-height: 1000px;
    overflow: hidden;
    transition: max-height 0.3s ease, opacity 0.3s ease;
    opacity: 1;
}

.dropdown-group.collapsed .dropdown-group-items,
.dropdown-subgroup.collapsed .dropdown-group-items {
    max-height: 0;
    opacity: 0;
    overflow: hidden; /* WICHTIG: Verhindert Scrollen */
}

.dropdown-group-header,
.dropdown-subgroup-header {
    cursor: pointer;
    user-select: none;
    transition: background-color 0.2s ease;
}

.dropdown-group-header:hover,
.dropdown-subgroup-header:hover {
    background: var(--palette-active-lightest);
}

.dropdown-group-icon {
    display: inline-block;
    transition: transform 0.3s ease;
    font-size: 10px;
    margin-right: 4px;
}

/* Pfeil-Animation: Eingeklappt = nach rechts (►) */
.dropdown-group.collapsed .dropdown-group-header .dropdown-group-icon,
.dropdown-subgroup.collapsed .dropdown-subgroup-header .dropdown-group-icon {
    transform: rotate(-90deg); /* ► */
}

/* Pfeil-Animation: Ausgeklappt = nach unten (▼) */
.dropdown-group:not(.collapsed) .dropdown-group-header .dropdown-group-icon,
.dropdown-subgroup:not(.collapsed) .dropdown-subgroup-header .dropdown-group-icon {
    transform: rotate(0deg); /* ▼ */
}

/* Subgroup Styling */
.dropdown-subgroup {
    margin-left: 0;
}

.dropdown-subgroup-header {
    padding: 6px 16px 6px 32px;
    font-size: var(--type-scale-13);
    font-weight: var(--font-weight-medium);
    color: var(--palette-black-70);
    background: var(--palette-neutral-lighter);
    display: flex;
    align-items: center;
}

.dropdown-group-items.indent {
    padding-left: 16px;
}

/* --------------------------------------------------------------- */

/* Edit ID Info Card Styling - Modal Window */
.Edit_ID_Info_Card.modal-overlay {
    animation: fadeIn 0.3s ease-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.Edit_ID_Info_Card .tab-btn {
    transition: all 0.3s ease;
}

.Edit_ID_Info_Card .tab-btn:hover {
    background-color: #f0f0f0;
}

.Edit_ID_Info_Card .tab-btn.active {
    color: #0066cc;
    font-weight: bold;
}

.Edit_ID_Info_Card input.input,
.Edit_ID_Info_Card textarea.input {
    transition: border-color 0.3s ease;
}

.Edit_ID_Info_Card input.input:focus,
.Edit_ID_Info_Card textarea.input:focus {
    border-color: #0066cc;
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.1);
}

.Edit_ID_Info_Card .grid {
    display: grid;
}

.Edit_ID_Info_Card .grid-2 {
    grid-template-columns: repeat(2, 1fr);
}

.Edit_ID_Info_Card .gap-4 {
    gap: 20px;
}

.Edit_ID_Info_Card .col-2 {
    grid-column: span 2;
}

/* Tabellen-Styling */
#table-container table {
    border-collapse: collapse;
}

#table-container table tr:hover {
    background-color: #e3f2fd !important;
}