@import url("https://fonts.googleapis.com/css2?family=Jura:wght@300..700&family=Mulish:ital,wght@0,200..1000;1,200..1000&display=swap");
/**
 * Modern CSS Reset Tweaks
 * ==================================================
 * A collection of modern CSS reset and normalization styles
 * to ensure consistent behavior across browsers, OS and devices.
 */
/* Ensure consistent font resizing on mobile devices */
html {
  -webkit-text-size-adjust: 100%;
}
html:focus-within {
  scroll-behavior: smooth;
}

/* Basic body setup for layout and text rendering optimization */
body {
  text-size-adjust: 100%;
  position: relative;
  width: 100%;
  min-height: 100vh;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeSpeed;
}

/* Apply box-sizing globally for consistent element sizing */
*,
::after,
::before {
  box-sizing: border-box;
}

/* Style unclassed links for better accessibility */
a:not([class]) {
  text-decoration-skip-ink: auto;
}

/**
 * CSS Reset Tweaks
 * Based on Eric Meyer's CSS Reset v2.0-modified (public domain)
 * URL: http://meyerweb.com/eric/tools/css/reset/
 */
a,
abbr,
acronym,
address,
applet,
article,
aside,
audio,
b,
big,
blockquote,
body,
br,
button,
canvas,
caption,
center,
cite,
code,
col,
colgroup,
data,
datalist,
dd,
del,
details,
dfn,
div,
dl,
dt,
em,
embed,
fieldset,
figcaption,
figure,
footer,
form,
h1,
h2,
h3,
h4,
h5,
h6,
head,
header,
hgroup,
hr,
html,
i,
iframe,
img,
input,
ins,
kbd,
label,
legend,
li,
link,
main,
map,
mark,
menu,
meta,
meter,
nav,
noscript,
object,
ol,
optgroup,
option,
output,
p,
param,
picture,
pre,
progress,
q,
rb,
rp,
rt,
rtc,
ruby,
s,
samp,
script,
section,
select,
small,
source,
span,
strong,
style,
svg,
sub,
summary,
sup,
table,
tbody,
td,
template,
textarea,
tfoot,
th,
thead,
time,
title,
tr,
track,
tt,
u,
ul,
var,
video,
wbr {
  font-size: 100%;
  font: inherit;
  margin: 0;
  padding: 0;
  border: 0;
  vertical-align: baseline;
}

/* Add focus styles to improve accessibility */
:focus {
  outline: 0;
}

/* Normalize HTML5 elements for older browsers */
article,
aside,
details,
embed,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
object,
section {
  display: block;
}

canvas,
iframe {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Remove default list styling */
ol,
ul {
  list-style: none;
}

/* Normalize quote styling */
blockquote,
q {
  quotes: none;
}
blockquote:before, blockquote:after,
q:before,
q:after {
  content: "";
  content: none;
}

/* Reset and normalize form inputs */
input:required,
input {
  box-shadow: none;
}

/* Autofill styling for better compatibility */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 30px white inset;
}

/* Improve appearance of search inputs */
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;
}

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

input:focus {
  outline: none;
}

video {
  background: #000;
}

/**
 * Prevent modern browsers from displaying `audio` without controls.
 * Remove excess height in iOS 5 devices.
 */
audio:not([controls]) {
  display: none;
  height: 0;
}

/**
 * Address styling not present in IE 7/8/9, Firefox 3, and Safari 4.
 */
[hidden] {
  display: none;
}

/**
 * Improve readability when focused and also mouse hovered in all browsers.
 */
a:active,
a:hover {
  outline: none;
}

/**
 * Make media easier to work with
 */
audio,
img,
picture,
svg,
video {
  max-width: 100%;
  display: inline-block;
  vertical-align: middle;
  height: auto;
}

/**
 * Address Firefox 3+ setting `line-height` on `input` using `!important` in
 * the UA stylesheet.
 */
button,
input {
  line-height: normal;
}

/**
 * Address inconsistent `text-transform` inheritance for `button` and `select`.
 * All other form control elements do not inherit `text-transform` values.
 * Correct `button` style inheritance in Chrome, Safari 5+, and IE 6+.
 * Correct `select` style inheritance in Firefox 4+ and Opera.
 */
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;
}

/**
 * Re-set default cursor for disabled elements.
 */
button[disabled],
html input[disabled] {
  cursor: default;
}

/* Additional attribute handling for accessibility */
[disabled],
[disabled=true],
[aria-disabled=true] {
  pointer-events: none;
}

/**
 * Address box sizing set to content-box in IE 8/9.
 */
input[type=checkbox],
input[type=radio] {
  padding: 0;
}

/**
 * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome.
 * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome
 *    (include `-moz` to future-proof).
 */
input[type=search] {
  -webkit-appearance: textfield;
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
}

/**
 * Remove inner padding and search cancel button in Safari 5 and Chrome
 * on OS X.
 */
input[type=search]::-webkit-search-cancel-button,
input[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * Remove inner padding and border in Firefox 3+.
 */
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;
}

/**
 * Remove most spacing between table cells.
 */
table {
  border-collapse: collapse;
  border-spacing: 0;
  text-indent: 0;
}

/**
 * Based on normalize.css v8.0.1
 * github.com/necolas/normalize.css
 */
hr {
  box-sizing: content-box;
  overflow: visible;
  background: #000;
  border: 0;
  height: 1px;
  line-height: 0;
  margin: 0;
  padding: 0;
  page-break-after: always;
  width: 100%;
}

/**
 * Correct the inheritance and scaling of font size in all browsers.
 */
pre {
  font-family: monospace, monospace;
  font-size: 100%;
}

/**
 * Remove the gray background on active links in IE 10.
 */
a {
  background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
  border-bottom: none;
  text-decoration: none;
}

code,
kbd,
pre,
samp {
  font-family: monospace, monospace;
}

/**
 * Add the correct font size in all browsers.
 */
small {
  font-size: 75%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -5px;
}

sup {
  top: -5px;
}

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
  line-height: 1;
  margin: 0;
  padding: 0;
}

/**
 * Show the overflow in IE and Edge.
 */
