@charset "UTF-8";
@import 'normalize.css';
/**
 * Breakpoint mixins
 */
.expand-enter-active,
.expand-leave-active {
  transition-property: var(--expand-transition--transition-property, height);
  transition-duration: var(--expand-transition--transition-duration, var(--transition-duration));
  transition-timing-function: var(--expand-transition--transition-timing-function, var(--transition-timing-function));
  overflow: hidden;
}

.expand-enter-from,
.expand-leave-to {
  height: 0;
}

.fade-in-transition-enter-active,
.fade-in-transition-leave-active {
  transition-property: var(--fade-in-transition--transition-property, opacity);
  transition-duration: var(--fade-in-transition--transition-duration, var(--transition-duration));
  transition-timing-function: var(--fade-in-transition--transition-timing-function, cubic-bezier(0.55, 0, 0.1, 1));
}

.fade-in-transition-enter-from,
.fade-in-transition-leave-active {
  opacity: 0;
}

.fade-in-linear-transition-enter-active,
.fade-in-linear-transition-leave-active {
  transition-property: var(--fade-in-linear-transition--transition-property, opacity);
  transition-duration: var(--fade-in-linear-transition--transition-duration, var(--transition-duration));
  transition-timing-function: var(--fade-in-linear-transition--transition-timing-function, cubic-bezier(0.23, 1, 0.32, 1));
}

.fade-in-linear-transition-enter-from,
.fade-in-linear-transition-leave-from,
.fade-in-linear-transition-leave-active {
  opacity: 0;
}

.slide-in-right-transition-enter-active,
.slide-in-right-transition-leave-active {
  transition-property: var(--slide-in-right-transition--transition-property, transform);
  transition-duration: var(--slide-in-right-transition--transition-duration, var(--transition-duration));
  transition-timing-function: var(--slide-in-right-transition--transition-timing-function, ease);
  transform-origin: left;
}

.slide-in-right-transition-enter-from,
.slide-in-right-transition-leave-to {
  transform: translateX(-100%);
}

.slide-in-right-transition-enter-to,
.slide-in-right-transition-leave-from {
  transform: translateX(0);
}

.zoom-in-bottom-transition-enter-active,
.zoom-in-bottom-transition-leave-active {
  transition-property: var(--zoom-in-bottom-transition--transition-property, transform, opacity);
  transition-duration: var(--zoom-in-bottom-transition--transition-duration, var(--transition-duration));
  transition-timing-function: var(--zoom-in-bottom-transition--transition-timing-function, cubic-bezier(0.23, 1, 0.32, 1));
  opacity: 1;
  transform: scaleY(1);
  transform-origin: center bottom;
}

.zoom-in-bottom-transition-enter-from,
.zoom-in-bottom-transition-leave-active {
  opacity: 0;
  transform: scaleY(0);
}

.zoom-in-center-transition-enter-active,
.zoom-in-center-transition-leave-active {
  transition-property: var(--zoom-in-center-transition--transition-property, transform, opacity);
  transition-duration: var(--zoom-in-center-transition--transition-duration, var(--transition-duration));
  transition-timing-function: var(--zoom-in-center-transition--transition-timing-function, cubic-bezier(0.55, 0, 0.1, 1));
  opacity: 1;
  transform-origin: center center;
}

.zoom-in-center-transition-enter-from,
.zoom-in-center-transition-leave-active {
  opacity: 0;
  transform: scale(0, 0);
}

.zoom-in-top-transition-enter-active,
.zoom-in-top-transition-leave-active {
  transition-property: var(--zoom-in-top-transition--transition-property, transform, opacity);
  transition-duration: var(--zoom-in-top-transition--transition-duration, var(--transition-duration));
  transition-timing-function: var(--zoom-in-top-transition--transition-timing-function, cubic-bezier(0.23, 1, 0.32, 1));
  opacity: 1;
  transform: scaleY(1);
  transform-origin: center top;
}

.zoom-in-top-transition-enter-from,
.zoom-in-top-transition-leave-active {
  opacity: 0;
  transform: scaleY(0);
}

.zoom-in-left-transition-enter-active,
.zoom-in-left-transition-leave-active {
  transition-property: var(--zoom-in-center-transition--transition-property, transform, opacity);
  transition-duration: var(--zoom-in-center-transition--transition-duration, var(--transition-duration));
  transition-timing-function: var(--zoom-in-center-transition--transition-timing-function, cubic-bezier(0.23, 1, 0.32, 1));
  opacity: 1;
  transform: scale(1, 1);
  transform-origin: top left;
}

.zoom-in-left-transition-enter-from,
.zoom-in-left-transition-leave-active {
  opacity: 0;
  transform: scale(0.45, 0.45);
}

.zoom-in-right-transition-enter-active,
.zoom-in-right-transition-leave-active {
  transition-property: var(--zoom-in-right-transition--transition-property, transform, opacity);
  transition-duration: var(--zoom-in-right-transition--transition-duration, var(--transition-duration));
  transition-timing-function: var(--zoom-in-right-transition--transition-timing-function, cubic-bezier(0.23, 1, 0.32, 1));
  opacity: 1;
  transform: scale(1, 1);
  transform-origin: top right;
}

.zoom-in-right-transition-enter-from,
.zoom-in-right-transition-leave-active {
  opacity: 0;
  transform: scale(0.45, 0.45);
}

/**
 * Document
 */
*,
*::before,
*::after {
  box-sizing: border-box;
}

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

@media (prefers-reduced-motion: no-preference) {
  :root {
    scroll-behavior: smooth;
  }
}

/**
 * Body
 *
 * As a best practice, apply a default `background-color`.
 * Prevent adjustments of font size after orientation changes in iOS.
 * Change the default tap highlight to be completely transparent in iOS.
 */
body {
  color: var(--body--color, var(--color-dark));
  background-color: var(--body--background, var(--color-white));
  font-family: var(--body--font-family, var(--font-family-primary-base));
  font-size: var(--body--font-size, var(--font-size));
  line-height: var(--body--line-height, var(--line-height));
  text-align: var(--body--text-align, left);
  transition-property: var(--body--transition-property, background-color, color);
  transition-duration: var(--body--transition-duration, var(--transition-duration));
  transition-timing-function: var(--body--transition-timing-function, var(--transition-timing-function));
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: var(--body--tap-highlight-color, rgba(0, 0, 0, 0));
}

/**
 * Abbreviations
 *
 * Add the correct text decoration in Chrome, Edge, Opera, and Safari.
 * Add explicit cursor to indicate changed behavior.
 * Prevent the text-decoration to be skipped.
 */
abbr[title] {
  cursor: help;
  text-decoration-skip-ink: none;
}

address {
  margin-bottom: var(--address--margin-bottom, var(--margin-bottom));
  font-style: normal;
  line-height: inherit;
}

/**
 * Blockquote
 */
blockquote {
  margin: 0 0 var(--blockquote--margin-bottom, var(--margin-bottom));
}

.blockquote {
  font-size: var(--blockquote--font-size, var(--font-size));
}
.blockquote.-left {
  text-align: left;
}
.blockquote.-left.-bordered {
  padding-left: var(--blockquote--padding-left, var(--padding-left));
  border-left: var(--blockquote--border-left, 5px var(--border-left-style) var(--border-left-color));
}
.blockquote.-center {
  text-align: center;
}
.blockquote.-right {
  text-align: right;
}
.blockquote.-right.-bordered {
  padding-right: var(--blockquote--padding-right, var(--padding-right));
  border-right: var(--blockquote--border-right, 5px var(--border-right-style) var(--border-right-color));
}
.blockquote > p {
  margin-bottom: 0;
}
.blockquote > footer,
.blockquote > .footer {
  display: block;
  font-size: 80%;
  color: var(--blockquote--footer--color, var(--text-color-weak));
}
.blockquote > footer::before,
.blockquote > .footer::before {
  content: "— ";
}

/**
 * Code
 */
pre,
code,
kbd,
samp {
  font-family: var(--font-family-primary-monospace);
  font-size: var(--font-size);
}

pre {
  display: block;
  margin-top: 0;
  margin-bottom: var(--pre--margin-bottom, var(--margin-bottom));
  font-size: var(--pre--font-size, var(--code--font-size, var(--font-size-sm)));
  overflow: auto;
}
pre code {
  font-size: inherit;
  color: inherit;
  word-break: normal;
  background: transparent;
  padding: 0;
}

code {
  font-size: var(--code--font-size, var(--font-size-sm));
  color: var(--code--color);
  background: var(--code--background);
  padding: var(--code--padding, var(--code--padding-top, 0.15rem) var(--code--padding-right, 0.45rem) var(--code--padding-bottom, 0.15rem) var(--code--padding-left, 0.45rem));
  border-radius: var(--code--border-radius, var(--code--border-top-left-radius, var(--border-top-left-radius)) var(--code--border-top-right-radius, var(--border-top-right-radius)) var(--code--border-bottom-right-radius, var(--border-bottom-right-radius)) var(--code--border-bottom-left-radius, var(--border-bottom-left-radius)));
  word-wrap: break-word;
}
a > code {
  color: inherit;
}

kbd {
  padding: var(--kbd--padding, var(--kbd--padding-top, 0.1875rem) var(--kbd--padding-right, 0.375rem) var(--kbd--padding-bottom, 0.1875rem) var(--kbd--padding-left, 0.375rem));
  font-size: var(--kbd--font-size, var(--code--font-size, var(--font-size-sm)));
  color: var(--kbd--color, var(--body--background));
  background: var(--kbd--background, var(--body--color));
  border-radius: var(--kbd--border-radius, var(--border-radius-sm));
}
kbd kbd {
  padding: 0;
  font-size: var(--kbd--font-size, var(--font-size-sm));
}

output {
  display: inline-block;
}

/**
 * Displays
 */
.d1 {
  margin-top: var(--d1--margin-top, var(--display--margin-top, var(--heading--margin-top, 0)));
  margin-bottom: var(--d1--margin-bottom, var(--display--margin-bottom, var(--heading--margin-bottom, var(--margin-bottom-sm))));
  font-family: var(--d1--font-family, var(--display--font-family, var(--heading--font-family, var(--font-family-secondary-base))));
  font-style: var(--d1--font-style, var(--display--font-style, var(--heading--font-style, normal)));
  font-weight: var(--d1--font-weight, var(--display--font-weight, var(--heading--font-weight, var(--font-weight-semibold))));
  line-height: var(--d1--line-height, var(--display--line-height, var(--heading--line-height, 1.2)));
  color: var(--d1--color, var(--display--color, var(--heading--color, inherit)));
}

.d2 {
  margin-top: var(--d2--margin-top, var(--display--margin-top, var(--heading--margin-top, 0)));
  margin-bottom: var(--d2--margin-bottom, var(--display--margin-bottom, var(--heading--margin-bottom, var(--margin-bottom-sm))));
  font-family: var(--d2--font-family, var(--display--font-family, var(--heading--font-family, var(--font-family-secondary-base))));
  font-style: var(--d2--font-style, var(--display--font-style, var(--heading--font-style, normal)));
  font-weight: var(--d2--font-weight, var(--display--font-weight, var(--heading--font-weight, var(--font-weight-semibold))));
  line-height: var(--d2--line-height, var(--display--line-height, var(--heading--line-height, 1.2)));
  color: var(--d2--color, var(--display--color, var(--heading--color, inherit)));
}

.d3 {
  margin-top: var(--d3--margin-top, var(--display--margin-top, var(--heading--margin-top, 0)));
  margin-bottom: var(--d3--margin-bottom, var(--display--margin-bottom, var(--heading--margin-bottom, var(--margin-bottom-sm))));
  font-family: var(--d3--font-family, var(--display--font-family, var(--heading--font-family, var(--font-family-secondary-base))));
  font-style: var(--d3--font-style, var(--display--font-style, var(--heading--font-style, normal)));
  font-weight: var(--d3--font-weight, var(--display--font-weight, var(--heading--font-weight, var(--font-weight-semibold))));
  line-height: var(--d3--line-height, var(--display--line-height, var(--heading--line-height, 1.2)));
  color: var(--d3--color, var(--display--color, var(--heading--color, inherit)));
}

.d4 {
  margin-top: var(--d4--margin-top, var(--display--margin-top, var(--heading--margin-top, 0)));
  margin-bottom: var(--d4--margin-bottom, var(--display--margin-bottom, var(--heading--margin-bottom, var(--margin-bottom-sm))));
  font-family: var(--d4--font-family, var(--display--font-family, var(--heading--font-family, var(--font-family-secondary-base))));
  font-style: var(--d4--font-style, var(--display--font-style, var(--heading--font-style, normal)));
  font-weight: var(--d4--font-weight, var(--display--font-weight, var(--heading--font-weight, var(--font-weight-semibold))));
  line-height: var(--d4--line-height, var(--display--line-height, var(--heading--line-height, 1.2)));
  color: var(--d4--color, var(--display--color, var(--heading--color, inherit)));
}

.d5 {
  margin-top: var(--d5--margin-top, var(--display--margin-top, var(--heading--margin-top, 0)));
  margin-bottom: var(--d5--margin-bottom, var(--display--margin-bottom, var(--heading--margin-bottom, var(--margin-bottom-sm))));
  font-family: var(--d5--font-family, var(--display--font-family, var(--heading--font-family, var(--font-family-secondary-base))));
  font-style: var(--d5--font-style, var(--display--font-style, var(--heading--font-style, normal)));
  font-weight: var(--d5--font-weight, var(--display--font-weight, var(--heading--font-weight, var(--font-weight-semibold))));
  line-height: var(--d5--line-height, var(--display--line-height, var(--heading--line-height, 1.2)));
  color: var(--d5--color, var(--display--color, var(--heading--color, inherit)));
}

.d6 {
  margin-top: var(--d6--margin-top, var(--display--margin-top, var(--heading--margin-top, 0)));
  margin-bottom: var(--d6--margin-bottom, var(--display--margin-bottom, var(--heading--margin-bottom, var(--margin-bottom-sm))));
  font-family: var(--d6--font-family, var(--display--font-family, var(--heading--font-family, var(--font-family-secondary-base))));
  font-style: var(--d6--font-style, var(--display--font-style, var(--heading--font-style, normal)));
  font-weight: var(--d6--font-weight, var(--display--font-weight, var(--heading--font-weight, var(--font-weight-semibold))));
  line-height: var(--d6--line-height, var(--display--line-height, var(--heading--line-height, 1.2)));
  color: var(--d6--color, var(--display--color, var(--heading--color, inherit)));
}

.d1 {
  font-size: var(--d1--font-size, calc(var(--font-size) * var(--scale-ratio-pow-5) * var(--scale-ratio-pow-5)));
}

.d2 {
  font-size: var(--d2--font-size, calc(var(--font-size) * var(--scale-ratio-pow-5) * var(--scale-ratio-pow-4)));
}

.d3 {
  font-size: var(--d3--font-size, calc(var(--font-size) * var(--scale-ratio-pow-5) * var(--scale-ratio-pow-3)));
}

.d4 {
  font-size: var(--d4--font-size, calc(var(--font-size) * var(--scale-ratio-pow-5) * var(--scale-ratio-pow-2)));
}

.d5 {
  font-size: var(--d5--font-size, calc(var(--font-size) * var(--scale-ratio-pow-5) * var(--scale-ratio-pow-1)));
}

.d6 {
  font-size: var(--d6--font-size, calc(var(--font-size) * var(--scale-ratio-pow-5)));
}

/**
 * Forms
 */
label {
  display: inline-block;
}

button {
  border-radius: 0;
}

button:focus:not(:focus-visible) {
  outline: 0;
}

input,
button,
select,
optgroup,
textarea {
  font-size: inherit;
  line-height: inherit;
}

[role=button] {
  cursor: pointer;
}

select {
  word-wrap: normal;
}
select:disabled {
  opacity: 1;
}

[list]:not([type=date],
[type=datetime-local],
[type=month],
[type=week],
[type=time])::-webkit-calendar-picker-indicator {
  display: none !important;
}

button,
[type=button],
[type=reset],
[type=submit] {
  -webkit-appearance: button;
}
button:not(:disabled),
[type=button]:not(:disabled),
[type=reset]:not(:disabled),
[type=submit]:not(:disabled) {
  cursor: pointer;
}

textarea {
  resize: vertical;
}

fieldset {
  min-width: 0;
  padding: 0;
  margin: 0;
  border: 0;
}

legend {
  float: left;
  width: 100%;
  padding: 0;
  margin-bottom: var(--legend--margin-bottom, var(--margin-bottom));
  font-size: var(--legend--font-size, var(--font-size-lg));
  line-height: inherit;
}
legend + * {
  clear: left;
}

::-webkit-datetime-edit-fields-wrapper,
::-webkit-datetime-edit-text,
::-webkit-datetime-edit-minute,
::-webkit-datetime-edit-hour-field,
::-webkit-datetime-edit-day-field,
::-webkit-datetime-edit-month-field,
::-webkit-datetime-edit-year-field {
  padding: 0;
}

::-webkit-inner-spin-button {
  height: auto;
}

[type=search] {
  outline-offset: -2px;
  -webkit-appearance: textfield;
}

::-webkit-search-decoration {
  -webkit-appearance: none;
}

::-webkit-color-swatch-wrapper {
  padding: 0;
}

::file-selector-button {
  font: inherit;
  -webkit-appearance: button;
}

/**
 * Headings
 */
h1,
.h1 {
  margin-top: var(--h1--margin-top, var(--heading--margin-top, 0));
  margin-bottom: var(--h1--margin-bottom, var(--heading--margin-bottom, var(--margin-bottom-sm)));
  font-family: var(--h1--font-family, var(--heading--font-family, var(--font-family-secondary-base)));
  font-style: var(--h1--font-style, var(--heading--font-style, normal));
  font-weight: var(--h1--font-weight, var(--heading--font-weight, var(--font-weight-semibold)));
  line-height: var(--h1--line-height, var(--heading--line-height, 1.2));
  color: var(--h1--color, var(--heading--color, inherit));
}

h2,
.h2 {
  margin-top: var(--h2--margin-top, var(--heading--margin-top, 0));
  margin-bottom: var(--h2--margin-bottom, var(--heading--margin-bottom, var(--margin-bottom-sm)));
  font-family: var(--h2--font-family, var(--heading--font-family, var(--font-family-secondary-base)));
  font-style: var(--h2--font-style, var(--heading--font-style, normal));
  font-weight: var(--h2--font-weight, var(--heading--font-weight, var(--font-weight-semibold)));
  line-height: var(--h2--line-height, var(--heading--line-height, 1.2));
  color: var(--h2--color, var(--heading--color, inherit));
}

h3,
.h3 {
  margin-top: var(--h3--margin-top, var(--heading--margin-top, 0));
  margin-bottom: var(--h3--margin-bottom, var(--heading--margin-bottom, var(--margin-bottom-sm)));
  font-family: var(--h3--font-family, var(--heading--font-family, var(--font-family-secondary-base)));
  font-style: var(--h3--font-style, var(--heading--font-style, normal));
  font-weight: var(--h3--font-weight, var(--heading--font-weight, var(--font-weight-semibold)));
  line-height: var(--h3--line-height, var(--heading--line-height, 1.2));
  color: var(--h3--color, var(--heading--color, inherit));
}

h4,
.h4 {
  margin-top: var(--h4--margin-top, var(--heading--margin-top, 0));
  margin-bottom: var(--h4--margin-bottom, var(--heading--margin-bottom, var(--margin-bottom-sm)));
  font-family: var(--h4--font-family, var(--heading--font-family, var(--font-family-secondary-base)));
  font-style: var(--h4--font-style, var(--heading--font-style, normal));
  font-weight: var(--h4--font-weight, var(--heading--font-weight, var(--font-weight-semibold)));
  line-height: var(--h4--line-height, var(--heading--line-height, 1.2));
  color: var(--h4--color, var(--heading--color, inherit));
}

h5,
.h5 {
  margin-top: var(--h5--margin-top, var(--heading--margin-top, 0));
  margin-bottom: var(--h5--margin-bottom, var(--heading--margin-bottom, var(--margin-bottom-sm)));
  font-family: var(--h5--font-family, var(--heading--font-family, var(--font-family-secondary-base)));
  font-style: var(--h5--font-style, var(--heading--font-style, normal));
  font-weight: var(--h5--font-weight, var(--heading--font-weight, var(--font-weight-semibold)));
  line-height: var(--h5--line-height, var(--heading--line-height, 1.2));
  color: var(--h5--color, var(--heading--color, inherit));
}

h6,
.h6 {
  margin-top: var(--h6--margin-top, var(--heading--margin-top, 0));
  margin-bottom: var(--h6--margin-bottom, var(--heading--margin-bottom, var(--margin-bottom-sm)));
  font-family: var(--h6--font-family, var(--heading--font-family, var(--font-family-secondary-base)));
  font-style: var(--h6--font-style, var(--heading--font-style, normal));
  font-weight: var(--h6--font-weight, var(--heading--font-weight, var(--font-weight-semibold)));
  line-height: var(--h6--line-height, var(--heading--line-height, 1.2));
  color: var(--h6--color, var(--heading--color, inherit));
}

h1,
.h1 {
  font-size: var(--h1--font-size, calc(var(--font-size) * var(--scale-ratio-pow-5)));
}

h2,
.h2 {
  font-size: var(--h2--font-size, calc(var(--font-size) * var(--scale-ratio-pow-4)));
}

h3,
.h3 {
  font-size: var(--h3--font-size, calc(var(--font-size) * var(--scale-ratio-pow-3)));
}

h4,
.h4 {
  font-size: var(--h4--font-size, calc(var(--font-size) * var(--scale-ratio-pow-2)));
}

h5,
.h5 {
  font-size: var(--h5--font-size, calc(var(--font-size) * var(--scale-ratio-pow-1)));
}

h6,
.h6 {
  font-size: var(--h6--font-size, var(--font-size));
}

/**
 * Hidden attribute
 *
 * Always hide an element with the `hidden` HTML attribute.
 */
[hidden] {
  display: none !important;
}

/**
 * Horizontal rule
 */
hr {
  margin: var(--hr--margin, var(--margin-top) 0 var(--margin-bottom));
  color: var(--hr--color, inherit);
  border: 0;
  border-top: var(--hr--border-width, var(--border-top-width)) solid var(--hr--border-color, var(--border-top-color));
}

/**
 * Iframe
 *
 * Remove border from iframe
 */
iframe {
  border: 0;
}

/**
 * Images
 */
img,
svg {
  vertical-align: middle;
}

figure {
  margin: 0 0 var(--figure--margin-bottom, var(--margin-bottom));
}

.image.-fluid,
._image\:fluid {
  height: auto;
  width: 100%;
}

.image.-responsive,
._image\:responsive,
.image.-thumbnail,
._image\:thumbnail,
.image.-polaroid,
._image\:polaroid {
  height: auto;
  max-width: 100%;
}

.image.-thumbnail,
._image\:thumbnail,
.image.-polaroid,
._image\:polaroid {
  padding: var(--thumbnail--padding, var(--padding));
  background-color: var(--thumbnail--background, var(--color--white));
  border-width: var(--thumbnail--border-width, var(--border-width));
  border-style: var(--thumbnail--border-style, var(--border-style));
  border-color: var(--thumbnail--border-color, var(--border-color));
  border-radius: var(--thumbnail--border-radius, var(--border-radius));
  transition: var(--thumbnail--transition, var(--transition-duration) all var(--transition-timing-function));
  box-shadow: var(--thumbnail--box-shadow, var(--box-shadow));
}

.image.-polaroid,
._image\:polaroid {
  padding-bottom: var(--polaroid--padding, var(--padding));
}

.image[src$=".svg"] {
  width: 100% \9 ;
}

.figure {
  display: inline-block;
}
.figure > .image,
.figure > img {
  margin-bottom: var(--figure--image--margin-bottom, var(--margin-bottom));
  line-height: 1;
}
.figure > .caption {
  font-size: var(--figure--caption--font-size, var(--font-size-sm));
  color: var(--figure--caption--color, var(--body--color));
}

/**
 * Links
 * @credit https://github.com/twbs/bootstrap/issues/19402
 */
a {
  color: var(--link--color, var(--color-primary-500));
  text-decoration: var(--link--text-decoration, none);
}
a:hover {
  color: var(--link--hover--color, var(--color-primary-600));
  text-decoration: var(--link--hover--text-decoration, underline);
}

a:not([href], [class], [to]), a:not([href], [class], [to]):hover {
  color: inherit;
  text-decoration: none;
}

/**
 * Lists
 */
ol {
  padding-left: var(--ol--padding-left, var(--list--padding-left, var(--padding-left-lg)));
  margin-top: var(--ol--margin-top, var(--list--margin-top, 0));
  margin-bottom: var(--ol--margin-bottom, var(--list--margin-bottom, var(--margin-bottom)));
}

ul {
  padding-left: var(--ul--padding-left, var(--list--padding-left, var(--padding-left-lg)));
  margin-top: var(--ul--margin-top, var(--list--margin-top, 0));
  margin-bottom: var(--ul--margin-bottom, var(--list--margin-bottom, var(--margin-bottom)));
}

dl {
  margin-top: var(--dl--margin-top, var(--list--margin-top, 0));
  margin-bottom: var(--dl--margin-bottom, var(--list--margin-bottom, var(--margin-bottom)));
}

ol ol,
ul ul,
ol ul,
ul ol {
  margin-bottom: 0;
}

dt {
  font-weight: var(--dl--dt--font-weight, var(--font-weight-bold));
}

dd {
  margin-bottom: var(--dl--dd--margin-bottom, var(--margin-bottom-sm));
  margin-left: var(--dl--dd--margin-left, 0);
}

ul > .item,
ul > li,
ol > .item,
ol > li,
dl > .item,
dl > li,
.list > .item,
.list > li,
._list\:unstyled > .item,
._list\:unstyled > li,
._list\:inline > .item,
._list\:inline > li {
  margin-bottom: var(--list--item--margin-bottom, var(--margin-bottom-1-2));
}

.list.-unstyled,
._list\:unstyled {
  padding-left: 0;
  list-style: none;
}

.list.-inline,
._list\:inline {
  padding-left: 0;
  list-style: none;
}
.list.-inline > .item,
.list.-inline > li,
._list\:inline > .item,
._list\:inline > li {
  display: inline-flex;
  margin-bottom: 0;
}
.list.-inline > .item:not(:last-child),
.list.-inline > li:not(:last-child),
._list\:inline > .item:not(:last-child),
._list\:inline > li:not(:last-child) {
  margin-right: var(--list--inline--item--margin-right, var(--margin-right));
}

/**
 * Mark
 */
mark {
  padding: var(--mark--padding, 0.1875rem);
  background-color: var(--mark--background, var(--color-yellow-100));
}

/**
 * Paragraphs
 */
p {
  margin-top: var(--p--margin-top, 0);
  margin-bottom: var(--p--margin-bottom, var(--margin-bottom));
}

.lead {
  font-size: var(--lead--font-size, var(--font-size-lg));
  font-weight: var(--lead--font-weight, var(--font-weight-light));
}

.initialism {
  font-size: var(--initialism--font-size, 90%);
  text-transform: var(--initialism--text-transform, uppercase);
}

/**
 * Summary
 */
summary {
  cursor: pointer;
}

table {
  caption-side: bottom;
  border-collapse: collapse;
}

caption {
  padding-top: var(--caption--padding-top, var(--table--cell--padding-top, var(--padding-top-sm)));
  padding-bottom: var(--caption--padding-bottom, var(--table--cell--padding-bottom, var(--padding-bottom-sm)));
  color: var(--caption--color, var(--color-gray-600));
  text-align: left;
}

th {
  font-weight: var(--table--th--font-weight, var(--font-weight-bold));
  text-align: inherit;
  text-align: -webkit-match-parent;
}

thead,
tbody,
tfoot,
tr,
td,
th {
  border-color: inherit;
  border-style: solid;
  border-width: 0;
}

/**
 * Avoid 300ms click delay on touch devices that support the `touch-action` CSS property.
 *
 * In particular, unlike most other browsers, IE11+Edge on Windows 10 on touch devices and IE Mobile 10-11
 * DON'T remove the click delay when `<meta name='viewport' content='width=device-width'>` is present.
 * However, they DO support removing the click delay via `touch-action: manipulation`.
 * See:
 * https://getbootstrap.com/docs/4.0/content/reboot/#click-delay-optimization-for-touch
 * http://caniuse.com/#feat=css-touch-action
 * https://patrickhlauke.github.io/touch/tests/results/#suppressing-300ms-delay
 */
a,
area,
button,
[role=button],
input:not([type=range]),
label,
select,
summary,
textarea {
  touch-action: manipulation;
}

/**
 * Alert
 */
.alert {
  position: relative;
  display: flex;
  flex-direction: row;
  flex: 1 1 auto;
  min-width: 0;
  word-wrap: break-word;
  border-style: var(--alert--border-style, var(--alert--border-top-style, var(--border-top-style)) var(--alert--border-right-style, var(--border-right-style)) var(--alert--border-bottom-style, var(--border-bottom-style)) var(--alert--border-left-style, var(--border-left-style)));
  border-width: var(--alert--border-width, var(--alert--border-top-width, var(--border-top-width)) var(--alert--border-right-width, var(--border-right-width)) var(--alert--border-bottom-width, var(--border-bottom-width)) var(--alert--border-left-width, var(--border-left-width)));
  border-color: var(--alert--border-color, var(--alert--border-top-color, var(--border-top-color)) var(--alert--border-right-color, var(--border-right-color)) var(--alert--border-bottom-color, var(--border-bottom-color)) var(--alert--border-left-color, var(--border-left-color)));
  border-radius: var(--alert--border-radius, var(--alert--border-top-left-radius, var(--border-top-left-radius)) var(--alert--border-top-right-radius, var(--border-top-right-radius)) var(--alert--border-bottom-right-radius, var(--border-bottom-right-radius)) var(--alert--border-bottom-left-radius, var(--border-bottom-left-radius)));
  font-size: var(--alert--font-size, var(--font-size));
  box-shadow: var(--alert--box-shadow, var(--alert--box-shadow-x-offset, var(--box-shadow-offset-x)) var(--alert--box-shadow-y-offset, var(--box-shadow-offset-y)) var(--alert--box-shadow-blur-radius, var(--box-shadow-blur-radius)) var(--alert--box-shadow-spread-radius, var(--box-shadow-spread-radius)) var(--alert--box-shadow-color, var(--box-shadow-color)));
  background: var(--alert--background);
  color: var(--alert--color);
  background-clip: border-box;
  transition-property: var(--alert--transition-property, background-color, color, border-color);
  transition-duration: var(--alert--transition-duration, var(--transition-duration));
  transition-timing-function: var(--alert--transition-timing-function, var(--transition-timing-function));
  align-items: center;
}
.alert a {
  color: var(--alert--link--color, var(--alert--color));
  font-weight: 600;
  transition-property: var(--alert--link--transition-property, color);
  transition-duration: var(--alert--transition-duration, var(--transition-duration));
  transition-timing-function: var(--alert--transition-timing-function, var(--transition-timing-function));
}
.alert a:hover, .alert a:focus {
  color: var(--alert--link-color, var(--color));
}
.alert code {
  background: var(--alert--code--background);
  color: var(--alert--code--color);
}
.alert > .content {
  padding: var(--alert--padding, var(--alert--padding-top, var(--padding-top)) var(--alert--padding-right, var(--padding-right)) var(--alert--padding-bottom, var(--padding-bottom)) var(--alert--padding-left, var(--padding-left)));
}
.alert > .content > .title {
  font-weight: var(--alert--title--font-weight, var(--font-weight-semibold));
}
.alert > .icon {
  margin-left: var(--alert--icon--margin-left, var(--alert--padding-left, var(--padding-left)));
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.alert > .dismiss {
  flex: 0 0 auto;
  cursor: pointer;
  display: inline-block;
  text-align: center;
  margin-right: var(--alert--dismiss--margin-right, var(--alert--padding-right, var(--padding-right)));
}
.alert,
.alert > .content {
  flex: 0 1 100%;
}
.alert > hr,
.alert > .content > hr {
  margin-right: 0;
  margin-left: 0;
}

/**
 * Color variants
 */
.alert.-info {
  --alert--background: var(--alert--info--background, var(--color-info-100));
  --alert--border-top-color: var(--alert--info--border-top-color, var(--color-info-500));
  --alert--border-right-color: var(--alert--info--border-right-color, var(--color-info-500));
  --alert--border-bottom-color: var(
      --alert--info--border-bottom-color,
      var(--color-info-500)
  );
  --alert--border-left-color: var(--alert--info--border-left-color, var(--color-info-500));
  --alert--color: var(--alert--info--color, var(--color-info-800));
}
.alert.-success {
  --alert--background: var(--alert--success--background, var(--color-success-100));
  --alert--border-top-color: var(
      --alert--success--border-top-color,
      var(--color-success-500)
  );
  --alert--border-right-color: var(
      --alert--success--border-right-color,
      var(--color-success-500)
  );
  --alert--border-bottom-color: var(
      --alert--success--border-bottom-color,
      var(--color-success-500)
  );
  --alert--border-left-color: var(
      --alert--success--border-left-color,
      var(--color-success-500)
  );
  --alert--color: var(--alert--success--color, var(--color-success-800));
}
.alert.-warning {
  --alert--background: var(--alert--warning--background, var(--color-warning-100));
  --alert--border-top-color: var(
      --alert--warning--border-top-color,
      var(--color-warning-500)
  );
  --alert--border-right-color: var(
      --alert--warning--border-right-color,
      var(--color-warning-500)
  );
  --alert--border-bottom-color: var(
      --alert--warning--border-bottom-color,
      var(--color-warning-500)
  );
  --alert--border-left-color: var(
      --alert--warning--border-left-color,
      var(--color-warning-500)
  );
  --alert--color: var(--alert--warning--color, var(--color-warning-800));
}
.alert.-danger {
  --alert--background: var(--alert--danger--background, var(--color-danger-100));
  --alert--border-top-color: var(--alert--danger--border-top-color, var(--color-danger-500));
  --alert--border-right-color: var(
      --alert--danger--border-right-color,
      var(--color-danger-500)
  );
  --alert--border-bottom-color: var(
      --alert--danger--border-bottom-color,
      var(--color-danger-500)
  );
  --alert--border-left-color: var(
      --alert--danger--border-left-color,
      var(--color-danger-500)
  );
  --alert--color: var(--alert--danger--color, var(--color-danger-800));
}

/**
 * Size variants
 */
.alert.-sm {
  --alert--border-top-left-radius: var(
      --alert--sm--border-top-left-radius,
      calc(var(--border-top-right-radius) * var(--size-multiplier-sm))
  );
  --alert--border-top-right-radius: var(
      --alert--sm--border-top-right-radius,
      calc(var(--border-top-right-radius) * var(--size-multiplier-sm))
  );
  --alert--border-bottom-right-radius: var(
      --alert--sm--border-bottom-right-radius,
      calc(var(--border-bottom-right-radius) * var(--size-multiplier-sm))
  );
  --alert--border-bottom-left-radius: var(
      --alert--sm--border-bottom-left-radius,
      calc(var(--border-bottom-left-radius) * var(--size-multiplier-sm))
  );
  --alert--font-size: var(
      --alert--sm--font-size,
      calc(var(--font-size) * var(--size-multiplier-sm))
  );
  --alert--padding-top: var(
      --alert--sm--padding-top,
      calc(var(--padding-top) * var(--size-multiplier-sm))
  );
  --alert--padding-right: var(
      --alert--sm--padding-right,
      calc(var(--padding-right) * var(--size-multiplier-sm))
  );
  --alert--padding-bottom: var(
      --alert--sm--padding-bottom,
      calc(var(--padding-bottom) * var(--size-multiplier-sm))
  );
  --alert--padding-left: var(
      --alert--sm--padding-left,
      calc(var(--padding-left) * var(--size-multiplier-sm))
  );
}
.alert.-md {
  --alert--border-top-left-radius: var(
      --alert--md--border-top-left-radius,
      calc(var(--border-top-right-radius) * var(--size-multiplier-md))
  );
  --alert--border-top-right-radius: var(
      --alert--md--border-top-right-radius,
      calc(var(--border-top-right-radius) * var(--size-multiplier-md))
  );
  --alert--border-bottom-right-radius: var(
      --alert--md--border-bottom-right-radius,
      calc(var(--border-bottom-right-radius) * var(--size-multiplier-md))
  );
  --alert--border-bottom-left-radius: var(
      --alert--md--border-bottom-left-radius,
      calc(var(--border-bottom-left-radius) * var(--size-multiplier-md))
  );
  --alert--font-size: var(
      --alert--md--font-size,
      calc(var(--font-size) * var(--size-multiplier-md))
  );
  --alert--padding-top: var(
      --alert--md--padding-top,
      calc(var(--padding-top) * var(--size-multiplier-md))
  );
  --alert--padding-right: var(
      --alert--md--padding-right,
      calc(var(--padding-right) * var(--size-multiplier-md))
  );
  --alert--padding-bottom: var(
      --alert--md--padding-bottom,
      calc(var(--padding-bottom) * var(--size-multiplier-md))
  );
  --alert--padding-left: var(
      --alert--md--padding-left,
      calc(var(--padding-left) * var(--size-multiplier-md))
  );
}
.alert.-lg {
  --alert--border-top-left-radius: var(
      --alert--lg--border-top-left-radius,
      calc(var(--border-top-right-radius) * var(--size-multiplier-lg))
  );
  --alert--border-top-right-radius: var(
      --alert--lg--border-top-right-radius,
      calc(var(--border-top-right-radius) * var(--size-multiplier-lg))
  );
  --alert--border-bottom-right-radius: var(
      --alert--lg--border-bottom-right-radius,
      calc(var(--border-bottom-right-radius) * var(--size-multiplier-lg))
  );
  --alert--border-bottom-left-radius: var(
      --alert--lg--border-bottom-left-radius,
      calc(var(--border-bottom-left-radius) * var(--size-multiplier-lg))
  );
  --alert--font-size: var(
      --alert--lg--font-size,
      calc(var(--font-size) * var(--size-multiplier-lg))
  );
  --alert--padding-top: var(
      --alert--lg--padding-top,
      calc(var(--padding-top) * var(--size-multiplier-lg))
  );
  --alert--padding-right: var(
      --alert--lg--padding-right,
      calc(var(--padding-right) * var(--size-multiplier-lg))
  );
  --alert--padding-bottom: var(
      --alert--lg--padding-bottom,
      calc(var(--padding-bottom) * var(--size-multiplier-lg))
  );
  --alert--padding-left: var(
      --alert--lg--padding-left,
      calc(var(--padding-left) * var(--size-multiplier-lg))
  );
}

/**
 * Badge
 */
.badge {
  display: inline-block;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  color: var(--badge--color);
  background: var(--badge--background);
  border-style: var(--badge--border-style, var(--badge--border-top-style, var(--border-top-style)) var(--badge--border-right-style, var(--border-right-style)) var(--badge--border-bottom-style, var(--border-bottom-style)) var(--badge--border-left-style, var(--border-left-style)));
  border-width: var(--badge--border-width, var(--badge--border-top-width, var(--border-top-width)) var(--badge--border-right-width, var(--border-right-width)) var(--badge--border-bottom-width, var(--border-bottom-width)) var(--badge--border-left-width, var(--border-left-width)));
  border-color: var(--badge--border-color, var(--badge--border-top-color, var(--border-top-color)) var(--badge--border-right-color, var(--border-right-color)) var(--badge--border-bottom-color, var(--border-bottom-color)) var(--badge--border-left-color, var(--border-left-color)));
  border-radius: var(--badge--border-radius, var(--badge--border-top-left-radius, var(--border-top-left-radius)) var(--badge--border-top-right-radius, var(--border-top-right-radius)) var(--badge--border-bottom-right-radius, var(--border-bottom-right-radius)) var(--badge--border-bottom-left-radius, var(--border-bottom-left-radius)));
  font-size: var(--badge--font-size, var(--font-size));
  box-shadow: var(--badge--box-shadow, var(--badge--box-shadow-x-offset, var(--box-shadow-offset-x)) var(--badge--box-shadow-y-offset, var(--box-shadow-offset-y)) var(--badge--box-shadow-blur-radius, var(--box-shadow-blur-radius)) var(--badge--box-shadow-spread-radius, var(--box-shadow-spread-radius)) var(--badge--box-shadow-color, var(--box-shadow-color)));
  padding: var(--badge--padding, var(--badge--padding-top, var(--padding-top)) var(--badge--padding-right, var(--padding-right)) var(--badge--padding-bottom, var(--padding-bottom)) var(--badge--padding-left, var(--padding-left)));
  font-weight: var(--badge--font-weight, var(--font-weight-semibold));
  transition-property: var(--badge--transition-property, background-color, color, border-color);
  transition-duration: var(--badge--transition-duration, var(--transition-duration));
  transition-timing-function: var(--badge--transition-timing-function, var(--transition-timing-function));
}
a:hover .badge, a:focus .badge {
  text-decoration: none;
  background: var(--badge--link--hover--background, var(--badge--background));
}
.button .badge {
  position: relative;
  top: -1px;
}
.badge.-pill {
  --border-radius: 50%;
}

/**
 * Color variants
 */
.badge.-primary {
  --badge--background: var(--badge--primary--background, var(--color-primary));
  --badge--border-top-color: var(
      --badge--primary--border-top-color,
      var(--color-primary-shade-50)
  );
  --badge--border-right-color: var(
      --badge--primary--border-right-color,
      var(--color-primary-shade-50)
  );
  --badge--border-bottom-color: var(
      --badge--primary--border-bottom-color,
      var(--color-primary-shade-50)
  );
  --badge--border-left-color: var(
      --badge--primary--border-left-color,
      var(--color-primary-shade-50)
  );
  --badge--color: var(--badge--primary--color, var(--contrast-text-color-primary));
}
.badge.-secondary {
  --badge--background: var(--badge--secondary--background, var(--color-secondary));
  --badge--border-top-color: var(
      --badge--secondary--border-top-color,
      var(--color-secondary-shade-50)
  );
  --badge--border-right-color: var(
      --badge--secondary--border-right-color,
      var(--color-secondary-shade-50)
  );
  --badge--border-bottom-color: var(
      --badge--secondary--border-bottom-color,
      var(--color-secondary-shade-50)
  );
  --badge--border-left-color: var(
      --badge--secondary--border-left-color,
      var(--color-secondary-shade-50)
  );
  --badge--color: var(--badge--secondary--color, var(--contrast-text-color-secondary));
}
.badge.-info {
  --badge--background: var(--badge--info--background, var(--color-info));
  --badge--border-top-color: var(--badge--info--border-top-color, var(--color-info-shade-50));
  --badge--border-right-color: var(
      --badge--info--border-right-color,
      var(--color-info-shade-50)
  );
  --badge--border-bottom-color: var(
      --badge--info--border-bottom-color,
      var(--color-info-shade-50)
  );
  --badge--border-left-color: var(
      --badge--info--border-left-color,
      var(--color-info-shade-50)
  );
  --badge--color: var(--badge--info--color, var(--contrast-text-color-info));
}
.badge.-success {
  --badge--background: var(--badge--success--background, var(--color-success));
  --badge--border-top-color: var(
      --badge--success--border-top-color,
      var(--color-success-shade-50)
  );
  --badge--border-right-color: var(
      --badge--success--border-right-color,
      var(--color-success-shade-50)
  );
  --badge--border-bottom-color: var(
      --badge--success--border-bottom-color,
      var(--color-success-shade-50)
  );
  --badge--border-left-color: var(
      --badge--success--border-left-color,
      var(--color-success-shade-50)
  );
  --badge--color: var(--badge--success--color, var(--contrast-text-color-success));
}
.badge.-warning {
  --badge--background: var(--badge--warning--background, var(--color-warning));
  --badge--border-top-color: var(
      --badge--warning--border-top-color,
      var(--color-warning-shade-50)
  );
  --badge--border-right-color: var(
      --badge--warning--border-right-color,
      var(--color-warning-shade-50)
  );
  --badge--border-bottom-color: var(
      --badge--warning--border-bottom-color,
      var(--color-warning-shade-50)
  );
  --badge--border-left-color: var(
      --badge--warning--border-left-color,
      var(--color-warning-shade-50)
  );
  --badge--color: var(--badge--warning--color, var(--contrast-text-color-warning));
}
.badge.-danger {
  --badge--background: var(--badge--danger--background, var(--color-danger));
  --badge--border-top-color: var(
      --badge--danger--border-top-color,
      var(--color-danger-shade-50)
  );
  --badge--border-right-color: var(
      --badge--danger--border-right-color,
      var(--color-danger-shade-50)
  );
  --badge--border-bottom-color: var(
      --badge--danger--border-bottom-color,
      var(--color-danger-shade-50)
  );
  --badge--border-left-color: var(
      --badge--danger--border-left-color,
      var(--color-danger-shade-50)
  );
  --badge--color: var(--badge--danger--color, var(--contrast-text-color-danger));
}
.badge.-light {
  --badge--background: var(--badge--light--background, var(--color-light));
  --badge--border-top-color: var(
      --badge--light--border-top-color,
      var(--color-light-shade-50)
  );
  --badge--border-right-color: var(
      --badge--light--border-right-color,
      var(--color-light-shade-50)
  );
  --badge--border-bottom-color: var(
      --badge--light--border-bottom-color,
      var(--color-light-shade-50)
  );
  --badge--border-left-color: var(
      --badge--light--border-left-color,
      var(--color-light-shade-50)
  );
  --badge--color: var(--badge--light--color, var(--contrast-text-color-light));
}
.badge.-dark {
  --badge--background: var(--badge--dark--background, var(--color-dark));
  --badge--border-top-color: var(--badge--dark--border-top-color, var(--color-dark-tint-50));
  --badge--border-right-color: var(
      --badge--dark--border-right-color,
      var(--color-dark-tint-50)
  );
  --badge--border-bottom-color: var(
      --badge--dark--border-bottom-color,
      var(--color-dark-tint-50)
  );
  --badge--border-left-color: var(
      --badge--dark--border-left-color,
      var(--color-dark-tint-50)
  );
  --badge--color: var(--badge--dark--color, var(--contrast-text-color-dark));
}

/**
 * Size variants
 */
.badge.-sm {
  --badge--border-top-left-radius: var(
      --badge--sm--border-top-left-radius,
      calc(var(--border-top-right-radius) * var(--size-multiplier-sm))
  );
  --badge--border-top-right-radius: var(
      --badge--sm--border-top-right-radius,
      calc(var(--border-top-right-radius) * var(--size-multiplier-sm))
  );
  --badge--border-bottom-right-radius: var(
      --badge--sm--border-bottom-right-radius,
      calc(var(--border-bottom-right-radius) * var(--size-multiplier-sm))
  );
  --badge--border-bottom-left-radius: var(
      --badge--sm--border-bottom-left-radius,
      calc(var(--border-bottom-left-radius) * var(--size-multiplier-sm))
  );
  --badge--font-size: var(
      --badge--sm--font-size,
      calc(calc(var(--font-size) * var(--size-multiplier-sm)) * 0.8)
  );
  --badge--padding-top: var(
      --badge--sm--padding-top,
      calc(calc(var(--padding-top) * var(--size-multiplier-sm)) * 0.25)
  );
  --badge--padding-right: var(
      --badge--sm--padding-right,
      calc(calc(var(--padding-right) * var(--size-multiplier-sm)) * 0.5)
  );
  --badge--padding-bottom: var(
      --badge--sm--padding-bottom,
      calc(calc(var(--padding-bottom) * var(--size-multiplier-sm)) * 0.25)
  );
  --badge--padding-left: var(
      --badge--sm--padding-left,
      calc(calc(var(--padding-left) * var(--size-multiplier-sm)) * 0.5)
  );
}
.badge.-md {
  --badge--border-top-left-radius: var(
      --badge--md--border-top-left-radius,
      calc(var(--border-top-right-radius) * var(--size-multiplier-md))
  );
  --badge--border-top-right-radius: var(
      --badge--md--border-top-right-radius,
      calc(var(--border-top-right-radius) * var(--size-multiplier-md))
  );
  --badge--border-bottom-right-radius: var(
      --badge--md--border-bottom-right-radius,
      calc(var(--border-bottom-right-radius) * var(--size-multiplier-md))
  );
  --badge--border-bottom-left-radius: var(
      --badge--md--border-bottom-left-radius,
      calc(var(--border-bottom-left-radius) * var(--size-multiplier-md))
  );
  --badge--font-size: var(
      --badge--md--font-size,
      calc(calc(var(--font-size) * var(--size-multiplier-md)) * 0.8)
  );
  --badge--padding-top: var(
      --badge--md--padding-top,
      calc(calc(var(--padding-top) * var(--size-multiplier-md)) * 0.25)
  );
  --badge--padding-right: var(
      --badge--md--padding-right,
      calc(calc(var(--padding-right) * var(--size-multiplier-md)) * 0.5)
  );
  --badge--padding-bottom: var(
      --badge--md--padding-bottom,
      calc(calc(var(--padding-bottom) * var(--size-multiplier-md)) * 0.25)
  );
  --badge--padding-left: var(
      --badge--md--padding-left,
      calc(calc(var(--padding-left) * var(--size-multiplier-md)) * 0.5)
  );
}
.badge.-lg {
  --badge--border-top-left-radius: var(
      --badge--lg--border-top-left-radius,
      calc(var(--border-top-right-radius) * var(--size-multiplier-lg))
  );
  --badge--border-top-right-radius: var(
      --badge--lg--border-top-right-radius,
      calc(var(--border-top-right-radius) * var(--size-multiplier-lg))
  );
  --badge--border-bottom-right-radius: var(
      --badge--lg--border-bottom-right-radius,
      calc(var(--border-bottom-right-radius) * var(--size-multiplier-lg))
  );
  --badge--border-bottom-left-radius: var(
      --badge--lg--border-bottom-left-radius,
      calc(var(--border-bottom-left-radius) * var(--size-multiplier-lg))
  );
  --badge--font-size: var(
      --badge--lg--font-size,
      calc(calc(var(--font-size) * var(--size-multiplier-lg)) * 0.8)
  );
  --badge--padding-top: var(
      --badge--lg--padding-top,
      calc(calc(var(--padding-top) * var(--size-multiplier-lg)) * 0.25)
  );
  --badge--padding-right: var(
      --badge--lg--padding-right,
      calc(calc(var(--padding-right) * var(--size-multiplier-lg)) * 0.5)
  );
  --badge--padding-bottom: var(
      --badge--lg--padding-bottom,
      calc(calc(var(--padding-bottom) * var(--size-multiplier-lg)) * 0.25)
  );
  --badge--padding-left: var(
      --badge--lg--padding-left,
      calc(calc(var(--padding-left) * var(--size-multiplier-lg)) * 0.5)
  );
}

/**
 * Breadcrumb
 */
.breadcrumb {
  display: flex;
  margin-bottom: var(--breadcrumb--margin-bottom, var(--margin-bottom));
  font-size: var(--breadcrumb--font-size, var(--font-size));
}
.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  padding-left: 0;
  list-style: none;
}

/**
 * Color variants
 */
.breadcrumb.-light {
  --breadcrumb--color: var(--breadcrumb--light--color, var(--color-dark));
  --breadcrumb--link--color: var(--breadcrumb--light--link--color, var(--color-primary));
  --breadcrumb--active--color: var(--breadcrumb--light--active--color, var(--color-gray-500));
}
.breadcrumb.-dark {
  --breadcrumb--color: var(--breadcrumb--dark--color, var(--color-light));
  --breadcrumb--link--color: var(--breadcrumb--dark--link--color, var(--color-primary));
  --breadcrumb--active--color: var(--breadcrumb--dark--active--color, var(--color-gray-500));
}

/**
 * Size variants
 */
.breadcrumb.-sm {
  --breadcrumb--font-size: var(
      --breadcrumb--sm--font-size,
      calc(var(--font-size) * var(--size-multiplier-sm))
  );
  --breadcrumb--padding-left: var(
      --breadcrumb--sm--padding-left,
      calc(var(--padding-left) * var(--size-multiplier-sm))
  );
  --breadcrumb--padding-right: var(
      --breadcrumb--sm--padding-right,
      calc(var(--padding-right) * var(--size-multiplier-sm))
  );
}
.breadcrumb.-md {
  --breadcrumb--font-size: var(
      --breadcrumb--md--font-size,
      calc(var(--font-size) * var(--size-multiplier-md))
  );
  --breadcrumb--padding-left: var(
      --breadcrumb--md--padding-left,
      calc(var(--padding-left) * var(--size-multiplier-md))
  );
  --breadcrumb--padding-right: var(
      --breadcrumb--md--padding-right,
      calc(var(--padding-right) * var(--size-multiplier-md))
  );
}
.breadcrumb.-lg {
  --breadcrumb--font-size: var(
      --breadcrumb--lg--font-size,
      calc(var(--font-size) * var(--size-multiplier-lg))
  );
  --breadcrumb--padding-left: var(
      --breadcrumb--lg--padding-left,
      calc(var(--padding-left) * var(--size-multiplier-lg))
  );
  --breadcrumb--padding-right: var(
      --breadcrumb--lg--padding-right,
      calc(var(--padding-right) * var(--size-multiplier-lg))
  );
}

/**
 * Breadcrumb Item
 */
.breadcrumb-item {
  margin-bottom: 0;
  padding-left: var(--breadcrumb--padding-left, var(--padding-left));
  color: var(--breadcrumb--color);
}
.breadcrumb-item a {
  color: var(--breadcrumb--color);
}
.breadcrumb-item a[href], .breadcrumb-item a[to] {
  color: var(--breadcrumb--link--color, var(--breadcrumb--color));
}
.breadcrumb-item.-active {
  color: var(--breadcrumb--active--color, var(--breadcrumb--color));
}
.breadcrumb-item > span {
  display: inline-block;
}
.breadcrumb-item:first-of-type {
  padding-left: 0;
}
.breadcrumb-item + .breadcrumb-item::before {
  padding-right: var(--breadcrumb--padding-right, var(--padding-right));
  display: inline-block;
  content: var(--breadcrumb--separator, "/");
}
.breadcrumb-item + .breadcrumb-item:hover::before {
  text-decoration: underline;
}
.breadcrumb-item + .breadcrumb-item:hover::before {
  text-decoration: none;
}
.breadcrumb-item :not([href], [to]) {
  text-decoration: none;
}
.breadcrumb-item [href],
.breadcrumb-item [to] {
  cursor: pointer;
}

/**
 * Button
 */
.button {
  display: inline-flex;
  font-weight: var(--button--font-weight, var(--font-weight-normal));
  font-size: var(--button--font-size, var(--font-size));
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  user-select: none;
  color: var(--button--color);
  background: var(--button--background);
  border-style: var(--button--border-style, var(--button--border-top-style, var(--border-top-style)) var(--button--border-right-style, var(--border-right-style)) var(--button--border-bottom-style, var(--border-bottom-style)) var(--button--border-left-style, var(--border-left-style)));
  border-width: var(--button--border-width, var(--button--border-top-width, var(--border-top-width)) var(--button--border-right-width, var(--border-right-width)) var(--button--border-bottom-width, var(--border-bottom-width)) var(--button--border-left-width, var(--border-left-width)));
  border-color: var(--button--border-color, var(--button--border-top-color, var(--border-top-color)) var(--button--border-right-color, var(--border-right-color)) var(--button--border-bottom-color, var(--border-bottom-color)) var(--button--border-left-color, var(--border-left-color)));
  border-radius: var(--button--border-radius, var(--button--border-top-left-radius, var(--border-top-left-radius)) var(--button--border-top-right-radius, var(--border-top-right-radius)) var(--button--border-bottom-right-radius, var(--border-bottom-right-radius)) var(--button--border-bottom-left-radius, var(--border-bottom-left-radius)));
  box-shadow: var(--button--box-shadow, var(--button--box-shadow-x-offset, var(--box-shadow-offset-x)) var(--button--box-shadow-y-offset, var(--box-shadow-offset-y)) var(--button--box-shadow-blur-radius, var(--box-shadow-blur-radius)) var(--button--box-shadow-spread-radius, var(--box-shadow-spread-radius)) var(--button--box-shadow-color, var(--box-shadow-color)));
  padding: var(--button--padding, var(--button--padding-top, var(--padding-top)) var(--button--padding-right, var(--padding-right)) var(--button--padding-bottom, var(--padding-bottom)) var(--button--padding-left, var(--padding-left)));
  justify-content: center;
  align-items: center;
  transition-property: var(--button--transition-property, background-color, color, border-color);
  transition-duration: var(--button--transition-duration, var(--transition-duration));
  transition-timing-function: var(--button--transition-timing-function, var(--transition-timing-function));
}
.button:not(:disabled, .-disabled) {
  cursor: pointer;
}
.button:not(:disabled, .-disabled):hover, .button:not(:disabled, .-disabled):focus, .button:not(:disabled, .-disabled).-hovered, .button:not(:disabled, .-disabled).-focused {
  background: var(--button--hover--background, var(--button--background));
  border-color: var(--button--hover--border-color, var(--button--hover--border-top-color, var(--button--border-top-color)) var(--button--hover--border-right-color, var(--button--border-right-color)) var(--button--hover--border-bottom-color, var(--button--border-bottom-color)) var(--button--hover--border-left-color, var(--button--border-left-color)));
  text-decoration: none;
  color: var(--button--color);
  outline: 0;
}
.button:not(:disabled, .-disabled):active, .button:not(:disabled, .-disabled).-active {
  background: var(--button--active--background, var(--button--background));
}
.button.-disabled, .button:disabled {
  opacity: var(--button--disabled--opacity, 0.8);
  box-shadow: none;
  cursor: not-allowed;
}
.button.-block {
  display: flex;
  width: 100%;
}
.button.-block + .button.-block {
  margin-left: 0;
  margin-top: var(--button--block--margin-top, var(--margin-top));
}
.button.-link {
  color: var(--button--link--color, var(--button--color));
  box-shadow: none;
  background-color: transparent;
  border-color: transparent;
}
.button.-link:not(:disabled, .-disabled):hover, .button.-link:not(:disabled, .-disabled):focus, .button.-link:not(:disabled, .-disabled):active, .button.-link:not(:disabled, .-disabled).-hovered, .button.-link:not(:disabled, .-disabled).-focused, .button.-link:not(:disabled, .-disabled).-active {
  color: var(--button--link--active--color, var(--button--color));
  background-color: transparent;
  border-color: transparent;
  box-shadow: none;
  text-decoration: underline;
}
.button.-link:disabled, .button.-link.-disabled {
  pointer-events: none;
}
.button.-outline {
  background: transparent;
  color: var(--button--background);
  border-color: var(--button--background);
  box-shadow: none;
}
.button.-outline:not(:disabled, .-disabled):hover, .button.-outline:not(:disabled, .-disabled):focus, .button.-outline:not(:disabled, .-disabled):active, .button.-outline:not(:disabled, .-disabled).-hovered, .button.-outline:not(:disabled, .-disabled).-focused, .button.-outline:not(:disabled, .-disabled).-active {
  border-color: var(--button--background);
  background: var(--button--background);
  color: var(--button--color);
}
.button.-circle {
  border-radius: 50%;
  width: var(--button--circle--size);
  height: var(--button--circle--size);
  padding: 0;
}
.button.-loading {
  pointer-events: none;
  cursor: default;
}
.button .loader {
  width: var(--button--font-size);
  height: var(--button--font-size);
}
.button .loader > svg > circle {
  stroke: var(--button--color) !important;
}
.button .button-icon,
.button .button-content {
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
.button .button-icon + .button-content {
  margin-left: var(--button--icon--margin-right, var(--margin-right-1-2));
}
.button-group:not(.-vertical) > .button:not(:first-of-type) {
  border-left-color: var(--button--border-left-color);
}
.button-group.-vertical > .button:not(:first-of-type) {
  border-top-color: var(--button--border-top-color);
}

a.button.-disabled,
*:disabled a.button {
  pointer-events: none;
}

input[type=submit].-block,
input[type=reset].-block,
input[type=button].-block {
  width: 100%;
}

/**
 * Color variants
 */
.button.-primary {
  --button--background: var(--button--primary--background, var(--color-primary));
  --button--hover--background: var(
      --button--primary--hover--background,
      var(--color-primary-shade-50)
  );
  --button--active--background: var(
      --button--primary--active--background,
      var(--color-primary-shade-100)
  );
  --button--border-top-color: var(
      --button--primary--border-top-color,
      var(--color-primary-shade-50)
  );
  --button--border-right-color: var(
      --button--primary--border-right-color,
      var(--color-primary-shade-50)
  );
  --button--border-bottom-color: var(
      --button--primary--border-bottom-color,
      var(--color-primary-shade-50)
  );
  --button--border-left-color: var(
      --button--primary--border-left-color,
      var(--color-primary-shade-50)
  );
  --button--color: var(--button--primary--color, var(--contrast-text-color-primary));
  --button--link--color: var(--button--primary--link--color, var(--color-primary));
  --button--link--active--color: var(
      --button--primary--link--active--color,
      var(--color-primary-shade-50)
  );
}
.button.-secondary {
  --button--background: var(--button--secondary--background, var(--color-secondary));
  --button--hover--background: var(
      --button--secondary--hover--background,
      var(--color-secondary-shade-50)
  );
  --button--active--background: var(
      --button--secondary--active--background,
      var(--color-secondary-shade-100)
  );
  --button--border-top-color: var(
      --button--secondary--border-top-color,
      var(--color-secondary-shade-50)
  );
  --button--border-right-color: var(
      --button--secondary--border-right-color,
      var(--color-secondary-shade-50)
  );
  --button--border-bottom-color: var(
      --button--secondary--border-bottom-color,
      var(--color-secondary-shade-50)
  );
  --button--border-left-color: var(
      --button--secondary--border-left-color,
      var(--color-secondary-shade-50)
  );
  --button--color: var(--button--secondary--color, var(--contrast-text-color-secondary));
  --button--link--color: var(--button--secondary--link--color, var(--color-secondary));
  --button--link--active--color: var(
      --button--secondary--link--active--color,
      var(--color-secondary-shade-50)
  );
}
.button.-light {
  --button--background: var(--button--light--background, var(--color-light));
  --button--hover--background: var(
      --button--light--hover--background,
      var(--color-light-shade-50)
  );
  --button--active--background: var(
      --button--light--active--background,
      var(--color-light-shade-100)
  );
  --button--border-top-color: var(
      --button--light--border-top-color,
      var(--color-light-shade-50)
  );
  --button--border-right-color: var(
      --button--light--border-right-color,
      var(--color-light-shade-50)
  );
  --button--border-bottom-color: var(
      --button--light--border-bottom-color,
      var(--color-light-shade-50)
  );
  --button--border-left-color: var(
      --button--light--border-left-color,
      var(--color-light-shade-50)
  );
  --button--color: var(--button--light--color, var(--contrast-text-color-light));
  --button--link--color: var(--button--light--link--color, var(--color-light));
  --button--link--active--color: var(
      --button--light--link--active--color,
      var(--color-light-shade-100)
  );
}
.button.-dark {
  --button--background: var(--button--dark--background, var(--color-dark));
  --button--hover--background: var(
      --button--dark--hover--background,
      var(--color-dark-tint-50)
  );
  --button--active--background: var(
      --button--dark--active--background,
      var(--color-dark-tint-100)
  );
  --button--border-top-color: var(
      --button--dark--border-top-color,
      var(--color-dark-tint-50)
  );
  --button--border-right-color: var(
      --button--dark--border-right-color,
      var(--color-dark-tint-50)
  );
  --button--border-bottom-color: var(
      --button--dark--border-bottom-color,
      var(--color-dark-tint-50)
  );
  --button--border-left-color: var(
      --button--dark--border-left-color,
      var(--color-dark-tint-50)
  );
  --button--color: var(--button--dark--color, var(--contrast-text-color-dark));
  --button--link--color: var(--button--dark--link--color, var(--color-dark));
  --button--link--active--color: var(
      --button--dark--link--active--color,
      var(--color-dark-tint-50)
  );
}
.button.-info {
  --button--background: var(--button--info--background, var(--color-info));
  --button--hover--background: var(
      --button--info--hover--background,
      var(--color-info-shade-50)
  );
  --button--active--background: var(
      --button--info--active--background,
      var(--color-info-shade-100)
  );
  --button--border-top-color: var(
      --button--info--border-top-color,
      var(--color-info-shade-50)
  );
  --button--border-right-color: var(
      --button--info--border-right-color,
      var(--color-info-shade-50)
  );
  --button--border-bottom-color: var(
      --button--info--border-bottom-color,
      var(--color-info-shade-50)
  );
  --button--border-left-color: var(
      --button--info--border-left-color,
      var(--color-info-shade-50)
  );
  --button--color: var(--button--info--color, var(--contrast-text-color-info));
  --button--link--color: var(--button--info--link--color, var(--color-info));
  --button--link--active--color: var(
      --button--info--link--active--color,
      var(--color-info-shade-50)
  );
}
.button.-success {
  --button--background: var(--button--success--background, var(--color-success));
  --button--hover--background: var(
      --button--success--hover--background,
      var(--color-success-shade-50)
  );
  --button--active--background: var(
      --button--success--active--background,
      var(--color-success-shade-100)
  );
  --button--border-top-color: var(
      --button--success--border-top-color,
      var(--color-success-shade-50)
  );
  --button--border-right-color: var(
      --button--success--border-right-color,
      var(--color-success-shade-50)
  );
  --button--border-bottom-color: var(
      --button--success--border-bottom-color,
      var(--color-success-shade-50)
  );
  --button--border-left-color: var(
      --button--success--border-left-color,
      var(--color-success-shade-50)
  );
  --button--color: var(--button--success--color, var(--contrast-text-color-success));
  --button--link--color: var(--button--success--link--color, var(--color-success));
  --button--link--active--color: var(
      --button--success--link--active--color,
      var(--color-success-shade-50)
  );
}
.button.-warning {
  --button--background: var(--button--warning--background, var(--color-warning));
  --button--hover--background: var(
      --button--warning--hover--background,
      var(--color-warning-shade-50)
  );
  --button--active--background: var(
      --button--warning--active--background,
      var(--color-warning-shade-100)
  );
  --button--border-top-color: var(
      --button--warning--border-top-color,
      var(--color-warning-shade-50)
  );
  --button--border-right-color: var(
      --button--warning--border-right-color,
      var(--color-warning-shade-50)
  );
  --button--border-bottom-color: var(
      --button--warning--border-bottom-color,
      var(--color-warning-shade-50)
  );
  --button--border-left-color: var(
      --button--warning--border-left-color,
      var(--color-warning-shade-50)
  );
  --button--color: var(--button--warning--color, var(--contrast-text-color-warning));
  --button--link--color: var(--button--warning--link--color, var(--color-warning));
  --button--link--active--color: var(
      --button--warning--link--active--color,
      var(--color-warning-shade-50)
  );
}
.button.-danger {
  --button--background: var(--button--danger--background, var(--color-danger));
  --button--hover--background: var(
      --button--danger--hover--background,
      var(--color-danger-shade-50)
  );
  --button--active--background: var(
      --button--danger--active--background,
      var(--color-danger-shade-100)
  );
  --button--border-top-color: var(
      --button--danger--border-top-color,
      var(--color-danger-shade-50)
  );
  --button--border-right-color: var(
      --button--danger--border-right-color,
      var(--color-danger-shade-50)
  );
  --button--border-bottom-color: var(
      --button--danger--border-bottom-color,
      var(--color-danger-shade-50)
  );
  --button--border-left-color: var(
      --button--danger--border-left-color,
      var(--color-danger-shade-50)
  );
  --button--color: var(--button--danger--color, var(--contrast-text-color-danger));
  --button--link--color: var(--button--danger--link--color, var(--color-danger));
  --button--link--active--color: var(
      --button--danger--link--active--color,
      var(--color-danger-shade-50)
  );
}

/**
 * Size variants
 */
.button.-sm {
  --button--border-top-left-radius: var(
      --button--sm--border-top-left-radius,
      calc(var(--border-top-right-radius) * var(--size-multiplier-sm))
  );
  --button--border-top-right-radius: var(
      --button--sm--border-top-right-radius,
      calc(var(--border-top-right-radius) * var(--size-multiplier-sm))
  );
  --button--border-bottom-right-radius: var(
      --button--sm--border-bottom-right-radius,
      calc(var(--border-bottom-right-radius) * var(--size-multiplier-sm))
  );
  --button--border-bottom-left-radius: var(
      --button--sm--border-bottom-left-radius,
      calc(var(--border-bottom-left-radius) * var(--size-multiplier-sm))
  );
  --button--font-size: var(
      --button--sm--font-size,
      calc(var(--font-size) * var(--size-multiplier-sm))
  );
  --button--padding-top: var(
      --button--sm--padding-top,
      calc(calc(var(--padding-top) * var(--size-multiplier-sm)) * 3 / 4)
  );
  --button--padding-right: var(
      --button--sm--padding-right,
      calc(var(--padding-right) * var(--size-multiplier-sm))
  );
  --button--padding-bottom: var(
      --button--sm--padding-bottom,
      calc(calc(var(--padding-bottom) * var(--size-multiplier-sm)) * 3 / 4)
  );
  --button--padding-left: var(
      --button--sm--padding-left,
      calc(var(--padding-left) * var(--size-multiplier-sm))
  );
  --button--circle--size: var(
      --button--sm--circle--size,
      calc(34px * var(--size-multiplier-sm))
  );
}
.button.-md {
  --button--border-top-left-radius: var(
      --button--md--border-top-left-radius,
      calc(var(--border-top-right-radius) * var(--size-multiplier-md))
  );
  --button--border-top-right-radius: var(
      --button--md--border-top-right-radius,
      calc(var(--border-top-right-radius) * var(--size-multiplier-md))
  );
  --button--border-bottom-right-radius: var(
      --button--md--border-bottom-right-radius,
      calc(var(--border-bottom-right-radius) * var(--size-multiplier-md))
  );
  --button--border-bottom-left-radius: var(
      --button--md--border-bottom-left-radius,
      calc(var(--border-bottom-left-radius) * var(--size-multiplier-md))
  );
  --button--font-size: var(
      --button--md--font-size,
      calc(var(--font-size) * var(--size-multiplier-md))
  );
  --button--padding-top: var(
      --button--md--padding-top,
      calc(calc(var(--padding-top) * var(--size-multiplier-md)) * 3 / 4)
  );
  --button--padding-right: var(
      --button--md--padding-right,
      calc(var(--padding-right) * var(--size-multiplier-md))
  );
  --button--padding-bottom: var(
      --button--md--padding-bottom,
      calc(calc(var(--padding-bottom) * var(--size-multiplier-md)) * 3 / 4)
  );
  --button--padding-left: var(
      --button--md--padding-left,
      calc(var(--padding-left) * var(--size-multiplier-md))
  );
  --button--circle--size: var(
      --button--md--circle--size,
      calc(42px * var(--size-multiplier-md))
  );
}
.button.-lg {
  --button--border-top-left-radius: var(
      --button--lg--border-top-left-radius,
      calc(var(--border-top-right-radius) * var(--size-multiplier-lg))
  );
  --button--border-top-right-radius: var(
      --button--lg--border-top-right-radius,
      calc(var(--border-top-right-radius) * var(--size-multiplier-lg))
  );
  --button--border-bottom-right-radius: var(
      --button--lg--border-bottom-right-radius,
      calc(var(--border-bottom-right-radius) * var(--size-multiplier-lg))
  );
  --button--border-bottom-left-radius: var(
      --button--lg--border-bottom-left-radius,
      calc(var(--border-bottom-left-radius) * var(--size-multiplier-lg))
  );
  --button--font-size: var(
      --button--lg--font-size,
      calc(var(--font-size) * var(--size-multiplier-lg))
  );
  --button--padding-top: var(
      --button--lg--padding-top,
      calc(calc(var(--padding-top) * var(--size-multiplier-lg)) * 3 / 4)
  );
  --button--padding-right: var(
      --button--lg--padding-right,
      calc(var(--padding-right) * var(--size-multiplier-lg))
  );
  --button--padding-bottom: var(
      --button--lg--padding-bottom,
      calc(calc(var(--padding-bottom) * var(--size-multiplier-lg)) * 3 / 4)
  );
  --button--padding-left: var(
      --button--lg--padding-left,
      calc(var(--padding-left) * var(--size-multiplier-lg))
  );
  --button--circle--size: var(
      --button--lg--circle--size,
      calc(49px * var(--size-multiplier-lg))
  );
}

/**
 * Button Group
 */
.button-group {
  position: relative;
  display: inline-flex;
  vertical-align: middle;
  box-sizing: border-box;
}
.button-group .button {
  position: relative;
  flex: 0 1 auto;
  z-index: 0;
  margin-right: 0;
  font-size: var(--button-group--font-size, var(--button--font-size));
  padding: var(--button-group--padding, var(--button-group--padding-top, var(--button--padding-top)) var(--button-group--padding-right, var(--button--padding-right)) var(--button-group--padding-bottom, var(--button--padding-bottom)) var(--button-group--padding-left, var(--button--padding-left)));
}
.button-group .button:hover, .button-group .button:focus, .button-group .button:active, .button-group .button.-active {
  z-index: 1;
}
.button-group .button.-circle {
  border-radius: 100%;
  width: var(--button--circle--size);
  height: var(--button--circle--size);
  padding: 0;
}
.button-group > .button:first-child {
  margin-left: 0;
}
.button-group.-block {
  display: flex;
  flex-basis: 100%;
}
.button-group.-block > .button {
  flex-basis: 100%;
}
.button-group > .button,
.button-group > .button-group > .button,
.button-group > [class$=-wrapper] .button {
  border-radius: 0;
}
.button-group:not(.-vertical) > .button:last-child,
.button-group:not(.-vertical) > [class$=-wrapper]:last-child > * > .button:last-child {
  border-top-right-radius: var(--button-group--border-top-right-radius, var(--button--border-top-right-radius));
  border-bottom-right-radius: var(--button-group--border-bottom-right-radius, var(--button--border-bottom-right-radius));
}
.button-group:not(.-vertical) > .button:first-child,
.button-group:not(.-vertical) > [class$=-wrapper]:first-child > * > .button:first-child {
  border-top-left-radius: var(--button-group--border-top-left-radius, var(--button--border-top-left-radius));
  border-bottom-left-radius: var(--button-group--border-bottom-left-radius, var(--button--border-bottom-left-radius));
}
.button-group:not(.-vertical) > .button:not(:last-child),
.button-group:not(.-vertical) > .button-group:not(:last-child) .button,
.button-group:not(.-vertical) > [class$=-wrapper]:not(:last-child) > * > .button,
.button-group:not(.-vertical) > .button-group:not(:last-child) [class$=-wrapper] > * > .button {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-right: 0;
}
.button-group:not(.-vertical) > .button:not(:first-child),
.button-group:not(.-vertical) > .button-group:not(:first-child) .button,
.button-group:not(.-vertical) > [class$=-wrapper]:not(:first-child) > * > .button,
.button-group:not(.-vertical) > .button-group:not(:first-child) [class$=-wrapper] > * > .button {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.button-group.-vertical {
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}
.button-group.-vertical .button,
.button-group.-vertical .button-group,
.button-group.-vertical [class$=-wrapper] {
  width: 100%;
}
.button-group.-vertical > .button:last-child,
.button-group.-vertical > [class$=-wrapper]:last-child > * > .button:last-child {
  border-bottom-left-radius: var(--button-group--border-bottom-left-radius, var(--button--border-bottom-left-radius));
  border-bottom-right-radius: var(--button-group--border-bottom-right-radius, var(--button--border-bottom-right-radius));
}
.button-group.-vertical > .button:first-child,
.button-group.-vertical > [class$=-wrapper]:first-child > * > .button:first-child {
  border-top-left-radius: var(--button-group--border-top-left-radius, var(--button--border-top-left-radius));
  border-top-right-radius: var(--button-group--border-top-right-radius, var(--button--border-top-right-radius));
}
.button-group.-vertical > .button:not(:last-child),
.button-group.-vertical > .button-group:not(:last-child) .button,
.button-group.-vertical > [class$=-wrapper]:not(:last-child) > * > .button,
.button-group.-vertical > .button-group:not(:last-child) [class$=-wrapper] > * > .button {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom: 0;
}
.button-group.-vertical > .button:not(:first-child),
.button-group.-vertical > .button-group:not(:first-child) .button,
.button-group.-vertical > [class$=-wrapper]:not(:first-child) > * > .button,
.button-group.-vertical > .button-group:not(:first-child) [class$=-wrapper] > * > .button {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

/**
 * Card
 */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-clip: border-box;
  border-radius: var(--card--border-radius, var(--card--border-top-left-radius, var(--border-top-left-radius)) var(--card--border-top-right-radius, var(--border-top-right-radius)) var(--card--border-bottom-right-radius, var(--border-bottom-right-radius)) var(--card--border-bottom-left-radius, var(--border-bottom-left-radius)));
  font-size: var(--card--font-size, var(--font-size));
  box-shadow: var(--card--box-shadow, var(--card--box-shadow-x-offset, var(--box-shadow-offset-x)) var(--card--box-shadow-y-offset, var(--box-shadow-offset-y)) var(--card--box-shadow-blur-radius, var(--box-shadow-blur-radius)) var(--card--box-shadow-spread-radius, var(--box-shadow-spread-radius)) var(--card--box-shadow-color, var(--box-shadow-color)));
  transition-property: var(--card--transition-property, var(--card--transition-property, background-color));
  transition-duration: var(--card--transition-duration, var(--card--transition-duration, var(--transition-duration)));
  transition-timing-function: var(--card--transition-timing-function, var(--transition-timing-function));
}
.card > .card-header {
  color: var(--card--header--color, var(--card--color));
  background: var(--card--header--background, var(--card--background));
  border-style: var(--card--header--border-style, var(--card--header--border-top-style, var(--card--border-top-style, var(--border-top-style))) var(--card--header--border-right-style, var(--card--border-right-style, var(--border-right-style))) var(--card--header--border-bottom-style, var(--card--border-bottom-style, var(--border-bottom-style))) var(--card--header--border-left-style, var(--card--border-left-style, var(--border-left-style))));
  border-width: var(--card--header--border-width, var(--card--header--border-top-width, var(--card--border-top-width, var(--border-top-width))) var(--card--header--border-right-width, var(--card--border-right-width, var(--border-right-width))) var(--card--header--border-bottom-width, var(--card--border-bottom-width, var(--border-bottom-width))) var(--card--header--border-left-width, var(--card--border-left-width, var(--border-left-width))));
  border-color: var(--card--header--border-color, var(--card--header--border-top-color, var(--card--border-top-color, var(--border-top-color))) var(--card--header--border-right-color, var(--card--border-right-color, var(--border-right-color))) var(--card--header--border-bottom-color, var(--card--border-bottom-color, var(--border-bottom-color))) var(--card--header--border-left-color, var(--card--border-left-color, var(--border-left-color))));
  padding: var(--card--header--padding, var(--card--header--padding-top, var(--card--padding-top, var(--padding-top))) var(--card--header--padding-right, var(--card--padding-right, var(--padding-right))) var(--card--header--padding-bottom, var(--card--padding-bottom, var(--padding-bottom))) var(--card--header--padding-left, var(--card--padding-left, var(--padding-left))));
  border-bottom-width: 0;
  margin-bottom: 0;
  transition-property: var(--card--header--transition-property, var(--card--transition-property, border-color));
  transition-duration: var(--card--header--transition-duration, var(--card--transition-duration, var(--transition-duration)));
  transition-timing-function: var(--card--header--transition-timing-function, var(--card--transition-timing-function, var(--transition-timing-function)));
}
.card > .card-header > h1,
.card > .card-header > h2,
.card > .card-header > h3,
.card > .card-header > h4,
.card > .card-header > h5,
.card > .card-header > h6,
.card > .card-header > p,
.card > .card-header > .h1,
.card > .card-header > .h2,
.card > .card-header > .h3,
.card > .card-header > .h4,
.card > .card-header > .h5,
.card > .card-header > .h6,
.card > .card-header > .p {
  margin-bottom: 0;
  margin-top: 0;
}
.card > .card-header + img,
.card > .card-header + .card-body {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
.card > .card-header + .list-group .list-group-item:first-of-type {
  border-top: 0;
}
.card > .card-header:first-of-type {
  border-top-left-radius: var(--card--header--border-top-left-radius, var(--card--border-top-left-radius));
  border-top-right-radius: var(--card--header--border-top-right-radius, var(--card--border-top-right-radius));
}
.card > .card-body {
  flex: 1 1 auto;
  background: var(--card--body--background, var(--card--background));
  border-style: var(--card--body--border-style, var(--card--body--border-top-style, var(--card--border-top-style, var(--border-top-style))) var(--card--body--border-right-style, var(--card--border-right-style, var(--border-right-style))) var(--card--body--border-bottom-style, var(--card--border-bottom-style, var(--border-bottom-style))) var(--card--body--border-left-style, var(--card--border-left-style, var(--border-left-style))));
  border-width: var(--card--body--border-width, var(--card--body--border-top-width, var(--card--border-top-width, var(--border-top-width))) var(--card--body--border-right-width, var(--card--border-right-width, var(--border-right-width))) var(--card--body--border-bottom-width, var(--card--border-bottom-width, var(--border-bottom-width))) var(--card--body--border-left-width, var(--card--border-left-width, var(--border-left-width))));
  border-color: var(--card--body--border-color, var(--card--body--border-top-color, var(--card--border-top-color, var(--border-top-color))) var(--card--body--border-right-color, var(--card--border-right-color, var(--border-right-color))) var(--card--body--border-bottom-color, var(--card--border-bottom-color, var(--border-bottom-color))) var(--card--body--border-left-color, var(--card--border-left-color, var(--border-left-color))));
  border-radius: var(--card--body--border-radius, var(--card--body--border-top-left-radius, var(--card--border-top-left-radius, var(--border-top-left-radius))) var(--card--body--border-top-right-radius, var(--card--border-top-right-radius, var(--border-top-right-radius))) var(--card--body--border-bottom-right-radius, var(--card--border-bottom-right-radius, var(--border-bottom-right-radius))) var(--card--body--border-bottom-left-radius, var(--card--border-bottom-left-radius, var(--border-bottom-left-radius))));
  padding: var(--card--body--padding, var(--card--body--padding-top, var(--card--padding-top, var(--padding-top))) var(--card--body--padding-right, var(--card--padding-right, var(--padding-right))) var(--card--body--padding-bottom, var(--card--padding-bottom, var(--padding-bottom))) var(--card--body--padding-left, var(--card--padding-left, var(--padding-left))));
  color: var(--card--body--color, var(--card--color));
  transition-property: var(--card--body--transition-property, var(--card--transition-property, border-color));
  transition-duration: var(--card--body--transition-duration, var(--card--transition-duration, var(--transition-duration)));
  transition-timing-function: var(--card--body--transition-timing-function, var(--card--transition-timing-function, var(--transition-timing-function)));
}
.card > .card-body:not(:first-child) {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
.card > .card-body:not(:last-child) {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.card > .card-footer {
  background: var(--card--footer--background, var(--card--background));
  border-style: var(--card--footer--border-style, var(--card--footer--border-top-style, var(--card--border-top-style, var(--border-top-style))) var(--card--footer--border-right-style, var(--card--border-right-style, var(--border-right-style))) var(--card--footer--border-bottom-style, var(--card--border-bottom-style, var(--border-bottom-style))) var(--card--footer--border-left-style, var(--card--border-left-style, var(--border-left-style))));
  border-width: var(--card--footer--border-width, var(--card--footer--border-top-width, var(--card--border-top-width, var(--border-top-width))) var(--card--footer--border-right-width, var(--card--border-right-width, var(--border-right-width))) var(--card--footer--border-bottom-width, var(--card--border-bottom-width, var(--border-bottom-width))) var(--card--footer--border-left-width, var(--card--border-left-width, var(--border-left-width))));
  border-color: var(--card--footer--border-color, var(--card--footer--border-top-color, var(--card--border-top-color, var(--border-top-color))) var(--card--footer--border-right-color, var(--card--border-right-color, var(--border-right-color))) var(--card--footer--border-bottom-color, var(--card--border-bottom-color, var(--border-bottom-color))) var(--card--footer--border-left-color, var(--card--border-left-color, var(--border-left-color))));
  padding: var(--card--footer--padding, var(--card--footer--padding-top, var(--card--padding-top, var(--padding-top))) var(--card--footer--padding-right, var(--card--padding-right, var(--padding-right))) var(--card--footer--padding-bottom, var(--card--padding-bottom, var(--padding-bottom))) var(--card--footer--padding-left, var(--card--padding-left, var(--padding-left))));
  color: var(--card--footer--color, var(--card--color));
  border-top-width: 0;
  transition-property: var(--card--footer--transition-property, var(--card--transition-property, border-color));
  transition-duration: var(--card--footer--transition-duration, var(--card--transition-duration, var(--transition-duration)));
  transition-timing-function: var(--card--footer--transition-timing-function, var(--card--transition-timing-function, var(--transition-timing-function)));
  border-bottom-left-radius: var(--card--footer--border-bottom-left-radius, var(--card--border-bottom-left-radius));
  border-bottom-right-radius: var(--card--footer--border-bottom-right-radius, var(--card--border-bottom-right-radius));
}
.card > img {
  width: 100%;
  border-top-left-radius: var(--card--img--border-top-left-radius, var(--card--border-top-left-radius, var(--border-top-left-radius)));
  border-top-right-radius: var(--card--img--border-top-right-radius, var(--card--border-top-right-radius, var(--border-top-right-radius)));
}
.card > hr {
  margin-right: 0;
  margin-left: 0;
}
.card > .list-group:first-of-type,
.card .list-group-item:first-of-type {
  border-top-left-radius: var(--card--list-group--border-top-left-radius, var(--card--border-top-left-radius));
  border-top-right-radius: var(--card--list-group--border-top-right-radius, var(--card--border-top-right-radius));
}
.card > .list-group:last-of-type,
.card .list-group-item:last-of-type {
  border-bottom-left-radius: var(--card--list-group--border-bottom-left-radius, var(--card--border-bottom-left-radius));
  border-bottom-right-radius: var(--card--list-group--border-bottom-right-radius, var(--card--border-bottom-right-radius));
}

/**
 * Color variants
 */
.card.-primary {
  --card--background: var(--card--primary--background, var(--color-primary));
  --card--border-top-color: var(
      --card--primary--border-top-color,
      var(--color-primary-shade-50)
  );
  --card--border-right-color: var(
      --card--primary--border-right-color,
      var(--color-primary-shade-50)
  );
  --card--border-bottom-color: var(
      --card--primary--border-bottom-color,
      var(--color-primary-shade-50)
  );
  --card--border-left-color: var(
      --card--primary--border-left-color,
      var(--color-primary-shade-50)
  );
  --card--color: var(--card--primary--color, var(--contrast-text-color-primary));
  --card--header--background: var(
      --card--primary--header--background,
      var(--color-primary-shade-50)
  );
  --card--footer--background: var(
      --card--primary--footer--background,
      var(--color-primary-shade-50)
  );
}
.card.-secondary {
  --card--background: var(--card--secondary--background, var(--color-secondary));
  --card--border-top-color: var(
      --card--secondary--border-top-color,
      var(--color-secondary-shade-50)
  );
  --card--border-right-color: var(
      --card--secondary--border-right-color,
      var(--color-secondary-shade-50)
  );
  --card--border-bottom-color: var(
      --card--secondary--border-bottom-color,
      var(--color-secondary-shade-50)
  );
  --card--border-left-color: var(
      --card--secondary--border-left-color,
      var(--color-secondary-shade-50)
  );
  --card--color: var(--card--secondary--color, var(--contrast-text-color-secondary));
  --card--header--background: var(
      --card--secondary--header--background,
      var(--color-secondary-shade-50)
  );
  --card--footer--background: var(
      --card--secondary--footer--background,
      var(--color-secondary-shade-50)
  );
}
.card.-light {
  --card--background: var(--card--light--background, var(--color-white));
  --card--border-top-color: var(--card--light--border-top-color, var(--color-light-shade-50));
  --card--border-right-color: var(
      --card--light--border-right-color,
      var(--color-light-shade-50)
  );
  --card--border-bottom-color: var(
      --card--light--border-bottom-color,
      var(--color-light-shade-50)
  );
  --card--border-left-color: var(
      --card--light--border-left-color,
      var(--color-light-shade-50)
  );
  --card--color: var(--card--light--color, var(--contrast-text-color-light));
  --card--header--background: var(--card--light--header--background, var(--color-light-250));
  --card--footer--background: var(--card--light--footer--background, var(--color-light-250));
}
.card.-dark {
  --card--background: var(--card--dark--background, var(--color-dark));
  --card--border-top-color: var(--card--dark--border-top-color, var(--color-dark-tint-50));
  --card--border-right-color: var(
      --card--dark--border-right-color,
      var(--color-dark-tint-50)
  );
  --card--border-bottom-color: var(
      --card--dark--border-bottom-color,
      var(--color-dark-tint-50)
  );
  --card--border-left-color: var(--card--dark--border-left-color, var(--color-dark-tint-50));
  --card--color: var(--card--dark--color, var(--contrast-text-color-dark));
  --card--header--background: var(
      --card--dark--header--background,
      var(--color-dark-tint-50)
  );
  --card--footer--background: var(
      --card--dark--footer--background,
      var(--color-dark-tint-50)
  );
}
.card.-info {
  --card--background: var(--card--info--background, var(--color-info));
  --card--border-top-color: var(--card--info--border-top-color, var(--color-info-shade-50));
  --card--border-right-color: var(
      --card--info--border-right-color,
      var(--color-info-shade-50)
  );
  --card--border-bottom-color: var(
      --card--info--border-bottom-color,
      var(--color-info-shade-50)
  );
  --card--border-left-color: var(--card--info--border-left-color, var(--color-info-shade-50));
  --card--color: var(--card--info--color, var(--contrast-text-color-info));
  --card--header--background: var(
      --card--info--header--background,
      var(--color-info-shade-50)
  );
  --card--footer--background: var(
      --card--info--footer--background,
      var(--color-info-shade-50)
  );
}
.card.-success {
  --card--background: var(--card--success--background, var(--color-success));
  --card--border-top-color: var(
      --card--success--border-top-color,
      var(--color-success-shade-50)
  );
  --card--border-right-color: var(
      --card--success--border-right-color,
      var(--color-success-shade-50)
  );
  --card--border-bottom-color: var(
      --card--success--border-bottom-color,
      var(--color-success-shade-50)
  );
  --card--border-left-color: var(
      --card--success--border-left-color,
      var(--color-success-shade-50)
  );
  --card--color: var(--card--success--color, var(--contrast-text-color-success));
  --card--header--background: var(
      --card--success--header--background,
      var(--color-success-shade-50)
  );
  --card--footer--background: var(
      --card--success--footer--background,
      var(--color-success-shade-50)
  );
}
.card.-warning {
  --card--background: var(--card--warning--background, var(--color-warning));
  --card--border-top-color: var(
      --card--warning--border-top-color,
      var(--color-warning-shade-50)
  );
  --card--border-right-color: var(
      --card--warning--border-right-color,
      var(--color-warning-shade-50)
  );
  --card--border-bottom-color: var(
      --card--warning--border-bottom-color,
      var(--color-warning-shade-50)
  );
  --card--border-left-color: var(
      --card--warning--border-left-color,
      var(--color-warning-shade-50)
  );
  --card--color: var(--card--warning--color, var(--contrast-text-color-warning));
  --card--header--background: var(
      --card--warning--header--background,
      var(--color-warning-shade-50)
  );
  --card--footer--background: var(
      --card--warning--footer--background,
      var(--color-warning-shade-50)
  );
}
.card.-danger {
  --card--background: var(--card--danger--background, var(--color-danger));
  --card--border-top-color: var(
      --card--danger--border-top-color,
      var(--color-danger-shade-50)
  );
  --card--border-right-color: var(
      --card--danger--border-right-color,
      var(--color-danger-shade-50)
  );
  --card--border-bottom-color: var(
      --card--danger--border-bottom-color,
      var(--color-danger-shade-50)
  );
  --card--border-left-color: var(
      --card--danger--border-left-color,
      var(--color-danger-shade-50)
  );
  --card--color: var(--card--danger--color, var(--contrast-text-color-danger));
  --card--header--background: var(
      --card--danger--header--background,
      var(--color-danger-shade-50)
  );
  --card--footer--background: var(
      --card--danger--footer--background,
      var(--color-danger-shade-50)
  );
}

/**
 * Size variants
 */
.card.-sm {
  --card--border-top-left-radius: var(
      --card--sm--border-top-left-radius,
      calc(var(--border-top-left-radius) * var(--size-multiplier-sm))
  );
  --card--border-top-right-radius: var(
      --card--sm--border-top-right-radius,
      calc(var(--border-top-right-radius) * var(--size-multiplier-sm))
  );
  --card--border-bottom-right-radius: var(
      --card--sm--border-bottom-right-radius,
      calc(var(--border-bottom-right-radius) * var(--size-multiplier-sm))
  );
  --card--border-bottom-left-radius: var(
      --card--sm--border-bottom-left-radius,
      calc(var(--border-bottom-left-radius) * var(--size-multiplier-sm))
  );
  --card--font-size: var(
      --card--sm--font-size,
      calc(var(--font-size) * var(--size-multiplier-sm))
  );
  --card--padding-top: var(
      --card--sm--padding-top,
      calc(var(--padding-top) * var(--size-multiplier-sm))
  );
  --card--padding-right: var(
      --card--sm--padding-right,
      calc(var(--padding-right) * var(--size-multiplier-sm))
  );
  --card--padding-bottom: var(
      --card--sm--padding-bottom,
      calc(var(--padding-bottom) * var(--size-multiplier-sm))
  );
  --card--padding-left: var(
      --card--sm--padding-left,
      calc(var(--padding-left) * var(--size-multiplier-sm))
  );
  --card--header--padding-top: var(--card--sm--header--padding-top, var(--card--padding-top));
  --card--header--padding-right: var(
      --card--sm--header--padding-right,
      var(--card--padding-right)
  );
  --card--header--padding-bottom: var(
      --card--sm--header--padding-bottom,
      var(--card--padding-bottom)
  );
  --card--header--padding-left: var(
      --card--sm--header--padding-left,
      var(--card--padding-left)
  );
  --card--body--padding-top: var(--card--sm--body--padding-top, var(--card--padding-top));
  --card--body--padding-right: var(
      --card--sm--body--padding-right,
      var(--card--padding-right)
  );
  --card--body--padding-bottom: var(
      --card--sm--body--padding-bottom,
      var(--card--padding-bottom)
  );
  --card--body--padding-left: var(--card--sm--body--padding-left, var(--card--padding-left));
  --card--footer--padding-top: var(--card--sm--footer--padding-top, var(--card--padding-top));
  --card--footer--padding-right: var(
      --card--sm--footer--padding-right,
      var(--card--padding-right)
  );
  --card--footer--padding-bottom: var(
      --card--sm--footer--padding-bottom,
      var(--card--padding-bottom)
  );
  --card--footer--padding-left: var(
      --card--sm--footer--padding-left,
      var(--card--padding-left)
  );
}
.card.-md {
  --card--border-top-left-radius: var(
      --card--md--border-top-left-radius,
      calc(var(--border-top-left-radius) * var(--size-multiplier-md))
  );
  --card--border-top-right-radius: var(
      --card--md--border-top-right-radius,
      calc(var(--border-top-right-radius) * var(--size-multiplier-md))
  );
  --card--border-bottom-right-radius: var(
      --card--md--border-bottom-right-radius,
      calc(var(--border-bottom-right-radius) * var(--size-multiplier-md))
  );
  --card--border-bottom-left-radius: var(
      --card--md--border-bottom-left-radius,
      calc(var(--border-bottom-left-radius) * var(--size-multiplier-md))
  );
  --card--font-size: var(
      --card--md--font-size,
      calc(var(--font-size) * var(--size-multiplier-md))
  );
  --card--padding-top: var(
      --card--md--padding-top,
      calc(var(--padding-top) * var(--size-multiplier-md))
  );
  --card--padding-right: var(
      --card--md--padding-right,
      calc(var(--padding-right) * var(--size-multiplier-md))
  );
  --card--padding-bottom: var(
      --card--md--padding-bottom,
      calc(var(--padding-bottom) * var(--size-multiplier-md))
  );
  --card--padding-left: var(
      --card--md--padding-left,
      calc(var(--padding-left) * var(--size-multiplier-md))
  );
  --card--header--padding-top: var(--card--md--header--padding-top, var(--card--padding-top));
  --card--header--padding-right: var(
      --card--md--header--padding-right,
      var(--card--padding-right)
  );
  --card--header--padding-bottom: var(
      --card--md--header--padding-bottom,
      var(--card--padding-bottom)
  );
  --card--header--padding-left: var(
      --card--md--header--padding-left,
      var(--card--padding-left)
  );
  --card--body--padding-top: var(--card--md--body--padding-top, var(--card--padding-top));
  --card--body--padding-right: var(
      --card--md--body--padding-right,
      var(--card--padding-right)
  );
  --card--body--padding-bottom: var(
      --card--md--body--padding-bottom,
      var(--card--padding-bottom)
  );
  --card--body--padding-left: var(--card--md--body--padding-left, var(--card--padding-left));
  --card--footer--padding-top: var(--card--md--footer--padding-top, var(--card--padding-top));
  --card--footer--padding-right: var(
      --card--md--footer--padding-right,
      var(--card--padding-right)
  );
  --card--footer--padding-bottom: var(
      --card--md--footer--padding-bottom,
      var(--card--padding-bottom)
  );
  --card--footer--padding-left: var(
      --card--md--footer--padding-left,
      var(--card--padding-left)
  );
}
.card.-lg {
  --card--border-top-left-radius: var(
      --card--lg--border-top-left-radius,
      calc(var(--border-top-left-radius) * var(--size-multiplier-lg))
  );
  --card--border-top-right-radius: var(
      --card--lg--border-top-right-radius,
      calc(var(--border-top-right-radius) * var(--size-multiplier-lg))
  );
  --card--border-bottom-right-radius: var(
      --card--lg--border-bottom-right-radius,
      calc(var(--border-bottom-right-radius) * var(--size-multiplier-lg))
  );
  --card--border-bottom-left-radius: var(
      --card--lg--border-bottom-left-radius,
      calc(var(--border-bottom-left-radius) * var(--size-multiplier-lg))
  );
  --card--font-size: var(
      --card--lg--font-size,
      calc(var(--font-size) * var(--size-multiplier-lg))
  );
  --card--padding-top: var(
      --card--lg--padding-top,
      calc(var(--padding-top) * var(--size-multiplier-lg))
  );
  --card--padding-right: var(
      --card--lg--padding-right,
      calc(var(--padding-right) * var(--size-multiplier-lg))
  );
  --card--padding-bottom: var(
      --card--lg--padding-bottom,
      calc(var(--padding-bottom) * var(--size-multiplier-lg))
  );
  --card--padding-left: var(
      --card--lg--padding-left,
      calc(var(--padding-left) * var(--size-multiplier-lg))
  );
  --card--header--padding-top: var(--card--lg--header--padding-top, var(--card--padding-top));
  --card--header--padding-right: var(
      --card--lg--header--padding-right,
      var(--card--padding-right)
  );
  --card--header--padding-bottom: var(
      --card--lg--header--padding-bottom,
      var(--card--padding-bottom)
  );
  --card--header--padding-left: var(
      --card--lg--header--padding-left,
      var(--card--padding-left)
  );
  --card--body--padding-top: var(--card--lg--body--padding-top, var(--card--padding-top));
  --card--body--padding-right: var(
      --card--lg--body--padding-right,
      var(--card--padding-right)
  );
  --card--body--padding-bottom: var(
      --card--lg--body--padding-bottom,
      var(--card--padding-bottom)
  );
  --card--body--padding-left: var(--card--lg--body--padding-left, var(--card--padding-left));
  --card--footer--padding-top: var(--card--lg--footer--padding-top, var(--card--padding-top));
  --card--footer--padding-right: var(
      --card--lg--footer--padding-right,
      var(--card--padding-right)
  );
  --card--footer--padding-bottom: var(
      --card--lg--footer--padding-bottom,
      var(--card--padding-bottom)
  );
  --card--footer--padding-left: var(
      --card--lg--footer--padding-left,
      var(--card--padding-left)
  );
}

/**
 * Checkbox
 */
.checkbox {
  position: relative;
  display: flex;
  align-items: center;
  white-space: nowrap;
  outline: none;
  margin-right: var(--checkbox--margin-right, var(--margin-right));
}
.checkbox:last-of-type {
  margin-right: 0;
}
.checkbox.-disabled {
  cursor: default;
}
.checkbox.-disabled .checkbox-label::before, .checkbox.-disabled .checkbox-label::after {
  cursor: not-allowed;
}
.checkbox .checkbox-label {
  cursor: pointer;
  margin-bottom: 0;
  display: inline-flex;
  align-items: center;
  position: relative;
  transition-property: var(--checkbox--transition-property, color);
  transition-duration: var(--checkbox--transition-duration, var(--transition-duration));
  transition-timing-function: var(--checkbox--transition-timing-function, var(--transition-timing-function));
  color: var(--checkbox--label--color);
  font-size: var(--checkbox--label--font-size);
}
.checkbox .checkbox-label::before, .checkbox .checkbox-label::after {
  width: var(--checkbox--size);
  height: var(--checkbox--size);
  display: inline-flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
.checkbox .checkbox-label::before {
  content: "";
  user-select: none;
  border-width: var(--checkbox--border-width, var(--checkbox--border-top-width, var(--border-top-width)) var(--checkbox--border-right-width, var(--border-right-width)) var(--checkbox--border-bottom-width, var(--border-bottom-width)) var(--checkbox--border-left-width, var(--border-left-width)));
  border-style: var(--checkbox--border-style, var(--checkbox--border-top-style, var(--border-top-style)) var(--checkbox--border-right-style, var(--border-right-style)) var(--checkbox--border-bottom-style, var(--border-bottom-style)) var(--checkbox--border-left-style, var(--border-left-style)));
  border-color: var(--checkbox--border-color, var(--checkbox--border-top-color, var(--border-top-color)) var(--checkbox--border-right-color, var(--border-right-color)) var(--checkbox--border-bottom-color, var(--border-bottom-color)) var(--checkbox--border-left-color, var(--border-left-color)));
  border-radius: var(--checkbox--border-radius, var(--checkbox--border-top-left-radius, var(--border-top-left-radius)) var(--checkbox--border-top-right-radius, var(--border-top-right-radius)) var(--checkbox--border-bottom-right-radius, var(--border-bottom-right-radius)) var(--checkbox--border-bottom-left-radius, var(--border-bottom-left-radius)));
  box-shadow: var(--checkbox--box-shadow, var(--checkbox--box-shadow-x-offset, var(--box-shadow-offset-x)) var(--checkbox--box-shadow-y-offset, var(--box-shadow-offset-y)) var(--checkbox--box-shadow-blur-radius, var(--box-shadow-blur-radius)) var(--checkbox--box-shadow-spread-radius, var(--box-shadow-spread-radius)) var(--checkbox--box-shadow-color, var(--box-shadow-color)));
  margin-right: var(--checkbox--margin-right, var(--margin-right-1-2));
  transition-property: var(--checkbox--transition-property, background-color, border-color);
  transition-duration: var(--checkbox--transition-duration, var(--transition-duration));
  transition-timing-function: var(--checkbox--transition-timing-function, var(--transition-timing-function));
  background-color: var(--checkbox--background);
}
.checkbox .checkbox-label::after {
  mask-image: url('data:image/svg+xml; utf8, <svg fill="currentColor" version="1.1" xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 28 28"><title>check</title><path d="M23.625 3.5l-13.125 13.125-6.125-6.125-4.375 4.375 10.5 10.5 17.5-17.5z"></path></svg>');
  -webkit-mask-image: url('data:image/svg+xml; utf8, <svg fill="currentColor" version="1.1" xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 28 28"><title>check</title><path d="M23.625 3.5l-13.125 13.125-6.125-6.125-4.375 4.375 10.5 10.5 17.5-17.5z"></path></svg>');
  mask-size: var(--checkbox--checkmark--size) var(--checkbox--checkmark--size);
  -webkit-mask-size: var(--checkbox--checkmark--size) var(--checkbox--checkmark--size);
  position: absolute;
  top: 50%;
  left: 0;
  z-index: 1;
  text-align: center;
  transition-property: var(--checkbox--transition-property, transform);
  transition-duration: var(--checkbox--transition-duration, var(--transition-duration));
  transition-timing-function: var(--checkbox--transition-timing-function, var(--transition-timing-function));
  transform: scale(0);
  background-color: var(--checkbox--color);
  margin-top: calc(var(--checkbox--size) / -2);
}
.checkbox input {
  top: 0;
  left: 0;
  position: absolute;
  z-index: 0;
  opacity: 0;
  height: 0;
  width: 0;
  outline: 0;
}
.checkbox input:focus, .checkbox input:active {
  outline: none;
}
.checkbox input:checked ~ .checkbox-label::before, .checkbox input[type=checkbox]:indeterminate ~ .checkbox-label::before {
  border-color: var(--checkbox--checked--border-color, var(--checkbox--border-color));
  background: var(--checkbox--checked--background, var(--checkbox--background));
}
.checkbox input:checked ~ .checkbox-label::after, .checkbox input[type=checkbox]:indeterminate ~ .checkbox-label::after {
  content: "";
  mask-position: center center;
  -webkit-mask-position: center center;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  transform: scale(1);
}
.checkbox input:disabled ~ .checkbox-label, .checkbox input[readonly] ~ .checkbox-label {
  color: var(--checkbox--disabled--label--color, var(--checkbox--label--color));
}
.checkbox input:disabled ~ .checkbox-label::before, .checkbox input[readonly] ~ .checkbox-label::before {
  cursor: not-allowed;
  border-color: var(--checkbox--disabled--border-color, var(--checkbox--border-color));
  background: var(--checkbox--disabled--background, var(--checkbox--background));
}
.checkbox input:disabled:checked ~ .checkbox-label::before, .checkbox input[readonly]:checked ~ .checkbox-label::before {
  border-color: var(--checkbox--checked--disabled--border-color, var(--checkbox--border-color));
  background: var(--checkbox--checked--disabled--background, var(--checkbox--background));
}
.checkbox input:disabled:checked ~ .checkbox-label::after, .checkbox input[readonly]:checked ~ .checkbox-label::after {
  cursor: not-allowed;
  background: var(--checkbox--disabled--color, var(--checkbox--color));
}
.checkbox input:indeterminate ~ .checkbox-label::after {
  mask-image: url('data:image/svg+xml; utf8, <svg fill="currentColor" version="1.1" xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 28 28"><title>minus</title><path d="M0 11.375v5.25c0 0.483 0.392 0.875 0.875 0.875h26.25c0.483 0 0.875-0.392 0.875-0.875v-5.25c0-0.483-0.392-0.875-0.875-0.875h-26.25c-0.483 0-0.875 0.392-0.875 0.875z"></path></svg>');
  -webkit-mask-image: url('data:image/svg+xml; utf8, <svg fill="currentColor" version="1.1" xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 28 28"><title>minus</title><path d="M0 11.375v5.25c0 0.483 0.392 0.875 0.875 0.875h26.25c0.483 0 0.875-0.392 0.875-0.875v-5.25c0-0.483-0.392-0.875-0.875-0.875h-26.25c-0.483 0-0.875 0.392-0.875 0.875z"></path></svg>');
}
.checkbox.-native input {
  top: auto;
  left: auto;
  position: relative;
  opacity: 1;
  height: auto;
  width: auto;
  margin-right: var(--checkbox--margin-right, var(--margin-right-1-2));
}
.checkbox.-native .checkbox-label::after, .checkbox.-native .checkbox-label::before {
  display: none;
}

/**
 * Color variants
 */
.checkbox.-light {
  --checkbox--background: var(--checkbox--light--background, var(--color-white));
  --checkbox--border-top-color: var(
      --checkbox--light--border-top-color,
      var(--color-light-shade-50)
  );
  --checkbox--border-right-color: var(
      --checkbox--light--border-right-color,
      var(--color-light-shade-50)
  );
  --checkbox--border-bottom-color: var(
      --checkbox--light--border-bottom-color,
      var(--color-light-shade-50)
  );
  --checkbox--border-left-color: var(
      --checkbox--light--border-left-color,
      var(--color-light-shade-50)
  );
  --checkbox--color: var(--checkbox--light--color, var(--color-white));
  --checkbox--label--color: var(
      --checkbox--light--label--color,
      var(--contrast-text-color-light)
  );
  --checkbox--disabled--background: var(
      --checkbox--light--disabled--background,
      var(--color-gray-50)
  );
  --checkbox--disabled--border-color: var(
      --checkbox--light--disabled--border-color,
      var(--color-light)
  );
  --checkbox--disabled--color: var(--checkbox--light--disabled--color, var(--color-white));
  --checkbox--disabled--label--color: var(
      --checkbox--light--disabled--label--color,
      var(--text-color-weak)
  );
  --checkbox--checked--background: var(
      --checkbox--light--checked--background,
      var(--color-primary)
  );
  --checkbox--checked--border-color: var(
      --checkbox--light--checked--border-color,
      var(--color-primary-shade-50)
  );
  --checkbox--checked--disabled--background: var(
      --checkbox--light--checked--disabled--background,
      var(--color-primary-300)
  );
  --checkbox--checked--disabled--border-color: var(
      --checkbox--light--checked--disabled--border-color,
      var(--color-primary-400)
  );
}
.checkbox.-dark {
  --checkbox--background: var(--checkbox--dark--background, var(--color-dark));
  --checkbox--border-top-color: var(
      --checkbox--dark--border-top-color,
      var(--color-dark-tint-50)
  );
  --checkbox--border-right-color: var(
      --checkbox--dark--border-right-color,
      var(--color-dark-tint-50)
  );
  --checkbox--border-bottom-color: var(
      --checkbox--dark--border-bottom-color,
      var(--color-dark-tint-50)
  );
  --checkbox--border-left-color: var(
      --checkbox--dark--border-left-color,
      var(--color-dark-tint-50)
  );
  --checkbox--color: var(--checkbox--dark--color, var(--color-white));
  --checkbox--label--color: var(
      --checkbox--dark--label--color,
      var(--contrast-text-color-dark)
  );
  --checkbox--disabled--background: var(
      --checkbox--dark--disabled--background,
      var(--color-dark-tint-100)
  );
  --checkbox--disabled--border-color: var(
      --checkbox--dark--disabled--border-color,
      var(--color-dark-tint-50)
  );
  --checkbox--disabled--color: var(--checkbox--dark--disabled--color, var(--color-white));
  --checkbox--disabled--label--color: var(
      --checkbox--dark--disabled--label--color,
      var(--text-color-weak)
  );
  --checkbox--checked--background: var(
      --checkbox--dark--checked--background,
      var(--color-primary)
  );
  --checkbox--checked--border-color: var(
      --checkbox--dark--checked--border-color,
      var(--color-primary-tint-50)
  );
  --checkbox--checked--disabled--background: var(
      --checkbox--dark--checked--disabled--background,
      var(--color-primary-800)
  );
  --checkbox--checked--disabled--border-color: var(
      --checkbox--dark--checked--disabled--border-color,
      var(--color-primary-700)
  );
}

/**
 * Size variants
 */
.checkbox.-sm {
  --checkbox--border-top-left-radius: var(
      --checkbox--sm--border-top-left-radius,
      calc(var(--border-top-left-radius) * var(--size-multiplier-sm))
  );
  --checkbox--border-top-right-radius: var(
      --checkbox--sm--border-top-right-radius,
      calc(var(--border-top-right-radius) * var(--size-multiplier-sm))
  );
  --checkbox--border-bottom-right-radius: var(
      --checkbox--sm--border-bottom-right-radius,
      calc(var(--border-bottom-right-radius) * var(--size-multiplier-sm))
  );
  --checkbox--border-bottom-left-radius: var(
      --checkbox--sm--border-bottom-left-radius,
      calc(var(--border-bottom-left-radius) * var(--size-multiplier-sm))
  );
  --checkbox--size: var(--checkbox--sm--size, calc(1rem * var(--size-multiplier-sm)));
  --checkbox--checkmark--size: var(
      --checkbox--sm--checkmark--size,
      calc(8px * var(--size-multiplier-sm))
  );
  --checkbox--label--font-size: var(
      --checkbox--sm--label--font-size,
      calc(var(--font-size) * var(--size-multiplier-sm))
  );
}
.checkbox.-md {
  --checkbox--border-top-left-radius: var(
      --checkbox--md--border-top-left-radius,
      calc(var(--border-top-left-radius) * var(--size-multiplier-md))
  );
  --checkbox--border-top-right-radius: var(
      --checkbox--md--border-top-right-radius,
      calc(var(--border-top-right-radius) * var(--size-multiplier-md))
  );
  --checkbox--border-bottom-right-radius: var(
      --checkbox--md--border-bottom-right-radius,
      calc(var(--border-bottom-right-radius) * var(--size-multiplier-md))
  );
  --checkbox--border-bottom-left-radius: var(
      --checkbox--md--border-bottom-left-radius,
      calc(var(--border-bottom-left-radius) * var(--size-multiplier-md))
  );
  --checkbox--size: var(--checkbox--md--size, calc(1rem * var(--size-multiplier-md)));
  --checkbox--checkmark--size: var(
      --checkbox--md--checkmark--size,
      calc(8px * var(--size-multiplier-md))
  );
  --checkbox--label--font-size: var(
      --checkbox--md--label--font-size,
      calc(var(--font-size) * var(--size-multiplier-md))
  );
}
.checkbox.-lg {
  --checkbox--border-top-left-radius: var(
      --checkbox--lg--border-top-left-radius,
      calc(var(--border-top-left-radius) * var(--size-multiplier-lg))
  );
  --checkbox--border-top-right-radius: var(
      --checkbox--lg--border-top-right-radius,
      calc(var(--border-top-right-radius) * var(--size-multiplier-lg))
  );
  --checkbox--border-bottom-right-radius: var(
      --checkbox--lg--border-bottom-right-radius,
      calc(var(--border-bottom-right-radius) * var(--size-multiplier-lg))
  );
  --checkbox--border-bottom-left-radius: var(
      --checkbox--lg--border-bottom-left-radius,
      calc(var(--border-bottom-left-radius) * var(--size-multiplier-lg))
  );
  --checkbox--size: var(--checkbox--lg--size, calc(1rem * var(--size-multiplier-lg)));
  --checkbox--checkmark--size: var(
      --checkbox--lg--checkmark--size,
      calc(8px * var(--size-multiplier-lg))
  );
  --checkbox--label--font-size: var(
      --checkbox--lg--label--font-size,
      calc(var(--font-size) * var(--size-multiplier-lg))
  );
}

/**
 * Checkbox Group
 */
.checkbox-group {
  display: flex;
  flex-direction: column;
}
.checkbox-group.-inline {
  flex-direction: row;
}

/**
 * Breakpoint mixins
 */
.container {
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
  width: var(--grid--xs--width);
  max-width: var(--grid--xs--width);
  padding-left: calc(var(--grid--xs--gutter) / 2);
  padding-right: calc(var(--grid--xs--gutter) / 2);
}
@media screen and (min-width: 576px) {
  .container {
    max-width: var(--grid--sm--width);
    padding-left: calc(var(--grid--sm--gutter) / 2);
    padding-right: calc(var(--grid--sm--gutter) / 2);
  }
}
@media screen and (min-width: 768px) {
  .container {
    max-width: var(--grid--md--width);
    padding-left: calc(var(--grid--md--gutter) / 2);
    padding-right: calc(var(--grid--md--gutter) / 2);
  }
}
@media screen and (min-width: 992px) {
  .container {
    max-width: var(--grid--lg--width);
    padding-left: calc(var(--grid--lg--gutter) / 2);
    padding-right: calc(var(--grid--lg--gutter) / 2);
  }
}
@media screen and (min-width: 1200px) {
  .container {
    max-width: var(--grid--xl--width);
    padding-left: calc(var(--grid--xl--gutter) / 2);
    padding-right: calc(var(--grid--xl--gutter) / 2);
  }
}
@media screen and (min-width: 1400px) {
  .container {
    max-width: var(--grid--2xl--width);
    padding-left: calc(var(--grid--2xl--gutter) / 2);
    padding-right: calc(var(--grid--2xl--gutter) / 2);
  }
}
.container.-fluid {
  max-width: 100%;
}

/**
 * Breakpoint mixins
 */
.col,
.column {
  flex-grow: 1;
  flex-basis: 0;
  max-width: 100%;
  box-sizing: border-box;
  min-height: 1px;
  position: relative;
  padding-left: calc(var(--grid--xs--gutter) / 2);
  padding-right: calc(var(--grid--xs--gutter) / 2);
}
@media screen and (min-width: 576px) {
  .col,
  .column {
    padding-left: calc(var(--grid--sm--gutter) / 2);
    padding-right: calc(var(--grid--sm--gutter) / 2);
  }
}
@media screen and (min-width: 768px) {
  .col,
  .column {
    padding-left: calc(var(--grid--md--gutter) / 2);
    padding-right: calc(var(--grid--md--gutter) / 2);
  }
}
@media screen and (min-width: 992px) {
  .col,
  .column {
    padding-left: calc(var(--grid--lg--gutter) / 2);
    padding-right: calc(var(--grid--lg--gutter) / 2);
  }
}
@media screen and (min-width: 1200px) {
  .col,
  .column {
    padding-left: calc(var(--grid--xl--gutter) / 2);
    padding-right: calc(var(--grid--xl--gutter) / 2);
  }
}
@media screen and (min-width: 1400px) {
  .col,
  .column {
    padding-left: calc(var(--grid--2xl--gutter) / 2);
    padding-right: calc(var(--grid--2xl--gutter) / 2);
  }
}
.col.\-xs, .col.\-xs-auto,
.column.\-xs,
.column.\-xs-auto {
  flex-grow: 0;
  flex-basis: 100%;
  width: 100%;
}
.col.\-xs,
.column.\-xs {
  flex-grow: 1;
  flex-basis: 0;
  max-width: 100%;
}
.col.\-xs-auto,
.column.\-xs-auto {
  flex: 1 0 auto;
  max-width: auto;
}
.col.-first-xs,
.column.-first-xs {
  order: -1;
}
.col.-last-xs,
.column.-last-xs {
  order: 1;
}
.col.\-xs-1,
.column.\-xs-1 {
  flex-grow: 0;
  flex-basis: 100%;
  width: 100%;
}
.col.\-xs-1,
.column.\-xs-1 {
  flex-grow: 1;
  flex-basis: calc(1 * 100% / var(--grid--columns));
  max-width: calc(1 * 100% / var(--grid--columns));
}
.col.-offset-xs-1,
.column.-offset-xs-1 {
  margin-left: calc(1 * 100% / var(--grid--columns));
}
.col.-push-xs-1,
.column.-push-xs-1 {
  left: calc(1 * 100% / var(--grid--columns));
}
.col.-pull-xs-1,
.column.-pull-xs-1 {
  right: calc(1 * 100% / var(--grid--columns));
}
.col.\-xs-2,
.column.\-xs-2 {
  flex-grow: 0;
  flex-basis: 100%;
  width: 100%;
}
.col.\-xs-2,
.column.\-xs-2 {
  flex-grow: 1;
  flex-basis: calc(2 * 100% / var(--grid--columns));
  max-width: calc(2 * 100% / var(--grid--columns));
}
.col.-offset-xs-2,
.column.-offset-xs-2 {
  margin-left: calc(2 * 100% / var(--grid--columns));
}
.col.-push-xs-2,
.column.-push-xs-2 {
  left: calc(2 * 100% / var(--grid--columns));
}
.col.-pull-xs-2,
.column.-pull-xs-2 {
  right: calc(2 * 100% / var(--grid--columns));
}
.col.\-xs-3,
.column.\-xs-3 {
  flex-grow: 0;
  flex-basis: 100%;
  width: 100%;
}
.col.\-xs-3,
.column.\-xs-3 {
  flex-grow: 1;
  flex-basis: calc(3 * 100% / var(--grid--columns));
  max-width: calc(3 * 100% / var(--grid--columns));
}
.col.-offset-xs-3,
.column.-offset-xs-3 {
  margin-left: calc(3 * 100% / var(--grid--columns));
}
.col.-push-xs-3,
.column.-push-xs-3 {
  left: calc(3 * 100% / var(--grid--columns));
}
.col.-pull-xs-3,
.column.-pull-xs-3 {
  right: calc(3 * 100% / var(--grid--columns));
}
.col.\-xs-4,
.column.\-xs-4 {
  flex-grow: 0;
  flex-basis: 100%;
  width: 100%;
}
.col.\-xs-4,
.column.\-xs-4 {
  flex-grow: 1;
  flex-basis: calc(4 * 100% / var(--grid--columns));
  max-width: calc(4 * 100% / var(--grid--columns));
}
.col.-offset-xs-4,
.column.-offset-xs-4 {
  margin-left: calc(4 * 100% / var(--grid--columns));
}
.col.-push-xs-4,
.column.-push-xs-4 {
  left: calc(4 * 100% / var(--grid--columns));
}
.col.-pull-xs-4,
.column.-pull-xs-4 {
  right: calc(4 * 100% / var(--grid--columns));
}
.col.\-xs-5,
.column.\-xs-5 {
  flex-grow: 0;
  flex-basis: 100%;
  width: 100%;
}
.col.\-xs-5,
.column.\-xs-5 {
  flex-grow: 1;
  flex-basis: calc(5 * 100% / var(--grid--columns));
  max-width: calc(5 * 100% / var(--grid--columns));
}
.col.-offset-xs-5,
.column.-offset-xs-5 {
  margin-left: calc(5 * 100% / var(--grid--columns));
}
.col.-push-xs-5,
.column.-push-xs-5 {
  left: calc(5 * 100% / var(--grid--columns));
}
.col.-pull-xs-5,
.column.-pull-xs-5 {
  right: calc(5 * 100% / var(--grid--columns));
}
.col.\-xs-6,
.column.\-xs-6 {
  flex-grow: 0;
  flex-basis: 100%;
  width: 100%;
}
.col.\-xs-6,
.column.\-xs-6 {
  flex-grow: 1;
  flex-basis: calc(6 * 100% / var(--grid--columns));
  max-width: calc(6 * 100% / var(--grid--columns));
}
.col.-offset-xs-6,
.column.-offset-xs-6 {
  margin-left: calc(6 * 100% / var(--grid--columns));
}
.col.-push-xs-6,
.column.-push-xs-6 {
  left: calc(6 * 100% / var(--grid--columns));
}
.col.-pull-xs-6,
.column.-pull-xs-6 {
  right: calc(6 * 100% / var(--grid--columns));
}
.col.\-xs-7,
.column.\-xs-7 {
  flex-grow: 0;
  flex-basis: 100%;
  width: 100%;
}
.col.\-xs-7,
.column.\-xs-7 {
  flex-grow: 1;
  flex-basis: calc(7 * 100% / var(--grid--columns));
  max-width: calc(7 * 100% / var(--grid--columns));
}
.col.-offset-xs-7,
.column.-offset-xs-7 {
  margin-left: calc(7 * 100% / var(--grid--columns));
}
.col.-push-xs-7,
.column.-push-xs-7 {
  left: calc(7 * 100% / var(--grid--columns));
}
.col.-pull-xs-7,
.column.-pull-xs-7 {
  right: calc(7 * 100% / var(--grid--columns));
}
.col.\-xs-8,
.column.\-xs-8 {
  flex-grow: 0;
  flex-basis: 100%;
  width: 100%;
}
.col.\-xs-8,
.column.\-xs-8 {
  flex-grow: 1;
  flex-basis: calc(8 * 100% / var(--grid--columns));
  max-width: calc(8 * 100% / var(--grid--columns));
}
.col.-offset-xs-8,
.column.-offset-xs-8 {
  margin-left: calc(8 * 100% / var(--grid--columns));
}
.col.-push-xs-8,
.column.-push-xs-8 {
  left: calc(8 * 100% / var(--grid--columns));
}
.col.-pull-xs-8,
.column.-pull-xs-8 {
  right: calc(8 * 100% / var(--grid--columns));
}
.col.\-xs-9,
.column.\-xs-9 {
  flex-grow: 0;
  flex-basis: 100%;
  width: 100%;
}
.col.\-xs-9,
.column.\-xs-9 {
  flex-grow: 1;
  flex-basis: calc(9 * 100% / var(--grid--columns));
  max-width: calc(9 * 100% / var(--grid--columns));
}
.col.-offset-xs-9,
.column.-offset-xs-9 {
  margin-left: calc(9 * 100% / var(--grid--columns));
}
.col.-push-xs-9,
.column.-push-xs-9 {
  left: calc(9 * 100% / var(--grid--columns));
}
.col.-pull-xs-9,
.column.-pull-xs-9 {
  right: calc(9 * 100% / var(--grid--columns));
}
.col.\-xs-10,
.column.\-xs-10 {
  flex-grow: 0;
  flex-basis: 100%;
  width: 100%;
}
.col.\-xs-10,
.column.\-xs-10 {
  flex-grow: 1;
  flex-basis: calc(10 * 100% / var(--grid--columns));
  max-width: calc(10 * 100% / var(--grid--columns));
}
.col.-offset-xs-10,
.column.-offset-xs-10 {
  margin-left: calc(10 * 100% / var(--grid--columns));
}
.col.-push-xs-10,
.column.-push-xs-10 {
  left: calc(10 * 100% / var(--grid--columns));
}
.col.-pull-xs-10,
.column.-pull-xs-10 {
  right: calc(10 * 100% / var(--grid--columns));
}
.col.\-xs-11,
.column.\-xs-11 {
  flex-grow: 0;
  flex-basis: 100%;
  width: 100%;
}
.col.\-xs-11,
.column.\-xs-11 {
  flex-grow: 1;
  flex-basis: calc(11 * 100% / var(--grid--columns));
  max-width: calc(11 * 100% / var(--grid--columns));
}
.col.-offset-xs-11,
.column.-offset-xs-11 {
  margin-left: calc(11 * 100% / var(--grid--columns));
}
.col.-push-xs-11,
.column.-push-xs-11 {
  left: calc(11 * 100% / var(--grid--columns));
}
.col.-pull-xs-11,
.column.-pull-xs-11 {
  right: calc(11 * 100% / var(--grid--columns));
}
.col.\-xs-12,
.column.\-xs-12 {
  flex-grow: 0;
  flex-basis: 100%;
  width: 100%;
}
.col.\-xs-12,
.column.\-xs-12 {
  flex-grow: 1;
  flex-basis: calc(12 * 100% / var(--grid--columns));
  max-width: calc(12 * 100% / var(--grid--columns));
}
.col.-offset-xs-12,
.column.-offset-xs-12 {
  margin-left: calc(12 * 100% / var(--grid--columns));
}
.col.-push-xs-12,
.column.-push-xs-12 {
  left: calc(12 * 100% / var(--grid--columns));
}
.col.-pull-xs-12,
.column.-pull-xs-12 {
  right: calc(12 * 100% / var(--grid--columns));
}
.col.-offset-xs-0,
.column.-offset-xs-0 {
  margin-left: 0;
}
.col.-push-xs-0,
.column.-push-xs-0 {
  left: 0;
}
.col.-pull-xs-0,
.column.-pull-xs-0 {
  right: 0;
}
.col.\-sm, .col.\-sm-auto,
.column.\-sm,
.column.\-sm-auto {
  flex-grow: 0;
  flex-basis: 100%;
  width: 100%;
}
@media screen and (min-width: 576px) {
  .col.\-sm,
  .column.\-sm {
    flex-grow: 1;
    flex-basis: 0;
    max-width: 100%;
  }
  .col.\-sm-auto,
  .column.\-sm-auto {
    flex: 1 0 auto;
    max-width: auto;
  }
  .col.-first-sm,
  .column.-first-sm {
    order: -1;
  }
  .col.-last-sm,
  .column.-last-sm {
    order: 1;
  }
}
.col.\-sm-1,
.column.\-sm-1 {
  flex-grow: 0;
  flex-basis: 100%;
  width: 100%;
}
@media screen and (min-width: 576px) {
  .col.\-sm-1,
  .column.\-sm-1 {
    flex-grow: 1;
    flex-basis: calc(1 * 100% / var(--grid--columns));
    max-width: calc(1 * 100% / var(--grid--columns));
  }
  .col.-offset-sm-1,
  .column.-offset-sm-1 {
    margin-left: calc(1 * 100% / var(--grid--columns));
  }
  .col.-push-sm-1,
  .column.-push-sm-1 {
    left: calc(1 * 100% / var(--grid--columns));
  }
  .col.-pull-sm-1,
  .column.-pull-sm-1 {
    right: calc(1 * 100% / var(--grid--columns));
  }
}
.col.\-sm-2,
.column.\-sm-2 {
  flex-grow: 0;
  flex-basis: 100%;
  width: 100%;
}
@media screen and (min-width: 576px) {
  .col.\-sm-2,
  .column.\-sm-2 {
    flex-grow: 1;
    flex-basis: calc(2 * 100% / var(--grid--columns));
    max-width: calc(2 * 100% / var(--grid--columns));
  }
  .col.-offset-sm-2,
  .column.-offset-sm-2 {
    margin-left: calc(2 * 100% / var(--grid--columns));
  }
  .col.-push-sm-2,
  .column.-push-sm-2 {
    left: calc(2 * 100% / var(--grid--columns));
  }
  .col.-pull-sm-2,
  .column.-pull-sm-2 {
    right: calc(2 * 100% / var(--grid--columns));
  }
}
.col.\-sm-3,
.column.\-sm-3 {
  flex-grow: 0;
  flex-basis: 100%;
  width: 100%;
}
@media screen and (min-width: 576px) {
  .col.\-sm-3,
  .column.\-sm-3 {
    flex-grow: 1;
    flex-basis: calc(3 * 100% / var(--grid--columns));
    max-width: calc(3 * 100% / var(--grid--columns));
  }
  .col.-offset-sm-3,
  .column.-offset-sm-3 {
    margin-left: calc(3 * 100% / var(--grid--columns));
  }
  .col.-push-sm-3,
  .column.-push-sm-3 {
    left: calc(3 * 100% / var(--grid--columns));
  }
  .col.-pull-sm-3,
  .column.-pull-sm-3 {
    right: calc(3 * 100% / var(--grid--columns));
  }
}
.col.\-sm-4,
.column.\-sm-4 {
  flex-grow: 0;
  flex-basis: 100%;
  width: 100%;
}
@media screen and (min-width: 576px) {
  .col.\-sm-4,
  .column.\-sm-4 {
    flex-grow: 1;
    flex-basis: calc(4 * 100% / var(--grid--columns));
    max-width: calc(4 * 100% / var(--grid--columns));
  }
  .col.-offset-sm-4,
  .column.-offset-sm-4 {
    margin-left: calc(4 * 100% / var(--grid--columns));
  }
  .col.-push-sm-4,
  .column.-push-sm-4 {
    left: calc(4 * 100% / var(--grid--columns));
  }
  .col.-pull-sm-4,
  .column.-pull-sm-4 {
    right: calc(4 * 100% / var(--grid--columns));
  }
}
.col.\-sm-5,
.column.\-sm-5 {
  flex-grow: 0;
  flex-basis: 100%;
  width: 100%;
}
@media screen and (min-width: 576px) {
  .col.\-sm-5,
  .column.\-sm-5 {
    flex-grow: 1;
    flex-basis: calc(5 * 100% / var(--grid--columns));
    max-width: calc(5 * 100% / var(--grid--columns));
  }
  .col.-offset-sm-5,
  .column.-offset-sm-5 {
    margin-left: calc(5 * 100% / var(--grid--columns));
  }
  .col.-push-sm-5,
  .column.-push-sm-5 {
    left: calc(5 * 100% / var(--grid--columns));
  }
  .col.-pull-sm-5,
  .column.-pull-sm-5 {
    right: calc(5 * 100% / var(--grid--columns));
  }
}
.col.\-sm-6,
.column.\-sm-6 {
  flex-grow: 0;
  flex-basis: 100%;
  width: 100%;
}
@media screen and (min-width: 576px) {
  .col.\-sm-6,
  .column.\-sm-6 {
    flex-grow: 1;
    flex-basis: calc(6 * 100% / var(--grid--columns));
    max-width: calc(6 * 100% / var(--grid--columns));
  }
  .col.-offset-sm-6,
  .column.-offset-sm-6 {
    margin-left: calc(6 * 100% / var(--grid--columns));
  }
  .col.-push-sm-6,
  .column.-push-sm-6 {
    left: calc(6 * 100% / var(--grid--columns));
  }
  .col.-pull-sm-6,
  .column.-pull-sm-6 {
    right: calc(6 * 100% / var(--grid--columns));
  }
}
.col.\-sm-7,
.column.\-sm-7 {
  flex-grow: 0;
  flex-basis: 100%;
  width: 100%;
}
@media screen and (min-width: 576px) {
  .col.\-sm-7,
  .column.\-sm-7 {
    flex-grow: 1;
    flex-basis: calc(7 * 100% / var(--grid--columns));
    max-width: calc(7 * 100% / var(--grid--columns));
  }
  .col.-offset-sm-7,
  .column.-offset-sm-7 {
    margin-left: calc(7 * 100% / var(--grid--columns));
  }
  .col.-push-sm-7,
  .column.-push-sm-7 {
    left: calc(7 * 100% / var(--grid--columns));
  }
  .col.-pull-sm-7,
  .column.-pull-sm-7 {
    right: calc(7 * 100% / var(--grid--columns));
  }
}
.col.\-sm-8,
.column.\-sm-8 {
  flex-grow: 0;
  flex-basis: 100%;
  width: 100%;
}
@media screen and (min-width: 576px) {
  .col.\-sm-8,
  .column.\-sm-8 {
    flex-grow: 1;
    flex-basis: calc(8 * 100% / var(--grid--columns));
    max-width: calc(8 * 100% / var(--grid--columns));
  }
  .col.-offset-sm-8,
  .column.-offset-sm-8 {
    margin-left: calc(8 * 100% / var(--grid--columns));
  }
  .col.-push-sm-8,
  .column.-push-sm-8 {
    left: calc(8 * 100% / var(--grid--columns));
  }
  .col.-pull-sm-8,
  .column.-pull-sm-8 {
    right: calc(8 * 100% / var(--grid--columns));
  }
}
.col.\-sm-9,
.column.\-sm-9 {
  flex-grow: 0;
  flex-basis: 100%;
  width: 100%;
}
@media screen and (min-width: 576px) {
  .col.\-sm-9,
  .column.\-sm-9 {
    flex-grow: 1;
    flex-basis: calc(9 * 100% / var(--grid--columns));
    max-width: calc(9 * 100% / var(--grid--columns));
  }
  .col.-offset-sm-9,
  .column.-offset-sm-9 {
    margin-left: calc(9 * 100% / var(--grid--columns));
  }
  .col.-push-sm-9,
  .column.-push-sm-9 {
    left: calc(9 * 100% / var(--grid--columns));
  }
  .col.-pull-sm-9,
  .column.-pull-sm-9 {
    right: calc(9 * 100% / var(--grid--columns));
  }
}
.col.\-sm-10,
.column.\-sm-10 {
  flex-grow: 0;
  flex-basis: 100%;
  width: 100%;
}
@media screen and (min-width: 576px) {
  .col.\-sm-10,
  .column.\-sm-10 {
    flex-grow: 1;
    flex-basis: calc(10 * 100% / var(--grid--columns));
    max-width: calc(10 * 100% / var(--grid--columns));
  }
  .col.-offset-sm-10,
  .column.-offset-sm-10 {
    margin-left: calc(10 * 100% / var(--grid--columns));
  }
  .col.-push-sm-10,
  .column.-push-sm-10 {
    left: calc(10 * 100% / var(--grid--columns));
  }
  .col.-pull-sm-10,
  .column.-pull-sm-10 {
    right: calc(10 * 100% / var(--grid--columns));
  }
}
.col.\-sm-11,
.column.\-sm-11 {
  flex-grow: 0;
  flex-basis: 100%;
  width: 100%;
}
@media screen and (min-width: 576px) {
  .col.\-sm-11,
  .column.\-sm-11 {
    flex-grow: 1;
    flex-basis: calc(11 * 100% / var(--grid--columns));
    max-width: calc(11 * 100% / var(--grid--columns));
  }
  .col.-offset-sm-11,
  .column.-offset-sm-11 {
    margin-left: calc(11 * 100% / var(--grid--columns));
  }
  .col.-push-sm-11,
  .column.-push-sm-11 {
    left: calc(11 * 100% / var(--grid--columns));
  }
  .col.-pull-sm-11,
  .column.-pull-sm-11 {
    right: calc(11 * 100% / var(--grid--columns));
  }
}
.col.\-sm-12,
.column.\-sm-12 {
  flex-grow: 0;
  flex-basis: 100%;
  width: 100%;
}
@media screen and (min-width: 576px) {
  .col.\-sm-12,
  .column.\-sm-12 {
    flex-grow: 1;
    flex-basis: calc(12 * 100% / var(--grid--columns));
    max-width: calc(12 * 100% / var(--grid--columns));
  }
  .col.-offset-sm-12,
  .column.-offset-sm-12 {
    margin-left: calc(12 * 100% / var(--grid--columns));
  }
  .col.-push-sm-12,
  .column.-push-sm-12 {
    left: calc(12 * 100% / var(--grid--columns));
  }
  .col.-pull-sm-12,
  .column.-pull-sm-12 {
    right: calc(12 * 100% / var(--grid--columns));
  }
}
@media screen and (min-width: 576px) {
  .col.-offset-sm-0,
  .column.-offset-sm-0 {
    margin-left: 0;
  }
  .col.-push-sm-0,
  .column.-push-sm-0 {
    left: 0;
  }
  .col.-pull-sm-0,
  .column.-pull-sm-0 {
    right: 0;
  }
}
.col.\-md, .col.\-md-auto,
.column.\-md,
.column.\-md-auto {
  flex-grow: 0;
  flex-basis: 100%;
  width: 100%;
}
@media screen and (min-width: 768px) {
  .col.\-md,
  .column.\-md {
    flex-grow: 1;
    flex-basis: 0;
    max-width: 100%;
  }
  .col.\-md-auto,
  .column.\-md-auto {
    flex: 1 0 auto;
    max-width: auto;
  }
  .col.-first-md,
  .column.-first-md {
    order: -1;
  }
  .col.-last-md,
  .column.-last-md {
    order: 1;
  }
}
.col.\-md-1,
.column.\-md-1 {
  flex-grow: 0;
  flex-basis: 100%;
  width: 100%;
}
@media screen and (min-width: 768px) {
  .col.\-md-1,
  .column.\-md-1 {
    flex-grow: 1;
    flex-basis: calc(1 * 100% / var(--grid--columns));
    max-width: calc(1 * 100% / var(--grid--columns));
  }
  .col.-offset-md-1,
  .column.-offset-md-1 {
    margin-left: calc(1 * 100% / var(--grid--columns));
  }
  .col.-push-md-1,
  .column.-push-md-1 {
    left: calc(1 * 100% / var(--grid--columns));
  }
  .col.-pull-md-1,
  .column.-pull-md-1 {
    right: calc(1 * 100% / var(--grid--columns));
  }
}
.col.\-md-2,
.column.\-md-2 {
  flex-grow: 0;
  flex-basis: 100%;
  width: 100%;
}
@media screen and (min-width: 768px) {
  .col.\-md-2,
  .column.\-md-2 {
    flex-grow: 1;
    flex-basis: calc(2 * 100% / var(--grid--columns));
    max-width: calc(2 * 100% / var(--grid--columns));
  }
  .col.-offset-md-2,
  .column.-offset-md-2 {
    margin-left: calc(2 * 100% / var(--grid--columns));
  }
  .col.-push-md-2,
  .column.-push-md-2 {
    left: calc(2 * 100% / var(--grid--columns));
  }
  .col.-pull-md-2,
  .column.-pull-md-2 {
    right: calc(2 * 100% / var(--grid--columns));
  }
}
.col.\-md-3,
.column.\-md-3 {
  flex-grow: 0;
  flex-basis: 100%;
  width: 100%;
}
@media screen and (min-width: 768px) {
  .col.\-md-3,
  .column.\-md-3 {
    flex-grow: 1;
    flex-basis: calc(3 * 100% / var(--grid--columns));
    max-width: calc(3 * 100% / var(--grid--columns));
  }
  .col.-offset-md-3,
  .column.-offset-md-3 {
    margin-left: calc(3 * 100% / var(--grid--columns));
  }
  .col.-push-md-3,
  .column.-push-md-3 {
    left: calc(3 * 100% / var(--grid--columns));
  }
  .col.-pull-md-3,
  .column.-pull-md-3 {
    right: calc(3 * 100% / var(--grid--columns));
  }
}
.col.\-md-4,
.column.\-md-4 {
  flex-grow: 0;
  flex-basis: 100%;
  width: 100%;
}
@media screen and (min-width: 768px) {
  .col.\-md-4,
  .column.\-md-4 {
    flex-grow: 1;
    flex-basis: calc(4 * 100% / var(--grid--columns));
    max-width: calc(4 * 100% / var(--grid--columns));
  }
  .col.-offset-md-4,
  .column.-offset-md-4 {
    margin-left: calc(4 * 100% / var(--grid--columns));
  }
  .col.-push-md-4,
  .column.-push-md-4 {
    left: calc(4 * 100% / var(--grid--columns));
  }
  .col.-pull-md-4,
  .column.-pull-md-4 {
    right: calc(4 * 100% / var(--grid--columns));
  }
}
.col.\-md-5,
.column.\-md-5 {
  flex-grow: 0;
  flex-basis: 100%;
  width: 100%;
}
@media screen and (min-width: 768px) {
  .col.\-md-5,
  .column.\-md-5 {
    flex-grow: 1;
    flex-basis: calc(5 * 100% / var(--grid--columns));
    max-width: calc(5 * 100% / var(--grid--columns));
  }
  .col.-offset-md-5,
  .column.-offset-md-5 {
    margin-left: calc(5 * 100% / var(--grid--columns));
  }
  .col.-push-md-5,
  .column.-push-md-5 {
    left: calc(5 * 100% / var(--grid--columns));
  }
  .col.-pull-md-5,
  .column.-pull-md-5 {
    right: calc(5 * 100% / var(--grid--columns));
  }
}
.col.\-md-6,
.column.\-md-6 {
  flex-grow: 0;
  flex-basis: 100%;
  width: 100%;
}
@media screen and (min-width: 768px) {
  .col.\-md-6,
  .column.\-md-6 {
    flex-grow: 1;
    flex-basis: calc(6 * 100% / var(--grid--columns));
    max-width: calc(6 * 100% / var(--grid--columns));
  }
  .col.-offset-md-6,
  .column.-offset-md-6 {
    margin-left: calc(6 * 100% / var(--grid--columns));
  }
  .col.-push-md-6,
  .column.-push-md-6 {
    left: calc(6 * 100% / var(--grid--columns));
  }
  .col.-pull-md-6,
  .column.-pull-md-6 {
    right: calc(6 * 100% / var(--grid--columns));
  }
}
.col.\-md-7,
.column.\-md-7 {
  flex-grow: 0;
  flex-basis: 100%;
  width: 100%;
}
@media screen and (min-width: 768px) {
  .col.\-md-7,
  .column.\-md-7 {
    flex-grow: 1;
    flex-basis: calc(7 * 100% / var(--grid--columns));
    max-width: calc(7 * 100% / var(--grid--columns));
  }
  .col.-offset-md-7,
  .column.-offset-md-7 {
    margin-left: calc(7 * 100% / var(--grid--columns));
  }
  .col.-push-md-7,
  .column.-push-md-7 {
    left: calc(7 * 100% / var(--grid--columns));
  }
  .col.-pull-md-7,
  .column.-pull-md-7 {
    right: calc(7 * 100% / var(--grid--columns));
  }
}
.col.\-md-8,
.column.\-md-8 {
  flex-grow: 0;
  flex-basis: 100%;
  width: 100%;
}
@media screen and (min-width: 768px) {
  .col.\-md-8,
  .column.\-md-8 {
    flex-grow: 1;
    flex-basis: calc(8 * 100% / var(--grid--columns));
    max-width: calc(8 * 100% / var(--grid--columns));
  }
  .col.-offset-md-8,
  .column.-offset-md-8 {
    margin-left: calc(8 * 100% / var(--grid--columns));
  }
  .col.-push-md-8,
  .column.-push-md-8 {
    left: calc(8 * 100% / var(--grid--columns));
  }
  .col.-pull-md-8,
  .column.-pull-md-8 {
    right: calc(8 * 100% / var(--grid--columns));
  }
}
.col.\-md-9,
.column.\-md-9 {
  flex-grow: 0;
  flex-basis: 100%;
  width: 100%;
}
@media screen and (min-width: 768px) {
  .col.\-md-9,
  .column.\-md-9 {
    flex-grow: 1;
    flex-basis: calc(9 * 100% / var(--grid--columns));
    max-width: calc(9 * 100% / var(--grid--columns));
  }
  .col.-offset-md-9,
  .column.-offset-md-9 {
    margin-left: calc(9 * 100% / var(--grid--columns));
  }
  .col.-push-md-9,
  .column.-push-md-9 {
    left: calc(9 * 100% / var(--grid--columns));
  }
  .col.-pull-md-9,
  .column.-pull-md-9 {
    right: calc(9 * 100% / var(--grid--columns));
  }
}
.col.\-md-10,
.column.\-md-10 {
  flex-grow: 0;
  flex-basis: 100%;
  width: 100%;
}
@media screen and (min-width: 768px) {
  .col.\-md-10,
  .column.\-md-10 {
    flex-grow: 1;
    flex-basis: calc(10 * 100% / var(--grid--columns));
    max-width: calc(10 * 100% / var(--grid--columns));
  }
  .col.-offset-md-10,
  .column.-offset-md-10 {
    margin-left: calc(10 * 100% / var(--grid--columns));
  }
  .col.-push-md-10,
  .column.-push-md-10 {
    left: calc(10 * 100% / var(--grid--columns));
  }
  .col.-pull-md-10,
  .column.-pull-md-10 {
    right: calc(10 * 100% / var(--grid--columns));
  }
}
.col.\-md-11,
.column.\-md-11 {
  flex-grow: 0;
  flex-basis: 100%;
  width: 100%;
}
@media screen and (min-width: 768px) {
  .col.\-md-11,
  .column.\-md-11 {
    flex-grow: 1;
    flex-basis: calc(11 * 100% / var(--grid--columns));
    max-width: calc(11 * 100% / var(--grid--columns));
  }
  .col.-offset-md-11,
  .column.-offset-md-11 {
    margin-left: calc(11 * 100% / var(--grid--columns));
  }
  .col.-push-md-11,
  .column.-push-md-11 {
    left: calc(11 * 100% / var(--grid--columns));
  }
  .col.-pull-md-11,
  .column.-pull-md-11 {
    right: calc(11 * 100% / var(--grid--columns));
  }
}
.col.\-md-12,
.column.\-md-12 {
  flex-grow: 0;
  flex-basis: 100%;
  width: 100%;
}
@media screen and (min-width: 768px) {
  .col.\-md-12,
  .column.\-md-12 {
    flex-grow: 1;
    flex-basis: calc(12 * 100% / var(--grid--columns));
    max-width: calc(12 * 100% / var(--grid--columns));
  }
  .col.-offset-md-12,
  .column.-offset-md-12 {
    margin-left: calc(12 * 100% / var(--grid--columns));
  }
  .col.-push-md-12,
  .column.-push-md-12 {
    left: calc(12 * 100% / var(--grid--columns));
  }
  .col.-pull-md-12,
  .column.-pull-md-12 {
    right: calc(12 * 100% / var(--grid--columns));
  }
}
@media screen and (min-width: 768px) {
  .col.-offset-md-0,
  .column.-offset-md-0 {
    margin-left: 0;
  }
  .col.-push-md-0,
  .column.-push-md-0 {
    left: 0;
  }
  .col.-pull-md-0,
  .column.-pull-md-0 {
    right: 0;
  }
}
.col.\-lg, .col.\-lg-auto,
.column.\-lg,
.column.\-lg-auto {
  flex-grow: 0;
  flex-basis: 100%;
  width: 100%;
}
@media screen and (min-width: 992px) {
  .col.\-lg,
  .column.\-lg {
    flex-grow: 1;
    flex-basis: 0;
    max-width: 100%;
  }
  .col.\-lg-auto,
  .column.\-lg-auto {
    flex: 1 0 auto;
    max-width: auto;
  }
  .col.-first-lg,
  .column.-first-lg {
    order: -1;
  }
  .col.-last-lg,
  .column.-last-lg {
    order: 1;
  }
}
.col.\-lg-1,
.column.\-lg-1 {
  flex-grow: 0;
  flex-basis: 100%;
  width: 100%;
}
@media screen and (min-width: 992px) {
  .col.\-lg-1,
  .column.\-lg-1 {
    flex-grow: 1;
    flex-basis: calc(1 * 100% / var(--grid--columns));
    max-width: calc(1 * 100% / var(--grid--columns));
  }
  .col.-offset-lg-1,
  .column.-offset-lg-1 {
    margin-left: calc(1 * 100% / var(--grid--columns));
  }
  .col.-push-lg-1,
  .column.-push-lg-1 {
    left: calc(1 * 100% / var(--grid--columns));
  }
  .col.-pull-lg-1,
  .column.-pull-lg-1 {
    right: calc(1 * 100% / var(--grid--columns));
  }
}
.col.\-lg-2,
.column.\-lg-2 {
  flex-grow: 0;
  flex-basis: 100%;
  width: 100%;
}
@media screen and (min-width: 992px) {
  .col.\-lg-2,
  .column.\-lg-2 {
    flex-grow: 1;
    flex-basis: calc(2 * 100% / var(--grid--columns));
    max-width: calc(2 * 100% / var(--grid--columns));
  }
  .col.-offset-lg-2,
  .column.-offset-lg-2 {
    margin-left: calc(2 * 100% / var(--grid--columns));
  }
  .col.-push-lg-2,
  .column.-push-lg-2 {
    left: calc(2 * 100% / var(--grid--columns));
  }
  .col.-pull-lg-2,
  .column.-pull-lg-2 {
    right: calc(2 * 100% / var(--grid--columns));
  }
}
.col.\-lg-3,
.column.\-lg-3 {
  flex-grow: 0;
  flex-basis: 100%;
  width: 100%;
}
@media screen and (min-width: 992px) {
  .col.\-lg-3,
  .column.\-lg-3 {
    flex-grow: 1;
    flex-basis: calc(3 * 100% / var(--grid--columns));
    max-width: calc(3 * 100% / var(--grid--columns));
  }
  .col.-offset-lg-3,
  .column.-offset-lg-3 {
    margin-left: calc(3 * 100% / var(--grid--columns));
  }
  .col.-push-lg-3,
  .column.-push-lg-3 {
    left: calc(3 * 100% / var(--grid--columns));
  }
  .col.-pull-lg-3,
  .column.-pull-lg-3 {
    right: calc(3 * 100% / var(--grid--columns));
  }
}
.col.\-lg-4,
.column.\-lg-4 {
  flex-grow: 0;
  flex-basis: 100%;
  width: 100%;
}
@media screen and (min-width: 992px) {
  .col.\-lg-4,
  .column.\-lg-4 {
    flex-grow: 1;
    flex-basis: calc(4 * 100% / var(--grid--columns));
    max-width: calc(4 * 100% / var(--grid--columns));
  }
  .col.-offset-lg-4,
  .column.-offset-lg-4 {
    margin-left: calc(4 * 100% / var(--grid--columns));
  }
  .col.-push-lg-4,
  .column.-push-lg-4 {
    left: calc(4 * 100% / var(--grid--columns));
  }
  .col.-pull-lg-4,
  .column.-pull-lg-4 {
    right: calc(4 * 100% / var(--grid--columns));
  }
}
.col.\-lg-5,
.column.\-lg-5 {
  flex-grow: 0;
  flex-basis: 100%;
  width: 100%;
}
@media screen and (min-width: 992px) {
  .col.\-lg-5,
  .column.\-lg-5 {
    flex-grow: 1;
    flex-basis: calc(5 * 100% / var(--grid--columns));
    max-width: calc(5 * 100% / var(--grid--columns));
  }
  .col.-offset-lg-5,
  .column.-offset-lg-5 {
    margin-left: calc(5 * 100% / var(--grid--columns));
  }
  .col.-push-lg-5,
  .column.-push-lg-5 {
    left: calc(5 * 100% / var(--grid--columns));
  }
  .col.-pull-lg-5,
  .column.-pull-lg-5 {
    right: calc(5 * 100% / var(--grid--columns));
  }
}
.col.\-lg-6,
.column.\-lg-6 {
  flex-grow: 0;
  flex-basis: 100%;
  width: 100%;
}
@media screen and (min-width: 992px) {
  .col.\-lg-6,
  .column.\-lg-6 {
    flex-grow: 1;
    flex-basis: calc(6 * 100% / var(--grid--columns));
    max-width: calc(6 * 100% / var(--grid--columns));
  }
  .col.-offset-lg-6,
  .column.-offset-lg-6 {
    margin-left: calc(6 * 100% / var(--grid--columns));
  }
  .col.-push-lg-6,
  .column.-push-lg-6 {
    left: calc(6 * 100% / var(--grid--columns));
  }
  .col.-pull-lg-6,
  .column.-pull-lg-6 {
    right: calc(6 * 100% / var(--grid--columns));
  }
}
.col.\-lg-7,
.column.\-lg-7 {
  flex-grow: 0;
  flex-basis: 100%;
  width: 100%;
}
@media screen and (min-width: 992px) {
  .col.\-lg-7,
  .column.\-lg-7 {
    flex-grow: 1;
    flex-basis: calc(7 * 100% / var(--grid--columns));
    max-width: calc(7 * 100% / var(--grid--columns));
  }
  .col.-offset-lg-7,
  .column.-offset-lg-7 {
    margin-left: calc(7 * 100% / var(--grid--columns));
  }
  .col.-push-lg-7,
  .column.-push-lg-7 {
    left: calc(7 * 100% / var(--grid--columns));
  }
  .col.-pull-lg-7,
  .column.-pull-lg-7 {
    right: calc(7 * 100% / var(--grid--columns));
  }
}
.col.\-lg-8,
.column.\-lg-8 {
  flex-grow: 0;
  flex-basis: 100%;
  width: 100%;
}
@media screen and (min-width: 992px) {
  .col.\-lg-8,
  .column.\-lg-8 {
    flex-grow: 1;
    flex-basis: calc(8 * 100% / var(--grid--columns));
    max-width: calc(8 * 100% / var(--grid--columns));
  }
  .col.-offset-lg-8,
  .column.-offset-lg-8 {
    margin-left: calc(8 * 100% / var(--grid--columns));
  }
  .col.-push-lg-8,
  .column.-push-lg-8 {
    left: calc(8 * 100% / var(--grid--columns));
  }
  .col.-pull-lg-8,
  .column.-pull-lg-8 {
    right: calc(8 * 100% / var(--grid--columns));
  }
}
.col.\-lg-9,
.column.\-lg-9 {
  flex-grow: 0;
  flex-basis: 100%;
  width: 100%;
}
@media screen and (min-width: 992px) {
  .col.\-lg-9,
  .column.\-lg-9 {
    flex-grow: 1;
    flex-basis: calc(9 * 100% / var(--grid--columns));
    max-width: calc(9 * 100% / var(--grid--columns));
  }
  .col.-offset-lg-9,
  .column.-offset-lg-9 {
    margin-left: calc(9 * 100% / var(--grid--columns));
  }
  .col.-push-lg-9,
  .column.-push-lg-9 {
    left: calc(9 * 100% / var(--grid--columns));
  }
  .col.-pull-lg-9,
  .column.-pull-lg-9 {
    right: calc(9 * 100% / var(--grid--columns));
  }
}
.col.\-lg-10,
.column.\-lg-10 {
  flex-grow: 0;
  flex-basis: 100%;
  width: 100%;
}
@media screen and (min-width: 992px) {
  .col.\-lg-10,
  .column.\-lg-10 {
    flex-grow: 1;
    flex-basis: calc(10 * 100% / var(--grid--columns));
    max-width: calc(10 * 100% / var(--grid--columns));
  }
  .col.-offset-lg-10,
  .column.-offset-lg-10 {
    margin-left: calc(10 * 100% / var(--grid--columns));
  }
  .col.-push-lg-10,
  .column.-push-lg-10 {
    left: calc(10 * 100% / var(--grid--columns));
  }
  .col.-pull-lg-10,
  .column.-pull-lg-10 {
    right: calc(10 * 100% / var(--grid--columns));
  }
}
.col.\-lg-11,
.column.\-lg-11 {
  flex-grow: 0;
  flex-basis: 100%;
  width: 100%;
}
@media screen and (min-width: 992px) {
  .col.\-lg-11,
  .column.\-lg-11 {
    flex-grow: 1;
    flex-basis: calc(11 * 100% / var(--grid--columns));
    max-width: calc(11 * 100% / var(--grid--columns));
  }
  .col.-offset-lg-11,
  .column.-offset-lg-11 {
    margin-left: calc(11 * 100% / var(--grid--columns));
  }
  .col.-push-lg-11,
  .column.-push-lg-11 {
    left: calc(11 * 100% / var(--grid--columns));
  }
  .col.-pull-lg-11,
  .column.-pull-lg-11 {
    right: calc(11 * 100% / var(--grid--columns));
  }
}
.col.\-lg-12,
.column.\-lg-12 {
  flex-grow: 0;
  flex-basis: 100%;
  width: 100%;
}
@media screen and (min-width: 992px) {
  .col.\-lg-12,
  .column.\-lg-12 {
    flex-grow: 1;
    flex-basis: calc(12 * 100% / var(--grid--columns));
    max-width: calc(12 * 100% / var(--grid--columns));
  }
  .col.-offset-lg-12,
  .column.-offset-lg-12 {
    margin-left: calc(12 * 100% / var(--grid--columns));
  }
  .col.-push-lg-12,
  .column.-push-lg-12 {
    left: calc(12 * 100% / var(--grid--columns));
  }
  .col.-pull-lg-12,
  .column.-pull-lg-12 {
    right: calc(12 * 100% / var(--grid--columns));
  }
}
@media screen and (min-width: 992px) {
  .col.-offset-lg-0,
  .column.-offset-lg-0 {
    margin-left: 0;
  }
  .col.-push-lg-0,
  .column.-push-lg-0 {
    left: 0;
  }
  .col.-pull-lg-0,
  .column.-pull-lg-0 {
    right: 0;
  }
}
.col.\-xl, .col.\-xl-auto,
.column.\-xl,
.column.\-xl-auto {
  flex-grow: 0;
  flex-basis: 100%;
  width: 100%;
}
@media screen and (min-width: 1200px) {
  .col.\-xl,
  .column.\-xl {
    flex-grow: 1;
    flex-basis: 0;
    max-width: 100%;
  }
  .col.\-xl-auto,
  .column.\-xl-auto {
    flex: 1 0 auto;
    max-width: auto;
  }
  .col.-first-xl,
  .column.-first-xl {
    order: -1;
  }
  .col.-last-xl,
  .column.-last-xl {
    order: 1;
  }
}
.col.\-xl-1,
.column.\-xl-1 {
  flex-grow: 0;
  flex-basis: 100%;
  width: 100%;
}
@media screen and (min-width: 1200px) {
  .col.\-xl-1,
  .column.\-xl-1 {
    flex-grow: 1;
    flex-basis: calc(1 * 100% / var(--grid--columns));
    max-width: calc(1 * 100% / var(--grid--columns));
  }
  .col.-offset-xl-1,
  .column.-offset-xl-1 {
    margin-left: calc(1 * 100% / var(--grid--columns));
  }
  .col.-push-xl-1,
  .column.-push-xl-1 {
    left: calc(1 * 100% / var(--grid--columns));
  }
  .col.-pull-xl-1,
  .column.-pull-xl-1 {
    right: calc(1 * 100% / var(--grid--columns));
  }
}
.col.\-xl-2,
.column.\-xl-2 {
  flex-grow: 0;
  flex-basis: 100%;
  width: 100%;
}
@media screen and (min-width: 1200px) {
  .col.\-xl-2,
  .column.\-xl-2 {
    flex-grow: 1;
    flex-basis: calc(2 * 100% / var(--grid--columns));
    max-width: calc(2 * 100% / var(--grid--columns));
  }
  .col.-offset-xl-2,
  .column.-offset-xl-2 {
    margin-left: calc(2 * 100% / var(--grid--columns));
  }
  .col.-push-xl-2,
  .column.-push-xl-2 {
    left: calc(2 * 100% / var(--grid--columns));
  }
  .col.-pull-xl-2,
  .column.-pull-xl-2 {
    right: calc(2 * 100% / var(--grid--columns));
  }
}
.col.\-xl-3,
.column.\-xl-3 {
  flex-grow: 0;
  flex-basis: 100%;
  width: 100%;
}
@media screen and (min-width: 1200px) {
  .col.\-xl-3,
  .column.\-xl-3 {
    flex-grow: 1;
    flex-basis: calc(3 * 100% / var(--grid--columns));
    max-width: calc(3 * 100% / var(--grid--columns));
  }
  .col.-offset-xl-3,
  .column.-offset-xl-3 {
    margin-left: calc(3 * 100% / var(--grid--columns));
  }
  .col.-push-xl-3,
  .column.-push-xl-3 {
    left: calc(3 * 100% / var(--grid--columns));
  }
  .col.-pull-xl-3,
  .column.-pull-xl-3 {
    right: calc(3 * 100% / var(--grid--columns));
  }
}
.col.\-xl-4,
.column.\-xl-4 {
  flex-grow: 0;
  flex-basis: 100%;
  width: 100%;
}
@media screen and (min-width: 1200px) {
  .col.\-xl-4,
  .column.\-xl-4 {
    flex-grow: 1;
    flex-basis: calc(4 * 100% / var(--grid--columns));
    max-width: calc(4 * 100% / var(--grid--columns));
  }
  .col.-offset-xl-4,
  .column.-offset-xl-4 {
    margin-left: calc(4 * 100% / var(--grid--columns));
  }
  .col.-push-xl-4,
  .column.-push-xl-4 {
    left: calc(4 * 100% / var(--grid--columns));
  }
  .col.-pull-xl-4,
  .column.-pull-xl-4 {
    right: calc(4 * 100% / var(--grid--columns));
  }
}
.col.\-xl-5,
.column.\-xl-5 {
  flex-grow: 0;
  flex-basis: 100%;
  width: 100%;
}
@media screen and (min-width: 1200px) {
  .col.\-xl-5,
  .column.\-xl-5 {
    flex-grow: 1;
    flex-basis: calc(5 * 100% / var(--grid--columns));
    max-width: calc(5 * 100% / var(--grid--columns));
  }
  .col.-offset-xl-5,
  .column.-offset-xl-5 {
    margin-left: calc(5 * 100% / var(--grid--columns));
  }
  .col.-push-xl-5,
  .column.-push-xl-5 {
    left: calc(5 * 100% / var(--grid--columns));
  }
  .col.-pull-xl-5,
  .column.-pull-xl-5 {
    right: calc(5 * 100% / var(--grid--columns));
  }
}
.col.\-xl-6,
.column.\-xl-6 {
  flex-grow: 0;
  flex-basis: 100%;
  width: 100%;
}
@media screen and (min-width: 1200px) {
  .col.\-xl-6,
  .column.\-xl-6 {
    flex-grow: 1;
    flex-basis: calc(6 * 100% / var(--grid--columns));
    max-width: calc(6 * 100% / var(--grid--columns));
  }
  .col.-offset-xl-6,
  .column.-offset-xl-6 {
    margin-left: calc(6 * 100% / var(--grid--columns));
  }
  .col.-push-xl-6,
  .column.-push-xl-6 {
    left: calc(6 * 100% / var(--grid--columns));
  }
  .col.-pull-xl-6,
  .column.-pull-xl-6 {
    right: calc(6 * 100% / var(--grid--columns));
  }
}
.col.\-xl-7,
.column.\-xl-7 {
  flex-grow: 0;
  flex-basis: 100%;
  width: 100%;
}
@media screen and (min-width: 1200px) {
  .col.\-xl-7,
  .column.\-xl-7 {
    flex-grow: 1;
    flex-basis: calc(7 * 100% / var(--grid--columns));
    max-width: calc(7 * 100% / var(--grid--columns));
  }
  .col.-offset-xl-7,
  .column.-offset-xl-7 {
    margin-left: calc(7 * 100% / var(--grid--columns));
  }
  .col.-push-xl-7,
  .column.-push-xl-7 {
    left: calc(7 * 100% / var(--grid--columns));
  }
  .col.-pull-xl-7,
  .column.-pull-xl-7 {
    right: calc(7 * 100% / var(--grid--columns));
  }
}
.col.\-xl-8,
.column.\-xl-8 {
  flex-grow: 0;
  flex-basis: 100%;
  width: 100%;
}
@media screen and (min-width: 1200px) {
  .col.\-xl-8,
  .column.\-xl-8 {
    flex-grow: 1;
    flex-basis: calc(8 * 100% / var(--grid--columns));
    max-width: calc(8 * 100% / var(--grid--columns));
  }
  .col.-offset-xl-8,
  .column.-offset-xl-8 {
    margin-left: calc(8 * 100% / var(--grid--columns));
  }
  .col.-push-xl-8,
  .column.-push-xl-8 {
    left: calc(8 * 100% / var(--grid--columns));
  }
  .col.-pull-xl-8,
  .column.-pull-xl-8 {
    right: calc(8 * 100% / var(--grid--columns));
  }
}
.col.\-xl-9,
.column.\-xl-9 {
  flex-grow: 0;
  flex-basis: 100%;
  width: 100%;
}
@media screen and (min-width: 1200px) {
  .col.\-xl-9,
  .column.\-xl-9 {
    flex-grow: 1;
    flex-basis: calc(9 * 100% / var(--grid--columns));
    max-width: calc(9 * 100% / var(--grid--columns));
  }
  .col.-offset-xl-9,
  .column.-offset-xl-9 {
    margin-left: calc(9 * 100% / var(--grid--columns));
  }
  .col.-push-xl-9,
  .column.-push-xl-9 {
    left: calc(9 * 100% / var(--grid--columns));
  }
  .col.-pull-xl-9,
  .column.-pull-xl-9 {
    right: calc(9 * 100% / var(--grid--columns));
  }
}
.col.\-xl-10,
.column.\-xl-10 {
  flex-grow: 0;
  flex-basis: 100%;
  width: 100%;
}
@media screen and (min-width: 1200px) {
  .col.\-xl-10,
  .column.\-xl-10 {
    flex-grow: 1;
    flex-basis: calc(10 * 100% / var(--grid--columns));
    max-width: calc(10 * 100% / var(--grid--columns));
  }
  .col.-offset-xl-10,
  .column.-offset-xl-10 {
    margin-left: calc(10 * 100% / var(--grid--columns));
  }
  .col.-push-xl-10,
  .column.-push-xl-10 {
    left: calc(10 * 100% / var(--grid--columns));
  }
  .col.-pull-xl-10,
  .column.-pull-xl-10 {
    right: calc(10 * 100% / var(--grid--columns));
  }
}
.col.\-xl-11,
.column.\-xl-11 {
  flex-grow: 0;
  flex-basis: 100%;
  width: 100%;
}
@media screen and (min-width: 1200px) {
  .col.\-xl-11,
  .column.\-xl-11 {
    flex-grow: 1;
    flex-basis: calc(11 * 100% / var(--grid--columns));
    max-width: calc(11 * 100% / var(--grid--columns));
  }
  .col.-offset-xl-11,
  .column.-offset-xl-11 {
    margin-left: calc(11 * 100% / var(--grid--columns));
  }
  .col.-push-xl-11,
  .column.-push-xl-11 {
    left: calc(11 * 100% / var(--grid--columns));
  }
  .col.-pull-xl-11,
  .column.-pull-xl-11 {
    right: calc(11 * 100% / var(--grid--columns));
  }
}
.col.\-xl-12,
.column.\-xl-12 {
  flex-grow: 0;
  flex-basis: 100%;
  width: 100%;
}
@media screen and (min-width: 1200px) {
  .col.\-xl-12,
  .column.\-xl-12 {
    flex-grow: 1;
    flex-basis: calc(12 * 100% / var(--grid--columns));
    max-width: calc(12 * 100% / var(--grid--columns));
  }
  .col.-offset-xl-12,
  .column.-offset-xl-12 {
    margin-left: calc(12 * 100% / var(--grid--columns));
  }
  .col.-push-xl-12,
  .column.-push-xl-12 {
    left: calc(12 * 100% / var(--grid--columns));
  }
  .col.-pull-xl-12,
  .column.-pull-xl-12 {
    right: calc(12 * 100% / var(--grid--columns));
  }
}
@media screen and (min-width: 1200px) {
  .col.-offset-xl-0,
  .column.-offset-xl-0 {
    margin-left: 0;
  }
  .col.-push-xl-0,
  .column.-push-xl-0 {
    left: 0;
  }
  .col.-pull-xl-0,
  .column.-pull-xl-0 {
    right: 0;
  }
}
.col.\-2xl, .col.\-2xl-auto,
.column.\-2xl,
.column.\-2xl-auto {
  flex-grow: 0;
  flex-basis: 100%;
  width: 100%;
}
@media screen and (min-width: 1400px) {
  .col.\-2xl,
  .column.\-2xl {
    flex-grow: 1;
    flex-basis: 0;
    max-width: 100%;
  }
  .col.\-2xl-auto,
  .column.\-2xl-auto {
    flex: 1 0 auto;
    max-width: auto;
  }
  .col.-first-2xl,
  .column.-first-2xl {
    order: -1;
  }
  .col.-last-2xl,
  .column.-last-2xl {
    order: 1;
  }
}
.col.\-2xl-1,
.column.\-2xl-1 {
  flex-grow: 0;
  flex-basis: 100%;
  width: 100%;
}
@media screen and (min-width: 1400px) {
  .col.\-2xl-1,
  .column.\-2xl-1 {
    flex-grow: 1;
    flex-basis: calc(1 * 100% / var(--grid--columns));
    max-width: calc(1 * 100% / var(--grid--columns));
  }
  .col.-offset-2xl-1,
  .column.-offset-2xl-1 {
    margin-left: calc(1 * 100% / var(--grid--columns));
  }
  .col.-push-2xl-1,
  .column.-push-2xl-1 {
    left: calc(1 * 100% / var(--grid--columns));
  }
  .col.-pull-2xl-1,
  .column.-pull-2xl-1 {
    right: calc(1 * 100% / var(--grid--columns));
  }
}
.col.\-2xl-2,
.column.\-2xl-2 {
  flex-grow: 0;
  flex-basis: 100%;
  width: 100%;
}
@media screen and (min-width: 1400px) {
  .col.\-2xl-2,
  .column.\-2xl-2 {
    flex-grow: 1;
    flex-basis: calc(2 * 100% / var(--grid--columns));
    max-width: calc(2 * 100% / var(--grid--columns));
  }
  .col.-offset-2xl-2,
  .column.-offset-2xl-2 {
    margin-left: calc(2 * 100% / var(--grid--columns));
  }
  .col.-push-2xl-2,
  .column.-push-2xl-2 {
    left: calc(2 * 100% / var(--grid--columns));
  }
  .col.-pull-2xl-2,
  .column.-pull-2xl-2 {
    right: calc(2 * 100% / var(--grid--columns));
  }
}
.col.\-2xl-3,
.column.\-2xl-3 {
  flex-grow: 0;
  flex-basis: 100%;
  width: 100%;
}
@media screen and (min-width: 1400px) {
  .col.\-2xl-3,
  .column.\-2xl-3 {
    flex-grow: 1;
    flex-basis: calc(3 * 100% / var(--grid--columns));
    max-width: calc(3 * 100% / var(--grid--columns));
  }
  .col.-offset-2xl-3,
  .column.-offset-2xl-3 {
    margin-left: calc(3 * 100% / var(--grid--columns));
  }
  .col.-push-2xl-3,
  .column.-push-2xl-3 {
    left: calc(3 * 100% / var(--grid--columns));
  }
  .col.-pull-2xl-3,
  .column.-pull-2xl-3 {
    right: calc(3 * 100% / var(--grid--columns));
  }
}
.col.\-2xl-4,
.column.\-2xl-4 {
  flex-grow: 0;
  flex-basis: 100%;
  width: 100%;
}
@media screen and (min-width: 1400px) {
  .col.\-2xl-4,
  .column.\-2xl-4 {
    flex-grow: 1;
    flex-basis: calc(4 * 100% / var(--grid--columns));
    max-width: calc(4 * 100% / var(--grid--columns));
  }
  .col.-offset-2xl-4,
  .column.-offset-2xl-4 {
    margin-left: calc(4 * 100% / var(--grid--columns));
  }
  .col.-push-2xl-4,
  .column.-push-2xl-4 {
    left: calc(4 * 100% / var(--grid--columns));
  }
  .col.-pull-2xl-4,
  .column.-pull-2xl-4 {
    right: calc(4 * 100% / var(--grid--columns));
  }
}
.col.\-2xl-5,
.column.\-2xl-5 {
  flex-grow: 0;
  flex-basis: 100%;
  width: 100%;
}
@media screen and (min-width: 1400px) {
  .col.\-2xl-5,
  .column.\-2xl-5 {
    flex-grow: 1;
    flex-basis: calc(5 * 100% / var(--grid--columns));
    max-width: calc(5 * 100% / var(--grid--columns));
  }
  .col.-offset-2xl-5,
  .column.-offset-2xl-5 {
    margin-left: calc(5 * 100% / var(--grid--columns));
  }
  .col.-push-2xl-5,
  .column.-push-2xl-5 {
    left: calc(5 * 100% / var(--grid--columns));
  }
  .col.-pull-2xl-5,
  .column.-pull-2xl-5 {
    right: calc(5 * 100% / var(--grid--columns));
  }
}
.col.\-2xl-6,
.column.\-2xl-6 {
  flex-grow: 0;
  flex-basis: 100%;
  width: 100%;
}
@media screen and (min-width: 1400px) {
  .col.\-2xl-6,
  .column.\-2xl-6 {
    flex-grow: 1;
    flex-basis: calc(6 * 100% / var(--grid--columns));
    max-width: calc(6 * 100% / var(--grid--columns));
  }
  .col.-offset-2xl-6,
  .column.-offset-2xl-6 {
    margin-left: calc(6 * 100% / var(--grid--columns));
  }
  .col.-push-2xl-6,
  .column.-push-2xl-6 {
    left: calc(6 * 100% / var(--grid--columns));
  }
  .col.-pull-2xl-6,
  .column.-pull-2xl-6 {
    right: calc(6 * 100% / var(--grid--columns));
  }
}
.col.\-2xl-7,
.column.\-2xl-7 {
  flex-grow: 0;
  flex-basis: 100%;
  width: 100%;
}
@media screen and (min-width: 1400px) {
  .col.\-2xl-7,
  .column.\-2xl-7 {
    flex-grow: 1;
    flex-basis: calc(7 * 100% / var(--grid--columns));
    max-width: calc(7 * 100% / var(--grid--columns));
  }
  .col.-offset-2xl-7,
  .column.-offset-2xl-7 {
    margin-left: calc(7 * 100% / var(--grid--columns));
  }
  .col.-push-2xl-7,
  .column.-push-2xl-7 {
    left: calc(7 * 100% / var(--grid--columns));
  }
  .col.-pull-2xl-7,
  .column.-pull-2xl-7 {
    right: calc(7 * 100% / var(--grid--columns));
  }
}
.col.\-2xl-8,
.column.\-2xl-8 {
  flex-grow: 0;
  flex-basis: 100%;
  width: 100%;
}
@media screen and (min-width: 1400px) {
  .col.\-2xl-8,
  .column.\-2xl-8 {
    flex-grow: 1;
    flex-basis: calc(8 * 100% / var(--grid--columns));
    max-width: calc(8 * 100% / var(--grid--columns));
  }
  .col.-offset-2xl-8,
  .column.-offset-2xl-8 {
    margin-left: calc(8 * 100% / var(--grid--columns));
  }
  .col.-push-2xl-8,
  .column.-push-2xl-8 {
    left: calc(8 * 100% / var(--grid--columns));
  }
  .col.-pull-2xl-8,
  .column.-pull-2xl-8 {
    right: calc(8 * 100% / var(--grid--columns));
  }
}
.col.\-2xl-9,
.column.\-2xl-9 {
  flex-grow: 0;
  flex-basis: 100%;
  width: 100%;
}
@media screen and (min-width: 1400px) {
  .col.\-2xl-9,
  .column.\-2xl-9 {
    flex-grow: 1;
    flex-basis: calc(9 * 100% / var(--grid--columns));
    max-width: calc(9 * 100% / var(--grid--columns));
  }
  .col.-offset-2xl-9,
  .column.-offset-2xl-9 {
    margin-left: calc(9 * 100% / var(--grid--columns));
  }
  .col.-push-2xl-9,
  .column.-push-2xl-9 {
    left: calc(9 * 100% / var(--grid--columns));
  }
  .col.-pull-2xl-9,
  .column.-pull-2xl-9 {
    right: calc(9 * 100% / var(--grid--columns));
  }
}
.col.\-2xl-10,
.column.\-2xl-10 {
  flex-grow: 0;
  flex-basis: 100%;
  width: 100%;
}
@media screen and (min-width: 1400px) {
  .col.\-2xl-10,
  .column.\-2xl-10 {
    flex-grow: 1;
    flex-basis: calc(10 * 100% / var(--grid--columns));
    max-width: calc(10 * 100% / var(--grid--columns));
  }
  .col.-offset-2xl-10,
  .column.-offset-2xl-10 {
    margin-left: calc(10 * 100% / var(--grid--columns));
  }
  .col.-push-2xl-10,
  .column.-push-2xl-10 {
    left: calc(10 * 100% / var(--grid--columns));
  }
  .col.-pull-2xl-10,
  .column.-pull-2xl-10 {
    right: calc(10 * 100% / var(--grid--columns));
  }
}
.col.\-2xl-11,
.column.\-2xl-11 {
  flex-grow: 0;
  flex-basis: 100%;
  width: 100%;
}
@media screen and (min-width: 1400px) {
  .col.\-2xl-11,
  .column.\-2xl-11 {
    flex-grow: 1;
    flex-basis: calc(11 * 100% / var(--grid--columns));
    max-width: calc(11 * 100% / var(--grid--columns));
  }
  .col.-offset-2xl-11,
  .column.-offset-2xl-11 {
    margin-left: calc(11 * 100% / var(--grid--columns));
  }
  .col.-push-2xl-11,
  .column.-push-2xl-11 {
    left: calc(11 * 100% / var(--grid--columns));
  }
  .col.-pull-2xl-11,
  .column.-pull-2xl-11 {
    right: calc(11 * 100% / var(--grid--columns));
  }
}
.col.\-2xl-12,
.column.\-2xl-12 {
  flex-grow: 0;
  flex-basis: 100%;
  width: 100%;
}
@media screen and (min-width: 1400px) {
  .col.\-2xl-12,
  .column.\-2xl-12 {
    flex-grow: 1;
    flex-basis: calc(12 * 100% / var(--grid--columns));
    max-width: calc(12 * 100% / var(--grid--columns));
  }
  .col.-offset-2xl-12,
  .column.-offset-2xl-12 {
    margin-left: calc(12 * 100% / var(--grid--columns));
  }
  .col.-push-2xl-12,
  .column.-push-2xl-12 {
    left: calc(12 * 100% / var(--grid--columns));
  }
  .col.-pull-2xl-12,
  .column.-pull-2xl-12 {
    right: calc(12 * 100% / var(--grid--columns));
  }
}
@media screen and (min-width: 1400px) {
  .col.-offset-2xl-0,
  .column.-offset-2xl-0 {
    margin-left: 0;
  }
  .col.-push-2xl-0,
  .column.-push-2xl-0 {
    left: 0;
  }
  .col.-pull-2xl-0,
  .column.-pull-2xl-0 {
    right: 0;
  }
}
.col.-first,
.column.-first {
  order: -1;
}
.col.-last,
.column.-last {
  order: 1;
}
.col.-offset-1,
.column.-offset-1 {
  margin-left: calc(1 * 100% / var(--grid--columns));
}
.col.-push-1,
.column.-push-1 {
  left: calc(1 * 100% / var(--grid--columns));
}
.col.-pull-1,
.column.-pull-1 {
  right: calc(1 * 100% / var(--grid--columns));
}
.col.-offset-2,
.column.-offset-2 {
  margin-left: calc(2 * 100% / var(--grid--columns));
}
.col.-push-2,
.column.-push-2 {
  left: calc(2 * 100% / var(--grid--columns));
}
.col.-pull-2,
.column.-pull-2 {
  right: calc(2 * 100% / var(--grid--columns));
}
.col.-offset-3,
.column.-offset-3 {
  margin-left: calc(3 * 100% / var(--grid--columns));
}
.col.-push-3,
.column.-push-3 {
  left: calc(3 * 100% / var(--grid--columns));
}
.col.-pull-3,
.column.-pull-3 {
  right: calc(3 * 100% / var(--grid--columns));
}
.col.-offset-4,
.column.-offset-4 {
  margin-left: calc(4 * 100% / var(--grid--columns));
}
.col.-push-4,
.column.-push-4 {
  left: calc(4 * 100% / var(--grid--columns));
}
.col.-pull-4,
.column.-pull-4 {
  right: calc(4 * 100% / var(--grid--columns));
}
.col.-offset-5,
.column.-offset-5 {
  margin-left: calc(5 * 100% / var(--grid--columns));
}
.col.-push-5,
.column.-push-5 {
  left: calc(5 * 100% / var(--grid--columns));
}
.col.-pull-5,
.column.-pull-5 {
  right: calc(5 * 100% / var(--grid--columns));
}
.col.-offset-6,
.column.-offset-6 {
  margin-left: calc(6 * 100% / var(--grid--columns));
}
.col.-push-6,
.column.-push-6 {
  left: calc(6 * 100% / var(--grid--columns));
}
.col.-pull-6,
.column.-pull-6 {
  right: calc(6 * 100% / var(--grid--columns));
}
.col.-offset-7,
.column.-offset-7 {
  margin-left: calc(7 * 100% / var(--grid--columns));
}
.col.-push-7,
.column.-push-7 {
  left: calc(7 * 100% / var(--grid--columns));
}
.col.-pull-7,
.column.-pull-7 {
  right: calc(7 * 100% / var(--grid--columns));
}
.col.-offset-8,
.column.-offset-8 {
  margin-left: calc(8 * 100% / var(--grid--columns));
}
.col.-push-8,
.column.-push-8 {
  left: calc(8 * 100% / var(--grid--columns));
}
.col.-pull-8,
.column.-pull-8 {
  right: calc(8 * 100% / var(--grid--columns));
}
.col.-offset-9,
.column.-offset-9 {
  margin-left: calc(9 * 100% / var(--grid--columns));
}
.col.-push-9,
.column.-push-9 {
  left: calc(9 * 100% / var(--grid--columns));
}
.col.-pull-9,
.column.-pull-9 {
  right: calc(9 * 100% / var(--grid--columns));
}
.col.-offset-10,
.column.-offset-10 {
  margin-left: calc(10 * 100% / var(--grid--columns));
}
.col.-push-10,
.column.-push-10 {
  left: calc(10 * 100% / var(--grid--columns));
}
.col.-pull-10,
.column.-pull-10 {
  right: calc(10 * 100% / var(--grid--columns));
}
.col.-offset-11,
.column.-offset-11 {
  margin-left: calc(11 * 100% / var(--grid--columns));
}
.col.-push-11,
.column.-push-11 {
  left: calc(11 * 100% / var(--grid--columns));
}
.col.-pull-11,
.column.-pull-11 {
  right: calc(11 * 100% / var(--grid--columns));
}
.col.-offset-12,
.column.-offset-12 {
  margin-left: calc(12 * 100% / var(--grid--columns));
}
.col.-push-12,
.column.-push-12 {
  left: calc(12 * 100% / var(--grid--columns));
}
.col.-pull-12,
.column.-pull-12 {
  right: calc(12 * 100% / var(--grid--columns));
}
.col.-offset-0,
.column.-offset-0 {
  margin-left: 0;
}
.col.-push-0,
.column.-push-0 {
  left: 0;
}
.col.-pull-0,
.column.-pull-0 {
  right: 0;
}

/**
 * Collapsible
 */
.collapsible {
  position: relative;
  display: block;
  font-size: var(--collapsible--font-size, var(--font-size));
}

/**
 * Color variants
 */
.collapsible.-light {
  --collapsible--background: var(--collapsible--light--background, var(--color-light));
  --collapsible--border-top-color: var(
      --collapsible--light--border-top-color,
      var(--color-light-shade-50)
  );
  --collapsible--border-right-color: var(
      --collapsible--light--border-right-color,
      var(--color-light-shade-50)
  );
  --collapsible--border-bottom-color: var(
      --collapsible--light--border-bottom-color,
      var(--color-light-shade-50)
  );
  --collapsible--border-left-color: var(
      --collapsible--light--border-left-color,
      var(--color-light-shade-50)
  );
  --collapsible--color: var(--collapsible--light--color, var(--contrast-text-color-light));
  --collapsible--body--background: var(
      --collapsible--light--body--background,
      var(--color-white)
  );
}
.collapsible.-dark {
  --collapsible--background: var(--collapsible--dark--background, var(--color-dark));
  --collapsible--border-top-color: var(
      --collapsible--dark--border-top-color,
      var(--color-dark-tint-50)
  );
  --collapsible--border-right-color: var(
      --collapsible--dark--border-right-color,
      var(--color-dark-tint-50)
  );
  --collapsible--border-bottom-color: var(
      --collapsible--dark--border-bottom-color,
      var(--color-dark-tint-50)
  );
  --collapsible--border-left-color: var(
      --collapsible--dark--border-left-color,
      var(--color-dark-tint-50)
  );
  --collapsible--color: var(--collapsible--dark--color, var(--contrast-text-color-dark));
  --collapsible--body--background: var(
      --collapsible--dark--body--background,
      var(--color-dark-tint-50)
  );
}
.collapsible.-transparent {
  --collapsible--background: var(--collapsible--transparent--background, transparent);
  --collapsible--border-top-color: var(
      --collapsible--transparent--border-top-color,
      transparent
  );
  --collapsible--border-right-color: var(
      --collapsible--transparent--border-right-color,
      transparent
  );
  --collapsible--border-bottom-color: var(
      --collapsible--transparent--border-bottom-color,
      transparent
  );
  --collapsible--border-left-color: var(
      --collapsible--transparent--border-left-color,
      transparent
  );
  --collapsible--color: var(--collapsible--transparent--color, inherit);
  --collapsible--body--background: var(
      --collapsible--transparent--body--background,
      transparent
  );
  --collapsible--box-shadow-color: transparent;
}
.light-theme .collapsible.-transparent, .-light .collapsible.-transparent {
  --collapsible--icon--color: var(
      --collapsible--transparent--icon--light--color,
      var(--color-dark)
  );
}
.dark-theme .collapsible.-transparent, .-dark .collapsible.-transparent {
  --collapsible--icon--color: var(
      --collapsible--transparent--icon--dark--color,
      var(--color-light)
  );
}

/**
 * Size variants
 */
.collapsible.-sm {
  --collapsible--border-top-left-radius: var(
      --collapsible--sm--border-top-left-radius,
      calc(var(--border-top-left-radius) * var(--size-multiplier-sm))
  );
  --collapsible--border-top-right-radius: var(
      --collapsible--sm--border-top-right-radius,
      calc(var(--border-top-right-radius) * var(--size-multiplier-sm))
  );
  --collapsible--border-bottom-right-radius: var(
      --collapsible--sm--border-bottom-right-radius,
      calc(var(--border-bottom-right-radius) * var(--size-multiplier-sm))
  );
  --collapsible--border-bottom-left-radius: var(
      --collapsible--sm--border-bottom-left-radius,
      calc(var(--border-bottom-left-radius) * var(--size-multiplier-sm))
  );
  --collapsible--font-size: var(
      --collapsible--sm--font-size,
      calc(var(--font-size) * var(--size-multiplier-sm))
  );
  --collapsible--padding-top: var(
      --collapsible--sm--padding-top,
      calc(var(--padding-top) * var(--size-multiplier-sm))
  );
  --collapsible--padding-right: var(
      --collapsible--sm--padding-right,
      calc(var(--padding-right) * var(--size-multiplier-sm))
  );
  --collapsible--padding-bottom: var(
      --collapsible--sm--padding-bottom,
      calc(var(--padding-bottom) * var(--size-multiplier-sm))
  );
  --collapsible--padding-left: var(
      --collapsible--sm--padding-left,
      calc(var(--padding-left) * var(--size-multiplier-sm))
  );
  --collapsible--header--padding-top: var(
      --collapsible--sm--header--padding-top,
      var(--collapsible--padding-top)
  );
  --collapsible--header--padding-right: var(
      --collapsible--sm--header--padding-right,
      var(--collapsible--padding-right)
  );
  --collapsible--header--padding-bottom: var(
      --collapsible--sm--header--padding-bottom,
      var(--collapsible--padding-bottom)
  );
  --collapsible--header--padding-left: var(
      --collapsible--sm--header--padding-left,
      var(--collapsible--padding-left)
  );
  --collapsible--body--padding-top: var(
      --collapsible--sm--body--padding-top,
      var(--collapsible--padding-top)
  );
  --collapsible--body--padding-right: var(
      --collapsible--sm--body--padding-right,
      var(--collapsible--padding-right)
  );
  --collapsible--body--padding-bottom: var(
      --collapsible--sm--body--padding-bottom,
      var(--collapsible--padding-bottom)
  );
  --collapsible--body--padding-left: var(
      --collapsible--sm--body--padding-left,
      var(--collapsible--padding-left)
  );
}
.collapsible.-md {
  --collapsible--border-top-left-radius: var(
      --collapsible--md--border-top-left-radius,
      calc(var(--border-top-left-radius) * var(--size-multiplier-md))
  );
  --collapsible--border-top-right-radius: var(
      --collapsible--md--border-top-right-radius,
      calc(var(--border-top-right-radius) * var(--size-multiplier-md))
  );
  --collapsible--border-bottom-right-radius: var(
      --collapsible--md--border-bottom-right-radius,
      calc(var(--border-bottom-right-radius) * var(--size-multiplier-md))
  );
  --collapsible--border-bottom-left-radius: var(
      --collapsible--md--border-bottom-left-radius,
      calc(var(--border-bottom-left-radius) * var(--size-multiplier-md))
  );
  --collapsible--font-size: var(
      --collapsible--md--font-size,
      calc(var(--font-size) * var(--size-multiplier-md))
  );
  --collapsible--padding-top: var(
      --collapsible--md--padding-top,
      calc(var(--padding-top) * var(--size-multiplier-md))
  );
  --collapsible--padding-right: var(
      --collapsible--md--padding-right,
      calc(var(--padding-right) * var(--size-multiplier-md))
  );
  --collapsible--padding-bottom: var(
      --collapsible--md--padding-bottom,
      calc(var(--padding-bottom) * var(--size-multiplier-md))
  );
  --collapsible--padding-left: var(
      --collapsible--md--padding-left,
      calc(var(--padding-left) * var(--size-multiplier-md))
  );
  --collapsible--header--padding-top: var(
      --collapsible--md--header--padding-top,
      var(--collapsible--padding-top)
  );
  --collapsible--header--padding-right: var(
      --collapsible--md--header--padding-right,
      var(--collapsible--padding-right)
  );
  --collapsible--header--padding-bottom: var(
      --collapsible--md--header--padding-bottom,
      var(--collapsible--padding-bottom)
  );
  --collapsible--header--padding-left: var(
      --collapsible--md--header--padding-left,
      var(--collapsible--padding-left)
  );
  --collapsible--body--padding-top: var(
      --collapsible--md--body--padding-top,
      var(--collapsible--padding-top)
  );
  --collapsible--body--padding-right: var(
      --collapsible--md--body--padding-right,
      var(--collapsible--padding-right)
  );
  --collapsible--body--padding-bottom: var(
      --collapsible--md--body--padding-bottom,
      var(--collapsible--padding-bottom)
  );
  --collapsible--body--padding-left: var(
      --collapsible--md--body--padding-left,
      var(--collapsible--padding-left)
  );
}
.collapsible.-lg {
  --collapsible--border-top-left-radius: var(
      --collapsible--lg--border-top-left-radius,
      calc(var(--border-top-left-radius) * var(--size-multiplier-lg))
  );
  --collapsible--border-top-right-radius: var(
      --collapsible--lg--border-top-right-radius,
      calc(var(--border-top-right-radius) * var(--size-multiplier-lg))
  );
  --collapsible--border-bottom-right-radius: var(
      --collapsible--lg--border-bottom-right-radius,
      calc(var(--border-bottom-right-radius) * var(--size-multiplier-lg))
  );
  --collapsible--border-bottom-left-radius: var(
      --collapsible--lg--border-bottom-left-radius,
      calc(var(--border-bottom-left-radius) * var(--size-multiplier-lg))
  );
  --collapsible--font-size: var(
      --collapsible--lg--font-size,
      calc(var(--font-size) * var(--size-multiplier-lg))
  );
  --collapsible--padding-top: var(
      --collapsible--lg--padding-top,
      calc(var(--padding-top) * var(--size-multiplier-lg))
  );
  --collapsible--padding-right: var(
      --collapsible--lg--padding-right,
      calc(var(--padding-right) * var(--size-multiplier-lg))
  );
  --collapsible--padding-bottom: var(
      --collapsible--lg--padding-bottom,
      calc(var(--padding-bottom) * var(--size-multiplier-lg))
  );
  --collapsible--padding-left: var(
      --collapsible--lg--padding-left,
      calc(var(--padding-left) * var(--size-multiplier-lg))
  );
  --collapsible--header--padding-top: var(
      --collapsible--lg--header--padding-top,
      var(--collapsible--padding-top)
  );
  --collapsible--header--padding-right: var(
      --collapsible--lg--header--padding-right,
      var(--collapsible--padding-right)
  );
  --collapsible--header--padding-bottom: var(
      --collapsible--lg--header--padding-bottom,
      var(--collapsible--padding-bottom)
  );
  --collapsible--header--padding-left: var(
      --collapsible--lg--header--padding-left,
      var(--collapsible--padding-left)
  );
  --collapsible--body--padding-top: var(
      --collapsible--lg--body--padding-top,
      var(--collapsible--padding-top)
  );
  --collapsible--body--padding-right: var(
      --collapsible--lg--body--padding-right,
      var(--collapsible--padding-right)
  );
  --collapsible--body--padding-bottom: var(
      --collapsible--lg--body--padding-bottom,
      var(--collapsible--padding-bottom)
  );
  --collapsible--body--padding-left: var(
      --collapsible--lg--body--padding-left,
      var(--collapsible--padding-left)
  );
}

/**
 * Collapsible Item
 */
.collapsible > .collapsible-item {
  position: relative;
  display: block;
  box-shadow: var(--collapsible--box-shadow, var(--collapsible--box-shadow-x-offset, var(--box-shadow-offset-x)) var(--collapsible--box-shadow-y-offset, var(--box-shadow-offset-y)) var(--collapsible--box-shadow-blur-radius, var(--box-shadow-blur-radius)) var(--collapsible--box-shadow-spread-radius, var(--box-shadow-spread-radius)) var(--collapsible--box-shadow-color, var(--box-shadow-color)));
}
.collapsible > .collapsible-item > .collapsible-header {
  border-style: var(--collapsible--header--border-style, var(--collapsible--border-style, var(--collapsible--header--border-top-style, var(--collapsible--border-top-style, var(--border-top-style))) var(--collapsible--header--border-right-style, var(--collapsible--border-right-style, var(--border-right-style))) var(--collapsible--header--border-bottom-style, var(--collapsible--border-bottom-style, var(--border-bottom-style))) var(--collapsible--header--border-left-style, var(--collapsible--border-left-style, var(--border-left-style)))));
  border-width: var(--collapsible--header--border-width, var(--collapsible--border-width, var(--collapsible--header--border-top-width, var(--collapsible--border-top-width, var(--border-top-width))) var(--collapsible--header--border-right-width, var(--collapsible--border-right-width, var(--border-right-width))) var(--collapsible--header--border-bottom-width, var(--collapsible--border-bottom-width, var(--border-bottom-width))) var(--collapsible--header--border-left-width, var(--collapsible--border-left-width, var(--border-left-width)))));
  border-color: var(--collapsible--header--border-color, var(--collapsible--border-color, var(--collapsible--header--border-top-color, var(--collapsible--border-top-color, var(--border-top-color))) var(--collapsible--header--border-right-color, var(--collapsible--border-right-color, var(--border-right-color))) var(--collapsible--header--border-bottom-color, var(--collapsible--border-bottom-color, var(--border-bottom-color))) var(--collapsible--header--border-left-color, var(--collapsible--border-left-color, var(--border-left-color)))));
  color: var(--collapsible--header--color, var(--collapsible--color));
  background-color: var(--collapsible--header--background, var(--collapsible--background));
  padding: var(--collapsible--header--padding, var(--collapsible--padding, var(--collapsible--header--padding-top, var(--collapsible--padding-top, var(--padding-top))) var(--collapsible--header--padding-right, var(--collapsible--padding-right, var(--padding-right))) var(--collapsible--header--padding-bottom, var(--collapsible--padding-bottom, var(--padding-bottom))) var(--collapsible--header--padding-left, var(--collapsible--padding-left, var(--padding-left)))));
  display: flex;
  cursor: pointer;
  align-items: center;
  justify-content: space-between;
  text-decoration: none;
  transition-property: var(--collapsible--transition-property, var(--collapsible--transition-property, background-color, border-radius));
  transition-duration: var(--collapsible--transition-duration, var(--collapsible--transition-duration, var(--transition-duration)));
  transition-timing-function: var(--collapsible--transition-timing-function, var(--transition-timing-function));
}
.collapsible > .collapsible-item > .collapsible-header > .icon {
  background-color: var(--collapsible--icon--color, var(--collapsible--header--color, var(--collapsible--color)));
  width: var(--collapsible--icon--size, 12px);
  height: var(--collapsible--icon--size, 12px);
  mask-size: var(--collapsible--icon--size, 12px) var(--collapsible--icon--size, 12px);
  display: inline-block;
  position: relative;
  transform: rotate(-90deg);
  transition-property: var(--collapsible--transition-property, var(--collapsible--transition-property, background-color, transform));
  transition-duration: var(--collapsible--transition-duration, var(--collapsible--transition-duration, var(--transition-duration)));
  transition-timing-function: var(--collapsible--transition-timing-function, var(--transition-timing-function));
  mask-image: url('data:image/svg+xml; utf8, <svg fill="currentColor" version="1.1" xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 28 28"><title>chevron-down</title><path d="M26.297 12.625l-11.594 11.578c-0.391 0.391-1.016 0.391-1.406 0l-11.594-11.578c-0.391-0.391-0.391-1.031 0-1.422l2.594-2.578c0.391-0.391 1.016-0.391 1.406 0l8.297 8.297 8.297-8.297c0.391-0.391 1.016-0.391 1.406 0l2.594 2.578c0.391 0.391 0.391 1.031 0 1.422z"></path></svg>');
  -webkit-mask-image: url('data:image/svg+xml; utf8, <svg fill="currentColor" version="1.1" xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 28 28"><title>chevron-down</title><path d="M26.297 12.625l-11.594 11.578c-0.391 0.391-1.016 0.391-1.406 0l-11.594-11.578c-0.391-0.391-0.391-1.031 0-1.422l2.594-2.578c0.391-0.391 1.016-0.391 1.406 0l8.297 8.297 8.297-8.297c0.391-0.391 1.016-0.391 1.406 0l2.594 2.578c0.391 0.391 0.391 1.031 0 1.422z"></path></svg>');
  mask-position: center center;
  -webkit-mask-position: center center;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
}
.collapsible > .collapsible-item > .collapsible-body {
  display: block;
  position: relative;
  border-style: var(--collapsible--body--border-style, var(--collapsible--border-style, var(--collapsible--body--border-top-style, var(--collapsible--border-top-style, var(--border-top-style))) var(--collapsible--body--border-right-style, var(--collapsible--border-right-style, var(--border-right-style))) var(--collapsible--body--border-bottom-style, var(--collapsible--border-bottom-style, var(--border-bottom-style))) var(--collapsible--body--border-left-style, var(--collapsible--border-left-style, var(--border-left-style)))));
  border-width: var(--collapsible--body--border-width, var(--collapsible--border-width, var(--collapsible--body--border-top-width, var(--collapsible--border-top-width, var(--border-top-width))) var(--collapsible--body--border-right-width, var(--collapsible--border-right-width, var(--border-right-width))) var(--collapsible--body--border-bottom-width, var(--collapsible--border-bottom-width, var(--border-bottom-width))) var(--collapsible--body--border-left-width, var(--collapsible--border-left-width, var(--border-left-width)))));
  border-color: var(--collapsible--body--border-color, var(--collapsible--border-color, var(--collapsible--body--border-top-color, var(--collapsible--border-top-color, var(--border-top-color))) var(--collapsible--body--border-right-color, var(--collapsible--border-right-color, var(--border-right-color))) var(--collapsible--body--border-bottom-color, var(--collapsible--border-bottom-color, var(--border-bottom-color))) var(--collapsible--body--border-left-color, var(--collapsible--border-left-color, var(--border-left-color)))));
  color: var(--collapsible--body--color, var(--collapsible--color));
  background-color: var(--collapsible--body--background, var(--collapsible--background));
}
.collapsible > .collapsible-item > .collapsible-body > .content {
  padding: var(--collapsible--body--padding, var(--collapsible--padding, var(--collapsible--body--padding-top, var(--collapsible--padding-top, var(--padding-top))) var(--collapsible--body--padding-right, var(--collapsible--padding-right, var(--padding-right))) var(--collapsible--body--padding-bottom, var(--collapsible--padding-bottom, var(--padding-bottom))) var(--collapsible--body--padding-left, var(--collapsible--padding-left, var(--padding-left)))));
}
.collapsible > .collapsible-item:first-of-type > .collapsible-header {
  border-top-left-radius: var(--collapsible--header--border-top-left-radius, var(--collapsible--border-top-left-radius, var(--border-top-left-radius)));
  border-top-right-radius: var(--collapsible--header--border-top-right-radius, var(--collapsible--border-top-right-radius, var(--border-top-right-radius)));
}
.collapsible > .collapsible-item:last-of-type > .collapsible-header {
  border-bottom-left-radius: var(--collapsible--header--border-bottom-left-radius, var(--collapsible--border-bottom-left-radius, var(--border-bottom-left-radius)));
  border-bottom-right-radius: var(--collapsible--header--border-bottom-right-radius, var(--collapsible--border-bottom-right-radius, var(--border-bottom-right-radius)));
}
.collapsible > .collapsible-item:last-of-type > .collapsible-body {
  border-bottom-left-radius: var(--collapsible--body--border-bottom-left-radius, var(--collapsible--border-bottom-left-radius, var(--border-bottom-left-radius)));
  border-bottom-right-radius: var(--collapsible--body--border-bottom-right-radius, var(--collapsible--border-bottom-right-radius, var(--border-bottom-right-radius)));
}
.collapsible > .collapsible-item.-active > .collapsible-header {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.collapsible > .collapsible-item.-active > .collapsible-header > .icon {
  transform: rotate(0deg);
}
.collapsible > .collapsible-item + .collapsible-item > .collapsible-header {
  border-top-width: 0;
}

/**
 * Breakpoint mixins
 */
/**
 * Dropdown
 */
.dropdown-wrapper {
  display: inline-block;
  position: relative;
}
.dropdown-wrapper .dropdown-trigger {
  cursor: pointer;
}
.dropdown-wrapper .dropdown {
  position: absolute;
  z-index: var(--dropdown--z-index, 2000);
  word-wrap: break-word;
  width: max-content;
  top: 0;
  left: 0;
  text-align: left;
  list-style: none;
  line-height: var(--dropdown--line-height, var(--line-height));
  font-size: var(--dropdown--font-size, var(--font-size));
  background-clip: padding-box;
  display: inline-block;
  white-space: normal;
  min-width: var(--dropdown--min-width, 240px);
  max-width: var(--dropdown--max-width, 90vw);
  color: var(--dropdown--color);
  box-shadow: var(--dropdown--box-shadow, var(--dropdown--box-shadow-x-offset, var(--box-shadow-offset-x)) var(--dropdown--box-shadow-y-offset, var(--box-shadow-offset-y)) var(--dropdown--box-shadow-blur-radius, var(--box-shadow-blur-radius)) var(--dropdown--box-shadow-spread-radius, var(--box-shadow-spread-radius)) var(--dropdown--box-shadow-color, var(--box-shadow-color)));
}
.dropdown-wrapper .dropdown:focus:hover {
  outline-width: 0;
}
.dropdown-wrapper .dropdown[data-popup-placement^=top] {
  transform-origin: center bottom;
}
.dropdown-wrapper .dropdown[data-popup-placement^=bottom] {
  transform-origin: center top;
}
.dropdown-wrapper .dropdown[data-popup-placement^=right] {
  transform-origin: left center;
}
.dropdown-wrapper .dropdown[data-popup-placement^=left] {
  transform-origin: right center;
}
.dropdown-wrapper .dropdown > .arrow {
  position: absolute;
}
.dropdown-wrapper .dropdown > .arrow,
.dropdown-wrapper .dropdown > .arrow::after {
  display: block;
  width: 0;
  height: 0;
  border-color: transparent;
  border-style: solid;
  position: absolute;
}
.dropdown-wrapper .dropdown > .arrow::after {
  content: "";
}
.dropdown-wrapper .dropdown[data-popup-placement^=top] > .arrow {
  border-bottom-width: 0;
}
.dropdown-wrapper .dropdown[data-popup-placement^=top] > .arrow::after {
  border-bottom-width: 0;
}
.dropdown-wrapper .dropdown[data-popup-placement^=bottom] > .arrow {
  border-top-width: 0;
}
.dropdown-wrapper .dropdown[data-popup-placement^=bottom] > .arrow::after {
  border-top-width: 0;
}
.dropdown-wrapper .dropdown[data-popup-placement^=right] > .arrow {
  border-left-width: 0;
}
.dropdown-wrapper .dropdown[data-popup-placement^=right] > .arrow::after {
  border-left-width: 0;
}
.dropdown-wrapper .dropdown[data-popup-placement^=left] > .arrow {
  border-right-width: 0;
}
.dropdown-wrapper .dropdown[data-popup-placement^=left] > .arrow::after {
  border-right-width: 0;
}
.dropdown-wrapper .dropdown > .arrow {
  width: var(--dropdown--arrow--size, 6px);
  height: var(--dropdown--arrow--size, 6px);
}
.dropdown-wrapper .dropdown > .arrow, .dropdown-wrapper .dropdown > .arrow::after {
  border-width: var(--dropdown--arrow--size, 6px);
}
.dropdown-wrapper .dropdown[data-popup-placement^=top] > .arrow::after, .dropdown-wrapper .dropdown[data-popup-placement^=bottom] > .arrow::after {
  margin-left: calc(var(--dropdown--arrow--size, 6px) * -1);
}
.dropdown-wrapper .dropdown[data-popup-placement^=left] > .arrow::after, .dropdown-wrapper .dropdown[data-popup-placement^=right] > .arrow::after {
  margin-top: calc(var(--dropdown--arrow--size, 6px) * -1);
}
.dropdown-wrapper .dropdown[data-popup-placement^=top] > .arrow {
  bottom: calc(var(--dropdown--arrow--size, 6px) * -1);
}
.dropdown-wrapper .dropdown[data-popup-placement^=top] > .arrow::after {
  bottom: 1px;
}
.dropdown-wrapper .dropdown[data-popup-placement^=bottom] > .arrow {
  top: calc(var(--dropdown--arrow--size, 6px) * -1);
}
.dropdown-wrapper .dropdown[data-popup-placement^=bottom] > .arrow::after {
  top: 1px;
}
.dropdown-wrapper .dropdown[data-popup-placement^=left] > .arrow {
  right: calc(var(--dropdown--arrow--size, 6px) * -1);
}
.dropdown-wrapper .dropdown[data-popup-placement^=left] > .arrow::after {
  right: 1px;
}
.dropdown-wrapper .dropdown[data-popup-placement^=right] > .arrow {
  left: calc(var(--dropdown--arrow--size, 6px) * -1);
}
.dropdown-wrapper .dropdown[data-popup-placement^=right] > .arrow::after {
  left: 1px;
}
.dropdown-wrapper .dropdown > .dropdown-header {
  border-style: var(--dropdown--header--border-style, var(--dropdown--header--border-top-style, var(--dropdown--border-top-style, var(--border-top-style))) var(--dropdown--header--border-right-style, var(--dropdown--border-right-style, var(--border-right-style))) var(--dropdown--header--border-bottom-style, var(--dropdown--border-bottom-style, var(--border-bottom-style))) var(--dropdown--header--border-left-style, var(--dropdown--border-left-style, var(--border-left-style))));
  border-width: var(--dropdown--header--border-width, var(--dropdown--header--border-top-width, var(--dropdown--border-top-width, var(--border-top-width))) var(--dropdown--header--border-right-width, var(--dropdown--border-right-width, var(--border-right-width))) var(--dropdown--header--border-bottom-width, var(--dropdown--border-bottom-width, 0)) var(--dropdown--header--border-left-width, var(--dropdown--border-left-width, var(--border-left-width))));
  border-color: var(--dropdown--header--border-color, var(--dropdown--header--border-top-color, var(--dropdown--border-top-color, var(--border-top-color))) var(--dropdown--header--border-right-color, var(--dropdown--border-right-color, var(--border-right-color))) var(--dropdown--header--border-bottom-color, var(--dropdown--border-bottom-color, var(--border-bottom-color))) var(--dropdown--header--border-left-color, var(--dropdown--border-left-color, var(--border-left-color))));
  background-color: var(--dropdown--header--background, var(--dropdown--background));
  padding: var(--dropdown--header--padding, var(--dropdown--header--padding-top, var(--dropdown--padding-top, var(--padding-top))) var(--dropdown--header--padding-right, var(--dropdown--padding-right, var(--padding-right))) var(--dropdown--header--padding-bottom, var(--dropdown--padding-bottom, var(--padding-bottom))) var(--dropdown--header--padding-left, var(--dropdown--padding-left, var(--padding-left))));
  transition-property: var(--dropdown--header--transition-property, var(--dropdown--transition-property, border-color));
  transition-duration: var(--dropdown--header--transition-duration, var(--dropdown--transition-duration, var(--transition-duration)));
  transition-timing-function: var(--dropdown--header--transition-timing-function, var(--dropdown--transition-timing-function, var(--transition-timing-function)));
}
.dropdown-wrapper .dropdown > .dropdown-body {
  display: flex;
  flex-direction: column;
  border-style: var(--dropdown--body--border-style, var(--dropdown--body--border-top-style, var(--dropdown--border-top-style, var(--border-top-style))) var(--dropdown--body--border-right-style, var(--dropdown--border-right-style, var(--border-right-style))) var(--dropdown--body--border-bottom-style, var(--dropdown--border-bottom-style, var(--border-bottom-style))) var(--dropdown--body--border-left-style, var(--dropdown--border-left-style, var(--border-left-style))));
  border-width: var(--dropdown--body--border-width, var(--dropdown--body--border-top-width, var(--dropdown--border-top-width, var(--border-top-width))) var(--dropdown--body--border-right-width, var(--dropdown--border-right-width, var(--border-right-width))) var(--dropdown--body--border-bottom-width, var(--dropdown--border-bottom-width, var(--border-bottom-width))) var(--dropdown--body--border-left-width, var(--dropdown--border-left-width, var(--border-left-width))));
  border-color: var(--dropdown--body--border-color, var(--dropdown--body--border-top-color, var(--dropdown--border-top-color, var(--border-top-color))) var(--dropdown--body--border-right-color, var(--dropdown--border-right-color, var(--border-right-color))) var(--dropdown--body--border-bottom-color, var(--dropdown--border-bottom-color, var(--border-bottom-color))) var(--dropdown--body--border-left-color, var(--dropdown--border-left-color, var(--border-left-color))));
  background-color: var(--dropdown--body--background, var(--dropdown--background));
  padding: var(--dropdown--body--padding, var(--dropdown--body--padding-top, var(--dropdown--padding-top, var(--padding-top))) var(--dropdown--body--padding-right, var(--dropdown--padding-right, var(--padding-right))) var(--dropdown--body--padding-bottom, var(--dropdown--padding-bottom, var(--padding-bottom))) var(--dropdown--body--padding-left, var(--dropdown--padding-left, var(--padding-left))));
  transition-property: var(--dropdown--body--transition-property, var(--dropdown--transition-property, border-color));
  transition-duration: var(--dropdown--body--transition-duration, var(--dropdown--transition-duration, var(--transition-duration)));
  transition-timing-function: var(--dropdown--body--transition-timing-function, var(--dropdown--transition-timing-function, var(--transition-timing-function)));
}
.dropdown-wrapper .dropdown > .dropdown-body .dropdown-wrapper {
  width: 100%;
}
.dropdown-wrapper .dropdown > .dropdown-footer {
  border-style: var(--dropdown--footer--border-style, var(--dropdown--footer--border-top-style, var(--dropdown--border-top-style, var(--border-top-style))) var(--dropdown--footer--border-right-style, var(--dropdown--border-right-style, var(--border-right-style))) var(--dropdown--footer--border-bottom-style, var(--dropdown--border-bottom-style, var(--border-bottom-style))) var(--dropdown--footer--border-left-style, var(--dropdown--border-left-style, var(--border-left-style))));
  border-width: var(--dropdown--footer--border-width, var(--dropdown--footer--border-top-width, var(--dropdown--border-top-width, 0)) var(--dropdown--footer--border-right-width, var(--dropdown--border-right-width, var(--border-right-width))) var(--dropdown--footer--border-bottom-width, var(--dropdown--border-bottom-width, var(--border-bottom-width))) var(--dropdown--footer--border-left-width, var(--dropdown--border-left-width, var(--border-left-width))));
  border-color: var(--dropdown--footer--border-color, var(--dropdown--footer--border-top-color, var(--dropdown--border-top-color, var(--border-top-color))) var(--dropdown--footer--border-right-color, var(--dropdown--border-right-color, var(--border-right-color))) var(--dropdown--footer--border-bottom-color, var(--dropdown--border-bottom-color, var(--border-bottom-color))) var(--dropdown--footer--border-left-color, var(--dropdown--border-left-color, var(--border-left-color))));
  background-color: var(--dropdown--footer--background, var(--dropdown--background));
  padding: var(--dropdown--footer--padding, var(--dropdown--footer--padding-top, var(--dropdown--padding-top, var(--padding-top))) var(--dropdown--footer--padding-right, var(--dropdown--padding-right, var(--padding-right))) var(--dropdown--footer--padding-bottom, var(--dropdown--padding-bottom, var(--padding-bottom))) var(--dropdown--footer--padding-left, var(--dropdown--padding-left, var(--padding-left))));
  transition-property: var(--dropdown--footer--transition-property, var(--dropdown--transition-property, border-color));
  transition-duration: var(--dropdown--footer--transition-duration, var(--dropdown--transition-duration, var(--transition-duration)));
  transition-timing-function: var(--dropdown--footer--transition-timing-function, var(--dropdown--transition-timing-function, var(--transition-timing-function)));
}
.dropdown-wrapper .dropdown > div:first-of-type {
  border-top-left-radius: var(--dropdown--border-top-left-radius, var(--border-top-left-radius));
  border-top-right-radius: var(--dropdown--border-top-right-radius, var(--border-top-right-radius));
}
.dropdown-wrapper .dropdown > div:last-of-type {
  border-bottom-left-radius: var(--dropdown--border-bottom-left-radius, var(--border-bottom-left-radius));
  border-bottom-right-radius: var(--dropdown--border-bottom-right-radius, var(--border-bottom-right-radius));
}
.dropdown-wrapper .dropdown[data-popup-placement^=top] > .arrow {
  border-top-color: var(--dropdown--border-bottom-color, var(--border-bottom-color));
}
.dropdown-wrapper .dropdown[data-popup-placement^=top] > .arrow::after {
  border-top-color: var(--dropdown--background);
}
.dropdown-wrapper .dropdown[data-popup-placement^=right] > .arrow {
  border-right-color: var(--dropdown--border-left-color, var(--border-left-color));
}
.dropdown-wrapper .dropdown[data-popup-placement^=right] > .arrow::after {
  border-right-color: var(--dropdown--background);
}
.dropdown-wrapper .dropdown[data-popup-placement^=bottom] > .arrow {
  border-bottom-color: var(--dropdown--border-top-color, var(--border-top-color));
}
.dropdown-wrapper .dropdown[data-popup-placement^=bottom] > .arrow::after {
  border-bottom-color: var(--dropdown--background);
}
.dropdown-wrapper .dropdown[data-popup-placement^=left] > .arrow {
  border-left-color: var(--dropdown--border-right-color, var(--border-right-color));
}
.dropdown-wrapper .dropdown[data-popup-placement^=left] > .arrow::after {
  border-left-color: var(--dropdown--background);
}

/**
 * Color variants
 */
.dropdown.-light {
  --dropdown--background: var(--dropdown--light--background, var(--color-white));
  --dropdown--color: var(--dropdown--light--color, var(--contrast-text-color-light));
  --dropdown--border-top-color: var(
      --dropdown--light--border-top-color,
      var(--color-light-shade-50)
  );
  --dropdown--border-right-color: var(
      --dropdown--light--border-right-color,
      var(--color-light-shade-50)
  );
  --dropdown--border-bottom-color: var(
      --dropdown--light--border-bottom-color,
      var(--color-light-shade-50)
  );
  --dropdown--border-left-color: var(
      --dropdown--light--border-left-color,
      var(--color-light-shade-50)
  );
  --dropdown--item--hover--background: var(
      --dropdown--light--item--hover--background,
      var(--color-gray-50)
  );
  --dropdown--item--hover--color: var(
      --dropdown--light--item--hover--color,
      var(--dropdown--color)
  );
  --dropdown--item--active--background: var(
      --dropdown--light--item--active--background,
      var(--color-gray-50)
  );
  --dropdown--item--active--color: var(
      --dropdown--light--item--active--color,
      var(--dropdown--color)
  );
  --dropdown--item--disabled--background: var(
      --dropdown--light--item--disabled--background,
      transparent
  );
  --dropdown--item--disabled--color: var(
      --dropdown--light--item--disabled--color,
      var(--text-color-weak)
  );
  --dropdown--header--background: var(
      --dropdown--light--header--background,
      var(--color-gray-50)
  );
  --dropdown--footer--background: var(
      --dropdown--light--footer--background,
      var(--color-gray-50)
  );
}
.dropdown.-dark {
  --dropdown--background: var(--dropdown--dark--background, var(--color-dark));
  --dropdown--color: var(--dropdown--dark--color, var(--contrast-text-color-dark));
  --dropdown--border-top-color: var(
      --dropdown--dark--border-top-color,
      var(--color-dark-tint-50)
  );
  --dropdown--border-right-color: var(
      --dropdown--dark--border-right-color,
      var(--color-dark-tint-50)
  );
  --dropdown--border-bottom-color: var(
      --dropdown--dark--border-bottom-color,
      var(--color-dark-tint-50)
  );
  --dropdown--border-left-color: var(
      --dropdown--dark--border-left-color,
      var(--color-dark-tint-50)
  );
  --dropdown--item--hover--background: var(
      --dropdown--dark--item--hover--background,
      var(--color-dark-tint-50)
  );
  --dropdown--item--hover--color: var(
      --dropdown--dark--item--hover--color,
      var(--dropdown--color)
  );
  --dropdown--item--active--background: var(
      --dropdown--dark--item--active--background,
      var(--color-dark-tint-50)
  );
  --dropdown--item--active--color: var(
      --dropdown--dark--item--active--color,
      var(--dropdown--color)
  );
  --dropdown--item--disabled--background: var(
      --dropdown--dark--item--disabled--background,
      transparent
  );
  --dropdown--item--disabled--color: var(
      --dropdown--dark--item--disabled--color,
      var(--text-color-weak)
  );
  --dropdown--header--background: var(
      --dropdown--dark--header--background,
      var(--color-dark-tint-50)
  );
  --dropdown--footer--background: var(
      --dropdown--dark--footer--background,
      var(--color-dark-tint-50)
  );
}

/**
 * Size variants
 */
.dropdown.-sm {
  --dropdown--border-top-left-radius: var(
      --dropdown--sm--border-top-left-radius,
      calc(var(--border-top-left-radius) * var(--size-multiplier-sm))
  );
  --dropdown--border-top-right-radius: var(
      --dropdown--sm--border-top-right-radius,
      calc(var(--border-top-right-radius) * var(--size-multiplier-sm))
  );
  --dropdown--border-bottom-right-radius: var(
      --dropdown--sm--border-bottom-right-radius,
      calc(var(--border-bottom-right-radius) * var(--size-multiplier-sm))
  );
  --dropdown--border-bottom-left-radius: var(
      --dropdown--sm--border-bottom-left-radius,
      calc(var(--border-bottom-left-radius) * var(--size-multiplier-sm))
  );
  --dropdown--font-size: var(
      --dropdown--sm--font-size,
      calc(var(--font-size) * var(--size-multiplier-sm))
  );
  --dropdown--padding-top: var(
      --dropdown--sm--padding-top,
      calc(var(--padding-top) * var(--size-multiplier-sm))
  );
  --dropdown--padding-right: var(
      --dropdown--sm--padding-right,
      calc(var(--padding-right) * var(--size-multiplier-sm))
  );
  --dropdown--padding-bottom: var(
      --dropdown--sm--padding-bottom,
      calc(var(--padding-bottom) * var(--size-multiplier-sm))
  );
  --dropdown--padding-left: var(
      --dropdown--sm--padding-left,
      calc(var(--padding-left) * var(--size-multiplier-sm))
  );
}
.dropdown.-md {
  --dropdown--border-top-left-radius: var(
      --dropdown--md--border-top-left-radius,
      calc(var(--border-top-left-radius) * var(--size-multiplier-md))
  );
  --dropdown--border-top-right-radius: var(
      --dropdown--md--border-top-right-radius,
      calc(var(--border-top-right-radius) * var(--size-multiplier-md))
  );
  --dropdown--border-bottom-right-radius: var(
      --dropdown--md--border-bottom-right-radius,
      calc(var(--border-bottom-right-radius) * var(--size-multiplier-md))
  );
  --dropdown--border-bottom-left-radius: var(
      --dropdown--md--border-bottom-left-radius,
      calc(var(--border-bottom-left-radius) * var(--size-multiplier-md))
  );
  --dropdown--font-size: var(
      --dropdown--md--font-size,
      calc(var(--font-size) * var(--size-multiplier-md))
  );
  --dropdown--padding-top: var(
      --dropdown--md--padding-top,
      calc(var(--padding-top) * var(--size-multiplier-md))
  );
  --dropdown--padding-right: var(
      --dropdown--md--padding-right,
      calc(var(--padding-right) * var(--size-multiplier-md))
  );
  --dropdown--padding-bottom: var(
      --dropdown--md--padding-bottom,
      calc(var(--padding-bottom) * var(--size-multiplier-md))
  );
  --dropdown--padding-left: var(
      --dropdown--md--padding-left,
      calc(var(--padding-left) * var(--size-multiplier-md))
  );
}
.dropdown.-lg {
  --dropdown--border-top-left-radius: var(
      --dropdown--lg--border-top-left-radius,
      calc(var(--border-top-left-radius) * var(--size-multiplier-lg))
  );
  --dropdown--border-top-right-radius: var(
      --dropdown--lg--border-top-right-radius,
      calc(var(--border-top-right-radius) * var(--size-multiplier-lg))
  );
  --dropdown--border-bottom-right-radius: var(
      --dropdown--lg--border-bottom-right-radius,
      calc(var(--border-bottom-right-radius) * var(--size-multiplier-lg))
  );
  --dropdown--border-bottom-left-radius: var(
      --dropdown--lg--border-bottom-left-radius,
      calc(var(--border-bottom-left-radius) * var(--size-multiplier-lg))
  );
  --dropdown--font-size: var(
      --dropdown--lg--font-size,
      calc(var(--font-size) * var(--size-multiplier-lg))
  );
  --dropdown--padding-top: var(
      --dropdown--lg--padding-top,
      calc(var(--padding-top) * var(--size-multiplier-lg))
  );
  --dropdown--padding-right: var(
      --dropdown--lg--padding-right,
      calc(var(--padding-right) * var(--size-multiplier-lg))
  );
  --dropdown--padding-bottom: var(
      --dropdown--lg--padding-bottom,
      calc(var(--padding-bottom) * var(--size-multiplier-lg))
  );
  --dropdown--padding-left: var(
      --dropdown--lg--padding-left,
      calc(var(--padding-left) * var(--size-multiplier-lg))
  );
}

/**
 * Dropdown Item
 */
.dropdown .dropdown-item {
  display: flex;
  margin: var(--dropdown--item--margin, var(--dropdown--item--margin-top, 0) var(--dropdown--item--margin-right, var(--dropdown--body--padding-right, calc(var(--dropdown--padding-right) * -1))) var(--dropdown--item--margin-bottom, 0) var(--dropdown--item--margin-left, var(--dropdown--body--padding-left, calc(var(--dropdown--padding-left) * -1))));
  text-align: inherit;
  white-space: nowrap;
  cursor: pointer;
  transition-property: var(--dropdown--item--transition-property, background-color, border-color, color);
  transition-timing-function: var(--dropdown--item--transition-timing-function, var(--transition-timing-function));
  transition-duration: var(--dropdown--item--transition-duration, var(--transition-duration));
  color: var(--dropdown--item--color, var(--dropdown--color));
  border-style: var(--dropdown--item--border-style, var(--dropdown--border-style, var(--dropdown--item--border-top-style, var(--dropdown--border-top-style, var(--border-top-style))) var(--dropdown--item--border-right-style, var(--dropdown--border-right-style, var(--border-right-style))) var(--dropdown--item--border-bottom-style, var(--dropdown--border-bottom-style, var(--border-bottom-style))) var(--dropdown--item--border-left-style, var(--dropdown--border-left-style, var(--border-left-style)))));
  border-width: var(--dropdown--item--border-width, var(--dropdown--item--border-top-width, 0) var(--dropdown--item--border-right-width, 0) var(--dropdown--item--border-bottom-width, 0) var(--dropdown--item--border-left-width, 0));
  border-color: var(--dropdown--item--border-color, var(--dropdown--border-color, var(--dropdown--item--border-top-color, var(--dropdown--border-top-color, var(--border-top-color))) var(--dropdown--item--border-right-color, var(--dropdown--border-right-color, var(--border-right-color))) var(--dropdown--item--border-bottom-color, var(--dropdown--border-bottom-color, var(--border-bottom-color))) var(--dropdown--item--border-left-color, var(--dropdown--border-left-color, var(--border-left-color)))));
  padding: var(--dropdown--item--padding, var(--dropdown--padding, var(--dropdown--item--padding-top, calc(var(--dropdown--padding-top, var(--padding-top)) * 0.5)) var(--dropdown--item--padding-right, var(--dropdown--padding-right, var(--padding-right))) var(--dropdown--item--padding-bottom, calc(var(--dropdown--padding-bottom, var(--padding-bottom)) * 0.5)) var(--dropdown--item--padding-left, var(--dropdown--padding-left, var(--padding-left)))));
  background: var(--dropdown--item--background, var(--dropdown--background, transparent));
}
.dropdown .dropdown-item:not(.-disabled, .-plaintext):hover, .dropdown .dropdown-item:not(.-disabled, .-plaintext):focus {
  color: var(--dropdown--item--hover--color, var(--dropdown--item--color));
  background: var(--dropdown--item--hover--background, var(--dropdown--item--background));
}
.dropdown .dropdown-item.-disabled {
  color: var(--dropdown--item--disabled--color, var(--dropdown--item--color));
  background: var(--dropdown--item--disabled--background, var(--dropdown--item--background));
  pointer-events: none;
  cursor: default;
}
.dropdown .dropdown-item.-active {
  color: var(--dropdown--item--active--color, var(--dropdown--item--color));
  background: var(--dropdown--item--active--background, var(--dropdown--item--background));
  font-weight: var(--dropdown--item--active--font-weight, var(--font-weight-semibold));
}
.dropdown .dropdown-item:hover, .dropdown .dropdown-item:focus {
  outline: 0;
  text-decoration: none;
}
.dropdown .dropdown-item.-plaintext {
  cursor: default;
}

/*
 * Dropdown Divider
 */
.dropdown-divider {
  display: block;
  height: 1px;
  clear: both;
  margin: var(--dropdown--divider--margin, var(--dropdown--margin--margin-top, calc(var(--margin-top) * 0.5)) var(--dropdown--margin--margin-right, var(--dropdown--body--padding-right, calc(var(--dropdown--padding-right) * -1))) var(--dropdown--margin--margin-bottom, calc(var(--margin-top) * 0.5)) var(--dropdown--margin--margin-left, var(--dropdown--body--padding-left, calc(var(--dropdown--padding-left) * -1))));
  background-color: var(--dropdown--divider--background, var(--dropdown--border-top-color, var(--border-top-color)));
}

/**
 * Expand Transition
 */
.expand-enter-active,
.expand-leave-active {
  transition-property: height;
  transition-duration: var(--expand-transition--transition-duration, var(--transition-duration));
  transition-timing-function: var(--expand-transition--transition-timing-function, var(--transition-timing-function));
  overflow: hidden;
}

.expand-enter,
.expand-leave-to {
  height: 0;
}

.expand-enter-from,
.expand-enter-active,
.expand-leave-active,
.expand-leave-to {
  will-change: height;
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
}

/**
 * Form
 */
.form {
  position: relative;
}

/**
 * Form Error
 */
.form-error {
  position: relative;
  margin: var(--form-error--margin, var(--form-error--margin-top, var(--margin-top-1-4)) var(--form-error--margin-right, 0) var(--form-error--margin-bottom, 0) var(--form-error--margin-left, 0));
  padding: 0;
  list-style: none;
  color: var(--form-error--color, var(--color-danger));
  font-size: var(--form-error-font-size, var(--font-size-sm));
}
.form-error li {
  margin: 0;
}

/**
 * Input Group
 */
.form-group {
  display: block;
  vertical-align: middle;
  position: relative;
}
.form-group + .form-group {
  margin-top: var(--form-group--margin-top, var(--margin-top));
}
.form-group.-inline {
  display: flex;
}
.form-group.-inline > .form-input-group {
  flex-basis: 100%;
}
.form-group.-inline > .form-label {
  display: flex;
  flex: 0 0 auto;
  align-self: center;
  margin-bottom: 0;
}
.form-group.-inline > .form-label.-right {
  margin-right: 0;
}

/**
 * Form Label
 */
.form-label {
  position: relative;
  flex-basis: 100%;
  transition-property: var(--form-label--transition-property, color);
  transition-duration: var(--form-label--transition-duration, var(--transition-duration));
  transition-timing-function: var(--form-label--transition-timing-function, var(--transition-timing-function));
  font-size: var(--form-label--font-size, var(--font-size));
  margin: var(--form-label--margin, var(--form-label--margin-top, 0) var(--form-label--margin-right, 0) var(--form-label--margin-bottom, var(--margin-bottom-1-4)) var(--form-label--margin-left, 0));
}
.form-label.-right {
  margin-right: 0;
  order: 1;
}
.form-group.-required > .form-label::after {
  color: var(--form-label--required--color, var(--color-danger));
  content: " *";
}
.form-group.-error > .form-label {
  color: var(--form-label--error--color, var(--color-danger));
}
.form-group.-inline > .form-label {
  margin-right: var(--form-label--inline--margin-right, var(--margin-right));
}
.form-group.-inline > .form-label.-right {
  margin-left: var(--form-label--inline--margin-left, var(--margin-left));
}

/**
 * Size variants
 */
.form-label.-sm {
  --form-label--font-size: var(
      --form-label--sm--font-size,
      calc(var(--font-size) * var(--size-multiplier-sm))
  );
}
.form-label.-md {
  --form-label--font-size: var(
      --form-label--md--font-size,
      calc(var(--font-size) * var(--size-multiplier-md))
  );
}
.form-label.-lg {
  --form-label--font-size: var(
      --form-label--lg--font-size,
      calc(var(--font-size) * var(--size-multiplier-lg))
  );
}

/**
 * Hamburger menu
 */
.hamburger-menu {
  opacity: var(--hamburger-menu--opacity, 0.75);
  padding: var(--hamburger-menu--padding, var(--hamburger-menu--padding-top, 0) var(--hamburger-menu--padding-right, 0) var(--hamburger-menu--padding-bottom, 0) var(--hamburger-menu--padding-left, 0));
  width: var(--hamburger-menu--bar--width);
  height: calc(var(--hamburger-menu--bar--height) * 3 + var(--hamburger-menu--bar--spacing) * 2);
  display: inline-flex;
  position: relative;
  box-sizing: content-box;
  cursor: pointer;
  transition-property: var(--hamburger-menu--transition-property, background-color, color, border-color);
  transition-duration: var(--hamburger-menu--transition-duration, var(--transition-duration));
  transition-timing-function: var(--hamburger-menu--transition-timing-function, var(--transition-timing-function));
}
.hamburger-menu:hover {
  opacity: var(--hamburger-menu--hover--opacity, 1);
}
.hamburger-menu > .hamburger-menu-bars {
  display: block;
  top: 50%;
  margin-top: calc(var(--hamburger-menu--bar--height) / -2);
}
.hamburger-menu > .hamburger-menu-bars, .hamburger-menu > .hamburger-menu-bars::before, .hamburger-menu > .hamburger-menu-bars::after {
  width: var(--hamburger-menu--bar--width);
  height: var(--hamburger-menu--bar--height);
  border-radius: var(--hamburger-menu--bar--border-radius, var(--border-radius-sm));
  background: var(--hamburger-menu--background);
  position: absolute;
  transition-property: var(--hamburger-menu--bar--transition-property, background-color, transform);
  transition-duration: var(--hamburger-menu--bar--transition-duration, 175ms);
  transition-timing-function: var(--hamburger-menu--bar--transition-timing-function, var(--transition-timing-function));
}
.hamburger-menu > .hamburger-menu-bars::before, .hamburger-menu > .hamburger-menu-bars::after {
  content: "";
  display: block;
}
.hamburger-menu > .hamburger-menu-bars::before {
  top: calc(var(--hamburger-menu--bar--spacing) * -1 + var(--hamburger-menu--bar--height) * -1);
}
.hamburger-menu > .hamburger-menu-bars::after {
  bottom: calc(var(--hamburger-menu--bar--spacing) * -1 + var(--hamburger-menu--bar--height) * -1);
}
.hamburger-menu.-close > .hamburger-menu-bars {
  transition: transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19), background var(--hamburger-menu--bar--transition-duration, 175ms) var(--hamburger-menu--bar--transition-timing-function, var(--transition-timing-function));
}
.hamburger-menu.-close > .hamburger-menu-bars::before {
  transition: top 0.1s 0.25s ease-in, opacity 0.1s ease-in, background var(--hamburger-menu--bar--transition-duration, 175ms) var(--hamburger-menu--bar--transition-timing-function, var(--transition-timing-function));
}
.hamburger-menu.-close > .hamburger-menu-bars::after {
  transition: bottom 0.1s 0.25s ease-in, transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19), background var(--hamburger-menu--bar--transition-duration, 175ms) var(--hamburger-menu--bar--transition-timing-function, var(--transition-timing-function));
}
.hamburger-menu.-close.-active > .hamburger-menu-bars {
  transform: rotate(225deg);
  transition: transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.hamburger-menu.-close.-active > .hamburger-menu-bars::before {
  top: 0;
  opacity: 0;
  transition: top 0.1s ease-out, opacity 0.1s 0.12s ease-out;
}
.hamburger-menu.-close.-active > .hamburger-menu-bars::after {
  bottom: 0;
  transform: rotate(-90deg);
  transition: bottom 0.1s ease-out, transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.hamburger-menu.-arrow-left.-active > .hamburger-menu-bars::before {
  transform: translate3d(calc(var(--hamburger-menu--bar--width) * -0.2), 0, 0) rotate(-45deg) scale(0.7, 1);
}
.hamburger-menu.-arrow-left.-active > .hamburger-menu-bars::after {
  transform: translate3d(calc(var(--hamburger-menu--bar--width) * -0.2), 0, 0) rotate(45deg) scale(0.7, 1);
}
.hamburger-menu.-arrow-right.-active > .hamburger-menu-bars::before {
  transform: translate3d(calc(var(--hamburger-menu--bar--width) * 0.2), 0, 0) rotate(45deg) scale(0.7, 1);
}
.hamburger-menu.-arrow-right.-active > .hamburger-menu-bars::after {
  transform: translate3d(calc(var(--hamburger-menu--bar--width) * 0.2), 0, 0) rotate(-45deg) scale(0.7, 1);
}
.hamburger-menu.-arrow-up.-active > .hamburger-menu-bars {
  transform: rotate(-90deg);
}
.hamburger-menu.-arrow-up.-active > .hamburger-menu-bars::before {
  transform: translate3d(calc(var(--hamburger-menu--bar--width) * 0.2), 0, 0) rotate(45deg) scale(0.7, 1);
}
.hamburger-menu.-arrow-up.-active > .hamburger-menu-bars::after {
  transform: translate3d(calc(var(--hamburger-menu--bar--width) * 0.2), 0, 0) rotate(-45deg) scale(0.7, 1);
}
.hamburger-menu.-arrow-down.-active > .hamburger-menu-bars {
  transform: rotate(90deg);
}
.hamburger-menu.-arrow-down.-active > .hamburger-menu-bars::before {
  transform: translate3d(calc(var(--hamburger-menu--bar--width) * 0.2), 0, 0) rotate(45deg) scale(0.7, 1);
}
.hamburger-menu.-arrow-down.-active > .hamburger-menu-bars::after {
  transform: translate3d(calc(var(--hamburger-menu--bar--width) * 0.2), 0, 0) rotate(-45deg) scale(0.7, 1);
}
.hamburger-menu.-minus.-active > .hamburger-menu-bars::before {
  transform: translate3d(0, calc(var(--hamburger-menu--bar--spacing) + var(--hamburger-menu--bar--height)), 0);
}
.hamburger-menu.-minus.-active > .hamburger-menu-bars::after {
  transform: translate3d(0, calc(var(--hamburger-menu--bar--spacing) * -1 + var(--hamburger-menu--bar--height) * -1), 0);
}
.hamburger-menu.-plus.-active > .hamburger-menu-bars::before {
  transform: translate3d(0, calc(var(--hamburger-menu--bar--spacing) + var(--hamburger-menu--bar--height)), 0);
}
.hamburger-menu.-plus.-active > .hamburger-menu-bars::after {
  transform: translate3d(0, calc(var(--hamburger-menu--bar--spacing) * -1 + var(--hamburger-menu--bar--height) * -1), 0) rotate(90deg);
}

/**
 * Color variants
 */
.hamburger-menu.-light {
  --hamburger-menu--background: var(--hamburger-menu--light--background, var(--color-dark));
}
.hamburger-menu.-dark {
  --hamburger-menu--background: var(--hamburger-menu--dark--background, var(--color-light));
}

/**
 * Size variants
 */
.hamburger-menu.-sm {
  --hamburger-menu--bar--width: var(
      --hamburger-menu--sm--bar--width,
      calc(30px * var(--size-multiplier-sm))
  );
  --hamburger-menu--bar--height: var(--hamburger-menu--sm--bar--height, 2px);
  --hamburger-menu--bar--spacing: var(--hamburger-menu--sm--bar--spacing, 4px);
  --hamburger-menu--bar--border-radius: var(--hamburger-menu--sm--bar--border-radius, 1px);
}
.hamburger-menu.-md {
  --hamburger-menu--bar--width: var(
      --hamburger-menu--md--bar--width,
      calc(30px * var(--size-multiplier-md))
  );
  --hamburger-menu--bar--height: var(--hamburger-menu--md--bar--height, 3px);
  --hamburger-menu--bar--spacing: var(--hamburger-menu--md--bar--spacing, 5px);
  --hamburger-menu--bar--border-radius: var(--hamburger-menu--md--bar--border-radius, 2px);
}
.hamburger-menu.-lg {
  --hamburger-menu--bar--width: var(
      --hamburger-menu--lg--bar--width,
      calc(30px * var(--size-multiplier-lg))
  );
  --hamburger-menu--bar--height: var(--hamburger-menu--lg--bar--height, 4px);
  --hamburger-menu--bar--spacing: var(--hamburger-menu--lg--bar--spacing, 6px);
  --hamburger-menu--bar--border-radius: var(--hamburger-menu--lg--bar--border-radius, 3px);
}

/**
 * Header
 */
.header {
  display: flex;
  box-sizing: border-box;
  width: 100%;
  transition-property: var(--header--transition-property, background-color);
  transition-duration: var(--header--transition-duration, var(--transition-duration));
  transition-timing-function: var(--header--transition-timing-function, var(--transition-timing-function));
  color: var(--header--color);
  background: var(--header--background);
  padding: var(--header--padding, var(--header--padding-top, 10rem) var(--header--padding-right, 0) var(--header--padding-bottom, 10rem) var(--header--padding-left, 0));
  /* stylelint-disable selector-list-comma-newline-after */
  /* stylelint-enable */
}
.header > .container,
.header h1,
.header h2,
.header h3,
.header h4,
.header h5,
.header h6,
.header .h1,
.header .h2,
.header .h3,
.header .h4,
.header .h5,
.header .h6 {
  margin-top: 0;
}
.header.-cover {
  background-repeat: no-repeat;
  background-position: center center;
  background-attachment: unset;
  background-size: cover;
}
.header.-fullscreen {
  padding: 0;
  align-items: center;
  width: 100vw;
  height: 100vh;
  max-width: 100%;
  max-height: 100%;
}

/**
 * Color variants
 */
.header.-primary {
  --header--background: var(--header--primary--background, var(--color-primary));
  --header--color: var(--header--primary--color, var(--contrast-text-color-primary));
}
.header.-light {
  --header--background: var(--header--light--background, var(--color-light));
  --header--color: var(--header--light--color, var(--contrast-text-color-light));
}
.header.-dark {
  --header--background: var(--header--dark--background, var(--color-dark));
  --header--color: var(--header--dark--color, var(--contrast-text-color-dark));
}

/**
 * Size variants
 */
.header.-sm {
  --header--padding-top: var(
      --header--sm--padding-top,
      calc(10rem * var(--size-multiplier-xs))
  );
  --header--padding-right: var(--header--sm--padding-right, 0);
  --header--padding-bottom: var(
      --header--sm--padding-bottom,
      calc(10rem * var(--size-multiplier-xs))
  );
  --header--padding-left: var(--header--sm--padding-left, 0);
}
.header.-md {
  --header--padding-top: var(
      --header--md--padding-top,
      calc(10rem * var(--size-multiplier-md))
  );
  --header--padding-right: var(--header--md--padding-right, 0);
  --header--padding-bottom: var(
      --header--md--padding-bottom,
      calc(10rem * var(--size-multiplier-md))
  );
  --header--padding-left: var(--header--md--padding-left, 0);
}
.header.-lg {
  --header--padding-top: var(
      --header--lg--padding-top,
      calc(10rem * var(--size-multiplier-xl))
  );
  --header--padding-right: var(--header--lg--padding-right, 0);
  --header--padding-bottom: var(
      --header--lg--padding-bottom,
      calc(10rem * var(--size-multiplier-xl))
  );
  --header--padding-left: var(--header--lg--padding-left, 0);
}

/**
 * Icon
 */
.inkline-icon {
  height: var(--icon--size);
}

/**
 * Size variants
 */
.inkline-icon.-xs {
  --icon--size: var(--icon--xs--size, calc(var(--font-size) * var(--size-multiplier-xs)));
}
.inkline-icon.-sm {
  --icon--size: var(--icon--sm--size, calc(var(--font-size) * var(--size-multiplier-sm)));
}
.inkline-icon.-md {
  --icon--size: var(--icon--md--size, calc(var(--font-size) * var(--size-multiplier-md)));
}
.inkline-icon.-lg {
  --icon--size: var(--icon--lg--size, calc(var(--font-size) * var(--size-multiplier-lg)));
}
.inkline-icon.-xl {
  --icon--size: var(--icon--xl--size, calc(var(--font-size) * var(--size-multiplier-xl)));
}
.inkline-icon.-xxl {
  --icon--size: var(--icon--2xl--size, calc(var(--font-size) * var(--size-multiplier-2xl)));
}

.input-wrapper {
  display: block;
  vertical-align: middle;
  position: relative;
  flex-grow: 1;
  flex-shrink: 1;
}
.input-wrapper .input {
  position: relative;
  display: flex;
  flex: 1 0 auto;
  align-items: center;
  flex-direction: row;
  background-clip: padding-box;
  border-width: var(--input--border-width, var(--input--border-top-width, var(--border-top-width)) var(--input--border-right-width, var(--border-right-width)) var(--input--border-bottom-width, var(--border-bottom-width)) var(--input--border-left-width, var(--border-left-width)));
  border-style: var(--input--border-style, var(--input--border-top-style, var(--border-top-style)) var(--input--border-right-style, var(--border-right-style)) var(--input--border-bottom-style, var(--border-bottom-style)) var(--input--border-left-style, var(--border-left-style)));
  border-color: var(--input--border-color, var(--input--border-top-color, var(--border-top-color)) var(--input--border-right-color, var(--border-right-color)) var(--input--border-bottom-color, var(--border-bottom-color)) var(--input--border-left-color, var(--border-left-color)));
  border-radius: var(--input--border-radius, var(--input--border-top-left-radius, var(--border-top-left-radius)) var(--input--border-top-right-radius, var(--border-top-right-radius)) var(--input--border-bottom-right-radius, var(--border-bottom-right-radius)) var(--input--border-bottom-left-radius, var(--border-bottom-left-radius)));
  box-shadow: var(--input--box-shadow, var(--input--box-shadow-x-offset, var(--box-shadow-offset-x)) var(--input--box-shadow-y-offset, var(--box-shadow-offset-y)) var(--input--box-shadow-blur-radius, var(--box-shadow-blur-radius)) var(--input--box-shadow-spread-radius, var(--box-shadow-spread-radius)) var(--input--box-shadow-color, var(--box-shadow-color)));
  transition-property: var(--input--transition-property, background-color, color, border-color, box-shadow);
  transition-duration: var(--input--transition-duration, var(--transition-duration));
  transition-timing-function: var(--input--transition-timing-function, var(--transition-timing-function));
  color: var(--input--color);
  background-color: var(--input--background);
  font-size: var(--input--font-size, var(--font-size));
}
.input-wrapper .input:hover {
  border-color: var(--input--hover--border-color);
}
.input-wrapper .input:focus-within {
  outline: 0;
  box-shadow: var(--input--box-shadow, var(--input--box-shadow-x-offset, var(--box-shadow-offset-x)) var(--input--box-shadow-y-offset, var(--box-shadow-offset-y)) var(--input--box-shadow-blur-radius, var(--box-shadow-blur-radius)) var(--input--box-shadow-spread-radius, var(--box-shadow-spread-radius)) var(--input--box-shadow-color, var(--box-shadow-color)));
  border-color: var(--input--focus--border-color);
}
.input-wrapper .input > input,
.input-wrapper .input > select,
.input-wrapper .input > textarea {
  position: relative;
  flex: 1 0 auto;
  width: 1%;
  background: transparent;
  border: 0;
  margin: 0;
  outline: 0;
  line-height: var(--input--line-height, var(--line-height));
  color: var(--input--color);
  padding: var(--input--padding, var(--input--padding-top, var(--padding-top)) var(--input--padding-right, var(--padding-right)) var(--input--padding-bottom, var(--padding-bottom)) var(--input--padding-left, var(--padding-left)));
  /**
   * Select
   */
}
.input-wrapper .input > input::-ms-expand,
.input-wrapper .input > select::-ms-expand,
.input-wrapper .input > textarea::-ms-expand {
  background-color: transparent;
  border: 0;
}
.input-wrapper .input > input::placeholder,
.input-wrapper .input > select::placeholder,
.input-wrapper .input > textarea::placeholder {
  opacity: 1;
  color: var(--input--placeholder--color);
}
.input-wrapper .input > input:disabled, .input-wrapper .input > input[readonly],
.input-wrapper .input > select:disabled,
.input-wrapper .input > select[readonly],
.input-wrapper .input > textarea:disabled,
.input-wrapper .input > textarea[readonly] {
  opacity: 1;
  cursor: default;
}
.input-wrapper .input > input[readonly]:focus,
.input-wrapper .input > select[readonly]:focus,
.input-wrapper .input > textarea[readonly]:focus {
  outline: 0;
}
.input-wrapper .input .input-prefix,
.input-wrapper .input .input-suffix {
  display: inline-flex;
  align-items: center;
  z-index: 1;
  font-style: normal;
  transition-property: var(--input--transition-property, border-color);
  transition-duration: var(--input--transition-duration, var(--transition-duration));
  transition-timing-function: var(--input--transition-timing-function, var(--transition-timing-function));
  border-color: var(--input--border-color, var(--input--border-top-color, var(--border-top-color)) var(--input--border-right-color, var(--border-right-color)) var(--input--border-bottom-color, var(--border-bottom-color)) var(--input--border-left-color, var(--border-left-color)));
  color: var(--input--prefix-suffix--color);
  padding-right: var(--input--prefix-suffix--padding-right, var(--input--padding-right, var(--padding-right)));
  padding-left: var(--input--prefix-suffix--padding-left, var(--input--padding-left, var(--padding-left)));
}
.input-wrapper .input .input-prefix > button:not(.button):not(.select-caret),
.input-wrapper .input .input-suffix > button:not(.button):not(.select-caret) {
  background: transparent;
  border: 0;
  color: inherit;
}
.input-wrapper .input .input-prefix {
  border-right-width: var(--input--prefix--border-right-width, var(--input--border-right-width, var(--border-right-width)));
  border-right-style: var(--input--prefix--border-right-style, var(--input--border-right-style, var(--border-right-style)));
}
.input-wrapper .input .input-suffix {
  border-left-width: var(--input--suffix--border-left-width, var(--input--border-left-width, var(--border-left-width)));
  border-left-style: var(--input--prefix--border-left-style, var(--input--border-left-style, var(--border-left-style)));
}
.input-wrapper .input .input-icon {
  transition-property: var(--input--transition-property, color);
  transition-duration: var(--input--transition-duration, var(--transition-duration));
  transition-timing-function: var(--input--transition-timing-function, var(--transition-timing-function));
  cursor: pointer;
  width: auto;
  height: var(--input--icon--size);
  color: var(--input--icon--color);
}
.input-wrapper .input .input-icon:hover, .input-wrapper .input .input-icon:focus {
  color: var(--input--icon--hover--color, var(--input--icon--color));
}
.input-wrapper .input-prepend,
.input-wrapper .input-append {
  display: flex;
  flex-flow: row nowrap;
  align-items: stretch;
  padding: 0;
  line-height: var(--input-line-height, var(--line-height));
  transition-property: var(--input--transition-property, background-color);
  transition-duration: var(--input--transition-duration, var(--transition-duration));
  transition-timing-function: var(--input--transition-timing-function, var(--transition-timing-function));
  background-color: var(--input--prepend-append--background);
  font-size: var(--input--font-size, var(--font-size));
}
.input-wrapper .input-prepend > *,
.input-wrapper .input-append > * {
  display: flex;
  flex: auto 1 0;
  align-self: stretch;
  align-items: center;
  border-radius: 0;
  padding-left: var(--input--prepend-append--padding-left, var(--input--padding-left, var(--padding-left)));
  padding-right: var(--input--prepend-append--padding-right, var(--input--padding-right, var(--padding-right)));
}
.input-wrapper .input-prepend > [class$=-wrapper],
.input-wrapper .input-append > [class$=-wrapper] {
  padding-left: 0;
  padding-right: 0;
}
.input-wrapper .input-prepend > [class$=-wrapper] > [class$=-trigger],
.input-wrapper .input-append > [class$=-wrapper] > [class$=-trigger] {
  display: flex;
  align-self: stretch;
}
.input-wrapper .input-value-overlay {
  position: absolute;
  padding-left: var(--input--value-overlay--padding-left, var(--input--padding-left, var(--padding-left)));
  padding-right: var(--input--value-overlay--padding-right, var(--input--padding-left, var(--padding-left)));
}
.input-wrapper .input-value-overlay,
.input-wrapper .input-value-overlay > * {
  cursor: default;
}
.input-wrapper .input-prepend,
.input-wrapper .input-prepend > *:first-child {
  border-top-left-radius: var(--input--border-top-left-radius, var(--border-top-left-radius));
  border-bottom-left-radius: var(--input--border-bottom-left-radius, var(--border-bottom-left-radius));
}
.input-wrapper .input-append,
.input-wrapper .input-append > *:last-child {
  border-top-right-radius: var(--input--border-top-right-radius, var(--border-top-right-radius));
  border-bottom-right-radius: var(--input--border-bottom-right-radius, var(--border-bottom-right-radius));
}
.input-wrapper.-prepended, .input-wrapper.-appended {
  display: flex;
  flex-wrap: nowrap;
}
.input-wrapper.-prepended > .input, .input-wrapper.-appended > .input {
  flex-shrink: 1;
}
.input-wrapper.-prepended > .input {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.input-wrapper.-appended > .input {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.input-wrapper.-error > .input {
  border-color: var(--input--error--border-color, var(--color-danger));
}
.input-wrapper.-disabled > .input, .input-wrapper.-readonly > .input {
  color: var(--input--disabled--color, var(--input--color));
  background: var(--input--disabled--background, var(--input--background));
}
.input-wrapper.-disabled > .input:hover, .input-wrapper.-readonly > .input:hover {
  border-color: var(--input--border-color, var(--input--border-top-color, var(--border-top-color)) var(--input--border-right-color, var(--border-right-color)) var(--input--border-bottom-color, var(--border-bottom-color)) var(--input--border-left-color, var(--border-left-color)));
}
.input-wrapper.-disabled > .input > input:disabled, .input-wrapper.-disabled > .input > input[readonly],
.input-wrapper.-disabled > .input > select:disabled,
.input-wrapper.-disabled > .input > select[readonly],
.input-wrapper.-disabled > .input > textarea:disabled,
.input-wrapper.-disabled > .input > textarea[readonly], .input-wrapper.-readonly > .input > input:disabled, .input-wrapper.-readonly > .input > input[readonly],
.input-wrapper.-readonly > .input > select:disabled,
.input-wrapper.-readonly > .input > select[readonly],
.input-wrapper.-readonly > .input > textarea:disabled,
.input-wrapper.-readonly > .input > textarea[readonly] {
  color: var(--input--disabled--color);
}
.input-wrapper.-readonly > .input:focus-within {
  outline: 0;
  border-color: var(--input--focus--border-color);
}

/**
 * Color variants
 */
.input-wrapper.-light {
  --input--background: var(--input--light--background, var(--color-white));
  --input--color: var(--input--light--color, var(--contrast-text-color-white));
  --input--border-color: var(--input--light--border-color, var(--color-light-shade-50));
  --input--disabled--background: var(
      --input--light--disabled--background,
      var(--color-light)
  );
  --input--disabled--color: var(--input--light--disabled--color, var(--text-color-weak));
  --input--hover--border-color: var(
      --input--light--hover--border-color,
      var(--color-light-shade-100)
  );
  --input--focus--border-color: var(
      --input--light--focus--border-color,
      var(--color-primary)
  );
  --input--icon--color: var(--input--light--icon--color, var(--text-color-weak));
  --input--icon--hover--color: var(
      --input--light--icon--color,
      var(--contrast-text-color-light)
  );
  --input--placeholder--color: var(--input--light--placeholder--color, var(--color-gray-300));
  --input--prefix-suffix--color: var(
      --input--light--prefix-suffix--color,
      var(--color-gray-700)
  );
  --input--prepend-append--background: var(
      --input--light--prepend-append--background,
      var(--color-light)
  );
}
.input-wrapper.-dark {
  --input--background: var(--input--dark--background, var(--color-dark));
  --input--color: var(--input--dark--color, var(--contrast-text-color-dark));
  --input--border-color: var(--input--dark--border-color, var(--color-dark-tint-50));
  --input--disabled--background: var(
      --input--dark--disabled--background,
      var(--color-dark-tint-50)
  );
  --input--disabled--color: var(--input--dark--disabled--color, var(--text-color-weak));
  --input--hover--border-color: var(
      --input--dark--hover--border-color,
      var(--color-dark-tint-100)
  );
  --input--focus--border-color: var(--input--dark--focus--border-color, var(--color-primary));
  --input--icon--color: var(--input--dark--icon--color, var(--text-color-weak));
  --input--icon--hover--color: var(
      --input--dark--icon--color,
      var(--contrast-text-color-dark)
  );
  --input--placeholder--color: var(--input--dark--placeholder--color, var(--color-gray-600));
  --input--prefix-suffix--color: var(
      --input--dark--prefix-suffix--color,
      var(--color-dark-250)
  );
  --input--prepend-append--background: var(
      --input--dark--prepend-append--background,
      var(--color-dark)
  );
}

/**
 * Size variants
 */
.input-wrapper.-sm {
  --input--border-top-left-radius: var(
      --input--sm--border-top-left-radius,
      calc(var(--border-top-left-radius) * var(--size-multiplier-sm))
  );
  --input--border-top-right-radius: var(
      --input--sm--border-top-right-radius,
      calc(var(--border-top-right-radius) * var(--size-multiplier-sm))
  );
  --input--border-bottom-right-radius: var(
      --input--sm--border-bottom-right-radius,
      calc(var(--border-bottom-right-radius) * var(--size-multiplier-sm))
  );
  --input--border-bottom-left-radius: var(
      --input--sm--border-bottom-left-radius,
      calc(var(--border-bottom-left-radius) * var(--size-multiplier-sm))
  );
  --input--font-size: var(
      --input--sm--font-size,
      calc(var(--font-size) * var(--size-multiplier-sm))
  );
  --input--padding-top: var(
      --input--sm--padding-top,
      calc(var(--padding-top) * 0.5 * var(--size-multiplier-sm))
  );
  --input--padding-right: var(
      --input--sm--padding-right,
      calc(var(--padding-right) * var(--size-multiplier-sm))
  );
  --input--padding-bottom: var(
      --input--sm--padding-bottom,
      calc(var(--padding-bottom) * 0.5 * var(--size-multiplier-sm))
  );
  --input--padding-left: var(
      --input--sm--padding-left,
      calc(var(--padding-left) * var(--size-multiplier-sm))
  );
  --input--icon--size: calc(1rem * var(--size-multiplier-sm));
}
.input-wrapper.-md {
  --input--border-top-left-radius: var(
      --input--md--border-top-left-radius,
      calc(var(--border-top-left-radius) * var(--size-multiplier-md))
  );
  --input--border-top-right-radius: var(
      --input--md--border-top-right-radius,
      calc(var(--border-top-right-radius) * var(--size-multiplier-md))
  );
  --input--border-bottom-right-radius: var(
      --input--md--border-bottom-right-radius,
      calc(var(--border-bottom-right-radius) * var(--size-multiplier-md))
  );
  --input--border-bottom-left-radius: var(
      --input--md--border-bottom-left-radius,
      calc(var(--border-bottom-left-radius) * var(--size-multiplier-md))
  );
  --input--font-size: var(
      --input--md--font-size,
      calc(var(--font-size) * var(--size-multiplier-md))
  );
  --input--padding-top: var(
      --input--md--padding-top,
      calc(var(--padding-top) * 0.5 * var(--size-multiplier-md))
  );
  --input--padding-right: var(
      --input--md--padding-right,
      calc(var(--padding-right) * var(--size-multiplier-md))
  );
  --input--padding-bottom: var(
      --input--md--padding-bottom,
      calc(var(--padding-bottom) * 0.5 * var(--size-multiplier-md))
  );
  --input--padding-left: var(
      --input--md--padding-left,
      calc(var(--padding-left) * var(--size-multiplier-md))
  );
  --input--icon--size: calc(1rem * var(--size-multiplier-md));
}
.input-wrapper.-lg {
  --input--border-top-left-radius: var(
      --input--lg--border-top-left-radius,
      calc(var(--border-top-left-radius) * var(--size-multiplier-lg))
  );
  --input--border-top-right-radius: var(
      --input--lg--border-top-right-radius,
      calc(var(--border-top-right-radius) * var(--size-multiplier-lg))
  );
  --input--border-bottom-right-radius: var(
      --input--lg--border-bottom-right-radius,
      calc(var(--border-bottom-right-radius) * var(--size-multiplier-lg))
  );
  --input--border-bottom-left-radius: var(
      --input--lg--border-bottom-left-radius,
      calc(var(--border-bottom-left-radius) * var(--size-multiplier-lg))
  );
  --input--font-size: var(
      --input--lg--font-size,
      calc(var(--font-size) * var(--size-multiplier-lg))
  );
  --input--padding-top: var(
      --input--lg--padding-top,
      calc(var(--padding-top) * 0.5 * var(--size-multiplier-lg))
  );
  --input--padding-right: var(
      --input--lg--padding-right,
      calc(var(--padding-right) * var(--size-multiplier-lg))
  );
  --input--padding-bottom: var(
      --input--lg--padding-bottom,
      calc(var(--padding-bottom) * 0.5 * var(--size-multiplier-lg))
  );
  --input--padding-left: var(
      --input--lg--padding-left,
      calc(var(--padding-left) * var(--size-multiplier-lg))
  );
  --input--icon--size: calc(1rem * var(--size-multiplier-lg));
}

/**
 * Layout
 */
.layout {
  display: flex;
  flex-direction: column;
  flex: 1;
  position: relative;
}
.layout,
.layout .layout,
.layout .layout-aside,
.layout .layout-header,
.layout .layout-content,
.layout .layout-footer {
  box-sizing: border-box;
}
.layout.-vertical {
  flex-direction: row;
  height: 100%;
}
.layout.-vertical > .layout,
.layout.-vertical > .container {
  overflow-x: hidden;
}
.layout > .container {
  flex: auto;
}

/**
 * Layout Aside
 */
.layout-aside {
  transition: all 0.2s;
  position: relative;
  width: var(--layout-aside--width, 320px);
  flex: 0 0 var(--layout-aside--width, 320px);
  /* Fix firefox can't set width smaller than content on flex item */
  min-width: 0;
}
.layout-aside-children {
  height: 100%;
  padding-top: 0.1px;
  margin-top: -0.1px;
}
.layout-aside.-right {
  order: 1;
}

/**
 * Layout Content
 */
.layout-content {
  flex: auto;
  min-width: 0;
}

/**
 * Layout Footer
 */
.layout-footer {
  flex: 0 0 auto;
}

/**
 * Layout Header
 */
.layout-header {
  flex: 0 0 auto;
}

/**
 * List Group
 */
.list-group {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  transition-property: var(--list-group--transition-property, background-color, border-color);
  transition-duration: var(--list-group--transition-duration, var(--transition-duration));
  transition-timing-function: var(--list-group--transition-timing-function, var(--transition-timing-function));
  background-color: var(--list-group--background);
  color: var(--list-group--color);
  font-size: var(--list-group--font-size, var(--font-size));
  border-radius: var(--list-group--border-radius, var(--list-group--border-top-left-radius, var(--border-top-left-radius)) var(--list-group--border-top-right-radius, var(--border-top-right-radius)) var(--list-group--border-bottom-right-radius, var(--border-bottom-right-radius)) var(--list-group--border-bottom-left-radius, var(--border-bottom-left-radius)));
}
.list-group.-border {
  border-width: var(--list-group--border-width, var(--list-group--border-top-width, var(--border-top-width)) var(--list-group--border-right-width, var(--border-right-width)) var(--list-group--border-bottom-width, var(--border-bottom-width)) var(--list-group--border-left-width, var(--border-left-width)));
  border-style: var(--list-group--border-style, var(--list-group--border-top-style, var(--border-top-style)) var(--list-group--border-right-style, var(--border-right-style)) var(--list-group--border-bottom-style, var(--border-bottom-style)) var(--list-group--border-left-style, var(--border-left-style)));
  border-color: var(--list-group--border-color, var(--list-group--border-top-color, var(--border-top-color)) var(--list-group--border-right-color, var(--border-right-color)) var(--list-group--border-bottom-color, var(--border-bottom-color)) var(--list-group--border-left-color, var(--border-left-color)));
}

/**
 * Color variants
 */
.list-group.-light {
  --list-group--background: var(--list-group--light--background, var(--color-white));
  --list-group--color: var(--list-group--light--color, var(--contrast-text-color-white));
  --list-group--border-top-color: var(
      --list-group--light--border-top-color,
      var(--color-light-shade-50)
  );
  --list-group--border-right-color: var(
      --list-group--light--border-right-color,
      var(--color-light-shade-50)
  );
  --list-group--border-bottom-color: var(
      --list-group--light--border-bottom-color,
      var(--color-light-shade-50)
  );
  --list-group--border-left-color: var(
      --list-group--light--border-left-color,
      var(--color-light-shade-50)
  );
  --list-group--active--background: var(
      --list-group--light--active--background,
      var(--color-primary)
  );
  --list-group--active--color: var(
      --list-group--light--active--color,
      var(--contrast-text-color-primary)
  );
  --list-group--active--border-top-color: var(
      --list-group--light--active--border-top-color,
      var(--color-primary-shade-50)
  );
  --list-group--active--border-right-color: var(
      --list-group--light--active--border-right-color,
      var(--color-primary-shade-50)
  );
  --list-group--active--border-bottom-color: var(
      --list-group--light--active--border-bottom-color,
      var(--color-primary-shade-50)
  );
  --list-group--active--border-left-color: var(
      --list-group--light--active--border-left-color,
      var(--color-primary-shade-50)
  );
  --list-group--disabled--color: var(
      --list-group--light--disabled--color,
      var(--text-color-weak)
  );
}
.list-group.-dark {
  --list-group--background: var(--list-group--dark--background, var(--color-dark));
  --list-group--color: var(--list-group--dark--color, var(--contrast-text-color-dark));
  --list-group--border-top-color: var(
      --list-group--dark--border-top-color,
      var(--color-dark-tint-50)
  );
  --list-group--border-right-color: var(
      --list-group--dark--border-right-color,
      var(--color-dark-tint-50)
  );
  --list-group--border-bottom-color: var(
      --list-group--dark--border-bottom-color,
      var(--color-dark-tint-50)
  );
  --list-group--border-left-color: var(
      --list-group--dark--border-left-color,
      var(--color-dark-tint-50)
  );
  --list-group--active--background: var(
      --list-group--dark--active--background,
      var(--color-primary)
  );
  --list-group--active--color: var(
      --list-group--dark--active--color,
      var(--contrast-text-color-primary)
  );
  --list-group--active--border-top-color: var(
      --list-group--dark--active--border-top-color,
      var(--color-primary-shade-50)
  );
  --list-group--active--border-right-color: var(
      --list-group--dark--active--border-right-color,
      var(--color-primary-shade-50)
  );
  --list-group--active--border-bottom-color: var(
      --list-group--dark--active--border-bottom-color,
      var(--color-primary-shade-50)
  );
  --list-group--active--border-left-color: var(
      --list-group--dark--active--border-left-color,
      var(--color-primary-shade-50)
  );
  --list-group--disabled--color: var(
      --list-group--dark--disabled--color,
      var(--text-color-weak)
  );
}

/**
 * Size variants
 */
.list-group.-sm {
  --list-group--border-top-left-radius: var(
      --list-group--sm--border-top-left-radius,
      calc(var(--border-top-left-radius) * var(--size-multiplier-sm))
  );
  --list-group--border-top-right-radius: var(
      --list-group--sm--border-top-right-radius,
      calc(var(--border-top-right-radius) * var(--size-multiplier-sm))
  );
  --list-group--border-bottom-right-radius: var(
      --list-group--sm--border-bottom-right-radius,
      calc(var(--border-bottom-right-radius) * var(--size-multiplier-sm))
  );
  --list-group--border-bottom-left-radius: var(
      --list-group--sm--border-bottom-left-radius,
      calc(var(--border-bottom-left-radius) * var(--size-multiplier-sm))
  );
  --list-group--font-size: var(
      --list-group--sm--font-size,
      calc(var(--font-size) * var(--size-multiplier-sm))
  );
  --list-group--padding-top: var(
      --list-group--sm--padding-top,
      calc(var(--padding-top) * var(--size-multiplier-sm))
  );
  --list-group--padding-right: var(
      --list-group--sm--padding-right,
      calc(var(--padding-right) * var(--size-multiplier-sm))
  );
  --list-group--padding-bottom: var(
      --list-group--sm--padding-bottom,
      calc(var(--padding-bottom) * var(--size-multiplier-sm))
  );
  --list-group--padding-left: var(
      --list-group--sm--padding-left,
      calc(var(--padding-left) * var(--size-multiplier-sm))
  );
}
.list-group.-md {
  --list-group--border-top-left-radius: var(
      --list-group--md--border-top-left-radius,
      calc(var(--border-top-left-radius) * var(--size-multiplier-md))
  );
  --list-group--border-top-right-radius: var(
      --list-group--md--border-top-right-radius,
      calc(var(--border-top-right-radius) * var(--size-multiplier-md))
  );
  --list-group--border-bottom-right-radius: var(
      --list-group--md--border-bottom-right-radius,
      calc(var(--border-bottom-right-radius) * var(--size-multiplier-md))
  );
  --list-group--border-bottom-left-radius: var(
      --list-group--md--border-bottom-left-radius,
      calc(var(--border-bottom-left-radius) * var(--size-multiplier-md))
  );
  --list-group--font-size: var(
      --list-group--md--font-size,
      calc(var(--font-size) * var(--size-multiplier-md))
  );
  --list-group--padding-top: var(
      --list-group--md--padding-top,
      calc(var(--padding-top) * var(--size-multiplier-md))
  );
  --list-group--padding-right: var(
      --list-group--md--padding-right,
      calc(var(--padding-right) * var(--size-multiplier-md))
  );
  --list-group--padding-bottom: var(
      --list-group--md--padding-bottom,
      calc(var(--padding-bottom) * var(--size-multiplier-md))
  );
  --list-group--padding-left: var(
      --list-group--md--padding-left,
      calc(var(--padding-left) * var(--size-multiplier-md))
  );
}
.list-group.-lg {
  --list-group--border-top-left-radius: var(
      --list-group--lg--border-top-left-radius,
      calc(var(--border-top-left-radius) * var(--size-multiplier-lg))
  );
  --list-group--border-top-right-radius: var(
      --list-group--lg--border-top-right-radius,
      calc(var(--border-top-right-radius) * var(--size-multiplier-lg))
  );
  --list-group--border-bottom-right-radius: var(
      --list-group--lg--border-bottom-right-radius,
      calc(var(--border-bottom-right-radius) * var(--size-multiplier-lg))
  );
  --list-group--border-bottom-left-radius: var(
      --list-group--lg--border-bottom-left-radius,
      calc(var(--border-bottom-left-radius) * var(--size-multiplier-lg))
  );
  --list-group--font-size: var(
      --list-group--lg--font-size,
      calc(var(--font-size) * var(--size-multiplier-lg))
  );
  --list-group--padding-top: var(
      --list-group--lg--padding-top,
      calc(var(--padding-top) * var(--size-multiplier-lg))
  );
  --list-group--padding-right: var(
      --list-group--lg--padding-right,
      calc(var(--padding-right) * var(--size-multiplier-lg))
  );
  --list-group--padding-bottom: var(
      --list-group--lg--padding-bottom,
      calc(var(--padding-bottom) * var(--size-multiplier-lg))
  );
  --list-group--padding-left: var(
      --list-group--lg--padding-left,
      calc(var(--padding-left) * var(--size-multiplier-lg))
  );
}

/**
 * List Group Item
 */
.list-group .list-group-item {
  display: block;
  margin-bottom: 0;
  border-bottom-width: var(--list-group--border-bottom-width, var(--border-bottom-width));
  border-bottom-style: var(--list-group--border-bottom-style, var(--border-bottom-style));
  border-bottom-color: var(--list-group--border-bottom-color, var(--border-bottom-color));
  transition-property: color, border-color;
  transition-duration: var(--transition-duration);
  transition-timing-function: var(--transition-timing-function);
  padding: var(--list-group--padding, var(--list-group--padding-top, var(--padding-top)) var(--list-group--padding-right, var(--padding-right)) var(--list-group--padding-bottom, var(--padding-bottom)) var(--list-group--padding-left, var(--padding-left)));
}
.list-group .list-group-item.-active {
  color: var(--list-group--active--color);
  background: var(--list-group--active--background);
  border-bottom-color: var(--list-group--active--border-color);
}
.list-group .list-group-item:first-child {
  border-top-left-radius: var(--list-group--border-top-left-radius);
  border-top-right-radius: var(--list-group--border-top-right-radius);
}
.list-group .list-group-item:last-child {
  border-bottom-width: 0;
  border-bottom-left-radius: var(--list-group--border-bottom-left-radius);
  border-bottom-right-radius: var(--list-group--border-bottom-right-radius);
}
.list-group .list-group-item:hover, .list-group .list-group-item:focus {
  text-decoration: none;
}
.list-group .list-group-item.-disabled {
  color: var(--list-group--disabled--color);
  pointer-events: none;
  cursor: default;
}

/**
 * Loader
 */
.loader {
  display: inline-block;
  position: relative;
  width: var(--loader--size);
  height: var(--loader--size);
}
.loader::before {
  content: "";
  display: block;
  padding-top: 100%;
}
.loader .loader-text,
.loader > svg {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}
.loader .loader-text {
  display: flex;
  justify-content: center;
  align-items: center;
}
.loader > svg {
  animation: loader-rotate var(--loader--animation-duration, 1.2s) linear infinite;
  transform-origin: center center;
}
.loader > svg > circle {
  stroke: var(--loader--background);
  stroke-dasharray: 89, 200;
  stroke-dashoffset: -35px;
  animation: loader-dash var(--loader--animation-duration, 1.2s) ease-in-out infinite;
  stroke-linecap: round;
}
.loader.-auto {
  width: 100%;
  height: 100%;
}

@keyframes loader-rotate {
  100% {
    transform: rotate(360deg);
  }
}
@keyframes loader-dash {
  0% {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -35px;
  }
  100% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -124px;
  }
}
/**
 * Color variants
 */
.loader.-primary {
  --loader--background: var(--loader--primary--background, var(--color-primary));
}
.loader.-light {
  --loader--background: var(--loader--light--background, var(--color-dark));
}
.loader.-dark {
  --loader--background: var(--loader--dark--background, var(--color-light));
}

/**
 * Size variants
 */
.loader.-sm {
  --loader--size: var(--loader--sm--size, calc(64px * var(--size-multiplier-sm)));
}
.loader.-md {
  --loader--size: var(--loader--md--size, calc(64px * var(--size-multiplier-md)));
}
.loader.-lg {
  --loader--size: var(--loader--lg--size, calc(64px * var(--size-multiplier-lg)));
}

/**
 * Media
 */
.media {
  position: relative;
  display: flex;
  flex-direction: row;
}
.media > .media-body {
  flex: 0 1 auto;
}
.media > img,
.media > .img,
.media > .image {
  align-self: flex-start;
  height: auto;
  flex: 0 0 auto;
  margin-right: var(--media--image--margin-right, var(--margin-right));
}

/**
 * Modal
 */
.modal-wrapper {
  background: var(--modal--wrapper--background, rgba(0, 0, 0, 0.75));
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2000;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal-wrapper .modal {
  text-align: left;
  list-style: none;
  line-height: var(--modal--line-height, var(--line-height));
  display: block;
  width: calc(100% - var(--modal--margin-left, var(--margin-left)) - var(--modal--margin-right, var(--margin-right)));
  max-width: var(--modal--width, 480px);
  border-radius: var(--modal--border-radius, var(--modal--border-top-left-radius, var(--border-top-left-radius)) var(--modal--border-top-right-radius, var(--border-top-right-radius)) var(--modal--border-bottom-right-radius, var(--border-bottom-right-radius)) var(--modal--border-bottom-left-radius, var(--border-bottom-left-radius)));
  box-shadow: var(--modal--box-shadow, var(--modal--box-shadow-x-offset, var(--box-shadow-offset-x)) var(--modal--box-shadow-y-offset, var(--box-shadow-offset-y)) var(--modal--box-shadow-blur-radius, var(--box-shadow-blur-radius)) var(--modal--box-shadow-spread-radius, var(--box-shadow-spread-radius)) var(--modal--box-shadow-color, var(--box-shadow-color)));
}
.modal-wrapper .modal > .modal-header {
  display: flex;
  justify-content: space-between;
  background: var(--modal--header--background, var(--modal--background));
  border-style: var(--modal--header--border-style, var(--modal--header--border-top-style, var(--modal--border-top-style, var(--border-top-style))) var(--modal--header--border-right-style, var(--modal--border-right-style, var(--border-right-style))) var(--modal--header--border-bottom-style, var(--modal--border-bottom-style, var(--border-bottom-style))) var(--modal--header--border-left-style, var(--modal--border-left-style, var(--border-left-style))));
  border-width: var(--modal--header--border-width, var(--modal--header--border-top-width, var(--modal--border-top-width, var(--border-top-width))) var(--modal--header--border-right-width, var(--modal--border-right-width, var(--border-right-width))) var(--modal--header--border-bottom-width, var(--modal--border-bottom-width, var(--border-bottom-width))) var(--modal--header--border-left-width, var(--modal--border-left-width, var(--border-left-width))));
  border-color: var(--modal--header--border-color, var(--modal--header--border-top-color, var(--modal--border-top-color, var(--border-top-color))) var(--modal--header--border-right-color, var(--modal--border-right-color, var(--border-right-color))) var(--modal--header--border-bottom-color, var(--modal--border-bottom-color, var(--border-bottom-color))) var(--modal--header--border-left-color, var(--modal--border-left-color, var(--border-left-color))));
  padding: var(--modal--header--padding, var(--modal--header--padding-top, var(--modal--padding-top, var(--padding-top))) var(--modal--header--padding-right, var(--modal--padding-right, var(--padding-right))) var(--modal--header--padding-bottom, var(--modal--padding-bottom, var(--padding-bottom))) var(--modal--header--padding-left, var(--modal--padding-left, var(--padding-left))));
  color: var(--modal--header--color, var(--modal--color));
}
.modal-wrapper .modal > .modal-header > .close {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 1.5rem;
  width: 1.5rem;
  line-height: 1.5rem;
  font-size: 0.5rem;
  cursor: pointer;
  padding: 0;
  border: 0;
  transition: background-color 0.3s ease;
  background-color: transparent;
  border-radius: var(--modal--border-radius, var(--modal--border-top-left-radius, var(--border-top-left-radius)) var(--modal--border-top-right-radius, var(--border-top-right-radius)) var(--modal--border-bottom-right-radius, var(--border-bottom-right-radius)) var(--modal--border-bottom-left-radius, var(--border-bottom-left-radius)));
}
.modal-wrapper .modal > .modal-header > .close > .icon {
  mask-image: url('data:image/svg+xml; utf8, <svg fill="currentColor" version="1.1" xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 28 28"><title>times</title><path d="M27.745 22.495c-0-0-0-0-0-0l-8.494-8.494 8.494-8.494c0-0 0-0 0-0 0.091-0.091 0.158-0.198 0.2-0.312 0.116-0.311 0.050-0.675-0.2-0.925l-4.013-4.013c-0.25-0.25-0.614-0.316-0.925-0.2-0.114 0.042-0.221 0.109-0.312 0.2 0 0-0 0-0 0l-8.494 8.494-8.494-8.494c-0-0-0-0-0-0-0.091-0.091-0.198-0.158-0.312-0.2-0.311-0.116-0.675-0.050-0.925 0.2l-4.013 4.013c-0.25 0.25-0.316 0.614-0.2 0.925 0.042 0.114 0.109 0.221 0.2 0.312 0 0 0 0 0 0l8.494 8.494-8.494 8.494c-0 0-0 0-0 0-0.091 0.091-0.157 0.198-0.2 0.312-0.116 0.311-0.050 0.675 0.2 0.925l4.013 4.013c0.25 0.25 0.614 0.316 0.925 0.2 0.114-0.042 0.221-0.109 0.312-0.2 0-0 0-0 0-0l8.494-8.494 8.494 8.494c0 0 0 0 0 0 0.092 0.091 0.198 0.158 0.312 0.2 0.311 0.116 0.675 0.050 0.925-0.2l4.013-4.013c0.25-0.25 0.316-0.614 0.2-0.925-0.042-0.114-0.109-0.221-0.2-0.312z"></path></svg>');
  -webkit-mask-image: url('data:image/svg+xml; utf8, <svg fill="currentColor" version="1.1" xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 28 28"><title>times</title><path d="M27.745 22.495c-0-0-0-0-0-0l-8.494-8.494 8.494-8.494c0-0 0-0 0-0 0.091-0.091 0.158-0.198 0.2-0.312 0.116-0.311 0.050-0.675-0.2-0.925l-4.013-4.013c-0.25-0.25-0.614-0.316-0.925-0.2-0.114 0.042-0.221 0.109-0.312 0.2 0 0-0 0-0 0l-8.494 8.494-8.494-8.494c-0-0-0-0-0-0-0.091-0.091-0.198-0.158-0.312-0.2-0.311-0.116-0.675-0.050-0.925 0.2l-4.013 4.013c-0.25 0.25-0.316 0.614-0.2 0.925 0.042 0.114 0.109 0.221 0.2 0.312 0 0 0 0 0 0l8.494 8.494-8.494 8.494c-0 0-0 0-0 0-0.091 0.091-0.157 0.198-0.2 0.312-0.116 0.311-0.050 0.675 0.2 0.925l4.013 4.013c0.25 0.25 0.614 0.316 0.925 0.2 0.114-0.042 0.221-0.109 0.312-0.2 0-0 0-0 0-0l8.494-8.494 8.494 8.494c0 0 0 0 0 0 0.092 0.091 0.198 0.158 0.312 0.2 0.311 0.116 0.675 0.050 0.925-0.2l4.013-4.013c0.25-0.25 0.316-0.614 0.2-0.925-0.042-0.114-0.109-0.221-0.2-0.312z"></path></svg>');
  mask-position: center center;
  -webkit-mask-position: center center;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  mask-size: calc(var(--modal--font-size, var(--font-size)) / 2);
  -webkit-mask-size: calc(var(--modal--font-size, var(--font-size)) / 2);
  background-color: var(--modal--header--color, var(--modal--color));
  width: var(--modal--font-size, var(--font-size));
  height: var(--modal--font-size, var(--font-size));
}
.modal-wrapper .modal > .modal-header > .close:hover, .modal-wrapper .modal > .modal-header > .close:focus {
  outline: none;
  background-color: rgba(0, 0, 0, 0.1);
}
.modal-wrapper .modal > .modal-header > .close:active {
  background-color: rgba(0, 0, 0, 0.15);
}
.modal-wrapper .modal > .modal-body {
  display: flex;
  flex-direction: row;
  background: var(--modal--body--background, var(--modal--background));
  color: var(--modal--body--color, var(--modal--color));
  border-style: var(--modal--body--border-style, var(--modal--body--border-top-style, var(--modal--border-top-style, var(--border-top-style))) var(--modal--body--border-right-style, var(--modal--border-right-style, var(--border-right-style))) var(--modal--body--border-bottom-style, var(--modal--border-bottom-style, var(--border-bottom-style))) var(--modal--body--border-left-style, var(--modal--border-left-style, var(--border-left-style))));
  border-width: var(--modal--body--border-width, var(--modal--body--border-top-width, var(--modal--border-top-width, var(--border-top-width))) var(--modal--body--border-right-width, var(--modal--border-right-width, var(--border-right-width))) var(--modal--body--border-bottom-width, var(--modal--border-bottom-width, var(--border-bottom-width))) var(--modal--body--border-left-width, var(--modal--border-left-width, var(--border-left-width))));
  border-color: var(--modal--body--border-color, var(--modal--body--border-top-color, var(--modal--border-top-color, var(--border-top-color))) var(--modal--body--border-right-color, var(--modal--border-right-color, var(--border-right-color))) var(--modal--body--border-bottom-color, var(--modal--border-bottom-color, var(--border-bottom-color))) var(--modal--body--border-left-color, var(--modal--border-left-color, var(--border-left-color))));
  padding: var(--modal--body--padding, var(--modal--body--padding-top, var(--modal--padding-top, var(--padding-top))) var(--modal--body--padding-right, var(--modal--padding-right, var(--padding-right))) var(--modal--body--padding-bottom, var(--modal--padding-bottom, var(--padding-bottom))) var(--modal--body--padding-left, var(--modal--padding-left, var(--padding-left))));
}
.modal-wrapper .modal > .modal-body .modal-icon {
  margin-right: var(--modal--icon--margin-right, var(--modal--body--padding-right, var(--padding-right)));
}
.modal-wrapper .modal > .modal-body .modal-content {
  width: 100%;
  display: block;
}
.modal-wrapper .modal > .modal-footer {
  background: var(--modal--footer--background, var(--modal--background));
  color: var(--modal--footer--color, var(--modal--color));
  border-style: var(--modal--footer--border-style, var(--modal--footer--border-top-style, var(--modal--border-top-style, var(--border-top-style))) var(--modal--footer--border-right-style, var(--modal--border-right-style, var(--border-right-style))) var(--modal--footer--border-bottom-style, var(--modal--border-bottom-style, var(--border-bottom-style))) var(--modal--footer--border-left-style, var(--modal--border-left-style, var(--border-left-style))));
  border-width: var(--modal--footer--border-width, var(--modal--footer--border-top-width, var(--modal--border-top-width, var(--border-top-width))) var(--modal--footer--border-right-width, var(--modal--border-right-width, var(--border-right-width))) var(--modal--footer--border-bottom-width, var(--modal--border-bottom-width, var(--border-bottom-width))) var(--modal--footer--border-left-width, var(--modal--border-left-width, var(--border-left-width))));
  border-color: var(--modal--footer--border-color, var(--modal--footer--border-top-color, var(--modal--border-top-color, var(--border-top-color))) var(--modal--footer--border-right-color, var(--modal--border-right-color, var(--border-right-color))) var(--modal--footer--border-bottom-color, var(--modal--border-bottom-color, var(--border-bottom-color))) var(--modal--footer--border-left-color, var(--modal--border-left-color, var(--border-left-color))));
  padding: var(--modal--footer--padding, var(--modal--footer--padding-top, var(--modal--padding-top, var(--padding-top))) var(--modal--footer--padding-right, var(--modal--padding-right, var(--padding-right))) var(--modal--footer--padding-bottom, var(--modal--padding-bottom, var(--padding-bottom))) var(--modal--footer--padding-left, var(--modal--padding-left, var(--padding-left))));
}
.modal-wrapper .modal > *:first-child {
  border-top-left-radius: var(--modal--border-top-left-radius, var(--border-top-left-radius));
  border-top-right-radius: var(--modal--border-top-right-radius, var(--border-top-right-radius));
}
.modal-wrapper .modal > *:last-child {
  border-bottom-left-radius: var(--modal--border-bottom-left-radius, var(--border-bottom-left-radius));
  border-bottom-right-radius: var(--modal--border-bottom-right-radius, var(--border-bottom-right-radius));
}
.modal-wrapper .modal > .modal-header + .modal-body,
.modal-wrapper .modal > .modal-header + .modal-footer,
.modal-wrapper .modal > .modal-body + .modal-footer,
.modal-wrapper .modal > .modal-body + .modal-body {
  border-top-width: 0;
}
.modal-wrapper.-fullscreen {
  display: block;
}
.modal-wrapper.-fullscreen > .modal {
  width: 100%;
  height: 100%;
  max-width: 100%;
  display: flex;
  flex-direction: column;
}
.modal-wrapper.-fullscreen > .modal > .modal-header {
  border-radius: var(--modal--fullscreen--header--border-radius, 0);
}
.modal-wrapper.-fullscreen > .modal > .modal-body {
  border-radius: var(--modal--fullscreen--body--border-radius, 0);
  flex: 1;
  overflow: auto;
}
.modal-wrapper.-fullscreen > .modal > .modal-footer {
  border-radius: var(--modal--fullscreen--footer--border-radius, 0);
}
.modal-wrapper.-alert > .modal > .modal-footer, .modal-wrapper.-confirm > .modal > .modal-footer, .modal-wrapper.-prompt > .modal > .modal-footer {
  display: flex;
  justify-content: flex-end;
}
.modal-wrapper.-alert > .modal > .modal-footer .button + .button, .modal-wrapper.-confirm > .modal > .modal-footer .button + .button, .modal-wrapper.-prompt > .modal > .modal-footer .button + .button {
  margin-left: var(--modal--footer--button--margin-left, var(--margin-left-1-2));
}

/**
 * Color variants
 */
.modal-wrapper.-primary {
  --modal--background: var(--modal--primary--background, var(--color-primary));
  --modal--border-top-color: var(
      --modal--primary--border-top-color,
      var(--color-primary-shade-50)
  );
  --modal--border-right-color: var(
      --modal--primary--border-right-color,
      var(--color-primary-shade-50)
  );
  --modal--border-bottom-color: var(
      --modal--primary--border-bottom-color,
      var(--color-primary-shade-50)
  );
  --modal--border-left-color: var(
      --modal--primary--border-left-color,
      var(--color-primary-shade-50)
  );
  --modal--color: var(--modal--primary--color, var(--contrast-text-color-primary));
  --modal--header--background: var(
      --modal--primary--header--background,
      var(--color-primary-shade-50)
  );
  --modal--footer--background: var(
      --modal--primary--footer--background,
      var(--color-primary-shade-50)
  );
}
.modal-wrapper.-secondary {
  --modal--background: var(--modal--secondary--background, var(--color-secondary));
  --modal--border-top-color: var(
      --modal--secondary--border-top-color,
      var(--color-secondary-shade-50)
  );
  --modal--border-right-color: var(
      --modal--secondary--border-right-color,
      var(--color-secondary-shade-50)
  );
  --modal--border-bottom-color: var(
      --modal--secondary--border-bottom-color,
      var(--color-secondary-shade-50)
  );
  --modal--border-left-color: var(
      --modal--secondary--border-left-color,
      var(--color-secondary-shade-50)
  );
  --modal--color: var(--modal--secondary--color, var(--contrast-text-color-secondary));
  --modal--header--background: var(
      --modal--secondary--header--background,
      var(--color-secondary-shade-50)
  );
  --modal--footer--background: var(
      --modal--secondary--footer--background,
      var(--color-secondary-shade-50)
  );
}
.modal-wrapper.-light {
  --modal--background: var(--modal--light--background, var(--color-white));
  --modal--border-top-color: var(--modal--light--border-top-color, var(--color-light));
  --modal--border-right-color: var(--modal--light--border-right-color, var(--color-light));
  --modal--border-bottom-color: var(--modal--light--border-bottom-color, var(--color-light));
  --modal--border-left-color: var(--modal--light--border-left-color, var(--color-light));
  --modal--color: var(--modal--light--color, var(--contrast-text-color-white));
  --modal--header--background: var(--modal--light--header--background, var(--color-gray-50));
  --modal--footer--background: var(--modal--light--footer--background, var(--color-gray-50));
}
.modal-wrapper.-dark {
  --modal--background: var(--modal--dark--background, var(--color-dark));
  --modal--border-top-color: var(--modal--dark--border-top-color, var(--color-dark-tint-50));
  --modal--border-right-color: var(
      --modal--dark--border-right-color,
      var(--color-dark-tint-50)
  );
  --modal--border-bottom-color: var(
      --modal--dark--border-bottom-color,
      var(--color-dark-tint-50)
  );
  --modal--border-left-color: var(
      --modal--dark--border-left-color,
      var(--color-dark-tint-50)
  );
  --modal--color: var(--modal--dark--color, var(--contrast-text-color-dark));
  --modal--header--background: var(
      --modal--dark--header--background,
      var(--color-dark-tint-50)
  );
  --modal--footer--background: var(
      --modal--dark--footer--background,
      var(--color-dark-tint-50)
  );
}
.modal-wrapper.-info {
  --modal--background: var(--modal--info--background, var(--color-info));
  --modal--border-top-color: var(--modal--info--border-top-color, var(--color-info-shade-50));
  --modal--border-right-color: var(
      --modal--info--border-right-color,
      var(--color-info-shade-50)
  );
  --modal--border-bottom-color: var(
      --modal--info--border-bottom-color,
      var(--color-info-shade-50)
  );
  --modal--border-left-color: var(
      --modal--info--border-left-color,
      var(--color-info-shade-50)
  );
  --modal--color: var(--modal--info--color, var(--contrast-text-color-info));
  --modal--header--background: var(
      --modal--info--header--background,
      var(--color-info-shade-50)
  );
  --modal--footer--background: var(
      --modal--info--footer--background,
      var(--color-info-shade-50)
  );
}
.modal-wrapper.-success {
  --modal--background: var(--modal--success--background, var(--color-success));
  --modal--border-top-color: var(
      --modal--success--border-top-color,
      var(--color-success-shade-50)
  );
  --modal--border-right-color: var(
      --modal--success--border-right-color,
      var(--color-success-shade-50)
  );
  --modal--border-bottom-color: var(
      --modal--success--border-bottom-color,
      var(--color-success-shade-50)
  );
  --modal--border-left-color: var(
      --modal--success--border-left-color,
      var(--color-success-shade-50)
  );
  --modal--color: var(--modal--success--color, var(--contrast-text-color-success));
  --modal--header--background: var(
      --modal--success--header--background,
      var(--color-success-shade-50)
  );
  --modal--footer--background: var(
      --modal--success--footer--background,
      var(--color-success-shade-50)
  );
}
.modal-wrapper.-warning {
  --modal--background: var(--modal--warning--background, var(--color-warning));
  --modal--border-top-color: var(
      --modal--warning--border-top-color,
      var(--color-warning-shade-50)
  );
  --modal--border-right-color: var(
      --modal--warning--border-right-color,
      var(--color-warning-shade-50)
  );
  --modal--border-bottom-color: var(
      --modal--warning--border-bottom-color,
      var(--color-warning-shade-50)
  );
  --modal--border-left-color: var(
      --modal--warning--border-left-color,
      var(--color-warning-shade-50)
  );
  --modal--color: var(--modal--warning--color, var(--contrast-text-color-warning));
  --modal--header--background: var(
      --modal--warning--header--background,
      var(--color-warning-shade-50)
  );
  --modal--footer--background: var(
      --modal--warning--footer--background,
      var(--color-warning-shade-50)
  );
}
.modal-wrapper.-danger {
  --modal--background: var(--modal--danger--background, var(--color-danger));
  --modal--border-top-color: var(
      --modal--danger--border-top-color,
      var(--color-danger-shade-50)
  );
  --modal--border-right-color: var(
      --modal--danger--border-right-color,
      var(--color-danger-shade-50)
  );
  --modal--border-bottom-color: var(
      --modal--danger--border-bottom-color,
      var(--color-danger-shade-50)
  );
  --modal--border-left-color: var(
      --modal--danger--border-left-color,
      var(--color-danger-shade-50)
  );
  --modal--color: var(--modal--danger--color, var(--contrast-text-color-danger));
  --modal--header--background: var(
      --modal--danger--header--background,
      var(--color-danger-shade-50)
  );
  --modal--footer--background: var(
      --modal--danger--footer--background,
      var(--color-danger-shade-50)
  );
}

/**
 * Size variants
 */
.modal-wrapper.-sm {
  --modal--border-top-left-radius: var(
      --modal--sm--border-top-left-radius,
      calc(var(--border-top-left-radius) * var(--size-multiplier-sm))
  );
  --modal--border-top-right-radius: var(
      --modal--sm--border-top-right-radius,
      calc(var(--border-top-right-radius) * var(--size-multiplier-sm))
  );
  --modal--border-bottom-right-radius: var(
      --modal--sm--border-bottom-right-radius,
      calc(var(--border-bottom-right-radius) * var(--size-multiplier-sm))
  );
  --modal--border-bottom-left-radius: var(
      --modal--sm--border-bottom-left-radius,
      calc(var(--border-bottom-left-radius) * var(--size-multiplier-sm))
  );
  --modal--font-size: var(
      --modal--sm--font-size,
      calc(var(--font-size) * var(--size-multiplier-sm))
  );
  --modal--margin-top: var(
      --modal--sm--margin-top,
      calc(var(--margin-top) * var(--size-multiplier-sm))
  );
  --modal--margin-right: var(
      --modal--sm--margin-right,
      calc(var(--margin-right) * var(--size-multiplier-sm))
  );
  --modal--margin-bottom: var(
      --modal--sm--margin-bottom,
      calc(var(--margin-bottom) * var(--size-multiplier-sm))
  );
  --modal--margin-left: var(
      --modal--sm--margin-left,
      calc(var(--margin-left) * var(--size-multiplier-sm))
  );
  --modal--padding-top: var(
      --modal--sm--padding-top,
      calc(var(--padding-top) * var(--size-multiplier-sm))
  );
  --modal--padding-right: var(
      --modal--sm--padding-right,
      calc(var(--padding-right) * var(--size-multiplier-sm))
  );
  --modal--padding-bottom: var(
      --modal--sm--padding-bottom,
      calc(var(--padding-bottom) * var(--size-multiplier-sm))
  );
  --modal--padding-left: var(
      --modal--sm--padding-left,
      calc(var(--padding-left) * var(--size-multiplier-sm))
  );
  --modal--width: var(--modal--sm--width, calc(480px * var(--size-multiplier-sm)));
}
.modal-wrapper.-md {
  --modal--border-top-left-radius: var(
      --modal--md--border-top-left-radius,
      calc(var(--border-top-left-radius) * var(--size-multiplier-md))
  );
  --modal--border-top-right-radius: var(
      --modal--md--border-top-right-radius,
      calc(var(--border-top-right-radius) * var(--size-multiplier-md))
  );
  --modal--border-bottom-right-radius: var(
      --modal--md--border-bottom-right-radius,
      calc(var(--border-bottom-right-radius) * var(--size-multiplier-md))
  );
  --modal--border-bottom-left-radius: var(
      --modal--md--border-bottom-left-radius,
      calc(var(--border-bottom-left-radius) * var(--size-multiplier-md))
  );
  --modal--font-size: var(
      --modal--md--font-size,
      calc(var(--font-size) * var(--size-multiplier-md))
  );
  --modal--margin-top: var(
      --modal--md--margin-top,
      calc(var(--margin-top) * var(--size-multiplier-md))
  );
  --modal--margin-right: var(
      --modal--md--margin-right,
      calc(var(--margin-right) * var(--size-multiplier-md))
  );
  --modal--margin-bottom: var(
      --modal--md--margin-bottom,
      calc(var(--margin-bottom) * var(--size-multiplier-md))
  );
  --modal--margin-left: var(
      --modal--md--margin-left,
      calc(var(--margin-left) * var(--size-multiplier-md))
  );
  --modal--padding-top: var(
      --modal--md--padding-top,
      calc(var(--padding-top) * var(--size-multiplier-md))
  );
  --modal--padding-right: var(
      --modal--md--padding-right,
      calc(var(--padding-right) * var(--size-multiplier-md))
  );
  --modal--padding-bottom: var(
      --modal--md--padding-bottom,
      calc(var(--padding-bottom) * var(--size-multiplier-md))
  );
  --modal--padding-left: var(
      --modal--md--padding-left,
      calc(var(--padding-left) * var(--size-multiplier-md))
  );
  --modal--width: var(--modal--md--width, calc(480px * var(--size-multiplier-md)));
}
.modal-wrapper.-lg {
  --modal--border-top-left-radius: var(
      --modal--lg--border-top-left-radius,
      calc(var(--border-top-left-radius) * var(--size-multiplier-lg))
  );
  --modal--border-top-right-radius: var(
      --modal--lg--border-top-right-radius,
      calc(var(--border-top-right-radius) * var(--size-multiplier-lg))
  );
  --modal--border-bottom-right-radius: var(
      --modal--lg--border-bottom-right-radius,
      calc(var(--border-bottom-right-radius) * var(--size-multiplier-lg))
  );
  --modal--border-bottom-left-radius: var(
      --modal--lg--border-bottom-left-radius,
      calc(var(--border-bottom-left-radius) * var(--size-multiplier-lg))
  );
  --modal--font-size: var(
      --modal--lg--font-size,
      calc(var(--font-size) * var(--size-multiplier-lg))
  );
  --modal--margin-top: var(
      --modal--lg--margin-top,
      calc(var(--margin-top) * var(--size-multiplier-lg))
  );
  --modal--margin-right: var(
      --modal--lg--margin-right,
      calc(var(--margin-right) * var(--size-multiplier-lg))
  );
  --modal--margin-bottom: var(
      --modal--lg--margin-bottom,
      calc(var(--margin-bottom) * var(--size-multiplier-lg))
  );
  --modal--margin-left: var(
      --modal--lg--margin-left,
      calc(var(--margin-left) * var(--size-multiplier-lg))
  );
  --modal--padding-top: var(
      --modal--lg--padding-top,
      calc(var(--padding-top) * var(--size-multiplier-lg))
  );
  --modal--padding-right: var(
      --modal--lg--padding-right,
      calc(var(--padding-right) * var(--size-multiplier-lg))
  );
  --modal--padding-bottom: var(
      --modal--lg--padding-bottom,
      calc(var(--padding-bottom) * var(--size-multiplier-lg))
  );
  --modal--padding-left: var(
      --modal--lg--padding-left,
      calc(var(--padding-left) * var(--size-multiplier-lg))
  );
  --modal--width: var(--modal--lg--width, calc(480px * var(--size-multiplier-lg)));
}

/**
 * Modal Container
 */
.modal-container {
  position: relative;
}

/**
 * Nav
 */
.nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
}
.nav.-vertical {
  flex-direction: column;
  align-items: flex-start;
}

/**
 * Color variants
 */
.nav.-light {
  --nav--color: var(--nav--light--color, var(--contrast-text-color-light));
  --nav--active--color: var(--nav--light--active--color, var(--contrast-text-color-light));
  --nav--disabled--color: var(--nav--light--disabled--color, var(--text-color-weak));
}
.nav.-dark {
  --nav--color: var(--nav--dark--color, var(--contrast-text-color-dark));
  --nav--active--color: var(--nav--primary--active--color, var(--contrast-text-color-dark));
  --nav--disabled--color: var(--nav--dark--disabled--color, var(--text-color-weak));
}

/**
 * Size variants
 */
.nav.-sm {
  --nav--font-size: var(
      --nav--sm--font-size,
      calc(var(--font-size) * var(--size-multiplier-sm))
  );
  --nav--padding-top: var(
      --nav--sm--padding-top,
      calc(var(--padding-top) * var(--size-multiplier-sm))
  );
  --nav--padding-right: var(
      --nav--sm--padding-right,
      calc(var(--padding-right) * var(--size-multiplier-sm))
  );
  --nav--padding-bottom: var(
      --nav--sm--padding-bottom,
      calc(var(--padding-bottom) * var(--size-multiplier-sm))
  );
  --nav--padding-left: var(
      --nav--sm--padding-left,
      calc(var(--padding-left) * var(--size-multiplier-sm))
  );
}
.nav.-md {
  --nav--font-size: var(
      --nav--md--font-size,
      calc(var(--font-size) * var(--size-multiplier-md))
  );
  --nav--padding-top: var(
      --nav--md--padding-top,
      calc(var(--padding-top) * var(--size-multiplier-md))
  );
  --nav--padding-right: var(
      --nav--md--padding-right,
      calc(var(--padding-right) * var(--size-multiplier-md))
  );
  --nav--padding-bottom: var(
      --nav--md--padding-bottom,
      calc(var(--padding-bottom) * var(--size-multiplier-md))
  );
  --nav--padding-left: var(
      --nav--md--padding-left,
      calc(var(--padding-left) * var(--size-multiplier-md))
  );
}
.nav.-lg {
  --nav--font-size: var(
      --nav--lg--font-size,
      calc(var(--font-size) * var(--size-multiplier-lg))
  );
  --nav--padding-top: var(
      --nav--lg--padding-top,
      calc(var(--padding-top) * var(--size-multiplier-lg))
  );
  --nav--padding-right: var(
      --nav--lg--padding-right,
      calc(var(--padding-right) * var(--size-multiplier-lg))
  );
  --nav--padding-bottom: var(
      --nav--lg--padding-bottom,
      calc(var(--padding-bottom) * var(--size-multiplier-lg))
  );
  --nav--padding-left: var(
      --nav--lg--padding-left,
      calc(var(--padding-left) * var(--size-multiplier-lg))
  );
}

/**
 * Nav Item
 */
.nav .nav-item {
  display: block;
  margin-bottom: 0;
  transition-property: var(--nav--transition-property, background-color, border-color, color);
  transition-timing-function: var(--nav--transition-timing-function, var(--transition-timing-function));
  transition-duration: var(--nav--transition-duration, var(--transition-duration));
  padding: var(--nav--padding, var(--nav--padding-top, var(--padding-top)) var(--nav--padding-right, var(--padding-right)) var(--nav--padding-bottom, var(--padding-bottom)) var(--nav--padding-left, var(--padding-left)));
  color: var(--nav--color);
  font-size: var(--nav--font-size, var(--font-size));
}
.nav .nav-item:hover, .nav .nav-item:focus {
  text-decoration: none;
  outline: 0;
}
.nav .nav-item.-disabled {
  pointer-events: none;
  cursor: default;
  color: var(--nav--disabled--color);
}
.nav .nav-item.-active {
  color: var(--nav--active--color);
  font-weight: bold;
}
.nav .nav-item[to], .nav .nav-item[href] {
  cursor: pointer;
}

/**
 * Navbar
 */
/**
 * Breakpoint mixins
 */
.navbar {
  color: var(--navbar--color);
  background: var(--navbar--background);
  padding: var(--navbar--padding, var(--navbar--padding-top, var(--padding-top)) var(--navbar--padding-right, var(--padding-right)) var(--navbar--padding-bottom, var(--padding-bottom)) var(--navbar--padding-left, var(--padding-left)));
  font-size: var(--navbar--font-size, var(--font-size));
  box-shadow: var(--navbar--box-shadow, var(--navbar--box-shadow-x-offset, var(--box-shadow-offset-x)) var(--navbar--box-shadow-y-offset, var(--box-shadow-offset-y)) var(--navbar--box-shadow-blur-radius, var(--box-shadow-blur-radius)) var(--navbar--box-shadow-spread-radius, var(--box-shadow-spread-radius)) var(--navbar--box-shadow-color, var(--box-shadow-color)));
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  border-width: var(--navbar--border-width, var(--navbar--border-top-width, var(--border-top-width)) var(--navbar--border-right-width, var(--border-right-width)) var(--navbar--border-bottom-width, var(--border-bottom-width)) var(--navbar--border-left-width, var(--border-left-width)));
  border-style: var(--navbar--border-style, var(--navbar--border-top-style, var(--border-top-style)) var(--navbar--border-right-style, var(--border-right-style)) var(--navbar--border-bottom-style, var(--border-bottom-style)) var(--navbar--border-left-style, var(--border-left-style)));
  border-color: var(--navbar--border-color, var(--navbar--border-top-color, var(--border-top-color)) var(--navbar--border-right-color, var(--border-right-color)) var(--navbar--border-bottom-color, var(--border-bottom-color)) var(--navbar--border-left-color, var(--border-left-color)));
  border-radius: var(--navbar--border-radius, var(--navbar--border-top-left-radius, var(--border-top-left-radius)) var(--navbar--border-top-right-radius, var(--border-top-right-radius)) var(--navbar--border-bottom-right-radius, var(--border-bottom-right-radius)) var(--navbar--border-bottom-left-radius, var(--border-bottom-left-radius)));
  transition-property: var(--navbar--transition-property, background-color, border-color);
  transition-timing-function: var(--navbar--transition-timing-function, var(--transition-timing-function));
  transition-duration: var(--navbar--transition-duration, var(--transition-duration));
}
.navbar > .container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}
.navbar > .container.-fluid {
  padding: 0;
}
.navbar .navbar-collapsible .nav-item {
  color: var(--navbar--item--color);
  padding: var(--navbar--item--padding, var(--navbar--item--padding-top, var(--navbar--padding-top, var(--padding-top))) var(--navbar--item--padding-right, var(--navbar--padding-right, var(--padding-right))) var(--navbar--item--padding-bottom, var(--navbar--padding-bottom, var(--padding-bottom))) var(--navbar--item--padding-left, var(--navbar--padding-left, var(--padding-left))));
  font-size: var(--navbar--item--font-size, var(--navbar--font-size, var(--font-size)));
  border-radius: var(--navbar--item--border-radius, var(--navbar--item--border-top-left-radius, var(--navbar--border-top-left-radius, var(--border-top-left-radius))) var(--navbar--item--border-top-right-radius, var(--navbar--border-top-right-radius, var(--border-top-right-radius))) var(--navbar--item--border-bottom-right-radius, var(--navbar--border-bottom-right-radius, var(--border-bottom-right-radius))) var(--navbar--item--border-bottom-left-radius, var(--navbar--border-bottom-left-radius, var(--border-bottom-left-radius))));
  background: var(--navbar--background);
}
.navbar .navbar-collapsible .nav-item.-focused, .navbar .navbar-collapsible .nav-item.-hovered, .navbar .navbar-collapsible .nav-item:focus, .navbar .navbar-collapsible .nav-item:hover {
  color: var(--navbar--item--hover--color, var(--navbar--item--color));
  background: var(--navbar--item--hover--background, var(--navbar--item--background));
}
.navbar .navbar-collapsible .nav-item.-active {
  cursor: pointer;
}
.navbar.-collapsible .navbar-collapsible {
  background: var(--navbar--collapsed--background);
}
.navbar.-collapsible .navbar-collapsible .nav-item {
  background: var(--navbar--collapsed--item--background, var(--navbar--item--background));
  color: var(--navbar--collapsed--item--color, var(--navbar--item--color));
}
.navbar.-collapsible .navbar-collapsible .nav-item:hover {
  color: var(--navbar--collapsed--item--hover--color, var(--navbar--item--hover--color));
  background: var(--navbar--collapsed--item--hover--background, var(--navbar--item--hover--background));
}
.navbar .collapse-toggle {
  display: none;
}
@media screen and (max-width: 575.99px) {
  .navbar.-collapse-xs .navbar-collapsible {
    position: relative;
    display: block;
    width: 100%;
    border-radius: var(--navbar--border-radius, var(--navbar--border-top-left-radius, var(--border-top-left-radius)) var(--navbar--border-top-right-radius, var(--border-top-right-radius)) var(--navbar--border-bottom-right-radius, var(--border-bottom-right-radius)) var(--navbar--border-bottom-left-radius, var(--border-bottom-left-radius)));
  }
  .navbar.-collapse-xs .navbar-collapsible .nav {
    flex-direction: column;
    align-items: flex-start;
  }
  .navbar.-collapse-xs .navbar-collapsible .nav:first-of-type {
    margin-top: var(--navbar--collapsed--margin-top, var(--margin-top));
  }
  .navbar.-collapse-xs .navbar-collapsible .nav .nav-item {
    width: 100%;
    transition-property: var(--navbar--transition-property, background-color, color);
    transition-timing-function: var(--navbar--transition-timing-function, var(--transition-timing-function));
    transition-duration: var(--navbar--transition-duration, var(--transition-duration));
  }
  .navbar.-collapse-xs .navbar-collapsible .nav .dropdown-wrapper {
    width: 100%;
  }
  .navbar.-collapse-xs .navbar-collapsible .nav .dropdown-wrapper .dropdown {
    width: 100%;
    position: relative !important;
    left: auto !important;
    top: auto !important;
    transform-origin: center top;
  }
  .navbar.-collapse-xs .navbar-collapsible .nav .dropdown-wrapper .dropdown [data-popper-arrow] {
    display: none;
  }
  .navbar.-collapse-xs .collapse-toggle {
    display: inline-block;
  }
  .navbar.-collapse-xs .collapse-toggle + .navbar-brand {
    order: -1;
  }
}
@media screen and (max-width: 767.99px) {
  .navbar.-collapse-sm .navbar-collapsible {
    position: relative;
    display: block;
    width: 100%;
    border-radius: var(--navbar--border-radius, var(--navbar--border-top-left-radius, var(--border-top-left-radius)) var(--navbar--border-top-right-radius, var(--border-top-right-radius)) var(--navbar--border-bottom-right-radius, var(--border-bottom-right-radius)) var(--navbar--border-bottom-left-radius, var(--border-bottom-left-radius)));
  }
  .navbar.-collapse-sm .navbar-collapsible .nav {
    flex-direction: column;
    align-items: flex-start;
  }
  .navbar.-collapse-sm .navbar-collapsible .nav:first-of-type {
    margin-top: var(--navbar--collapsed--margin-top, var(--margin-top));
  }
  .navbar.-collapse-sm .navbar-collapsible .nav .nav-item {
    width: 100%;
    transition-property: var(--navbar--transition-property, background-color, color);
    transition-timing-function: var(--navbar--transition-timing-function, var(--transition-timing-function));
    transition-duration: var(--navbar--transition-duration, var(--transition-duration));
  }
  .navbar.-collapse-sm .navbar-collapsible .nav .dropdown-wrapper {
    width: 100%;
  }
  .navbar.-collapse-sm .navbar-collapsible .nav .dropdown-wrapper .dropdown {
    width: 100%;
    position: relative !important;
    left: auto !important;
    top: auto !important;
    transform-origin: center top;
  }
  .navbar.-collapse-sm .navbar-collapsible .nav .dropdown-wrapper .dropdown [data-popper-arrow] {
    display: none;
  }
  .navbar.-collapse-sm .collapse-toggle {
    display: inline-block;
  }
  .navbar.-collapse-sm .collapse-toggle + .navbar-brand {
    order: -1;
  }
}
@media screen and (max-width: 991.99px) {
  .navbar.-collapse-md .navbar-collapsible {
    position: relative;
    display: block;
    width: 100%;
    border-radius: var(--navbar--border-radius, var(--navbar--border-top-left-radius, var(--border-top-left-radius)) var(--navbar--border-top-right-radius, var(--border-top-right-radius)) var(--navbar--border-bottom-right-radius, var(--border-bottom-right-radius)) var(--navbar--border-bottom-left-radius, var(--border-bottom-left-radius)));
  }
  .navbar.-collapse-md .navbar-collapsible .nav {
    flex-direction: column;
    align-items: flex-start;
  }
  .navbar.-collapse-md .navbar-collapsible .nav:first-of-type {
    margin-top: var(--navbar--collapsed--margin-top, var(--margin-top));
  }
  .navbar.-collapse-md .navbar-collapsible .nav .nav-item {
    width: 100%;
    transition-property: var(--navbar--transition-property, background-color, color);
    transition-timing-function: var(--navbar--transition-timing-function, var(--transition-timing-function));
    transition-duration: var(--navbar--transition-duration, var(--transition-duration));
  }
  .navbar.-collapse-md .navbar-collapsible .nav .dropdown-wrapper {
    width: 100%;
  }
  .navbar.-collapse-md .navbar-collapsible .nav .dropdown-wrapper .dropdown {
    width: 100%;
    position: relative !important;
    left: auto !important;
    top: auto !important;
    transform-origin: center top;
  }
  .navbar.-collapse-md .navbar-collapsible .nav .dropdown-wrapper .dropdown [data-popper-arrow] {
    display: none;
  }
  .navbar.-collapse-md .collapse-toggle {
    display: inline-block;
  }
  .navbar.-collapse-md .collapse-toggle + .navbar-brand {
    order: -1;
  }
}
@media screen and (max-width: 1199.99px) {
  .navbar.-collapse-lg .navbar-collapsible {
    position: relative;
    display: block;
    width: 100%;
    border-radius: var(--navbar--border-radius, var(--navbar--border-top-left-radius, var(--border-top-left-radius)) var(--navbar--border-top-right-radius, var(--border-top-right-radius)) var(--navbar--border-bottom-right-radius, var(--border-bottom-right-radius)) var(--navbar--border-bottom-left-radius, var(--border-bottom-left-radius)));
  }
  .navbar.-collapse-lg .navbar-collapsible .nav {
    flex-direction: column;
    align-items: flex-start;
  }
  .navbar.-collapse-lg .navbar-collapsible .nav:first-of-type {
    margin-top: var(--navbar--collapsed--margin-top, var(--margin-top));
  }
  .navbar.-collapse-lg .navbar-collapsible .nav .nav-item {
    width: 100%;
    transition-property: var(--navbar--transition-property, background-color, color);
    transition-timing-function: var(--navbar--transition-timing-function, var(--transition-timing-function));
    transition-duration: var(--navbar--transition-duration, var(--transition-duration));
  }
  .navbar.-collapse-lg .navbar-collapsible .nav .dropdown-wrapper {
    width: 100%;
  }
  .navbar.-collapse-lg .navbar-collapsible .nav .dropdown-wrapper .dropdown {
    width: 100%;
    position: relative !important;
    left: auto !important;
    top: auto !important;
    transform-origin: center top;
  }
  .navbar.-collapse-lg .navbar-collapsible .nav .dropdown-wrapper .dropdown [data-popper-arrow] {
    display: none;
  }
  .navbar.-collapse-lg .collapse-toggle {
    display: inline-block;
  }
  .navbar.-collapse-lg .collapse-toggle + .navbar-brand {
    order: -1;
  }
}
@media screen and (max-width: 1399.99px) {
  .navbar.-collapse-xl .navbar-collapsible {
    position: relative;
    display: block;
    width: 100%;
    border-radius: var(--navbar--border-radius, var(--navbar--border-top-left-radius, var(--border-top-left-radius)) var(--navbar--border-top-right-radius, var(--border-top-right-radius)) var(--navbar--border-bottom-right-radius, var(--border-bottom-right-radius)) var(--navbar--border-bottom-left-radius, var(--border-bottom-left-radius)));
  }
  .navbar.-collapse-xl .navbar-collapsible .nav {
    flex-direction: column;
    align-items: flex-start;
  }
  .navbar.-collapse-xl .navbar-collapsible .nav:first-of-type {
    margin-top: var(--navbar--collapsed--margin-top, var(--margin-top));
  }
  .navbar.-collapse-xl .navbar-collapsible .nav .nav-item {
    width: 100%;
    transition-property: var(--navbar--transition-property, background-color, color);
    transition-timing-function: var(--navbar--transition-timing-function, var(--transition-timing-function));
    transition-duration: var(--navbar--transition-duration, var(--transition-duration));
  }
  .navbar.-collapse-xl .navbar-collapsible .nav .dropdown-wrapper {
    width: 100%;
  }
  .navbar.-collapse-xl .navbar-collapsible .nav .dropdown-wrapper .dropdown {
    width: 100%;
    position: relative !important;
    left: auto !important;
    top: auto !important;
    transform-origin: center top;
  }
  .navbar.-collapse-xl .navbar-collapsible .nav .dropdown-wrapper .dropdown [data-popper-arrow] {
    display: none;
  }
  .navbar.-collapse-xl .collapse-toggle {
    display: inline-block;
  }
  .navbar.-collapse-xl .collapse-toggle + .navbar-brand {
    order: -1;
  }
}
.navbar.-collapse-2xl .navbar-collapsible {
  position: relative;
  display: block;
  width: 100%;
  border-radius: var(--navbar--border-radius, var(--navbar--border-top-left-radius, var(--border-top-left-radius)) var(--navbar--border-top-right-radius, var(--border-top-right-radius)) var(--navbar--border-bottom-right-radius, var(--border-bottom-right-radius)) var(--navbar--border-bottom-left-radius, var(--border-bottom-left-radius)));
}
.navbar.-collapse-2xl .navbar-collapsible .nav {
  flex-direction: column;
  align-items: flex-start;
}
.navbar.-collapse-2xl .navbar-collapsible .nav:first-of-type {
  margin-top: var(--navbar--collapsed--margin-top, var(--margin-top));
}
.navbar.-collapse-2xl .navbar-collapsible .nav .nav-item {
  width: 100%;
  transition-property: var(--navbar--transition-property, background-color, color);
  transition-timing-function: var(--navbar--transition-timing-function, var(--transition-timing-function));
  transition-duration: var(--navbar--transition-duration, var(--transition-duration));
}
.navbar.-collapse-2xl .navbar-collapsible .nav .dropdown-wrapper {
  width: 100%;
}
.navbar.-collapse-2xl .navbar-collapsible .nav .dropdown-wrapper .dropdown {
  width: 100%;
  position: relative !important;
  left: auto !important;
  top: auto !important;
  transform-origin: center top;
}
.navbar.-collapse-2xl .navbar-collapsible .nav .dropdown-wrapper .dropdown [data-popper-arrow] {
  display: none;
}
.navbar.-collapse-2xl .collapse-toggle {
  display: inline-block;
}
.navbar.-collapse-2xl .collapse-toggle + .navbar-brand {
  order: -1;
}
.navbar.-collapse-true .navbar-collapsible {
  position: relative;
  display: block;
  width: 100%;
  border-radius: var(--navbar--border-radius, var(--navbar--border-top-left-radius, var(--border-top-left-radius)) var(--navbar--border-top-right-radius, var(--border-top-right-radius)) var(--navbar--border-bottom-right-radius, var(--border-bottom-right-radius)) var(--navbar--border-bottom-left-radius, var(--border-bottom-left-radius)));
}
.navbar.-collapse-true .navbar-collapsible .nav {
  flex-direction: column;
  align-items: flex-start;
}
.navbar.-collapse-true .navbar-collapsible .nav:first-of-type {
  margin-top: var(--navbar--collapsed--margin-top, var(--margin-top));
}
.navbar.-collapse-true .navbar-collapsible .nav .nav-item {
  width: 100%;
  transition-property: var(--navbar--transition-property, background-color, color);
  transition-timing-function: var(--navbar--transition-timing-function, var(--transition-timing-function));
  transition-duration: var(--navbar--transition-duration, var(--transition-duration));
}
.navbar.-collapse-true .navbar-collapsible .nav .dropdown-wrapper {
  width: 100%;
}
.navbar.-collapse-true .navbar-collapsible .nav .dropdown-wrapper .dropdown {
  width: 100%;
  position: relative !important;
  left: auto !important;
  top: auto !important;
  transform-origin: center top;
}
.navbar.-collapse-true .navbar-collapsible .nav .dropdown-wrapper .dropdown [data-popper-arrow] {
  display: none;
}
.navbar.-collapse-true .collapse-toggle {
  display: inline-block;
}
.navbar.-collapse-true .collapse-toggle + .navbar-brand {
  order: -1;
}

/**
 * Color variants
 */
.navbar.-light {
  --navbar--background: var(--navbar--light--background, var(--color-light));
  --navbar--border-top-color: var(
      --navbar--light--border-top-color,
      var(--color-light-shade-50)
  );
  --navbar--border-right-color: var(
      --navbar--light--border-right-color,
      var(--color-light-shade-50)
  );
  --navbar--border-bottom-color: var(
      --navbar--light--border-bottom-color,
      var(--color-light-shade-50)
  );
  --navbar--border-left-color: var(
      --navbar--light--border-left-color,
      var(--color-light-shade-50)
  );
  --navbar--color: var(--navbar--light--color, var(--contrast-text-color-light));
  --navbar--item--background: var(--navbar--light--item--background, var(--color-light));
  --navbar--item--hover--background: var(
      --navbar--light--item--hover--background,
      var(--color-light-shade-50)
  );
  --navbar--collapsed--background: var(
      --navbar--light--collapsed--background,
      var(--color-light)
  );
}
.navbar.-dark {
  --navbar--background: var(--navbar--dark--background, var(--color-dark));
  --navbar--border-top-color: var(
      --navbar--dark--border-top-color,
      var(--color-dark-tint-50)
  );
  --navbar--border-right-color: var(
      --navbar--dark--border-right-color,
      var(--color-dark-tint-50)
  );
  --navbar--border-bottom-color: var(
      --navbar--dark--border-bottom-color,
      var(--color-dark-tint-50)
  );
  --navbar--border-left-color: var(
      --navbar--dark--border-left-color,
      var(--color-dark-tint-50)
  );
  --navbar--color: var(--navbar--dark--color, var(--contrast-text-color-dark));
  --navbar--item--background: var(--navbar--dark--item--background, var(--color-dark));
  --navbar--item--hover--background: var(
      --navbar--dark--item--hover--background,
      var(--color-dark-tint-50)
  );
  --navbar--collapsed--background: var(
      --navbar--dark--collapsed--background,
      var(--color-dark)
  );
}

/**
 * Size variants
 */
.navbar.-sm {
  --navbar--border-top-left-radius: var(
      --navbar--sm--border-top-left-radius,
      calc(var(--border-top-left-radius) * var(--size-multiplier-sm))
  );
  --navbar--border-top-right-radius: var(
      --navbar--sm--border-top-right-radius,
      calc(var(--border-top-right-radius) * var(--size-multiplier-sm))
  );
  --navbar--border-bottom-right-radius: var(
      --navbar--sm--border-bottom-right-radius,
      calc(var(--border-bottom-right-radius) * var(--size-multiplier-sm))
  );
  --navbar--border-bottom-left-radius: var(
      --navbar--sm--border-bottom-left-radius,
      calc(var(--border-bottom-left-radius) * var(--size-multiplier-sm))
  );
  --navbar--font-size: var(
      --navbar--sm--font-size,
      calc(var(--font-size) * var(--size-multiplier-sm))
  );
  --navbar--padding-top: var(
      --navbar--sm--padding-top,
      calc(var(--padding-top) * var(--size-multiplier-sm))
  );
  --navbar--padding-right: var(
      --navbar--sm--padding-right,
      calc(var(--padding-right) * var(--size-multiplier-sm))
  );
  --navbar--padding-bottom: var(
      --navbar--sm--padding-bottom,
      calc(var(--padding-bottom) * var(--size-multiplier-sm))
  );
  --navbar--padding-left: var(
      --navbar--sm--padding-left,
      calc(var(--padding-left) * var(--size-multiplier-sm))
  );
  --navbar--item--padding-top: var(
      --navbar--sm--item--padding-top,
      calc(calc(var(--padding-top) / 2) * var(--size-multiplier-sm))
  );
  --navbar--item--padding-right: var(
      --navbar--sm--item--padding-right,
      calc(var(--padding-right) * var(--size-multiplier-sm))
  );
  --navbar--item--padding-bottom: var(
      --navbar--sm--item--padding-bottom,
      calc(calc(var(--padding-bottom) / 2) * var(--size-multiplier-sm))
  );
  --navbar--item--padding-left: var(
      --navbar--sm--item--padding-left,
      calc(var(--padding-left) * var(--size-multiplier-sm))
  );
}
.navbar.-md {
  --navbar--border-top-left-radius: var(
      --navbar--md--border-top-left-radius,
      calc(var(--border-top-left-radius) * var(--size-multiplier-md))
  );
  --navbar--border-top-right-radius: var(
      --navbar--md--border-top-right-radius,
      calc(var(--border-top-right-radius) * var(--size-multiplier-md))
  );
  --navbar--border-bottom-right-radius: var(
      --navbar--md--border-bottom-right-radius,
      calc(var(--border-bottom-right-radius) * var(--size-multiplier-md))
  );
  --navbar--border-bottom-left-radius: var(
      --navbar--md--border-bottom-left-radius,
      calc(var(--border-bottom-left-radius) * var(--size-multiplier-md))
  );
  --navbar--font-size: var(
      --navbar--md--font-size,
      calc(var(--font-size) * var(--size-multiplier-md))
  );
  --navbar--padding-top: var(
      --navbar--md--padding-top,
      calc(var(--padding-top) * var(--size-multiplier-md))
  );
  --navbar--padding-right: var(
      --navbar--md--padding-right,
      calc(var(--padding-right) * var(--size-multiplier-md))
  );
  --navbar--padding-bottom: var(
      --navbar--md--padding-bottom,
      calc(var(--padding-bottom) * var(--size-multiplier-md))
  );
  --navbar--padding-left: var(
      --navbar--md--padding-left,
      calc(var(--padding-left) * var(--size-multiplier-md))
  );
  --navbar--item--padding-top: var(
      --navbar--md--item--padding-top,
      calc(calc(var(--padding-top) / 2) * var(--size-multiplier-md))
  );
  --navbar--item--padding-right: var(
      --navbar--md--item--padding-right,
      calc(var(--padding-right) * var(--size-multiplier-md))
  );
  --navbar--item--padding-bottom: var(
      --navbar--md--item--padding-bottom,
      calc(calc(var(--padding-bottom) / 2) * var(--size-multiplier-md))
  );
  --navbar--item--padding-left: var(
      --navbar--md--item--padding-left,
      calc(var(--padding-left) * var(--size-multiplier-md))
  );
}
.navbar.-lg {
  --navbar--border-top-left-radius: var(
      --navbar--lg--border-top-left-radius,
      calc(var(--border-top-left-radius) * var(--size-multiplier-lg))
  );
  --navbar--border-top-right-radius: var(
      --navbar--lg--border-top-right-radius,
      calc(var(--border-top-right-radius) * var(--size-multiplier-lg))
  );
  --navbar--border-bottom-right-radius: var(
      --navbar--lg--border-bottom-right-radius,
      calc(var(--border-bottom-right-radius) * var(--size-multiplier-lg))
  );
  --navbar--border-bottom-left-radius: var(
      --navbar--lg--border-bottom-left-radius,
      calc(var(--border-bottom-left-radius) * var(--size-multiplier-lg))
  );
  --navbar--font-size: var(
      --navbar--lg--font-size,
      calc(var(--font-size) * var(--size-multiplier-lg))
  );
  --navbar--padding-top: var(
      --navbar--lg--padding-top,
      calc(var(--padding-top) * var(--size-multiplier-lg))
  );
  --navbar--padding-right: var(
      --navbar--lg--padding-right,
      calc(var(--padding-right) * var(--size-multiplier-lg))
  );
  --navbar--padding-bottom: var(
      --navbar--lg--padding-bottom,
      calc(var(--padding-bottom) * var(--size-multiplier-lg))
  );
  --navbar--padding-left: var(
      --navbar--lg--padding-left,
      calc(var(--padding-left) * var(--size-multiplier-lg))
  );
  --navbar--item--padding-top: var(
      --navbar--lg--item--padding-top,
      calc(calc(var(--padding-top) / 2) * var(--size-multiplier-lg))
  );
  --navbar--item--padding-right: var(
      --navbar--lg--item--padding-right,
      calc(var(--padding-right) * var(--size-multiplier-lg))
  );
  --navbar--item--padding-bottom: var(
      --navbar--lg--item--padding-bottom,
      calc(calc(var(--padding-bottom) / 2) * var(--size-multiplier-lg))
  );
  --navbar--item--padding-left: var(
      --navbar--lg--item--padding-left,
      calc(var(--padding-left) * var(--size-multiplier-lg))
  );
}

/**
 * Navbar Brand
 */
.navbar .navbar-brand {
  display: inline-flex;
  color: var(--navbar--color);
  padding: var(--navbar--item--padding, var(--navbar--item--padding-top, var(--navbar--padding-top, var(--padding-top))) var(--navbar--item--padding-right, var(--navbar--padding-right, var(--padding-right))) var(--navbar--item--padding-bottom, var(--navbar--padding-bottom, var(--padding-bottom))) var(--navbar--item--padding-left, var(--navbar--padding-left, var(--padding-left))));
  font-size: var(--navbar--brand--font-size, var(--navbar--font-size, var(--font-size)));
  margin-right: var(--navbar--brand--margin-right, var(--margin-right));
  line-height: inherit;
  white-space: nowrap;
  align-items: center;
}
.navbar .navbar-brand:hover, .navbar .navbar-brand:focus {
  text-decoration: none;
}
.navbar .navbar-brand[to], .navbar .navbar-brand[href] {
  cursor: pointer;
}
.navbar .navbar-brand > .h1,
.navbar .navbar-brand > .h2,
.navbar .navbar-brand > .h3,
.navbar .navbar-brand > .h4,
.navbar .navbar-brand > .h5,
.navbar .navbar-brand > .h6,
.navbar .navbar-brand > h1,
.navbar .navbar-brand > h2,
.navbar .navbar-brand > h3,
.navbar .navbar-brand > h4,
.navbar .navbar-brand > h5,
.navbar .navbar-brand > h6 {
  margin-top: 0;
  margin-bottom: 0;
}

/**
 * Navbar Collapsible
 */
.navbar-collapsible {
  display: flex;
  flex-wrap: nowrap;
  flex-grow: 1;
  flex-shrink: 1;
  justify-content: space-between;
  align-items: center;
  transition-property: var(--navbar--transition-property, height, background-color, border-color);
  transition-timing-function: var(--navbar--transition-timing-function, var(--transition-timing-function));
  transition-duration: var(--navbar--transition-duration, var(--transition-duration));
}

/**
 * Pagination
 */
.pagination {
  display: flex;
  max-width: 100%;
  font-size: var(--pagination--font-size, var(--font-size));
}
.pagination .pagination-items {
  list-style: none;
  margin-bottom: 0;
  padding-left: 0;
  display: flex;
  align-items: center;
}
.pagination .pagination-item {
  display: inline-flex;
  border-color: var(--pagination--border-color, var(--pagination--border-top-color, var(--border-top-color)) var(--pagination--border-right-color, var(--border-right-color)) var(--pagination--border-bottom-color, var(--border-bottom-color)) var(--pagination--border-left-color, var(--border-left-color)));
  border-width: var(--pagination--border-width, var(--pagination--border-top-width, var(--border-top-width)) var(--pagination--border-right-width, var(--border-right-width)) var(--pagination--border-bottom-width, var(--border-bottom-width)) var(--pagination--border-left-width, var(--border-left-width)));
  border-style: var(--pagination--border-style, var(--pagination--border-top-style, var(--border-top-style)) var(--pagination--border-right-style, var(--border-right-style)) var(--pagination--border-bottom-style, var(--border-bottom-style)) var(--pagination--border-left-style, var(--border-left-style)));
  border-radius: var(--pagination--border-radius, var(--pagination--border-top-left-radius, var(--border-top-left-radius)) var(--pagination--border-top-right-radius, var(--border-top-right-radius)) var(--pagination--border-bottom-right-radius, var(--border-bottom-right-radius)) var(--pagination--border-bottom-left-radius, var(--border-bottom-left-radius)));
  box-shadow: var(--pagination--box-shadow, var(--pagination--box-shadow-x-offset, var(--box-shadow-offset-x)) var(--pagination--box-shadow-y-offset, var(--box-shadow-offset-y)) var(--pagination--box-shadow-blur-radius, var(--box-shadow-blur-radius)) var(--pagination--box-shadow-spread-radius, var(--box-shadow-spread-radius)) var(--pagination--box-shadow-color, var(--box-shadow-color)));
  padding: var(--pagination--padding, var(--pagination--padding-top, var(--padding-top)) var(--pagination--padding-right, var(--padding-right)) var(--pagination--padding-bottom, var(--padding-bottom)) var(--pagination--padding-left, var(--padding-left)));
  min-width: var(--pagination--min-width, 40px);
  color: var(--pagination--color);
  background-color: var(--pagination--background);
  margin: var(--pagination--margin, var(--pagination--margin-top, var(--margin-top)) var(--pagination--margin-right, var(--margin-right)) var(--pagination--margin-bottom, var(--margin-bottom)) var(--pagination--margin-left, var(--margin-left)));
  text-align: center;
  justify-content: center;
  cursor: pointer;
  transition-property: var(--pagination--transition-property, background, color, border);
  transition-timing-function: var(--pagination--transition-timing-function, var(--transition-timing-function));
  transition-duration: var(--pagination--transition-duration, var(--transition-duration));
}
.pagination .pagination-item:hover:not(.-disabled), .pagination .pagination-item:focus:not(.-disabled) {
  background: var(--pagination--hover--background);
}
.pagination .pagination-item.-active {
  background: var(--pagination--active--background, var(--pagination--background));
  border-color: var(--pagination--active--border-color, var(--pagination--active--border-top-color, var(--pagination--border-top-color, var(--border-top-color))) var(--pagination--active--border-right-color, var(--pagination--border-right-color, var(--border-right-color))) var(--pagination--active--border-bottom-color, var(--pagination--border-bottom-color, var(--border-bottom-color))) var(--pagination--active--border-left-color, var(--pagination--border-left-color, var(--border-left-color))));
  color: var(--pagination--active--color, var(--pagination--color));
  font-weight: bold;
}
.pagination .pagination-item.-active:hover, .pagination .pagination-item.-active:focus {
  background: var(--pagination--active--background, var(--pagination--background));
}
.pagination .pagination-item.-disabled {
  cursor: default;
  color: var(--pagination--disabled--color, var(--pagination--color));
  opacity: var(--pagination--disabled--opacity, 0.75);
}
.pagination .pagination-item.-quick-next.-disabled, .pagination .pagination-item.-quick-previous.-disabled {
  color: var(--pagination--quick--disabled--border-color, var(--pagination--disabled--color));
  border-color: var(--pagination--quick--disabled--border-color, var(--pagination--background));
  opacity: var(--pagination--quick--disabled--opacity, var(--pagination--disabled--opacity, 0.75));
}

/**
 * Color variants
 */
.pagination.-light {
  --pagination--background: var(--pagination--light--background, var(--color-light));
  --pagination--border-top-color: var(
      --pagination--light--border-top-color,
      var(--color-light-shade-50)
  );
  --pagination--border-right-color: var(
      --pagination--light--border-right-color,
      var(--color-light-shade-50)
  );
  --pagination--border-bottom-color: var(
      --pagination--light--border-bottom-color,
      var(--color-light-shade-50)
  );
  --pagination--border-left-color: var(
      --pagination--light--border-left-color,
      var(--color-light-shade-50)
  );
  --pagination--color: var(--pagination--light--color, var(--contrast-text-color-light));
  --pagination--hover--background: var(
      --pagination--light--hover--background,
      var(--color-light-shade-50)
  );
  --pagination--active--background: var(
      --pagination--light--active--background,
      var(--color-primary)
  );
  --pagination--active--border-top-color: var(
      --pagination--light--border-top-color--active,
      var(--color-primary-shade-50)
  );
  --pagination--active--border-right-color: var(
      --pagination--light--border-right-color--active,
      var(--color-primary-shade-50)
  );
  --pagination--active--border-bottom-color: var(
      --pagination--light--border-bottom-color--active,
      var(--color-primary-shade-50)
  );
  --pagination--active--border-left-color: var(
      --pagination--light--border-left-color--active,
      var(--color-primary-shade-50)
  );
  --pagination--active--color: var(
      --pagination--light--active--color,
      var(--contrast-text-color-primary)
  );
  --pagination--disabled--color: var(
      --pagination--light--disabled--color,
      var(--text-color-weak)
  );
}
.pagination.-dark {
  --pagination--background: var(--pagination--dark--background, var(--color-dark));
  --pagination--border-top-color: var(
      --pagination--dark--border-top-color,
      var(--color-dark-tint-50)
  );
  --pagination--border-right-color: var(
      --pagination--dark--border-right-color,
      var(--color-dark-tint-50)
  );
  --pagination--border-bottom-color: var(
      --pagination--dark--border-bottom-color,
      var(--color-dark-tint-50)
  );
  --pagination--border-left-color: var(
      --pagination--dark--border-left-color,
      var(--color-dark-tint-50)
  );
  --pagination--color: var(--pagination--dark--color, var(--contrast-text-color-dark));
  --pagination--hover--background: var(
      --pagination--dark--hover--background,
      var(--color-dark-tint-50)
  );
  --pagination--active--background: var(
      --pagination--dark--active--background,
      var(--color-primary)
  );
  --pagination--active--border-top-color: var(
      --pagination--dark--border-top-color--active,
      var(--color-primary-shade-50)
  );
  --pagination--active--border-right-color: var(
      --pagination--dark--border-right-color--active,
      var(--color-primary-shade-50)
  );
  --pagination--active--border-bottom-color: var(
      --pagination--dark--border-bottom-color--active,
      var(--color-primary-shade-50)
  );
  --pagination--active--border-left-color: var(
      --pagination--dark--border-left-color--active,
      var(--color-primary-shade-50)
  );
  --pagination--active--color: var(
      --pagination--dark--active--color,
      var(--contrast-text-color-primary)
  );
  --pagination--disabled--color: var(
      --pagination--dark--disabled--color,
      var(--text-color-weak)
  );
}

/**
 * Size variants
 */
.pagination.-sm {
  --pagination--border-top-left-radius: var(
      --pagination--sm--border-top-left-radius,
      calc(var(--border-top-left-radius) * var(--size-multiplier-sm))
  );
  --pagination--border-top-right-radius: var(
      --pagination--sm--border-top-right-radius,
      calc(var(--border-top-right-radius) * var(--size-multiplier-sm))
  );
  --pagination--border-bottom-right-radius: var(
      --pagination--sm--border-bottom-right-radius,
      calc(var(--border-bottom-right-radius) * var(--size-multiplier-sm))
  );
  --pagination--border-bottom-left-radius: var(
      --pagination--sm--border-bottom-left-radius,
      calc(var(--border-bottom-left-radius) * var(--size-multiplier-sm))
  );
  --pagination--font-size: var(
      --pagination--sm--font-size,
      calc(var(--font-size) * var(--size-multiplier-sm))
  );
  --pagination--margin-right: var(
      --pagination--sm--margin-right,
      calc(calc(var(--margin-right) / 4) * var(--size-multiplier-sm))
  );
  --pagination--margin-left: var(
      --pagination--sm--margin-left,
      calc(calc(var(--margin-left) / 4) * var(--size-multiplier-sm))
  );
  --pagination--min-width: var(
      --pagination--sm--min-width,
      calc(40px * var(--size-multiplier-sm))
  );
  --pagination--padding-top: var(
      --pagination--sm--padding-top,
      calc(var(--padding-top) / 2 * var(--size-multiplier-sm))
  );
  --pagination--padding-right: var(
      --pagination--sm--padding-right,
      calc(var(--padding-right) / 2 * var(--size-multiplier-sm))
  );
  --pagination--padding-bottom: var(
      --pagination--sm--padding-bottom,
      calc(var(--padding-bottom) / 2 * var(--size-multiplier-sm))
  );
  --pagination--padding-left: var(
      --pagination--sm--padding-left,
      calc(var(--padding-left) / 2 * var(--size-multiplier-sm))
  );
}
.pagination.-md {
  --pagination--border-top-left-radius: var(
      --pagination--md--border-top-left-radius,
      calc(var(--border-top-left-radius) * var(--size-multiplier-md))
  );
  --pagination--border-top-right-radius: var(
      --pagination--md--border-top-right-radius,
      calc(var(--border-top-right-radius) * var(--size-multiplier-md))
  );
  --pagination--border-bottom-right-radius: var(
      --pagination--md--border-bottom-right-radius,
      calc(var(--border-bottom-right-radius) * var(--size-multiplier-md))
  );
  --pagination--border-bottom-left-radius: var(
      --pagination--md--border-bottom-left-radius,
      calc(var(--border-bottom-left-radius) * var(--size-multiplier-md))
  );
  --pagination--font-size: var(
      --pagination--md--font-size,
      calc(var(--font-size) * var(--size-multiplier-md))
  );
  --pagination--margin-right: var(
      --pagination--md--margin-right,
      calc(var(--margin-right) / 4 * var(--size-multiplier-md))
  );
  --pagination--margin-left: var(
      --pagination--md--margin-left,
      calc(var(--margin-left) / 4 * var(--size-multiplier-md))
  );
  --pagination--min-width: var(
      --pagination--md--min-width,
      calc(40px * var(--size-multiplier-md))
  );
  --pagination--padding-top: var(
      --pagination--md--padding-top,
      calc(var(--padding-top) / 2 * var(--size-multiplier-md))
  );
  --pagination--padding-right: var(
      --pagination--md--padding-right,
      calc(var(--padding-right) / 2 * var(--size-multiplier-md))
  );
  --pagination--padding-bottom: var(
      --pagination--md--padding-bottom,
      calc(var(--padding-bottom) / 2 * var(--size-multiplier-md))
  );
  --pagination--padding-left: var(
      --pagination--md--padding-left,
      calc(var(--padding-left) / 2 * var(--size-multiplier-md))
  );
}
.pagination.-lg {
  --pagination--border-top-left-radius: var(
      --pagination--lg--border-top-left-radius,
      calc(var(--border-top-left-radius) * var(--size-multiplier-lg))
  );
  --pagination--border-top-right-radius: var(
      --pagination--lg--border-top-right-radius,
      calc(var(--border-top-right-radius) * var(--size-multiplier-lg))
  );
  --pagination--border-bottom-right-radius: var(
      --pagination--lg--border-bottom-right-radius,
      calc(var(--border-bottom-right-radius) * var(--size-multiplier-lg))
  );
  --pagination--border-bottom-left-radius: var(
      --pagination--lg--border-bottom-left-radius,
      calc(var(--border-bottom-left-radius) * var(--size-multiplier-lg))
  );
  --pagination--font-size: var(
      --pagination--lg--font-size,
      calc(var(--font-size) * var(--size-multiplier-lg))
  );
  --pagination--margin-right: var(
      --pagination--lg--margin-right,
      calc(var(--margin-right) / 4 * var(--size-multiplier-lg))
  );
  --pagination--margin-left: var(
      --pagination--lg--margin-left,
      calc(var(--margin-left) / 4 * var(--size-multiplier-lg))
  );
  --pagination--min-width: var(
      --pagination--lg--min-width,
      calc(40px * var(--size-multiplier-lg))
  );
  --pagination--padding-top: var(
      --pagination--lg--padding-top,
      calc(calc(var(--padding-top) / 2) * var(--size-multiplier-lg))
  );
  --pagination--padding-right: var(
      --pagination--lg--padding-right,
      calc(var(--padding-right) / 2 * var(--size-multiplier-lg))
  );
  --pagination--padding-bottom: var(
      --pagination--lg--padding-bottom,
      calc(var(--padding-bottom) / 2 * var(--size-multiplier-lg))
  );
  --pagination--padding-left: var(
      --pagination--lg--padding-left,
      calc(var(--padding-left) / 2 * var(--size-multiplier-lg))
  );
}

/**
 * Breakpoint mixins
 */
/**
 * Popover
 */
.popover-wrapper {
  display: inline-block;
  position: relative;
}
.popover-wrapper .popover {
  position: absolute;
  z-index: var(--popover--z-index, 2000);
  word-wrap: break-word;
  width: max-content;
  top: 0;
  left: 0;
  text-align: left;
  list-style: none;
  line-height: var(--popover--line-height, var(--line-height));
  box-shadow: var(--popover--box-shadow, var(--popover--box-shadow-x-offset, var(--box-shadow-offset-x)) var(--popover--box-shadow-y-offset, var(--box-shadow-offset-y)) var(--popover--box-shadow-blur-radius, var(--box-shadow-blur-radius)) var(--popover--box-shadow-spread-radius, var(--box-shadow-spread-radius)) var(--popover--box-shadow-color, var(--box-shadow-color)));
  background-clip: padding-box;
  display: inline-block;
  white-space: normal;
  width: var(--popover--width, 280px);
  max-width: var(--popover--max-width, 90vw);
  color: var(--popover--color);
  font-size: var(--popover--font-size, var(--font-size));
}
.popover-wrapper .popover:focus:hover {
  outline-width: 0;
}
.popover-wrapper .popover[data-popup-placement^=top] {
  transform-origin: center bottom;
}
.popover-wrapper .popover[data-popup-placement^=bottom] {
  transform-origin: center top;
}
.popover-wrapper .popover[data-popup-placement^=right] {
  transform-origin: left center;
}
.popover-wrapper .popover[data-popup-placement^=left] {
  transform-origin: right center;
}
.popover-wrapper .popover > .arrow {
  position: absolute;
}
.popover-wrapper .popover > .arrow,
.popover-wrapper .popover > .arrow::after {
  display: block;
  width: 0;
  height: 0;
  border-color: transparent;
  border-style: solid;
  position: absolute;
}
.popover-wrapper .popover > .arrow::after {
  content: "";
}
.popover-wrapper .popover[data-popup-placement^=top] > .arrow {
  border-bottom-width: 0;
}
.popover-wrapper .popover[data-popup-placement^=top] > .arrow::after {
  border-bottom-width: 0;
}
.popover-wrapper .popover[data-popup-placement^=bottom] > .arrow {
  border-top-width: 0;
}
.popover-wrapper .popover[data-popup-placement^=bottom] > .arrow::after {
  border-top-width: 0;
}
.popover-wrapper .popover[data-popup-placement^=right] > .arrow {
  border-left-width: 0;
}
.popover-wrapper .popover[data-popup-placement^=right] > .arrow::after {
  border-left-width: 0;
}
.popover-wrapper .popover[data-popup-placement^=left] > .arrow {
  border-right-width: 0;
}
.popover-wrapper .popover[data-popup-placement^=left] > .arrow::after {
  border-right-width: 0;
}
.popover-wrapper .popover > .arrow {
  width: var(--popover--arrow--size, 6px);
  height: var(--popover--arrow--size, 6px);
}
.popover-wrapper .popover > .arrow, .popover-wrapper .popover > .arrow::after {
  border-width: var(--popover--arrow--size, 6px);
}
.popover-wrapper .popover[data-popup-placement^=top] > .arrow::after, .popover-wrapper .popover[data-popup-placement^=bottom] > .arrow::after {
  margin-left: calc(var(--popover--arrow--size, 6px) * -1);
}
.popover-wrapper .popover[data-popup-placement^=left] > .arrow::after, .popover-wrapper .popover[data-popup-placement^=right] > .arrow::after {
  margin-top: calc(var(--popover--arrow--size, 6px) * -1);
}
.popover-wrapper .popover[data-popup-placement^=top] > .arrow {
  bottom: calc(var(--popover--arrow--size, 6px) * -1);
}
.popover-wrapper .popover[data-popup-placement^=top] > .arrow::after {
  bottom: 1px;
}
.popover-wrapper .popover[data-popup-placement^=bottom] > .arrow {
  top: calc(var(--popover--arrow--size, 6px) * -1);
}
.popover-wrapper .popover[data-popup-placement^=bottom] > .arrow::after {
  top: 1px;
}
.popover-wrapper .popover[data-popup-placement^=left] > .arrow {
  right: calc(var(--popover--arrow--size, 6px) * -1);
}
.popover-wrapper .popover[data-popup-placement^=left] > .arrow::after {
  right: 1px;
}
.popover-wrapper .popover[data-popup-placement^=right] > .arrow {
  left: calc(var(--popover--arrow--size, 6px) * -1);
}
.popover-wrapper .popover[data-popup-placement^=right] > .arrow::after {
  left: 1px;
}
.popover-wrapper .popover > .popover-header {
  border-style: var(--popover--header--border-style, var(--popover--header--border-top-style, var(--popover--border-top-style, var(--border-top-style))) var(--popover--header--border-right-style, var(--popover--border-right-style, var(--border-right-style))) var(--popover--header--border-bottom-style, var(--popover--border-bottom-style, var(--border-bottom-style))) var(--popover--header--border-left-style, var(--popover--border-left-style, var(--border-left-style))));
  border-width: var(--popover--header--border-width, var(--popover--header--border-top-width, var(--popover--border-top-width, var(--border-top-width))) var(--popover--header--border-right-width, var(--popover--border-right-width, var(--border-right-width))) var(--popover--header--border-bottom-width, 0) var(--popover--header--border-left-width, var(--popover--border-left-width, var(--border-left-width))));
  border-color: var(--popover--header--border-color, var(--popover--header--border-top-color, var(--popover--border-top-color, var(--border-top-color))) var(--popover--header--border-right-color, var(--popover--border-right-color, var(--border-right-color))) var(--popover--header--border-bottom-color, var(--popover--border-bottom-color, var(--border-bottom-color))) var(--popover--header--border-left-color, var(--popover--border-left-color, var(--border-left-color))));
  padding: var(--popover--header--padding, var(--popover--header--padding-top, var(--popover--padding-top, var(--padding-top))) var(--popover--header--padding-right, var(--popover--padding-right, var(--padding-right))) var(--popover--header--padding-bottom, var(--popover--padding-bottom, var(--padding-bottom))) var(--popover--header--padding-left, var(--popover--padding-left, var(--padding-left))));
  background-color: var(--popover--header--background, var(--popover--background));
}
.popover-wrapper .popover > .popover-body {
  border-style: var(--popover--body--border-style, var(--popover--body--border-top-style, var(--popover--border-top-style, var(--border-top-style))) var(--popover--body--border-right-style, var(--popover--border-right-style, var(--border-right-style))) var(--popover--body--border-bottom-style, var(--popover--border-bottom-style, var(--border-bottom-style))) var(--popover--body--border-left-style, var(--popover--border-left-style, var(--border-left-style))));
  border-width: var(--popover--body--border-width, var(--popover--body--border-top-width, var(--popover--border-top-width, var(--border-top-width))) var(--popover--body--border-right-width, var(--popover--border-right-width, var(--border-right-width))) var(--popover--body--border-bottom-width, var(--popover--border-bottom-width, var(--border-bottom-width))) var(--popover--body--border-left-width, var(--popover--border-left-width, var(--border-left-width))));
  border-color: var(--popover--body--border-color, var(--popover--body--border-top-color, var(--popover--border-top-color, var(--border-top-color))) var(--popover--body--border-right-color, var(--popover--border-right-color, var(--border-right-color))) var(--popover--body--border-bottom-color, var(--popover--border-bottom-color, var(--border-bottom-color))) var(--popover--body--border-left-color, var(--popover--border-left-color, var(--border-left-color))));
  padding: var(--popover--body--padding, var(--popover--body--padding-top, var(--popover--padding-top, var(--padding-top))) var(--popover--body--padding-right, var(--popover--padding-right, var(--padding-right))) var(--popover--body--padding-bottom, var(--popover--padding-bottom, var(--padding-bottom))) var(--popover--body--padding-left, var(--popover--padding-left, var(--padding-left))));
  background-color: var(--popover--body--background, var(--popover--background));
}
.popover-wrapper .popover > .popover-footer {
  border-style: var(--popover--footer--border-style, var(--popover--footer--border-top-style, var(--popover--border-top-style, var(--border-top-style))) var(--popover--footer--border-right-style, var(--popover--border-right-style, var(--border-right-style))) var(--popover--footer--border-bottom-style, var(--popover--border-bottom-style, var(--border-bottom-style))) var(--popover--footer--border-left-style, var(--popover--border-left-style, var(--border-left-style))));
  border-width: var(--popover--footer--border-width, var(--popover--footer--border-top-width, 0) var(--popover--footer--border-right-width, var(--popover--border-right-width, var(--border-right-width))) var(--popover--footer--border-bottom-width, var(--popover--border-bottom-width, var(--border-bottom-width))) var(--popover--footer--border-left-width, var(--popover--border-left-width, var(--border-left-width))));
  border-color: var(--popover--footer--border-color, var(--popover--footer--border-top-color, var(--popover--border-top-color, var(--border-top-color))) var(--popover--footer--border-right-color, var(--popover--border-right-color, var(--border-right-color))) var(--popover--footer--border-bottom-color, var(--popover--border-bottom-color, var(--border-bottom-color))) var(--popover--footer--border-left-color, var(--popover--border-left-color, var(--border-left-color))));
  padding: var(--popover--footer--padding, var(--popover--footer--padding-top, var(--popover--padding-top, var(--padding-top))) var(--popover--footer--padding-right, var(--popover--padding-right, var(--padding-right))) var(--popover--footer--padding-bottom, var(--popover--padding-bottom, var(--padding-bottom))) var(--popover--footer--padding-left, var(--popover--padding-left, var(--padding-left))));
  background-color: var(--popover--footer--background, var(--popover--background));
}
.popover-wrapper .popover > div:first-of-type {
  border-top-left-radius: var(--popover--border-top-left-radius, var(--border-top-left-radius));
  border-top-right-radius: var(--popover--border-top-right-radius, var(--border-top-right-radius));
}
.popover-wrapper .popover > div:last-of-type {
  border-bottom-left-radius: var(--popover--border-bottom-left-radius, var(--border-bottom-left-radius));
  border-bottom-right-radius: var(--popover--border-bottom-right-radius, var(--border-bottom-right-radius));
}
.popover-wrapper .popover[data-popup-placement^=top] > .arrow {
  border-top-color: var(--popover--border-bottom-color, var(--border-bottom-color));
}
.popover-wrapper .popover[data-popup-placement^=top] > .arrow::after {
  border-top-color: var(--popover--background);
}
.popover-wrapper .popover[data-popup-placement^=right] > .arrow {
  border-right-color: var(--popover--border-left-color, var(--border-left-color));
}
.popover-wrapper .popover[data-popup-placement^=right] > .arrow::after {
  border-right-color: var(--popover--background);
}
.popover-wrapper .popover[data-popup-placement^=bottom] > .arrow {
  border-bottom-color: var(--popover--border-top-color, var(--border-top-color));
}
.popover-wrapper .popover[data-popup-placement^=bottom] > .arrow::after {
  border-bottom-color: var(--popover--background);
}
.popover-wrapper .popover[data-popup-placement^=left] > .arrow {
  border-left-color: var(--popover--border-right-color, var(--border-right-color));
}
.popover-wrapper .popover[data-popup-placement^=left] > .arrow::after {
  border-left-color: var(--popover--background);
}

/**
 * Color variants
 */
.popover-wrapper.-light {
  --popover--background: var(--popover--light--background, var(--color-white));
  --popover--border-top-color: var(
      --popover--light--border-top-color,
      var(--color-light-shade-50)
  );
  --popover--border-right-color: var(
      --popover--light--border-right-color,
      var(--color-light-shade-50)
  );
  --popover--border-bottom-color: var(
      --popover--light--border-bottom-color,
      var(--color-light-shade-50)
  );
  --popover--border-left-color: var(
      --popover--light--border-left-color,
      var(--color-light-shade-50)
  );
  --popover--color: var(--popover--light--color, var(--contrast-text-color-white));
  --popover--header--background: var(
      --popover--light--header--background,
      var(--color-gray-50)
  );
  --popover--footer--background: var(
      --popover--light--footer--background,
      var(--color-gray-50)
  );
}
.popover-wrapper.-dark {
  --popover--background: var(--popover--dark--background, var(--color-dark));
  --popover--border-top-color: var(
      --popover--dark--border-top-color,
      var(--color-dark-tint-50)
  );
  --popover--border-right-color: var(
      --popover--dark--border-right-color,
      var(--color-dark-tint-50)
  );
  --popover--border-bottom-color: var(
      --popover--dark--border-bottom-color,
      var(--color-dark-tint-50)
  );
  --popover--border-left-color: var(
      --popover--dark--border-left-color,
      var(--color-dark-tint-50)
  );
  --popover--color: var(--popover--dark--color, var(--contrast-text-color-dark));
  --popover--header--background: var(
      --popover--dark--header--background,
      var(--color-dark-tint-50)
  );
  --popover--footer--background: var(
      --popover--dark--footer--background,
      var(--color-dark-tint-50)
  );
}

/**
 * Size variants
 */
.popover-wrapper.-sm {
  --popover--border-top-left-radius: var(
      --popover--sm--border-top-left-radius,
      calc(var(--border-top-left-radius) * var(--size-multiplier-sm))
  );
  --popover--border-top-right-radius: var(
      --popover--sm--border-top-right-radius,
      calc(var(--border-top-right-radius) * var(--size-multiplier-sm))
  );
  --popover--border-bottom-right-radius: var(
      --popover--sm--border-bottom-right-radius,
      calc(var(--border-bottom-right-radius) * var(--size-multiplier-sm))
  );
  --popover--border-bottom-left-radius: var(
      --popover--sm--border-bottom-left-radius,
      calc(var(--border-bottom-left-radius) * var(--size-multiplier-sm))
  );
  --popover--font-size: var(
      --popover--sm--font-size,
      calc(var(--font-size) * var(--size-multiplier-sm))
  );
  --popover--margin-top: var(
      --popover--sm--margin-top,
      calc(calc(var(--margin-top) / 2) * var(--size-multiplier-sm))
  );
  --popover--margin-right: var(
      --popover--sm--margin-right,
      calc(calc(var(--margin-right) / 2) * var(--size-multiplier-sm))
  );
  --popover--margin-bottom: var(
      --popover--sm--margin-bottom,
      calc(calc(var(--margin-bottom) / 2) * var(--size-multiplier-sm))
  );
  --popover--margin-left: var(
      --popover--sm--margin-left,
      calc(calc(var(--margin-left) / 2) * var(--size-multiplier-sm))
  );
  --popover--padding-top: var(
      --popover--sm--padding-top,
      calc(calc(var(--padding-top) * 3 / 4) * var(--size-multiplier-sm))
  );
  --popover--padding-right: var(
      --popover--sm--padding-right,
      calc(var(--padding-right) * var(--size-multiplier-sm))
  );
  --popover--padding-bottom: var(
      --popover--sm--padding-bottom,
      calc(calc(var(--padding-bottom) * 3 / 4) * var(--size-multiplier-sm))
  );
  --popover--padding-left: var(
      --popover--sm--padding-left,
      calc(var(--padding-left) * var(--size-multiplier-sm))
  );
  --popover--header--padding-bottom: var(
      --popover--sm--header--padding-bottom,
      var(----padding-bottom-sm)
  );
  --popover--header--padding-left: var(
      --popover--sm--header--padding-left,
      var(----padding-left-sm)
  );
  --popover--body--padding-bottom: var(
      --popover--sm--body--padding-bottom,
      var(----padding-bottom-sm)
  );
  --popover--body--padding-left: var(
      --popover--sm--body--padding-left,
      var(----padding-left-sm)
  );
  --popover--footer--padding-bottom: var(
      --popover--sm--footer--padding-bottom,
      var(----padding-bottom-sm)
  );
  --popover--footer--padding-left: var(
      --popover--sm--footer--padding-left,
      var(----padding-left-sm)
  );
}
.popover-wrapper.-md {
  --popover--border-top-left-radius: var(
      --popover--md--border-top-left-radius,
      calc(var(--border-top-left-radius) * var(--size-multiplier-md))
  );
  --popover--border-top-right-radius: var(
      --popover--md--border-top-right-radius,
      calc(var(--border-top-right-radius) * var(--size-multiplier-md))
  );
  --popover--border-bottom-right-radius: var(
      --popover--md--border-bottom-right-radius,
      calc(var(--border-bottom-right-radius) * var(--size-multiplier-md))
  );
  --popover--border-bottom-left-radius: var(
      --popover--md--border-bottom-left-radius,
      calc(var(--border-bottom-left-radius) * var(--size-multiplier-md))
  );
  --popover--font-size: var(
      --popover--md--font-size,
      calc(var(--font-size) * var(--size-multiplier-md))
  );
  --popover--margin-top: var(
      --popover--md--margin-top,
      calc(calc(var(--margin-top) / 2) * var(--size-multiplier-md))
  );
  --popover--margin-right: var(
      --popover--md--margin-right,
      calc(calc(var(--margin-right) / 2) * var(--size-multiplier-md))
  );
  --popover--margin-bottom: var(
      --popover--md--margin-bottom,
      calc(calc(var(--margin-bottom) / 2) * var(--size-multiplier-md))
  );
  --popover--margin-left: var(
      --popover--md--margin-left,
      calc(calc(var(--margin-left) / 2) * var(--size-multiplier-md))
  );
  --popover--padding-top: var(
      --popover--md--padding-top,
      calc(calc(var(--padding-top) * 3 / 4) * var(--size-multiplier-md))
  );
  --popover--padding-right: var(
      --popover--md--padding-right,
      calc(var(--padding-right) * var(--size-multiplier-md))
  );
  --popover--padding-bottom: var(
      --popover--md--padding-bottom,
      calc(calc(var(--padding-bottom) * 3 / 4) * var(--size-multiplier-md))
  );
  --popover--padding-left: var(
      --popover--md--padding-left,
      calc(var(--padding-left) * var(--size-multiplier-md))
  );
  --popover--header--padding-bottom: var(
      --popover--md--header--padding-bottom,
      var(----padding-bottom-md)
  );
  --popover--header--padding-left: var(
      --popover--md--header--padding-left,
      var(----padding-left-md)
  );
  --popover--body--padding-bottom: var(
      --popover--md--body--padding-bottom,
      var(----padding-bottom-md)
  );
  --popover--body--padding-left: var(
      --popover--md--body--padding-left,
      var(----padding-left-md)
  );
  --popover--footer--padding-bottom: var(
      --popover--md--footer--padding-bottom,
      var(----padding-bottom-md)
  );
  --popover--footer--padding-left: var(
      --popover--md--footer--padding-left,
      var(----padding-left-md)
  );
}
.popover-wrapper.-lg {
  --popover--border-top-left-radius: var(
      --popover--lg--border-top-left-radius,
      calc(var(--border-top-left-radius) * var(--size-multiplier-lg))
  );
  --popover--border-top-right-radius: var(
      --popover--lg--border-top-right-radius,
      calc(var(--border-top-right-radius) * var(--size-multiplier-lg))
  );
  --popover--border-bottom-right-radius: var(
      --popover--lg--border-bottom-right-radius,
      calc(var(--border-bottom-right-radius) * var(--size-multiplier-lg))
  );
  --popover--border-bottom-left-radius: var(
      --popover--lg--border-bottom-left-radius,
      calc(var(--border-bottom-left-radius) * var(--size-multiplier-lg))
  );
  --popover--font-size: var(
      --popover--lg--font-size,
      calc(var(--font-size) * var(--size-multiplier-lg))
  );
  --popover--margin-top: var(
      --popover--lg--margin-top,
      calc(calc(var(--margin-top) / 2) * var(--size-multiplier-lg))
  );
  --popover--margin-right: var(
      --popover--lg--margin-right,
      calc(calc(var(--margin-right) / 2) * var(--size-multiplier-lg))
  );
  --popover--margin-bottom: var(
      --popover--lg--margin-bottom,
      calc(calc(var(--margin-bottom) / 2) * var(--size-multiplier-lg))
  );
  --popover--margin-left: var(
      --popover--lg--margin-left,
      calc(calc(var(--margin-left) / 2) * var(--size-multiplier-lg))
  );
  --popover--padding-top: var(
      --popover--lg--padding-top,
      calc(calc(var(--padding-top) * 3 / 4) * var(--size-multiplier-lg))
  );
  --popover--padding-right: var(
      --popover--lg--padding-right,
      calc(var(--padding-right) * var(--size-multiplier-lg))
  );
  --popover--padding-bottom: var(
      --popover--lg--padding-bottom,
      calc(calc(var(--padding-bottom) * 3 / 4) * var(--size-multiplier-lg))
  );
  --popover--padding-left: var(
      --popover--lg--padding-left,
      calc(var(--padding-left) * var(--size-multiplier-lg))
  );
  --popover--header--padding-bottom: var(
      --popover--lg--header--padding-bottom,
      var(----padding-bottom-lg)
  );
  --popover--header--padding-left: var(
      --popover--lg--header--padding-left,
      var(----padding-left-lg)
  );
  --popover--body--padding-bottom: var(
      --popover--lg--body--padding-bottom,
      var(----padding-bottom-lg)
  );
  --popover--body--padding-left: var(
      --popover--lg--body--padding-left,
      var(----padding-left-lg)
  );
  --popover--footer--padding-bottom: var(
      --popover--lg--footer--padding-bottom,
      var(----padding-bottom-lg)
  );
  --popover--footer--padding-left: var(
      --popover--lg--footer--padding-left,
      var(----padding-left-lg)
  );
}

/**
 * Progress
 */
.progress {
  display: flex;
  flex-basis: 100%;
  position: relative;
  overflow: hidden;
  background: var(--progress--background);
  border-radius: var(--progress--border-radius, var(--progress--border-top-left-radius, var(--border-top-left-radius)) var(--progress--border-top-right-radius, var(--border-top-right-radius)) var(--progress--border-bottom-right-radius, var(--border-bottom-right-radius)) var(--progress--border-bottom-left-radius, var(--border-bottom-left-radius)));
  border-color: var(--progress--border-color, var(--progress--border-top-color, var(--border-top-color)) var(--progress--border-right-color, var(--border-right-color)) var(--progress--border-bottom-color, var(--border-bottom-color)) var(--progress--border-left-color, var(--border-left-color)));
  border-style: var(--progress--border-style, var(--progress--border-top-style, var(--border-top-style)) var(--progress--border-right-style, var(--border-right-style)) var(--progress--border-bottom-style, var(--border-bottom-style)) var(--progress--border-left-style, var(--border-left-style)));
  border-width: var(--progress--border-width, var(--progress--border-top-width, var(--border-top-width)) var(--progress--border-right-width, var(--border-right-width)) var(--progress--border-bottom-width, var(--border-bottom-width)) var(--progress--border-left-width, var(--border-left-width)));
  box-shadow: var(--progress--box-shadow, var(--progress--box-shadow-x-offset, var(--box-shadow-offset-x)) var(--progress--box-shadow-y-offset, var(--box-shadow-offset-y)) var(--progress--box-shadow-blur-radius, var(--box-shadow-blur-radius)) var(--progress--box-shadow-spread-radius, var(--box-shadow-spread-radius)) var(--progress--box-shadow-color, var(--box-shadow-color)));
  height: var(--progress--height);
}

/**
 * Color variants
 */
.progress.-light {
  --progress--background: var(--progress--light--background, var(--color-light));
  --progress--border-top-color: var(
      --progress--light--border-top-color,
      var(--color-light-shade-50)
  );
  --progress--border-right-color: var(
      --progress--light--border-right-color,
      var(--color-light-shade-50)
  );
  --progress--border-bottom-color: var(
      --progress--light--border-bottom-color,
      var(--color-light-shade-50)
  );
  --progress--border-left-color: var(
      --progress--light--border-left-color,
      var(--color-light-shade-50)
  );
}
.progress.-dark {
  --progress--background: var(--progress--dark--background, var(--color-dark));
  --progress--border-top-color: var(
      --progress--dark--border-top-color,
      var(--color-dark-tint-50)
  );
  --progress--border-right-color: var(
      --progress--dark--border-right-color,
      var(--color-dark-tint-50)
  );
  --progress--border-bottom-color: var(
      --progress--dark--border-bottom-color,
      var(--color-dark-tint-50)
  );
  --progress--border-left-color: var(
      --progress--dark--border-left-color,
      var(--color-dark-tint-50)
  );
}

/**
 * Size variants
 */
.progress.-sm {
  --progress--border-top-left-radius: var(
      --progress--sm--border-top-left-radius,
      calc(var(--border-top-left-radius) * var(--size-multiplier-sm))
  );
  --progress--border-top-right-radius: var(
      --progress--sm--border-top-right-radius,
      calc(var(--border-top-right-radius) * var(--size-multiplier-sm))
  );
  --progress--border-bottom-right-radius: var(
      --progress--sm--border-bottom-right-radius,
      calc(var(--border-bottom-right-radius) * var(--size-multiplier-sm))
  );
  --progress--border-bottom-left-radius: var(
      --progress--sm--border-bottom-left-radius,
      calc(var(--border-bottom-left-radius) * var(--size-multiplier-sm))
  );
  --progress--height: var(--progress--sm--height, calc(0.75rem * var(--size-multiplier-sm)));
}
.progress.-md {
  --progress--border-top-left-radius: var(
      --progress--md--border-top-left-radius,
      calc(var(--border-top-left-radius) * var(--size-multiplier-md))
  );
  --progress--border-top-right-radius: var(
      --progress--md--border-top-right-radius,
      calc(var(--border-top-right-radius) * var(--size-multiplier-md))
  );
  --progress--border-bottom-right-radius: var(
      --progress--md--border-bottom-right-radius,
      calc(var(--border-bottom-right-radius) * var(--size-multiplier-md))
  );
  --progress--border-bottom-left-radius: var(
      --progress--md--border-bottom-left-radius,
      calc(var(--border-bottom-left-radius) * var(--size-multiplier-md))
  );
  --progress--height: var(--progress--md--height, calc(0.75rem * var(--size-multiplier-md)));
}
.progress.-lg {
  --progress--border-top-left-radius: var(
      --progress--lg--border-top-left-radius,
      calc(var(--border-top-left-radius) * var(--size-multiplier-lg))
  );
  --progress--border-top-right-radius: var(
      --progress--lg--border-top-right-radius,
      calc(var(--border-top-right-radius) * var(--size-multiplier-lg))
  );
  --progress--border-bottom-right-radius: var(
      --progress--lg--border-bottom-right-radius,
      calc(var(--border-bottom-right-radius) * var(--size-multiplier-lg))
  );
  --progress--border-bottom-left-radius: var(
      --progress--lg--border-bottom-left-radius,
      calc(var(--border-bottom-left-radius) * var(--size-multiplier-lg))
  );
  --progress--height: var(--progress--lg--height, calc(0.75rem * var(--size-multiplier-lg)));
}

/**
 * Progress bar
 */
.progress-bar {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  white-space: nowrap;
  height: 100%;
  color: var(--progress-bar--color);
  background: var(--progress-bar--background);
}

/**
 * Color variants
 */
.progress-bar.-primary {
  --progress-bar--color: var(
      --progress-bar--primary--color,
      var(--contrast-text-color-primary)
  );
  --progress-bar--background: var(--progress-bar--primary--background, var(--color-primary));
}
.progress-bar.-secondary {
  --progress-bar--color: var(
      --progress-bar--secondary--color,
      var(--contrast-text-color-secondary)
  );
  --progress-bar--background: var(
      --progress-bar--secondary--background,
      var(--color-secondary)
  );
}
.progress-bar.-light {
  --progress-bar--color: var(--progress-bar--light--color, var(--contrast-text-color-light));
  --progress-bar--background: var(--progress-bar--light--background, var(--color-white));
}
.progress-bar.-dark {
  --progress-bar--color: var(--progress-bar--dark--color, var(--contrast-text-color-dark));
  --progress-bar--background: var(--progress-bar--dark--background, var(--color-dark));
}
.progress-bar.-info {
  --progress-bar--color: var(--progress-bar--info--color, var(--contrast-text-color-info));
  --progress-bar--background: var(--progress-bar--info--background, var(--color-info));
}
.progress-bar.-success {
  --progress-bar--color: var(
      --progress-bar--success--color,
      var(--contrast-text-color-success)
  );
  --progress-bar--background: var(--progress-bar--success--background, var(--color-success));
}
.progress-bar.-warning {
  --progress-bar--color: var(
      --progress-bar--warning--color,
      var(--contrast-text-color-warning)
  );
  --progress-bar--background: var(--progress-bar--warning--background, var(--color-warning));
}
.progress-bar.-danger {
  --progress-bar--color: var(
      --progress-bar--danger--color,
      var(--contrast-text-color-danger)
  );
  --progress-bar--background: var(--progress-bar--danger--background, var(--color-danger));
}

/**
 * Radio
 */
.radio {
  position: relative;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  outline: none;
  margin-right: var(--radio--margin-right, var(--margin-right));
}
.radio:last-of-type {
  margin-right: 0;
}
.radio.-disabled {
  cursor: default;
}
.radio.-disabled .radio-label::before, .radio.-disabled .radio-label::after {
  cursor: not-allowed;
}
.radio .radio-label {
  cursor: pointer;
  margin-bottom: 0;
  display: inline-flex;
  align-items: center;
  position: relative;
  transition-property: var(--radio--transition-property, color);
  transition-duration: var(--radio--transition-duration, var(--transition-duration));
  transition-timing-function: var(--radio--transition-timing-function, var(--transition-timing-function));
  color: var(--radio--label--color);
  font-size: var(--radio--label--font-size);
}
.radio .radio-label::before, .radio .radio-label::after {
  width: var(--radio--size);
  height: var(--radio--size);
  display: inline-flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
.radio .radio-label::before {
  content: "";
  user-select: none;
  border-color: var(--radio--border-color, var(--radio--border-top-color, var(--border-top-color)) var(--radio--border-right-color, var(--border-right-color)) var(--radio--border-bottom-color, var(--border-bottom-color)) var(--radio--border-left-color, var(--border-left-color)));
  border-style: var(--radio--border-style, var(--radio--border-top-style, var(--border-top-style)) var(--radio--border-right-style, var(--border-right-style)) var(--radio--border-bottom-style, var(--border-bottom-style)) var(--radio--border-left-style, var(--border-left-style)));
  border-width: var(--radio--border-width, var(--radio--border-top-width, var(--border-top-width)) var(--radio--border-right-width, var(--border-right-width)) var(--radio--border-bottom-width, var(--border-bottom-width)) var(--radio--border-left-width, var(--border-left-width)));
  border-radius: 100%;
  box-shadow: var(--radio--box-shadow, var(--radio--box-shadow-x-offset, var(--box-shadow-offset-x)) var(--radio--box-shadow-y-offset, var(--box-shadow-offset-y)) var(--radio--box-shadow-blur-radius, var(--box-shadow-blur-radius)) var(--radio--box-shadow-spread-radius, var(--box-shadow-spread-radius)) var(--radio--box-shadow-color, var(--box-shadow-color)));
  margin-right: var(--radio--margin-right, var(--margin-right-1-2));
  transition-property: var(--radio--transition-property, background-color, border-color);
  transition-duration: var(--radio--transition-duration, var(--transition-duration));
  transition-timing-function: var(--radio--transition-timing-function, var(--transition-timing-function));
  background-color: var(--radio--background);
}
.radio .radio-label::after {
  position: absolute;
  top: 50%;
  left: 0;
  z-index: 1;
  text-align: center;
  background-color: var(--radio--color);
  margin-top: calc(var(--radio--size) / -2);
  mask-image: url('data:image/svg+xml; utf8, <svg fill="currentColor" version="1.1" xmlns="http://www.w3.org/2000/svg" width="24" height="28" viewBox="0 0 24 28"><title>circle</title><path d="M24 14c0 6.625-5.375 12-12 12s-12-5.375-12-12 5.375-12 12-12 12 5.375 12 12z"></path></svg>');
  -webkit-mask-image: url('data:image/svg+xml; utf8, <svg fill="currentColor" version="1.1" xmlns="http://www.w3.org/2000/svg" width="24" height="28" viewBox="0 0 24 28"><title>circle</title><path d="M24 14c0 6.625-5.375 12-12 12s-12-5.375-12-12 5.375-12 12-12 12 5.375 12 12z"></path></svg>');
  mask-size: var(--radio--checkmark--size) var(--radio--checkmark--size);
  -webkit-mask-size: var(--radio--checkmark--size) var(--radio--checkmark--size);
}
.radio input {
  top: 0;
  left: 0;
  position: absolute;
  z-index: 0;
  opacity: 0;
  height: 0;
  width: 0;
}
.radio input:focus, .radio input:active {
  outline: none;
}
.radio input:checked ~ .radio-label::before {
  border-color: var(--radio--checked--border-color, var(--radio--border-color));
  background: var(--radio--checked--background, var(--radio--background));
}
.radio input:checked ~ .radio-label::after {
  content: "";
  mask-position: center center;
  -webkit-mask-position: center center;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
}
.radio input:disabled ~ .radio-label, .radio input[readonly] ~ .radio-label {
  color: var(--radio--disabled--label--color, var(--radio--label--color));
}
.radio input:disabled:checked ~ .radio-label::before, .radio input[readonly]:checked ~ .radio-label::before {
  border-color: var(--radio--checked--disabled--border-color, var(--radio--border-color));
  background: var(--radio--checked--disabled--background, var(--radio--background));
}
.radio input:disabled:checked ~ .radio-label::after, .radio input[readonly]:checked ~ .radio-label::after {
  cursor: not-allowed;
  background: var(--radio--disabled--color, var(--radio--color));
}
.radio.-native input {
  top: auto;
  left: auto;
  position: relative;
  opacity: 1;
  height: auto;
  width: auto;
  margin-right: var(--radio--margin-right, var(--margin-right-1-2));
}
.radio.-native .radio-label::after, .radio.-native .radio-label::before {
  display: none;
}

/**
 * Color variants
 */
.radio.-light {
  --radio--background: var(--radio--light--background, var(--color-white));
  --radio--checked--background: var(
      --radio--light--checked--background,
      var(--color-primary)
  );
  --radio--disabled--background: var(
      --radio--light--disabled--background,
      var(--color-light-200)
  );
  --radio--checked--disabled--background: var(
      --radio--light--checked--disabled--background,
      var(--color-primary-200)
  );
  --radio--border-color: var(--radio--light--border-color, var(--color-light-shade-50));
  --radio--checked--border-color: var(
      --radio--light--checked--border-color,
      var(--color-primary-shade-50)
  );
  --radio--disabled--border-color: var(
      --radio--light--disabled--border-color,
      var(--color-light)
  );
  --radio--checked--disabled--border-color: var(
      --radio--light--checked--disabled--border-color,
      var(--color-primary-300)
  );
  --radio--color: var(--radio--light--color, var(--color-white));
  --radio--disabled--color: var(--radio--light--disabled--color, var(--color-light-200));
  --radio--label--color: var(--radio--light--label--color, var(--contrast-text-color-light));
  --radio--disabled--label--color: var(
      --radio--light--disabled--label--color,
      var(--color-light-700)
  );
}
.radio.-dark {
  --radio--background: var(--radio--dark--background, var(--color-dark));
  --radio--checked--background: var(--radio--dark--checked--background, var(--color-primary));
  --radio--disabled--background: var(
      --radio--dark--disabled--background,
      var(--color-dark-200)
  );
  --radio--checked--disabled--background: var(
      --radio--dark--checked--disabled--background,
      var(--color-primary-700)
  );
  --radio--border-color: var(--radio--dark--border-color, var(--color-dark-tint-50));
  --radio--checked--border-color: var(
      --radio--dark--checked--border-color,
      var(--color-primary-lighten-50)
  );
  --radio--disabled--border-color: var(
      --radio--dark--disabled--border-color,
      var(--color-dark)
  );
  --radio--checked--disabled--border-color: var(
      --radio--dark--checked--disabled--border-color,
      var(--color-primary-700)
  );
  --radio--color: var(--radio--light--color, var(--color-white));
  --radio--disabled--color: var(--radio--dark--disabled--color, var(--color-dark-200));
  --radio--label--color: var(--radio--dark--label--color, var(--contrast-text-color-dark));
  --radio--disabled--label--color: var(
      --radio--dark--disabled--label--color,
      var(--color-dark-300)
  );
}

/**
 * Size variants
 */
.radio.-sm {
  --radio--size: var(--radio--sm--size, calc(1rem * var(--size-multiplier-sm)));
  --radio--checkmark--size: var(
      --radio--sm--checkmark--size,
      calc(8px * var(--size-multiplier-sm))
  );
  --radio--label--font-size: var(
      --radio--sm--label--font-size,
      calc(var(--font-size) * var(--size-multiplier-sm))
  );
}
.radio.-md {
  --radio--size: var(--radio--md--size, calc(1rem * var(--size-multiplier-md)));
  --radio--checkmark--size: var(
      --radio--md--checkmark--size,
      calc(8px * var(--size-multiplier-md))
  );
  --radio--label--font-size: var(
      --radio--md--label--font-size,
      calc(var(--font-size) * var(--size-multiplier-md))
  );
}
.radio.-lg {
  --radio--size: var(--radio--lg--size, calc(1rem * var(--size-multiplier-lg)));
  --radio--checkmark--size: var(
      --radio--lg--checkmark--size,
      calc(8px * var(--size-multiplier-lg))
  );
  --radio--label--font-size: var(
      --radio--lg--label--font-size,
      calc(var(--font-size) * var(--size-multiplier-lg))
  );
}

/**
 * Radio Group
 */
.radio-group {
  display: flex;
  flex-direction: column;
}
.radio-group.-inline {
  flex-direction: row;
}

/**
 * Breakpoint mixins
 */
/**
 * Row
 */
.row {
  box-sizing: border-box;
  display: flex;
  flex: 0 1 auto;
  flex-direction: row;
  flex-wrap: wrap;
  margin-left: calc(var(--grid--xs--gutter) / -2);
  margin-right: calc(var(--grid--xs--gutter) / -2);
}
@media screen and (min-width: 576px) {
  .row {
    margin-left: calc(var(--grid--sm--gutter) / -2);
    margin-right: calc(var(--grid--sm--gutter) / -2);
  }
}
@media screen and (min-width: 768px) {
  .row {
    margin-left: calc(var(--grid--md--gutter) / -2);
    margin-right: calc(var(--grid--md--gutter) / -2);
  }
}
@media screen and (min-width: 992px) {
  .row {
    margin-left: calc(var(--grid--lg--gutter) / -2);
    margin-right: calc(var(--grid--lg--gutter) / -2);
  }
}
@media screen and (min-width: 1200px) {
  .row {
    margin-left: calc(var(--grid--xl--gutter) / -2);
    margin-right: calc(var(--grid--xl--gutter) / -2);
  }
}
@media screen and (min-width: 1400px) {
  .row {
    margin-left: calc(var(--grid--2xl--gutter) / -2);
    margin-right: calc(var(--grid--2xl--gutter) / -2);
  }
}
.row.-reverse {
  flex-direction: row-reverse;
}
.row.-no-gutter {
  margin-left: 0;
  margin-right: 0;
}
.row.-no-gutter > .column {
  padding-left: 0;
  padding-right: 0;
}
.row.-no-collapse {
  flex-flow: row nowrap;
}
.row.-start-xs {
  justify-content: flex-start;
  text-align: start;
}
.row.-center-xs {
  justify-content: center;
  text-align: center;
}
.row.-end-xs {
  justify-content: flex-end;
  text-align: end;
}
.row.-top-xs {
  align-items: flex-start;
}
.row.-middle-xs {
  align-items: center;
}
.row.-bottom-xs {
  align-items: flex-end;
}
.row.-around-xs {
  justify-content: space-around;
}
.row.-between-xs {
  justify-content: space-between;
}
.row.-reverse-xs {
  flex-direction: row-reverse;
}
@media screen and (min-width: 576px) {
  .row.-start-sm {
    justify-content: flex-start;
    text-align: start;
  }
  .row.-center-sm {
    justify-content: center;
    text-align: center;
  }
  .row.-end-sm {
    justify-content: flex-end;
    text-align: end;
  }
  .row.-top-sm {
    align-items: flex-start;
  }
  .row.-middle-sm {
    align-items: center;
  }
  .row.-bottom-sm {
    align-items: flex-end;
  }
  .row.-around-sm {
    justify-content: space-around;
  }
  .row.-between-sm {
    justify-content: space-between;
  }
  .row.-reverse-sm {
    flex-direction: row-reverse;
  }
}
@media screen and (min-width: 768px) {
  .row.-start-md {
    justify-content: flex-start;
    text-align: start;
  }
  .row.-center-md {
    justify-content: center;
    text-align: center;
  }
  .row.-end-md {
    justify-content: flex-end;
    text-align: end;
  }
  .row.-top-md {
    align-items: flex-start;
  }
  .row.-middle-md {
    align-items: center;
  }
  .row.-bottom-md {
    align-items: flex-end;
  }
  .row.-around-md {
    justify-content: space-around;
  }
  .row.-between-md {
    justify-content: space-between;
  }
  .row.-reverse-md {
    flex-direction: row-reverse;
  }
}
@media screen and (min-width: 992px) {
  .row.-start-lg {
    justify-content: flex-start;
    text-align: start;
  }
  .row.-center-lg {
    justify-content: center;
    text-align: center;
  }
  .row.-end-lg {
    justify-content: flex-end;
    text-align: end;
  }
  .row.-top-lg {
    align-items: flex-start;
  }
  .row.-middle-lg {
    align-items: center;
  }
  .row.-bottom-lg {
    align-items: flex-end;
  }
  .row.-around-lg {
    justify-content: space-around;
  }
  .row.-between-lg {
    justify-content: space-between;
  }
  .row.-reverse-lg {
    flex-direction: row-reverse;
  }
}
@media screen and (min-width: 1200px) {
  .row.-start-xl {
    justify-content: flex-start;
    text-align: start;
  }
  .row.-center-xl {
    justify-content: center;
    text-align: center;
  }
  .row.-end-xl {
    justify-content: flex-end;
    text-align: end;
  }
  .row.-top-xl {
    align-items: flex-start;
  }
  .row.-middle-xl {
    align-items: center;
  }
  .row.-bottom-xl {
    align-items: flex-end;
  }
  .row.-around-xl {
    justify-content: space-around;
  }
  .row.-between-xl {
    justify-content: space-between;
  }
  .row.-reverse-xl {
    flex-direction: row-reverse;
  }
}
@media screen and (min-width: 1400px) {
  .row.-start-2xl {
    justify-content: flex-start;
    text-align: start;
  }
  .row.-center-2xl {
    justify-content: center;
    text-align: center;
  }
  .row.-end-2xl {
    justify-content: flex-end;
    text-align: end;
  }
  .row.-top-2xl {
    align-items: flex-start;
  }
  .row.-middle-2xl {
    align-items: center;
  }
  .row.-bottom-2xl {
    align-items: flex-end;
  }
  .row.-around-2xl {
    justify-content: space-around;
  }
  .row.-between-2xl {
    justify-content: space-between;
  }
  .row.-reverse-2xl {
    flex-direction: row-reverse;
  }
}
.row.-start {
  justify-content: flex-start;
  text-align: start;
}
.row.-center {
  justify-content: center;
  text-align: center;
}
.row.-end {
  justify-content: flex-end;
  text-align: end;
}
.row.-top {
  align-items: flex-start;
}
.row.-middle {
  align-items: center;
}
.row.-bottom {
  align-items: flex-end;
}
.row.-around {
  justify-content: space-around;
}
.row.-between {
  justify-content: space-between;
}
.row.-reverse {
  flex-direction: row-reverse;
}

/**
 * Breakpoint mixins
 */
/**
 * Select
 */
.select-wrapper {
  display: block;
  position: relative;
}
.select-wrapper .select {
  position: absolute;
  z-index: var(--select--z-index, 2000);
  word-wrap: break-word;
  width: max-content;
  top: 0;
  left: 0;
  text-align: left;
  list-style: none;
  line-height: var(--select-line-height);
  display: block;
  white-space: normal;
  width: 100%;
  min-width: var(--select--min-width, 240px);
  max-width: var(--select--max-width, 90vw);
  color: var(--select--color);
  font-size: var(--select--font-size, var(--font-size));
  box-shadow: var(--select--box-shadow, var(--select--box-shadow-x-offset, var(--box-shadow-offset-x)) var(--select--box-shadow-y-offset, var(--box-shadow-offset-y)) var(--select--box-shadow-blur-radius, var(--box-shadow-blur-radius)) var(--select--box-shadow-spread-radius, var(--box-shadow-spread-radius)) var(--select--box-shadow-color, var(--box-shadow-color)));
}
.select-wrapper .select:focus:hover {
  outline-width: 0;
}
.select-wrapper .select[data-popup-placement^=top] {
  transform-origin: center bottom;
}
.select-wrapper .select[data-popup-placement^=bottom] {
  transform-origin: center top;
}
.select-wrapper .select[data-popup-placement^=right] {
  transform-origin: left center;
}
.select-wrapper .select[data-popup-placement^=left] {
  transform-origin: right center;
}
.select-wrapper .select > .arrow {
  position: absolute;
}
.select-wrapper .select > .arrow,
.select-wrapper .select > .arrow::after {
  display: block;
  width: 0;
  height: 0;
  border-color: transparent;
  border-style: solid;
  position: absolute;
}
.select-wrapper .select > .arrow::after {
  content: "";
}
.select-wrapper .select[data-popup-placement^=top] > .arrow {
  border-bottom-width: 0;
}
.select-wrapper .select[data-popup-placement^=top] > .arrow::after {
  border-bottom-width: 0;
}
.select-wrapper .select[data-popup-placement^=bottom] > .arrow {
  border-top-width: 0;
}
.select-wrapper .select[data-popup-placement^=bottom] > .arrow::after {
  border-top-width: 0;
}
.select-wrapper .select[data-popup-placement^=right] > .arrow {
  border-left-width: 0;
}
.select-wrapper .select[data-popup-placement^=right] > .arrow::after {
  border-left-width: 0;
}
.select-wrapper .select[data-popup-placement^=left] > .arrow {
  border-right-width: 0;
}
.select-wrapper .select[data-popup-placement^=left] > .arrow::after {
  border-right-width: 0;
}
.select-wrapper .select > .arrow {
  width: var(--select--arrow--size, 6px);
  height: var(--select--arrow--size, 6px);
}
.select-wrapper .select > .arrow, .select-wrapper .select > .arrow::after {
  border-width: var(--select--arrow--size, 6px);
}
.select-wrapper .select[data-popup-placement^=top] > .arrow::after, .select-wrapper .select[data-popup-placement^=bottom] > .arrow::after {
  margin-left: calc(var(--select--arrow--size, 6px) * -1);
}
.select-wrapper .select[data-popup-placement^=left] > .arrow::after, .select-wrapper .select[data-popup-placement^=right] > .arrow::after {
  margin-top: calc(var(--select--arrow--size, 6px) * -1);
}
.select-wrapper .select[data-popup-placement^=top] > .arrow {
  bottom: calc(var(--select--arrow--size, 6px) * -1);
}
.select-wrapper .select[data-popup-placement^=top] > .arrow::after {
  bottom: 1px;
}
.select-wrapper .select[data-popup-placement^=bottom] > .arrow {
  top: calc(var(--select--arrow--size, 6px) * -1);
}
.select-wrapper .select[data-popup-placement^=bottom] > .arrow::after {
  top: 1px;
}
.select-wrapper .select[data-popup-placement^=left] > .arrow {
  right: calc(var(--select--arrow--size, 6px) * -1);
}
.select-wrapper .select[data-popup-placement^=left] > .arrow::after {
  right: 1px;
}
.select-wrapper .select[data-popup-placement^=right] > .arrow {
  left: calc(var(--select--arrow--size, 6px) * -1);
}
.select-wrapper .select[data-popup-placement^=right] > .arrow::after {
  left: 1px;
}
.select-wrapper .select > .select-header {
  border-style: var(--select--header--border-style, var(--select--header--border-top-style, var(--select--border-top-style, var(--border-top-style))) var(--select--header--border-right-style, var(--select--border-right-style, var(--border-right-style))) var(--select--header--border-bottom-style, var(--select--border-bottom-style, var(--border-bottom-style))) var(--select--header--border-left-style, var(--select--border-left-style, var(--border-left-style))));
  border-width: var(--select--header--border-width, var(--select--header--border-top-width, var(--select--border-top-width, var(--border-top-width))) var(--select--header--border-right-width, var(--select--border-right-width, var(--border-right-width))) var(--select--header--border-bottom-width, 0) var(--select--header--border-left-width, var(--select--border-left-width, var(--border-left-width))));
  border-color: var(--select--header--border-color, var(--select--header--border-top-color, var(--select--border-top-color, var(--border-top-color))) var(--select--header--border-right-color, var(--select--border-right-color, var(--border-right-color))) var(--select--header--border-bottom-color, var(--select--border-bottom-color, var(--border-bottom-color))) var(--select--header--border-left-color, var(--select--border-left-color, var(--border-left-color))));
  background-color: var(--select--header--background, var(--select--background));
  padding: var(--select--header--padding, var(--select--header--padding-top, var(--select--padding-top, var(--padding-top))) var(--select--header--padding-right, var(--select--padding-right, var(--padding-right))) var(--select--header--padding-bottom, var(--select--padding-bottom, var(--padding-bottom))) var(--select--header--padding-left, var(--select--padding-left, var(--padding-left))));
}
.select-wrapper .select > .select-body {
  overflow: auto;
  border-style: var(--select--body--border-style, var(--select--body--border-top-style, var(--select--border-top-style, var(--border-top-style))) var(--select--body--border-right-style, var(--select--border-right-style, var(--border-right-style))) var(--select--body--border-bottom-style, var(--select--border-bottom-style, var(--border-bottom-style))) var(--select--body--border-left-style, var(--select--border-left-style, var(--border-left-style))));
  border-width: var(--select--body--border-width, var(--select--body--border-top-width, var(--select--border-top-width, var(--border-top-width))) var(--select--body--border-right-width, var(--select--border-right-width, var(--border-right-width))) var(--select--body--border-bottom-width, var(--select--border-bottom-width, var(--border-bottom-width))) var(--select--body--border-left-width, var(--select--border-left-width, var(--border-left-width))));
  border-color: var(--select--body--border-color, var(--select--body--border-top-color, var(--select--border-top-color, var(--border-top-color))) var(--select--body--border-right-color, var(--select--border-right-color, var(--border-right-color))) var(--select--body--border-bottom-color, var(--select--border-bottom-color, var(--border-bottom-color))) var(--select--body--border-left-color, var(--select--border-left-color, var(--border-left-color))));
  background-color: var(--select--body--background, var(--select--background));
  padding: var(--select--body--padding, var(--select--body--padding-top, var(--select--padding-top, var(--padding-top))) var(--select--body--padding-right, var(--select--padding-right, var(--padding-right))) var(--select--body--padding-bottom, var(--select--padding-bottom, var(--padding-bottom))) var(--select--body--padding-left, var(--select--padding-left, var(--padding-left))));
  max-height: var(--select--max-height, 300px);
}
.select-wrapper .select > .select-body .select-divider {
  background-color: var(--select--divider--border-color, var(--select--border-top, var(--border-top-color)));
}
.select-wrapper .select > .select-body .select-no-results {
  text-align: center;
}
.select-wrapper .select > .select-footer {
  border-style: var(--select--footer--border-style, var(--select--footer--border-top-style, var(--select--border-top-style, var(--border-top-style))) var(--select--footer--border-right-style, var(--select--border-right-style, var(--border-right-style))) var(--select--footer--border-bottom-style, var(--select--border-bottom-style, var(--border-bottom-style))) var(--select--footer--border-left-style, var(--select--border-left-style, var(--border-left-style))));
  border-width: var(--select--footer--border-width, var(--select--footer--border-top-width, 0) var(--select--footer--border-right-width, var(--select--border-right-width, var(--border-right-width))) var(--select--footer--border-bottom-width, var(--select--border-bottom-width, var(--border-bottom-width))) var(--select--footer--border-left-width, var(--select--border-left-width, var(--border-left-width))));
  border-color: var(--select--footer--border-color, var(--select--footer--border-top-color, var(--select--border-top-color, var(--border-top-color))) var(--select--footer--border-right-color, var(--select--border-right-color, var(--border-right-color))) var(--select--footer--border-bottom-color, var(--select--border-bottom-color, var(--border-bottom-color))) var(--select--footer--border-left-color, var(--select--border-left-color, var(--border-left-color))));
  background-color: var(--select--footer--background, var(--select--background));
  padding: var(--select--footer--padding, var(--select--footer--padding-top, var(--select--padding-top, var(--padding-top))) var(--select--footer--padding-right, var(--select--padding-right, var(--padding-right))) var(--select--footer--padding-bottom, var(--select--padding-bottom, var(--padding-bottom))) var(--select--footer--padding-left, var(--select--padding-left, var(--padding-left))));
}
.select-wrapper .select > div:first-of-type {
  border-top-left-radius: var(--select--border-top-left-radius, var(--border-top-left-radius));
  border-top-right-radius: var(--select--border-top-right-radius, var(--border-top-right-radius));
}
.select-wrapper .select > div:last-of-type {
  border-bottom-left-radius: var(--select--border-bottom-left-radius, var(--border-bottom-left-radius));
  border-bottom-right-radius: var(--select--border-bottom-right-radius, var(--border-bottom-right-radius));
}
.select-wrapper .select[data-popup-placement^=top] > .arrow {
  border-top-color: var(--select--border-bottom-color, var(--border-bottom-color));
}
.select-wrapper .select[data-popup-placement^=top] > .arrow::after {
  border-top-color: var(--select--background);
}
.select-wrapper .select[data-popup-placement^=right] > .arrow {
  border-right-color: var(--select--border-left-color, var(--border-left-color));
}
.select-wrapper .select[data-popup-placement^=right] > .arrow::after {
  border-right-color: var(--select--background);
}
.select-wrapper .select[data-popup-placement^=bottom] > .arrow {
  border-bottom-color: var(--select--border-top-color, var(--border-top-color));
}
.select-wrapper .select[data-popup-placement^=bottom] > .arrow::after {
  border-bottom-color: var(--select--background);
}
.select-wrapper .select[data-popup-placement^=left] > .arrow {
  border-left-color: var(--select--border-right-color, var(--border-right-color));
}
.select-wrapper .select[data-popup-placement^=left] > .arrow::after {
  border-left-color: var(--select--background);
}
.select-wrapper.-error > .input-wrapper .input {
  border-color: var(--input--error--border-color, var(--color-danger));
}
.select-wrapper .input-wrapper .input-icon {
  margin-right: var(--margin-left);
}
.select-wrapper .input-wrapper .input-suffix > .select-caret {
  cursor: pointer;
  mask-image: url('data:image/svg+xml; utf8, <svg fill="currentColor" version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="28" viewBox="0 0 16 28"><title>caret-down</title><path d="M16 11c0 0.266-0.109 0.516-0.297 0.703l-7 7c-0.187 0.187-0.438 0.297-0.703 0.297s-0.516-0.109-0.703-0.297l-7-7c-0.187-0.187-0.297-0.438-0.297-0.703 0-0.547 0.453-1 1-1h14c0.547 0 1 0.453 1 1z"></path></svg>');
  -webkit-mask-image: url('data:image/svg+xml; utf8, <svg fill="currentColor" version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="28" viewBox="0 0 16 28"><title>caret-down</title><path d="M16 11c0 0.266-0.109 0.516-0.297 0.703l-7 7c-0.187 0.187-0.438 0.297-0.703 0.297s-0.516-0.109-0.703-0.297l-7-7c-0.187-0.187-0.297-0.438-0.297-0.703 0-0.547 0.453-1 1-1h14c0.547 0 1 0.453 1 1z"></path></svg>');
  mask-position: center center;
  -webkit-mask-position: center center;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  background-color: var(--select--color);
  height: var(--select--font-size, var(--font-size));
  width: var(--select--font-size, var(--font-size));
  mask-size: var(--select--font-size, var(--font-size)) var(--font-size);
  margin-left: var(--select--caret--margin-left, var(--select--margin-left));
}

/**
 * Color variants
 */
.select-wrapper.-light {
  --select--background: var(--select--light--background, var(--color-white));
  --select--border-top-color: var(
      --select--light--border-top-color,
      var(--color-light-shade-50)
  );
  --select--border-right-color: var(
      --select--light--border-right-color,
      var(--color-light-shade-50)
  );
  --select--border-bottom-color: var(
      --select--light--border-bottom-color,
      var(--color-light-shade-50)
  );
  --select--border-left-color: var(
      --select--light--border-left-color,
      var(--color-light-shade-50)
  );
  --select--color: var(--select--light--color, var(--contrast-text-color-white));
  --select--option--hover--background: var(
      --select--light--option--hover--background,
      var(--color-gray-50)
  );
  --select--option--disabled--background: var(
      --select--light--option--disabled--background,
      transparent
  );
  --select--option--disabled--color: var(
      --select--light--option--disabled--color,
      var(--text-color-weaker)
  );
  --select--header--background: var(
      --select--light--header--background,
      var(--color-gray-50)
  );
  --select--footer--background: var(
      --select--light--footer--background,
      var(--color-gray-50)
  );
}
.select-wrapper.-dark {
  --select--background: var(--select--dark--background, var(--color-dark));
  --select--border-top-color: var(
      --select--dark--border-top-color,
      var(--color-dark-tint-50)
  );
  --select--border-right-color: var(
      --select--dark--border-right-color,
      var(--color-dark-tint-50)
  );
  --select--border-bottom-color: var(
      --select--dark--border-bottom-color,
      var(--color-dark-tint-50)
  );
  --select--border-left-color: var(
      --select--dark--border-left-color,
      var(--color-dark-tint-50)
  );
  --select--color: var(--select--dark--color, var(--contrast-text-color-dark));
  --select--option--hover--background: var(
      --select--dark--option--hover--background,
      var(--color-dark-tint-50)
  );
  --select--option--disabled--background: var(
      --select--dark--option--disabled--background,
      transparent
  );
  --select--option--disabled--color: var(
      --select--dark--option--disabled--color,
      var(--text-color-weaker)
  );
  --select--header--background: var(
      --select--dark--header--background,
      var(--color-dark-tint-50)
  );
  --select--footer--background: var(
      --select--dark--footer--background,
      var(--color-dark-tint-50)
  );
}

/**
 * Size variants
 */
.select-wrapper.-sm {
  --select--border-top-left-radius: var(
      --select--sm--border-top-left-radius,
      calc(var(--border-top-left-radius) * var(--size-multiplier-sm))
  );
  --select--border-top-right-radius: var(
      --select--sm--border-top-right-radius,
      calc(var(--border-top-right-radius) * var(--size-multiplier-sm))
  );
  --select--border-bottom-right-radius: var(
      --select--sm--border-bottom-right-radius,
      calc(var(--border-bottom-right-radius) * var(--size-multiplier-sm))
  );
  --select--border-bottom-left-radius: var(
      --select--sm--border-bottom-left-radius,
      calc(var(--border-bottom-left-radius) * var(--size-multiplier-sm))
  );
  --select--font-size: var(
      --select--sm--font-size,
      calc(var(--font-size) * var(--size-multiplier-sm))
  );
  --select--margin-top: var(
      --select--sm--margin-top,
      calc(calc(var(--margin-top) / 2) * var(--size-multiplier-sm))
  );
  --select--margin-right: var(
      --select--sm--margin-right,
      calc(calc(var(--margin-right) / 2) * var(--size-multiplier-sm))
  );
  --select--margin-bottom: var(
      --select--sm--margin-bottom,
      calc(calc(var(--margin-bottom) / 2) * var(--size-multiplier-sm))
  );
  --select--margin-left: var(
      --select--sm--margin-left,
      calc(calc(var(--margin-left) / 2) * var(--size-multiplier-sm))
  );
  --select--padding-top: var(
      --select--sm--padding-top,
      calc(var(--padding-top) * var(--size-multiplier-sm))
  );
  --select--padding-right: var(
      --select--sm--padding-right,
      calc(var(--padding-right) * var(--size-multiplier-sm))
  );
  --select--padding-bottom: var(
      --select--sm--padding-bottom,
      calc(var(--padding-bottom) * var(--size-multiplier-sm))
  );
  --select--padding-left: var(
      --select--sm--padding-left,
      calc(var(--padding-left) * var(--size-multiplier-sm))
  );
  --select--option--padding-top: var(
      --select--sm--option--padding-top,
      calc(calc(var(--select--padding-top) / 2) * var(--size-multiplier-sm))
  );
  --select--option--padding-bottom: var(
      --select--sm--option--padding-bottom,
      calc(calc(var(--select--padding-bottom) / 2) * var(--size-multiplier-sm))
  );
  --select--header--padding-top: var(
      --select--sm--header--padding-top,
      calc(calc(var(--select--padding-top) * 3 / 4) * var(--size-multiplier-sm))
  );
  --select--header--padding-bottom: var(
      --select--sm--header--padding-bottom,
      calc(calc(var(--select--padding-bottom) * 3 / 4) * var(--size-multiplier-sm))
  );
  --select--body--padding-right: var(--select--sm--body--padding-right, 0);
  --select--body--padding-left: var(--select--sm--body--padding-left, 0);
  --select--footer--padding-top: var(
      --select--sm--footer--padding-top,
      calc(calc(var(--select--padding-top) * 3 / 4) * var(--size-multiplier-sm))
  );
  --select--footer--padding-bottom: var(
      --select--sm--footer--padding-bottom,
      calc(calc(var(--select--padding-bottom) * 3 / 4) * var(--size-multiplier-sm))
  );
}
.select-wrapper.-md {
  --select--border-top-left-radius: var(
      --select--md--border-top-left-radius,
      calc(var(--border-top-left-radius) * var(--size-multiplier-md))
  );
  --select--border-top-right-radius: var(
      --select--md--border-top-right-radius,
      calc(var(--border-top-right-radius) * var(--size-multiplier-md))
  );
  --select--border-bottom-right-radius: var(
      --select--md--border-bottom-right-radius,
      calc(var(--border-bottom-right-radius) * var(--size-multiplier-md))
  );
  --select--border-bottom-left-radius: var(
      --select--md--border-bottom-left-radius,
      calc(var(--border-bottom-left-radius) * var(--size-multiplier-md))
  );
  --select--font-size: var(
      --select--md--font-size,
      calc(var(--font-size) * var(--size-multiplier-md))
  );
  --select--margin-top: var(
      --select--md--margin-top,
      calc(calc(var(--margin-top) / 2) * var(--size-multiplier-md))
  );
  --select--margin-right: var(
      --select--md--margin-right,
      calc(calc(var(--margin-right) / 2) * var(--size-multiplier-md))
  );
  --select--margin-bottom: var(
      --select--md--margin-bottom,
      calc(calc(var(--margin-bottom) / 2) * var(--size-multiplier-md))
  );
  --select--margin-left: var(
      --select--md--margin-left,
      calc(calc(var(--margin-left) / 2) * var(--size-multiplier-md))
  );
  --select--padding-top: var(
      --select--md--padding-top,
      calc(var(--padding-top) * var(--size-multiplier-md))
  );
  --select--padding-right: var(
      --select--md--padding-right,
      calc(var(--padding-right) * var(--size-multiplier-md))
  );
  --select--padding-bottom: var(
      --select--md--padding-bottom,
      calc(var(--padding-bottom) * var(--size-multiplier-md))
  );
  --select--padding-left: var(
      --select--md--padding-left,
      calc(var(--padding-left) * var(--size-multiplier-md))
  );
  --select--option--padding-top: var(
      --select--md--option--padding-top,
      calc(calc(var(--select--padding-top) / 2) * var(--size-multiplier-md))
  );
  --select--option--padding-bottom: var(
      --select--md--option--padding-bottom,
      calc(calc(var(--select--padding-bottom) / 2) * var(--size-multiplier-md))
  );
  --select--header--padding-top: var(
      --select--md--header--padding-top,
      calc(calc(var(--select--padding-top) * 3 / 4) * var(--size-multiplier-md))
  );
  --select--header--padding-bottom: var(
      --select--md--header--padding-bottom,
      calc(calc(var(--select--padding-bottom) * 3 / 4) * var(--size-multiplier-md))
  );
  --select--body--padding-right: var(--select--md--body--padding-right, 0);
  --select--body--padding-left: var(--select--md--body--padding-left, 0);
  --select--footer--padding-top: var(
      --select--md--footer--padding-top,
      calc(calc(var(--select--padding-top) * 3 / 4) * var(--size-multiplier-md))
  );
  --select--footer--padding-bottom: var(
      --select--md--footer--padding-bottom,
      calc(calc(var(--select--padding-bottom) * 3 / 4) * var(--size-multiplier-md))
  );
}
.select-wrapper.-lg {
  --select--border-top-left-radius: var(
      --select--lg--border-top-left-radius,
      calc(var(--border-top-left-radius) * var(--size-multiplier-lg))
  );
  --select--border-top-right-radius: var(
      --select--lg--border-top-right-radius,
      calc(var(--border-top-right-radius) * var(--size-multiplier-lg))
  );
  --select--border-bottom-right-radius: var(
      --select--lg--border-bottom-right-radius,
      calc(var(--border-bottom-right-radius) * var(--size-multiplier-lg))
  );
  --select--border-bottom-left-radius: var(
      --select--lg--border-bottom-left-radius,
      calc(var(--border-bottom-left-radius) * var(--size-multiplier-lg))
  );
  --select--font-size: var(
      --select--lg--font-size,
      calc(var(--font-size) * var(--size-multiplier-lg))
  );
  --select--margin-top: var(
      --select--lg--margin-top,
      calc(calc(var(--margin-top) / 2) * var(--size-multiplier-lg))
  );
  --select--margin-right: var(
      --select--lg--margin-right,
      calc(calc(var(--margin-right) / 2) * var(--size-multiplier-lg))
  );
  --select--margin-bottom: var(
      --select--lg--margin-bottom,
      calc(calc(var(--margin-bottom) / 2) * var(--size-multiplier-lg))
  );
  --select--margin-left: var(
      --select--lg--margin-left,
      calc(calc(var(--margin-left) / 2) * var(--size-multiplier-lg))
  );
  --select--padding-top: var(
      --select--lg--padding-top,
      calc(var(--padding-top) * var(--size-multiplier-lg))
  );
  --select--padding-right: var(
      --select--lg--padding-right,
      calc(var(--padding-right) * var(--size-multiplier-lg))
  );
  --select--padding-bottom: var(
      --select--lg--padding-bottom,
      calc(var(--padding-bottom) * var(--size-multiplier-lg))
  );
  --select--padding-left: var(
      --select--lg--padding-left,
      calc(var(--padding-left) * var(--size-multiplier-lg))
  );
  --select--option--padding-top: var(
      --select--lg--option--padding-top,
      calc(calc(var(--select--padding-top) / 2) * var(--size-multiplier-lg))
  );
  --select--option--padding-bottom: var(
      --select--lg--option--padding-bottom,
      calc(calc(var(--select--padding-bottom) / 2) * var(--size-multiplier-lg))
  );
  --select--header--padding-top: var(
      --select--lg--header--padding-top,
      calc(calc(var(--select--padding-top) * 3 / 4) * var(--size-multiplier-lg))
  );
  --select--header--padding-bottom: var(
      --select--lg--header--padding-bottom,
      calc(calc(var(--select--padding-bottom) * 3 / 4) * var(--size-multiplier-lg))
  );
  --select--body--padding-right: var(--select--lg--body--padding-right, 0);
  --select--body--padding-left: var(--select--lg--body--padding-left, 0);
  --select--footer--padding-top: var(
      --select--lg--footer--padding-top,
      calc(calc(var(--select--padding-top) * 3 / 4) * var(--size-multiplier-lg))
  );
  --select--footer--padding-bottom: var(
      --select--lg--footer--padding-bottom,
      calc(calc(var(--select--padding-bottom) * 3 / 4) * var(--size-multiplier-lg))
  );
}

/**
 * Select option
 */
.select .select-option {
  border-color: var(--select--option--border-color, var(--select--option--border-top-color, var(--select--border-top-color, var(--border-top-color))) var(--select--option--border-right-color, var(--select--border-right-color, var(--border-right-color))) var(--select--option--border-bottom-color, var(--select--border-bottom-color, var(--border-bottom-color))) var(--select--option--border-left-color, var(--select--border-left-color, var(--border-left-color))));
  padding: var(--select--option--padding, var(--select--option--padding-top, var(--select--padding-top, var(--padding-top))) var(--select--option--padding-right, var(--select--padding-right, var(--padding-right))) var(--select--option--padding-bottom, var(--select--padding-bottom, var(--padding-bottom))) var(--select--option--padding-left, var(--select--padding-left, var(--padding-left))));
  color: var(--select--option--color, var(--select--color));
  background: var(--select--option--background, var(--select--background));
  display: block;
  width: 100%;
  clear: both;
  margin-bottom: 0;
  border: 0;
  cursor: pointer;
  transition-property: var(--select--option--transition-property, background-color, border-color, color);
  transition-timing-function: var(--select--option--transition-timing-function, var(--transition-timing-function));
  transition-duration: var(--select--option--transition-duration, var(--transition-duration));
}
.select .select-option mark {
  padding-left: 0;
  padding-right: 0;
}
.select .select-option:not(.-disabled, .-plaintext):hover, .select .select-option:not(.-disabled, .-plaintext):focus {
  outline: 0;
  text-decoration: none;
  color: var(--select--option--hover--color);
  background: var(--select--option--hover--background);
}
.select .select-option.-disabled {
  pointer-events: none;
  cursor: not-allowed;
  color: var(--select--option--disabled--color);
  background: var(--select--option--disabled--background, var(--select--background));
}
.select .select-option.-active {
  font-weight: bold;
  color: var(--select--option--active--color, var(--select--color));
  background: var(--select--option--active--background, var(--select--background));
}

/**
 * Breakpoint mixins
 */
/**
 * Sidebar
 */
.sidebar-wrapper {
  position: relative;
  min-height: 100%;
  min-width: 0;
  overflow: hidden;
  z-index: var(--sidebar--z-index, 1030);
  flex-grow: 0;
  flex-shrink: 0;
  width: var(--sidebar--width, 14rem);
}
.sidebar-wrapper .sidebar {
  position: absolute;
  height: 100%;
  z-index: 1;
  color: var(--sidebar--color);
  background: var(--sidebar--background);
  width: var(--sidebar--width, 14rem);
  transition-property: var(--sidebar--transition-property, background-color, color, border-color, transform);
  transition-duration: var(--sidebar--transition-duration, var(--transition-duration));
  transition-timing-function: var(--sidebar--transition-timing-function, var(--transition-timing-function));
  box-shadow: var(--sidebar--box-shadow, var(--sidebar--box-shadow-x-offset, var(--box-shadow-offset-x)) var(--sidebar--box-shadow-y-offset, var(--box-shadow-offset-y)) var(--sidebar--box-shadow-blur-radius, var(--box-shadow-blur-radius)) var(--sidebar--box-shadow-spread-radius, var(--box-shadow-spread-radius)) var(--sidebar--box-shadow-color, var(--box-shadow-color)));
  border-width: var(--sidebar--border-width, var(--sidebar--border-top-width, var(--border-top-width)) var(--sidebar--border-right-width, var(--border-right-width)) var(--sidebar--border-bottom-width, var(--border-bottom-width)) var(--sidebar--border-left-width, var(--border-left-width)));
  border-style: var(--sidebar--border-style, var(--sidebar--border-top-style, var(--border-top-style)) var(--sidebar--border-right-style, var(--border-right-style)) var(--sidebar--border-bottom-style, var(--border-bottom-style)) var(--sidebar--border-left-style, var(--border-left-style)));
  border-color: var(--sidebar--border-color, var(--sidebar--border-top-color, var(--border-top-color)) var(--sidebar--border-right-color, var(--border-right-color)) var(--sidebar--border-bottom-color, var(--border-bottom-color)) var(--sidebar--border-left-color, var(--border-left-color)));
  border-radius: var(--sidebar--border-radius, var(--sidebar--border-top-left-radius, var(--border-top-left-radius)) var(--sidebar--border-top-right-radius, var(--border-top-right-radius)) var(--sidebar--border-bottom-right-radius, var(--border-bottom-right-radius)) var(--sidebar--border-bottom-left-radius, var(--border-bottom-left-radius)));
  padding: var(--sidebar--padding, var(--sidebar--padding-top, var(--padding-top)) var(--sidebar--padding-right, var(--padding-right)) var(--sidebar--padding-bottom, var(--padding-bottom)) var(--sidebar--padding-left, var(--padding-left)));
}
.sidebar-wrapper .sidebar .sidebar-content {
  height: 100%;
  width: 100%;
  overflow: auto;
  display: flex;
  flex-direction: column;
  padding-top: 0.1px;
  margin-top: -0.1px;
}
.sidebar-wrapper .sidebar .sidebar-content .nav.-vertical .nav-item {
  width: 100%;
}
.sidebar-wrapper .sidebar .sidebar-content .collapsible {
  width: 100%;
}
.sidebar-wrapper.-collapse-relative.-placement-left .sidebar {
  right: 0;
}
.sidebar-wrapper.-collapse-relative.-placement-right .sidebar {
  left: 0;
}
.sidebar-wrapper.-collapse-absolute.-placement-left .sidebar, .sidebar-wrapper.-collapse-fixed.-placement-left .sidebar {
  left: 0;
}
.sidebar-wrapper.-collapse-absolute.-placement-right .sidebar, .sidebar-wrapper.-collapse-fixed.-placement-right .sidebar {
  right: 0;
}
.sidebar-wrapper .sidebar-overlay {
  width: 100%;
  height: 100%;
  z-index: 0;
  background: var(--sidebar--overlay--background, rgba(0, 0, 0, 0.5));
  border-top-left-radius: var(--sidebar--border-top-left-radius, var(--border-top-left-radius));
  border-bottom-left-radius: var(--sidebar--border-bottom-left-radius, var(--border-bottom-left-radius));
}
@media screen and (max-width: 575.99px) {
  .sidebar-wrapper.-collapse-xs.-collapse-fixed {
    position: fixed;
    top: 0;
  }
  .sidebar-wrapper.-collapse-xs.-collapse-absolute {
    position: absolute;
  }
  .sidebar-wrapper.-collapse-xs.-collapse-fixed, .sidebar-wrapper.-collapse-xs.-collapse-absolute {
    width: 100%;
    height: 100%;
  }
}
@media screen and (max-width: 767.99px) {
  .sidebar-wrapper.-collapse-sm.-collapse-fixed {
    position: fixed;
    top: 0;
  }
  .sidebar-wrapper.-collapse-sm.-collapse-absolute {
    position: absolute;
  }
  .sidebar-wrapper.-collapse-sm.-collapse-fixed, .sidebar-wrapper.-collapse-sm.-collapse-absolute {
    width: 100%;
    height: 100%;
  }
}
@media screen and (max-width: 991.99px) {
  .sidebar-wrapper.-collapse-md.-collapse-fixed {
    position: fixed;
    top: 0;
  }
  .sidebar-wrapper.-collapse-md.-collapse-absolute {
    position: absolute;
  }
  .sidebar-wrapper.-collapse-md.-collapse-fixed, .sidebar-wrapper.-collapse-md.-collapse-absolute {
    width: 100%;
    height: 100%;
  }
}
@media screen and (max-width: 1199.99px) {
  .sidebar-wrapper.-collapse-lg.-collapse-fixed {
    position: fixed;
    top: 0;
  }
  .sidebar-wrapper.-collapse-lg.-collapse-absolute {
    position: absolute;
  }
  .sidebar-wrapper.-collapse-lg.-collapse-fixed, .sidebar-wrapper.-collapse-lg.-collapse-absolute {
    width: 100%;
    height: 100%;
  }
}
@media screen and (max-width: 1399.99px) {
  .sidebar-wrapper.-collapse-xl.-collapse-fixed {
    position: fixed;
    top: 0;
  }
  .sidebar-wrapper.-collapse-xl.-collapse-absolute {
    position: absolute;
  }
  .sidebar-wrapper.-collapse-xl.-collapse-fixed, .sidebar-wrapper.-collapse-xl.-collapse-absolute {
    width: 100%;
    height: 100%;
  }
}
.sidebar-wrapper.-collapse-2xl.-collapse-fixed {
  position: fixed;
  top: 0;
}
.sidebar-wrapper.-collapse-2xl.-collapse-absolute {
  position: absolute;
}
.sidebar-wrapper.-collapse-2xl.-collapse-fixed, .sidebar-wrapper.-collapse-2xl.-collapse-absolute {
  width: 100%;
  height: 100%;
}
.sidebar-wrapper.-collapse-true.-collapse-fixed {
  position: fixed;
  top: 0;
}
.sidebar-wrapper.-collapse-true.-collapse-absolute {
  position: absolute;
}
.sidebar-wrapper.-collapse-true.-collapse-fixed, .sidebar-wrapper.-collapse-true.-collapse-absolute {
  width: 100%;
  height: 100%;
}
.sidebar-wrapper.sidebar-wrapper-transition-enter-to, .sidebar-wrapper.sidebar-wrapper-transition-leave {
  width: var(--sidebar--width, 14rem);
}

/**
 * Sidebar animation
 */
.sidebar-wrapper-transition-enter-active,
.sidebar-wrapper-transition-leave-active {
  transition: width var(--sidebar--transition-duration, var(--transition-duration)) var(--sidebar--transition-timing-function, var(--transition-timing-function));
}

.sidebar-wrapper-none-transition-enter-active,
.sidebar-wrapper-none-transition-leave-active {
  transition: none var(--sidebar--transition-duration, var(--transition-duration)) var(--sidebar--transition-timing-function, var(--transition-timing-function));
}

.sidebar-wrapper-transition-enter-from,
.sidebar-wrapper-transition-leave-to {
  width: 0;
}

.sidebar-transition-enter-active,
.sidebar-transition-leave-active {
  transform-origin: left;
}

.sidebar-transition-enter-from,
.sidebar-transition-leave-to {
  transform: translateX(-100%);
}

.sidebar-transition-enter-to,
.sidebar-transition-leave-from {
  transform: translateX(0);
}

.sidebar-wrapper.-placement-right .sidebar-transition-enter-active,
.sidebar-wrapper.-placement-right .sidebar-transition-leave-active {
  transform-origin: right;
}
.sidebar-wrapper.-placement-right .sidebar-transition-enter-from,
.sidebar-wrapper.-placement-right .sidebar-transition-leave-to {
  transform: translateX(100%);
}

.sidebar-overlay-transition-enter-active,
.sidebar-overlay-transition-leave-active {
  transition: opacity var(--sidebar--transition-duration, var(--transition-duration)) var(--sidebar--transition-timing-function, var(--transition-timing-function));
}

.sidebar-overlay-transition-enter-from,
.sidebar-overlay-transition-leave-to,
.sidebar-overlay-transition-leave-active {
  opacity: 0;
}

/**
 * Color variants
 */
.sidebar-wrapper.-light {
  --sidebar--background: var(--sidebar--light--background, var(--color-light));
  --sidebar--border-top-color: var(
      --sidebar--light--border-top-color,
      var(--color-light-shade-50)
  );
  --sidebar--border-right-color: var(
      --sidebar--light--border-right-color,
      var(--color-light-shade-50)
  );
  --sidebar--border-bottom-color: var(
      --sidebar--light--border-bottom-color,
      var(--color-light-shade-50)
  );
  --sidebar--border-left-color: var(
      --sidebar--light--border-left-color,
      var(--color-light-shade-50)
  );
  --sidebar--color: var(--sidebar--light--color, var(--contrast-text-color-light));
  --sidebar--item--color: var(
      --sidebar--light--item--color,
      var(--contrast-text-color-light)
  );
  --sidebar--item--hover--color: var(
      --sidebar--light--item--hover--color,
      var(--contrast-text-color-light)
  );
  --sidebar--item--background: var(--sidebar--light--item--background, var(--color-light));
  --sidebar--item--hover--background: var(
      --sidebar--light--item--hover--background,
      var(--color-light-shade-50)
  );
}
.sidebar-wrapper.-dark {
  --sidebar--background: var(--sidebar--dark--background, var(--color-dark));
  --sidebar--border-top-color: var(
      --sidebar--dark--border-top-color,
      var(--color-dark-tint-50)
  );
  --sidebar--border-right-color: var(
      --sidebar--dark--border-right-color,
      var(--color-dark-tint-50)
  );
  --sidebar--border-bottom-color: var(
      --sidebar--dark--border-bottom-color,
      var(--color-dark-tint-50)
  );
  --sidebar--border-left-color: var(
      --sidebar--dark--border-left-color,
      var(--color-dark-tint-50)
  );
  --sidebar--color: var(--sidebar--dark--color, var(--contrast-text-color-dark));
  --sidebar--item--color: var(--sidebar--dark--item--color, var(--contrast-text-color-dark));
  --sidebar--item--hover--color: var(
      --sidebar--dark--item--hover--color,
      var(--contrast-text-color-dark)
  );
  --sidebar--item--background: var(--sidebar--dark--item--background, var(--color-dark));
  --sidebar--item--hover--background: var(
      --sidebar--dark--item--hover--background,
      var(--color-dark-tint-50)
  );
}

/**
 * Size variants
 */
.sidebar-wrapper.-sm {
  --sidebar--border-top-left-radius: var(
      --sidebar--sm--border-top-left-radius,
      calc(var(--border-top-left-radius) * var(--size-multiplier-sm))
  );
  --sidebar--border-top-right-radius: var(
      --sidebar--sm--border-top-right-radius,
      calc(var(--border-top-right-radius) * var(--size-multiplier-sm))
  );
  --sidebar--border-bottom-right-radius: var(
      --sidebar--sm--border-bottom-right-radius,
      calc(var(--border-bottom-right-radius) * var(--size-multiplier-sm))
  );
  --sidebar--border-bottom-left-radius: var(
      --sidebar--sm--border-bottom-left-radius,
      calc(var(--border-bottom-left-radius) * var(--size-multiplier-sm))
  );
  --sidebar--font-size: var(
      --sidebar--sm--font-size,
      calc(var(--font-size) * var(--size-multiplier-sm))
  );
  --sidebar--padding-top: var(
      --sidebar--sm--padding-top,
      calc(var(--padding-top) * var(--size-multiplier-sm))
  );
  --sidebar--padding-right: var(
      --sidebar--sm--padding-right,
      calc(var(--padding-right) * var(--size-multiplier-sm))
  );
  --sidebar--padding-bottom: var(
      --sidebar--sm--padding-bottom,
      calc(var(--padding-bottom) * var(--size-multiplier-sm))
  );
  --sidebar--padding-left: var(
      --sidebar--sm--padding-left,
      calc(var(--padding-left) * var(--size-multiplier-sm))
  );
  --sidebar--width: var(--sidebar--sm--width, calc(14rem * var(--size-multiplier-sm)));
  --sidebar--item--padding-top: var(
      --sidebar--sm--item--padding-top,
      calc(calc(var(--padding-top) / 2) * var(--size-multiplier-sm))
  );
  --sidebar--item--padding-right: var(
      --sidebar--sm--item--padding-right,
      calc(var(--padding-right) * var(--size-multiplier-sm))
  );
  --sidebar--item--padding-bottom: var(
      --sidebar--sm--item--padding-bottom,
      calc(calc(var(--padding-bottom) / 2) * var(--size-multiplier-sm))
  );
  --sidebar--item--padding-left: var(
      --sidebar--sm--item--padding-left,
      calc(var(--padding-left) * var(--size-multiplier-sm))
  );
}
.sidebar-wrapper.-md {
  --sidebar--border-top-left-radius: var(
      --sidebar--md--border-top-left-radius,
      calc(var(--border-top-left-radius) * var(--size-multiplier-md))
  );
  --sidebar--border-top-right-radius: var(
      --sidebar--md--border-top-right-radius,
      calc(var(--border-top-right-radius) * var(--size-multiplier-md))
  );
  --sidebar--border-bottom-right-radius: var(
      --sidebar--md--border-bottom-right-radius,
      calc(var(--border-bottom-right-radius) * var(--size-multiplier-md))
  );
  --sidebar--border-bottom-left-radius: var(
      --sidebar--md--border-bottom-left-radius,
      calc(var(--border-bottom-left-radius) * var(--size-multiplier-md))
  );
  --sidebar--font-size: var(
      --sidebar--md--font-size,
      calc(var(--font-size) * var(--size-multiplier-md))
  );
  --sidebar--padding-top: var(
      --sidebar--md--padding-top,
      calc(var(--padding-top) * var(--size-multiplier-md))
  );
  --sidebar--padding-right: var(
      --sidebar--md--padding-right,
      calc(var(--padding-right) * var(--size-multiplier-md))
  );
  --sidebar--padding-bottom: var(
      --sidebar--md--padding-bottom,
      calc(var(--padding-bottom) * var(--size-multiplier-md))
  );
  --sidebar--padding-left: var(
      --sidebar--md--padding-left,
      calc(var(--padding-left) * var(--size-multiplier-md))
  );
  --sidebar--width: var(--sidebar--md--width, calc(14rem * var(--size-multiplier-md)));
  --sidebar--item--padding-top: var(
      --sidebar--md--item--padding-top,
      calc(calc(var(--padding-top) / 2) * var(--size-multiplier-md))
  );
  --sidebar--item--padding-right: var(
      --sidebar--md--item--padding-right,
      calc(var(--padding-right) * var(--size-multiplier-md))
  );
  --sidebar--item--padding-bottom: var(
      --sidebar--md--item--padding-bottom,
      calc(calc(var(--padding-bottom) / 2) * var(--size-multiplier-md))
  );
  --sidebar--item--padding-left: var(
      --sidebar--md--item--padding-left,
      calc(var(--padding-left) * var(--size-multiplier-md))
  );
}
.sidebar-wrapper.-lg {
  --sidebar--border-top-left-radius: var(
      --sidebar--lg--border-top-left-radius,
      calc(var(--border-top-left-radius) * var(--size-multiplier-lg))
  );
  --sidebar--border-top-right-radius: var(
      --sidebar--lg--border-top-right-radius,
      calc(var(--border-top-right-radius) * var(--size-multiplier-lg))
  );
  --sidebar--border-bottom-right-radius: var(
      --sidebar--lg--border-bottom-right-radius,
      calc(var(--border-bottom-right-radius) * var(--size-multiplier-lg))
  );
  --sidebar--border-bottom-left-radius: var(
      --sidebar--lg--border-bottom-left-radius,
      calc(var(--border-bottom-left-radius) * var(--size-multiplier-lg))
  );
  --sidebar--font-size: var(
      --sidebar--lg--font-size,
      calc(var(--font-size) * var(--size-multiplier-lg))
  );
  --sidebar--padding-top: var(
      --sidebar--lg--padding-top,
      calc(var(--padding-top) * var(--size-multiplier-lg))
  );
  --sidebar--padding-right: var(
      --sidebar--lg--padding-right,
      calc(var(--padding-right) * var(--size-multiplier-lg))
  );
  --sidebar--padding-bottom: var(
      --sidebar--lg--padding-bottom,
      calc(var(--padding-bottom) * var(--size-multiplier-lg))
  );
  --sidebar--padding-left: var(
      --sidebar--lg--padding-left,
      calc(var(--padding-left) * var(--size-multiplier-lg))
  );
  --sidebar--width: var(--sidebar--lg--width, calc(14rem * var(--size-multiplier-lg)));
  --sidebar--item--padding-top: var(
      --sidebar--lg--item--padding-top,
      calc(calc(var(--padding-top) / 2) * var(--size-multiplier-lg))
  );
  --sidebar--item--padding-right: var(
      --sidebar--lg--item--padding-right,
      calc(var(--padding-right) * var(--size-multiplier-lg))
  );
  --sidebar--item--padding-bottom: var(
      --sidebar--lg--item--padding-bottom,
      calc(calc(var(--padding-bottom) / 2) * var(--size-multiplier-lg))
  );
  --sidebar--item--padding-left: var(
      --sidebar--lg--item--padding-left,
      calc(var(--padding-left) * var(--size-multiplier-lg))
  );
}

/**
 * Breakpoint mixins
 */
/**
 * Table
 */
.table-wrapper {
  display: block;
  position: relative;
}
@media screen and (max-width: 575.99px) {
  .table-wrapper.-responsive-xs {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: -ms-autohiding-scrollbar;
  }
  .table-wrapper.-responsive-xs .table.-border {
    border: none;
  }
}
@media screen and (max-width: 767.99px) {
  .table-wrapper.-responsive-sm {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: -ms-autohiding-scrollbar;
  }
  .table-wrapper.-responsive-sm .table.-border {
    border: none;
  }
}
@media screen and (max-width: 991.99px) {
  .table-wrapper.-responsive-md {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: -ms-autohiding-scrollbar;
  }
  .table-wrapper.-responsive-md .table.-border {
    border: none;
  }
}
@media screen and (max-width: 1199.99px) {
  .table-wrapper.-responsive-lg {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: -ms-autohiding-scrollbar;
  }
  .table-wrapper.-responsive-lg .table.-border {
    border: none;
  }
}
@media screen and (max-width: 1399.99px) {
  .table-wrapper.-responsive-xl {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: -ms-autohiding-scrollbar;
  }
  .table-wrapper.-responsive-xl .table.-border {
    border: none;
  }
}
.table-wrapper.-responsive-2xl {
  display: block;
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: -ms-autohiding-scrollbar;
}
.table-wrapper.-responsive-2xl .table.-border {
  border: none;
}
.table-wrapper .table {
  width: 100%;
  max-width: 100%;
  margin-bottom: var(--table--margin-bottom, var(--margin-bottom));
  border-top-color: var(--table--border-color, var(--table--border-top-color, var(--border-top-color)) var(--table--border-right-color, var(--border-right-color)) var(--table--border-bottom-color, var(--border-bottom-color)) var(--table--border-left-color, var(--border-left-color)));
  color: var(--table--color);
}
.table-wrapper .table th,
.table-wrapper .table td {
  padding: var(--table--padding, var(--table--padding-top, var(--padding-top)) var(--table--padding-right, var(--padding-right)) var(--table--padding-bottom, var(--padding-bottom)) var(--table--padding-left, var(--padding-left)));
  vertical-align: top;
  border-style: var(--table--border-style, var(--table--border-top-style, var(--border-top-style)) var(--table--border-right-style, var(--border-right-style)) var(--table--border-bottom-style, var(--border-bottom-style)) var(--table--border-left-style, var(--border-left-style)));
  border-color: var(--table--border-color, var(--table--border-top-color, var(--border-top-color)) var(--table--border-right-color, var(--border-right-color)) var(--table--border-bottom-color, var(--border-bottom-color)) var(--table--border-left-color, var(--border-left-color)));
  border-width: var(--table--border-width, var(--table--border-top-width, 0) var(--table--border-right-width, 0) var(--table--border-bottom-width, var(--border-bottom-width)) var(--table--border-left-width, 0));
  background-color: var(--table--background);
  transition-duration: var(--table--transition-duration, var(--transition-duration));
  transition-timing-function: var(--table--transition-timing-function, var(--transition-timing-function));
  transition-property: var(--table--transition-property, color, background-color, border);
}
.table-wrapper .table thead th {
  vertical-align: bottom;
  border-bottom-width: var(--table--thead--th--border-bottom-width, var(--table--border-bottom-width, var(--border-bottom-width)));
}
.table-wrapper .table tbody + tbody {
  border-top-style: var(--table--tbody--adjacent--border-top-style, solid);
  border-top-width: var(--table--tbody--adjacent--border-top-width, var(--table--border-top-width, var(--border-top-width)));
  border-top-color: var(--table--tbody--adjacent--border-top-color, transparent);
}
.table-wrapper .table th,
.table-wrapper .table td,
.table-wrapper .table tbody + tbody {
  border-color: var(--table--border-color, var(--table--border-top-color, var(--border-top-color)) var(--table--border-right-color, var(--border-right-color)) var(--table--border-bottom-color, var(--border-bottom-color)) var(--table--border-left-color, var(--border-left-color)));
}
.table-wrapper.-condensed .table th,
.table-wrapper.-condensed .table td {
  padding: var(--table--condensed--padding, var(--table--condensed--padding-top, calc(var(--table--padding-top, var(--padding-top)) * 0.5)) var(--table--condensed--padding-right, calc(var(--table--padding-right, var(--padding-right)) * 0.5)) var(--table--condensed--padding-bottom, calc(var(--table--padding-bottom, var(--padding-bottom)) * 0.5)) var(--table--condensed--padding-left, calc(var(--table--padding-left, var(--padding-left)) * 0.5)));
}
.table-wrapper.-border .table {
  border-style: var(--table--border-style, var(--table--border-top-style, var(--border-top-style)) var(--table--border-right-style, var(--border-right-style)) var(--table--border-bottom-style, var(--border-bottom-style)) var(--table--border-left-style, var(--border-left-style)));
  border-color: var(--table--border-color, var(--table--border-top-color, var(--border-top-color)) var(--table--border-right-color, var(--border-right-color)) var(--table--border-bottom-color, var(--border-bottom-color)) var(--table--border-left-color, var(--border-left-color)));
  border-width: var(--table--border-width, var(--table--border-top-width, var(--border-top-width)) var(--table--border-right-width, var(--border-right-width)) var(--table--border-bottom-width, var(--border-bottom-width)) var(--table--border-left-width, var(--border-left-width)));
}
.table-wrapper.-border .table th,
.table-wrapper.-border .table td {
  border-style: var(--table--border-style, var(--table--border-top-style, var(--border-top-style)) var(--table--border-right-style, var(--border-right-style)) var(--table--border-bottom-style, var(--border-bottom-style)) var(--table--border-left-style, var(--border-left-style)));
  border-color: var(--table--border-color, var(--table--border-top-color, var(--border-top-color)) var(--table--border-right-color, var(--border-right-color)) var(--table--border-bottom-color, var(--border-bottom-color)) var(--table--border-left-color, var(--border-left-color)));
  border-width: var(--table--border-width, var(--table--border-top-width, var(--border-top-width)) var(--table--border-right-width, var(--border-right-width)) var(--table--border-bottom-width, var(--border-bottom-width)) var(--table--border-left-width, var(--border-left-width)));
}
.table-wrapper.-nowrap .table th,
.table-wrapper.-nowrap .table td {
  white-space: nowrap;
}
.table-wrapper.-striped .table > tr:nth-of-type(odd) th,
.table-wrapper.-striped .table > tr:nth-of-type(odd) td,
.table-wrapper.-striped .table tbody > tr:nth-of-type(odd) th,
.table-wrapper.-striped .table tbody > tr:nth-of-type(odd) td {
  background: var(--table--striped--background);
}
.table-wrapper.-hover .table tbody tr th,
.table-wrapper.-hover .table tbody tr td {
  transition-property: var(--table--transition-property, color, background-color, border);
  transition-duration: var(--table--transition-duration, var(--transition-duration));
  transition-timing-function: var(--table--transition-timing-function, var(--transition-timing-function));
}
.table-wrapper.-hover .table tbody tr:hover th,
.table-wrapper.-hover .table tbody tr:hover td {
  background: var(--table--hover--background);
}

/**
 * Color variants
 */
.table-wrapper.-primary {
  --table--background: var(--table--primary--background, var(--color-primary));
  --table--hover--background: var(
      --table--primary--hover--background,
      var(--color-primary-shade-100)
  );
  --table--striped--background: var(
      --table--primary--striped--background,
      var(--color-primary-shade-50)
  );
  --table--border-color: var(--table--primary--border-color, var(--color-primary-shade-50));
  --table--color: var(--table--primary--color, var(--contrast-text-color-primary));
}
.table-wrapper.-secondary {
  --table--background: var(--table--secondary--background, var(--color-secondary));
  --table--hover--background: var(
      --table--secondary--hover--background,
      var(--color-secondary-shade-100)
  );
  --table--striped--background: var(
      --table--secondary--striped--background,
      var(--color-secondary-shade-50)
  );
  --table--border-color: var(
      --table--secondary--border-color,
      var(--color-secondary-shade-50)
  );
  --table--color: var(--table--secondary--color, var(--contrast-text-color-secondary));
}
.table-wrapper.-light {
  --table--background: var(--table--light--background, var(--color-white));
  --table--hover--background: var(--table--light--hover--background, var(--color-gray-100));
  --table--striped--background: var(
      --table--light--striped--background,
      var(--color-gray-50)
  );
  --table--border-color: var(--table--light--border-color, var(--color-gray-50));
  --table--color: var(--table--light--color, var(--contrast-text-color-light));
}
.table-wrapper.-dark {
  --table--background: var(--table--dark--background, var(--color-dark));
  --table--hover--background: var(
      --table--dark--hover--background,
      var(--color-dark-tint-100)
  );
  --table--striped--background: var(
      --table--dark--striped--background,
      var(--color-dark-tint-50)
  );
  --table--border-color: var(--table--dark--border-color, var(--color-dark-tint-50));
  --table--color: var(--table--dark--color, var(--contrast-text-color-dark));
}
.table-wrapper.-info {
  --table--background: var(--table--info--background, var(--color-info));
  --table--hover--background: var(
      --table--hover--info--background,
      var(--color-info-shade-100)
  );
  --table--striped--background: var(
      --table--info--striped--background,
      var(--color-info-shade-50)
  );
  --table--border-color: var(--table--info--border-color, var(--color-info-shade-50));
  --table--color: var(--table--info--color, var(--contrast-text-color-info));
}
.table-wrapper.-success {
  --table--background: var(--table--success--background, var(--color-success));
  --table--hover--background: var(
      --table--success--hover--background,
      var(--color-success-shade-100)
  );
  --table--striped--background: var(
      --table--success--striped--background,
      var(--color-success-shade-50)
  );
  --table--border-color: var(--table--success--border-color, var(--color-success-shade-50));
  --table--color: var(--table--success--color, var(--contrast-text-color-success));
}
.table-wrapper.-warning {
  --table--background: var(--table--warning--background, var(--color-warning));
  --table--hover--background: var(
      --table--warning--hover--background,
      var(--color-warning-shade-100)
  );
  --table--striped--background: var(
      --table--warning--striped--background,
      var(--color-warning-shade-50)
  );
  --table--border-color: var(--table--warning--border-color, var(--color-warning-shade-50));
  --table--color: var(--table--warning--color, var(--contrast-text-color-warning));
}
.table-wrapper.-danger {
  --table--background: var(--table--danger--background, var(--color-danger));
  --table--hover--background: var(
      --table--danger--hover--background,
      var(--color-danger-shade-100)
  );
  --table--striped--background: var(
      --table--danger--striped--background,
      var(--color-danger-shade-50)
  );
  --table--border-color: var(--table--danger--border-color, var(--color-danger-shade-50));
  --table--color: var(--table--danger--color, var(--contrast-text-color-danger));
}

/**
 * Tabs
 */
.tabs {
  position: relative;
  display: block;
}
.tabs .tabs-header {
  display: flex;
  justify-content: flex-start;
  flex-wrap: nowrap;
  align-items: center;
  border-color: var(--tabs--header--border-color, var(--tabs--header--border-top-color, var(--tabs--border-top-color, var(--border-top-color))) var(--tabs--header--border-right-color, var(--tabs--border-right-color, var(--border-right-color))) var(--tabs--header--border-bottom-color, var(--tabs--border-bottom-color, var(--border-bottom-color))) var(--tabs--header--border-left-color, var(--tabs--border-left-color, var(--border-left-color))));
  border-style: var(--tabs--header--border-style, var(--tabs--header--border-top-style, var(--tabs--border-top-style, var(--border-top-style))) var(--tabs--header--border-right-style, var(--tabs--border-right-style, var(--border-right-style))) var(--tabs--header--border-bottom-style, var(--tabs--border-bottom-style, var(--border-bottom-style))) var(--tabs--header--border-left-style, var(--tabs--border-left-style, var(--border-left-style))));
  border-width: var(--tabs--header--border-width, var(--tabs--header--border-top-width, var(--tabs--border-top-width, var(--border-top-width))) var(--tabs--header--border-right-width, var(--tabs--border-right-width, var(--border-right-width))) var(--tabs--header--border-bottom-width, var(--tabs--border-bottom-width, var(--border-bottom-width))) var(--tabs--header--border-left-width, var(--tabs--border-left-width, var(--border-left-width))));
  font-size: var(--tabs--header--font-size, var(--tabs--font-size, var(--font-size)));
  border-radius: var(--tabs--header--border-radius, var(--tabs--border-radius, var(--tabs--header--border-top-left-radius, var(--tabs--border-top-left-radius, var(--border-top-left-radius))) var(--tabs--header--border-top-right-radius, var(--tabs--border-top-right-radius, var(--border-top-right-radius))) var(--tabs--header--border-bottom-right-radius, var(--tabs--border-bottom-right-radius, var(--border-bottom-right-radius))) var(--tabs--header--border-bottom-left-radius, var(--tabs--border-bottom-left-radius, var(--border-bottom-left-radius)))));
  margin-bottom: var(--tabs--header--margin-bottom, var(--tabs--margin-bottom, var(--margin-bottom)));
  overflow: auto;
  color: var(--tabs--header--color, var(--tabs--color));
  background: var(--tabs--header--background, var(--tabs--background));
}
.tabs.-stretch .tabs-header .tab-title {
  flex-grow: 1;
}

/**
 * Color variants
 */
.tabs.-light {
  --tabs--background: var(--tabs--light--background, var(--color-white));
  --tabs--border-top-color: var(--tabs--light--border-top-color, var(--color-light-shade-50));
  --tabs--border-right-color: var(
      --tabs--light--border-right-color,
      var(--color-light-shade-50)
  );
  --tabs--border-bottom-color: var(
      --tabs--light--border-bottom-color,
      var(--color-light-shade-50)
  );
  --tabs--border-left-color: var(
      --tabs--light--border-left-color,
      var(--color-light-shade-50)
  );
  --tabs--color: var(--tabs--light--color, var(--contrast-text-color-white));
  --tabs--title--background: var(--tabs--light--title--background, var(--color-white));
  --tabs--title--active--background: var(
      --tabs--light--title--active--background,
      var(--color-gray-50)
  );
  --tabs--title--hover--background: var(
      --tabs--hover--light--title--background,
      var(--color-gray-50)
  );
}
.tabs.-dark {
  --tabs--background: var(--tabs--dark--background, var(--color-dark));
  --tabs--border-top-color: var(--tabs--dark--border-top-color, var(--color-dark-tint-50));
  --tabs--border-right-color: var(
      --tabs--dark--border-right-color,
      var(--color-dark-tint-50)
  );
  --tabs--border-bottom-color: var(
      --tabs--dark--border-bottom-color,
      var(--color-dark-tint-50)
  );
  --tabs--border-left-color: var(--tabs--dark--border-left-color, var(--color-dark-tint-50));
  --tabs--color: var(--tabs--dark--color, var(--contrast-text-color-dark));
  --tabs--title--background: var(--tabs--dark--title--background, var(--color-dark));
  --tabs--title--active--background: var(
      --tabs--dark--title--active--background,
      var(--color-dark-tint-50)
  );
  --tabs--title--hover--background: var(
      --tabs--dark--title--hover--background,
      var(--color-dark-tint-50)
  );
}

/**
 * Size variants
 */
.tabs.-sm {
  --tabs--border-top-left-radius: var(
      --tabs--sm--border-top-left-radius,
      calc(var(--border-top-left-radius) * var(--size-multiplier-sm))
  );
  --tabs--border-top-right-radius: var(
      --tabs--sm--border-top-right-radius,
      calc(var(--border-top-right-radius) * var(--size-multiplier-sm))
  );
  --tabs--border-bottom-right-radius: var(
      --tabs--sm--border-bottom-right-radius,
      calc(var(--border-bottom-right-radius) * var(--size-multiplier-sm))
  );
  --tabs--border-bottom-left-radius: var(
      --tabs--sm--border-bottom-left-radius,
      calc(var(--border-bottom-left-radius) * var(--size-multiplier-sm))
  );
  --tabs--font-size: var(
      --tabs--sm--font-size,
      calc(var(--font-size) * var(--size-multiplier-sm))
  );
  --tabs--padding-top: var(
      --tabs--sm--padding-top,
      calc(var(--padding-top) * var(--size-multiplier-sm))
  );
  --tabs--padding-right: var(
      --tabs--sm--padding-right,
      calc(var(--padding-right) * var(--size-multiplier-sm))
  );
  --tabs--padding-bottom: var(
      --tabs--sm--padding-bottom,
      calc(var(--padding-bottom) * var(--size-multiplier-sm))
  );
  --tabs--padding-left: var(
      --tabs--sm--padding-left,
      calc(var(--padding-left) * var(--size-multiplier-sm))
  );
}
.tabs.-md {
  --tabs--border-top-left-radius: var(
      --tabs--md--border-top-left-radius,
      calc(var(--border-top-left-radius) * var(--size-multiplier-md))
  );
  --tabs--border-top-right-radius: var(
      --tabs--md--border-top-right-radius,
      calc(var(--border-top-right-radius) * var(--size-multiplier-md))
  );
  --tabs--border-bottom-right-radius: var(
      --tabs--md--border-bottom-right-radius,
      calc(var(--border-bottom-right-radius) * var(--size-multiplier-md))
  );
  --tabs--border-bottom-left-radius: var(
      --tabs--md--border-bottom-left-radius,
      calc(var(--border-bottom-left-radius) * var(--size-multiplier-md))
  );
  --tabs--font-size: var(
      --tabs--md--font-size,
      calc(var(--font-size) * var(--size-multiplier-md))
  );
  --tabs--padding-top: var(
      --tabs--md--padding-top,
      calc(var(--padding-top) * var(--size-multiplier-md))
  );
  --tabs--padding-right: var(
      --tabs--md--padding-right,
      calc(var(--padding-right) * var(--size-multiplier-md))
  );
  --tabs--padding-bottom: var(
      --tabs--md--padding-bottom,
      calc(var(--padding-bottom) * var(--size-multiplier-md))
  );
  --tabs--padding-left: var(
      --tabs--md--padding-left,
      calc(var(--padding-left) * var(--size-multiplier-md))
  );
}
.tabs.-lg {
  --tabs--border-top-left-radius: var(
      --tabs--lg--border-top-left-radius,
      calc(var(--border-top-left-radius) * var(--size-multiplier-lg))
  );
  --tabs--border-top-right-radius: var(
      --tabs--lg--border-top-right-radius,
      calc(var(--border-top-right-radius) * var(--size-multiplier-lg))
  );
  --tabs--border-bottom-right-radius: var(
      --tabs--lg--border-bottom-right-radius,
      calc(var(--border-bottom-right-radius) * var(--size-multiplier-lg))
  );
  --tabs--border-bottom-left-radius: var(
      --tabs--lg--border-bottom-left-radius,
      calc(var(--border-bottom-left-radius) * var(--size-multiplier-lg))
  );
  --tabs--font-size: var(
      --tabs--lg--font-size,
      calc(var(--font-size) * var(--size-multiplier-lg))
  );
  --tabs--padding-top: var(
      --tabs--lg--padding-top,
      calc(var(--padding-top) * var(--size-multiplier-lg))
  );
  --tabs--padding-right: var(
      --tabs--lg--padding-right,
      calc(var(--padding-right) * var(--size-multiplier-lg))
  );
  --tabs--padding-bottom: var(
      --tabs--lg--padding-bottom,
      calc(var(--padding-bottom) * var(--size-multiplier-lg))
  );
  --tabs--padding-left: var(
      --tabs--lg--padding-left,
      calc(var(--padding-left) * var(--size-multiplier-lg))
  );
}

/**
 * Tab
 */
.tabs .tab {
  position: relative;
  display: block;
  transition-property: var(--tabs--tab--transition-property, var(--tabs--transition-property, background-color, border-color, color));
  transition-duration: var(--tabs--tab--transition-duration, var(--tabs--transition-duration, var(--transition-duration)));
  transition-timing-function: var(--tabs--tab--transition-timing-function, var(--tabs--transition-timing-function, var(--transition-timing-function)));
  color: var(--tabs--tab--color, var(--tabs--color));
  background: var(--tabs--tab--background, var(--tabs--background));
  border-color: var(--tabs--tab--border-color, var(--tabs--tab--border-top-color, var(--tabs--border-top-color, var(--border-top-color))) var(--tabs--tab--border-right-color, var(--tabs--border-right-color, var(--border-right-color))) var(--tabs--tab--border-bottom-color, var(--tabs--border-bottom-color, var(--border-bottom-color))) var(--tabs--tab--border-left-color, var(--tabs--border-left-color, var(--border-left-color))));
  border-style: var(--tabs--tab--border-style, var(--tabs--tab--border-top-style, var(--tabs--border-top-style, var(--border-top-style))) var(--tabs--tab--border-right-style, var(--tabs--border-right-style, var(--border-right-style))) var(--tabs--tab--border-bottom-style, var(--tabs--border-bottom-style, var(--border-bottom-style))) var(--tabs--tab--border-left-style, var(--tabs--border-left-style, var(--border-left-style))));
  border-width: var(--tabs--tab--border-width, var(--tabs--tab--border-top-width, var(--tabs--border-top-width, var(--border-top-width))) var(--tabs--tab--border-right-width, var(--tabs--border-right-width, var(--border-right-width))) var(--tabs--tab--border-bottom-width, var(--tabs--border-bottom-width, var(--border-bottom-width))) var(--tabs--tab--border-left-width, var(--tabs--border-left-width, var(--border-left-width))));
  border-radius: var(--tabs--tab--border-radius, var(--tabs--border-radius, var(--tabs--tab--border-top-left-radius, var(--tabs--border-top-left-radius, var(--border-top-left-radius))) var(--tabs--tab--border-top-right-radius, var(--tabs--border-top-right-radius, var(--border-top-right-radius))) var(--tabs--tab--border-bottom-right-radius, var(--tabs--border-bottom-right-radius, var(--border-bottom-right-radius))) var(--tabs--tab--border-bottom-left-radius, var(--tabs--border-bottom-left-radius, var(--border-bottom-left-radius)))));
}
.tabs .tab > .tab-body {
  display: block;
  position: relative;
  font-size: var(--tabs--tab--font-size, var(--tabs--font-size, var(--font-size)));
  padding: var(--tabs--tab--padding, var(--tabs--tab--padding-top, var(--tabs--padding-top, var(--padding-top))) var(--tabs--tab--padding-right, var(--tabs--padding-right, var(--padding-right))) var(--tabs--tab--padding-bottom, var(--tabs--padding-bottom, var(--padding-bottom))) var(--tabs--tab--padding-left, var(--tabs--padding-left, var(--padding-left))));
}

/**
 * Tab Title
 */
.tabs .tab-title {
  position: relative;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  border-style: var(--tabs--title--border-style, var(--tabs--title--border-top-style, var(--tabs--border-top-style, var(--border-top-style))) var(--tabs--title--border-right-style, var(--tabs--border-right-style, var(--border-right-style))) var(--tabs--title--border-bottom-style, var(--tabs--border-bottom-style, var(--border-bottom-style))) var(--tabs--title--border-left-style, var(--tabs--border-left-style, var(--border-left-style))));
  border-width: var(--tabs--title--border-width, var(--tabs--title--border-top-width, 0) var(--tabs--title--border-right-width, var(--tabs--border-right-width, var(--border-right-width))) var(--tabs--title--border-bottom-width, 0) var(--tabs--title--border-left-width, 0));
  border-color: var(--tabs--title--border-color, var(--tabs--title--border-top-color, var(--tabs--border-top-color, var(--border-top-color))) var(--tabs--title--border-right-color, var(--tabs--border-right-color, var(--border-right-color))) var(--tabs--title--border-bottom-color, var(--tabs--border-bottom-color, var(--border-bottom-color))) var(--tabs--title--border-left-color, var(--tabs--border-left-color, var(--border-left-color))));
  padding: var(--tabs--title--padding, var(--tabs--title--padding-top, var(--tabs--padding-top, var(--padding-top))) var(--tabs--title--padding-right, var(--tabs--padding-right, var(--padding-right))) var(--tabs--title--padding-bottom, var(--tabs--padding-bottom, var(--padding-bottom))) var(--tabs--title--padding-left, var(--tabs--padding-left, var(--padding-left))));
  font-size: var(--tabs--title--font-size, var(--tabs--font-size, var(--font-size)));
  transition-property: var(--tabs--title--transition-property, var(--tabs--transition-property, background-color, border-color, color));
  transition-duration: var(--tabs--title--transition-duration, var(--tabs--transition-duration, var(--transition-duration)));
  transition-timing-function: var(--tabs--title--transition-timing-function, var(--tabs--transition-timing-function, var(--transition-timing-function)));
  color: var(--tabs--title--color, var(--tabs--color));
  background: var(--tabs--title--background, var(--tabs--background));
}
.tabs .tab-title.-active {
  color: var(--tabs--title--active--color, var(--tabs--title--color, var(--tabs--color)));
  background: var(--tabs--title--active--background, var(--tabs--title--background, var(--tabs--background)));
  border-color: var(--tabs--title--border-color, var(--tabs--title--active--border-top-color, var(--tabs--title--border-top-color, var(--tabs--border-top-color, var(--border-top-color)))) var(--tabs--title--active--border-right-color, var(--tabs--title--border-right-color, var(--tabs--border-right-color, var(--border-right-color)))) var(--tabs--title--active--border-bottom-color, var(--tabs--title--border-bottom-color, var(--tabs--border-bottom-color, var(--border-bottom-color)))) var(--tabs--title--active--border-left-color, var(--tabs--title--border-left-color, var(--tabs--border-left-color, var(--border-left-color)))));
  font-weight: var(--tabs--title--active--font-weight, var(--font-weight-semibold));
}
.tabs .tab-title:hover, .tabs .tab-title:focus {
  background: var(--tabs--title--hover--background, var(--tabs--title--background));
  cursor: pointer;
  outline: none;
}

.tabs.-stretch .tab > .tabs-header .tab-title {
  flex-grow: 1;
}
.tabs.-stretch .tab > .tabs-header .tab-title:last-of-type {
  border-right-width: var(--tabs--stretch--title--border-right-width, 0);
}

/**
 * Toast
 */
.toast {
  position: relative;
  display: flex;
  flex-direction: row;
  flex: 1 1 auto;
  min-width: 0;
  word-wrap: break-word;
  overflow: hidden;
  border-style: var(--toast--border-style, var(--toast--border-top-style, var(--border-top-style)) var(--toast--border-right-style, var(--border-right-style)) var(--toast--border-bottom-style, var(--border-bottom-style)) var(--toast--border-left-style, var(--border-left-style)));
  border-width: var(--toast--border-width, var(--toast--border-top-width, var(--border-top-width)) var(--toast--border-right-width, var(--border-right-width)) var(--toast--border-bottom-width, var(--border-bottom-width)) var(--toast--border-left-width, var(--border-left-width)));
  border-color: var(--toast--border-color, var(--toast--border-top-color, var(--border-top-color)) var(--toast--border-right-color, var(--border-right-color)) var(--toast--border-bottom-color, var(--border-bottom-color)) var(--toast--border-left-color, var(--border-left-color)));
  border-radius: var(--toast--border-radius, var(--toast--border-top-left-radius, var(--border-top-left-radius)) var(--toast--border-top-right-radius, var(--border-top-right-radius)) var(--toast--border-bottom-right-radius, var(--border-bottom-right-radius)) var(--toast--border-bottom-left-radius, var(--border-bottom-left-radius)));
  font-size: var(--toast--font-size, var(--font-size));
  box-shadow: var(--toast--box-shadow, var(--toast--box-shadow-x-offset, var(--box-shadow-offset-x)) var(--toast--box-shadow-y-offset, var(--box-shadow-offset-y)) var(--toast--box-shadow-blur-radius, var(--box-shadow-blur-radius)) var(--toast--box-shadow-spread-radius, var(--box-shadow-spread-radius)) var(--toast--box-shadow-color, var(--box-shadow-color)));
  background: var(--toast--background);
  color: var(--toast--color);
  background-clip: border-box;
  transition-property: var(--toast--transition-property, background-color, color, border-color);
  transition-duration: var(--toast--transition-duration, var(--transition-duration));
  transition-timing-function: var(--toast--transition-timing-function, var(--transition-timing-function));
  align-items: center;
}
.toast a {
  color: var(--toast--link--color, var(--toast--color));
  font-weight: 600;
  transition-property: var(--toast--link--transition-property, color);
  transition-duration: var(--toast--transition-duration, var(--transition-duration));
  transition-timing-function: var(--toast--transition-timing-function, var(--transition-timing-function));
}
.toast a:hover, .toast a:focus {
  color: var(--toast--link-color, var(--color));
}
.toast code {
  background: var(--toast--code--background);
  color: var(--toast--code--color);
}
.toast > .toast-content {
  padding: var(--toast--padding, var(--toast--padding-top, var(--padding-top)) var(--toast--padding-right, var(--padding-right)) var(--toast--padding-bottom, var(--padding-bottom)) var(--toast--padding-left, var(--padding-left)));
}
.toast > .toast-content > .toast-title {
  font-weight: var(--toast--title--font-weight, var(--font-weight-semibold));
}
.toast > .toast-icon {
  padding-left: var(--toast--padding-left, var(--padding-left));
  border-color: var(--toast--border-color, var(--toast--border-top-color, var(--border-top-color)) var(--toast--border-right-color, var(--border-right-color)) var(--toast--border-bottom-color, var(--border-bottom-color)) var(--toast--border-left-color, var(--border-left-color)));
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.toast > .toast-dismiss {
  flex: 0 0 auto;
  cursor: pointer;
  display: inline-block;
  text-align: center;
  margin-right: var(--toast--padding-left, var(--padding-left));
}
.toast > .toast-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: var(--toast--progress--height, 0.25rem);
  background: var(--toast--progress--background);
  z-index: 1;
}
.toast > .toast-progress .toast-progress-bar {
  animation: toast-duration var(--toast--duration) forwards;
  transform-origin: left center;
  width: 100%;
  height: 100%;
  background: var(--toast--progress-bar--background);
}
.toast,
.toast > .toast-content {
  flex: 0 1 100%;
}
.toast > hr,
.toast > .toast-content > hr {
  margin-right: 0;
  margin-left: 0;
}
.toast > *:first-of-type,
.toast > .toast-content > *:first-of-type {
  margin-top: 0;
}
.toast > *:last-of-type,
.toast > .toast-content > *:last-of-type {
  margin-bottom: 0;
}

@keyframes toast-duration {
  to {
    /* More performant than animating `width` */
    transform: scaleX(0);
  }
}
/**
 * Color variants
 */
.toast.-light {
  --toast--background: var(--toast--light--background, var(--color-white));
  --toast--border-top-color: var(
      --toast--light--border-top-color,
      var(--color-light-shade-50)
  );
  --toast--border-right-color: var(
      --toast--light--border-right-color,
      var(--color-light-shade-50)
  );
  --toast--border-bottom-color: var(
      --toast--light--border-bottom-color,
      var(--color-light-shade-50)
  );
  --toast--border-left-color: var(
      --toast--light--border-left-color,
      var(--color-light-shade-50)
  );
  --toast--color: var(--toast--light--color, var(--contrast-text-color-light));
  --toast--progress--background: var(
      --toast--light--progress--background,
      rgba(0, 0, 0, 0.05)
  );
  --toast--progress-bar--background: var(
      --toast--light--progress-bar--background,
      rgba(0, 0, 0, 0.15)
  );
}
.toast.-dark {
  --toast--background: var(--toast--dark--background, var(--color-dark));
  --toast--border-top-color: var(--toast--dark--border-top-color, var(--color-dark-tint-50));
  --toast--border-right-color: var(
      --toast--dark--border-right-color,
      var(--color-dark-tint-50)
  );
  --toast--border-bottom-color: var(
      --toast--dark--border-bottom-color,
      var(--color-dark-tint-50)
  );
  --toast--border-left-color: var(
      --toast--dark--border-left-color,
      var(--color-dark-tint-50)
  );
  --toast--color: var(--toast--dark--color, var(--contrast-text-color-dark));
  --toast--progress--background: var(
      --toast--dark--progress--background,
      rgba(255, 255, 255, 0.05)
  );
  --toast--progress-bar--background: var(
      --toast--dark--progress-bar--background,
      rgba(255, 255, 255, 0.15)
  );
}
.toast.-info {
  --toast--background: var(--toast--info--background, var(--color-info-100));
  --toast--border-top-color: var(--toast--info--border-top-color, var(--color-info-500));
  --toast--border-right-color: var(--toast--info--border-right-color, var(--color-info-500));
  --toast--border-bottom-color: var(
      --toast--info--border-bottom-color,
      var(--color-info-500)
  );
  --toast--border-left-color: var(--toast--info--border-left-color, var(--color-info-500));
  --toast--color: var(--toast--info--color, var(--color-info-800));
  --toast--progress--background: var(
      --toast--info--progress--background,
      rgba(0, 0, 0, 0.05)
  );
  --toast--progress-bar--background: var(
      --toast--info--progress-bar--background,
      rgba(0, 0, 0, 0.15)
  );
}
.toast.-success {
  --toast--background: var(--toast--success--background, var(--color-success-100));
  --toast--border-top-color: var(
      --toast--success--border-top-color,
      var(--color-success-500)
  );
  --toast--border-right-color: var(
      --toast--success--border-right-color,
      var(--color-success-500)
  );
  --toast--border-bottom-color: var(
      --toast--success--border-bottom-color,
      var(--color-success-500)
  );
  --toast--border-left-color: var(
      --toast--success--border-left-color,
      var(--color-success-500)
  );
  --toast--color: var(--toast--success--color, var(--color-success-800));
  --toast--progress--background: var(
      --toast--success--progress--background,
      rgba(0, 0, 0, 0.05)
  );
  --toast--progress-bar--background: var(
      --toast--success--progress-bar--background,
      rgba(0, 0, 0, 0.15)
  );
}
.toast.-warning {
  --toast--background: var(--toast--warning--background, var(--color-warning-100));
  --toast--border-top-color: var(
      --toast--warning--border-top-color,
      var(--color-warning-500)
  );
  --toast--border-right-color: var(
      --toast--warning--border-right-color,
      var(--color-warning-500)
  );
  --toast--border-bottom-color: var(
      --toast--warning--border-bottom-color,
      var(--color-warning-500)
  );
  --toast--border-left-color: var(
      --toast--warning--border-left-color,
      var(--color-warning-500)
  );
  --toast--color: var(--toast--warning--color, var(--color-warning-800));
  --toast--progress--background: var(
      --toast--warning--progress--background,
      rgba(0, 0, 0, 0.05)
  );
  --toast--progress-bar--background: var(
      --toast--warning--progress-bar--background,
      rgba(0, 0, 0, 0.15)
  );
}
.toast.-danger {
  --toast--background: var(--toast--danger--background, var(--color-danger-100));
  --toast--border-top-color: var(--toast--danger--border-top-color, var(--color-danger-500));
  --toast--border-right-color: var(
      --toast--danger--border-right-color,
      var(--color-danger-500)
  );
  --toast--border-bottom-color: var(
      --toast--danger--border-bottom-color,
      var(--color-danger-500)
  );
  --toast--border-left-color: var(
      --toast--danger--border-left-color,
      var(--color-danger-500)
  );
  --toast--color: var(--toast--danger--color, var(--color-danger-800));
  --toast--progress--background: var(
      --toast--danger--progress--background,
      rgba(0, 0, 0, 0.05)
  );
  --toast--progress-bar--background: var(
      --toast--danger--progress-bar--background,
      rgba(0, 0, 0, 0.15)
  );
}

/**
 * Size variants
 */
.toast.-sm {
  --toast--border-top-left-radius: var(
      --toast--sm--border-top-left-radius,
      calc(var(--border-top-right-radius) * var(--size-multiplier-sm))
  );
  --toast--border-top-right-radius: var(
      --toast--sm--border-top-right-radius,
      calc(var(--border-top-right-radius) * var(--size-multiplier-sm))
  );
  --toast--border-bottom-right-radius: var(
      --toast--sm--border-bottom-right-radius,
      calc(var(--border-bottom-right-radius) * var(--size-multiplier-sm))
  );
  --toast--border-bottom-left-radius: var(
      --toast--sm--border-bottom-left-radius,
      calc(var(--border-bottom-left-radius) * var(--size-multiplier-sm))
  );
  --toast--font-size: var(
      --toast--sm--font-size,
      calc(var(--font-size) * var(--size-multiplier-sm))
  );
  --toast--padding-top: var(
      --toast--sm--padding-top,
      calc(var(--padding-top) * var(--size-multiplier-sm))
  );
  --toast--padding-right: var(
      --toast--sm--padding-right,
      calc(var(--padding-right) * var(--size-multiplier-sm))
  );
  --toast--padding-bottom: var(
      --toast--sm--padding-bottom,
      calc(var(--padding-bottom) * var(--size-multiplier-sm))
  );
  --toast--padding-left: var(
      --toast--sm--padding-left,
      calc(var(--padding-left) * var(--size-multiplier-sm))
  );
}
.toast.-md {
  --toast--border-top-left-radius: var(
      --toast--md--border-top-left-radius,
      calc(var(--border-top-right-radius) * var(--size-multiplier-md))
  );
  --toast--border-top-right-radius: var(
      --toast--md--border-top-right-radius,
      calc(var(--border-top-right-radius) * var(--size-multiplier-md))
  );
  --toast--border-bottom-right-radius: var(
      --toast--md--border-bottom-right-radius,
      calc(var(--border-bottom-right-radius) * var(--size-multiplier-md))
  );
  --toast--border-bottom-left-radius: var(
      --toast--md--border-bottom-left-radius,
      calc(var(--border-bottom-left-radius) * var(--size-multiplier-md))
  );
  --toast--font-size: var(
      --toast--md--font-size,
      calc(var(--font-size) * var(--size-multiplier-md))
  );
  --toast--padding-top: var(
      --toast--md--padding-top,
      calc(var(--padding-top) * var(--size-multiplier-md))
  );
  --toast--padding-right: var(
      --toast--md--padding-right,
      calc(var(--padding-right) * var(--size-multiplier-md))
  );
  --toast--padding-bottom: var(
      --toast--md--padding-bottom,
      calc(var(--padding-bottom) * var(--size-multiplier-md))
  );
  --toast--padding-left: var(
      --toast--md--padding-left,
      calc(var(--padding-left) * var(--size-multiplier-md))
  );
}
.toast.-lg {
  --toast--border-top-left-radius: var(
      --toast--lg--border-top-left-radius,
      calc(var(--border-top-right-radius) * var(--size-multiplier-lg))
  );
  --toast--border-top-right-radius: var(
      --toast--lg--border-top-right-radius,
      calc(var(--border-top-right-radius) * var(--size-multiplier-lg))
  );
  --toast--border-bottom-right-radius: var(
      --toast--lg--border-bottom-right-radius,
      calc(var(--border-bottom-right-radius) * var(--size-multiplier-lg))
  );
  --toast--border-bottom-left-radius: var(
      --toast--lg--border-bottom-left-radius,
      calc(var(--border-bottom-left-radius) * var(--size-multiplier-lg))
  );
  --toast--font-size: var(
      --toast--lg--font-size,
      calc(var(--font-size) * var(--size-multiplier-lg))
  );
  --toast--padding-top: var(
      --toast--lg--padding-top,
      calc(var(--padding-top) * var(--size-multiplier-lg))
  );
  --toast--padding-right: var(
      --toast--lg--padding-right,
      calc(var(--padding-right) * var(--size-multiplier-lg))
  );
  --toast--padding-bottom: var(
      --toast--lg--padding-bottom,
      calc(var(--padding-bottom) * var(--size-multiplier-lg))
  );
  --toast--padding-left: var(
      --toast--lg--padding-left,
      calc(var(--padding-left) * var(--size-multiplier-lg))
  );
}

/**
 * Toast Container
 */
.toast-container {
  position: relative;
}
.toast-container .toast-position {
  position: fixed;
  width: 320px;
  max-width: 100%;
  z-index: var(--toast-container--z-index, 2010);
  margin: var(--toast-container--margin, var(--toast-container--margin-top, var(--margin-top)) var(--toast-container--margin-right, var(--margin-right)) var(--toast-container--margin-bottom, var(--margin-bottom)) var(--toast-container--margin-left, var(--margin-left)));
  max-height: 100%;
  overflow: visible;
}
.toast-container .toast-position.-top-left {
  top: var(--toast-container--top, 0);
  left: var(--toast-container--left, 0);
}
.toast-container .toast-position.-top {
  top: var(--toast-container--top, 0);
  left: 50%;
  transform: translateX(-50%);
}
.toast-container .toast-position.-top-right {
  top: var(--toast-container--top, 0);
  right: var(--toast-container--right, 0);
}
.toast-container .toast-position.-right {
  top: 50%;
  right: var(--toast-container--right, 0);
  transform: translateY(-50%);
}
.toast-container .toast-position.-bottom-right {
  bottom: var(--toast-container--bottom, 0);
  right: var(--toast-container--right, 0);
}
.toast-container .toast-position.-bottom {
  bottom: var(--toast-container--bottom, 0);
  left: 50%;
  transform: translateX(-50%);
}
.toast-container .toast-position.-bottom-left {
  bottom: var(--toast-container--bottom, 0);
  left: var(--toast-container--left, 0);
}
.toast-container .toast-position.-left {
  top: 50%;
  left: var(--toast-container--left, 0);
  transform: translateY(-50%);
}
.toast-container .toast-position > .toast {
  width: 320px;
  max-width: 100%;
  margin-bottom: var(--toast-container--toast--margin-bottom, var(--margin-bottom));
}
.toast-container .toast-position > .toast:last-of-type {
  margin-bottom: 0;
}

.toast-transition-move,
.toast-transition-enter-active,
.toast-transition-leave-active {
  transition-property: var(--toast-container--toast--transition-property, transform, opacity);
  transition-duration: var(--toast-container--toast--transition-duration, var(--transition-duration));
  transition-timing-function: var(--toast-container--toast--transition-timing-function, var(--transition-timing-function));
}

.toast-transition-enter-from,
.toast-transition-leave-to {
  opacity: 0;
}

/* ensure leaving items are taken out of layout flow so that moving
   animations can be calculated correctly. */
.toast-transition-leave-active {
  position: absolute;
}

/**
 * Toggle
 */
.toggle {
  position: relative;
  margin-bottom: 0;
  display: flex;
}
.toggle > input {
  opacity: 0;
  width: 0;
  height: 0;
  cursor: pointer;
  position: absolute;
  top: 0;
  left: 0;
}
.toggle > input:checked + .toggle-label::before {
  background: var(--toggle--checked--background, var(--color-primary));
  border-color: var(--toggle--checked--border-color, var(--toggle--checked--border-top-color, var(--color-primary)) var(--toggle--checked--border-right-color, var(--color-primary)) var(--toggle--checked--border-bottom-color, var(--color-primary)) var(--toggle--checked--border-left-color, var(--color-primary)));
}
.toggle > input:checked + .toggle-label::after {
  background: var(--toggle--checked--indicator--background, var(--color-white));
  transform: translate(calc(var(--toggle--width, 40px) * 0.5), 0);
}
.toggle > input:focus + .toggle-label::before {
  box-shadow: 0 0 1px var(--toggle--checked--background);
}
.toggle > input:disabled + .toggle-label, .toggle > input[readonly] + .toggle-label {
  cursor: default;
  color: var(--toggle--disabled--label--color);
}
.toggle > input:disabled + .toggle-label::before, .toggle > input[readonly] + .toggle-label::before {
  background: var(--toggle--disabled--background);
  border-color: var(--toggle--disabled--border-color, var(--toggle--disabled--border-top-color, var(--toggle--border-top-color, var(--border-top-color))) var(--toggle--disabled--border-right-color, var(--toggle--border-right-color, var(--border-right-color))) var(--toggle--disabled--border-bottom-color, var(--toggle--border-bottom-color, var(--border-bottom-color))) var(--toggle--disabled--border-left-color, var(--toggle--border-left-color, var(--border-left-color))));
}
.toggle > input:disabled + .toggle-label::after, .toggle > input[readonly] + .toggle-label::after {
  background: var(--toggle--disabled--indicator--background);
}
.toggle > input:disabled:checked + .toggle-label::before, .toggle > input[readonly]:checked + .toggle-label::before {
  background: var(--toggle--checked--disabled--background);
  border-color: var(--toggle--checked--disabled--border-color, var(--toggle--checked--disabled--border-top-color, var(--color-primary)) var(--toggle--checked--disabled--border-right-color, var(--color-primary)) var(--toggle--checked--disabled--border-bottom-color, var(--color-primary)) var(--toggle--checked--disabled--border-left-color, var(--color-primary)));
}
.toggle > input:disabled:checked + .toggle-label::after, .toggle > input[readonly]:checked + .toggle-label::after {
  background: var(--toggle--checked--disabled--indicator--background);
}
.toggle .toggle-label {
  display: flex;
  align-items: center;
  position: relative;
  margin: 0;
  color: var(--toggle--label--color, var(--toggle--color));
  font-size: var(--toggle--label--font-size, var(--toggle--font-size, var(--font-size)));
}
.toggle .toggle-label::before {
  content: "";
  position: relative;
  display: inline-block;
  cursor: pointer;
  transition-duration: var(--toggle--transition-duration, var(--transition-duration));
  transition-property: var(--toggle--transition-property, background-color, border-color, transform);
  transition-timing-function: var(--toggle--transition-timing-function, var(--transition-timing-function));
  border-width: var(--toggle--border-width, var(--toggle--border-top-width, var(--border-top-width)) var(--toggle--border-right-width, var(--border-right-width)) var(--toggle--border-bottom-width, var(--border-bottom-width)) var(--toggle--border-left-width, var(--border-left-width)));
  border-style: var(--toggle--border-style, var(--toggle--border-top-style, var(--border-top-style)) var(--toggle--border-right-style, var(--border-right-style)) var(--toggle--border-bottom-style, var(--border-bottom-style)) var(--toggle--border-left-style, var(--border-left-style)));
  border-color: var(--toggle--border-color, var(--toggle--border-top-color, var(--border-top-color)) var(--toggle--border-right-color, var(--border-right-color)) var(--toggle--border-bottom-color, var(--border-bottom-color)) var(--toggle--border-left-color, var(--border-left-color)));
  margin-right: var(--toggle--margin-right, var(--margin-right));
  flex-shrink: 0;
  flex-grow: 0;
  background-color: var(--toggle--background);
  width: var(--toggle--width, 40px);
  height: var(--toggle--height, 20px);
  border-radius: var(--toggle--border-radius, var(--toggle--border-top-left-radius, var(--border-top-left-radius)) var(--toggle--border-top-right-radius, var(--border-top-right-radius)) var(--toggle--border-bottom-right-radius, var(--border-bottom-right-radius)) var(--toggle--border-bottom-left-radius, var(--border-bottom-left-radius)));
}
.toggle .toggle-label::after {
  content: "";
  position: absolute;
  display: block;
  top: 50%;
  left: 0;
  z-index: 1;
  transform: translate(0, 0);
  transition-duration: var(--toggle--transition-duration, var(--transition-duration));
  transition-property: var(--toggle--transition-property, background-color, border-color, transform);
  transition-timing-function: var(--toggle--transition-timing-function, var(--transition-timing-function));
  background-color: var(--toggle--indicator--background);
  height: var(--toggle--indicator--width, 16px);
  width: var(--toggle--indicator--height, 16px);
  border-radius: var(--toggle--indicator--border-radius, var(--toggle--indicator--border-top-left-radius, var(--toggle--border-top-left-radius, var(--border-top-left-radius))) var(--toggle--indicator--border-top-right-radius, var(--toggle--border-top-right-radius, var(--border-top-right-radius))) var(--toggle--indicator--border-bottom-right-radius, var(--toggle--border-bottom-right-radius, var(--border-bottom-right-radius))) var(--toggle--indicator--border-bottom-left-radius, var(--toggle--border-bottom-left-radius, var(--border-bottom-left-radius))));
  margin-top: calc(var(--toggle--indicator--height, 16px) / -2);
  margin-left: calc(var(--toggle--height, 20px) / 2 - var(--toggle--indicator--height, 16px) / 2);
}
.toggle.-rounded .toggle-label::before {
  border-radius: var(--toggle--rounded--border-radius, var(--toggle--rounded--border-top-left-radius, var(--toggle--height)) var(--toggle--rounded--border-top-right-radius, var(--toggle--height)) var(--toggle--rounded--border-bottom-right-radius, var(--toggle--height)) var(--toggle--rounded--border-bottom-left-radius, var(--toggle--height)));
}
.toggle.-rounded .toggle-label::after {
  border-radius: var(--toggle--rounded--indicator--border-radius, var(--toggle--rounded--indicator--border-top-left-radius, 50%) var(--toggle--rounded--indicator--border-top-right-radius, 50%) var(--toggle--rounded--indicator--border-bottom-right-radius, 50%) var(--toggle--rounded--indicator--border-bottom-left-radius, 50%));
}

/**
 * Color variants
 */
.toggle.-light {
  --toggle--background: var(--toggle--light--background, var(--color-light));
  --toggle--border-top-color: var(
      --toggle--light--border-top-color,
      var(--color-light-shade-50)
  );
  --toggle--border-right-color: var(
      --toggle--light--border-right-color,
      var(--color-light-shade-50)
  );
  --toggle--border-bottom-color: var(
      --toggle--light--border-bottom-color,
      var(--color-light-shade-50)
  );
  --toggle--border-left-color: var(
      --toggle--light--border-left-color,
      var(--color-light-shade-50)
  );
  --toggle--indicator--background: var(
      --toggle--light--indicator--background,
      var(--color-white)
  );
  --toggle--label--color: var(
      --toggle--light--label--color,
      var(--contrast-text-color-white)
  );
  --toggle--checked--background: var(
      --toggle--light--checked--background,
      var(--color-primary)
  );
  --toggle--checked--border-top-color: var(
      --toggle--light--checked--border-top-color,
      var(--color-primary-shade-50)
  );
  --toggle--checked--border-right-color: var(
      --toggle--light--checked--border-right-color,
      var(--color-primary-shade-50)
  );
  --toggle--checked--border-bottom-color: var(
      --toggle--light--checked--border-bottom-color,
      var(--color-primary-shade-50)
  );
  --toggle--checked--border-left-color: var(
      --toggle--light--checked--border-left-color,
      var(--color-primary-shade-50)
  );
  --toggle--disabled--background: var(
      --toggle--light--disabled--background,
      var(--color-light-shade-50)
  );
  --toggle--disabled--border-top-color: var(
      --toggle--light--disabled--border-top-color,
      var(--color-light-shade-50)
  );
  --toggle--disabled--border-right-color: var(
      --toggle--light--disabled--border-right-color,
      var(--color-light-shade-50)
  );
  --toggle--disabled--border-bottom-color: var(
      --toggle--light--disabled--border-bottom-color,
      var(--color-light-shade-50)
  );
  --toggle--disabled--border-left-color: var(
      --toggle--light--disabled--border-left-color,
      var(--color-light-shade-50)
  );
  --toggle--disabled--indicator--background: var(
      --toggle--disabled--light--indicator--background,
      var(--color-gray-50)
  );
  --toggle--disabled--label--color: var(
      --toggle--light--disabled--label--color,
      var(--text-color-weak)
  );
  --toggle--checked--disabled--background: var(
      --toggle--light--checked--disabled--background,
      var(--color-primary-200)
  );
  --toggle--checked--disabled--border-color: var(
      --toggle--light--checked--disabled--border-color,
      var(--color-primary-300)
  );
  --toggle--checked--disabled--indicator--background: var(
      --toggle--checked--light--indicator--disabled--background,
      var(--color-gray-50)
  );
}
.toggle.-dark {
  --toggle--background: var(--toggle--dark--background, var(--color-dark));
  --toggle--border-top-color: var(
      --toggle--dark--border-top-color,
      var(--color-dark-tint-50)
  );
  --toggle--border-right-color: var(
      --toggle--dark--border-right-color,
      var(--color-dark-tint-50)
  );
  --toggle--border-bottom-color: var(
      --toggle--dark--border-bottom-color,
      var(--color-dark-tint-50)
  );
  --toggle--border-left-color: var(
      --toggle--dark--border-left-color,
      var(--color-dark-tint-50)
  );
  --toggle--indicator--background: var(
      --toggle--light--indicator--background,
      var(--color-white)
  );
  --toggle--label--color: var(--toggle--dark--label--color, var(--contrast-text-color-dark));
  --toggle--checked--background: var(
      --toggle--dark--checked--background,
      var(--color-primary)
  );
  --toggle--checked--border-top-color: var(
      --toggle--dark--checked--border-top-color,
      var(--color-primary-tint-50)
  );
  --toggle--checked--border-right-color: var(
      --toggle--dark--checked--border-right-color,
      var(--color-primary-tint-50)
  );
  --toggle--checked--border-bottom-color: var(
      --toggle--dark--checked--border-bottom-color,
      var(--color-primary-tint-50)
  );
  --toggle--checked--border-left-color: var(
      --toggle--dark--checked--border-left-color,
      var(--color-primary-tint-50)
  );
  --toggle--disabled--background: var(
      --toggle--dark--disabled--background,
      var(--color-dark-tint-100)
  );
  --toggle--disabled--border-color: var(
      --toggle--dark--disabled--border-color,
      var(--color-dark-tint-50)
  );
  --toggle--disabled--indicator--background: var(
      --toggle--dark--disabled--indicator--background,
      var(--color-gray-400)
  );
  --toggle--disabled--label--color: var(
      --toggle--dark--disabled--label--color,
      var(--text-color-weak)
  );
  --toggle--checked--disabled--background: var(
      --toggle--dark--checked--disabled--background,
      var(--color-primary-800)
  );
  --toggle--checked--disabled--border-color: var(
      --toggle--dark--checked--disabled--border-color,
      var(--color-primary-900)
  );
  --toggle--checked--disabled--indicator--background: var(
      --toggle--dark--checked--disabled--indicator--background,
      var(--color-gray-300)
  );
}

/**
 * Size variants
 */
.toggle.-sm {
  --toggle--width: var(--toggle--sm--width, calc(40px * var(--size-multiplier-sm)));
  --toggle--height: var(--toggle--sm--height, calc(20px * var(--size-multiplier-sm)));
  --toggle--border-top-left-radius: var(
      --toggle--sm--border-top-left-radius,
      calc(var(--border-top-left-radius) * var(--size-multiplier-sm))
  );
  --toggle--border-top-right-radius: var(
      --toggle--sm--border-top-right-radius,
      calc(var(--border-top-right-radius) * var(--size-multiplier-sm))
  );
  --toggle--border-bottom-right-radius: var(
      --toggle--sm--border-bottom-right-radius,
      calc(var(--border-bottom-right-radius) * var(--size-multiplier-sm))
  );
  --toggle--border-bottom-left-radius: var(
      --toggle--sm--border-bottom-left-radius,
      calc(var(--border-bottom-left-radius) * var(--size-multiplier-sm))
  );
  --toggle--indicator--width: var(
      --toggle--sm--indicator--width,
      calc(16px * var(--size-multiplier-sm))
  );
  --toggle--indicator--height: var(
      --toggle--sm--indicator--height,
      calc(16px * var(--size-multiplier-sm))
  );
  --toggle--label--font-size: var(
      --toggle--sm--label--font-size,
      calc(var(--font-size) * var(--size-multiplier-sm))
  );
}
.toggle.-md {
  --toggle--width: var(--toggle--md--width, calc(40px * var(--size-multiplier-md)));
  --toggle--height: var(--toggle--md--height, calc(20px * var(--size-multiplier-md)));
  --toggle--border-top-left-radius: var(
      --toggle--md--border-top-left-radius,
      calc(var(--border-top-left-radius) * var(--size-multiplier-md))
  );
  --toggle--border-top-right-radius: var(
      --toggle--md--border-top-right-radius,
      calc(var(--border-top-right-radius) * var(--size-multiplier-md))
  );
  --toggle--border-bottom-right-radius: var(
      --toggle--md--border-bottom-right-radius,
      calc(var(--border-bottom-right-radius) * var(--size-multiplier-md))
  );
  --toggle--border-bottom-left-radius: var(
      --toggle--md--border-bottom-left-radius,
      calc(var(--border-bottom-left-radius) * var(--size-multiplier-md))
  );
  --toggle--indicator--width: var(
      --toggle--md--indicator--width,
      calc(16px * var(--size-multiplier-md))
  );
  --toggle--indicator--height: var(
      --toggle--md--indicator--height,
      calc(16px * var(--size-multiplier-md))
  );
  --toggle--label--font-size: var(
      --toggle--md--label--font-size,
      calc(var(--font-size) * var(--size-multiplier-md))
  );
}
.toggle.-lg {
  --toggle--width: var(--toggle--lg--width, calc(40px * var(--size-multiplier-lg)));
  --toggle--height: var(--toggle--lg--height, calc(20px * var(--size-multiplier-lg)));
  --toggle--border-top-left-radius: var(
      --toggle--lg--border-top-left-radius,
      calc(var(--border-top-left-radius) * var(--size-multiplier-lg))
  );
  --toggle--border-top-right-radius: var(
      --toggle--lg--border-top-right-radius,
      calc(var(--border-top-right-radius) * var(--size-multiplier-lg))
  );
  --toggle--border-bottom-right-radius: var(
      --toggle--lg--border-bottom-right-radius,
      calc(var(--border-bottom-right-radius) * var(--size-multiplier-lg))
  );
  --toggle--border-bottom-left-radius: var(
      --toggle--lg--border-bottom-left-radius,
      calc(var(--border-bottom-left-radius) * var(--size-multiplier-lg))
  );
  --toggle--indicator--width: var(
      --toggle--lg--indicator--width,
      calc(16px * var(--size-multiplier-lg))
  );
  --toggle--indicator--height: var(
      --toggle--lg--indicator--height,
      calc(16px * var(--size-multiplier-lg))
  );
  --toggle--label--font-size: var(
      --toggle--lg--label--font-size,
      calc(var(--font-size) * var(--size-multiplier-lg))
  );
}

/**
 * Breakpoint mixins
 */
/**
 * Tooltip
 */
.tooltip-wrapper {
  display: inline-block;
  position: relative;
}
.tooltip-wrapper .tooltip {
  position: absolute;
  z-index: var(--tooltip--z-index, 2000);
  word-wrap: break-word;
  width: max-content;
  top: 0;
  left: 0;
  text-align: left;
  list-style: none;
  background-clip: padding-box;
  display: inline-block;
  white-space: nowrap;
  line-height: var(--tooltip--line-height, var(--line-height));
  border-width: var(--tooltip--border-width, var(--tooltip--border-top-width, var(--border-top-width)) var(--tooltip--border-right-width, var(--border-right-width)) var(--tooltip--border-bottom-width, var(--border-bottom-width)) var(--tooltip--border-left-width, var(--border-left-width)));
  border-style: var(--tooltip--border-style, var(--tooltip--border-top-style, var(--border-top-style)) var(--tooltip--border-right-style, var(--border-right-style)) var(--tooltip--border-bottom-style, var(--border-bottom-style)) var(--tooltip--border-left-style, var(--border-left-style)));
  color: var(--tooltip--color);
  background-color: var(--tooltip--background);
  border-color: var(--tooltip--border-color, var(--tooltip--border-top-color, var(--border-top-color)) var(--tooltip--border-right-color, var(--border-right-color)) var(--tooltip--border-bottom-color, var(--border-bottom-color)) var(--tooltip--border-left-color, var(--border-left-color)));
  border-radius: var(--tooltip--border-radius, var(--tooltip--border-top-left-radius, var(--border-top-left-radius)) var(--tooltip--border-top-right-radius, var(--border-top-right-radius)) var(--tooltip--border-bottom-right-radius, var(--border-bottom-right-radius)) var(--tooltip--border-bottom-left-radius, var(--border-bottom-left-radius)));
  font-size: var(--tooltip--font-size, var(--font-size));
  padding: var(--tooltip--padding, var(--tooltip--padding-top, var(--padding-top)) var(--tooltip--padding-right, var(--padding-right)) var(--tooltip--padding-bottom, var(--padding-bottom)) var(--tooltip--padding-left, var(--padding-left)));
  box-shadow: var(--tooltip--box-shadow, var(--tooltip--box-shadow-x-offset, var(--box-shadow-offset-x)) var(--tooltip--box-shadow-y-offset, var(--box-shadow-offset-y)) var(--tooltip--box-shadow-blur-radius, var(--box-shadow-blur-radius)) var(--tooltip--box-shadow-spread-radius, var(--box-shadow-spread-radius)) var(--tooltip--box-shadow-color, var(--box-shadow-color)));
}
.tooltip-wrapper .tooltip:focus:hover {
  outline-width: 0;
}
.tooltip-wrapper .tooltip[data-popup-placement^=top] {
  transform-origin: center bottom;
}
.tooltip-wrapper .tooltip[data-popup-placement^=bottom] {
  transform-origin: center top;
}
.tooltip-wrapper .tooltip[data-popup-placement^=right] {
  transform-origin: left center;
}
.tooltip-wrapper .tooltip[data-popup-placement^=left] {
  transform-origin: right center;
}
.tooltip-wrapper .tooltip > .arrow {
  position: absolute;
}
.tooltip-wrapper .tooltip > .arrow,
.tooltip-wrapper .tooltip > .arrow::after {
  display: block;
  width: 0;
  height: 0;
  border-color: transparent;
  border-style: solid;
  position: absolute;
}
.tooltip-wrapper .tooltip > .arrow::after {
  content: "";
}
.tooltip-wrapper .tooltip[data-popup-placement^=top] > .arrow {
  border-bottom-width: 0;
}
.tooltip-wrapper .tooltip[data-popup-placement^=top] > .arrow::after {
  border-bottom-width: 0;
}
.tooltip-wrapper .tooltip[data-popup-placement^=bottom] > .arrow {
  border-top-width: 0;
}
.tooltip-wrapper .tooltip[data-popup-placement^=bottom] > .arrow::after {
  border-top-width: 0;
}
.tooltip-wrapper .tooltip[data-popup-placement^=right] > .arrow {
  border-left-width: 0;
}
.tooltip-wrapper .tooltip[data-popup-placement^=right] > .arrow::after {
  border-left-width: 0;
}
.tooltip-wrapper .tooltip[data-popup-placement^=left] > .arrow {
  border-right-width: 0;
}
.tooltip-wrapper .tooltip[data-popup-placement^=left] > .arrow::after {
  border-right-width: 0;
}
.tooltip-wrapper .tooltip > .arrow {
  width: var(--tooltip--arrow--size, 6px);
  height: var(--tooltip--arrow--size, 6px);
}
.tooltip-wrapper .tooltip > .arrow, .tooltip-wrapper .tooltip > .arrow::after {
  border-width: var(--tooltip--arrow--size, 6px);
}
.tooltip-wrapper .tooltip[data-popup-placement^=top] > .arrow::after, .tooltip-wrapper .tooltip[data-popup-placement^=bottom] > .arrow::after {
  margin-left: calc(var(--tooltip--arrow--size, 6px) * -1);
}
.tooltip-wrapper .tooltip[data-popup-placement^=left] > .arrow::after, .tooltip-wrapper .tooltip[data-popup-placement^=right] > .arrow::after {
  margin-top: calc(var(--tooltip--arrow--size, 6px) * -1);
}
.tooltip-wrapper .tooltip[data-popup-placement^=top] > .arrow {
  bottom: calc(var(--tooltip--arrow--size, 6px) * -1);
}
.tooltip-wrapper .tooltip[data-popup-placement^=top] > .arrow::after {
  bottom: 1px;
}
.tooltip-wrapper .tooltip[data-popup-placement^=bottom] > .arrow {
  top: calc(var(--tooltip--arrow--size, 6px) * -1);
}
.tooltip-wrapper .tooltip[data-popup-placement^=bottom] > .arrow::after {
  top: 1px;
}
.tooltip-wrapper .tooltip[data-popup-placement^=left] > .arrow {
  right: calc(var(--tooltip--arrow--size, 6px) * -1);
}
.tooltip-wrapper .tooltip[data-popup-placement^=left] > .arrow::after {
  right: 1px;
}
.tooltip-wrapper .tooltip[data-popup-placement^=right] > .arrow {
  left: calc(var(--tooltip--arrow--size, 6px) * -1);
}
.tooltip-wrapper .tooltip[data-popup-placement^=right] > .arrow::after {
  left: 1px;
}
.tooltip-wrapper .tooltip[data-popup-placement^=top] > .arrow {
  border-top-color: var(--tooltip--border-top-color, var(--border-top-color));
}
.tooltip-wrapper .tooltip[data-popup-placement^=top] > .arrow::after {
  border-top-color: var(--tooltip--background);
}
.tooltip-wrapper .tooltip[data-popup-placement^=right] > .arrow {
  border-right-color: var(--tooltip--border-right-color, var(--border-right-color));
}
.tooltip-wrapper .tooltip[data-popup-placement^=right] > .arrow::after {
  border-right-color: var(--tooltip--background);
}
.tooltip-wrapper .tooltip[data-popup-placement^=bottom] > .arrow {
  border-bottom-color: var(--tooltip--border-bottom-color, var(--border-bottom-color));
}
.tooltip-wrapper .tooltip[data-popup-placement^=bottom] > .arrow::after {
  border-bottom-color: var(--tooltip--background);
}
.tooltip-wrapper .tooltip[data-popup-placement^=left] > .arrow {
  border-left-color: var(--tooltip--border-left-color, var(--border-left-color));
}
.tooltip-wrapper .tooltip[data-popup-placement^=left] > .arrow::after {
  border-left-color: var(--tooltip--background);
}

/**
 * Color variants
 */
.tooltip-wrapper.-light {
  --tooltip--background: var(--tooltip--light--background, var(--color-white));
  --tooltip--border-top-color: var(--tooltip--light--border-top-color, var(--color-light));
  --tooltip--border-right-color: var(
      --tooltip--light--border-right-color,
      var(--color-light)
  );
  --tooltip--border-bottom-color: var(
      --tooltip--light--border-bottom-color,
      var(--color-light)
  );
  --tooltip--border-left-color: var(--tooltip--light--border-left-color, var(--color-light));
  --tooltip--color: var(--tooltip--light--color, var(--contrast-text-color-white));
}
.tooltip-wrapper.-dark {
  --tooltip--background: var(--tooltip--dark--background, var(--color-dark));
  --tooltip--border-top-color: var(--tooltip--dark--border-top-color, var(--color-dark-600));
  --tooltip--border-right-color: var(
      --tooltip--dark--border-right-color,
      var(--color-dark-600)
  );
  --tooltip--border-bottom-color: var(
      --tooltip--dark--border-bottom-color,
      var(--color-dark-600)
  );
  --tooltip--border-left-color: var(
      --tooltip--dark--border-left-color,
      var(--color-dark-600)
  );
  --tooltip--color: var(--tooltip--dark--color, var(--contrast-text-color-dark));
}

/**
 * Size variants
 */
.tooltip-wrapper.-sm {
  --tooltip--border-top-left-radius: var(
      --tooltip--sm--border-top-left-radius,
      calc(var(--border-top-left-radius) * var(--size-multiplier-sm))
  );
  --tooltip--border-top-right-radius: var(
      --tooltip--sm--border-top-right-radius,
      calc(var(--border-top-right-radius) * var(--size-multiplier-sm))
  );
  --tooltip--border-bottom-right-radius: var(
      --tooltip--sm--border-bottom-right-radius,
      calc(var(--border-bottom-right-radius) * var(--size-multiplier-sm))
  );
  --tooltip--border-bottom-left-radius: var(
      --tooltip--sm--border-bottom-left-radius,
      calc(var(--border-bottom-left-radius) * var(--size-multiplier-sm))
  );
  --tooltip--font-size: var(
      --tooltip--sm--font-size,
      calc(var(--font-size) * var(--size-multiplier-sm))
  );
  --tooltip--margin-top: var(
      --tooltip--sm--margin-top,
      calc(calc(var(--margin-top) / 2) * var(--size-multiplier-sm))
  );
  --tooltip--margin-right: var(
      --tooltip--sm--margin-right,
      calc(calc(var(--margin-right) / 2) * var(--size-multiplier-sm))
  );
  --tooltip--margin-bottom: var(
      --tooltip--sm--margin-bottom,
      calc(calc(var(--margin-bottom) / 2) * var(--size-multiplier-sm))
  );
  --tooltip--margin-left: var(
      --tooltip--sm--margin-left,
      calc(calc(var(--margin-left) / 2) * var(--size-multiplier-sm))
  );
  --tooltip--padding-top: var(
      --tooltip--sm--padding-top,
      calc(calc(var(--padding-top) * 3 / 4) * var(--size-multiplier-sm))
  );
  --tooltip--padding-right: var(
      --tooltip--sm--padding-right,
      calc(var(--padding-right) * var(--size-multiplier-sm))
  );
  --tooltip--padding-bottom: var(
      --tooltip--sm--padding-bottom,
      calc(calc(var(--padding-bottom) * 3 / 4) * var(--size-multiplier-sm))
  );
  --tooltip--padding-left: var(
      --tooltip--sm--padding-left,
      calc(var(--padding-left) * var(--size-multiplier-sm))
  );
}
.tooltip-wrapper.-md {
  --tooltip--border-top-left-radius: var(
      --tooltip--md--border-top-left-radius,
      calc(var(--border-top-left-radius) * var(--size-multiplier-md))
  );
  --tooltip--border-top-right-radius: var(
      --tooltip--md--border-top-right-radius,
      calc(var(--border-top-right-radius) * var(--size-multiplier-md))
  );
  --tooltip--border-bottom-right-radius: var(
      --tooltip--md--border-bottom-right-radius,
      calc(var(--border-bottom-right-radius) * var(--size-multiplier-md))
  );
  --tooltip--border-bottom-left-radius: var(
      --tooltip--md--border-bottom-left-radius,
      calc(var(--border-bottom-left-radius) * var(--size-multiplier-md))
  );
  --tooltip--font-size: var(
      --tooltip--md--font-size,
      calc(var(--font-size) * var(--size-multiplier-md))
  );
  --tooltip--margin-top: var(
      --tooltip--md--margin-top,
      calc(calc(var(--margin-top) / 2) * var(--size-multiplier-md))
  );
  --tooltip--margin-right: var(
      --tooltip--md--margin-right,
      calc(calc(var(--margin-right) / 2) * var(--size-multiplier-md))
  );
  --tooltip--margin-bottom: var(
      --tooltip--md--margin-bottom,
      calc(calc(var(--margin-bottom) / 2) * var(--size-multiplier-md))
  );
  --tooltip--margin-left: var(
      --tooltip--md--margin-left,
      calc(calc(var(--margin-left) / 2) * var(--size-multiplier-md))
  );
  --tooltip--padding-top: var(
      --tooltip--md--padding-top,
      calc(calc(var(--padding-top) * 3 / 4) * var(--size-multiplier-md))
  );
  --tooltip--padding-right: var(
      --tooltip--md--padding-right,
      calc(var(--padding-right) * var(--size-multiplier-md))
  );
  --tooltip--padding-bottom: var(
      --tooltip--md--padding-bottom,
      calc(calc(var(--padding-bottom) * 3 / 4) * var(--size-multiplier-md))
  );
  --tooltip--padding-left: var(
      --tooltip--md--padding-left,
      calc(var(--padding-left) * var(--size-multiplier-md))
  );
}
.tooltip-wrapper.-lg {
  --tooltip--border-top-left-radius: var(
      --tooltip--lg--border-top-left-radius,
      calc(var(--border-top-left-radius) * var(--size-multiplier-lg))
  );
  --tooltip--border-top-right-radius: var(
      --tooltip--lg--border-top-right-radius,
      calc(var(--border-top-right-radius) * var(--size-multiplier-lg))
  );
  --tooltip--border-bottom-right-radius: var(
      --tooltip--lg--border-bottom-right-radius,
      calc(var(--border-bottom-right-radius) * var(--size-multiplier-lg))
  );
  --tooltip--border-bottom-left-radius: var(
      --tooltip--lg--border-bottom-left-radius,
      calc(var(--border-bottom-left-radius) * var(--size-multiplier-lg))
  );
  --tooltip--font-size: var(
      --tooltip--lg--font-size,
      calc(var(--font-size) * var(--size-multiplier-lg))
  );
  --tooltip--margin-top: var(
      --tooltip--lg--margin-top,
      calc(calc(var(--margin-top) / 2) * var(--size-multiplier-lg))
  );
  --tooltip--margin-right: var(
      --tooltip--lg--margin-right,
      calc(calc(var(--margin-right) / 2) * var(--size-multiplier-lg))
  );
  --tooltip--margin-bottom: var(
      --tooltip--lg--margin-bottom,
      calc(calc(var(--margin-bottom) / 2) * var(--size-multiplier-lg))
  );
  --tooltip--margin-left: var(
      --tooltip--lg--margin-left,
      calc(calc(var(--margin-left) / 2) * var(--size-multiplier-lg))
  );
  --tooltip--padding-top: var(
      --tooltip--lg--padding-top,
      calc(calc(var(--padding-top) * 3 / 4) * var(--size-multiplier-lg))
  );
  --tooltip--padding-right: var(
      --tooltip--lg--padding-right,
      calc(var(--padding-right) * var(--size-multiplier-lg))
  );
  --tooltip--padding-bottom: var(
      --tooltip--lg--padding-bottom,
      calc(calc(var(--padding-bottom) * 3 / 4) * var(--size-multiplier-lg))
  );
  --tooltip--padding-left: var(
      --tooltip--lg--padding-left,
      calc(var(--padding-left) * var(--size-multiplier-lg))
  );
}

/**
 * Checkable Buttons
 */
.checkable-button-group.-default {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  background: var(--checkable-button-group--background);
  color: var(--checkable-button-group--color);
  border-style: var(--checkable-button-group--border-style, var(--checkable-button-group--border-top-style, var(--border-top-style)) var(--checkable-button-group--border-right-style, var(--border-right-style)) var(--checkable-button-group--border-bottom-style, var(--border-bottom-style)) var(--checkable-button-group--border-left-style, var(--border-left-style)));
  border-width: var(--checkable-button-group--border-width, var(--checkable-button-group--border-top-width, var(--border-top-width)) var(--checkable-button-group--border-right-width, var(--border-right-width)) var(--checkable-button-group--border-bottom-width, var(--border-bottom-width)) var(--checkable-button-group--border-left-width, var(--border-left-width)));
  border-color: var(--checkable-button-group--border-color, var(--checkable-button-group--border-top-color, var(--border-top-color)) var(--checkable-button-group--border-right-color, var(--border-right-color)) var(--checkable-button-group--border-bottom-color, var(--border-bottom-color)) var(--checkable-button-group--border-left-color, var(--border-left-color)));
  border-radius: var(--checkable-button-group--border-radius, var(--checkable-button-group--border-top-left-radius, var(--border-top-left-radius)) var(--checkable-button-group--border-top-right-radius, var(--border-top-right-radius)) var(--checkable-button-group--border-bottom-right-radius, var(--border-bottom-right-radius)) var(--checkable-button-group--border-bottom-left-radius, var(--border-bottom-left-radius)));
  box-shadow: var(--checkable-button-group--box-shadow, var(--checkable-button-group--box-shadow-x-offset, var(--box-shadow-offset-x)) var(--checkable-button-group--box-shadow-y-offset, var(--box-shadow-offset-y)) var(--checkable-button-group--box-shadow-blur-radius, var(--box-shadow-blur-radius)) var(--checkable-button-group--box-shadow-spread-radius, var(--box-shadow-spread-radius)) var(--checkable-button-group--box-shadow-color, var(--box-shadow-color)));
  padding: var(--checkable-button-group--padding, var(--checkable-button-group--padding-top, var(--padding-top-1-2)) var(--checkable-button-group--padding-right, var(--padding-right-1-2)) var(--checkable-button-group--padding-bottom, var(--padding-bottom-1-2)) var(--checkable-button-group--padding-left, var(--padding-left-1-2)));
  transition-property: var(--checkable-button-group--transition-property, background-color, border-color);
  transition-duration: var(--checkable-button-group--transition-duration, var(--transition-duration));
  transition-timing-function: var(--checkable-button-group--transition-timing-function, var(--transition-timing-function));
}
.checkable-button-group.-default > .button {
  margin-right: var(--checkable-button-group--gap, var(--margin-right-1-2));
}
.checkable-button-group.-default > .button:not(:disabled):not(:hover):not(:focus):not(.-disabled).-active {
  background: var(--checkable-button-group--button--active--background, var(--button--background));
}
.checkable-button-group.-default > .button:not(.-active) {
  color: inherit;
  background: var(--checkable-button-group--button--background, transparent) !important;
  border-color: var(--checkable-button-group--button--border-color, transparent);
  box-shadow: var(--checkable-button-group--button--box-shadow, none);
}
.checkable-button-group.-default > .button:not(.-active):not(.-disabled):hover, .checkable-button-group.-default > .button:not(.-active):not(.-disabled):focus {
  border-top-color: var(--button--border-top-color);
  border-right-color: var(--button--border-top-color);
  border-bottom-color: var(--button--border-top-color);
  border-left-color: var(--button--border-top-color);
}
.checkable-button-group.-default > .button:last-child {
  margin-right: 0;
}

/**
 * Color variants
 */
.checkable-button-group.-light {
  --checkable-button-group--background: var(
      --checkable-button-group--light--background,
      var(--color-light-tint-100)
  );
  --checkable-button-group--color: var(
      --checkable-button-group--light--color,
      var(--contrast-text-color-light)
  );
  --checkable-button-group--border-top-color: var(
      --checkable-button-group--light--border-top-color,
      var(--color-light-shade-50)
  );
  --checkable-button-group--border-right-color: var(
      --checkable-button-group--light--border-right-color,
      var(--color-light-shade-50)
  );
  --checkable-button-group--border-bottom-color: var(
      --checkable-button-group--light--border-bottom-color,
      var(--color-light-shade-50)
  );
  --checkable-button-group--border-left-color: var(
      --checkable-button-group--light--border-left-color,
      var(--color-light-shade-50)
  );
}
.checkable-button-group.-dark {
  --checkable-button-group--background: var(
      --checkable-button-group--dark--background,
      var(--color-dark-shade-100)
  );
  --checkable-button-group--color: var(
      --checkable-button-group--dark--color,
      var(--contrast-text-color-dark)
  );
  --checkable-button-group--border-top-color: var(
      --checkable-button-group--dark--border-top-color,
      var(--color-dark-tint-50)
  );
  --checkable-button-group--border-right-color: var(
      --checkable-button-group--dark--border-right-color,
      var(--color-dark-tint-50)
  );
  --checkable-button-group--border-bottom-color: var(
      --checkable-button-group--dark--border-bottom-color,
      var(--color-dark-tint-50)
  );
  --checkable-button-group--border-left-color: var(
      --checkable-button-group--dark--border-left-color,
      var(--color-dark-tint-50)
  );
}

/**
 * Size variants
 */
.checkable-button-group.-sm {
  --checkable-button-group--border-top-left-radius: var(
      --checkable-button-group--sm--border-top-left-radius,
      calc(var(--border-top-right-radius) * var(--size-multiplier-sm))
  );
  --checkable-button-group--border-top-right-radius: var(
      --checkable-button-group--sm--border-top-right-radius,
      calc(var(--border-top-right-radius) * var(--size-multiplier-sm))
  );
  --checkable-button-group--border-bottom-right-radius: var(
      --checkable-button-group--sm--border-bottom-right-radius,
      calc(var(--border-bottom-right-radius) * var(--size-multiplier-sm))
  );
  --checkable-button-group--border-bottom-left-radius: var(
      --checkable-button-group--sm--border-bottom-left-radius,
      calc(var(--border-bottom-left-radius) * var(--size-multiplier-sm))
  );
  --checkable-button-group--padding-top: var(
      --checkable-button-group--sm--padding-top,
      calc(calc(var(--padding-top) * var(--size-multiplier-sm)) * 0.5)
  );
  --checkable-button-group--padding-right: var(
      --checkable-button-group--sm--padding-right,
      calc(calc(var(--padding-right) * var(--size-multiplier-sm)) * 0.5)
  );
  --checkable-button-group--padding-bottom: var(
      --checkable-button-group--sm--padding-bottom,
      calc(calc(var(--padding-bottom) * var(--size-multiplier-sm)) * 0.5)
  );
  --checkable-button-group--padding-left: var(
      --checkable-button-group--sm--padding-left,
      calc(calc(var(--padding-left) * var(--size-multiplier-sm)) * 0.5)
  );
}
.checkable-button-group.-md {
  --checkable-button-group--border-top-left-radius: var(
      --checkable-button-group--md--border-top-left-radius,
      calc(var(--border-top-right-radius) * var(--size-multiplier-md))
  );
  --checkable-button-group--border-top-right-radius: var(
      --checkable-button-group--md--border-top-right-radius,
      calc(var(--border-top-right-radius) * var(--size-multiplier-md))
  );
  --checkable-button-group--border-bottom-right-radius: var(
      --checkable-button-group--md--border-bottom-right-radius,
      calc(var(--border-bottom-right-radius) * var(--size-multiplier-md))
  );
  --checkable-button-group--border-bottom-left-radius: var(
      --checkable-button-group--md--border-bottom-left-radius,
      calc(var(--border-bottom-left-radius) * var(--size-multiplier-md))
  );
  --checkable-button-group--padding-top: var(
      --checkable-button-group--md--padding-top,
      calc(calc(var(--padding-top) * var(--size-multiplier-md)) * 0.5)
  );
  --checkable-button-group--padding-right: var(
      --checkable-button-group--md--padding-right,
      calc(calc(var(--padding-right) * var(--size-multiplier-md)) * 0.5)
  );
  --checkable-button-group--padding-bottom: var(
      --checkable-button-group--md--padding-bottom,
      calc(calc(var(--padding-bottom) * var(--size-multiplier-md)) * 0.5)
  );
  --checkable-button-group--padding-left: var(
      --checkable-button-group--md--padding-left,
      calc(calc(var(--padding-left) * var(--size-multiplier-md)) * 0.5)
  );
}
.checkable-button-group.-lg {
  --checkable-button-group--border-top-left-radius: var(
      --checkable-button-group--lg--border-top-left-radius,
      calc(var(--border-top-right-radius) * var(--size-multiplier-lg))
  );
  --checkable-button-group--border-top-right-radius: var(
      --checkable-button-group--lg--border-top-right-radius,
      calc(var(--border-top-right-radius) * var(--size-multiplier-lg))
  );
  --checkable-button-group--border-bottom-right-radius: var(
      --checkable-button-group--lg--border-bottom-right-radius,
      calc(var(--border-bottom-right-radius) * var(--size-multiplier-lg))
  );
  --checkable-button-group--border-bottom-left-radius: var(
      --checkable-button-group--lg--border-bottom-left-radius,
      calc(var(--border-bottom-left-radius) * var(--size-multiplier-lg))
  );
  --checkable-button-group--padding-top: var(
      --checkable-button-group--lg--padding-top,
      calc(calc(var(--padding-top) * var(--size-multiplier-lg)) * 0.5)
  );
  --checkable-button-group--padding-right: var(
      --checkable-button-group--lg--padding-right,
      calc(calc(var(--padding-right) * var(--size-multiplier-lg)) * 0.5)
  );
  --checkable-button-group--padding-bottom: var(
      --checkable-button-group--lg--padding-bottom,
      calc(calc(var(--padding-bottom) * var(--size-multiplier-lg)) * 0.5)
  );
  --checkable-button-group--padding-left: var(
      --checkable-button-group--lg--padding-left,
      calc(calc(var(--padding-left) * var(--size-multiplier-lg)) * 0.5)
  );
}