serato-css/serato.css

A Modern Mini Framework Full Of Handy Utilities, Colors And Animations Inspired To Be Most Predictable And Community Driven.

@charset "UTF-8";
/**
 * Reset Without Commentary Explanations To Keep It Lite
 * ================================================== */
/**
 * Disable Animation
 */
/**
 * Disable animation depends on Browser or Operation System configuration
 */
/**
 * Accessability. Black and White Mode
 */
/**
 * Accessability. Inverse Mode
 */
/**
 * Meter reset
 */
html {
  -webkit-text-size-adjust: 100%;
}
html:focus-within {
  scroll-behavior: smooth;
}

@viewport {
  width: device-width;
}
[role=button] {
  cursor: pointer;
}

body {
  text-size-adjust: 100%;
  position: relative;
  width: 100%;
  min-height: 100vh;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeSpeed;
}

*,
::after,
::before {
  box-sizing: border-box;
  background-repeat: no-repeat;
}

::before,
::after {
  text-decoration: inherit;
  vertical-align: inherit;
}

:where(:root) {
  cursor: default;
  line-height: 1.5;
  overflow-wrap: break-word;
  -moz-tab-size: 4;
  tab-size: 4;
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
}

:where(h1) {
  font-size: 2em;
  margin: 0.67em 0;
}

a:not([class]) {
  text-decoration-skip-ink: auto;
}

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 {
  font-size: 100%;
  font: inherit;
  margin: 0;
  padding: 0;
  border: 0;
  vertical-align: baseline;
}

:focus {
  outline: 0;
}

main,
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

:where(nav) :where(ol, ul) {
  list-style-type: none;
  padding: 0;
}

:where(nav li)::before {
  content: "​";
  float: left;
}

:where(dl, ol, ul) :where(dl, ol, ul) {
  margin: 0;
}

:where(b, strong) {
  font-weight: bolder;
}

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

input:required,
input {
  box-shadow: none;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 30px white inset;
}

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

input[type=search] {
  -webkit-appearance: none;
  -moz-appearance: none;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
}

:where([type="search" i]) {
  -webkit-appearance: textfield;
  /* 1 */
  outline-offset: -2px;
  /* 2 */
}

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

::-webkit-input-placeholder {
  color: inherit;
  opacity: 0.54;
}

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

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

:where(dialog) {
  background-color: white;
  border: solid;
  color: black;
  height: -moz-fit-content;
  height: fit-content;
  left: 0;
  margin: auto;
  padding: 1em;
  position: absolute;
  right: 0;
  width: -moz-fit-content;
  width: fit-content;
}

:where(dialog:not([open])) {
  display: none;
}

:where(details > summary:first-of-type) {
  display: list-item;
}

:where([aria-busy="true" i]) {
  cursor: progress;
}

:where([aria-controls]) {
  cursor: pointer;
}

:where([aria-disabled="true" i], [disabled]) {
  cursor: not-allowed;
}

:where([aria-hidden="false" i][hidden]) {
  display: initial;
}

:where([aria-hidden="false" i][hidden]:not(:focus)) {
  clip: rect(0, 0, 0, 0);
  position: absolute;
}

:where(iframe, img, input, video, select, textarea) {
  height: auto;
  max-width: 100%;
}

:where(button, input, select, textarea) {
  background-color: transparent;
  border: 1px solid WindowFrame;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  padding: 0.25em 0.375em;
}

:where(select) {
  appearance: none;
  background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='4'%3E%3Cpath d='M4 0h6L7 4'/%3E%3C/svg%3E") no-repeat right center/1em;
  border-radius: 0;
  padding-right: 1em;
}

:where(select[multiple]) {
  background-image: none;
}

:where([type="color" i], [type="range" i]) {
  border-width: 0;
  padding: 0;
}

textarea {
  margin: 0;
  overflow: auto;
  vertical-align: top;
  resize: vertical;
}

input:focus {
  outline: none;
}

audio,
canvas,
video {
  display: inline-block;
  max-width: 100%;
}

audio:not([controls]) {
  display: none;
  height: 0;
}

[hidden] {
  display: none;
}

a:active,
a:hover {
  outline: none;
}

img {
  max-width: 100%;
  display: inline-block;
  vertical-align: middle;
  height: auto;
}

:where(audio, canvas, iframe, img, svg, video) {
  vertical-align: middle;
}

:where(iframe) {
  border-style: none;
}

:where(svg:not([fill])) {
  fill: currentColor;
}

picture {
  display: inline-block;
}

button,
input {
  line-height: normal;
}

button,
select {
  text-transform: none;
}

button,
html input[type=button],
input[type=reset],
input[type=submit] {
  -webkit-appearance: button;
  cursor: pointer;
  border: 0;
  background: transparent;
}

a,
area,
button,
[role=button],
input,
label,
select,
summary,
textarea {
  touch-action: manipulation;
}

button[disabled],
html input[disabled] {
  cursor: default;
}

[disabled] {
  pointer-events: none;
}

input[type=checkbox],
input[type=radio] {
  padding: 0;
  box-sizing: border-box;
}

input[type=search] {
  -webkit-appearance: textfield;
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
}

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

button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

button {
  border: 0;
  background: transparent;
}

textarea {
  overflow: auto;
  vertical-align: top;
  resize: vertical;
}

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

hr {
  box-sizing: content-box;
  overflow: visible;
  color: inherit;
  background: #000;
  border: 0;
  height: 1px;
  line-height: 0;
  margin: 0;
  padding: 0;
  page-break-after: always;
  width: 100%;
}

:where(pre) {
  font-family: monospace, monospace;
  /* 1 */
  font-size: 1em;
  /* 2 */
  overflow: auto;
  /* 3 */
}

a {
  background-color: transparent;
}

:where(abbr[title]) {
  cursor: help;
  border-bottom: none;
  text-decoration: underline;
  text-decoration: underline dotted;
}

:where(code, pre, kbd, samp) {
  font-family: monospace, monospace;
  /* 1 */
  font-size: 1em;
  /* 2 */
}

:where(small) {
  font-size: 80%;
}

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -5px;
}

sup {
  top: -5px;
}

button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
  line-height: 1;
  margin: 0;
  padding: 0;
}

button,
input {
  overflow: visible;
}

button,
select {
  text-transform: none;
}

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

button::-moz-focus-inner,
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner {
  border-style: none;
  padding: 0;
  outline: 0;
}

legend {
  color: inherit;
  white-space: normal;
  display: block;
  border: 0;
  max-width: 100%;
  width: 100%;
}

:where(fieldset) {
  min-width: 0;
  border: 1px solid #a0a0a0;
}

body:not(:-moz-handler-blocked) fieldset {
  display: block;
}