button,
input {
  /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 */
button,
select {
  /* 1 */
  text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */
button,
[type=button],
[type=reset],
[type=submit] {
  -webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */
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%;
}

fieldset {
  min-width: 0;
}

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

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
  vertical-align: baseline;
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type=search] {
  -webkit-appearance: textfield;
  /* 1 */
  outline-offset: -2px;
  /* 2 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */
[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
  -webkit-appearance: button;
  /* 1 */
  font: inherit;
  /* 2 */
}

/* Interactive
   ========================================================================== */
/*
 * Add the correct display in all browsers.
 */
summary {
  display: list-item;
}

/* Misc
   ========================================================================== */
template {
  display: none;
}

:root {
  justify-content: center;
  word-wrap: break-word;
  line-height: 1.5;
}

:root {
  --color-primary: 250 0 0;
  --color-primary-dark-10: 199 0 0;
  --color-primary-dark-20: 148 0 0;
  --color-primary-dark-30: 97 0 0;
  --color-primary-dark-40: 46 0 0;
  --color-primary-dark-50: 0 0 0;
  --color-primary-dark-60: 0 0 0;
  --color-primary-dark-70: 0 0 0;
  --color-primary-dark-80: 0 0 0;
  --color-primary-dark-90: 0 0 0;
  --color-primary-light-10: 255 46 46;
  --color-primary-light-20: 255 97 97;
  --color-primary-light-30: 255 148 148;
  --color-primary-light-40: 255 199 199;
  --color-primary-light-50: 255 250 250;
  --color-primary-light-60: 255 255 255;
  --color-primary-light-70: 255 255 255;
  --color-primary-light-80: 255 255 255;
  --color-primary-light-90: 255 255 255;
  --color-secondary: 248 245 247;
  --color-secondary-dark-10: 227 215 223;
  --color-secondary-dark-20: 206 185 199;
  --color-secondary-dark-30: 185 155 175;
  --color-secondary-dark-40: 164 125 151;
  --color-secondary-dark-50: 140 98 126;
  --color-secondary-dark-60: 110 77 99;
  --color-secondary-dark-70: 80 56 72;
  --color-secondary-dark-80: 50 35 45;
  --color-secondary-dark-90: 20 14 18;
  --color-secondary-light-10: 255 255 255;
  --color-secondary-light-20: 255 255 255;
  --color-secondary-light-30: 255 255 255;
  --color-secondary-light-40: 255 255 255;
  --color-secondary-light-50: 255 255 255;
  --color-secondary-light-60: 255 255 255;
  --color-secondary-light-70: 255 255 255;
  --color-secondary-light-80: 255 255 255;
  --color-secondary-light-90: 255 255 255;
  --color-kaki: 58 58 37;
  --color-kaki-dark-10: 27 27 17;
  --color-kaki-dark-20: 0 0 0;
  --color-kaki-dark-30: 0 0 0;
  --color-kaki-dark-40: 0 0 0;
  --color-kaki-dark-50: 0 0 0;
  --color-kaki-dark-60: 0 0 0;
  --color-kaki-dark-70: 0 0 0;
  --color-kaki-dark-80: 0 0 0;
  --color-kaki-dark-90: 0 0 0;
  --color-kaki-light-10: 89 89 57;
  --color-kaki-light-20: 120 120 77;
  --color-kaki-light-30: 151 151 97;
  --color-kaki-light-40: 173 173 126;
  --color-kaki-light-50: 193 193 157;
  --color-kaki-light-60: 213 213 188;
  --color-kaki-light-70: 232 232 220;
  --color-kaki-light-80: 252 252 251;
  --color-kaki-light-90: 255 255 255;
  --color-darkgrey: 16 16 16;
  --color-darkgrey-dark-10: 0 0 0;
  --color-darkgrey-dark-20: 0 0 0;
  --color-darkgrey-dark-30: 0 0 0;
  --color-darkgrey-dark-40: 0 0 0;
  --color-darkgrey-dark-50: 0 0 0;
  --color-darkgrey-dark-60: 0 0 0;
  --color-darkgrey-dark-70: 0 0 0;
  --color-darkgrey-dark-80: 0 0 0;
  --color-darkgrey-dark-90: 0 0 0;
  --color-darkgrey-light-10: 42 42 42;
  --color-darkgrey-light-20: 67 67 67;
  --color-darkgrey-light-30: 93 93 93;
  --color-darkgrey-light-40: 118 118 118;
  --color-darkgrey-light-50: 144 144 144;
  --color-darkgrey-light-60: 169 169 169;
  --color-darkgrey-light-70: 195 195 195;
  --color-darkgrey-light-80: 220 220 220;
  --color-darkgrey-light-90: 246 246 246;
  --color-darkred: 17 3 3;
  --color-darkred-dark-10: 0 0 0;
  --color-darkred-dark-20: 0 0 0;
  --color-darkred-dark-30: 0 0 0;
  --color-darkred-dark-40: 0 0 0;
  --color-darkred-dark-50: 0 0 0;
  --color-darkred-dark-60: 0 0 0;
  --color-darkred-dark-70: 0 0 0;
  --color-darkred-dark-80: 0 0 0;
  --color-darkred-dark-90: 0 0 0;
  --color-darkred-light-10: 60 11 11;
  --color-darkred-light-20: 104 18 18;
  --color-darkred-light-30: 147 26 26;
  --color-darkred-light-40: 190 34 34;
  --color-darkred-light-50: 220 55 55;
  --color-darkred-light-60: 227 99 99;
  --color-darkred-light-70: 235 142 142;
  --color-darkred-light-80: 243 185 185;
  --color-darkred-light-90: 250 229 229;
  --color-success: 0 210 0;
  --color-success-dark-10: 0 159 0;
  --color-success-dark-20: 0 108 0;
  --color-success-dark-30: 0 57 0;
  --color-success-dark-40: 0 6 0;
  --color-success-dark-50: 0 0 0;
  --color-success-dark-60: 0 0 0;
  --color-success-dark-70: 0 0 0;
  --color-success-dark-80: 0 0 0;
  --color-success-dark-90: 0 0 0;
  --color-success-light-10: 6 255 6;
  --color-success-light-20: 57 255 57;
  --color-success-light-30: 108 255 108;
  --color-success-light-40: 159 255 159;
  --color-success-light-50: 210 255 210;
  --color-success-light-60: 255 255 255;
  --color-success-light-70: 255 255 255;
  --color-success-light-80: 255 255 255;
  --color-success-light-90: 255 255 255;
  --color-warning: 229 120 11;
  --color-warning-dark-10: 180 95 9;
  --color-warning-dark-20: 132 69 6;
  --color-warning-dark-30: 83 44 4;
  --color-warning-dark-40: 34 18 2;
  --color-warning-dark-50: 0 0 0;
  --color-warning-dark-60: 0 0 0;
  --color-warning-dark-70: 0 0 0;
  --color-warning-dark-80: 0 0 0;
  --color-warning-dark-90: 0 0 0;
  --color-warning-light-10: 245 146 46;
  --color-warning-light-20: 247 171 95;
  --color-warning-light-30: 250 197 143;
  --color-warning-light-40: 252 222 192;
  --color-warning-light-50: 254 248 241;
  --color-warning-light-60: 255 255 255;
  --color-warning-light-70: 255 255 255;
  --color-warning-light-80: 255 255 255;
  --color-warning-light-90: 255 255 255;
  --color-danger: 210 0 0;
  --color-danger-dark-10: 159 0 0;
  --color-danger-dark-20: 108 0 0;
  --color-danger-dark-30: 57 0 0;
  --color-danger-dark-40: 6 0 0;
  --color-danger-dark-50: 0 0 0;
  --color-danger-dark-60: 0 0 0;
  --color-danger-dark-70: 0 0 0;
  --color-danger-dark-80: 0 0 0;
  --color-danger-dark-90: 0 0 0;
  --color-danger-light-10: 255 6 6;
  --color-danger-light-20: 255 57 57;
  --color-danger-light-30: 255 108 108;
  --color-danger-light-40: 255 159 159;
  --color-danger-light-50: 255 210 210;
  --color-danger-light-60: 255 255 255;
  --color-danger-light-70: 255 255 255;
  --color-danger-light-80: 255 255 255;
  --color-danger-light-90: 255 255 255;
  --color-info: 0 210 210;
  --color-info-dark-10: 0 159 159;
  --color-info-dark-20: 0 108 108;
  --color-info-dark-30: 0 57 57;
  --color-info-dark-40: 0 6 6;
  --color-info-dark-50: 0 0 0;
  --color-info-dark-60: 0 0 0;
  --color-info-dark-70: 0 0 0;
  --color-info-dark-80: 0 0 0;
  --color-info-dark-90: 0 0 0;
  --color-info-light-10: 6 255 255;
  --color-info-light-20: 57 255 255;
  --color-info-light-30: 108 255 255;
  --color-info-light-40: 159 255 255;
  --color-info-light-50: 210 255 255;
  --color-info-light-60: 255 255 255;
  --color-info-light-70: 255 255 255;
  --color-info-light-80: 255 255 255;
  --color-info-light-90: 255 255 255;
  --color-black: 3 8 6;
  --color-black-dark-10: 0 0 0;
  --color-black-dark-20: 0 0 0;
  --color-black-dark-30: 0 0 0;
  --color-black-dark-40: 0 0 0;
  --color-black-dark-50: 0 0 0;
  --color-black-dark-60: 0 0 0;
  --color-black-dark-70: 0 0 0;
  --color-black-dark-80: 0 0 0;
  --color-black-dark-90: 0 0 0;
  --color-black-light-10: 17 45 34;
  --color-black-light-20: 31 82 62;
  --color-black-light-30: 45 119 89;
  --color-black-light-40: 59 156 117;
  --color-black-light-50: 78 188 144;
  --color-black-light-60: 115 202 167;
  --color-black-light-70: 152 216 190;
  --color-black-light-80: 189 230 214;
  --color-black-light-90: 226 244 237;
  --color-white: 248 245 247;
  --color-white-dark-10: 227 215 223;
  --color-white-dark-20: 206 185 199;
  --color-white-dark-30: 185 155 175;
  --color-white-dark-40: 164 125 151;
  --color-white-dark-50: 140 98 126;
  --color-white-dark-60: 110 77 99;
  --color-white-dark-70: 80 56 72;
  --color-white-dark-80: 50 35 45;
  --color-white-dark-90: 20 14 18;
  --color-white-light-10: 255 255 255;
  --color-white-light-20: 255 255 255;
  --color-white-light-30: 255 255 255;
  --color-white-light-40: 255 255 255;
  --color-white-light-50: 255 255 255;
  --color-white-light-60: 255 255 255;
  --color-white-light-70: 255 255 255;
  --color-white-light-80: 255 255 255;
  --color-white-light-90: 255 255 255;
  --bg-opacity: 1;
  --color-opacity: 1;
  --border-opacity: 1;
  --shadow-color: 0 0 0;
  --shadow-opacity: 0.5;
  --shadow-blur: 5px;
  --color-text-base: var(--color-white);
}

.bg-opacity-10 {
  --bg-opacity: 0.1;
}

.color-opacity-10 {
  --color-opacity: 0.1;
}

.border-opacity-10 {
  --border-opacity: 0.1;
}

.shadow-opacity-10 {
  --shadow-opacity: 0.1;
}

.bg-opacity-20 {
  --bg-opacity: 0.2;
}

.color-opacity-20 {
  --color-opacity: 0.2;
}

.border-opacity-20 {
  --border-opacity: 0.2;
}

.shadow-opacity-20 {
  --shadow-opacity: 0.2;
}

.bg-opacity-30 {
  --bg-opacity: 0.3;
}

.color-opacity-30 {
  --color-opacity: 0.3;
}

.border-opacity-30 {
  --border-opacity: 0.3;
}

.shadow-opacity-30 {
  --shadow-opacity: 0.3;
}

.bg-opacity-40 {
  --bg-opacity: 0.4;
}

.color-opacity-40 {
  --color-opacity: 0.4;
}

.border-opacity-40 {
  --border-opacity: 0.4;
}

.shadow-opacity-40 {
  --shadow-opacity: 0.4;
}

.bg-opacity-50 {
  --bg-opacity: 0.5;
}

.color-opacity-50 {
  --color-opacity: 0.5;
}

.border-opacity-50 {
  --border-opacity: 0.5;
}

.shadow-opacity-50 {
  --shadow-opacity: 0.5;
}

.bg-opacity-60 {
  --bg-opacity: 0.6;
}

.color-opacity-60 {
  --color-opacity: 0.6;
}

.border-opacity-60 {
  --border-opacity: 0.6;
}

.shadow-opacity-60 {
  --shadow-opacity: 0.6;
}

.bg-opacity-70 {
  --bg-opacity: 0.7;
}

.color-opacity-70 {
  --color-opacity: 0.7;
}

.border-opacity-70 {
  --border-opacity: 0.7;
}

.shadow-opacity-70 {
  --shadow-opacity: 0.7;
}

.bg-opacity-80 {
  --bg-opacity: 0.8;
}

.color-opacity-80 {
  --color-opacity: 0.8;
}

.border-opacity-80 {
  --border-opacity: 0.8;
}

.shadow-opacity-80 {
  --shadow-opacity: 0.8;
}

.bg-opacity-90 {
  --bg-opacity: 0.9;
}

.color-opacity-90 {
  --color-opacity: 0.9;
}

.border-opacity-90 {
  --border-opacity: 0.9;
}

.shadow-opacity-90 {
  --shadow-opacity: 0.9;
}

.shadow-blur-1 {
  --shadow-blur: 2px;
}

.shadow-blur-2 {
  --shadow-blur: 4px;
}

.shadow-blur-3 {
  --shadow-blur: 6px;
}

.shadow-blur-4 {
  --shadow-blur: 8px;
}

.shadow-blur-5 {
  --shadow-blur: 10px;
}

.shadow-blur-6 {
  --shadow-blur: 12px;
}

.shadow-blur-7 {
  --shadow-blur: 14px;
}

.shadow-blur-8 {
  --shadow-blur: 16px;
}

.shadow-blur-9 {
  --shadow-blur: 18px;
}

.shadow-blur-10 {
  --shadow-blur: 20px;
}

:root {
  --margin-base: 0.5rem;
  --margin-0: 0rem;
  --margin-1: 0.5rem;
  --margin-2: 1rem;
  --margin-3: 1.5rem;
  --margin-4: 2rem;
  --margin-5: 2.5rem;
  --margin-6: 3rem;
  --margin-7: 3.5rem;
  --margin-8: 4rem;
}

:root {
  --padding-base: 0.5rem;
  --padding-0: 0rem;
  --padding-1: 0.5rem;
  --padding-2: 1rem;
  --padding-3: 1.5rem;
  --padding-4: 2rem;
  --padding-5: 2.5rem;
  --padding-6: 3rem;
  --padding-7: 3.5rem;
  --padding-8: 4rem;
}

:root {
  --font-text: Mulish, sans-serif;
  --font-title: Jura, serif;
  --font-size-xxl: 64px;
  --font-size-xl: 48px;
  --font-size-l: 36px;
  --font-size-m: 24px;
  --font-size-s: 20px;
  --font-size-xs: 18px;
  --font-size-xxs: 16px;
  font-size: var(--font-size-xxs);
  font-family: var(--font-text);
  color: rgb(var(--color-text-base)/var(--color-opacity));
}

:root {
  --radius: 4px;
  --radius-xxl: 32px;
  --radius-xl: 24px;
  --radius-l: 16px;
  --radius-m: 8px;
  --radius-s: calc(4px / 2);
  --radius-xs: calc(4px / 4);
}

:root {
  --border-width-xs: 1px;
  --border-width-s: 2px;
  --border-width-m: 3px;
  --border-width-l: 5px;
  --border-width-xl: 7px;
  --border-width-xxl: 12px;
  --border-color-primary: var(--color-primary);
  --border-color-secondary: var(--color-secondary);
  --border-color-kaki: var(--color-kaki);
  --border-color-darkgrey: var(--color-darkgrey);
  --border-color-darkred: var(--color-darkred);
  --border-color-success: var(--color-success);
  --border-color-warning: var(--color-warning);
  --border-color-danger: var(--color-danger);
  --border-color-info: var(--color-info);
  --border-color-black: var(--color-black);
  --border-color-white: var(--color-white);
}

html {
  background-color: rgb(var(--color-darkgrey)/var(--bg-opacity));
}

body {
  margin: auto;
  padding-top: var(--padding-6);
}

h1 {
  font-size: var(--font-size-xxl);
  color: rgb(var(--color-primary)/var(--color-opacity));
  font-family: var(--font-title);
}
@media only screen and (max-width: 600px) {
  h1 {
    font-size: var(--font-size-xl);
  }
}

h2 {
  font-size: var(--font-size-xl);
  color: rgb(var(--color-primary)/var(--color-opacity));
  font-family: var(--font-title);
}
@media only screen and (max-width: 600px) {
  h2 {
    font-size: var(--font-size-l);
  }
}

h3 {
  font-size: var(--font-size-l);
  color: rgb(var(--color-primary)/var(--color-opacity));
  font-family: var(--font-title);
}
@media only screen and (max-width: 600px) {
  h3 {
    font-size: var(--font-size-m);
  }
}

h4 {
  font-size: var(--font-size-m);
  color: rgb(var(--color-primary)/var(--color-opacity));
  font-family: var(--font-title);
}

.container {
  max-width: min(1200px, calc(100% - var(--padding-2)));
  width: 100%;
  margin-inline: auto;
  padding-bottom: var(--padding-4);
  padding-top: var(--padding-4);
}
@media only screen and (max-width: 600px) {
  .container {
    margin: var(--margin-1);
  }
}

.full-w {
  width: 100%;
}

.banner-full-screen {
  height: 100vh;
}

@media only screen and (max-width: 600px) {
  .visible-phone {
    display: block !important;
  }

  .hidden-phone {
    display: none;
  }
}
@media only screen and (max-width: 768px) {
  .visible-tablet {
    display: block;
  }

  .hidden-tablet {
    display: none !important;
  }
}
@media only screen and (max-width: 1200px) {
  .visible-desktop {
    display: block;
  }

  .hidden-desktop {
    display: none !important;
  }
}
.section-divider-center {
  display: flex;
  align-items: center;
  margin: var(--margin-2) 0;
}
.section-divider-center::before, .section-divider-center::after {
  content: "";
  flex-grow: 1;
  height: 1px;
  background: linear-gradient(to right, transparent, rgb(var(--color-primary)/0.7), transparent);
}
.section-divider-center .divider-icon-center {
  padding: 0 var(--padding-2);
  color: rgb(var(--color-primary)/0.9);
  font-size: var(--font-size-s);
}

.section-divider-left {
  display: flex;
  align-items: center;
}
.section-divider-left .divider-icon-left {
  padding-right: var(--padding-2);
  color: rgb(var(--color-primary)/0.9);
  font-size: var(--font-size-s);
  margin-right: var(--margin-1);
}
.section-divider-left::after {
  content: "";
  flex-grow: 1;
  height: 1px;
  background: linear-gradient(to right, rgb(var(--color-primary)/0.9), transparent);
}

.fade-divider-center {
  height: 1px;
  background: linear-gradient(to right, transparent, rgb(var(--color-primary)/0.7) 50%, transparent 100%);
  margin: var(--margin-2) 0;
}

.fade-divider-left {
  height: 1px;
  background: linear-gradient(to right, rgb(var(--color-primary)/0.9), transparent);
  margin: var(--margin-2) 0;
}

.bullet-arrow li {
  position: relative;
  padding-left: 25px;
}
.bullet-arrow li::before {
  content: "";
  width: 20px;
  height: 20px;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  background-image: url("img/ArrowRight-red.svg");
  background-size: contain;
  background-repeat: no-repeat;
}

iframe {
  width: 100%;
  height: 300px;
  filter: grayscale(100%);
}

img.icon-m {
  width: 24px;
  height: 24px;
}

img.icon-s {
  width: 20px;
  height: 20px;
}

img.icon-xs {
  width: 18px;
  height: 18px;
}

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

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

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

a:focus-visible {
  outline: 2px solid rgb(var(--color-primary));
}

tr, td, th {
  padding: var(--padding-1);
}

th {
  font-size: var(--font-size-s);
}

.instructor-card {
  background-color: rgb(var(--color-darkgrey));
  border: 1px solid rgb(var(--color-primary));
  padding: var(--padding-2);
  text-align: center;
  overflow: hidden;
  height: auto;
  display: flex;
  flex-direction: column;
  align-self: flex-start;
}
.instructor-header {
  margin-bottom: var(--margin-2);
}
.instructor-photo {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  margin-bottom: var(--margin-1);
}
.instructor-name {
  font-size: var(--font-size-m);
  color: rgb(var(--color-primary));
}
.instructor-title {
  font-size: var(--font-size-xs);
  color: white;
}
.instructor-details {
  margin-top: var(--margin-);
  text-align: left;
  max-height: 0;
  opacity: 0;
  transition: max-height 0.4s ease-out, opacity 0.3s ease-out, margin-top 0.4s ease-out;
  overflow-y: scroll;
}
.instructor-details:not(.hidden) {
  max-height: 500px;
  opacity: 1;
}

.btn-toggle {
  background-color: rgb(var(--color-primary));
  color: white;
  border: none;
  padding: var(--padding-1) var(--padding-2);
  cursor: pointer;
  border-radius: 4px;
}

.height-fill-available {
  height: -webkit-fill-available;
}

.width-fill-available {
  width: -webkit-fill-available;
}

.text-decoration-none, .decoration-none {
  text-decoration: none;
  color: inherit;
}

.online-payment {
  display: flex;
  align-items: center;
  gap: 1rem;
  background-color: rgba(var(--color-success), 0.1);
  padding: 1rem;
  border: 1px solid var(--color-success);
}

.color-primary {
  color: rgb(var(--color-primary)/var(--color-opacity));
}

.bg-primary {
  background-color: rgb(var(--color-primary)/var(--bg-opacity));
}

.border-primary {
  border-color: rgb(var(--color-primary)/var(--border-opacity));
}

.shadow-primary {
  --shadow-color: var(--color-primary);
  box-shadow: 0 0 var(--shadow-blur) 0 rgb(var(--shadow-color)/var(--shadow-opacity));
}

.color-primary-dark-10 {
  color: rgb(var(--color-primary-dark-10)/var(--color-opacity));
}

.bg-primary-dark-10 {
  background-color: rgb(var(--color-primary-dark-10)/var(--bg-opacity));
}

.color-primary-light-10 {
  color: rgb(var(--color-primary-light-10)/var(--color-opacity));
}

.bg-primary-light-10 {
  background-color: rgb(var(--color-primary-light-10)/var(--bg-opacity));
}

.color-primary-dark-20 {
  color: rgb(var(--color-primary-dark-20)/var(--color-opacity));
}

.bg-primary-dark-20 {
  background-color: rgb(var(--color-primary-dark-20)/var(--bg-opacity));
}

.color-primary-light-20 {
  color: rgb(var(--color-primary-light-20)/var(--color-opacity));
}

.bg-primary-light-20 {
  background-color: rgb(var(--color-primary-light-20)/var(--bg-opacity));
}

.color-primary-dark-30 {
  color: rgb(var(--color-primary-dark-30)/var(--color-opacity));
}

.bg-primary-dark-30 {
  background-color: rgb(var(--color-primary-dark-30)/var(--bg-opacity));
}

.color-primary-light-30 {
  color: rgb(var(--color-primary-light-30)/var(--color-opacity));
}

.bg-primary-light-30 {
  background-color: rgb(var(--color-primary-light-30)/var(--bg-opacity));
}

.color-primary-dark-40 {
  color: rgb(var(--color-primary-dark-40)/var(--color-opacity));
}

.bg-primary-dark-40 {
  background-color: rgb(var(--color-primary-dark-40)/var(--bg-opacity));
}

.color-primary-light-40 {
  color: rgb(var(--color-primary-light-40)/var(--color-opacity));
}

.bg-primary-light-40 {
  background-color: rgb(var(--color-primary-light-40)/var(--bg-opacity));
}

.color-primary-dark-50 {
  color: rgb(var(--color-primary-dark-50)/var(--color-opacity));
}

.bg-primary-dark-50 {
  background-color: rgb(var(--color-primary-dark-50)/var(--bg-opacity));
}

.color-primary-light-50 {
  color: rgb(var(--color-primary-light-50)/var(--color-opacity));
}

.bg-primary-light-50 {
  background-color: rgb(var(--color-primary-light-50)/var(--bg-opacity));
}

.color-primary-dark-60 {
  color: rgb(var(--color-primary-dark-60)/var(--color-opacity));
}

.bg-primary-dark-60 {
  background-color: rgb(var(--color-primary-dark-60)/var(--bg-opacity));
}

.color-primary-light-60 {
  color: rgb(var(--color-primary-light-60)/var(--color-opacity));
}

.bg-primary-light-60 {
  background-color: rgb(var(--color-primary-light-60)/var(--bg-opacity));
}

.color-primary-dark-70 {
  color: rgb(var(--color-primary-dark-70)/var(--color-opacity));
}

.bg-primary-dark-70 {
  background-color: rgb(var(--color-primary-dark-70)/var(--bg-opacity));
}

.color-primary-light-70 {
  color: rgb(var(--color-primary-light-70)/var(--color-opacity));
}

.bg-primary-light-70 {
  background-color: rgb(var(--color-primary-light-70)/var(--bg-opacity));
}

.color-primary-dark-80 {
  color: rgb(var(--color-primary-dark-80)/var(--color-opacity));
}

.bg-primary-dark-80 {
  background-color: rgb(var(--color-primary-dark-80)/var(--bg-opacity));
}

.color-primary-light-80 {
  color: rgb(var(--color-primary-light-80)/var(--color-opacity));
}

.bg-primary-light-80 {
  background-color: rgb(var(--color-primary-light-80)/var(--bg-opacity));
}

.color-primary-dark-90 {
  color: rgb(var(--color-primary-dark-90)/var(--color-opacity));
}

.bg-primary-dark-90 {
  background-color: rgb(var(--color-primary-dark-90)/var(--bg-opacity));
}

.color-primary-light-90 {
  color: rgb(var(--color-primary-light-90)/var(--color-opacity));
}

.bg-primary-light-90 {
  background-color: rgb(var(--color-primary-light-90)/var(--bg-opacity));
}

.color-secondary {
  color: rgb(var(--color-secondary)/var(--color-opacity));
}

.bg-secondary {
  background-color: rgb(var(--color-secondary)/var(--bg-opacity));
}

.border-secondary {
  border-color: rgb(var(--color-secondary)/var(--border-opacity));
}

.shadow-secondary {
  --shadow-color: var(--color-secondary);
  box-shadow: 0 0 var(--shadow-blur) 0 rgb(var(--shadow-color)/var(--shadow-opacity));
}

.color-secondary-dark-10 {
  color: rgb(var(--color-secondary-dark-10)/var(--color-opacity));
}

.bg-secondary-dark-10 {
  background-color: rgb(var(--color-secondary-dark-10)/var(--bg-opacity));
}

.color-secondary-light-10 {
  color: rgb(var(--color-secondary-light-10)/var(--color-opacity));
}

.bg-secondary-light-10 {
  background-color: rgb(var(--color-secondary-light-10)/var(--bg-opacity));
}

.color-secondary-dark-20 {
  color: rgb(var(--color-secondary-dark-20)/var(--color-opacity));
}

.bg-secondary-dark-20 {
  background-color: rgb(var(--color-secondary-dark-20)/var(--bg-opacity));
}

.color-secondary-light-20 {
  color: rgb(var(--color-secondary-light-20)/var(--color-opacity));
}

.bg-secondary-light-20 {
  background-color: rgb(var(--color-secondary-light-20)/var(--bg-opacity));
}

.color-secondary-dark-30 {
  color: rgb(var(--color-secondary-dark-30)/var(--color-opacity));
}

.bg-secondary-dark-30 {
  background-color: rgb(var(--color-secondary-dark-30)/var(--bg-opacity));
}

.color-secondary-light-30 {
  color: rgb(var(--color-secondary-light-30)/var(--color-opacity));
}

.bg-secondary-light-30 {
  background-color: rgb(var(--color-secondary-light-30)/var(--bg-opacity));
}

.color-secondary-dark-40 {
  color: rgb(var(--color-secondary-dark-40)/var(--color-opacity));
}

.bg-secondary-dark-40 {
  background-color: rgb(var(--color-secondary-dark-40)/var(--bg-opacity));
}

.color-secondary-light-40 {
  color: rgb(var(--color-secondary-light-40)/var(--color-opacity));
}

.bg-secondary-light-40 {
  background-color: rgb(var(--color-secondary-light-40)/var(--bg-opacity));
}

.color-secondary-dark-50 {
  color: rgb(var(--color-secondary-dark-50)/var(--color-opacity));
}

.bg-secondary-dark-50 {
  background-color: rgb(var(--color-secondary-dark-50)/var(--bg-opacity));
}

.color-secondary-light-50 {
  color: rgb(var(--color-secondary-light-50)/var(--color-opacity));
}

.bg-secondary-light-50 {
  background-color: rgb(var(--color-secondary-light-50)/var(--bg-opacity));
}

.color-secondary-dark-60 {
  color: rgb(var(--color-secondary-dark-60)/var(--color-opacity));
}

.bg-secondary-dark-60 {
  background-color: rgb(var(--color-secondary-dark-60)/var(--bg-opacity));
}

.color-secondary-light-60 {
  color: rgb(var(--color-secondary-light-60)/var(--color-opacity));
}

.bg-secondary-light-60 {
  background-color: rgb(var(--color-secondary-light-60)/var(--bg-opacity));
}

.color-secondary-dark-70 {
  color: rgb(var(--color-secondary-dark-70)/var(--color-opacity));
}

.bg-secondary-dark-70 {
  background-color: rgb(var(--color-secondary-dark-70)/var(--bg-opacity));
}

.color-secondary-light-70 {
  color: rgb(var(--color-secondary-light-70)/var(--color-opacity));
}

.bg-secondary-light-70 {
  background-color: rgb(var(--color-secondary-light-70)/var(--bg-opacity));
}

.color-secondary-dark-80 {
  color: rgb(var(--color-secondary-dark-80)/var(--color-opacity));
}

.bg-secondary-dark-80 {
  background-color: rgb(var(--color-secondary-dark-80)/var(--bg-opacity));
}

.color-secondary-light-80 {
  color: rgb(var(--color-secondary-light-80)/var(--color-opacity));
}

.bg-secondary-light-80 {
  background-color: rgb(var(--color-secondary-light-80)/var(--bg-opacity));
}

.color-secondary-dark-90 {
  color: rgb(var(--color-secondary-dark-90)/var(--color-opacity));
}

.bg-secondary-dark-90 {
  background-color: rgb(var(--color-secondary-dark-90)/var(--bg-opacity));
}

.color-secondary-light-90 {
  color: rgb(var(--color-secondary-light-90)/var(--color-opacity));
}

.bg-secondary-light-90 {
  background-color: rgb(var(--color-secondary-light-90)/var(--bg-opacity));
}

.color-kaki {
  color: rgb(var(--color-kaki)/var(--color-opacity));
}

.bg-kaki {
  background-color: rgb(var(--color-kaki)/var(--bg-opacity));
}

.border-kaki {
  border-color: rgb(var(--color-kaki)/var(--border-opacity));
}

.shadow-kaki {
  --shadow-color: var(--color-kaki);
  box-shadow: 0 0 var(--shadow-blur) 0 rgb(var(--shadow-color)/var(--shadow-opacity));
}

.color-kaki-dark-10 {
  color: rgb(var(--color-kaki-dark-10)/var(--color-opacity));
}

.bg-kaki-dark-10 {
  background-color: rgb(var(--color-kaki-dark-10)/var(--bg-opacity));
}

.color-kaki-light-10 {
  color: rgb(var(--color-kaki-light-10)/var(--color-opacity));
}

.bg-kaki-light-10 {
  background-color: rgb(var(--color-kaki-light-10)/var(--bg-opacity));
}

.color-kaki-dark-20 {
  color: rgb(var(--color-kaki-dark-20)/var(--color-opacity));
}

.bg-kaki-dark-20 {
  background-color: rgb(var(--color-kaki-dark-20)/var(--bg-opacity));
}

.color-kaki-light-20 {
  color: rgb(var(--color-kaki-light-20)/var(--color-opacity));
}

.bg-kaki-light-20 {
  background-color: rgb(var(--color-kaki-light-20)/var(--bg-opacity));
}

.color-kaki-dark-30 {
  color: rgb(var(--color-kaki-dark-30)/var(--color-opacity));
}

.bg-kaki-dark-30 {
  background-color: rgb(var(--color-kaki-dark-30)/var(--bg-opacity));
}

.color-kaki-light-30 {
  color: rgb(var(--color-kaki-light-30)/var(--color-opacity));
}

.bg-kaki-light-30 {
  background-color: rgb(var(--color-kaki-light-30)/var(--bg-opacity));
}

.color-kaki-dark-40 {
  color: rgb(var(--color-kaki-dark-40)/var(--color-opacity));
}

.bg-kaki-dark-40 {
  background-color: rgb(var(--color-kaki-dark-40)/var(--bg-opacity));
}

.color-kaki-light-40 {
  color: rgb(var(--color-kaki-light-40)/var(--color-opacity));
}

.bg-kaki-light-40 {
  background-color: rgb(var(--color-kaki-light-40)/var(--bg-opacity));
}

.color-kaki-dark-50 {
  color: rgb(var(--color-kaki-dark-50)/var(--color-opacity));
}

.bg-kaki-dark-50 {
  background-color: rgb(var(--color-kaki-dark-50)/var(--bg-opacity));
}

.color-kaki-light-50 {
  color: rgb(var(--color-kaki-light-50)/var(--color-opacity));
}

.bg-kaki-light-50 {
  background-color: rgb(var(--color-kaki-light-50)/var(--bg-opacity));
}

.color-kaki-dark-60 {
  color: rgb(var(--color-kaki-dark-60)/var(--color-opacity));
}

.bg-kaki-dark-60 {
  background-color: rgb(var(--color-kaki-dark-60)/var(--bg-opacity));
}

.color-kaki-light-60 {
  color: rgb(var(--color-kaki-light-60)/var(--color-opacity));
}

.bg-kaki-light-60 {
  background-color: rgb(var(--color-kaki-light-60)/var(--bg-opacity));
}

.color-kaki-dark-70 {
  color: rgb(var(--color-kaki-dark-70)/var(--color-opacity));
}

.bg-kaki-dark-70 {
  background-color: rgb(var(--color-kaki-dark-70)/var(--bg-opacity));
}

.color-kaki-light-70 {
  color: rgb(var(--color-kaki-light-70)/var(--color-opacity));
}

.bg-kaki-light-70 {
  background-color: rgb(var(--color-kaki-light-70)/var(--bg-opacity));
}

.color-kaki-dark-80 {
  color: rgb(var(--color-kaki-dark-80)/var(--color-opacity));
}

.bg-kaki-dark-80 {
  background-color: rgb(var(--color-kaki-dark-80)/var(--bg-opacity));
}

.color-kaki-light-80 {
  color: rgb(var(--color-kaki-light-80)/var(--color-opacity));
}

.bg-kaki-light-80 {
  background-color: rgb(var(--color-kaki-light-80)/var(--bg-opacity));
}

.color-kaki-dark-90 {
  color: rgb(var(--color-kaki-dark-90)/var(--color-opacity));
}

.bg-kaki-dark-90 {
  background-color: rgb(var(--color-kaki-dark-90)/var(--bg-opacity));
}

.color-kaki-light-90 {
  color: rgb(var(--color-kaki-light-90)/var(--color-opacity));
}

.bg-kaki-light-90 {
  background-color: rgb(var(--color-kaki-light-90)/var(--bg-opacity));
}

.color-darkgrey {
  color: rgb(var(--color-darkgrey)/var(--color-opacity));
}

.bg-darkgrey {
  background-color: rgb(var(--color-darkgrey)/var(--bg-opacity));
}

.border-darkgrey {
  border-color: rgb(var(--color-darkgrey)/var(--border-opacity));
}

.shadow-darkgrey {
  --shadow-color: var(--color-darkgrey);
  box-shadow: 0 0 var(--shadow-blur) 0 rgb(var(--shadow-color)/var(--shadow-opacity));
}

.color-darkgrey-dark-10 {
  color: rgb(var(--color-darkgrey-dark-10)/var(--color-opacity));
}

.bg-darkgrey-dark-10 {
  background-color: rgb(var(--color-darkgrey-dark-10)/var(--bg-opacity));
}

.color-darkgrey-light-10 {
  color: rgb(var(--color-darkgrey-light-10)/var(--color-opacity));
}

.bg-darkgrey-light-10 {
  background-color: rgb(var(--color-darkgrey-light-10)/var(--bg-opacity));
}

.color-darkgrey-dark-20 {
  color: rgb(var(--color-darkgrey-dark-20)/var(--color-opacity));
}

.bg-darkgrey-dark-20 {
  background-color: rgb(var(--color-darkgrey-dark-20)/var(--bg-opacity));
}

.color-darkgrey-light-20 {
  color: rgb(var(--color-darkgrey-light-20)/var(--color-opacity));
}

.bg-darkgrey-light-20 {
  background-color: rgb(var(--color-darkgrey-light-20)/var(--bg-opacity));
}

.color-darkgrey-dark-30 {
  color: rgb(var(--color-darkgrey-dark-30)/var(--color-opacity));
}

.bg-darkgrey-dark-30 {
  background-color: rgb(var(--color-darkgrey-dark-30)/var(--bg-opacity));
}

.color-darkgrey-light-30 {
  color: rgb(var(--color-darkgrey-light-30)/var(--color-opacity));
}

.bg-darkgrey-light-30 {
  background-color: rgb(var(--color-darkgrey-light-30)/var(--bg-opacity));
}

.color-darkgrey-dark-40 {
  color: rgb(var(--color-darkgrey-dark-40)/var(--color-opacity));
}

.bg-darkgrey-dark-40 {
  background-color: rgb(var(--color-darkgrey-dark-40)/var(--bg-opacity));
}

.color-darkgrey-light-40 {
  color: rgb(var(--color-darkgrey-light-40)/var(--color-opacity));
}

.bg-darkgrey-light-40 {
  background-color: rgb(var(--color-darkgrey-light-40)/var(--bg-opacity));
}

.color-darkgrey-dark-50 {
  color: rgb(var(--color-darkgrey-dark-50)/var(--color-opacity));
}

.bg-darkgrey-dark-50 {
  background-color: rgb(var(--color-darkgrey-dark-50)/var(--bg-opacity));
}

.color-darkgrey-light-50 {
  color: rgb(var(--color-darkgrey-light-50)/var(--color-opacity));
}

.bg-darkgrey-light-50 {
  background-color: rgb(var(--color-darkgrey-light-50)/var(--bg-opacity));
}

.color-darkgrey-dark-60 {
  color: rgb(var(--color-darkgrey-dark-60)/var(--color-opacity));
}

.bg-darkgrey-dark-60 {
  background-color: rgb(var(--color-darkgrey-dark-60)/var(--bg-opacity));
}

.color-darkgrey-light-60 {
  color: rgb(var(--color-darkgrey-light-60)/var(--color-opacity));
}

.bg-darkgrey-light-60 {
  background-color: rgb(var(--color-darkgrey-light-60)/var(--bg-opacity));
}

.color-darkgrey-dark-70 {
  color: rgb(var(--color-darkgrey-dark-70)/var(--color-opacity));
}

.bg-darkgrey-dark-70 {
  background-color: rgb(var(--color-darkgrey-dark-70)/var(--bg-opacity));
}

.color-darkgrey-light-70 {
  color: rgb(var(--color-darkgrey-light-70)/var(--color-opacity));
}

.bg-darkgrey-light-70 {
  background-color: rgb(var(--color-darkgrey-light-70)/var(--bg-opacity));
}

.color-darkgrey-dark-80 {
  color: rgb(var(--color-darkgrey-dark-80)/var(--color-opacity));
}

.bg-darkgrey-dark-80 {
  background-color: rgb(var(--color-darkgrey-dark-80)/var(--bg-opacity));
}

.color-darkgrey-light-80 {
  color: rgb(var(--color-darkgrey-light-80)/var(--color-opacity));
}

.bg-darkgrey-light-80 {
  background-color: rgb(var(--color-darkgrey-light-80)/var(--bg-opacity));
}

.color-darkgrey-dark-90 {
  color: rgb(var(--color-darkgrey-dark-90)/var(--color-opacity));
}

.bg-darkgrey-dark-90 {
  background-color: rgb(var(--color-darkgrey-dark-90)/var(--bg-opacity));
}

.color-darkgrey-light-90 {
  color: rgb(var(--color-darkgrey-light-90)/var(--color-opacity));
}

.bg-darkgrey-light-90 {
  background-color: rgb(var(--color-darkgrey-light-90)/var(--bg-opacity));
}

.color-darkred {
  color: rgb(var(--color-darkred)/var(--color-opacity));
}

.bg-darkred {
  background-color: rgb(var(--color-darkred)/var(--bg-opacity));
}

.border-darkred {
  border-color: rgb(var(--color-darkred)/var(--border-opacity));
}

.shadow-darkred {
  --shadow-color: var(--color-darkred);
  box-shadow: 0 0 var(--shadow-blur) 0 rgb(var(--shadow-color)/var(--shadow-opacity));
}

.color-darkred-dark-10 {
  color: rgb(var(--color-darkred-dark-10)/var(--color-opacity));
}

.bg-darkred-dark-10 {
  background-color: rgb(var(--color-darkred-dark-10)/var(--bg-opacity));
}

.color-darkred-light-10 {
  color: rgb(var(--color-darkred-light-10)/var(--color-opacity));
}

.bg-darkred-light-10 {
  background-color: rgb(var(--color-darkred-light-10)/var(--bg-opacity));
}

.color-darkred-dark-20 {
  color: rgb(var(--color-darkred-dark-20)/var(--color-opacity));
}

.bg-darkred-dark-20 {
  background-color: rgb(var(--color-darkred-dark-20)/var(--bg-opacity));
}

.color-darkred-light-20 {
  color: rgb(var(--color-darkred-light-20)/var(--color-opacity));
}

.bg-darkred-light-20 {
  background-color: rgb(var(--color-darkred-light-20)/var(--bg-opacity));
}

.color-darkred-dark-30 {
  color: rgb(var(--color-darkred-dark-30)/var(--color-opacity));
}

.bg-darkred-dark-30 {
  background-color: rgb(var(--color-darkred-dark-30)/var(--bg-opacity));
}

.color-darkred-light-30 {
  color: rgb(var(--color-darkred-light-30)/var(--color-opacity));
}

.bg-darkred-light-30 {
  background-color: rgb(var(--color-darkred-light-30)/var(--bg-opacity));
}

.color-darkred-dark-40 {
  color: rgb(var(--color-darkred-dark-40)/var(--color-opacity));
}

.bg-darkred-dark-40 {
  background-color: rgb(var(--color-darkred-dark-40)/var(--bg-opacity));
}

.color-darkred-light-40 {
  color: rgb(var(--color-darkred-light-40)/var(--color-opacity));
}

.bg-darkred-light-40 {
  background-color: rgb(var(--color-darkred-light-40)/var(--bg-opacity));
}

.color-darkred-dark-50 {
  color: rgb(var(--color-darkred-dark-50)/var(--color-opacity));
}

.bg-darkred-dark-50 {
  background-color: rgb(var(--color-darkred-dark-50)/var(--bg-opacity));
}

.color-darkred-light-50 {
  color: rgb(var(--color-darkred-light-50)/var(--color-opacity));
}

.bg-darkred-light-50 {
  background-color: rgb(var(--color-darkred-light-50)/var(--bg-opacity));
}

.color-darkred-dark-60 {
  color: rgb(var(--color-darkred-dark-60)/var(--color-opacity));
}

.bg-darkred-dark-60 {
  background-color: rgb(var(--color-darkred-dark-60)/var(--bg-opacity));
}

.color-darkred-light-60 {
  color: rgb(var(--color-darkred-light-60)/var(--color-opacity));
}

.bg-darkred-light-60 {
  background-color: rgb(var(--color-darkred-light-60)/var(--bg-opacity));
}

.color-darkred-dark-70 {
  color: rgb(var(--color-darkred-dark-70)/var(--color-opacity));
}

.bg-darkred-dark-70 {
  background-color: rgb(var(--color-darkred-dark-70)/var(--bg-opacity));
}

.color-darkred-light-70 {
  color: rgb(var(--color-darkred-light-70)/var(--color-opacity));
}

.bg-darkred-light-70 {
  background-color: rgb(var(--color-darkred-light-70)/var(--bg-opacity));
}

.color-darkred-dark-80 {
  color: rgb(var(--color-darkred-dark-80)/var(--color-opacity));
}

.bg-darkred-dark-80 {
  background-color: rgb(var(--color-darkred-dark-80)/var(--bg-opacity));
}

.color-darkred-light-80 {
  color: rgb(var(--color-darkred-light-80)/var(--color-opacity));
}

.bg-darkred-light-80 {
  background-color: rgb(var(--color-darkred-light-80)/var(--bg-opacity));
}

.color-darkred-dark-90 {
  color: rgb(var(--color-darkred-dark-90)/var(--color-opacity));
}

.bg-darkred-dark-90 {
  background-color: rgb(var(--color-darkred-dark-90)/var(--bg-opacity));
}

.color-darkred-light-90 {
  color: rgb(var(--color-darkred-light-90)/var(--color-opacity));
}

.bg-darkred-light-90 {
  background-color: rgb(var(--color-darkred-light-90)/var(--bg-opacity));
}

.color-success {
  color: rgb(var(--color-success)/var(--color-opacity));
}

.bg-success {
  background-color: rgb(var(--color-success)/var(--bg-opacity));
}

.border-success {
  border-color: rgb(var(--color-success)/var(--border-opacity));
}

.shadow-success {
  --shadow-color: var(--color-success);
  box-shadow: 0 0 var(--shadow-blur) 0 rgb(var(--shadow-color)/var(--shadow-opacity));
}

.color-success-dark-10 {
  color: rgb(var(--color-success-dark-10)/var(--color-opacity));
}

.bg-success-dark-10 {
  background-color: rgb(var(--color-success-dark-10)/var(--bg-opacity));
}

.color-success-light-10 {
  color: rgb(var(--color-success-light-10)/var(--color-opacity));
}

.bg-success-light-10 {
  background-color: rgb(var(--color-success-light-10)/var(--bg-opacity));
}

.color-success-dark-20 {
  color: rgb(var(--color-success-dark-20)/var(--color-opacity));
}

.bg-success-dark-20 {
  background-color: rgb(var(--color-success-dark-20)/var(--bg-opacity));
}

.color-success-light-20 {
  color: rgb(var(--color-success-light-20)/var(--color-opacity));
}

.bg-success-light-20 {
  background-color: rgb(var(--color-success-light-20)/var(--bg-opacity));
}

.color-success-dark-30 {
  color: rgb(var(--color-success-dark-30)/var(--color-opacity));
}

.bg-success-dark-30 {
  background-color: rgb(var(--color-success-dark-30)/var(--bg-opacity));
}

.color-success-light-30 {
  color: rgb(var(--color-success-light-30)/var(--color-opacity));
}

.bg-success-light-30 {
  background-color: rgb(var(--color-success-light-30)/var(--bg-opacity));
}

.color-success-dark-40 {
  color: rgb(var(--color-success-dark-40)/var(--color-opacity));
}

.bg-success-dark-40 {
  background-color: rgb(var(--color-success-dark-40)/var(--bg-opacity));
}

.color-success-light-40 {
  color: rgb(var(--color-success-light-40)/var(--color-opacity));
}

.bg-success-light-40 {
  background-color: rgb(var(--color-success-light-40)/var(--bg-opacity));
}

.color-success-dark-50 {
  color: rgb(var(--color-success-dark-50)/var(--color-opacity));
}

.bg-success-dark-50 {
  background-color: rgb(var(--color-success-dark-50)/var(--bg-opacity));
}

.color-success-light-50 {
  color: rgb(var(--color-success-light-50)/var(--color-opacity));
}

.bg-success-light-50 {
  background-color: rgb(var(--color-success-light-50)/var(--bg-opacity));
}

.color-success-dark-60 {
  color: rgb(var(--color-success-dark-60)/var(--color-opacity));
}

.bg-success-dark-60 {
  background-color: rgb(var(--color-success-dark-60)/var(--bg-opacity));
}

.color-success-light-60 {
  color: rgb(var(--color-success-light-60)/var(--color-opacity));
}

.bg-success-light-60 {
  background-color: rgb(var(--color-success-light-60)/var(--bg-opacity));
}

.color-success-dark-70 {
  color: rgb(var(--color-success-dark-70)/var(--color-opacity));
}

.bg-success-dark-70 {
  background-color: rgb(var(--color-success-dark-70)/var(--bg-opacity));
}

.color-success-light-70 {
  color: rgb(var(--color-success-light-70)/var(--color-opacity));
}

.bg-success-light-70 {
  background-color: rgb(var(--color-success-light-70)/var(--bg-opacity));
}

.color-success-dark-80 {
  color: rgb(var(--color-success-dark-80)/var(--color-opacity));
}

.bg-success-dark-80 {
  background-color: rgb(var(--color-success-dark-80)/var(--bg-opacity));
}

.color-success-light-80 {
  color: rgb(var(--color-success-light-80)/var(--color-opacity));
}

.bg-success-light-80 {
  background-color: rgb(var(--color-success-light-80)/var(--bg-opacity));
}

.color-success-dark-90 {
  color: rgb(var(--color-success-dark-90)/var(--color-opacity));
}

.bg-success-dark-90 {
  background-color: rgb(var(--color-success-dark-90)/var(--bg-opacity));
}

.color-success-light-90 {
  color: rgb(var(--color-success-light-90)/var(--color-opacity));
}

.bg-success-light-90 {
  background-color: rgb(var(--color-success-light-90)/var(--bg-opacity));
}

.color-warning {
  color: rgb(var(--color-warning)/var(--color-opacity));
}

.bg-warning {
  background-color: rgb(var(--color-warning)/var(--bg-opacity));
}

.border-warning {
  border-color: rgb(var(--color-warning)/var(--border-opacity));
}

.shadow-warning {
  --shadow-color: var(--color-warning);
  box-shadow: 0 0 var(--shadow-blur) 0 rgb(var(--shadow-color)/var(--shadow-opacity));
}

.color-warning-dark-10 {
  color: rgb(var(--color-warning-dark-10)/var(--color-opacity));
}

.bg-warning-dark-10 {
  background-color: rgb(var(--color-warning-dark-10)/var(--bg-opacity));
}

.color-warning-light-10 {
  color: rgb(var(--color-warning-light-10)/var(--color-opacity));
}

.bg-warning-light-10 {
  background-color: rgb(var(--color-warning-light-10)/var(--bg-opacity));
}

.color-warning-dark-20 {
  color: rgb(var(--color-warning-dark-20)/var(--color-opacity));
}

.bg-warning-dark-20 {
  background-color: rgb(var(--color-warning-dark-20)/var(--bg-opacity));
}

.color-warning-light-20 {
  color: rgb(var(--color-warning-light-20)/var(--color-opacity));
}

.bg-warning-light-20 {
  background-color: rgb(var(--color-warning-light-20)/var(--bg-opacity));
}

.color-warning-dark-30 {
  color: rgb(var(--color-warning-dark-30)/var(--color-opacity));
}

.bg-warning-dark-30 {
  background-color: rgb(var(--color-warning-dark-30)/var(--bg-opacity));
}

.color-warning-light-30 {
  color: rgb(var(--color-warning-light-30)/var(--color-opacity));
}

.bg-warning-light-30 {
  background-color: rgb(var(--color-warning-light-30)/var(--bg-opacity));
}

.color-warning-dark-40 {
  color: rgb(var(--color-warning-dark-40)/var(--color-opacity));
}

.bg-warning-dark-40 {
  background-color: rgb(var(--color-warning-dark-40)/var(--bg-opacity));
}

.color-warning-light-40 {
  color: rgb(var(--color-warning-light-40)/var(--color-opacity));
}

.bg-warning-light-40 {
  background-color: rgb(var(--color-warning-light-40)/var(--bg-opacity));
}

.color-warning-dark-50 {
  color: rgb(var(--color-warning-dark-50)/var(--color-opacity));
}

.bg-warning-dark-50 {
  background-color: rgb(var(--color-warning-dark-50)/var(--bg-opacity));
}

.color-warning-light-50 {
  color: rgb(var(--color-warning-light-50)/var(--color-opacity));
}

.bg-warning-light-50 {
  background-color: rgb(var(--color-warning-light-50)/var(--bg-opacity));
}

.color-warning-dark-60 {
  color: rgb(var(--color-warning-dark-60)/var(--color-opacity));
}

.bg-warning-dark-60 {
  background-color: rgb(var(--color-warning-dark-60)/var(--bg-opacity));
}

.color-warning-light-60 {
  color: rgb(var(--color-warning-light-60)/var(--color-opacity));
}

.bg-warning-light-60 {
  background-color: rgb(var(--color-warning-light-60)/var(--bg-opacity));
}

.color-warning-dark-70 {
  color: rgb(var(--color-warning-dark-70)/var(--color-opacity));
}

.bg-warning-dark-70 {
  background-color: rgb(var(--color-warning-dark-70)/var(--bg-opacity));
}

.color-warning-light-70 {
  color: rgb(var(--color-warning-light-70)/var(--color-opacity));
}

.bg-warning-light-70 {
  background-color: rgb(var(--color-warning-light-70)/var(--bg-opacity));
}

.color-warning-dark-80 {
  color: rgb(var(--color-warning-dark-80)/var(--color-opacity));
}

.bg-warning-dark-80 {
  background-color: rgb(var(--color-warning-dark-80)/var(--bg-opacity));
}

.color-warning-light-80 {
  color: rgb(var(--color-warning-light-80)/var(--color-opacity));
}

.bg-warning-light-80 {
  background-color: rgb(var(--color-warning-light-80)/var(--bg-opacity));
}

.color-warning-dark-90 {
  color: rgb(var(--color-warning-dark-90)/var(--color-opacity));
}

.bg-warning-dark-90 {
  background-color: rgb(var(--color-warning-dark-90)/var(--bg-opacity));
}

.color-warning-light-90 {
  color: rgb(var(--color-warning-light-90)/var(--color-opacity));
}

.bg-warning-light-90 {
  background-color: rgb(var(--color-warning-light-90)/var(--bg-opacity));
}

.color-danger {
  color: rgb(var(--color-danger)/var(--color-opacity));
}

.bg-danger {
  background-color: rgb(var(--color-danger)/var(--bg-opacity));
}

.border-danger {
  border-color: rgb(var(--color-danger)/var(--border-opacity));
}

.shadow-danger {
  --shadow-color: var(--color-danger);
  box-shadow: 0 0 var(--shadow-blur) 0 rgb(var(--shadow-color)/var(--shadow-opacity));
}

.color-danger-dark-10 {
  color: rgb(var(--color-danger-dark-10)/var(--color-opacity));
}

.bg-danger-dark-10 {
  background-color: rgb(var(--color-danger-dark-10)/var(--bg-opacity));
}

.color-danger-light-10 {
  color: rgb(var(--color-danger-light-10)/var(--color-opacity));
}

.bg-danger-light-10 {
  background-color: rgb(var(--color-danger-light-10)/var(--bg-opacity));
}

.color-danger-dark-20 {
  color: rgb(var(--color-danger-dark-20)/var(--color-opacity));
}

.bg-danger-dark-20 {
  background-color: rgb(var(--color-danger-dark-20)/var(--bg-opacity));
}

.color-danger-light-20 {
  color: rgb(var(--color-danger-light-20)/var(--color-opacity));
}

.bg-danger-light-20 {
  background-color: rgb(var(--color-danger-light-20)/var(--bg-opacity));
}

.color-danger-dark-30 {
  color: rgb(var(--color-danger-dark-30)/var(--color-opacity));
}

.bg-danger-dark-30 {
  background-color: rgb(var(--color-danger-dark-30)/var(--bg-opacity));
}

.color-danger-light-30 {
  color: rgb(var(--color-danger-light-30)/var(--color-opacity));
}

.bg-danger-light-30 {
  background-color: rgb(var(--color-danger-light-30)/var(--bg-opacity));
}

.color-danger-dark-40 {
  color: rgb(var(--color-danger-dark-40)/var(--color-opacity));
}

.bg-danger-dark-40 {
  background-color: rgb(var(--color-danger-dark-40)/var(--bg-opacity));
}

.color-danger-light-40 {
  color: rgb(var(--color-danger-light-40)/var(--color-opacity));
}

.bg-danger-light-40 {
  background-color: rgb(var(--color-danger-light-40)/var(--bg-opacity));
}

.color-danger-dark-50 {
  color: rgb(var(--color-danger-dark-50)/var(--color-opacity));
}

.bg-danger-dark-50 {
  background-color: rgb(var(--color-danger-dark-50)/var(--bg-opacity));
}

.color-danger-light-50 {
  color: rgb(var(--color-danger-light-50)/var(--color-opacity));
}

.bg-danger-light-50 {
  background-color: rgb(var(--color-danger-light-50)/var(--bg-opacity));
}

.color-danger-dark-60 {
  color: rgb(var(--color-danger-dark-60)/var(--color-opacity));
}

.bg-danger-dark-60 {
  background-color: rgb(var(--color-danger-dark-60)/var(--bg-opacity));
}

.color-danger-light-60 {
  color: rgb(var(--color-danger-light-60)/var(--color-opacity));
}

.bg-danger-light-60 {
  background-color: rgb(var(--color-danger-light-60)/var(--bg-opacity));
}

.color-danger-dark-70 {
  color: rgb(var(--color-danger-dark-70)/var(--color-opacity));
}

.bg-danger-dark-70 {
  background-color: rgb(var(--color-danger-dark-70)/var(--bg-opacity));
}

.color-danger-light-70 {
  color: rgb(var(--color-danger-light-70)/var(--color-opacity));
}

.bg-danger-light-70 {
  background-color: rgb(var(--color-danger-light-70)/var(--bg-opacity));
}

.color-danger-dark-80 {
  color: rgb(var(--color-danger-dark-80)/var(--color-opacity));
}

.bg-danger-dark-80 {
  background-color: rgb(var(--color-danger-dark-80)/var(--bg-opacity));
}

.color-danger-light-80 {
  color: rgb(var(--color-danger-light-80)/var(--color-opacity));
}

.bg-danger-light-80 {
  background-color: rgb(var(--color-danger-light-80)/var(--bg-opacity));
}

.color-danger-dark-90 {
  color: rgb(var(--color-danger-dark-90)/var(--color-opacity));
}

.bg-danger-dark-90 {
  background-color: rgb(var(--color-danger-dark-90)/var(--bg-opacity));
}

.color-danger-light-90 {
  color: rgb(var(--color-danger-light-90)/var(--color-opacity));
}

.bg-danger-light-90 {
  background-color: rgb(var(--color-danger-light-90)/var(--bg-opacity));
}

.color-info {
  color: rgb(var(--color-info)/var(--color-opacity));
}

.bg-info {
  background-color: rgb(var(--color-info)/var(--bg-opacity));
}

.border-info {
  border-color: rgb(var(--color-info)/var(--border-opacity));
}

.shadow-info {
  --shadow-color: var(--color-info);
  box-shadow: 0 0 var(--shadow-blur) 0 rgb(var(--shadow-color)/var(--shadow-opacity));
}

.color-info-dark-10 {
  color: rgb(var(--color-info-dark-10)/var(--color-opacity));
}

.bg-info-dark-10 {
  background-color: rgb(var(--color-info-dark-10)/var(--bg-opacity));
}

.color-info-light-10 {
  color: rgb(var(--color-info-light-10)/var(--color-opacity));
}

.bg-info-light-10 {
  background-color: rgb(var(--color-info-light-10)/var(--bg-opacity));
}

.color-info-dark-20 {
  color: rgb(var(--color-info-dark-20)/var(--color-opacity));
}

.bg-info-dark-20 {
  background-color: rgb(var(--color-info-dark-20)/var(--bg-opacity));
}

.color-info-light-20 {
  color: rgb(var(--color-info-light-20)/var(--color-opacity));
}

.bg-info-light-20 {
  background-color: rgb(var(--color-info-light-20)/var(--bg-opacity));
}

.color-info-dark-30 {
  color: rgb(var(--color-info-dark-30)/var(--color-opacity));
}

.bg-info-dark-30 {
  background-color: rgb(var(--color-info-dark-30)/var(--bg-opacity));
}

.color-info-light-30 {
  color: rgb(var(--color-info-light-30)/var(--color-opacity));
}

.bg-info-light-30 {
  background-color: rgb(var(--color-info-light-30)/var(--bg-opacity));
}

.color-info-dark-40 {
  color: rgb(var(--color-info-dark-40)/var(--color-opacity));
}

.bg-info-dark-40 {
  background-color: rgb(var(--color-info-dark-40)/var(--bg-opacity));
}

.color-info-light-40 {
  color: rgb(var(--color-info-light-40)/var(--color-opacity));
}

.bg-info-light-40 {
  background-color: rgb(var(--color-info-light-40)/var(--bg-opacity));
}

.color-info-dark-50 {
  color: rgb(var(--color-info-dark-50)/var(--color-opacity));
}

.bg-info-dark-50 {
  background-color: rgb(var(--color-info-dark-50)/var(--bg-opacity));
}

.color-info-light-50 {
  color: rgb(var(--color-info-light-50)/var(--color-opacity));
}

.bg-info-light-50 {
  background-color: rgb(var(--color-info-light-50)/var(--bg-opacity));
}

.color-info-dark-60 {
  color: rgb(var(--color-info-dark-60)/var(--color-opacity));
}

.bg-info-dark-60 {
  background-color: rgb(var(--color-info-dark-60)/var(--bg-opacity));
}

.color-info-light-60 {
  color: rgb(var(--color-info-light-60)/var(--color-opacity));
}

.bg-info-light-60 {
  background-color: rgb(var(--color-info-light-60)/var(--bg-opacity));
}

.color-info-dark-70 {
  color: rgb(var(--color-info-dark-70)/var(--color-opacity));
}

.bg-info-dark-70 {
  background-color: rgb(var(--color-info-dark-70)/var(--bg-opacity));
}

.color-info-light-70 {
  color: rgb(var(--color-info-light-70)/var(--color-opacity));
}

.bg-info-light-70 {
  background-color: rgb(var(--color-info-light-70)/var(--bg-opacity));
}

.color-info-dark-80 {
  color: rgb(var(--color-info-dark-80)/var(--color-opacity));
}

.bg-info-dark-80 {
  background-color: rgb(var(--color-info-dark-80)/var(--bg-opacity));
}

.color-info-light-80 {
  color: rgb(var(--color-info-light-80)/var(--color-opacity));
}

.bg-info-light-80 {
  background-color: rgb(var(--color-info-light-80)/var(--bg-opacity));
}

.color-info-dark-90 {
  color: rgb(var(--color-info-dark-90)/var(--color-opacity));
}

.bg-info-dark-90 {
  background-color: rgb(var(--color-info-dark-90)/var(--bg-opacity));
}

.color-info-light-90 {
  color: rgb(var(--color-info-light-90)/var(--color-opacity));
}

.bg-info-light-90 {
  background-color: rgb(var(--color-info-light-90)/var(--bg-opacity));
}

.color-black {
  color: rgb(var(--color-black)/var(--color-opacity));
}

.bg-black {
  background-color: rgb(var(--color-black)/var(--bg-opacity));
}

.border-black {
  border-color: rgb(var(--color-black)/var(--border-opacity));
}

.shadow-black {
  --shadow-color: var(--color-black);
  box-shadow: 0 0 var(--shadow-blur) 0 rgb(var(--shadow-color)/var(--shadow-opacity));
}

.color-black-dark-10 {
  color: rgb(var(--color-black-dark-10)/var(--color-opacity));
}

.bg-black-dark-10 {
  background-color: rgb(var(--color-black-dark-10)/var(--bg-opacity));
}

.color-black-light-10 {
  color: rgb(var(--color-black-light-10)/var(--color-opacity));
}

.bg-black-light-10 {
  background-color: rgb(var(--color-black-light-10)/var(--bg-opacity));
}

.color-black-dark-20 {
  color: rgb(var(--color-black-dark-20)/var(--color-opacity));
}

.bg-black-dark-20 {
  background-color: rgb(var(--color-black-dark-20)/var(--bg-opacity));
}

.color-black-light-20 {
  color: rgb(var(--color-black-light-20)/var(--color-opacity));
}

.bg-black-light-20 {
  background-color: rgb(var(--color-black-light-20)/var(--bg-opacity));
}

.color-black-dark-30 {
  color: rgb(var(--color-black-dark-30)/var(--color-opacity));
}

.bg-black-dark-30 {
  background-color: rgb(var(--color-black-dark-30)/var(--bg-opacity));
}

.color-black-light-30 {
  color: rgb(var(--color-black-light-30)/var(--color-opacity));
}

.bg-black-light-30 {
  background-color: rgb(var(--color-black-light-30)/var(--bg-opacity));
}

.color-black-dark-40 {
  color: rgb(var(--color-black-dark-40)/var(--color-opacity));
}

.bg-black-dark-40 {
  background-color: rgb(var(--color-black-dark-40)/var(--bg-opacity));
}

.color-black-light-40 {
  color: rgb(var(--color-black-light-40)/var(--color-opacity));
}

.bg-black-light-40 {
  background-color: rgb(var(--color-black-light-40)/var(--bg-opacity));
}

.color-black-dark-50 {
  color: rgb(var(--color-black-dark-50)/var(--color-opacity));
}

.bg-black-dark-50 {
  background-color: rgb(var(--color-black-dark-50)/var(--bg-opacity));
}

.color-black-light-50 {
  color: rgb(var(--color-black-light-50)/var(--color-opacity));
}

.bg-black-light-50 {
  background-color: rgb(var(--color-black-light-50)/var(--bg-opacity));
}

.color-black-dark-60 {
  color: rgb(var(--color-black-dark-60)/var(--color-opacity));
}

.bg-black-dark-60 {
  background-color: rgb(var(--color-black-dark-60)/var(--bg-opacity));
}

.color-black-light-60 {
  color: rgb(var(--color-black-light-60)/var(--color-opacity));
}

.bg-black-light-60 {
  background-color: rgb(var(--color-black-light-60)/var(--bg-opacity));
}

.color-black-dark-70 {
  color: rgb(var(--color-black-dark-70)/var(--color-opacity));
}

.bg-black-dark-70 {
  background-color: rgb(var(--color-black-dark-70)/var(--bg-opacity));
}

.color-black-light-70 {
  color: rgb(var(--color-black-light-70)/var(--color-opacity));
}

.bg-black-light-70 {
  background-color: rgb(var(--color-black-light-70)/var(--bg-opacity));
}

.color-black-dark-80 {
  color: rgb(var(--color-black-dark-80)/var(--color-opacity));
}

.bg-black-dark-80 {
  background-color: rgb(var(--color-black-dark-80)/var(--bg-opacity));
}

.color-black-light-80 {
  color: rgb(var(--color-black-light-80)/var(--color-opacity));
}

.bg-black-light-80 {
  background-color: rgb(var(--color-black-light-80)/var(--bg-opacity));
}

.color-black-dark-90 {
  color: rgb(var(--color-black-dark-90)/var(--color-opacity));
}

.bg-black-dark-90 {
  background-color: rgb(var(--color-black-dark-90)/var(--bg-opacity));
}

.color-black-light-90 {
  color: rgb(var(--color-black-light-90)/var(--color-opacity));
}

.bg-black-light-90 {
  background-color: rgb(var(--color-black-light-90)/var(--bg-opacity));
}

.color-white {
  color: rgb(var(--color-white)/var(--color-opacity));
}

.bg-white {
  background-color: rgb(var(--color-white)/var(--bg-opacity));
}

.border-white {
  border-color: rgb(var(--color-white)/var(--border-opacity));
}

.shadow-white {
  --shadow-color: var(--color-white);
  box-shadow: 0 0 var(--shadow-blur) 0 rgb(var(--shadow-color)/var(--shadow-opacity));
}

.color-white-dark-10 {
  color: rgb(var(--color-white-dark-10)/var(--color-opacity));
}

.bg-white-dark-10 {
  background-color: rgb(var(--color-white-dark-10)/var(--bg-opacity));
}

.color-white-light-10 {
  color: rgb(var(--color-white-light-10)/var(--color-opacity));
}

.bg-white-light-10 {
  background-color: rgb(var(--color-white-light-10)/var(--bg-opacity));
}

.color-white-dark-20 {
  color: rgb(var(--color-white-dark-20)/var(--color-opacity));
}

.bg-white-dark-20 {
  background-color: rgb(var(--color-white-dark-20)/var(--bg-opacity));
}

.color-white-light-20 {
  color: rgb(var(--color-white-light-20)/var(--color-opacity));
}

.bg-white-light-20 {
  background-color: rgb(var(--color-white-light-20)/var(--bg-opacity));
}

.color-white-dark-30 {
  color: rgb(var(--color-white-dark-30)/var(--color-opacity));
}

.bg-white-dark-30 {
  background-color: rgb(var(--color-white-dark-30)/var(--bg-opacity));
}

.color-white-light-30 {
  color: rgb(var(--color-white-light-30)/var(--color-opacity));
}

.bg-white-light-30 {
  background-color: rgb(var(--color-white-light-30)/var(--bg-opacity));
}

.color-white-dark-40 {
  color: rgb(var(--color-white-dark-40)/var(--color-opacity));
}

.bg-white-dark-40 {
  background-color: rgb(var(--color-white-dark-40)/var(--bg-opacity));
}

.color-white-light-40 {
  color: rgb(var(--color-white-light-40)/var(--color-opacity));
}

.bg-white-light-40 {
  background-color: rgb(var(--color-white-light-40)/var(--bg-opacity));
}

.color-white-dark-50 {
  color: rgb(var(--color-white-dark-50)/var(--color-opacity));
}

.bg-white-dark-50 {
  background-color: rgb(var(--color-white-dark-50)/var(--bg-opacity));
}

.color-white-light-50 {
  color: rgb(var(--color-white-light-50)/var(--color-opacity));
}

.bg-white-light-50 {
  background-color: rgb(var(--color-white-light-50)/var(--bg-opacity));
}

.color-white-dark-60 {
  color: rgb(var(--color-white-dark-60)/var(--color-opacity));
}

.bg-white-dark-60 {
  background-color: rgb(var(--color-white-dark-60)/var(--bg-opacity));
}

.color-white-light-60 {
  color: rgb(var(--color-white-light-60)/var(--color-opacity));
}

.bg-white-light-60 {
  background-color: rgb(var(--color-white-light-60)/var(--bg-opacity));
}

.color-white-dark-70 {
  color: rgb(var(--color-white-dark-70)/var(--color-opacity));
}

.bg-white-dark-70 {
  background-color: rgb(var(--color-white-dark-70)/var(--bg-opacity));
}

.color-white-light-70 {
  color: rgb(var(--color-white-light-70)/var(--color-opacity));
}

.bg-white-light-70 {
  background-color: rgb(var(--color-white-light-70)/var(--bg-opacity));
}

.color-white-dark-80 {
  color: rgb(var(--color-white-dark-80)/var(--color-opacity));
}

.bg-white-dark-80 {
  background-color: rgb(var(--color-white-dark-80)/var(--bg-opacity));
}

.color-white-light-80 {
  color: rgb(var(--color-white-light-80)/var(--color-opacity));
}

.bg-white-light-80 {
  background-color: rgb(var(--color-white-light-80)/var(--bg-opacity));
}

.color-white-dark-90 {
  color: rgb(var(--color-white-dark-90)/var(--color-opacity));
}

.bg-white-dark-90 {
  background-color: rgb(var(--color-white-dark-90)/var(--bg-opacity));
}

.color-white-light-90 {
  color: rgb(var(--color-white-light-90)/var(--color-opacity));
}

.bg-white-light-90 {
  background-color: rgb(var(--color-white-light-90)/var(--bg-opacity));
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.grid-row-1 {
  grid-row: span 1;
}

.grid-row-2 {
  grid-row: span 2;
}

.grid-row-3 {
  grid-row: span 3;
}

.grid-row-4 {
  grid-row: span 4;
}

.grid-row-5 {
  grid-row: span 5;
}

.gap-0 {
  gap: 0rem;
}

.gap-1 {
  gap: 0.75rem;
}

.gap-2 {
  gap: 1.5rem;
}

.gap-3 {
  gap: 2.25rem;
}

.gap-4 {
  gap: 3rem;
}

.gap-5 {
  gap: 3.75rem;
}

.gap-6 {
  gap: 4.5rem;
}

.gap-7 {
  gap: 5.25rem;
}

.gap-8 {
  gap: 6rem;
}

.row-gap-0 {
  row-gap: 0rem;
}

.row-gap-1 {
  row-gap: 0.75rem;
}

.row-gap-2 {
  row-gap: 1.5rem;
}

.row-gap-3 {
  row-gap: 2.25rem;
}

.row-gap-4 {
  row-gap: 3rem;
}

.row-gap-5 {
  row-gap: 3.75rem;
}

.row-gap-6 {
  row-gap: 4.5rem;
}

.row-gap-7 {
  row-gap: 5.25rem;
}

.row-gap-8 {
  row-gap: 6rem;
}

.col-gap-0 {
  col-gap: 0rem;
}

.col-gap-1 {
  col-gap: 0.75rem;
}

.col-gap-2 {
  col-gap: 1.5rem;
}

.col-gap-3 {
  col-gap: 2.25rem;
}

.col-gap-4 {
  col-gap: 3rem;
}

.col-gap-5 {
  col-gap: 3.75rem;
}

.col-gap-6 {
  col-gap: 4.5rem;
}

.col-gap-7 {
  col-gap: 5.25rem;
}

.col-gap-8 {
  col-gap: 6rem;
}

@media only screen and (max-width: 1200px) {
  .grid-cols-desktop-1 {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
  }

  .grid-col-desktop-1 {
    grid-column: span 1;
  }

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

  .grid-col-desktop-2 {
    grid-column: span 2;
  }

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

  .grid-col-desktop-3 {
    grid-column: span 3;
  }

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

  .grid-col-desktop-4 {
    grid-column: span 4;
  }

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

  .grid-col-desktop-5 {
    grid-column: span 5;
  }

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

  .grid-col-desktop-6 {
    grid-column: span 6;
  }

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

  .grid-col-desktop-7 {
    grid-column: span 7;
  }

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

  .grid-col-desktop-8 {
    grid-column: span 8;
  }

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

  .grid-col-desktop-9 {
    grid-column: span 9;
  }

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

  .grid-col-desktop-10 {
    grid-column: span 10;
  }

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

  .grid-col-desktop-11 {
    grid-column: span 11;
  }

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

  .grid-col-desktop-12 {
    grid-column: span 12;
  }
}
@media only screen and (max-width: 768px) {
  .grid-cols-tablet-1 {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
  }

  .grid-col-tablet-1 {
    grid-column: span 1;
  }

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

  .grid-col-tablet-2 {
    grid-column: span 2;
  }

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

  .grid-col-tablet-3 {
    grid-column: span 3;
  }

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

  .grid-col-tablet-4 {
    grid-column: span 4;
  }

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

  .grid-col-tablet-5 {
    grid-column: span 5;
  }

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

  .grid-col-tablet-6 {
    grid-column: span 6;
  }

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

  .grid-col-tablet-7 {
    grid-column: span 7;
  }

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

  .grid-col-tablet-8 {
    grid-column: span 8;
  }

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

  .grid-col-tablet-9 {
    grid-column: span 9;
  }

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

  .grid-col-tablet-10 {
    grid-column: span 10;
  }

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

  .grid-col-tablet-11 {
    grid-column: span 11;
  }

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

  .grid-col-tablet-12 {
    grid-column: span 12;
  }
}
@media only screen and (max-width: 600px) {
  .grid-cols-phone-1 {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
  }

  .grid-col-phone-1 {
    grid-column: span 1;
  }

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

  .grid-col-phone-2 {
    grid-column: span 2;
  }

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

  .grid-col-phone-3 {
    grid-column: span 3;
  }

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

  .grid-col-phone-4 {
    grid-column: span 4;
  }

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

  .grid-col-phone-5 {
    grid-column: span 5;
  }

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

  .grid-col-phone-6 {
    grid-column: span 6;
  }

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

  .grid-col-phone-7 {
    grid-column: span 7;
  }

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

  .grid-col-phone-8 {
    grid-column: span 8;
  }

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

  .grid-col-phone-9 {
    grid-column: span 9;
  }

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

  .grid-col-phone-10 {
    grid-column: span 10;
  }

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

  .grid-col-phone-11 {
    grid-column: span 11;
  }

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

  .grid-col-phone-12 {
    grid-column: span 12;
  }
}
.display-flex {
  display: flex;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.item-order-0 {
  order: 0;
}

.item-order-1 {
  order: 1;
}

.item-order-2 {
  order: 2;
}

.item-order-3 {
  order: 3;
}

.item-order-4 {
  order: 4;
}

.item-order-5 {
  order: 5;
}

@media only screen and (max-width: 600px) {
  .display-phone-flex {
    display: flex;
  }

  .display-phone-inline-flex {
    display: inline-flex;
  }

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

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

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

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

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

  .justify-content-phone-space-evenly {
    justify-content: space-evenly;
  }

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

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

  .flex-wrap-phone-wrap-reverse {
    flex-wrap: wrap-reverse;
  }

  .flex-direction-phone-row {
    flex-direction: row;
  }

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

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

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

  .align-self-phone-auto {
    align-self: auto;
  }

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

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

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

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

  .align-self-phone-baseline {
    align-self: baseline;
  }

  .align-content-phone-stretch {
    align-content: stretch;
  }

  .align-content-phone-flex-start {
    align-content: flex-start;
  }

  .align-content-phone-flex-end {
    align-content: flex-end;
  }

  .align-content-phone-center {
    align-content: center;
  }

  .align-content-phone-space-between {
    align-content: space-between;
  }

  .align-content-phone-space-around {
    align-content: space-around;
  }

  .align-content-phone-space-evenly {
    align-content: space-evenly;
  }

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

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

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

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

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

  .flex-grow-phone-0 {
    flex-grow: 0;
  }

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

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

  .flex-shrink-phone-1 {
    flex-shrink: 1;
  }
}
@media only screen and (max-width: 768px) {
  .display-tablet-flex {
    display: flex;
  }

  .display-tablet-inline-flex {
    display: inline-flex;
  }

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

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

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

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

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

  .justify-content-tablet-space-evenly {
    justify-content: space-evenly;
  }

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

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

  .flex-wrap-tablet-wrap-reverse {
    flex-wrap: wrap-reverse;
  }

  .flex-direction-tablet-row {
    flex-direction: row;
  }

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

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

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

  .align-self-tablet-auto {
    align-self: auto;
  }

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

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

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

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

  .align-self-tablet-baseline {
    align-self: baseline;
  }

  .align-content-tablet-stretch {
    align-content: stretch;
  }

  .align-content-tablet-flex-start {
    align-content: flex-start;
  }

  .align-content-tablet-flex-end {
    align-content: flex-end;
  }

  .align-content-tablet-center {
    align-content: center;
  }

  .align-content-tablet-space-between {
    align-content: space-between;
  }

  .align-content-tablet-space-around {
    align-content: space-around;
  }

  .align-content-tablet-space-evenly {
    align-content: space-evenly;
  }

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

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

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

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

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

  .flex-grow-tablet-0 {
    flex-grow: 0;
  }

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

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

  .flex-shrink-tablet-1 {
    flex-shrink: 1;
  }
}
@media only screen and (max-width: 1200px) {
  .display-desktop-flex {
    display: flex;
  }

  .display-desktop-inline-flex {
    display: inline-flex;
  }

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

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

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

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

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

  .justify-content-desktop-space-evenly {
    justify-content: space-evenly;
  }

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

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

  .flex-wrap-desktop-wrap-reverse {
    flex-wrap: wrap-reverse;
  }

  .flex-direction-desktop-row {
    flex-direction: row;
  }

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

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

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

  .align-self-desktop-auto {
    align-self: auto;
  }

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

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

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

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

  .align-self-desktop-baseline {
    align-self: baseline;
  }

  .align-content-desktop-stretch {
    align-content: stretch;
  }

  .align-content-desktop-flex-start {
    align-content: flex-start;
  }

  .align-content-desktop-flex-end {
    align-content: flex-end;
  }

  .align-content-desktop-center {
    align-content: center;
  }

  .align-content-desktop-space-between {
    align-content: space-between;
  }

  .align-content-desktop-space-around {
    align-content: space-around;
  }

  .align-content-desktop-space-evenly {
    align-content: space-evenly;
  }

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

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

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

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

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

  .flex-grow-desktop-0 {
    flex-grow: 0;
  }

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

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

  .flex-shrink-desktop-1 {
    flex-shrink: 1;
  }
}
.mar-0 {
  margin: var(--margin-0);
}

.mar-1 {
  margin: var(--margin-1);
}

.mar-2 {
  margin: var(--margin-2);
}

.mar-3 {
  margin: var(--margin-3);
}

.mar-4 {
  margin: var(--margin-4);
}

.mar-5 {
  margin: var(--margin-5);
}

.mar-6 {
  margin: var(--margin-6);
}

.mar-7 {
  margin: var(--margin-7);
}

.mar-8 {
  margin: var(--margin-8);
}

.mar-y-0 {
  margin-top: var(--margin-0);
  margin-bottom: var(--margin-0);
}

.mar-y-1 {
  margin-top: var(--margin-1);
  margin-bottom: var(--margin-1);
}

.mar-y-2 {
  margin-top: var(--margin-2);
  margin-bottom: var(--margin-2);
}

.mar-y-3 {
  margin-top: var(--margin-3);
  margin-bottom: var(--margin-3);
}

.mar-y-4 {
  margin-top: var(--margin-4);
  margin-bottom: var(--margin-4);
}

.mar-y-5 {
  margin-top: var(--margin-5);
  margin-bottom: var(--margin-5);
}

.mar-y-6 {
  margin-top: var(--margin-6);
  margin-bottom: var(--margin-6);
}

.mar-y-7 {
  margin-top: var(--margin-7);
  margin-bottom: var(--margin-7);
}

.mar-y-8 {
  margin-top: var(--margin-8);
  margin-bottom: var(--margin-8);
}

.mar-x-0 {
  margin-left: var(--margin-0);
  margin-right: var(--margin-0);
}

.mar-x-1 {
  margin-left: var(--margin-1);
  margin-right: var(--margin-1);
}

.mar-x-2 {
  margin-left: var(--margin-2);
  margin-right: var(--margin-2);
}

.mar-x-3 {
  margin-left: var(--margin-3);
  margin-right: var(--margin-3);
}

.mar-x-4 {
  margin-left: var(--margin-4);
  margin-right: var(--margin-4);
}

.mar-x-5 {
  margin-left: var(--margin-5);
  margin-right: var(--margin-5);
}

.mar-x-6 {
  margin-left: var(--margin-6);
  margin-right: var(--margin-6);
}

.mar-x-7 {
  margin-left: var(--margin-7);
  margin-right: var(--margin-7);
}

.mar-x-8 {
  margin-left: var(--margin-8);
  margin-right: var(--margin-8);
}

.mar-t-0 {
  margin-top: var(--margin-0);
}

.mar-t-1 {
  margin-top: var(--margin-1);
}

.mar-t-2 {
  margin-top: var(--margin-2);
}

.mar-t-3 {
  margin-top: var(--margin-3);
}

.mar-t-4 {
  margin-top: var(--margin-4);
}

.mar-t-5 {
  margin-top: var(--margin-5);
}

.mar-t-6 {
  margin-top: var(--margin-6);
}

.mar-t-7 {
  margin-top: var(--margin-7);
}

.mar-t-8 {
  margin-top: var(--margin-8);
}

.mar-r-0 {
  margin-right: var(--margin-0);
}

.mar-r-1 {
  margin-right: var(--margin-1);
}

.mar-r-2 {
  margin-right: var(--margin-2);
}

.mar-r-3 {
  margin-right: var(--margin-3);
}

.mar-r-4 {
  margin-right: var(--margin-4);
}

.mar-r-5 {
  margin-right: var(--margin-5);
}

.mar-r-6 {
  margin-right: var(--margin-6);
}

.mar-r-7 {
  margin-right: var(--margin-7);
}

.mar-r-8 {
  margin-right: var(--margin-8);
}

.mar-b-0 {
  margin-bottom: var(--margin-0);
}

.mar-b-1 {
  margin-bottom: var(--margin-1);
}

.mar-b-2 {
  margin-bottom: var(--margin-2);
}

.mar-b-3 {
  margin-bottom: var(--margin-3);
}

.mar-b-4 {
  margin-bottom: var(--margin-4);
}

.mar-b-5 {
  margin-bottom: var(--margin-5);
}

.mar-b-6 {
  margin-bottom: var(--margin-6);
}

.mar-b-7 {
  margin-bottom: var(--margin-7);
}

.mar-b-8 {
  margin-bottom: var(--margin-8);
}

.mar-l-0 {
  margin-left: var(--margin-0);
}

.mar-l-1 {
  margin-left: var(--margin-1);
}

.mar-l-2 {
  margin-left: var(--margin-2);
}

.mar-l-3 {
  margin-left: var(--margin-3);
}

.mar-l-4 {
  margin-left: var(--margin-4);
}

.mar-l-5 {
  margin-left: var(--margin-5);
}

.mar-l-6 {
  margin-left: var(--margin-6);
}

.mar-l-7 {
  margin-left: var(--margin-7);
}

.mar-l-8 {
  margin-left: var(--margin-8);
}

@media only screen and (max-width: 1200px) {
  .mar-desktop-0 {
    margin: var(--margin-0);
  }

  .mar-desktop-1 {
    margin: var(--margin-1);
  }

  .mar-desktop-2 {
    margin: var(--margin-2);
  }

  .mar-desktop-3 {
    margin: var(--margin-3);
  }

  .mar-desktop-4 {
    margin: var(--margin-4);
  }

  .mar-desktop-5 {
    margin: var(--margin-5);
  }

  .mar-desktop-6 {
    margin: var(--margin-6);
  }

  .mar-desktop-7 {
    margin: var(--margin-7);
  }

  .mar-desktop-8 {
    margin: var(--margin-8);
  }

  .mar-desktop-y-0 {
    margin-top: var(--margin-0);
    margin-bottom: var(--margin-0);
  }

  .mar-desktop-y-1 {
    margin-top: var(--margin-1);
    margin-bottom: var(--margin-1);
  }

  .mar-desktop-y-2 {
    margin-top: var(--margin-2);
    margin-bottom: var(--margin-2);
  }

  .mar-desktop-y-3 {
    margin-top: var(--margin-3);
    margin-bottom: var(--margin-3);
  }

  .mar-desktop-y-4 {
    margin-top: var(--margin-4);
    margin-bottom: var(--margin-4);
  }

  .mar-desktop-y-5 {
    margin-top: var(--margin-5);
    margin-bottom: var(--margin-5);
  }

  .mar-desktop-y-6 {
    margin-top: var(--margin-6);
    margin-bottom: var(--margin-6);
  }

  .mar-desktop-y-7 {
    margin-top: var(--margin-7);
    margin-bottom: var(--margin-7);
  }

  .mar-desktop-y-8 {
    margin-top: var(--margin-8);
    margin-bottom: var(--margin-8);
  }

  .mar-desktop-x-0 {
    margin-left: var(--margin-0);
    margin-right: var(--margin-0);
  }

  .mar-desktop-x-1 {
    margin-left: var(--margin-1);
    margin-right: var(--margin-1);
  }

  .mar-desktop-x-2 {
    margin-left: var(--margin-2);
    margin-right: var(--margin-2);
  }

  .mar-desktop-x-3 {
    margin-left: var(--margin-3);
    margin-right: var(--margin-3);
  }

  .mar-desktop-x-4 {
    margin-left: var(--margin-4);
    margin-right: var(--margin-4);
  }

  .mar-desktop-x-5 {
    margin-left: var(--margin-5);
    margin-right: var(--margin-5);
  }

  .mar-desktop-x-6 {
    margin-left: var(--margin-6);
    margin-right: var(--margin-6);
  }

  .mar-desktop-x-7 {
    margin-left: var(--margin-7);
    margin-right: var(--margin-7);
  }

  .mar-desktop-x-8 {
    margin-left: var(--margin-8);
    margin-right: var(--margin-8);
  }

  .mar-desktop-t-0 {
    margin-top: var(--margin-0);
  }

  .mar-desktop-t-1 {
    margin-top: var(--margin-1);
  }

  .mar-desktop-t-2 {
    margin-top: var(--margin-2);
  }

  .mar-desktop-t-3 {
    margin-top: var(--margin-3);
  }

  .mar-desktop-t-4 {
    margin-top: var(--margin-4);
  }

  .mar-desktop-t-5 {
    margin-top: var(--margin-5);
  }

  .mar-desktop-t-6 {
    margin-top: var(--margin-6);
  }

  .mar-desktop-t-7 {
    margin-top: var(--margin-7);
  }

  .mar-desktop-t-8 {
    margin-top: var(--margin-8);
  }

  .mar-desktop-r-0 {
    margin-right: var(--margin-0);
  }

  .mar-desktop-r-1 {
    margin-right: var(--margin-1);
  }

  .mar-desktop-r-2 {
    margin-right: var(--margin-2);
  }

  .mar-desktop-r-3 {
    margin-right: var(--margin-3);
  }

  .mar-desktop-r-4 {
    margin-right: var(--margin-4);
  }

  .mar-desktop-r-5 {
    margin-right: var(--margin-5);
  }

  .mar-desktop-r-6 {
    margin-right: var(--margin-6);
  }

  .mar-desktop-r-7 {
    margin-right: var(--margin-7);
  }

  .mar-desktop-r-8 {
    margin-right: var(--margin-8);
  }

  .mar-desktop-b-0 {
    margin-bottom: var(--margin-0);
  }

  .mar-desktop-b-1 {
    margin-bottom: var(--margin-1);
  }

  .mar-desktop-b-2 {
    margin-bottom: var(--margin-2);
  }

  .mar-desktop-b-3 {
    margin-bottom: var(--margin-3);
  }

  .mar-desktop-b-4 {
    margin-bottom: var(--margin-4);
  }

  .mar-desktop-b-5 {
    margin-bottom: var(--margin-5);
  }

  .mar-desktop-b-6 {
    margin-bottom: var(--margin-6);
  }

  .mar-desktop-b-7 {
    margin-bottom: var(--margin-7);
  }

  .mar-desktop-b-8 {
    margin-bottom: var(--margin-8);
  }

  .mar-desktop-l-0 {
    margin-left: var(--margin-0);
  }

  .mar-desktop-l-1 {
    margin-left: var(--margin-1);
  }

  .mar-desktop-l-2 {
    margin-left: var(--margin-2);
  }

  .mar-desktop-l-3 {
    margin-left: var(--margin-3);
  }

  .mar-desktop-l-4 {
    margin-left: var(--margin-4);
  }

  .mar-desktop-l-5 {
    margin-left: var(--margin-5);
  }

  .mar-desktop-l-6 {
    margin-left: var(--margin-6);
  }

  .mar-desktop-l-7 {
    margin-left: var(--margin-7);
  }

  .mar-desktop-l-8 {
    margin-left: var(--margin-8);
  }
}
@media only screen and (max-width: 768px) {
  .mar-tablet-0 {
    margin: var(--margin-0);
  }

  .mar-tablet-1 {
    margin: var(--margin-1);
  }

  .mar-tablet-2 {
    margin: var(--margin-2);
  }

  .mar-tablet-3 {
    margin: var(--margin-3);
  }

  .mar-tablet-4 {
    margin: var(--margin-4);
  }

  .mar-tablet-5 {
    margin: var(--margin-5);
  }

  .mar-tablet-6 {
    margin: var(--margin-6);
  }

  .mar-tablet-7 {
    margin: var(--margin-7);
  }

  .mar-tablet-8 {
    margin: var(--margin-8);
  }

  .mar-tablet-y-0 {
    margin-top: var(--margin-0);
    margin-bottom: var(--margin-0);
  }

  .mar-tablet-y-1 {
    margin-top: var(--margin-1);
    margin-bottom: var(--margin-1);
  }

  .mar-tablet-y-2 {
    margin-top: var(--margin-2);
    margin-bottom: var(--margin-2);
  }

  .mar-tablet-y-3 {
    margin-top: var(--margin-3);
    margin-bottom: var(--margin-3);
  }

  .mar-tablet-y-4 {
    margin-top: var(--margin-4);
    margin-bottom: var(--margin-4);
  }

  .mar-tablet-y-5 {
    margin-top: var(--margin-5);
    margin-bottom: var(--margin-5);
  }

  .mar-tablet-y-6 {
    margin-top: var(--margin-6);
    margin-bottom: var(--margin-6);
  }

  .mar-tablet-y-7 {
    margin-top: var(--margin-7);
    margin-bottom: var(--margin-7);
  }

  .mar-tablet-y-8 {
    margin-top: var(--margin-8);
    margin-bottom: var(--margin-8);
  }

  .mar-tablet-x-0 {
    margin-left: var(--margin-0);
    margin-right: var(--margin-0);
  }

  .mar-tablet-x-1 {
    margin-left: var(--margin-1);
    margin-right: var(--margin-1);
  }

  .mar-tablet-x-2 {
    margin-left: var(--margin-2);
    margin-right: var(--margin-2);
  }

  .mar-tablet-x-3 {
    margin-left: var(--margin-3);
    margin-right: var(--margin-3);
  }

  .mar-tablet-x-4 {
    margin-left: var(--margin-4);
    margin-right: var(--margin-4);
  }

  .mar-tablet-x-5 {
    margin-left: var(--margin-5);
    margin-right: var(--margin-5);
  }

  .mar-tablet-x-6 {
    margin-left: var(--margin-6);
    margin-right: var(--margin-6);
  }

  .mar-tablet-x-7 {
    margin-left: var(--margin-7);
    margin-right: var(--margin-7);
  }

  .mar-tablet-x-8 {
    margin-left: var(--margin-8);
    margin-right: var(--margin-8);
  }

  .mar-tablet-t-0 {
    margin-top: var(--margin-0);
  }

  .mar-tablet-t-1 {
    margin-top: var(--margin-1);
  }

  .mar-tablet-t-2 {
    margin-top: var(--margin-2);
  }

  .mar-tablet-t-3 {
    margin-top: var(--margin-3);
  }

  .mar-tablet-t-4 {
    margin-top: var(--margin-4);
  }

  .mar-tablet-t-5 {
    margin-top: var(--margin-5);
  }

  .mar-tablet-t-6 {
    margin-top: var(--margin-6);
  }

  .mar-tablet-t-7 {
    margin-top: var(--margin-7);
  }

  .mar-tablet-t-8 {
    margin-top: var(--margin-8);
  }

  .mar-tablet-r-0 {
    margin-right: var(--margin-0);
  }

  .mar-tablet-r-1 {
    margin-right: var(--margin-1);
  }

  .mar-tablet-r-2 {
    margin-right: var(--margin-2);
  }

  .mar-tablet-r-3 {
    margin-right: var(--margin-3);
  }

  .mar-tablet-r-4 {
    margin-right: var(--margin-4);
  }

  .mar-tablet-r-5 {
    margin-right: var(--margin-5);
  }

  .mar-tablet-r-6 {
    margin-right: var(--margin-6);
  }

  .mar-tablet-r-7 {
    margin-right: var(--margin-7);
  }

  .mar-tablet-r-8 {
    margin-right: var(--margin-8);
  }

  .mar-tablet-b-0 {
    margin-bottom: var(--margin-0);
  }

  .mar-tablet-b-1 {
    margin-bottom: var(--margin-1);
  }

  .mar-tablet-b-2 {
    margin-bottom: var(--margin-2);
  }

  .mar-tablet-b-3 {
    margin-bottom: var(--margin-3);
  }

  .mar-tablet-b-4 {
    margin-bottom: var(--margin-4);
  }

  .mar-tablet-b-5 {
    margin-bottom: var(--margin-5);
  }

  .mar-tablet-b-6 {
    margin-bottom: var(--margin-6);
  }

  .mar-tablet-b-7 {
    margin-bottom: var(--margin-7);
  }

  .mar-tablet-b-8 {
    margin-bottom: var(--margin-8);
  }

  .mar-tablet-l-0 {
    margin-left: var(--margin-0);
  }

  .mar-tablet-l-1 {
    margin-left: var(--margin-1);
  }

  .mar-tablet-l-2 {
    margin-left: var(--margin-2);
  }

  .mar-tablet-l-3 {
    margin-left: var(--margin-3);
  }

  .mar-tablet-l-4 {
    margin-left: var(--margin-4);
  }

  .mar-tablet-l-5 {
    margin-left: var(--margin-5);
  }

  .mar-tablet-l-6 {
    margin-left: var(--margin-6);
  }

  .mar-tablet-l-7 {
    margin-left: var(--margin-7);
  }

  .mar-tablet-l-8 {
    margin-left: var(--margin-8);
  }
}
@media only screen and (max-width: 600px) {
  .mar-phone-0 {
    margin: var(--margin-0);
  }

  .mar-phone-1 {
    margin: var(--margin-1);
  }

  .mar-phone-2 {
    margin: var(--margin-2);
  }

  .mar-phone-3 {
    margin: var(--margin-3);
  }

  .mar-phone-4 {
    margin: var(--margin-4);
  }

  .mar-phone-5 {
    margin: var(--margin-5);
  }

  .mar-phone-6 {
    margin: var(--margin-6);
  }

  .mar-phone-7 {
    margin: var(--margin-7);
  }

  .mar-phone-8 {
    margin: var(--margin-8);
  }

  .mar-phone-y-0 {
    margin-top: var(--margin-0);
    margin-bottom: var(--margin-0);
  }

  .mar-phone-y-1 {
    margin-top: var(--margin-1);
    margin-bottom: var(--margin-1);
  }

  .mar-phone-y-2 {
    margin-top: var(--margin-2);
    margin-bottom: var(--margin-2);
  }

  .mar-phone-y-3 {
    margin-top: var(--margin-3);
    margin-bottom: var(--margin-3);
  }

  .mar-phone-y-4 {
    margin-top: var(--margin-4);
    margin-bottom: var(--margin-4);
  }

  .mar-phone-y-5 {
    margin-top: var(--margin-5);
    margin-bottom: var(--margin-5);
  }

  .mar-phone-y-6 {
    margin-top: var(--margin-6);
    margin-bottom: var(--margin-6);
  }

  .mar-phone-y-7 {
    margin-top: var(--margin-7);
    margin-bottom: var(--margin-7);
  }

  .mar-phone-y-8 {
    margin-top: var(--margin-8);
    margin-bottom: var(--margin-8);
  }

  .mar-phone-x-0 {
    margin-left: var(--margin-0);
    margin-right: var(--margin-0);
  }

  .mar-phone-x-1 {
    margin-left: var(--margin-1);
    margin-right: var(--margin-1);
  }

  .mar-phone-x-2 {
    margin-left: var(--margin-2);
    margin-right: var(--margin-2);
  }

  .mar-phone-x-3 {
    margin-left: var(--margin-3);
    margin-right: var(--margin-3);
  }

  .mar-phone-x-4 {
    margin-left: var(--margin-4);
    margin-right: var(--margin-4);
  }

  .mar-phone-x-5 {
    margin-left: var(--margin-5);
    margin-right: var(--margin-5);
  }

  .mar-phone-x-6 {
    margin-left: var(--margin-6);
    margin-right: var(--margin-6);
  }

  .mar-phone-x-7 {
    margin-left: var(--margin-7);
    margin-right: var(--margin-7);
  }

  .mar-phone-x-8 {
    margin-left: var(--margin-8);
    margin-right: var(--margin-8);
  }

  .mar-phone-t-0 {
    margin-top: var(--margin-0);
  }

  .mar-phone-t-1 {
    margin-top: var(--margin-1);
  }

  .mar-phone-t-2 {
    margin-top: var(--margin-2);
  }

  .mar-phone-t-3 {
    margin-top: var(--margin-3);
  }

  .mar-phone-t-4 {
    margin-top: var(--margin-4);
  }

  .mar-phone-t-5 {
    margin-top: var(--margin-5);
  }

  .mar-phone-t-6 {
    margin-top: var(--margin-6);
  }

  .mar-phone-t-7 {
    margin-top: var(--margin-7);
  }

  .mar-phone-t-8 {
    margin-top: var(--margin-8);
  }

  .mar-phone-r-0 {
    margin-right: var(--margin-0);
  }

  .mar-phone-r-1 {
    margin-right: var(--margin-1);
  }

  .mar-phone-r-2 {
    margin-right: var(--margin-2);
  }

  .mar-phone-r-3 {
    margin-right: var(--margin-3);
  }

  .mar-phone-r-4 {
    margin-right: var(--margin-4);
  }

  .mar-phone-r-5 {
    margin-right: var(--margin-5);
  }

  .mar-phone-r-6 {
    margin-right: var(--margin-6);
  }

  .mar-phone-r-7 {
    margin-right: var(--margin-7);
  }

  .mar-phone-r-8 {
    margin-right: var(--margin-8);
  }

  .mar-phone-b-0 {
    margin-bottom: var(--margin-0);
  }

  .mar-phone-b-1 {
    margin-bottom: var(--margin-1);
  }

  .mar-phone-b-2 {
    margin-bottom: var(--margin-2);
  }

  .mar-phone-b-3 {
    margin-bottom: var(--margin-3);
  }

  .mar-phone-b-4 {
    margin-bottom: var(--margin-4);
  }

  .mar-phone-b-5 {
    margin-bottom: var(--margin-5);
  }

  .mar-phone-b-6 {
    margin-bottom: var(--margin-6);
  }

  .mar-phone-b-7 {
    margin-bottom: var(--margin-7);
  }

  .mar-phone-b-8 {
    margin-bottom: var(--margin-8);
  }

  .mar-phone-l-0 {
    margin-left: var(--margin-0);
  }

  .mar-phone-l-1 {
    margin-left: var(--margin-1);
  }

  .mar-phone-l-2 {
    margin-left: var(--margin-2);
  }

  .mar-phone-l-3 {
    margin-left: var(--margin-3);
  }

  .mar-phone-l-4 {
    margin-left: var(--margin-4);
  }

  .mar-phone-l-5 {
    margin-left: var(--margin-5);
  }

  .mar-phone-l-6 {
    margin-left: var(--margin-6);
  }

  .mar-phone-l-7 {
    margin-left: var(--margin-7);
  }

  .mar-phone-l-8 {
    margin-left: var(--margin-8);
  }
}
.pad-0 {
  padding: var(--padding-0);
}

.pad-1 {
  padding: var(--padding-1);
}

.pad-2 {
  padding: var(--padding-2);
}

.pad-3 {
  padding: var(--padding-3);
}

.pad-4 {
  padding: var(--padding-4);
}

.pad-5 {
  padding: var(--padding-5);
}

.pad-6 {
  padding: var(--padding-6);
}

.pad-7 {
  padding: var(--padding-7);
}

.pad-8 {
  padding: var(--padding-8);
}

.pad-y-0 {
  padding-top: var(--padding-0);
  padding-bottom: var(--padding-0);
}

.pad-y-1 {
  padding-top: var(--padding-1);
  padding-bottom: var(--padding-1);
}

.pad-y-2 {
  padding-top: var(--padding-2);
  padding-bottom: var(--padding-2);
}

.pad-y-3 {
  padding-top: var(--padding-3);
  padding-bottom: var(--padding-3);
}

.pad-y-4 {
  padding-top: var(--padding-4);
  padding-bottom: var(--padding-4);
}

.pad-y-5 {
  padding-top: var(--padding-5);
  padding-bottom: var(--padding-5);
}

.pad-y-6 {
  padding-top: var(--padding-6);
  padding-bottom: var(--padding-6);
}

.pad-y-7 {
  padding-top: var(--padding-7);
  padding-bottom: var(--padding-7);
}

.pad-y-8 {
  padding-top: var(--padding-8);
  padding-bottom: var(--padding-8);
}

.pad-x-0 {
  padding-left: var(--padding-0);
  padding-right: var(--padding-0);
}

.pad-x-1 {
  padding-left: var(--padding-1);
  padding-right: var(--padding-1);
}

.pad-x-2 {
  padding-left: var(--padding-2);
  padding-right: var(--padding-2);
}

.pad-x-3 {
  padding-left: var(--padding-3);
  padding-right: var(--padding-3);
}

.pad-x-4 {
  padding-left: var(--padding-4);
  padding-right: var(--padding-4);
}

.pad-x-5 {
  padding-left: var(--padding-5);
  padding-right: var(--padding-5);
}

.pad-x-6 {
  padding-left: var(--padding-6);
  padding-right: var(--padding-6);
}

.pad-x-7 {
  padding-left: var(--padding-7);
  padding-right: var(--padding-7);
}

.pad-x-8 {
  padding-left: var(--padding-8);
  padding-right: var(--padding-8);
}

.pad-t-0 {
  padding-top: var(--padding-0);
}

.pad-t-1 {
  padding-top: var(--padding-1);
}

.pad-t-2 {
  padding-top: var(--padding-2);
}

.pad-t-3 {
  padding-top: var(--padding-3);
}

.pad-t-4 {
  padding-top: var(--padding-4);
}

.pad-t-5 {
  padding-top: var(--padding-5);
}

.pad-t-6 {
  padding-top: var(--padding-6);
}

.pad-t-7 {
  padding-top: var(--padding-7);
}

.pad-t-8 {
  padding-top: var(--padding-8);
}

.pad-r-0 {
  padding-right: var(--padding-0);
}

.pad-r-1 {
  padding-right: var(--padding-1);
}

.pad-r-2 {
  padding-right: var(--padding-2);
}

.pad-r-3 {
  padding-right: var(--padding-3);
}

.pad-r-4 {
  padding-right: var(--padding-4);
}

.pad-r-5 {
  padding-right: var(--padding-5);
}

.pad-r-6 {
  padding-right: var(--padding-6);
}

.pad-r-7 {
  padding-right: var(--padding-7);
}

.pad-r-8 {
  padding-right: var(--padding-8);
}

.pad-b-0 {
  padding-bottom: var(--padding-0);
}

.pad-b-1 {
  padding-bottom: var(--padding-1);
}

.pad-b-2 {
  padding-bottom: var(--padding-2);
}

.pad-b-3 {
  padding-bottom: var(--padding-3);
}

.pad-b-4 {
  padding-bottom: var(--padding-4);
}

.pad-b-5 {
  padding-bottom: var(--padding-5);
}

.pad-b-6 {
  padding-bottom: var(--padding-6);
}

.pad-b-7 {
  padding-bottom: var(--padding-7);
}

.pad-b-8 {
  padding-bottom: var(--padding-8);
}

.pad-l-0 {
  padding-left: var(--padding-0);
}

.pad-l-1 {
  padding-left: var(--padding-1);
}

.pad-l-2 {
  padding-left: var(--padding-2);
}

.pad-l-3 {
  padding-left: var(--padding-3);
}

.pad-l-4 {
  padding-left: var(--padding-4);
}

.pad-l-5 {
  padding-left: var(--padding-5);
}

.pad-l-6 {
  padding-left: var(--padding-6);
}

.pad-l-7 {
  padding-left: var(--padding-7);
}

.pad-l-8 {
  padding-left: var(--padding-8);
}

@media only screen and (max-width: 1200px) {
  .pad-desktop-0 {
    padding: var(--padding-0);
  }

  .pad-desktop-1 {
    padding: var(--padding-1);
  }

  .pad-desktop-2 {
    padding: var(--padding-2);
  }

  .pad-desktop-3 {
    padding: var(--padding-3);
  }

  .pad-desktop-4 {
    padding: var(--padding-4);
  }

  .pad-desktop-5 {
    padding: var(--padding-5);
  }

  .pad-desktop-6 {
    padding: var(--padding-6);
  }

  .pad-desktop-7 {
    padding: var(--padding-7);
  }

  .pad-desktop-8 {
    padding: var(--padding-8);
  }

  .pad-desktop-y-0 {
    padding-top: var(--padding-0);
    padding-bottom: var(--padding-0);
  }

  .pad-desktop-y-1 {
    padding-top: var(--padding-1);
    padding-bottom: var(--padding-1);
  }

  .pad-desktop-y-2 {
    padding-top: var(--padding-2);
    padding-bottom: var(--padding-2);
  }

  .pad-desktop-y-3 {
    padding-top: var(--padding-3);
    padding-bottom: var(--padding-3);
  }

  .pad-desktop-y-4 {
    padding-top: var(--padding-4);
    padding-bottom: var(--padding-4);
  }

  .pad-desktop-y-5 {
    padding-top: var(--padding-5);
    padding-bottom: var(--padding-5);
  }

  .pad-desktop-y-6 {
    padding-top: var(--padding-6);
    padding-bottom: var(--padding-6);
  }

  .pad-desktop-y-7 {
    padding-top: var(--padding-7);
    padding-bottom: var(--padding-7);
  }

  .pad-desktop-y-8 {
    padding-top: var(--padding-8);
    padding-bottom: var(--padding-8);
  }

  .pad-desktop-x-0 {
    padding-left: var(--padding-0);
    padding-right: var(--padding-0);
  }

  .pad-desktop-x-1 {
    padding-left: var(--padding-1);
    padding-right: var(--padding-1);
  }

  .pad-desktop-x-2 {
    padding-left: var(--padding-2);
    padding-right: var(--padding-2);
  }

  .pad-desktop-x-3 {
    padding-left: var(--padding-3);
    padding-right: var(--padding-3);
  }

  .pad-desktop-x-4 {
    padding-left: var(--padding-4);
    padding-right: var(--padding-4);
  }

  .pad-desktop-x-5 {
    padding-left: var(--padding-5);
    padding-right: var(--padding-5);
  }

  .pad-desktop-x-6 {
    padding-left: var(--padding-6);
    padding-right: var(--padding-6);
  }

  .pad-desktop-x-7 {
    padding-left: var(--padding-7);
    padding-right: var(--padding-7);
  }

  .pad-desktop-x-8 {
    padding-left: var(--padding-8);
    padding-right: var(--padding-8);
  }

  .pad-desktop-t-0 {
    padding-top: var(--padding-0);
  }

  .pad-desktop-t-1 {
    padding-top: var(--padding-1);
  }

  .pad-desktop-t-2 {
    padding-top: var(--padding-2);
  }

  .pad-desktop-t-3 {
    padding-top: var(--padding-3);
  }

  .pad-desktop-t-4 {
    padding-top: var(--padding-4);
  }

  .pad-desktop-t-5 {
    padding-top: var(--padding-5);
  }

  .pad-desktop-t-6 {
    padding-top: var(--padding-6);
  }

  .pad-desktop-t-7 {
    padding-top: var(--padding-7);
  }

  .pad-desktop-t-8 {
    padding-top: var(--padding-8);
  }

  .pad-desktop-r-0 {
    padding-right: var(--padding-0);
  }

  .pad-desktop-r-1 {
    padding-right: var(--padding-1);
  }

  .pad-desktop-r-2 {
    padding-right: var(--padding-2);
  }

  .pad-desktop-r-3 {
    padding-right: var(--padding-3);
  }

  .pad-desktop-r-4 {
    padding-right: var(--padding-4);
  }

  .pad-desktop-r-5 {
    padding-right: var(--padding-5);
  }

  .pad-desktop-r-6 {
    padding-right: var(--padding-6);
  }

  .pad-desktop-r-7 {
    padding-right: var(--padding-7);
  }

  .pad-desktop-r-8 {
    padding-right: var(--padding-8);
  }

  .pad-desktop-b-0 {
    padding-bottom: var(--padding-0);
  }

  .pad-desktop-b-1 {
    padding-bottom: var(--padding-1);
  }

  .pad-desktop-b-2 {
    padding-bottom: var(--padding-2);
  }

  .pad-desktop-b-3 {
    padding-bottom: var(--padding-3);
  }

  .pad-desktop-b-4 {
    padding-bottom: var(--padding-4);
  }

  .pad-desktop-b-5 {
    padding-bottom: var(--padding-5);
  }

  .pad-desktop-b-6 {
    padding-bottom: var(--padding-6);
  }

  .pad-desktop-b-7 {
    padding-bottom: var(--padding-7);
  }

  .pad-desktop-b-8 {
    padding-bottom: var(--padding-8);
  }

  .pad-desktop-l-0 {
    padding-left: var(--padding-0);
  }

  .pad-desktop-l-1 {
    padding-left: var(--padding-1);
  }

  .pad-desktop-l-2 {
    padding-left: var(--padding-2);
  }

  .pad-desktop-l-3 {
    padding-left: var(--padding-3);
  }

  .pad-desktop-l-4 {
    padding-left: var(--padding-4);
  }

  .pad-desktop-l-5 {
    padding-left: var(--padding-5);
  }

  .pad-desktop-l-6 {
    padding-left: var(--padding-6);
  }

  .pad-desktop-l-7 {
    padding-left: var(--padding-7);
  }

  .pad-desktop-l-8 {
    padding-left: var(--padding-8);
  }
}
@media only screen and (max-width: 768px) {
  .pad-tablet-0 {
    padding: var(--padding-0);
  }

  .pad-tablet-1 {
    padding: var(--padding-1);
  }

  .pad-tablet-2 {
    padding: var(--padding-2);
  }

  .pad-tablet-3 {
    padding: var(--padding-3);
  }

  .pad-tablet-4 {
    padding: var(--padding-4);
  }

  .pad-tablet-5 {
    padding: var(--padding-5);
  }

  .pad-tablet-6 {
    padding: var(--padding-6);
  }

  .pad-tablet-7 {
    padding: var(--padding-7);
  }

  .pad-tablet-8 {
    padding: var(--padding-8);
  }

  .pad-tablet-y-0 {
    padding-top: var(--padding-0);
    padding-bottom: var(--padding-0);
  }

  .pad-tablet-y-1 {
    padding-top: var(--padding-1);
    padding-bottom: var(--padding-1);
  }

  .pad-tablet-y-2 {
    padding-top: var(--padding-2);
    padding-bottom: var(--padding-2);
  }

  .pad-tablet-y-3 {
    padding-top: var(--padding-3);
    padding-bottom: var(--padding-3);
  }

  .pad-tablet-y-4 {
    padding-top: var(--padding-4);
    padding-bottom: var(--padding-4);
  }

  .pad-tablet-y-5 {
    padding-top: var(--padding-5);
    padding-bottom: var(--padding-5);
  }

  .pad-tablet-y-6 {
    padding-top: var(--padding-6);
    padding-bottom: var(--padding-6);
  }

  .pad-tablet-y-7 {
    padding-top: var(--padding-7);
    padding-bottom: var(--padding-7);
  }

  .pad-tablet-y-8 {
    padding-top: var(--padding-8);
    padding-bottom: var(--padding-8);
  }

  .pad-tablet-x-0 {
    padding-left: var(--padding-0);
    padding-right: var(--padding-0);
  }

  .pad-tablet-x-1 {
    padding-left: var(--padding-1);
    padding-right: var(--padding-1);
  }

  .pad-tablet-x-2 {
    padding-left: var(--padding-2);
    padding-right: var(--padding-2);
  }

  .pad-tablet-x-3 {
    padding-left: var(--padding-3);
    padding-right: var(--padding-3);
  }

  .pad-tablet-x-4 {
    padding-left: var(--padding-4);
    padding-right: var(--padding-4);
  }

  .pad-tablet-x-5 {
    padding-left: var(--padding-5);
    padding-right: var(--padding-5);
  }

  .pad-tablet-x-6 {
    padding-left: var(--padding-6);
    padding-right: var(--padding-6);
  }

  .pad-tablet-x-7 {
    padding-left: var(--padding-7);
    padding-right: var(--padding-7);
  }

  .pad-tablet-x-8 {
    padding-left: var(--padding-8);
    padding-right: var(--padding-8);
  }

  .pad-tablet-t-0 {
    padding-top: var(--padding-0);
  }

  .pad-tablet-t-1 {
    padding-top: var(--padding-1);
  }

  .pad-tablet-t-2 {
    padding-top: var(--padding-2);
  }

  .pad-tablet-t-3 {
    padding-top: var(--padding-3);
  }

  .pad-tablet-t-4 {
    padding-top: var(--padding-4);
  }

  .pad-tablet-t-5 {
    padding-top: var(--padding-5);
  }

  .pad-tablet-t-6 {
    padding-top: var(--padding-6);
  }

  .pad-tablet-t-7 {
    padding-top: var(--padding-7);
  }

  .pad-tablet-t-8 {
    padding-top: var(--padding-8);
  }

  .pad-tablet-r-0 {
    padding-right: var(--padding-0);
  }

  .pad-tablet-r-1 {
    padding-right: var(--padding-1);
  }

  .pad-tablet-r-2 {
    padding-right: var(--padding-2);
  }

  .pad-tablet-r-3 {
    padding-right: var(--padding-3);
  }

  .pad-tablet-r-4 {
    padding-right: var(--padding-4);
  }

  .pad-tablet-r-5 {
    padding-right: var(--padding-5);
  }

  .pad-tablet-r-6 {
    padding-right: var(--padding-6);
  }

  .pad-tablet-r-7 {
    padding-right: var(--padding-7);
  }

  .pad-tablet-r-8 {
    padding-right: var(--padding-8);
  }

  .pad-tablet-b-0 {
    padding-bottom: var(--padding-0);
  }

  .pad-tablet-b-1 {
    padding-bottom: var(--padding-1);
  }

  .pad-tablet-b-2 {
    padding-bottom: var(--padding-2);
  }

  .pad-tablet-b-3 {
    padding-bottom: var(--padding-3);
  }

  .pad-tablet-b-4 {
    padding-bottom: var(--padding-4);
  }

  .pad-tablet-b-5 {
    padding-bottom: var(--padding-5);
  }

  .pad-tablet-b-6 {
    padding-bottom: var(--padding-6);
  }

  .pad-tablet-b-7 {
    padding-bottom: var(--padding-7);
  }

  .pad-tablet-b-8 {
    padding-bottom: var(--padding-8);
  }

  .pad-tablet-l-0 {
    padding-left: var(--padding-0);
  }

  .pad-tablet-l-1 {
    padding-left: var(--padding-1);
  }

  .pad-tablet-l-2 {
    padding-left: var(--padding-2);
  }

  .pad-tablet-l-3 {
    padding-left: var(--padding-3);
  }

  .pad-tablet-l-4 {
    padding-left: var(--padding-4);
  }

  .pad-tablet-l-5 {
    padding-left: var(--padding-5);
  }

  .pad-tablet-l-6 {
    padding-left: var(--padding-6);
  }

  .pad-tablet-l-7 {
    padding-left: var(--padding-7);
  }

  .pad-tablet-l-8 {
    padding-left: var(--padding-8);
  }
}
@media only screen and (max-width: 600px) {
  .pad-phone-0 {
    padding: var(--padding-0);
  }

  .pad-phone-1 {
    padding: var(--padding-1);
  }

  .pad-phone-2 {
    padding: var(--padding-2);
  }

  .pad-phone-3 {
    padding: var(--padding-3);
  }

  .pad-phone-4 {
    padding: var(--padding-4);
  }

  .pad-phone-5 {
    padding: var(--padding-5);
  }

  .pad-phone-6 {
    padding: var(--padding-6);
  }

  .pad-phone-7 {
    padding: var(--padding-7);
  }

  .pad-phone-8 {
    padding: var(--padding-8);
  }

  .pad-phone-y-0 {
    padding-top: var(--padding-0);
    padding-bottom: var(--padding-0);
  }

  .pad-phone-y-1 {
    padding-top: var(--padding-1);
    padding-bottom: var(--padding-1);
  }

  .pad-phone-y-2 {
    padding-top: var(--padding-2);
    padding-bottom: var(--padding-2);
  }

  .pad-phone-y-3 {
    padding-top: var(--padding-3);
    padding-bottom: var(--padding-3);
  }

  .pad-phone-y-4 {
    padding-top: var(--padding-4);
    padding-bottom: var(--padding-4);
  }

  .pad-phone-y-5 {
    padding-top: var(--padding-5);
    padding-bottom: var(--padding-5);
  }

  .pad-phone-y-6 {
    padding-top: var(--padding-6);
    padding-bottom: var(--padding-6);
  }

  .pad-phone-y-7 {
    padding-top: var(--padding-7);
    padding-bottom: var(--padding-7);
  }

  .pad-phone-y-8 {
    padding-top: var(--padding-8);
    padding-bottom: var(--padding-8);
  }

  .pad-phone-x-0 {
    padding-left: var(--padding-0);
    padding-right: var(--padding-0);
  }

  .pad-phone-x-1 {
    padding-left: var(--padding-1);
    padding-right: var(--padding-1);
  }

  .pad-phone-x-2 {
    padding-left: var(--padding-2);
    padding-right: var(--padding-2);
  }

  .pad-phone-x-3 {
    padding-left: var(--padding-3);
    padding-right: var(--padding-3);
  }

  .pad-phone-x-4 {
    padding-left: var(--padding-4);
    padding-right: var(--padding-4);
  }

  .pad-phone-x-5 {
    padding-left: var(--padding-5);
    padding-right: var(--padding-5);
  }

  .pad-phone-x-6 {
    padding-left: var(--padding-6);
    padding-right: var(--padding-6);
  }

  .pad-phone-x-7 {
    padding-left: var(--padding-7);
    padding-right: var(--padding-7);
  }

  .pad-phone-x-8 {
    padding-left: var(--padding-8);
    padding-right: var(--padding-8);
  }

  .pad-phone-t-0 {
    padding-top: var(--padding-0);
  }

  .pad-phone-t-1 {
    padding-top: var(--padding-1);
  }

  .pad-phone-t-2 {
    padding-top: var(--padding-2);
  }

  .pad-phone-t-3 {
    padding-top: var(--padding-3);
  }

  .pad-phone-t-4 {
    padding-top: var(--padding-4);
  }

  .pad-phone-t-5 {
    padding-top: var(--padding-5);
  }

  .pad-phone-t-6 {
    padding-top: var(--padding-6);
  }

  .pad-phone-t-7 {
    padding-top: var(--padding-7);
  }

  .pad-phone-t-8 {
    padding-top: var(--padding-8);
  }

  .pad-phone-r-0 {
    padding-right: var(--padding-0);
  }

  .pad-phone-r-1 {
    padding-right: var(--padding-1);
  }

  .pad-phone-r-2 {
    padding-right: var(--padding-2);
  }

  .pad-phone-r-3 {
    padding-right: var(--padding-3);
  }

  .pad-phone-r-4 {
    padding-right: var(--padding-4);
  }

  .pad-phone-r-5 {
    padding-right: var(--padding-5);
  }

  .pad-phone-r-6 {
    padding-right: var(--padding-6);
  }

  .pad-phone-r-7 {
    padding-right: var(--padding-7);
  }

  .pad-phone-r-8 {
    padding-right: var(--padding-8);
  }

  .pad-phone-b-0 {
    padding-bottom: var(--padding-0);
  }

  .pad-phone-b-1 {
    padding-bottom: var(--padding-1);
  }

  .pad-phone-b-2 {
    padding-bottom: var(--padding-2);
  }

  .pad-phone-b-3 {
    padding-bottom: var(--padding-3);
  }

  .pad-phone-b-4 {
    padding-bottom: var(--padding-4);
  }

  .pad-phone-b-5 {
    padding-bottom: var(--padding-5);
  }

  .pad-phone-b-6 {
    padding-bottom: var(--padding-6);
  }

  .pad-phone-b-7 {
    padding-bottom: var(--padding-7);
  }

  .pad-phone-b-8 {
    padding-bottom: var(--padding-8);
  }

  .pad-phone-l-0 {
    padding-left: var(--padding-0);
  }

  .pad-phone-l-1 {
    padding-left: var(--padding-1);
  }

  .pad-phone-l-2 {
    padding-left: var(--padding-2);
  }

  .pad-phone-l-3 {
    padding-left: var(--padding-3);
  }

  .pad-phone-l-4 {
    padding-left: var(--padding-4);
  }

  .pad-phone-l-5 {
    padding-left: var(--padding-5);
  }

  .pad-phone-l-6 {
    padding-left: var(--padding-6);
  }

  .pad-phone-l-7 {
    padding-left: var(--padding-7);
  }

  .pad-phone-l-8 {
    padding-left: var(--padding-8);
  }
}
.font-xxl {
  font-size: var(--font-size-xxl);
}

.font-xl {
  font-size: var(--font-size-xl);
}

.font-l {
  font-size: var(--font-size-l);
}

.font-m {
  font-size: var(--font-size-m);
}

.font-s {
  font-size: var(--font-size-s);
}

.font-xs {
  font-size: var(--font-size-xs);
}

.font-xxs {
  font-size: var(--font-size-xxs);
}

.font-family-Jura {
  font-family: Jura, serif;
}

.font-family-serif {
  font-family: serif, serif;
}

.font-family-Mulish {
  font-family: Mulish, sans-serif;
}

.font-family-sans-serif {
  font-family: sans-serif, sans-serif;
}

@media only screen and (max-width: 600px) {
  :root {
    font-size: 98%;
  }
}
.font-bold {
  font-weight: bold;
}

.radius-none {
  border-radius: 0px;
}

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

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

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

.radius-xl {
  border-radius: 20px;
}

.radius-xxl {
  border-radius: 50px;
}

.border-xs, .border-xs-white, .border-xs-black, .border-xs-info, .border-xs-danger, .border-xs-warning, .border-xs-success, .border-xs-darkred, .border-xs-darkgrey, .border-xs-kaki, .border-xs-secondary, .border-xs-primary {
  border-width: var(--border-width-xs);
  border-style: solid;
}

.border-t-xs, .border-t-xs-white, .border-t-xs-black, .border-t-xs-info, .border-t-xs-danger, .border-t-xs-warning, .border-t-xs-success, .border-t-xs-darkred, .border-t-xs-darkgrey, .border-t-xs-kaki, .border-t-xs-secondary, .border-t-xs-primary {
  border-top-width: var(--border-width-xs);
  border-top-style: solid;
}

.border-r-xs, .border-r-xs-white, .border-r-xs-black, .border-r-xs-info, .border-r-xs-danger, .border-r-xs-warning, .border-r-xs-success, .border-r-xs-darkred, .border-r-xs-darkgrey, .border-r-xs-kaki, .border-r-xs-secondary, .border-r-xs-primary {
  border-right-width: var(--border-width-xs);
  border-right-style: solid;
}

.border-b-xs, .border-b-xs-white, .border-b-xs-black, .border-b-xs-info, .border-b-xs-danger, .border-b-xs-warning, .border-b-xs-success, .border-b-xs-darkred, .border-b-xs-darkgrey, .border-b-xs-kaki, .border-b-xs-secondary, .border-b-xs-primary {
  border-bottom-width: var(--border-width-xs);
  border-bottom-style: solid;
}

.border-l-xs, .border-l-xs-white, .border-l-xs-black, .border-l-xs-info, .border-l-xs-danger, .border-l-xs-warning, .border-l-xs-success, .border-l-xs-darkred, .border-l-xs-darkgrey, .border-l-xs-kaki, .border-l-xs-secondary, .border-l-xs-primary {
  border-left-width: var(--border-width-xs);
  border-left-style: solid;
}

.border-s, .border-s-white, .border-s-black, .border-s-info, .border-s-danger, .border-s-warning, .border-s-success, .border-s-darkred, .border-s-darkgrey, .border-s-kaki, .border-s-secondary, .border-s-primary {
  border-width: var(--border-width-s);
  border-style: solid;
}

.border-t-s, .border-t-s-white, .border-t-s-black, .border-t-s-info, .border-t-s-danger, .border-t-s-warning, .border-t-s-success, .border-t-s-darkred, .border-t-s-darkgrey, .border-t-s-kaki, .border-t-s-secondary, .border-t-s-primary {
  border-top-width: var(--border-width-s);
  border-top-style: solid;
}

.border-r-s, .border-r-s-white, .border-r-s-black, .border-r-s-info, .border-r-s-danger, .border-r-s-warning, .border-r-s-success, .border-r-s-darkred, .border-r-s-darkgrey, .border-r-s-kaki, .border-r-s-secondary, .border-r-s-primary {
  border-right-width: var(--border-width-s);
  border-right-style: solid;
}

.border-b-s, .border-b-s-white, .border-b-s-black, .border-b-s-info, .border-b-s-danger, .border-b-s-warning, .border-b-s-success, .border-b-s-darkred, .border-b-s-darkgrey, .border-b-s-kaki, .border-b-s-secondary, .border-b-s-primary {
  border-bottom-width: var(--border-width-s);
  border-bottom-style: solid;
}

.border-l-s, .border-l-s-white, .border-l-s-black, .border-l-s-info, .border-l-s-danger, .border-l-s-warning, .border-l-s-success, .border-l-s-darkred, .border-l-s-darkgrey, .border-l-s-kaki, .border-l-s-secondary, .border-l-s-primary {
  border-left-width: var(--border-width-s);
  border-left-style: solid;
}

.border-m, .border-m-white, .border-m-black, .border-m-info, .border-m-danger, .border-m-warning, .border-m-success, .border-m-darkred, .border-m-darkgrey, .border-m-kaki, .border-m-secondary, .border-m-primary {
  border-width: var(--border-width-m);
  border-style: solid;
}

.border-t-m, .border-t-m-white, .border-t-m-black, .border-t-m-info, .border-t-m-danger, .border-t-m-warning, .border-t-m-success, .border-t-m-darkred, .border-t-m-darkgrey, .border-t-m-kaki, .border-t-m-secondary, .border-t-m-primary {
  border-top-width: var(--border-width-m);
  border-top-style: solid;
}

.border-r-m, .border-r-m-white, .border-r-m-black, .border-r-m-info, .border-r-m-danger, .border-r-m-warning, .border-r-m-success, .border-r-m-darkred, .border-r-m-darkgrey, .border-r-m-kaki, .border-r-m-secondary, .border-r-m-primary {
  border-right-width: var(--border-width-m);
  border-right-style: solid;
}

.border-b-m, .border-b-m-white, .border-b-m-black, .border-b-m-info, .border-b-m-danger, .border-b-m-warning, .border-b-m-success, .border-b-m-darkred, .border-b-m-darkgrey, .border-b-m-kaki, .border-b-m-secondary, .border-b-m-primary {
  border-bottom-width: var(--border-width-m);
  border-bottom-style: solid;
}

.border-l-m, .border-l-m-white, .border-l-m-black, .border-l-m-info, .border-l-m-danger, .border-l-m-warning, .border-l-m-success, .border-l-m-darkred, .border-l-m-darkgrey, .border-l-m-kaki, .border-l-m-secondary, .border-l-m-primary {
  border-left-width: var(--border-width-m);
  border-left-style: solid;
}

.border-l, .border-l-white, .border-l-black, .border-l-info, .border-l-danger, .border-l-warning, .border-l-success, .border-l-darkred, .border-l-darkgrey, .border-l-kaki, .border-l-secondary, .border-l-primary {
  border-width: var(--border-width-l);
  border-style: solid;
}

.border-t-l, .border-t-l-white, .border-t-l-black, .border-t-l-info, .border-t-l-danger, .border-t-l-warning, .border-t-l-success, .border-t-l-darkred, .border-t-l-darkgrey, .border-t-l-kaki, .border-t-l-secondary, .border-t-l-primary {
  border-top-width: var(--border-width-l);
  border-top-style: solid;
}

.border-r-l, .border-r-l-white, .border-r-l-black, .border-r-l-info, .border-r-l-danger, .border-r-l-warning, .border-r-l-success, .border-r-l-darkred, .border-r-l-darkgrey, .border-r-l-kaki, .border-r-l-secondary, .border-r-l-primary {
  border-right-width: var(--border-width-l);
  border-right-style: solid;
}

.border-b-l, .border-b-l-white, .border-b-l-black, .border-b-l-info, .border-b-l-danger, .border-b-l-warning, .border-b-l-success, .border-b-l-darkred, .border-b-l-darkgrey, .border-b-l-kaki, .border-b-l-secondary, .border-b-l-primary {
  border-bottom-width: var(--border-width-l);
  border-bottom-style: solid;
}

.border-l-l, .border-l-l-white, .border-l-l-black, .border-l-l-info, .border-l-l-danger, .border-l-l-warning, .border-l-l-success, .border-l-l-darkred, .border-l-l-darkgrey, .border-l-l-kaki, .border-l-l-secondary, .border-l-l-primary {
  border-left-width: var(--border-width-l);
  border-left-style: solid;
}

.border-xl, .border-xl-white, .border-xl-black, .border-xl-info, .border-xl-danger, .border-xl-warning, .border-xl-success, .border-xl-darkred, .border-xl-darkgrey, .border-xl-kaki, .border-xl-secondary, .border-xl-primary {
  border-width: var(--border-width-xl);
  border-style: solid;
}

.border-t-xl, .border-t-xl-white, .border-t-xl-black, .border-t-xl-info, .border-t-xl-danger, .border-t-xl-warning, .border-t-xl-success, .border-t-xl-darkred, .border-t-xl-darkgrey, .border-t-xl-kaki, .border-t-xl-secondary, .border-t-xl-primary {
  border-top-width: var(--border-width-xl);
  border-top-style: solid;
}

.border-r-xl, .border-r-xl-white, .border-r-xl-black, .border-r-xl-info, .border-r-xl-danger, .border-r-xl-warning, .border-r-xl-success, .border-r-xl-darkred, .border-r-xl-darkgrey, .border-r-xl-kaki, .border-r-xl-secondary, .border-r-xl-primary {
  border-right-width: var(--border-width-xl);
  border-right-style: solid;
}

.border-b-xl, .border-b-xl-white, .border-b-xl-black, .border-b-xl-info, .border-b-xl-danger, .border-b-xl-warning, .border-b-xl-success, .border-b-xl-darkred, .border-b-xl-darkgrey, .border-b-xl-kaki, .border-b-xl-secondary, .border-b-xl-primary {
  border-bottom-width: var(--border-width-xl);
  border-bottom-style: solid;
}

.border-l-xl, .border-l-xl-white, .border-l-xl-black, .border-l-xl-info, .border-l-xl-danger, .border-l-xl-warning, .border-l-xl-success, .border-l-xl-darkred, .border-l-xl-darkgrey, .border-l-xl-kaki, .border-l-xl-secondary, .border-l-xl-primary {
  border-left-width: var(--border-width-xl);
  border-left-style: solid;
}

.border-xxl, .border-xxl-white, .border-xxl-black, .border-xxl-info, .border-xxl-danger, .border-xxl-warning, .border-xxl-success, .border-xxl-darkred, .border-xxl-darkgrey, .border-xxl-kaki, .border-xxl-secondary, .border-xxl-primary {
  border-width: var(--border-width-xxl);
  border-style: solid;
}

.border-t-xxl, .border-t-xxl-white, .border-t-xxl-black, .border-t-xxl-info, .border-t-xxl-danger, .border-t-xxl-warning, .border-t-xxl-success, .border-t-xxl-darkred, .border-t-xxl-darkgrey, .border-t-xxl-kaki, .border-t-xxl-secondary, .border-t-xxl-primary {
  border-top-width: var(--border-width-xxl);
  border-top-style: solid;
}

.border-r-xxl, .border-r-xxl-white, .border-r-xxl-black, .border-r-xxl-info, .border-r-xxl-danger, .border-r-xxl-warning, .border-r-xxl-success, .border-r-xxl-darkred, .border-r-xxl-darkgrey, .border-r-xxl-kaki, .border-r-xxl-secondary, .border-r-xxl-primary {
  border-right-width: var(--border-width-xxl);
  border-right-style: solid;
}

.border-b-xxl, .border-b-xxl-white, .border-b-xxl-black, .border-b-xxl-info, .border-b-xxl-danger, .border-b-xxl-warning, .border-b-xxl-success, .border-b-xxl-darkred, .border-b-xxl-darkgrey, .border-b-xxl-kaki, .border-b-xxl-secondary, .border-b-xxl-primary {
  border-bottom-width: var(--border-width-xxl);
  border-bottom-style: solid;
}

.border-l-xxl, .border-l-xxl-white, .border-l-xxl-black, .border-l-xxl-info, .border-l-xxl-danger, .border-l-xxl-warning, .border-l-xxl-success, .border-l-xxl-darkred, .border-l-xxl-darkgrey, .border-l-xxl-kaki, .border-l-xxl-secondary, .border-l-xxl-primary {
  border-left-width: var(--border-width-xxl);
  border-left-style: solid;
}

.border-color-primary, .border-xxl-primary, .border-xl-primary, .border-l-primary, .border-m-primary, .border-s-primary, .border-xs-primary {
  border-color: rgb(var(--color-primary));
}

.border-color-primary-10 {
  border-color: rgb(var(--color-primary)/0.1);
}

.border-color-primary-20 {
  border-color: rgb(var(--color-primary)/0.2);
}

.border-color-primary-30 {
  border-color: rgb(var(--color-primary)/0.3);
}

.border-color-primary-40 {
  border-color: rgb(var(--color-primary)/0.4);
}

.border-color-primary-50 {
  border-color: rgb(var(--color-primary)/0.5);
}

.border-color-primary-60 {
  border-color: rgb(var(--color-primary)/0.6);
}

.border-color-primary-70 {
  border-color: rgb(var(--color-primary)/0.7);
}

.border-color-primary-80 {
  border-color: rgb(var(--color-primary)/0.8);
}

.border-color-primary-90 {
  border-color: rgb(var(--color-primary)/0.9);
}

.border-color-secondary, .border-xxl-secondary, .border-xl-secondary, .border-l-secondary, .border-m-secondary, .border-s-secondary, .border-xs-secondary {
  border-color: rgb(var(--color-secondary));
}

.border-color-secondary-10 {
  border-color: rgb(var(--color-secondary)/0.1);
}

.border-color-secondary-20 {
  border-color: rgb(var(--color-secondary)/0.2);
}

.border-color-secondary-30 {
  border-color: rgb(var(--color-secondary)/0.3);
}

.border-color-secondary-40 {
  border-color: rgb(var(--color-secondary)/0.4);
}

.border-color-secondary-50 {
  border-color: rgb(var(--color-secondary)/0.5);
}

.border-color-secondary-60 {
  border-color: rgb(var(--color-secondary)/0.6);
}

.border-color-secondary-70 {
  border-color: rgb(var(--color-secondary)/0.7);
}

.border-color-secondary-80 {
  border-color: rgb(var(--color-secondary)/0.8);
}

.border-color-secondary-90 {
  border-color: rgb(var(--color-secondary)/0.9);
}

.border-color-kaki, .border-xxl-kaki, .border-xl-kaki, .border-l-kaki, .border-m-kaki, .border-s-kaki, .border-xs-kaki {
  border-color: rgb(var(--color-kaki));
}

.border-color-kaki-10 {
  border-color: rgb(var(--color-kaki)/0.1);
}

.border-color-kaki-20 {
  border-color: rgb(var(--color-kaki)/0.2);
}

.border-color-kaki-30 {
  border-color: rgb(var(--color-kaki)/0.3);
}

.border-color-kaki-40 {
  border-color: rgb(var(--color-kaki)/0.4);
}

.border-color-kaki-50 {
  border-color: rgb(var(--color-kaki)/0.5);
}

.border-color-kaki-60 {
  border-color: rgb(var(--color-kaki)/0.6);
}

.border-color-kaki-70 {
  border-color: rgb(var(--color-kaki)/0.7);
}

.border-color-kaki-80 {
  border-color: rgb(var(--color-kaki)/0.8);
}

.border-color-kaki-90 {
  border-color: rgb(var(--color-kaki)/0.9);
}

.border-color-darkgrey, .border-xxl-darkgrey, .border-xl-darkgrey, .border-l-darkgrey, .border-m-darkgrey, .border-s-darkgrey, .border-xs-darkgrey {
  border-color: rgb(var(--color-darkgrey));
}

.border-color-darkgrey-10 {
  border-color: rgb(var(--color-darkgrey)/0.1);
}

.border-color-darkgrey-20 {
  border-color: rgb(var(--color-darkgrey)/0.2);
}

.border-color-darkgrey-30 {
  border-color: rgb(var(--color-darkgrey)/0.3);
}

.border-color-darkgrey-40 {
  border-color: rgb(var(--color-darkgrey)/0.4);
}

.border-color-darkgrey-50 {
  border-color: rgb(var(--color-darkgrey)/0.5);
}

.border-color-darkgrey-60 {
  border-color: rgb(var(--color-darkgrey)/0.6);
}

.border-color-darkgrey-70 {
  border-color: rgb(var(--color-darkgrey)/0.7);
}

.border-color-darkgrey-80 {
  border-color: rgb(var(--color-darkgrey)/0.8);
}

.border-color-darkgrey-90 {
  border-color: rgb(var(--color-darkgrey)/0.9);
}

.border-color-darkred, .border-xxl-darkred, .border-xl-darkred, .border-l-darkred, .border-m-darkred, .border-s-darkred, .border-xs-darkred {
  border-color: rgb(var(--color-darkred));
}

.border-color-darkred-10 {
  border-color: rgb(var(--color-darkred)/0.1);
}

.border-color-darkred-20 {
  border-color: rgb(var(--color-darkred)/0.2);
}

.border-color-darkred-30 {
  border-color: rgb(var(--color-darkred)/0.3);
}

.border-color-darkred-40 {
  border-color: rgb(var(--color-darkred)/0.4);
}

.border-color-darkred-50 {
  border-color: rgb(var(--color-darkred)/0.5);
}

.border-color-darkred-60 {
  border-color: rgb(var(--color-darkred)/0.6);
}

.border-color-darkred-70 {
  border-color: rgb(var(--color-darkred)/0.7);
}

.border-color-darkred-80 {
  border-color: rgb(var(--color-darkred)/0.8);
}

.border-color-darkred-90 {
  border-color: rgb(var(--color-darkred)/0.9);
}

.border-color-success, .border-xxl-success, .border-xl-success, .border-l-success, .border-m-success, .border-s-success, .border-xs-success {
  border-color: rgb(var(--color-success));
}

.border-color-success-10 {
  border-color: rgb(var(--color-success)/0.1);
}

.border-color-success-20 {
  border-color: rgb(var(--color-success)/0.2);
}

.border-color-success-30 {
  border-color: rgb(var(--color-success)/0.3);
}

.border-color-success-40 {
  border-color: rgb(var(--color-success)/0.4);
}

.border-color-success-50 {
  border-color: rgb(var(--color-success)/0.5);
}

.border-color-success-60 {
  border-color: rgb(var(--color-success)/0.6);
}

.border-color-success-70 {
  border-color: rgb(var(--color-success)/0.7);
}

.border-color-success-80 {
  border-color: rgb(var(--color-success)/0.8);
}

.border-color-success-90 {
  border-color: rgb(var(--color-success)/0.9);
}

.border-color-warning, .border-xxl-warning, .border-xl-warning, .border-l-warning, .border-m-warning, .border-s-warning, .border-xs-warning {
  border-color: rgb(var(--color-warning));
}

.border-color-warning-10 {
  border-color: rgb(var(--color-warning)/0.1);
}

.border-color-warning-20 {
  border-color: rgb(var(--color-warning)/0.2);
}

.border-color-warning-30 {
  border-color: rgb(var(--color-warning)/0.3);
}

.border-color-warning-40 {
  border-color: rgb(var(--color-warning)/0.4);
}

.border-color-warning-50 {
  border-color: rgb(var(--color-warning)/0.5);
}

.border-color-warning-60 {
  border-color: rgb(var(--color-warning)/0.6);
}

.border-color-warning-70 {
  border-color: rgb(var(--color-warning)/0.7);
}

.border-color-warning-80 {
  border-color: rgb(var(--color-warning)/0.8);
}

.border-color-warning-90 {
  border-color: rgb(var(--color-warning)/0.9);
}

.border-color-danger, .border-xxl-danger, .border-xl-danger, .border-l-danger, .border-m-danger, .border-s-danger, .border-xs-danger {
  border-color: rgb(var(--color-danger));
}

.border-color-danger-10 {
  border-color: rgb(var(--color-danger)/0.1);
}

.border-color-danger-20 {
  border-color: rgb(var(--color-danger)/0.2);
}

.border-color-danger-30 {
  border-color: rgb(var(--color-danger)/0.3);
}

.border-color-danger-40 {
  border-color: rgb(var(--color-danger)/0.4);
}

.border-color-danger-50 {
  border-color: rgb(var(--color-danger)/0.5);
}

.border-color-danger-60 {
  border-color: rgb(var(--color-danger)/0.6);
}

.border-color-danger-70 {
  border-color: rgb(var(--color-danger)/0.7);
}

.border-color-danger-80 {
  border-color: rgb(var(--color-danger)/0.8);
}

.border-color-danger-90 {
  border-color: rgb(var(--color-danger)/0.9);
}

.border-color-info, .border-xxl-info, .border-xl-info, .border-l-info, .border-m-info, .border-s-info, .border-xs-info {
  border-color: rgb(var(--color-info));
}

.border-color-info-10 {
  border-color: rgb(var(--color-info)/0.1);
}

.border-color-info-20 {
  border-color: rgb(var(--color-info)/0.2);
}

.border-color-info-30 {
  border-color: rgb(var(--color-info)/0.3);
}

.border-color-info-40 {
  border-color: rgb(var(--color-info)/0.4);
}

.border-color-info-50 {
  border-color: rgb(var(--color-info)/0.5);
}

.border-color-info-60 {
  border-color: rgb(var(--color-info)/0.6);
}

.border-color-info-70 {
  border-color: rgb(var(--color-info)/0.7);
}

.border-color-info-80 {
  border-color: rgb(var(--color-info)/0.8);
}

.border-color-info-90 {
  border-color: rgb(var(--color-info)/0.9);
}

.border-color-black, .border-xxl-black, .border-xl-black, .border-l-black, .border-m-black, .border-s-black, .border-xs-black {
  border-color: rgb(var(--color-black));
}

.border-color-black-10 {
  border-color: rgb(var(--color-black)/0.1);
}

.border-color-black-20 {
  border-color: rgb(var(--color-black)/0.2);
}

.border-color-black-30 {
  border-color: rgb(var(--color-black)/0.3);
}

.border-color-black-40 {
  border-color: rgb(var(--color-black)/0.4);
}

.border-color-black-50 {
  border-color: rgb(var(--color-black)/0.5);
}

.border-color-black-60 {
  border-color: rgb(var(--color-black)/0.6);
}

.border-color-black-70 {
  border-color: rgb(var(--color-black)/0.7);
}

.border-color-black-80 {
  border-color: rgb(var(--color-black)/0.8);
}

.border-color-black-90 {
  border-color: rgb(var(--color-black)/0.9);
}

.border-color-white, .border-xxl-white, .border-xl-white, .border-l-white, .border-m-white, .border-s-white, .border-xs-white {
  border-color: rgb(var(--color-white));
}

.border-color-white-10 {
  border-color: rgb(var(--color-white)/0.1);
}

.border-color-white-20 {
  border-color: rgb(var(--color-white)/0.2);
}

.border-color-white-30 {
  border-color: rgb(var(--color-white)/0.3);
}

.border-color-white-40 {
  border-color: rgb(var(--color-white)/0.4);
}

.border-color-white-50 {
  border-color: rgb(var(--color-white)/0.5);
}

.border-color-white-60 {
  border-color: rgb(var(--color-white)/0.6);
}

.border-color-white-70 {
  border-color: rgb(var(--color-white)/0.7);
}

.border-color-white-80 {
  border-color: rgb(var(--color-white)/0.8);
}

.border-color-white-90 {
  border-color: rgb(var(--color-white)/0.9);
}

.border-t-xs-primary {
  border-top-color: rgb(var(--color-primary));
}

.border-r-xs-primary {
  border-right-color: rgb(var(--color-primary));
}

.border-b-xs-primary {
  border-bottom-color: rgb(var(--color-primary));
}

.border-l-xs-primary {
  border-left-color: rgb(var(--color-primary));
}

.border-t-xs-secondary {
  border-top-color: rgb(var(--color-secondary));
}

.border-r-xs-secondary {
  border-right-color: rgb(var(--color-secondary));
}

.border-b-xs-secondary {
  border-bottom-color: rgb(var(--color-secondary));
}

.border-l-xs-secondary {
  border-left-color: rgb(var(--color-secondary));
}

.border-t-xs-kaki {
  border-top-color: rgb(var(--color-kaki));
}

.border-r-xs-kaki {
  border-right-color: rgb(var(--color-kaki));
}

.border-b-xs-kaki {
  border-bottom-color: rgb(var(--color-kaki));
}

.border-l-xs-kaki {
  border-left-color: rgb(var(--color-kaki));
}

.border-t-xs-darkgrey {
  border-top-color: rgb(var(--color-darkgrey));
}

.border-r-xs-darkgrey {
  border-right-color: rgb(var(--color-darkgrey));
}

.border-b-xs-darkgrey {
  border-bottom-color: rgb(var(--color-darkgrey));
}

.border-l-xs-darkgrey {
  border-left-color: rgb(var(--color-darkgrey));
}

.border-t-xs-darkred {
  border-top-color: rgb(var(--color-darkred));
}

.border-r-xs-darkred {
  border-right-color: rgb(var(--color-darkred));
}

.border-b-xs-darkred {
  border-bottom-color: rgb(var(--color-darkred));
}

.border-l-xs-darkred {
  border-left-color: rgb(var(--color-darkred));
}

.border-t-xs-success {
  border-top-color: rgb(var(--color-success));
}

.border-r-xs-success {
  border-right-color: rgb(var(--color-success));
}

.border-b-xs-success {
  border-bottom-color: rgb(var(--color-success));
}

.border-l-xs-success {
  border-left-color: rgb(var(--color-success));
}

.border-t-xs-warning {
  border-top-color: rgb(var(--color-warning));
}

.border-r-xs-warning {
  border-right-color: rgb(var(--color-warning));
}

.border-b-xs-warning {
  border-bottom-color: rgb(var(--color-warning));
}

.border-l-xs-warning {
  border-left-color: rgb(var(--color-warning));
}

.border-t-xs-danger {
  border-top-color: rgb(var(--color-danger));
}

.border-r-xs-danger {
  border-right-color: rgb(var(--color-danger));
}

.border-b-xs-danger {
  border-bottom-color: rgb(var(--color-danger));
}

.border-l-xs-danger {
  border-left-color: rgb(var(--color-danger));
}

.border-t-xs-info {
  border-top-color: rgb(var(--color-info));
}

.border-r-xs-info {
  border-right-color: rgb(var(--color-info));
}

.border-b-xs-info {
  border-bottom-color: rgb(var(--color-info));
}

.border-l-xs-info {
  border-left-color: rgb(var(--color-info));
}

.border-t-xs-black {
  border-top-color: rgb(var(--color-black));
}

.border-r-xs-black {
  border-right-color: rgb(var(--color-black));
}

.border-b-xs-black {
  border-bottom-color: rgb(var(--color-black));
}

.border-l-xs-black {
  border-left-color: rgb(var(--color-black));
}

.border-t-xs-white {
  border-top-color: rgb(var(--color-white));
}

.border-r-xs-white {
  border-right-color: rgb(var(--color-white));
}

.border-b-xs-white {
  border-bottom-color: rgb(var(--color-white));
}

.border-l-xs-white {
  border-left-color: rgb(var(--color-white));
}

.border-t-s-primary {
  border-top-color: rgb(var(--color-primary));
}

.border-r-s-primary {
  border-right-color: rgb(var(--color-primary));
}

.border-b-s-primary {
  border-bottom-color: rgb(var(--color-primary));
}

.border-l-s-primary {
  border-left-color: rgb(var(--color-primary));
}

.border-t-s-secondary {
  border-top-color: rgb(var(--color-secondary));
}

.border-r-s-secondary {
  border-right-color: rgb(var(--color-secondary));
}

.border-b-s-secondary {
  border-bottom-color: rgb(var(--color-secondary));
}

.border-l-s-secondary {
  border-left-color: rgb(var(--color-secondary));
}

.border-t-s-kaki {
  border-top-color: rgb(var(--color-kaki));
}

.border-r-s-kaki {
  border-right-color: rgb(var(--color-kaki));
}

.border-b-s-kaki {
  border-bottom-color: rgb(var(--color-kaki));
}

.border-l-s-kaki {
  border-left-color: rgb(var(--color-kaki));
}

.border-t-s-darkgrey {
  border-top-color: rgb(var(--color-darkgrey));
}

.border-r-s-darkgrey {
  border-right-color: rgb(var(--color-darkgrey));
}

.border-b-s-darkgrey {
  border-bottom-color: rgb(var(--color-darkgrey));
}

.border-l-s-darkgrey {
  border-left-color: rgb(var(--color-darkgrey));
}

.border-t-s-darkred {
  border-top-color: rgb(var(--color-darkred));
}

.border-r-s-darkred {
  border-right-color: rgb(var(--color-darkred));
}

.border-b-s-darkred {
  border-bottom-color: rgb(var(--color-darkred));
}

.border-l-s-darkred {
  border-left-color: rgb(var(--color-darkred));
}

.border-t-s-success {
  border-top-color: rgb(var(--color-success));
}

.border-r-s-success {
  border-right-color: rgb(var(--color-success));
}

.border-b-s-success {
  border-bottom-color: rgb(var(--color-success));
}

.border-l-s-success {
  border-left-color: rgb(var(--color-success));
}

.border-t-s-warning {
  border-top-color: rgb(var(--color-warning));
}

.border-r-s-warning {
  border-right-color: rgb(var(--color-warning));
}

.border-b-s-warning {
  border-bottom-color: rgb(var(--color-warning));
}

.border-l-s-warning {
  border-left-color: rgb(var(--color-warning));
}

.border-t-s-danger {
  border-top-color: rgb(var(--color-danger));
}

.border-r-s-danger {
  border-right-color: rgb(var(--color-danger));
}

.border-b-s-danger {
  border-bottom-color: rgb(var(--color-danger));
}

.border-l-s-danger {
  border-left-color: rgb(var(--color-danger));
}

.border-t-s-info {
  border-top-color: rgb(var(--color-info));
}

.border-r-s-info {
  border-right-color: rgb(var(--color-info));
}

.border-b-s-info {
  border-bottom-color: rgb(var(--color-info));
}

.border-l-s-info {
  border-left-color: rgb(var(--color-info));
}

.border-t-s-black {
  border-top-color: rgb(var(--color-black));
}

.border-r-s-black {
  border-right-color: rgb(var(--color-black));
}

.border-b-s-black {
  border-bottom-color: rgb(var(--color-black));
}

.border-l-s-black {
  border-left-color: rgb(var(--color-black));
}

.border-t-s-white {
  border-top-color: rgb(var(--color-white));
}

.border-r-s-white {
  border-right-color: rgb(var(--color-white));
}

.border-b-s-white {
  border-bottom-color: rgb(var(--color-white));
}

.border-l-s-white {
  border-left-color: rgb(var(--color-white));
}

.border-t-m-primary {
  border-top-color: rgb(var(--color-primary));
}

.border-r-m-primary {
  border-right-color: rgb(var(--color-primary));
}

.border-b-m-primary {
  border-bottom-color: rgb(var(--color-primary));
}

.border-l-m-primary {
  border-left-color: rgb(var(--color-primary));
}

.border-t-m-secondary {
  border-top-color: rgb(var(--color-secondary));
}

.border-r-m-secondary {
  border-right-color: rgb(var(--color-secondary));
}

.border-b-m-secondary {
  border-bottom-color: rgb(var(--color-secondary));
}

.border-l-m-secondary {
  border-left-color: rgb(var(--color-secondary));
}

.border-t-m-kaki {
  border-top-color: rgb(var(--color-kaki));
}

.border-r-m-kaki {
  border-right-color: rgb(var(--color-kaki));
}

.border-b-m-kaki {
  border-bottom-color: rgb(var(--color-kaki));
}

.border-l-m-kaki {
  border-left-color: rgb(var(--color-kaki));
}

.border-t-m-darkgrey {
  border-top-color: rgb(var(--color-darkgrey));
}

.border-r-m-darkgrey {
  border-right-color: rgb(var(--color-darkgrey));
}

.border-b-m-darkgrey {
  border-bottom-color: rgb(var(--color-darkgrey));
}

.border-l-m-darkgrey {
  border-left-color: rgb(var(--color-darkgrey));
}

.border-t-m-darkred {
  border-top-color: rgb(var(--color-darkred));
}

.border-r-m-darkred {
  border-right-color: rgb(var(--color-darkred));
}

.border-b-m-darkred {
  border-bottom-color: rgb(var(--color-darkred));
}

.border-l-m-darkred {
  border-left-color: rgb(var(--color-darkred));
}

.border-t-m-success {
  border-top-color: rgb(var(--color-success));
}

.border-r-m-success {
  border-right-color: rgb(var(--color-success));
}

.border-b-m-success {
  border-bottom-color: rgb(var(--color-success));
}

.border-l-m-success {
  border-left-color: rgb(var(--color-success));
}

.border-t-m-warning {
  border-top-color: rgb(var(--color-warning));
}

.border-r-m-warning {
  border-right-color: rgb(var(--color-warning));
}

.border-b-m-warning {
  border-bottom-color: rgb(var(--color-warning));
}

.border-l-m-warning {
  border-left-color: rgb(var(--color-warning));
}

.border-t-m-danger {
  border-top-color: rgb(var(--color-danger));
}

.border-r-m-danger {
  border-right-color: rgb(var(--color-danger));
}

.border-b-m-danger {
  border-bottom-color: rgb(var(--color-danger));
}

.border-l-m-danger {
  border-left-color: rgb(var(--color-danger));
}

.border-t-m-info {
  border-top-color: rgb(var(--color-info));
}

.border-r-m-info {
  border-right-color: rgb(var(--color-info));
}

.border-b-m-info {
  border-bottom-color: rgb(var(--color-info));
}

.border-l-m-info {
  border-left-color: rgb(var(--color-info));
}

.border-t-m-black {
  border-top-color: rgb(var(--color-black));
}

.border-r-m-black {
  border-right-color: rgb(var(--color-black));
}

.border-b-m-black {
  border-bottom-color: rgb(var(--color-black));
}

.border-l-m-black {
  border-left-color: rgb(var(--color-black));
}

.border-t-m-white {
  border-top-color: rgb(var(--color-white));
}

.border-r-m-white {
  border-right-color: rgb(var(--color-white));
}

.border-b-m-white {
  border-bottom-color: rgb(var(--color-white));
}

.border-l-m-white {
  border-left-color: rgb(var(--color-white));
}

.border-t-l-primary {
  border-top-color: rgb(var(--color-primary));
}

.border-r-l-primary {
  border-right-color: rgb(var(--color-primary));
}

.border-b-l-primary {
  border-bottom-color: rgb(var(--color-primary));
}

.border-l-l-primary {
  border-left-color: rgb(var(--color-primary));
}

.border-t-l-secondary {
  border-top-color: rgb(var(--color-secondary));
}

.border-r-l-secondary {
  border-right-color: rgb(var(--color-secondary));
}

.border-b-l-secondary {
  border-bottom-color: rgb(var(--color-secondary));
}

.border-l-l-secondary {
  border-left-color: rgb(var(--color-secondary));
}

.border-t-l-kaki {
  border-top-color: rgb(var(--color-kaki));
}

.border-r-l-kaki {
  border-right-color: rgb(var(--color-kaki));
}

.border-b-l-kaki {
  border-bottom-color: rgb(var(--color-kaki));
}

.border-l-l-kaki {
  border-left-color: rgb(var(--color-kaki));
}

.border-t-l-darkgrey {
  border-top-color: rgb(var(--color-darkgrey));
}

.border-r-l-darkgrey {
  border-right-color: rgb(var(--color-darkgrey));
}

.border-b-l-darkgrey {
  border-bottom-color: rgb(var(--color-darkgrey));
}

.border-l-l-darkgrey {
  border-left-color: rgb(var(--color-darkgrey));
}

.border-t-l-darkred {
  border-top-color: rgb(var(--color-darkred));
}

.border-r-l-darkred {
  border-right-color: rgb(var(--color-darkred));
}

.border-b-l-darkred {
  border-bottom-color: rgb(var(--color-darkred));
}

.border-l-l-darkred {
  border-left-color: rgb(var(--color-darkred));
}

.border-t-l-success {
  border-top-color: rgb(var(--color-success));
}

.border-r-l-success {
  border-right-color: rgb(var(--color-success));
}

.border-b-l-success {
  border-bottom-color: rgb(var(--color-success));
}

.border-l-l-success {
  border-left-color: rgb(var(--color-success));
}

.border-t-l-warning {
  border-top-color: rgb(var(--color-warning));
}

.border-r-l-warning {
  border-right-color: rgb(var(--color-warning));
}

.border-b-l-warning {
  border-bottom-color: rgb(var(--color-warning));
}

.border-l-l-warning {
  border-left-color: rgb(var(--color-warning));
}

.border-t-l-danger {
  border-top-color: rgb(var(--color-danger));
}

.border-r-l-danger {
  border-right-color: rgb(var(--color-danger));
}

.border-b-l-danger {
  border-bottom-color: rgb(var(--color-danger));
}

.border-l-l-danger {
  border-left-color: rgb(var(--color-danger));
}

.border-t-l-info {
  border-top-color: rgb(var(--color-info));
}

.border-r-l-info {
  border-right-color: rgb(var(--color-info));
}

.border-b-l-info {
  border-bottom-color: rgb(var(--color-info));
}

.border-l-l-info {
  border-left-color: rgb(var(--color-info));
}

.border-t-l-black {
  border-top-color: rgb(var(--color-black));
}

.border-r-l-black {
  border-right-color: rgb(var(--color-black));
}

.border-b-l-black {
  border-bottom-color: rgb(var(--color-black));
}

.border-l-l-black {
  border-left-color: rgb(var(--color-black));
}

.border-t-l-white {
  border-top-color: rgb(var(--color-white));
}

.border-r-l-white {
  border-right-color: rgb(var(--color-white));
}

.border-b-l-white {
  border-bottom-color: rgb(var(--color-white));
}

.border-l-l-white {
  border-left-color: rgb(var(--color-white));
}

.border-t-xl-primary {
  border-top-color: rgb(var(--color-primary));
}

.border-r-xl-primary {
  border-right-color: rgb(var(--color-primary));
}

.border-b-xl-primary {
  border-bottom-color: rgb(var(--color-primary));
}

.border-l-xl-primary {
  border-left-color: rgb(var(--color-primary));
}

.border-t-xl-secondary {
  border-top-color: rgb(var(--color-secondary));
}

.border-r-xl-secondary {
  border-right-color: rgb(var(--color-secondary));
}

.border-b-xl-secondary {
  border-bottom-color: rgb(var(--color-secondary));
}

.border-l-xl-secondary {
  border-left-color: rgb(var(--color-secondary));
}

.border-t-xl-kaki {
  border-top-color: rgb(var(--color-kaki));
}

.border-r-xl-kaki {
  border-right-color: rgb(var(--color-kaki));
}

.border-b-xl-kaki {
  border-bottom-color: rgb(var(--color-kaki));
}

.border-l-xl-kaki {
  border-left-color: rgb(var(--color-kaki));
}

.border-t-xl-darkgrey {
  border-top-color: rgb(var(--color-darkgrey));
}

.border-r-xl-darkgrey {
  border-right-color: rgb(var(--color-darkgrey));
}

.border-b-xl-darkgrey {
  border-bottom-color: rgb(var(--color-darkgrey));
}

.border-l-xl-darkgrey {
  border-left-color: rgb(var(--color-darkgrey));
}

.border-t-xl-darkred {
  border-top-color: rgb(var(--color-darkred));
}

.border-r-xl-darkred {
  border-right-color: rgb(var(--color-darkred));
}

.border-b-xl-darkred {
  border-bottom-color: rgb(var(--color-darkred));
}

.border-l-xl-darkred {
  border-left-color: rgb(var(--color-darkred));
}

.border-t-xl-success {
  border-top-color: rgb(var(--color-success));
}

.border-r-xl-success {
  border-right-color: rgb(var(--color-success));
}

.border-b-xl-success {
  border-bottom-color: rgb(var(--color-success));
}

.border-l-xl-success {
  border-left-color: rgb(var(--color-success));
}

.border-t-xl-warning {
  border-top-color: rgb(var(--color-warning));
}

.border-r-xl-warning {
  border-right-color: rgb(var(--color-warning));
}

.border-b-xl-warning {
  border-bottom-color: rgb(var(--color-warning));
}

.border-l-xl-warning {
  border-left-color: rgb(var(--color-warning));
}

.border-t-xl-danger {
  border-top-color: rgb(var(--color-danger));
}

.border-r-xl-danger {
  border-right-color: rgb(var(--color-danger));
}

.border-b-xl-danger {
  border-bottom-color: rgb(var(--color-danger));
}

.border-l-xl-danger {
  border-left-color: rgb(var(--color-danger));
}

.border-t-xl-info {
  border-top-color: rgb(var(--color-info));
}

.border-r-xl-info {
  border-right-color: rgb(var(--color-info));
}

.border-b-xl-info {
  border-bottom-color: rgb(var(--color-info));
}

.border-l-xl-info {
  border-left-color: rgb(var(--color-info));
}

.border-t-xl-black {
  border-top-color: rgb(var(--color-black));
}

.border-r-xl-black {
  border-right-color: rgb(var(--color-black));
}

.border-b-xl-black {
  border-bottom-color: rgb(var(--color-black));
}

.border-l-xl-black {
  border-left-color: rgb(var(--color-black));
}

.border-t-xl-white {
  border-top-color: rgb(var(--color-white));
}

.border-r-xl-white {
  border-right-color: rgb(var(--color-white));
}

.border-b-xl-white {
  border-bottom-color: rgb(var(--color-white));
}

.border-l-xl-white {
  border-left-color: rgb(var(--color-white));
}

.border-t-xxl-primary {
  border-top-color: rgb(var(--color-primary));
}

.border-r-xxl-primary {
  border-right-color: rgb(var(--color-primary));
}

.border-b-xxl-primary {
  border-bottom-color: rgb(var(--color-primary));
}

.border-l-xxl-primary {
  border-left-color: rgb(var(--color-primary));
}

.border-t-xxl-secondary {
  border-top-color: rgb(var(--color-secondary));
}

.border-r-xxl-secondary {
  border-right-color: rgb(var(--color-secondary));
}

.border-b-xxl-secondary {
  border-bottom-color: rgb(var(--color-secondary));
}

.border-l-xxl-secondary {
  border-left-color: rgb(var(--color-secondary));
}

.border-t-xxl-kaki {
  border-top-color: rgb(var(--color-kaki));
}

.border-r-xxl-kaki {
  border-right-color: rgb(var(--color-kaki));
}

.border-b-xxl-kaki {
  border-bottom-color: rgb(var(--color-kaki));
}

.border-l-xxl-kaki {
  border-left-color: rgb(var(--color-kaki));
}

.border-t-xxl-darkgrey {
  border-top-color: rgb(var(--color-darkgrey));
}

.border-r-xxl-darkgrey {
  border-right-color: rgb(var(--color-darkgrey));
}

.border-b-xxl-darkgrey {
  border-bottom-color: rgb(var(--color-darkgrey));
}

.border-l-xxl-darkgrey {
  border-left-color: rgb(var(--color-darkgrey));
}

.border-t-xxl-darkred {
  border-top-color: rgb(var(--color-darkred));
}

.border-r-xxl-darkred {
  border-right-color: rgb(var(--color-darkred));
}

.border-b-xxl-darkred {
  border-bottom-color: rgb(var(--color-darkred));
}

.border-l-xxl-darkred {
  border-left-color: rgb(var(--color-darkred));
}

.border-t-xxl-success {
  border-top-color: rgb(var(--color-success));
}

.border-r-xxl-success {
  border-right-color: rgb(var(--color-success));
}

.border-b-xxl-success {
  border-bottom-color: rgb(var(--color-success));
}

.border-l-xxl-success {
  border-left-color: rgb(var(--color-success));
}

.border-t-xxl-warning {
  border-top-color: rgb(var(--color-warning));
}

.border-r-xxl-warning {
  border-right-color: rgb(var(--color-warning));
}

.border-b-xxl-warning {
  border-bottom-color: rgb(var(--color-warning));
}

.border-l-xxl-warning {
  border-left-color: rgb(var(--color-warning));
}

.border-t-xxl-danger {
  border-top-color: rgb(var(--color-danger));
}

.border-r-xxl-danger {
  border-right-color: rgb(var(--color-danger));
}

.border-b-xxl-danger {
  border-bottom-color: rgb(var(--color-danger));
}

.border-l-xxl-danger {
  border-left-color: rgb(var(--color-danger));
}

.border-t-xxl-info {
  border-top-color: rgb(var(--color-info));
}

.border-r-xxl-info {
  border-right-color: rgb(var(--color-info));
}

.border-b-xxl-info {
  border-bottom-color: rgb(var(--color-info));
}

.border-l-xxl-info {
  border-left-color: rgb(var(--color-info));
}

.border-t-xxl-black {
  border-top-color: rgb(var(--color-black));
}

.border-r-xxl-black {
  border-right-color: rgb(var(--color-black));
}

.border-b-xxl-black {
  border-bottom-color: rgb(var(--color-black));
}

.border-l-xxl-black {
  border-left-color: rgb(var(--color-black));
}

.border-t-xxl-white {
  border-top-color: rgb(var(--color-white));
}

.border-r-xxl-white {
  border-right-color: rgb(var(--color-white));
}

.border-b-xxl-white {
  border-bottom-color: rgb(var(--color-white));
}

.border-l-xxl-white {
  border-left-color: rgb(var(--color-white));
}

@keyframes slide-up {
  0% {
    transform: translateY(50px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
.anim-slide-up {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.anim-slide-up.visible {
  animation: slide-up 0.5s ease forwards;
}

.anim-hover-scale {
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}
.anim-hover-scale:hover {
  -webkit-transform: scale(1.05);
  transform: scale(1.05);
  border: 1px solid rgb(var(--color-primary));
}

.btn {
  --btn-text-color: var(--color-text-base);
  --btn-bg-color: transparent;
  --btn-border-color: var(--color-border);
  --btn-border-width: 1px;
  --btn-padding: var(--padding-2);
  --btn-font-size: var(--font-size-s);
  --btn-radius: var(--radius-2);
  background-color: rgb(var(--btn-bg-color)/var(--bg-opacity));
  color: rgb(var(--btn-text-color)/var(--color-opacity));
  border-color: rgb(var(--btn-border-color)/var(--border-opacity));
  border-width: var(--btn-border-width);
  border-style: solid;
  padding: var(--btn-padding);
  font-size: var(--btn-font-size);
  border-radius: var(--btn-radius);
  cursor: pointer;
  transition: all 0.3s ease-in-out;
  text-decoration: none;
}

.btn-xxl {
  --btn-font-size: var(--font-size-xxl);
  --btn-radius: var(--radius-xxl);
}

.btn-xl {
  --btn-font-size: var(--font-size-xl);
  --btn-radius: var(--radius-xl);
}

.btn-l {
  --btn-font-size: var(--font-size-l);
  --btn-radius: var(--radius-l);
}

.btn-m {
  --btn-font-size: var(--font-size-m);
  --btn-radius: var(--radius-m);
}

.btn-s {
  --btn-font-size: var(--font-size-s);
  --btn-radius: var(--radius-s);
}

.btn-xs {
  --btn-font-size: var(--font-size-xs);
  --btn-radius: var(--radius-xs);
}

.btn-xxs {
  --btn-font-size: var(--font-size-xxs);
  --btn-radius: var(--radius-xxs);
}

.btn-primary {
  --btn-bg-color: var(--color-primary);
  --btn-border-color: var(--color-primary);
}
.btn-primary else {
  --btn-text-color: var(--color-primary-light-50);
}
.btn-primary:hover, .btn-primary:focus {
  --btn-bg-color: var(--color-primary-dark-20);
  --btn-border-color: var(--color-primary-dark-20);
}

.btn-secondary {
  --btn-bg-color: var(--color-secondary);
  --btn-text-color: var(--color-secondary-dark-60);
  --btn-border-color: var(--color-secondary);
}
.btn-secondary else {
  --btn-text-color: var(--color-secondary-light-50);
}
.btn-secondary:hover, .btn-secondary:focus {
  --btn-bg-color: var(--color-secondary-dark-20);
  --btn-border-color: var(--color-secondary-dark-20);
}

.btn-kaki {
  --btn-bg-color: var(--color-kaki);
  --btn-border-color: var(--color-kaki);
}
.btn-kaki else {
  --btn-text-color: var(--color-kaki-light-50);
}
.btn-kaki:hover, .btn-kaki:focus {
  --btn-bg-color: var(--color-kaki-dark-20);
  --btn-border-color: var(--color-kaki-dark-20);
}

.btn-darkgrey {
  --btn-bg-color: var(--color-darkgrey);
  --btn-border-color: var(--color-darkgrey);
}
.btn-darkgrey else {
  --btn-text-color: var(--color-darkgrey-light-50);
}
.btn-darkgrey:hover, .btn-darkgrey:focus {
  --btn-bg-color: var(--color-darkgrey-dark-20);
  --btn-border-color: var(--color-darkgrey-dark-20);
}

.btn-darkred {
  --btn-bg-color: var(--color-darkred);
  --btn-border-color: var(--color-darkred);
}
.btn-darkred else {
  --btn-text-color: var(--color-darkred-light-50);
}
.btn-darkred:hover, .btn-darkred:focus {
  --btn-bg-color: var(--color-darkred-dark-20);
  --btn-border-color: var(--color-darkred-dark-20);
}

.btn-success {
  --btn-bg-color: var(--color-success);
  --btn-border-color: var(--color-success);
}
.btn-success else {
  --btn-text-color: var(--color-success-light-50);
}
.btn-success:hover, .btn-success:focus {
  --btn-bg-color: var(--color-success-dark-20);
  --btn-border-color: var(--color-success-dark-20);
}

.btn-warning {
  --btn-bg-color: var(--color-warning);
  --btn-border-color: var(--color-warning);
}
.btn-warning else {
  --btn-text-color: var(--color-warning-light-50);
}
.btn-warning:hover, .btn-warning:focus {
  --btn-bg-color: var(--color-warning-dark-20);
  --btn-border-color: var(--color-warning-dark-20);
}

.btn-danger {
  --btn-bg-color: var(--color-danger);
  --btn-border-color: var(--color-danger);
}
.btn-danger else {
  --btn-text-color: var(--color-danger-light-50);
}
.btn-danger:hover, .btn-danger:focus {
  --btn-bg-color: var(--color-danger-dark-20);
  --btn-border-color: var(--color-danger-dark-20);
}

.btn-info {
  --btn-bg-color: var(--color-info);
  --btn-border-color: var(--color-info);
}
.btn-info else {
  --btn-text-color: var(--color-info-light-50);
}
.btn-info:hover, .btn-info:focus {
  --btn-bg-color: var(--color-info-dark-20);
  --btn-border-color: var(--color-info-dark-20);
}

.btn-black {
  --btn-bg-color: var(--color-black);
  --btn-border-color: var(--color-black);
}
.btn-black else {
  --btn-text-color: var(--color-black-light-50);
}
.btn-black:hover, .btn-black:focus {
  --btn-bg-color: var(--color-black-dark-20);
  --btn-border-color: var(--color-black-dark-20);
}

.btn-white {
  --btn-bg-color: var(--color-white);
  --btn-text-color: var(--color-white-dark-60);
  --btn-border-color: var(--color-white);
}
.btn-white else {
  --btn-text-color: var(--color-white-light-50);
}
.btn-white:hover, .btn-white:focus {
  --btn-bg-color: var(--color-white-dark-20);
  --btn-border-color: var(--color-white-dark-20);
}

.btn-connexion {
  position: relative;
  padding-right: 40px;
  height: 60px;
}
.btn-connexion::after {
  content: "";
  width: 30px;
  height: 40px;
  position: absolute;
  background-image: url("img/Login.svg");
  background-repeat: no-repeat;
  background-position: center;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  pointer-events: none;
  z-index: 100;
}

.btn-deconnexion {
  height: 60px;
}

.btn-account:hover, .btn-account:focus {
  --btn-border-color: rgb(var(--color-primary)/ var(--border-opacity));
  translate: 0 -2px;
}

.icon-circle {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: rgb(var(--color-white)/0.1);
  display: flex;
  justify-content: center;
  align-items: center;
}

.status-pill {
  padding: 5px 15px;
  border-radius: 20px;
  font-size: var(--font-size-m);
  font-weight: bold;
}

.status-danger {
  background-color: rgb(var(--color-danger)/0.2);
  color: rgb(var(--color-danger));
}

.arrow-icon-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 30px;
  height: 30px;
}

.pill-button {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 36px;
  height: 36px;
  border-radius: 18px;
  padding: 8px;
  transition: transform 0.2s, background-color 0.2s;
}
.pill-button:hover, .pill-button:focus {
  transform: scale(1.1);
  background-color: rgb(var(--color-primary)/0.4);
}

.card-action {
  position: relative;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  border-radius: var(--radius-2);
  height: 100%;
  cursor: pointer;
}
.card-action:hover, .card-action:focus {
  transform: translateY(-5px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
  border-color: rgb(var(--color-primary));
}
.card-action .icon-circle {
  transition: background-color 0.3s ease;
}
.card-action:hover .icon-circle, .card-action:focus .icon-circle {
  background-color: rgb(var(--color-primary)/0.3);
}
.card-action .pill-button {
  margin-top: auto;
}
.card-action .card-action {
  transform: translateY(-5px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
  border-color: rgb(var(--color-primary));
}
.card-action .card-action .icon-circle {
  background-color: rgb(var(--color-primary)/0.3);
}

.card-status {
  position: relative;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  border-radius: var(--radius-2);
  height: 100%;
}
.card-status:hover, .card-status:focus {
  transform: translateY(-5px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
}
.card-status-active .icon-circle {
  background-color: rgb(var(--color-success)/0.3);
}
.card-status-active:hover, .card-status-active:focus {
  border-color: rgb(var(--color-success));
}
.card-status-inactive .icon-circle {
  background-color: rgb(var(--color-danger)/0.3);
}
.card-status-inactive:hover, .card-status-inactive:focus {
  border-color: rgb(var(--color-danger));
}

.status-pill {
  padding: 8px 16px;
  border-radius: 20px;
  font-size: var(--font-size-xs);
  font-weight: bold;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.status-pill::before {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.status-pill.status-danger {
  background-color: rgb(var(--color-danger)/0.2);
  color: rgb(var(--color-danger));
}
.status-pill.status-danger::before {
  background-color: rgb(var(--color-danger));
}
.status-pill.status-success {
  background-color: rgb(var(--color-success)/0.2);
  color: rgb(var(--color-success));
}
.status-pill.status-success::before {
  background-color: rgb(var(--color-success));
}

.panel {
  --panel-text-color: var(--color-text-base);
  --panel-bg-color: transparent;
  --panel-border-color: transparent;
  --panel-border-width: 0;
  --panel-padding: var(--padding-2);
  background-color: rgb(var(--panel-bg-color)/var(--bg-opacity));
  color: rgb(var(--panel-text-color)/var(--color-opacity));
  border-color: rgb(var(--panel-border-color)/var(--border-opacity));
  border-width: var(--panel-border-width);
  border-style: solid;
  padding: var(--panel-padding);
}

.panel-primary {
  --panel-text-color: var(--color-primary-dark-30);
  --panel-bg-color: var(--color-primary-light-50);
  --panel-border-color: var(--color-primary);
}

.panel-secondary {
  --panel-text-color: var(--color-secondary-dark-30);
  --panel-bg-color: var(--color-secondary-light-50);
  --panel-border-color: var(--color-secondary);
}

.panel-kaki {
  --panel-text-color: var(--color-kaki-dark-30);
  --panel-bg-color: var(--color-kaki-light-50);
  --panel-border-color: var(--color-kaki);
}

.panel-darkgrey {
  --panel-text-color: var(--color-darkgrey-dark-30);
  --panel-bg-color: var(--color-darkgrey-light-50);
  --panel-border-color: var(--color-darkgrey);
}

.panel-darkred {
  --panel-text-color: var(--color-darkred-dark-30);
  --panel-bg-color: var(--color-darkred-light-50);
  --panel-border-color: var(--color-darkred);
}

.panel-success {
  --panel-text-color: var(--color-success-dark-30);
  --panel-bg-color: var(--color-success-light-50);
  --panel-border-color: var(--color-success);
}

.panel-warning {
  --panel-text-color: var(--color-warning-dark-30);
  --panel-bg-color: var(--color-warning-light-50);
  --panel-border-color: var(--color-warning);
}

.panel-danger {
  --panel-text-color: var(--color-danger-dark-30);
  --panel-bg-color: var(--color-danger-light-50);
  --panel-border-color: var(--color-danger);
}

.panel-info {
  --panel-text-color: var(--color-info-dark-30);
  --panel-bg-color: var(--color-info-light-50);
  --panel-border-color: var(--color-info);
}

.panel-black {
  --panel-text-color: var(--color-black-dark-30);
  --panel-bg-color: var(--color-black-light-50);
  --panel-border-color: var(--color-black);
}

.panel-white {
  --panel-text-color: var(--color-white-dark-30);
  --panel-bg-color: var(--color-white-light-50);
  --panel-border-color: var(--color-white);
}

.panel-solid {
  --panel-text-color: var(--color-text-base);
  --panel-bg-color: transparent;
  --panel-border-color: transparent;
  --panel-border-width: 0;
  --panel-padding: var(--padding-4);
  background-color: rgb(var(--panel-bg-color)/var(--bg-opacity));
  color: rgb(var(--panel-text-color)/var(--color-opacity));
  border-color: rgb(var(--panel-border-color)/var(--border-opacity));
  border-width: var(--panel-border-width);
  border-style: solid;
  padding: var(--panel-padding);
}

.panel-solid-primary {
  --panel-bg-color: var(--color-primary);
  --panel-border-color: var(--color-primary);
}

.panel-solid-secondary {
  --panel-bg-color: var(--color-secondary);
  --panel-border-color: var(--color-secondary);
}

.panel-solid-kaki {
  --panel-bg-color: var(--color-kaki);
  --panel-border-color: var(--color-kaki);
}

.panel-solid-darkgrey {
  --panel-bg-color: var(--color-darkgrey);
  --panel-border-color: var(--color-darkgrey);
}

.panel-solid-darkred {
  --panel-bg-color: var(--color-darkred);
  --panel-border-color: var(--color-darkred);
}

.panel-solid-success {
  --panel-bg-color: var(--color-success);
  --panel-border-color: var(--color-success);
}

.panel-solid-warning {
  --panel-bg-color: var(--color-warning);
  --panel-border-color: var(--color-warning);
}

.panel-solid-danger {
  --panel-bg-color: var(--color-danger);
  --panel-border-color: var(--color-danger);
}

.panel-solid-info {
  --panel-bg-color: var(--color-info);
  --panel-border-color: var(--color-info);
}

.panel-solid-black {
  --panel-bg-color: var(--color-black);
  --panel-border-color: var(--color-black);
}

.panel-solid-white {
  --panel-bg-color: var(--color-white);
  --panel-border-color: var(--color-white);
}

.panel-img-bg {
  padding: 0;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
}

.panel, .panel-solid, .panel-img-bg {
  position: relative;
  z-index: 10;
}
.panel .panel-header, .panel-solid .panel-header, .panel-img-bg .panel-header {
  margin-bottom: var(--margin-2);
}
.panel .panel-body, .panel-solid .panel-body, .panel-img-bg .panel-body {
  color: rgb(var(--color-text-base)/var(--color-opacity));
  font-size: var(--font-size-xs);
  flex: 2;
}
.panel .panel-body-pad-b, .panel-solid .panel-body-pad-b, .panel-img-bg .panel-body-pad-b {
  padding-bottom: var(--panel-padding);
}
.panel .panel-body-pad-t, .panel-solid .panel-body-pad-t, .panel-img-bg .panel-body-pad-t {
  padding-top: var(--panel-padding);
}
.panel .panel-body-text-bottom, .panel-solid .panel-body-text-bottom, .panel-img-bg .panel-body-text-bottom {
  align-content: flex-end;
}
.panel .panel-body-scroll, .panel-solid .panel-body-scroll, .panel-img-bg .panel-body-scroll {
  max-height: 300px;
  overflow-y: scroll;
  overflow-x: hidden;
  color: rgb(var(--color-text-base)/var(--color-opacity));
  font-size: var(--font-size-xs);
}
.panel .panel-footer, .panel-solid .panel-footer, .panel-img-bg .panel-footer {
  margin-top: var(--margin-2);
}

.img-bg {
  width: 100%;
  object-fit: cover;
  z-index: -1;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
}

.img-bg-container {
  width: 100%;
  height: 100vh;
  object-fit: cover;
  z-index: -1;
}

.img-bg-section {
  width: 100%;
  object-fit: cover;
  z-index: -1;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  overflow: hidden;
}

.img-overlay-section {
  width: 100%;
  height: 100%;
  z-index: 0;
}

.img-overlay {
  width: 100%;
  height: 100%;
  z-index: 0;
  display: flex;
  flex-direction: column;
}
.img-overlay > .panel-header {
  padding-top: var(--panel-padding);
  padding-left: var(--panel-padding);
  padding-right: var(--panel-padding);
}
.img-overlay > .panel-body {
  padding-left: var(--panel-padding);
  padding-right: var(--panel-padding);
}
.img-overlay > .panel-footer {
  padding-bottom: var(--panel-padding);
  padding-left: var(--panel-padding);
  padding-right: var(--panel-padding);
}

.img-overlay-bottom {
  justify-content: flex-end;
  padding-top: 50%;
}
.img-overlay-bottom > .panel-body {
  flex: 0;
}

.navbar {
  --nav-text-color: var(--color-text-base);
  --nav-bg-color: var(--color-black);
  --nav-border-color: transparent;
  --nav-border-width: 0;
  background-color: rgb(var(--nav-bg-color)/var(--bg-opacity));
  color: rgb(var(--nav-text-color)/var(--color-opacity));
  border-color: rgb(var(--nav-border-color)/var(--border-opacity));
  border-width: var(--nav-border-width);
  border-style: solid;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
}
.navbar .navbar-container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: var(--margin-2);
  padding: 0 var(--padding-1);
}
.navbar .navbar-container .navbar-logo img {
  height: 60px;
  cursor: pointer;
  text-decoration: none;
}
.navbar .navbar-container .navbar-menu {
  display: flex;
  flex-direction: row;
  gap: var(--margin-3);
}
.navbar .navbar-container .navbar-menu .navbar-link {
  align-content: center;
  display: flex;
  align-items: stretch;
}
.navbar .navbar-container .navbar-menu .navbar-link button {
  font-size: var(--font-size-xs);
  color: rgb(var(--color-text-base)/var(--color-opacity));
  cursor: pointer;
  text-decoration: none;
  transition: color 0.3s ease-in-out;
  flex: 1;
}
.navbar .navbar-container .navbar-menu .navbar-link a {
  display: block;
  font-size: var(--font-size-xs);
  color: rgb(var(--footer-text-color));
  text-decoration: none;
  transition: all 0.2s ease-in-out;
  padding: 0 var(--padding-2);
  border-bottom: 2px solid transparent;
  display: flex;
  align-items: center;
}
.navbar .navbar-container .navbar-menu .navbar-link a:hover:not(.btn-deconnexion), .navbar .navbar-container .navbar-menu .navbar-link a:focus:not(.btn-deconnexion), .navbar .navbar-container .navbar-menu .navbar-link a:active:not(.btn-deconnexion) {
  color: rgb(var(--color-primary)/var(--color-opacity));
  border-bottom: 2px solid rgb(var(--color-primary)/var(--color-opacity));
}
.navbar .navbar-container .navbar-toggle {
  display: none;
}
@media only screen and (max-width: 768px) {
  .navbar .navbar-container {
    flex-direction: column;
    align-items: stretch;
  }
  .navbar .navbar-container .navbar-menu {
    display: none;
    flex-direction: column;
    justify-content: stretch;
  }
  .navbar .navbar-container .navbar-menu .navbar-link {
    justify-content: stretch;
  }
  .navbar .navbar-container .navbar-menu .navbar-link button {
    flex: 1;
  }
  .navbar .navbar-container .navbar-menu .navbar-link a {
    padding-bottom: var(--padding-1);
  }
  .navbar .navbar-container .navbar-menu .navbar-link a:hover, .navbar .navbar-container .navbar-menu .navbar-link a:focus, .navbar .navbar-container .navbar-menu .navbar-link a:active {
    color: rgb(var(--color-primary)/var(--color-opacity));
    border-bottom: 2px solid rgb(var(--color-primary)/var(--color-opacity));
    flex: 1;
    padding-bottom: var(--padding-1);
  }
  .navbar .navbar-container .navbar-toggle {
    display: block;
    width: 60px;
    height: 45px;
    position: relative;
    transform: rotate(0deg) scale(50%);
    transition: 0.5s ease-in-out;
    cursor: pointer;
  }
  .navbar .navbar-container .navbar-toggle span {
    display: block;
    position: absolute;
    height: 6px;
    width: 100%;
    background: rgb(var(--color-primary)/var(--color-opacity));
    border-radius: 0;
    opacity: 1;
    left: 0;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: 0.25s ease-in-out;
    -moz-transition: 0.25s ease-in-out;
    -o-transition: 0.25s ease-in-out;
    transition: 0.25s ease-in-out;
  }
  .navbar .navbar-container .navbar-toggle span:nth-child(1) {
    top: 0px;
  }
  .navbar .navbar-container .navbar-toggle span:nth-child(2), .navbar .navbar-container .navbar-toggle span:nth-child(3) {
    top: 18px;
  }
  .navbar .navbar-container .navbar-toggle span:nth-child(4) {
    top: 36px;
  }
  .navbar .navbar-container.open .navbar-menu {
    display: flex;
  }
  .navbar .navbar-container.open .navbar-toggle span:nth-child(1) {
    top: 18px;
    width: 0%;
    left: 50%;
  }
  .navbar .navbar-container.open .navbar-toggle span:nth-child(2) {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
  }
  .navbar .navbar-container.open .navbar-toggle span:nth-child(3) {
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
  }
  .navbar .navbar-container.open .navbar-toggle span:nth-child(4) {
    top: 18px;
    width: 0%;
    left: 50%;
  }
}

.footer {
  --footer-bg-color: var(--color-black);
  --footer-text-color: var(--color-text-base);
  --footer-border-color: transparent;
  --nav-border-width: 1px;
  background-color: rgb(var(--footer-bg-color)/var(--bg-opacity));
  color: rgb(var(--footer-text-color)/var(--color-opacity));
  border-top: 1px solid rgb(var(--footer-border-color)/var(--border-opacity));
  display: flex;
  flex-direction: column;
  gap: var(--margin-4);
  width: 100%;
}
.footer .footer-container {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  padding: var(--padding-4) var(--padding-4);
  gap: var(--margin-4);
}
.footer .footer-container h4 {
  font-size: var(--font-size-s);
  display: inline-block;
  color: rgb(var(--footer-text-color)/0.7);
}
.footer .footer-container p {
  font-size: var(--font-size-xxs);
  line-height: 1.5;
  margin-top: var(--margin-2);
}
.footer .footer-logo {
  flex: 1;
}
.footer .footer-logo a {
  font-size: var(--font-size-xl);
  font-weight: bold;
  color: rgb(var(--color-primary)/var(--color-opacity));
  text-decoration: none;
  margin-bottom: var(--margin-2);
}
.footer .footer-logo img {
  max-height: 180px;
  max-width: 300px;
  margin: var(--margin-1);
}
.footer .footer-menu {
  flex: 1;
}
.footer .footer-menu h4 {
  position: relative;
}
.footer .footer-menu ul {
  list-style: none;
  padding: 0;
  margin: var(--margin-2) 0 0 0;
  display: flex;
  flex-direction: column;
  gap: var(--margin-1);
}
.footer .footer-menu li a {
  display: block;
  font-size: var(--font-size-xs);
  color: rgb(var(--footer-text-color));
  text-decoration: none;
  transition: all 0.3s ease;
  padding: var(--padding-1) 0;
  border-radius: var(--radius-xs);
  border-left: 2px solid transparent;
  cursor: pointer;
}
.footer .footer-menu li a:hover, .footer .footer-menu li a:focus, .footer .footer-menu li a:active {
  color: rgb(var(--color-primary)/var(--color-opacity));
  border-left: 2px solid rgb(var(--color-primary)/var(--color-opacity));
  padding: var(--padding-1) var(--padding-2);
}
.footer .footer-contact {
  flex: 1;
}
.footer .footer-contact .contact-info {
  display: flex;
  flex-direction: row;
  gap: var(--margin-1);
  align-items: center;
}
.footer .footer-contact img, .footer .footer-contact svg {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  color: rgb(var(--color-primary)/var(--color-opacity));
  margin-right: var(--margin-2);
}
.footer .footer-contact p {
  margin: 0;
  padding: var(--padding-1) 0;
}
.footer .footer-contact .footer-socials {
  display: flex;
  gap: var(--margin-2);
  margin-top: var(--margin-2);
}
.footer .footer-contact .footer-socials a {
  display: flex;
  align-items: center;
  justify-content: center;
}
.footer .footer-contact .footer-socials svg {
  width: 30px;
  height: 30px;
  color: rgb(var(--footer-text-color)/var(--color-opacity));
  margin-right: 0;
}
.footer .footer-contact .footer-socials svg:hover, .footer .footer-contact .footer-socials svg:focus, .footer .footer-contact .footer-socials svg:active {
  color: rgb(var(--color-primary)/var(--color-opacity));
}
.footer .footer-bottom {
  text-align: center;
  font-size: var(--font-size-xxs);
  background-color: rgb(var(--color-black)/var(--bg-opacity));
  border-top: 1px solid rgb(var(--footer-border-color)/0.5);
  padding: var(--padding-2) 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  align-content: center;
}
.footer .footer-bottom p {
  color: rgb(var(--footer-text-color)/0.5);
}
.footer .footer-bottom a {
  color: rgb(var(--footer-text-color)/0.5);
  text-decoration: none;
  transition: color 0.3s ease;
}
.footer .footer-bottom a:hover, .footer .footer-bottom a:focus, .footer .footer-bottom a:active {
  color: rgb(var(--color-primary)/var(--color-opacity));
}

@media only screen and (max-width: 768px) {
  .footer .footer-container {
    flex-direction: column;
    align-items: stretch;
  }
  .footer .footer-container .footer-logo {
    text-align: center;
  }
  .footer .footer-container .footer-logo img {
    height: 50px;
  }
  .footer .footer-container .footer-menu {
    flex: 1;
    text-align: center;
  }
  .footer .footer-container .footer-menu ul {
    align-items: center;
  }
  .footer .footer-container .footer-menu li {
    width: 100%;
    max-width: 300px;
    margin: 0 auto;
  }
  .footer .footer-container .footer-menu li a {
    text-align: center;
    justify-content: center;
  }
  .footer .footer-container .footer-menu li a:hover, .footer .footer-container .footer-menu li a:focus, .footer .footer-container .footer-menu li a:active {
    border-left: none;
    border-bottom: 2px solid rgb(var(--color-primary)/var(--color-opacity));
    padding: var(--padding-1) 0;
  }
  .footer .footer-container .footer-contact {
    flex: 1;
    text-align: center;
  }
  .footer .footer-container .footer-contact .contact-info {
    flex-direction: column;
    gap: 0;
    align-items: center;
  }
  .footer .footer-container .footer-contact svg {
    margin-right: 0;
    margin-bottom: var(--margin-1);
  }
  .footer .footer-container .footer-socials {
    justify-content: center;
  }
  .footer .footer-bottom {
    flex-direction: column;
    text-align: center;
    margin: 0 var(--margin-2);
  }
}
@media only screen and (max-width: 600px) {
  .footer .footer-container {
    padding: var(--padding-2);
  }
  .footer .footer-container .footer-menu li {
    max-width: 100%;
  }
}
.form {
  --form-text-color: var(--color-text-base);
  --form-bg-color: transparent;
  --form-border-color: transparent;
  --form-border-width: 0;
  background-color: rgb(var(--form-bg-color)/var(--bg-opacity));
  color: rgb(var(--form-text-color)/var --color-opacity);
  border-color: rgb(var(--form-border-color)/var(--border-opacity));
  border-width: var(--form-border-width);
  border-style: solid;
  display: flex;
  flex-direction: column;
  gap: var(--margin-2);
}
.form .form-line-x {
  display: flex;
  flex-direction: row;
  gap: var(--margin-2);
  align-items: center;
}
.form .form-line-y {
  display: flex;
  flex-direction: column;
}
.form .form-success {
  display: none;
}
.form .form-error {
  display: none;
}
.form.hasError .form-error {
  display: block;
}
.form.hasSuccess .form-success {
  display: flex;
}
.form.hasSuccess .form-line, .form.hasSuccess .form-line-select, .form.hasSuccess .form-animated, .form.hasSuccess .form-line-select, .form.hasSuccess .send-button {
  display: none;
}

.form-line input {
  font-size: var(--font-size-xxs);
  padding: var(--padding-1);
  border-width: 1px;
  border-style: solid;
  border-color: rgb(var(--color-kaki)/var(--border-opacity));
  background-color: rgb(var(--color-darkgrey)/var(--bg-opacity));
  color: rgb(var(--color-text-base)/var(--color-opacity));
  cursor: pointer;
}
.form-line input:focus {
  border-color: rgb(var(--color-primary)/var(--border-opacity));
  box-shadow: 0 0 10px 0 rgb(var(--color-primary)/0.5);
}
.form-line input:required + label:after {
  content: "*";
  color: rgb(var(--color-primary)/var(--border-opacity));
}
.form-line .form-input-checkbox, .form-line .form-input-radio {
  display: flex;
  align-items: center;
  margin-bottom: var(--margin-1);
  padding: var(--padding-1) 0;
  cursor: pointer;
}
.form-line .form-input-checkbox input, .form-line .form-input-radio input {
  margin-right: var(--margin-2);
  width: 25px;
  height: 25px;
}
.form-line .form-input-checkbox input:checked, .form-line .form-input-radio input:checked {
  accent-color: rgb(var(--color-primary)/var(--border-opacity));
}
.form-line .form-input-checkbox {
  position: relative;
}
.form-line .form-input-checkbox input[type=checkbox] {
  position: absolute;
  opacity: 0;
  width: 0px;
  height: 0px;
  z-index: 1;
  cursor: pointer;
}
.form-line .form-input-checkbox input[type=checkbox]:focus + .checkbox-label::before {
  border-color: rgb(var(--color-primary)/var(--border-opacity));
  box-shadow: 0 0 10px 0 rgb(var(--color-primary)/0.5);
}
.form-line .form-input-checkbox .checkbox-label {
  padding-left: 40px;
  position: relative;
  cursor: pointer;
  display: flex;
  align-items: flex-start;
}
.form-line .form-input-checkbox .checkbox-label::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  border-radius: 2px;
  border: 2px solid rgb(var(--color-kaki)/var(--border-opacity));
  background-color: transparent;
  transition: all 0.2s ease;
}
.form-line .form-input-checkbox .checkbox-label::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 50%;
  transform: translateY(-50%) scale(0);
  width: 14px;
  height: 14px;
  border-radius: 2px;
  background-color: rgb(var(--color-primary)/var(--border-opacity));
  transition: all 0.2s ease;
}
.form-line .form-input-checkbox input[type=checkbox]:checked ~ .checkbox-label::before {
  border-color: rgb(var(--color-primary)/var(--border-opacity));
  box-shadow: 0 0 10px 0 rgb(var(--color-primary)/0.3);
}
.form-line .form-input-checkbox input[type=checkbox]:checked ~ .checkbox-label::after {
  transform: translateY(-50%) scale(1);
}
.form-line .form-input-checkbox:hover .checkbox-label::before, .form-line .form-input-checkbox:focus .checkbox-label::before {
  border-color: rgb(var(--color-primary)/var(--border-opacity));
  box-shadow: 0 0 10px 0 rgb(var(--color-primary)/0.2);
}
.form-line .form-input-radio {
  position: relative;
  display: flex;
  align-items: flex-start;
  cursor: pointer;
}
.form-line .form-input-radio input[type=radio] {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  z-index: -1;
  cursor: pointer;
}
.form-line .form-input-radio input[type=radio]:focus + .radio-label::before {
  border-color: rgb(var(--color-primary)/var(--border-opacity));
  box-shadow: 0 0 10px 0 rgb(var(--color-primary)/0.5);
}
.form-line .form-input-radio .radio-label {
  padding-left: 40px;
  position: relative;
  cursor: pointer;
  display: flex;
  align-items: flex-start;
}
.form-line .form-input-radio .radio-label::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid rgb(var(--color-kaki)/var(--border-opacity));
  background-color: transparent;
  transition: all 0.2s ease;
}
.form-line .form-input-radio .radio-label::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 50%;
  transform: translateY(-50%) scale(0);
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background-color: rgb(var(--color-primary)/var(--border-opacity));
  transition: all 0.2s ease;
}
.form-line .form-input-radio input[type=radio]:checked ~ .radio-label::before {
  border-color: rgb(var(--color-primary)/var(--border-opacity));
  box-shadow: 0 0 10px 0 rgb(var(--color-primary)/0.3);
}
.form-line .form-input-radio input[type=radio]:checked ~ .radio-label::after {
  transform: translateY(-50%) scale(1);
}
.form-line .form-input-radio:hover .radio-label::before {
  border-color: rgb(var(--color-primary)/var(--border-opacity));
  box-shadow: 0 0 10px 0 rgb(var(--color-primary)/0.2);
}
.form-line select {
  font-size: var(--font-size-xs);
  padding: var(--padding-1);
  border-width: 1px;
  border-style: solid;
  border-color: rgb(var(--color-kaki)/var(--border-opacity));
  background-color: rgb(var(--color-darkgrey)/var(--bg-opacity));
  color: rgb(var(--color-text-base)/var(--color-opacity));
  cursor: pointer;
}
.form-line select:focus {
  border-color: rgb(var(--color-primary)/var(--border-opacity));
  box-shadow: 0 0 10px 0 rgb(var(--color-primary)/0.5);
}
.form-line select option {
  background-color: rgb(var(--color-darkgrey)/var(--bg-opacity));
  color: rgb(var(--color-text-base)/var(--color-opacity));
}
.form-line textarea {
  font-size: var(--font-size-xxs);
  padding: var(--padding-1);
  border-width: 1px;
  border-style: solid;
  border-color: rgb(var(--color-kaki)/var(--border-opacity));
  background-color: rgb(var(--color-darkgrey)/var(--bg-opacity));
  color: rgb(var(--color-text-base)/var(--color-opacity));
  cursor: pointer;
  width: 100%;
  height: 200px;
}
.form-line textarea:focus {
  border-color: rgb(var(--color-primary)/var(--border-opacity));
  box-shadow: 0 0 10px 0 rgb(var(--color-primary)/0.5);
}
.form-line .input-content {
  position: relative;
}
.form-line .input-content .password-icon {
  display: flex;
  align-items: center;
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
  color: rgb(var(--color-text-base)/var(--color-opacity));
}
.form-line .input-content .password-icon:hover {
  cursor: pointer;
  color: rgb(var(--color-primary)/var(--color-opacity));
}
.form-line .input-content .password-icon .eye-on {
  display: block;
}
.form-line .input-content .password-icon .eye-off {
  display: none;
}
.form-line .input-content.password-visible .eye-off {
  display: block;
}
.form-line .input-content.password-visible .eye-on {
  display: none;
}

.input-full-w {
  width: 100%;
}

.form-animated {
  position: relative;
}
.form-animated label {
  position: absolute;
  line-height: 38px;
  padding-left: 1rem;
  opacity: 0.5;
  padding-right: 1rem;
  transition: all 0.5s;
  pointer-events: none;
}
.form-animated input:focus + label, .form-animated select:focus + label, .form-animated textarea:focus + label, .form-animated input:not(:placeholder-shown) + label, .form-animated select:not(:has(option[value=""]:checked)) + label, .form-animated textarea:not(:placeholder-shown) + label {
  transform: scale(0.7) translateY(-70%);
  background-color: rgb(var(--color-darkgrey)/var(--bg-opacity));
  opacity: 1 !important;
  line-height: 21px;
}
.form-animated label.label-pswd {
  left: 0;
}

.form-toggle {
  border-color: rgb(var(--color-success)/var(--border-opacity));
  border-width: 1px;
  border-style: solid;
  cursor: pointer;
  display: flex;
  flex-direction: row;
  align-items: center;
  border-radius: 50px;
  overflow: hidden;
}
.form-toggle input {
  display: none;
}
.form-toggle label {
  cursor: pointer;
  padding: var(--padding-1);
}
.form-toggle label:has(input:checked) {
  background-color: rgb(var(--color-success)/var(--bg-opacity));
  transition: all 0.25s;
}

.form-switch {
  padding-right: 50px;
  position: relative;
}
.form-switch input {
  display: none;
}
.form-switch::before {
  content: "";
  position: absolute;
  top: calc(50% - 12px);
  right: 0;
  width: 42px;
  height: 24px;
  border-radius: 50px;
  border-color: rgb(var(--color-white)/var(--border-opacity));
  border-width: 1px;
  border-style: solid;
  cursor: pointer;
}
.form-switch::after {
  --bg-opacity: 0.5;
  content: "";
  position: absolute;
  right: 21px;
  top: calc(50% - 9px);
  width: 18px;
  height: 18px;
  background-color: rgb(var(--color-white)/var(--bg-opacity));
  border-radius: 50px;
  transition: all 0.25s;
}
.form-switch:has(input:checked)::after {
  --bg-opacity: 1;
  right: 3px;
  background-color: rgb(var(--color-white)/var(--bg-opacity));
}
.form-switch:has(input:checked)::before {
  background-color: rgb(var(--color-primary)/var(--bg-opacity));
  border-color: rgb(var(--color-primary)/var(--border-opacity));
  box-shadow: 0 0 10px 0 rgb(var(--color-primary)/0.5);
}

.form-line-select {
  display: flex;
  position: relative;
}
.form-line-select::after {
  content: "";
  width: 30px;
  height: 40px;
  position: absolute;
  background-image: url("img/down-arrow.svg");
  background-repeat: no-repeat;
  background-position: right;
  top: 0;
  right: 10px;
  pointer-events: none;
}
.form-line-select:has(select:focus)::after {
  transform: rotate(180deg);
  transition: all 0.2s;
}
.form-line-select select {
  appearance: none;
  border-radius: 0px;
  background-color: rgb(var(--color-darkgrey)/var(--bg-opacity));
}
.form-line-select select option:checked {
  background-color: rgb(var(--color-primary)/var(--border-opacity));
}
.form-line-select lllllabel {
  transform: translateY(-2px);
}

.form.grid-cols-2 {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr);
}

@media only screen and (max-width: 600px) {
  .form.grid-cols-phone-1 {
    grid-template-columns: repeat(1, 1fr) !important;
  }
}
.dialog {
  width: 500px;
  padding: var(--padding-3);
  border: 1px solid rgb(var(--color-kaki)/var(--bg-opacity));
  background-color: rgb(var(--color-darkgrey)/var(--bg-opacity));
  color: rgb(var(--color-text-base)/var(--color-opacity));
  z-index: 10;
}
.dialog input[type=text], .dialog input[type=password] {
  padding: var(--padding-2);
  border: 1px solid rgb(var(--color-kaki)/var(--border-opacity));
  background: rgb(var(--color-black)/var(--border-opacity));
  color: rgb(var(--color-text-base)/var(--color-opacity));
  height: 50px;
}
.dialog input[type=text]:focus, .dialog input[type=password]:focus {
  border-color: rgb(var(--color-primary)/var(--border-opacity));
}
.dialog form {
  padding: 0;
}
.dialog .btn-popup-close {
  color: rgb(var(--color-primary)/var(--color-opacity));
  width: 20px;
  height: 20px;
  cursor: pointer;
}
.dialog .btn-popup-close:hover, .dialog .btn-popup-close:focus {
  border: 1px solid rgb(var(--color-primary)/var(--border-opacity));
}

.link {
  color: rgb(var(--color-primary)/var(--color-opacity));
  text-decoration: none;
  cursor: pointer;
}
.link:hover, .link:focus {
  text-decoration: underline;
}

.hidden {
  display: none !important;
}

.trial-fields,
.account-fields {
  transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out, margin 0.3s ease-in-out;
  max-height: 200px;
  opacity: 1;
}

.hidden-field {
  display: none !important;
  max-height: 0 !important;
  opacity: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  pointer-events: none !important;
  position: absolute !important;
  left: -9999px !important;
  visibility: hidden !important;
}

.consent-checkbox {
  border-bottom: 1px solid rgba(var(--color-kaki), 0.3);
  padding-bottom: var(--padding-2);
  margin-bottom: var(--margin-2);
}
.consent-checkbox .checkbox-label div:first-child {
  font-weight: bold;
}
.consent-checkbox .checkbox-label {
  width: 100%;
  padding-left: 10px;
}

#consent-error {
  margin-top: -10px;
  transition: all 0.3s ease-in-out;
  opacity: 1;
}
#consent-error.hidden-field {
  margin: 0;
  opacity: 0;
  height: 0;
}

.form-inactive .form-line:not(.content-consent-checkbox) {
  opacity: 0.5;
  pointer-events: none;
  filter: blur(1px);
  transition: all 0.3s ease;
}
.form-inactive button[type=submit] {
  opacity: 0.5;
  pointer-events: none;
  cursor: not-allowed;
}

.form-active .form-line {
  opacity: 1 !important;
  pointer-events: auto !important;
  filter: none !important;
}
.form-active button[type=submit] {
  opacity: 1 !important;
  pointer-events: auto !important;
  cursor: pointer !important;
}

#registerForm .form-line, #registerForm button[type=submit] {
  transition: opacity 0.4s ease, filter 0.4s ease, transform 0.2s ease;
}
#registerForm.form-active .form-line {
  transform: translateY(0);
}
#registerForm.form-inactive .form-line:not(.consent-checkbox) {
  transform: translateY(5px);
}

.faq {
  --faq-text-color: var(--color-text-base);
  --faq-bg-color: transparent;
  --faq-border-color: transparent;
  --faq-border-width: 0;
  --faq-padding: var(--padding-2);
  background-color: rgb(var(--faq-bg-color)/var(--bg-opacity));
  color: rgb(var(--faq-text-color)/var(--color-opacity));
  border-color: rgb(var(--faq-border-color)/var(--border-opacity));
  border-width: var(--faq-border-width);
  border-style: solid;
  padding: var(--faq-padding);
  column-count: 2;
  column-gap: var(--margin-2);
}
@media only screen and (max-width: 768px) {
  .faq {
    column-count: 1;
  }
}
.faq .faq-item {
  border-left: 5px solid rgb(var(--color-primary-dark-20)/var(--border-opacity));
  transition: all 0.3s ease;
  background-color: rgb(var(--color-black)/var(--bg-opacity));
  break-inside: avoid-column;
  page-break-inside: avoid;
  margin-bottom: var(--margin-2);
}
.faq .faq-item:hover, .faq .faq-item:focus {
  border-color: rgb(var(--color-primary)/var(--border-opacity));
}
.faq .faq-item .faq-question {
  width: 100%;
  padding: var(--padding-2);
  padding-right: 40px;
  font-size: var(--font-size-xs);
  color: rgb(var(--faq-text-color)/var(--color-opacity));
  text-align: left;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  position: relative;
  background: transparent;
  border: none;
}
.faq .faq-item .faq-question:focus {
  outline: none;
}
.faq .faq-item .faq-question:focus-visible {
  outline: 2px solid rgb(var(--color-primary)/var(--border-opacity));
  outline-offset: -2px;
}
.faq .faq-item .faq-question::after {
  content: "";
  width: 30px;
  height: 30px;
  position: absolute;
  background-image: url("img/down-arrow-red.svg");
  background-repeat: no-repeat;
  background-position: center;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  pointer-events: none;
  transition: all 0.2s;
}
.faq .faq-item .faq-answer {
  max-height: 0;
  overflow: hidden;
  font-size: var(--font-size-xxs);
  padding: 0 var(--padding-2);
  color: rgb(var(--faq-text-color)/var(--color-opacity));
  opacity: 0;
  transition: all 0.2s ease-in-out;
}
.faq .faq-item.open .faq-answer {
  max-height: 500px;
  padding: var(--padding-2);
  opacity: 0.5;
}
.faq .faq-item.open .faq-question::after {
  transform: translateY(-50%) rotate(180deg);
}

.banner-title-header {
  padding: 4rem 1rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.banner-title-header.bg-absolute {
  position: absolute;
}
.banner-title-background {
  position: absolute;
  inset: 0;
  background-color: rgb(var(--color-darkred));
  z-index: 0;
}
.banner-title-background.bg-black {
  background-color: rgb(var(--color-black));
}
.banner-title-content {
  position: relative;
  z-index: 10;
}
.banner-title-title {
  font-size: var(--font-size-xxl);
  font-family: var(--font-title);
  font-weight: bold;
  text-transform: uppercase;
  margin-bottom: 1.5rem;
  background: rgb(var(--color-darkprimary));
  -webkit-background-clip: text;
  background-clip: text;
  color: rgb(var(--color-primary));
}
@media only screen and (max-width: 768px) {
  .banner-title-title {
    font-size: var(--font-size-l);
  }
}
.banner-title-divider {
  width: 6rem;
  height: 0.2rem;
  background-color: rgb(var(--color-primary));
  margin: 0 auto 1.5rem;
}
.banner-title-subtitle {
  font-size: var(--font-size-xl);
  font-family: var(--font-title);
  color: rgb(var(--color-primary));
  text-transform: uppercase;
  margin-bottom: 1.5rem;
}
@media only screen and (max-width: 768px) {
  .banner-title-subtitle {
    font-size: var(--font-size-m);
  }
}
.banner-title-text {
  font-size: var(--font-size-s);
  color: rgb(var(--color-text-base)/80%);
  max-width: 90%;
  margin: 0 auto;
}
@media only screen and (max-width: 768px) {
  .banner-title-text {
    font-size: var(--font-size-xs);
  }
}

.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: rgb(var(--color-white)/var(--color-opacity));
  color: rgb(var(--color-black)/var(--color-opacity));
  padding: 1rem 2rem;
  font-size: 0.9rem;
  z-index: 3000;
  box-shadow: 0 -2px 10px rgb(var(--color-black)/var(--color-opacity));
  transform: translateY(100%);
  transition: transform 0.3s ease-in-out;
}
.cookie-banner.show {
  transform: translateY(0);
}

.cookie-message {
  flex: 1;
  margin-right: 1rem;
}

.cookie-btn:hover, .cookie-btn:focus-visible {
  outline: 2px solid rgb(var(--color-primary)/var(--border-opacity));
  color: rgb(var(--color-primary)/var(--color-opacity));
}

@media only screen and (max-width: 768px) {
  .cookie-banner {
    flex-direction: column;
    padding: 1rem;
  }

  .cookie-message {
    margin-right: 0;
    margin-bottom: 1rem;
    text-align: center;
  }
}
.accessibility-module {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 2000;
}
.accessibility-module #toggle-accessibility {
  background: rgb(var(--color-white)/var(--bg-opacity));
  color: rgb(var(--color-black)/var(--color-opacity));
  border: none;
  border-radius: 50%;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 8px rgb(var(--color-black)/var(--shadow-opacity));
}
.accessibility-module #toggle-accessibility:focus-visible, .accessibility-module .access-btn:focus-visible {
  outline: 2px solid rgb(var(--color-primary));
  outline-offset: 2px;
}
.accessibility-module .accessibility-panel {
  display: none;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.5rem;
  background: rgb(var(--color-white)/var(--bg-opacity));
  border-radius: 8px;
  box-shadow: 0 2px 10px rgb(var(--color-black)/var(--shadow-opacity));
  padding: 1rem;
  min-width: 160px;
}
.accessibility-module .accessibility-panel button {
  background: rgb(var(--color-darkgrey)/var(--bg-opacity-20));
  color: rgb(var(--color-black)/var(--color-opacity));
  border-radius: 4px;
  padding: 0.5rem;
  cursor: pointer;
  font-size: 1rem;
  transition: background 0.2s;
}
.accessibility-module .accessibility-panel button:hover {
  background: rgb(var(--color-white-dark-10)/var(--bg-opacity));
}
.accessibility-module.open .accessibility-panel {
  display: flex;
}

.access-text-white *:not(.accessibility-panel button) {
  color: rgb(var(--color-white)/var(--color-opacity)) !important;
}

.access-high-contrast {
  background: #111 !important;
  color: rgb(var(--color-white)/var(--color-opacity)) !important;
}
.access-high-contrast *:not(img):not(.accessibility-module *):not(.accessibility-module) {
  background: #111 !important;
  color: rgb(var(--color-white)/var(--color-opacity)) !important;
}

/*# sourceMappingURL=style.css.map */