@charset "UTF-8";
@import 'https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap';
@import 'https://fonts.googleapis.com/css2?family=Material+Icons+Outlined';
/**
 * Calculate the luminance for a color.
 * See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
 */
/**
 * Calculate the contrast ratio between two colors.
 * See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
 */
/**
 * Determine whether to use dark or light text on top of given color.
 * Returns black for dark text and white for light text.
 */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

body {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
  content: "";
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

button {
  border: none;
  margin: 0;
  padding: 0;
  width: auto;
  overflow: visible;
  background: transparent;
  outline: none;
  /* inherit font & color from ancestor */
  color: inherit;
  font: inherit;
  /* Normalize `line-height`. Cannot be changed from `normal` in Firefox 4+. */
  line-height: normal;
  /* Corrects font smoothing for webkit */
  -webkit-font-smoothing: inherit;
  -moz-osx-font-smoothing: inherit;
  /* Corrects inability to style clickable `input` types in iOS */
  -webkit-appearance: none;
  font-size: 1rem;
}

*, *:after, *:before {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

html {
  min-height: 100%;
  min-width: 320px;
  margin: 0;
}
@media (max-width: 320px) {
  html {
    overflow-x: auto;
  }
}
@media (min-width: 320px) {
  html {
    overflow-x: hidden;
  }
}

body {
  font-family: var(--text-font);
  line-height: 1.2;
  font-weight: 400;
  font-size: 16px;
  overflow-x: hidden;
  min-height: 100vh;
  color: var(--text-color-default);
  background-color: var(--bg-light-default);
  -webkit-tap-highlight-color: transparent;
  min-width: 320px;
}
body.dark-theme {
  background-color: var(--bg-dark-default);
  color: var(--text-color-dark-default);
}
body {
  @break;
  font-size: 16px;
  @break;
}
@media (min-width: 0px) and (max-width: 1200px) {
  body {
    font-size: 15.2px;
  }
}
body {
  @break;
}
@media (min-width: 0px) and (max-width: 1200px) and (orientation:landscape) {
  body {
    font-size: 12.8px;
  }
}
body {
  @break;
}
@media (min-width: 768px) and (max-width: 1200px) {
  body {
    font-size: 15.2px;
  }
}
body {
  @break;
}
@media (min-width: 768px) and (max-width: 1200px) and (orientation:landscape) {
  body {
    font-size: 12.8px;
  }
}
body {
  @break;
}
@media (min-width: 1201px) and (max-width: 10000px) {
  body {
    font-size: 16px;
  }
}
body {
  @break;
}
@media (min-width: 1441px) and (max-width: 10000px) {
  body {
    font-size: 16px;
  }
}
body {
  @break;
}
@media (min-width: 1921px) and (max-width: 10000px) {
  body {
    font-size: 16px;
  }
}

a {
  color: rgba(var(--color-primary-default), 1);
  text-decoration: none;
  transition: color 0.3s ease;
}
a:hover {
  transition: color 0.3s ease;
}

p {
  margin-top: calc(var(--spacer) * 0.25);
  margin-bottom: calc(var(--spacer) * 0.75);
}

input[type=text], input[type=email], input[type=password], input[type=number], input[type=file] {
  width: 100%;
  max-width: 100%;
  color: rgba(var(--color-secondary-default), 1);
  background: transparent;
  width: 100%;
  outline: none;
  border: 1px solid rgba(var(--color-lgray-600), 1);
  font-family: var(--font-primary);
  border-radius: calc(var(--spacer) * 0.25);
  background: white;
}
input[type=text]::placeholder, input[type=email]::placeholder, input[type=password]::placeholder, input[type=number]::placeholder, input[type=file]::placeholder {
  color: rgba(var(--color-lgray-800), 1);
}
input[type=text], input[type=email], input[type=password], input[type=number], input[type=file] {
  margin: calc(var(--spacer) * 0.125) 0 calc(var(--spacer) * 0.2) 0;
  padding: calc(var(--spacer) * 0.5) calc(var(--spacer) * 0.5);
}
input[type=text].required, input[type=email].required, input[type=password].required, input[type=number].required, input[type=file].required {
  border: 2px solid rgba(var(--color-accent-500), 1);
}
input[type=text].required::placeholder, input[type=email].required::placeholder, input[type=password].required::placeholder, input[type=number].required::placeholder, input[type=file].required::placeholder {
  color: rgba(var(--color-accent-500), 1);
}
input[type=text]:not(:placeholder-shown), input[type=email]:not(:placeholder-shown), input[type=password]:not(:placeholder-shown), input[type=number]:not(:placeholder-shown), input[type=file]:not(:placeholder-shown) {
  border: 2px solid rgba(var(--color-lgray-600), 1);
}

select,
input[type=text],
input[type=number],
input[type=date],
input[list] {
  width: 100%;
  max-width: 100%;
  color: rgba(var(--color-secondary-default), 1);
  width: 100%;
  outline: none;
  border: 1px solid rgba(var(--color-lgray-600), 1);
  font-family: var(--font-primary);
  appearance: none;
  background-color: transparent;
  background-image: url("data:image/svg+xml;utf8,<svg fill='%237B6CFF' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
  background-repeat: no-repeat;
  border-radius: calc(var(--spacer) * 0.25);
  background-color: white;
  height: calc(var(--spacer) * 1.25);
  margin: calc(var(--spacer) * 0.125) 0 calc(var(--spacer) * 0.25) 0;
  padding: calc(var(--spacer) * 0.1) calc(var(--spacer) * 0.5);
  background-position-y: center;
  background-position-x: calc(100% - calc(var(--spacer) * 0.5));
  cursor: pointer;
  height: calc(var(--spacer) * 1.5);
}
@media (min-width: 0px) and (max-width: 1200px) {
  select,
  input[type=text],
  input[type=number],
  input[type=date],
  input[list] {
    height: calc(var(--spacer) * 1.5);
  }
}
@media (min-width: 0px) and (max-width: 1200px) and (orientation:landscape) {
  select,
  input[type=text],
  input[type=number],
  input[type=date],
  input[list] {
    height: calc(var(--spacer) * 1.5);
  }
}
@media (min-width: 768px) and (max-width: 1200px) {
  select,
  input[type=text],
  input[type=number],
  input[type=date],
  input[list] {
    height: calc(var(--spacer) * 1.5);
  }
}
@media (min-width: 768px) and (max-width: 1200px) and (orientation:landscape) {
  select,
  input[type=text],
  input[type=number],
  input[type=date],
  input[list] {
    height: calc(var(--spacer) * 1.5);
  }
}
@media (min-width: 1201px) and (max-width: 10000px) {
  select,
  input[type=text],
  input[type=number],
  input[type=date],
  input[list] {
    height: calc(var(--spacer) * 1.5);
  }
}
@media (min-width: 1441px) and (max-width: 10000px) {
  select,
  input[type=text],
  input[type=number],
  input[type=date],
  input[list] {
    height: calc(var(--spacer) * 1.5);
  }
}
@media (min-width: 1921px) and (max-width: 10000px) {
  select,
  input[type=text],
  input[type=number],
  input[type=date],
  input[list] {
    height: calc(var(--spacer) * 1.5);
  }
}

input[type=file] {
  width: 100%;
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  gap: calc(var(--spacer) * 0.35);
  padding: calc(var(--spacer) * 0.35) calc(var(--spacer) * 0.5);
  color: rgba(var(--color-secondary-default), 1);
  background-color: white;
  border: 1px solid rgba(var(--color-lgray-600), 1);
  border-radius: calc(var(--spacer) * 0.25);
  cursor: pointer;
}
input[type=file]::file-selector-button {
  padding: calc(var(--spacer) * 0.25) calc(var(--spacer) * 0.75);
  margin-right: calc(var(--spacer) * 0.5);
  border: 1px solid rgba(var(--color-primary-500), 1);
  border-radius: calc(var(--spacer) * 0.25);
  background: rgba(var(--color-primary-500), 1);
  color: #fff;
  font-family: var(--font-primary);
  cursor: pointer;
  height: calc(100% - (var(--spacer) * 0.2));
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
input[type=file]:hover::file-selector-button, input[type=file]:focus::file-selector-button {
  background: rgba(var(--color-primary-500), 1);
  border-color: rgba(var(--color-primary-500), 1);
  opacity: 0.9;
}

textarea {
  width: 100%;
  max-width: 100%;
  color: rgba(var(--color-secondary-default), 1);
  width: 100%;
  outline: none;
  border: 1px solid rgba(var(--color-lgray-600), 1);
  font-family: var(--font-primary);
  border-radius: calc(var(--spacer) * 0.25);
  margin: calc(var(--spacer) * 0.125) 0 calc(var(--spacer) * 0.25) 0;
  padding: calc(var(--spacer) * 0.5);
}

.form-group {
  margin-bottom: calc(var(--spacer) * 0.125);
}

.error-notice {
  display: block;
  color: rgba(var(--color-accent-500), 1) !important;
}
.error-notice.hidden {
  display: none;
}

.required-notice {
  display: block;
  color: rgba(var(--color-accent-500), 1) !important;
}
.required-notice.hidden {
  display: none;
}

.custom-checkbox {
  display: flex;
  align-items: center;
  cursor: pointer;
}
.custom-checkbox .checkbox {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid rgba(var(--color-primary-500), 1);
  border-radius: 5px;
  width: calc(var(--spacer) * 0.8);
  height: calc(var(--spacer) * 0.8);
}
.custom-checkbox:hover, .custom-checkbox.active {
  color: rgba(var(--color-accent-500), 1);
}
.custom-checkbox:hover .checkbox, .custom-checkbox.active .checkbox {
  border-color: rgba(var(--color-accent-500), 1);
}
.custom-checkbox.active {
  font-weight: 700;
}
.custom-checkbox.active .checkbox:before {
  color: rgba(var(--color-accent-500), 1);
  content: "✓";
}

label.required {
  color: rgba(var(--color-accent-500), 1);
}

input[type=search] {
  width: 100%;
  max-width: 100%;
  color: rgba(var(--color-secondary-default), 1);
  width: 100%;
  outline: none;
  border: 1px solid rgba(var(--color-lgray-600), 1);
  font-family: var(--font-primary);
  border-radius: calc(var(--spacer) * 0.25);
  background-color: white;
  height: calc(var(--spacer) * 1.25);
  margin: calc(var(--spacer) * 0.125) 0 calc(var(--spacer) * 0.25) 0;
  padding: calc(var(--spacer) * 0.1) calc(var(--spacer) * 0.5);
  -webkit-appearance: none;
  appearance: none;
  background-image: none;
  height: calc(var(--spacer) * 1.5);
}
@media (min-width: 0px) and (max-width: 1200px) {
  input[type=search] {
    height: calc(var(--spacer) * 1.5);
  }
}
@media (min-width: 0px) and (max-width: 1200px) and (orientation:landscape) {
  input[type=search] {
    height: calc(var(--spacer) * 1.5);
  }
}
@media (min-width: 768px) and (max-width: 1200px) {
  input[type=search] {
    height: calc(var(--spacer) * 1.5);
  }
}
@media (min-width: 768px) and (max-width: 1200px) and (orientation:landscape) {
  input[type=search] {
    height: calc(var(--spacer) * 1.5);
  }
}
@media (min-width: 1201px) and (max-width: 10000px) {
  input[type=search] {
    height: calc(var(--spacer) * 1.5);
  }
}
@media (min-width: 1441px) and (max-width: 10000px) {
  input[type=search] {
    height: calc(var(--spacer) * 1.5);
  }
}
@media (min-width: 1921px) and (max-width: 10000px) {
  input[type=search] {
    height: calc(var(--spacer) * 1.5);
  }
}

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

/*Selection*/
::selection {
  background: rgba(var(--color-primary-500), 1);
  color: rgb(var(--color-primary-contrast-500));
}

[class*=-primary] *::selection, [class*=-primary]::selection {
  background: rgba(var(--color-primary-500), 1);
  color: rgb(var(--color-primary-contrast-500));
}

[class*=-secondary] *::selection, [class*=-secondary]::selection {
  background: rgba(var(--color-secondary-500), 1);
  color: rgb(var(--color-secondary-contrast-500));
}

[class*=-third] *::selection, [class*=-third]::selection {
  background: rgba(var(--color-third-500), 1);
  color: rgb(var(--color-third-contrast-500));
}

[class*=-accent] *::selection, [class*=-accent]::selection {
  background: rgba(var(--color-accent-500), 1);
  color: rgb(var(--color-accent-contrast-500));
}

[class*=-lgray] *::selection, [class*=-lgray]::selection {
  background: rgba(var(--color-lgray-500), 1);
  color: rgb(var(--color-lgray-contrast-500));
}

[class*=-success] *::selection, [class*=-success]::selection {
  background: rgba(var(--color-success-500), 1);
  color: rgb(var(--color-success-contrast-500));
}

[class*=-warning] *::selection, [class*=-warning]::selection {
  background: rgba(var(--color-warning-500), 1);
  color: rgb(var(--color-warning-contrast-500));
}

[class*=-danger] *::selection, [class*=-danger]::selection {
  background: rgba(var(--color-danger-500), 1);
  color: rgb(var(--color-danger-contrast-500));
}

/*Scrollbar*/
::-webkit-scrollbar-track {
  border-radius: 0px;
  background-color: white;
}

::-webkit-scrollbar {
  width: calc(var(--spacer) * 0.333);
  height: calc(var(--spacer) * 0.333);
  background-color: white;
}

::-webkit-scrollbar-thumb {
  border: calc(var(--spacer) * 0.166) solid rgba(var(--color-primary-500), 1);
  border-radius: 0px;
  background-color: rgba(var(--color-primary-500), 1);
}

::-webkit-scrollbar-thumb:hover {
  border: calc(var(--spacer) * 0.166) solid rgba(var(--color-accent-500), 1);
  border-radius: 0px;
  background-color: rgba(var(--color-accent-500), 1);
}

/*Common for sections*/
.section {
  min-height: 50vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding-top: calc(var(--spacer) * 2);
  padding-bottom: calc(var(--spacer) * 2);
}
.section > div {
  min-height: 0;
}
.section:nth-child(odd) {
  background: rgba(var(--color-primary-100), 1);
  color: rgb(var(--color-primary-contrast-100));
}

/*img*/
img {
  width: 100%;
  height: auto;
  display: flex;
}

.img-fit-cover {
  height: 100%;
}
.img-fit-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.background-image {
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-position: center center !important;
}

/*HEADINGS FONTS*/
h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5 {
  margin-top: calc(var(--spacer) * 0.5);
  margin-bottom: calc(var(--spacer) * 0.25);
  color: var(--headings-color);
}
body.dark-theme h1, body.dark-theme .h1,
body.dark-theme h2, body.dark-theme .h2,
body.dark-theme h3, body.dark-theme .h3,
body.dark-theme h4, body.dark-theme .h4,
body.dark-theme h5, body.dark-theme .h5 {
  color: var(--headings-color-dark);
}

h1, .h1 {
  font-size: 2.5rem;
  font-family: var(--headings-font);
  line-height: 1.4;
  font-weight: 700;
}

h2, .h2 {
  font-size: 2.25rem;
  font-family: var(--headings-font);
  line-height: 1.4;
  font-weight: 700;
}

h3, .h3 {
  font-size: 2rem;
  font-family: var(--headings-font);
  line-height: 1.4;
  font-weight: 700;
}

h4, .h4 {
  font-size: 1.5rem;
  font-family: var(--headings-font);
  line-height: 1.4;
  font-weight: 700;
}

h5, .h5 {
  font-size: 1.25rem;
  font-family: var(--headings-font);
  line-height: 1.4;
  font-weight: 700;
}

@media (min-width: 0px) and (max-width: 1200px) {
  h1, .h1,
  h2, .h2,
  h3, .h3,
  h4, .h4,
  h5, .h5 {
    margin-top: calc(var(--spacer) * 0.5);
    margin-bottom: calc(var(--spacer) * 0.25);
  }
  h1, .h1 {
    font-size: 1.625rem;
  }
  h2, .h2 {
    font-size: 1.4625rem;
  }
  h3, .h3 {
    font-size: 1.3rem;
  }
  h4, .h4 {
    font-size: 0.975rem;
  }
  h5, .h5 {
    font-size: 0.8125rem;
  }
}
@media (min-width: 0px) and (max-width: 1200px) and (orientation:landscape) {
  h1, .h1,
  h2, .h2,
  h3, .h3,
  h4, .h4,
  h5, .h5 {
    margin-top: calc(var(--spacer) * 0.5);
    margin-bottom: calc(var(--spacer) * 0.25);
  }
  h1, .h1 {
    font-size: 1.75rem;
  }
  h2, .h2 {
    font-size: 1.575rem;
  }
  h3, .h3 {
    font-size: 1.4rem;
  }
  h4, .h4 {
    font-size: 1.05rem;
  }
  h5, .h5 {
    font-size: 0.875rem;
  }
}
@media (min-width: 768px) and (max-width: 1200px) {
  h1, .h1,
  h2, .h2,
  h3, .h3,
  h4, .h4,
  h5, .h5 {
    margin-top: calc(var(--spacer) * 0.5);
    margin-bottom: calc(var(--spacer) * 0.25);
  }
  h1, .h1 {
    font-size: 1.75rem;
  }
  h2, .h2 {
    font-size: 1.575rem;
  }
  h3, .h3 {
    font-size: 1.4rem;
  }
  h4, .h4 {
    font-size: 1.05rem;
  }
  h5, .h5 {
    font-size: 0.875rem;
  }
}
@media (min-width: 768px) and (max-width: 1200px) and (orientation:landscape) {
  h1, .h1,
  h2, .h2,
  h3, .h3,
  h4, .h4,
  h5, .h5 {
    margin-top: calc(var(--spacer) * 0.5);
    margin-bottom: calc(var(--spacer) * 0.25);
  }
  h1, .h1 {
    font-size: 1.875rem;
  }
  h2, .h2 {
    font-size: 1.6875rem;
  }
  h3, .h3 {
    font-size: 1.5rem;
  }
  h4, .h4 {
    font-size: 1.125rem;
  }
  h5, .h5 {
    font-size: 0.9375rem;
  }
}
@media (min-width: 1201px) and (max-width: 10000px) {
  h1, .h1,
  h2, .h2,
  h3, .h3,
  h4, .h4,
  h5, .h5 {
    margin-top: calc(var(--spacer) * 0.5);
    margin-bottom: calc(var(--spacer) * 0.25);
  }
  h1, .h1 {
    font-size: 2rem;
  }
  h2, .h2 {
    font-size: 1.8rem;
  }
  h3, .h3 {
    font-size: 1.6rem;
  }
  h4, .h4 {
    font-size: 1.2rem;
  }
  h5, .h5 {
    font-size: 1rem;
  }
}
@media (min-width: 1441px) and (max-width: 10000px) {
  h1, .h1,
  h2, .h2,
  h3, .h3,
  h4, .h4,
  h5, .h5 {
    margin-top: calc(var(--spacer) * 0.5);
    margin-bottom: calc(var(--spacer) * 0.25);
  }
  h1, .h1 {
    font-size: 2.25rem;
  }
  h2, .h2 {
    font-size: 2.025rem;
  }
  h3, .h3 {
    font-size: 1.8rem;
  }
  h4, .h4 {
    font-size: 1.35rem;
  }
  h5, .h5 {
    font-size: 1.125rem;
  }
}
@media (min-width: 1921px) and (max-width: 10000px) {
  h1, .h1,
  h2, .h2,
  h3, .h3,
  h4, .h4,
  h5, .h5 {
    margin-top: calc(var(--spacer) * 0.5);
    margin-bottom: calc(var(--spacer) * 0.25);
  }
  h1, .h1 {
    font-size: 2.5rem;
  }
  h2, .h2 {
    font-size: 2.25rem;
  }
  h3, .h3 {
    font-size: 2rem;
  }
  h4, .h4 {
    font-size: 1.5rem;
  }
  h5, .h5 {
    font-size: 1.25rem;
  }
}
.bg-primary-100 {
  background-color: rgba(var(--color-primary-100), 1);
  color: rgb(var(--color-primary-contrast-100));
}

.text-primary-100 {
  color: rgba(var(--color-primary-100), 1);
}

.border-primary-100 {
  border-color: rgba(var(--color-primary-100), 1);
}

.bg-primary-contrast-100 {
  background-color: rgb(var(--color-primary-contrast-100));
  color: rgba(var(--color-primary-100), 1);
}

.text-primary-contrast-100 {
  color: rgb(var(--color-primary-contrast-100));
}

.border-primary-contrast-100 {
  border-color: rgb(var(--color-primary-contrast-100));
}

.bg-primary-200 {
  background-color: rgba(var(--color-primary-200), 1);
  color: rgb(var(--color-primary-contrast-200));
}

.text-primary-200 {
  color: rgba(var(--color-primary-200), 1);
}

.border-primary-200 {
  border-color: rgba(var(--color-primary-200), 1);
}

.bg-primary-contrast-200 {
  background-color: rgb(var(--color-primary-contrast-200));
  color: rgba(var(--color-primary-200), 1);
}

.text-primary-contrast-200 {
  color: rgb(var(--color-primary-contrast-200));
}

.border-primary-contrast-200 {
  border-color: rgb(var(--color-primary-contrast-200));
}

.bg-primary-300 {
  background-color: rgba(var(--color-primary-300), 1);
  color: rgb(var(--color-primary-contrast-300));
}

.text-primary-300 {
  color: rgba(var(--color-primary-300), 1);
}

.border-primary-300 {
  border-color: rgba(var(--color-primary-300), 1);
}

.bg-primary-contrast-300 {
  background-color: rgb(var(--color-primary-contrast-300));
  color: rgba(var(--color-primary-300), 1);
}

.text-primary-contrast-300 {
  color: rgb(var(--color-primary-contrast-300));
}

.border-primary-contrast-300 {
  border-color: rgb(var(--color-primary-contrast-300));
}

.bg-primary-400 {
  background-color: rgba(var(--color-primary-400), 1);
  color: rgb(var(--color-primary-contrast-400));
}

.text-primary-400 {
  color: rgba(var(--color-primary-400), 1);
}

.border-primary-400 {
  border-color: rgba(var(--color-primary-400), 1);
}

.bg-primary-contrast-400 {
  background-color: rgb(var(--color-primary-contrast-400));
  color: rgba(var(--color-primary-400), 1);
}

.text-primary-contrast-400 {
  color: rgb(var(--color-primary-contrast-400));
}

.border-primary-contrast-400 {
  border-color: rgb(var(--color-primary-contrast-400));
}

.bg-primary-500 {
  background-color: rgba(var(--color-primary-500), 1);
  color: rgb(var(--color-primary-contrast-500));
}

.text-primary-500 {
  color: rgba(var(--color-primary-500), 1);
}

.border-primary-500 {
  border-color: rgba(var(--color-primary-500), 1);
}

.bg-primary-contrast-500 {
  background-color: rgb(var(--color-primary-contrast-500));
  color: rgba(var(--color-primary-500), 1);
}

.text-primary-contrast-500 {
  color: rgb(var(--color-primary-contrast-500));
}

.border-primary-contrast-500 {
  border-color: rgb(var(--color-primary-contrast-500));
}

.bg-primary-600 {
  background-color: rgba(var(--color-primary-600), 1);
  color: rgb(var(--color-primary-contrast-600));
}

.text-primary-600 {
  color: rgba(var(--color-primary-600), 1);
}

.border-primary-600 {
  border-color: rgba(var(--color-primary-600), 1);
}

.bg-primary-contrast-600 {
  background-color: rgb(var(--color-primary-contrast-600));
  color: rgba(var(--color-primary-600), 1);
}

.text-primary-contrast-600 {
  color: rgb(var(--color-primary-contrast-600));
}

.border-primary-contrast-600 {
  border-color: rgb(var(--color-primary-contrast-600));
}

.bg-primary-700 {
  background-color: rgba(var(--color-primary-700), 1);
  color: rgb(var(--color-primary-contrast-700));
}

.text-primary-700 {
  color: rgba(var(--color-primary-700), 1);
}

.border-primary-700 {
  border-color: rgba(var(--color-primary-700), 1);
}

.bg-primary-contrast-700 {
  background-color: rgb(var(--color-primary-contrast-700));
  color: rgba(var(--color-primary-700), 1);
}

.text-primary-contrast-700 {
  color: rgb(var(--color-primary-contrast-700));
}

.border-primary-contrast-700 {
  border-color: rgb(var(--color-primary-contrast-700));
}

.bg-primary-800 {
  background-color: rgba(var(--color-primary-800), 1);
  color: rgb(var(--color-primary-contrast-800));
}

.text-primary-800 {
  color: rgba(var(--color-primary-800), 1);
}

.border-primary-800 {
  border-color: rgba(var(--color-primary-800), 1);
}

.bg-primary-contrast-800 {
  background-color: rgb(var(--color-primary-contrast-800));
  color: rgba(var(--color-primary-800), 1);
}

.text-primary-contrast-800 {
  color: rgb(var(--color-primary-contrast-800));
}

.border-primary-contrast-800 {
  border-color: rgb(var(--color-primary-contrast-800));
}

.bg-primary-900 {
  background-color: rgba(var(--color-primary-900), 1);
  color: rgb(var(--color-primary-contrast-900));
}

.text-primary-900 {
  color: rgba(var(--color-primary-900), 1);
}

.border-primary-900 {
  border-color: rgba(var(--color-primary-900), 1);
}

.bg-primary-contrast-900 {
  background-color: rgb(var(--color-primary-contrast-900));
  color: rgba(var(--color-primary-900), 1);
}

.text-primary-contrast-900 {
  color: rgb(var(--color-primary-contrast-900));
}

.border-primary-contrast-900 {
  border-color: rgb(var(--color-primary-contrast-900));
}

.bg-secondary-100 {
  background-color: rgba(var(--color-secondary-100), 1);
  color: rgb(var(--color-secondary-contrast-100));
}

.text-secondary-100 {
  color: rgba(var(--color-secondary-100), 1);
}

.border-secondary-100 {
  border-color: rgba(var(--color-secondary-100), 1);
}

.bg-secondary-contrast-100 {
  background-color: rgb(var(--color-secondary-contrast-100));
  color: rgba(var(--color-secondary-100), 1);
}

.text-secondary-contrast-100 {
  color: rgb(var(--color-secondary-contrast-100));
}

.border-secondary-contrast-100 {
  border-color: rgb(var(--color-secondary-contrast-100));
}

.bg-secondary-200 {
  background-color: rgba(var(--color-secondary-200), 1);
  color: rgb(var(--color-secondary-contrast-200));
}

.text-secondary-200 {
  color: rgba(var(--color-secondary-200), 1);
}

.border-secondary-200 {
  border-color: rgba(var(--color-secondary-200), 1);
}

.bg-secondary-contrast-200 {
  background-color: rgb(var(--color-secondary-contrast-200));
  color: rgba(var(--color-secondary-200), 1);
}

.text-secondary-contrast-200 {
  color: rgb(var(--color-secondary-contrast-200));
}

.border-secondary-contrast-200 {
  border-color: rgb(var(--color-secondary-contrast-200));
}

.bg-secondary-300 {
  background-color: rgba(var(--color-secondary-300), 1);
  color: rgb(var(--color-secondary-contrast-300));
}

.text-secondary-300 {
  color: rgba(var(--color-secondary-300), 1);
}

.border-secondary-300 {
  border-color: rgba(var(--color-secondary-300), 1);
}

.bg-secondary-contrast-300 {
  background-color: rgb(var(--color-secondary-contrast-300));
  color: rgba(var(--color-secondary-300), 1);
}

.text-secondary-contrast-300 {
  color: rgb(var(--color-secondary-contrast-300));
}

.border-secondary-contrast-300 {
  border-color: rgb(var(--color-secondary-contrast-300));
}

.bg-secondary-400 {
  background-color: rgba(var(--color-secondary-400), 1);
  color: rgb(var(--color-secondary-contrast-400));
}

.text-secondary-400 {
  color: rgba(var(--color-secondary-400), 1);
}

.border-secondary-400 {
  border-color: rgba(var(--color-secondary-400), 1);
}

.bg-secondary-contrast-400 {
  background-color: rgb(var(--color-secondary-contrast-400));
  color: rgba(var(--color-secondary-400), 1);
}

.text-secondary-contrast-400 {
  color: rgb(var(--color-secondary-contrast-400));
}

.border-secondary-contrast-400 {
  border-color: rgb(var(--color-secondary-contrast-400));
}

.bg-secondary-500 {
  background-color: rgba(var(--color-secondary-500), 1);
  color: rgb(var(--color-secondary-contrast-500));
}

.text-secondary-500 {
  color: rgba(var(--color-secondary-500), 1);
}

.border-secondary-500 {
  border-color: rgba(var(--color-secondary-500), 1);
}

.bg-secondary-contrast-500 {
  background-color: rgb(var(--color-secondary-contrast-500));
  color: rgba(var(--color-secondary-500), 1);
}

.text-secondary-contrast-500 {
  color: rgb(var(--color-secondary-contrast-500));
}

.border-secondary-contrast-500 {
  border-color: rgb(var(--color-secondary-contrast-500));
}

.bg-secondary-600 {
  background-color: rgba(var(--color-secondary-600), 1);
  color: rgb(var(--color-secondary-contrast-600));
}

.text-secondary-600 {
  color: rgba(var(--color-secondary-600), 1);
}

.border-secondary-600 {
  border-color: rgba(var(--color-secondary-600), 1);
}

.bg-secondary-contrast-600 {
  background-color: rgb(var(--color-secondary-contrast-600));
  color: rgba(var(--color-secondary-600), 1);
}

.text-secondary-contrast-600 {
  color: rgb(var(--color-secondary-contrast-600));
}

.border-secondary-contrast-600 {
  border-color: rgb(var(--color-secondary-contrast-600));
}

.bg-secondary-700 {
  background-color: rgba(var(--color-secondary-700), 1);
  color: rgb(var(--color-secondary-contrast-700));
}

.text-secondary-700 {
  color: rgba(var(--color-secondary-700), 1);
}

.border-secondary-700 {
  border-color: rgba(var(--color-secondary-700), 1);
}

.bg-secondary-contrast-700 {
  background-color: rgb(var(--color-secondary-contrast-700));
  color: rgba(var(--color-secondary-700), 1);
}

.text-secondary-contrast-700 {
  color: rgb(var(--color-secondary-contrast-700));
}

.border-secondary-contrast-700 {
  border-color: rgb(var(--color-secondary-contrast-700));
}

.bg-secondary-800 {
  background-color: rgba(var(--color-secondary-800), 1);
  color: rgb(var(--color-secondary-contrast-800));
}

.text-secondary-800 {
  color: rgba(var(--color-secondary-800), 1);
}

.border-secondary-800 {
  border-color: rgba(var(--color-secondary-800), 1);
}

.bg-secondary-contrast-800 {
  background-color: rgb(var(--color-secondary-contrast-800));
  color: rgba(var(--color-secondary-800), 1);
}

.text-secondary-contrast-800 {
  color: rgb(var(--color-secondary-contrast-800));
}

.border-secondary-contrast-800 {
  border-color: rgb(var(--color-secondary-contrast-800));
}

.bg-secondary-900 {
  background-color: rgba(var(--color-secondary-900), 1);
  color: rgb(var(--color-secondary-contrast-900));
}

.text-secondary-900 {
  color: rgba(var(--color-secondary-900), 1);
}

.border-secondary-900 {
  border-color: rgba(var(--color-secondary-900), 1);
}

.bg-secondary-contrast-900 {
  background-color: rgb(var(--color-secondary-contrast-900));
  color: rgba(var(--color-secondary-900), 1);
}

.text-secondary-contrast-900 {
  color: rgb(var(--color-secondary-contrast-900));
}

.border-secondary-contrast-900 {
  border-color: rgb(var(--color-secondary-contrast-900));
}

.bg-third-100 {
  background-color: rgba(var(--color-third-100), 1);
  color: rgb(var(--color-third-contrast-100));
}

.text-third-100 {
  color: rgba(var(--color-third-100), 1);
}

.border-third-100 {
  border-color: rgba(var(--color-third-100), 1);
}

.bg-third-contrast-100 {
  background-color: rgb(var(--color-third-contrast-100));
  color: rgba(var(--color-third-100), 1);
}

.text-third-contrast-100 {
  color: rgb(var(--color-third-contrast-100));
}

.border-third-contrast-100 {
  border-color: rgb(var(--color-third-contrast-100));
}

.bg-third-200 {
  background-color: rgba(var(--color-third-200), 1);
  color: rgb(var(--color-third-contrast-200));
}

.text-third-200 {
  color: rgba(var(--color-third-200), 1);
}

.border-third-200 {
  border-color: rgba(var(--color-third-200), 1);
}

.bg-third-contrast-200 {
  background-color: rgb(var(--color-third-contrast-200));
  color: rgba(var(--color-third-200), 1);
}

.text-third-contrast-200 {
  color: rgb(var(--color-third-contrast-200));
}

.border-third-contrast-200 {
  border-color: rgb(var(--color-third-contrast-200));
}

.bg-third-300 {
  background-color: rgba(var(--color-third-300), 1);
  color: rgb(var(--color-third-contrast-300));
}

.text-third-300 {
  color: rgba(var(--color-third-300), 1);
}

.border-third-300 {
  border-color: rgba(var(--color-third-300), 1);
}

.bg-third-contrast-300 {
  background-color: rgb(var(--color-third-contrast-300));
  color: rgba(var(--color-third-300), 1);
}

.text-third-contrast-300 {
  color: rgb(var(--color-third-contrast-300));
}

.border-third-contrast-300 {
  border-color: rgb(var(--color-third-contrast-300));
}

.bg-third-400 {
  background-color: rgba(var(--color-third-400), 1);
  color: rgb(var(--color-third-contrast-400));
}

.text-third-400 {
  color: rgba(var(--color-third-400), 1);
}

.border-third-400 {
  border-color: rgba(var(--color-third-400), 1);
}

.bg-third-contrast-400 {
  background-color: rgb(var(--color-third-contrast-400));
  color: rgba(var(--color-third-400), 1);
}

.text-third-contrast-400 {
  color: rgb(var(--color-third-contrast-400));
}

.border-third-contrast-400 {
  border-color: rgb(var(--color-third-contrast-400));
}

.bg-third-500 {
  background-color: rgba(var(--color-third-500), 1);
  color: rgb(var(--color-third-contrast-500));
}

.text-third-500 {
  color: rgba(var(--color-third-500), 1);
}

.border-third-500 {
  border-color: rgba(var(--color-third-500), 1);
}

.bg-third-contrast-500 {
  background-color: rgb(var(--color-third-contrast-500));
  color: rgba(var(--color-third-500), 1);
}

.text-third-contrast-500 {
  color: rgb(var(--color-third-contrast-500));
}

.border-third-contrast-500 {
  border-color: rgb(var(--color-third-contrast-500));
}

.bg-third-600 {
  background-color: rgba(var(--color-third-600), 1);
  color: rgb(var(--color-third-contrast-600));
}

.text-third-600 {
  color: rgba(var(--color-third-600), 1);
}

.border-third-600 {
  border-color: rgba(var(--color-third-600), 1);
}

.bg-third-contrast-600 {
  background-color: rgb(var(--color-third-contrast-600));
  color: rgba(var(--color-third-600), 1);
}

.text-third-contrast-600 {
  color: rgb(var(--color-third-contrast-600));
}

.border-third-contrast-600 {
  border-color: rgb(var(--color-third-contrast-600));
}

.bg-third-700 {
  background-color: rgba(var(--color-third-700), 1);
  color: rgb(var(--color-third-contrast-700));
}

.text-third-700 {
  color: rgba(var(--color-third-700), 1);
}

.border-third-700 {
  border-color: rgba(var(--color-third-700), 1);
}

.bg-third-contrast-700 {
  background-color: rgb(var(--color-third-contrast-700));
  color: rgba(var(--color-third-700), 1);
}

.text-third-contrast-700 {
  color: rgb(var(--color-third-contrast-700));
}

.border-third-contrast-700 {
  border-color: rgb(var(--color-third-contrast-700));
}

.bg-third-800 {
  background-color: rgba(var(--color-third-800), 1);
  color: rgb(var(--color-third-contrast-800));
}

.text-third-800 {
  color: rgba(var(--color-third-800), 1);
}

.border-third-800 {
  border-color: rgba(var(--color-third-800), 1);
}

.bg-third-contrast-800 {
  background-color: rgb(var(--color-third-contrast-800));
  color: rgba(var(--color-third-800), 1);
}

.text-third-contrast-800 {
  color: rgb(var(--color-third-contrast-800));
}

.border-third-contrast-800 {
  border-color: rgb(var(--color-third-contrast-800));
}

.bg-third-900 {
  background-color: rgba(var(--color-third-900), 1);
  color: rgb(var(--color-third-contrast-900));
}

.text-third-900 {
  color: rgba(var(--color-third-900), 1);
}

.border-third-900 {
  border-color: rgba(var(--color-third-900), 1);
}

.bg-third-contrast-900 {
  background-color: rgb(var(--color-third-contrast-900));
  color: rgba(var(--color-third-900), 1);
}

.text-third-contrast-900 {
  color: rgb(var(--color-third-contrast-900));
}

.border-third-contrast-900 {
  border-color: rgb(var(--color-third-contrast-900));
}

.bg-accent-100 {
  background-color: rgba(var(--color-accent-100), 1);
  color: rgb(var(--color-accent-contrast-100));
}

.text-accent-100 {
  color: rgba(var(--color-accent-100), 1);
}

.border-accent-100 {
  border-color: rgba(var(--color-accent-100), 1);
}

.bg-accent-contrast-100 {
  background-color: rgb(var(--color-accent-contrast-100));
  color: rgba(var(--color-accent-100), 1);
}

.text-accent-contrast-100 {
  color: rgb(var(--color-accent-contrast-100));
}

.border-accent-contrast-100 {
  border-color: rgb(var(--color-accent-contrast-100));
}

.bg-accent-200 {
  background-color: rgba(var(--color-accent-200), 1);
  color: rgb(var(--color-accent-contrast-200));
}

.text-accent-200 {
  color: rgba(var(--color-accent-200), 1);
}

.border-accent-200 {
  border-color: rgba(var(--color-accent-200), 1);
}

.bg-accent-contrast-200 {
  background-color: rgb(var(--color-accent-contrast-200));
  color: rgba(var(--color-accent-200), 1);
}

.text-accent-contrast-200 {
  color: rgb(var(--color-accent-contrast-200));
}

.border-accent-contrast-200 {
  border-color: rgb(var(--color-accent-contrast-200));
}

.bg-accent-300 {
  background-color: rgba(var(--color-accent-300), 1);
  color: rgb(var(--color-accent-contrast-300));
}

.text-accent-300 {
  color: rgba(var(--color-accent-300), 1);
}

.border-accent-300 {
  border-color: rgba(var(--color-accent-300), 1);
}

.bg-accent-contrast-300 {
  background-color: rgb(var(--color-accent-contrast-300));
  color: rgba(var(--color-accent-300), 1);
}

.text-accent-contrast-300 {
  color: rgb(var(--color-accent-contrast-300));
}

.border-accent-contrast-300 {
  border-color: rgb(var(--color-accent-contrast-300));
}

.bg-accent-400 {
  background-color: rgba(var(--color-accent-400), 1);
  color: rgb(var(--color-accent-contrast-400));
}

.text-accent-400 {
  color: rgba(var(--color-accent-400), 1);
}

.border-accent-400 {
  border-color: rgba(var(--color-accent-400), 1);
}

.bg-accent-contrast-400 {
  background-color: rgb(var(--color-accent-contrast-400));
  color: rgba(var(--color-accent-400), 1);
}

.text-accent-contrast-400 {
  color: rgb(var(--color-accent-contrast-400));
}

.border-accent-contrast-400 {
  border-color: rgb(var(--color-accent-contrast-400));
}

.bg-accent-500 {
  background-color: rgba(var(--color-accent-500), 1);
  color: rgb(var(--color-accent-contrast-500));
}

.text-accent-500 {
  color: rgba(var(--color-accent-500), 1);
}

.border-accent-500 {
  border-color: rgba(var(--color-accent-500), 1);
}

.bg-accent-contrast-500 {
  background-color: rgb(var(--color-accent-contrast-500));
  color: rgba(var(--color-accent-500), 1);
}

.text-accent-contrast-500 {
  color: rgb(var(--color-accent-contrast-500));
}

.border-accent-contrast-500 {
  border-color: rgb(var(--color-accent-contrast-500));
}

.bg-accent-600 {
  background-color: rgba(var(--color-accent-600), 1);
  color: rgb(var(--color-accent-contrast-600));
}

.text-accent-600 {
  color: rgba(var(--color-accent-600), 1);
}

.border-accent-600 {
  border-color: rgba(var(--color-accent-600), 1);
}

.bg-accent-contrast-600 {
  background-color: rgb(var(--color-accent-contrast-600));
  color: rgba(var(--color-accent-600), 1);
}

.text-accent-contrast-600 {
  color: rgb(var(--color-accent-contrast-600));
}

.border-accent-contrast-600 {
  border-color: rgb(var(--color-accent-contrast-600));
}

.bg-accent-700 {
  background-color: rgba(var(--color-accent-700), 1);
  color: rgb(var(--color-accent-contrast-700));
}

.text-accent-700 {
  color: rgba(var(--color-accent-700), 1);
}

.border-accent-700 {
  border-color: rgba(var(--color-accent-700), 1);
}

.bg-accent-contrast-700 {
  background-color: rgb(var(--color-accent-contrast-700));
  color: rgba(var(--color-accent-700), 1);
}

.text-accent-contrast-700 {
  color: rgb(var(--color-accent-contrast-700));
}

.border-accent-contrast-700 {
  border-color: rgb(var(--color-accent-contrast-700));
}

.bg-accent-800 {
  background-color: rgba(var(--color-accent-800), 1);
  color: rgb(var(--color-accent-contrast-800));
}

.text-accent-800 {
  color: rgba(var(--color-accent-800), 1);
}

.border-accent-800 {
  border-color: rgba(var(--color-accent-800), 1);
}

.bg-accent-contrast-800 {
  background-color: rgb(var(--color-accent-contrast-800));
  color: rgba(var(--color-accent-800), 1);
}

.text-accent-contrast-800 {
  color: rgb(var(--color-accent-contrast-800));
}

.border-accent-contrast-800 {
  border-color: rgb(var(--color-accent-contrast-800));
}

.bg-accent-900 {
  background-color: rgba(var(--color-accent-900), 1);
  color: rgb(var(--color-accent-contrast-900));
}

.text-accent-900 {
  color: rgba(var(--color-accent-900), 1);
}

.border-accent-900 {
  border-color: rgba(var(--color-accent-900), 1);
}

.bg-accent-contrast-900 {
  background-color: rgb(var(--color-accent-contrast-900));
  color: rgba(var(--color-accent-900), 1);
}

.text-accent-contrast-900 {
  color: rgb(var(--color-accent-contrast-900));
}

.border-accent-contrast-900 {
  border-color: rgb(var(--color-accent-contrast-900));
}

.bg-lgray-100 {
  background-color: rgba(var(--color-lgray-100), 1);
  color: rgb(var(--color-lgray-contrast-100));
}

.text-lgray-100 {
  color: rgba(var(--color-lgray-100), 1);
}

.border-lgray-100 {
  border-color: rgba(var(--color-lgray-100), 1);
}

.bg-lgray-contrast-100 {
  background-color: rgb(var(--color-lgray-contrast-100));
  color: rgba(var(--color-lgray-100), 1);
}

.text-lgray-contrast-100 {
  color: rgb(var(--color-lgray-contrast-100));
}

.border-lgray-contrast-100 {
  border-color: rgb(var(--color-lgray-contrast-100));
}

.bg-lgray-200 {
  background-color: rgba(var(--color-lgray-200), 1);
  color: rgb(var(--color-lgray-contrast-200));
}

.text-lgray-200 {
  color: rgba(var(--color-lgray-200), 1);
}

.border-lgray-200 {
  border-color: rgba(var(--color-lgray-200), 1);
}

.bg-lgray-contrast-200 {
  background-color: rgb(var(--color-lgray-contrast-200));
  color: rgba(var(--color-lgray-200), 1);
}

.text-lgray-contrast-200 {
  color: rgb(var(--color-lgray-contrast-200));
}

.border-lgray-contrast-200 {
  border-color: rgb(var(--color-lgray-contrast-200));
}

.bg-lgray-300 {
  background-color: rgba(var(--color-lgray-300), 1);
  color: rgb(var(--color-lgray-contrast-300));
}

.text-lgray-300 {
  color: rgba(var(--color-lgray-300), 1);
}

.border-lgray-300 {
  border-color: rgba(var(--color-lgray-300), 1);
}

.bg-lgray-contrast-300 {
  background-color: rgb(var(--color-lgray-contrast-300));
  color: rgba(var(--color-lgray-300), 1);
}

.text-lgray-contrast-300 {
  color: rgb(var(--color-lgray-contrast-300));
}

.border-lgray-contrast-300 {
  border-color: rgb(var(--color-lgray-contrast-300));
}

.bg-lgray-400 {
  background-color: rgba(var(--color-lgray-400), 1);
  color: rgb(var(--color-lgray-contrast-400));
}

.text-lgray-400 {
  color: rgba(var(--color-lgray-400), 1);
}

.border-lgray-400 {
  border-color: rgba(var(--color-lgray-400), 1);
}

.bg-lgray-contrast-400 {
  background-color: rgb(var(--color-lgray-contrast-400));
  color: rgba(var(--color-lgray-400), 1);
}

.text-lgray-contrast-400 {
  color: rgb(var(--color-lgray-contrast-400));
}

.border-lgray-contrast-400 {
  border-color: rgb(var(--color-lgray-contrast-400));
}

.bg-lgray-500 {
  background-color: rgba(var(--color-lgray-500), 1);
  color: rgb(var(--color-lgray-contrast-500));
}

.text-lgray-500 {
  color: rgba(var(--color-lgray-500), 1);
}

.border-lgray-500 {
  border-color: rgba(var(--color-lgray-500), 1);
}

.bg-lgray-contrast-500 {
  background-color: rgb(var(--color-lgray-contrast-500));
  color: rgba(var(--color-lgray-500), 1);
}

.text-lgray-contrast-500 {
  color: rgb(var(--color-lgray-contrast-500));
}

.border-lgray-contrast-500 {
  border-color: rgb(var(--color-lgray-contrast-500));
}

.bg-lgray-600 {
  background-color: rgba(var(--color-lgray-600), 1);
  color: rgb(var(--color-lgray-contrast-600));
}

.text-lgray-600 {
  color: rgba(var(--color-lgray-600), 1);
}

.border-lgray-600 {
  border-color: rgba(var(--color-lgray-600), 1);
}

.bg-lgray-contrast-600 {
  background-color: rgb(var(--color-lgray-contrast-600));
  color: rgba(var(--color-lgray-600), 1);
}

.text-lgray-contrast-600 {
  color: rgb(var(--color-lgray-contrast-600));
}

.border-lgray-contrast-600 {
  border-color: rgb(var(--color-lgray-contrast-600));
}

.bg-lgray-700 {
  background-color: rgba(var(--color-lgray-700), 1);
  color: rgb(var(--color-lgray-contrast-700));
}

.text-lgray-700 {
  color: rgba(var(--color-lgray-700), 1);
}

.border-lgray-700 {
  border-color: rgba(var(--color-lgray-700), 1);
}

.bg-lgray-contrast-700 {
  background-color: rgb(var(--color-lgray-contrast-700));
  color: rgba(var(--color-lgray-700), 1);
}

.text-lgray-contrast-700 {
  color: rgb(var(--color-lgray-contrast-700));
}

.border-lgray-contrast-700 {
  border-color: rgb(var(--color-lgray-contrast-700));
}

.bg-lgray-800 {
  background-color: rgba(var(--color-lgray-800), 1);
  color: rgb(var(--color-lgray-contrast-800));
}

.text-lgray-800 {
  color: rgba(var(--color-lgray-800), 1);
}

.border-lgray-800 {
  border-color: rgba(var(--color-lgray-800), 1);
}

.bg-lgray-contrast-800 {
  background-color: rgb(var(--color-lgray-contrast-800));
  color: rgba(var(--color-lgray-800), 1);
}

.text-lgray-contrast-800 {
  color: rgb(var(--color-lgray-contrast-800));
}

.border-lgray-contrast-800 {
  border-color: rgb(var(--color-lgray-contrast-800));
}

.bg-lgray-900 {
  background-color: rgba(var(--color-lgray-900), 1);
  color: rgb(var(--color-lgray-contrast-900));
}

.text-lgray-900 {
  color: rgba(var(--color-lgray-900), 1);
}

.border-lgray-900 {
  border-color: rgba(var(--color-lgray-900), 1);
}

.bg-lgray-contrast-900 {
  background-color: rgb(var(--color-lgray-contrast-900));
  color: rgba(var(--color-lgray-900), 1);
}

.text-lgray-contrast-900 {
  color: rgb(var(--color-lgray-contrast-900));
}

.border-lgray-contrast-900 {
  border-color: rgb(var(--color-lgray-contrast-900));
}

.bg-success-100 {
  background-color: rgba(var(--color-success-100), 1);
  color: rgb(var(--color-success-contrast-100));
}

.text-success-100 {
  color: rgba(var(--color-success-100), 1);
}

.border-success-100 {
  border-color: rgba(var(--color-success-100), 1);
}

.bg-success-contrast-100 {
  background-color: rgb(var(--color-success-contrast-100));
  color: rgba(var(--color-success-100), 1);
}

.text-success-contrast-100 {
  color: rgb(var(--color-success-contrast-100));
}

.border-success-contrast-100 {
  border-color: rgb(var(--color-success-contrast-100));
}

.bg-success-200 {
  background-color: rgba(var(--color-success-200), 1);
  color: rgb(var(--color-success-contrast-200));
}

.text-success-200 {
  color: rgba(var(--color-success-200), 1);
}

.border-success-200 {
  border-color: rgba(var(--color-success-200), 1);
}

.bg-success-contrast-200 {
  background-color: rgb(var(--color-success-contrast-200));
  color: rgba(var(--color-success-200), 1);
}

.text-success-contrast-200 {
  color: rgb(var(--color-success-contrast-200));
}

.border-success-contrast-200 {
  border-color: rgb(var(--color-success-contrast-200));
}

.bg-success-300 {
  background-color: rgba(var(--color-success-300), 1);
  color: rgb(var(--color-success-contrast-300));
}

.text-success-300 {
  color: rgba(var(--color-success-300), 1);
}

.border-success-300 {
  border-color: rgba(var(--color-success-300), 1);
}

.bg-success-contrast-300 {
  background-color: rgb(var(--color-success-contrast-300));
  color: rgba(var(--color-success-300), 1);
}

.text-success-contrast-300 {
  color: rgb(var(--color-success-contrast-300));
}

.border-success-contrast-300 {
  border-color: rgb(var(--color-success-contrast-300));
}

.bg-success-400 {
  background-color: rgba(var(--color-success-400), 1);
  color: rgb(var(--color-success-contrast-400));
}

.text-success-400 {
  color: rgba(var(--color-success-400), 1);
}

.border-success-400 {
  border-color: rgba(var(--color-success-400), 1);
}

.bg-success-contrast-400 {
  background-color: rgb(var(--color-success-contrast-400));
  color: rgba(var(--color-success-400), 1);
}

.text-success-contrast-400 {
  color: rgb(var(--color-success-contrast-400));
}

.border-success-contrast-400 {
  border-color: rgb(var(--color-success-contrast-400));
}

.bg-success-500 {
  background-color: rgba(var(--color-success-500), 1);
  color: rgb(var(--color-success-contrast-500));
}

.text-success-500 {
  color: rgba(var(--color-success-500), 1);
}

.border-success-500 {
  border-color: rgba(var(--color-success-500), 1);
}

.bg-success-contrast-500 {
  background-color: rgb(var(--color-success-contrast-500));
  color: rgba(var(--color-success-500), 1);
}

.text-success-contrast-500 {
  color: rgb(var(--color-success-contrast-500));
}

.border-success-contrast-500 {
  border-color: rgb(var(--color-success-contrast-500));
}

.bg-success-600 {
  background-color: rgba(var(--color-success-600), 1);
  color: rgb(var(--color-success-contrast-600));
}

.text-success-600 {
  color: rgba(var(--color-success-600), 1);
}

.border-success-600 {
  border-color: rgba(var(--color-success-600), 1);
}

.bg-success-contrast-600 {
  background-color: rgb(var(--color-success-contrast-600));
  color: rgba(var(--color-success-600), 1);
}

.text-success-contrast-600 {
  color: rgb(var(--color-success-contrast-600));
}

.border-success-contrast-600 {
  border-color: rgb(var(--color-success-contrast-600));
}

.bg-success-700 {
  background-color: rgba(var(--color-success-700), 1);
  color: rgb(var(--color-success-contrast-700));
}

.text-success-700 {
  color: rgba(var(--color-success-700), 1);
}

.border-success-700 {
  border-color: rgba(var(--color-success-700), 1);
}

.bg-success-contrast-700 {
  background-color: rgb(var(--color-success-contrast-700));
  color: rgba(var(--color-success-700), 1);
}

.text-success-contrast-700 {
  color: rgb(var(--color-success-contrast-700));
}

.border-success-contrast-700 {
  border-color: rgb(var(--color-success-contrast-700));
}

.bg-success-800 {
  background-color: rgba(var(--color-success-800), 1);
  color: rgb(var(--color-success-contrast-800));
}

.text-success-800 {
  color: rgba(var(--color-success-800), 1);
}

.border-success-800 {
  border-color: rgba(var(--color-success-800), 1);
}

.bg-success-contrast-800 {
  background-color: rgb(var(--color-success-contrast-800));
  color: rgba(var(--color-success-800), 1);
}

.text-success-contrast-800 {
  color: rgb(var(--color-success-contrast-800));
}

.border-success-contrast-800 {
  border-color: rgb(var(--color-success-contrast-800));
}

.bg-success-900 {
  background-color: rgba(var(--color-success-900), 1);
  color: rgb(var(--color-success-contrast-900));
}

.text-success-900 {
  color: rgba(var(--color-success-900), 1);
}

.border-success-900 {
  border-color: rgba(var(--color-success-900), 1);
}

.bg-success-contrast-900 {
  background-color: rgb(var(--color-success-contrast-900));
  color: rgba(var(--color-success-900), 1);
}

.text-success-contrast-900 {
  color: rgb(var(--color-success-contrast-900));
}

.border-success-contrast-900 {
  border-color: rgb(var(--color-success-contrast-900));
}

.bg-warning-100 {
  background-color: rgba(var(--color-warning-100), 1);
  color: rgb(var(--color-warning-contrast-100));
}

.text-warning-100 {
  color: rgba(var(--color-warning-100), 1);
}

.border-warning-100 {
  border-color: rgba(var(--color-warning-100), 1);
}

.bg-warning-contrast-100 {
  background-color: rgb(var(--color-warning-contrast-100));
  color: rgba(var(--color-warning-100), 1);
}

.text-warning-contrast-100 {
  color: rgb(var(--color-warning-contrast-100));
}

.border-warning-contrast-100 {
  border-color: rgb(var(--color-warning-contrast-100));
}

.bg-warning-200 {
  background-color: rgba(var(--color-warning-200), 1);
  color: rgb(var(--color-warning-contrast-200));
}

.text-warning-200 {
  color: rgba(var(--color-warning-200), 1);
}

.border-warning-200 {
  border-color: rgba(var(--color-warning-200), 1);
}

.bg-warning-contrast-200 {
  background-color: rgb(var(--color-warning-contrast-200));
  color: rgba(var(--color-warning-200), 1);
}

.text-warning-contrast-200 {
  color: rgb(var(--color-warning-contrast-200));
}

.border-warning-contrast-200 {
  border-color: rgb(var(--color-warning-contrast-200));
}

.bg-warning-300 {
  background-color: rgba(var(--color-warning-300), 1);
  color: rgb(var(--color-warning-contrast-300));
}

.text-warning-300 {
  color: rgba(var(--color-warning-300), 1);
}

.border-warning-300 {
  border-color: rgba(var(--color-warning-300), 1);
}

.bg-warning-contrast-300 {
  background-color: rgb(var(--color-warning-contrast-300));
  color: rgba(var(--color-warning-300), 1);
}

.text-warning-contrast-300 {
  color: rgb(var(--color-warning-contrast-300));
}

.border-warning-contrast-300 {
  border-color: rgb(var(--color-warning-contrast-300));
}

.bg-warning-400 {
  background-color: rgba(var(--color-warning-400), 1);
  color: rgb(var(--color-warning-contrast-400));
}

.text-warning-400 {
  color: rgba(var(--color-warning-400), 1);
}

.border-warning-400 {
  border-color: rgba(var(--color-warning-400), 1);
}

.bg-warning-contrast-400 {
  background-color: rgb(var(--color-warning-contrast-400));
  color: rgba(var(--color-warning-400), 1);
}

.text-warning-contrast-400 {
  color: rgb(var(--color-warning-contrast-400));
}

.border-warning-contrast-400 {
  border-color: rgb(var(--color-warning-contrast-400));
}

.bg-warning-500 {
  background-color: rgba(var(--color-warning-500), 1);
  color: rgb(var(--color-warning-contrast-500));
}

.text-warning-500 {
  color: rgba(var(--color-warning-500), 1);
}

.border-warning-500 {
  border-color: rgba(var(--color-warning-500), 1);
}

.bg-warning-contrast-500 {
  background-color: rgb(var(--color-warning-contrast-500));
  color: rgba(var(--color-warning-500), 1);
}

.text-warning-contrast-500 {
  color: rgb(var(--color-warning-contrast-500));
}

.border-warning-contrast-500 {
  border-color: rgb(var(--color-warning-contrast-500));
}

.bg-warning-600 {
  background-color: rgba(var(--color-warning-600), 1);
  color: rgb(var(--color-warning-contrast-600));
}

.text-warning-600 {
  color: rgba(var(--color-warning-600), 1);
}

.border-warning-600 {
  border-color: rgba(var(--color-warning-600), 1);
}

.bg-warning-contrast-600 {
  background-color: rgb(var(--color-warning-contrast-600));
  color: rgba(var(--color-warning-600), 1);
}

.text-warning-contrast-600 {
  color: rgb(var(--color-warning-contrast-600));
}

.border-warning-contrast-600 {
  border-color: rgb(var(--color-warning-contrast-600));
}

.bg-warning-700 {
  background-color: rgba(var(--color-warning-700), 1);
  color: rgb(var(--color-warning-contrast-700));
}

.text-warning-700 {
  color: rgba(var(--color-warning-700), 1);
}

.border-warning-700 {
  border-color: rgba(var(--color-warning-700), 1);
}

.bg-warning-contrast-700 {
  background-color: rgb(var(--color-warning-contrast-700));
  color: rgba(var(--color-warning-700), 1);
}

.text-warning-contrast-700 {
  color: rgb(var(--color-warning-contrast-700));
}

.border-warning-contrast-700 {
  border-color: rgb(var(--color-warning-contrast-700));
}

.bg-warning-800 {
  background-color: rgba(var(--color-warning-800), 1);
  color: rgb(var(--color-warning-contrast-800));
}

.text-warning-800 {
  color: rgba(var(--color-warning-800), 1);
}

.border-warning-800 {
  border-color: rgba(var(--color-warning-800), 1);
}

.bg-warning-contrast-800 {
  background-color: rgb(var(--color-warning-contrast-800));
  color: rgba(var(--color-warning-800), 1);
}

.text-warning-contrast-800 {
  color: rgb(var(--color-warning-contrast-800));
}

.border-warning-contrast-800 {
  border-color: rgb(var(--color-warning-contrast-800));
}

.bg-warning-900 {
  background-color: rgba(var(--color-warning-900), 1);
  color: rgb(var(--color-warning-contrast-900));
}

.text-warning-900 {
  color: rgba(var(--color-warning-900), 1);
}

.border-warning-900 {
  border-color: rgba(var(--color-warning-900), 1);
}

.bg-warning-contrast-900 {
  background-color: rgb(var(--color-warning-contrast-900));
  color: rgba(var(--color-warning-900), 1);
}

.text-warning-contrast-900 {
  color: rgb(var(--color-warning-contrast-900));
}

.border-warning-contrast-900 {
  border-color: rgb(var(--color-warning-contrast-900));
}

.bg-danger-100 {
  background-color: rgba(var(--color-danger-100), 1);
  color: rgb(var(--color-danger-contrast-100));
}

.text-danger-100 {
  color: rgba(var(--color-danger-100), 1);
}

.border-danger-100 {
  border-color: rgba(var(--color-danger-100), 1);
}

.bg-danger-contrast-100 {
  background-color: rgb(var(--color-danger-contrast-100));
  color: rgba(var(--color-danger-100), 1);
}

.text-danger-contrast-100 {
  color: rgb(var(--color-danger-contrast-100));
}

.border-danger-contrast-100 {
  border-color: rgb(var(--color-danger-contrast-100));
}

.bg-danger-200 {
  background-color: rgba(var(--color-danger-200), 1);
  color: rgb(var(--color-danger-contrast-200));
}

.text-danger-200 {
  color: rgba(var(--color-danger-200), 1);
}

.border-danger-200 {
  border-color: rgba(var(--color-danger-200), 1);
}

.bg-danger-contrast-200 {
  background-color: rgb(var(--color-danger-contrast-200));
  color: rgba(var(--color-danger-200), 1);
}

.text-danger-contrast-200 {
  color: rgb(var(--color-danger-contrast-200));
}

.border-danger-contrast-200 {
  border-color: rgb(var(--color-danger-contrast-200));
}

.bg-danger-300 {
  background-color: rgba(var(--color-danger-300), 1);
  color: rgb(var(--color-danger-contrast-300));
}

.text-danger-300 {
  color: rgba(var(--color-danger-300), 1);
}

.border-danger-300 {
  border-color: rgba(var(--color-danger-300), 1);
}

.bg-danger-contrast-300 {
  background-color: rgb(var(--color-danger-contrast-300));
  color: rgba(var(--color-danger-300), 1);
}

.text-danger-contrast-300 {
  color: rgb(var(--color-danger-contrast-300));
}

.border-danger-contrast-300 {
  border-color: rgb(var(--color-danger-contrast-300));
}

.bg-danger-400 {
  background-color: rgba(var(--color-danger-400), 1);
  color: rgb(var(--color-danger-contrast-400));
}

.text-danger-400 {
  color: rgba(var(--color-danger-400), 1);
}

.border-danger-400 {
  border-color: rgba(var(--color-danger-400), 1);
}

.bg-danger-contrast-400 {
  background-color: rgb(var(--color-danger-contrast-400));
  color: rgba(var(--color-danger-400), 1);
}

.text-danger-contrast-400 {
  color: rgb(var(--color-danger-contrast-400));
}

.border-danger-contrast-400 {
  border-color: rgb(var(--color-danger-contrast-400));
}

.bg-danger-500 {
  background-color: rgba(var(--color-danger-500), 1);
  color: rgb(var(--color-danger-contrast-500));
}

.text-danger-500 {
  color: rgba(var(--color-danger-500), 1);
}

.border-danger-500 {
  border-color: rgba(var(--color-danger-500), 1);
}

.bg-danger-contrast-500 {
  background-color: rgb(var(--color-danger-contrast-500));
  color: rgba(var(--color-danger-500), 1);
}

.text-danger-contrast-500 {
  color: rgb(var(--color-danger-contrast-500));
}

.border-danger-contrast-500 {
  border-color: rgb(var(--color-danger-contrast-500));
}

.bg-danger-600 {
  background-color: rgba(var(--color-danger-600), 1);
  color: rgb(var(--color-danger-contrast-600));
}

.text-danger-600 {
  color: rgba(var(--color-danger-600), 1);
}

.border-danger-600 {
  border-color: rgba(var(--color-danger-600), 1);
}

.bg-danger-contrast-600 {
  background-color: rgb(var(--color-danger-contrast-600));
  color: rgba(var(--color-danger-600), 1);
}

.text-danger-contrast-600 {
  color: rgb(var(--color-danger-contrast-600));
}

.border-danger-contrast-600 {
  border-color: rgb(var(--color-danger-contrast-600));
}

.bg-danger-700 {
  background-color: rgba(var(--color-danger-700), 1);
  color: rgb(var(--color-danger-contrast-700));
}

.text-danger-700 {
  color: rgba(var(--color-danger-700), 1);
}

.border-danger-700 {
  border-color: rgba(var(--color-danger-700), 1);
}

.bg-danger-contrast-700 {
  background-color: rgb(var(--color-danger-contrast-700));
  color: rgba(var(--color-danger-700), 1);
}

.text-danger-contrast-700 {
  color: rgb(var(--color-danger-contrast-700));
}

.border-danger-contrast-700 {
  border-color: rgb(var(--color-danger-contrast-700));
}

.bg-danger-800 {
  background-color: rgba(var(--color-danger-800), 1);
  color: rgb(var(--color-danger-contrast-800));
}

.text-danger-800 {
  color: rgba(var(--color-danger-800), 1);
}

.border-danger-800 {
  border-color: rgba(var(--color-danger-800), 1);
}

.bg-danger-contrast-800 {
  background-color: rgb(var(--color-danger-contrast-800));
  color: rgba(var(--color-danger-800), 1);
}

.text-danger-contrast-800 {
  color: rgb(var(--color-danger-contrast-800));
}

.border-danger-contrast-800 {
  border-color: rgb(var(--color-danger-contrast-800));
}

.bg-danger-900 {
  background-color: rgba(var(--color-danger-900), 1);
  color: rgb(var(--color-danger-contrast-900));
}

.text-danger-900 {
  color: rgba(var(--color-danger-900), 1);
}

.border-danger-900 {
  border-color: rgba(var(--color-danger-900), 1);
}

.bg-danger-contrast-900 {
  background-color: rgb(var(--color-danger-contrast-900));
  color: rgba(var(--color-danger-900), 1);
}

.text-danger-contrast-900 {
  color: rgb(var(--color-danger-contrast-900));
}

.border-danger-contrast-900 {
  border-color: rgb(var(--color-danger-contrast-900));
}

.m-1-1 {
  margin: calc(var(--spacer) / 1);
}

.mt-1-1 {
  margin-top: calc(var(--spacer) / 1);
}

.mb-1-1 {
  margin-bottom: calc(var(--spacer) / 1);
}

.ml-1-1 {
  margin-left: calc(var(--spacer) / 1);
}

.mr-1-1 {
  margin-right: calc(var(--spacer) / 1);
}

.mx-1-1 {
  margin-left: calc(var(--spacer) / 1);
  margin-right: calc(var(--spacer) / 1);
}

.my-1-1 {
  margin-top: calc(var(--spacer) / 1);
  margin-bottom: calc(var(--spacer) / 1);
}

.p-1-1 {
  padding: calc(var(--spacer) / 1);
}

.pt-1-1 {
  padding-top: calc(var(--spacer) / 1);
}

.pb-1-1 {
  padding-bottom: calc(var(--spacer) / 1);
}

.pl-1-1 {
  padding-left: calc(var(--spacer) / 1);
}

.pr-1-1 {
  padding-right: calc(var(--spacer) / 1);
}

.px-1-1 {
  padding-left: calc(var(--spacer) / 1);
  padding-right: calc(var(--spacer) / 1);
}

.py-1-1 {
  padding-top: calc(var(--spacer) / 1);
  padding-bottom: calc(var(--spacer) / 1);
}

.h-1-1 {
  height: calc(var(--spacer) / 1);
}

.w-1-1 {
  width: calc(var(--spacer) / 1);
}

.m-1-2 {
  margin: calc(var(--spacer) / 2);
}

.mt-1-2 {
  margin-top: calc(var(--spacer) / 2);
}

.mb-1-2 {
  margin-bottom: calc(var(--spacer) / 2);
}

.ml-1-2 {
  margin-left: calc(var(--spacer) / 2);
}

.mr-1-2 {
  margin-right: calc(var(--spacer) / 2);
}

.mx-1-2 {
  margin-left: calc(var(--spacer) / 2);
  margin-right: calc(var(--spacer) / 2);
}

.my-1-2 {
  margin-top: calc(var(--spacer) / 2);
  margin-bottom: calc(var(--spacer) / 2);
}

.p-1-2 {
  padding: calc(var(--spacer) / 2);
}

.pt-1-2 {
  padding-top: calc(var(--spacer) / 2);
}

.pb-1-2 {
  padding-bottom: calc(var(--spacer) / 2);
}

.pl-1-2 {
  padding-left: calc(var(--spacer) / 2);
}

.pr-1-2 {
  padding-right: calc(var(--spacer) / 2);
}

.px-1-2 {
  padding-left: calc(var(--spacer) / 2);
  padding-right: calc(var(--spacer) / 2);
}

.py-1-2 {
  padding-top: calc(var(--spacer) / 2);
  padding-bottom: calc(var(--spacer) / 2);
}

.h-1-2 {
  height: calc(var(--spacer) / 2);
}

.w-1-2 {
  width: calc(var(--spacer) / 2);
}

.m-1-3 {
  margin: calc(var(--spacer) / 3);
}

.mt-1-3 {
  margin-top: calc(var(--spacer) / 3);
}

.mb-1-3 {
  margin-bottom: calc(var(--spacer) / 3);
}

.ml-1-3 {
  margin-left: calc(var(--spacer) / 3);
}

.mr-1-3 {
  margin-right: calc(var(--spacer) / 3);
}

.mx-1-3 {
  margin-left: calc(var(--spacer) / 3);
  margin-right: calc(var(--spacer) / 3);
}

.my-1-3 {
  margin-top: calc(var(--spacer) / 3);
  margin-bottom: calc(var(--spacer) / 3);
}

.p-1-3 {
  padding: calc(var(--spacer) / 3);
}

.pt-1-3 {
  padding-top: calc(var(--spacer) / 3);
}

.pb-1-3 {
  padding-bottom: calc(var(--spacer) / 3);
}

.pl-1-3 {
  padding-left: calc(var(--spacer) / 3);
}

.pr-1-3 {
  padding-right: calc(var(--spacer) / 3);
}

.px-1-3 {
  padding-left: calc(var(--spacer) / 3);
  padding-right: calc(var(--spacer) / 3);
}

.py-1-3 {
  padding-top: calc(var(--spacer) / 3);
  padding-bottom: calc(var(--spacer) / 3);
}

.h-1-3 {
  height: calc(var(--spacer) / 3);
}

.w-1-3 {
  width: calc(var(--spacer) / 3);
}

.m-1-4 {
  margin: calc(var(--spacer) / 4);
}

.mt-1-4 {
  margin-top: calc(var(--spacer) / 4);
}

.mb-1-4 {
  margin-bottom: calc(var(--spacer) / 4);
}

.ml-1-4 {
  margin-left: calc(var(--spacer) / 4);
}

.mr-1-4 {
  margin-right: calc(var(--spacer) / 4);
}

.mx-1-4 {
  margin-left: calc(var(--spacer) / 4);
  margin-right: calc(var(--spacer) / 4);
}

.my-1-4 {
  margin-top: calc(var(--spacer) / 4);
  margin-bottom: calc(var(--spacer) / 4);
}

.p-1-4 {
  padding: calc(var(--spacer) / 4);
}

.pt-1-4 {
  padding-top: calc(var(--spacer) / 4);
}

.pb-1-4 {
  padding-bottom: calc(var(--spacer) / 4);
}

.pl-1-4 {
  padding-left: calc(var(--spacer) / 4);
}

.pr-1-4 {
  padding-right: calc(var(--spacer) / 4);
}

.px-1-4 {
  padding-left: calc(var(--spacer) / 4);
  padding-right: calc(var(--spacer) / 4);
}

.py-1-4 {
  padding-top: calc(var(--spacer) / 4);
  padding-bottom: calc(var(--spacer) / 4);
}

.h-1-4 {
  height: calc(var(--spacer) / 4);
}

.w-1-4 {
  width: calc(var(--spacer) / 4);
}

.m-1-5 {
  margin: calc(var(--spacer) / 5);
}

.mt-1-5 {
  margin-top: calc(var(--spacer) / 5);
}

.mb-1-5 {
  margin-bottom: calc(var(--spacer) / 5);
}

.ml-1-5 {
  margin-left: calc(var(--spacer) / 5);
}

.mr-1-5 {
  margin-right: calc(var(--spacer) / 5);
}

.mx-1-5 {
  margin-left: calc(var(--spacer) / 5);
  margin-right: calc(var(--spacer) / 5);
}

.my-1-5 {
  margin-top: calc(var(--spacer) / 5);
  margin-bottom: calc(var(--spacer) / 5);
}

.p-1-5 {
  padding: calc(var(--spacer) / 5);
}

.pt-1-5 {
  padding-top: calc(var(--spacer) / 5);
}

.pb-1-5 {
  padding-bottom: calc(var(--spacer) / 5);
}

.pl-1-5 {
  padding-left: calc(var(--spacer) / 5);
}

.pr-1-5 {
  padding-right: calc(var(--spacer) / 5);
}

.px-1-5 {
  padding-left: calc(var(--spacer) / 5);
  padding-right: calc(var(--spacer) / 5);
}

.py-1-5 {
  padding-top: calc(var(--spacer) / 5);
  padding-bottom: calc(var(--spacer) / 5);
}

.h-1-5 {
  height: calc(var(--spacer) / 5);
}

.w-1-5 {
  width: calc(var(--spacer) / 5);
}

.m-1-6 {
  margin: calc(var(--spacer) / 6);
}

.mt-1-6 {
  margin-top: calc(var(--spacer) / 6);
}

.mb-1-6 {
  margin-bottom: calc(var(--spacer) / 6);
}

.ml-1-6 {
  margin-left: calc(var(--spacer) / 6);
}

.mr-1-6 {
  margin-right: calc(var(--spacer) / 6);
}

.mx-1-6 {
  margin-left: calc(var(--spacer) / 6);
  margin-right: calc(var(--spacer) / 6);
}

.my-1-6 {
  margin-top: calc(var(--spacer) / 6);
  margin-bottom: calc(var(--spacer) / 6);
}

.p-1-6 {
  padding: calc(var(--spacer) / 6);
}

.pt-1-6 {
  padding-top: calc(var(--spacer) / 6);
}

.pb-1-6 {
  padding-bottom: calc(var(--spacer) / 6);
}

.pl-1-6 {
  padding-left: calc(var(--spacer) / 6);
}

.pr-1-6 {
  padding-right: calc(var(--spacer) / 6);
}

.px-1-6 {
  padding-left: calc(var(--spacer) / 6);
  padding-right: calc(var(--spacer) / 6);
}

.py-1-6 {
  padding-top: calc(var(--spacer) / 6);
  padding-bottom: calc(var(--spacer) / 6);
}

.h-1-6 {
  height: calc(var(--spacer) / 6);
}

.w-1-6 {
  width: calc(var(--spacer) / 6);
}

.m-1-7 {
  margin: calc(var(--spacer) / 7);
}

.mt-1-7 {
  margin-top: calc(var(--spacer) / 7);
}

.mb-1-7 {
  margin-bottom: calc(var(--spacer) / 7);
}

.ml-1-7 {
  margin-left: calc(var(--spacer) / 7);
}

.mr-1-7 {
  margin-right: calc(var(--spacer) / 7);
}

.mx-1-7 {
  margin-left: calc(var(--spacer) / 7);
  margin-right: calc(var(--spacer) / 7);
}

.my-1-7 {
  margin-top: calc(var(--spacer) / 7);
  margin-bottom: calc(var(--spacer) / 7);
}

.p-1-7 {
  padding: calc(var(--spacer) / 7);
}

.pt-1-7 {
  padding-top: calc(var(--spacer) / 7);
}

.pb-1-7 {
  padding-bottom: calc(var(--spacer) / 7);
}

.pl-1-7 {
  padding-left: calc(var(--spacer) / 7);
}

.pr-1-7 {
  padding-right: calc(var(--spacer) / 7);
}

.px-1-7 {
  padding-left: calc(var(--spacer) / 7);
  padding-right: calc(var(--spacer) / 7);
}

.py-1-7 {
  padding-top: calc(var(--spacer) / 7);
  padding-bottom: calc(var(--spacer) / 7);
}

.h-1-7 {
  height: calc(var(--spacer) / 7);
}

.w-1-7 {
  width: calc(var(--spacer) / 7);
}

.m-2-1 {
  margin: calc(var(--spacer) * 2);
}

.mt-2-1 {
  margin-top: calc(var(--spacer) * 2);
}

.mb-2-1 {
  margin-bottom: calc(var(--spacer) * 2);
}

.ml-2-1 {
  margin-left: calc(var(--spacer) * 2);
}

.mr-2-1 {
  margin-right: calc(var(--spacer) * 2);
}

.mx-2-1 {
  margin-left: calc(var(--spacer) * 2);
  margin-right: calc(var(--spacer) * 2);
}

.my-2-1 {
  margin-top: calc(var(--spacer) * 2);
  margin-bottom: calc(var(--spacer) * 2);
}

.p-2-1 {
  padding: calc(var(--spacer) * 2);
}

.pt-2-1 {
  padding-top: calc(var(--spacer) * 2);
}

.pb-2-1 {
  padding-bottom: calc(var(--spacer) * 2);
}

.pl-2-1 {
  padding-left: calc(var(--spacer) * 2);
}

.pr-2-1 {
  padding-right: calc(var(--spacer) * 2);
}

.px-2-1 {
  padding-left: calc(var(--spacer) * 2);
  padding-right: calc(var(--spacer) * 2);
}

.py-2-1 {
  padding-top: calc(var(--spacer) * 2);
  padding-bottom: calc(var(--spacer) * 2);
}

.h-2-1 {
  height: calc(var(--spacer) * 2);
}

.w-2-1 {
  width: calc(var(--spacer) * 2);
}

.m-3-1 {
  margin: calc(var(--spacer) * 3);
}

.mt-3-1 {
  margin-top: calc(var(--spacer) * 3);
}

.mb-3-1 {
  margin-bottom: calc(var(--spacer) * 3);
}

.ml-3-1 {
  margin-left: calc(var(--spacer) * 3);
}

.mr-3-1 {
  margin-right: calc(var(--spacer) * 3);
}

.mx-3-1 {
  margin-left: calc(var(--spacer) * 3);
  margin-right: calc(var(--spacer) * 3);
}

.my-3-1 {
  margin-top: calc(var(--spacer) * 3);
  margin-bottom: calc(var(--spacer) * 3);
}

.p-3-1 {
  padding: calc(var(--spacer) * 3);
}

.pt-3-1 {
  padding-top: calc(var(--spacer) * 3);
}

.pb-3-1 {
  padding-bottom: calc(var(--spacer) * 3);
}

.pl-3-1 {
  padding-left: calc(var(--spacer) * 3);
}

.pr-3-1 {
  padding-right: calc(var(--spacer) * 3);
}

.px-3-1 {
  padding-left: calc(var(--spacer) * 3);
  padding-right: calc(var(--spacer) * 3);
}

.py-3-1 {
  padding-top: calc(var(--spacer) * 3);
  padding-bottom: calc(var(--spacer) * 3);
}

.h-3-1 {
  height: calc(var(--spacer) * 3);
}

.w-3-1 {
  width: calc(var(--spacer) * 3);
}

.m-4-1 {
  margin: calc(var(--spacer) * 4);
}

.mt-4-1 {
  margin-top: calc(var(--spacer) * 4);
}

.mb-4-1 {
  margin-bottom: calc(var(--spacer) * 4);
}

.ml-4-1 {
  margin-left: calc(var(--spacer) * 4);
}

.mr-4-1 {
  margin-right: calc(var(--spacer) * 4);
}

.mx-4-1 {
  margin-left: calc(var(--spacer) * 4);
  margin-right: calc(var(--spacer) * 4);
}

.my-4-1 {
  margin-top: calc(var(--spacer) * 4);
  margin-bottom: calc(var(--spacer) * 4);
}

.p-4-1 {
  padding: calc(var(--spacer) * 4);
}

.pt-4-1 {
  padding-top: calc(var(--spacer) * 4);
}

.pb-4-1 {
  padding-bottom: calc(var(--spacer) * 4);
}

.pl-4-1 {
  padding-left: calc(var(--spacer) * 4);
}

.pr-4-1 {
  padding-right: calc(var(--spacer) * 4);
}

.px-4-1 {
  padding-left: calc(var(--spacer) * 4);
  padding-right: calc(var(--spacer) * 4);
}

.py-4-1 {
  padding-top: calc(var(--spacer) * 4);
  padding-bottom: calc(var(--spacer) * 4);
}

.h-4-1 {
  height: calc(var(--spacer) * 4);
}

.w-4-1 {
  width: calc(var(--spacer) * 4);
}

.m-0 {
  margin: 0;
}

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

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

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

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

.mx-0 {
  margin-left: 0;
  margin-right: 0;
}

.my-0 {
  margin-top: 0;
  margin-bottom: 0;
}

.p-0 {
  padding: 0;
}

.pt-0 {
  padding-top: 0;
}

.pb-0 {
  padding-bottom: 0;
}

.pl-0 {
  padding-left: 0;
}

.pr-0 {
  padding-right: 0;
}

.px-0 {
  padding-left: 0;
  padding-right: 0;
}

.py-0 {
  padding-top: 0;
  padding-bottom: 0;
}

.h-0 {
  height: 0;
}

.w-0 {
  width: 0;
}

.grid__gutter--3-1 {
  margin-left: calc(var(--gutter) * -3);
  margin-right: calc(var(--gutter) * -3);
}
.grid__gutter--3-1 > * {
  padding-left: calc(var(--gutter) * 3);
  padding-right: calc(var(--gutter) * 3);
}

.grid__gutter--2-1 {
  margin-left: calc(var(--gutter) * -2);
  margin-right: calc(var(--gutter) * -2);
}
.grid__gutter--2-1 > * {
  padding-left: calc(var(--gutter) * 2);
  padding-right: calc(var(--gutter) * 2);
}

.grid__gutter {
  margin-left: calc(var(--gutter) * -1);
  margin-right: calc(var(--gutter) * -1);
}
.grid__gutter > * {
  padding-left: calc(var(--gutter) * 1);
  padding-right: calc(var(--gutter) * 1);
}

.grid__gutter--1-2 {
  margin-left: calc(var(--gutter) * -0.5);
  margin-right: calc(var(--gutter) * -0.5);
}
.grid__gutter--1-2 > * {
  padding-left: calc(var(--gutter) * 0.5);
  padding-right: calc(var(--gutter) * 0.5);
}

.grid__gutter--1-3 {
  margin-left: calc(var(--gutter) * -0.333);
  margin-right: calc(var(--gutter) * -0.333);
}
.grid__gutter--1-3 > * {
  padding-left: calc(var(--gutter) * 0.333);
  padding-right: calc(var(--gutter) * 0.333);
}

.grid__gutter--1-4 {
  margin-left: calc(var(--gutter) * -0.25);
  margin-right: calc(var(--gutter) * -0.25);
}
.grid__gutter--1-4 > * {
  padding-left: calc(var(--gutter) * 0.25);
  padding-right: calc(var(--gutter) * 0.25);
}

.row__row--12 {
  min-height: calc(var(--vh) * 100 / 12 * 12);
}

.row__row--11 {
  min-height: calc(var(--vh) * 100 / 12 * 11);
}

.row__row--10 {
  min-height: calc(var(--vh) * 100 / 12 * 10);
}

.row__row--9 {
  min-height: calc(var(--vh) * 100 / 12 * 9);
}

.row__row--8 {
  min-height: calc(var(--vh) * 100 / 12 * 8);
}

.row__row--7 {
  min-height: calc(var(--vh) * 100 / 12 * 7);
}

.row__row--6 {
  min-height: calc(var(--vh) * 100 / 12 * 6);
}

.row__row--5 {
  min-height: calc(var(--vh) * 100 / 12 * 5);
}

.row__row--4 {
  min-height: calc(var(--vh) * 100 / 12 * 4);
}

.row__row--3 {
  min-height: calc(var(--vh) * 100 / 12 * 3);
}

.row__row--2 {
  min-height: calc(var(--vh) * 100 / 12 * 2);
}

.row__row--1 {
  min-height: calc(var(--vh) * 100 / 12 * 1);
}

.col__col--12 {
  flex: 0 0 calc(100% * 12 / 12);
  max-width: calc(100% * 12 / 12);
}

.col__col--11 {
  flex: 0 0 calc(100% * 11 / 12);
  max-width: calc(100% * 11 / 12);
}

.col__col--10 {
  flex: 0 0 calc(100% * 10 / 12);
  max-width: calc(100% * 10 / 12);
}

.col__col--9 {
  flex: 0 0 calc(100% * 9 / 12);
  max-width: calc(100% * 9 / 12);
}

.col__col--8 {
  flex: 0 0 calc(100% * 8 / 12);
  max-width: calc(100% * 8 / 12);
}

.col__col--7 {
  flex: 0 0 calc(100% * 7 / 12);
  max-width: calc(100% * 7 / 12);
}

.col__col--6 {
  flex: 0 0 calc(100% * 6 / 12);
  max-width: calc(100% * 6 / 12);
}

.col__col--5 {
  flex: 0 0 calc(100% * 5 / 12);
  max-width: calc(100% * 5 / 12);
}

.col__col--4 {
  flex: 0 0 calc(100% * 4 / 12);
  max-width: calc(100% * 4 / 12);
}

.col__col--3 {
  flex: 0 0 calc(100% * 3 / 12);
  max-width: calc(100% * 3 / 12);
}

.col__col--2 {
  flex: 0 0 calc(100% * 2 / 12);
  max-width: calc(100% * 2 / 12);
}

.col__col--1 {
  flex: 0 0 calc(100% * 1 / 12);
  max-width: calc(100% * 1 / 12);
}

.flex__row, .flex__column {
  display: flex;
  flex-wrap: wrap;
}
.flex__row > *, .flex__column > * {
  flex-grow: 0;
}

.flex__row {
  flex-direction: row;
}

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

.flex__column {
  flex-direction: column;
}

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

.flex__nowrap {
  flex-wrap: nowrap;
}

.flex__wrap {
  flex-wrap: wrap;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

.flex__align-self--selfstart {
  align-self: self-start;
}

.flex__align-self--selfend {
  align-self: self-end;
}

.flex__justify-self--center {
  justify-self: center;
}

.flex__justify-self--start {
  justify-self: flex-start;
}

.flex__justify-self--end {
  justify-self: flex-end;
}

.flex__justify-self--stretch {
  justify-self: stretch;
}

.flex__justify-self--selfstart {
  justify-self: self-start;
}

.flex__justify-self--selfend {
  justify-self: self-end;
}

.flex__justify-self--left {
  justify-self: left;
}

.flex__justify-self--right {
  justify-self: right;
}

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

.flex__flex-grow--2 {
  flex-grow: 2;
}

.flex__flex-grow--3 {
  flex-grow: 3;
}

.flex__flex-grow--4 {
  flex-grow: 4;
}

.flex__flex-grow--5 {
  flex-grow: 5;
}

.flex__flex-grow--6 {
  flex-grow: 6;
}

.flex__flex-grow--7 {
  flex-grow: 7;
}

.flex__flex-grow--8 {
  flex-grow: 8;
}

.flex__flex-grow--9 {
  flex-grow: 9;
}

.flex__flex-grow--10 {
  flex-grow: 10;
}

.display__flex {
  display: flex;
}

.display__inline {
  display: inline;
}

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

.display__block {
  display: block;
}

.position__absolute {
  position: absolute;
}

.position__fixed {
  position: fixed;
}

.position__inherit {
  position: inherit;
}

.position__relative {
  position: relative;
}

.position__sticky {
  position: sticky;
}

.position__top--0 {
  top: 0;
}

.position__top--inherit {
  top: inherit;
}

.position__left--0 {
  left: 0;
}

.position__left--inherit {
  left: inherit;
}

.position__right--0 {
  right: 0;
}

.position__right--inherit {
  right: inherit;
}

.position__bottom--0 {
  bottom: 0;
}

.position__bottom--inherit {
  bottom: inherit;
}

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

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

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

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

.font-primary {
  font-family: var(--font-primary);
}

.font-secondary {
  font-family: var(--font-secondary);
}

.font-title {
  font-family: var(--font-title);
}

.font-mono {
  font-family: var(--font-mono);
}

.light {
  font-weight: 300;
}

.regular {
  font-weight: 400;
}

.medium {
  font-weight: 500;
}

.semibold {
  font-weight: 600;
}

.bold {
  font-weight: 700;
}

.extrabold {
  font-weight: 800;
}

.black {
  font-weight: 900;
}

@media (min-width: 0px) and (max-width: 1200px) {
  .xs-m-1-1 {
    margin: calc(var(--spacer) / 1);
  }
  .xs-mt-1-1 {
    margin-top: calc(var(--spacer) / 1);
  }
  .xs-mb-1-1 {
    margin-bottom: calc(var(--spacer) / 1);
  }
  .xs-ml-1-1 {
    margin-left: calc(var(--spacer) / 1);
  }
  .xs-mr-1-1 {
    margin-right: calc(var(--spacer) / 1);
  }
  .xs-mx-1-1 {
    margin-left: calc(var(--spacer) / 1);
    margin-right: calc(var(--spacer) / 1);
  }
  .xs-my-1-1 {
    margin-top: calc(var(--spacer) / 1);
    margin-bottom: calc(var(--spacer) / 1);
  }
  .xs-p-1-1 {
    padding: calc(var(--spacer) / 1);
  }
  .xs-pt-1-1 {
    padding-top: calc(var(--spacer) / 1);
  }
  .xs-pb-1-1 {
    padding-bottom: calc(var(--spacer) / 1);
  }
  .xs-pl-1-1 {
    padding-left: calc(var(--spacer) / 1);
  }
  .xs-pr-1-1 {
    padding-right: calc(var(--spacer) / 1);
  }
  .xs-px-1-1 {
    padding-left: calc(var(--spacer) / 1);
    padding-right: calc(var(--spacer) / 1);
  }
  .xs-py-1-1 {
    padding-top: calc(var(--spacer) / 1);
    padding-bottom: calc(var(--spacer) / 1);
  }
  .xs-h-1-1 {
    height: calc(var(--spacer) / 1);
  }
  .xs-w-1-1 {
    width: calc(var(--spacer) / 1);
  }
  .xs-m-1-2 {
    margin: calc(var(--spacer) / 2);
  }
  .xs-mt-1-2 {
    margin-top: calc(var(--spacer) / 2);
  }
  .xs-mb-1-2 {
    margin-bottom: calc(var(--spacer) / 2);
  }
  .xs-ml-1-2 {
    margin-left: calc(var(--spacer) / 2);
  }
  .xs-mr-1-2 {
    margin-right: calc(var(--spacer) / 2);
  }
  .xs-mx-1-2 {
    margin-left: calc(var(--spacer) / 2);
    margin-right: calc(var(--spacer) / 2);
  }
  .xs-my-1-2 {
    margin-top: calc(var(--spacer) / 2);
    margin-bottom: calc(var(--spacer) / 2);
  }
  .xs-p-1-2 {
    padding: calc(var(--spacer) / 2);
  }
  .xs-pt-1-2 {
    padding-top: calc(var(--spacer) / 2);
  }
  .xs-pb-1-2 {
    padding-bottom: calc(var(--spacer) / 2);
  }
  .xs-pl-1-2 {
    padding-left: calc(var(--spacer) / 2);
  }
  .xs-pr-1-2 {
    padding-right: calc(var(--spacer) / 2);
  }
  .xs-px-1-2 {
    padding-left: calc(var(--spacer) / 2);
    padding-right: calc(var(--spacer) / 2);
  }
  .xs-py-1-2 {
    padding-top: calc(var(--spacer) / 2);
    padding-bottom: calc(var(--spacer) / 2);
  }
  .xs-h-1-2 {
    height: calc(var(--spacer) / 2);
  }
  .xs-w-1-2 {
    width: calc(var(--spacer) / 2);
  }
  .xs-m-1-3 {
    margin: calc(var(--spacer) / 3);
  }
  .xs-mt-1-3 {
    margin-top: calc(var(--spacer) / 3);
  }
  .xs-mb-1-3 {
    margin-bottom: calc(var(--spacer) / 3);
  }
  .xs-ml-1-3 {
    margin-left: calc(var(--spacer) / 3);
  }
  .xs-mr-1-3 {
    margin-right: calc(var(--spacer) / 3);
  }
  .xs-mx-1-3 {
    margin-left: calc(var(--spacer) / 3);
    margin-right: calc(var(--spacer) / 3);
  }
  .xs-my-1-3 {
    margin-top: calc(var(--spacer) / 3);
    margin-bottom: calc(var(--spacer) / 3);
  }
  .xs-p-1-3 {
    padding: calc(var(--spacer) / 3);
  }
  .xs-pt-1-3 {
    padding-top: calc(var(--spacer) / 3);
  }
  .xs-pb-1-3 {
    padding-bottom: calc(var(--spacer) / 3);
  }
  .xs-pl-1-3 {
    padding-left: calc(var(--spacer) / 3);
  }
  .xs-pr-1-3 {
    padding-right: calc(var(--spacer) / 3);
  }
  .xs-px-1-3 {
    padding-left: calc(var(--spacer) / 3);
    padding-right: calc(var(--spacer) / 3);
  }
  .xs-py-1-3 {
    padding-top: calc(var(--spacer) / 3);
    padding-bottom: calc(var(--spacer) / 3);
  }
  .xs-h-1-3 {
    height: calc(var(--spacer) / 3);
  }
  .xs-w-1-3 {
    width: calc(var(--spacer) / 3);
  }
  .xs-m-1-4 {
    margin: calc(var(--spacer) / 4);
  }
  .xs-mt-1-4 {
    margin-top: calc(var(--spacer) / 4);
  }
  .xs-mb-1-4 {
    margin-bottom: calc(var(--spacer) / 4);
  }
  .xs-ml-1-4 {
    margin-left: calc(var(--spacer) / 4);
  }
  .xs-mr-1-4 {
    margin-right: calc(var(--spacer) / 4);
  }
  .xs-mx-1-4 {
    margin-left: calc(var(--spacer) / 4);
    margin-right: calc(var(--spacer) / 4);
  }
  .xs-my-1-4 {
    margin-top: calc(var(--spacer) / 4);
    margin-bottom: calc(var(--spacer) / 4);
  }
  .xs-p-1-4 {
    padding: calc(var(--spacer) / 4);
  }
  .xs-pt-1-4 {
    padding-top: calc(var(--spacer) / 4);
  }
  .xs-pb-1-4 {
    padding-bottom: calc(var(--spacer) / 4);
  }
  .xs-pl-1-4 {
    padding-left: calc(var(--spacer) / 4);
  }
  .xs-pr-1-4 {
    padding-right: calc(var(--spacer) / 4);
  }
  .xs-px-1-4 {
    padding-left: calc(var(--spacer) / 4);
    padding-right: calc(var(--spacer) / 4);
  }
  .xs-py-1-4 {
    padding-top: calc(var(--spacer) / 4);
    padding-bottom: calc(var(--spacer) / 4);
  }
  .xs-h-1-4 {
    height: calc(var(--spacer) / 4);
  }
  .xs-w-1-4 {
    width: calc(var(--spacer) / 4);
  }
  .xs-m-1-5 {
    margin: calc(var(--spacer) / 5);
  }
  .xs-mt-1-5 {
    margin-top: calc(var(--spacer) / 5);
  }
  .xs-mb-1-5 {
    margin-bottom: calc(var(--spacer) / 5);
  }
  .xs-ml-1-5 {
    margin-left: calc(var(--spacer) / 5);
  }
  .xs-mr-1-5 {
    margin-right: calc(var(--spacer) / 5);
  }
  .xs-mx-1-5 {
    margin-left: calc(var(--spacer) / 5);
    margin-right: calc(var(--spacer) / 5);
  }
  .xs-my-1-5 {
    margin-top: calc(var(--spacer) / 5);
    margin-bottom: calc(var(--spacer) / 5);
  }
  .xs-p-1-5 {
    padding: calc(var(--spacer) / 5);
  }
  .xs-pt-1-5 {
    padding-top: calc(var(--spacer) / 5);
  }
  .xs-pb-1-5 {
    padding-bottom: calc(var(--spacer) / 5);
  }
  .xs-pl-1-5 {
    padding-left: calc(var(--spacer) / 5);
  }
  .xs-pr-1-5 {
    padding-right: calc(var(--spacer) / 5);
  }
  .xs-px-1-5 {
    padding-left: calc(var(--spacer) / 5);
    padding-right: calc(var(--spacer) / 5);
  }
  .xs-py-1-5 {
    padding-top: calc(var(--spacer) / 5);
    padding-bottom: calc(var(--spacer) / 5);
  }
  .xs-h-1-5 {
    height: calc(var(--spacer) / 5);
  }
  .xs-w-1-5 {
    width: calc(var(--spacer) / 5);
  }
  .xs-m-1-6 {
    margin: calc(var(--spacer) / 6);
  }
  .xs-mt-1-6 {
    margin-top: calc(var(--spacer) / 6);
  }
  .xs-mb-1-6 {
    margin-bottom: calc(var(--spacer) / 6);
  }
  .xs-ml-1-6 {
    margin-left: calc(var(--spacer) / 6);
  }
  .xs-mr-1-6 {
    margin-right: calc(var(--spacer) / 6);
  }
  .xs-mx-1-6 {
    margin-left: calc(var(--spacer) / 6);
    margin-right: calc(var(--spacer) / 6);
  }
  .xs-my-1-6 {
    margin-top: calc(var(--spacer) / 6);
    margin-bottom: calc(var(--spacer) / 6);
  }
  .xs-p-1-6 {
    padding: calc(var(--spacer) / 6);
  }
  .xs-pt-1-6 {
    padding-top: calc(var(--spacer) / 6);
  }
  .xs-pb-1-6 {
    padding-bottom: calc(var(--spacer) / 6);
  }
  .xs-pl-1-6 {
    padding-left: calc(var(--spacer) / 6);
  }
  .xs-pr-1-6 {
    padding-right: calc(var(--spacer) / 6);
  }
  .xs-px-1-6 {
    padding-left: calc(var(--spacer) / 6);
    padding-right: calc(var(--spacer) / 6);
  }
  .xs-py-1-6 {
    padding-top: calc(var(--spacer) / 6);
    padding-bottom: calc(var(--spacer) / 6);
  }
  .xs-h-1-6 {
    height: calc(var(--spacer) / 6);
  }
  .xs-w-1-6 {
    width: calc(var(--spacer) / 6);
  }
  .xs-m-1-7 {
    margin: calc(var(--spacer) / 7);
  }
  .xs-mt-1-7 {
    margin-top: calc(var(--spacer) / 7);
  }
  .xs-mb-1-7 {
    margin-bottom: calc(var(--spacer) / 7);
  }
  .xs-ml-1-7 {
    margin-left: calc(var(--spacer) / 7);
  }
  .xs-mr-1-7 {
    margin-right: calc(var(--spacer) / 7);
  }
  .xs-mx-1-7 {
    margin-left: calc(var(--spacer) / 7);
    margin-right: calc(var(--spacer) / 7);
  }
  .xs-my-1-7 {
    margin-top: calc(var(--spacer) / 7);
    margin-bottom: calc(var(--spacer) / 7);
  }
  .xs-p-1-7 {
    padding: calc(var(--spacer) / 7);
  }
  .xs-pt-1-7 {
    padding-top: calc(var(--spacer) / 7);
  }
  .xs-pb-1-7 {
    padding-bottom: calc(var(--spacer) / 7);
  }
  .xs-pl-1-7 {
    padding-left: calc(var(--spacer) / 7);
  }
  .xs-pr-1-7 {
    padding-right: calc(var(--spacer) / 7);
  }
  .xs-px-1-7 {
    padding-left: calc(var(--spacer) / 7);
    padding-right: calc(var(--spacer) / 7);
  }
  .xs-py-1-7 {
    padding-top: calc(var(--spacer) / 7);
    padding-bottom: calc(var(--spacer) / 7);
  }
  .xs-h-1-7 {
    height: calc(var(--spacer) / 7);
  }
  .xs-w-1-7 {
    width: calc(var(--spacer) / 7);
  }
  .xs-m-2-1 {
    margin: calc(var(--spacer) * 2);
  }
  .xs-mt-2-1 {
    margin-top: calc(var(--spacer) * 2);
  }
  .xs-mb-2-1 {
    margin-bottom: calc(var(--spacer) * 2);
  }
  .xs-ml-2-1 {
    margin-left: calc(var(--spacer) * 2);
  }
  .xs-mr-2-1 {
    margin-right: calc(var(--spacer) * 2);
  }
  .xs-mx-2-1 {
    margin-left: calc(var(--spacer) * 2);
    margin-right: calc(var(--spacer) * 2);
  }
  .xs-my-2-1 {
    margin-top: calc(var(--spacer) * 2);
    margin-bottom: calc(var(--spacer) * 2);
  }
  .xs-p-2-1 {
    padding: calc(var(--spacer) * 2);
  }
  .xs-pt-2-1 {
    padding-top: calc(var(--spacer) * 2);
  }
  .xs-pb-2-1 {
    padding-bottom: calc(var(--spacer) * 2);
  }
  .xs-pl-2-1 {
    padding-left: calc(var(--spacer) * 2);
  }
  .xs-pr-2-1 {
    padding-right: calc(var(--spacer) * 2);
  }
  .xs-px-2-1 {
    padding-left: calc(var(--spacer) * 2);
    padding-right: calc(var(--spacer) * 2);
  }
  .xs-py-2-1 {
    padding-top: calc(var(--spacer) * 2);
    padding-bottom: calc(var(--spacer) * 2);
  }
  .xs-h-2-1 {
    height: calc(var(--spacer) * 2);
  }
  .xs-w-2-1 {
    width: calc(var(--spacer) * 2);
  }
  .xs-m-3-1 {
    margin: calc(var(--spacer) * 3);
  }
  .xs-mt-3-1 {
    margin-top: calc(var(--spacer) * 3);
  }
  .xs-mb-3-1 {
    margin-bottom: calc(var(--spacer) * 3);
  }
  .xs-ml-3-1 {
    margin-left: calc(var(--spacer) * 3);
  }
  .xs-mr-3-1 {
    margin-right: calc(var(--spacer) * 3);
  }
  .xs-mx-3-1 {
    margin-left: calc(var(--spacer) * 3);
    margin-right: calc(var(--spacer) * 3);
  }
  .xs-my-3-1 {
    margin-top: calc(var(--spacer) * 3);
    margin-bottom: calc(var(--spacer) * 3);
  }
  .xs-p-3-1 {
    padding: calc(var(--spacer) * 3);
  }
  .xs-pt-3-1 {
    padding-top: calc(var(--spacer) * 3);
  }
  .xs-pb-3-1 {
    padding-bottom: calc(var(--spacer) * 3);
  }
  .xs-pl-3-1 {
    padding-left: calc(var(--spacer) * 3);
  }
  .xs-pr-3-1 {
    padding-right: calc(var(--spacer) * 3);
  }
  .xs-px-3-1 {
    padding-left: calc(var(--spacer) * 3);
    padding-right: calc(var(--spacer) * 3);
  }
  .xs-py-3-1 {
    padding-top: calc(var(--spacer) * 3);
    padding-bottom: calc(var(--spacer) * 3);
  }
  .xs-h-3-1 {
    height: calc(var(--spacer) * 3);
  }
  .xs-w-3-1 {
    width: calc(var(--spacer) * 3);
  }
  .xs-m-4-1 {
    margin: calc(var(--spacer) * 4);
  }
  .xs-mt-4-1 {
    margin-top: calc(var(--spacer) * 4);
  }
  .xs-mb-4-1 {
    margin-bottom: calc(var(--spacer) * 4);
  }
  .xs-ml-4-1 {
    margin-left: calc(var(--spacer) * 4);
  }
  .xs-mr-4-1 {
    margin-right: calc(var(--spacer) * 4);
  }
  .xs-mx-4-1 {
    margin-left: calc(var(--spacer) * 4);
    margin-right: calc(var(--spacer) * 4);
  }
  .xs-my-4-1 {
    margin-top: calc(var(--spacer) * 4);
    margin-bottom: calc(var(--spacer) * 4);
  }
  .xs-p-4-1 {
    padding: calc(var(--spacer) * 4);
  }
  .xs-pt-4-1 {
    padding-top: calc(var(--spacer) * 4);
  }
  .xs-pb-4-1 {
    padding-bottom: calc(var(--spacer) * 4);
  }
  .xs-pl-4-1 {
    padding-left: calc(var(--spacer) * 4);
  }
  .xs-pr-4-1 {
    padding-right: calc(var(--spacer) * 4);
  }
  .xs-px-4-1 {
    padding-left: calc(var(--spacer) * 4);
    padding-right: calc(var(--spacer) * 4);
  }
  .xs-py-4-1 {
    padding-top: calc(var(--spacer) * 4);
    padding-bottom: calc(var(--spacer) * 4);
  }
  .xs-h-4-1 {
    height: calc(var(--spacer) * 4);
  }
  .xs-w-4-1 {
    width: calc(var(--spacer) * 4);
  }
  .xs-m-0 {
    margin: 0;
  }
  .xs-mt-0 {
    margin-top: 0;
  }
  .xs-mb-0 {
    margin-bottom: 0;
  }
  .xs-ml-0 {
    margin-left: 0;
  }
  .xs-mr-0 {
    margin-right: 0;
  }
  .xs-mx-0 {
    margin-left: 0;
    margin-right: 0;
  }
  .xs-my-0 {
    margin-top: 0;
    margin-bottom: 0;
  }
  .xs-p-0 {
    padding: 0;
  }
  .xs-pt-0 {
    padding-top: 0;
  }
  .xs-pb-0 {
    padding-bottom: 0;
  }
  .xs-pl-0 {
    padding-left: 0;
  }
  .xs-pr-0 {
    padding-right: 0;
  }
  .xs-px-0 {
    padding-left: 0;
    padding-right: 0;
  }
  .xs-py-0 {
    padding-top: 0;
    padding-bottom: 0;
  }
  .xs-h-0 {
    height: 0;
  }
  .xs-w-0 {
    width: 0;
  }
  .xs-grid__gutter--3-1 {
    margin-left: calc(var(--gutter) * -3);
    margin-right: calc(var(--gutter) * -3);
  }
  .xs-grid__gutter--3-1 > * {
    padding-left: calc(var(--gutter) * 3);
    padding-right: calc(var(--gutter) * 3);
  }
  .xs-grid__gutter--2-1 {
    margin-left: calc(var(--gutter) * -2);
    margin-right: calc(var(--gutter) * -2);
  }
  .xs-grid__gutter--2-1 > * {
    padding-left: calc(var(--gutter) * 2);
    padding-right: calc(var(--gutter) * 2);
  }
  .xs-grid__gutter {
    margin-left: calc(var(--gutter) * -1);
    margin-right: calc(var(--gutter) * -1);
  }
  .xs-grid__gutter > * {
    padding-left: calc(var(--gutter) * 1);
    padding-right: calc(var(--gutter) * 1);
  }
  .xs-grid__gutter--1-2 {
    margin-left: calc(var(--gutter) * -0.5);
    margin-right: calc(var(--gutter) * -0.5);
  }
  .xs-grid__gutter--1-2 > * {
    padding-left: calc(var(--gutter) * 0.5);
    padding-right: calc(var(--gutter) * 0.5);
  }
  .xs-grid__gutter--1-3 {
    margin-left: calc(var(--gutter) * -0.333);
    margin-right: calc(var(--gutter) * -0.333);
  }
  .xs-grid__gutter--1-3 > * {
    padding-left: calc(var(--gutter) * 0.333);
    padding-right: calc(var(--gutter) * 0.333);
  }
  .xs-grid__gutter--1-4 {
    margin-left: calc(var(--gutter) * -0.25);
    margin-right: calc(var(--gutter) * -0.25);
  }
  .xs-grid__gutter--1-4 > * {
    padding-left: calc(var(--gutter) * 0.25);
    padding-right: calc(var(--gutter) * 0.25);
  }
  .xs-row__row--12 {
    min-height: calc(var(--vh) * 100 / 12 * 12);
  }
  .xs-row__row--11 {
    min-height: calc(var(--vh) * 100 / 12 * 11);
  }
  .xs-row__row--10 {
    min-height: calc(var(--vh) * 100 / 12 * 10);
  }
  .xs-row__row--9 {
    min-height: calc(var(--vh) * 100 / 12 * 9);
  }
  .xs-row__row--8 {
    min-height: calc(var(--vh) * 100 / 12 * 8);
  }
  .xs-row__row--7 {
    min-height: calc(var(--vh) * 100 / 12 * 7);
  }
  .xs-row__row--6 {
    min-height: calc(var(--vh) * 100 / 12 * 6);
  }
  .xs-row__row--5 {
    min-height: calc(var(--vh) * 100 / 12 * 5);
  }
  .xs-row__row--4 {
    min-height: calc(var(--vh) * 100 / 12 * 4);
  }
  .xs-row__row--3 {
    min-height: calc(var(--vh) * 100 / 12 * 3);
  }
  .xs-row__row--2 {
    min-height: calc(var(--vh) * 100 / 12 * 2);
  }
  .xs-row__row--1 {
    min-height: calc(var(--vh) * 100 / 12 * 1);
  }
  .xs-col__col--12 {
    flex: 0 0 calc(100% * 12 / 12);
    max-width: calc(100% * 12 / 12);
  }
  .xs-col__col--11 {
    flex: 0 0 calc(100% * 11 / 12);
    max-width: calc(100% * 11 / 12);
  }
  .xs-col__col--10 {
    flex: 0 0 calc(100% * 10 / 12);
    max-width: calc(100% * 10 / 12);
  }
  .xs-col__col--9 {
    flex: 0 0 calc(100% * 9 / 12);
    max-width: calc(100% * 9 / 12);
  }
  .xs-col__col--8 {
    flex: 0 0 calc(100% * 8 / 12);
    max-width: calc(100% * 8 / 12);
  }
  .xs-col__col--7 {
    flex: 0 0 calc(100% * 7 / 12);
    max-width: calc(100% * 7 / 12);
  }
  .xs-col__col--6 {
    flex: 0 0 calc(100% * 6 / 12);
    max-width: calc(100% * 6 / 12);
  }
  .xs-col__col--5 {
    flex: 0 0 calc(100% * 5 / 12);
    max-width: calc(100% * 5 / 12);
  }
  .xs-col__col--4 {
    flex: 0 0 calc(100% * 4 / 12);
    max-width: calc(100% * 4 / 12);
  }
  .xs-col__col--3 {
    flex: 0 0 calc(100% * 3 / 12);
    max-width: calc(100% * 3 / 12);
  }
  .xs-col__col--2 {
    flex: 0 0 calc(100% * 2 / 12);
    max-width: calc(100% * 2 / 12);
  }
  .xs-col__col--1 {
    flex: 0 0 calc(100% * 1 / 12);
    max-width: calc(100% * 1 / 12);
  }
  .xs-flex__row, .xs-flex__column {
    display: flex;
    flex-wrap: wrap;
  }
  .xs-flex__row > *, .xs-flex__column > * {
    flex-grow: 0;
  }
  .xs-flex__row {
    flex-direction: row;
  }
  .xs-flex__row-reverse {
    flex-direction: row-reverse;
  }
  .xs-flex__column {
    flex-direction: column;
  }
  .xs-flex__column-reverse {
    flex-direction: column-reverse;
  }
  .xs-flex__nowrap {
    flex-wrap: nowrap;
  }
  .xs-flex__wrap {
    flex-wrap: wrap;
  }
  .xs-flex__align-items--center {
    align-items: center;
  }
  .xs-flex__align-items--start {
    align-items: flex-start;
  }
  .xs-flex__align-items--end {
    align-items: flex-end;
  }
  .xs-flex__align-items--stretch {
    align-items: stretch;
  }
  .xs-flex__justify-content--center {
    justify-content: center;
  }
  .xs-flex__justify-content--start {
    justify-content: flex-start;
  }
  .xs-flex__justify-content--end {
    justify-content: flex-end;
  }
  .xs-flex__justify-content--spacein {
    justify-content: space-between;
  }
  .xs-flex__justify-content--spaceout {
    justify-content: space-around;
  }
  .xs-flex__align-self--center {
    align-self: center;
  }
  .xs-flex__align-self--start {
    align-self: flex-start;
  }
  .xs-flex__align-self--end {
    align-self: flex-end;
  }
  .xs-flex__align-self--stretch {
    align-self: stretch;
  }
  .xs-flex__align-self--selfstart {
    align-self: self-start;
  }
  .xs-flex__align-self--selfend {
    align-self: self-end;
  }
  .xs-flex__justify-self--center {
    justify-self: center;
  }
  .xs-flex__justify-self--start {
    justify-self: flex-start;
  }
  .xs-flex__justify-self--end {
    justify-self: flex-end;
  }
  .xs-flex__justify-self--stretch {
    justify-self: stretch;
  }
  .xs-flex__justify-self--selfstart {
    justify-self: self-start;
  }
  .xs-flex__justify-self--selfend {
    justify-self: self-end;
  }
  .xs-flex__justify-self--left {
    justify-self: left;
  }
  .xs-flex__justify-self--right {
    justify-self: right;
  }
  .xs-flex__flex-grow--1 {
    flex-grow: 1;
  }
  .xs-flex__flex-grow--2 {
    flex-grow: 2;
  }
  .xs-flex__flex-grow--3 {
    flex-grow: 3;
  }
  .xs-flex__flex-grow--4 {
    flex-grow: 4;
  }
  .xs-flex__flex-grow--5 {
    flex-grow: 5;
  }
  .xs-flex__flex-grow--6 {
    flex-grow: 6;
  }
  .xs-flex__flex-grow--7 {
    flex-grow: 7;
  }
  .xs-flex__flex-grow--8 {
    flex-grow: 8;
  }
  .xs-flex__flex-grow--9 {
    flex-grow: 9;
  }
  .xs-flex__flex-grow--10 {
    flex-grow: 10;
  }
  .xs-display__flex {
    display: flex;
  }
  .xs-display__inline {
    display: inline;
  }
  .xs-display__inline-block {
    display: inline-block;
  }
  .xs-display__block {
    display: block;
  }
  .xs-position__absolute {
    position: absolute;
  }
  .xs-position__fixed {
    position: fixed;
  }
  .xs-position__inherit {
    position: inherit;
  }
  .xs-position__relative {
    position: relative;
  }
  .xs-position__sticky {
    position: sticky;
  }
  .xs-position__top--0 {
    top: 0;
  }
  .xs-position__top--inherit {
    top: inherit;
  }
  .xs-position__left--0 {
    left: 0;
  }
  .xs-position__left--inherit {
    left: inherit;
  }
  .xs-position__right--0 {
    right: 0;
  }
  .xs-position__right--inherit {
    right: inherit;
  }
  .xs-position__bottom--0 {
    bottom: 0;
  }
  .xs-position__bottom--inherit {
    bottom: inherit;
  }
  [xs*=text-center] {
    text-align: center;
  }
  [xs*=text-left] {
    text-align: left;
  }
  [xs*=text-right] {
    text-align: right;
  }
  [xs*=text-justify] {
    text-align: justify;
  }
}
@media (min-width: 0px) and (max-width: 1200px) and (orientation:landscape) {
  .xs-l-m-1-1 {
    margin: calc(var(--spacer) / 1);
  }
  .xs-l-mt-1-1 {
    margin-top: calc(var(--spacer) / 1);
  }
  .xs-l-mb-1-1 {
    margin-bottom: calc(var(--spacer) / 1);
  }
  .xs-l-ml-1-1 {
    margin-left: calc(var(--spacer) / 1);
  }
  .xs-l-mr-1-1 {
    margin-right: calc(var(--spacer) / 1);
  }
  .xs-l-mx-1-1 {
    margin-left: calc(var(--spacer) / 1);
    margin-right: calc(var(--spacer) / 1);
  }
  .xs-l-my-1-1 {
    margin-top: calc(var(--spacer) / 1);
    margin-bottom: calc(var(--spacer) / 1);
  }
  .xs-l-p-1-1 {
    padding: calc(var(--spacer) / 1);
  }
  .xs-l-pt-1-1 {
    padding-top: calc(var(--spacer) / 1);
  }
  .xs-l-pb-1-1 {
    padding-bottom: calc(var(--spacer) / 1);
  }
  .xs-l-pl-1-1 {
    padding-left: calc(var(--spacer) / 1);
  }
  .xs-l-pr-1-1 {
    padding-right: calc(var(--spacer) / 1);
  }
  .xs-l-px-1-1 {
    padding-left: calc(var(--spacer) / 1);
    padding-right: calc(var(--spacer) / 1);
  }
  .xs-l-py-1-1 {
    padding-top: calc(var(--spacer) / 1);
    padding-bottom: calc(var(--spacer) / 1);
  }
  .xs-l-h-1-1 {
    height: calc(var(--spacer) / 1);
  }
  .xs-l-w-1-1 {
    width: calc(var(--spacer) / 1);
  }
  .xs-l-m-1-2 {
    margin: calc(var(--spacer) / 2);
  }
  .xs-l-mt-1-2 {
    margin-top: calc(var(--spacer) / 2);
  }
  .xs-l-mb-1-2 {
    margin-bottom: calc(var(--spacer) / 2);
  }
  .xs-l-ml-1-2 {
    margin-left: calc(var(--spacer) / 2);
  }
  .xs-l-mr-1-2 {
    margin-right: calc(var(--spacer) / 2);
  }
  .xs-l-mx-1-2 {
    margin-left: calc(var(--spacer) / 2);
    margin-right: calc(var(--spacer) / 2);
  }
  .xs-l-my-1-2 {
    margin-top: calc(var(--spacer) / 2);
    margin-bottom: calc(var(--spacer) / 2);
  }
  .xs-l-p-1-2 {
    padding: calc(var(--spacer) / 2);
  }
  .xs-l-pt-1-2 {
    padding-top: calc(var(--spacer) / 2);
  }
  .xs-l-pb-1-2 {
    padding-bottom: calc(var(--spacer) / 2);
  }
  .xs-l-pl-1-2 {
    padding-left: calc(var(--spacer) / 2);
  }
  .xs-l-pr-1-2 {
    padding-right: calc(var(--spacer) / 2);
  }
  .xs-l-px-1-2 {
    padding-left: calc(var(--spacer) / 2);
    padding-right: calc(var(--spacer) / 2);
  }
  .xs-l-py-1-2 {
    padding-top: calc(var(--spacer) / 2);
    padding-bottom: calc(var(--spacer) / 2);
  }
  .xs-l-h-1-2 {
    height: calc(var(--spacer) / 2);
  }
  .xs-l-w-1-2 {
    width: calc(var(--spacer) / 2);
  }
  .xs-l-m-1-3 {
    margin: calc(var(--spacer) / 3);
  }
  .xs-l-mt-1-3 {
    margin-top: calc(var(--spacer) / 3);
  }
  .xs-l-mb-1-3 {
    margin-bottom: calc(var(--spacer) / 3);
  }
  .xs-l-ml-1-3 {
    margin-left: calc(var(--spacer) / 3);
  }
  .xs-l-mr-1-3 {
    margin-right: calc(var(--spacer) / 3);
  }
  .xs-l-mx-1-3 {
    margin-left: calc(var(--spacer) / 3);
    margin-right: calc(var(--spacer) / 3);
  }
  .xs-l-my-1-3 {
    margin-top: calc(var(--spacer) / 3);
    margin-bottom: calc(var(--spacer) / 3);
  }
  .xs-l-p-1-3 {
    padding: calc(var(--spacer) / 3);
  }
  .xs-l-pt-1-3 {
    padding-top: calc(var(--spacer) / 3);
  }
  .xs-l-pb-1-3 {
    padding-bottom: calc(var(--spacer) / 3);
  }
  .xs-l-pl-1-3 {
    padding-left: calc(var(--spacer) / 3);
  }
  .xs-l-pr-1-3 {
    padding-right: calc(var(--spacer) / 3);
  }
  .xs-l-px-1-3 {
    padding-left: calc(var(--spacer) / 3);
    padding-right: calc(var(--spacer) / 3);
  }
  .xs-l-py-1-3 {
    padding-top: calc(var(--spacer) / 3);
    padding-bottom: calc(var(--spacer) / 3);
  }
  .xs-l-h-1-3 {
    height: calc(var(--spacer) / 3);
  }
  .xs-l-w-1-3 {
    width: calc(var(--spacer) / 3);
  }
  .xs-l-m-1-4 {
    margin: calc(var(--spacer) / 4);
  }
  .xs-l-mt-1-4 {
    margin-top: calc(var(--spacer) / 4);
  }
  .xs-l-mb-1-4 {
    margin-bottom: calc(var(--spacer) / 4);
  }
  .xs-l-ml-1-4 {
    margin-left: calc(var(--spacer) / 4);
  }
  .xs-l-mr-1-4 {
    margin-right: calc(var(--spacer) / 4);
  }
  .xs-l-mx-1-4 {
    margin-left: calc(var(--spacer) / 4);
    margin-right: calc(var(--spacer) / 4);
  }
  .xs-l-my-1-4 {
    margin-top: calc(var(--spacer) / 4);
    margin-bottom: calc(var(--spacer) / 4);
  }
  .xs-l-p-1-4 {
    padding: calc(var(--spacer) / 4);
  }
  .xs-l-pt-1-4 {
    padding-top: calc(var(--spacer) / 4);
  }
  .xs-l-pb-1-4 {
    padding-bottom: calc(var(--spacer) / 4);
  }
  .xs-l-pl-1-4 {
    padding-left: calc(var(--spacer) / 4);
  }
  .xs-l-pr-1-4 {
    padding-right: calc(var(--spacer) / 4);
  }
  .xs-l-px-1-4 {
    padding-left: calc(var(--spacer) / 4);
    padding-right: calc(var(--spacer) / 4);
  }
  .xs-l-py-1-4 {
    padding-top: calc(var(--spacer) / 4);
    padding-bottom: calc(var(--spacer) / 4);
  }
  .xs-l-h-1-4 {
    height: calc(var(--spacer) / 4);
  }
  .xs-l-w-1-4 {
    width: calc(var(--spacer) / 4);
  }
  .xs-l-m-1-5 {
    margin: calc(var(--spacer) / 5);
  }
  .xs-l-mt-1-5 {
    margin-top: calc(var(--spacer) / 5);
  }
  .xs-l-mb-1-5 {
    margin-bottom: calc(var(--spacer) / 5);
  }
  .xs-l-ml-1-5 {
    margin-left: calc(var(--spacer) / 5);
  }
  .xs-l-mr-1-5 {
    margin-right: calc(var(--spacer) / 5);
  }
  .xs-l-mx-1-5 {
    margin-left: calc(var(--spacer) / 5);
    margin-right: calc(var(--spacer) / 5);
  }
  .xs-l-my-1-5 {
    margin-top: calc(var(--spacer) / 5);
    margin-bottom: calc(var(--spacer) / 5);
  }
  .xs-l-p-1-5 {
    padding: calc(var(--spacer) / 5);
  }
  .xs-l-pt-1-5 {
    padding-top: calc(var(--spacer) / 5);
  }
  .xs-l-pb-1-5 {
    padding-bottom: calc(var(--spacer) / 5);
  }
  .xs-l-pl-1-5 {
    padding-left: calc(var(--spacer) / 5);
  }
  .xs-l-pr-1-5 {
    padding-right: calc(var(--spacer) / 5);
  }
  .xs-l-px-1-5 {
    padding-left: calc(var(--spacer) / 5);
    padding-right: calc(var(--spacer) / 5);
  }
  .xs-l-py-1-5 {
    padding-top: calc(var(--spacer) / 5);
    padding-bottom: calc(var(--spacer) / 5);
  }
  .xs-l-h-1-5 {
    height: calc(var(--spacer) / 5);
  }
  .xs-l-w-1-5 {
    width: calc(var(--spacer) / 5);
  }
  .xs-l-m-1-6 {
    margin: calc(var(--spacer) / 6);
  }
  .xs-l-mt-1-6 {
    margin-top: calc(var(--spacer) / 6);
  }
  .xs-l-mb-1-6 {
    margin-bottom: calc(var(--spacer) / 6);
  }
  .xs-l-ml-1-6 {
    margin-left: calc(var(--spacer) / 6);
  }
  .xs-l-mr-1-6 {
    margin-right: calc(var(--spacer) / 6);
  }
  .xs-l-mx-1-6 {
    margin-left: calc(var(--spacer) / 6);
    margin-right: calc(var(--spacer) / 6);
  }
  .xs-l-my-1-6 {
    margin-top: calc(var(--spacer) / 6);
    margin-bottom: calc(var(--spacer) / 6);
  }
  .xs-l-p-1-6 {
    padding: calc(var(--spacer) / 6);
  }
  .xs-l-pt-1-6 {
    padding-top: calc(var(--spacer) / 6);
  }
  .xs-l-pb-1-6 {
    padding-bottom: calc(var(--spacer) / 6);
  }
  .xs-l-pl-1-6 {
    padding-left: calc(var(--spacer) / 6);
  }
  .xs-l-pr-1-6 {
    padding-right: calc(var(--spacer) / 6);
  }
  .xs-l-px-1-6 {
    padding-left: calc(var(--spacer) / 6);
    padding-right: calc(var(--spacer) / 6);
  }
  .xs-l-py-1-6 {
    padding-top: calc(var(--spacer) / 6);
    padding-bottom: calc(var(--spacer) / 6);
  }
  .xs-l-h-1-6 {
    height: calc(var(--spacer) / 6);
  }
  .xs-l-w-1-6 {
    width: calc(var(--spacer) / 6);
  }
  .xs-l-m-1-7 {
    margin: calc(var(--spacer) / 7);
  }
  .xs-l-mt-1-7 {
    margin-top: calc(var(--spacer) / 7);
  }
  .xs-l-mb-1-7 {
    margin-bottom: calc(var(--spacer) / 7);
  }
  .xs-l-ml-1-7 {
    margin-left: calc(var(--spacer) / 7);
  }
  .xs-l-mr-1-7 {
    margin-right: calc(var(--spacer) / 7);
  }
  .xs-l-mx-1-7 {
    margin-left: calc(var(--spacer) / 7);
    margin-right: calc(var(--spacer) / 7);
  }
  .xs-l-my-1-7 {
    margin-top: calc(var(--spacer) / 7);
    margin-bottom: calc(var(--spacer) / 7);
  }
  .xs-l-p-1-7 {
    padding: calc(var(--spacer) / 7);
  }
  .xs-l-pt-1-7 {
    padding-top: calc(var(--spacer) / 7);
  }
  .xs-l-pb-1-7 {
    padding-bottom: calc(var(--spacer) / 7);
  }
  .xs-l-pl-1-7 {
    padding-left: calc(var(--spacer) / 7);
  }
  .xs-l-pr-1-7 {
    padding-right: calc(var(--spacer) / 7);
  }
  .xs-l-px-1-7 {
    padding-left: calc(var(--spacer) / 7);
    padding-right: calc(var(--spacer) / 7);
  }
  .xs-l-py-1-7 {
    padding-top: calc(var(--spacer) / 7);
    padding-bottom: calc(var(--spacer) / 7);
  }
  .xs-l-h-1-7 {
    height: calc(var(--spacer) / 7);
  }
  .xs-l-w-1-7 {
    width: calc(var(--spacer) / 7);
  }
  .xs-l-m-2-1 {
    margin: calc(var(--spacer) * 2);
  }
  .xs-l-mt-2-1 {
    margin-top: calc(var(--spacer) * 2);
  }
  .xs-l-mb-2-1 {
    margin-bottom: calc(var(--spacer) * 2);
  }
  .xs-l-ml-2-1 {
    margin-left: calc(var(--spacer) * 2);
  }
  .xs-l-mr-2-1 {
    margin-right: calc(var(--spacer) * 2);
  }
  .xs-l-mx-2-1 {
    margin-left: calc(var(--spacer) * 2);
    margin-right: calc(var(--spacer) * 2);
  }
  .xs-l-my-2-1 {
    margin-top: calc(var(--spacer) * 2);
    margin-bottom: calc(var(--spacer) * 2);
  }
  .xs-l-p-2-1 {
    padding: calc(var(--spacer) * 2);
  }
  .xs-l-pt-2-1 {
    padding-top: calc(var(--spacer) * 2);
  }
  .xs-l-pb-2-1 {
    padding-bottom: calc(var(--spacer) * 2);
  }
  .xs-l-pl-2-1 {
    padding-left: calc(var(--spacer) * 2);
  }
  .xs-l-pr-2-1 {
    padding-right: calc(var(--spacer) * 2);
  }
  .xs-l-px-2-1 {
    padding-left: calc(var(--spacer) * 2);
    padding-right: calc(var(--spacer) * 2);
  }
  .xs-l-py-2-1 {
    padding-top: calc(var(--spacer) * 2);
    padding-bottom: calc(var(--spacer) * 2);
  }
  .xs-l-h-2-1 {
    height: calc(var(--spacer) * 2);
  }
  .xs-l-w-2-1 {
    width: calc(var(--spacer) * 2);
  }
  .xs-l-m-3-1 {
    margin: calc(var(--spacer) * 3);
  }
  .xs-l-mt-3-1 {
    margin-top: calc(var(--spacer) * 3);
  }
  .xs-l-mb-3-1 {
    margin-bottom: calc(var(--spacer) * 3);
  }
  .xs-l-ml-3-1 {
    margin-left: calc(var(--spacer) * 3);
  }
  .xs-l-mr-3-1 {
    margin-right: calc(var(--spacer) * 3);
  }
  .xs-l-mx-3-1 {
    margin-left: calc(var(--spacer) * 3);
    margin-right: calc(var(--spacer) * 3);
  }
  .xs-l-my-3-1 {
    margin-top: calc(var(--spacer) * 3);
    margin-bottom: calc(var(--spacer) * 3);
  }
  .xs-l-p-3-1 {
    padding: calc(var(--spacer) * 3);
  }
  .xs-l-pt-3-1 {
    padding-top: calc(var(--spacer) * 3);
  }
  .xs-l-pb-3-1 {
    padding-bottom: calc(var(--spacer) * 3);
  }
  .xs-l-pl-3-1 {
    padding-left: calc(var(--spacer) * 3);
  }
  .xs-l-pr-3-1 {
    padding-right: calc(var(--spacer) * 3);
  }
  .xs-l-px-3-1 {
    padding-left: calc(var(--spacer) * 3);
    padding-right: calc(var(--spacer) * 3);
  }
  .xs-l-py-3-1 {
    padding-top: calc(var(--spacer) * 3);
    padding-bottom: calc(var(--spacer) * 3);
  }
  .xs-l-h-3-1 {
    height: calc(var(--spacer) * 3);
  }
  .xs-l-w-3-1 {
    width: calc(var(--spacer) * 3);
  }
  .xs-l-m-4-1 {
    margin: calc(var(--spacer) * 4);
  }
  .xs-l-mt-4-1 {
    margin-top: calc(var(--spacer) * 4);
  }
  .xs-l-mb-4-1 {
    margin-bottom: calc(var(--spacer) * 4);
  }
  .xs-l-ml-4-1 {
    margin-left: calc(var(--spacer) * 4);
  }
  .xs-l-mr-4-1 {
    margin-right: calc(var(--spacer) * 4);
  }
  .xs-l-mx-4-1 {
    margin-left: calc(var(--spacer) * 4);
    margin-right: calc(var(--spacer) * 4);
  }
  .xs-l-my-4-1 {
    margin-top: calc(var(--spacer) * 4);
    margin-bottom: calc(var(--spacer) * 4);
  }
  .xs-l-p-4-1 {
    padding: calc(var(--spacer) * 4);
  }
  .xs-l-pt-4-1 {
    padding-top: calc(var(--spacer) * 4);
  }
  .xs-l-pb-4-1 {
    padding-bottom: calc(var(--spacer) * 4);
  }
  .xs-l-pl-4-1 {
    padding-left: calc(var(--spacer) * 4);
  }
  .xs-l-pr-4-1 {
    padding-right: calc(var(--spacer) * 4);
  }
  .xs-l-px-4-1 {
    padding-left: calc(var(--spacer) * 4);
    padding-right: calc(var(--spacer) * 4);
  }
  .xs-l-py-4-1 {
    padding-top: calc(var(--spacer) * 4);
    padding-bottom: calc(var(--spacer) * 4);
  }
  .xs-l-h-4-1 {
    height: calc(var(--spacer) * 4);
  }
  .xs-l-w-4-1 {
    width: calc(var(--spacer) * 4);
  }
  .xs-l-m-0 {
    margin: 0;
  }
  .xs-l-mt-0 {
    margin-top: 0;
  }
  .xs-l-mb-0 {
    margin-bottom: 0;
  }
  .xs-l-ml-0 {
    margin-left: 0;
  }
  .xs-l-mr-0 {
    margin-right: 0;
  }
  .xs-l-mx-0 {
    margin-left: 0;
    margin-right: 0;
  }
  .xs-l-my-0 {
    margin-top: 0;
    margin-bottom: 0;
  }
  .xs-l-p-0 {
    padding: 0;
  }
  .xs-l-pt-0 {
    padding-top: 0;
  }
  .xs-l-pb-0 {
    padding-bottom: 0;
  }
  .xs-l-pl-0 {
    padding-left: 0;
  }
  .xs-l-pr-0 {
    padding-right: 0;
  }
  .xs-l-px-0 {
    padding-left: 0;
    padding-right: 0;
  }
  .xs-l-py-0 {
    padding-top: 0;
    padding-bottom: 0;
  }
  .xs-l-h-0 {
    height: 0;
  }
  .xs-l-w-0 {
    width: 0;
  }
  .xs-l-grid__gutter--3-1 {
    margin-left: calc(var(--gutter) * -3);
    margin-right: calc(var(--gutter) * -3);
  }
  .xs-l-grid__gutter--3-1 > * {
    padding-left: calc(var(--gutter) * 3);
    padding-right: calc(var(--gutter) * 3);
  }
  .xs-l-grid__gutter--2-1 {
    margin-left: calc(var(--gutter) * -2);
    margin-right: calc(var(--gutter) * -2);
  }
  .xs-l-grid__gutter--2-1 > * {
    padding-left: calc(var(--gutter) * 2);
    padding-right: calc(var(--gutter) * 2);
  }
  .xs-l-grid__gutter {
    margin-left: calc(var(--gutter) * -1);
    margin-right: calc(var(--gutter) * -1);
  }
  .xs-l-grid__gutter > * {
    padding-left: calc(var(--gutter) * 1);
    padding-right: calc(var(--gutter) * 1);
  }
  .xs-l-grid__gutter--1-2 {
    margin-left: calc(var(--gutter) * -0.5);
    margin-right: calc(var(--gutter) * -0.5);
  }
  .xs-l-grid__gutter--1-2 > * {
    padding-left: calc(var(--gutter) * 0.5);
    padding-right: calc(var(--gutter) * 0.5);
  }
  .xs-l-grid__gutter--1-3 {
    margin-left: calc(var(--gutter) * -0.333);
    margin-right: calc(var(--gutter) * -0.333);
  }
  .xs-l-grid__gutter--1-3 > * {
    padding-left: calc(var(--gutter) * 0.333);
    padding-right: calc(var(--gutter) * 0.333);
  }
  .xs-l-grid__gutter--1-4 {
    margin-left: calc(var(--gutter) * -0.25);
    margin-right: calc(var(--gutter) * -0.25);
  }
  .xs-l-grid__gutter--1-4 > * {
    padding-left: calc(var(--gutter) * 0.25);
    padding-right: calc(var(--gutter) * 0.25);
  }
  .xs-l-row__row--12 {
    min-height: calc(var(--vh) * 100 / 12 * 12);
  }
  .xs-l-row__row--11 {
    min-height: calc(var(--vh) * 100 / 12 * 11);
  }
  .xs-l-row__row--10 {
    min-height: calc(var(--vh) * 100 / 12 * 10);
  }
  .xs-l-row__row--9 {
    min-height: calc(var(--vh) * 100 / 12 * 9);
  }
  .xs-l-row__row--8 {
    min-height: calc(var(--vh) * 100 / 12 * 8);
  }
  .xs-l-row__row--7 {
    min-height: calc(var(--vh) * 100 / 12 * 7);
  }
  .xs-l-row__row--6 {
    min-height: calc(var(--vh) * 100 / 12 * 6);
  }
  .xs-l-row__row--5 {
    min-height: calc(var(--vh) * 100 / 12 * 5);
  }
  .xs-l-row__row--4 {
    min-height: calc(var(--vh) * 100 / 12 * 4);
  }
  .xs-l-row__row--3 {
    min-height: calc(var(--vh) * 100 / 12 * 3);
  }
  .xs-l-row__row--2 {
    min-height: calc(var(--vh) * 100 / 12 * 2);
  }
  .xs-l-row__row--1 {
    min-height: calc(var(--vh) * 100 / 12 * 1);
  }
  .xs-l-col__col--12 {
    flex: 0 0 calc(100% * 12 / 12);
    max-width: calc(100% * 12 / 12);
  }
  .xs-l-col__col--11 {
    flex: 0 0 calc(100% * 11 / 12);
    max-width: calc(100% * 11 / 12);
  }
  .xs-l-col__col--10 {
    flex: 0 0 calc(100% * 10 / 12);
    max-width: calc(100% * 10 / 12);
  }
  .xs-l-col__col--9 {
    flex: 0 0 calc(100% * 9 / 12);
    max-width: calc(100% * 9 / 12);
  }
  .xs-l-col__col--8 {
    flex: 0 0 calc(100% * 8 / 12);
    max-width: calc(100% * 8 / 12);
  }
  .xs-l-col__col--7 {
    flex: 0 0 calc(100% * 7 / 12);
    max-width: calc(100% * 7 / 12);
  }
  .xs-l-col__col--6 {
    flex: 0 0 calc(100% * 6 / 12);
    max-width: calc(100% * 6 / 12);
  }
  .xs-l-col__col--5 {
    flex: 0 0 calc(100% * 5 / 12);
    max-width: calc(100% * 5 / 12);
  }
  .xs-l-col__col--4 {
    flex: 0 0 calc(100% * 4 / 12);
    max-width: calc(100% * 4 / 12);
  }
  .xs-l-col__col--3 {
    flex: 0 0 calc(100% * 3 / 12);
    max-width: calc(100% * 3 / 12);
  }
  .xs-l-col__col--2 {
    flex: 0 0 calc(100% * 2 / 12);
    max-width: calc(100% * 2 / 12);
  }
  .xs-l-col__col--1 {
    flex: 0 0 calc(100% * 1 / 12);
    max-width: calc(100% * 1 / 12);
  }
  .xs-l-flex__row, .xs-l-flex__column {
    display: flex;
    flex-wrap: wrap;
  }
  .xs-l-flex__row > *, .xs-l-flex__column > * {
    flex-grow: 0;
  }
  .xs-l-flex__row {
    flex-direction: row;
  }
  .xs-l-flex__row-reverse {
    flex-direction: row-reverse;
  }
  .xs-l-flex__column {
    flex-direction: column;
  }
  .xs-l-flex__column-reverse {
    flex-direction: column-reverse;
  }
  .xs-l-flex__nowrap {
    flex-wrap: nowrap;
  }
  .xs-l-flex__wrap {
    flex-wrap: wrap;
  }
  .xs-l-flex__align-items--center {
    align-items: center;
  }
  .xs-l-flex__align-items--start {
    align-items: flex-start;
  }
  .xs-l-flex__align-items--end {
    align-items: flex-end;
  }
  .xs-l-flex__align-items--stretch {
    align-items: stretch;
  }
  .xs-l-flex__justify-content--center {
    justify-content: center;
  }
  .xs-l-flex__justify-content--start {
    justify-content: flex-start;
  }
  .xs-l-flex__justify-content--end {
    justify-content: flex-end;
  }
  .xs-l-flex__justify-content--spacein {
    justify-content: space-between;
  }
  .xs-l-flex__justify-content--spaceout {
    justify-content: space-around;
  }
  .xs-l-flex__align-self--center {
    align-self: center;
  }
  .xs-l-flex__align-self--start {
    align-self: flex-start;
  }
  .xs-l-flex__align-self--end {
    align-self: flex-end;
  }
  .xs-l-flex__align-self--stretch {
    align-self: stretch;
  }
  .xs-l-flex__align-self--selfstart {
    align-self: self-start;
  }
  .xs-l-flex__align-self--selfend {
    align-self: self-end;
  }
  .xs-l-flex__justify-self--center {
    justify-self: center;
  }
  .xs-l-flex__justify-self--start {
    justify-self: flex-start;
  }
  .xs-l-flex__justify-self--end {
    justify-self: flex-end;
  }
  .xs-l-flex__justify-self--stretch {
    justify-self: stretch;
  }
  .xs-l-flex__justify-self--selfstart {
    justify-self: self-start;
  }
  .xs-l-flex__justify-self--selfend {
    justify-self: self-end;
  }
  .xs-l-flex__justify-self--left {
    justify-self: left;
  }
  .xs-l-flex__justify-self--right {
    justify-self: right;
  }
  .xs-l-flex__flex-grow--1 {
    flex-grow: 1;
  }
  .xs-l-flex__flex-grow--2 {
    flex-grow: 2;
  }
  .xs-l-flex__flex-grow--3 {
    flex-grow: 3;
  }
  .xs-l-flex__flex-grow--4 {
    flex-grow: 4;
  }
  .xs-l-flex__flex-grow--5 {
    flex-grow: 5;
  }
  .xs-l-flex__flex-grow--6 {
    flex-grow: 6;
  }
  .xs-l-flex__flex-grow--7 {
    flex-grow: 7;
  }
  .xs-l-flex__flex-grow--8 {
    flex-grow: 8;
  }
  .xs-l-flex__flex-grow--9 {
    flex-grow: 9;
  }
  .xs-l-flex__flex-grow--10 {
    flex-grow: 10;
  }
  .xs-l-display__flex {
    display: flex;
  }
  .xs-l-display__inline {
    display: inline;
  }
  .xs-l-display__inline-block {
    display: inline-block;
  }
  .xs-l-display__block {
    display: block;
  }
  .xs-l-position__absolute {
    position: absolute;
  }
  .xs-l-position__fixed {
    position: fixed;
  }
  .xs-l-position__inherit {
    position: inherit;
  }
  .xs-l-position__relative {
    position: relative;
  }
  .xs-l-position__sticky {
    position: sticky;
  }
  .xs-l-position__top--0 {
    top: 0;
  }
  .xs-l-position__top--inherit {
    top: inherit;
  }
  .xs-l-position__left--0 {
    left: 0;
  }
  .xs-l-position__left--inherit {
    left: inherit;
  }
  .xs-l-position__right--0 {
    right: 0;
  }
  .xs-l-position__right--inherit {
    right: inherit;
  }
  .xs-l-position__bottom--0 {
    bottom: 0;
  }
  .xs-l-position__bottom--inherit {
    bottom: inherit;
  }
  [xs-l*=text-center] {
    text-align: center;
  }
  [xs-l*=text-left] {
    text-align: left;
  }
  [xs-l*=text-right] {
    text-align: right;
  }
  [xs-l*=text-justify] {
    text-align: justify;
  }
}
@media (min-width: 768px) and (max-width: 1200px) {
  .sm-m-1-1 {
    margin: calc(var(--spacer) / 1);
  }
  .sm-mt-1-1 {
    margin-top: calc(var(--spacer) / 1);
  }
  .sm-mb-1-1 {
    margin-bottom: calc(var(--spacer) / 1);
  }
  .sm-ml-1-1 {
    margin-left: calc(var(--spacer) / 1);
  }
  .sm-mr-1-1 {
    margin-right: calc(var(--spacer) / 1);
  }
  .sm-mx-1-1 {
    margin-left: calc(var(--spacer) / 1);
    margin-right: calc(var(--spacer) / 1);
  }
  .sm-my-1-1 {
    margin-top: calc(var(--spacer) / 1);
    margin-bottom: calc(var(--spacer) / 1);
  }
  .sm-p-1-1 {
    padding: calc(var(--spacer) / 1);
  }
  .sm-pt-1-1 {
    padding-top: calc(var(--spacer) / 1);
  }
  .sm-pb-1-1 {
    padding-bottom: calc(var(--spacer) / 1);
  }
  .sm-pl-1-1 {
    padding-left: calc(var(--spacer) / 1);
  }
  .sm-pr-1-1 {
    padding-right: calc(var(--spacer) / 1);
  }
  .sm-px-1-1 {
    padding-left: calc(var(--spacer) / 1);
    padding-right: calc(var(--spacer) / 1);
  }
  .sm-py-1-1 {
    padding-top: calc(var(--spacer) / 1);
    padding-bottom: calc(var(--spacer) / 1);
  }
  .sm-h-1-1 {
    height: calc(var(--spacer) / 1);
  }
  .sm-w-1-1 {
    width: calc(var(--spacer) / 1);
  }
  .sm-m-1-2 {
    margin: calc(var(--spacer) / 2);
  }
  .sm-mt-1-2 {
    margin-top: calc(var(--spacer) / 2);
  }
  .sm-mb-1-2 {
    margin-bottom: calc(var(--spacer) / 2);
  }
  .sm-ml-1-2 {
    margin-left: calc(var(--spacer) / 2);
  }
  .sm-mr-1-2 {
    margin-right: calc(var(--spacer) / 2);
  }
  .sm-mx-1-2 {
    margin-left: calc(var(--spacer) / 2);
    margin-right: calc(var(--spacer) / 2);
  }
  .sm-my-1-2 {
    margin-top: calc(var(--spacer) / 2);
    margin-bottom: calc(var(--spacer) / 2);
  }
  .sm-p-1-2 {
    padding: calc(var(--spacer) / 2);
  }
  .sm-pt-1-2 {
    padding-top: calc(var(--spacer) / 2);
  }
  .sm-pb-1-2 {
    padding-bottom: calc(var(--spacer) / 2);
  }
  .sm-pl-1-2 {
    padding-left: calc(var(--spacer) / 2);
  }
  .sm-pr-1-2 {
    padding-right: calc(var(--spacer) / 2);
  }
  .sm-px-1-2 {
    padding-left: calc(var(--spacer) / 2);
    padding-right: calc(var(--spacer) / 2);
  }
  .sm-py-1-2 {
    padding-top: calc(var(--spacer) / 2);
    padding-bottom: calc(var(--spacer) / 2);
  }
  .sm-h-1-2 {
    height: calc(var(--spacer) / 2);
  }
  .sm-w-1-2 {
    width: calc(var(--spacer) / 2);
  }
  .sm-m-1-3 {
    margin: calc(var(--spacer) / 3);
  }
  .sm-mt-1-3 {
    margin-top: calc(var(--spacer) / 3);
  }
  .sm-mb-1-3 {
    margin-bottom: calc(var(--spacer) / 3);
  }
  .sm-ml-1-3 {
    margin-left: calc(var(--spacer) / 3);
  }
  .sm-mr-1-3 {
    margin-right: calc(var(--spacer) / 3);
  }
  .sm-mx-1-3 {
    margin-left: calc(var(--spacer) / 3);
    margin-right: calc(var(--spacer) / 3);
  }
  .sm-my-1-3 {
    margin-top: calc(var(--spacer) / 3);
    margin-bottom: calc(var(--spacer) / 3);
  }
  .sm-p-1-3 {
    padding: calc(var(--spacer) / 3);
  }
  .sm-pt-1-3 {
    padding-top: calc(var(--spacer) / 3);
  }
  .sm-pb-1-3 {
    padding-bottom: calc(var(--spacer) / 3);
  }
  .sm-pl-1-3 {
    padding-left: calc(var(--spacer) / 3);
  }
  .sm-pr-1-3 {
    padding-right: calc(var(--spacer) / 3);
  }
  .sm-px-1-3 {
    padding-left: calc(var(--spacer) / 3);
    padding-right: calc(var(--spacer) / 3);
  }
  .sm-py-1-3 {
    padding-top: calc(var(--spacer) / 3);
    padding-bottom: calc(var(--spacer) / 3);
  }
  .sm-h-1-3 {
    height: calc(var(--spacer) / 3);
  }
  .sm-w-1-3 {
    width: calc(var(--spacer) / 3);
  }
  .sm-m-1-4 {
    margin: calc(var(--spacer) / 4);
  }
  .sm-mt-1-4 {
    margin-top: calc(var(--spacer) / 4);
  }
  .sm-mb-1-4 {
    margin-bottom: calc(var(--spacer) / 4);
  }
  .sm-ml-1-4 {
    margin-left: calc(var(--spacer) / 4);
  }
  .sm-mr-1-4 {
    margin-right: calc(var(--spacer) / 4);
  }
  .sm-mx-1-4 {
    margin-left: calc(var(--spacer) / 4);
    margin-right: calc(var(--spacer) / 4);
  }
  .sm-my-1-4 {
    margin-top: calc(var(--spacer) / 4);
    margin-bottom: calc(var(--spacer) / 4);
  }
  .sm-p-1-4 {
    padding: calc(var(--spacer) / 4);
  }
  .sm-pt-1-4 {
    padding-top: calc(var(--spacer) / 4);
  }
  .sm-pb-1-4 {
    padding-bottom: calc(var(--spacer) / 4);
  }
  .sm-pl-1-4 {
    padding-left: calc(var(--spacer) / 4);
  }
  .sm-pr-1-4 {
    padding-right: calc(var(--spacer) / 4);
  }
  .sm-px-1-4 {
    padding-left: calc(var(--spacer) / 4);
    padding-right: calc(var(--spacer) / 4);
  }
  .sm-py-1-4 {
    padding-top: calc(var(--spacer) / 4);
    padding-bottom: calc(var(--spacer) / 4);
  }
  .sm-h-1-4 {
    height: calc(var(--spacer) / 4);
  }
  .sm-w-1-4 {
    width: calc(var(--spacer) / 4);
  }
  .sm-m-1-5 {
    margin: calc(var(--spacer) / 5);
  }
  .sm-mt-1-5 {
    margin-top: calc(var(--spacer) / 5);
  }
  .sm-mb-1-5 {
    margin-bottom: calc(var(--spacer) / 5);
  }
  .sm-ml-1-5 {
    margin-left: calc(var(--spacer) / 5);
  }
  .sm-mr-1-5 {
    margin-right: calc(var(--spacer) / 5);
  }
  .sm-mx-1-5 {
    margin-left: calc(var(--spacer) / 5);
    margin-right: calc(var(--spacer) / 5);
  }
  .sm-my-1-5 {
    margin-top: calc(var(--spacer) / 5);
    margin-bottom: calc(var(--spacer) / 5);
  }
  .sm-p-1-5 {
    padding: calc(var(--spacer) / 5);
  }
  .sm-pt-1-5 {
    padding-top: calc(var(--spacer) / 5);
  }
  .sm-pb-1-5 {
    padding-bottom: calc(var(--spacer) / 5);
  }
  .sm-pl-1-5 {
    padding-left: calc(var(--spacer) / 5);
  }
  .sm-pr-1-5 {
    padding-right: calc(var(--spacer) / 5);
  }
  .sm-px-1-5 {
    padding-left: calc(var(--spacer) / 5);
    padding-right: calc(var(--spacer) / 5);
  }
  .sm-py-1-5 {
    padding-top: calc(var(--spacer) / 5);
    padding-bottom: calc(var(--spacer) / 5);
  }
  .sm-h-1-5 {
    height: calc(var(--spacer) / 5);
  }
  .sm-w-1-5 {
    width: calc(var(--spacer) / 5);
  }
  .sm-m-1-6 {
    margin: calc(var(--spacer) / 6);
  }
  .sm-mt-1-6 {
    margin-top: calc(var(--spacer) / 6);
  }
  .sm-mb-1-6 {
    margin-bottom: calc(var(--spacer) / 6);
  }
  .sm-ml-1-6 {
    margin-left: calc(var(--spacer) / 6);
  }
  .sm-mr-1-6 {
    margin-right: calc(var(--spacer) / 6);
  }
  .sm-mx-1-6 {
    margin-left: calc(var(--spacer) / 6);
    margin-right: calc(var(--spacer) / 6);
  }
  .sm-my-1-6 {
    margin-top: calc(var(--spacer) / 6);
    margin-bottom: calc(var(--spacer) / 6);
  }
  .sm-p-1-6 {
    padding: calc(var(--spacer) / 6);
  }
  .sm-pt-1-6 {
    padding-top: calc(var(--spacer) / 6);
  }
  .sm-pb-1-6 {
    padding-bottom: calc(var(--spacer) / 6);
  }
  .sm-pl-1-6 {
    padding-left: calc(var(--spacer) / 6);
  }
  .sm-pr-1-6 {
    padding-right: calc(var(--spacer) / 6);
  }
  .sm-px-1-6 {
    padding-left: calc(var(--spacer) / 6);
    padding-right: calc(var(--spacer) / 6);
  }
  .sm-py-1-6 {
    padding-top: calc(var(--spacer) / 6);
    padding-bottom: calc(var(--spacer) / 6);
  }
  .sm-h-1-6 {
    height: calc(var(--spacer) / 6);
  }
  .sm-w-1-6 {
    width: calc(var(--spacer) / 6);
  }
  .sm-m-1-7 {
    margin: calc(var(--spacer) / 7);
  }
  .sm-mt-1-7 {
    margin-top: calc(var(--spacer) / 7);
  }
  .sm-mb-1-7 {
    margin-bottom: calc(var(--spacer) / 7);
  }
  .sm-ml-1-7 {
    margin-left: calc(var(--spacer) / 7);
  }
  .sm-mr-1-7 {
    margin-right: calc(var(--spacer) / 7);
  }
  .sm-mx-1-7 {
    margin-left: calc(var(--spacer) / 7);
    margin-right: calc(var(--spacer) / 7);
  }
  .sm-my-1-7 {
    margin-top: calc(var(--spacer) / 7);
    margin-bottom: calc(var(--spacer) / 7);
  }
  .sm-p-1-7 {
    padding: calc(var(--spacer) / 7);
  }
  .sm-pt-1-7 {
    padding-top: calc(var(--spacer) / 7);
  }
  .sm-pb-1-7 {
    padding-bottom: calc(var(--spacer) / 7);
  }
  .sm-pl-1-7 {
    padding-left: calc(var(--spacer) / 7);
  }
  .sm-pr-1-7 {
    padding-right: calc(var(--spacer) / 7);
  }
  .sm-px-1-7 {
    padding-left: calc(var(--spacer) / 7);
    padding-right: calc(var(--spacer) / 7);
  }
  .sm-py-1-7 {
    padding-top: calc(var(--spacer) / 7);
    padding-bottom: calc(var(--spacer) / 7);
  }
  .sm-h-1-7 {
    height: calc(var(--spacer) / 7);
  }
  .sm-w-1-7 {
    width: calc(var(--spacer) / 7);
  }
  .sm-m-2-1 {
    margin: calc(var(--spacer) * 2);
  }
  .sm-mt-2-1 {
    margin-top: calc(var(--spacer) * 2);
  }
  .sm-mb-2-1 {
    margin-bottom: calc(var(--spacer) * 2);
  }
  .sm-ml-2-1 {
    margin-left: calc(var(--spacer) * 2);
  }
  .sm-mr-2-1 {
    margin-right: calc(var(--spacer) * 2);
  }
  .sm-mx-2-1 {
    margin-left: calc(var(--spacer) * 2);
    margin-right: calc(var(--spacer) * 2);
  }
  .sm-my-2-1 {
    margin-top: calc(var(--spacer) * 2);
    margin-bottom: calc(var(--spacer) * 2);
  }
  .sm-p-2-1 {
    padding: calc(var(--spacer) * 2);
  }
  .sm-pt-2-1 {
    padding-top: calc(var(--spacer) * 2);
  }
  .sm-pb-2-1 {
    padding-bottom: calc(var(--spacer) * 2);
  }
  .sm-pl-2-1 {
    padding-left: calc(var(--spacer) * 2);
  }
  .sm-pr-2-1 {
    padding-right: calc(var(--spacer) * 2);
  }
  .sm-px-2-1 {
    padding-left: calc(var(--spacer) * 2);
    padding-right: calc(var(--spacer) * 2);
  }
  .sm-py-2-1 {
    padding-top: calc(var(--spacer) * 2);
    padding-bottom: calc(var(--spacer) * 2);
  }
  .sm-h-2-1 {
    height: calc(var(--spacer) * 2);
  }
  .sm-w-2-1 {
    width: calc(var(--spacer) * 2);
  }
  .sm-m-3-1 {
    margin: calc(var(--spacer) * 3);
  }
  .sm-mt-3-1 {
    margin-top: calc(var(--spacer) * 3);
  }
  .sm-mb-3-1 {
    margin-bottom: calc(var(--spacer) * 3);
  }
  .sm-ml-3-1 {
    margin-left: calc(var(--spacer) * 3);
  }
  .sm-mr-3-1 {
    margin-right: calc(var(--spacer) * 3);
  }
  .sm-mx-3-1 {
    margin-left: calc(var(--spacer) * 3);
    margin-right: calc(var(--spacer) * 3);
  }
  .sm-my-3-1 {
    margin-top: calc(var(--spacer) * 3);
    margin-bottom: calc(var(--spacer) * 3);
  }
  .sm-p-3-1 {
    padding: calc(var(--spacer) * 3);
  }
  .sm-pt-3-1 {
    padding-top: calc(var(--spacer) * 3);
  }
  .sm-pb-3-1 {
    padding-bottom: calc(var(--spacer) * 3);
  }
  .sm-pl-3-1 {
    padding-left: calc(var(--spacer) * 3);
  }
  .sm-pr-3-1 {
    padding-right: calc(var(--spacer) * 3);
  }
  .sm-px-3-1 {
    padding-left: calc(var(--spacer) * 3);
    padding-right: calc(var(--spacer) * 3);
  }
  .sm-py-3-1 {
    padding-top: calc(var(--spacer) * 3);
    padding-bottom: calc(var(--spacer) * 3);
  }
  .sm-h-3-1 {
    height: calc(var(--spacer) * 3);
  }
  .sm-w-3-1 {
    width: calc(var(--spacer) * 3);
  }
  .sm-m-4-1 {
    margin: calc(var(--spacer) * 4);
  }
  .sm-mt-4-1 {
    margin-top: calc(var(--spacer) * 4);
  }
  .sm-mb-4-1 {
    margin-bottom: calc(var(--spacer) * 4);
  }
  .sm-ml-4-1 {
    margin-left: calc(var(--spacer) * 4);
  }
  .sm-mr-4-1 {
    margin-right: calc(var(--spacer) * 4);
  }
  .sm-mx-4-1 {
    margin-left: calc(var(--spacer) * 4);
    margin-right: calc(var(--spacer) * 4);
  }
  .sm-my-4-1 {
    margin-top: calc(var(--spacer) * 4);
    margin-bottom: calc(var(--spacer) * 4);
  }
  .sm-p-4-1 {
    padding: calc(var(--spacer) * 4);
  }
  .sm-pt-4-1 {
    padding-top: calc(var(--spacer) * 4);
  }
  .sm-pb-4-1 {
    padding-bottom: calc(var(--spacer) * 4);
  }
  .sm-pl-4-1 {
    padding-left: calc(var(--spacer) * 4);
  }
  .sm-pr-4-1 {
    padding-right: calc(var(--spacer) * 4);
  }
  .sm-px-4-1 {
    padding-left: calc(var(--spacer) * 4);
    padding-right: calc(var(--spacer) * 4);
  }
  .sm-py-4-1 {
    padding-top: calc(var(--spacer) * 4);
    padding-bottom: calc(var(--spacer) * 4);
  }
  .sm-h-4-1 {
    height: calc(var(--spacer) * 4);
  }
  .sm-w-4-1 {
    width: calc(var(--spacer) * 4);
  }
  .sm-m-0 {
    margin: 0;
  }
  .sm-mt-0 {
    margin-top: 0;
  }
  .sm-mb-0 {
    margin-bottom: 0;
  }
  .sm-ml-0 {
    margin-left: 0;
  }
  .sm-mr-0 {
    margin-right: 0;
  }
  .sm-mx-0 {
    margin-left: 0;
    margin-right: 0;
  }
  .sm-my-0 {
    margin-top: 0;
    margin-bottom: 0;
  }
  .sm-p-0 {
    padding: 0;
  }
  .sm-pt-0 {
    padding-top: 0;
  }
  .sm-pb-0 {
    padding-bottom: 0;
  }
  .sm-pl-0 {
    padding-left: 0;
  }
  .sm-pr-0 {
    padding-right: 0;
  }
  .sm-px-0 {
    padding-left: 0;
    padding-right: 0;
  }
  .sm-py-0 {
    padding-top: 0;
    padding-bottom: 0;
  }
  .sm-h-0 {
    height: 0;
  }
  .sm-w-0 {
    width: 0;
  }
  .sm-grid__gutter--3-1 {
    margin-left: calc(var(--gutter) * -3);
    margin-right: calc(var(--gutter) * -3);
  }
  .sm-grid__gutter--3-1 > * {
    padding-left: calc(var(--gutter) * 3);
    padding-right: calc(var(--gutter) * 3);
  }
  .sm-grid__gutter--2-1 {
    margin-left: calc(var(--gutter) * -2);
    margin-right: calc(var(--gutter) * -2);
  }
  .sm-grid__gutter--2-1 > * {
    padding-left: calc(var(--gutter) * 2);
    padding-right: calc(var(--gutter) * 2);
  }
  .sm-grid__gutter {
    margin-left: calc(var(--gutter) * -1);
    margin-right: calc(var(--gutter) * -1);
  }
  .sm-grid__gutter > * {
    padding-left: calc(var(--gutter) * 1);
    padding-right: calc(var(--gutter) * 1);
  }
  .sm-grid__gutter--1-2 {
    margin-left: calc(var(--gutter) * -0.5);
    margin-right: calc(var(--gutter) * -0.5);
  }
  .sm-grid__gutter--1-2 > * {
    padding-left: calc(var(--gutter) * 0.5);
    padding-right: calc(var(--gutter) * 0.5);
  }
  .sm-grid__gutter--1-3 {
    margin-left: calc(var(--gutter) * -0.333);
    margin-right: calc(var(--gutter) * -0.333);
  }
  .sm-grid__gutter--1-3 > * {
    padding-left: calc(var(--gutter) * 0.333);
    padding-right: calc(var(--gutter) * 0.333);
  }
  .sm-grid__gutter--1-4 {
    margin-left: calc(var(--gutter) * -0.25);
    margin-right: calc(var(--gutter) * -0.25);
  }
  .sm-grid__gutter--1-4 > * {
    padding-left: calc(var(--gutter) * 0.25);
    padding-right: calc(var(--gutter) * 0.25);
  }
  .sm-row__row--12 {
    min-height: calc(var(--vh) * 100 / 12 * 12);
  }
  .sm-row__row--11 {
    min-height: calc(var(--vh) * 100 / 12 * 11);
  }
  .sm-row__row--10 {
    min-height: calc(var(--vh) * 100 / 12 * 10);
  }
  .sm-row__row--9 {
    min-height: calc(var(--vh) * 100 / 12 * 9);
  }
  .sm-row__row--8 {
    min-height: calc(var(--vh) * 100 / 12 * 8);
  }
  .sm-row__row--7 {
    min-height: calc(var(--vh) * 100 / 12 * 7);
  }
  .sm-row__row--6 {
    min-height: calc(var(--vh) * 100 / 12 * 6);
  }
  .sm-row__row--5 {
    min-height: calc(var(--vh) * 100 / 12 * 5);
  }
  .sm-row__row--4 {
    min-height: calc(var(--vh) * 100 / 12 * 4);
  }
  .sm-row__row--3 {
    min-height: calc(var(--vh) * 100 / 12 * 3);
  }
  .sm-row__row--2 {
    min-height: calc(var(--vh) * 100 / 12 * 2);
  }
  .sm-row__row--1 {
    min-height: calc(var(--vh) * 100 / 12 * 1);
  }
  .sm-col__col--12 {
    flex: 0 0 calc(100% * 12 / 12);
    max-width: calc(100% * 12 / 12);
  }
  .sm-col__col--11 {
    flex: 0 0 calc(100% * 11 / 12);
    max-width: calc(100% * 11 / 12);
  }
  .sm-col__col--10 {
    flex: 0 0 calc(100% * 10 / 12);
    max-width: calc(100% * 10 / 12);
  }
  .sm-col__col--9 {
    flex: 0 0 calc(100% * 9 / 12);
    max-width: calc(100% * 9 / 12);
  }
  .sm-col__col--8 {
    flex: 0 0 calc(100% * 8 / 12);
    max-width: calc(100% * 8 / 12);
  }
  .sm-col__col--7 {
    flex: 0 0 calc(100% * 7 / 12);
    max-width: calc(100% * 7 / 12);
  }
  .sm-col__col--6 {
    flex: 0 0 calc(100% * 6 / 12);
    max-width: calc(100% * 6 / 12);
  }
  .sm-col__col--5 {
    flex: 0 0 calc(100% * 5 / 12);
    max-width: calc(100% * 5 / 12);
  }
  .sm-col__col--4 {
    flex: 0 0 calc(100% * 4 / 12);
    max-width: calc(100% * 4 / 12);
  }
  .sm-col__col--3 {
    flex: 0 0 calc(100% * 3 / 12);
    max-width: calc(100% * 3 / 12);
  }
  .sm-col__col--2 {
    flex: 0 0 calc(100% * 2 / 12);
    max-width: calc(100% * 2 / 12);
  }
  .sm-col__col--1 {
    flex: 0 0 calc(100% * 1 / 12);
    max-width: calc(100% * 1 / 12);
  }
  .sm-flex__row, .sm-flex__column {
    display: flex;
    flex-wrap: wrap;
  }
  .sm-flex__row > *, .sm-flex__column > * {
    flex-grow: 0;
  }
  .sm-flex__row {
    flex-direction: row;
  }
  .sm-flex__row-reverse {
    flex-direction: row-reverse;
  }
  .sm-flex__column {
    flex-direction: column;
  }
  .sm-flex__column-reverse {
    flex-direction: column-reverse;
  }
  .sm-flex__nowrap {
    flex-wrap: nowrap;
  }
  .sm-flex__wrap {
    flex-wrap: wrap;
  }
  .sm-flex__align-items--center {
    align-items: center;
  }
  .sm-flex__align-items--start {
    align-items: flex-start;
  }
  .sm-flex__align-items--end {
    align-items: flex-end;
  }
  .sm-flex__align-items--stretch {
    align-items: stretch;
  }
  .sm-flex__justify-content--center {
    justify-content: center;
  }
  .sm-flex__justify-content--start {
    justify-content: flex-start;
  }
  .sm-flex__justify-content--end {
    justify-content: flex-end;
  }
  .sm-flex__justify-content--spacein {
    justify-content: space-between;
  }
  .sm-flex__justify-content--spaceout {
    justify-content: space-around;
  }
  .sm-flex__align-self--center {
    align-self: center;
  }
  .sm-flex__align-self--start {
    align-self: flex-start;
  }
  .sm-flex__align-self--end {
    align-self: flex-end;
  }
  .sm-flex__align-self--stretch {
    align-self: stretch;
  }
  .sm-flex__align-self--selfstart {
    align-self: self-start;
  }
  .sm-flex__align-self--selfend {
    align-self: self-end;
  }
  .sm-flex__justify-self--center {
    justify-self: center;
  }
  .sm-flex__justify-self--start {
    justify-self: flex-start;
  }
  .sm-flex__justify-self--end {
    justify-self: flex-end;
  }
  .sm-flex__justify-self--stretch {
    justify-self: stretch;
  }
  .sm-flex__justify-self--selfstart {
    justify-self: self-start;
  }
  .sm-flex__justify-self--selfend {
    justify-self: self-end;
  }
  .sm-flex__justify-self--left {
    justify-self: left;
  }
  .sm-flex__justify-self--right {
    justify-self: right;
  }
  .sm-flex__flex-grow--1 {
    flex-grow: 1;
  }
  .sm-flex__flex-grow--2 {
    flex-grow: 2;
  }
  .sm-flex__flex-grow--3 {
    flex-grow: 3;
  }
  .sm-flex__flex-grow--4 {
    flex-grow: 4;
  }
  .sm-flex__flex-grow--5 {
    flex-grow: 5;
  }
  .sm-flex__flex-grow--6 {
    flex-grow: 6;
  }
  .sm-flex__flex-grow--7 {
    flex-grow: 7;
  }
  .sm-flex__flex-grow--8 {
    flex-grow: 8;
  }
  .sm-flex__flex-grow--9 {
    flex-grow: 9;
  }
  .sm-flex__flex-grow--10 {
    flex-grow: 10;
  }
  .sm-display__flex {
    display: flex;
  }
  .sm-display__inline {
    display: inline;
  }
  .sm-display__inline-block {
    display: inline-block;
  }
  .sm-display__block {
    display: block;
  }
  .sm-position__absolute {
    position: absolute;
  }
  .sm-position__fixed {
    position: fixed;
  }
  .sm-position__inherit {
    position: inherit;
  }
  .sm-position__relative {
    position: relative;
  }
  .sm-position__sticky {
    position: sticky;
  }
  .sm-position__top--0 {
    top: 0;
  }
  .sm-position__top--inherit {
    top: inherit;
  }
  .sm-position__left--0 {
    left: 0;
  }
  .sm-position__left--inherit {
    left: inherit;
  }
  .sm-position__right--0 {
    right: 0;
  }
  .sm-position__right--inherit {
    right: inherit;
  }
  .sm-position__bottom--0 {
    bottom: 0;
  }
  .sm-position__bottom--inherit {
    bottom: inherit;
  }
  [sm*=text-center] {
    text-align: center;
  }
  [sm*=text-left] {
    text-align: left;
  }
  [sm*=text-right] {
    text-align: right;
  }
  [sm*=text-justify] {
    text-align: justify;
  }
}
@media (min-width: 768px) and (max-width: 1200px) and (orientation:landscape) {
  .sm-l-m-1-1 {
    margin: calc(var(--spacer) / 1);
  }
  .sm-l-mt-1-1 {
    margin-top: calc(var(--spacer) / 1);
  }
  .sm-l-mb-1-1 {
    margin-bottom: calc(var(--spacer) / 1);
  }
  .sm-l-ml-1-1 {
    margin-left: calc(var(--spacer) / 1);
  }
  .sm-l-mr-1-1 {
    margin-right: calc(var(--spacer) / 1);
  }
  .sm-l-mx-1-1 {
    margin-left: calc(var(--spacer) / 1);
    margin-right: calc(var(--spacer) / 1);
  }
  .sm-l-my-1-1 {
    margin-top: calc(var(--spacer) / 1);
    margin-bottom: calc(var(--spacer) / 1);
  }
  .sm-l-p-1-1 {
    padding: calc(var(--spacer) / 1);
  }
  .sm-l-pt-1-1 {
    padding-top: calc(var(--spacer) / 1);
  }
  .sm-l-pb-1-1 {
    padding-bottom: calc(var(--spacer) / 1);
  }
  .sm-l-pl-1-1 {
    padding-left: calc(var(--spacer) / 1);
  }
  .sm-l-pr-1-1 {
    padding-right: calc(var(--spacer) / 1);
  }
  .sm-l-px-1-1 {
    padding-left: calc(var(--spacer) / 1);
    padding-right: calc(var(--spacer) / 1);
  }
  .sm-l-py-1-1 {
    padding-top: calc(var(--spacer) / 1);
    padding-bottom: calc(var(--spacer) / 1);
  }
  .sm-l-h-1-1 {
    height: calc(var(--spacer) / 1);
  }
  .sm-l-w-1-1 {
    width: calc(var(--spacer) / 1);
  }
  .sm-l-m-1-2 {
    margin: calc(var(--spacer) / 2);
  }
  .sm-l-mt-1-2 {
    margin-top: calc(var(--spacer) / 2);
  }
  .sm-l-mb-1-2 {
    margin-bottom: calc(var(--spacer) / 2);
  }
  .sm-l-ml-1-2 {
    margin-left: calc(var(--spacer) / 2);
  }
  .sm-l-mr-1-2 {
    margin-right: calc(var(--spacer) / 2);
  }
  .sm-l-mx-1-2 {
    margin-left: calc(var(--spacer) / 2);
    margin-right: calc(var(--spacer) / 2);
  }
  .sm-l-my-1-2 {
    margin-top: calc(var(--spacer) / 2);
    margin-bottom: calc(var(--spacer) / 2);
  }
  .sm-l-p-1-2 {
    padding: calc(var(--spacer) / 2);
  }
  .sm-l-pt-1-2 {
    padding-top: calc(var(--spacer) / 2);
  }
  .sm-l-pb-1-2 {
    padding-bottom: calc(var(--spacer) / 2);
  }
  .sm-l-pl-1-2 {
    padding-left: calc(var(--spacer) / 2);
  }
  .sm-l-pr-1-2 {
    padding-right: calc(var(--spacer) / 2);
  }
  .sm-l-px-1-2 {
    padding-left: calc(var(--spacer) / 2);
    padding-right: calc(var(--spacer) / 2);
  }
  .sm-l-py-1-2 {
    padding-top: calc(var(--spacer) / 2);
    padding-bottom: calc(var(--spacer) / 2);
  }
  .sm-l-h-1-2 {
    height: calc(var(--spacer) / 2);
  }
  .sm-l-w-1-2 {
    width: calc(var(--spacer) / 2);
  }
  .sm-l-m-1-3 {
    margin: calc(var(--spacer) / 3);
  }
  .sm-l-mt-1-3 {
    margin-top: calc(var(--spacer) / 3);
  }
  .sm-l-mb-1-3 {
    margin-bottom: calc(var(--spacer) / 3);
  }
  .sm-l-ml-1-3 {
    margin-left: calc(var(--spacer) / 3);
  }
  .sm-l-mr-1-3 {
    margin-right: calc(var(--spacer) / 3);
  }
  .sm-l-mx-1-3 {
    margin-left: calc(var(--spacer) / 3);
    margin-right: calc(var(--spacer) / 3);
  }
  .sm-l-my-1-3 {
    margin-top: calc(var(--spacer) / 3);
    margin-bottom: calc(var(--spacer) / 3);
  }
  .sm-l-p-1-3 {
    padding: calc(var(--spacer) / 3);
  }
  .sm-l-pt-1-3 {
    padding-top: calc(var(--spacer) / 3);
  }
  .sm-l-pb-1-3 {
    padding-bottom: calc(var(--spacer) / 3);
  }
  .sm-l-pl-1-3 {
    padding-left: calc(var(--spacer) / 3);
  }
  .sm-l-pr-1-3 {
    padding-right: calc(var(--spacer) / 3);
  }
  .sm-l-px-1-3 {
    padding-left: calc(var(--spacer) / 3);
    padding-right: calc(var(--spacer) / 3);
  }
  .sm-l-py-1-3 {
    padding-top: calc(var(--spacer) / 3);
    padding-bottom: calc(var(--spacer) / 3);
  }
  .sm-l-h-1-3 {
    height: calc(var(--spacer) / 3);
  }
  .sm-l-w-1-3 {
    width: calc(var(--spacer) / 3);
  }
  .sm-l-m-1-4 {
    margin: calc(var(--spacer) / 4);
  }
  .sm-l-mt-1-4 {
    margin-top: calc(var(--spacer) / 4);
  }
  .sm-l-mb-1-4 {
    margin-bottom: calc(var(--spacer) / 4);
  }
  .sm-l-ml-1-4 {
    margin-left: calc(var(--spacer) / 4);
  }
  .sm-l-mr-1-4 {
    margin-right: calc(var(--spacer) / 4);
  }
  .sm-l-mx-1-4 {
    margin-left: calc(var(--spacer) / 4);
    margin-right: calc(var(--spacer) / 4);
  }
  .sm-l-my-1-4 {
    margin-top: calc(var(--spacer) / 4);
    margin-bottom: calc(var(--spacer) / 4);
  }
  .sm-l-p-1-4 {
    padding: calc(var(--spacer) / 4);
  }
  .sm-l-pt-1-4 {
    padding-top: calc(var(--spacer) / 4);
  }
  .sm-l-pb-1-4 {
    padding-bottom: calc(var(--spacer) / 4);
  }
  .sm-l-pl-1-4 {
    padding-left: calc(var(--spacer) / 4);
  }
  .sm-l-pr-1-4 {
    padding-right: calc(var(--spacer) / 4);
  }
  .sm-l-px-1-4 {
    padding-left: calc(var(--spacer) / 4);
    padding-right: calc(var(--spacer) / 4);
  }
  .sm-l-py-1-4 {
    padding-top: calc(var(--spacer) / 4);
    padding-bottom: calc(var(--spacer) / 4);
  }
  .sm-l-h-1-4 {
    height: calc(var(--spacer) / 4);
  }
  .sm-l-w-1-4 {
    width: calc(var(--spacer) / 4);
  }
  .sm-l-m-1-5 {
    margin: calc(var(--spacer) / 5);
  }
  .sm-l-mt-1-5 {
    margin-top: calc(var(--spacer) / 5);
  }
  .sm-l-mb-1-5 {
    margin-bottom: calc(var(--spacer) / 5);
  }
  .sm-l-ml-1-5 {
    margin-left: calc(var(--spacer) / 5);
  }
  .sm-l-mr-1-5 {
    margin-right: calc(var(--spacer) / 5);
  }
  .sm-l-mx-1-5 {
    margin-left: calc(var(--spacer) / 5);
    margin-right: calc(var(--spacer) / 5);
  }
  .sm-l-my-1-5 {
    margin-top: calc(var(--spacer) / 5);
    margin-bottom: calc(var(--spacer) / 5);
  }
  .sm-l-p-1-5 {
    padding: calc(var(--spacer) / 5);
  }
  .sm-l-pt-1-5 {
    padding-top: calc(var(--spacer) / 5);
  }
  .sm-l-pb-1-5 {
    padding-bottom: calc(var(--spacer) / 5);
  }
  .sm-l-pl-1-5 {
    padding-left: calc(var(--spacer) / 5);
  }
  .sm-l-pr-1-5 {
    padding-right: calc(var(--spacer) / 5);
  }
  .sm-l-px-1-5 {
    padding-left: calc(var(--spacer) / 5);
    padding-right: calc(var(--spacer) / 5);
  }
  .sm-l-py-1-5 {
    padding-top: calc(var(--spacer) / 5);
    padding-bottom: calc(var(--spacer) / 5);
  }
  .sm-l-h-1-5 {
    height: calc(var(--spacer) / 5);
  }
  .sm-l-w-1-5 {
    width: calc(var(--spacer) / 5);
  }
  .sm-l-m-1-6 {
    margin: calc(var(--spacer) / 6);
  }
  .sm-l-mt-1-6 {
    margin-top: calc(var(--spacer) / 6);
  }
  .sm-l-mb-1-6 {
    margin-bottom: calc(var(--spacer) / 6);
  }
  .sm-l-ml-1-6 {
    margin-left: calc(var(--spacer) / 6);
  }
  .sm-l-mr-1-6 {
    margin-right: calc(var(--spacer) / 6);
  }
  .sm-l-mx-1-6 {
    margin-left: calc(var(--spacer) / 6);
    margin-right: calc(var(--spacer) / 6);
  }
  .sm-l-my-1-6 {
    margin-top: calc(var(--spacer) / 6);
    margin-bottom: calc(var(--spacer) / 6);
  }
  .sm-l-p-1-6 {
    padding: calc(var(--spacer) / 6);
  }
  .sm-l-pt-1-6 {
    padding-top: calc(var(--spacer) / 6);
  }
  .sm-l-pb-1-6 {
    padding-bottom: calc(var(--spacer) / 6);
  }
  .sm-l-pl-1-6 {
    padding-left: calc(var(--spacer) / 6);
  }
  .sm-l-pr-1-6 {
    padding-right: calc(var(--spacer) / 6);
  }
  .sm-l-px-1-6 {
    padding-left: calc(var(--spacer) / 6);
    padding-right: calc(var(--spacer) / 6);
  }
  .sm-l-py-1-6 {
    padding-top: calc(var(--spacer) / 6);
    padding-bottom: calc(var(--spacer) / 6);
  }
  .sm-l-h-1-6 {
    height: calc(var(--spacer) / 6);
  }
  .sm-l-w-1-6 {
    width: calc(var(--spacer) / 6);
  }
  .sm-l-m-1-7 {
    margin: calc(var(--spacer) / 7);
  }
  .sm-l-mt-1-7 {
    margin-top: calc(var(--spacer) / 7);
  }
  .sm-l-mb-1-7 {
    margin-bottom: calc(var(--spacer) / 7);
  }
  .sm-l-ml-1-7 {
    margin-left: calc(var(--spacer) / 7);
  }
  .sm-l-mr-1-7 {
    margin-right: calc(var(--spacer) / 7);
  }
  .sm-l-mx-1-7 {
    margin-left: calc(var(--spacer) / 7);
    margin-right: calc(var(--spacer) / 7);
  }
  .sm-l-my-1-7 {
    margin-top: calc(var(--spacer) / 7);
    margin-bottom: calc(var(--spacer) / 7);
  }
  .sm-l-p-1-7 {
    padding: calc(var(--spacer) / 7);
  }
  .sm-l-pt-1-7 {
    padding-top: calc(var(--spacer) / 7);
  }
  .sm-l-pb-1-7 {
    padding-bottom: calc(var(--spacer) / 7);
  }
  .sm-l-pl-1-7 {
    padding-left: calc(var(--spacer) / 7);
  }
  .sm-l-pr-1-7 {
    padding-right: calc(var(--spacer) / 7);
  }
  .sm-l-px-1-7 {
    padding-left: calc(var(--spacer) / 7);
    padding-right: calc(var(--spacer) / 7);
  }
  .sm-l-py-1-7 {
    padding-top: calc(var(--spacer) / 7);
    padding-bottom: calc(var(--spacer) / 7);
  }
  .sm-l-h-1-7 {
    height: calc(var(--spacer) / 7);
  }
  .sm-l-w-1-7 {
    width: calc(var(--spacer) / 7);
  }
  .sm-l-m-2-1 {
    margin: calc(var(--spacer) * 2);
  }
  .sm-l-mt-2-1 {
    margin-top: calc(var(--spacer) * 2);
  }
  .sm-l-mb-2-1 {
    margin-bottom: calc(var(--spacer) * 2);
  }
  .sm-l-ml-2-1 {
    margin-left: calc(var(--spacer) * 2);
  }
  .sm-l-mr-2-1 {
    margin-right: calc(var(--spacer) * 2);
  }
  .sm-l-mx-2-1 {
    margin-left: calc(var(--spacer) * 2);
    margin-right: calc(var(--spacer) * 2);
  }
  .sm-l-my-2-1 {
    margin-top: calc(var(--spacer) * 2);
    margin-bottom: calc(var(--spacer) * 2);
  }
  .sm-l-p-2-1 {
    padding: calc(var(--spacer) * 2);
  }
  .sm-l-pt-2-1 {
    padding-top: calc(var(--spacer) * 2);
  }
  .sm-l-pb-2-1 {
    padding-bottom: calc(var(--spacer) * 2);
  }
  .sm-l-pl-2-1 {
    padding-left: calc(var(--spacer) * 2);
  }
  .sm-l-pr-2-1 {
    padding-right: calc(var(--spacer) * 2);
  }
  .sm-l-px-2-1 {
    padding-left: calc(var(--spacer) * 2);
    padding-right: calc(var(--spacer) * 2);
  }
  .sm-l-py-2-1 {
    padding-top: calc(var(--spacer) * 2);
    padding-bottom: calc(var(--spacer) * 2);
  }
  .sm-l-h-2-1 {
    height: calc(var(--spacer) * 2);
  }
  .sm-l-w-2-1 {
    width: calc(var(--spacer) * 2);
  }
  .sm-l-m-3-1 {
    margin: calc(var(--spacer) * 3);
  }
  .sm-l-mt-3-1 {
    margin-top: calc(var(--spacer) * 3);
  }
  .sm-l-mb-3-1 {
    margin-bottom: calc(var(--spacer) * 3);
  }
  .sm-l-ml-3-1 {
    margin-left: calc(var(--spacer) * 3);
  }
  .sm-l-mr-3-1 {
    margin-right: calc(var(--spacer) * 3);
  }
  .sm-l-mx-3-1 {
    margin-left: calc(var(--spacer) * 3);
    margin-right: calc(var(--spacer) * 3);
  }
  .sm-l-my-3-1 {
    margin-top: calc(var(--spacer) * 3);
    margin-bottom: calc(var(--spacer) * 3);
  }
  .sm-l-p-3-1 {
    padding: calc(var(--spacer) * 3);
  }
  .sm-l-pt-3-1 {
    padding-top: calc(var(--spacer) * 3);
  }
  .sm-l-pb-3-1 {
    padding-bottom: calc(var(--spacer) * 3);
  }
  .sm-l-pl-3-1 {
    padding-left: calc(var(--spacer) * 3);
  }
  .sm-l-pr-3-1 {
    padding-right: calc(var(--spacer) * 3);
  }
  .sm-l-px-3-1 {
    padding-left: calc(var(--spacer) * 3);
    padding-right: calc(var(--spacer) * 3);
  }
  .sm-l-py-3-1 {
    padding-top: calc(var(--spacer) * 3);
    padding-bottom: calc(var(--spacer) * 3);
  }
  .sm-l-h-3-1 {
    height: calc(var(--spacer) * 3);
  }
  .sm-l-w-3-1 {
    width: calc(var(--spacer) * 3);
  }
  .sm-l-m-4-1 {
    margin: calc(var(--spacer) * 4);
  }
  .sm-l-mt-4-1 {
    margin-top: calc(var(--spacer) * 4);
  }
  .sm-l-mb-4-1 {
    margin-bottom: calc(var(--spacer) * 4);
  }
  .sm-l-ml-4-1 {
    margin-left: calc(var(--spacer) * 4);
  }
  .sm-l-mr-4-1 {
    margin-right: calc(var(--spacer) * 4);
  }
  .sm-l-mx-4-1 {
    margin-left: calc(var(--spacer) * 4);
    margin-right: calc(var(--spacer) * 4);
  }
  .sm-l-my-4-1 {
    margin-top: calc(var(--spacer) * 4);
    margin-bottom: calc(var(--spacer) * 4);
  }
  .sm-l-p-4-1 {
    padding: calc(var(--spacer) * 4);
  }
  .sm-l-pt-4-1 {
    padding-top: calc(var(--spacer) * 4);
  }
  .sm-l-pb-4-1 {
    padding-bottom: calc(var(--spacer) * 4);
  }
  .sm-l-pl-4-1 {
    padding-left: calc(var(--spacer) * 4);
  }
  .sm-l-pr-4-1 {
    padding-right: calc(var(--spacer) * 4);
  }
  .sm-l-px-4-1 {
    padding-left: calc(var(--spacer) * 4);
    padding-right: calc(var(--spacer) * 4);
  }
  .sm-l-py-4-1 {
    padding-top: calc(var(--spacer) * 4);
    padding-bottom: calc(var(--spacer) * 4);
  }
  .sm-l-h-4-1 {
    height: calc(var(--spacer) * 4);
  }
  .sm-l-w-4-1 {
    width: calc(var(--spacer) * 4);
  }
  .sm-l-m-0 {
    margin: 0;
  }
  .sm-l-mt-0 {
    margin-top: 0;
  }
  .sm-l-mb-0 {
    margin-bottom: 0;
  }
  .sm-l-ml-0 {
    margin-left: 0;
  }
  .sm-l-mr-0 {
    margin-right: 0;
  }
  .sm-l-mx-0 {
    margin-left: 0;
    margin-right: 0;
  }
  .sm-l-my-0 {
    margin-top: 0;
    margin-bottom: 0;
  }
  .sm-l-p-0 {
    padding: 0;
  }
  .sm-l-pt-0 {
    padding-top: 0;
  }
  .sm-l-pb-0 {
    padding-bottom: 0;
  }
  .sm-l-pl-0 {
    padding-left: 0;
  }
  .sm-l-pr-0 {
    padding-right: 0;
  }
  .sm-l-px-0 {
    padding-left: 0;
    padding-right: 0;
  }
  .sm-l-py-0 {
    padding-top: 0;
    padding-bottom: 0;
  }
  .sm-l-h-0 {
    height: 0;
  }
  .sm-l-w-0 {
    width: 0;
  }
  .sm-l-grid__gutter--3-1 {
    margin-left: calc(var(--gutter) * -3);
    margin-right: calc(var(--gutter) * -3);
  }
  .sm-l-grid__gutter--3-1 > * {
    padding-left: calc(var(--gutter) * 3);
    padding-right: calc(var(--gutter) * 3);
  }
  .sm-l-grid__gutter--2-1 {
    margin-left: calc(var(--gutter) * -2);
    margin-right: calc(var(--gutter) * -2);
  }
  .sm-l-grid__gutter--2-1 > * {
    padding-left: calc(var(--gutter) * 2);
    padding-right: calc(var(--gutter) * 2);
  }
  .sm-l-grid__gutter {
    margin-left: calc(var(--gutter) * -1);
    margin-right: calc(var(--gutter) * -1);
  }
  .sm-l-grid__gutter > * {
    padding-left: calc(var(--gutter) * 1);
    padding-right: calc(var(--gutter) * 1);
  }
  .sm-l-grid__gutter--1-2 {
    margin-left: calc(var(--gutter) * -0.5);
    margin-right: calc(var(--gutter) * -0.5);
  }
  .sm-l-grid__gutter--1-2 > * {
    padding-left: calc(var(--gutter) * 0.5);
    padding-right: calc(var(--gutter) * 0.5);
  }
  .sm-l-grid__gutter--1-3 {
    margin-left: calc(var(--gutter) * -0.333);
    margin-right: calc(var(--gutter) * -0.333);
  }
  .sm-l-grid__gutter--1-3 > * {
    padding-left: calc(var(--gutter) * 0.333);
    padding-right: calc(var(--gutter) * 0.333);
  }
  .sm-l-grid__gutter--1-4 {
    margin-left: calc(var(--gutter) * -0.25);
    margin-right: calc(var(--gutter) * -0.25);
  }
  .sm-l-grid__gutter--1-4 > * {
    padding-left: calc(var(--gutter) * 0.25);
    padding-right: calc(var(--gutter) * 0.25);
  }
  .sm-l-row__row--12 {
    min-height: calc(var(--vh) * 100 / 12 * 12);
  }
  .sm-l-row__row--11 {
    min-height: calc(var(--vh) * 100 / 12 * 11);
  }
  .sm-l-row__row--10 {
    min-height: calc(var(--vh) * 100 / 12 * 10);
  }
  .sm-l-row__row--9 {
    min-height: calc(var(--vh) * 100 / 12 * 9);
  }
  .sm-l-row__row--8 {
    min-height: calc(var(--vh) * 100 / 12 * 8);
  }
  .sm-l-row__row--7 {
    min-height: calc(var(--vh) * 100 / 12 * 7);
  }
  .sm-l-row__row--6 {
    min-height: calc(var(--vh) * 100 / 12 * 6);
  }
  .sm-l-row__row--5 {
    min-height: calc(var(--vh) * 100 / 12 * 5);
  }
  .sm-l-row__row--4 {
    min-height: calc(var(--vh) * 100 / 12 * 4);
  }
  .sm-l-row__row--3 {
    min-height: calc(var(--vh) * 100 / 12 * 3);
  }
  .sm-l-row__row--2 {
    min-height: calc(var(--vh) * 100 / 12 * 2);
  }
  .sm-l-row__row--1 {
    min-height: calc(var(--vh) * 100 / 12 * 1);
  }
  .sm-l-col__col--12 {
    flex: 0 0 calc(100% * 12 / 12);
    max-width: calc(100% * 12 / 12);
  }
  .sm-l-col__col--11 {
    flex: 0 0 calc(100% * 11 / 12);
    max-width: calc(100% * 11 / 12);
  }
  .sm-l-col__col--10 {
    flex: 0 0 calc(100% * 10 / 12);
    max-width: calc(100% * 10 / 12);
  }
  .sm-l-col__col--9 {
    flex: 0 0 calc(100% * 9 / 12);
    max-width: calc(100% * 9 / 12);
  }
  .sm-l-col__col--8 {
    flex: 0 0 calc(100% * 8 / 12);
    max-width: calc(100% * 8 / 12);
  }
  .sm-l-col__col--7 {
    flex: 0 0 calc(100% * 7 / 12);
    max-width: calc(100% * 7 / 12);
  }
  .sm-l-col__col--6 {
    flex: 0 0 calc(100% * 6 / 12);
    max-width: calc(100% * 6 / 12);
  }
  .sm-l-col__col--5 {
    flex: 0 0 calc(100% * 5 / 12);
    max-width: calc(100% * 5 / 12);
  }
  .sm-l-col__col--4 {
    flex: 0 0 calc(100% * 4 / 12);
    max-width: calc(100% * 4 / 12);
  }
  .sm-l-col__col--3 {
    flex: 0 0 calc(100% * 3 / 12);
    max-width: calc(100% * 3 / 12);
  }
  .sm-l-col__col--2 {
    flex: 0 0 calc(100% * 2 / 12);
    max-width: calc(100% * 2 / 12);
  }
  .sm-l-col__col--1 {
    flex: 0 0 calc(100% * 1 / 12);
    max-width: calc(100% * 1 / 12);
  }
  .sm-l-flex__row, .sm-l-flex__column {
    display: flex;
    flex-wrap: wrap;
  }
  .sm-l-flex__row > *, .sm-l-flex__column > * {
    flex-grow: 0;
  }
  .sm-l-flex__row {
    flex-direction: row;
  }
  .sm-l-flex__row-reverse {
    flex-direction: row-reverse;
  }
  .sm-l-flex__column {
    flex-direction: column;
  }
  .sm-l-flex__column-reverse {
    flex-direction: column-reverse;
  }
  .sm-l-flex__nowrap {
    flex-wrap: nowrap;
  }
  .sm-l-flex__wrap {
    flex-wrap: wrap;
  }
  .sm-l-flex__align-items--center {
    align-items: center;
  }
  .sm-l-flex__align-items--start {
    align-items: flex-start;
  }
  .sm-l-flex__align-items--end {
    align-items: flex-end;
  }
  .sm-l-flex__align-items--stretch {
    align-items: stretch;
  }
  .sm-l-flex__justify-content--center {
    justify-content: center;
  }
  .sm-l-flex__justify-content--start {
    justify-content: flex-start;
  }
  .sm-l-flex__justify-content--end {
    justify-content: flex-end;
  }
  .sm-l-flex__justify-content--spacein {
    justify-content: space-between;
  }
  .sm-l-flex__justify-content--spaceout {
    justify-content: space-around;
  }
  .sm-l-flex__align-self--center {
    align-self: center;
  }
  .sm-l-flex__align-self--start {
    align-self: flex-start;
  }
  .sm-l-flex__align-self--end {
    align-self: flex-end;
  }
  .sm-l-flex__align-self--stretch {
    align-self: stretch;
  }
  .sm-l-flex__align-self--selfstart {
    align-self: self-start;
  }
  .sm-l-flex__align-self--selfend {
    align-self: self-end;
  }
  .sm-l-flex__justify-self--center {
    justify-self: center;
  }
  .sm-l-flex__justify-self--start {
    justify-self: flex-start;
  }
  .sm-l-flex__justify-self--end {
    justify-self: flex-end;
  }
  .sm-l-flex__justify-self--stretch {
    justify-self: stretch;
  }
  .sm-l-flex__justify-self--selfstart {
    justify-self: self-start;
  }
  .sm-l-flex__justify-self--selfend {
    justify-self: self-end;
  }
  .sm-l-flex__justify-self--left {
    justify-self: left;
  }
  .sm-l-flex__justify-self--right {
    justify-self: right;
  }
  .sm-l-flex__flex-grow--1 {
    flex-grow: 1;
  }
  .sm-l-flex__flex-grow--2 {
    flex-grow: 2;
  }
  .sm-l-flex__flex-grow--3 {
    flex-grow: 3;
  }
  .sm-l-flex__flex-grow--4 {
    flex-grow: 4;
  }
  .sm-l-flex__flex-grow--5 {
    flex-grow: 5;
  }
  .sm-l-flex__flex-grow--6 {
    flex-grow: 6;
  }
  .sm-l-flex__flex-grow--7 {
    flex-grow: 7;
  }
  .sm-l-flex__flex-grow--8 {
    flex-grow: 8;
  }
  .sm-l-flex__flex-grow--9 {
    flex-grow: 9;
  }
  .sm-l-flex__flex-grow--10 {
    flex-grow: 10;
  }
  .sm-l-display__flex {
    display: flex;
  }
  .sm-l-display__inline {
    display: inline;
  }
  .sm-l-display__inline-block {
    display: inline-block;
  }
  .sm-l-display__block {
    display: block;
  }
  .sm-l-position__absolute {
    position: absolute;
  }
  .sm-l-position__fixed {
    position: fixed;
  }
  .sm-l-position__inherit {
    position: inherit;
  }
  .sm-l-position__relative {
    position: relative;
  }
  .sm-l-position__sticky {
    position: sticky;
  }
  .sm-l-position__top--0 {
    top: 0;
  }
  .sm-l-position__top--inherit {
    top: inherit;
  }
  .sm-l-position__left--0 {
    left: 0;
  }
  .sm-l-position__left--inherit {
    left: inherit;
  }
  .sm-l-position__right--0 {
    right: 0;
  }
  .sm-l-position__right--inherit {
    right: inherit;
  }
  .sm-l-position__bottom--0 {
    bottom: 0;
  }
  .sm-l-position__bottom--inherit {
    bottom: inherit;
  }
  [sm-l*=text-center] {
    text-align: center;
  }
  [sm-l*=text-left] {
    text-align: left;
  }
  [sm-l*=text-right] {
    text-align: right;
  }
  [sm-l*=text-justify] {
    text-align: justify;
  }
}
@media (min-width: 1201px) and (max-width: 10000px) {
  .md-m-1-1 {
    margin: calc(var(--spacer) / 1);
  }
  .md-mt-1-1 {
    margin-top: calc(var(--spacer) / 1);
  }
  .md-mb-1-1 {
    margin-bottom: calc(var(--spacer) / 1);
  }
  .md-ml-1-1 {
    margin-left: calc(var(--spacer) / 1);
  }
  .md-mr-1-1 {
    margin-right: calc(var(--spacer) / 1);
  }
  .md-mx-1-1 {
    margin-left: calc(var(--spacer) / 1);
    margin-right: calc(var(--spacer) / 1);
  }
  .md-my-1-1 {
    margin-top: calc(var(--spacer) / 1);
    margin-bottom: calc(var(--spacer) / 1);
  }
  .md-p-1-1 {
    padding: calc(var(--spacer) / 1);
  }
  .md-pt-1-1 {
    padding-top: calc(var(--spacer) / 1);
  }
  .md-pb-1-1 {
    padding-bottom: calc(var(--spacer) / 1);
  }
  .md-pl-1-1 {
    padding-left: calc(var(--spacer) / 1);
  }
  .md-pr-1-1 {
    padding-right: calc(var(--spacer) / 1);
  }
  .md-px-1-1 {
    padding-left: calc(var(--spacer) / 1);
    padding-right: calc(var(--spacer) / 1);
  }
  .md-py-1-1 {
    padding-top: calc(var(--spacer) / 1);
    padding-bottom: calc(var(--spacer) / 1);
  }
  .md-h-1-1 {
    height: calc(var(--spacer) / 1);
  }
  .md-w-1-1 {
    width: calc(var(--spacer) / 1);
  }
  .md-m-1-2 {
    margin: calc(var(--spacer) / 2);
  }
  .md-mt-1-2 {
    margin-top: calc(var(--spacer) / 2);
  }
  .md-mb-1-2 {
    margin-bottom: calc(var(--spacer) / 2);
  }
  .md-ml-1-2 {
    margin-left: calc(var(--spacer) / 2);
  }
  .md-mr-1-2 {
    margin-right: calc(var(--spacer) / 2);
  }
  .md-mx-1-2 {
    margin-left: calc(var(--spacer) / 2);
    margin-right: calc(var(--spacer) / 2);
  }
  .md-my-1-2 {
    margin-top: calc(var(--spacer) / 2);
    margin-bottom: calc(var(--spacer) / 2);
  }
  .md-p-1-2 {
    padding: calc(var(--spacer) / 2);
  }
  .md-pt-1-2 {
    padding-top: calc(var(--spacer) / 2);
  }
  .md-pb-1-2 {
    padding-bottom: calc(var(--spacer) / 2);
  }
  .md-pl-1-2 {
    padding-left: calc(var(--spacer) / 2);
  }
  .md-pr-1-2 {
    padding-right: calc(var(--spacer) / 2);
  }
  .md-px-1-2 {
    padding-left: calc(var(--spacer) / 2);
    padding-right: calc(var(--spacer) / 2);
  }
  .md-py-1-2 {
    padding-top: calc(var(--spacer) / 2);
    padding-bottom: calc(var(--spacer) / 2);
  }
  .md-h-1-2 {
    height: calc(var(--spacer) / 2);
  }
  .md-w-1-2 {
    width: calc(var(--spacer) / 2);
  }
  .md-m-1-3 {
    margin: calc(var(--spacer) / 3);
  }
  .md-mt-1-3 {
    margin-top: calc(var(--spacer) / 3);
  }
  .md-mb-1-3 {
    margin-bottom: calc(var(--spacer) / 3);
  }
  .md-ml-1-3 {
    margin-left: calc(var(--spacer) / 3);
  }
  .md-mr-1-3 {
    margin-right: calc(var(--spacer) / 3);
  }
  .md-mx-1-3 {
    margin-left: calc(var(--spacer) / 3);
    margin-right: calc(var(--spacer) / 3);
  }
  .md-my-1-3 {
    margin-top: calc(var(--spacer) / 3);
    margin-bottom: calc(var(--spacer) / 3);
  }
  .md-p-1-3 {
    padding: calc(var(--spacer) / 3);
  }
  .md-pt-1-3 {
    padding-top: calc(var(--spacer) / 3);
  }
  .md-pb-1-3 {
    padding-bottom: calc(var(--spacer) / 3);
  }
  .md-pl-1-3 {
    padding-left: calc(var(--spacer) / 3);
  }
  .md-pr-1-3 {
    padding-right: calc(var(--spacer) / 3);
  }
  .md-px-1-3 {
    padding-left: calc(var(--spacer) / 3);
    padding-right: calc(var(--spacer) / 3);
  }
  .md-py-1-3 {
    padding-top: calc(var(--spacer) / 3);
    padding-bottom: calc(var(--spacer) / 3);
  }
  .md-h-1-3 {
    height: calc(var(--spacer) / 3);
  }
  .md-w-1-3 {
    width: calc(var(--spacer) / 3);
  }
  .md-m-1-4 {
    margin: calc(var(--spacer) / 4);
  }
  .md-mt-1-4 {
    margin-top: calc(var(--spacer) / 4);
  }
  .md-mb-1-4 {
    margin-bottom: calc(var(--spacer) / 4);
  }
  .md-ml-1-4 {
    margin-left: calc(var(--spacer) / 4);
  }
  .md-mr-1-4 {
    margin-right: calc(var(--spacer) / 4);
  }
  .md-mx-1-4 {
    margin-left: calc(var(--spacer) / 4);
    margin-right: calc(var(--spacer) / 4);
  }
  .md-my-1-4 {
    margin-top: calc(var(--spacer) / 4);
    margin-bottom: calc(var(--spacer) / 4);
  }
  .md-p-1-4 {
    padding: calc(var(--spacer) / 4);
  }
  .md-pt-1-4 {
    padding-top: calc(var(--spacer) / 4);
  }
  .md-pb-1-4 {
    padding-bottom: calc(var(--spacer) / 4);
  }
  .md-pl-1-4 {
    padding-left: calc(var(--spacer) / 4);
  }
  .md-pr-1-4 {
    padding-right: calc(var(--spacer) / 4);
  }
  .md-px-1-4 {
    padding-left: calc(var(--spacer) / 4);
    padding-right: calc(var(--spacer) / 4);
  }
  .md-py-1-4 {
    padding-top: calc(var(--spacer) / 4);
    padding-bottom: calc(var(--spacer) / 4);
  }
  .md-h-1-4 {
    height: calc(var(--spacer) / 4);
  }
  .md-w-1-4 {
    width: calc(var(--spacer) / 4);
  }
  .md-m-1-5 {
    margin: calc(var(--spacer) / 5);
  }
  .md-mt-1-5 {
    margin-top: calc(var(--spacer) / 5);
  }
  .md-mb-1-5 {
    margin-bottom: calc(var(--spacer) / 5);
  }
  .md-ml-1-5 {
    margin-left: calc(var(--spacer) / 5);
  }
  .md-mr-1-5 {
    margin-right: calc(var(--spacer) / 5);
  }
  .md-mx-1-5 {
    margin-left: calc(var(--spacer) / 5);
    margin-right: calc(var(--spacer) / 5);
  }
  .md-my-1-5 {
    margin-top: calc(var(--spacer) / 5);
    margin-bottom: calc(var(--spacer) / 5);
  }
  .md-p-1-5 {
    padding: calc(var(--spacer) / 5);
  }
  .md-pt-1-5 {
    padding-top: calc(var(--spacer) / 5);
  }
  .md-pb-1-5 {
    padding-bottom: calc(var(--spacer) / 5);
  }
  .md-pl-1-5 {
    padding-left: calc(var(--spacer) / 5);
  }
  .md-pr-1-5 {
    padding-right: calc(var(--spacer) / 5);
  }
  .md-px-1-5 {
    padding-left: calc(var(--spacer) / 5);
    padding-right: calc(var(--spacer) / 5);
  }
  .md-py-1-5 {
    padding-top: calc(var(--spacer) / 5);
    padding-bottom: calc(var(--spacer) / 5);
  }
  .md-h-1-5 {
    height: calc(var(--spacer) / 5);
  }
  .md-w-1-5 {
    width: calc(var(--spacer) / 5);
  }
  .md-m-1-6 {
    margin: calc(var(--spacer) / 6);
  }
  .md-mt-1-6 {
    margin-top: calc(var(--spacer) / 6);
  }
  .md-mb-1-6 {
    margin-bottom: calc(var(--spacer) / 6);
  }
  .md-ml-1-6 {
    margin-left: calc(var(--spacer) / 6);
  }
  .md-mr-1-6 {
    margin-right: calc(var(--spacer) / 6);
  }
  .md-mx-1-6 {
    margin-left: calc(var(--spacer) / 6);
    margin-right: calc(var(--spacer) / 6);
  }
  .md-my-1-6 {
    margin-top: calc(var(--spacer) / 6);
    margin-bottom: calc(var(--spacer) / 6);
  }
  .md-p-1-6 {
    padding: calc(var(--spacer) / 6);
  }
  .md-pt-1-6 {
    padding-top: calc(var(--spacer) / 6);
  }
  .md-pb-1-6 {
    padding-bottom: calc(var(--spacer) / 6);
  }
  .md-pl-1-6 {
    padding-left: calc(var(--spacer) / 6);
  }
  .md-pr-1-6 {
    padding-right: calc(var(--spacer) / 6);
  }
  .md-px-1-6 {
    padding-left: calc(var(--spacer) / 6);
    padding-right: calc(var(--spacer) / 6);
  }
  .md-py-1-6 {
    padding-top: calc(var(--spacer) / 6);
    padding-bottom: calc(var(--spacer) / 6);
  }
  .md-h-1-6 {
    height: calc(var(--spacer) / 6);
  }
  .md-w-1-6 {
    width: calc(var(--spacer) / 6);
  }
  .md-m-1-7 {
    margin: calc(var(--spacer) / 7);
  }
  .md-mt-1-7 {
    margin-top: calc(var(--spacer) / 7);
  }
  .md-mb-1-7 {
    margin-bottom: calc(var(--spacer) / 7);
  }
  .md-ml-1-7 {
    margin-left: calc(var(--spacer) / 7);
  }
  .md-mr-1-7 {
    margin-right: calc(var(--spacer) / 7);
  }
  .md-mx-1-7 {
    margin-left: calc(var(--spacer) / 7);
    margin-right: calc(var(--spacer) / 7);
  }
  .md-my-1-7 {
    margin-top: calc(var(--spacer) / 7);
    margin-bottom: calc(var(--spacer) / 7);
  }
  .md-p-1-7 {
    padding: calc(var(--spacer) / 7);
  }
  .md-pt-1-7 {
    padding-top: calc(var(--spacer) / 7);
  }
  .md-pb-1-7 {
    padding-bottom: calc(var(--spacer) / 7);
  }
  .md-pl-1-7 {
    padding-left: calc(var(--spacer) / 7);
  }
  .md-pr-1-7 {
    padding-right: calc(var(--spacer) / 7);
  }
  .md-px-1-7 {
    padding-left: calc(var(--spacer) / 7);
    padding-right: calc(var(--spacer) / 7);
  }
  .md-py-1-7 {
    padding-top: calc(var(--spacer) / 7);
    padding-bottom: calc(var(--spacer) / 7);
  }
  .md-h-1-7 {
    height: calc(var(--spacer) / 7);
  }
  .md-w-1-7 {
    width: calc(var(--spacer) / 7);
  }
  .md-m-2-1 {
    margin: calc(var(--spacer) * 2);
  }
  .md-mt-2-1 {
    margin-top: calc(var(--spacer) * 2);
  }
  .md-mb-2-1 {
    margin-bottom: calc(var(--spacer) * 2);
  }
  .md-ml-2-1 {
    margin-left: calc(var(--spacer) * 2);
  }
  .md-mr-2-1 {
    margin-right: calc(var(--spacer) * 2);
  }
  .md-mx-2-1 {
    margin-left: calc(var(--spacer) * 2);
    margin-right: calc(var(--spacer) * 2);
  }
  .md-my-2-1 {
    margin-top: calc(var(--spacer) * 2);
    margin-bottom: calc(var(--spacer) * 2);
  }
  .md-p-2-1 {
    padding: calc(var(--spacer) * 2);
  }
  .md-pt-2-1 {
    padding-top: calc(var(--spacer) * 2);
  }
  .md-pb-2-1 {
    padding-bottom: calc(var(--spacer) * 2);
  }
  .md-pl-2-1 {
    padding-left: calc(var(--spacer) * 2);
  }
  .md-pr-2-1 {
    padding-right: calc(var(--spacer) * 2);
  }
  .md-px-2-1 {
    padding-left: calc(var(--spacer) * 2);
    padding-right: calc(var(--spacer) * 2);
  }
  .md-py-2-1 {
    padding-top: calc(var(--spacer) * 2);
    padding-bottom: calc(var(--spacer) * 2);
  }
  .md-h-2-1 {
    height: calc(var(--spacer) * 2);
  }
  .md-w-2-1 {
    width: calc(var(--spacer) * 2);
  }
  .md-m-3-1 {
    margin: calc(var(--spacer) * 3);
  }
  .md-mt-3-1 {
    margin-top: calc(var(--spacer) * 3);
  }
  .md-mb-3-1 {
    margin-bottom: calc(var(--spacer) * 3);
  }
  .md-ml-3-1 {
    margin-left: calc(var(--spacer) * 3);
  }
  .md-mr-3-1 {
    margin-right: calc(var(--spacer) * 3);
  }
  .md-mx-3-1 {
    margin-left: calc(var(--spacer) * 3);
    margin-right: calc(var(--spacer) * 3);
  }
  .md-my-3-1 {
    margin-top: calc(var(--spacer) * 3);
    margin-bottom: calc(var(--spacer) * 3);
  }
  .md-p-3-1 {
    padding: calc(var(--spacer) * 3);
  }
  .md-pt-3-1 {
    padding-top: calc(var(--spacer) * 3);
  }
  .md-pb-3-1 {
    padding-bottom: calc(var(--spacer) * 3);
  }
  .md-pl-3-1 {
    padding-left: calc(var(--spacer) * 3);
  }
  .md-pr-3-1 {
    padding-right: calc(var(--spacer) * 3);
  }
  .md-px-3-1 {
    padding-left: calc(var(--spacer) * 3);
    padding-right: calc(var(--spacer) * 3);
  }
  .md-py-3-1 {
    padding-top: calc(var(--spacer) * 3);
    padding-bottom: calc(var(--spacer) * 3);
  }
  .md-h-3-1 {
    height: calc(var(--spacer) * 3);
  }
  .md-w-3-1 {
    width: calc(var(--spacer) * 3);
  }
  .md-m-4-1 {
    margin: calc(var(--spacer) * 4);
  }
  .md-mt-4-1 {
    margin-top: calc(var(--spacer) * 4);
  }
  .md-mb-4-1 {
    margin-bottom: calc(var(--spacer) * 4);
  }
  .md-ml-4-1 {
    margin-left: calc(var(--spacer) * 4);
  }
  .md-mr-4-1 {
    margin-right: calc(var(--spacer) * 4);
  }
  .md-mx-4-1 {
    margin-left: calc(var(--spacer) * 4);
    margin-right: calc(var(--spacer) * 4);
  }
  .md-my-4-1 {
    margin-top: calc(var(--spacer) * 4);
    margin-bottom: calc(var(--spacer) * 4);
  }
  .md-p-4-1 {
    padding: calc(var(--spacer) * 4);
  }
  .md-pt-4-1 {
    padding-top: calc(var(--spacer) * 4);
  }
  .md-pb-4-1 {
    padding-bottom: calc(var(--spacer) * 4);
  }
  .md-pl-4-1 {
    padding-left: calc(var(--spacer) * 4);
  }
  .md-pr-4-1 {
    padding-right: calc(var(--spacer) * 4);
  }
  .md-px-4-1 {
    padding-left: calc(var(--spacer) * 4);
    padding-right: calc(var(--spacer) * 4);
  }
  .md-py-4-1 {
    padding-top: calc(var(--spacer) * 4);
    padding-bottom: calc(var(--spacer) * 4);
  }
  .md-h-4-1 {
    height: calc(var(--spacer) * 4);
  }
  .md-w-4-1 {
    width: calc(var(--spacer) * 4);
  }
  .md-m-0 {
    margin: 0;
  }
  .md-mt-0 {
    margin-top: 0;
  }
  .md-mb-0 {
    margin-bottom: 0;
  }
  .md-ml-0 {
    margin-left: 0;
  }
  .md-mr-0 {
    margin-right: 0;
  }
  .md-mx-0 {
    margin-left: 0;
    margin-right: 0;
  }
  .md-my-0 {
    margin-top: 0;
    margin-bottom: 0;
  }
  .md-p-0 {
    padding: 0;
  }
  .md-pt-0 {
    padding-top: 0;
  }
  .md-pb-0 {
    padding-bottom: 0;
  }
  .md-pl-0 {
    padding-left: 0;
  }
  .md-pr-0 {
    padding-right: 0;
  }
  .md-px-0 {
    padding-left: 0;
    padding-right: 0;
  }
  .md-py-0 {
    padding-top: 0;
    padding-bottom: 0;
  }
  .md-h-0 {
    height: 0;
  }
  .md-w-0 {
    width: 0;
  }
  .md-grid__gutter--3-1 {
    margin-left: calc(var(--gutter) * -3);
    margin-right: calc(var(--gutter) * -3);
  }
  .md-grid__gutter--3-1 > * {
    padding-left: calc(var(--gutter) * 3);
    padding-right: calc(var(--gutter) * 3);
  }
  .md-grid__gutter--2-1 {
    margin-left: calc(var(--gutter) * -2);
    margin-right: calc(var(--gutter) * -2);
  }
  .md-grid__gutter--2-1 > * {
    padding-left: calc(var(--gutter) * 2);
    padding-right: calc(var(--gutter) * 2);
  }
  .md-grid__gutter {
    margin-left: calc(var(--gutter) * -1);
    margin-right: calc(var(--gutter) * -1);
  }
  .md-grid__gutter > * {
    padding-left: calc(var(--gutter) * 1);
    padding-right: calc(var(--gutter) * 1);
  }
  .md-grid__gutter--1-2 {
    margin-left: calc(var(--gutter) * -0.5);
    margin-right: calc(var(--gutter) * -0.5);
  }
  .md-grid__gutter--1-2 > * {
    padding-left: calc(var(--gutter) * 0.5);
    padding-right: calc(var(--gutter) * 0.5);
  }
  .md-grid__gutter--1-3 {
    margin-left: calc(var(--gutter) * -0.333);
    margin-right: calc(var(--gutter) * -0.333);
  }
  .md-grid__gutter--1-3 > * {
    padding-left: calc(var(--gutter) * 0.333);
    padding-right: calc(var(--gutter) * 0.333);
  }
  .md-grid__gutter--1-4 {
    margin-left: calc(var(--gutter) * -0.25);
    margin-right: calc(var(--gutter) * -0.25);
  }
  .md-grid__gutter--1-4 > * {
    padding-left: calc(var(--gutter) * 0.25);
    padding-right: calc(var(--gutter) * 0.25);
  }
  .md-row__row--12 {
    min-height: calc(var(--vh) * 100 / 12 * 12);
  }
  .md-row__row--11 {
    min-height: calc(var(--vh) * 100 / 12 * 11);
  }
  .md-row__row--10 {
    min-height: calc(var(--vh) * 100 / 12 * 10);
  }
  .md-row__row--9 {
    min-height: calc(var(--vh) * 100 / 12 * 9);
  }
  .md-row__row--8 {
    min-height: calc(var(--vh) * 100 / 12 * 8);
  }
  .md-row__row--7 {
    min-height: calc(var(--vh) * 100 / 12 * 7);
  }
  .md-row__row--6 {
    min-height: calc(var(--vh) * 100 / 12 * 6);
  }
  .md-row__row--5 {
    min-height: calc(var(--vh) * 100 / 12 * 5);
  }
  .md-row__row--4 {
    min-height: calc(var(--vh) * 100 / 12 * 4);
  }
  .md-row__row--3 {
    min-height: calc(var(--vh) * 100 / 12 * 3);
  }
  .md-row__row--2 {
    min-height: calc(var(--vh) * 100 / 12 * 2);
  }
  .md-row__row--1 {
    min-height: calc(var(--vh) * 100 / 12 * 1);
  }
  .md-col__col--12 {
    flex: 0 0 calc(100% * 12 / 12);
    max-width: calc(100% * 12 / 12);
  }
  .md-col__col--11 {
    flex: 0 0 calc(100% * 11 / 12);
    max-width: calc(100% * 11 / 12);
  }
  .md-col__col--10 {
    flex: 0 0 calc(100% * 10 / 12);
    max-width: calc(100% * 10 / 12);
  }
  .md-col__col--9 {
    flex: 0 0 calc(100% * 9 / 12);
    max-width: calc(100% * 9 / 12);
  }
  .md-col__col--8 {
    flex: 0 0 calc(100% * 8 / 12);
    max-width: calc(100% * 8 / 12);
  }
  .md-col__col--7 {
    flex: 0 0 calc(100% * 7 / 12);
    max-width: calc(100% * 7 / 12);
  }
  .md-col__col--6 {
    flex: 0 0 calc(100% * 6 / 12);
    max-width: calc(100% * 6 / 12);
  }
  .md-col__col--5 {
    flex: 0 0 calc(100% * 5 / 12);
    max-width: calc(100% * 5 / 12);
  }
  .md-col__col--4 {
    flex: 0 0 calc(100% * 4 / 12);
    max-width: calc(100% * 4 / 12);
  }
  .md-col__col--3 {
    flex: 0 0 calc(100% * 3 / 12);
    max-width: calc(100% * 3 / 12);
  }
  .md-col__col--2 {
    flex: 0 0 calc(100% * 2 / 12);
    max-width: calc(100% * 2 / 12);
  }
  .md-col__col--1 {
    flex: 0 0 calc(100% * 1 / 12);
    max-width: calc(100% * 1 / 12);
  }
  .md-flex__row, .md-flex__column {
    display: flex;
    flex-wrap: wrap;
  }
  .md-flex__row > *, .md-flex__column > * {
    flex-grow: 0;
  }
  .md-flex__row {
    flex-direction: row;
  }
  .md-flex__row-reverse {
    flex-direction: row-reverse;
  }
  .md-flex__column {
    flex-direction: column;
  }
  .md-flex__column-reverse {
    flex-direction: column-reverse;
  }
  .md-flex__nowrap {
    flex-wrap: nowrap;
  }
  .md-flex__wrap {
    flex-wrap: wrap;
  }
  .md-flex__align-items--center {
    align-items: center;
  }
  .md-flex__align-items--start {
    align-items: flex-start;
  }
  .md-flex__align-items--end {
    align-items: flex-end;
  }
  .md-flex__align-items--stretch {
    align-items: stretch;
  }
  .md-flex__justify-content--center {
    justify-content: center;
  }
  .md-flex__justify-content--start {
    justify-content: flex-start;
  }
  .md-flex__justify-content--end {
    justify-content: flex-end;
  }
  .md-flex__justify-content--spacein {
    justify-content: space-between;
  }
  .md-flex__justify-content--spaceout {
    justify-content: space-around;
  }
  .md-flex__align-self--center {
    align-self: center;
  }
  .md-flex__align-self--start {
    align-self: flex-start;
  }
  .md-flex__align-self--end {
    align-self: flex-end;
  }
  .md-flex__align-self--stretch {
    align-self: stretch;
  }
  .md-flex__align-self--selfstart {
    align-self: self-start;
  }
  .md-flex__align-self--selfend {
    align-self: self-end;
  }
  .md-flex__justify-self--center {
    justify-self: center;
  }
  .md-flex__justify-self--start {
    justify-self: flex-start;
  }
  .md-flex__justify-self--end {
    justify-self: flex-end;
  }
  .md-flex__justify-self--stretch {
    justify-self: stretch;
  }
  .md-flex__justify-self--selfstart {
    justify-self: self-start;
  }
  .md-flex__justify-self--selfend {
    justify-self: self-end;
  }
  .md-flex__justify-self--left {
    justify-self: left;
  }
  .md-flex__justify-self--right {
    justify-self: right;
  }
  .md-flex__flex-grow--1 {
    flex-grow: 1;
  }
  .md-flex__flex-grow--2 {
    flex-grow: 2;
  }
  .md-flex__flex-grow--3 {
    flex-grow: 3;
  }
  .md-flex__flex-grow--4 {
    flex-grow: 4;
  }
  .md-flex__flex-grow--5 {
    flex-grow: 5;
  }
  .md-flex__flex-grow--6 {
    flex-grow: 6;
  }
  .md-flex__flex-grow--7 {
    flex-grow: 7;
  }
  .md-flex__flex-grow--8 {
    flex-grow: 8;
  }
  .md-flex__flex-grow--9 {
    flex-grow: 9;
  }
  .md-flex__flex-grow--10 {
    flex-grow: 10;
  }
  .md-display__flex {
    display: flex;
  }
  .md-display__inline {
    display: inline;
  }
  .md-display__inline-block {
    display: inline-block;
  }
  .md-display__block {
    display: block;
  }
  .md-position__absolute {
    position: absolute;
  }
  .md-position__fixed {
    position: fixed;
  }
  .md-position__inherit {
    position: inherit;
  }
  .md-position__relative {
    position: relative;
  }
  .md-position__sticky {
    position: sticky;
  }
  .md-position__top--0 {
    top: 0;
  }
  .md-position__top--inherit {
    top: inherit;
  }
  .md-position__left--0 {
    left: 0;
  }
  .md-position__left--inherit {
    left: inherit;
  }
  .md-position__right--0 {
    right: 0;
  }
  .md-position__right--inherit {
    right: inherit;
  }
  .md-position__bottom--0 {
    bottom: 0;
  }
  .md-position__bottom--inherit {
    bottom: inherit;
  }
  [md*=text-center] {
    text-align: center;
  }
  [md*=text-left] {
    text-align: left;
  }
  [md*=text-right] {
    text-align: right;
  }
  [md*=text-justify] {
    text-align: justify;
  }
}
@media (min-width: 1441px) and (max-width: 10000px) {
  .lg-m-1-1 {
    margin: calc(var(--spacer) / 1);
  }
  .lg-mt-1-1 {
    margin-top: calc(var(--spacer) / 1);
  }
  .lg-mb-1-1 {
    margin-bottom: calc(var(--spacer) / 1);
  }
  .lg-ml-1-1 {
    margin-left: calc(var(--spacer) / 1);
  }
  .lg-mr-1-1 {
    margin-right: calc(var(--spacer) / 1);
  }
  .lg-mx-1-1 {
    margin-left: calc(var(--spacer) / 1);
    margin-right: calc(var(--spacer) / 1);
  }
  .lg-my-1-1 {
    margin-top: calc(var(--spacer) / 1);
    margin-bottom: calc(var(--spacer) / 1);
  }
  .lg-p-1-1 {
    padding: calc(var(--spacer) / 1);
  }
  .lg-pt-1-1 {
    padding-top: calc(var(--spacer) / 1);
  }
  .lg-pb-1-1 {
    padding-bottom: calc(var(--spacer) / 1);
  }
  .lg-pl-1-1 {
    padding-left: calc(var(--spacer) / 1);
  }
  .lg-pr-1-1 {
    padding-right: calc(var(--spacer) / 1);
  }
  .lg-px-1-1 {
    padding-left: calc(var(--spacer) / 1);
    padding-right: calc(var(--spacer) / 1);
  }
  .lg-py-1-1 {
    padding-top: calc(var(--spacer) / 1);
    padding-bottom: calc(var(--spacer) / 1);
  }
  .lg-h-1-1 {
    height: calc(var(--spacer) / 1);
  }
  .lg-w-1-1 {
    width: calc(var(--spacer) / 1);
  }
  .lg-m-1-2 {
    margin: calc(var(--spacer) / 2);
  }
  .lg-mt-1-2 {
    margin-top: calc(var(--spacer) / 2);
  }
  .lg-mb-1-2 {
    margin-bottom: calc(var(--spacer) / 2);
  }
  .lg-ml-1-2 {
    margin-left: calc(var(--spacer) / 2);
  }
  .lg-mr-1-2 {
    margin-right: calc(var(--spacer) / 2);
  }
  .lg-mx-1-2 {
    margin-left: calc(var(--spacer) / 2);
    margin-right: calc(var(--spacer) / 2);
  }
  .lg-my-1-2 {
    margin-top: calc(var(--spacer) / 2);
    margin-bottom: calc(var(--spacer) / 2);
  }
  .lg-p-1-2 {
    padding: calc(var(--spacer) / 2);
  }
  .lg-pt-1-2 {
    padding-top: calc(var(--spacer) / 2);
  }
  .lg-pb-1-2 {
    padding-bottom: calc(var(--spacer) / 2);
  }
  .lg-pl-1-2 {
    padding-left: calc(var(--spacer) / 2);
  }
  .lg-pr-1-2 {
    padding-right: calc(var(--spacer) / 2);
  }
  .lg-px-1-2 {
    padding-left: calc(var(--spacer) / 2);
    padding-right: calc(var(--spacer) / 2);
  }
  .lg-py-1-2 {
    padding-top: calc(var(--spacer) / 2);
    padding-bottom: calc(var(--spacer) / 2);
  }
  .lg-h-1-2 {
    height: calc(var(--spacer) / 2);
  }
  .lg-w-1-2 {
    width: calc(var(--spacer) / 2);
  }
  .lg-m-1-3 {
    margin: calc(var(--spacer) / 3);
  }
  .lg-mt-1-3 {
    margin-top: calc(var(--spacer) / 3);
  }
  .lg-mb-1-3 {
    margin-bottom: calc(var(--spacer) / 3);
  }
  .lg-ml-1-3 {
    margin-left: calc(var(--spacer) / 3);
  }
  .lg-mr-1-3 {
    margin-right: calc(var(--spacer) / 3);
  }
  .lg-mx-1-3 {
    margin-left: calc(var(--spacer) / 3);
    margin-right: calc(var(--spacer) / 3);
  }
  .lg-my-1-3 {
    margin-top: calc(var(--spacer) / 3);
    margin-bottom: calc(var(--spacer) / 3);
  }
  .lg-p-1-3 {
    padding: calc(var(--spacer) / 3);
  }
  .lg-pt-1-3 {
    padding-top: calc(var(--spacer) / 3);
  }
  .lg-pb-1-3 {
    padding-bottom: calc(var(--spacer) / 3);
  }
  .lg-pl-1-3 {
    padding-left: calc(var(--spacer) / 3);
  }
  .lg-pr-1-3 {
    padding-right: calc(var(--spacer) / 3);
  }
  .lg-px-1-3 {
    padding-left: calc(var(--spacer) / 3);
    padding-right: calc(var(--spacer) / 3);
  }
  .lg-py-1-3 {
    padding-top: calc(var(--spacer) / 3);
    padding-bottom: calc(var(--spacer) / 3);
  }
  .lg-h-1-3 {
    height: calc(var(--spacer) / 3);
  }
  .lg-w-1-3 {
    width: calc(var(--spacer) / 3);
  }
  .lg-m-1-4 {
    margin: calc(var(--spacer) / 4);
  }
  .lg-mt-1-4 {
    margin-top: calc(var(--spacer) / 4);
  }
  .lg-mb-1-4 {
    margin-bottom: calc(var(--spacer) / 4);
  }
  .lg-ml-1-4 {
    margin-left: calc(var(--spacer) / 4);
  }
  .lg-mr-1-4 {
    margin-right: calc(var(--spacer) / 4);
  }
  .lg-mx-1-4 {
    margin-left: calc(var(--spacer) / 4);
    margin-right: calc(var(--spacer) / 4);
  }
  .lg-my-1-4 {
    margin-top: calc(var(--spacer) / 4);
    margin-bottom: calc(var(--spacer) / 4);
  }
  .lg-p-1-4 {
    padding: calc(var(--spacer) / 4);
  }
  .lg-pt-1-4 {
    padding-top: calc(var(--spacer) / 4);
  }
  .lg-pb-1-4 {
    padding-bottom: calc(var(--spacer) / 4);
  }
  .lg-pl-1-4 {
    padding-left: calc(var(--spacer) / 4);
  }
  .lg-pr-1-4 {
    padding-right: calc(var(--spacer) / 4);
  }
  .lg-px-1-4 {
    padding-left: calc(var(--spacer) / 4);
    padding-right: calc(var(--spacer) / 4);
  }
  .lg-py-1-4 {
    padding-top: calc(var(--spacer) / 4);
    padding-bottom: calc(var(--spacer) / 4);
  }
  .lg-h-1-4 {
    height: calc(var(--spacer) / 4);
  }
  .lg-w-1-4 {
    width: calc(var(--spacer) / 4);
  }
  .lg-m-1-5 {
    margin: calc(var(--spacer) / 5);
  }
  .lg-mt-1-5 {
    margin-top: calc(var(--spacer) / 5);
  }
  .lg-mb-1-5 {
    margin-bottom: calc(var(--spacer) / 5);
  }
  .lg-ml-1-5 {
    margin-left: calc(var(--spacer) / 5);
  }
  .lg-mr-1-5 {
    margin-right: calc(var(--spacer) / 5);
  }
  .lg-mx-1-5 {
    margin-left: calc(var(--spacer) / 5);
    margin-right: calc(var(--spacer) / 5);
  }
  .lg-my-1-5 {
    margin-top: calc(var(--spacer) / 5);
    margin-bottom: calc(var(--spacer) / 5);
  }
  .lg-p-1-5 {
    padding: calc(var(--spacer) / 5);
  }
  .lg-pt-1-5 {
    padding-top: calc(var(--spacer) / 5);
  }
  .lg-pb-1-5 {
    padding-bottom: calc(var(--spacer) / 5);
  }
  .lg-pl-1-5 {
    padding-left: calc(var(--spacer) / 5);
  }
  .lg-pr-1-5 {
    padding-right: calc(var(--spacer) / 5);
  }
  .lg-px-1-5 {
    padding-left: calc(var(--spacer) / 5);
    padding-right: calc(var(--spacer) / 5);
  }
  .lg-py-1-5 {
    padding-top: calc(var(--spacer) / 5);
    padding-bottom: calc(var(--spacer) / 5);
  }
  .lg-h-1-5 {
    height: calc(var(--spacer) / 5);
  }
  .lg-w-1-5 {
    width: calc(var(--spacer) / 5);
  }
  .lg-m-1-6 {
    margin: calc(var(--spacer) / 6);
  }
  .lg-mt-1-6 {
    margin-top: calc(var(--spacer) / 6);
  }
  .lg-mb-1-6 {
    margin-bottom: calc(var(--spacer) / 6);
  }
  .lg-ml-1-6 {
    margin-left: calc(var(--spacer) / 6);
  }
  .lg-mr-1-6 {
    margin-right: calc(var(--spacer) / 6);
  }
  .lg-mx-1-6 {
    margin-left: calc(var(--spacer) / 6);
    margin-right: calc(var(--spacer) / 6);
  }
  .lg-my-1-6 {
    margin-top: calc(var(--spacer) / 6);
    margin-bottom: calc(var(--spacer) / 6);
  }
  .lg-p-1-6 {
    padding: calc(var(--spacer) / 6);
  }
  .lg-pt-1-6 {
    padding-top: calc(var(--spacer) / 6);
  }
  .lg-pb-1-6 {
    padding-bottom: calc(var(--spacer) / 6);
  }
  .lg-pl-1-6 {
    padding-left: calc(var(--spacer) / 6);
  }
  .lg-pr-1-6 {
    padding-right: calc(var(--spacer) / 6);
  }
  .lg-px-1-6 {
    padding-left: calc(var(--spacer) / 6);
    padding-right: calc(var(--spacer) / 6);
  }
  .lg-py-1-6 {
    padding-top: calc(var(--spacer) / 6);
    padding-bottom: calc(var(--spacer) / 6);
  }
  .lg-h-1-6 {
    height: calc(var(--spacer) / 6);
  }
  .lg-w-1-6 {
    width: calc(var(--spacer) / 6);
  }
  .lg-m-1-7 {
    margin: calc(var(--spacer) / 7);
  }
  .lg-mt-1-7 {
    margin-top: calc(var(--spacer) / 7);
  }
  .lg-mb-1-7 {
    margin-bottom: calc(var(--spacer) / 7);
  }
  .lg-ml-1-7 {
    margin-left: calc(var(--spacer) / 7);
  }
  .lg-mr-1-7 {
    margin-right: calc(var(--spacer) / 7);
  }
  .lg-mx-1-7 {
    margin-left: calc(var(--spacer) / 7);
    margin-right: calc(var(--spacer) / 7);
  }
  .lg-my-1-7 {
    margin-top: calc(var(--spacer) / 7);
    margin-bottom: calc(var(--spacer) / 7);
  }
  .lg-p-1-7 {
    padding: calc(var(--spacer) / 7);
  }
  .lg-pt-1-7 {
    padding-top: calc(var(--spacer) / 7);
  }
  .lg-pb-1-7 {
    padding-bottom: calc(var(--spacer) / 7);
  }
  .lg-pl-1-7 {
    padding-left: calc(var(--spacer) / 7);
  }
  .lg-pr-1-7 {
    padding-right: calc(var(--spacer) / 7);
  }
  .lg-px-1-7 {
    padding-left: calc(var(--spacer) / 7);
    padding-right: calc(var(--spacer) / 7);
  }
  .lg-py-1-7 {
    padding-top: calc(var(--spacer) / 7);
    padding-bottom: calc(var(--spacer) / 7);
  }
  .lg-h-1-7 {
    height: calc(var(--spacer) / 7);
  }
  .lg-w-1-7 {
    width: calc(var(--spacer) / 7);
  }
  .lg-m-2-1 {
    margin: calc(var(--spacer) * 2);
  }
  .lg-mt-2-1 {
    margin-top: calc(var(--spacer) * 2);
  }
  .lg-mb-2-1 {
    margin-bottom: calc(var(--spacer) * 2);
  }
  .lg-ml-2-1 {
    margin-left: calc(var(--spacer) * 2);
  }
  .lg-mr-2-1 {
    margin-right: calc(var(--spacer) * 2);
  }
  .lg-mx-2-1 {
    margin-left: calc(var(--spacer) * 2);
    margin-right: calc(var(--spacer) * 2);
  }
  .lg-my-2-1 {
    margin-top: calc(var(--spacer) * 2);
    margin-bottom: calc(var(--spacer) * 2);
  }
  .lg-p-2-1 {
    padding: calc(var(--spacer) * 2);
  }
  .lg-pt-2-1 {
    padding-top: calc(var(--spacer) * 2);
  }
  .lg-pb-2-1 {
    padding-bottom: calc(var(--spacer) * 2);
  }
  .lg-pl-2-1 {
    padding-left: calc(var(--spacer) * 2);
  }
  .lg-pr-2-1 {
    padding-right: calc(var(--spacer) * 2);
  }
  .lg-px-2-1 {
    padding-left: calc(var(--spacer) * 2);
    padding-right: calc(var(--spacer) * 2);
  }
  .lg-py-2-1 {
    padding-top: calc(var(--spacer) * 2);
    padding-bottom: calc(var(--spacer) * 2);
  }
  .lg-h-2-1 {
    height: calc(var(--spacer) * 2);
  }
  .lg-w-2-1 {
    width: calc(var(--spacer) * 2);
  }
  .lg-m-3-1 {
    margin: calc(var(--spacer) * 3);
  }
  .lg-mt-3-1 {
    margin-top: calc(var(--spacer) * 3);
  }
  .lg-mb-3-1 {
    margin-bottom: calc(var(--spacer) * 3);
  }
  .lg-ml-3-1 {
    margin-left: calc(var(--spacer) * 3);
  }
  .lg-mr-3-1 {
    margin-right: calc(var(--spacer) * 3);
  }
  .lg-mx-3-1 {
    margin-left: calc(var(--spacer) * 3);
    margin-right: calc(var(--spacer) * 3);
  }
  .lg-my-3-1 {
    margin-top: calc(var(--spacer) * 3);
    margin-bottom: calc(var(--spacer) * 3);
  }
  .lg-p-3-1 {
    padding: calc(var(--spacer) * 3);
  }
  .lg-pt-3-1 {
    padding-top: calc(var(--spacer) * 3);
  }
  .lg-pb-3-1 {
    padding-bottom: calc(var(--spacer) * 3);
  }
  .lg-pl-3-1 {
    padding-left: calc(var(--spacer) * 3);
  }
  .lg-pr-3-1 {
    padding-right: calc(var(--spacer) * 3);
  }
  .lg-px-3-1 {
    padding-left: calc(var(--spacer) * 3);
    padding-right: calc(var(--spacer) * 3);
  }
  .lg-py-3-1 {
    padding-top: calc(var(--spacer) * 3);
    padding-bottom: calc(var(--spacer) * 3);
  }
  .lg-h-3-1 {
    height: calc(var(--spacer) * 3);
  }
  .lg-w-3-1 {
    width: calc(var(--spacer) * 3);
  }
  .lg-m-4-1 {
    margin: calc(var(--spacer) * 4);
  }
  .lg-mt-4-1 {
    margin-top: calc(var(--spacer) * 4);
  }
  .lg-mb-4-1 {
    margin-bottom: calc(var(--spacer) * 4);
  }
  .lg-ml-4-1 {
    margin-left: calc(var(--spacer) * 4);
  }
  .lg-mr-4-1 {
    margin-right: calc(var(--spacer) * 4);
  }
  .lg-mx-4-1 {
    margin-left: calc(var(--spacer) * 4);
    margin-right: calc(var(--spacer) * 4);
  }
  .lg-my-4-1 {
    margin-top: calc(var(--spacer) * 4);
    margin-bottom: calc(var(--spacer) * 4);
  }
  .lg-p-4-1 {
    padding: calc(var(--spacer) * 4);
  }
  .lg-pt-4-1 {
    padding-top: calc(var(--spacer) * 4);
  }
  .lg-pb-4-1 {
    padding-bottom: calc(var(--spacer) * 4);
  }
  .lg-pl-4-1 {
    padding-left: calc(var(--spacer) * 4);
  }
  .lg-pr-4-1 {
    padding-right: calc(var(--spacer) * 4);
  }
  .lg-px-4-1 {
    padding-left: calc(var(--spacer) * 4);
    padding-right: calc(var(--spacer) * 4);
  }
  .lg-py-4-1 {
    padding-top: calc(var(--spacer) * 4);
    padding-bottom: calc(var(--spacer) * 4);
  }
  .lg-h-4-1 {
    height: calc(var(--spacer) * 4);
  }
  .lg-w-4-1 {
    width: calc(var(--spacer) * 4);
  }
  .lg-m-0 {
    margin: 0;
  }
  .lg-mt-0 {
    margin-top: 0;
  }
  .lg-mb-0 {
    margin-bottom: 0;
  }
  .lg-ml-0 {
    margin-left: 0;
  }
  .lg-mr-0 {
    margin-right: 0;
  }
  .lg-mx-0 {
    margin-left: 0;
    margin-right: 0;
  }
  .lg-my-0 {
    margin-top: 0;
    margin-bottom: 0;
  }
  .lg-p-0 {
    padding: 0;
  }
  .lg-pt-0 {
    padding-top: 0;
  }
  .lg-pb-0 {
    padding-bottom: 0;
  }
  .lg-pl-0 {
    padding-left: 0;
  }
  .lg-pr-0 {
    padding-right: 0;
  }
  .lg-px-0 {
    padding-left: 0;
    padding-right: 0;
  }
  .lg-py-0 {
    padding-top: 0;
    padding-bottom: 0;
  }
  .lg-h-0 {
    height: 0;
  }
  .lg-w-0 {
    width: 0;
  }
  .lg-grid__gutter--3-1 {
    margin-left: calc(var(--gutter) * -3);
    margin-right: calc(var(--gutter) * -3);
  }
  .lg-grid__gutter--3-1 > * {
    padding-left: calc(var(--gutter) * 3);
    padding-right: calc(var(--gutter) * 3);
  }
  .lg-grid__gutter--2-1 {
    margin-left: calc(var(--gutter) * -2);
    margin-right: calc(var(--gutter) * -2);
  }
  .lg-grid__gutter--2-1 > * {
    padding-left: calc(var(--gutter) * 2);
    padding-right: calc(var(--gutter) * 2);
  }
  .lg-grid__gutter {
    margin-left: calc(var(--gutter) * -1);
    margin-right: calc(var(--gutter) * -1);
  }
  .lg-grid__gutter > * {
    padding-left: calc(var(--gutter) * 1);
    padding-right: calc(var(--gutter) * 1);
  }
  .lg-grid__gutter--1-2 {
    margin-left: calc(var(--gutter) * -0.5);
    margin-right: calc(var(--gutter) * -0.5);
  }
  .lg-grid__gutter--1-2 > * {
    padding-left: calc(var(--gutter) * 0.5);
    padding-right: calc(var(--gutter) * 0.5);
  }
  .lg-grid__gutter--1-3 {
    margin-left: calc(var(--gutter) * -0.333);
    margin-right: calc(var(--gutter) * -0.333);
  }
  .lg-grid__gutter--1-3 > * {
    padding-left: calc(var(--gutter) * 0.333);
    padding-right: calc(var(--gutter) * 0.333);
  }
  .lg-grid__gutter--1-4 {
    margin-left: calc(var(--gutter) * -0.25);
    margin-right: calc(var(--gutter) * -0.25);
  }
  .lg-grid__gutter--1-4 > * {
    padding-left: calc(var(--gutter) * 0.25);
    padding-right: calc(var(--gutter) * 0.25);
  }
  .lg-row__row--12 {
    min-height: calc(var(--vh) * 100 / 12 * 12);
  }
  .lg-row__row--11 {
    min-height: calc(var(--vh) * 100 / 12 * 11);
  }
  .lg-row__row--10 {
    min-height: calc(var(--vh) * 100 / 12 * 10);
  }
  .lg-row__row--9 {
    min-height: calc(var(--vh) * 100 / 12 * 9);
  }
  .lg-row__row--8 {
    min-height: calc(var(--vh) * 100 / 12 * 8);
  }
  .lg-row__row--7 {
    min-height: calc(var(--vh) * 100 / 12 * 7);
  }
  .lg-row__row--6 {
    min-height: calc(var(--vh) * 100 / 12 * 6);
  }
  .lg-row__row--5 {
    min-height: calc(var(--vh) * 100 / 12 * 5);
  }
  .lg-row__row--4 {
    min-height: calc(var(--vh) * 100 / 12 * 4);
  }
  .lg-row__row--3 {
    min-height: calc(var(--vh) * 100 / 12 * 3);
  }
  .lg-row__row--2 {
    min-height: calc(var(--vh) * 100 / 12 * 2);
  }
  .lg-row__row--1 {
    min-height: calc(var(--vh) * 100 / 12 * 1);
  }
  .lg-col__col--12 {
    flex: 0 0 calc(100% * 12 / 12);
    max-width: calc(100% * 12 / 12);
  }
  .lg-col__col--11 {
    flex: 0 0 calc(100% * 11 / 12);
    max-width: calc(100% * 11 / 12);
  }
  .lg-col__col--10 {
    flex: 0 0 calc(100% * 10 / 12);
    max-width: calc(100% * 10 / 12);
  }
  .lg-col__col--9 {
    flex: 0 0 calc(100% * 9 / 12);
    max-width: calc(100% * 9 / 12);
  }
  .lg-col__col--8 {
    flex: 0 0 calc(100% * 8 / 12);
    max-width: calc(100% * 8 / 12);
  }
  .lg-col__col--7 {
    flex: 0 0 calc(100% * 7 / 12);
    max-width: calc(100% * 7 / 12);
  }
  .lg-col__col--6 {
    flex: 0 0 calc(100% * 6 / 12);
    max-width: calc(100% * 6 / 12);
  }
  .lg-col__col--5 {
    flex: 0 0 calc(100% * 5 / 12);
    max-width: calc(100% * 5 / 12);
  }
  .lg-col__col--4 {
    flex: 0 0 calc(100% * 4 / 12);
    max-width: calc(100% * 4 / 12);
  }
  .lg-col__col--3 {
    flex: 0 0 calc(100% * 3 / 12);
    max-width: calc(100% * 3 / 12);
  }
  .lg-col__col--2 {
    flex: 0 0 calc(100% * 2 / 12);
    max-width: calc(100% * 2 / 12);
  }
  .lg-col__col--1 {
    flex: 0 0 calc(100% * 1 / 12);
    max-width: calc(100% * 1 / 12);
  }
  .lg-flex__row, .lg-flex__column {
    display: flex;
    flex-wrap: wrap;
  }
  .lg-flex__row > *, .lg-flex__column > * {
    flex-grow: 0;
  }
  .lg-flex__row {
    flex-direction: row;
  }
  .lg-flex__row-reverse {
    flex-direction: row-reverse;
  }
  .lg-flex__column {
    flex-direction: column;
  }
  .lg-flex__column-reverse {
    flex-direction: column-reverse;
  }
  .lg-flex__nowrap {
    flex-wrap: nowrap;
  }
  .lg-flex__wrap {
    flex-wrap: wrap;
  }
  .lg-flex__align-items--center {
    align-items: center;
  }
  .lg-flex__align-items--start {
    align-items: flex-start;
  }
  .lg-flex__align-items--end {
    align-items: flex-end;
  }
  .lg-flex__align-items--stretch {
    align-items: stretch;
  }
  .lg-flex__justify-content--center {
    justify-content: center;
  }
  .lg-flex__justify-content--start {
    justify-content: flex-start;
  }
  .lg-flex__justify-content--end {
    justify-content: flex-end;
  }
  .lg-flex__justify-content--spacein {
    justify-content: space-between;
  }
  .lg-flex__justify-content--spaceout {
    justify-content: space-around;
  }
  .lg-flex__align-self--center {
    align-self: center;
  }
  .lg-flex__align-self--start {
    align-self: flex-start;
  }
  .lg-flex__align-self--end {
    align-self: flex-end;
  }
  .lg-flex__align-self--stretch {
    align-self: stretch;
  }
  .lg-flex__align-self--selfstart {
    align-self: self-start;
  }
  .lg-flex__align-self--selfend {
    align-self: self-end;
  }
  .lg-flex__justify-self--center {
    justify-self: center;
  }
  .lg-flex__justify-self--start {
    justify-self: flex-start;
  }
  .lg-flex__justify-self--end {
    justify-self: flex-end;
  }
  .lg-flex__justify-self--stretch {
    justify-self: stretch;
  }
  .lg-flex__justify-self--selfstart {
    justify-self: self-start;
  }
  .lg-flex__justify-self--selfend {
    justify-self: self-end;
  }
  .lg-flex__justify-self--left {
    justify-self: left;
  }
  .lg-flex__justify-self--right {
    justify-self: right;
  }
  .lg-flex__flex-grow--1 {
    flex-grow: 1;
  }
  .lg-flex__flex-grow--2 {
    flex-grow: 2;
  }
  .lg-flex__flex-grow--3 {
    flex-grow: 3;
  }
  .lg-flex__flex-grow--4 {
    flex-grow: 4;
  }
  .lg-flex__flex-grow--5 {
    flex-grow: 5;
  }
  .lg-flex__flex-grow--6 {
    flex-grow: 6;
  }
  .lg-flex__flex-grow--7 {
    flex-grow: 7;
  }
  .lg-flex__flex-grow--8 {
    flex-grow: 8;
  }
  .lg-flex__flex-grow--9 {
    flex-grow: 9;
  }
  .lg-flex__flex-grow--10 {
    flex-grow: 10;
  }
  .lg-display__flex {
    display: flex;
  }
  .lg-display__inline {
    display: inline;
  }
  .lg-display__inline-block {
    display: inline-block;
  }
  .lg-display__block {
    display: block;
  }
  .lg-position__absolute {
    position: absolute;
  }
  .lg-position__fixed {
    position: fixed;
  }
  .lg-position__inherit {
    position: inherit;
  }
  .lg-position__relative {
    position: relative;
  }
  .lg-position__sticky {
    position: sticky;
  }
  .lg-position__top--0 {
    top: 0;
  }
  .lg-position__top--inherit {
    top: inherit;
  }
  .lg-position__left--0 {
    left: 0;
  }
  .lg-position__left--inherit {
    left: inherit;
  }
  .lg-position__right--0 {
    right: 0;
  }
  .lg-position__right--inherit {
    right: inherit;
  }
  .lg-position__bottom--0 {
    bottom: 0;
  }
  .lg-position__bottom--inherit {
    bottom: inherit;
  }
  [lg*=text-center] {
    text-align: center;
  }
  [lg*=text-left] {
    text-align: left;
  }
  [lg*=text-right] {
    text-align: right;
  }
  [lg*=text-justify] {
    text-align: justify;
  }
}
@media (min-width: 1921px) and (max-width: 10000px) {
  .xl-m-1-1 {
    margin: calc(var(--spacer) / 1);
  }
  .xl-mt-1-1 {
    margin-top: calc(var(--spacer) / 1);
  }
  .xl-mb-1-1 {
    margin-bottom: calc(var(--spacer) / 1);
  }
  .xl-ml-1-1 {
    margin-left: calc(var(--spacer) / 1);
  }
  .xl-mr-1-1 {
    margin-right: calc(var(--spacer) / 1);
  }
  .xl-mx-1-1 {
    margin-left: calc(var(--spacer) / 1);
    margin-right: calc(var(--spacer) / 1);
  }
  .xl-my-1-1 {
    margin-top: calc(var(--spacer) / 1);
    margin-bottom: calc(var(--spacer) / 1);
  }
  .xl-p-1-1 {
    padding: calc(var(--spacer) / 1);
  }
  .xl-pt-1-1 {
    padding-top: calc(var(--spacer) / 1);
  }
  .xl-pb-1-1 {
    padding-bottom: calc(var(--spacer) / 1);
  }
  .xl-pl-1-1 {
    padding-left: calc(var(--spacer) / 1);
  }
  .xl-pr-1-1 {
    padding-right: calc(var(--spacer) / 1);
  }
  .xl-px-1-1 {
    padding-left: calc(var(--spacer) / 1);
    padding-right: calc(var(--spacer) / 1);
  }
  .xl-py-1-1 {
    padding-top: calc(var(--spacer) / 1);
    padding-bottom: calc(var(--spacer) / 1);
  }
  .xl-h-1-1 {
    height: calc(var(--spacer) / 1);
  }
  .xl-w-1-1 {
    width: calc(var(--spacer) / 1);
  }
  .xl-m-1-2 {
    margin: calc(var(--spacer) / 2);
  }
  .xl-mt-1-2 {
    margin-top: calc(var(--spacer) / 2);
  }
  .xl-mb-1-2 {
    margin-bottom: calc(var(--spacer) / 2);
  }
  .xl-ml-1-2 {
    margin-left: calc(var(--spacer) / 2);
  }
  .xl-mr-1-2 {
    margin-right: calc(var(--spacer) / 2);
  }
  .xl-mx-1-2 {
    margin-left: calc(var(--spacer) / 2);
    margin-right: calc(var(--spacer) / 2);
  }
  .xl-my-1-2 {
    margin-top: calc(var(--spacer) / 2);
    margin-bottom: calc(var(--spacer) / 2);
  }
  .xl-p-1-2 {
    padding: calc(var(--spacer) / 2);
  }
  .xl-pt-1-2 {
    padding-top: calc(var(--spacer) / 2);
  }
  .xl-pb-1-2 {
    padding-bottom: calc(var(--spacer) / 2);
  }
  .xl-pl-1-2 {
    padding-left: calc(var(--spacer) / 2);
  }
  .xl-pr-1-2 {
    padding-right: calc(var(--spacer) / 2);
  }
  .xl-px-1-2 {
    padding-left: calc(var(--spacer) / 2);
    padding-right: calc(var(--spacer) / 2);
  }
  .xl-py-1-2 {
    padding-top: calc(var(--spacer) / 2);
    padding-bottom: calc(var(--spacer) / 2);
  }
  .xl-h-1-2 {
    height: calc(var(--spacer) / 2);
  }
  .xl-w-1-2 {
    width: calc(var(--spacer) / 2);
  }
  .xl-m-1-3 {
    margin: calc(var(--spacer) / 3);
  }
  .xl-mt-1-3 {
    margin-top: calc(var(--spacer) / 3);
  }
  .xl-mb-1-3 {
    margin-bottom: calc(var(--spacer) / 3);
  }
  .xl-ml-1-3 {
    margin-left: calc(var(--spacer) / 3);
  }
  .xl-mr-1-3 {
    margin-right: calc(var(--spacer) / 3);
  }
  .xl-mx-1-3 {
    margin-left: calc(var(--spacer) / 3);
    margin-right: calc(var(--spacer) / 3);
  }
  .xl-my-1-3 {
    margin-top: calc(var(--spacer) / 3);
    margin-bottom: calc(var(--spacer) / 3);
  }
  .xl-p-1-3 {
    padding: calc(var(--spacer) / 3);
  }
  .xl-pt-1-3 {
    padding-top: calc(var(--spacer) / 3);
  }
  .xl-pb-1-3 {
    padding-bottom: calc(var(--spacer) / 3);
  }
  .xl-pl-1-3 {
    padding-left: calc(var(--spacer) / 3);
  }
  .xl-pr-1-3 {
    padding-right: calc(var(--spacer) / 3);
  }
  .xl-px-1-3 {
    padding-left: calc(var(--spacer) / 3);
    padding-right: calc(var(--spacer) / 3);
  }
  .xl-py-1-3 {
    padding-top: calc(var(--spacer) / 3);
    padding-bottom: calc(var(--spacer) / 3);
  }
  .xl-h-1-3 {
    height: calc(var(--spacer) / 3);
  }
  .xl-w-1-3 {
    width: calc(var(--spacer) / 3);
  }
  .xl-m-1-4 {
    margin: calc(var(--spacer) / 4);
  }
  .xl-mt-1-4 {
    margin-top: calc(var(--spacer) / 4);
  }
  .xl-mb-1-4 {
    margin-bottom: calc(var(--spacer) / 4);
  }
  .xl-ml-1-4 {
    margin-left: calc(var(--spacer) / 4);
  }
  .xl-mr-1-4 {
    margin-right: calc(var(--spacer) / 4);
  }
  .xl-mx-1-4 {
    margin-left: calc(var(--spacer) / 4);
    margin-right: calc(var(--spacer) / 4);
  }
  .xl-my-1-4 {
    margin-top: calc(var(--spacer) / 4);
    margin-bottom: calc(var(--spacer) / 4);
  }
  .xl-p-1-4 {
    padding: calc(var(--spacer) / 4);
  }
  .xl-pt-1-4 {
    padding-top: calc(var(--spacer) / 4);
  }
  .xl-pb-1-4 {
    padding-bottom: calc(var(--spacer) / 4);
  }
  .xl-pl-1-4 {
    padding-left: calc(var(--spacer) / 4);
  }
  .xl-pr-1-4 {
    padding-right: calc(var(--spacer) / 4);
  }
  .xl-px-1-4 {
    padding-left: calc(var(--spacer) / 4);
    padding-right: calc(var(--spacer) / 4);
  }
  .xl-py-1-4 {
    padding-top: calc(var(--spacer) / 4);
    padding-bottom: calc(var(--spacer) / 4);
  }
  .xl-h-1-4 {
    height: calc(var(--spacer) / 4);
  }
  .xl-w-1-4 {
    width: calc(var(--spacer) / 4);
  }
  .xl-m-1-5 {
    margin: calc(var(--spacer) / 5);
  }
  .xl-mt-1-5 {
    margin-top: calc(var(--spacer) / 5);
  }
  .xl-mb-1-5 {
    margin-bottom: calc(var(--spacer) / 5);
  }
  .xl-ml-1-5 {
    margin-left: calc(var(--spacer) / 5);
  }
  .xl-mr-1-5 {
    margin-right: calc(var(--spacer) / 5);
  }
  .xl-mx-1-5 {
    margin-left: calc(var(--spacer) / 5);
    margin-right: calc(var(--spacer) / 5);
  }
  .xl-my-1-5 {
    margin-top: calc(var(--spacer) / 5);
    margin-bottom: calc(var(--spacer) / 5);
  }
  .xl-p-1-5 {
    padding: calc(var(--spacer) / 5);
  }
  .xl-pt-1-5 {
    padding-top: calc(var(--spacer) / 5);
  }
  .xl-pb-1-5 {
    padding-bottom: calc(var(--spacer) / 5);
  }
  .xl-pl-1-5 {
    padding-left: calc(var(--spacer) / 5);
  }
  .xl-pr-1-5 {
    padding-right: calc(var(--spacer) / 5);
  }
  .xl-px-1-5 {
    padding-left: calc(var(--spacer) / 5);
    padding-right: calc(var(--spacer) / 5);
  }
  .xl-py-1-5 {
    padding-top: calc(var(--spacer) / 5);
    padding-bottom: calc(var(--spacer) / 5);
  }
  .xl-h-1-5 {
    height: calc(var(--spacer) / 5);
  }
  .xl-w-1-5 {
    width: calc(var(--spacer) / 5);
  }
  .xl-m-1-6 {
    margin: calc(var(--spacer) / 6);
  }
  .xl-mt-1-6 {
    margin-top: calc(var(--spacer) / 6);
  }
  .xl-mb-1-6 {
    margin-bottom: calc(var(--spacer) / 6);
  }
  .xl-ml-1-6 {
    margin-left: calc(var(--spacer) / 6);
  }
  .xl-mr-1-6 {
    margin-right: calc(var(--spacer) / 6);
  }
  .xl-mx-1-6 {
    margin-left: calc(var(--spacer) / 6);
    margin-right: calc(var(--spacer) / 6);
  }
  .xl-my-1-6 {
    margin-top: calc(var(--spacer) / 6);
    margin-bottom: calc(var(--spacer) / 6);
  }
  .xl-p-1-6 {
    padding: calc(var(--spacer) / 6);
  }
  .xl-pt-1-6 {
    padding-top: calc(var(--spacer) / 6);
  }
  .xl-pb-1-6 {
    padding-bottom: calc(var(--spacer) / 6);
  }
  .xl-pl-1-6 {
    padding-left: calc(var(--spacer) / 6);
  }
  .xl-pr-1-6 {
    padding-right: calc(var(--spacer) / 6);
  }
  .xl-px-1-6 {
    padding-left: calc(var(--spacer) / 6);
    padding-right: calc(var(--spacer) / 6);
  }
  .xl-py-1-6 {
    padding-top: calc(var(--spacer) / 6);
    padding-bottom: calc(var(--spacer) / 6);
  }
  .xl-h-1-6 {
    height: calc(var(--spacer) / 6);
  }
  .xl-w-1-6 {
    width: calc(var(--spacer) / 6);
  }
  .xl-m-1-7 {
    margin: calc(var(--spacer) / 7);
  }
  .xl-mt-1-7 {
    margin-top: calc(var(--spacer) / 7);
  }
  .xl-mb-1-7 {
    margin-bottom: calc(var(--spacer) / 7);
  }
  .xl-ml-1-7 {
    margin-left: calc(var(--spacer) / 7);
  }
  .xl-mr-1-7 {
    margin-right: calc(var(--spacer) / 7);
  }
  .xl-mx-1-7 {
    margin-left: calc(var(--spacer) / 7);
    margin-right: calc(var(--spacer) / 7);
  }
  .xl-my-1-7 {
    margin-top: calc(var(--spacer) / 7);
    margin-bottom: calc(var(--spacer) / 7);
  }
  .xl-p-1-7 {
    padding: calc(var(--spacer) / 7);
  }
  .xl-pt-1-7 {
    padding-top: calc(var(--spacer) / 7);
  }
  .xl-pb-1-7 {
    padding-bottom: calc(var(--spacer) / 7);
  }
  .xl-pl-1-7 {
    padding-left: calc(var(--spacer) / 7);
  }
  .xl-pr-1-7 {
    padding-right: calc(var(--spacer) / 7);
  }
  .xl-px-1-7 {
    padding-left: calc(var(--spacer) / 7);
    padding-right: calc(var(--spacer) / 7);
  }
  .xl-py-1-7 {
    padding-top: calc(var(--spacer) / 7);
    padding-bottom: calc(var(--spacer) / 7);
  }
  .xl-h-1-7 {
    height: calc(var(--spacer) / 7);
  }
  .xl-w-1-7 {
    width: calc(var(--spacer) / 7);
  }
  .xl-m-2-1 {
    margin: calc(var(--spacer) * 2);
  }
  .xl-mt-2-1 {
    margin-top: calc(var(--spacer) * 2);
  }
  .xl-mb-2-1 {
    margin-bottom: calc(var(--spacer) * 2);
  }
  .xl-ml-2-1 {
    margin-left: calc(var(--spacer) * 2);
  }
  .xl-mr-2-1 {
    margin-right: calc(var(--spacer) * 2);
  }
  .xl-mx-2-1 {
    margin-left: calc(var(--spacer) * 2);
    margin-right: calc(var(--spacer) * 2);
  }
  .xl-my-2-1 {
    margin-top: calc(var(--spacer) * 2);
    margin-bottom: calc(var(--spacer) * 2);
  }
  .xl-p-2-1 {
    padding: calc(var(--spacer) * 2);
  }
  .xl-pt-2-1 {
    padding-top: calc(var(--spacer) * 2);
  }
  .xl-pb-2-1 {
    padding-bottom: calc(var(--spacer) * 2);
  }
  .xl-pl-2-1 {
    padding-left: calc(var(--spacer) * 2);
  }
  .xl-pr-2-1 {
    padding-right: calc(var(--spacer) * 2);
  }
  .xl-px-2-1 {
    padding-left: calc(var(--spacer) * 2);
    padding-right: calc(var(--spacer) * 2);
  }
  .xl-py-2-1 {
    padding-top: calc(var(--spacer) * 2);
    padding-bottom: calc(var(--spacer) * 2);
  }
  .xl-h-2-1 {
    height: calc(var(--spacer) * 2);
  }
  .xl-w-2-1 {
    width: calc(var(--spacer) * 2);
  }
  .xl-m-3-1 {
    margin: calc(var(--spacer) * 3);
  }
  .xl-mt-3-1 {
    margin-top: calc(var(--spacer) * 3);
  }
  .xl-mb-3-1 {
    margin-bottom: calc(var(--spacer) * 3);
  }
  .xl-ml-3-1 {
    margin-left: calc(var(--spacer) * 3);
  }
  .xl-mr-3-1 {
    margin-right: calc(var(--spacer) * 3);
  }
  .xl-mx-3-1 {
    margin-left: calc(var(--spacer) * 3);
    margin-right: calc(var(--spacer) * 3);
  }
  .xl-my-3-1 {
    margin-top: calc(var(--spacer) * 3);
    margin-bottom: calc(var(--spacer) * 3);
  }
  .xl-p-3-1 {
    padding: calc(var(--spacer) * 3);
  }
  .xl-pt-3-1 {
    padding-top: calc(var(--spacer) * 3);
  }
  .xl-pb-3-1 {
    padding-bottom: calc(var(--spacer) * 3);
  }
  .xl-pl-3-1 {
    padding-left: calc(var(--spacer) * 3);
  }
  .xl-pr-3-1 {
    padding-right: calc(var(--spacer) * 3);
  }
  .xl-px-3-1 {
    padding-left: calc(var(--spacer) * 3);
    padding-right: calc(var(--spacer) * 3);
  }
  .xl-py-3-1 {
    padding-top: calc(var(--spacer) * 3);
    padding-bottom: calc(var(--spacer) * 3);
  }
  .xl-h-3-1 {
    height: calc(var(--spacer) * 3);
  }
  .xl-w-3-1 {
    width: calc(var(--spacer) * 3);
  }
  .xl-m-4-1 {
    margin: calc(var(--spacer) * 4);
  }
  .xl-mt-4-1 {
    margin-top: calc(var(--spacer) * 4);
  }
  .xl-mb-4-1 {
    margin-bottom: calc(var(--spacer) * 4);
  }
  .xl-ml-4-1 {
    margin-left: calc(var(--spacer) * 4);
  }
  .xl-mr-4-1 {
    margin-right: calc(var(--spacer) * 4);
  }
  .xl-mx-4-1 {
    margin-left: calc(var(--spacer) * 4);
    margin-right: calc(var(--spacer) * 4);
  }
  .xl-my-4-1 {
    margin-top: calc(var(--spacer) * 4);
    margin-bottom: calc(var(--spacer) * 4);
  }
  .xl-p-4-1 {
    padding: calc(var(--spacer) * 4);
  }
  .xl-pt-4-1 {
    padding-top: calc(var(--spacer) * 4);
  }
  .xl-pb-4-1 {
    padding-bottom: calc(var(--spacer) * 4);
  }
  .xl-pl-4-1 {
    padding-left: calc(var(--spacer) * 4);
  }
  .xl-pr-4-1 {
    padding-right: calc(var(--spacer) * 4);
  }
  .xl-px-4-1 {
    padding-left: calc(var(--spacer) * 4);
    padding-right: calc(var(--spacer) * 4);
  }
  .xl-py-4-1 {
    padding-top: calc(var(--spacer) * 4);
    padding-bottom: calc(var(--spacer) * 4);
  }
  .xl-h-4-1 {
    height: calc(var(--spacer) * 4);
  }
  .xl-w-4-1 {
    width: calc(var(--spacer) * 4);
  }
  .xl-m-0 {
    margin: 0;
  }
  .xl-mt-0 {
    margin-top: 0;
  }
  .xl-mb-0 {
    margin-bottom: 0;
  }
  .xl-ml-0 {
    margin-left: 0;
  }
  .xl-mr-0 {
    margin-right: 0;
  }
  .xl-mx-0 {
    margin-left: 0;
    margin-right: 0;
  }
  .xl-my-0 {
    margin-top: 0;
    margin-bottom: 0;
  }
  .xl-p-0 {
    padding: 0;
  }
  .xl-pt-0 {
    padding-top: 0;
  }
  .xl-pb-0 {
    padding-bottom: 0;
  }
  .xl-pl-0 {
    padding-left: 0;
  }
  .xl-pr-0 {
    padding-right: 0;
  }
  .xl-px-0 {
    padding-left: 0;
    padding-right: 0;
  }
  .xl-py-0 {
    padding-top: 0;
    padding-bottom: 0;
  }
  .xl-h-0 {
    height: 0;
  }
  .xl-w-0 {
    width: 0;
  }
  .xl-grid__gutter--3-1 {
    margin-left: calc(var(--gutter) * -3);
    margin-right: calc(var(--gutter) * -3);
  }
  .xl-grid__gutter--3-1 > * {
    padding-left: calc(var(--gutter) * 3);
    padding-right: calc(var(--gutter) * 3);
  }
  .xl-grid__gutter--2-1 {
    margin-left: calc(var(--gutter) * -2);
    margin-right: calc(var(--gutter) * -2);
  }
  .xl-grid__gutter--2-1 > * {
    padding-left: calc(var(--gutter) * 2);
    padding-right: calc(var(--gutter) * 2);
  }
  .xl-grid__gutter {
    margin-left: calc(var(--gutter) * -1);
    margin-right: calc(var(--gutter) * -1);
  }
  .xl-grid__gutter > * {
    padding-left: calc(var(--gutter) * 1);
    padding-right: calc(var(--gutter) * 1);
  }
  .xl-grid__gutter--1-2 {
    margin-left: calc(var(--gutter) * -0.5);
    margin-right: calc(var(--gutter) * -0.5);
  }
  .xl-grid__gutter--1-2 > * {
    padding-left: calc(var(--gutter) * 0.5);
    padding-right: calc(var(--gutter) * 0.5);
  }
  .xl-grid__gutter--1-3 {
    margin-left: calc(var(--gutter) * -0.333);
    margin-right: calc(var(--gutter) * -0.333);
  }
  .xl-grid__gutter--1-3 > * {
    padding-left: calc(var(--gutter) * 0.333);
    padding-right: calc(var(--gutter) * 0.333);
  }
  .xl-grid__gutter--1-4 {
    margin-left: calc(var(--gutter) * -0.25);
    margin-right: calc(var(--gutter) * -0.25);
  }
  .xl-grid__gutter--1-4 > * {
    padding-left: calc(var(--gutter) * 0.25);
    padding-right: calc(var(--gutter) * 0.25);
  }
  .xl-row__row--12 {
    min-height: calc(var(--vh) * 100 / 12 * 12);
  }
  .xl-row__row--11 {
    min-height: calc(var(--vh) * 100 / 12 * 11);
  }
  .xl-row__row--10 {
    min-height: calc(var(--vh) * 100 / 12 * 10);
  }
  .xl-row__row--9 {
    min-height: calc(var(--vh) * 100 / 12 * 9);
  }
  .xl-row__row--8 {
    min-height: calc(var(--vh) * 100 / 12 * 8);
  }
  .xl-row__row--7 {
    min-height: calc(var(--vh) * 100 / 12 * 7);
  }
  .xl-row__row--6 {
    min-height: calc(var(--vh) * 100 / 12 * 6);
  }
  .xl-row__row--5 {
    min-height: calc(var(--vh) * 100 / 12 * 5);
  }
  .xl-row__row--4 {
    min-height: calc(var(--vh) * 100 / 12 * 4);
  }
  .xl-row__row--3 {
    min-height: calc(var(--vh) * 100 / 12 * 3);
  }
  .xl-row__row--2 {
    min-height: calc(var(--vh) * 100 / 12 * 2);
  }
  .xl-row__row--1 {
    min-height: calc(var(--vh) * 100 / 12 * 1);
  }
  .xl-col__col--12 {
    flex: 0 0 calc(100% * 12 / 12);
    max-width: calc(100% * 12 / 12);
  }
  .xl-col__col--11 {
    flex: 0 0 calc(100% * 11 / 12);
    max-width: calc(100% * 11 / 12);
  }
  .xl-col__col--10 {
    flex: 0 0 calc(100% * 10 / 12);
    max-width: calc(100% * 10 / 12);
  }
  .xl-col__col--9 {
    flex: 0 0 calc(100% * 9 / 12);
    max-width: calc(100% * 9 / 12);
  }
  .xl-col__col--8 {
    flex: 0 0 calc(100% * 8 / 12);
    max-width: calc(100% * 8 / 12);
  }
  .xl-col__col--7 {
    flex: 0 0 calc(100% * 7 / 12);
    max-width: calc(100% * 7 / 12);
  }
  .xl-col__col--6 {
    flex: 0 0 calc(100% * 6 / 12);
    max-width: calc(100% * 6 / 12);
  }
  .xl-col__col--5 {
    flex: 0 0 calc(100% * 5 / 12);
    max-width: calc(100% * 5 / 12);
  }
  .xl-col__col--4 {
    flex: 0 0 calc(100% * 4 / 12);
    max-width: calc(100% * 4 / 12);
  }
  .xl-col__col--3 {
    flex: 0 0 calc(100% * 3 / 12);
    max-width: calc(100% * 3 / 12);
  }
  .xl-col__col--2 {
    flex: 0 0 calc(100% * 2 / 12);
    max-width: calc(100% * 2 / 12);
  }
  .xl-col__col--1 {
    flex: 0 0 calc(100% * 1 / 12);
    max-width: calc(100% * 1 / 12);
  }
  .xl-flex__row, .xl-flex__column {
    display: flex;
    flex-wrap: wrap;
  }
  .xl-flex__row > *, .xl-flex__column > * {
    flex-grow: 0;
  }
  .xl-flex__row {
    flex-direction: row;
  }
  .xl-flex__row-reverse {
    flex-direction: row-reverse;
  }
  .xl-flex__column {
    flex-direction: column;
  }
  .xl-flex__column-reverse {
    flex-direction: column-reverse;
  }
  .xl-flex__nowrap {
    flex-wrap: nowrap;
  }
  .xl-flex__wrap {
    flex-wrap: wrap;
  }
  .xl-flex__align-items--center {
    align-items: center;
  }
  .xl-flex__align-items--start {
    align-items: flex-start;
  }
  .xl-flex__align-items--end {
    align-items: flex-end;
  }
  .xl-flex__align-items--stretch {
    align-items: stretch;
  }
  .xl-flex__justify-content--center {
    justify-content: center;
  }
  .xl-flex__justify-content--start {
    justify-content: flex-start;
  }
  .xl-flex__justify-content--end {
    justify-content: flex-end;
  }
  .xl-flex__justify-content--spacein {
    justify-content: space-between;
  }
  .xl-flex__justify-content--spaceout {
    justify-content: space-around;
  }
  .xl-flex__align-self--center {
    align-self: center;
  }
  .xl-flex__align-self--start {
    align-self: flex-start;
  }
  .xl-flex__align-self--end {
    align-self: flex-end;
  }
  .xl-flex__align-self--stretch {
    align-self: stretch;
  }
  .xl-flex__align-self--selfstart {
    align-self: self-start;
  }
  .xl-flex__align-self--selfend {
    align-self: self-end;
  }
  .xl-flex__justify-self--center {
    justify-self: center;
  }
  .xl-flex__justify-self--start {
    justify-self: flex-start;
  }
  .xl-flex__justify-self--end {
    justify-self: flex-end;
  }
  .xl-flex__justify-self--stretch {
    justify-self: stretch;
  }
  .xl-flex__justify-self--selfstart {
    justify-self: self-start;
  }
  .xl-flex__justify-self--selfend {
    justify-self: self-end;
  }
  .xl-flex__justify-self--left {
    justify-self: left;
  }
  .xl-flex__justify-self--right {
    justify-self: right;
  }
  .xl-flex__flex-grow--1 {
    flex-grow: 1;
  }
  .xl-flex__flex-grow--2 {
    flex-grow: 2;
  }
  .xl-flex__flex-grow--3 {
    flex-grow: 3;
  }
  .xl-flex__flex-grow--4 {
    flex-grow: 4;
  }
  .xl-flex__flex-grow--5 {
    flex-grow: 5;
  }
  .xl-flex__flex-grow--6 {
    flex-grow: 6;
  }
  .xl-flex__flex-grow--7 {
    flex-grow: 7;
  }
  .xl-flex__flex-grow--8 {
    flex-grow: 8;
  }
  .xl-flex__flex-grow--9 {
    flex-grow: 9;
  }
  .xl-flex__flex-grow--10 {
    flex-grow: 10;
  }
  .xl-display__flex {
    display: flex;
  }
  .xl-display__inline {
    display: inline;
  }
  .xl-display__inline-block {
    display: inline-block;
  }
  .xl-display__block {
    display: block;
  }
  .xl-position__absolute {
    position: absolute;
  }
  .xl-position__fixed {
    position: fixed;
  }
  .xl-position__inherit {
    position: inherit;
  }
  .xl-position__relative {
    position: relative;
  }
  .xl-position__sticky {
    position: sticky;
  }
  .xl-position__top--0 {
    top: 0;
  }
  .xl-position__top--inherit {
    top: inherit;
  }
  .xl-position__left--0 {
    left: 0;
  }
  .xl-position__left--inherit {
    left: inherit;
  }
  .xl-position__right--0 {
    right: 0;
  }
  .xl-position__right--inherit {
    right: inherit;
  }
  .xl-position__bottom--0 {
    bottom: 0;
  }
  .xl-position__bottom--inherit {
    bottom: inherit;
  }
  [xl*=text-center] {
    text-align: center;
  }
  [xl*=text-left] {
    text-align: left;
  }
  [xl*=text-right] {
    text-align: right;
  }
  [xl*=text-justify] {
    text-align: justify;
  }
}
.video-16-9,
.video-container {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  background-color: black;
  /*get-color(third, 500);*/
  border-radius: calc(var(--spacer) * 0.5);
  overflow: hidden;
}
@media (min-width: 0px) and (max-width: 1200px) {
  .video-16-9,
  .video-container {
    border-radius: calc(var(--spacer) * 0.5);
    overflow: hidden;
  }
}
@media (min-width: 0px) and (max-width: 1200px) and (orientation:landscape) {
  .video-16-9,
  .video-container {
    border-radius: calc(var(--spacer) * 0.5);
    overflow: hidden;
  }
}
@media (min-width: 768px) and (max-width: 1200px) {
  .video-16-9,
  .video-container {
    border-radius: calc(var(--spacer) * 0.5);
    overflow: hidden;
  }
}
@media (min-width: 768px) and (max-width: 1200px) and (orientation:landscape) {
  .video-16-9,
  .video-container {
    border-radius: calc(var(--spacer) * 0.5);
    overflow: hidden;
  }
}
@media (min-width: 1201px) and (max-width: 10000px) {
  .video-16-9,
  .video-container {
    border-radius: calc(var(--spacer) * 0.5);
    overflow: hidden;
  }
}
@media (min-width: 1441px) and (max-width: 10000px) {
  .video-16-9,
  .video-container {
    border-radius: calc(var(--spacer) * 0.5);
    overflow: hidden;
  }
}
@media (min-width: 1921px) and (max-width: 10000px) {
  .video-16-9,
  .video-container {
    border-radius: calc(var(--spacer) * 0.5);
    overflow: hidden;
  }
}

.video-button-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.video-button-wrapper button {
  pointer-events: all;
  border-radius: 50%;
  background-clip: content-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  text-align: center;
  cursor: pointer;
  border: 3px solid rgba(var(--color-accent-500), 1);
  width: calc(var(--spacer) * 2.25);
  height: calc(var(--spacer) * 2.25);
  padding: calc(var(--spacer) * 0.333);
}
.video-button-wrapper button:hover {
  background-color: rgba(var(--color-accent-500), 1);
  background-clip: border-box;
  border-color: rgba(var(--color-accent-500), 1);
}
.video-button-wrapper button:hover path {
  fill: #fff;
}
.video-button-wrapper button:hover {
  transition: background-color 0.3s ease 0s;
}
.video-button-wrapper button.icon-pause, .video-button-wrapper button.icon-pause + button {
  opacity: 0;
  pointer-events: none;
}
.video-button-wrapper button svg {
  margin-right: calc(var(--spacer) * -0.15);
  width: calc(var(--spacer) * 0.666);
  height: calc(var(--spacer) * 0.666);
}

code {
  background-color: rgba(var(--color-primary-400), 1);
  color: rgb(var(--color-primary-contrast-400));
  border-radius: calc(var(--spacer) * 0.25);
  padding: calc(var(--spacer) * 0.1) calc(var(--spacer) * 0.25);
  font-size: 0.9em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
}

:root {
  --color-table-bg:white;
  --color-table-text: rgba(var(--color-primary-500), 1);
  --color-table-border: rgba(var(--color-primary-500), 1);
  --color-table-bg-alt: rgba(var(--color-primary-100), 1);
  --color-table-text-alt: rgb(var(--color-primary-contrast-100));
  --color-table-hover-bg: rgba(var(--color-primary-600), 1);
  --color-table-hover-text: rgb(var(--color-primary-contrast-600));
  --color-table-dark-bg: rgba(var(--color-primary-500), 1);
  --color-table-dark-text: rgb(var(--color-primary-contrast-500));
  --color-table-dark-border: rgb(var(--color-primary-contrast-500));
  --color-table-dark-bg-alt: rgba(var(--color-primary-500), 1);
  --color-table-dark-text-alt: rgb(var(--color-primary-contrast-500));
  --color-table-dark-hover-bg: rgba(var(--color-primary-600), 1);
  --color-table-dark-hover-text: rgb(var(--color-primary-contrast-600));
}

.table {
  width: 100%;
  margin-bottom: 1rem;
  color: var(--color-table-text);
}
.table th,
.table td {
  padding: calc(var(--spacer) * 0.33);
  vertical-align: middle;
  text-align: left;
  border-top: 1px solid var(--color-table-border);
  background-color: var(--color-table-bg);
}
.table thead th {
  vertical-align: middle;
  border-bottom: 2px solid var(--color-table-border);
  font-weight: bold;
}
.table tbody + tbody {
  border-top: 2px solid var(--color-table-border);
}

.table-striped tbody tr:nth-of-type(odd) {
  background-color: var(--color-table-bg-alt);
  color: var(--color-table-text-alt);
}

.table-hover tbody tr:hover td {
  background-color: var(--color-table-hover-bg);
  color: var(--color-table-hover-text);
  border-color: var(--color-table-hover-text);
}

.table-bordered {
  border: 1px solid var(--color-table-border);
}
.table-bordered th,
.table-bordered td {
  border: 1px solid var(--color-table-border);
}

.table-sm th,
.table-sm td {
  padding: calc(var(--spacer) * 0.125);
  font-size: 0.9em;
}

.table-responsive {
  display: block;
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.table-dark th,
.table-dark td,
.table-dark thead th {
  border-color: var(--color-table-dark-border);
  color: var(--color-table-dark-text);
  background-color: var(--color-table-dark-bg);
}
.table-dark tbody + tbody {
  border-top: 2px solid var(--color-table-dark-border);
}
.table-dark .table-striped tbody tr:nth-of-type(odd) {
  background-color: var(--color-table-dark-bg-alt);
  color: var(--color-table-dark-text-alt);
}
.table-dark .table-hover tbody tr:hover {
  background-color: var(--color-table-dark-hover-bg);
  color: var(--color-table-dark-hover-text);
}

.btn, button {
  position: relative;
  z-index: 1;
  text-align: center;
  cursor: pointer;
  outline: none;
  font-weight: 700;
  display: inline-flex;
  font-family: var(--text-font-default);
  line-height: 1.4;
  border: 2px solid;
  border-radius: calc(var(--spacer) * 0.25);
  margin: calc(var(--spacer) * 0.1) 0;
  font-size: 1em;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s ease 0s;
  padding: calc(var(--spacer) * 0.4) calc(var(--spacer) * 1);
  font-size: 1em;
}
.btn .material-icons, button .material-icons {
  font-size: 1.5em;
}
@media (min-width: 0px) and (max-width: 1200px) {
  .btn, button {
    padding: calc(var(--spacer) * 0.25) calc(var(--spacer) * 0.25);
    font-size: 0.9em;
  }
}
@media (min-width: 0px) and (max-width: 1200px) and (orientation:landscape) {
  .btn, button {
    padding: calc(var(--spacer) * 0.25) calc(var(--spacer) * 0.25);
    font-size: 0.9em;
  }
}
@media (min-width: 768px) and (max-width: 1200px) {
  .btn, button {
    padding: calc(var(--spacer) * 0.25) calc(var(--spacer) * 0.25);
    font-size: 0.9em;
  }
}
@media (min-width: 768px) and (max-width: 1200px) and (orientation:landscape) {
  .btn, button {
    padding: calc(var(--spacer) * 0.25) calc(var(--spacer) * 0.25);
    font-size: 0.9em;
  }
}
.btn:hover, button:hover {
  transition: all 0.3s ease 0s;
  background: linear-gradient(135deg, #30c5f0, #ff66b2, #ffd873);
  color: white;
  border-color: rgba(var(--color-primary-500), 1);
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
}
.btn:disabled, button:disabled {
  pointer-events: none;
}
.btn:disabled:after, button:disabled:after {
  background: rgba(var(--color-lgray-500), 1);
}
.btn[class*=btn-outline-], button[class*=btn-outline-] {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  margin: calc(var(--spacer) * 0.25) 0;
  border-style: solid;
  border-width: 2px;
}
.btn [class*=icons], button [class*=icons] {
  margin-right: calc(var(--spacer) * 0.25);
}
.btn svg:last-child, button svg:last-child {
  margin-left: calc(var(--spacer) * 0.25);
}
.btn svg:first-child, button svg:first-child {
  margin-right: calc(var(--spacer) * 0.25);
}
.btn.btn-primary-100, button.btn-primary-100 {
  background-color: rgba(var(--color-primary-100), 1);
  color: rgb(var(--color-primary-contrast-100));
  border-color: rgba(var(--color-primary-100), 1);
}
.btn.btn-primary-100:hover, button.btn-primary-100:hover {
  background-color: rgba(var(--color-primary-200), 1);
  color: rgb(var(--color-primary-contrast-200));
  border-color: rgba(var(--color-primary-200), 1);
}
.btn.btn-outline-primary-100, button.btn-outline-primary-100 {
  border-color: rgba(var(--color-primary-100), 1);
  color: rgba(var(--color-primary-100), 1);
}
.btn.btn-outline-primary-100:hover, button.btn-outline-primary-100:hover {
  color: rgba(var(--color-primary-200), 1);
  border-color: rgba(var(--color-primary-200), 1);
}
.btn.btn-primary-200, button.btn-primary-200 {
  background-color: rgba(var(--color-primary-200), 1);
  color: rgb(var(--color-primary-contrast-200));
  border-color: rgba(var(--color-primary-200), 1);
}
.btn.btn-primary-200:hover, button.btn-primary-200:hover {
  background-color: rgba(var(--color-primary-300), 1);
  color: rgb(var(--color-primary-contrast-300));
  border-color: rgba(var(--color-primary-300), 1);
}
.btn.btn-outline-primary-200, button.btn-outline-primary-200 {
  border-color: rgba(var(--color-primary-200), 1);
  color: rgba(var(--color-primary-200), 1);
}
.btn.btn-outline-primary-200:hover, button.btn-outline-primary-200:hover {
  color: rgba(var(--color-primary-300), 1);
  border-color: rgba(var(--color-primary-300), 1);
}
.btn.btn-primary-300, button.btn-primary-300 {
  background-color: rgba(var(--color-primary-300), 1);
  color: rgb(var(--color-primary-contrast-300));
  border-color: rgba(var(--color-primary-300), 1);
}
.btn.btn-primary-300:hover, button.btn-primary-300:hover {
  background-color: rgba(var(--color-primary-400), 1);
  color: rgb(var(--color-primary-contrast-400));
  border-color: rgba(var(--color-primary-400), 1);
}
.btn.btn-outline-primary-300, button.btn-outline-primary-300 {
  border-color: rgba(var(--color-primary-300), 1);
  color: rgba(var(--color-primary-300), 1);
}
.btn.btn-outline-primary-300:hover, button.btn-outline-primary-300:hover {
  color: rgba(var(--color-primary-400), 1);
  border-color: rgba(var(--color-primary-400), 1);
}
.btn.btn-primary-400, button.btn-primary-400 {
  background-color: rgba(var(--color-primary-400), 1);
  color: rgb(var(--color-primary-contrast-400));
  border-color: rgba(var(--color-primary-400), 1);
}
.btn.btn-primary-400:hover, button.btn-primary-400:hover {
  background-color: rgba(var(--color-primary-500), 1);
  color: rgb(var(--color-primary-contrast-500));
  border-color: rgba(var(--color-primary-500), 1);
}
.btn.btn-outline-primary-400, button.btn-outline-primary-400 {
  border-color: rgba(var(--color-primary-400), 1);
  color: rgba(var(--color-primary-400), 1);
}
.btn.btn-outline-primary-400:hover, button.btn-outline-primary-400:hover {
  color: rgba(var(--color-primary-500), 1);
  border-color: rgba(var(--color-primary-500), 1);
}
.btn.btn-primary-500, button.btn-primary-500 {
  background-color: rgba(var(--color-primary-500), 1);
  color: rgb(var(--color-primary-contrast-500));
  border-color: rgba(var(--color-primary-500), 1);
}
.btn.btn-primary-500:hover, button.btn-primary-500:hover {
  background-color: rgba(var(--color-primary-600), 1);
  color: rgb(var(--color-primary-contrast-600));
  border-color: rgba(var(--color-primary-600), 1);
}
.btn.btn-outline-primary-500, button.btn-outline-primary-500 {
  border-color: rgba(var(--color-primary-500), 1);
  color: rgba(var(--color-primary-500), 1);
}
.btn.btn-outline-primary-500:hover, button.btn-outline-primary-500:hover {
  color: rgba(var(--color-primary-600), 1);
  border-color: rgba(var(--color-primary-600), 1);
}
.btn.btn-primary-600, button.btn-primary-600 {
  background-color: rgba(var(--color-primary-600), 1);
  color: rgb(var(--color-primary-contrast-600));
  border-color: rgba(var(--color-primary-600), 1);
}
.btn.btn-primary-600:hover, button.btn-primary-600:hover {
  background-color: rgba(var(--color-primary-700), 1);
  color: rgb(var(--color-primary-contrast-700));
  border-color: rgba(var(--color-primary-700), 1);
}
.btn.btn-outline-primary-600, button.btn-outline-primary-600 {
  border-color: rgba(var(--color-primary-600), 1);
  color: rgba(var(--color-primary-600), 1);
}
.btn.btn-outline-primary-600:hover, button.btn-outline-primary-600:hover {
  color: rgba(var(--color-primary-700), 1);
  border-color: rgba(var(--color-primary-700), 1);
}
.btn.btn-primary-700, button.btn-primary-700 {
  background-color: rgba(var(--color-primary-700), 1);
  color: rgb(var(--color-primary-contrast-700));
  border-color: rgba(var(--color-primary-700), 1);
}
.btn.btn-primary-700:hover, button.btn-primary-700:hover {
  background-color: rgba(var(--color-primary-800), 1);
  color: rgb(var(--color-primary-contrast-800));
  border-color: rgba(var(--color-primary-800), 1);
}
.btn.btn-outline-primary-700, button.btn-outline-primary-700 {
  border-color: rgba(var(--color-primary-700), 1);
  color: rgba(var(--color-primary-700), 1);
}
.btn.btn-outline-primary-700:hover, button.btn-outline-primary-700:hover {
  color: rgba(var(--color-primary-800), 1);
  border-color: rgba(var(--color-primary-800), 1);
}
.btn.btn-primary-800, button.btn-primary-800 {
  background-color: rgba(var(--color-primary-800), 1);
  color: rgb(var(--color-primary-contrast-800));
  border-color: rgba(var(--color-primary-800), 1);
}
.btn.btn-primary-800:hover, button.btn-primary-800:hover {
  background-color: rgba(var(--color-primary-900), 1);
  color: rgb(var(--color-primary-contrast-900));
  border-color: rgba(var(--color-primary-900), 1);
}
.btn.btn-outline-primary-800, button.btn-outline-primary-800 {
  border-color: rgba(var(--color-primary-800), 1);
  color: rgba(var(--color-primary-800), 1);
}
.btn.btn-outline-primary-800:hover, button.btn-outline-primary-800:hover {
  color: rgba(var(--color-primary-900), 1);
  border-color: rgba(var(--color-primary-900), 1);
}
.btn.btn-primary-900, button.btn-primary-900 {
  background-color: rgba(var(--color-primary-900), 1);
  color: rgb(var(--color-primary-contrast-900));
  border-color: rgba(var(--color-primary-900), 1);
}
.btn.btn-primary-900:hover, button.btn-primary-900:hover {
  background-color: rgba(var(--color-primary-1000), 1);
  color: rgb(var(--color-primary-contrast-1000));
  border-color: rgba(var(--color-primary-1000), 1);
}
.btn.btn-outline-primary-900, button.btn-outline-primary-900 {
  border-color: rgba(var(--color-primary-900), 1);
  color: rgba(var(--color-primary-900), 1);
}
.btn.btn-outline-primary-900:hover, button.btn-outline-primary-900:hover {
  color: rgba(var(--color-primary-1000), 1);
  border-color: rgba(var(--color-primary-1000), 1);
}
.btn.btn-secondary-100, button.btn-secondary-100 {
  background-color: rgba(var(--color-secondary-100), 1);
  color: rgb(var(--color-secondary-contrast-100));
  border-color: rgba(var(--color-secondary-100), 1);
}
.btn.btn-secondary-100:hover, button.btn-secondary-100:hover {
  background-color: rgba(var(--color-secondary-200), 1);
  color: rgb(var(--color-secondary-contrast-200));
  border-color: rgba(var(--color-secondary-200), 1);
}
.btn.btn-outline-secondary-100, button.btn-outline-secondary-100 {
  border-color: rgba(var(--color-secondary-100), 1);
  color: rgba(var(--color-secondary-100), 1);
}
.btn.btn-outline-secondary-100:hover, button.btn-outline-secondary-100:hover {
  color: rgba(var(--color-secondary-200), 1);
  border-color: rgba(var(--color-secondary-200), 1);
}
.btn.btn-secondary-200, button.btn-secondary-200 {
  background-color: rgba(var(--color-secondary-200), 1);
  color: rgb(var(--color-secondary-contrast-200));
  border-color: rgba(var(--color-secondary-200), 1);
}
.btn.btn-secondary-200:hover, button.btn-secondary-200:hover {
  background-color: rgba(var(--color-secondary-300), 1);
  color: rgb(var(--color-secondary-contrast-300));
  border-color: rgba(var(--color-secondary-300), 1);
}
.btn.btn-outline-secondary-200, button.btn-outline-secondary-200 {
  border-color: rgba(var(--color-secondary-200), 1);
  color: rgba(var(--color-secondary-200), 1);
}
.btn.btn-outline-secondary-200:hover, button.btn-outline-secondary-200:hover {
  color: rgba(var(--color-secondary-300), 1);
  border-color: rgba(var(--color-secondary-300), 1);
}
.btn.btn-secondary-300, button.btn-secondary-300 {
  background-color: rgba(var(--color-secondary-300), 1);
  color: rgb(var(--color-secondary-contrast-300));
  border-color: rgba(var(--color-secondary-300), 1);
}
.btn.btn-secondary-300:hover, button.btn-secondary-300:hover {
  background-color: rgba(var(--color-secondary-400), 1);
  color: rgb(var(--color-secondary-contrast-400));
  border-color: rgba(var(--color-secondary-400), 1);
}
.btn.btn-outline-secondary-300, button.btn-outline-secondary-300 {
  border-color: rgba(var(--color-secondary-300), 1);
  color: rgba(var(--color-secondary-300), 1);
}
.btn.btn-outline-secondary-300:hover, button.btn-outline-secondary-300:hover {
  color: rgba(var(--color-secondary-400), 1);
  border-color: rgba(var(--color-secondary-400), 1);
}
.btn.btn-secondary-400, button.btn-secondary-400 {
  background-color: rgba(var(--color-secondary-400), 1);
  color: rgb(var(--color-secondary-contrast-400));
  border-color: rgba(var(--color-secondary-400), 1);
}
.btn.btn-secondary-400:hover, button.btn-secondary-400:hover {
  background-color: rgba(var(--color-secondary-500), 1);
  color: rgb(var(--color-secondary-contrast-500));
  border-color: rgba(var(--color-secondary-500), 1);
}
.btn.btn-outline-secondary-400, button.btn-outline-secondary-400 {
  border-color: rgba(var(--color-secondary-400), 1);
  color: rgba(var(--color-secondary-400), 1);
}
.btn.btn-outline-secondary-400:hover, button.btn-outline-secondary-400:hover {
  color: rgba(var(--color-secondary-500), 1);
  border-color: rgba(var(--color-secondary-500), 1);
}
.btn.btn-secondary-500, button.btn-secondary-500 {
  background-color: rgba(var(--color-secondary-500), 1);
  color: rgb(var(--color-secondary-contrast-500));
  border-color: rgba(var(--color-secondary-500), 1);
}
.btn.btn-secondary-500:hover, button.btn-secondary-500:hover {
  background-color: rgba(var(--color-secondary-600), 1);
  color: rgb(var(--color-secondary-contrast-600));
  border-color: rgba(var(--color-secondary-600), 1);
}
.btn.btn-outline-secondary-500, button.btn-outline-secondary-500 {
  border-color: rgba(var(--color-secondary-500), 1);
  color: rgba(var(--color-secondary-500), 1);
}
.btn.btn-outline-secondary-500:hover, button.btn-outline-secondary-500:hover {
  color: rgba(var(--color-secondary-600), 1);
  border-color: rgba(var(--color-secondary-600), 1);
}
.btn.btn-secondary-600, button.btn-secondary-600 {
  background-color: rgba(var(--color-secondary-600), 1);
  color: rgb(var(--color-secondary-contrast-600));
  border-color: rgba(var(--color-secondary-600), 1);
}
.btn.btn-secondary-600:hover, button.btn-secondary-600:hover {
  background-color: rgba(var(--color-secondary-700), 1);
  color: rgb(var(--color-secondary-contrast-700));
  border-color: rgba(var(--color-secondary-700), 1);
}
.btn.btn-outline-secondary-600, button.btn-outline-secondary-600 {
  border-color: rgba(var(--color-secondary-600), 1);
  color: rgba(var(--color-secondary-600), 1);
}
.btn.btn-outline-secondary-600:hover, button.btn-outline-secondary-600:hover {
  color: rgba(var(--color-secondary-700), 1);
  border-color: rgba(var(--color-secondary-700), 1);
}
.btn.btn-secondary-700, button.btn-secondary-700 {
  background-color: rgba(var(--color-secondary-700), 1);
  color: rgb(var(--color-secondary-contrast-700));
  border-color: rgba(var(--color-secondary-700), 1);
}
.btn.btn-secondary-700:hover, button.btn-secondary-700:hover {
  background-color: rgba(var(--color-secondary-800), 1);
  color: rgb(var(--color-secondary-contrast-800));
  border-color: rgba(var(--color-secondary-800), 1);
}
.btn.btn-outline-secondary-700, button.btn-outline-secondary-700 {
  border-color: rgba(var(--color-secondary-700), 1);
  color: rgba(var(--color-secondary-700), 1);
}
.btn.btn-outline-secondary-700:hover, button.btn-outline-secondary-700:hover {
  color: rgba(var(--color-secondary-800), 1);
  border-color: rgba(var(--color-secondary-800), 1);
}
.btn.btn-secondary-800, button.btn-secondary-800 {
  background-color: rgba(var(--color-secondary-800), 1);
  color: rgb(var(--color-secondary-contrast-800));
  border-color: rgba(var(--color-secondary-800), 1);
}
.btn.btn-secondary-800:hover, button.btn-secondary-800:hover {
  background-color: rgba(var(--color-secondary-900), 1);
  color: rgb(var(--color-secondary-contrast-900));
  border-color: rgba(var(--color-secondary-900), 1);
}
.btn.btn-outline-secondary-800, button.btn-outline-secondary-800 {
  border-color: rgba(var(--color-secondary-800), 1);
  color: rgba(var(--color-secondary-800), 1);
}
.btn.btn-outline-secondary-800:hover, button.btn-outline-secondary-800:hover {
  color: rgba(var(--color-secondary-900), 1);
  border-color: rgba(var(--color-secondary-900), 1);
}
.btn.btn-secondary-900, button.btn-secondary-900 {
  background-color: rgba(var(--color-secondary-900), 1);
  color: rgb(var(--color-secondary-contrast-900));
  border-color: rgba(var(--color-secondary-900), 1);
}
.btn.btn-secondary-900:hover, button.btn-secondary-900:hover {
  background-color: rgba(var(--color-secondary-1000), 1);
  color: rgb(var(--color-secondary-contrast-1000));
  border-color: rgba(var(--color-secondary-1000), 1);
}
.btn.btn-outline-secondary-900, button.btn-outline-secondary-900 {
  border-color: rgba(var(--color-secondary-900), 1);
  color: rgba(var(--color-secondary-900), 1);
}
.btn.btn-outline-secondary-900:hover, button.btn-outline-secondary-900:hover {
  color: rgba(var(--color-secondary-1000), 1);
  border-color: rgba(var(--color-secondary-1000), 1);
}
.btn.btn-third-100, button.btn-third-100 {
  background-color: rgba(var(--color-third-100), 1);
  color: rgb(var(--color-third-contrast-100));
  border-color: rgba(var(--color-third-100), 1);
}
.btn.btn-third-100:hover, button.btn-third-100:hover {
  background-color: rgba(var(--color-third-200), 1);
  color: rgb(var(--color-third-contrast-200));
  border-color: rgba(var(--color-third-200), 1);
}
.btn.btn-outline-third-100, button.btn-outline-third-100 {
  border-color: rgba(var(--color-third-100), 1);
  color: rgba(var(--color-third-100), 1);
}
.btn.btn-outline-third-100:hover, button.btn-outline-third-100:hover {
  color: rgba(var(--color-third-200), 1);
  border-color: rgba(var(--color-third-200), 1);
}
.btn.btn-third-200, button.btn-third-200 {
  background-color: rgba(var(--color-third-200), 1);
  color: rgb(var(--color-third-contrast-200));
  border-color: rgba(var(--color-third-200), 1);
}
.btn.btn-third-200:hover, button.btn-third-200:hover {
  background-color: rgba(var(--color-third-300), 1);
  color: rgb(var(--color-third-contrast-300));
  border-color: rgba(var(--color-third-300), 1);
}
.btn.btn-outline-third-200, button.btn-outline-third-200 {
  border-color: rgba(var(--color-third-200), 1);
  color: rgba(var(--color-third-200), 1);
}
.btn.btn-outline-third-200:hover, button.btn-outline-third-200:hover {
  color: rgba(var(--color-third-300), 1);
  border-color: rgba(var(--color-third-300), 1);
}
.btn.btn-third-300, button.btn-third-300 {
  background-color: rgba(var(--color-third-300), 1);
  color: rgb(var(--color-third-contrast-300));
  border-color: rgba(var(--color-third-300), 1);
}
.btn.btn-third-300:hover, button.btn-third-300:hover {
  background-color: rgba(var(--color-third-400), 1);
  color: rgb(var(--color-third-contrast-400));
  border-color: rgba(var(--color-third-400), 1);
}
.btn.btn-outline-third-300, button.btn-outline-third-300 {
  border-color: rgba(var(--color-third-300), 1);
  color: rgba(var(--color-third-300), 1);
}
.btn.btn-outline-third-300:hover, button.btn-outline-third-300:hover {
  color: rgba(var(--color-third-400), 1);
  border-color: rgba(var(--color-third-400), 1);
}
.btn.btn-third-400, button.btn-third-400 {
  background-color: rgba(var(--color-third-400), 1);
  color: rgb(var(--color-third-contrast-400));
  border-color: rgba(var(--color-third-400), 1);
}
.btn.btn-third-400:hover, button.btn-third-400:hover {
  background-color: rgba(var(--color-third-500), 1);
  color: rgb(var(--color-third-contrast-500));
  border-color: rgba(var(--color-third-500), 1);
}
.btn.btn-outline-third-400, button.btn-outline-third-400 {
  border-color: rgba(var(--color-third-400), 1);
  color: rgba(var(--color-third-400), 1);
}
.btn.btn-outline-third-400:hover, button.btn-outline-third-400:hover {
  color: rgba(var(--color-third-500), 1);
  border-color: rgba(var(--color-third-500), 1);
}
.btn.btn-third-500, button.btn-third-500 {
  background-color: rgba(var(--color-third-500), 1);
  color: rgb(var(--color-third-contrast-500));
  border-color: rgba(var(--color-third-500), 1);
}
.btn.btn-third-500:hover, button.btn-third-500:hover {
  background-color: rgba(var(--color-third-600), 1);
  color: rgb(var(--color-third-contrast-600));
  border-color: rgba(var(--color-third-600), 1);
}
.btn.btn-outline-third-500, button.btn-outline-third-500 {
  border-color: rgba(var(--color-third-500), 1);
  color: rgba(var(--color-third-500), 1);
}
.btn.btn-outline-third-500:hover, button.btn-outline-third-500:hover {
  color: rgba(var(--color-third-600), 1);
  border-color: rgba(var(--color-third-600), 1);
}
.btn.btn-third-600, button.btn-third-600 {
  background-color: rgba(var(--color-third-600), 1);
  color: rgb(var(--color-third-contrast-600));
  border-color: rgba(var(--color-third-600), 1);
}
.btn.btn-third-600:hover, button.btn-third-600:hover {
  background-color: rgba(var(--color-third-700), 1);
  color: rgb(var(--color-third-contrast-700));
  border-color: rgba(var(--color-third-700), 1);
}
.btn.btn-outline-third-600, button.btn-outline-third-600 {
  border-color: rgba(var(--color-third-600), 1);
  color: rgba(var(--color-third-600), 1);
}
.btn.btn-outline-third-600:hover, button.btn-outline-third-600:hover {
  color: rgba(var(--color-third-700), 1);
  border-color: rgba(var(--color-third-700), 1);
}
.btn.btn-third-700, button.btn-third-700 {
  background-color: rgba(var(--color-third-700), 1);
  color: rgb(var(--color-third-contrast-700));
  border-color: rgba(var(--color-third-700), 1);
}
.btn.btn-third-700:hover, button.btn-third-700:hover {
  background-color: rgba(var(--color-third-800), 1);
  color: rgb(var(--color-third-contrast-800));
  border-color: rgba(var(--color-third-800), 1);
}
.btn.btn-outline-third-700, button.btn-outline-third-700 {
  border-color: rgba(var(--color-third-700), 1);
  color: rgba(var(--color-third-700), 1);
}
.btn.btn-outline-third-700:hover, button.btn-outline-third-700:hover {
  color: rgba(var(--color-third-800), 1);
  border-color: rgba(var(--color-third-800), 1);
}
.btn.btn-third-800, button.btn-third-800 {
  background-color: rgba(var(--color-third-800), 1);
  color: rgb(var(--color-third-contrast-800));
  border-color: rgba(var(--color-third-800), 1);
}
.btn.btn-third-800:hover, button.btn-third-800:hover {
  background-color: rgba(var(--color-third-900), 1);
  color: rgb(var(--color-third-contrast-900));
  border-color: rgba(var(--color-third-900), 1);
}
.btn.btn-outline-third-800, button.btn-outline-third-800 {
  border-color: rgba(var(--color-third-800), 1);
  color: rgba(var(--color-third-800), 1);
}
.btn.btn-outline-third-800:hover, button.btn-outline-third-800:hover {
  color: rgba(var(--color-third-900), 1);
  border-color: rgba(var(--color-third-900), 1);
}
.btn.btn-third-900, button.btn-third-900 {
  background-color: rgba(var(--color-third-900), 1);
  color: rgb(var(--color-third-contrast-900));
  border-color: rgba(var(--color-third-900), 1);
}
.btn.btn-third-900:hover, button.btn-third-900:hover {
  background-color: rgba(var(--color-third-1000), 1);
  color: rgb(var(--color-third-contrast-1000));
  border-color: rgba(var(--color-third-1000), 1);
}
.btn.btn-outline-third-900, button.btn-outline-third-900 {
  border-color: rgba(var(--color-third-900), 1);
  color: rgba(var(--color-third-900), 1);
}
.btn.btn-outline-third-900:hover, button.btn-outline-third-900:hover {
  color: rgba(var(--color-third-1000), 1);
  border-color: rgba(var(--color-third-1000), 1);
}
.btn.btn-accent-100, button.btn-accent-100 {
  background-color: rgba(var(--color-accent-100), 1);
  color: rgb(var(--color-accent-contrast-100));
  border-color: rgba(var(--color-accent-100), 1);
}
.btn.btn-accent-100:hover, button.btn-accent-100:hover {
  background-color: rgba(var(--color-accent-200), 1);
  color: rgb(var(--color-accent-contrast-200));
  border-color: rgba(var(--color-accent-200), 1);
}
.btn.btn-outline-accent-100, button.btn-outline-accent-100 {
  border-color: rgba(var(--color-accent-100), 1);
  color: rgba(var(--color-accent-100), 1);
}
.btn.btn-outline-accent-100:hover, button.btn-outline-accent-100:hover {
  color: rgba(var(--color-accent-200), 1);
  border-color: rgba(var(--color-accent-200), 1);
}
.btn.btn-accent-200, button.btn-accent-200 {
  background-color: rgba(var(--color-accent-200), 1);
  color: rgb(var(--color-accent-contrast-200));
  border-color: rgba(var(--color-accent-200), 1);
}
.btn.btn-accent-200:hover, button.btn-accent-200:hover {
  background-color: rgba(var(--color-accent-300), 1);
  color: rgb(var(--color-accent-contrast-300));
  border-color: rgba(var(--color-accent-300), 1);
}
.btn.btn-outline-accent-200, button.btn-outline-accent-200 {
  border-color: rgba(var(--color-accent-200), 1);
  color: rgba(var(--color-accent-200), 1);
}
.btn.btn-outline-accent-200:hover, button.btn-outline-accent-200:hover {
  color: rgba(var(--color-accent-300), 1);
  border-color: rgba(var(--color-accent-300), 1);
}
.btn.btn-accent-300, button.btn-accent-300 {
  background-color: rgba(var(--color-accent-300), 1);
  color: rgb(var(--color-accent-contrast-300));
  border-color: rgba(var(--color-accent-300), 1);
}
.btn.btn-accent-300:hover, button.btn-accent-300:hover {
  background-color: rgba(var(--color-accent-400), 1);
  color: rgb(var(--color-accent-contrast-400));
  border-color: rgba(var(--color-accent-400), 1);
}
.btn.btn-outline-accent-300, button.btn-outline-accent-300 {
  border-color: rgba(var(--color-accent-300), 1);
  color: rgba(var(--color-accent-300), 1);
}
.btn.btn-outline-accent-300:hover, button.btn-outline-accent-300:hover {
  color: rgba(var(--color-accent-400), 1);
  border-color: rgba(var(--color-accent-400), 1);
}
.btn.btn-accent-400, button.btn-accent-400 {
  background-color: rgba(var(--color-accent-400), 1);
  color: rgb(var(--color-accent-contrast-400));
  border-color: rgba(var(--color-accent-400), 1);
}
.btn.btn-accent-400:hover, button.btn-accent-400:hover {
  background-color: rgba(var(--color-accent-500), 1);
  color: rgb(var(--color-accent-contrast-500));
  border-color: rgba(var(--color-accent-500), 1);
}
.btn.btn-outline-accent-400, button.btn-outline-accent-400 {
  border-color: rgba(var(--color-accent-400), 1);
  color: rgba(var(--color-accent-400), 1);
}
.btn.btn-outline-accent-400:hover, button.btn-outline-accent-400:hover {
  color: rgba(var(--color-accent-500), 1);
  border-color: rgba(var(--color-accent-500), 1);
}
.btn.btn-accent-500, button.btn-accent-500 {
  background-color: rgba(var(--color-accent-500), 1);
  color: rgb(var(--color-accent-contrast-500));
  border-color: rgba(var(--color-accent-500), 1);
}
.btn.btn-accent-500:hover, button.btn-accent-500:hover {
  background-color: rgba(var(--color-accent-600), 1);
  color: rgb(var(--color-accent-contrast-600));
  border-color: rgba(var(--color-accent-600), 1);
}
.btn.btn-outline-accent-500, button.btn-outline-accent-500 {
  border-color: rgba(var(--color-accent-500), 1);
  color: rgba(var(--color-accent-500), 1);
}
.btn.btn-outline-accent-500:hover, button.btn-outline-accent-500:hover {
  color: rgba(var(--color-accent-600), 1);
  border-color: rgba(var(--color-accent-600), 1);
}
.btn.btn-accent-600, button.btn-accent-600 {
  background-color: rgba(var(--color-accent-600), 1);
  color: rgb(var(--color-accent-contrast-600));
  border-color: rgba(var(--color-accent-600), 1);
}
.btn.btn-accent-600:hover, button.btn-accent-600:hover {
  background-color: rgba(var(--color-accent-700), 1);
  color: rgb(var(--color-accent-contrast-700));
  border-color: rgba(var(--color-accent-700), 1);
}
.btn.btn-outline-accent-600, button.btn-outline-accent-600 {
  border-color: rgba(var(--color-accent-600), 1);
  color: rgba(var(--color-accent-600), 1);
}
.btn.btn-outline-accent-600:hover, button.btn-outline-accent-600:hover {
  color: rgba(var(--color-accent-700), 1);
  border-color: rgba(var(--color-accent-700), 1);
}
.btn.btn-accent-700, button.btn-accent-700 {
  background-color: rgba(var(--color-accent-700), 1);
  color: rgb(var(--color-accent-contrast-700));
  border-color: rgba(var(--color-accent-700), 1);
}
.btn.btn-accent-700:hover, button.btn-accent-700:hover {
  background-color: rgba(var(--color-accent-800), 1);
  color: rgb(var(--color-accent-contrast-800));
  border-color: rgba(var(--color-accent-800), 1);
}
.btn.btn-outline-accent-700, button.btn-outline-accent-700 {
  border-color: rgba(var(--color-accent-700), 1);
  color: rgba(var(--color-accent-700), 1);
}
.btn.btn-outline-accent-700:hover, button.btn-outline-accent-700:hover {
  color: rgba(var(--color-accent-800), 1);
  border-color: rgba(var(--color-accent-800), 1);
}
.btn.btn-accent-800, button.btn-accent-800 {
  background-color: rgba(var(--color-accent-800), 1);
  color: rgb(var(--color-accent-contrast-800));
  border-color: rgba(var(--color-accent-800), 1);
}
.btn.btn-accent-800:hover, button.btn-accent-800:hover {
  background-color: rgba(var(--color-accent-900), 1);
  color: rgb(var(--color-accent-contrast-900));
  border-color: rgba(var(--color-accent-900), 1);
}
.btn.btn-outline-accent-800, button.btn-outline-accent-800 {
  border-color: rgba(var(--color-accent-800), 1);
  color: rgba(var(--color-accent-800), 1);
}
.btn.btn-outline-accent-800:hover, button.btn-outline-accent-800:hover {
  color: rgba(var(--color-accent-900), 1);
  border-color: rgba(var(--color-accent-900), 1);
}
.btn.btn-accent-900, button.btn-accent-900 {
  background-color: rgba(var(--color-accent-900), 1);
  color: rgb(var(--color-accent-contrast-900));
  border-color: rgba(var(--color-accent-900), 1);
}
.btn.btn-accent-900:hover, button.btn-accent-900:hover {
  background-color: rgba(var(--color-accent-1000), 1);
  color: rgb(var(--color-accent-contrast-1000));
  border-color: rgba(var(--color-accent-1000), 1);
}
.btn.btn-outline-accent-900, button.btn-outline-accent-900 {
  border-color: rgba(var(--color-accent-900), 1);
  color: rgba(var(--color-accent-900), 1);
}
.btn.btn-outline-accent-900:hover, button.btn-outline-accent-900:hover {
  color: rgba(var(--color-accent-1000), 1);
  border-color: rgba(var(--color-accent-1000), 1);
}
.btn.btn-lgray-100, button.btn-lgray-100 {
  background-color: rgba(var(--color-lgray-100), 1);
  color: rgb(var(--color-lgray-contrast-100));
  border-color: rgba(var(--color-lgray-100), 1);
}
.btn.btn-lgray-100:hover, button.btn-lgray-100:hover {
  background-color: rgba(var(--color-lgray-200), 1);
  color: rgb(var(--color-lgray-contrast-200));
  border-color: rgba(var(--color-lgray-200), 1);
}
.btn.btn-outline-lgray-100, button.btn-outline-lgray-100 {
  border-color: rgba(var(--color-lgray-100), 1);
  color: rgba(var(--color-lgray-100), 1);
}
.btn.btn-outline-lgray-100:hover, button.btn-outline-lgray-100:hover {
  color: rgba(var(--color-lgray-200), 1);
  border-color: rgba(var(--color-lgray-200), 1);
}
.btn.btn-lgray-200, button.btn-lgray-200 {
  background-color: rgba(var(--color-lgray-200), 1);
  color: rgb(var(--color-lgray-contrast-200));
  border-color: rgba(var(--color-lgray-200), 1);
}
.btn.btn-lgray-200:hover, button.btn-lgray-200:hover {
  background-color: rgba(var(--color-lgray-300), 1);
  color: rgb(var(--color-lgray-contrast-300));
  border-color: rgba(var(--color-lgray-300), 1);
}
.btn.btn-outline-lgray-200, button.btn-outline-lgray-200 {
  border-color: rgba(var(--color-lgray-200), 1);
  color: rgba(var(--color-lgray-200), 1);
}
.btn.btn-outline-lgray-200:hover, button.btn-outline-lgray-200:hover {
  color: rgba(var(--color-lgray-300), 1);
  border-color: rgba(var(--color-lgray-300), 1);
}
.btn.btn-lgray-300, button.btn-lgray-300 {
  background-color: rgba(var(--color-lgray-300), 1);
  color: rgb(var(--color-lgray-contrast-300));
  border-color: rgba(var(--color-lgray-300), 1);
}
.btn.btn-lgray-300:hover, button.btn-lgray-300:hover {
  background-color: rgba(var(--color-lgray-400), 1);
  color: rgb(var(--color-lgray-contrast-400));
  border-color: rgba(var(--color-lgray-400), 1);
}
.btn.btn-outline-lgray-300, button.btn-outline-lgray-300 {
  border-color: rgba(var(--color-lgray-300), 1);
  color: rgba(var(--color-lgray-300), 1);
}
.btn.btn-outline-lgray-300:hover, button.btn-outline-lgray-300:hover {
  color: rgba(var(--color-lgray-400), 1);
  border-color: rgba(var(--color-lgray-400), 1);
}
.btn.btn-lgray-400, button.btn-lgray-400 {
  background-color: rgba(var(--color-lgray-400), 1);
  color: rgb(var(--color-lgray-contrast-400));
  border-color: rgba(var(--color-lgray-400), 1);
}
.btn.btn-lgray-400:hover, button.btn-lgray-400:hover {
  background-color: rgba(var(--color-lgray-500), 1);
  color: rgb(var(--color-lgray-contrast-500));
  border-color: rgba(var(--color-lgray-500), 1);
}
.btn.btn-outline-lgray-400, button.btn-outline-lgray-400 {
  border-color: rgba(var(--color-lgray-400), 1);
  color: rgba(var(--color-lgray-400), 1);
}
.btn.btn-outline-lgray-400:hover, button.btn-outline-lgray-400:hover {
  color: rgba(var(--color-lgray-500), 1);
  border-color: rgba(var(--color-lgray-500), 1);
}
.btn.btn-lgray-500, button.btn-lgray-500 {
  background-color: rgba(var(--color-lgray-500), 1);
  color: rgb(var(--color-lgray-contrast-500));
  border-color: rgba(var(--color-lgray-500), 1);
}
.btn.btn-lgray-500:hover, button.btn-lgray-500:hover {
  background-color: rgba(var(--color-lgray-600), 1);
  color: rgb(var(--color-lgray-contrast-600));
  border-color: rgba(var(--color-lgray-600), 1);
}
.btn.btn-outline-lgray-500, button.btn-outline-lgray-500 {
  border-color: rgba(var(--color-lgray-500), 1);
  color: rgba(var(--color-lgray-500), 1);
}
.btn.btn-outline-lgray-500:hover, button.btn-outline-lgray-500:hover {
  color: rgba(var(--color-lgray-600), 1);
  border-color: rgba(var(--color-lgray-600), 1);
}
.btn.btn-lgray-600, button.btn-lgray-600 {
  background-color: rgba(var(--color-lgray-600), 1);
  color: rgb(var(--color-lgray-contrast-600));
  border-color: rgba(var(--color-lgray-600), 1);
}
.btn.btn-lgray-600:hover, button.btn-lgray-600:hover {
  background-color: rgba(var(--color-lgray-700), 1);
  color: rgb(var(--color-lgray-contrast-700));
  border-color: rgba(var(--color-lgray-700), 1);
}
.btn.btn-outline-lgray-600, button.btn-outline-lgray-600 {
  border-color: rgba(var(--color-lgray-600), 1);
  color: rgba(var(--color-lgray-600), 1);
}
.btn.btn-outline-lgray-600:hover, button.btn-outline-lgray-600:hover {
  color: rgba(var(--color-lgray-700), 1);
  border-color: rgba(var(--color-lgray-700), 1);
}
.btn.btn-lgray-700, button.btn-lgray-700 {
  background-color: rgba(var(--color-lgray-700), 1);
  color: rgb(var(--color-lgray-contrast-700));
  border-color: rgba(var(--color-lgray-700), 1);
}
.btn.btn-lgray-700:hover, button.btn-lgray-700:hover {
  background-color: rgba(var(--color-lgray-800), 1);
  color: rgb(var(--color-lgray-contrast-800));
  border-color: rgba(var(--color-lgray-800), 1);
}
.btn.btn-outline-lgray-700, button.btn-outline-lgray-700 {
  border-color: rgba(var(--color-lgray-700), 1);
  color: rgba(var(--color-lgray-700), 1);
}
.btn.btn-outline-lgray-700:hover, button.btn-outline-lgray-700:hover {
  color: rgba(var(--color-lgray-800), 1);
  border-color: rgba(var(--color-lgray-800), 1);
}
.btn.btn-lgray-800, button.btn-lgray-800 {
  background-color: rgba(var(--color-lgray-800), 1);
  color: rgb(var(--color-lgray-contrast-800));
  border-color: rgba(var(--color-lgray-800), 1);
}
.btn.btn-lgray-800:hover, button.btn-lgray-800:hover {
  background-color: rgba(var(--color-lgray-900), 1);
  color: rgb(var(--color-lgray-contrast-900));
  border-color: rgba(var(--color-lgray-900), 1);
}
.btn.btn-outline-lgray-800, button.btn-outline-lgray-800 {
  border-color: rgba(var(--color-lgray-800), 1);
  color: rgba(var(--color-lgray-800), 1);
}
.btn.btn-outline-lgray-800:hover, button.btn-outline-lgray-800:hover {
  color: rgba(var(--color-lgray-900), 1);
  border-color: rgba(var(--color-lgray-900), 1);
}
.btn.btn-lgray-900, button.btn-lgray-900 {
  background-color: rgba(var(--color-lgray-900), 1);
  color: rgb(var(--color-lgray-contrast-900));
  border-color: rgba(var(--color-lgray-900), 1);
}
.btn.btn-lgray-900:hover, button.btn-lgray-900:hover {
  background-color: rgba(var(--color-lgray-1000), 1);
  color: rgb(var(--color-lgray-contrast-1000));
  border-color: rgba(var(--color-lgray-1000), 1);
}
.btn.btn-outline-lgray-900, button.btn-outline-lgray-900 {
  border-color: rgba(var(--color-lgray-900), 1);
  color: rgba(var(--color-lgray-900), 1);
}
.btn.btn-outline-lgray-900:hover, button.btn-outline-lgray-900:hover {
  color: rgba(var(--color-lgray-1000), 1);
  border-color: rgba(var(--color-lgray-1000), 1);
}
.btn.btn-success-100, button.btn-success-100 {
  background-color: rgba(var(--color-success-100), 1);
  color: rgb(var(--color-success-contrast-100));
  border-color: rgba(var(--color-success-100), 1);
}
.btn.btn-success-100:hover, button.btn-success-100:hover {
  background-color: rgba(var(--color-success-200), 1);
  color: rgb(var(--color-success-contrast-200));
  border-color: rgba(var(--color-success-200), 1);
}
.btn.btn-outline-success-100, button.btn-outline-success-100 {
  border-color: rgba(var(--color-success-100), 1);
  color: rgba(var(--color-success-100), 1);
}
.btn.btn-outline-success-100:hover, button.btn-outline-success-100:hover {
  color: rgba(var(--color-success-200), 1);
  border-color: rgba(var(--color-success-200), 1);
}
.btn.btn-success-200, button.btn-success-200 {
  background-color: rgba(var(--color-success-200), 1);
  color: rgb(var(--color-success-contrast-200));
  border-color: rgba(var(--color-success-200), 1);
}
.btn.btn-success-200:hover, button.btn-success-200:hover {
  background-color: rgba(var(--color-success-300), 1);
  color: rgb(var(--color-success-contrast-300));
  border-color: rgba(var(--color-success-300), 1);
}
.btn.btn-outline-success-200, button.btn-outline-success-200 {
  border-color: rgba(var(--color-success-200), 1);
  color: rgba(var(--color-success-200), 1);
}
.btn.btn-outline-success-200:hover, button.btn-outline-success-200:hover {
  color: rgba(var(--color-success-300), 1);
  border-color: rgba(var(--color-success-300), 1);
}
.btn.btn-success-300, button.btn-success-300 {
  background-color: rgba(var(--color-success-300), 1);
  color: rgb(var(--color-success-contrast-300));
  border-color: rgba(var(--color-success-300), 1);
}
.btn.btn-success-300:hover, button.btn-success-300:hover {
  background-color: rgba(var(--color-success-400), 1);
  color: rgb(var(--color-success-contrast-400));
  border-color: rgba(var(--color-success-400), 1);
}
.btn.btn-outline-success-300, button.btn-outline-success-300 {
  border-color: rgba(var(--color-success-300), 1);
  color: rgba(var(--color-success-300), 1);
}
.btn.btn-outline-success-300:hover, button.btn-outline-success-300:hover {
  color: rgba(var(--color-success-400), 1);
  border-color: rgba(var(--color-success-400), 1);
}
.btn.btn-success-400, button.btn-success-400 {
  background-color: rgba(var(--color-success-400), 1);
  color: rgb(var(--color-success-contrast-400));
  border-color: rgba(var(--color-success-400), 1);
}
.btn.btn-success-400:hover, button.btn-success-400:hover {
  background-color: rgba(var(--color-success-500), 1);
  color: rgb(var(--color-success-contrast-500));
  border-color: rgba(var(--color-success-500), 1);
}
.btn.btn-outline-success-400, button.btn-outline-success-400 {
  border-color: rgba(var(--color-success-400), 1);
  color: rgba(var(--color-success-400), 1);
}
.btn.btn-outline-success-400:hover, button.btn-outline-success-400:hover {
  color: rgba(var(--color-success-500), 1);
  border-color: rgba(var(--color-success-500), 1);
}
.btn.btn-success-500, button.btn-success-500 {
  background-color: rgba(var(--color-success-500), 1);
  color: rgb(var(--color-success-contrast-500));
  border-color: rgba(var(--color-success-500), 1);
}
.btn.btn-success-500:hover, button.btn-success-500:hover {
  background-color: rgba(var(--color-success-600), 1);
  color: rgb(var(--color-success-contrast-600));
  border-color: rgba(var(--color-success-600), 1);
}
.btn.btn-outline-success-500, button.btn-outline-success-500 {
  border-color: rgba(var(--color-success-500), 1);
  color: rgba(var(--color-success-500), 1);
}
.btn.btn-outline-success-500:hover, button.btn-outline-success-500:hover {
  color: rgba(var(--color-success-600), 1);
  border-color: rgba(var(--color-success-600), 1);
}
.btn.btn-success-600, button.btn-success-600 {
  background-color: rgba(var(--color-success-600), 1);
  color: rgb(var(--color-success-contrast-600));
  border-color: rgba(var(--color-success-600), 1);
}
.btn.btn-success-600:hover, button.btn-success-600:hover {
  background-color: rgba(var(--color-success-700), 1);
  color: rgb(var(--color-success-contrast-700));
  border-color: rgba(var(--color-success-700), 1);
}
.btn.btn-outline-success-600, button.btn-outline-success-600 {
  border-color: rgba(var(--color-success-600), 1);
  color: rgba(var(--color-success-600), 1);
}
.btn.btn-outline-success-600:hover, button.btn-outline-success-600:hover {
  color: rgba(var(--color-success-700), 1);
  border-color: rgba(var(--color-success-700), 1);
}
.btn.btn-success-700, button.btn-success-700 {
  background-color: rgba(var(--color-success-700), 1);
  color: rgb(var(--color-success-contrast-700));
  border-color: rgba(var(--color-success-700), 1);
}
.btn.btn-success-700:hover, button.btn-success-700:hover {
  background-color: rgba(var(--color-success-800), 1);
  color: rgb(var(--color-success-contrast-800));
  border-color: rgba(var(--color-success-800), 1);
}
.btn.btn-outline-success-700, button.btn-outline-success-700 {
  border-color: rgba(var(--color-success-700), 1);
  color: rgba(var(--color-success-700), 1);
}
.btn.btn-outline-success-700:hover, button.btn-outline-success-700:hover {
  color: rgba(var(--color-success-800), 1);
  border-color: rgba(var(--color-success-800), 1);
}
.btn.btn-success-800, button.btn-success-800 {
  background-color: rgba(var(--color-success-800), 1);
  color: rgb(var(--color-success-contrast-800));
  border-color: rgba(var(--color-success-800), 1);
}
.btn.btn-success-800:hover, button.btn-success-800:hover {
  background-color: rgba(var(--color-success-900), 1);
  color: rgb(var(--color-success-contrast-900));
  border-color: rgba(var(--color-success-900), 1);
}
.btn.btn-outline-success-800, button.btn-outline-success-800 {
  border-color: rgba(var(--color-success-800), 1);
  color: rgba(var(--color-success-800), 1);
}
.btn.btn-outline-success-800:hover, button.btn-outline-success-800:hover {
  color: rgba(var(--color-success-900), 1);
  border-color: rgba(var(--color-success-900), 1);
}
.btn.btn-success-900, button.btn-success-900 {
  background-color: rgba(var(--color-success-900), 1);
  color: rgb(var(--color-success-contrast-900));
  border-color: rgba(var(--color-success-900), 1);
}
.btn.btn-success-900:hover, button.btn-success-900:hover {
  background-color: rgba(var(--color-success-1000), 1);
  color: rgb(var(--color-success-contrast-1000));
  border-color: rgba(var(--color-success-1000), 1);
}
.btn.btn-outline-success-900, button.btn-outline-success-900 {
  border-color: rgba(var(--color-success-900), 1);
  color: rgba(var(--color-success-900), 1);
}
.btn.btn-outline-success-900:hover, button.btn-outline-success-900:hover {
  color: rgba(var(--color-success-1000), 1);
  border-color: rgba(var(--color-success-1000), 1);
}
.btn.btn-warning-100, button.btn-warning-100 {
  background-color: rgba(var(--color-warning-100), 1);
  color: rgb(var(--color-warning-contrast-100));
  border-color: rgba(var(--color-warning-100), 1);
}
.btn.btn-warning-100:hover, button.btn-warning-100:hover {
  background-color: rgba(var(--color-warning-200), 1);
  color: rgb(var(--color-warning-contrast-200));
  border-color: rgba(var(--color-warning-200), 1);
}
.btn.btn-outline-warning-100, button.btn-outline-warning-100 {
  border-color: rgba(var(--color-warning-100), 1);
  color: rgba(var(--color-warning-100), 1);
}
.btn.btn-outline-warning-100:hover, button.btn-outline-warning-100:hover {
  color: rgba(var(--color-warning-200), 1);
  border-color: rgba(var(--color-warning-200), 1);
}
.btn.btn-warning-200, button.btn-warning-200 {
  background-color: rgba(var(--color-warning-200), 1);
  color: rgb(var(--color-warning-contrast-200));
  border-color: rgba(var(--color-warning-200), 1);
}
.btn.btn-warning-200:hover, button.btn-warning-200:hover {
  background-color: rgba(var(--color-warning-300), 1);
  color: rgb(var(--color-warning-contrast-300));
  border-color: rgba(var(--color-warning-300), 1);
}
.btn.btn-outline-warning-200, button.btn-outline-warning-200 {
  border-color: rgba(var(--color-warning-200), 1);
  color: rgba(var(--color-warning-200), 1);
}
.btn.btn-outline-warning-200:hover, button.btn-outline-warning-200:hover {
  color: rgba(var(--color-warning-300), 1);
  border-color: rgba(var(--color-warning-300), 1);
}
.btn.btn-warning-300, button.btn-warning-300 {
  background-color: rgba(var(--color-warning-300), 1);
  color: rgb(var(--color-warning-contrast-300));
  border-color: rgba(var(--color-warning-300), 1);
}
.btn.btn-warning-300:hover, button.btn-warning-300:hover {
  background-color: rgba(var(--color-warning-400), 1);
  color: rgb(var(--color-warning-contrast-400));
  border-color: rgba(var(--color-warning-400), 1);
}
.btn.btn-outline-warning-300, button.btn-outline-warning-300 {
  border-color: rgba(var(--color-warning-300), 1);
  color: rgba(var(--color-warning-300), 1);
}
.btn.btn-outline-warning-300:hover, button.btn-outline-warning-300:hover {
  color: rgba(var(--color-warning-400), 1);
  border-color: rgba(var(--color-warning-400), 1);
}
.btn.btn-warning-400, button.btn-warning-400 {
  background-color: rgba(var(--color-warning-400), 1);
  color: rgb(var(--color-warning-contrast-400));
  border-color: rgba(var(--color-warning-400), 1);
}
.btn.btn-warning-400:hover, button.btn-warning-400:hover {
  background-color: rgba(var(--color-warning-500), 1);
  color: rgb(var(--color-warning-contrast-500));
  border-color: rgba(var(--color-warning-500), 1);
}
.btn.btn-outline-warning-400, button.btn-outline-warning-400 {
  border-color: rgba(var(--color-warning-400), 1);
  color: rgba(var(--color-warning-400), 1);
}
.btn.btn-outline-warning-400:hover, button.btn-outline-warning-400:hover {
  color: rgba(var(--color-warning-500), 1);
  border-color: rgba(var(--color-warning-500), 1);
}
.btn.btn-warning-500, button.btn-warning-500 {
  background-color: rgba(var(--color-warning-500), 1);
  color: rgb(var(--color-warning-contrast-500));
  border-color: rgba(var(--color-warning-500), 1);
}
.btn.btn-warning-500:hover, button.btn-warning-500:hover {
  background-color: rgba(var(--color-warning-600), 1);
  color: rgb(var(--color-warning-contrast-600));
  border-color: rgba(var(--color-warning-600), 1);
}
.btn.btn-outline-warning-500, button.btn-outline-warning-500 {
  border-color: rgba(var(--color-warning-500), 1);
  color: rgba(var(--color-warning-500), 1);
}
.btn.btn-outline-warning-500:hover, button.btn-outline-warning-500:hover {
  color: rgba(var(--color-warning-600), 1);
  border-color: rgba(var(--color-warning-600), 1);
}
.btn.btn-warning-600, button.btn-warning-600 {
  background-color: rgba(var(--color-warning-600), 1);
  color: rgb(var(--color-warning-contrast-600));
  border-color: rgba(var(--color-warning-600), 1);
}
.btn.btn-warning-600:hover, button.btn-warning-600:hover {
  background-color: rgba(var(--color-warning-700), 1);
  color: rgb(var(--color-warning-contrast-700));
  border-color: rgba(var(--color-warning-700), 1);
}
.btn.btn-outline-warning-600, button.btn-outline-warning-600 {
  border-color: rgba(var(--color-warning-600), 1);
  color: rgba(var(--color-warning-600), 1);
}
.btn.btn-outline-warning-600:hover, button.btn-outline-warning-600:hover {
  color: rgba(var(--color-warning-700), 1);
  border-color: rgba(var(--color-warning-700), 1);
}
.btn.btn-warning-700, button.btn-warning-700 {
  background-color: rgba(var(--color-warning-700), 1);
  color: rgb(var(--color-warning-contrast-700));
  border-color: rgba(var(--color-warning-700), 1);
}
.btn.btn-warning-700:hover, button.btn-warning-700:hover {
  background-color: rgba(var(--color-warning-800), 1);
  color: rgb(var(--color-warning-contrast-800));
  border-color: rgba(var(--color-warning-800), 1);
}
.btn.btn-outline-warning-700, button.btn-outline-warning-700 {
  border-color: rgba(var(--color-warning-700), 1);
  color: rgba(var(--color-warning-700), 1);
}
.btn.btn-outline-warning-700:hover, button.btn-outline-warning-700:hover {
  color: rgba(var(--color-warning-800), 1);
  border-color: rgba(var(--color-warning-800), 1);
}
.btn.btn-warning-800, button.btn-warning-800 {
  background-color: rgba(var(--color-warning-800), 1);
  color: rgb(var(--color-warning-contrast-800));
  border-color: rgba(var(--color-warning-800), 1);
}
.btn.btn-warning-800:hover, button.btn-warning-800:hover {
  background-color: rgba(var(--color-warning-900), 1);
  color: rgb(var(--color-warning-contrast-900));
  border-color: rgba(var(--color-warning-900), 1);
}
.btn.btn-outline-warning-800, button.btn-outline-warning-800 {
  border-color: rgba(var(--color-warning-800), 1);
  color: rgba(var(--color-warning-800), 1);
}
.btn.btn-outline-warning-800:hover, button.btn-outline-warning-800:hover {
  color: rgba(var(--color-warning-900), 1);
  border-color: rgba(var(--color-warning-900), 1);
}
.btn.btn-warning-900, button.btn-warning-900 {
  background-color: rgba(var(--color-warning-900), 1);
  color: rgb(var(--color-warning-contrast-900));
  border-color: rgba(var(--color-warning-900), 1);
}
.btn.btn-warning-900:hover, button.btn-warning-900:hover {
  background-color: rgba(var(--color-warning-1000), 1);
  color: rgb(var(--color-warning-contrast-1000));
  border-color: rgba(var(--color-warning-1000), 1);
}
.btn.btn-outline-warning-900, button.btn-outline-warning-900 {
  border-color: rgba(var(--color-warning-900), 1);
  color: rgba(var(--color-warning-900), 1);
}
.btn.btn-outline-warning-900:hover, button.btn-outline-warning-900:hover {
  color: rgba(var(--color-warning-1000), 1);
  border-color: rgba(var(--color-warning-1000), 1);
}
.btn.btn-danger-100, button.btn-danger-100 {
  background-color: rgba(var(--color-danger-100), 1);
  color: rgb(var(--color-danger-contrast-100));
  border-color: rgba(var(--color-danger-100), 1);
}
.btn.btn-danger-100:hover, button.btn-danger-100:hover {
  background-color: rgba(var(--color-danger-200), 1);
  color: rgb(var(--color-danger-contrast-200));
  border-color: rgba(var(--color-danger-200), 1);
}
.btn.btn-outline-danger-100, button.btn-outline-danger-100 {
  border-color: rgba(var(--color-danger-100), 1);
  color: rgba(var(--color-danger-100), 1);
}
.btn.btn-outline-danger-100:hover, button.btn-outline-danger-100:hover {
  color: rgba(var(--color-danger-200), 1);
  border-color: rgba(var(--color-danger-200), 1);
}
.btn.btn-danger-200, button.btn-danger-200 {
  background-color: rgba(var(--color-danger-200), 1);
  color: rgb(var(--color-danger-contrast-200));
  border-color: rgba(var(--color-danger-200), 1);
}
.btn.btn-danger-200:hover, button.btn-danger-200:hover {
  background-color: rgba(var(--color-danger-300), 1);
  color: rgb(var(--color-danger-contrast-300));
  border-color: rgba(var(--color-danger-300), 1);
}
.btn.btn-outline-danger-200, button.btn-outline-danger-200 {
  border-color: rgba(var(--color-danger-200), 1);
  color: rgba(var(--color-danger-200), 1);
}
.btn.btn-outline-danger-200:hover, button.btn-outline-danger-200:hover {
  color: rgba(var(--color-danger-300), 1);
  border-color: rgba(var(--color-danger-300), 1);
}
.btn.btn-danger-300, button.btn-danger-300 {
  background-color: rgba(var(--color-danger-300), 1);
  color: rgb(var(--color-danger-contrast-300));
  border-color: rgba(var(--color-danger-300), 1);
}
.btn.btn-danger-300:hover, button.btn-danger-300:hover {
  background-color: rgba(var(--color-danger-400), 1);
  color: rgb(var(--color-danger-contrast-400));
  border-color: rgba(var(--color-danger-400), 1);
}
.btn.btn-outline-danger-300, button.btn-outline-danger-300 {
  border-color: rgba(var(--color-danger-300), 1);
  color: rgba(var(--color-danger-300), 1);
}
.btn.btn-outline-danger-300:hover, button.btn-outline-danger-300:hover {
  color: rgba(var(--color-danger-400), 1);
  border-color: rgba(var(--color-danger-400), 1);
}
.btn.btn-danger-400, button.btn-danger-400 {
  background-color: rgba(var(--color-danger-400), 1);
  color: rgb(var(--color-danger-contrast-400));
  border-color: rgba(var(--color-danger-400), 1);
}
.btn.btn-danger-400:hover, button.btn-danger-400:hover {
  background-color: rgba(var(--color-danger-500), 1);
  color: rgb(var(--color-danger-contrast-500));
  border-color: rgba(var(--color-danger-500), 1);
}
.btn.btn-outline-danger-400, button.btn-outline-danger-400 {
  border-color: rgba(var(--color-danger-400), 1);
  color: rgba(var(--color-danger-400), 1);
}
.btn.btn-outline-danger-400:hover, button.btn-outline-danger-400:hover {
  color: rgba(var(--color-danger-500), 1);
  border-color: rgba(var(--color-danger-500), 1);
}
.btn.btn-danger-500, button.btn-danger-500 {
  background-color: rgba(var(--color-danger-500), 1);
  color: rgb(var(--color-danger-contrast-500));
  border-color: rgba(var(--color-danger-500), 1);
}
.btn.btn-danger-500:hover, button.btn-danger-500:hover {
  background-color: rgba(var(--color-danger-600), 1);
  color: rgb(var(--color-danger-contrast-600));
  border-color: rgba(var(--color-danger-600), 1);
}
.btn.btn-outline-danger-500, button.btn-outline-danger-500 {
  border-color: rgba(var(--color-danger-500), 1);
  color: rgba(var(--color-danger-500), 1);
}
.btn.btn-outline-danger-500:hover, button.btn-outline-danger-500:hover {
  color: rgba(var(--color-danger-600), 1);
  border-color: rgba(var(--color-danger-600), 1);
}
.btn.btn-danger-600, button.btn-danger-600 {
  background-color: rgba(var(--color-danger-600), 1);
  color: rgb(var(--color-danger-contrast-600));
  border-color: rgba(var(--color-danger-600), 1);
}
.btn.btn-danger-600:hover, button.btn-danger-600:hover {
  background-color: rgba(var(--color-danger-700), 1);
  color: rgb(var(--color-danger-contrast-700));
  border-color: rgba(var(--color-danger-700), 1);
}
.btn.btn-outline-danger-600, button.btn-outline-danger-600 {
  border-color: rgba(var(--color-danger-600), 1);
  color: rgba(var(--color-danger-600), 1);
}
.btn.btn-outline-danger-600:hover, button.btn-outline-danger-600:hover {
  color: rgba(var(--color-danger-700), 1);
  border-color: rgba(var(--color-danger-700), 1);
}
.btn.btn-danger-700, button.btn-danger-700 {
  background-color: rgba(var(--color-danger-700), 1);
  color: rgb(var(--color-danger-contrast-700));
  border-color: rgba(var(--color-danger-700), 1);
}
.btn.btn-danger-700:hover, button.btn-danger-700:hover {
  background-color: rgba(var(--color-danger-800), 1);
  color: rgb(var(--color-danger-contrast-800));
  border-color: rgba(var(--color-danger-800), 1);
}
.btn.btn-outline-danger-700, button.btn-outline-danger-700 {
  border-color: rgba(var(--color-danger-700), 1);
  color: rgba(var(--color-danger-700), 1);
}
.btn.btn-outline-danger-700:hover, button.btn-outline-danger-700:hover {
  color: rgba(var(--color-danger-800), 1);
  border-color: rgba(var(--color-danger-800), 1);
}
.btn.btn-danger-800, button.btn-danger-800 {
  background-color: rgba(var(--color-danger-800), 1);
  color: rgb(var(--color-danger-contrast-800));
  border-color: rgba(var(--color-danger-800), 1);
}
.btn.btn-danger-800:hover, button.btn-danger-800:hover {
  background-color: rgba(var(--color-danger-900), 1);
  color: rgb(var(--color-danger-contrast-900));
  border-color: rgba(var(--color-danger-900), 1);
}
.btn.btn-outline-danger-800, button.btn-outline-danger-800 {
  border-color: rgba(var(--color-danger-800), 1);
  color: rgba(var(--color-danger-800), 1);
}
.btn.btn-outline-danger-800:hover, button.btn-outline-danger-800:hover {
  color: rgba(var(--color-danger-900), 1);
  border-color: rgba(var(--color-danger-900), 1);
}
.btn.btn-danger-900, button.btn-danger-900 {
  background-color: rgba(var(--color-danger-900), 1);
  color: rgb(var(--color-danger-contrast-900));
  border-color: rgba(var(--color-danger-900), 1);
}
.btn.btn-danger-900:hover, button.btn-danger-900:hover {
  background-color: rgba(var(--color-danger-1000), 1);
  color: rgb(var(--color-danger-contrast-1000));
  border-color: rgba(var(--color-danger-1000), 1);
}
.btn.btn-outline-danger-900, button.btn-outline-danger-900 {
  border-color: rgba(var(--color-danger-900), 1);
  color: rgba(var(--color-danger-900), 1);
}
.btn.btn-outline-danger-900:hover, button.btn-outline-danger-900:hover {
  color: rgba(var(--color-danger-1000), 1);
  border-color: rgba(var(--color-danger-1000), 1);
}

.btn-small {
  padding: calc(var(--spacer) * 0.25) calc(var(--spacer) * 0.25);
  font-size: 0.9em;
}

.btn-medium {
  padding: calc(var(--spacer) * 0.4) calc(var(--spacer) * 1);
  font-size: 1em;
}

.btn-large {
  padding: calc(var(--spacer) * 0.5) calc(var(--spacer) * 1.2);
  font-size: 1.1em;
}

.btn-radius-default {
  border-radius: calc(var(--spacer) * 0.5);
}

.btn-radius-large {
  border-radius: calc(var(--spacer));
}

.btn-radius-small {
  border-radius: calc(var(--spacer) * 0.25);
}

[class*=container] {
  margin: 0 auto;
  max-width: 1440px;
}

@break;
@break;
@break;
.container, :root [default=container] {
  width: 87.5%;
}

.container-xs, :root [default*=container-xs] {
  width: 60%;
}

.container-xl, :root [default*=container-xl] {
  width: 80%;
}

@break;
@break;
@break;
@media (min-width: 0px) and (max-width: 1200px) {
  .container, :root [xs=container] {
    width: 90%;
  }
  .container-xs, :root [xs*=container-xs] {
    width: 85%;
  }
  .container-xl, :root [xs*=container-xl] {
    width: 90%;
  }
}
@break;
@break;
@break;
@media (min-width: 0px) and (max-width: 1200px) and (orientation:landscape) {
  .container, :root [xs-l=container] {
    width: 87.5%;
  }
  .container-xs, :root [xs-l*=container-xs] {
    width: 85%;
  }
  .container-xl, :root [xs-l*=container-xl] {
    width: 90%;
  }
}
@break;
@break;
@break;
@media (min-width: 768px) and (max-width: 1200px) {
  .container, :root [sm=container] {
    width: 85%;
  }
  .container-xs, :root [sm*=container-xs] {
    width: 85%;
  }
  .container-xl, :root [sm*=container-xl] {
    width: 90%;
  }
}
@break;
@break;
@break;
@media (min-width: 768px) and (max-width: 1200px) and (orientation:landscape) {
  .container, :root [sm-l=container] {
    width: 85%;
  }
  .container-xs, :root [sm-l*=container-xs] {
    width: 85%;
  }
  .container-xl, :root [sm-l*=container-xl] {
    width: 90%;
  }
}
@break;
@break;
@break;
@media (min-width: 1201px) and (max-width: 10000px) {
  .container, :root [md=container] {
    width: 90%;
  }
  .container-xs, :root [md*=container-xs] {
    width: 66%;
  }
  .container-xl, :root [md*=container-xl] {
    width: 90%;
  }
}
@break;
@break;
@break;
@media (min-width: 1441px) and (max-width: 10000px) {
  .container, :root [lg=container] {
    width: 80%;
  }
  .container-xs, :root [lg*=container-xs] {
    width: 55%;
  }
  .container-xl, :root [lg*=container-xl] {
    width: 87.5%;
  }
}
@break;
@break;
@break;
@media (min-width: 1921px) and (max-width: 10000px) {
  .container, :root [xl=container] {
    width: 75%;
  }
  .container-xs, :root [xl*=container-xs] {
    width: 50%;
  }
  .container-xl, :root [xl*=container-xl] {
    width: 85%;
  }
}
.container-left {
  margin-left: 0;
  margin-right: auto;
}

.container-right {
  margin-left: auto;
  margin-right: 0;
}

.container-left,
.container-right {
  width: calc(100% - 6.25%);
}
@media (min-width: 0px) and (max-width: 1200px) {
  .container-left,
  .container-right {
    width: calc(100% - 5%);
  }
}
@media (min-width: 0px) and (max-width: 1200px) and (orientation:landscape) {
  .container-left,
  .container-right {
    width: calc(100% - 6.25%);
  }
}
@media (min-width: 768px) and (max-width: 1200px) {
  .container-left,
  .container-right {
    width: calc(100% - 7.5%);
  }
}
@media (min-width: 768px) and (max-width: 1200px) and (orientation:landscape) {
  .container-left,
  .container-right {
    width: calc(100% - 7.5%);
  }
}
@media (min-width: 1201px) and (max-width: 10000px) {
  .container-left,
  .container-right {
    width: calc(100% - 5%);
  }
}
@media (min-width: 1441px) and (max-width: 10000px) {
  .container-left,
  .container-right {
    width: calc(100% - 10%);
  }
}
@media (min-width: 1921px) and (max-width: 10000px) {
  .container-left,
  .container-right {
    width: calc(100% - 12.5%);
  }
}
.container-left,
.container-right {
  max-width: calc(1440px + (100vw - 1440px) * 0.5);
}
@media (min-width: 0px) and (max-width: 1200px) {
  .container-left,
  .container-right {
    width: calc(100% - 10%);
    margin-left: auto;
    margin-right: auto;
  }
}
.modal {
  display: none; /* Masquer par défaut */
  position: fixed; /* Rester à l'écran */
  z-index: 1; /* Placer au-dessus */
  left: 0;
  top: 0;
  width: 100%; /* Pleine largeur */
  height: 100%; /* Pleine hauteur */
  overflow: auto; /* Activer le défilement si nécessaire */
  background-color: rgba(0, 0, 0, 0.5); /* Overlay noir transparent */
}

.modal.modal--open {
  display: block;
}

.modal-content {
  background-color: #fefefe;
  margin: 15% auto; /* 15% du haut de la page et centrer */
  padding: 20px;
  border: 1px solid #888;
  width: min(80%, 640px); /* Largeur par défaut */
  box-shadow: calc(var(--spacer) * 25) calc(var(--spacer) * 25) calc(var(--spacer) * 1) rgba(46, 56, 98, 0.1);
  border-radius: calc(var(--spacer) * 0.5);
}

.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

.card {
  background-color: rgb(var(--color-primary-contrast-500));
  color: rgba(var(--color-primary-500), 1);
  border: rgb(var(--color-primary-contrast-500));
}
@media (min-width: 0px) and (max-width: 1200px) {
  .card {
    padding: calc(var(--spacer) * 0.5);
  }
  .card-title {
    font-size: 1rem;
  }
  .card-content {
    font-size: 0.875rem;
  }
}
@media (min-width: 768px) and (max-width: 1200px) {
  .card {
    padding: calc(var(--spacer) * 0.75);
  }
  .card-title {
    font-size: 1.125rem;
  }
  .card-content {
    font-size: 1rem;
  }
}
@media (min-width: 1201px) and (max-width: 10000px) {
  .card {
    padding: calc(var(--spacer) * 1);
  }
  .card-title {
    font-size: 1.25rem;
  }
  .card-content {
    font-size: 1rem;
  }
}
@media (min-width: 1441px) and (max-width: 10000px) {
  .card {
    padding: calc(var(--spacer) * 1.25);
  }
  .card-title {
    font-size: 1.5rem;
  }
  .card-content {
    font-size: 1.125rem;
  }
}
@media (min-width: 1921px) and (max-width: 10000px) {
  .card {
    padding: calc(var(--spacer) * 1.5);
  }
  .card-title {
    font-size: 1.75rem;
  }
  .card-content {
    font-size: 1.25rem;
  }
}
.accordeon .accordeon-trigger {
  cursor: pointer;
}
.accordeon .accordeon-target {
  height: 0;
  overflow: hidden;
  transition: height 0.3s ease;
}
.accordeon .accordeon-target.active {
  height: 100%;
  transition: height 0.3s ease;
}

.accordeon {
  border-top: 1px solid rgba(var(--color-secondary-500), 1);
  padding: calc(var(--spacer) * 0.666);
}
.accordeon:last-of-type {
  border-bottom: 1px solid rgba(var(--color-secondary-500), 1);
}
.accordeon .accordeon-title {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.accordeon .accordeon-title .h3 {
  margin-bottom: 0;
  margin-left: calc(var(--spacer) * 1);
}
.accordeon .minus {
  display: none;
}
.accordeon.active .plus {
  display: none;
}
.accordeon.active .minus {
  display: block;
}
.accordeon .accordeon-target p {
  margin-bottom: 0;
  margin-top: calc(var(--spacer) * 0.5);
}

.material-icons {
  font-family: "Material Icons Outlined";
}

.material-icons {
  font-weight: normal;
  font-style: normal;
  font-size: calc(var(--spacer) * 1);
  display: inline-flex;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;
  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;
  /* Support for IE. */
  font-feature-settings: "liga";
}
.material-icons.size-1 {
  font-size: calc(var(--spacer) * 1) !important;
}
.material-icons.size-2 {
  font-size: calc(var(--spacer) * 2) !important;
}
.material-icons.size-3 {
  font-size: calc(var(--spacer) * 3) !important;
}
.material-icons.size-4 {
  font-size: calc(var(--spacer) * 4) !important;
}
.material-icons.size-5 {
  font-size: calc(var(--spacer) * 5) !important;
}
.material-icons.size-6 {
  font-size: calc(var(--spacer) * 6) !important;
}
.material-icons.size-7 {
  font-size: calc(var(--spacer) * 7) !important;
}
.material-icons.size-8 {
  font-size: calc(var(--spacer) * 8) !important;
}
.material-icons.size-9 {
  font-size: calc(var(--spacer) * 9) !important;
}
.material-icons.size-10 {
  font-size: calc(var(--spacer) * 10) !important;
}

:root {
  --scroll-gauge--height: calc(var(--spacer) * 0.125);
  --scroll-gauge--background: rgba(var(--color-primary-100), 1);
  --scroll-gauge--color: rgba(var(--color-primary-500), 1);
}

.scroll-gauge {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: var(--scroll-gauge--height);
  background: var(--scroll-gauge--background);
  z-index: 1000;
}
.scroll-gauge__progress {
  width: 0;
  height: 100%;
  background: var(--scroll-gauge--color);
  transition: width 0.25s ease-out;
}

.loader--circularSquare {
  width: 1em;
  height: 1em;
  position: relative;
  animation: rotateLoader 1.5s linear infinite;
}
.loader--circularSquare::before, .loader--circularSquare::after {
  content: "";
  position: absolute;
  width: 1em;
  height: 1em;
  border-radius: 50%;
}
.loader--circularSquare::before {
  top: -1em;
  left: 0;
  background: rgba(var(--color-primary-500), 1);
  animation: moveBefore 1.5s linear infinite;
}
.loader--circularSquare::after {
  top: 1em;
  left: 0;
  background: rgba(var(--color-third-500), 1);
  animation: moveAfter 1.5s linear infinite;
}
.loader--circularSquare .child1, .loader--circularSquare .child2 {
  position: absolute;
  width: 1em;
  height: 1em;
  border-radius: 50%;
}
.loader--circularSquare .child1 {
  top: 0;
  left: -1em;
  background: rgba(var(--color-secondary-500), 1);
  animation: moveChild1 1.5s linear infinite;
}
.loader--circularSquare .child2 {
  top: 0;
  left: 1em;
  background: rgba(var(--color-accent-500), 1);
  animation: moveChild2 1.5s linear infinite;
}
@keyframes rotateLoader {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes moveBefore {
  0% {
    transform: translateY(0);
  }
  25% {
    transform: translateY(1em);
  }
  50% {
    transform: translateY(0);
  }
  75% {
    transform: translateY(-1em);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes moveAfter {
  0% {
    transform: translateY(0);
  }
  25% {
    transform: translateY(-1em);
  }
  50% {
    transform: translateY(0);
  }
  75% {
    transform: translateY(1em);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes moveChild1 {
  0% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(1em);
  }
  50% {
    transform: translateX(0);
  }
  75% {
    transform: translateX(-1em);
  }
  100% {
    transform: translateX(0);
  }
}
@keyframes moveChild2 {
  0% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-1em);
  }
  50% {
    transform: translateX(0);
  }
  75% {
    transform: translateX(1em);
  }
  100% {
    transform: translateX(0);
  }
}

.border-default {
  border-style: solid;
  border-width: 1px;
}

.border-radius {
  border-radius: calc(var(--spacer) * 0.25);
}

small, .small {
  font-size: 13px;
  line-height: 18px;
}

strong, b {
  font-weight: 700;
}

.bg-white {
  background-color: white;
}

hr {
  border: 0px none;
  margin: var(--spacer)/8 auto;
}

.italic {
  font-style: italic;
}

.uppercase {
  text-transform: uppercase;
}

.lowercase {
  text-transform: lowercase;
}

.video-16-9, .image-16-9 {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}

.video-16-9 video {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  object-fit: contain;
}

[class*=image-] img {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  object-fit: contain;
}

.h-100 {
  height: 100%;
}

.w-100 {
  width: 100%;
}

.h-default-100 {
  height: 100%;
}

.w-default-100 {
  width: 100%;
}

.hidden-default {
  display: none !important;
}

.visible-default {
  display: block;
}

time {
  font-size: 1.1rem;
}

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

.flex-row {
  display: flex;
}

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

@media (min-width: 0px) and (max-width: 1200px) {
  .h-xs-100 {
    height: 100%;
  }
  .w-xs-100 {
    width: 100%;
  }
  .hidden-xs {
    display: none !important;
  }
  .visible-xs {
    display: block;
  }
}
@media (min-width: 0px) and (max-width: 1200px) and (orientation:landscape) {
  .h-xs-l-100 {
    height: 100%;
  }
  .w-xs-l-100 {
    width: 100%;
  }
  .hidden-xs-l {
    display: none !important;
  }
  .visible-xs-l {
    display: block;
  }
}
@media (min-width: 768px) and (max-width: 1200px) {
  .h-sm-100 {
    height: 100%;
  }
  .w-sm-100 {
    width: 100%;
  }
  .hidden-sm {
    display: none !important;
  }
  .visible-sm {
    display: block;
  }
}
@media (min-width: 768px) and (max-width: 1200px) and (orientation:landscape) {
  .h-sm-l-100 {
    height: 100%;
  }
  .w-sm-l-100 {
    width: 100%;
  }
  .hidden-sm-l {
    display: none !important;
  }
  .visible-sm-l {
    display: block;
  }
}
@media (min-width: 1201px) and (max-width: 10000px) {
  .h-md-100 {
    height: 100%;
  }
  .w-md-100 {
    width: 100%;
  }
  .hidden-md {
    display: none !important;
  }
  .visible-md {
    display: block;
  }
}
@media (min-width: 1441px) and (max-width: 10000px) {
  .h-lg-100 {
    height: 100%;
  }
  .w-lg-100 {
    width: 100%;
  }
  .hidden-lg {
    display: none !important;
  }
  .visible-lg {
    display: block;
  }
}
@media (min-width: 1921px) and (max-width: 10000px) {
  .h-xl-100 {
    height: 100%;
  }
  .w-xl-100 {
    width: 100%;
  }
  .hidden-xl {
    display: none !important;
  }
  .visible-xl {
    display: block;
  }
}
:root {
  --app-bg: #f7f8ff;
  --app-surface: #ffffff;
  --app-surface-muted: #f0f2ff;
  --app-border: rgba(123, 108, 255, 0.18);
  --app-border-strong: rgba(123, 108, 255, 0.32);
  --app-shadow-soft: 0 24px 48px rgba(20, 16, 38, 0.08);
  --app-shadow-medium: 0 20px 32px rgba(20, 16, 38, 0.15);
  --app-shadow-focus: 0 0 0 3px rgba(123, 108, 255, 0.25);
  --app-radius-xs: 6px;
  --app-radius-sm: 10px;
  --app-radius-md: 14px;
  --app-radius-lg: 20px;
  --app-spacing: 1rem;
  --app-spacing-lg: 1.5rem;
  --app-spacing-xl: 2.5rem;
  --app-primary: #7b6cff;
  --app-primary-strong: #5f52e7;
  --app-secondary: #ff7ac6;
  --app-secondary-dark: #e755b0;
  --app-text: #1e1b3a;
  --app-text-muted: #5a5875;
  --app-text-soft: #7b7a92;
  --app-success: #2eb68b;
  --app-warning: #f6a600;
  --app-danger: #eb4a4a;
  --app-gradient: linear-gradient(105deg, #7b6cff 0%, #ff7ac6 100%);
  --app-gradient-dark: linear-gradient(105deg, #5f52e7 0%, #e755b0 100%);
  --accent-gradient: linear-gradient(135deg, #30c5f0, #ff66b2, #ffd873);
  --btn-surface-bg: rgba(255, 255, 255, 0.12);
  --btn-base-shadow: 0 15px 28px rgba(123, 108, 255, 0.15);
  --btn-primary-shadow: 0 18px 32px rgba(123, 108, 255, 0.25);
  --btn-primary-shadow-hover: 0 20px 36px rgba(123, 108, 255, 0.3);
  --btn-ghost-border: rgba(255, 255, 255, 0.48);
  --btn-ghost-hover-bg: rgba(255, 255, 255, 0.18);
}

.role-gerant {
  --app-gradient: linear-gradient(100deg, #7b6cff 0%, #ff7ac6 100%);
  --app-gradient-dark: linear-gradient(100deg, #5f52e7 0%, #e755b0 100%);
  --btn-surface-bg: rgba(123, 108, 255, 0.12);
  --btn-base-shadow: 0 15px 28px rgba(123, 108, 255, 0.2);
  --btn-primary-shadow: 0 18px 32px rgba(123, 108, 255, 0.32);
  --btn-primary-shadow-hover: 0 20px 36px rgba(123, 108, 255, 0.38);
  --btn-ghost-border: rgba(255, 255, 255, 0.52);
  --btn-ghost-hover-bg: rgba(255, 255, 255, 0.2);
}

.role-technicien {
  --app-gradient: linear-gradient(100deg, #00bcd4 0%, #4caf50 100%);
  --app-gradient-dark: linear-gradient(100deg, #0097a7 0%, #388e3c 100%);
  --btn-surface-bg: rgba(0, 188, 212, 0.12);
  --btn-base-shadow: 0 15px 28px rgba(0, 188, 212, 0.2);
  --btn-primary-shadow: 0 18px 32px rgba(0, 188, 212, 0.28);
  --btn-primary-shadow-hover: 0 20px 36px rgba(0, 188, 212, 0.34);
  --btn-ghost-border: rgba(0, 188, 212, 0.42);
  --btn-ghost-hover-bg: rgba(0, 188, 212, 0.18);
}

.role-admin {
  --app-gradient: linear-gradient(100deg, #9852e7 0%, #ff7a7a 98%);
  --app-gradient-dark: linear-gradient(100deg, #4e2c75 0%, #922c2c 95%);
  --btn-surface-bg: rgba(95, 82, 231, 0.14);
  --btn-base-shadow: 0 15px 28px rgba(95, 82, 231, 0.22);
  --btn-primary-shadow: 0 18px 32px rgba(95, 82, 231, 0.3);
  --btn-primary-shadow-hover: 0 20px 36px rgba(95, 82, 231, 0.36);
  --btn-ghost-border: rgba(255, 255, 255, 0.52);
  --btn-ghost-hover-bg: rgba(255, 255, 255, 0.22);
}

body {
  min-height: 100vh;
  background: var(--app-bg);
  color: var(--app-text);
  font-family: var(--font-primary, "Inter", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif);
  display: flex;
  flex-direction: column;
}

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

a:hover {
  text-decoration: none;
}

img {
  max-width: 100%;
  display: block;
}

button {
  font: inherit;
}

.app-shell {
  background: var(--app-bg);
  color: var(--app-text);
}

body.modal-open {
  overflow: hidden;
}

.main-header {
  display: grid;
  grid-template-columns: minmax(0, 240px) minmax(0, 1fr);
  grid-template-areas: "brand meta" "nav nav";
  align-items: center;
  column-gap: calc(var(--spacer) * 1);
  row-gap: calc(var(--spacer) * 0.5);
  padding: calc(var(--spacer) * 1) calc(var(--spacer) * 1.5);
  background: var(--app-gradient);
  color: #ffffff;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: var(--app-shadow-medium);
}
@media (min-width: 0px) and (max-width: 1200px) {
  .main-header {
    grid-template-columns: minmax(0, 120px) minmax(0, 1fr) auto;
    grid-template-areas: "brand meta toggle" "nav nav nav";
    gap: calc(var(--spacer) * 0.75);
    padding: calc(var(--spacer) * 0.75) calc(var(--spacer) * 1) 0 calc(var(--spacer) * 1);
    align-items: center;
  }
}
.main-header .btn--ghost {
  --btn-ghost-border: rgba(255, 255, 255, 0.48);
  --btn-ghost-color: #ffffff;
  --btn-ghost-hover-bg: rgba(255, 255, 255, 0.2);
  --btn-ghost-hover-border: rgba(255, 255, 255, 0.72);
  --btn-ghost-hover-color: #ffffff;
}

.main-header__brand {
  grid-area: brand;
  display: flex;
  align-items: center;
  align-self: center;
}
@media (min-width: 0px) and (max-width: 1200px) {
  .main-header__brand {
    max-width: 120px;
  }
}

.brand-link {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--spacer) * 0.5);
  color: inherit;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.brand-logo {
  height: calc(var(--spacer) * 1.5);
  width: auto;
}
@media (min-width: 0px) and (max-width: 1200px) {
  .brand-logo {
    height: calc(var(--spacer) * 1.2);
  }
}

.brand-name {
  font-size: 0.95rem;
  letter-spacing: 0.12em;
}

.main-header__toggle {
  grid-area: toggle;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--spacer) * 0.25);
  border: 1px solid rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.04);
  color: inherit;
  border-radius: var(--app-radius-sm);
  padding: calc(var(--spacer) * 0.35) calc(var(--spacer) * 0.75);
  cursor: pointer;
  font-size: 1.05rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.main-header__toggle:hover, .main-header__toggle:focus-visible {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.65);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.15);
  outline: none;
}
.main-header__toggle.open {
  background: rgba(255, 255, 255, 0.22);
  border-color: rgba(255, 255, 255, 0.65);
  color: #ffffff;
}
.main-header__toggle .main-header__toggle-bars {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
}
.main-header__toggle .main-header__toggle-bars span {
  display: block;
  width: 20px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
@media (min-width: 1201px) and (max-width: 10000px) {
  .main-header__toggle {
    display: none;
  }
}

.main-nav {
  grid-area: nav;
  width: 100%;
}
@media (min-width: 0px) and (max-width: 1200px) {
  .main-nav {
    margin-left: calc(var(--spacer) * -1);
    margin-right: calc(var(--spacer) * -1);
    width: calc(100% + var(--spacer) * 2);
  }
}

.main-nav__list {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: calc(var(--spacer) * 0.5);
  padding: 0;
  margin-top: calc(var(--spacer) * 1);
}
@media (min-width: 0px) and (max-width: 1200px) {
  .main-nav__list {
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    flex-wrap: nowrap;
    background: rgba(17, 16, 36, 0.12);
    border-radius: 0;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    pointer-events: none;
    transition: max-height 0.3s ease, opacity 0.3s ease;
  }
}

.main-nav__divider {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1px;
  margin: 0 calc(var(--spacer) * 0.5);
  pointer-events: none;
}
.main-nav__divider::before {
  content: "";
  display: block;
  width: 1px;
  height: 1.65rem;
  background: rgba(255, 255, 255, 0.22);
  border-radius: 999px;
}
@media (min-width: 0px) and (max-width: 1200px) {
  .main-nav__divider {
    width: 100%;
    margin: calc(var(--spacer) * 0.35) 0;
  }
  .main-nav__divider::before {
    width: 100%;
    height: 1px;
  }
}

@media (min-width: 0px) and (max-width: 1200px) {
  .main-nav.open .main-nav__list {
    max-height: 80vh;
    opacity: 1;
    pointer-events: auto;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
}

.main-nav__list a {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--spacer) * 0.25);
  padding: calc(var(--spacer) * 0.35) calc(var(--spacer) * 0.75);
  border-radius: var(--app-radius-sm);
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85);
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
@media (min-width: 0px) and (max-width: 1200px) {
  .main-nav__list a {
    width: 100%;
    justify-content: center;
    gap: calc(var(--spacer) * 0.6);
    padding: calc(var(--spacer) * 0.75) calc(var(--spacer) * 1.1);
    font-size: 1.05rem;
  }
}

.main-nav__list a:hover,
.main-nav__list a:focus-visible {
  background: rgba(255, 255, 255, 0.22);
  color: #ffffff;
  transform: translateY(-1px);
}

.main-nav__list a.active {
  background: rgba(255, 255, 255, 0.3);
  color: #ffffff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4);
}

.main-nav__list a.main-nav__action-link {
  border: 1px solid var(--btn-ghost-border, rgba(255, 255, 255, 0.48));
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: calc(var(--spacer) * 0.25) calc(var(--spacer) * 0.9);
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
@media (min-width: 0px) and (max-width: 1200px) {
  .main-nav__list a.main-nav__action-link {
    justify-content: center;
  }
}

.main-nav__list a.main-nav__action-link:hover,
.main-nav__list a.main-nav__action-link:focus-visible {
  background: var(--btn-ghost-hover-bg, rgba(255, 255, 255, 0.2));
  border-color: rgba(255, 255, 255, 0.72);
  color: #ffffff;
}

.main-nav__list a.main-nav__action-link.active {
  background: rgba(255, 255, 255, 0.26);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6);
}

.main-nav__list a.main-nav__action-link--logout {
  border-color: rgba(255, 255, 255, 0.32);
  background: rgba(255, 255, 255, 0.04);
}

.main-nav__list a.main-nav__action-link--logout:hover,
.main-nav__list a.main-nav__action-link--logout:focus-visible {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.5);
}

.main-header__meta {
  grid-area: meta;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: calc(var(--spacer) * 0.75);
  font-size: 0.9rem;
  justify-self: end;
  align-self: start;
}
@media (min-width: 0px) and (max-width: 1200px) {
  .main-header__meta {
    justify-content: flex-end;
    justify-self: end;
    align-self: center;
    gap: calc(var(--spacer) * 0.35);
  }
}

.user-meta {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--spacer) * 0.35);
  justify-content: flex-end;
}

.user-meta__logout {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: var(--app-radius-sm);
  color: inherit;
  text-decoration: none;
  font-size: 0.7rem;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.user-meta__logout:hover, .user-meta__logout:focus-visible {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.8);
  outline: none;
}

.user-meta__details {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
  font-size: 0.7rem;
  text-align: right;
}

.user-meta__name {
  font-weight: 600;
}

.user-meta__role {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.85;
}

.main-content {
  flex: 1;
  width: min(1920px, 100%);
  margin: 0 auto;
  padding: calc(var(--spacer) * 1.5) calc(var(--spacer) * 1.5) calc(var(--spacer) * 3);
}
@media (min-width: 0px) and (max-width: 1200px) {
  .main-content {
    padding: calc(var(--spacer) * 1) calc(var(--spacer) * 1);
  }
}
.main-content .btn--ghost {
  border-color: rgba(95, 82, 231, 0.38);
  color: #5f52e7;
}
.main-content .btn--ghost:hover, .main-content .btn--ghost:focus-visible {
  border-color: rgba(95, 82, 231, 0.58);
  background: rgba(95, 82, 231, 0.08);
  color: #5f52e7;
}

.role-technicien .main-content .btn--ghost {
  border-color: rgba(0, 188, 212, 0.55);
  color: #0097a7;
}
.role-technicien .main-content .btn--ghost:hover, .role-technicien .main-content .btn--ghost:focus-visible {
  border-color: rgba(0, 188, 212, 0.75);
  background: rgba(0, 188, 212, 0.12);
  color: #007f8d;
}

.role-gerant .main-content .btn--ghost {
  border-color: rgba(123, 108, 255, 0.55);
  color: #5f52e7;
}
.role-gerant .main-content .btn--ghost:hover, .role-gerant .main-content .btn--ghost:focus-visible {
  border-color: rgba(123, 108, 255, 0.72);
  background: rgba(123, 108, 255, 0.12);
  color: #4b3ad6;
}

.role-admin .main-content .btn--ghost {
  border-color: rgba(152, 82, 231, 0.55);
  color: #7b32d5;
}
.role-admin .main-content .btn--ghost:hover, .role-admin .main-content .btn--ghost:focus-visible {
  border-color: rgba(152, 82, 231, 0.75);
  background: rgba(152, 82, 231, 0.12);
  color: #6a23bf;
}

.footer {
  margin-top: auto;
  padding: calc(var(--spacer) * 1) calc(var(--spacer) * 1.5);
  text-align: center;
  font-size: 0.85rem;
  color: var(--app-text-soft);
}

.footer p {
  margin: 0;
}

@media (min-width: 0px) and (max-width: 1200px) {
  .main-nav.open {
    width: calc(100% + var(--spacer) * 2);
  }
}

@media (min-width: 0px) and (max-width: 1200px) {
  .main-nav.open .main-nav__list {
    padding: calc(var(--spacer) * 0.35);
  }
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--spacer) * 0.35);
  padding: calc(var(--spacer) * 0.45) calc(var(--spacer) * 0.9);
  border-radius: var(--app-radius-sm);
  border: 1px solid transparent;
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
  text-decoration: none;
  color: inherit;
  background: var(--btn-surface-bg, rgba(255, 255, 255, 0.12));
}

.btn:hover,
.btn:focus-visible {
  transform: translateY(-1px);
  box-shadow: var(--btn-base-shadow, 0 15px 28px rgba(123, 108, 255, 0.15));
}

.btn:disabled,
.btn[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

.btn--primary {
  background: var(--app-gradient);
  border-color: transparent;
  color: #ffffff;
  box-shadow: var(--btn-primary-shadow, 0 18px 32px rgba(123, 108, 255, 0.25));
}

.btn--primary:hover,
.btn--primary:focus-visible {
  background: var(--app-gradient-dark);
  box-shadow: var(--btn-primary-shadow-hover, 0 20px 36px rgba(123, 108, 255, 0.3));
}

.btn--secondary {
  background: rgba(255, 122, 198, 0.12);
  border-color: rgba(255, 122, 198, 0.38);
  color: #ff7ac6;
}

.btn--ghost {
  background: transparent;
  /* Slightly stronger border to keep contrast on light surfaces */
  border-color: var(--btn-ghost-border, rgba(16, 35, 71, 0.42));
  color: var(--btn-ghost-color, inherit);
}

.btn--ghost:hover,
.btn--ghost:focus-visible {
  background: var(--btn-ghost-hover-bg, rgba(16, 35, 71, 0.1));
  border-color: var(--btn-ghost-hover-border, rgba(16, 35, 71, 0.6));
  color: var(--btn-ghost-hover-color, var(--btn-ghost-color, inherit));
}

.btn--danger {
  background: rgba(235, 74, 74, 0.12);
  color: #eb4a4a;
  border-color: rgba(235, 74, 74, 0.3);
}

.btn--outline {
  background: transparent;
  border-color: var(--app-border-strong);
  color: var(--app-text);
}

.btn--outline:hover,
.btn--outline:focus-visible {
  background: rgba(123, 108, 255, 0.08);
  border-color: rgba(123, 108, 255, 0.45);
}

.btn--small {
  padding: calc(var(--spacer) * 0.3) calc(var(--spacer) * 0.65);
  font-size: 0.85rem;
}

.btn--pill {
  border-radius: 999px;
}

.btn--full {
  width: 100%;
}

.btn--table {
  font-size: 0.78rem;
  padding: calc(var(--spacer) * 0.25) calc(var(--spacer) * 0.55);
  background: rgba(123, 108, 255, 0.12);
  border-color: rgba(123, 108, 255, 0.22);
  color: var(--app-text);
  line-height: 1.2;
}
.btn--table:hover, .btn--table:focus-visible {
  background: rgba(123, 108, 255, 0.18);
  border-color: rgba(123, 108, 255, 0.32);
}
.btn--table span[aria-hidden=true] {
  font-size: 0.95rem;
}

.btn-label {
  display: none;
}

.btn-label--always {
  display: inline;
}

@media (min-width: 720px) {
  .btn-label {
    display: inline;
  }
}
.page-section {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacer) * 1.25);
  margin-bottom: calc(var(--spacer) * 2);
}

.page-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: calc(var(--spacer) * 1);
}

.page-header__titles {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacer) * 0.35);
}

.page-eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.75rem;
  color: var(--app-text-soft);
  margin: 0;
}

.page-title {
  margin: 0;
  font-size: clamp(1.35rem, 2vw, 1.85rem);
  font-weight: 700;
  color: var(--app-text);
}

.page-header__actions {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--spacer) * 0.5);
  align-items: center;
}
@media (min-width: 0px) and (max-width: 1200px) {
  .page-header__actions {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
  }
  .page-header__actions .btn {
    width: 100%;
    justify-content: center;
  }
}

.page-description {
  margin: 0;
  font-size: 0.95rem;
  color: var(--app-text-soft);
  max-width: 48ch;
}

.card {
  background: var(--app-surface);
  border-radius: var(--app-radius-lg);
  padding: calc(var(--spacer) * 1.25);
  box-shadow: var(--app-shadow-soft);
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacer) * 1);
  border: 1px solid rgba(123, 108, 255, 0.12);
}

.card__header,
.card-header {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacer) * 0.75);
}

.card__title,
.card-title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--app-text);
}

.card__subtitle {
  margin: 0;
  color: var(--app-text-soft);
  font-size: 0.95rem;
}

.card__toolbar,
.card-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--spacer) * 0.75);
}
@media (min-width: 0px) and (max-width: 1200px) {
  .card__toolbar,
  .card-toolbar {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }
  .card__toolbar .btn,
  .card-toolbar .btn {
    width: 100%;
    justify-content: center;
  }
  .card__toolbar .search-bar,
  .card-toolbar .search-bar {
    width: 100%;
  }
}

.card__body,
.card-body {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacer) * 1);
}

.card__footer,
.card-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: calc(var(--spacer) * 0.5);
}

.card--muted {
  background: var(--app-surface-muted);
}

form {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacer) * 0.75);
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: calc(var(--spacer) * 0.75);
}

.form-field--full {
  grid-column: 1/-1;
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacer) * 0.35);
}

.form-label {
  font-weight: 600;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--app-text-soft);
}

.form-field-group {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: calc(var(--spacer) * 0.75);
}

.form-field__label {
  font-weight: 500;
  font-size: 0.85rem;
  color: var(--app-text-soft);
}

.form-field__input,
.form-field input,
.form-field select,
.form-field textarea,
input[type=text],
input[type=number],
input[type=date],
input[type=search],
input[type=file],
input[list],
select,
textarea {
  border: 1px solid rgba(123, 108, 255, 0.28);
  border-radius: var(--app-radius-sm);
  font: inherit;
  color: inherit;
  background: #ffffff;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-field__input:focus,
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus,
input[type=text]:focus,
input[type=number]:focus,
input[type=date]:focus,
input[type=search]:focus,
input[type=file]:focus,
input[list]:focus,
select:focus,
textarea:focus {
  border-color: var(--app-primary);
  box-shadow: var(--app-shadow-focus);
  outline: none;
}

input[type=file] {
  width: 100%;
  max-width: 100%;
  padding: calc(var(--spacer) * 0.35) calc(var(--spacer) * 0.5);
  color: var(--app-text-default);
  background: #ffffff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: calc(var(--spacer) * 0.35);
}
input[type=file]::file-selector-button {
  padding: calc(var(--spacer) * 0.25) calc(var(--spacer) * 0.75);
  margin-right: calc(var(--spacer) * 0.5);
  border: 1px solid var(--app-primary);
  border-radius: var(--app-radius-xs);
  background: var(--app-primary);
  color: #ffffff;
  font: inherit;
  cursor: pointer;
  height: calc(100% - (var(--spacer) * 0.2));
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
input[type=file]:hover::file-selector-button, input[type=file]:focus::file-selector-button {
  background: rgba(123, 108, 255, 0.85);
  border-color: var(--app-primary);
}

textarea {
  min-height: 120px;
  resize: vertical;
}

.form-status {
  margin: calc(var(--spacer) * 0.25) 0 0;
  min-height: 1.25rem;
  font-size: 0.85rem;
  color: var(--app-text-soft);
}
.form-status[hidden] {
  display: none;
}
.form-status[data-state=success] {
  color: var(--app-success);
}
.form-status[data-state=error] {
  color: var(--app-danger);
}
.form-status[data-state=info] {
  color: var(--app-text-soft);
}

label {
  font-weight: 500;
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: calc(var(--spacer) * 0.5);
  flex-wrap: wrap;
}

.field-hint {
  font-size: 0.8rem;
  color: var(--app-text-soft);
}

.form-divider {
  border: 0;
  border-top: 1px dashed rgba(123, 108, 255, 0.22);
}

.supplier-field {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: calc(var(--spacer) * 0.5);
}

.supplier-field__body {
  flex: 1 1 260px;
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacer) * 0.35);
}

.supplier-field__controls {
  display: flex;
  align-items: center;
  gap: calc(var(--spacer) * 0.35);
}

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

.supplier-field__select {
  width: 100%;
}

.supplier-field__add {
  flex-shrink: 0;
  white-space: nowrap;
}

.supplier-modal {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacer) * 0.75);
}

.supplier-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--spacer) * 0.5);
}

.supplier-modal__title {
  margin: 0;
  font-size: 1.1rem;
}

.supplier-modal__close {
  background: transparent;
  border: 0;
  font-size: 1.5rem;
  cursor: pointer;
  line-height: 1;
  color: inherit;
}

.supplier-modal__form {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacer) * 0.75);
}

.supplier-modal__footer {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacer) * 0.5);
  margin-top: calc(var(--spacer) * 0.5);
}

.supplier-modal__status {
  min-height: 1.25rem;
  font-size: 0.85rem;
  color: var(--app-text-soft);
}

.supplier-modal__actions {
  display: flex;
  justify-content: flex-end;
  gap: calc(var(--spacer) * 0.5);
}

@media (min-width: 720px) {
  .supplier-modal__footer {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}
.input-with-action {
  display: flex;
  align-items: center;
  gap: calc(var(--spacer) * 0.5);
}
.input-with-action input {
  flex: 1 1 auto;
}
.input-with-action .btn {
  flex-shrink: 0;
}

.icecat-info {
  display: flex;
  align-items: center;
  gap: calc(var(--spacer) * 0.75);
  margin-top: calc(var(--spacer) * 0.5);
  padding: calc(var(--spacer) * 0.5);
  border-radius: var(--app-radius-sm);
  border: 1px dashed rgba(123, 108, 255, 0.28);
  background: rgba(123, 108, 255, 0.08);
}
.icecat-info__media {
  width: 96px;
  height: 96px;
  border-radius: var(--app-radius-sm);
  overflow: hidden;
  background: rgba(255, 255, 255, 0.65);
  display: flex;
  align-items: center;
  justify-content: center;
}
.icecat-info__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.icecat-info__content {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacer) * 0.25);
  font-size: 0.85rem;
  color: var(--app-text-soft);
}
.icecat-info__brand {
  font-weight: 600;
  color: var(--app-text);
}
.icecat-info__datasheet {
  font-weight: 600;
  color: var(--app-primary);
  text-decoration: underline;
}
.icecat-info__media img[hidden] {
  display: none;
}

.scan-camera--inline {
  margin-top: calc(var(--spacer) * 0.5);
  width: 100%;
  max-width: 320px;
}

.table-wrapper {
  width: 100%;
  overflow: auto;
  border-radius: var(--app-radius-md);
  border: 1px solid rgba(123, 108, 255, 0.14);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6);
}

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

table {
  width: 100%;
  border-collapse: collapse;
  background: #ffffff;
}

thead {
  background: rgba(123, 108, 255, 0.08);
}

th,
td {
  padding: calc(var(--spacer) * 0.6) calc(var(--spacer) * 0.75);
  text-align: left;
  font-size: 0.92rem;
  border-bottom: 1px solid rgba(123, 108, 255, 0.12);
}

th {
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.75rem;
  color: var(--app-text-soft);
  font-weight: 600;
}

tbody tr:hover {
  background: rgba(123, 108, 255, 0.05);
}

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

.table--compact th,
.table--compact td {
  padding: calc(var(--spacer) * 0.45) calc(var(--spacer) * 0.6);
}

.table__actions {
  display: flex;
  justify-content: flex-end;
  gap: calc(var(--spacer) * 0.35);
}

.status-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--spacer) * 0.25);
  border-radius: 999px;
  padding: calc(var(--spacer) * 0.2) calc(var(--spacer) * 0.6);
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: capitalize;
}

.status-pill--success {
  background: rgba(46, 182, 139, 0.18);
  color: #1e8a69;
}

.status-pill--warning {
  background: rgba(246, 166, 0, 0.18);
  color: #9a6c00;
}

.status-pill--danger {
  background: rgba(235, 74, 74, 0.18);
  color: #ba2d2d;
}

.status-pill--info {
  background: rgba(123, 108, 255, 0.18);
  color: #4d45b0;
}

@media (min-width: 0px) and (max-width: 1200px) {
  .table-wrapper {
    border-radius: var(--app-radius-sm);
    overflow: visible;
    border: 0px solid transparent;
  }
  .product-picker__table-wrapper,
  .supplier-group__table,
  .supplier-card__table {
    overflow: visible;
  }
  table:not([data-responsive]) {
    min-width: 640px;
  }
  table[data-responsive] {
    display: block;
    width: 100%;
  }
  table[data-responsive] thead {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
  }
  table[data-responsive] tbody {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacer) * 0.75);
    margin: 0;
    padding: 0;
  }
  table[data-responsive] tbody tr {
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(123, 108, 255, 0.15);
    border-radius: var(--app-radius-md);
    background: #fff;
    box-shadow: 0 16px 32px rgba(2, 7, 20, 0.08);
    padding: 0;
    overflow: hidden;
  }
  table[data-responsive] tbody tr td {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacer) * 0.15);
    border: none;
    padding: calc(var(--spacer) * 0.75) calc(var(--spacer) * 1);
    align-items: flex-start;
    white-space: normal;
    font-size: 0.9rem;
  }
  table[data-responsive] tbody tr td.text-right {
    align-items: flex-end;
  }
  table[data-responsive] tbody tr td + td {
    border-top: 1px solid rgba(123, 108, 255, 0.12);
  }
  table[data-responsive] tbody tr td::before {
    content: attr(data-label);
    display: block;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--app-text-soft);
    opacity: 0.9;
  }
  table[data-responsive] tbody tr td:last-child {
    border-bottom: none;
  }
  table[data-responsive] .table__actions {
    width: 100%;
    align-self: stretch;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: calc(var(--spacer) * 0.35);
  }
  table[data-responsive] .table__actions .btn {
    width: 100%;
    justify-content: center;
  }
}
.toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--spacer) * 0.75);
}

.toolbar__group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(var(--spacer) * 0.5);
}

.search-bar {
  position: relative;
  width: min(320px, 100%);
}

.search-bar input {
  width: 100%;
  border-radius: var(--app-radius-sm);
  border: 1px solid rgba(123, 108, 255, 0.28);
  padding: calc(var(--spacer) * 0.5) calc(var(--spacer) * 0.75) calc(var(--spacer) * 0.5) calc(var(--spacer) * 1.8);
  font: inherit;
  background: #ffffff;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.search-bar input:focus {
  border-color: var(--app-primary);
  box-shadow: var(--app-shadow-focus);
  outline: none;
}

.search-bar svg {
  position: absolute;
  top: 50%;
  left: calc(var(--spacer) * 0.5);
  transform: translateY(-50%);
  width: calc(var(--spacer) * 0.8);
  height: calc(var(--spacer) * 0.8);
  fill: rgba(123, 108, 255, 0.65);
}

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--spacer) * 0.5);
  align-items: center;
}

.filters select {
  min-width: 180px;
}

@media (min-width: 0px) and (max-width: 1200px) {
  .search-bar {
    width: 100%;
  }
  .filters {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
  }
  .filters label,
  .filters fieldset,
  .filters select,
  .filters input,
  .filters .search-bar,
  .filters .filters__checkbox-list,
  .filters .filters__actions {
    width: 100%;
  }
  .filters select,
  .filters input {
    min-width: 0;
  }
}
.tag,
.role-tag,
.status-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: calc(var(--spacer) * 0.2) calc(var(--spacer) * 0.6);
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: capitalize;
}

.role-tag {
  background: rgba(123, 108, 255, 0.18);
  color: #4d45b0;
}

.status-tag {
  background: rgba(255, 122, 198, 0.18);
  color: #b33889;
}

.tag--success {
  background: rgba(46, 182, 139, 0.18);
  color: #1e8a69;
}

.tag--warning {
  background: rgba(246, 166, 0, 0.18);
  color: #9a6c00;
}

.tag--danger {
  background: rgba(235, 74, 74, 0.18);
  color: #ba2d2d;
}

.status-bar,
.alert {
  border-radius: var(--app-radius-sm);
  padding: calc(var(--spacer) * 0.5) calc(var(--spacer) * 0.75);
  font-size: 0.9rem;
  background: rgba(123, 108, 255, 0.08);
  color: var(--app-text-soft);
}

.alert--danger {
  background: rgba(235, 74, 74, 0.12);
  color: #ba2d2d;
}

.alert--success {
  background: rgba(46, 182, 139, 0.12);
  color: #1e8a69;
}

.empty-state {
  padding: calc(var(--spacer) * 1);
  text-align: center;
  background: rgba(123, 108, 255, 0.06);
  border-radius: var(--app-radius-md);
  color: var(--app-text-soft);
  font-size: 0.95rem;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.grid {
  display: grid;
  gap: calc(var(--spacer) * 1);
}

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

.muted {
  color: var(--app-text-soft);
}

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

.stack {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacer) * 0.5);
}

.stack--lg {
  gap: calc(var(--spacer) * 1);
}

.actions {
  display: flex;
  align-items: center;
  gap: calc(var(--spacer) * 0.5);
}

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

.heading-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--spacer) * 0.75);
}

.new-product {
  display: none;
  flex-direction: column;
  gap: calc(var(--spacer) * 0.75);
  background: rgba(123, 108, 255, 0.06);
  border-radius: var(--app-radius-md);
  border: 1px dashed rgba(123, 108, 255, 0.35);
  padding: calc(var(--spacer) * 1);
}

.new-product.open {
  display: flex;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--spacer) * 0.25);
  padding: calc(var(--spacer) * 0.25) calc(var(--spacer) * 0.5);
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.pill-type {
  background: rgba(123, 108, 255, 0.16);
  color: #4d45b0;
}

.pill-unit {
  background: rgba(255, 122, 198, 0.16);
  color: #b33889;
}

.pill-supplier {
  background: rgba(46, 182, 139, 0.16);
  color: #1e8a69;
}

.product-thumb {
  width: calc(var(--spacer) * 2);
  height: calc(var(--spacer) * 1.5);
  min-width: calc(var(--spacer) * 2);
  border-radius: var(--app-radius-sm);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(123, 108, 255, 0.06);
  border: 1px solid rgba(123, 108, 255, 0.18);
}
.product-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.stock-value {
  font-weight: 600;
}

.stock-low {
  color: #ba2d2d;
}

.actions-cell {
  display: flex;
  justify-content: flex-end;
  gap: calc(var(--spacer) * 0.5);
}
@media (min-width: 0px) and (max-width: 1200px) {
  .actions-cell {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }
  .actions-cell .btn,
  .actions-cell a {
    width: 100%;
    justify-content: center;
    text-align: center;
  }
}

.table-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--spacer) * 0.75);
}

.chip-list {
  display: flex;
  gap: calc(var(--spacer) * 0.5);
  align-items: center;
  flex-wrap: wrap;
}

.chip {
  padding: calc(var(--spacer) * 0.25) calc(var(--spacer) * 0.65);
  border-radius: 999px;
  background: rgba(123, 108, 255, 0.12);
  color: #4d45b0;
  font-size: 0.8rem;
  font-weight: 600;
}

@media (min-width: 0px) and (max-width: 1200px) {
  .heading-row,
  .table-toolbar {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }
  .heading-row .search-bar,
  .table-toolbar .search-bar,
  .heading-row .btn,
  .table-toolbar .btn {
    width: 100%;
  }
  .heading-row .btn,
  .table-toolbar .btn {
    justify-content: center;
  }
}
.dashboard-card {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacer) * 1);
}

.metrics-grid {
  display: grid;
  gap: calc(var(--spacer) * 1);
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.metric-card {
  background: rgba(123, 108, 255, 0.08);
  border-radius: var(--app-radius-md);
  padding: calc(var(--spacer) * 1);
  border: 1px solid rgba(123, 108, 255, 0.18);
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacer) * 0.35);
}

.metric-label {
  font-size: 0.85rem;
  color: var(--app-text-soft);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.metric-value {
  font-size: 1.8rem;
  font-weight: 700;
}

.quick-links-card {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacer) * 1);
}

.quick-links {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--spacer) * 0.75);
}

.quick-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: calc(var(--spacer) * 0.55) calc(var(--spacer) * 1);
  border-radius: var(--app-radius-sm);
  border: 1px solid rgba(123, 108, 255, 0.25);
  background: #ffffff;
  font-weight: 600;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.quick-link:hover,
.quick-link:focus-visible {
  background: rgba(123, 108, 255, 0.12);
  border-color: rgba(123, 108, 255, 0.45);
  transform: translateY(-1px);
}

.timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacer) * 0.75);
}

.timeline-item {
  border-left: 2px solid rgba(123, 108, 255, 0.2);
  padding-left: calc(var(--spacer) * 1);
  position: relative;
  margin: 0 calc(var(--spacer) * 1.5);
}

.timeline-item::before {
  content: "";
  position: absolute;
  left: calc(-1 * (var(--spacer) * 1));
  top: calc(var(--spacer) * 0.15);
  width: calc(var(--spacer) * 0.4);
  height: calc(var(--spacer) * 0.4);
  background: var(--app-primary);
  border-radius: 50%;
}

.timeline-item__header {
  display: flex;
  justify-content: space-between;
  font-size: 0.85rem;
  color: var(--app-text-soft);
}

.timeline-item__title {
  font-weight: 600;
}

.timeline-item__body {
  margin: calc(var(--spacer) * 0.25) 0;
}

.timeline-item__meta {
  font-size: 0.85rem;
  color: var(--app-text-soft);
}

body.auth-page .main-header {
  display: none;
}

.auth {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(var(--spacer) * 2);
  min-height: calc(100vh - 6rem);
}

.auth__card {
  width: min(380px, 100%);
  background: var(--app-surface);
  border-radius: var(--app-radius-lg);
  padding: calc(var(--spacer) * 1.5);
  box-shadow: var(--app-shadow-soft);
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacer) * 1.25);
  text-align: center;
}

.auth__logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--spacer) * 0.35);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--app-text);
}

.auth__logo span {
  color: var(--app-secondary);
}

.auth__title {
  margin: 0;
  font-size: 1.45rem;
  font-weight: 700;
  color: var(--app-text);
}

.auth__form {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacer) * 0.75);
}

.auth__alert {
  background: rgba(235, 74, 74, 0.1);
  color: #ba2d2d;
  border-radius: var(--app-radius-sm);
  padding: calc(var(--spacer) * 0.5) calc(var(--spacer) * 0.75);
}

.auth__helper {
  margin: 0;
  color: var(--app-text-soft);
  font-size: 0.85rem;
}

.order-form {
  display: none;
  flex-direction: column;
  gap: calc(var(--spacer) * 0.85);
  padding: calc(var(--spacer) * 1);
  background: rgba(123, 108, 255, 0.05);
  border-radius: var(--app-radius-md);
  border: 1px dashed rgba(123, 108, 255, 0.32);
}

.order-form.open {
  display: flex;
}

.order-items__container {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacer) * 0.75);
}

.order-item-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(120px, 180px) auto;
  gap: calc(var(--spacer) * 0.75);
  align-items: center;
  padding: calc(var(--spacer) * 0.75);
  border: 1px dashed rgba(123, 108, 255, 0.25);
  border-radius: var(--app-radius-sm);
  background: #fff;
}
@media (max-width: 720px) {
  .order-item-row {
    grid-template-columns: 1fr;
    align-items: stretch;
  }
}

.order-item-product-cell {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: calc(var(--spacer) * 0.6);
}
.order-item-product-cell .order-item-product-label {
  font-weight: 600;
  flex: 1 1 auto;
}
.order-item-product-cell .order-item-clear {
  color: var(--app-text-soft);
}

.order-item-quantity {
  width: 100%;
}

.product-picker {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(var(--spacer) * 1.5);
  background: rgba(17, 24, 39, 0.45);
  z-index: 1200;
}
.product-picker[hidden] {
  display: none !important;
}
.product-picker__panel {
  background: #fff;
  border-radius: var(--app-radius-lg);
  box-shadow: 0 22px 50px rgba(17, 24, 39, 0.18);
  width: min(900px, 100%);
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.product-picker__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(var(--spacer) * 1) calc(var(--spacer) * 1.25);
  gap: calc(var(--spacer) * 1);
  border-bottom: 1px solid rgba(123, 108, 255, 0.12);
}
.product-picker__header h2 {
  margin: 0;
  font-size: 1.1rem;
}
.product-picker__controls {
  padding: calc(var(--spacer) * 0.75) calc(var(--spacer) * 1.25);
  border-bottom: 1px solid rgba(123, 108, 255, 0.1);
}
.product-picker__controls input {
  width: 100%;
}
.product-picker__table-wrapper {
  flex: 1 1 auto;
  overflow: auto;
}
.product-picker__table-wrapper table {
  width: 100%;
  border-collapse: collapse;
}
.product-picker__table-wrapper th,
.product-picker__table-wrapper td {
  padding: calc(var(--spacer) * 0.65) calc(var(--spacer) * 0.9);
  text-align: left;
  border-bottom: 1px solid rgba(123, 108, 255, 0.08);
}
.product-picker__table-wrapper th {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--app-text-soft);
  background: rgba(123, 108, 255, 0.04);
}
.product-picker__table-wrapper tbody tr:hover {
  background: rgba(123, 108, 255, 0.08);
}
.product-picker__status {
  padding: calc(var(--spacer) * 0.75) calc(var(--spacer) * 1.25);
  font-size: 0.9rem;
  color: var(--app-text-soft);
}

.items-grid {
  display: grid;
  gap: calc(var(--spacer) * 0.75);
}

.item-row {
  display: grid;
  gap: calc(var(--spacer) * 0.5);
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  align-items: end;
  padding: calc(var(--spacer) * 0.65);
  border-radius: var(--app-radius-sm);
  background: #ffffff;
  box-shadow: inset 0 0 0 1px rgba(123, 108, 255, 0.12);
}

.item-row .remove-item-btn {
  justify-self: flex-start;
}

.order-table {
  width: 100%;
}

.order-details {
  background: rgba(123, 108, 255, 0.04);
}

.order-details td {
  padding: calc(var(--spacer) * 0.75) calc(var(--spacer) * 1.25);
}

.order-meta {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacer) * 0.35);
  font-size: 0.9rem;
  color: var(--app-text-soft);
}

.item-list {
  margin: 0;
  padding-left: calc(var(--spacer) * 1.25);
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacer) * 0.35);
}

.status-draft {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--spacer) * 0.25);
  padding: calc(var(--spacer) * 0.2) calc(var(--spacer) * 0.6);
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: capitalize;
  background: rgba(123, 108, 255, 0.16);
  color: #4d45b0;
}

.status-pending {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--spacer) * 0.25);
  padding: calc(var(--spacer) * 0.2) calc(var(--spacer) * 0.6);
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: capitalize;
  background: rgba(246, 166, 0, 0.22);
  color: #9a6c00;
}

.status-validated,
.status-delivered {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--spacer) * 0.25);
  padding: calc(var(--spacer) * 0.2) calc(var(--spacer) * 0.6);
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: capitalize;
  background: rgba(46, 182, 139, 0.2);
  color: #1e8a69;
}

.status-rejected {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--spacer) * 0.25);
  padding: calc(var(--spacer) * 0.2) calc(var(--spacer) * 0.6);
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: capitalize;
  background: rgba(235, 74, 74, 0.22);
  color: #ba2d2d;
}

.status-ordered {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--spacer) * 0.25);
  padding: calc(var(--spacer) * 0.2) calc(var(--spacer) * 0.6);
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: capitalize;
  background: rgba(123, 108, 255, 0.2);
  color: #4d45b0;
}

.order-detail__summary {
  display: grid;
  gap: calc(var(--spacer) * 1);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  margin-bottom: calc(var(--spacer) * 1.5);
}
.order-detail__comment {
  margin-bottom: calc(var(--spacer) * 1.5);
}
.order-detail__comment h2 {
  margin-bottom: calc(var(--spacer) * 0.5);
  font-size: 1rem;
}
.order-detail__comment p {
  margin: 0;
  color: var(--app-text-soft);
  line-height: 1.5;
}
.order-detail__items {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacer) * 1);
}
.order-detail__status-form {
  margin-top: calc(var(--spacer) * 0.75);
  display: grid;
  gap: calc(var(--spacer) * 0.5);
}
.order-detail__status-label {
  display: grid;
  gap: calc(var(--spacer) * 0.35);
  font-size: 0.85rem;
  color: var(--app-text-soft);
}
.order-detail__status-label select {
  width: 100%;
}
.order-detail__status-actions {
  display: flex;
  gap: calc(var(--spacer) * 0.5);
  flex-wrap: wrap;
}
.order-detail__status-message {
  font-size: 0.8rem;
  min-height: 1.2rem;
  color: var(--app-text-soft);
}
.order-detail__status-message.is-success {
  color: #1e8a69;
}
.order-detail__status-message.is-error {
  color: #ba2d2d;
}
.order-detail__items-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: calc(var(--spacer) * 1);
  flex-wrap: wrap;
  margin-bottom: calc(var(--spacer) * 0.5);
}
.order-detail__items-header h2 {
  margin: 0;
  font-size: 1.1rem;
}

.summary-card {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacer) * 0.65);
}
.summary-card__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.82rem;
  color: var(--app-text-soft);
}
.summary-card__value {
  font-size: 1.3rem;
  font-weight: 600;
  text-transform: capitalize;
}
.summary-card__list {
  display: grid;
  gap: calc(var(--spacer) * 0.5);
  font-size: 0.85rem;
}
.summary-card__list div {
  display: grid;
  gap: calc(var(--spacer) * 0.2);
}
.summary-card__list dt {
  font-weight: 500;
  color: var(--app-text-soft);
  text-transform: uppercase;
  font-size: 0.72rem;
}
.summary-card__list dd {
  margin: 0;
  font-weight: 600;
}

.supplier-group {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacer) * 1);
}
.supplier-group__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: calc(var(--spacer) * 1);
  flex-wrap: wrap;
}
.supplier-group__header h3 {
  margin: 0;
  font-size: 1.1rem;
}
.supplier-group__contact {
  margin: 0;
  color: var(--app-text-soft);
  font-size: 0.85rem;
}
.supplier-group__meta {
  display: flex;
  gap: calc(var(--spacer) * 1.25);
  flex-wrap: wrap;
}
.supplier-group__meta li {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacer) * 0.15);
  font-size: 0.82rem;
  text-align: right;
}
.supplier-group__details {
  display: grid;
  gap: calc(var(--spacer) * 0.5);
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  font-size: 0.85rem;
}
.supplier-group__details dt {
  font-weight: 600;
  color: var(--app-text-soft);
}
.supplier-group__details dd {
  margin: 0;
}
.supplier-group__warning {
  padding: calc(var(--spacer) * 0.75);
  border-radius: var(--app-radius-sm);
  background: rgba(235, 74, 74, 0.1);
  color: #822929;
  font-size: 0.9rem;
}
.supplier-group__table {
  overflow-x: auto;
}
.supplier-group__table table {
  width: 100%;
  border-collapse: collapse;
}
.supplier-group__table th,
.supplier-group__table td {
  padding: calc(var(--spacer) * 0.65);
  text-align: left;
  border-bottom: 1px solid rgba(123, 108, 255, 0.08);
}
.supplier-group__table th {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--app-text-soft);
}

.product-meta {
  display: block;
  font-size: 0.75rem;
  color: var(--app-text-soft);
}

.supplier-orders__toolbar {
  margin-bottom: calc(var(--spacer) * 1.25);
  display: grid;
  gap: calc(var(--spacer) * 1);
}
.supplier-orders__toolbar .filters {
  display: grid;
  gap: calc(var(--spacer) * 1);
}
.supplier-orders__toolbar .filters fieldset {
  margin: 0;
  padding: 0;
  border: 0;
  display: grid;
  gap: calc(var(--spacer) * 0.65);
}
.supplier-orders__toolbar .filters legend {
  font-weight: 600;
  font-size: 0.9rem;
}
.supplier-orders__toolbar .filters__checkbox-list {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--spacer) * 0.5);
}
.supplier-orders__toolbar .filters__checkbox-list label {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--spacer) * 0.35);
  font-size: 0.85rem;
}
.supplier-orders__toolbar .filters__actions {
  display: flex;
  gap: calc(var(--spacer) * 0.5);
  flex-wrap: wrap;
}
.supplier-orders__alert {
  font-size: 0.85rem;
}
.supplier-orders__note {
  font-size: 0.8rem;
  color: var(--app-text-soft);
}
.supplier-orders__summary {
  display: grid;
  gap: calc(var(--spacer) * 1);
  margin-bottom: calc(var(--spacer) * 1.25);
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}
.supplier-orders__groups {
  display: grid;
  gap: calc(var(--spacer) * 1.25);
}

.summary-tile {
  padding: calc(var(--spacer) * 1);
  border-radius: var(--app-radius-sm);
  background: rgba(123, 108, 255, 0.08);
  display: grid;
  gap: calc(var(--spacer) * 0.25);
  font-size: 0.85rem;
}
.summary-tile__label {
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--app-text-soft);
  font-weight: 600;
}
.summary-tile__value {
  font-size: 1.1rem;
  font-weight: 600;
}
.summary-tile--warning {
  background: rgba(235, 74, 74, 0.12);
  color: #822929;
}

.supplier-card {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacer) * 1);
}
.supplier-card__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: calc(var(--spacer) * 1);
  flex-wrap: wrap;
}
.supplier-card__header h2 {
  margin: 0;
  font-size: 1.1rem;
}
.supplier-card__meta {
  display: flex;
  gap: calc(var(--spacer) * 1);
  color: var(--app-text-soft);
  font-size: 0.85rem;
  flex-wrap: wrap;
}
.supplier-card__actions {
  display: flex;
  gap: calc(var(--spacer) * 0.5);
  flex-wrap: wrap;
}
.supplier-card__actions .btn {
  white-space: nowrap;
}
.supplier-card__details {
  display: grid;
  gap: calc(var(--spacer) * 0.5);
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  font-size: 0.85rem;
}
.supplier-card__details dt {
  font-weight: 600;
  color: var(--app-text-soft);
}
.supplier-card__details dd {
  margin: 0;
}
.supplier-card__warning {
  padding: calc(var(--spacer) * 0.75);
  border-radius: var(--app-radius-sm);
  background: rgba(246, 166, 0, 0.16);
  color: #9a6c00;
  font-size: 0.85rem;
}
.supplier-card__status {
  font-size: 0.85rem;
  font-weight: 600;
  min-height: 1.2rem;
}
.supplier-card__status.is-success {
  color: #1e8a69;
}
.supplier-card__status.is-error {
  color: #ba2d2d;
}
.supplier-card__status.is-warning {
  color: #9a6c00;
}
.supplier-card__editor {
  border: 1px solid rgba(123, 108, 255, 0.18);
  border-radius: var(--app-radius-sm);
  padding: calc(var(--spacer) * 1);
  background: rgba(123, 108, 255, 0.04);
}
.supplier-card__editor-fields {
  display: grid;
  gap: calc(var(--spacer) * 0.75);
}
.supplier-card__editor label {
  display: grid;
  gap: calc(var(--spacer) * 0.35);
  font-size: 0.85rem;
  color: var(--app-text-soft);
}
.supplier-card__editor label input,
.supplier-card__editor label textarea {
  width: 100%;
}
.supplier-card__table {
  overflow-x: auto;
}
.supplier-card__table table {
  width: 100%;
  border-collapse: collapse;
}
.supplier-card__table th,
.supplier-card__table td {
  padding: calc(var(--spacer) * 0.6);
  text-align: left;
  border-bottom: 1px solid rgba(123, 108, 255, 0.08);
}
.supplier-card__table th {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--app-text-soft);
}

@media (max-width: 768px) {
  .summary-card__header {
    flex-direction: column;
    align-items: flex-start;
    gap: calc(var(--spacer) * 0.35);
  }
  .supplier-group__meta {
    justify-content: flex-start;
  }
  .supplier-card__meta {
    justify-content: flex-start;
  }
}
.machine-form {
  display: none;
  flex-direction: column;
  gap: calc(var(--spacer) * 0.85);
  padding: calc(var(--spacer) * 1);
  background: rgba(123, 108, 255, 0.05);
  border-radius: var(--app-radius-md);
  border: 1px dashed rgba(123, 108, 255, 0.32);
}

.machine-form.open {
  display: flex;
}

.machine-image-field {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacer) * 0.35);
}

.machine-image-field__selection {
  font-size: 0.82rem;
  color: var(--app-text-soft);
}

.machine-image-preview {
  border: 1px dashed rgba(123, 108, 255, 0.35);
  border-radius: var(--app-radius-sm);
  padding: calc(var(--spacer) * 0.5);
  font-size: 0.85rem;
  color: var(--app-text-soft);
  background: rgba(123, 108, 255, 0.08);
  min-height: 48px;
  display: flex;
  align-items: center;
}

.machine-image-preview.is-empty {
  font-style: italic;
  color: var(--app-text-soft);
}

.machine-image-preview a {
  color: var(--app-primary);
  font-weight: 600;
  text-decoration: underline;
}

.status-actif {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--spacer) * 0.25);
  padding: calc(var(--spacer) * 0.2) calc(var(--spacer) * 0.6);
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  background: rgba(46, 182, 139, 0.18);
  color: #1e8a69;
}

.status-maintenance {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--spacer) * 0.25);
  padding: calc(var(--spacer) * 0.2) calc(var(--spacer) * 0.6);
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  background: rgba(246, 166, 0, 0.18);
  color: #9a6c00;
}

.status-hors\ service {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--spacer) * 0.25);
  padding: calc(var(--spacer) * 0.2) calc(var(--spacer) * 0.6);
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  background: rgba(235, 74, 74, 0.18);
  color: #ba2d2d;
}

.maintenance-form {
  display: none;
  flex-direction: column;
  gap: calc(var(--spacer) * 0.9);
  padding: calc(var(--spacer) * 1);
  background: rgba(123, 108, 255, 0.05);
  border-radius: var(--app-radius-md);
  border: 1px dashed rgba(123, 108, 255, 0.32);
}

.maintenance-form.open {
  display: flex;
}

.priority-pill {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--spacer) * 0.25);
  padding: calc(var(--spacer) * 0.2) calc(var(--spacer) * 0.6);
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
}

.priority-basse {
  background: rgba(123, 108, 255, 0.16);
  color: #4d45b0;
}

.priority-moyenne {
  background: rgba(246, 166, 0, 0.16);
  color: #9a6c00;
}

.priority-haute {
  background: rgba(255, 122, 198, 0.16);
  color: #b33889;
}

.priority-critique {
  background: rgba(235, 74, 74, 0.2);
  color: #ba2d2d;
}

.status-select {
  min-width: 180px;
}

.maintenance-supplier-email {
  margin-bottom: calc(var(--spacer) * 1);
}
.maintenance-supplier-email .supplier-email-form {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacer) * 1);
}
.maintenance-supplier-email .supplier-email-grid {
  display: grid;
  gap: calc(var(--spacer) * 1);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 900px) {
  .maintenance-supplier-email .supplier-email-grid {
    grid-template-columns: 1fr;
  }
}
.maintenance-supplier-email fieldset {
  margin: 0;
  padding: calc(var(--spacer) * 0.75);
  border-radius: var(--app-radius-md);
  border: 1px solid rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacer) * 0.5);
}
.maintenance-supplier-email .supplier-email-statuses {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--spacer) * 0.5);
}
.maintenance-supplier-email .supplier-email-statuses label {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--spacer) * 0.35);
  font-size: 0.9rem;
}
.maintenance-supplier-email .supplier-email-actions {
  justify-content: flex-end;
  gap: calc(var(--spacer) * 0.6);
}
.maintenance-supplier-email .supplier-email-editor {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacer) * 1);
}
.maintenance-supplier-email .supplier-email-editor textarea {
  min-height: 140px;
  resize: vertical;
}
.maintenance-supplier-email .supplier-email-editor details {
  border: 1px dashed rgba(0, 0, 0, 0.12);
  border-radius: var(--app-radius-md);
  padding: calc(var(--spacer) * 0.75);
}
.maintenance-supplier-email .supplier-email-editor details summary {
  cursor: pointer;
  font-weight: 600;
  margin-bottom: calc(var(--spacer) * 0.5);
}
.maintenance-supplier-email .supplier-email-requests {
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: var(--app-radius-md);
  padding: calc(var(--spacer) * 1);
}
.maintenance-supplier-email .supplier-email-requests .empty-state {
  margin: 0;
  text-align: center;
  color: rgba(0, 0, 0, 0.6);
}
.maintenance-supplier-email .supplier-email-request-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacer) * 0.75);
}
.maintenance-supplier-email .supplier-email-request-list .supplier-email-request {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacer) * 0.25);
}
.maintenance-supplier-email .supplier-email-request-list .supplier-email-request .request-title {
  font-weight: 600;
}
.maintenance-supplier-email .supplier-email-request-list .supplier-email-request .request-meta {
  font-size: 0.85rem;
  color: rgba(0, 0, 0, 0.6);
}
.maintenance-supplier-email .supplier-email-request-list .supplier-email-request .request-desc {
  margin: 0;
  font-size: 0.9rem;
}

.action-pill {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--spacer) * 0.25);
  padding: calc(var(--spacer) * 0.2) calc(var(--spacer) * 0.55);
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
}

.action-create {
  background: rgba(46, 182, 139, 0.18);
  color: #1e8a69;
}

.action-update {
  background: rgba(123, 108, 255, 0.18);
  color: #4d45b0;
}

.action-delete {
  background: rgba(235, 74, 74, 0.18);
  color: #ba2d2d;
}

.action-validate {
  background: rgba(255, 122, 198, 0.18);
  color: #b33889;
}

.action-sync {
  background: rgba(0, 188, 212, 0.18);
  color: #017a8b;
}

.action-default {
  background: rgba(123, 108, 255, 0.14);
  color: #4d45b0;
}

.pagination {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--spacer) * 0.5);
  justify-content: center;
  margin-top: calc(var(--spacer) * 1);
}

.pagination button {
  border: 1px solid rgba(123, 108, 255, 0.25);
  border-radius: var(--app-radius-sm);
  background: #ffffff;
  padding: calc(var(--spacer) * 0.3) calc(var(--spacer) * 0.6);
  font: inherit;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.pagination button:hover,
.pagination button:focus-visible {
  background: rgba(123, 108, 255, 0.12);
  border-color: rgba(123, 108, 255, 0.45);
}

.pagination button.active {
  background: var(--app-gradient);
  border-color: transparent;
  color: #ffffff;
}

.collaborators-tools {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: calc(var(--spacer) * 1);
  margin-bottom: calc(var(--spacer) * 1.5);
}

.card--tool {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacer) * 0.75);
}
.card--tool .card__header {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacer) * 0.35);
}
.card--tool .card__description {
  margin: 0;
  font-size: 0.88rem;
  color: var(--app-text-soft);
}

.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--spacer) * 0.25);
  padding: calc(var(--spacer) * 0.2) calc(var(--spacer) * 0.55);
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.badge--success {
  background: rgba(46, 182, 139, 0.16);
  color: #1e8a69;
}

.badge--warning {
  background: rgba(246, 166, 0, 0.16);
  color: #9a6c00;
}

.modal-open {
  overflow: hidden;
}

.modal {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(var(--spacer) * 1.5);
  background: rgba(17, 16, 36, 0.55);
  backdrop-filter: blur(2px);
  z-index: 500;
}
.modal[hidden] {
  display: none;
}

.modal__backdrop {
  position: absolute;
  inset: 0;
}

.modal__dialog {
  position: relative;
  width: min(420px, 100%);
  background: #ffffff;
  border-radius: var(--app-radius-md);
  padding: calc(var(--spacer) * 1.25);
  box-shadow: 0 18px 44px rgba(17, 16, 36, 0.26);
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacer) * 0.75);
  z-index: 1;
}

.modal__title {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--app-text);
}

.modal__body {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacer) * 0.75);
}

.modal__close {
  position: absolute;
  top: calc(var(--spacer) * 0.5);
  right: calc(var(--spacer) * 0.5);
  border: 0;
  background: transparent;
  font-size: 1.5rem;
  color: var(--app-text-soft);
  cursor: pointer;
  line-height: 1;
}
.modal__close:hover, .modal__close:focus-visible {
  color: var(--app-text);
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: calc(var(--spacer) * 0.5);
}

.modal-form {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacer) * 0.6);
}

.modal-intro {
  margin: 0;
  font-size: 0.9rem;
  color: var(--app-text-soft);
}

.qr-wrapper {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacer) * 0.75);
  align-items: center;
  text-align: center;
}

.qr-image {
  width: 220px;
  height: 220px;
  border-radius: var(--app-radius-sm);
  box-shadow: 0 4px 18px rgba(17, 16, 36, 0.18);
}

.qr-link {
  font-size: 0.85rem;
  word-break: break-all;
  padding: calc(var(--spacer) * 0.5);
  border-radius: var(--app-radius-sm);
  border: 1px dashed rgba(123, 108, 255, 0.35);
  background: rgba(123, 108, 255, 0.08);
  cursor: pointer;
}

.qr-expiry {
  font-size: 0.78rem;
  color: var(--app-text-soft);
  margin: 0;
}

@media (max-width: 640px) {
  .collaborators-tools {
    grid-template-columns: 1fr;
  }
  .modal {
    padding: calc(var(--spacer) * 1);
  }
}
.page-section--products .action-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--spacer) * 0.35);
  align-items: center;
  justify-content: flex-end;
}

.stock-movement-modal {
  width: min(520px, 90vw);
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacer) * 0.75);
}

.stock-movement-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--spacer) * 0.5);
}

.stock-movement-modal__title {
  font-size: 20px;
  font-weight: 600;
  margin: 0;
  color: #102347;
}

.stock-movement-modal__close {
  border: none;
  background: transparent;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  color: rgba(16, 35, 71, 0.6);
}

.stock-movement-modal__meta {
  font-size: 14px;
  color: rgba(16, 35, 71, 0.7);
}

.stock-movement-modal__status {
  font-size: 14px;
  min-height: 18px;
  color: rgba(16, 35, 71, 0.8);
}

.stock-movement-modal__status--error {
  color: #c4335c;
}

.stock-movement-modal__status--success {
  color: #14985d;
}

.stock-movement-modal__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: calc(var(--spacer) * 0.5);
}

.stock-movement-modal__help {
  font-size: 13px;
  color: rgba(16, 35, 71, 0.68);
  margin: 0;
}

.stock-movement-modal__form .form-field {
  width: 100%;
}

.product-row--low-stock {
  background: rgba(255, 124, 95, 0.08);
}

.card__message {
  padding: calc(var(--spacer) * 1);
  border-radius: var(--app-radius-md);
  background: rgba(16, 35, 71, 0.04);
  margin: 0;
}

.card__message--error {
  border: 1px solid rgba(196, 51, 92, 0.35);
  background: rgba(196, 51, 92, 0.1);
  color: #7f1d1d;
}

.page-section--product-actions .page-header {
  margin-bottom: calc(var(--spacer) * 1);
}

.grid {
  display: grid;
  gap: calc(var(--spacer) * 1);
}

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

.product-actions__summary dl {
  margin: 0;
  display: grid;
  gap: calc(var(--spacer) * 0.5);
}

.definition-list__item {
  display: flex;
  justify-content: space-between;
  gap: calc(var(--spacer) * 0.5);
  padding: calc(var(--spacer) * 0.5);
  background: rgba(16, 35, 71, 0.04);
  border-radius: var(--app-radius-sm);
}

.definition-list__item dt {
  font-weight: 600;
  color: rgba(16, 35, 71, 0.8);
}

.definition-list__item dd {
  margin: 0;
  color: rgba(16, 35, 71, 0.88);
}

.product-actions__hint {
  font-size: 13px;
  color: rgba(16, 35, 71, 0.62);
  margin: 0;
}

.product-actions__form .form-grid {
  display: grid;
  gap: calc(var(--spacer) * 0.75);
}

.product-actions__form .form-field--full {
  grid-column: 1/-1;
}

.product-actions__history {
  margin-top: calc(var(--spacer) * 1.5);
}

.movement-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: calc(var(--spacer) * 0.5);
}

.movement-list__item {
  padding: calc(var(--spacer) * 0.75);
  border-radius: var(--app-radius-md);
  background: rgba(16, 35, 71, 0.05);
  display: grid;
  gap: calc(var(--spacer) * 0.35);
}

.movement-list__header {
  display: flex;
  justify-content: space-between;
  gap: calc(var(--spacer) * 0.5);
  flex-wrap: wrap;
}

.movement-list__type {
  font-weight: 600;
  text-transform: capitalize;
  color: rgba(16, 35, 71, 0.85);
}

.movement-list__meta {
  font-size: 13px;
  color: rgba(16, 35, 71, 0.66);
}

.movement-list__note {
  font-size: 14px;
  color: rgba(16, 35, 71, 0.78);
  margin: 0;
}

.movement-list__empty {
  text-align: center;
  padding: calc(var(--spacer) * 1);
  color: rgba(16, 35, 71, 0.62);
  border: 1px dashed rgba(16, 35, 71, 0.2);
  border-radius: var(--app-radius-md);
}

.form-status--error {
  color: #c4335c;
}

/* Action grid (mobile-first) */
.action-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: calc(var(--spacer) * 0.5);
  margin-top: calc(var(--spacer) * 0.5);
}

.action-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 0.75rem 0.85rem;
  width: 100%;
  border: 1px solid rgba(16, 35, 71, 0.18);
  background: #ffffff;
  border-radius: var(--app-radius-md);
  font-weight: 600;
  color: rgba(16, 35, 71, 0.9);
}

.action-button[disabled], .action-button[aria-disabled=true] {
  opacity: 0.5;
  cursor: not-allowed;
}

.action-button.is-active {
  border-color: rgba(123, 108, 255, 0.55);
  box-shadow: inset 0 0 0 2px rgba(123, 108, 255, 0.35);
}

@media (min-width: 720px) {
  .action-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.qty-quick {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.5rem;
}

.qty-quick__label {
  font-size: 13px;
  color: rgba(16, 35, 71, 0.66);
}

.qty-chip {
  border: 1px dashed rgba(16, 35, 71, 0.24);
  background: rgba(16, 35, 71, 0.04);
  color: rgba(16, 35, 71, 0.88);
  border-radius: 999px;
  padding: 0.25rem 0.6rem;
  font-weight: 600;
}

.page-section--product-edit .product-edit-card {
  max-width: 960px;
  margin: 0 auto;
}
.page-section--product-edit .product-edit-form {
  display: grid;
  gap: calc(var(--spacer) * 0.75);
}
.page-section--product-edit .form-field--inline {
  display: flex;
  align-items: center;
  gap: calc(var(--spacer) * 0.5);
}
.page-section--product-edit .form-field--inline input[type=checkbox] {
  width: 18px;
  height: 18px;
}
.page-section--product-edit .form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--spacer) * 0.5);
}
.page-section--product-edit .form-actions__secondary {
  display: flex;
  gap: calc(var(--spacer) * 0.35);
  flex-wrap: wrap;
}
.page-section--product-edit .form-status {
  margin-top: calc(var(--spacer) * 0.5);
  min-height: 1.25rem;
}
.page-section--product-edit .form-status--success {
  color: #14985d;
}
.page-section--product-edit .form-status--error {
  color: #c4335c;
}

.page-section--docs .docs-card {
  margin-top: calc(var(--spacer) * 1);
}
.page-section--docs .docs-layout {
  display: flex;
  gap: calc(var(--spacer) * 1);
  align-items: flex-start;
  flex-wrap: wrap;
}
.page-section--docs .docs-sidebar {
  flex: 0 0 260px;
  max-width: 320px;
  background: rgba(123, 108, 255, 0.06);
  border: 1px solid rgba(123, 108, 255, 0.16);
  border-radius: var(--app-radius-md);
  padding: calc(var(--spacer) * 0.75);
}
@media (min-width: 0px) and (max-width: 1200px) {
  .page-section--docs .docs-sidebar {
    flex: 1 1 100%;
    max-width: 100%;
  }
}
@media (min-width: 768px) and (max-width: 1200px) {
  .page-section--docs .docs-sidebar {
    flex: 1 1 100%;
    max-width: 100%;
  }
}
.page-section--docs .docs-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacer) * 0.35);
}
.page-section--docs .docs-list__item a {
  display: flex;
  align-items: center;
  gap: calc(var(--spacer) * 0.35);
  padding: calc(var(--spacer) * 0.35) calc(var(--spacer) * 0.5);
  border-radius: var(--app-radius-sm);
  color: inherit;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.page-section--docs .docs-list__item a:hover, .page-section--docs .docs-list__item a:focus {
  background: rgba(123, 108, 255, 0.14);
  color: var(--app-primary);
}
.page-section--docs .docs-list__item.is-active a,
.page-section--docs .docs-list__item a[aria-current=page] {
  background: rgba(123, 108, 255, 0.22);
  color: var(--app-primary);
  font-weight: 600;
}
.page-section--docs .docs-content {
  flex: 1 1 320px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacer) * 0.75);
}
.page-section--docs .docs-content__header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(var(--spacer) * 0.5);
  justify-content: space-between;
}
.page-section--docs .docs-content__title {
  margin: 0;
  font-size: 1.3rem;
}
.page-section--docs .docs-content__body {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacer) * 0.75);
  line-height: 1.6;
}
.page-section--docs .docs-content__body h1,
.page-section--docs .docs-content__body h2,
.page-section--docs .docs-content__body h3,
.page-section--docs .docs-content__body h4,
.page-section--docs .docs-content__body h5,
.page-section--docs .docs-content__body h6 {
  margin-top: calc(var(--spacer) * 0.75);
  margin-bottom: calc(var(--spacer) * 0.35);
  font-weight: 600;
}
.page-section--docs .docs-content__body ul,
.page-section--docs .docs-content__body ol {
  padding-left: calc(var(--spacer) * 1.25);
}
.page-section--docs .docs-content__body pre {
  background: rgba(17, 24, 39, 0.08);
  padding: calc(var(--spacer) * 0.75);
  border-radius: var(--app-radius-sm);
  overflow-x: auto;
}
.page-section--docs .docs-content__body table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid rgba(123, 108, 255, 0.18);
}
.page-section--docs .docs-content__body table th,
.page-section--docs .docs-content__body table td {
  border: 1px solid rgba(123, 108, 255, 0.18);
  padding: calc(var(--spacer) * 0.5);
  text-align: left;
}
.page-section--docs .docs-content__body table th {
  background: rgba(123, 108, 255, 0.12);
}

.manager-dashboard {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacer) * 1.5);
}

.manager-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: calc(var(--spacer) * 1.25);
}

.manager-card {
  background: var(--app-surface);
  border-radius: var(--app-radius-lg);
  padding: calc(var(--spacer) * 1);
  box-shadow: inset 0 0 0 1px rgba(123, 108, 255, 0.1);
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacer) * 0.75);
}

.manager-card--critical {
  border-left: 4px solid #eb4a4a;
}

.manager-card--warning {
  border-left: 4px solid #f6a600;
}

.manager-card--info {
  border-left: 4px solid #7b6cff;
}

.manager-card--neutral {
  border-left: 4px solid rgba(123, 108, 255, 0.3);
}

.manager-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacer) * 0.5);
}

.manager-list__title {
  font-weight: 600;
  display: block;
}

.manager-list__meta {
  font-size: 0.85rem;
  color: var(--app-text-soft);
}

.manager-list__link {
  font-size: 0.85rem;
  color: var(--app-primary);
}

.manager-list__link:hover,
.manager-list__link:focus-visible {
  text-decoration: underline;
}

.technician-dashboard {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacer) * 1.5);
}

.technician-actions {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--spacer) * 0.75);
}

.action-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: calc(var(--spacer) * 0.55) calc(var(--spacer) * 1.1);
  border-radius: var(--app-radius-sm);
  border: 1px solid rgba(123, 108, 255, 0.25);
  background: #ffffff;
  font-weight: 600;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.action-button:hover,
.action-button:focus-visible {
  background: rgba(123, 108, 255, 0.12);
  border-color: rgba(123, 108, 255, 0.45);
  transform: translateY(-1px);
}

.technician-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: calc(var(--spacer) * 1.25);
}

.technician-card {
  background: var(--app-surface);
  border-radius: var(--app-radius-lg);
  padding: calc(var(--spacer) * 1);
  box-shadow: inset 0 0 0 1px rgba(123, 108, 255, 0.1);
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacer) * 0.75);
}

.technician-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacer) * 0.5);
}

.technician-list__title {
  font-weight: 600;
  display: block;
}

.technician-list__meta {
  font-size: 0.85rem;
  color: var(--app-text-soft);
}

.technician-list__link {
  font-size: 0.85rem;
  color: var(--app-primary);
}

.technician-list__link:hover,
.technician-list__link:focus-visible {
  text-decoration: underline;
}

.order-create-form,
.maintenance-create-form,
.product-quick-form,
.scan-form {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacer) * 0.85);
}

.order-items {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacer) * 0.75);
  margin-top: calc(var(--spacer) * 0.5);
}

.order-items__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.order-items__actions {
  display: inline-flex;
  gap: calc(var(--spacer) * 0.5);
  align-items: center;
}
@media (min-width: 0px) and (max-width: 1200px) {
  .order-items__actions {
    flex-direction: column;
    align-items: stretch;
  }
}

.order-items__container {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacer) * 0.65);
}

.order-item-row {
  display: grid;
  grid-template-columns: minmax(200px, 1fr) minmax(120px, 160px) auto;
  gap: calc(var(--spacer) * 0.5);
  align-items: end;
}
@media (min-width: 0px) and (max-width: 1200px) {
  .order-item-row {
    grid-template-columns: 1fr;
    align-items: stretch;
  }
}

.order-item-row select,
.order-item-row input[type=number] {
  width: 100%;
}

.order-item-remove {
  align-self: center;
}
@media (min-width: 0px) and (max-width: 1200px) {
  .order-item-remove {
    align-self: stretch;
  }
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: calc(var(--spacer) * 0.5);
}
@media (min-width: 0px) and (max-width: 1200px) {
  .form-actions {
    flex-direction: column-reverse;
    align-items: stretch;
  }
}

.form-status {
  margin: 0;
  font-size: 0.95rem;
  color: var(--app-text-soft);
  min-height: 1.25rem;
}

.scan-card {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacer) * 1);
}

.scan-camera {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacer) * 0.5);
}

.scan-camera__unsupported {
  font-size: 0.9rem;
  color: var(--app-text-soft);
}

.scan-camera__preview {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacer) * 0.5);
}

.scan-camera__video-shell {
  position: relative;
  border-radius: var(--app-radius-md);
  overflow: hidden;
  aspect-ratio: 4/3;
  background: rgba(123, 108, 255, 0.12);
}

.scan-camera__video-shell video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.scan-camera__focus {
  pointer-events: none;
  position: absolute;
  inset: calc(var(--spacer) * 0.75);
  border: 2px solid rgba(123, 108, 255, 0.8);
  border-radius: var(--app-radius-md);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.35);
}

.scan-camera__hint {
  font-size: 0.9rem;
  color: var(--app-text-soft);
  margin: 0;
}

.scan-camera__actions {
  display: flex;
  justify-content: flex-end;
}

.scan-results {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacer) * 0.5);
}

.scan-results ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacer) * 0.5);
}

.scan-result {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: calc(var(--spacer) * 0.35);
  padding: calc(var(--spacer) * 0.5);
  border-radius: var(--app-radius-md);
  box-shadow: inset 0 0 0 1px rgba(123, 108, 255, 0.12);
  background: rgba(123, 108, 255, 0.05);
}
@media (min-width: 0px) and (max-width: 1200px) {
  .scan-result {
    grid-template-columns: 1fr;
  }
}

.scan-result__title {
  font-weight: 600;
}

.scan-result__meta {
  font-size: 0.85rem;
  color: var(--app-text-soft);
}

.scan-result__actions {
  display: flex;
  gap: calc(var(--spacer) * 0.35);
  align-items: center;
  justify-content: flex-end;
}
@media (min-width: 0px) and (max-width: 1200px) {
  .scan-result__actions {
    justify-content: flex-start;
  }
}

.checkbox-field {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--spacer) * 0.5);
  font-weight: 500;
}

.stock-fields.is-disabled {
  opacity: 0.6;
}

.page-section--product-labels {
  padding-bottom: calc(var(--spacer) * 2);
}
.page-section--product-labels .page-header {
  margin-bottom: calc(var(--spacer) * 1);
}

.labels-template-switch {
  display: inline-flex;
  gap: calc(var(--spacer) * 0.35);
  align-items: center;
}

.labels-template-switch .btn.is-active {
  background: var(--app-primary);
  color: #fff;
  border-color: transparent;
}

.labels-sheet {
  padding: 15mm 0.5mm;
  background: #fff;
  border-radius: var(--app-radius-lg);
  box-shadow: 0 6px 32px rgba(13, 22, 54, 0.14);
}

.labels-sheet__grid {
  display: grid;
  grid-template-columns: repeat(2, 99.1mm);
  grid-auto-rows: 67mm;
  justify-content: center;
}

.labels-sheet--template-16 .labels-sheet__grid {
  grid-auto-rows: 33.5mm;
}

.label-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: calc(var(--spacer) * 0.75);
  border: 1px solid rgba(26, 42, 72, 0.18);
  box-sizing: border-box;
  background: #fff;
}

.labels-sheet--template-16 .label-card {
  padding: calc(var(--spacer) * 0.5);
}

.label-card__header {
  margin-bottom: calc(var(--spacer) * 0.35);
}

.label-card__title {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  margin: 0;
  color: #1a2a48;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.labels-sheet--template-16 .label-card__title {
  font-size: 11px;
}

.label-card__body {
  display: grid;
  grid-template-columns: 1fr minmax(0, 82px);
  gap: calc(var(--spacer) * 0.5);
  align-items: center;
}

.labels-sheet--template-16 .label-card__body {
  grid-template-columns: 1fr minmax(0, 64px);
  gap: calc(var(--spacer) * 0.35);
}

.label-card__ean {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacer) * 0.25);
  align-items: center;
  justify-content: center;
}

.label-card__barcode {
  width: 100%;
  min-height: 36px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.labels-sheet--template-16 .label-card__barcode {
  min-height: 28px;
}

.label-card__barcode canvas {
  width: 100%;
  height: auto;
}

.label-card__barcode--error {
  font-size: 11px;
  color: #a61e4d;
  text-align: center;
}

.label-card__ean-text {
  font-size: 11px;
  letter-spacing: 0.06em;
  font-weight: 500;
  margin: 0;
}

.labels-sheet--template-16 .label-card__ean-text {
  font-size: 10px;
}

.label-card__qr {
  display: flex;
  justify-content: center;
  align-items: center;
}

.label-card__qr img {
  width: 82px;
  height: 82px;
  object-fit: contain;
  image-rendering: pixelated;
}

.labels-sheet--template-16 .label-card__qr img {
  width: 64px;
  height: 64px;
}

.label-card__qr-fallback {
  font-size: 11px;
  color: #6b7280;
  text-align: center;
}

@media screen and (max-width: 860px) {
  .labels-sheet__grid {
    grid-template-columns: minmax(0, 1fr);
    grid-auto-rows: auto;
    gap: calc(var(--spacer) * 0.75);
  }
  .label-card {
    border-radius: var(--app-radius-md);
  }
}
@page {
  size: A4;
  margin: 15mm 0.5mm;
}
@media print {
  html, body {
    background: #fff !important;
    padding: 0;
    margin: 0;
  }
  .main-header,
  .footer,
  .page-section--product-labels > .page-header,
  .page-section--product-labels > .page-header + .card,
  .page-section--product-labels .page-description {
    display: none !important;
  }
  .page-section--product-labels {
    padding: 0 !important;
    margin: 0 !important;
  }
  .labels-sheet {
    padding: 0;
    margin: 0 auto;
    box-shadow: none;
    border-radius: 0;
    background: #fff;
  }
  .labels-sheet__grid {
    gap: 0;
  }
  .label-card {
    border: none;
    background: #fff;
    padding: 6mm;
  }
  .labels-sheet--template-16 .label-card {
    padding: 4mm;
  }
  .label-card__title {
    font-size: 12px;
  }
  .labels-sheet--template-16 .label-card__title {
    font-size: 11px;
  }
}
:root, :root *:after, :root *:before {
  --app-bg: #f7f8ff;
  --app-surface: #ffffff;
  --app-surface-muted: #f0f2ff;
  --app-border: rgba(123, 108, 255, 0.18);
  --app-border-strong: rgba(123, 108, 255, 0.32);
  --app-shadow-soft: 0 24px 48px rgba(20, 16, 38, 0.08);
  --app-shadow-medium: 0 20px 32px rgba(20, 16, 38, 0.15);
  --app-shadow-focus: 0 0 0 3px rgba(123, 108, 255, 0.25);
  --app-radius-xs: 6px;
  --app-radius-sm: 10px;
  --app-radius-md: 14px;
  --app-radius-lg: 20px;
  --app-spacing: 1rem;
  --app-spacing-lg: 1.5rem;
  --app-spacing-xl: 2.5rem;
  --app-primary: #7b6cff;
  --app-primary-strong: #5f52e7;
  --app-secondary: #ff7ac6;
  --app-secondary-dark: #e755b0;
  --app-text: #1e1b3a;
  --app-text-muted: #5a5875;
  --app-text-soft: #7b7a92;
  --app-success: #2eb68b;
  --app-warning: #f6a600;
  --app-danger: #eb4a4a;
  --app-gradient: linear-gradient(105deg, #7b6cff 0%, #ff7ac6 100%);
  --app-gradient-dark: linear-gradient(105deg, #5f52e7 0%, #e755b0 100%);
  --accent-gradient: linear-gradient(135deg, #30c5f0, #ff66b2, #ffd873);
  --btn-surface-bg: rgba(255, 255, 255, 0.12);
  --btn-base-shadow: 0 15px 28px rgba(123, 108, 255, 0.15);
  --btn-primary-shadow: 0 18px 32px rgba(123, 108, 255, 0.25);
  --btn-primary-shadow-hover: 0 20px 36px rgba(123, 108, 255, 0.3);
  --btn-ghost-border: rgba(255, 255, 255, 0.48);
  --btn-ghost-hover-bg: rgba(255, 255, 255, 0.18);
  --theme: default;
  --spacer: 2rem;
  --gutter: 2rem;
  --col: 12;
  --row: 12;
  --text-font: var(--font-primary);
  --text-color: #1e1b3a;
  --text-color-dark: #ffffff;
  --headings-font: var(--font-title);
  --headings-color: #1e1b3a;
  --headings-color-dark: #ffffff;
  --bg-dark: #141026;
  --bg-light: #ffffff;
  --app-bg-xs: #f7f8ff;
  --app-surface-xs: #ffffff;
  --app-surface-muted-xs: #f0f2ff;
  --app-border-xs: rgba(123, 108, 255, 0.18);
  --app-border-strong-xs: rgba(123, 108, 255, 0.32);
  --app-shadow-soft-xs: 0 24px 48px rgba(20, 16, 38, 0.08);
  --app-shadow-medium-xs: 0 20px 32px rgba(20, 16, 38, 0.15);
  --app-shadow-focus-xs: 0 0 0 3px rgba(123, 108, 255, 0.25);
  --app-radius-xs-xs: 6px;
  --app-radius-sm-xs: 10px;
  --app-radius-md-xs: 14px;
  --app-radius-lg-xs: 20px;
  --app-spacing-xs: 1rem;
  --app-spacing-lg-xs: 1.5rem;
  --app-spacing-xl-xs: 2.5rem;
  --app-primary-xs: #7b6cff;
  --app-primary-strong-xs: #5f52e7;
  --app-secondary-xs: #ff7ac6;
  --app-secondary-dark-xs: #e755b0;
  --app-text-xs: #1e1b3a;
  --app-text-muted-xs: #5a5875;
  --app-text-soft-xs: #7b7a92;
  --app-success-xs: #2eb68b;
  --app-warning-xs: #f6a600;
  --app-danger-xs: #eb4a4a;
  --app-gradient-xs: linear-gradient(105deg, #7b6cff 0%, #ff7ac6 100%);
  --app-gradient-dark-xs: linear-gradient(105deg, #5f52e7 0%, #e755b0 100%);
  --accent-gradient-xs: linear-gradient(135deg, #30c5f0, #ff66b2, #ffd873);
  --btn-surface-bg-xs: rgba(255, 255, 255, 0.12);
  --btn-base-shadow-xs: 0 15px 28px rgba(123, 108, 255, 0.15);
  --btn-primary-shadow-xs: 0 18px 32px rgba(123, 108, 255, 0.25);
  --btn-primary-shadow-hover-xs: 0 20px 36px rgba(123, 108, 255, 0.3);
  --btn-ghost-border-xs: rgba(255, 255, 255, 0.48);
  --btn-ghost-hover-bg-xs: rgba(255, 255, 255, 0.18);
  --max-xs: 1200px;
  --min-xs: 0px;
  --spacer-xs: 1.6rem;
  --gutter-xs: 1.6rem;
  --mobile-xs: true;
  --app-bg-xs-l: #f7f8ff;
  --app-surface-xs-l: #ffffff;
  --app-surface-muted-xs-l: #f0f2ff;
  --app-border-xs-l: rgba(123, 108, 255, 0.18);
  --app-border-strong-xs-l: rgba(123, 108, 255, 0.32);
  --app-shadow-soft-xs-l: 0 24px 48px rgba(20, 16, 38, 0.08);
  --app-shadow-medium-xs-l: 0 20px 32px rgba(20, 16, 38, 0.15);
  --app-shadow-focus-xs-l: 0 0 0 3px rgba(123, 108, 255, 0.25);
  --app-radius-xs-xs-l: 6px;
  --app-radius-sm-xs-l: 10px;
  --app-radius-md-xs-l: 14px;
  --app-radius-lg-xs-l: 20px;
  --app-spacing-xs-l: 1rem;
  --app-spacing-lg-xs-l: 1.5rem;
  --app-spacing-xl-xs-l: 2.5rem;
  --app-primary-xs-l: #7b6cff;
  --app-primary-strong-xs-l: #5f52e7;
  --app-secondary-xs-l: #ff7ac6;
  --app-secondary-dark-xs-l: #e755b0;
  --app-text-xs-l: #1e1b3a;
  --app-text-muted-xs-l: #5a5875;
  --app-text-soft-xs-l: #7b7a92;
  --app-success-xs-l: #2eb68b;
  --app-warning-xs-l: #f6a600;
  --app-danger-xs-l: #eb4a4a;
  --app-gradient-xs-l: linear-gradient(105deg, #7b6cff 0%, #ff7ac6 100%);
  --app-gradient-dark-xs-l: linear-gradient(105deg, #5f52e7 0%, #e755b0 100%);
  --accent-gradient-xs-l: linear-gradient(135deg, #30c5f0, #ff66b2, #ffd873);
  --btn-surface-bg-xs-l: rgba(255, 255, 255, 0.12);
  --btn-base-shadow-xs-l: 0 15px 28px rgba(123, 108, 255, 0.15);
  --btn-primary-shadow-xs-l: 0 18px 32px rgba(123, 108, 255, 0.25);
  --btn-primary-shadow-hover-xs-l: 0 20px 36px rgba(123, 108, 255, 0.3);
  --btn-ghost-border-xs-l: rgba(255, 255, 255, 0.48);
  --btn-ghost-hover-bg-xs-l: rgba(255, 255, 255, 0.18);
  --orientation-xs-l: landscape;
  --breakpoint-xs-l: xs;
  --spacer-xs-l: 1.6rem;
  --gutter-xs-l: 1.6rem;
  --mobile-xs-l: true;
  --app-bg-sm: #f7f8ff;
  --app-surface-sm: #ffffff;
  --app-surface-muted-sm: #f0f2ff;
  --app-border-sm: rgba(123, 108, 255, 0.18);
  --app-border-strong-sm: rgba(123, 108, 255, 0.32);
  --app-shadow-soft-sm: 0 24px 48px rgba(20, 16, 38, 0.08);
  --app-shadow-medium-sm: 0 20px 32px rgba(20, 16, 38, 0.15);
  --app-shadow-focus-sm: 0 0 0 3px rgba(123, 108, 255, 0.25);
  --app-radius-xs-sm: 6px;
  --app-radius-sm-sm: 10px;
  --app-radius-md-sm: 14px;
  --app-radius-lg-sm: 20px;
  --app-spacing-sm: 1rem;
  --app-spacing-lg-sm: 1.5rem;
  --app-spacing-xl-sm: 2.5rem;
  --app-primary-sm: #7b6cff;
  --app-primary-strong-sm: #5f52e7;
  --app-secondary-sm: #ff7ac6;
  --app-secondary-dark-sm: #e755b0;
  --app-text-sm: #1e1b3a;
  --app-text-muted-sm: #5a5875;
  --app-text-soft-sm: #7b7a92;
  --app-success-sm: #2eb68b;
  --app-warning-sm: #f6a600;
  --app-danger-sm: #eb4a4a;
  --app-gradient-sm: linear-gradient(105deg, #7b6cff 0%, #ff7ac6 100%);
  --app-gradient-dark-sm: linear-gradient(105deg, #5f52e7 0%, #e755b0 100%);
  --accent-gradient-sm: linear-gradient(135deg, #30c5f0, #ff66b2, #ffd873);
  --btn-surface-bg-sm: rgba(255, 255, 255, 0.12);
  --btn-base-shadow-sm: 0 15px 28px rgba(123, 108, 255, 0.15);
  --btn-primary-shadow-sm: 0 18px 32px rgba(123, 108, 255, 0.25);
  --btn-primary-shadow-hover-sm: 0 20px 36px rgba(123, 108, 255, 0.3);
  --btn-ghost-border-sm: rgba(255, 255, 255, 0.48);
  --btn-ghost-hover-bg-sm: rgba(255, 255, 255, 0.18);
  --max-sm: 1200px;
  --min-sm: 768px;
  --spacer-sm: 1.6rem;
  --gutter-sm: 1.6rem;
  --mobile-sm: true;
  --app-bg-sm-l: #f7f8ff;
  --app-surface-sm-l: #ffffff;
  --app-surface-muted-sm-l: #f0f2ff;
  --app-border-sm-l: rgba(123, 108, 255, 0.18);
  --app-border-strong-sm-l: rgba(123, 108, 255, 0.32);
  --app-shadow-soft-sm-l: 0 24px 48px rgba(20, 16, 38, 0.08);
  --app-shadow-medium-sm-l: 0 20px 32px rgba(20, 16, 38, 0.15);
  --app-shadow-focus-sm-l: 0 0 0 3px rgba(123, 108, 255, 0.25);
  --app-radius-xs-sm-l: 6px;
  --app-radius-sm-sm-l: 10px;
  --app-radius-md-sm-l: 14px;
  --app-radius-lg-sm-l: 20px;
  --app-spacing-sm-l: 1rem;
  --app-spacing-lg-sm-l: 1.5rem;
  --app-spacing-xl-sm-l: 2.5rem;
  --app-primary-sm-l: #7b6cff;
  --app-primary-strong-sm-l: #5f52e7;
  --app-secondary-sm-l: #ff7ac6;
  --app-secondary-dark-sm-l: #e755b0;
  --app-text-sm-l: #1e1b3a;
  --app-text-muted-sm-l: #5a5875;
  --app-text-soft-sm-l: #7b7a92;
  --app-success-sm-l: #2eb68b;
  --app-warning-sm-l: #f6a600;
  --app-danger-sm-l: #eb4a4a;
  --app-gradient-sm-l: linear-gradient(105deg, #7b6cff 0%, #ff7ac6 100%);
  --app-gradient-dark-sm-l: linear-gradient(105deg, #5f52e7 0%, #e755b0 100%);
  --accent-gradient-sm-l: linear-gradient(135deg, #30c5f0, #ff66b2, #ffd873);
  --btn-surface-bg-sm-l: rgba(255, 255, 255, 0.12);
  --btn-base-shadow-sm-l: 0 15px 28px rgba(123, 108, 255, 0.15);
  --btn-primary-shadow-sm-l: 0 18px 32px rgba(123, 108, 255, 0.25);
  --btn-primary-shadow-hover-sm-l: 0 20px 36px rgba(123, 108, 255, 0.3);
  --btn-ghost-border-sm-l: rgba(255, 255, 255, 0.48);
  --btn-ghost-hover-bg-sm-l: rgba(255, 255, 255, 0.18);
  --orientation-sm-l: landscape;
  --breakpoint-sm-l: sm;
  --spacer-sm-l: 1.5rem;
  --gutter-sm-l: 1.5rem;
  --mobile-sm-l: true;
  --app-bg-md: #f7f8ff;
  --app-surface-md: #ffffff;
  --app-surface-muted-md: #f0f2ff;
  --app-border-md: rgba(123, 108, 255, 0.18);
  --app-border-strong-md: rgba(123, 108, 255, 0.32);
  --app-shadow-soft-md: 0 24px 48px rgba(20, 16, 38, 0.08);
  --app-shadow-medium-md: 0 20px 32px rgba(20, 16, 38, 0.15);
  --app-shadow-focus-md: 0 0 0 3px rgba(123, 108, 255, 0.25);
  --app-radius-xs-md: 6px;
  --app-radius-sm-md: 10px;
  --app-radius-md-md: 14px;
  --app-radius-lg-md: 20px;
  --app-spacing-md: 1rem;
  --app-spacing-lg-md: 1.5rem;
  --app-spacing-xl-md: 2.5rem;
  --app-primary-md: #7b6cff;
  --app-primary-strong-md: #5f52e7;
  --app-secondary-md: #ff7ac6;
  --app-secondary-dark-md: #e755b0;
  --app-text-md: #1e1b3a;
  --app-text-muted-md: #5a5875;
  --app-text-soft-md: #7b7a92;
  --app-success-md: #2eb68b;
  --app-warning-md: #f6a600;
  --app-danger-md: #eb4a4a;
  --app-gradient-md: linear-gradient(105deg, #7b6cff 0%, #ff7ac6 100%);
  --app-gradient-dark-md: linear-gradient(105deg, #5f52e7 0%, #e755b0 100%);
  --accent-gradient-md: linear-gradient(135deg, #30c5f0, #ff66b2, #ffd873);
  --btn-surface-bg-md: rgba(255, 255, 255, 0.12);
  --btn-base-shadow-md: 0 15px 28px rgba(123, 108, 255, 0.15);
  --btn-primary-shadow-md: 0 18px 32px rgba(123, 108, 255, 0.25);
  --btn-primary-shadow-hover-md: 0 20px 36px rgba(123, 108, 255, 0.3);
  --btn-ghost-border-md: rgba(255, 255, 255, 0.48);
  --btn-ghost-hover-bg-md: rgba(255, 255, 255, 0.18);
  --max-md: 10000px;
  --min-md: 1201px;
  --spacer-md: 1.6rem;
  --gutter-md: 1.6rem;
  --mobile-md: false;
  --app-bg-lg: #f7f8ff;
  --app-surface-lg: #ffffff;
  --app-surface-muted-lg: #f0f2ff;
  --app-border-lg: rgba(123, 108, 255, 0.18);
  --app-border-strong-lg: rgba(123, 108, 255, 0.32);
  --app-shadow-soft-lg: 0 24px 48px rgba(20, 16, 38, 0.08);
  --app-shadow-medium-lg: 0 20px 32px rgba(20, 16, 38, 0.15);
  --app-shadow-focus-lg: 0 0 0 3px rgba(123, 108, 255, 0.25);
  --app-radius-xs-lg: 6px;
  --app-radius-sm-lg: 10px;
  --app-radius-md-lg: 14px;
  --app-radius-lg-lg: 20px;
  --app-spacing-lg: 1rem;
  --app-spacing-lg-lg: 1.5rem;
  --app-spacing-xl-lg: 2.5rem;
  --app-primary-lg: #7b6cff;
  --app-primary-strong-lg: #5f52e7;
  --app-secondary-lg: #ff7ac6;
  --app-secondary-dark-lg: #e755b0;
  --app-text-lg: #1e1b3a;
  --app-text-muted-lg: #5a5875;
  --app-text-soft-lg: #7b7a92;
  --app-success-lg: #2eb68b;
  --app-warning-lg: #f6a600;
  --app-danger-lg: #eb4a4a;
  --app-gradient-lg: linear-gradient(105deg, #7b6cff 0%, #ff7ac6 100%);
  --app-gradient-dark-lg: linear-gradient(105deg, #5f52e7 0%, #e755b0 100%);
  --accent-gradient-lg: linear-gradient(135deg, #30c5f0, #ff66b2, #ffd873);
  --btn-surface-bg-lg: rgba(255, 255, 255, 0.12);
  --btn-base-shadow-lg: 0 15px 28px rgba(123, 108, 255, 0.15);
  --btn-primary-shadow-lg: 0 18px 32px rgba(123, 108, 255, 0.25);
  --btn-primary-shadow-hover-lg: 0 20px 36px rgba(123, 108, 255, 0.3);
  --btn-ghost-border-lg: rgba(255, 255, 255, 0.48);
  --btn-ghost-hover-bg-lg: rgba(255, 255, 255, 0.18);
  --max-lg: 10000px;
  --min-lg: 1441px;
  --spacer-lg: 1.8rem;
  --gutter-lg: 1.8rem;
  --mobile-lg: false;
  --app-bg-xl: #f7f8ff;
  --app-surface-xl: #ffffff;
  --app-surface-muted-xl: #f0f2ff;
  --app-border-xl: rgba(123, 108, 255, 0.18);
  --app-border-strong-xl: rgba(123, 108, 255, 0.32);
  --app-shadow-soft-xl: 0 24px 48px rgba(20, 16, 38, 0.08);
  --app-shadow-medium-xl: 0 20px 32px rgba(20, 16, 38, 0.15);
  --app-shadow-focus-xl: 0 0 0 3px rgba(123, 108, 255, 0.25);
  --app-radius-xs-xl: 6px;
  --app-radius-sm-xl: 10px;
  --app-radius-md-xl: 14px;
  --app-radius-lg-xl: 20px;
  --app-spacing-xl: 1rem;
  --app-spacing-lg-xl: 1.5rem;
  --app-spacing-xl-xl: 2.5rem;
  --app-primary-xl: #7b6cff;
  --app-primary-strong-xl: #5f52e7;
  --app-secondary-xl: #ff7ac6;
  --app-secondary-dark-xl: #e755b0;
  --app-text-xl: #1e1b3a;
  --app-text-muted-xl: #5a5875;
  --app-text-soft-xl: #7b7a92;
  --app-success-xl: #2eb68b;
  --app-warning-xl: #f6a600;
  --app-danger-xl: #eb4a4a;
  --app-gradient-xl: linear-gradient(105deg, #7b6cff 0%, #ff7ac6 100%);
  --app-gradient-dark-xl: linear-gradient(105deg, #5f52e7 0%, #e755b0 100%);
  --accent-gradient-xl: linear-gradient(135deg, #30c5f0, #ff66b2, #ffd873);
  --btn-surface-bg-xl: rgba(255, 255, 255, 0.12);
  --btn-base-shadow-xl: 0 15px 28px rgba(123, 108, 255, 0.15);
  --btn-primary-shadow-xl: 0 18px 32px rgba(123, 108, 255, 0.25);
  --btn-primary-shadow-hover-xl: 0 20px 36px rgba(123, 108, 255, 0.3);
  --btn-ghost-border-xl: rgba(255, 255, 255, 0.48);
  --btn-ghost-hover-bg-xl: rgba(255, 255, 255, 0.18);
  --max-xl: 10000px;
  --min-xl: 1921px;
  --spacer-xl: 2rem;
  --gutter-xl: 2rem;
  --mobile-xl: false;
  --font-primary: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  --font-secondary: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  --font-title: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  --font-mono: 'SFMono-Regular', 'Consolas', 'Liberation Mono', 'Menlo', monospace;
  --color-primary-900: 16.2244897959, 0, 159;
  --color-primary-contrast-900: 202.2, 196.2, 255;
  --color-primary-800: 21.4285714286, 0, 210;
  --color-primary-contrast-800: 202.2, 196.2, 255;
  --color-primary-700: 31.4081632653, 6, 255;
  --color-primary-contrast-700: 202.2, 196.2, 255;
  --color-primary-600: 77.2040816327, 57, 255;
  --color-primary-contrast-600: 202.2, 196.2, 255;
  --color-primary-500: 123, 108, 255;
  --color-primary-contrast-500: 14.8163265306, 0, 145.2;
  --color-primary-400: 182.5346938776, 174.3, 255;
  --color-primary-contrast-400: 14.8163265306, 0, 145.2;
  --color-primary-300: 242.0693877551, 240.6, 255;
  --color-primary-contrast-300: 14.8163265306, 0, 145.2;
  --color-primary-200: 301.6040816327, 306.9, 255;
  --color-primary-contrast-200: 14.8163265306, 0, 145.2;
  --color-primary-100: 361.1387755102, 373.2, 255;
  --color-primary-contrast-100: 14.8163265306, 0, 145.2;
  --color-secondary-900: 173, 0, 98.8571428571;
  --color-secondary-contrast-900: 255, 201.8, 232.2;
  --color-secondary-800: 224, 0, 128;
  --color-secondary-contrast-800: 255, 201.8, 232.2;
  --color-secondary-700: 255, 20, 154.2857142857;
  --color-secondary-contrast-700: 255, 201.8, 232.2;
  --color-secondary-600: 255, 71, 176.1428571429;
  --color-secondary-contrast-600: 169.65, 0, 96.9428571429;
  --color-secondary-500: 255, 122, 198;
  --color-secondary-contrast-500: 169.65, 0, 96.9428571429;
  --color-secondary-400: 255, 188.3, 226.4142857143;
  --color-secondary-contrast-400: 169.65, 0, 96.9428571429;
  --color-secondary-300: 255, 254.6, 254.8285714286;
  --color-secondary-contrast-300: 169.65, 0, 96.9428571429;
  --color-secondary-200: 255, 320.9, 283.2428571429;
  --color-secondary-contrast-200: 169.65, 0, 96.9428571429;
  --color-secondary-100: 255, 387.2, 311.6571428571;
  --color-secondary-contrast-100: 169.65, 0, 96.9428571429;
  --color-third-900: 166, 119.7571428571, 0;
  --color-third-contrast-900: 0, 0, 0;
  --color-third-800: 217, 156.55, 0;
  --color-third-contrast-800: 0, 0, 0;
  --color-third-700: 255, 187.5857142857, 13;
  --color-third-contrast-700: 0, 0, 0;
  --color-third-600: 255, 201.7928571429, 64;
  --color-third-contrast-600: 0, 0, 0;
  --color-third-500: 255, 216, 115;
  --color-third-contrast-500: 0, 0, 0;
  --color-third-400: 255, 234.4692857143, 181.3;
  --color-third-contrast-400: 0, 0, 0;
  --color-third-300: 255, 252.9385714286, 247.6;
  --color-third-contrast-300: 0, 0, 0;
  --color-third-200: 255, 271.4078571429, 313.9;
  --color-third-contrast-200: 0, 0, 0;
  --color-third-100: 255, 289.8771428571, 380.2;
  --color-third-contrast-100: 0, 0, 0;
  --color-accent-900: 20.4720812183, 13.2791878173, 95.7208121827;
  --color-accent-contrast-900: 255, 255, 255;
  --color-accent-800: 30.0507614213, 19.4923857868, 140.5076142132;
  --color-accent-contrast-800: 255, 255, 255;
  --color-accent-700: 39.6294416244, 25.7055837563, 185.2944162437;
  --color-accent-contrast-700: 255, 255, 255;
  --color-accent-600: 53.578680203, 37.2131979695, 224.7868020305;
  --color-accent-contrast-600: 255, 255, 255;
  --color-accent-500: 95, 82, 231;
  --color-accent-contrast-500: 255, 255, 255;
  --color-accent-400: 148.847715736, 140.2228426396, 239.0771573604;
  --color-accent-contrast-400: 23.5147208122, 15.2527918782, 109.9472081218;
  --color-accent-300: 202.6954314721, 198.4456852792, 247.1543147208;
  --color-accent-contrast-300: 23.5147208122, 15.2527918782, 109.9472081218;
  --color-accent-200: 256.5431472081, 256.6685279188, 255.2314720812;
  --color-accent-contrast-200: 23.5147208122, 15.2527918782, 109.9472081218;
  --color-accent-100: 310.3908629442, 314.8913705584, 263.3086294416;
  --color-accent-contrast-100: 23.5147208122, 15.2527918782, 109.9472081218;
  --color-lgray-900: 29.0909090909, 28.826446281, 35.173553719;
  --color-lgray-contrast-900: 255, 255, 255;
  --color-lgray-800: 52.2727272727, 51.7975206612, 63.2024793388;
  --color-lgray-contrast-800: 255, 255, 255;
  --color-lgray-700: 75.4545454545, 74.7685950413, 91.2314049587;
  --color-lgray-contrast-700: 255, 255, 255;
  --color-lgray-600: 98.6363636364, 97.7396694215, 119.2603305785;
  --color-lgray-contrast-600: 255, 255, 255;
  --color-lgray-500: 123, 122, 146;
  --color-lgray-contrast-500: 0, 0, 0;
  --color-lgray-400: 159.1636363636, 158.4376033058, 175.8623966942;
  --color-lgray-contrast-400: 0, 0, 0;
  --color-lgray-300: 195.3272727273, 194.8752066116, 205.7247933884;
  --color-lgray-contrast-300: 0, 0, 0;
  --color-lgray-200: 231.4909090909, 231.3128099174, 235.5871900826;
  --color-lgray-contrast-200: 0, 0, 0;
  --color-lgray-100: 267.6545454545, 267.7504132231, 265.4495867769;
  --color-lgray-contrast-100: 0, 0, 0;
  --color-success-900: 4.8421052632, 19.1578947368, 14.6315789474;
  --color-success-contrast-900: 176.2131578947, 235.0868421053, 216.4723684211;
  --color-success-800: 15.1315789474, 59.8684210526, 45.7236842105;
  --color-success-contrast-800: 176.2131578947, 235.0868421053, 216.4723684211;
  --color-success-700: 25.4210526316, 100.5789473684, 76.8157894737;
  --color-success-contrast-700: 176.2131578947, 235.0868421053, 216.4723684211;
  --color-success-600: 35.7105263158, 141.2894736842, 107.9078947368;
  --color-success-contrast-600: 176.2131578947, 235.0868421053, 216.4723684211;
  --color-success-500: 46, 182, 139;
  --color-success-contrast-500: 20.7, 81.9, 62.55;
  --color-success-400: 82.8184210526, 211.4815789474, 170.8013157895;
  --color-success-contrast-400: 20.7, 81.9, 62.55;
  --color-success-300: 135.7421052632, 224.8578947368, 196.6815789474;
  --color-success-contrast-300: 20.7, 81.9, 62.55;
  --color-success-200: 188.6657894737, 238.2342105263, 222.5618421053;
  --color-success-contrast-200: 20.7, 81.9, 62.55;
  --color-success-100: 241.5894736842, 251.6105263158, 248.4421052632;
  --color-success-contrast-100: 20.7, 81.9, 62.55;
  --color-warning-900: 42, 28.3414634146, 0;
  --color-warning-contrast-900: 255, 216.3658536585, 136.2;
  --color-warning-800: 93, 62.756097561, 0;
  --color-warning-contrast-800: 255, 216.3658536585, 136.2;
  --color-warning-700: 144, 97.1707317073, 0;
  --color-warning-contrast-700: 255, 216.3658536585, 136.2;
  --color-warning-600: 195, 131.5853658537, 0;
  --color-warning-contrast-600: 110.7, 74.7, 0;
  --color-warning-500: 246, 166, 0;
  --color-warning-contrast-500: 110.7, 74.7, 0;
  --color-warning-400: 255, 190.7073170732, 57.3;
  --color-warning-contrast-400: 110.7, 74.7, 0;
  --color-warning-300: 255, 212.2682926829, 123.6;
  --color-warning-contrast-300: 110.7, 74.7, 0;
  --color-warning-200: 255, 233.8292682927, 189.9;
  --color-warning-contrast-200: 110.7, 74.7, 0;
  --color-warning-100: 255, 255.3902439024, 256.2;
  --color-warning-contrast-100: 110.7, 74.7, 0;
  --color-danger-900: 94.552238806, 10.447761194, 10.447761194;
  --color-danger-contrast-900: 246, 173.55, 173.55;
  --color-danger-800: 140.4776119403, 15.5223880597, 15.5223880597;
  --color-danger-contrast-800: 246, 173.55, 173.55;
  --color-danger-700: 186.4029850746, 20.5970149254, 20.5970149254;
  --color-danger-contrast-700: 246, 173.55, 173.55;
  --color-danger-600: 229.9253731343, 28.0746268657, 28.0746268657;
  --color-danger-contrast-600: 246, 173.55, 173.55;
  --color-danger-500: 235, 74, 74;
  --color-danger-contrast-500: 125.2141791045, 13.8358208955, 13.8358208955;
  --color-danger-400: 241.5970149254, 133.7029850746, 133.7029850746;
  --color-danger-contrast-400: 125.2141791045, 13.8358208955, 13.8358208955;
  --color-danger-300: 248.1940298507, 193.4059701493, 193.4059701493;
  --color-danger-contrast-300: 125.2141791045, 13.8358208955, 13.8358208955;
  --color-danger-200: 254.7910447761, 253.1089552239, 253.1089552239;
  --color-danger-contrast-200: 125.2141791045, 13.8358208955, 13.8358208955;
  --color-danger-100: 261.3880597015, 312.8119402985, 312.8119402985;
  --color-danger-contrast-100: 125.2141791045, 13.8358208955, 13.8358208955;
}

@media (min-width: 0px) and (max-width: 1200px) {
  :root, :root *:after, :root *:before {
    --app-bg: #f7f8ff;
    --app-surface: #ffffff;
    --app-surface-muted: #f0f2ff;
    --app-border: rgba(123, 108, 255, 0.18);
    --app-border-strong: rgba(123, 108, 255, 0.32);
    --app-shadow-soft: 0 24px 48px rgba(20, 16, 38, 0.08);
    --app-shadow-medium: 0 20px 32px rgba(20, 16, 38, 0.15);
    --app-shadow-focus: 0 0 0 3px rgba(123, 108, 255, 0.25);
    --app-radius-xs: 6px;
    --app-radius-sm: 10px;
    --app-radius-md: 14px;
    --app-radius-lg: 20px;
    --app-spacing: 1rem;
    --app-spacing-lg: 1.5rem;
    --app-spacing-xl: 2.5rem;
    --app-primary: #7b6cff;
    --app-primary-strong: #5f52e7;
    --app-secondary: #ff7ac6;
    --app-secondary-dark: #e755b0;
    --app-text: #1e1b3a;
    --app-text-muted: #5a5875;
    --app-text-soft: #7b7a92;
    --app-success: #2eb68b;
    --app-warning: #f6a600;
    --app-danger: #eb4a4a;
    --app-gradient: linear-gradient(105deg, #7b6cff 0%, #ff7ac6 100%);
    --app-gradient-dark: linear-gradient(105deg, #5f52e7 0%, #e755b0 100%);
    --accent-gradient: linear-gradient(135deg, #30c5f0, #ff66b2, #ffd873);
    --btn-surface-bg: rgba(255, 255, 255, 0.12);
    --btn-base-shadow: 0 15px 28px rgba(123, 108, 255, 0.15);
    --btn-primary-shadow: 0 18px 32px rgba(123, 108, 255, 0.25);
    --btn-primary-shadow-hover: 0 20px 36px rgba(123, 108, 255, 0.3);
    --btn-ghost-border: rgba(255, 255, 255, 0.48);
    --btn-ghost-hover-bg: rgba(255, 255, 255, 0.18);
    --max: 1200px;
    --min: 0px;
    --spacer: 1.6rem;
    --gutter: 1.6rem;
    --mobile: true;
  }
}
@media (min-width: 0px) and (max-width: 1200px) and (orientation:landscape) {
  :root, :root *:after, :root *:before {
    --app-bg: #f7f8ff;
    --app-surface: #ffffff;
    --app-surface-muted: #f0f2ff;
    --app-border: rgba(123, 108, 255, 0.18);
    --app-border-strong: rgba(123, 108, 255, 0.32);
    --app-shadow-soft: 0 24px 48px rgba(20, 16, 38, 0.08);
    --app-shadow-medium: 0 20px 32px rgba(20, 16, 38, 0.15);
    --app-shadow-focus: 0 0 0 3px rgba(123, 108, 255, 0.25);
    --app-radius-xs: 6px;
    --app-radius-sm: 10px;
    --app-radius-md: 14px;
    --app-radius-lg: 20px;
    --app-spacing: 1rem;
    --app-spacing-lg: 1.5rem;
    --app-spacing-xl: 2.5rem;
    --app-primary: #7b6cff;
    --app-primary-strong: #5f52e7;
    --app-secondary: #ff7ac6;
    --app-secondary-dark: #e755b0;
    --app-text: #1e1b3a;
    --app-text-muted: #5a5875;
    --app-text-soft: #7b7a92;
    --app-success: #2eb68b;
    --app-warning: #f6a600;
    --app-danger: #eb4a4a;
    --app-gradient: linear-gradient(105deg, #7b6cff 0%, #ff7ac6 100%);
    --app-gradient-dark: linear-gradient(105deg, #5f52e7 0%, #e755b0 100%);
    --accent-gradient: linear-gradient(135deg, #30c5f0, #ff66b2, #ffd873);
    --btn-surface-bg: rgba(255, 255, 255, 0.12);
    --btn-base-shadow: 0 15px 28px rgba(123, 108, 255, 0.15);
    --btn-primary-shadow: 0 18px 32px rgba(123, 108, 255, 0.25);
    --btn-primary-shadow-hover: 0 20px 36px rgba(123, 108, 255, 0.3);
    --btn-ghost-border: rgba(255, 255, 255, 0.48);
    --btn-ghost-hover-bg: rgba(255, 255, 255, 0.18);
    --orientation: landscape;
    --breakpoint: xs;
    --spacer: 1.6rem;
    --gutter: 1.6rem;
    --mobile: true;
  }
}
@media (min-width: 768px) and (max-width: 1200px) {
  :root, :root *:after, :root *:before {
    --app-bg: #f7f8ff;
    --app-surface: #ffffff;
    --app-surface-muted: #f0f2ff;
    --app-border: rgba(123, 108, 255, 0.18);
    --app-border-strong: rgba(123, 108, 255, 0.32);
    --app-shadow-soft: 0 24px 48px rgba(20, 16, 38, 0.08);
    --app-shadow-medium: 0 20px 32px rgba(20, 16, 38, 0.15);
    --app-shadow-focus: 0 0 0 3px rgba(123, 108, 255, 0.25);
    --app-radius-xs: 6px;
    --app-radius-sm: 10px;
    --app-radius-md: 14px;
    --app-radius-lg: 20px;
    --app-spacing: 1rem;
    --app-spacing-lg: 1.5rem;
    --app-spacing-xl: 2.5rem;
    --app-primary: #7b6cff;
    --app-primary-strong: #5f52e7;
    --app-secondary: #ff7ac6;
    --app-secondary-dark: #e755b0;
    --app-text: #1e1b3a;
    --app-text-muted: #5a5875;
    --app-text-soft: #7b7a92;
    --app-success: #2eb68b;
    --app-warning: #f6a600;
    --app-danger: #eb4a4a;
    --app-gradient: linear-gradient(105deg, #7b6cff 0%, #ff7ac6 100%);
    --app-gradient-dark: linear-gradient(105deg, #5f52e7 0%, #e755b0 100%);
    --accent-gradient: linear-gradient(135deg, #30c5f0, #ff66b2, #ffd873);
    --btn-surface-bg: rgba(255, 255, 255, 0.12);
    --btn-base-shadow: 0 15px 28px rgba(123, 108, 255, 0.15);
    --btn-primary-shadow: 0 18px 32px rgba(123, 108, 255, 0.25);
    --btn-primary-shadow-hover: 0 20px 36px rgba(123, 108, 255, 0.3);
    --btn-ghost-border: rgba(255, 255, 255, 0.48);
    --btn-ghost-hover-bg: rgba(255, 255, 255, 0.18);
    --max: 1200px;
    --min: 768px;
    --spacer: 1.6rem;
    --gutter: 1.6rem;
    --mobile: true;
  }
}
@media (min-width: 768px) and (max-width: 1200px) and (orientation:landscape) {
  :root, :root *:after, :root *:before {
    --app-bg: #f7f8ff;
    --app-surface: #ffffff;
    --app-surface-muted: #f0f2ff;
    --app-border: rgba(123, 108, 255, 0.18);
    --app-border-strong: rgba(123, 108, 255, 0.32);
    --app-shadow-soft: 0 24px 48px rgba(20, 16, 38, 0.08);
    --app-shadow-medium: 0 20px 32px rgba(20, 16, 38, 0.15);
    --app-shadow-focus: 0 0 0 3px rgba(123, 108, 255, 0.25);
    --app-radius-xs: 6px;
    --app-radius-sm: 10px;
    --app-radius-md: 14px;
    --app-radius-lg: 20px;
    --app-spacing: 1rem;
    --app-spacing-lg: 1.5rem;
    --app-spacing-xl: 2.5rem;
    --app-primary: #7b6cff;
    --app-primary-strong: #5f52e7;
    --app-secondary: #ff7ac6;
    --app-secondary-dark: #e755b0;
    --app-text: #1e1b3a;
    --app-text-muted: #5a5875;
    --app-text-soft: #7b7a92;
    --app-success: #2eb68b;
    --app-warning: #f6a600;
    --app-danger: #eb4a4a;
    --app-gradient: linear-gradient(105deg, #7b6cff 0%, #ff7ac6 100%);
    --app-gradient-dark: linear-gradient(105deg, #5f52e7 0%, #e755b0 100%);
    --accent-gradient: linear-gradient(135deg, #30c5f0, #ff66b2, #ffd873);
    --btn-surface-bg: rgba(255, 255, 255, 0.12);
    --btn-base-shadow: 0 15px 28px rgba(123, 108, 255, 0.15);
    --btn-primary-shadow: 0 18px 32px rgba(123, 108, 255, 0.25);
    --btn-primary-shadow-hover: 0 20px 36px rgba(123, 108, 255, 0.3);
    --btn-ghost-border: rgba(255, 255, 255, 0.48);
    --btn-ghost-hover-bg: rgba(255, 255, 255, 0.18);
    --orientation: landscape;
    --breakpoint: sm;
    --spacer: 1.5rem;
    --gutter: 1.5rem;
    --mobile: true;
  }
}
@media (min-width: 1201px) and (max-width: 10000px) {
  :root, :root *:after, :root *:before {
    --app-bg: #f7f8ff;
    --app-surface: #ffffff;
    --app-surface-muted: #f0f2ff;
    --app-border: rgba(123, 108, 255, 0.18);
    --app-border-strong: rgba(123, 108, 255, 0.32);
    --app-shadow-soft: 0 24px 48px rgba(20, 16, 38, 0.08);
    --app-shadow-medium: 0 20px 32px rgba(20, 16, 38, 0.15);
    --app-shadow-focus: 0 0 0 3px rgba(123, 108, 255, 0.25);
    --app-radius-xs: 6px;
    --app-radius-sm: 10px;
    --app-radius-md: 14px;
    --app-radius-lg: 20px;
    --app-spacing: 1rem;
    --app-spacing-lg: 1.5rem;
    --app-spacing-xl: 2.5rem;
    --app-primary: #7b6cff;
    --app-primary-strong: #5f52e7;
    --app-secondary: #ff7ac6;
    --app-secondary-dark: #e755b0;
    --app-text: #1e1b3a;
    --app-text-muted: #5a5875;
    --app-text-soft: #7b7a92;
    --app-success: #2eb68b;
    --app-warning: #f6a600;
    --app-danger: #eb4a4a;
    --app-gradient: linear-gradient(105deg, #7b6cff 0%, #ff7ac6 100%);
    --app-gradient-dark: linear-gradient(105deg, #5f52e7 0%, #e755b0 100%);
    --accent-gradient: linear-gradient(135deg, #30c5f0, #ff66b2, #ffd873);
    --btn-surface-bg: rgba(255, 255, 255, 0.12);
    --btn-base-shadow: 0 15px 28px rgba(123, 108, 255, 0.15);
    --btn-primary-shadow: 0 18px 32px rgba(123, 108, 255, 0.25);
    --btn-primary-shadow-hover: 0 20px 36px rgba(123, 108, 255, 0.3);
    --btn-ghost-border: rgba(255, 255, 255, 0.48);
    --btn-ghost-hover-bg: rgba(255, 255, 255, 0.18);
    --max: 10000px;
    --min: 1201px;
    --spacer: 1.6rem;
    --gutter: 1.6rem;
    --mobile: false;
  }
}
@media (min-width: 1441px) and (max-width: 10000px) {
  :root, :root *:after, :root *:before {
    --app-bg: #f7f8ff;
    --app-surface: #ffffff;
    --app-surface-muted: #f0f2ff;
    --app-border: rgba(123, 108, 255, 0.18);
    --app-border-strong: rgba(123, 108, 255, 0.32);
    --app-shadow-soft: 0 24px 48px rgba(20, 16, 38, 0.08);
    --app-shadow-medium: 0 20px 32px rgba(20, 16, 38, 0.15);
    --app-shadow-focus: 0 0 0 3px rgba(123, 108, 255, 0.25);
    --app-radius-xs: 6px;
    --app-radius-sm: 10px;
    --app-radius-md: 14px;
    --app-radius-lg: 20px;
    --app-spacing: 1rem;
    --app-spacing-lg: 1.5rem;
    --app-spacing-xl: 2.5rem;
    --app-primary: #7b6cff;
    --app-primary-strong: #5f52e7;
    --app-secondary: #ff7ac6;
    --app-secondary-dark: #e755b0;
    --app-text: #1e1b3a;
    --app-text-muted: #5a5875;
    --app-text-soft: #7b7a92;
    --app-success: #2eb68b;
    --app-warning: #f6a600;
    --app-danger: #eb4a4a;
    --app-gradient: linear-gradient(105deg, #7b6cff 0%, #ff7ac6 100%);
    --app-gradient-dark: linear-gradient(105deg, #5f52e7 0%, #e755b0 100%);
    --accent-gradient: linear-gradient(135deg, #30c5f0, #ff66b2, #ffd873);
    --btn-surface-bg: rgba(255, 255, 255, 0.12);
    --btn-base-shadow: 0 15px 28px rgba(123, 108, 255, 0.15);
    --btn-primary-shadow: 0 18px 32px rgba(123, 108, 255, 0.25);
    --btn-primary-shadow-hover: 0 20px 36px rgba(123, 108, 255, 0.3);
    --btn-ghost-border: rgba(255, 255, 255, 0.48);
    --btn-ghost-hover-bg: rgba(255, 255, 255, 0.18);
    --max: 10000px;
    --min: 1441px;
    --spacer: 1.8rem;
    --gutter: 1.8rem;
    --mobile: false;
  }
}
@media (min-width: 1921px) and (max-width: 10000px) {
  :root, :root *:after, :root *:before {
    --app-bg: #f7f8ff;
    --app-surface: #ffffff;
    --app-surface-muted: #f0f2ff;
    --app-border: rgba(123, 108, 255, 0.18);
    --app-border-strong: rgba(123, 108, 255, 0.32);
    --app-shadow-soft: 0 24px 48px rgba(20, 16, 38, 0.08);
    --app-shadow-medium: 0 20px 32px rgba(20, 16, 38, 0.15);
    --app-shadow-focus: 0 0 0 3px rgba(123, 108, 255, 0.25);
    --app-radius-xs: 6px;
    --app-radius-sm: 10px;
    --app-radius-md: 14px;
    --app-radius-lg: 20px;
    --app-spacing: 1rem;
    --app-spacing-lg: 1.5rem;
    --app-spacing-xl: 2.5rem;
    --app-primary: #7b6cff;
    --app-primary-strong: #5f52e7;
    --app-secondary: #ff7ac6;
    --app-secondary-dark: #e755b0;
    --app-text: #1e1b3a;
    --app-text-muted: #5a5875;
    --app-text-soft: #7b7a92;
    --app-success: #2eb68b;
    --app-warning: #f6a600;
    --app-danger: #eb4a4a;
    --app-gradient: linear-gradient(105deg, #7b6cff 0%, #ff7ac6 100%);
    --app-gradient-dark: linear-gradient(105deg, #5f52e7 0%, #e755b0 100%);
    --accent-gradient: linear-gradient(135deg, #30c5f0, #ff66b2, #ffd873);
    --btn-surface-bg: rgba(255, 255, 255, 0.12);
    --btn-base-shadow: 0 15px 28px rgba(123, 108, 255, 0.15);
    --btn-primary-shadow: 0 18px 32px rgba(123, 108, 255, 0.25);
    --btn-primary-shadow-hover: 0 20px 36px rgba(123, 108, 255, 0.3);
    --btn-ghost-border: rgba(255, 255, 255, 0.48);
    --btn-ghost-hover-bg: rgba(255, 255, 255, 0.18);
    --max: 10000px;
    --min: 1921px;
    --spacer: 2rem;
    --gutter: 2rem;
    --mobile: false;
  }
}
/*# sourceMappingURL=main.css.map */