@nuvoui/core/dist/nuvoui.css

NuvoUI is a human-friendly SCSS framework designed for simplicity, and modern responsive designs.

/*!
 * NuvoUI SCSS Framework
 * MIT License
 *
 * Copyright (c) 2025 NuvoUI
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy
 * of this software and associated documentation files (the "Software"), to deal
 * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 * copies of the Software, and to permit persons to whom the Software is
 * furnished to do so, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in all
 * copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 * SOFTWARE.
 */
@layer reset, base, components;
@layer reset {
  *,
  ::before,
  ::after,
  ::backdrop,
  ::file-selector-button {
    box-sizing: border-box;
  }
  body,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  p,
  figure,
  blockquote,
  dl,
  dd {
    margin: 0;
    padding: 0;
  }
  html {
    text-size-adjust: none;
  }
  html:focus-within {
    scroll-behavior: smooth;
  }
  body {
    min-height: 100vh;
    min-height: 100dvh;
    text-rendering: optimizespeed;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  h1,
  h2,
  h3,
  h4,
  button,
  input,
  label {
    line-height: 1.1;
  }
  img,
  picture,
  video,
  canvas,
  svg,
  audio,
  iframe,
  embed,
  object {
    display: block;
    vertical-align: middle;
  }
  img,
  picture,
  video,
  svg {
    max-width: 100%;
    height: auto;
  }
  input,
  button,
  textarea,
  select {
    font: inherit;
    cursor: pointer;
  }
  input:disabled,
  button:disabled,
  textarea:disabled,
  select:disabled {
    cursor: not-allowed;
  }
  ul[role=list],
  ol[role=list] {
    list-style: none;
    padding-inline-start: 0;
    margin-block: 0;
  }
  ul[role=list] > li,
  ol[role=list] > li {
    margin-block: 0;
  }
  a {
    text-decoration-skip-ink: auto;
    text-decoration: none;
    color: inherit;
  }
  textarea:not([rows]) {
    min-height: 10em;
  }
  :target {
    scroll-margin-block: 5ex;
  }
  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }
}
@layer base {
  :root {
    --font-family-base: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  }
  html {
    font-size: 1rem;
  }
  body {
    font-family: var(--font-family-base);
    font-weight: 400;
    line-height: 1.5;
    color: var(--text-default);
  }
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    margin-bottom: 0.5em;
    font-family: var(--font-family-base);
    font-weight: 700;
    line-height: 1.2;
  }
  h1 {
    font-size: 2.5rem;
  }
  h2 {
    font-size: 2rem;
  }
  h3 {
    font-size: 1.75rem;
  }
  h4 {
    font-size: 1.5rem;
  }
  h5 {
    font-size: 1.25rem;
  }
  h6 {
    font-size: 1rem;
  }
  p {
    margin-bottom: 1rem;
  }
  small {
    font-size: 0.875rem;
  }
  button {
    padding: 0.5rem 1rem;
    border: 0;
    border-radius: 0.25rem;
    font-family: var(--font-family-base);
    cursor: pointer;
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
  }
  button:focus {
    outline: none;
  }
  button:disabled {
    background-color: #e0e0e0;
    color: #a0a0a0;
    cursor: not-allowed;
  }
  button {
    background-color: var(--button-bg-color, #007bff);
    color: var(--button-text-color, #fff);
  }
  button:hover {
    background-color: var(--button-bg-color-hover, #0056b3);
  }
  input[type=text],
  input[type=tel],
  input[type=email],
  input[type=password],
  input[type=number],
  input[type=search],
  textarea {
    padding: 0.5rem;
    border: var(--border-size, 1px) var(--border-style, solid) var(--border-base, var(--secondary));
    border-radius: 0.25rem;
    width: 100%;
    font-family: var(--font-family-base);
    transition: border 0.2s ease-in-out;
  }
  input[type=text]:focus,
  input[type=tel]:focus,
  input[type=email]:focus,
  input[type=password]:focus,
  input[type=number]:focus,
  input[type=search]:focus,
  textarea:focus {
    border-color: var(--link-color);
    outline: none;
  }
  input[type=checkbox],
  input[type=radio] {
    margin-right: 0.5rem;
  }
  select {
    padding: 0.5rem;
    border: var(--border-size, 1px) var(--border-style, solid) var(--border-base, var(--secondary));
    border-radius: 0.25rem;
    width: 100%;
    font-family: var(--font-family-base);
    transition: border 0.2s ease-in-out;
  }
  select:focus {
    border-color: var(--link-color);
    outline: none;
  }
  blockquote {
    margin: 1rem 0;
    padding: 0.5rem 1rem;
    border-left: var(--border-size, 4px) var(--border-style, solid) var(--border-base, var(--secondary));
    font-style: italic;
  }
  hr {
    border: none;
    border-top: var(--border-size, 1px) var(--border-style, solid) var(--border-base, var(--secondary));
    margin: 1rem 0;
  }
  img {
    max-width: 100%;
    height: auto;
  }
  figure {
    margin: 1rem 0;
  }
  figcaption {
    font-size: 0.875rem;
    color: var(--text-muted, #666);
  }
  a:not([class]) {
    color: var(--link-color);
  }
  a:not([class]):hover {
    color: var(--link-hover-color);
  }
  label[for] {
    cursor: pointer;
  }
  .sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }
  code {
    font-family: "Courier New", Courier, monospace;
    background-color: #f8f8f8;
    color: #d63384;
    padding: 2px 6px;
    border-radius: 3px;
    white-space: nowrap;
  }
  [data-theme=dark] code {
    background-color: #333;
    color: #f8f8f2;
  }
  @media (prefers-color-scheme: dark) {
    [data-theme=system] code {
      background-color: #333;
      color: #f8f8f2;
    }
  }
}
.container {
  display: block;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}
@media (min-width: 480px) {
  .container {
    max-width: 380px;
  }
}
@media (min-width: 640px) {
  .container {
    max-width: 540px;
  }
}
@media (min-width: 768px) {
  .container {
    max-width: 668px;
  }
}
@media (min-width: 1024px) {
  .container {
    max-width: 924px;
  }
}
@media (min-width: 1280px) {
  .container {
    max-width: 1180px;
  }
}
@media (min-width: 1536px) {
  .container {
    max-width: 1436px;
  }
}
.container {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.container.flex {
  display: flex;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}
@media (min-width: 480px) {
  .container.flex {
    max-width: 380px;
  }
}
@media (min-width: 640px) {
  .container.flex {
    max-width: 540px;
  }
}
@media (min-width: 768px) {
  .container.flex {
    max-width: 668px;
  }
}
@media (min-width: 1024px) {
  .container.flex {
    max-width: 924px;
  }
}
@media (min-width: 1280px) {
  .container.flex {
    max-width: 1180px;
  }
}
@media (min-width: 1536px) {
  .container.flex {
    max-width: 1436px;
  }
}
.container.flex {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.container.grid {
  display: grid;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}
@media (min-width: 480px) {
  .container.grid {
    max-width: 380px;
  }
}
@media (min-width: 640px) {
  .container.grid {
    max-width: 540px;
  }
}
@media (min-width: 768px) {
  .container.grid {
    max-width: 668px;
  }
}
@media (min-width: 1024px) {
  .container.grid {
    max-width: 924px;
  }
}
@media (min-width: 1280px) {
  .container.grid {
    max-width: 1180px;
  }
}
@media (min-width: 1536px) {
  .container.grid {
    max-width: 1436px;
  }
}
.container.grid {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.flex.row, .flex\@xs.row, .flex\@sm.row, .flex\@md.row, .flex\@lg.row, .flex\@xl.row, .flex\@2xl.row {
  flex-direction: row;
}
.flex.row-reverse, .flex\@xs.row-reverse, .flex\@sm.row-reverse, .flex\@md.row-reverse, .flex\@lg.row-reverse, .flex\@xl.row-reverse, .flex\@2xl.row-reverse {
  flex-direction: row-reverse;
}
.flex.col, .flex\@xs.col, .flex\@sm.col, .flex\@md.col, .flex\@lg.col, .flex\@xl.col, .flex\@2xl.col {
  flex-direction: column;
}
.flex.col-reverse, .flex\@xs.col-reverse, .flex\@sm.col-reverse, .flex\@md.col-reverse, .flex\@lg.col-reverse, .flex\@xl.col-reverse, .flex\@2xl.col-reverse {
  flex-direction: column-reverse;
}
.flex.wrap, .flex\@xs.wrap, .flex\@sm.wrap, .flex\@md.wrap, .flex\@lg.wrap, .flex\@xl.wrap, .flex\@2xl.wrap {
  flex-wrap: wrap;
}
.flex.nowrap, .flex\@xs.nowrap, .flex\@sm.nowrap, .flex\@md.nowrap, .flex\@lg.nowrap, .flex\@xl.nowrap, .flex\@2xl.nowrap {
  flex-wrap: nowrap;
}
.flex.wrap-reverse, .flex\@xs.wrap-reverse, .flex\@sm.wrap-reverse, .flex\@md.wrap-reverse, .flex\@lg.wrap-reverse, .flex\@xl.wrap-reverse, .flex\@2xl.wrap-reverse {
  flex-wrap: wrap-reverse;
}
.flex.start, .flex\@xs.start, .flex\@sm.start, .flex\@md.start, .flex\@lg.start, .flex\@xl.start, .flex\@2xl.start {
  justify-content: flex-start;
}
.flex.end, .flex\@xs.end, .flex\@sm.end, .flex\@md.end, .flex\@lg.end, .flex\@xl.end, .flex\@2xl.end {
  justify-content: flex-end;
}
.flex.center, .flex\@xs.center, .flex\@sm.center, .flex\@md.center, .flex\@lg.center, .flex\@xl.center, .flex\@2xl.center {
  justify-content: center;
}
.flex.stretch, .flex\@xs.stretch, .flex\@sm.stretch, .flex\@md.stretch, .flex\@lg.stretch, .flex\@xl.stretch, .flex\@2xl.stretch {
  justify-content: stretch;
}
.flex.between, .flex\@xs.between, .flex\@sm.between, .flex\@md.between, .flex\@lg.between, .flex\@xl.between, .flex\@2xl.between {
  justify-content: space-between;
}
.flex.around, .flex\@xs.around, .flex\@sm.around, .flex\@md.around, .flex\@lg.around, .flex\@xl.around, .flex\@2xl.around {
  justify-content: space-around;
}
.flex.evenly, .flex\@xs.evenly, .flex\@sm.evenly, .flex\@md.evenly, .flex\@lg.evenly, .flex\@xl.evenly, .flex\@2xl.evenly {
  justify-content: space-evenly;
}
.flex.x-start, .flex\@xs.x-start, .flex\@sm.x-start, .flex\@md.x-start, .flex\@lg.x-start, .flex\@xl.x-start, .flex\@2xl.x-start {
  align-items: flex-start;
}
.flex.x-end, .flex\@xs.x-end, .flex\@sm.x-end, .flex\@md.x-end, .flex\@lg.x-end, .flex\@xl.x-end, .flex\@2xl.x-end {
  align-items: flex-end;
}
.flex.x-center, .flex\@xs.x-center, .flex\@sm.x-center, .flex\@md.x-center, .flex\@lg.x-center, .flex\@xl.x-center, .flex\@2xl.x-center {
  align-items: center;
}
.flex.x-baseline, .flex\@xs.x-baseline, .flex\@sm.x-baseline, .flex\@md.x-baseline, .flex\@lg.x-baseline, .flex\@xl.x-baseline, .flex\@2xl.x-baseline {
  align-items: baseline;
}
.flex.x-stretch, .flex\@xs.x-stretch, .flex\@sm.x-stretch, .flex\@md.x-stretch, .flex\@lg.x-stretch, .flex\@xl.x-stretch, .flex\@2xl.x-stretch {
  align-items: stretch;
}
.flex.x-content-start, .flex\@xs.x-content-start, .flex\@sm.x-content-start, .flex\@md.x-content-start, .flex\@lg.x-content-start, .flex\@xl.x-content-start, .flex\@2xl.x-content-start {
  align-content: flex-start;
}
.flex.x-content-end, .flex\@xs.x-content-end, .flex\@sm.x-content-end, .flex\@md.x-content-end, .flex\@lg.x-content-end, .flex\@xl.x-content-end, .flex\@2xl.x-content-end {
  align-content: flex-end;
}
.flex.x-content-center, .flex\@xs.x-content-center, .flex\@sm.x-content-center, .flex\@md.x-content-center, .flex\@lg.x-content-center, .flex\@xl.x-content-center, .flex\@2xl.x-content-center {
  align-content: center;
}
.flex.x-content-between, .flex\@xs.x-content-between, .flex\@sm.x-content-between, .flex\@md.x-content-between, .flex\@lg.x-content-between, .flex\@xl.x-content-between, .flex\@2xl.x-content-between {
  align-content: space-between;
}
.flex.x-content-around, .flex\@xs.x-content-around, .flex\@sm.x-content-around, .flex\@md.x-content-around, .flex\@lg.x-content-around, .flex\@xl.x-content-around, .flex\@2xl.x-content-around {
  align-content: space-around;
}
.flex.x-content-evenly, .flex\@xs.x-content-evenly, .flex\@sm.x-content-evenly, .flex\@md.x-content-evenly, .flex\@lg.x-content-evenly, .flex\@xl.x-content-evenly, .flex\@2xl.x-content-evenly {
  align-content: space-evenly;
}
.flex.x-content-stretch, .flex\@xs.x-content-stretch, .flex\@sm.x-content-stretch, .flex\@md.x-content-stretch, .flex\@lg.x-content-stretch, .flex\@xl.x-content-stretch, .flex\@2xl.x-content-stretch {
  align-content: stretch;
}
.flex > .fill-auto, .flex\@xs > .fill-auto, .flex\@sm > .fill-auto, .flex\@md > .fill-auto, .flex\@lg > .fill-auto, .flex\@xl > .fill-auto, .flex\@2xl > .fill-auto {
  flex: 1 1 auto;
}
.flex > .fill-full, .flex\@xs > .fill-full, .flex\@sm > .fill-full, .flex\@md > .fill-full, .flex\@lg > .fill-full, .flex\@xl > .fill-full, .flex\@2xl > .fill-full {
  flex: 0 0 100%;
}
.flex > .grow, .flex\@xs > .grow, .flex\@sm > .grow, .flex\@md > .grow, .flex\@lg > .grow, .flex\@xl > .grow, .flex\@2xl > .grow {
  flex: 1 1 0%;
}
.flex > .no-grow, .flex\@xs > .no-grow, .flex\@sm > .no-grow, .flex\@md > .no-grow, .flex\@lg > .no-grow, .flex\@xl > .no-grow, .flex\@2xl > .no-grow {
  flex: none;
}
.flex > .order-first, .flex\@xs > .order-first, .flex\@sm > .order-first, .flex\@md > .order-first, .flex\@lg > .order-first, .flex\@xl > .order-first, .flex\@2xl > .order-first {
  order: -1;
}
.flex > .order-last, .flex\@xs > .order-last, .flex\@sm > .order-last, .flex\@md > .order-last, .flex\@lg > .order-last, .flex\@xl > .order-last, .flex\@2xl > .order-last {
  order: 9999;
}
.flex > .order-none, .flex\@xs > .order-none, .flex\@sm > .order-none, .flex\@md > .order-none, .flex\@lg > .order-none, .flex\@xl > .order-none, .flex\@2xl > .order-none {
  order: 0;
}
.flex > .shrink, .flex\@xs > .shrink, .flex\@sm > .shrink, .flex\@md > .shrink, .flex\@lg > .shrink, .flex\@xl > .shrink, .flex\@2xl > .shrink {
  flex-shrink: 1;
}
.flex > .no-shrink, .flex\@xs > .no-shrink, .flex\@sm > .no-shrink, .flex\@md > .no-shrink, .flex\@lg > .no-shrink, .flex\@xl > .no-shrink, .flex\@2xl > .no-shrink {
  flex-shrink: 0;
}
.flex > .shrink-twice, .flex\@xs > .shrink-twice, .flex\@sm > .shrink-twice, .flex\@md > .shrink-twice, .flex\@lg > .shrink-twice, .flex\@xl > .shrink-twice, .flex\@2xl > .shrink-twice {
  flex-shrink: 2;
}
.flex > .self-end, .flex\@xs > .self-end, .flex\@sm > .self-end, .flex\@md > .self-end, .flex\@lg > .self-end, .flex\@xl > .self-end, .flex\@2xl > .self-end {
  align-self: flex-end;
}
.flex > .self-start, .flex\@xs > .self-start, .flex\@sm > .self-start, .flex\@md > .self-start, .flex\@lg > .self-start, .flex\@xl > .self-start, .flex\@2xl > .self-start {
  align-self: flex-start;
}
.flex > .self-center, .flex\@xs > .self-center, .flex\@sm > .self-center, .flex\@md > .self-center, .flex\@lg > .self-center, .flex\@xl > .self-center, .flex\@2xl > .self-center {
  align-self: center;
}
.flex > .self-stretch, .flex\@xs > .self-stretch, .flex\@sm > .self-stretch, .flex\@md > .self-stretch, .flex\@lg > .self-stretch, .flex\@xl > .self-stretch, .flex\@2xl > .self-stretch {
  align-self: stretch;
}
.flex > .self-baseline, .flex\@xs > .self-baseline, .flex\@sm > .self-baseline, .flex\@md > .self-baseline, .flex\@lg > .self-baseline, .flex\@xl > .self-baseline, .flex\@2xl > .self-baseline {
  align-self: baseline;
}
.flex > .self-auto, .flex\@xs > .self-auto, .flex\@sm > .self-auto, .flex\@md > .self-auto, .flex\@lg > .self-auto, .flex\@xl > .self-auto, .flex\@2xl > .self-auto {
  align-self: auto;
}
.flex > .fill-1, .flex\@xs > .fill-1, .flex\@sm > .fill-1, .flex\@md > .fill-1, .flex\@lg > .fill-1, .flex\@xl > .fill-1, .flex\@2xl > .fill-1 {
  flex: 0 0 calc((100% - 11 * var(--flex-gap, 0px)) / 12);
  max-width: calc((100% - 11 * var(--flex-gap, 0px)) / 12);
  min-width: 0;
}
.flex > .order-1, .flex\@xs > .order-1, .flex\@sm > .order-1, .flex\@md > .order-1, .flex\@lg > .order-1, .flex\@xl > .order-1, .flex\@2xl > .order-1 {
  order: 1;
}
.flex > .fill-2, .flex\@xs > .fill-2, .flex\@sm > .fill-2, .flex\@md > .fill-2, .flex\@lg > .fill-2, .flex\@xl > .fill-2, .flex\@2xl > .fill-2 {
  flex: 0 0 calc((100% - 5 * var(--flex-gap, 0px)) / 6);
  max-width: calc((100% - 5 * var(--flex-gap, 0px)) / 6);
  min-width: 0;
}
.flex > .order-2, .flex\@xs > .order-2, .flex\@sm > .order-2, .flex\@md > .order-2, .flex\@lg > .order-2, .flex\@xl > .order-2, .flex\@2xl > .order-2 {
  order: 2;
}
.flex > .fill-3, .flex\@xs > .fill-3, .flex\@sm > .fill-3, .flex\@md > .fill-3, .flex\@lg > .fill-3, .flex\@xl > .fill-3, .flex\@2xl > .fill-3 {
  flex: 0 0 calc((100% - 3 * var(--flex-gap, 0px)) / 4);
  max-width: calc((100% - 3 * var(--flex-gap, 0px)) / 4);
  min-width: 0;
}
.flex > .order-3, .flex\@xs > .order-3, .flex\@sm > .order-3, .flex\@md > .order-3, .flex\@lg > .order-3, .flex\@xl > .order-3, .flex\@2xl > .order-3 {
  order: 3;
}
.flex > .fill-4, .flex\@xs > .fill-4, .flex\@sm > .fill-4, .flex\@md > .fill-4, .flex\@lg > .fill-4, .flex\@xl > .fill-4, .flex\@2xl > .fill-4 {
  flex: 0 0 calc((100% - 2 * var(--flex-gap, 0px)) / 3);
  max-width: calc((100% - 2 * var(--flex-gap, 0px)) / 3);
  min-width: 0;
}
.flex > .order-4, .flex\@xs > .order-4, .flex\@sm > .order-4, .flex\@md > .order-4, .flex\@lg > .order-4, .flex\@xl > .order-4, .flex\@2xl > .order-4 {
  order: 4;
}
.flex > .fill-5, .flex\@xs > .fill-5, .flex\@sm > .fill-5, .flex\@md > .fill-5, .flex\@lg > .fill-5, .flex\@xl > .fill-5, .flex\@2xl > .fill-5 {
  flex: 0 0 calc((100% - 1.4 * var(--flex-gap, 0px)) / 2.4);
  max-width: calc((100% - 1.4 * var(--flex-gap, 0px)) / 2.4);
  min-width: 0;
}
.flex > .order-5, .flex\@xs > .order-5, .flex\@sm > .order-5, .flex\@md > .order-5, .flex\@lg > .order-5, .flex\@xl > .order-5, .flex\@2xl > .order-5 {
  order: 5;
}
.flex > .fill-6, .flex\@xs > .fill-6, .flex\@sm > .fill-6, .flex\@md > .fill-6, .flex\@lg > .fill-6, .flex\@xl > .fill-6, .flex\@2xl > .fill-6 {
  flex: 0 0 calc((100% - 1 * var(--flex-gap, 0px)) / 2);
  max-width: calc((100% - 1 * var(--flex-gap, 0px)) / 2);
  min-width: 0;
}
.flex > .order-6, .flex\@xs > .order-6, .flex\@sm > .order-6, .flex\@md > .order-6, .flex\@lg > .order-6, .flex\@xl > .order-6, .flex\@2xl > .order-6 {
  order: 6;
}
.flex > .fill-7, .flex\@xs > .fill-7, .flex\@sm > .fill-7, .flex\@md > .fill-7, .flex\@lg > .fill-7, .flex\@xl > .fill-7, .flex\@2xl > .fill-7 {
  flex: 0 0 calc((100% - 0.7142857143 * var(--flex-gap, 0px)) / 1.7142857143);
  max-width: calc((100% - 0.7142857143 * var(--flex-gap, 0px)) / 1.7142857143);
  min-width: 0;
}
.flex > .order-7, .flex\@xs > .order-7, .flex\@sm > .order-7, .flex\@md > .order-7, .flex\@lg > .order-7, .flex\@xl > .order-7, .flex\@2xl > .order-7 {
  order: 7;
}
.flex > .fill-8, .flex\@xs > .fill-8, .flex\@sm > .fill-8, .flex\@md > .fill-8, .flex\@lg > .fill-8, .flex\@xl > .fill-8, .flex\@2xl > .fill-8 {
  flex: 0 0 calc((100% - 0.5 * var(--flex-gap, 0px)) / 1.5);
  max-width: calc((100% - 0.5 * var(--flex-gap, 0px)) / 1.5);
  min-width: 0;
}
.flex > .order-8, .flex\@xs > .order-8, .flex\@sm > .order-8, .flex\@md > .order-8, .flex\@lg > .order-8, .flex\@xl > .order-8, .flex\@2xl > .order-8 {
  order: 8;
}
.flex > .fill-9, .flex\@xs > .fill-9, .flex\@sm > .fill-9, .flex\@md > .fill-9, .flex\@lg > .fill-9, .flex\@xl > .fill-9, .flex\@2xl > .fill-9 {
  flex: 0 0 calc((100% - 0.3333333333 * var(--flex-gap, 0px)) / 1.3333333333);
  max-width: calc((100% - 0.3333333333 * var(--flex-gap, 0px)) / 1.3333333333);
  min-width: 0;
}
.flex > .order-9, .flex\@xs > .order-9, .flex\@sm > .order-9, .flex\@md > .order-9, .flex\@lg > .order-9, .flex\@xl > .order-9, .flex\@2xl > .order-9 {
  order: 9;
}
.flex > .fill-10, .flex\@xs > .fill-10, .flex\@sm > .fill-10, .flex\@md > .fill-10, .flex\@lg > .fill-10, .flex\@xl > .fill-10, .flex\@2xl > .fill-10 {
  flex: 0 0 calc((100% - 0.2 * var(--flex-gap, 0px)) / 1.2);
  max-width: calc((100% - 0.2 * var(--flex-gap, 0px)) / 1.2);
  min-width: 0;
}
.flex > .order-10, .flex\@xs > .order-10, .flex\@sm > .order-10, .flex\@md > .order-10, .flex\@lg > .order-10, .flex\@xl > .order-10, .flex\@2xl > .order-10 {
  order: 10;
}
.flex > .fill-11, .flex\@xs > .fill-11, .flex\@sm > .fill-11, .flex\@md > .fill-11, .flex\@lg > .fill-11, .flex\@xl > .fill-11, .flex\@2xl > .fill-11 {
  flex: 0 0 calc((100% - 0.0909090909 * var(--flex-gap, 0px)) / 1.0909090909);
  max-width: calc((100% - 0.0909090909 * var(--flex-gap, 0px)) / 1.0909090909);
  min-width: 0;
}
.flex > .order-11, .flex\@xs > .order-11, .flex\@sm > .order-11, .flex\@md > .order-11, .flex\@lg > .order-11, .flex\@xl > .order-11, .flex\@2xl > .order-11 {
  order: 11;
}
.flex > .fill-12, .flex\@xs > .fill-12, .flex\@sm > .fill-12, .flex\@md > .fill-12, .flex\@lg > .fill-12, .flex\@xl > .fill-12, .flex\@2xl > .fill-12 {
  flex: 0 0 calc((100% - 0 * var(--flex-gap, 0px)) / 1);
  max-width: calc((100% - 0 * var(--flex-gap, 0px)) / 1);
  min-width: 0;
}
.flex > .order-12, .flex\@xs > .order-12, .flex\@sm > .order-12, .flex\@md > .order-12, .flex\@lg > .order-12, .flex\@xl > .order-12, .flex\@2xl > .order-12 {
  order: 12;
}

@media (min-width: 480px) {
  .flex.row\@xs, .flex\@xs.row\@xs, .flex\@sm.row\@xs, .flex\@md.row\@xs, .flex\@lg.row\@xs, .flex\@xl.row\@xs, .flex\@2xl.row\@xs {
    flex-direction: row;
  }
  .flex.row-reverse\@xs, .flex\@xs.row-reverse\@xs, .flex\@sm.row-reverse\@xs, .flex\@md.row-reverse\@xs, .flex\@lg.row-reverse\@xs, .flex\@xl.row-reverse\@xs, .flex\@2xl.row-reverse\@xs {
    flex-direction: row-reverse;
  }
  .flex.col\@xs, .flex\@xs.col\@xs, .flex\@sm.col\@xs, .flex\@md.col\@xs, .flex\@lg.col\@xs, .flex\@xl.col\@xs, .flex\@2xl.col\@xs {
    flex-direction: column;
  }
  .flex.col-reverse\@xs, .flex\@xs.col-reverse\@xs, .flex\@sm.col-reverse\@xs, .flex\@md.col-reverse\@xs, .flex\@lg.col-reverse\@xs, .flex\@xl.col-reverse\@xs, .flex\@2xl.col-reverse\@xs {
    flex-direction: column-reverse;
  }
  .flex.wrap\@xs, .flex\@xs.wrap\@xs, .flex\@sm.wrap\@xs, .flex\@md.wrap\@xs, .flex\@lg.wrap\@xs, .flex\@xl.wrap\@xs, .flex\@2xl.wrap\@xs {
    flex-wrap: wrap;
  }
  .flex.nowrap\@xs, .flex\@xs.nowrap\@xs, .flex\@sm.nowrap\@xs, .flex\@md.nowrap\@xs, .flex\@lg.nowrap\@xs, .flex\@xl.nowrap\@xs, .flex\@2xl.nowrap\@xs {
    flex-wrap: nowrap;
  }
  .flex.wrap-reverse\@xs, .flex\@xs.wrap-reverse\@xs, .flex\@sm.wrap-reverse\@xs, .flex\@md.wrap-reverse\@xs, .flex\@lg.wrap-reverse\@xs, .flex\@xl.wrap-reverse\@xs, .flex\@2xl.wrap-reverse\@xs {
    flex-wrap: wrap-reverse;
  }
  .flex.start\@xs, .flex\@xs.start\@xs, .flex\@sm.start\@xs, .flex\@md.start\@xs, .flex\@lg.start\@xs, .flex\@xl.start\@xs, .flex\@2xl.start\@xs {
    justify-content: flex-start;
  }
  .flex.end\@xs, .flex\@xs.end\@xs, .flex\@sm.end\@xs, .flex\@md.end\@xs, .flex\@lg.end\@xs, .flex\@xl.end\@xs, .flex\@2xl.end\@xs {
    justify-content: flex-end;
  }
  .flex.center\@xs, .flex\@xs.center\@xs, .flex\@sm.center\@xs, .flex\@md.center\@xs, .flex\@lg.center\@xs, .flex\@xl.center\@xs, .flex\@2xl.center\@xs {
    justify-content: center;
  }
  .flex.stretch\@xs, .flex\@xs.stretch\@xs, .flex\@sm.stretch\@xs, .flex\@md.stretch\@xs, .flex\@lg.stretch\@xs, .flex\@xl.stretch\@xs, .flex\@2xl.stretch\@xs {
    justify-content: stretch;
  }
  .flex.between\@xs, .flex\@xs.between\@xs, .flex\@sm.between\@xs, .flex\@md.between\@xs, .flex\@lg.between\@xs, .flex\@xl.between\@xs, .flex\@2xl.between\@xs {
    justify-content: space-between;
  }
  .flex.around\@xs, .flex\@xs.around\@xs, .flex\@sm.around\@xs, .flex\@md.around\@xs, .flex\@lg.around\@xs, .flex\@xl.around\@xs, .flex\@2xl.around\@xs {
    justify-content: space-around;
  }
  .flex.evenly\@xs, .flex\@xs.evenly\@xs, .flex\@sm.evenly\@xs, .flex\@md.evenly\@xs, .flex\@lg.evenly\@xs, .flex\@xl.evenly\@xs, .flex\@2xl.evenly\@xs {
    justify-content: space-evenly;
  }
  .flex.x-start\@xs, .flex\@xs.x-start\@xs, .flex\@sm.x-start\@xs, .flex\@md.x-start\@xs, .flex\@lg.x-start\@xs, .flex\@xl.x-start\@xs, .flex\@2xl.x-start\@xs {
    align-items: flex-start;
  }
  .flex.x-end\@xs, .flex\@xs.x-end\@xs, .flex\@sm.x-end\@xs, .flex\@md.x-end\@xs, .flex\@lg.x-end\@xs, .flex\@xl.x-end\@xs, .flex\@2xl.x-end\@xs {
    align-items: flex-end;
  }
  .flex.x-center\@xs, .flex\@xs.x-center\@xs, .flex\@sm.x-center\@xs, .flex\@md.x-center\@xs, .flex\@lg.x-center\@xs, .flex\@xl.x-center\@xs, .flex\@2xl.x-center\@xs {
    align-items: center;
  }
  .flex.x-baseline\@xs, .flex\@xs.x-baseline\@xs, .flex\@sm.x-baseline\@xs, .flex\@md.x-baseline\@xs, .flex\@lg.x-baseline\@xs, .flex\@xl.x-baseline\@xs, .flex\@2xl.x-baseline\@xs {
    align-items: baseline;
  }
  .flex.x-stretch\@xs, .flex\@xs.x-stretch\@xs, .flex\@sm.x-stretch\@xs, .flex\@md.x-stretch\@xs, .flex\@lg.x-stretch\@xs, .flex\@xl.x-stretch\@xs, .flex\@2xl.x-stretch\@xs {
    align-items: stretch;
  }
  .flex.x-content-start\@xs, .flex\@xs.x-content-start\@xs, .flex\@sm.x-content-start\@xs, .flex\@md.x-content-start\@xs, .flex\@lg.x-content-start\@xs, .flex\@xl.x-content-start\@xs, .flex\@2xl.x-content-start\@xs {
    align-content: flex-start;
  }
  .flex.x-content-end\@xs, .flex\@xs.x-content-end\@xs, .flex\@sm.x-content-end\@xs, .flex\@md.x-content-end\@xs, .flex\@lg.x-content-end\@xs, .flex\@xl.x-content-end\@xs, .flex\@2xl.x-content-end\@xs {
    align-content: flex-end;
  }
  .flex.x-content-center\@xs, .flex\@xs.x-content-center\@xs, .flex\@sm.x-content-center\@xs, .flex\@md.x-content-center\@xs, .flex\@lg.x-content-center\@xs, .flex\@xl.x-content-center\@xs, .flex\@2xl.x-content-center\@xs {
    align-content: center;
  }
  .flex.x-content-between\@xs, .flex\@xs.x-content-between\@xs, .flex\@sm.x-content-between\@xs, .flex\@md.x-content-between\@xs, .flex\@lg.x-content-between\@xs, .flex\@xl.x-content-between\@xs, .flex\@2xl.x-content-between\@xs {
    align-content: space-between;
  }
  .flex.x-content-around\@xs, .flex\@xs.x-content-around\@xs, .flex\@sm.x-content-around\@xs, .flex\@md.x-content-around\@xs, .flex\@lg.x-content-around\@xs, .flex\@xl.x-content-around\@xs, .flex\@2xl.x-content-around\@xs {
    align-content: space-around;
  }
  .flex.x-content-evenly\@xs, .flex\@xs.x-content-evenly\@xs, .flex\@sm.x-content-evenly\@xs, .flex\@md.x-content-evenly\@xs, .flex\@lg.x-content-evenly\@xs, .flex\@xl.x-content-evenly\@xs, .flex\@2xl.x-content-evenly\@xs {
    align-content: space-evenly;
  }
  .flex.x-content-stretch\@xs, .flex\@xs.x-content-stretch\@xs, .flex\@sm.x-content-stretch\@xs, .flex\@md.x-content-stretch\@xs, .flex\@lg.x-content-stretch\@xs, .flex\@xl.x-content-stretch\@xs, .flex\@2xl.x-content-stretch\@xs {
    align-content: stretch;
  }
  .flex > .fill-auto\@xs, .flex\@xs > .fill-auto\@xs, .flex\@sm > .fill-auto\@xs, .flex\@md > .fill-auto\@xs, .flex\@lg > .fill-auto\@xs, .flex\@xl > .fill-auto\@xs, .flex\@2xl > .fill-auto\@xs {
    flex: 1 1 auto;
  }
  .flex > .fill-full\@xs, .flex\@xs > .fill-full\@xs, .flex\@sm > .fill-full\@xs, .flex\@md > .fill-full\@xs, .flex\@lg > .fill-full\@xs, .flex\@xl > .fill-full\@xs, .flex\@2xl > .fill-full\@xs {
    flex: 0 0 100%;
  }
  .flex > .grow\@xs, .flex\@xs > .grow\@xs, .flex\@sm > .grow\@xs, .flex\@md > .grow\@xs, .flex\@lg > .grow\@xs, .flex\@xl > .grow\@xs, .flex\@2xl > .grow\@xs {
    flex: 1 1 0%;
  }
  .flex > .no-grow\@xs, .flex\@xs > .no-grow\@xs, .flex\@sm > .no-grow\@xs, .flex\@md > .no-grow\@xs, .flex\@lg > .no-grow\@xs, .flex\@xl > .no-grow\@xs, .flex\@2xl > .no-grow\@xs {
    flex: none;
  }
  .flex > .order-first\@xs, .flex\@xs > .order-first\@xs, .flex\@sm > .order-first\@xs, .flex\@md > .order-first\@xs, .flex\@lg > .order-first\@xs, .flex\@xl > .order-first\@xs, .flex\@2xl > .order-first\@xs {
    order: -1;
  }
  .flex > .order-last\@xs, .flex\@xs > .order-last\@xs, .flex\@sm > .order-last\@xs, .flex\@md > .order-last\@xs, .flex\@lg > .order-last\@xs, .flex\@xl > .order-last\@xs, .flex\@2xl > .order-last\@xs {
    order: 9999;
  }
  .flex > .order-none\@xs, .flex\@xs > .order-none\@xs, .flex\@sm > .order-none\@xs, .flex\@md > .order-none\@xs, .flex\@lg > .order-none\@xs, .flex\@xl > .order-none\@xs, .flex\@2xl > .order-none\@xs {
    order: 0;
  }
  .flex > .shrink\@xs, .flex\@xs > .shrink\@xs, .flex\@sm > .shrink\@xs, .flex\@md > .shrink\@xs, .flex\@lg > .shrink\@xs, .flex\@xl > .shrink\@xs, .flex\@2xl > .shrink\@xs {
    flex-shrink: 1;
  }
  .flex > .no-shrink\@xs, .flex\@xs > .no-shrink\@xs, .flex\@sm > .no-shrink\@xs, .flex\@md > .no-shrink\@xs, .flex\@lg > .no-shrink\@xs, .flex\@xl > .no-shrink\@xs, .flex\@2xl > .no-shrink\@xs {
    flex-shrink: 0;
  }
  .flex > .shrink-twice\@xs, .flex\@xs > .shrink-twice\@xs, .flex\@sm > .shrink-twice\@xs, .flex\@md > .shrink-twice\@xs, .flex\@lg > .shrink-twice\@xs, .flex\@xl > .shrink-twice\@xs, .flex\@2xl > .shrink-twice\@xs {
    flex-shrink: 2;
  }
  .flex > .self-end\@xs, .flex\@xs > .self-end\@xs, .flex\@sm > .self-end\@xs, .flex\@md > .self-end\@xs, .flex\@lg > .self-end\@xs, .flex\@xl > .self-end\@xs, .flex\@2xl > .self-end\@xs {
    align-self: flex-end;
  }
  .flex > .self-start\@xs, .flex\@xs > .self-start\@xs, .flex\@sm > .self-start\@xs, .flex\@md > .self-start\@xs, .flex\@lg > .self-start\@xs, .flex\@xl > .self-start\@xs, .flex\@2xl > .self-start\@xs {
    align-self: flex-start;
  }
  .flex > .self-center\@xs, .flex\@xs > .self-center\@xs, .flex\@sm > .self-center\@xs, .flex\@md > .self-center\@xs, .flex\@lg > .self-center\@xs, .flex\@xl > .self-center\@xs, .flex\@2xl > .self-center\@xs {
    align-self: center;
  }
  .flex > .self-stretch\@xs, .flex\@xs > .self-stretch\@xs, .flex\@sm > .self-stretch\@xs, .flex\@md > .self-stretch\@xs, .flex\@lg > .self-stretch\@xs, .flex\@xl > .self-stretch\@xs, .flex\@2xl > .self-stretch\@xs {
    align-self: stretch;
  }
  .flex > .self-baseline\@xs, .flex\@xs > .self-baseline\@xs, .flex\@sm > .self-baseline\@xs, .flex\@md > .self-baseline\@xs, .flex\@lg > .self-baseline\@xs, .flex\@xl > .self-baseline\@xs, .flex\@2xl > .self-baseline\@xs {
    align-self: baseline;
  }
  .flex > .self-auto\@xs, .flex\@xs > .self-auto\@xs, .flex\@sm > .self-auto\@xs, .flex\@md > .self-auto\@xs, .flex\@lg > .self-auto\@xs, .flex\@xl > .self-auto\@xs, .flex\@2xl > .self-auto\@xs {
    align-self: auto;
  }
  .flex > .fill-1\@xs, .flex\@xs > .fill-1\@xs, .flex\@sm > .fill-1\@xs, .flex\@md > .fill-1\@xs, .flex\@lg > .fill-1\@xs, .flex\@xl > .fill-1\@xs, .flex\@2xl > .fill-1\@xs {
    flex: 0 0 calc((100% - 11 * var(--flex-gap, 0px)) / 12);
    max-width: calc((100% - 11 * var(--flex-gap, 0px)) / 12);
    min-width: 0;
  }
  .flex > .order-1\@xs, .flex\@xs > .order-1\@xs, .flex\@sm > .order-1\@xs, .flex\@md > .order-1\@xs, .flex\@lg > .order-1\@xs, .flex\@xl > .order-1\@xs, .flex\@2xl > .order-1\@xs {
    order: 1;
  }
  .flex > .fill-2\@xs, .flex\@xs > .fill-2\@xs, .flex\@sm > .fill-2\@xs, .flex\@md > .fill-2\@xs, .flex\@lg > .fill-2\@xs, .flex\@xl > .fill-2\@xs, .flex\@2xl > .fill-2\@xs {
    flex: 0 0 calc((100% - 5 * var(--flex-gap, 0px)) / 6);
    max-width: calc((100% - 5 * var(--flex-gap, 0px)) / 6);
    min-width: 0;
  }
  .flex > .order-2\@xs, .flex\@xs > .order-2\@xs, .flex\@sm > .order-2\@xs, .flex\@md > .order-2\@xs, .flex\@lg > .order-2\@xs, .flex\@xl > .order-2\@xs, .flex\@2xl > .order-2\@xs {
    order: 2;
  }
  .flex > .fill-3\@xs, .flex\@xs > .fill-3\@xs, .flex\@sm > .fill-3\@xs, .flex\@md > .fill-3\@xs, .flex\@lg > .fill-3\@xs, .flex\@xl > .fill-3\@xs, .flex\@2xl > .fill-3\@xs {
    flex: 0 0 calc((100% - 3 * var(--flex-gap, 0px)) / 4);
    max-width: calc((100% - 3 * var(--flex-gap, 0px)) / 4);
    min-width: 0;
  }
  .flex > .order-3\@xs, .flex\@xs > .order-3\@xs, .flex\@sm > .order-3\@xs, .flex\@md > .order-3\@xs, .flex\@lg > .order-3\@xs, .flex\@xl > .order-3\@xs, .flex\@2xl > .order-3\@xs {
    order: 3;
  }
  .flex > .fill-4\@xs, .flex\@xs > .fill-4\@xs, .flex\@sm > .fill-4\@xs, .flex\@md > .fill-4\@xs, .flex\@lg > .fill-4\@xs, .flex\@xl > .fill-4\@xs, .flex\@2xl > .fill-4\@xs {
    flex: 0 0 calc((100% - 2 * var(--flex-gap, 0px)) / 3);
    max-width: calc((100% - 2 * var(--flex-gap, 0px)) / 3);
    min-width: 0;
  }
  .flex > .order-4\@xs, .flex\@xs > .order-4\@xs, .flex\@sm > .order-4\@xs, .flex\@md > .order-4\@xs, .flex\@lg > .order-4\@xs, .flex\@xl > .order-4\@xs, .flex\@2xl > .order-4\@xs {
    order: 4;
  }
  .flex > .fill-5\@xs, .flex\@xs > .fill-5\@xs, .flex\@sm > .fill-5\@xs, .flex\@md > .fill-5\@xs, .flex\@lg > .fill-5\@xs, .flex\@xl > .fill-5\@xs, .flex\@2xl > .fill-5\@xs {
    flex: 0 0 calc((100% - 1.4 * var(--flex-gap, 0px)) / 2.4);
    max-width: calc((100% - 1.4 * var(--flex-gap, 0px)) / 2.4);
    min-width: 0;
  }
  .flex > .order-5\@xs, .flex\@xs > .order-5\@xs, .flex\@sm > .order-5\@xs, .flex\@md > .order-5\@xs, .flex\@lg > .order-5\@xs, .flex\@xl > .order-5\@xs, .flex\@2xl > .order-5\@xs {
    order: 5;
  }
  .flex > .fill-6\@xs, .flex\@xs > .fill-6\@xs, .flex\@sm > .fill-6\@xs, .flex\@md > .fill-6\@xs, .flex\@lg > .fill-6\@xs, .flex\@xl > .fill-6\@xs, .flex\@2xl > .fill-6\@xs {
    flex: 0 0 calc((100% - 1 * var(--flex-gap, 0px)) / 2);
    max-width: calc((100% - 1 * var(--flex-gap, 0px)) / 2);
    min-width: 0;
  }
  .flex > .order-6\@xs, .flex\@xs > .order-6\@xs, .flex\@sm > .order-6\@xs, .flex\@md > .order-6\@xs, .flex\@lg > .order-6\@xs, .flex\@xl > .order-6\@xs, .flex\@2xl > .order-6\@xs {
    order: 6;
  }
  .flex > .fill-7\@xs, .flex\@xs > .fill-7\@xs, .flex\@sm > .fill-7\@xs, .flex\@md > .fill-7\@xs, .flex\@lg > .fill-7\@xs, .flex\@xl > .fill-7\@xs, .flex\@2xl > .fill-7\@xs {
    flex: 0 0 calc((100% - 0.7142857143 * var(--flex-gap, 0px)) / 1.7142857143);
    max-width: calc((100% - 0.7142857143 * var(--flex-gap, 0px)) / 1.7142857143);
    min-width: 0;
  }
  .flex > .order-7\@xs, .flex\@xs > .order-7\@xs, .flex\@sm > .order-7\@xs, .flex\@md > .order-7\@xs, .flex\@lg > .order-7\@xs, .flex\@xl > .order-7\@xs, .flex\@2xl > .order-7\@xs {
    order: 7;
  }
  .flex > .fill-8\@xs, .flex\@xs > .fill-8\@xs, .flex\@sm > .fill-8\@xs, .flex\@md > .fill-8\@xs, .flex\@lg > .fill-8\@xs, .flex\@xl > .fill-8\@xs, .flex\@2xl > .fill-8\@xs {
    flex: 0 0 calc((100% - 0.5 * var(--flex-gap, 0px)) / 1.5);
    max-width: calc((100% - 0.5 * var(--flex-gap, 0px)) / 1.5);
    min-width: 0;
  }
  .flex > .order-8\@xs, .flex\@xs > .order-8\@xs, .flex\@sm > .order-8\@xs, .flex\@md > .order-8\@xs, .flex\@lg > .order-8\@xs, .flex\@xl > .order-8\@xs, .flex\@2xl > .order-8\@xs {
    order: 8;
  }
  .flex > .fill-9\@xs, .flex\@xs > .fill-9\@xs, .flex\@sm > .fill-9\@xs, .flex\@md > .fill-9\@xs, .flex\@lg > .fill-9\@xs, .flex\@xl > .fill-9\@xs, .flex\@2xl > .fill-9\@xs {
    flex: 0 0 calc((100% - 0.3333333333 * var(--flex-gap, 0px)) / 1.3333333333);
    max-width: calc((100% - 0.3333333333 * var(--flex-gap, 0px)) / 1.3333333333);
    min-width: 0;
  }
  .flex > .order-9\@xs, .flex\@xs > .order-9\@xs, .flex\@sm > .order-9\@xs, .flex\@md > .order-9\@xs, .flex\@lg > .order-9\@xs, .flex\@xl > .order-9\@xs, .flex\@2xl > .order-9\@xs {
    order: 9;
  }
  .flex > .fill-10\@xs, .flex\@xs > .fill-10\@xs, .flex\@sm > .fill-10\@xs, .flex\@md > .fill-10\@xs, .flex\@lg > .fill-10\@xs, .flex\@xl > .fill-10\@xs, .flex\@2xl > .fill-10\@xs {
    flex: 0 0 calc((100% - 0.2 * var(--flex-gap, 0px)) / 1.2);
    max-width: calc((100% - 0.2 * var(--flex-gap, 0px)) / 1.2);
    min-width: 0;
  }
  .flex > .order-10\@xs, .flex\@xs > .order-10\@xs, .flex\@sm > .order-10\@xs, .flex\@md > .order-10\@xs, .flex\@lg > .order-10\@xs, .flex\@xl > .order-10\@xs, .flex\@2xl > .order-10\@xs {
    order: 10;
  }
  .flex > .fill-11\@xs, .flex\@xs > .fill-11\@xs, .flex\@sm > .fill-11\@xs, .flex\@md > .fill-11\@xs, .flex\@lg > .fill-11\@xs, .flex\@xl > .fill-11\@xs, .flex\@2xl > .fill-11\@xs {
    flex: 0 0 calc((100% - 0.0909090909 * var(--flex-gap, 0px)) / 1.0909090909);
    max-width: calc((100% - 0.0909090909 * var(--flex-gap, 0px)) / 1.0909090909);
    min-width: 0;
  }
  .flex > .order-11\@xs, .flex\@xs > .order-11\@xs, .flex\@sm > .order-11\@xs, .flex\@md > .order-11\@xs, .flex\@lg > .order-11\@xs, .flex\@xl > .order-11\@xs, .flex\@2xl > .order-11\@xs {
    order: 11;
  }
  .flex > .fill-12\@xs, .flex\@xs > .fill-12\@xs, .flex\@sm > .fill-12\@xs, .flex\@md > .fill-12\@xs, .flex\@lg > .fill-12\@xs, .flex\@xl > .fill-12\@xs, .flex\@2xl > .fill-12\@xs {
    flex: 0 0 calc((100% - 0 * var(--flex-gap, 0px)) / 1);
    max-width: calc((100% - 0 * var(--flex-gap, 0px)) / 1);
    min-width: 0;
  }
  .flex > .order-12\@xs, .flex\@xs > .order-12\@xs, .flex\@sm > .order-12\@xs, .flex\@md > .order-12\@xs, .flex\@lg > .order-12\@xs, .flex\@xl > .order-12\@xs, .flex\@2xl > .order-12\@xs {
    order: 12;
  }
}
@media (min-width: 640px) {
  .flex.row\@sm, .flex\@xs.row\@sm, .flex\@sm.row\@sm, .flex\@md.row\@sm, .flex\@lg.row\@sm, .flex\@xl.row\@sm, .flex\@2xl.row\@sm {
    flex-direction: row;
  }
  .flex.row-reverse\@sm, .flex\@xs.row-reverse\@sm, .flex\@sm.row-reverse\@sm, .flex\@md.row-reverse\@sm, .flex\@lg.row-reverse\@sm, .flex\@xl.row-reverse\@sm, .flex\@2xl.row-reverse\@sm {
    flex-direction: row-reverse;
  }
  .flex.col\@sm, .flex\@xs.col\@sm, .flex\@sm.col\@sm, .flex\@md.col\@sm, .flex\@lg.col\@sm, .flex\@xl.col\@sm, .flex\@2xl.col\@sm {
    flex-direction: column;
  }
  .flex.col-reverse\@sm, .flex\@xs.col-reverse\@sm, .flex\@sm.col-reverse\@sm, .flex\@md.col-reverse\@sm, .flex\@lg.col-reverse\@sm, .flex\@xl.col-reverse\@sm, .flex\@2xl.col-reverse\@sm {
    flex-direction: column-reverse;
  }
  .flex.wrap\@sm, .flex\@xs.wrap\@sm, .flex\@sm.wrap\@sm, .flex\@md.wrap\@sm, .flex\@lg.wrap\@sm, .flex\@xl.wrap\@sm, .flex\@2xl.wrap\@sm {
    flex-wrap: wrap;
  }
  .flex.nowrap\@sm, .flex\@xs.nowrap\@sm, .flex\@sm.nowrap\@sm, .flex\@md.nowrap\@sm, .flex\@lg.nowrap\@sm, .flex\@xl.nowrap\@sm, .flex\@2xl.nowrap\@sm {
    flex-wrap: nowrap;
  }
  .flex.wrap-reverse\@sm, .flex\@xs.wrap-reverse\@sm, .flex\@sm.wrap-reverse\@sm, .flex\@md.wrap-reverse\@sm, .flex\@lg.wrap-reverse\@sm, .flex\@xl.wrap-reverse\@sm, .flex\@2xl.wrap-reverse\@sm {
    flex-wrap: wrap-reverse;
  }
  .flex.start\@sm, .flex\@xs.start\@sm, .flex\@sm.start\@sm, .flex\@md.start\@sm, .flex\@lg.start\@sm, .flex\@xl.start\@sm, .flex\@2xl.start\@sm {
    justify-content: flex-start;
  }
  .flex.end\@sm, .flex\@xs.end\@sm, .flex\@sm.end\@sm, .flex\@md.end\@sm, .flex\@lg.end\@sm, .flex\@xl.end\@sm, .flex\@2xl.end\@sm {
    justify-content: flex-end;
  }
  .flex.center\@sm, .flex\@xs.center\@sm, .flex\@sm.center\@sm, .flex\@md.center\@sm, .flex\@lg.center\@sm, .flex\@xl.center\@sm, .flex\@2xl.center\@sm {
    justify-content: center;
  }
  .flex.stretch\@sm, .flex\@xs.stretch\@sm, .flex\@sm.stretch\@sm, .flex\@md.stretch\@sm, .flex\@lg.stretch\@sm, .flex\@xl.stretch\@sm, .flex\@2xl.stretch\@sm {
    justify-content: stretch;
  }
  .flex.between\@sm, .flex\@xs.between\@sm, .flex\@sm.between\@sm, .flex\@md.between\@sm, .flex\@lg.between\@sm, .flex\@xl.between\@sm, .flex\@2xl.between\@sm {
    justify-content: space-between;
  }
  .flex.around\@sm, .flex\@xs.around\@sm, .flex\@sm.around\@sm, .flex\@md.around\@sm, .flex\@lg.around\@sm, .flex\@xl.around\@sm, .flex\@2xl.around\@sm {
    justify-content: space-around;
  }
  .flex.evenly\@sm, .flex\@xs.evenly\@sm, .flex\@sm.evenly\@sm, .flex\@md.evenly\@sm, .flex\@lg.evenly\@sm, .flex\@xl.evenly\@sm, .flex\@2xl.evenly\@sm {
    justify-content: space-evenly;
  }
  .flex.x-start\@sm, .flex\@xs.x-start\@sm, .flex\@sm.x-start\@sm, .flex\@md.x-start\@sm, .flex\@lg.x-start\@sm, .flex\@xl.x-start\@sm, .flex\@2xl.x-start\@sm {
    align-items: flex-start;
  }
  .flex.x-end\@sm, .flex\@xs.x-end\@sm, .flex\@sm.x-end\@sm, .flex\@md.x-end\@sm, .flex\@lg.x-end\@sm, .flex\@xl.x-end\@sm, .flex\@2xl.x-end\@sm {
    align-items: flex-end;
  }
  .flex.x-center\@sm, .flex\@xs.x-center\@sm, .flex\@sm.x-center\@sm, .flex\@md.x-center\@sm, .flex\@lg.x-center\@sm, .flex\@xl.x-center\@sm, .flex\@2xl.x-center\@sm {
    align-items: center;
  }
  .flex.x-baseline\@sm, .flex\@xs.x-baseline\@sm, .flex\@sm.x-baseline\@sm, .flex\@md.x-baseline\@sm, .flex\@lg.x-baseline\@sm, .flex\@xl.x-baseline\@sm, .flex\@2xl.x-baseline\@sm {
    align-items: baseline;
  }
  .flex.x-stretch\@sm, .flex\@xs.x-stretch\@sm, .flex\@sm.x-stretch\@sm, .flex\@md.x-stretch\@sm, .flex\@lg.x-stretch\@sm, .flex\@xl.x-stretch\@sm, .flex\@2xl.x-stretch\@sm {
    align-items: stretch;
  }
  .flex.x-content-start\@sm, .flex\@xs.x-content-start\@sm, .flex\@sm.x-content-start\@sm, .flex\@md.x-content-start\@sm, .flex\@lg.x-content-start\@sm, .flex\@xl.x-content-start\@sm, .flex\@2xl.x-content-start\@sm {
    align-content: flex-start;
  }
  .flex.x-content-end\@sm, .flex\@xs.x-content-end\@sm, .flex\@sm.x-content-end\@sm, .flex\@md.x-content-end\@sm, .flex\@lg.x-content-end\@sm, .flex\@xl.x-content-end\@sm, .flex\@2xl.x-content-end\@sm {
    align-content: flex-end;
  }
  .flex.x-content-center\@sm, .flex\@xs.x-content-center\@sm, .flex\@sm.x-content-center\@sm, .flex\@md.x-content-center\@sm, .flex\@lg.x-content-center\@sm, .flex\@xl.x-content-center\@sm, .flex\@2xl.x-content-center\@sm {
    align-content: center;
  }
  .flex.x-content-between\@sm, .flex\@xs.x-content-between\@sm, .flex\@sm.x-content-between\@sm, .flex\@md.x-content-between\@sm, .flex\@lg.x-content-between\@sm, .flex\@xl.x-content-between\@sm, .flex\@2xl.x-content-between\@sm {
    align-content: space-between;
  }
  .flex.x-content-around\@sm, .flex\@xs.x-content-around\@sm, .flex\@sm.x-content-around\@sm, .flex\@md.x-content-around\@sm, .flex\@lg.x-content-around\@sm, .flex\@xl.x-content-around\@sm, .flex\@2xl.x-content-around\@sm {
    align-content: space-around;
  }
  .flex.x-content-evenly\@sm, .flex\@xs.x-content-evenly\@sm, .flex\@sm.x-content-evenly\@sm, .flex\@md.x-content-evenly\@sm, .flex\@lg.x-content-evenly\@sm, .flex\@xl.x-content-evenly\@sm, .flex\@2xl.x-content-evenly\@sm {
    align-content: space-evenly;
  }
  .flex.x-content-stretch\@sm, .flex\@xs.x-content-stretch\@sm, .flex\@sm.x-content-stretch\@sm, .flex\@md.x-content-stretch\@sm, .flex\@lg.x-content-stretch\@sm, .flex\@xl.x-content-stretch\@sm, .flex\@2xl.x-content-stretch\@sm {
    align-content: stretch;
  }
  .flex > .fill-auto\@sm, .flex\@xs > .fill-auto\@sm, .flex\@sm > .fill-auto\@sm, .flex\@md > .fill-auto\@sm, .flex\@lg > .fill-auto\@sm, .flex\@xl > .fill-auto\@sm, .flex\@2xl > .fill-auto\@sm {
    flex: 1 1 auto;
  }
  .flex > .fill-full\@sm, .flex\@xs > .fill-full\@sm, .flex\@sm > .fill-full\@sm, .flex\@md > .fill-full\@sm, .flex\@lg > .fill-full\@sm, .flex\@xl > .fill-full\@sm, .flex\@2xl > .fill-full\@sm {
    flex: 0 0 100%;
  }
  .flex > .grow\@sm, .flex\@xs > .grow\@sm, .flex\@sm > .grow\@sm, .flex\@md > .grow\@sm, .flex\@lg > .grow\@sm, .flex\@xl > .grow\@sm, .flex\@2xl > .grow\@sm {
    flex: 1 1 0%;
  }
  .flex > .no-grow\@sm, .flex\@xs > .no-grow\@sm, .flex\@sm > .no-grow\@sm, .flex\@md > .no-grow\@sm, .flex\@lg > .no-grow\@sm, .flex\@xl > .no-grow\@sm, .flex\@2xl > .no-grow\@sm {
    flex: none;
  }
  .flex > .order-first\@sm, .flex\@xs > .order-first\@sm, .flex\@sm > .order-first\@sm, .flex\@md > .order-first\@sm, .flex\@lg > .order-first\@sm, .flex\@xl > .order-first\@sm, .flex\@2xl > .order-first\@sm {
    order: -1;
  }
  .flex > .order-last\@sm, .flex\@xs > .order-last\@sm, .flex\@sm > .order-last\@sm, .flex\@md > .order-last\@sm, .flex\@lg > .order-last\@sm, .flex\@xl > .order-last\@sm, .flex\@2xl > .order-last\@sm {
    order: 9999;
  }
  .flex > .order-none\@sm, .flex\@xs > .order-none\@sm, .flex\@sm > .order-none\@sm, .flex\@md > .order-none\@sm, .flex\@lg > .order-none\@sm, .flex\@xl > .order-none\@sm, .flex\@2xl > .order-none\@sm {
    order: 0;
  }
  .flex > .shrink\@sm, .flex\@xs > .shrink\@sm, .flex\@sm > .shrink\@sm, .flex\@md > .shrink\@sm, .flex\@lg > .shrink\@sm, .flex\@xl > .shrink\@sm, .flex\@2xl > .shrink\@sm {
    flex-shrink: 1;
  }
  .flex > .no-shrink\@sm, .flex\@xs > .no-shrink\@sm, .flex\@sm > .no-shrink\@sm, .flex\@md > .no-shrink\@sm, .flex\@lg > .no-shrink\@sm, .flex\@xl > .no-shrink\@sm, .flex\@2xl > .no-shrink\@sm {
    flex-shrink: 0;
  }
  .flex > .shrink-twice\@sm, .flex\@xs > .shrink-twice\@sm, .flex\@sm > .shrink-twice\@sm, .flex\@md > .shrink-twice\@sm, .flex\@lg > .shrink-twice\@sm, .flex\@xl > .shrink-twice\@sm, .flex\@2xl > .shrink-twice\@sm {
    flex-shrink: 2;
  }
  .flex > .self-end\@sm, .flex\@xs > .self-end\@sm, .flex\@sm > .self-end\@sm, .flex\@md > .self-end\@sm, .flex\@lg > .self-end\@sm, .flex\@xl > .self-end\@sm, .flex\@2xl > .self-end\@sm {
    align-self: flex-end;
  }
  .flex > .self-start\@sm, .flex\@xs > .self-start\@sm, .flex\@sm > .self-start\@sm, .flex\@md > .self-start\@sm, .flex\@lg > .self-start\@sm, .flex\@xl > .self-start\@sm, .flex\@2xl > .self-start\@sm {
    align-self: flex-start;
  }
  .flex > .self-center\@sm, .flex\@xs > .self-center\@sm, .flex\@sm > .self-center\@sm, .flex\@md > .self-center\@sm, .flex\@lg > .self-center\@sm, .flex\@xl > .self-center\@sm, .flex\@2xl > .self-center\@sm {
    align-self: center;
  }
  .flex > .self-stretch\@sm, .flex\@xs > .self-stretch\@sm, .flex\@sm > .self-stretch\@sm, .flex\@md > .self-stretch\@sm, .flex\@lg > .self-stretch\@sm, .flex\@xl > .self-stretch\@sm, .flex\@2xl > .self-stretch\@sm {
    align-self: stretch;
  }
  .flex > .self-baseline\@sm, .flex\@xs > .self-baseline\@sm, .flex\@sm > .self-baseline\@sm, .flex\@md > .self-baseline\@sm, .flex\@lg > .self-baseline\@sm, .flex\@xl > .self-baseline\@sm, .flex\@2xl > .self-baseline\@sm {
    align-self: baseline;
  }
  .flex > .self-auto\@sm, .flex\@xs > .self-auto\@sm, .flex\@sm > .self-auto\@sm, .flex\@md > .self-auto\@sm, .flex\@lg > .self-auto\@sm, .flex\@xl > .self-auto\@sm, .flex\@2xl > .self-auto\@sm {
    align-self: auto;
  }
  .flex > .fill-1\@sm, .flex\@xs > .fill-1\@sm, .flex\@sm > .fill-1\@sm, .flex\@md > .fill-1\@sm, .flex\@lg > .fill-1\@sm, .flex\@xl > .fill-1\@sm, .flex\@2xl > .fill-1\@sm {
    flex: 0 0 calc((100% - 11 * var(--flex-gap, 0px)) / 12);
    max-width: calc((100% - 11 * var(--flex-gap, 0px)) / 12);
    min-width: 0;
  }
  .flex > .order-1\@sm, .flex\@xs > .order-1\@sm, .flex\@sm > .order-1\@sm, .flex\@md > .order-1\@sm, .flex\@lg > .order-1\@sm, .flex\@xl > .order-1\@sm, .flex\@2xl > .order-1\@sm {
    order: 1;
  }
  .flex > .fill-2\@sm, .flex\@xs > .fill-2\@sm, .flex\@sm > .fill-2\@sm, .flex\@md > .fill-2\@sm, .flex\@lg > .fill-2\@sm, .flex\@xl > .fill-2\@sm, .flex\@2xl > .fill-2\@sm {
    flex: 0 0 calc((100% - 5 * var(--flex-gap, 0px)) / 6);
    max-width: calc((100% - 5 * var(--flex-gap, 0px)) / 6);
    min-width: 0;
  }
  .flex > .order-2\@sm, .flex\@xs > .order-2\@sm, .flex\@sm > .order-2\@sm, .flex\@md > .order-2\@sm, .flex\@lg > .order-2\@sm, .flex\@xl > .order-2\@sm, .flex\@2xl > .order-2\@sm {
    order: 2;
  }
  .flex > .fill-3\@sm, .flex\@xs > .fill-3\@sm, .flex\@sm > .fill-3\@sm, .flex\@md > .fill-3\@sm, .flex\@lg > .fill-3\@sm, .flex\@xl > .fill-3\@sm, .flex\@2xl > .fill-3\@sm {
    flex: 0 0 calc((100% - 3 * var(--flex-gap, 0px)) / 4);
    max-width: calc((100% - 3 * var(--flex-gap, 0px)) / 4);
    min-width: 0;
  }
  .flex > .order-3\@sm, .flex\@xs > .order-3\@sm, .flex\@sm > .order-3\@sm, .flex\@md > .order-3\@sm, .flex\@lg > .order-3\@sm, .flex\@xl > .order-3\@sm, .flex\@2xl > .order-3\@sm {
    order: 3;
  }
  .flex > .fill-4\@sm, .flex\@xs > .fill-4\@sm, .flex\@sm > .fill-4\@sm, .flex\@md > .fill-4\@sm, .flex\@lg > .fill-4\@sm, .flex\@xl > .fill-4\@sm, .flex\@2xl > .fill-4\@sm {
    flex: 0 0 calc((100% - 2 * var(--flex-gap, 0px)) / 3);
    max-width: calc((100% - 2 * var(--flex-gap, 0px)) / 3);
    min-width: 0;
  }
  .flex > .order-4\@sm, .flex\@xs > .order-4\@sm, .flex\@sm > .order-4\@sm, .flex\@md > .order-4\@sm, .flex\@lg > .order-4\@sm, .flex\@xl > .order-4\@sm, .flex\@2xl > .order-4\@sm {
    order: 4;
  }
  .flex > .fill-5\@sm, .flex\@xs > .fill-5\@sm, .flex\@sm > .fill-5\@sm, .flex\@md > .fill-5\@sm, .flex\@lg > .fill-5\@sm, .flex\@xl > .fill-5\@sm, .flex\@2xl > .fill-5\@sm {
    flex: 0 0 calc((100% - 1.4 * var(--flex-gap, 0px)) / 2.4);
    max-width: calc((100% - 1.4 * var(--flex-gap, 0px)) / 2.4);
    min-width: 0;
  }
  .flex > .order-5\@sm, .flex\@xs > .order-5\@sm, .flex\@sm > .order-5\@sm, .flex\@md > .order-5\@sm, .flex\@lg > .order-5\@sm, .flex\@xl > .order-5\@sm, .flex\@2xl > .order-5\@sm {
    order: 5;
  }
  .flex > .fill-6\@sm, .flex\@xs > .fill-6\@sm, .flex\@sm > .fill-6\@sm, .flex\@md > .fill-6\@sm, .flex\@lg > .fill-6\@sm, .flex\@xl > .fill-6\@sm, .flex\@2xl > .fill-6\@sm {
    flex: 0 0 calc((100% - 1 * var(--flex-gap, 0px)) / 2);
    max-width: calc((100% - 1 * var(--flex-gap, 0px)) / 2);
    min-width: 0;
  }
  .flex > .order-6\@sm, .flex\@xs > .order-6\@sm, .flex\@sm > .order-6\@sm, .flex\@md > .order-6\@sm, .flex\@lg > .order-6\@sm, .flex\@xl > .order-6\@sm, .flex\@2xl > .order-6\@sm {
    order: 6;
  }
  .flex > .fill-7\@sm, .flex\@xs > .fill-7\@sm, .flex\@sm > .fill-7\@sm, .flex\@md > .fill-7\@sm, .flex\@lg > .fill-7\@sm, .flex\@xl > .fill-7\@sm, .flex\@2xl > .fill-7\@sm {
    flex: 0 0 calc((100% - 0.7142857143 * var(--flex-gap, 0px)) / 1.7142857143);
    max-width: calc((100% - 0.7142857143 * var(--flex-gap, 0px)) / 1.7142857143);
    min-width: 0;
  }
  .flex > .order-7\@sm, .flex\@xs > .order-7\@sm, .flex\@sm > .order-7\@sm, .flex\@md > .order-7\@sm, .flex\@lg > .order-7\@sm, .flex\@xl > .order-7\@sm, .flex\@2xl > .order-7\@sm {
    order: 7;
  }
  .flex > .fill-8\@sm, .flex\@xs > .fill-8\@sm, .flex\@sm > .fill-8\@sm, .flex\@md > .fill-8\@sm, .flex\@lg > .fill-8\@sm, .flex\@xl > .fill-8\@sm, .flex\@2xl > .fill-8\@sm {
    flex: 0 0 calc((100% - 0.5 * var(--flex-gap, 0px)) / 1.5);
    max-width: calc((100% - 0.5 * var(--flex-gap, 0px)) / 1.5);
    min-width: 0;
  }
  .flex > .order-8