progress {
  vertical-align: baseline;
}

[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
  height: auto;
}

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

[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

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

summary {
  display: list-item;
}

template {
  display: none;
}

/**
 * SYSTEM UI FONT
 */
/**
 * Add the correct system-ui font-family in Firefox.
 */
@font-face {
  font-family: system-ui;
  src: local(".AppleSystemUIFont"), local("Segoe UI"), local("Ubuntu"), local("Roboto-Regular"), local("HelveticaNeue");
}
@font-face {
  font-family: system-ui;
  font-style: italic;
  src: local(".AppleSystemUIFont"), local("Segoe UI Italic"), local("Ubuntu-Italic"), local("Roboto-Italic"), local("HelveticaNeue-Italic");
}
@font-face {
  font-family: system-ui;
  font-weight: bold;
  src: local(".AppleSystemUIFont"), local("Segoe UI Bold"), local("Ubuntu-Bold"), local("Roboto-Bold"), local("HelveticaNeue-Bold");
}
@font-face {
  font-family: system-ui;
  font-style: italic;
  font-weight: bold;
  src: local(".AppleSystemUIFont"), local("Segoe UI Bold Italic"), local("Ubuntu-BoldItalic"), local("Roboto-BoldItalic"), local("HelveticaNeue-BoldItalic");
}
/**
 * UI MONOSPACE FONT
 */
/**
 * Add the correct system-ui font-family in Chrome, Edge, and Firefox.
 */
@font-face {
  font-family: ui-monospace;
  src: local(".AppleSystemUIFontMonospaced-Regular"), local("Segoe UI Mono"), local("UbuntuMono"), local("Roboto-Mono"), local("Menlo");
}
@font-face {
  font-family: ui-monospace;
  font-style: italic;
  src: local(".AppleSystemUIFontMonospaced-RegularItalic"), local("Segoe UI Mono Italic"), local("UbuntuMono-Italic"), local("Roboto-Mono-Italic"), local("Menlo-Italic");
}
@font-face {
  font-family: ui-monospace;
  font-weight: bold;
  src: local(".AppleSystemUIFontMonospaced-Bold"), local("Segoe UI Mono Bold"), local("UbuntuMono-Bold"), local("Roboto-Mono-Bold"), local("Menlo-Bold");
}
@font-face {
  font-family: ui-monospace;
  font-style: italic;
  font-weight: bold;
  src: local(".AppleSystemUIFontMonospaced-BoldItalic"), local("Segoe UI Mono Bold Italic"), local("UbuntuMono-BoldItalic"), local("Roboto-Mono-BoldItalic"), local("Menlo-BoldItalic");
}
/* Basic color-variables */
/*
* Basic color shades based on basic colors and their respective maps
 */
/* get an inclusive basic colors shades map */
/*  serato adapted color system inspired by apple watch os color system  */
/* color variables && serato color system */
/*! sanitize.css (font family stuff only) v13.0.0 | CC0-1.0 License | https://github.com/csstools/sanitize.css */
/**
 * Serato Typography
 */
/**
 * Use the default user interface font in all browsers (opinionated).
 */
html {
  font-family: system-ui, -apple-system, "Segoe UI", "Roboto", "Ubuntu", "Cantarell", "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

/**
 * Use the default monospace user interface font in all browsers (opinionated).
 */
code,
kbd,
samp,
pre {
  font-family: ui-monospace, "Menlo", "Consolas", "Roboto Mono", "Ubuntu Monospace", "Noto Mono", "Oxygen Mono", "Liberation Mono", monospace, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

html,
body {
  font-weight: 400;
}

html {
  font-size: 100%;
}

body {
  color: #212529;
  font-size: 1rem;
  line-height: 1.3;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeSpeed;
}

h1,
h2,
h3 {
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 700;
}

html,
button,
input,
select,
textarea {
  color: #212529;
}

a {
  color: #212529;
  text-decoration: none;
}
a:visited {
  color: #212529;
  text-decoration: none;
  outline: 0;
}
a:focus, a:active, a:hover {
  color: #212529;
  text-decoration: underline;
  outline: 0;
}

i,
em {
  font-style: italic;
}

b,
strong {
  font-weight: 700;
}

input:focus {
  outline: none;
}

[disabled] {
  pointer-events: none;
  opacity: 0.5;
}

.br {
  display: block;
}

/*
* Beta Hacks & Experiments ( these are proposed for the next version and still in beta and can change over next realease!)
*/
/**
 * Hack from Kevin Powell to automatically add top spacing to all children of any parent, cause usually nobody ever wants them attached
 */
* + * {
  margin-top: 1.5rem;
}

* > * {
  margin-top: 0;
}

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

/**
 * Natural flow and rythm in articles by default
 */
article > * + * {
  margin-top: 1.5rem;
}

/**
* Hide the horizontal overflow on body by default
 body {
   overflow-x: hidden;
 }
*/
/**
 * Customized scrollbar // get a better one!
 */
html::-webkit-scrollbar {
  width: 12px;
  height: 6px;
  background-color: #eff1f5;
}

html::-webkit-scrollbar-track {
  border-radius: 0.25rem;
  background-color: transparent;
}

html::-webkit-scrollbar-thumb {
  border-radius: 0.25rem;
  height: 6px;
  background-color: #9ca3af;
  border: 2px solid #eff1f5;
}
html::-webkit-scrollbar-thumb:hover {
  background-color: #bbc5d4;
}

/**
 * customized on page text selection colors
 */
::selection {
  background-color: #adb5bd;
}

/* Serato Base */
/*! serato-css v1.0.0 | MIT License | https://github.com/Hussseinkizz/serato-css */
/*! scss-reset v1.2.2 | MIT License | https://github.com/andreymatin/scss-reset */
/*! sanitize.css v13.0.0 | CC0-1.0 License | https://github.com/csstools/sanitize.css */
/*! css-reset-and-normalize-sass (flavor only) v0.1.2 | MIT License | https://github.com/webdesignberlin/css-reset-and-normalize-sass */
/* Serato Functions */
.center-with-margin {
  margin: 0px auto;
}

.center-with-grid {
  display: grid;
  place-items: center;
}

.center-with-flex {
  display: flex;
  flex: 1 1 auto;
  justify-content: center;
  align-items: center;
}

.is-overlay {
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}

/* A mega hover state color & background color generator mixin */
/* Media Queries */
/* Serato Utilities */
.container {
  display: block;
  width: 100%;
  max-width: 1170px;
  padding: 0.5rem 1rem;
  margin: 0px auto;
}
.container-fluid {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 1rem 0px;
}

.grid-columns {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0.5rem;
  width: 100%;
}

.grid-column-1 {
  flex: 0 0 8.3333333333%;
}

.grid-column-2 {
  flex: 0 0 16.6666666667%;
}

.grid-column-3 {
  flex: 0 0 25%;
}

.grid-column-4 {
  flex: 0 0 33.3333333333%;
}

.grid-column-5 {
  flex: 0 0 41.6666666667%;
}

.grid-column-6 {
  flex: 0 0 50%;
}

.grid-column-7 {
  flex: 0 0 58.3333333333%;
}

.grid-column-8 {
  flex: 0 0 66.6666666667%;
}

.grid-column-9 {
  flex: 0 0 75%;
}

.grid-column-10 {
  flex: 0 0 83.3333333333%;
}

.grid-column-11 {
  flex: 0 0 91.6666666667%;
}

.grid-column-12 {
  flex: 0 0 100%;
}

@media only screen and (min-width: 576px) {
  .grid-column-1-on-small {
    width: 8.3333333333%;
    padding: 0.5rem 1rem;
  }

  .grid-column-2-on-small {
    width: 16.6666666667%;
    padding: 0.5rem 1rem;
  }

  .grid-column-3-on-small {
    width: 25%;
    padding: 0.5rem 1rem;
  }

  .grid-column-4-on-small {
    width: 33.3333333333%;
    padding: 0.5rem 1rem;
  }

  .grid-column-5-on-small {
    width: 41.6666666667%;
    padding: 0.5rem 1rem;
  }

  .grid-column-6-on-small {
    width: 50%;
    padding: 0.5rem 1rem;
  }

  .grid-column-7-on-small {
    width: 58.3333333333%;
    padding: 0.5rem 1rem;
  }

  .grid-column-8-on-small {
    width: 66.6666666667%;
    padding: 0.5rem 1rem;
  }

  .grid-column-9-on-small {
    width: 75%;
    padding: 0.5rem 1rem;
  }

  .grid-column-10-on-small {
    width: 83.3333333333%;
    padding: 0.5rem 1rem;
  }

  .grid-column-11-on-small {
    width: 91.6666666667%;
    padding: 0.5rem 1rem;
  }

  .grid-column-12-on-small {
    width: 100%;
    padding: 0.5rem 1rem;
  }
}
@media only screen and (min-width: 768px) {
  .grid-column-1-on-medium {
    width: 8.3333333333%;
    padding: 0.5rem 1rem;
  }

  .grid-column-2-on-medium {
    width: 16.6666666667%;
    padding: 0.5rem 1rem;
  }

  .grid-column-3-on-medium {
    width: 25%;
    padding: 0.5rem 1rem;
  }

  .grid-column-4-on-medium {
    width: 33.3333333333%;
    padding: 0.5rem 1rem;
  }

  .grid-column-5-on-medium {
    width: 41.6666666667%;
    padding: 0.5rem 1rem;
  }

  .grid-column-6-on-medium {
    width: 50%;
    padding: 0.5rem 1rem;
  }

  .grid-column-7-on-medium {
    width: 58.3333333333%;
    padding: 0.5rem 1rem;
  }

  .grid-column-8-on-medium {
    width: 66.6666666667%;
    padding: 0.5rem 1rem;
  }

  .grid-column-9-on-medium {
    width: 75%;
    padding: 0.5rem 1rem;
  }

  .grid-column-10-on-medium {
    width: 83.3333333333%;
    padding: 0.5rem 1rem;
  }

  .grid-column-11-on-medium {
    width: 91.6666666667%;
    padding: 0.5rem 1rem;
  }

  .grid-column-12-on-medium {
    width: 100%;
    padding: 0.5rem 1rem;
  }
}
@media only screen and (min-width: 992px) {
  .grid-column-1-on-large {
    width: 8.3333333333%;
    padding: 0.5rem 1rem;
  }

  .grid-column-2-on-large {
    width: 16.6666666667%;
    padding: 0.5rem 1rem;
  }

  .grid-column-3-on-large {
    width: 25%;
    padding: 0.5rem 1rem;
  }

  .grid-column-4-on-large {
    width: 33.3333333333%;
    padding: 0.5rem 1rem;
  }

  .grid-column-5-on-large {
    width: 41.6666666667%;
    padding: 0.5rem 1rem;
  }

  .grid-column-6-on-large {
    width: 50%;
    padding: 0.5rem 1rem;
  }

  .grid-column-7-on-large {
    width: 58.3333333333%;
    padding: 0.5rem 1rem;
  }

  .grid-column-8-on-large {
    width: 66.6666666667%;
    padding: 0.5rem 1rem;
  }

  .grid-column-9-on-large {
    width: 75%;
    padding: 0.5rem 1rem;
  }

  .grid-column-10-on-large {
    width: 83.3333333333%;
    padding: 0.5rem 1rem;
  }

  .grid-column-11-on-large {
    width: 91.6666666667%;
    padding: 0.5rem 1rem;
  }

  .grid-column-12-on-large {
    width: 100%;
    padding: 0.5rem 1rem;
  }
}
@media only screen and (min-width: 1200px) {
  .grid-column-1-on-xlarge {
    width: 8.3333333333%;
    padding: 0.5rem 1rem;
  }

  .grid-column-2-on-xlarge {
    width: 16.6666666667%;
    padding: 0.5rem 1rem;
  }

  .grid-column-3-on-xlarge {
    width: 25%;
    padding: 0.5rem 1rem;
  }

  .grid-column-4-on-xlarge {
    width: 33.3333333333%;
    padding: 0.5rem 1rem;
  }

  .grid-column-5-on-xlarge {
    width: 41.6666666667%;
    padding: 0.5rem 1rem;
  }

  .grid-column-6-on-xlarge {
    width: 50%;
    padding: 0.5rem 1rem;
  }

  .grid-column-7-on-xlarge {
    width: 58.3333333333%;
    padding: 0.5rem 1rem;
  }

  .grid-column-8-on-xlarge {
    width: 66.6666666667%;
    padding: 0.5rem 1rem;
  }

  .grid-column-9-on-xlarge {
    width: 75%;
    padding: 0.5rem 1rem;
  }

  .grid-column-10-on-xlarge {
    width: 83.3333333333%;
    padding: 0.5rem 1rem;
  }

  .grid-column-11-on-xlarge {
    width: 91.6666666667%;
    padding: 0.5rem 1rem;
  }

  .grid-column-12-on-xlarge {
    width: 100%;
    padding: 0.5rem 1rem;
  }
}
@media only screen and (max-width: 322px) {
  .grid-column-on-1 {
    width: 8.3333333333%;
    padding: 0px 1rem;
  }

  .grid-column-on-2 {
    width: 16.6666666667%;
    padding: 0px 1rem;
  }

  .grid-column-on-3 {
    width: 25%;
    padding: 0px 1rem;
  }

  .grid-column-on-4 {
    width: 33.3333333333%;
    padding: 0px 1rem;
  }

  .grid-column-on-5 {
    width: 41.6666666667%;
    padding: 0px 1rem;
  }

  .grid-column-on-6 {
    width: 50%;
    padding: 0px 1rem;
  }

  .grid-column-on-7 {
    width: 58.3333333333%;
    padding: 0px 1rem;
  }

  .grid-column-on-8 {
    width: 66.6666666667%;
    padding: 0px 1rem;
  }

  .grid-column-on-9 {
    width: 75%;
    padding: 0px 1rem;
  }

  .grid-column-on-10 {
    width: 83.3333333333%;
    padding: 0px 1rem;
  }

  .grid-column-on-11 {
    width: 91.6666666667%;
    padding: 0px 1rem;
  }

  .grid-column-on-12 {
    width: 100%;
    padding: 0px 1rem;
  }
}
.flex, .flex-column-reverse, .flex-column, .flex-row-reverse, .flex-row, .flex-all-center {
  display: flex;
  gap: 0.5rem;
  flex: 1 1 100%;
}

.flex-all-center {
  justify-content: center;
  align-items: center;
}

.flex-row {
  flex-direction: row !important;
}

.flex-row-reverse {
  flex-direction: row-reverse !important;
}

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

.flex-column-reverse {
  flex-direction: column-reverse !important;
}

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

.flex-wrap {
  flex-wrap: wrap !important;
}

.flex-wrap-reverse {
  flex-wrap: wrap-reverse !important;
}

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

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

.justify-content-center {
  justify-content: center !important;
}

.justify-content-between {
  justify-content: space-between !important;
}

.justify-content-around {
  justify-content: space-around !important;
}

.justify-content-evenly {
  justify-content: space-evenly !important;
}

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

.justify-content-end {
  justify-content: end !important;
}

.justify-content-left {
  justify-content: left !important;
}

.justify-content-right {
  justify-content: right !important;
}

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

.align-content-flex-end {
  align-content: flex-end !important;
}

.align-content-center {
  align-content: center !important;
}

.align-content-between {
  align-content: space-between !important;
}

.align-content-around {
  align-content: space-around !important;
}

.align-content-evenly {
  align-content: space-evenly !important;
}

.align-content-stretch {
  align-content: stretch !important;
}

.align-content-start {
  align-content: start !important;
}

.align-content-end {
  align-content: end !important;
}

.align-content-baseline {
  align-content: baseline !important;
}

.align-items-stretch {
  align-items: stretch !important;
}

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

.align-items-flex-end {
  align-items: flex-end !important;
}

.align-items-center {
  align-items: center !important;
}

.align-items-baseline {
  align-items: baseline !important;
}

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

.align-items-end {
  align-items: end !important;
}

.align-items-self-start {
  align-items: self-start !important;
}

.align-items-self-end {
  align-items: self-end !important;
}

.align-self-auto {
  align-self: auto !important;
}

.align-self-flex-start {
  align-self: flex-start !important;
}

.align-self-flex-end {
  align-self: flex-end !important;
}

.align-self-center {
  align-self: center !important;
}

.align-self-baseline {
  align-self: baseline !important;
}

.align-self-stretch {
  align-self: stretch !important;
}

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

.grow-1 {
  flex-grow: 1 !important;
}

.grow-2 {
  flex-grow: 2 !important;
}

.grow-3 {
  flex-grow: 3 !important;
}

.grow-4 {
  flex-grow: 4 !important;
}

.grow-5 {
  flex-grow: 5 !important;
}

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

.shrink-1 {
  flex-shrink: 1 !important;
}

.shrink-2 {
  flex-shrink: 2 !important;
}

.shrink-3 {
  flex-shrink: 3 !important;
}

.shrink-4 {
  flex-shrink: 4 !important;
}

.shrink-5 {
  flex-shrink: 5 !important;
}

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

.flex-gap-x {
  gap: 0.25rem !important;
}

.flex-gap-1 {
  gap: 0.5rem !important;
}

.flex-gap-2 {
  gap: 1.5rem !important;
}

.flex-gap-3 {
  gap: 2rem !important;
}

.flex-gap-4 {
  gap: 2.5rem !important;
}

.flex-gap-5 {
  gap: 3rem !important;
}

.flex-gap-6 {
  gap: 4rem !important;
}

.margin-none {
  margin: 0 !important;
}

.padding-none {
  padding: 0 !important;
}

.margin-0 {
  margin: 0 !important;
}

.margin-top-0 {
  margin-top: 0 !important;
}

.margin-right-0 {
  margin-right: 0 !important;
}

.margin-bottom-0 {
  margin-bottom: 0 !important;
}

.margin-left-0 {
  margin-left: 0 !important;
}

.margin-x-0 {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.margin-y-0 {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.margin-1 {
  margin: 0.25rem !important;
}

.margin-top-1 {
  margin-top: 0.25rem !important;
}

.margin-right-1 {
  margin-right: 0.25rem !important;
}

.margin-bottom-1 {
  margin-bottom: 0.25rem !important;
}

.margin-left-1 {
  margin-left: 0.25rem !important;
}

.margin-x-1 {
  margin-left: 0.25rem !important;
  margin-right: 0.25rem !important;
}

.margin-y-1 {
  margin-top: 0.25rem !important;
  margin-bottom: 0.25rem !important;
}

.margin-2 {
  margin: 0.5rem !important;
}

.margin-top-2 {
  margin-top: 0.5rem !important;
}

.margin-right-2 {
  margin-right: 0.5rem !important;
}

.margin-bottom-2 {
  margin-bottom: 0.5rem !important;
}

.margin-left-2 {
  margin-left: 0.5rem !important;
}

.margin-x-2 {
  margin-left: 0.5rem !important;
  margin-right: 0.5rem !important;
}

.margin-y-2 {
  margin-top: 0.5rem !important;
  margin-bottom: 0.5rem !important;
}

.margin-3 {
  margin: 0.75rem !important;
}

.margin-top-3 {
  margin-top: 0.75rem !important;
}

.margin-right-3 {
  margin-right: 0.75rem !important;
}

.margin-bottom-3 {
  margin-bottom: 0.75rem !important;
}

.margin-left-3 {
  margin-left: 0.75rem !important;
}

.margin-x-3 {
  margin-left: 0.75rem !important;
  margin-right: 0.75rem !important;
}

.margin-y-3 {
  margin-top: 0.75rem !important;
  margin-bottom: 0.75rem !important;
}

.margin-4 {
  margin: 1rem !important;
}

.margin-top-4 {
  margin-top: 1rem !important;
}

.margin-right-4 {
  margin-right: 1rem !important;
}

.margin-bottom-4 {
  margin-bottom: 1rem !important;
}

.margin-left-4 {
  margin-left: 1rem !important;
}

.margin-x-4 {
  margin-left: 1rem !important;
  margin-right: 1rem !important;
}

.margin-y-4 {
  margin-top: 1rem !important;
  margin-bottom: 1rem !important;
}

.margin-5 {
  margin: 1.5rem !important;
}

.margin-top-5 {
  margin-top: 1.5rem !important;
}

.margin-right-5 {
  margin-right: 1.5rem !important;
}

.margin-bottom-5 {
  margin-bottom: 1.5rem !important;
}

.margin-left-5 {
  margin-left: 1.5rem !important;
}

.margin-x-5 {
  margin-left: 1.5rem !important;
  margin-right: 1.5rem !important;
}

.margin-y-5 {
  margin-top: 1.5rem !important;
  margin-bottom: 1.5rem !important;
}

.margin-6 {
  margin: 3rem !important;
}

.margin-top-6 {
  margin-top: 3rem !important;
}

.margin-right-6 {
  margin-right: 3rem !important;
}

.margin-bottom-6 {
  margin-bottom: 3rem !important;
}

.margin-left-6 {
  margin-left: 3rem !important;
}

.margin-x-6 {
  margin-left: 3rem !important;
  margin-right: 3rem !important;
}

.margin-y-6 {
  margin-top: 3rem !important;
  margin-bottom: 3rem !important;
}

.margin-7 {
  margin: 4rem !important;
}

.margin-top-7 {
  margin-top: 4rem !important;
}

.margin-right-7 {
  margin-right: 4rem !important;
}

.margin-bottom-7 {
  margin-bottom: 4rem !important;
}

.margin-left-7 {
  margin-left: 4rem !important;
}

.margin-x-7 {
  margin-left: 4rem !important;
  margin-right: 4rem !important;
}

.margin-y-7 {
  margin-top: 4rem !important;
  margin-bottom: 4rem !important;
}

.margin-8 {
  margin: 5rem !important;
}

.margin-top-8 {
  margin-top: 5rem !important;
}

.margin-right-8 {
  margin-right: 5rem !important;
}

.margin-bottom-8 {
  margin-bottom: 5rem !important;
}

.margin-left-8 {
  margin-left: 5rem !important;
}

.margin-x-8 {
  margin-left: 5rem !important;
  margin-right: 5rem !important;
}

.margin-y-8 {
  margin-top: 5rem !important;
  margin-bottom: 5rem !important;
}

.margin-9 {
  margin: 6rem !important;
}

.margin-top-9 {
  margin-top: 6rem !important;
}

.margin-right-9 {
  margin-right: 6rem !important;
}

.margin-bottom-9 {
  margin-bottom: 6rem !important;
}

.margin-left-9 {
  margin-left: 6rem !important;
}

.margin-x-9 {
  margin-left: 6rem !important;
  margin-right: 6rem !important;
}

.margin-y-9 {
  margin-top: 6rem !important;
  margin-bottom: 6rem !important;
}

.margin-auto {
  margin: auto !important;
}

.margin-top-auto {
  margin-top: auto !important;
}

.margin-right-auto {
  margin-right: auto !important;
}

.margin-bottom-auto {
  margin-bottom: auto !important;
}

.margin-left-auto {
  margin-left: auto !important;
}

.margin-x-auto {
  margin-left: auto !important;
  margin-right: auto !important;
}

.margin-y-auto {
  margin-top: auto !important;
  margin-bottom: auto !important;
}

.padding-0 {
  padding: 0 !important;
}

.padding-top-0 {
  padding-top: 0 !important;
}

.padding-right-0 {
  padding-right: 0 !important;
}

.padding-bottom-0 {
  padding-bottom: 0 !important;
}

.padding-left-0 {
  padding-left: 0 !important;
}

.padding-x-0 {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.padding-y-0 {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.padding-1 {
  padding: 0.25rem !important;
}

.padding-top-1 {
  padding-top: 0.25rem !important;
}

.padding-right-1 {
  padding-right: 0.25rem !important;
}

.padding-bottom-1 {
  padding-bottom: 0.25rem !important;
}

.padding-left-1 {
  padding-left: 0.25rem !important;
}

.padding-x-1 {
  padding-left: 0.25rem !important;
  padding-right: 0.25rem !important;
}

.padding-y-1 {
  padding-top: 0.25rem !important;
  padding-bottom: 0.25rem !important;
}

.padding-2 {
  padding: 0.5rem !important;
}

.padding-top-2 {
  padding-top: 0.5rem !important;
}

.padding-right-2 {
  padding-right: 0.5rem !important;
}

.padding-bottom-2 {
  padding-bottom: 0.5rem !important;
}

.padding-left-2 {
  padding-left: 0.5rem !important;
}

.padding-x-2 {
  padding-left: 0.5rem !important;
  padding-right: 0.5rem !important;
}

.padding-y-2 {
  padding-top: 0.5rem !important;
  padding-bottom: 0.5rem !important;
}

.padding-3 {
  padding: 0.75rem !important;
}

.padding-top-3 {
  padding-top: 0.75rem !important;
}

.padding-right-3 {
  padding-right: 0.75rem !important;
}

.padding-bottom-3 {
  padding-bottom: 0.75rem !important;
}

.padding-left-3 {
  padding-left: 0.75rem !important;
}

.padding-x-3 {
  padding-left: 0.75rem !important;
  padding-right: 0.75rem !important;
}

.padding-y-3 {
  padding-top: 0.75rem !important;
  padding-bottom: 0.75rem !important;
}

.padding-4 {
  padding: 1rem !important;
}

.padding-top-4 {
  padding-top: 1rem !important;
}

.padding-right-4 {
  padding-right: 1rem !important;
}

.padding-bottom-4 {
  padding-bottom: 1rem !important;
}

.padding-left-4 {
  padding-left: 1rem !important;
}

.padding-x-4 {
  padding-left: 1rem !important;
  padding-right: 1rem !important;
}

.padding-y-4 {
  padding-top: 1rem !important;
  padding-bottom: 1rem !important;
}

.padding-5 {
  padding: 1.5rem !important;
}

.padding-top-5 {
  padding-top: 1.5rem !important;
}

.padding-right-5 {
  padding-right: 1.5rem !important;
}

.padding-bottom-5 {
  padding-bottom: 1.5rem !important;
}

.padding-left-5 {
  padding-left: 1.5rem !important;
}

.padding-x-5 {
  padding-left: 1.5rem !important;
  padding-right: 1.5rem !important;
}

.padding-y-5 {
  padding-top: 1.5rem !important;
  padding-bottom: 1.5rem !important;
}

.padding-6 {
  padding: 3rem !important;
}

.padding-top-6 {
  padding-top: 3rem !important;
}

.padding-right-6 {
  padding-right: 3rem !important;
}

.padding-bottom-6 {
  padding-bottom: 3rem !important;
}

.padding-left-6 {
  padding-left: 3rem !important;
}

.padding-x-6 {
  padding-left: 3rem !important;
  padding-right: 3rem !important;
}

.padding-y-6 {
  padding-top: 3rem !important;
  padding-bottom: 3rem !important;
}

.padding-7 {
  padding: 4rem !important;
}

.padding-top-7 {
  padding-top: 4rem !important;
}

.padding-right-7 {
  padding-right: 4rem !important;
}

.padding-bottom-7 {
  padding-bottom: 4rem !important;
}

.padding-left-7 {
  padding-left: 4rem !important;
}

.padding-x-7 {
  padding-left: 4rem !important;
  padding-right: 4rem !important;
}

.padding-y-7 {
  padding-top: 4rem !important;
  padding-bottom: 4rem !important;
}

.padding-8 {
  padding: 5rem !important;
}

.padding-top-8 {
  padding-top: 5rem !important;
}

.padding-right-8 {
  padding-right: 5rem !important;
}

.padding-bottom-8 {
  padding-bottom: 5rem !important;
}

.padding-left-8 {
  padding-left: 5rem !important;
}

.padding-x-8 {
  padding-left: 5rem !important;
  padding-right: 5rem !important;
}

.padding-y-8 {
  padding-top: 5rem !important;
  padding-bottom: 5rem !important;
}

.padding-9 {
  padding: 6rem !important;
}

.padding-top-9 {
  padding-top: 6rem !important;
}

.padding-right-9 {
  padding-right: 6rem !important;
}

.padding-bottom-9 {
  padding-bottom: 6rem !important;
}

.padding-left-9 {
  padding-left: 6rem !important;
}

.padding-x-9 {
  padding-left: 6rem !important;
  padding-right: 6rem !important;
}

.padding-y-9 {
  padding-top: 6rem !important;
  padding-bottom: 6rem !important;
}

.padding-auto {
  padding: auto !important;
}

.padding-top-auto {
  padding-top: auto !important;
}

.padding-right-auto {
  padding-right: auto !important;
}

.padding-bottom-auto {
  padding-bottom: auto !important;
}

.padding-left-auto {
  padding-left: auto !important;
}

.padding-x-auto {
  padding-left: auto !important;
  padding-right: auto !important;
}

.padding-y-auto {
  padding-top: auto !important;
  padding-bottom: auto !important;
}

.responsive-margin-left-small {
  margin-left: 1.5vw !important;
}

.responsive-margin-right-small {
  margin-right: 1.5vw !important;
}

.responsive-margin-x-small {
  margin-left: 1.5vw !important;
  margin-right: 1.5vw !important;
}

.responsive-margin-left-normal {
  margin-left: 2.5vw !important;
}

.responsive-margin-right-normal {
  margin-right: 2.5vw !important;
}

.responsive-margin-x-normal {
  margin-left: 2.5vw !important;
  margin-right: 2.5vw !important;
}

.responsive-margin-left-medium {
  margin-left: 6.5vw !important;
}

.responsive-margin-right-medium {
  margin-right: 6.5vw !important;
}

.responsive-margin-x-medium {
  margin-left: 6.5vw !important;
  margin-right: 6.5vw !important;
}

.responsive-margin-left-large {
  margin-left: 10vw !important;
}

.responsive-margin-right-large {
  margin-right: 10vw !important;
}

.responsive-margin-x-large {
  margin-left: 10vw !important;
  margin-right: 10vw !important;
}

.responsive-padding-left-small {
  padding-left: 1.5vw !important;
}

.responsive-padding-right-small {
  padding-right: 1.5vw !important;
}

.responsive-padding-x-small {
  padding-left: 1.5vw !important;
  padding-right: 1.5vw !important;
}

.responsive-padding-left-normal {
  padding-left: 2.5vw !important;
}

.responsive-padding-right-normal {
  padding-right: 2.5vw !important;
}

.responsive-padding-x-normal {
  padding-left: 2.5vw !important;
  padding-right: 2.5vw !important;
}

.responsive-padding-left-medium {
  padding-left: 6.5vw !important;
}

.responsive-padding-right-medium {
  padding-right: 6.5vw !important;
}

.responsive-padding-x-medium {
  padding-left: 6.5vw !important;
  padding-right: 6.5vw !important;
}

.responsive-padding-left-large {
  padding-left: 10vw !important;
}

.responsive-padding-right-large {
  padding-right: 10vw !important;
}

.responsive-padding-x-large {
  padding-left: 10vw !important;
  padding-right: 10vw !important;
}

.position-static {
  position: static;
}

.position-relative {
  position: relative;
}

.position-sticky {
  position: sticky;
}

.position-absolute {
  position: absolute;
}

.position-fixed {
  position: fixed;
}

.fixed-to-top {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1030;
}

.fixed-to-bottom {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1030;
}

.display-block {
  display: block !important;
}

.display-flex {
  display: flex !important;
}

.display-inline {
  display: inline !important;
}

.display-inline-block {
  display: inline-block !important;
}

.display-inline-flex {
  display: inline-flex !important;
}

.font-thin {
  font-weight: 100 !important;
}

.font-lighter {
  font-weight: 200 !important;
}

.font-light {
  font-weight: 300 !important;
}

.font-normal {
  font-weight: 400 !important;
}

.font-medium {
  font-weight: 500 !important;
}

.font-semibold {
  font-weight: 600 !important;
}

.font-bold {
  font-weight: 700 !important;
}

.font-bolder {
  font-weight: 800 !important;
}

.font-extra-bold {
  font-weight: 900 !important;
}

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

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

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

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

.text-capitalize {
  text-transform: capitalize !important;
}

.text-lowercase {
  text-transform: lowercase !important;
}

.text-uppercase {
  text-transform: uppercase !important;
}

.font-italic {
  font-style: italic !important;
}

.text-underlined {
  text-decoration: underline !important;
}

.font-heading {
  font-size: 3.5rem;
  font-weight: bold;
  font-weight: 700;
  text-transform: uppercase;
  text-align: center;
}

.font-subheading {
  font-size: 2.5rem;
  font-weight: medium;
  font-weight: 600;
  text-transform: capitalize;
}

.font-small {
  font-size: 0.75rem;
  font-weight: small;
  font-weight: 300;
  text-transform: lowercase;
}

.text-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.reset-text {
  font-family: inherit;
  font-style: normal;
  font-weight: normal;
  font-weight: 400;
  line-height: inherit;
  text-align: left;
  text-align: start;
  text-decoration: none;
  text-shadow: none;
  text-transform: none;
  letter-spacing: normal;
  word-break: normal;
  word-spacing: normal;
  white-space: normal;
  line-break: auto;
}

.font-size-normal {
  font-size: 1rem !important;
}

.font-size-small {
  font-size: 0.875rem !important;
}

.font-size-large {
  font-size: 1.25rem !important;
}

.font-size-1 {
  font-size: 1rem !important;
}

.font-size-2 {
  font-size: 2.25rem !important;
}

.font-size-3 {
  font-size: 3.5rem !important;
}

.font-size-4 {
  font-size: 4.75rem !important;
}

.font-size-5 {
  font-size: 5rem !important;
}

.font-size-6 {
  font-size: 5.5rem !important;
}

.text-decoration-none {
  text-decoration: none !important;
}

.text-decoration-line-through {
  text-decoration: line-through !important;
}

.text-decoration-double {
  text-decoration: double !important;
}

.text-decoration-dotted {
  text-decoration: dotted !important;
}

.text-decoration-dashed {
  text-decoration: dashed !important;
}

.text-decoration-overline {
  text-decoration: overline !important;
}

/* Built-in animations here, for internal use only thus mixins and not extendable classes, for other animation purposes see animations from plugins!!! */
.underline-from-center, .link {
  display: inline-block;
  vertical-align: middle;
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  position: relative;
  overflow: hidden;
}
.underline-from-center:before, .link:before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 51%;
  right: 51%;
  bottom: 0;
  background: currentColor;
  height: 2px;
  transition-property: left, right;
  transition-duration: 0.3s;
  transition-timing-function: ease-out;
}
.underline-from-center:focus:before, .link:focus:before, .underline-from-center:active:before, .link:active:before {
  left: 0;
  right: 0;
}

.clearfix::after {
  clear: both;
  content: "";
  display: table;
}

.float-left {
  float: left !important;
}

.float-right {
  float: right !important;
}

.shadow-none {
  box-shadow: none !important;
}

.is-clickable {
  cursor: pointer !important;
  pointer-events: all !important;
}

.overflow {
  overflow: hidden !important;
}

.border-radius-none {
  border-radius: 0 !important;
}

.border-radius-small {
  border-radius: 0.2rem !important;
}

.border-radius-normal {
  border-radius: 0.25rem !important;
}

.border-radius-large {
  border-radius: 0.3rem !important;
}

.border-radius-round {
  border-radius: 50rem !important;
}

.border-radius-circle {
  border-radius: 50% !important;
}

.border-radius-top-small {
  border-top-left-radius: 0.2rem !important;
  border-top-right-radius: 0.2rem !important;
}

.border-radius-top-normal {
  border-top-left-radius: 0.25rem !important;
  border-top-right-radius: 0.25rem !important;
}

.border-radius-top-large {
  border-top-left-radius: 0.3rem !important;
  border-top-right-radius: 0.3rem !important;
}

.border-radius-top-round {
  border-top-left-radius: 50rem !important;
  border-top-right-radius: 50rem !important;
}

.border-radius-top-circle {
  border-top-left-radius: 50% !important;
  border-top-right-radius: 50% !important;
}

.border-radius-bottom-small {
  border-bottom-left-radius: 0.2rem !important;
  border-bottom-right-radius: 0.2rem !important;
}

.border-radius-bottom-normal {
  border-bottom-left-radius: 0.25rem !important;
  border-bottom-right-radius: 0.25rem !important;
}

.border-radius-bottom-large {
  border-bottom-left-radius: 0.3rem !important;
  border-bottom-right-radius: 0.3rem !important;
}

.border-radius-bottom-round {
  border-bottom-left-radius: 50rem !important;
  border-bottom-right-radius: 50rem !important;
}

.border-radius-bottom-circle {
  border-bottom-left-radius: 50% !important;
  border-bottom-right-radius: 50% !important;
}

.border-radius-top-left-small {
  border-top-left-radius: 0.2rem !important;
}

.border-radius-top-left-normal {
  border-top-left-radius: 0.25rem !important;
}

.border-radius-top-left-large {
  border-top-left-radius: 0.3rem !important;
}

.border-radius-top-left-round {
  border-top-left-radius: 50rem !important;
}

.border-radius-top-left-circle {
  border-top-left-radius: 50% !important;
}

.border-radius-top-right-small {
  border-top-right-radius: 0.2rem !important;
}

.border-radius-top-right-normal {
  border-top-right-radius: 0.25rem !important;
}

.border-radius-top-right-large {
  border-top-right-radius: 0.3rem !important;
}

.border-radius-top-right-round {
  border-top-right-radius: 50rem !important;
}

.border-radius-top-right-circle {
  border-top-right-radius: 50% !important;
}

.border-radius-bottom-left-small {
  border-bottom-left-radius: 0.2rem !important;
}

.border-radius-bottom-left-normal {
  border-bottom-left-radius: 0.25rem !important;
}

.border-radius-bottom-left-large {
  border-bottom-left-radius: 0.3rem !important;
}

.border-radius-bottom-left-round {
  border-bottom-left-radius: 50rem !important;
}

.border-radius-bottom-left-circle {
  border-bottom-left-radius: 50% !important;
}

.border-radius-bottom-right-small {
  border-bottom-right-radius: 0.2rem !important;
}

.border-radius-bottom-right-normal {
  border-bottom-right-radius: 0.25rem !important;
}

.border-radius-bottom-right-large {
  border-bottom-right-radius: 0.3rem !important;
}

.border-radius-bottom-right-round {
  border-bottom-right-radius: 50rem !important;
}

.border-radius-bottom-right-circle {
  border-bottom-right-radius: 50% !important;
}

img,
picture,
video {
  aspect-ratio: auto;
  max-width: 100%;
  height: auto;
}

.width-auto {
  width: auto !important;
}

.width-none {
  width: 0 !important;
}

.width-content {
  width: fit-content !important;
}

.width-small {
  width: 15% !important;
}

.width-normal {
  width: 25% !important;
}

.width-medium {
  width: 50% !important;
}

.width-full {
  max-width: 100% !important;
}

.width-viewport {
  max-width: 100vw !important;
}

.height-auto {
  height: auto !important;
}

.height-none {
  height: 0 !important;
}

.height-content {
  height: fit-content !important;
}

.height-small {
  height: 15% !important;
}

.height-normal {
  height: 25% !important;
}

.height-medium {
  height: 50% !important;
}

.height-full {
  min-height: 100% !important;
}

.height-viewport {
  min-height: 100vh !important;
}

.aspect-ratio-auto {
  aspect-ratio: auto !important;
}

.aspect-ratio-1x1 {
  aspect-ratio: 100% !important;
}

.aspect-ratio-4x3 {
  aspect-ratio: 75% !important;
}

.aspect-ratio-16x9 {
  aspect-ratio: 56.25% !important;
}

.aspect-ratio-21x9 {
  aspect-ratio: 42.8571428571% !important;
}

.object-fit-none {
  object-fit: none !important;
}

.object-fit-cover {
  object-fit: cover !important;
}

.object-fit-contain {
  object-fit: contain !important;
}

.object-fit-fill {
  object-fit: fill !important;
}

.object-fit-scale-down {
  object-fit: scale-down !important;
}

.opacity-none {
  opacity: 0 !important;
}

.opacity-none-on-hover:hover {
  transition: opacity 0.15s linear;
  opacity: 0 !important;
}

.opacity-low {
  opacity: 0.5 !important;
}

.opacity-low-on-hover:hover {
  transition: opacity 0.15s linear;
  opacity: 0.5 !important;
}

.opacity-medium {
  opacity: 0.6 !important;
}

.opacity-medium-on-hover:hover {
  transition: opacity 0.15s linear;
  opacity: 0.6 !important;
}

.opacity-normal {
  opacity: 1 !important;
}

.opacity-normal-on-hover:hover {
  transition: opacity 0.15s linear;
  opacity: 1 !important;
}

.transition-normal {
  transition: all 0.2s ease-in-out !important;
}

.transition-colors {
  transition: color 0.2s ease-in-out !important;
}

.transition-linear {
  transition: all 0.2s linear !important;
}

.transition-smooth {
  transition: all 0.3s ease !important;
}

.transition-opacity {
  transition: opacity 0.15s linear !important;
}

.transition-height {
  transition: height 0.35s ease !important;
}

.transition-width {
  transition: width 0.35s ease !important;
}

.list--hoverable > * {
  color: indigo;
  list-style-type: circle;
  width: fit-content;
  will-change: auto;
}
.list--hoverable > *:hover {
  transition: margin 0.35s ease;
  margin-bottom: 1rem;
}
.list--hoverable > *:hover, .list--hoverable > *:active, .list--hoverable > *:focus {
  color: #7700cf;
}

.list li:not(:last-child) {
  margin-bottom: 0.25rem !important;
}

.list-style-auto {
  list-style-type: auto !important;
}

.list-style-none {
  list-style-type: none !important;
}

.list-style-circle {
  list-style-type: circle !important;
}

.list-style-square {
  list-style-type: square !important;
}

.list-style-disc {
  list-style-type: disc !important;
}

.list-style-decimal {
  list-style-type: decimal !important;
}

.list-style-disclosure-open {
  list-style-type: disclosure-open !important;
}

.list-style-disclosure-closed {
  list-style-type: disclosure-closed !important;
}

.box-shadow-small {
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important;
}

.box-shadow-normal {
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}

.box-shadow-large {
  box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175) !important;
}

.box-shadow-inset {
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.075) !important;
}

/* Border Helpers */
.border {
  border: 1px solid #e9ecef;
}

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

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

.border-width-3 {
  border-width: 3px !important;
}

.border-width-4 {
  border-width: 4px !important;
}

.border-width-5 {
  border-width: 5px !important;
}

.border-color-gray {
  border-color: #adb5bd !important;
}

.border-color-gray-100 {
  border-color: #f8f9fa !important;
}

.border-color-gray-200 {
  border-color: #e9ecef !important;
}

.border-color-gray-300 {
  border-color: #dee2e6 !important;
}

.border-color-gray-400 {
  border-color: #ced4da !important;
}

.border-color-gray-500 {
  border-color: #adb5bd !important;
}

.border-color-gray-600 {
  border-color: #6c757d !important;
}

.border-color-gray-700 {
  border-color: #495057 !important;
}

.border-color-gray-800 {
  border-color: #343a40 !important;
}

.border-color-gray-900 {
  border-color: #212529 !important;
}

.border-color-blue-100 {
  border-color: #cfe2ff !important;
}

.border-color-blue-200 {
  border-color: #9ec5fe !important;
}

.border-color-blue-300 {
  border-color: #6ea8fe !important;
}

.border-color-blue-400 {
  border-color: #3d8bfd !important;
}

.border-color-blue-500 {
  border-color: #0d6efd !important;
}

.border-color-blue-600 {
  border-color: #0a58ca !important;
}

.border-color-blue-700 {
  border-color: #084298 !important;
}

.border-color-blue-800 {
  border-color: #052c65 !important;
}

.border-color-blue-900 {
  border-color: #031633 !important;
}

.border-color-indigo-100 {
  border-color: #e0cffc !important;
}

.border-color-indigo-200 {
  border-color: #c29ffa !important;
}

.border-color-indigo-300 {
  border-color: #a370f7 !important;
}

.border-color-indigo-400 {
  border-color: #8540f5 !important;
}

.border-color-indigo-500 {
  border-color: #6610f2 !important;
}

.border-color-indigo-600 {
  border-color: #520dc2 !important;
}

.border-color-indigo-700 {
  border-color: #3d0a91 !important;
}

.border-color-indigo-800 {
  border-color: #290661 !important;
}

.border-color-indigo-900 {
  border-color: #140330 !important;
}

.border-color-purple-100 {
  border-color: #e2d9f3 !important;
}

.border-color-purple-200 {
  border-color: #c5b3e6 !important;
}

.border-color-purple-300 {
  border-color: #a98eda !important;
}

.border-color-purple-400 {
  border-color: #8c68cd !important;
}

.border-color-purple-500 {
  border-color: #6f42c1 !important;
}

.border-color-purple-600 {
  border-color: #59359a !important;
}

.border-color-purple-700 {
  border-color: #432874 !important;
}

.border-color-purple-800 {
  border-color: #2c1a4d !important;
}

.border-color-purple-900 {
  border-color: #160d27 !important;
}

.border-color-pink-100 {
  border-color: #f7d6e6 !important;
}

.border-color-pink-200 {
  border-color: #efadce !important;
}

.border-color-pink-300 {
  border-color: #e685b5 !important;
}

.border-color-pink-400 {
  border-color: #de5c9d !important;
}

.border-color-pink-500 {
  border-color: #d63384 !important;
}

.border-color-pink-600 {
  border-color: #ab296a !important;
}

.border-color-pink-700 {
  b