@charset "UTF-8";
@media only screen and (max-width: 480px) {
  body:after {
    content: "phone";
    display: none;
  }
}
@media only screen and (min-width: 481px) and (max-width: 980px) {
  body:after {
    content: "tablet";
    display: none;
  }
}
@media only screen and (min-width: 981px) and (max-width: 1706px) {
  body:after {
    content: "desktop";
    display: none;
  }
}
@media only screen and (min-width: 1707px) {
  body:after {
    content: "wide";
    display: none;
  }
}
@font-face {
  font-display: swap;
  font-family: "Fira Sans";
  font-style: normal;
  font-weight: 400;
  src: url("../assets/fonts/fira/FiraSans-regular.ttf") format("truetype");
}
@font-face {
  font-display: swap;
  font-family: "Fira Sans";
  font-style: italic;
  font-weight: 400;
  src: url("../assets/fonts/fira/FiraSans-italic.ttf") format("truetype");
}
@font-face {
  font-display: swap;
  font-family: "Fira Sans";
  font-style: normal;
  font-weight: 600;
  src: url("../assets/fonts/fira/FiraSans-SemiBold.ttf") format("truetype");
}
@font-face {
  font-display: swap;
  font-family: "Fira Sans";
  font-style: normal;
  font-weight: 800;
  src: url("../assets/fonts/fira/FiraSans-bold.ttf") format("truetype");
}
@font-face {
  font-display: swap;
  font-family: "Fira Sans";
  font-style: italic;
  font-weight: 800;
  src: url("../assets/fonts/fira/FiraSans-bold-italic.ttf") format("truetype");
}
@font-face {
  font-display: swap;
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 400;
  src: url("../assets/fonts/montserrat/Montserrat-Regular.ttf") format("truetype");
}
@font-face {
  font-display: swap;
  font-family: "Montserrat";
  font-style: italic;
  font-weight: 400;
  src: url("../assets/fonts/montserrat/Montserrat-Italic.ttf") format("truetype");
}
@font-face {
  font-display: swap;
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 500;
  src: url("../assets/fonts/montserrat/Montserrat-Medium.ttf") format("truetype");
}
@font-face {
  font-display: swap;
  font-family: "Montserrat";
  font-style: italic;
  font-weight: 500;
  src: url("../assets/fonts/montserrat/Montserrat-MediumItalic.ttf") format("truetype");
}
@font-face {
  font-display: swap;
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 600;
  src: url("../assets/fonts/montserrat/Montserrat-SemiBold.ttf") format("truetype");
}
@font-face {
  font-display: swap;
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 800;
  src: url("../assets/fonts/montserrat/Montserrat-Bold.ttf") format("truetype");
}
@font-face {
  font-display: swap;
  font-family: "Montserrat";
  font-style: italic;
  font-weight: 800;
  src: url("../assets/fonts/montserrat/Montserrat-BoldItalic.ttf") format("truetype");
}
@font-face {
  font-display: swap;
  font-family: "Ubuntu Mono";
  font-style: normal;
  font-weight: 400;
  src: url("../assets/fonts/ubuntu/UbuntuMono-Regular.ttf") format("truetype");
}
* {
  box-sizing: border-box;
}

:root {
  color-scheme: light;
  --mmo-size-padding: 1rem;
  --mmo-size-margin: 1.2rem;
  --mmo-size-font: 1rem;
  --mmo-size-gap: 1.2rem;
  --mmo-size-border: 4px;
  --mmo-size-radius: 10px;
  --mmo-size-icon: 24px;
  --mmo-size-input: 40px;
  --mmo-color-primary: #0085ff;
  --mmo-color-secondary: #AAB3BA;
  --mmo-color-success: #00A67E;
  --mmo-color-error: #FF1842;
  --mmo-color-warning: #FF7A00;
  --mmo-color-info: #8CC9FF;
  --mmo-color-light: #F2F7FB;
  --mmo-color-dark: #0D1348;
  --mmo-color-muted: #C7D2D9;
  --mmo-color-white: #FFFFFF;
  --mmo-color-text: #0D1348;
  --mmo-color-title: #010318;
  --mmo-color-icon: #AAB3BA;
  --mmo-color-border: #AAB3BA;
  --mmo-color-surface: #E8EFF3;
  --mmo-color-emphasis: #F2F7FB;
  --mmo-color-event: #005FB5;
  --mmo-color-layout: #FFFFFF;
  --mmo-color-demo: #8F00FF;
  --mmo-color-sidebar: var(--mmo-color-layout);
  --mmo-color-shadow: rgba(0, 133, 255, 0.0470588235);
}

.theme-default {
  color-scheme: light;
  --mmo-size-padding: 1rem;
  --mmo-size-margin: 1.2rem;
  --mmo-size-font: 1rem;
  --mmo-size-gap: 1.2rem;
  --mmo-size-border: 4px;
  --mmo-size-radius: 10px;
  --mmo-size-icon: 24px;
  --mmo-size-input: 40px;
  --mmo-color-primary: #0085ff;
  --mmo-color-secondary: #AAB3BA;
  --mmo-color-success: #00A67E;
  --mmo-color-error: #FF1842;
  --mmo-color-warning: #FF7A00;
  --mmo-color-info: #8CC9FF;
  --mmo-color-light: #F2F7FB;
  --mmo-color-dark: #0D1348;
  --mmo-color-muted: #C7D2D9;
  --mmo-color-white: #FFFFFF;
  --mmo-color-text: #0D1348;
  --mmo-color-title: #010318;
  --mmo-color-icon: #AAB3BA;
  --mmo-color-border: #AAB3BA;
  --mmo-color-surface: #E8EFF3;
  --mmo-color-emphasis: #F2F7FB;
  --mmo-color-event: #005FB5;
  --mmo-color-layout: #FFFFFF;
  --mmo-color-demo: #8F00FF;
  --mmo-color-sidebar: var(--mmo-color-layout);
  --mmo-color-shadow: rgba(0, 133, 255, 0.0470588235);
}

.theme-dark {
  color-scheme: dark;
  --mmo-size-padding: 1rem;
  --mmo-size-margin: 1.2rem;
  --mmo-size-font: 1rem;
  --mmo-size-gap: 1.2rem;
  --mmo-size-border: 4px;
  --mmo-size-radius: 10px;
  --mmo-size-icon: 24px;
  --mmo-size-input: 40px;
  --mmo-color-primary: #0085ff;
  --mmo-color-secondary: #FFFFFF;
  --mmo-color-success: #00A67E;
  --mmo-color-error: #FF1842;
  --mmo-color-warning: #FF7A00;
  --mmo-color-info: #00498A;
  --mmo-color-light: #0D1348;
  --mmo-color-dark: #AAB3BA;
  --mmo-color-muted: #010318;
  --mmo-color-white: #0D1348;
  --mmo-color-text: #F2F7FB;
  --mmo-color-title: #778B99;
  --mmo-color-border: #010318;
  --mmo-color-surface: #010318;
  --mmo-color-emphasis: #05092E;
  --mmo-color-event: #55AFFF;
  --mmo-color-layout: #0D1348;
  --mmo-color-demo: #50008D;
  --mmo-color-sidebar: var(--mmo-color-layout);
  --mmo-color-shadow: rgba(1, 3, 24, 0.0470588235);
}

body {
  position: relative;
  color: var(--mmo-color-text);
  padding: 0;
  margin: 0;
  font-size: calc(1 * var(--mmo-size-font));
  font-family: "Montserrat";
  font-weight: 500;
  line-height: 1.3;
}

html, body {
  height: 100%;
}

.target, :target {
  outline: 5px double var(--mmo-color-demo);
}

article {
  position: relative;
}

div, p {
  position: relative;
}

a, p, div, article, label, span, li {
  font-weight: 500;
}

img, object, embed {
  max-width: 100%;
  max-height: 100%;
}
img:not([height]), object:not([height]), embed:not([height]) {
  height: auto;
}
img:not([width]), object:not([width]), embed:not([width]) {
  width: auto;
}

svg:not(:root) {
  overflow: hidden;
  vertical-align: middle;
}

img:before, svg:before {
  display: inline-block;
  content: "";
  height: 100%;
  width: 0;
  vertical-align: middle;
}

.image {
  line-height: 0;
}

figure {
  position: relative;
  text-align: center;
}

h1, h2, h3, h4, h5, h6 {
  font-family: "Montserrat";
  font-weight: bold;
  text-rendering: optimizeLegibility;
  position: relative;
  color: var(--mmo-color-title);
}
h1:first-child, h2:first-child, h3:first-child, h4:first-child, h5:first-child, h6:first-child {
  margin-top: 0;
}
h1 span, h2 span, h3 span, h4 span, h5 span, h6 span {
  --mmo-color-text: var(--mmo-color-primary);
  color: var(--mmo-color-text);
  font-weight: bold;
}

h1 {
  font-size: calc(1.5 * var(--mmo-size-font));
}
h1.xxl {
  font-size: 3.5rem;
}

h2 {
  font-size: calc(1.25 * var(--mmo-size-font));
}

h3 {
  font-size: calc(1 * var(--mmo-size-font));
  margin-bottom: calc(0.5 * var(--mmo-size-margin));
}

h4 {
  font-size: calc(0.75 * var(--mmo-size-font));
  margin-bottom: calc(0.5 * var(--mmo-size-margin));
}

h5, h6 {
  font-size: calc(0.5 * var(--mmo-size-font));
}

body > h1, body > h2, body > h3, body > h4 {
  padding: calc(3 * var(--mmo-size-padding));
}

p:first-child {
  margin-top: 0;
}
p:last-child {
  margin-bottom: 0;
}

a:not(.button) {
  outline-color: var(--mmo-color-border);
  outline-width: 0;
  outline-style: solid;
  line-height: inherit;
  position: relative;
  cursor: pointer;
  --mmo-color-text: var(--mmo-color-primary);
  --mmo-color-icon: var(--mmo-color-text);
  color: var(--mmo-color-text);
  text-decoration: underline;
}
a:not(.button):active, a:not(.button):hover {
  outline: 0;
}
a:not(.button):not(:visited) {
  --mmo-color-text: var(--mmo-color-event);
}
a:not(.button):visited {
  --mmo-color-text: var(--mmo-color-primary);
}
a:not(.button):active {
  --mmo-color-text: var(--mmo-color-event);
}
a:not(.button):hover {
  --mmo-color-text: var(--mmo-color-event);
}
a:not(.button)[onclick] {
  cursor: pointer;
}
a:not(.button):not([onclick])[href="#"] {
  text-decoration: none;
}
a:not(.button):not([onclick])[href="#"], a:not(.button):not([onclick])[href="#"]:visited, a:not(.button):not([onclick])[href="#"]:hover {
  --mmo-color-text: var(--mmo-color-primary);
}
a:not(.button).disabled {
  --mmo-color-text: var(--mmo-color-secondary);
  cursor: default;
  text-decoration: none;
}
a:not(.button).disabled:hover {
  text-decoration: none;
}

em {
  font-style: italic;
  line-height: inherit;
}

strong {
  font-weight: bold;
  line-height: inherit;
}

small {
  line-height: inherit;
  margin-top: 0;
  margin-bottom: 0;
  margin-left: calc(0.25 * var(--mmo-size-margin));
  margin-right: calc(0.25 * var(--mmo-size-margin));
}

hr {
  border-left-width: 0;
  border-right-width: 0;
  border-top-width: 0;
  border-left-color: var(--mmo-color-dark);
  border-right-color: var(--mmo-color-dark);
  border-top-color: var(--mmo-color-dark);
  border-left-style: dashed;
  border-right-style: dashed;
  border-top-style: dashed;
  border-bottom-width: calc(0.25 * var(--mmo-size-border));
  border-bottom-color: var(--mmo-color-dark);
  border-bottom-style: dashed;
  box-sizing: content-box;
  height: 1px;
  width: 100%;
  margin-top: calc(1 * var(--mmo-size-margin));
  margin-bottom: calc(1 * var(--mmo-size-margin));
  margin-left: auto;
  margin-right: auto;
  padding: 0;
}
hr.vertical {
  border-right-width: 1px;
  border-right-color: var(--mmo-color-dark);
  border-right-style: dashed;
  height: 100%;
  width: 1px;
  display: inline-block;
}

audio, canvas, progress, video {
  vertical-align: baseline;
}

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

abbr, acronym {
  text-transform: uppercase;
  font-size: 90%;
  color: var(--mmo-color-text);
  cursor: help;
}

abbr {
  text-transform: none;
}

abbr[title] {
  border-bottom-width: calc(0.25 * var(--mmo-size-border));
  border-bottom-color: black;
  border-bottom-style: dashed;
}

dfn {
  font-style: italic;
}

sub, sup {
  font-size: calc(0.75 * var(--mmo-size-font));
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}

pre {
  overflow: auto;
}

code, kbd, pre, samp {
  font-family: "Ubuntu Mono", monospace;
  line-height: 1.3;
}

code {
  padding: calc(0.25 * var(--mmo-size-padding));
  border-radius: calc(0.25 * var(--mmo-size-radius));
  background-color: var(--mmo-color-dark);
  --mmo-color-text: var(--mmo-color-white);
  color: var(--mmo-color-text);
  --mmo-color-icon: var(--mmo-color-white);
}
pre code {
  padding: 0;
  background: none;
  border-radius: 0;
}

[contenteditable] :hover {
  outline: 1px dotted var(--mmo-color-border);
  cursor: context-menu;
}

main {
  padding-top: calc(1 * var(--mmo-size-padding));
  padding-bottom: calc(1 * var(--mmo-size-padding));
  padding-left: calc(1.5 * var(--mmo-size-padding));
  padding-right: calc(1.5 * var(--mmo-size-padding));
}

blockquote {
  margin-left: 0;
  margin-right: 0;
  background-color: var(--mmo-color-dark);
  --mmo-color-text: var(--mmo-color-white);
  color: var(--mmo-color-text);
  --mmo-color-icon: var(--mmo-color-white);
  padding: calc(1 * var(--mmo-size-padding));
  border-left-width: calc(1 * var(--mmo-size-border));
  border-left-color: var(--mmo-color-info);
  border-left-style: solid;
  border-radius: calc(0.25 * var(--mmo-size-radius));
}

@media only screen and (min-width: 981px) {
  article {
    padding: calc(1 * var(--mmo-size-padding));
  }
}
button.success, input.success[type=submit], input.success[type=button], .success.button {
  background-color: var(--mmo-color-success);
  --mmo-color-text: var(--mmo-color-white);
  color: var(--mmo-color-text);
  --mmo-color-icon: var(--mmo-color-text);
}
button.success:hover, input.success[type=submit]:hover, input.success[type=button]:hover, .success.button:hover {
  background-color: #008161;
}

button.warning, input.warning[type=submit], input.warning[type=button], .warning.button {
  background-color: var(--mmo-color-warning);
  --mmo-color-text: var(--mmo-color-white);
  color: var(--mmo-color-text);
  --mmo-color-icon: var(--mmo-color-text);
}
button.warning:hover, input.warning[type=submit]:hover, input.warning[type=button]:hover, .warning.button:hover {
  background-color: #E55300;
}

button.error, input.error[type=submit], input.error[type=button], .error.button, button.delete {
  background-color: var(--mmo-color-error);
  --mmo-color-text: var(--mmo-color-white);
  color: var(--mmo-color-text);
  --mmo-color-icon: var(--mmo-color-text);
}
button.error:hover, input.error[type=submit]:hover, input.error[type=button]:hover, .error.button:hover, button.delete:hover {
  background-color: #EF002A;
}

button.yellow, input.yellow[type=submit], input.yellow[type=button], .yellow.button {
  background-color: #FFC700;
  --mmo-color-icon: var(--mmo-color-text);
}
button.yellow:hover, input.yellow[type=submit]:hover, input.yellow[type=button]:hover, .yellow.button:hover {
  background-color: #BB9200;
}

button.grey, input.grey[type=submit], input.grey[type=button], .grey.button {
  background-color: #C7D2D9;
  --mmo-color-text: var(--mmo-color-white);
  color: var(--mmo-color-text);
  --mmo-color-icon: var(--mmo-color-text);
}
button.grey:hover, input.grey[type=submit]:hover, input.grey[type=button]:hover, .grey.button:hover {
  background-color: #778B99;
}

button.dark-grey, input.dark-grey[type=submit], input.dark-grey[type=button], .dark-grey.button {
  background-color: #5A6D7A;
  --mmo-color-text: var(--mmo-color-white);
  color: var(--mmo-color-text);
  --mmo-color-icon: var(--mmo-color-text);
}
button.dark-grey:hover, input.dark-grey[type=submit]:hover, input.dark-grey[type=button]:hover, .dark-grey.button:hover {
  background-color: #778B99;
}

button.dark, input.dark[type=submit], input.dark[type=button], .dark.button {
  background-color: var(--mmo-color-dark);
  --mmo-color-text: var(--mmo-color-white);
  color: var(--mmo-color-text);
  --mmo-color-icon: var(--mmo-color-text);
}
button.dark:hover, input.dark[type=submit]:hover, input.dark[type=button]:hover, .dark.button:hover {
  background-color: #05092E;
}

button, input[type=submit], input[type=button], .button {
  position: relative;
  font-family: "Montserrat";
  color: var(--mmo-color-text);
  cursor: pointer;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  background-color: var(--mmo-color-primary);
  gap: calc(0.5 * var(--mmo-size-gap));
  border-width: 0;
  border-color: var(--mmo-color-border);
  border-style: solid;
  border-radius: calc(1 * var(--mmo-size-radius));
  padding-left: calc(1 * var(--mmo-size-padding));
  padding-right: calc(1 * var(--mmo-size-padding));
  padding-top: calc(0.5 * var(--mmo-size-padding));
  padding-bottom: calc(0.5 * var(--mmo-size-padding));
  font-size: calc(1 * var(--mmo-size-font));
  margin: 0;
  --mmo-color-text: var(--mmo-color-white);
  --mmo-color-icon: var(--mmo-color-text);
}
button:hover, input[type=submit]:hover, input[type=button]:hover, .button:hover {
  background-color: var(--mmo-color-event);
}
button[disabled], input[disabled][type=submit], input[disabled][type=button], [disabled].button {
  background-color: #C7D2D9;
  --mmo-color-text: #778B99;
  color: var(--mmo-color-text);
  --mmo-color-icon: #778B99;
  --mmo-color-icon: #778B99;
  cursor: not-allowed;
}
button.active, input.active[type=submit], input.active[type=button], .active.button {
  font-weight: bold;
}
button.round {
  background: transparent;
  border-width: calc(0.25 * var(--mmo-size-border));
  border-color: var(--mmo-color-dark);
  border-style: solid;
  border-radius: 50%;
  padding: calc(0.5 * var(--mmo-size-padding));
  aspect-ratio: 1/1;
  color: var(--mmo-color-text);
}
button.round:hover:not(.yellow, .green, .red, .grey, .dark-grey, .dark, .blue) {
  background-color: var(--mmo-color-info);
  --mmo-color-text: var(--mmo-color-text);
  color: var(--mmo-color-text);
  --mmo-color-icon: var(--mmo-color-text);
}

button.square {
  aspect-ratio: 1/1;
  padding: calc(0.5 * var(--mmo-size-padding));
  background-color: transparent;
  --mmo-color-text: var(--mmo-color-secondary);
  color: var(--mmo-color-text);
  --mmo-color-icon: var(--mmo-color-secondary);
  border-width: calc(0.25 * var(--mmo-size-border));
  border-color: var(--mmo-color-secondary);
  border-style: solid;
  --mmo-color-icon: var(--mmo-color-primary);
}
button.square:hover {
  background-color: #E8EFF3;
  --mmo-color-text: var(--mmo-color-secondary);
  color: var(--mmo-color-text);
  --mmo-color-icon: var(--mmo-color-secondary);
}
button.error.square {
  --mmo-color-icon: var(--mmo-color-error);
}
button.success.square {
  --mmo-color-icon: var(--mmo-color-success);
}
button.warning.square {
  --mmo-color-icon: var(--mmo-color-warning);
}

button.delete {
  width: 20px;
  height: 20px;
  padding: 0;
  position: absolute;
  top: -10px;
  right: -6px;
  z-index: 2;
  border-radius: calc(0.5 * var(--mmo-size-radius));
}

button.small {
  padding-top: calc(0.25 * var(--mmo-size-padding));
  padding-bottom: calc(0.25 * var(--mmo-size-padding));
  padding-left: calc(0.5 * var(--mmo-size-padding));
  padding-right: calc(0.5 * var(--mmo-size-padding));
  font-size: calc(0.75 * var(--mmo-size-font));
  border-radius: calc(0.25 * var(--mmo-size-radius));
}

button.large {
  padding-top: calc(1 * var(--mmo-size-padding));
  padding-bottom: calc(1 * var(--mmo-size-padding));
  padding-left: calc(1.5 * var(--mmo-size-padding));
  padding-right: calc(1.5 * var(--mmo-size-padding));
  font-size: calc(1.25 * var(--mmo-size-font));
  border-radius: calc(1 * var(--mmo-size-radius));
}

button.transparent, input.transparent[type=submit], input.transparent[type=button], .transparent.button {
  background-color: transparent;
  --mmo-color-text: var(--mmo-color-border);
  color: var(--mmo-color-text);
  --mmo-color-icon: var(--mmo-color-border);
  border-width: calc(0.25 * var(--mmo-size-border));
  border-color: var(--mmo-color-border);
  border-style: solid;
}
button.transparent mmo-icon, input.transparent[type=submit] mmo-icon, input.transparent[type=button] mmo-icon, .transparent.button mmo-icon {
  --mmo-color-icon: var(--mmo-color-border);
}
button.transparent:hover, input.transparent[type=submit]:hover, input.transparent[type=button]:hover, .transparent.button:hover {
  background-color: var(--mmo-color-secondary);
  --mmo-color-text: var(--mmo-color-text);
  color: var(--mmo-color-text);
  --mmo-color-icon: var(--mmo-color-text);
}
button.transparent:hover mmo-icon, input.transparent[type=submit]:hover mmo-icon, input.transparent[type=button]:hover mmo-icon, .transparent.button:hover mmo-icon {
  --mmo-color-icon: var(--mmo-color-text);
}

button.informative {
  padding: 0;
  border-width: 0;
  border-color: var(--mmo-color-border);
  border-style: solid;
  border-radius: 50%;
  background: transparent;
  --mmo-color-icon: var(--mmo-color-primary);
}
button.informative:hover, button.informative:focus {
  --mmo-color-icon: var(--mmo-color-secondary);
}
button.informative mmo-icon {
  cursor: pointer;
}

a.button {
  text-decoration: none;
}

.loading:before {
  content: "";
  background: url("../assets/loading.svg") center center no-repeat transparent;
  text-align: center;
  position: absolute;
  top: 10%;
  left: 10%;
  right: 10%;
  bottom: 10%;
  z-index: 19;
}

.panel {
  position: relative;
  width: fit-content;
  overflow: visible;
  background-color: var(--mmo-color-white);
  --mmo-color-text: var(--mmo-color-dark);
  color: var(--mmo-color-text);
  --mmo-color-icon: var(--mmo-color-dark);
  padding: calc(1 * var(--mmo-size-padding));
  margin-top: calc(3 * var(--mmo-size-margin));
  margin-bottom: calc(3 * var(--mmo-size-margin));
  margin-left: auto;
  margin-right: auto;
  border-width: calc(0.5 * var(--mmo-size-border));
  border-color: var(--mmo-color-border);
  border-style: solid;
  border-radius: calc(1 * var(--mmo-size-radius));
}
.panel > header {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding-left: calc(1.5 * var(--mmo-size-padding));
  padding-right: calc(1.5 * var(--mmo-size-padding));
  font-size: calc(1.25 * var(--mmo-size-font));
  margin: 0;
}
.panel > header h3 {
  font-size: calc(1.5 * var(--mmo-size-font));
}
.panel > header mmo-icon:last-child {
  margin-left: auto;
  height: 15px;
  cursor: pointer;
}
.panel p {
  text-align: center;
}
.panel.success, .panel.error, .panel.warning, .panel.info {
  --mmo-color-icon: var(--mmo-color-white);
}
.panel.success > header, .panel.error > header, .panel.warning > header, .panel.info > header {
  padding-top: calc(1 * var(--mmo-size-padding));
}
.panel.success p, .panel.error p, .panel.warning p, .panel.info p {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding-left: calc(1.5 * var(--mmo-size-padding));
  padding-right: calc(1.5 * var(--mmo-size-padding));
  margin: 0;
}
.panel.success mmo-icon, .panel.error mmo-icon, .panel.warning mmo-icon, .panel.info mmo-icon {
  position: absolute;
  top: -60px;
  left: 50%;
  transform: translate(-50%, 50%);
  color: var(--mmo-color-white);
  height: 60px;
  width: 60px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: calc(0.5 * var(--mmo-size-padding));
  border-radius: calc(3 * var(--mmo-size-radius));
}
.panel.success {
  border-color: var(--mmo-color-success);
}
.panel.success mmo-icon {
  background-color: var(--mmo-color-success);
}
.panel.success h3, .panel.success p, .panel.success span {
  color: var(--mmo-color-success);
}
.panel.error {
  border-color: var(--mmo-color-error);
}
.panel.error mmo-icon {
  background-color: var(--mmo-color-error);
}
.panel.error h3, .panel.error p, .panel.error span {
  color: var(--mmo-color-error);
}
.panel.warning {
  border-color: var(--mmo-color-warning);
}
.panel.warning mmo-icon {
  background-color: var(--mmo-color-warning);
}
.panel.warning h3, .panel.warning p, .panel.warning span {
  color: var(--mmo-color-warning);
}
.panel.info {
  border-color: var(--mmo-color-info);
}
.panel.info mmo-icon {
  background-color: var(--mmo-color-info);
}
.panel.info h3, .panel.info p, .panel.info span {
  color: var(--mmo-color-info);
}

.cards {
  display: flex;
  flex-direction: row;
  align-items: initial;
  justify-content: space-between;
  gap: calc(1.5 * var(--mmo-size-gap));
  margin: auto;
  width: max-content;
}

.card {
  border-radius: 16px;
  padding: 76px 15px 15px 28px;
  --mmo-color-text: var(--mmo-color-white);
  color: var(--mmo-color-text);
  font-size: calc(1.5 * var(--mmo-size-font));
}
.card .highlighted {
  font-size: 40px;
}
.card:is(:empty) {
  display: none;
}
.card:nth-child(even) {
  background-color: var(--mmo-color-surface);
  --mmo-color-text: var(--mmo-color-primary);
  color: var(--mmo-color-text);
  --mmo-color-icon: var(--mmo-color-primary);
}
.card:nth-child(odd) {
  background-color: #778B99;
  --mmo-color-text: var(--mmo-color-white);
  color: var(--mmo-color-text);
  --mmo-color-icon: var(--mmo-color-white);
}
.card img {
  margin-bottom: 55px;
  width: 200px;
  align-self: center;
}

.card-info {
  width: 100%;
  background-color: var(--mmo-color-white);
  border-radius: calc(1 * var(--mmo-size-radius));
  padding-top: calc(1 * var(--mmo-size-padding));
  padding-bottom: calc(1 * var(--mmo-size-padding));
  padding-left: calc(1.5 * var(--mmo-size-padding));
  padding-right: calc(1.5 * var(--mmo-size-padding));
}

.widgets {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  justify-content: initial;
  gap: calc(1 * var(--mmo-size-gap));
  flex-wrap: wrap;
  max-width: 75%;
  margin: 0 auto;
}
.widgets .panel {
  width: auto;
}
.widgets .flex-1-2 {
  width: calc(50% - 1 * var(--mmo-size-gap));
}

.widget {
  width: calc(33.33% - 1 * var(--mmo-size-gap));
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: space-between;
  --mmo-color-border: var(--mmo-color-muted);
  --mmo-color-icon: var(--mmo-color-text);
  background-color: var(--mmo-color-white);
  border-radius: calc(1 * var(--mmo-size-radius));
  box-shadow: -2px 3px 2px 0px var(--mmo-color-shadow), 2px 3px 2px 0px var(--mmo-color-shadow), 3px 2px 2px 0px var(--mmo-color-shadow), -4px 3px 4px 0px var(--mmo-color-shadow), 4px 3px 4px 0px var(--mmo-color-shadow), 3px 4px 4px 0px var(--mmo-color-shadow), -8px 3px 8px 0px var(--mmo-color-shadow), 8px 3px 8px 0px var(--mmo-color-shadow), 3px 8px 8px 0px var(--mmo-color-shadow);
}
.widget:hover {
  box-shadow: -2px 3px 2px 0px var(--mmo-color-shadow), 2px 3px 2px 0px var(--mmo-color-shadow), 3px 2px 2px 0px var(--mmo-color-shadow), -4px 3px 4px 0px var(--mmo-color-shadow), 4px 3px 4px 0px var(--mmo-color-shadow), 3px 4px 4px 0px var(--mmo-color-shadow), -8px 3px 8px 0px var(--mmo-color-shadow), 8px 3px 8px 0px var(--mmo-color-shadow), 3px 8px 8px 0px var(--mmo-color-shadow), -16px 3px 16px 0px var(--mmo-color-shadow), 16px 3px 16px 0px var(--mmo-color-shadow), 3px 16px 16px 0px var(--mmo-color-shadow), -32px 3px 32px 0px var(--mmo-color-shadow), 32px 3px 32px 0px var(--mmo-color-shadow), 3px 32px 32px 0px var(--mmo-color-shadow);
}
.widget h2, .widget p, .widget footer a {
  padding-top: calc(1 * var(--mmo-size-padding));
  padding-bottom: calc(1 * var(--mmo-size-padding));
  padding-left: calc(1.5 * var(--mmo-size-padding));
  padding-right: calc(1.5 * var(--mmo-size-padding));
}
.widget h2 {
  margin: 0;
}
.widget img {
  object-fit: cover;
  border-top-left-radius: calc(1 * var(--mmo-size-radius));
  border-top-right-radius: calc(1 * var(--mmo-size-radius));
}
.widget div {
  padding: calc(1 * var(--mmo-size-padding));
  text-align: center;
}
.widget p {
  margin: 0;
}
.widget > p {
  flex: 1;
}
.widget a {
  display: block;
  text-decoration: none;
}
.widget header, .widget footer {
  flex: 0;
  text-align: center;
}
.widget header mmo-icon.xxl {
  background-color: var(--mmo-color-surface);
}
.widget header a {
  --mmo-color-text: var(--mmo-color-title);
  color: var(--mmo-color-text);
}
.widget footer {
  background-color: var(--mmo-color-surface);
  border-bottom-left-radius: calc(1 * var(--mmo-size-radius));
  border-bottom-right-radius: calc(1 * var(--mmo-size-radius));
}
.widget footer a {
  border-top-width: calc(0.25 * var(--mmo-size-border));
  border-top-color: var(--mmo-color-border);
  border-top-style: solid;
}

@media only screen and (max-width: 980px) {
  .widgets {
    max-width: 90%;
  }
  .widget {
    width: 100%;
  }
  .widget img {
    max-height: 300px;
    width: 100%;
    object-fit: cover;
  }
}
mmo-tooltip a {
  color: var(--mmo-color-info);
}

mmo-tooltip.success a {
  color: var(--mmo-color-success);
}

mmo-tooltip.error a {
  color: var(--mmo-color-error);
}

mmo-tooltip.warning a {
  color: var(--mmo-color-warning);
}

.hidden {
  display: none !important;
}

.overflow-auto {
  overflow: auto;
}

.m-auto {
  margin: auto;
}

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

.text-small {
  font-size: calc(0.75 * var(--mmo-size-font));
}

.characters-left {
  font-size: calc(0.75 * var(--mmo-size-font));
  margin-top: calc(0.25 * var(--mmo-size-margin));
  color: var(--mmo-color-secondary);
  text-align: right;
}

.toolbar {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: calc(0.25 * var(--mmo-size-gap));
  font-size: calc(0.75 * var(--mmo-size-font));
}
.toolbar.center {
  justify-content: space-evenly;
}
.toolbar button {
  opacity: 0.6;
  margin-left: calc(0.25 * var(--mmo-size-margin));
  margin-right: calc(0.25 * var(--mmo-size-margin));
}
.toolbar button:hover {
  opacity: 1;
}
.toolbar > div, .toolbar > nav {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: initial;
  min-height: 40px;
  color: var(--mmo-color-text);
  gap: calc(0.25 * var(--mmo-size-gap));
  background-color: var(--mmo-color-light);
  padding: calc(0.25 * var(--mmo-size-padding));
  border-top-left-radius: calc(1 * var(--mmo-size-radius));
  border-bottom-left-radius: calc(1 * var(--mmo-size-radius));
}
.toolbar nav > *, .toolbar button {
  width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  padding: 0;
}
.toolbar nav > *:not(.round), .toolbar button:not(.round) {
  border-radius: calc(1 * var(--mmo-size-radius));
}
.toolbar nav > * > mmo-icon, .toolbar button > mmo-icon {
  height: 0.9rem;
  line-height: 0;
}
.toolbar a, .toolbar span {
  border-radius: 50%;
}
.toolbar a:hover, .toolbar span:hover {
  background-color: var(--mmo-color-dark);
  --mmo-color-text: var(--mmo-color-white);
  color: var(--mmo-color-text);
  --mmo-color-icon: var(--mmo-color-white);
}
.toolbar.sticky + table .sticky.top {
  top: 41px;
}

.toggle:not(.active) {
  display: none;
}

.entity {
  display: inline-block;
  padding-left: calc(0.5 * var(--mmo-size-padding));
  padding-right: calc(0.5 * var(--mmo-size-padding));
  padding-top: calc(0.25 * var(--mmo-size-padding));
  padding-bottom: calc(0.25 * var(--mmo-size-padding));
  border-radius: calc(1 * var(--mmo-size-radius));
  margin-left: calc(0.5 * var(--mmo-size-margin));
  margin-right: calc(0.5 * var(--mmo-size-margin));
}
.entity:hover {
  outline: 1px solid var(--mmo-color-primary);
}
.entity button {
  --mmo-color-text: var(--mmo-color-text);
  color: var(--mmo-color-text);
  border-width: 1px;
  border-color: var(--mmo-color-border);
  border-style: solid;
  vertical-align: baseline;
  border-radius: 10px;
  padding: 0px 10px;
  margin-left: 10px;
  background-color: transparent;
}
.entity button:hover {
  border-color: var(--mmo-color-primary);
  background-color: var(--mmo-color-primary);
  --mmo-color-text: var(--mmo-color-white);
  color: var(--mmo-color-text);
  --mmo-color-icon: var(--mmo-color-white);
}

.sticky {
  position: sticky;
}
.sticky.left {
  left: 0px;
  z-index: 15;
}
.sticky.right {
  right: 0px;
  z-index: 16;
}
.sticky.top {
  top: 0px;
  z-index: 17;
}
.sticky.bottom {
  bottom: 0px;
  z-index: 18;
}

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

mmo-widget mmo-icon[slot=title] {
  --mmo-color-icon: var(--mmo-color-dark);
}

mmo-validity label {
  width: 100%;
}
mmo-validity label span.input:not(.icon) {
  border: 0;
  background: transparent;
}
mmo-validity label:not(:last-child) {
  margin-bottom: calc(0.5 * var(--mmo-size-margin));
}

mmo-notification p, mmo-notification h2 {
  margin: 0;
}

mmo-notification.success {
  --mmo-color-icon: var(--mmo-color-success);
}
mmo-notification.success strong, mmo-notification.success b, mmo-notification.success a {
  color: var(--mmo-color-success);
}

mmo-notification.warning {
  --mmo-color-icon: var(--mmo-color-warning);
}
mmo-notification.warning strong, mmo-notification.warning b, mmo-notification.warning a {
  color: var(--mmo-color-warning);
}

mmo-notification.error {
  --mmo-color-icon: var(--mmo-color-error);
}
mmo-notification.error strong, mmo-notification.error b, mmo-notification.error a {
  color: var(--mmo-color-error);
}

.demo {
  display: flex;
  flex-direction: column;
  align-items: initial;
  justify-content: initial;
}
.demo p > code, .demo li > code {
  padding: calc(0.25 * var(--mmo-size-padding));
  font-weight: bold;
  background-color: var(--mmo-color-surface);
  color: var(--mmo-color-demo);
}
.demo .scrollable {
  margin-top: calc(1 * var(--mmo-size-margin));
  overflow: auto;
  border-bottom-width: calc(0.25 * var(--mmo-size-border));
  border-bottom-color: var(--mmo-color-dark);
  border-bottom-style: solid;
  width: 100%;
}
.demo .scrollable thead {
  position: sticky;
  top: 0;
  z-index: 2;
}
.demo .preview {
  border-radius: calc(0.25 * var(--mmo-size-radius));
  padding: calc(0.25 * var(--mmo-size-padding));
  gap: calc(0.25 * var(--mmo-size-gap));
  background-color: var(--mmo-color-surface);
  width: 100%;
}
.demo .preview.layout, .demo .preview.layout--padding {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
  flex-wrap: wrap;
  padding: calc(1.5 * var(--mmo-size-padding));
}
.demo .preview.layout--padding > div {
  border-radius: calc(0.5 * var(--mmo-size-radius));
  background-color: var(--mmo-color-demo) !important;
}
.demo .preview.layout > div, .demo .preview.layout--padding > div {
  height: fit-content;
  background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.7490196078) 10%, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 50%, rgba(255, 255, 255, 0.7490196078) 0, rgba(255, 255, 255, 0.7490196078) 60%, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0));
  background-size: 7.07px 7.07px;
  background-color: rgba(0, 0, 0, 0.5);
}
.demo .preview.layout > div > div, .demo .preview.layout--padding > div > div {
  border-radius: calc(0.25 * var(--mmo-size-radius));
  padding: calc(1 * var(--mmo-size-padding));
  background-color: var(--mmo-color-demo);
  color: var(--mmo-color-white);
}
.demo .preview.layout > div .m, .demo .preview.layout--padding > div .m {
  margin: calc(1 * var(--mmo-size-margin));
}
.demo .preview.layout > div .mt, .demo .preview.layout--padding > div .mt {
  margin-top: calc(0.5 * var(--mmo-size-margin));
}
.demo .preview.layout > div .ml, .demo .preview.layout--padding > div .ml {
  margin-left: calc(1.5 * var(--mmo-size-margin));
  margin-right: calc(1.5 * var(--mmo-size-margin));
}
.demo .preview.font .font-xs {
  font-size: calc(0.5 * var(--mmo-size-font));
}
.demo .preview.font .font-s {
  font-size: calc(0.75 * var(--mmo-size-font));
}
.demo .preview.font .font-m {
  font-size: calc(1 * var(--mmo-size-font));
}
.demo .preview.font .font-l {
  font-size: calc(1.25 * var(--mmo-size-font));
}
.demo .preview.font .font-xl {
  font-size: calc(1.5 * var(--mmo-size-font));
}
.demo .preview.sandbox {
  padding: calc(0.5 * var(--mmo-size-padding));
}
.demo .preview.sandbox button {
  margin-top: calc(1 * var(--mmo-size-margin));
  margin-bottom: calc(1 * var(--mmo-size-margin));
}
.demo .preview.sandbox textarea {
  width: 100%;
  height: 150px;
}
.demo .overview {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  margin-top: calc(1 * var(--mmo-size-margin));
  gap: calc(1 * var(--mmo-size-gap));
  align-items: center;
  min-height: 100px;
}
.demo .overview .item {
  padding: calc(1 * var(--mmo-size-padding));
}
.demo .titles h1:first-child, .demo .titles h2:first-child, .demo .titles h3:first-child, .demo .titles h4:first-child, .demo .titles h5:first-child, .demo .titles h6:first-child {
  margin-top: revert;
}
.demo .flex .hflex, .demo .align .hflex, .demo .justify .hflex,
.demo .flex .vflex, .demo .align .vflex, .demo .justify .vflex {
  background-color: var(--mmo-color-light);
}
.demo .flex .hflex div, .demo .align .hflex div, .demo .justify .hflex div,
.demo .flex .vflex div, .demo .align .vflex div, .demo .justify .vflex div {
  border-radius: 7px;
  background-color: var(--mmo-color-demo);
  color: var(--mmo-color-white);
}
.demo mmo-code.align label .hflex.gap div, .demo mmo-code.align label .vflex.gap div, .demo mmo-code.justify label .hflex.gap div, .demo mmo-code.justify label .vflex.gap div, .demo mmo-code.flex label .hflex.gap div, .demo mmo-code.flex label .vflex.gap div {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: calc(1 * var(--mmo-size-padding));
}
.demo mmo-code.flex label {
  width: 100%;
}
.demo mmo-code.align label, .demo mmo-code.justify label {
  width: 45%;
}
.demo mmo-code.align label .hflex.gap div {
  padding: 0;
}
.demo mmo-code.align label .hflex.gap div:nth-child(1) {
  min-width: 50px;
  min-height: 50px;
}
.demo mmo-code.align label .hflex.gap div:nth-child(2) {
  min-width: 40px;
  min-height: 40px;
}
.demo mmo-code.align label .hflex.gap div:nth-child(3) {
  min-width: 60px;
  min-height: 60px;
}
.demo .color-chart {
  padding: calc(1 * var(--mmo-size-padding));
  text-align: center;
}
.demo .palette-name-color {
  width: 120px;
}
.demo .palette-color {
  padding-top: calc(0.5 * var(--mmo-size-padding));
  padding-bottom: calc(0.5 * var(--mmo-size-padding));
  padding-left: calc(1 * var(--mmo-size-padding));
  padding-right: calc(1 * var(--mmo-size-padding));
  border-width: calc(0.25 * var(--mmo-size-border));
  border-color: var(--mmo-color-border);
  border-style: solid;
  border-radius: calc(1 * var(--mmo-size-radius));
  text-align: center;
  width: 150px;
}
.demo .color-text p {
  color: var(--mmo-color-primary);
}
.demo figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: calc(1 * var(--mmo-size-padding));
  gap: calc(0.25 * var(--mmo-size-gap));
  border-width: calc(0.25 * var(--mmo-size-border));
  border-color: var(--mmo-color-border);
  border-style: solid;
  position: relative;
  flex-grow: 1;
  flex-basis: 130px;
}
.demo figure:hover {
  background-color: var(--mmo-color-surface);
}
.demo #assets-container img {
  max-width: 230px;
  max-height: 150px;
}
.demo figcaption {
  cursor: pointer;
}
.demo .icons-fontawesome figure {
  width: 90px;
  flex-basis: auto;
  flex-grow: initial;
}
.demo .icons-fontawesome figcaption {
  font-size: calc(0.75 * var(--mmo-size-font));
}
.demo .border-solid {
  border-width: calc(1 * var(--mmo-size-border));
  border-color: var(--mmo-color-dark);
  border-style: solid;
}
.demo .border-dashed {
  border-left-width: calc(0.5 * var(--mmo-size-border));
  border-right-width: calc(0.5 * var(--mmo-size-border));
  border-left-color: var(--mmo-color-dark);
  border-right-color: var(--mmo-color-dark);
  border-left-style: dashed;
  border-right-style: dashed;
}
.demo .border-dotted {
  border-top-width: calc(3 * var(--mmo-size-border));
  border-bottom-width: calc(3 * var(--mmo-size-border));
  border-top-color: var(--mmo-color-dark);
  border-bottom-color: var(--mmo-color-dark);
  border-top-style: dotted;
  border-bottom-style: dotted;
}
.demo .shadow-l {
  box-shadow: -2px 3px 2px 0px var(--mmo-color-primary), -4px 3px 4px 0px var(--mmo-color-primary), -8px 3px 8px 0px var(--mmo-color-primary);
}
.demo .shadow-r {
  box-shadow: 2px 3px 2px 0px var(--mmo-color-primary), 4px 3px 4px 0px var(--mmo-color-primary), 8px 3px 8px 0px var(--mmo-color-primary);
}
.demo .shadow-t {
  box-shadow: 3px -2px 2px 0px var(--mmo-color-primary), 3px -4px 4px 0px var(--mmo-color-primary), 3px -8px 8px 0px var(--mmo-color-primary);
}
.demo .shadow-b {
  box-shadow: 3px 2px 2px 0px var(--mmo-color-primary), 3px 4px 4px 0px var(--mmo-color-primary), 3px 8px 8px 0px var(--mmo-color-primary);
}
.demo .shadow-lt {
  box-shadow: -2px 3px 2px 0px var(--mmo-color-primary), 3px -2px 2px 0px var(--mmo-color-primary), -4px 3px 4px 0px var(--mmo-color-primary), 3px -4px 4px 0px var(--mmo-color-primary), -8px 3px 8px 0px var(--mmo-color-primary), 3px -8px 8px 0px var(--mmo-color-primary);
}
.demo .shadow-ltr {
  box-shadow: -2px 3px 2px 0px var(--mmo-color-primary), 3px -2px 2px 0px var(--mmo-color-primary), 2px 3px 2px 0px var(--mmo-color-primary), -4px 3px 4px 0px var(--mmo-color-primary), 3px -4px 4px 0px var(--mmo-color-primary), 4px 3px 4px 0px var(--mmo-color-primary), -8px 3px 8px 0px var(--mmo-color-primary), 3px -8px 8px 0px var(--mmo-color-primary), 8px 3px 8px 0px var(--mmo-color-primary);
}
.demo .shadow-ltrb {
  box-shadow: -2px 3px 2px 0px var(--mmo-color-primary), 3px -2px 2px 0px var(--mmo-color-primary), 2px 3px 2px 0px var(--mmo-color-primary), 3px 2px 2px 0px var(--mmo-color-primary), -4px 3px 4px 0px var(--mmo-color-primary), 3px -4px 4px 0px var(--mmo-color-primary), 4px 3px 4px 0px var(--mmo-color-primary), 3px 4px 4px 0px var(--mmo-color-primary), -8px 3px 8px 0px var(--mmo-color-primary), 3px -8px 8px 0px var(--mmo-color-primary), 8px 3px 8px 0px var(--mmo-color-primary), 3px 8px 8px 0px var(--mmo-color-primary);
}
.demo .bg-stripes {
  background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.7490196078) 10%, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 50%, rgba(255, 255, 255, 0.7490196078) 0, rgba(255, 255, 255, 0.7490196078) 60%, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0));
  background-size: 7.07px 7.07px;
}
.demo #mmo-icons {
  width: 0;
  height: 0;
}

.tooltip-demo mmo-tooltip {
  position: inherit;
}

.dump {
  position: relative;
  overflow: auto;
  word-break: break-all;
  margin: 0;
  color: var(--mmo-color-text);
  padding-top: calc(0.5 * var(--mmo-size-padding));
  padding-bottom: calc(0.5 * var(--mmo-size-padding));
  padding-left: calc(1 * var(--mmo-size-padding));
  padding-right: calc(1 * var(--mmo-size-padding));
  font-family: "Ubuntu Mono", monospace;
  line-height: 1.3;
  border-left-width: 10px;
  border-left-color: var(--mmo-color-primary);
  border-left-style: solid;
}
.dump article:before {
  content: "dump#" attr(data-num);
  font-weight: bold;
  vertical-align: top;
}
.dump article > details {
  display: inline-block;
}

.array:target, .object:target, .dump:target {
  outline-color: var(--mmo-color-dark);
  outline-width: 2px;
  outline-style: dashed;
}
.array .item, .object .item, .dump .item {
  margin-right: 0;
  flex: 1 100%;
  display: flex;
  flex-direction: row;
  align-items: initial;
  justify-content: initial;
}
.array .item:hover, .object .item:hover, .dump .item:hover {
  outline-color: var(--mmo-color-primary);
  outline-width: 1px;
  outline-style: solid;
}
.array .item:hover > dt, .object .item:hover > dt, .dump .item:hover > dt {
  background-color: var(--mmo-color-primary);
  --mmo-color-text: var(--mmo-color-white);
  color: var(--mmo-color-text);
  --mmo-color-icon: var(--mmo-color-white);
}
.array dl, .object dl, .dump dl {
  display: flex;
  flex-direction: column;
  align-items: initial;
  justify-content: initial;
}
.array dt, .array dd, .object dt, .object dd, .dump dt, .dump dd {
  margin: 0;
  padding: 2px 10px;
}
.array dt, .object dt, .dump dt {
  font-weight: normal;
}
.array dd, .object dd, .dump dd {
  flex: 1;
}
.array > summary, .object > summary, .dump > summary {
  --mmo-color-text: #6000A9;
  color: var(--mmo-color-text);
}
.array > summary span, .object > summary span, .dump > summary span {
  font-weight: bold;
  font-style: italic;
}
.array .public > dt:before, .array .protected > dt:before, .array .private > dt:before, .object .public > dt:before, .object .protected > dt:before, .object .private > dt:before, .dump .public > dt:before, .dump .protected > dt:before, .dump .private > dt:before {
  display: inline-block;
  margin-right: 5px;
}
.array .public > dt:before, .object .public > dt:before, .dump .public > dt:before {
  content: "🔓";
}
.array .protected > dt, .object .protected > dt, .dump .protected > dt {
  --mmo-color-text: #EF002A;
  color: var(--mmo-color-text);
}
.array .protected > dt:before, .object .protected > dt:before, .dump .protected > dt:before {
  content: "🔒";
}
.array .private > dt, .object .private > dt, .dump .private > dt {
  background-color: var(--mmo-color-error);
  --mmo-color-text: var(--mmo-color-white);
  color: var(--mmo-color-text);
  --mmo-color-icon: var(--mmo-color-white);
}
.array .private > dt:before, .object .private > dt:before, .dump .private > dt:before {
  content: "🔐";
}
.array .bool[value=true], .object .bool[value=true], .dump .bool[value=true] {
  background-color: var(--mmo-color-success);
  --mmo-color-text: var(--mmo-color-white);
  color: var(--mmo-color-text);
  --mmo-color-icon: var(--mmo-color-white);
}
.array .bool[value=false], .object .bool[value=false], .dump .bool[value=false] {
  background-color: var(--mmo-color-error);
  --mmo-color-text: var(--mmo-color-white);
  color: var(--mmo-color-text);
  --mmo-color-icon: var(--mmo-color-white);
}
.array .number, .object .number, .dump .number {
  font-weight: bold;
  --mmo-color-text: var(--mmo-color-success);
  color: var(--mmo-color-text);
}
.array .null, .object .null, .dump .null {
  background-color: var(--mmo-color-dark);
  --mmo-color-text: var(--mmo-color-white);
  color: var(--mmo-color-text);
  --mmo-color-icon: var(--mmo-color-white);
  font-weight: bold;
}
.array .string, .object .string, .dump .string {
  --mmo-color-text: var(--mmo-color-primary);
  color: var(--mmo-color-text);
}
.array .string:before, .array .string:after, .object .string:before, .object .string:after, .dump .string:before, .dump .string:after {
  vertical-align: super;
  font-size: 70%;
  --mmo-color-text: #778B99;
  color: var(--mmo-color-text);
}
.array .string:before, .object .string:before, .dump .string:before {
  content: "(" attr(data-length) ") '";
}
.array .string:after, .object .string:after, .dump .string:after {
  content: "'";
}
.array .string small, .object .string small, .dump .string small {
  display: none;
}
.array .max-level > span:first-child, .object .max-level > span:first-child, .dump .max-level > span:first-child {
  font-size: 80%;
  font-style: italic;
  background-color: var(--mmo-color-error);
  --mmo-color-text: var(--mmo-color-white);
  color: var(--mmo-color-text);
  --mmo-color-icon: var(--mmo-color-white);
}
.array .link, .object .link, .dump .link {
  --mmo-color-text: var(--mmo-color-text);
  color: var(--mmo-color-text);
  font-weight: bold;
}

.hflex.center {
  align-items: center;
}
.hflex.justify-center {
  justify-content: center;
}

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

.vflex, .hflex {
  display: flex;
  position: relative;
}
.vflex.spaced, .hflex.spaced {
  justify-content: space-around;
}
.vflex.evenly, .hflex.evenly {
  justify-content: space-evenly;
}
.vflex.end, .hflex.end {
  justify-content: flex-end;
}
.vflex.between, .hflex.between {
  justify-content: space-between;
}
.vflex.wrap, .hflex.wrap {
  flex-wrap: wrap;
}
.vflex.rev-wrap, .hflex.rev-wrap {
  flex-wrap: wrap-reverse;
}
.vflex.start, .hflex.start {
  align-items: flex-start;
}
.vflex.end, .hflex.end {
  align-items: flex-end;
}
.vflex.stretch, .hflex.stretch {
  align-items: stretch;
}
.vflex.inline, .hflex.inline {
  display: inline-flex;
}

.gap, .spaced {
  gap: 1.2rem 1.2rem;
}

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

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

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

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

.flex-1 {
  flex: 1 1 100%;
}

.flex-1-2 {
  width: 50%;
}

.flex-1-4 {
  width: 25%;
}

.flex-3-4 {
  width: 75%;
}

.flex-1-3 {
  width: 33.33%;
}

.flex-2-3 {
  width: 66.66%;
}

@media only screen and (max-width: 980px) {
  .hflex {
    flex-direction: column;
  }
  .flex-1-2, .flex-1-3, .flex-1-4, .flex-2-3, .flex-3-4 {
    width: 100%;
  }
  .flex-0 {
    flex: 0 1 auto;
  }
}
/** ====================================
 * Fieldset
 */
fieldset {
  display: flex;
  flex-direction: column;
  align-items: initial;
  justify-content: initial;
  gap: calc(1 * var(--mmo-size-gap));
  margin-bottom: calc(1 * var(--mmo-size-margin));
  margin-left: 0;
  margin-right: 0;
  padding: 0;
  border-width: 0;
  position: relative;
}
fieldset.block:has(> legend) {
  margin-top: calc(3 * var(--mmo-size-margin));
}
fieldset.block:has(> legend > mmo-icon) {
  --mmo-color-icon: var(--mmo-color-white);
}
fieldset legend {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: initial;
  gap: calc(1 * var(--mmo-size-gap));
  color: var(--mmo-color-text);
  font-size: calc(1 * var(--mmo-size-font));
  margin-bottom: calc(0.5 * var(--mmo-size-margin));
}
fieldset legend label {
  margin: 0;
}
fieldset:focus-within > legend, fieldset:hover > legend {
  color: var(--mmo-color-primary);
}
fieldset > label, fieldset > mmo-input {
  margin-bottom: 0;
  text-align: left;
  width: 100%;
}
fieldset > * {
  flex: auto 1 1;
}
fieldset.block {
  margin-top: calc(0.5 * var(--mmo-size-margin));
  padding: calc(1 * var(--mmo-size-padding));
  background-color: var(--mmo-color-emphasis);
}
fieldset.block > legend {
  border-top-left-radius: calc(1 * var(--mmo-size-radius));
  border-top-right-radius: calc(1 * var(--mmo-size-radius));
  padding-top: calc(0.5 * var(--mmo-size-padding));
  padding-bottom: calc(0.5 * var(--mmo-size-padding));
  padding-left: calc(1 * var(--mmo-size-padding));
  padding-right: calc(1 * var(--mmo-size-padding));
  position: absolute;
  top: -37px;
  left: 0;
  background-color: var(--mmo-color-primary);
  color: var(--mmo-color-white);
}
fieldset.block.info section {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: initial;
  gap: calc(0.5 * var(--mmo-size-gap));
  flex-wrap: wrap;
}
fieldset.block.info p, fieldset.block.info span {
  padding-top: calc(0.5 * var(--mmo-size-padding));
  padding-bottom: calc(0.5 * var(--mmo-size-padding));
  padding-left: calc(1 * var(--mmo-size-padding));
  padding-right: calc(1 * var(--mmo-size-padding));
  margin: 0;
  flex: 0 0 calc(50% - 0.5 * var(--mmo-size-gap) / 2);
}
fieldset.block.info span {
  background: #DEE3E8;
  color: #0D1348;
}
fieldset.light-block {
  border-width: calc(0.25 * var(--mmo-size-border));
  border-color: var(--mmo-color-border);
  border-style: solid;
  border-top-left-radius: calc(1 * var(--mmo-size-radius));
  border-bottom-left-radius: calc(1 * var(--mmo-size-radius));
  border-top-right-radius: calc(1 * var(--mmo-size-radius));
  border-bottom-right-radius: calc(1 * var(--mmo-size-radius));
  padding: calc(1 * var(--mmo-size-padding));
}
fieldset.horizontal {
  flex-direction: row;
}
fieldset.horizontal.center {
  align-items: center;
}
@media only screen and (min-width: 981px) {
  fieldset.horizontal > label {
    width: fit-content;
  }
  fieldset.glued {
    gap: 0;
  }
  fieldset.glued label ~ label .input {
    border-left: 0;
  }
  fieldset.glued > *:first-of-type .input, fieldset.glued > *:first-of-type input, fieldset.glued > *:first-of-type select, fieldset.glued > *:first-of-type .validity, fieldset.glued > *:not(:last-of-type) .input, fieldset.glued > *:not(:last-of-type) input, fieldset.glued > *:not(:last-of-type) select, fieldset.glued > *:not(:last-of-type) .validity {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }
  fieldset.glued > *:first-of-type input, fieldset.glued > *:first-of-type select, fieldset.glued > *:not(:last-of-type) input, fieldset.glued > *:not(:last-of-type) select {
    border-right: none;
  }
  fieldset.glued > *:last-of-type .input, fieldset.glued > *:last-of-type input, fieldset.glued > *:last-of-type select, fieldset.glued > *:last-of-type .validity, fieldset.glued > *:not(:first-of-type) .input, fieldset.glued > *:not(:first-of-type) input, fieldset.glued > *:not(:first-of-type) select, fieldset.glued > *:not(:first-of-type) .validity {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }
  fieldset.glued input:focus {
    z-index: 1;
  }
}
@media only screen and (max-width: 980px) {
  fieldset.horizontal {
    flex-wrap: wrap;
  }
  fieldset.block > legend {
    width: 100%;
  }
}

@media only screen and (max-width: 980px) {
  form div.hflex, mmo-form div.hflex {
    flex-direction: column;
  }
  .form-progress {
    gap: 0;
  }
  .form-progress > div:not(:first-child) {
    margin-left: -8px;
  }
  .form-progress > div.active {
    width: 50%;
  }
  .form-progress > div.active .label, .form-progress > div.active p {
    display: flex;
    flex-direction: row;
    align-items: initial;
    justify-content: initial;
  }
  .form-progress .label, .form-progress p {
    display: none;
    margin: 0;
  }
  .form-progress .dot {
    width: 20px;
    height: 20px;
    padding: calc(0.25 * var(--mmo-size-padding));
  }
  .form-progress .dot:before {
    width: 10px;
    height: 10px;
  }
  .form-progress .step {
    margin-bottom: calc(0.5 * var(--mmo-size-margin));
  }
}
label {
  cursor: pointer;
  position: relative;
  /* @TODO box-shadows needs to be fixed within (var) values */
}
label input:not([type=radio], [type=checkbox], [readonly], [disabled], [type=color]), label select {
  border-width: calc(0.25 * var(--mmo-size-border));
  border-color: var(--mmo-color-border);
  border-style: solid;
}
label:focus-within:not(.invalid, .required, :has(input[readonly])) .input {
  --mmo-color-icon: var(--mmo-color-primary);
}
label:focus-within textarea {
  border: 0;
}
label:focus-within .input:has(textarea, input:not([type=radio], [type=checkbox], [readonly], [disabled])) {
  box-shadow: 0 0 0 6px rgba(0, 133, 255, 0.2);
  outline-color: var(--mmo-color-primary);
  outline-width: calc(0.25 * var(--mmo-size-border));
  outline-style: solid;
  border: 0;
}
label:hover .label, label:focus-within .label {
  color: var(--mmo-color-primary);
}
label .label {
  color: var(--mmo-color-title);
  font-size: 80%;
  position: relative;
  display: block;
  margin-bottom: calc(0.5 * var(--mmo-size-margin));
}
label .label.inline {
  display: inline-flex;
}
label .label + .input {
  margin-top: 0;
}
label:not(.invalid, .required) .validity, label.validity:empty {
  display: none;
}
label:has(input:not([type=radio], [type=checkbox], [type=color]), select):has(input:read-only, [disabled]) .input {
  background-color: var(--mmo-color-surface);
  outline-color: var(--mmo-color-border);
  outline-width: 0;
  outline-style: solid;
}
label:has(input:not([type=radio], [type=checkbox], [type=color]), select) .input {
  background-color: var(--mmo-color-white);
  position: relative;
  width: 100%;
  font-size: calc(1 * var(--mmo-size-font));
}
label:has(input:not([type=radio], [type=checkbox], [type=color]), select) .input.euro::before {
  font-weight: 700;
  position: absolute;
  right: 5px;
  top: 12px;
  z-index: 1;
  content: "€";
}
label:has(input:not([type=radio], [type=checkbox], [type=color]), select) .input.euro:not(.ttc, .ht) {
  padding-right: 20px;
}
label:has(input:not([type=radio], [type=checkbox], [type=color]), select) .input.euro::after {
  font-weight: 700;
  position: absolute;
  right: 5px;
  top: 12px;
}
label:has(input:not([type=radio], [type=checkbox], [type=color]), select) .input.euro.ht input {
  padding-right: 48px;
}
label:has(input:not([type=radio], [type=checkbox], [type=color]), select) .input.euro.ht::before {
  right: 31px;
}
label:has(input:not([type=radio], [type=checkbox], [type=color]), select) .input.euro.ht::after {
  content: "HT";
}
label:has(input:not([type=radio], [type=checkbox], [type=color]), select) .input.euro.ttc input {
  padding-right: 56px;
}
label:has(input:not([type=radio], [type=checkbox], [type=color]), select) .input.euro.ttc::before {
  right: 40px;
}
label:has(input:not([type=radio], [type=checkbox], [type=color]), select) .input.euro.ttc::after {
  content: "TTC";
}
label:has(input:not([type=radio], [type=checkbox], [type=color]), select) .input:has(input.space-chars) {
  width: fit-content;
}
label:has(input:not([type=radio], [type=checkbox], [type=color]), select) .input input[type=number] {
  text-align: right;
}
label:has(input:not([type=radio], [type=checkbox], [type=color]), select) .input input[type=number]::-webkit-inner-spin-button {
  opacity: 1;
  margin-left: 5px;
}

label.inline, label.compact {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  justify-content: initial;
  gap: calc(0.5 * var(--mmo-size-gap));
}
label.inline > *, label.compact > * {
  margin-top: 0;
  margin-bottom: 0;
}
label.inline .label, label.compact .label {
  flex: auto 0 0;
}
label.center.inline, label.center.compact {
  align-items: center;
}
label.inline .input:has(input:not([type=radio], [type=checkbox])), label.compact .input:has(input:not([type=radio], [type=checkbox])) {
  flex: 1;
}

label.compact .input {
  overflow: initial;
}
label.compact .input > mmo-icon {
  line-height: 0;
  top: 3px;
}
label.compact .input mmo-icon:first-child {
  left: 4px;
}
label.compact .input input {
  height: calc(1 * var(--mmo-size-input) * 0.5);
  font-size: calc(0.75 * var(--mmo-size-font));
  padding-top: 2px;
  padding-bottom: 2px;
  padding-left: calc(0.25 * var(--mmo-size-padding));
  padding-right: calc(0.25 * var(--mmo-size-padding));
}
label.compact .input:has(mmo-icon:first-child) input {
  padding-left: calc(1.5 * var(--mmo-size-padding));
}
label.compact .input:has(mmo-icon:last-child) input {
  padding-right: calc(1.5 * var(--mmo-size-padding));
}
label.compact .input.euro::before {
  top: 6px;
}
label.compact .input.euro::after {
  top: 6px;
}
label.compact .validity:is(mmo-icon) {
  width: 16px;
  right: 4px;
  left: initial;
}
label.compact .validity:is(mmo-icon):has(.validity:empty) {
  display: none;
}
label.compact .validity:is(mmo-icon) .validity {
  display: none;
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 20px;
  line-height: 1;
}
label.compact .validity:is(mmo-icon) .validity > span {
  text-align: left;
  width: 209px;
  max-width: max-content;
  border-radius: calc(0.5 * var(--mmo-size-radius));
}
label.compact .validity:is(mmo-icon):hover .validity {
  display: block;
}
label.compact .validity:is(mmo-icon) .validity > span:empty {
  display: none;
}

ol.select, ul.select, input, select, textarea {
  position: relative;
  color: var(--mmo-color-text);
  font-family: "Montserrat";
  font-weight: 500;
  height: calc(1 * var(--mmo-size-input));
  background-color: var(--mmo-color-layout);
  font-size: calc(1 * var(--mmo-size-font));
  border-width: calc(0.25 * var(--mmo-size-border));
  border-color: var(--mmo-color-border);
  border-style: solid;
  border-radius: calc(0.5 * var(--mmo-size-radius));
  padding-top: calc(0.25 * var(--mmo-size-padding));
  padding-bottom: calc(0.25 * var(--mmo-size-padding));
}
ol.select:not([type=range], [type=color], select), ul.select:not([type=range], [type=color], select), input:not([type=range], [type=color], select), select:not([type=range], [type=color], select), textarea:not([type=range], [type=color], select) {
  padding-left: calc(0.5 * var(--mmo-size-padding));
  padding-right: calc(0.5 * var(--mmo-size-padding));
}
ol.select:-webkit-autofill, ul.select:-webkit-autofill, input:-webkit-autofill, select:-webkit-autofill, textarea:-webkit-autofill {
  -webkit-background-clip: text;
}
ol.select::placeholder, ul.select::placeholder, input::placeholder, select::placeholder, textarea::placeholder, ol.select::-webkit-input-placeholder, ul.select::-webkit-input-placeholder, input::-webkit-input-placeholder, select::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
  color: var(--mmo-color-muted);
}
ol[type=number].select::placeholder, ul[type=number].select::placeholder, input[type=number]::placeholder, select[type=number]::placeholder, textarea[type=number]::placeholder, ol[type=number].select::-webkit-input-placeholder, ul[type=number].select::-webkit-input-placeholder, input[type=number]::-webkit-input-placeholder, select[type=number]::-webkit-input-placeholder, textarea[type=number]::-webkit-input-placeholder {
  text-align: right;
}
ol.select:focus-visible, ul.select:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline-offset: 0;
}
ol.select:not([type=radio], [type=checkbox], [type=range]):focus, ul.select:not([type=radio], [type=checkbox], [type=range]):focus, input:not([type=radio], [type=checkbox], [type=range]):focus, select:not([type=radio], [type=checkbox], [type=range]):focus, textarea:not([type=radio], [type=checkbox], [type=range]):focus {
  outline: 0;
}
ol.select:disabled, ul.select:disabled, input:disabled, select:disabled, textarea:disabled {
  background-color: var(--mmo-color-muted);
  cursor: not-allowed;
}

input[type=range] {
  cursor: pointer;
  border-radius: calc(3 * var(--mmo-size-radius));
  display: block;
  padding-top: calc(0.5 * var(--mmo-size-padding));
  padding-bottom: calc(0.5 * var(--mmo-size-padding));
}
input[type=range]:focus-within {
  padding: 0;
}

input[type=color] {
  cursor: pointer;
  width: 60px;
  height: 35px;
  border-radius: calc(0.5 * var(--mmo-size-radius));
  border-width: calc(0.25 * var(--mmo-size-border));
  border-color: var(--mmo-color-muted);
  border-style: solid;
  padding: 0;
  -webkit-appearance: none;
}
input[type=color]::-webkit-color-swatch-wrapper {
  padding: 0;
}

input[type=file] {
  padding-right: calc(3 * var(--mmo-size-padding));
  line-height: 28px;
}
input[type=file]::file-selector-button {
  color: var(--mmo-color-white);
  background-color: var(--mmo-color-primary);
  border-width: 0;
  border-color: var(--mmo-color-border);
  border-style: solid;
  border-radius: calc(0.5 * var(--mmo-size-radius));
  padding-top: 0;
  padding-bottom: 0;
  padding-left: calc(1.5 * var(--mmo-size-padding));
  padding-right: calc(1.5 * var(--mmo-size-padding));
  margin: 0;
  box-shadow: 3px 2px 2px 0px var(--mmo-color-shadow), 3px 4px 4px 0px var(--mmo-color-shadow), 3px 8px 8px 0px var(--mmo-color-shadow);
  line-height: 28px;
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  font-family: "Montserrat";
}

input[type=checkbox] {
  appearance: none;
  cursor: pointer;
  aspect-ratio: 1;
  width: 20px;
  height: 20px;
  vertical-align: middle;
  text-align: center;
  color: var(--mmo-color-primary);
  position: relative;
  padding: 0;
  margin: 0;
  font-size: calc(0.75 * var(--mmo-size-font));
  border-radius: calc(0.25 * var(--mmo-size-radius));
}
input[type=checkbox] + span {
  vertical-align: middle;
  margin-left: calc(0.5 * var(--mmo-size-margin));
}
input[type=checkbox] + ::after {
  top: 4px;
}
input[type=checkbox]:checked + span {
  font-weight: 700;
}
input[type=checkbox]:disabled {
  background-color: var(--mmo-color-muted);
  border-width: calc(0.25 * var(--mmo-size-border));
  border-color: var(--mmo-color-muted);
  border-style: solid;
}
input.colors[type=checkbox] {
  color: var(--mmo-color-error);
  border-color: var(--mmo-color-error);
}
input.colors[type=checkbox]:before {
  content: "✖";
  font-weight: bold;
  top: 50%;
  transform: translateY(-50%);
  position: relative;
  display: block;
}
input.colors[type=checkbox]:checked {
  border-color: var(--mmo-color-success);
  color: var(--mmo-color-success);
}
input.colors[type=checkbox]:indeterminate {
  color: var(--mmo-color-primary);
  border-color: var(--mmo-color-primary);
}
input[type=checkbox]:checked, input[type=checkbox]:indeterminate {
  border-color: var(--mmo-color-primary);
}
input[type=checkbox]:checked:before, input[type=checkbox]:indeterminate:before {
  font-weight: bold;
}
input[type=checkbox]:checked:before {
  content: "✔";
}
input[type=checkbox]:indeterminate:before {
  content: "-";
  font-weight: bold;
}
input.slider[type=checkbox] {
  background-color: var(--mmo-color-light);
  color: var(--mmo-color-primary);
  outline-color: var(--mmo-color-border);
  outline-width: 0;
  outline-style: solid;
  border-width: calc(0.25 * var(--mmo-size-border));
  border-color: var(--mmo-color-primary);
  border-style: solid;
  border-radius: 100px;
  width: 60px;
  height: 34px;
}
input.slider[type=checkbox]:before {
  content: none;
  display: none;
}
input.slider[type=checkbox]:after {
  background-color: var(--mmo-color-primary);
  content: "";
  transition: transform 0.3s;
  position: absolute;
  top: 5px;
  left: 6px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
}
input.slider[type=checkbox]:checked {
  background-color: var(--mmo-color-primary);
  outline-color: var(--mmo-color-border);
  outline-width: 0;
  outline-style: solid;
}
input.slider[type=checkbox]:checked:after {
  background: none;
  background-color: var(--mmo-color-light);
  color: var(--mmo-color-text);
  transform: translateX(100%);
}
input.slider[type=checkbox]:disabled {
  background-color: var(--mmo-color-light);
  cursor: not-allowed;
}
input.slider[type=checkbox]:disabled:after {
  background: none;
  background-color: var(--mmo-color-surface);
}

input[type=radio] {
  vertical-align: middle;
  margin: 0;
  cursor: pointer;
  width: 20px;
  height: 20px;
  accent-color: var(--mmo-color-primary);
}
input[type=radio]:disabled:checked:before {
  background-color: var(--mmo-color-warning);
}
input[type=radio] + span {
  margin-left: calc(0.5 * var(--mmo-size-margin));
}

.input.icon {
  width: 100%;
  margin-bottom: calc(0.5 * var(--mmo-size-margin));
}
.input.icon + .label {
  text-align: center;
}
.input.icon mmo-icon {
  background-color: var(--mmo-color-light);
  right: auto !important;
  position: relative;
  display: block;
  padding: calc(1 * var(--mmo-size-padding));
  margin-top: 0;
  margin-bottom: 0;
}
.input.icon:hover {
  color: var(--mmo-color-dark);
}
.input.icon:hover mmo-icon {
  background-color: var(--mmo-color-surface);
}
.input.icon input[type=checkbox], .input.icon input[type=radio] {
  display: none;
}
.input.icon input[type=checkbox]:checked + mmo-icon, .input.icon input[type=radio]:checked + mmo-icon {
  background-color: var(--mmo-color-muted);
}
.input.icon mmo-icon.border-success {
  width: 30px;
  height: 30px;
  padding: calc(0.25 * var(--mmo-size-padding));
  border-width: calc(1 * var(--mmo-size-border));
  border-color: var(--mmo-color-success);
  border-style: solid;
  background: transparent;
}
.input.icon input[type=radio]:checked + mmo-icon.border-success, .input.icon:hover mmo-icon.border-success {
  background-color: var(--mmo-color-success);
}
.input.icon mmo-icon.border-warning {
  width: 30px;
  height: 30px;
  padding: calc(0.25 * var(--mmo-size-padding));
  border-width: calc(1 * var(--mmo-size-border));
  border-color: var(--mmo-color-warning);
  border-style: solid;
  background: transparent;
}
.input.icon input[type=radio]:checked + mmo-icon.border-warning, .input.icon:hover mmo-icon.border-warning {
  background-color: var(--mmo-color-warning);
}
.input.icon mmo-icon.border-error {
  width: 30px;
  height: 30px;
  padding: calc(0.25 * var(--mmo-size-padding));
  border-width: calc(1 * var(--mmo-size-border));
  border-color: var(--mmo-color-error);
  border-style: solid;
  background: transparent;
}
.input.icon input[type=radio]:checked + mmo-icon.border-error, .input.icon:hover mmo-icon.border-error {
  background-color: var(--mmo-color-error);
}

.input {
  position: relative;
  display: block;
  line-height: 1;
  width: 100%;
  border-radius: calc(0.5 * var(--mmo-size-radius));
  --mmo-color-icon: var(--mmo-color-primary);
}
.input input:not([type=checkbox], [type=radio], [type=color]), .input textarea, .input select {
  width: 100%;
}
.input:has(input[type=checkbox], input[type=radio]) {
  display: flex;
  align-items: center;
  width: auto;
}
.input:has(input[type=checkbox], input[type=radio]) .label {
  margin-bottom: 0;
}
.input input:not(:last-child, [type=checkbox], [type=radio], [type=number])::placeholder, .input select:not(:last-child, [type=checkbox], [type=radio], [type=number])::placeholder, .input textarea:not(:last-child, [type=checkbox], [type=radio], [type=number])::placeholder {
  margin-right: calc(0.5 * var(--mmo-size-margin));
}
.input > mmo-icon {
  height: 16px;
  position: absolute;
  left: 8px;
  top: 11px;
  line-height: 1;
  z-index: 2;
}
.input > mmo-icon + input, .input > mmo-icon + select, .input > mmo-icon + textarea {
  padding-left: 32px;
}
.input > mmo-icon + input::placeholder, .input > mmo-icon + select::placeholder, .input > mmo-icon + textarea::placeholder {
  margin-left: calc(0.5 * var(--mmo-size-margin));
}
.input > mmo-icon:last-child {
  left: auto;
  right: 12px;
}
.input + .label {
  margin-bottom: 0;
}

.invalid input:not([type=checkbox], [type=radio], [type=number]), .invalid select, .invalid textarea, .valid input:not([type=checkbox], [type=radio], [type=number]), .valid select, .valid textarea, .required input:not([type=checkbox], [type=radio], [type=number]), .required select, .required textarea {
  padding-right: calc(0.5 * var(--mmo-size-padding));
  border-width: 0;
  border-color: var(--mmo-color-border);
  border-style: solid;
}
.invalid input:not([type=checkbox], [type=radio], [type=number])::placeholder, .invalid select::placeholder, .invalid textarea::placeholder, .valid input:not([type=checkbox], [type=radio], [type=number])::placeholder, .valid select::placeholder, .valid textarea::placeholder, .required input:not([type=checkbox], [type=radio], [type=number])::placeholder, .required select::placeholder, .required textarea::placeholder {
  margin-right: calc(0.5 * var(--mmo-size-margin));
}
.invalid input[type=checkbox], .invalid input[type=radio], .valid input[type=checkbox], .valid input[type=radio], .required input[type=checkbox], .required input[type=radio] {
  margin: calc(0.25 * var(--mmo-size-margin));
}
.invalid input[type=checkbox] + span, .invalid input[type=radio] + span, .valid input[type=checkbox] + span, .valid input[type=radio] + span, .required input[type=checkbox] + span, .required input[type=radio] + span {
  padding-right: calc(0.5 * var(--mmo-size-padding));
}

.input.invalid, .invalid .input:not(.icon) {
  background-color: var(--mmo-color-white);
  border-width: calc(0.25 * var(--mmo-size-border));
  border-color: var(--mmo-color-error);
  border-style: solid;
  --mmo-color-icon: var(--mmo-color-error);
}
.invalid .input > .validity:not(mmo-icon), .invalid mmo-icon .validity > span {
  border-width: calc(0.25 * var(--mmo-size-border));
  border-color: var(--mmo-color-error);
  border-style: solid;
  background-color: var(--mmo-color-error);
  --mmo-color-text: var(--mmo-color-white);
  color: var(--mmo-color-text);
  --mmo-color-icon: var(--mmo-color-white);
}
.invalid input, .invalid select {
  background-color: var(--mmo-color-white);
  color: var(--mmo-color-error);
}
.invalid input[type=checkbox]:checked, .invalid input[type=radio]:checked, .invalid select[type=checkbox]:checked, .invalid select[type=radio]:checked {
  border-color: var(--mmo-color-error);
}
.invalid:focus-within .input:has(textarea, input:not([type=radio], [type=checkbox], [readonly], [disabled])) {
  box-shadow: 0 0 0 6px rgba(255, 24, 66, 0.2);
  outline-color: var(--mmo-color-error);
  outline-width: calc(0.25 * var(--mmo-size-border));
  outline-style: solid;
  border: 0;
}
.invalid:hover .label, .invalid:focus-within .label {
  color: var(--mmo-color-error);
}

.input.required, .required .input:not(.icon) {
  background-color: var(--mmo-color-white);
  border-width: calc(0.25 * var(--mmo-size-border));
  border-color: var(--mmo-color-warning);
  border-style: solid;
  --mmo-color-icon: var(--mmo-color-warning);
}
.required .input > .validity:not(mmo-icon), .required mmo-icon .validity > span {
  border-width: calc(0.25 * var(--mmo-size-border));
  border-color: var(--mmo-color-warning);
  border-style: solid;
  background-color: var(--mmo-color-warning);
  --mmo-color-text: var(--mmo-color-white);
  color: var(--mmo-color-text);
  --mmo-color-icon: var(--mmo-color-white);
}
.required .input.icon mmo-icon {
  border-width: calc(0.5 * var(--mmo-size-border));
  border-color: var(--mmo-color-warning);
  border-style: solid;
}
.required input, .required select {
  background-color: var(--mmo-color-white);
  color: var(--mmo-color-warning);
}
.required input[type=checkbox]:checked, .required input[type=radio]:checked, .required select[type=checkbox]:checked, .required select[type=radio]:checked {
  border-color: var(--mmo-color-warning);
}
.required:focus-within .input:has(textarea, input:not([type=radio], [type=checkbox], [readonly], [disabled])) {
  box-shadow: 0 0 0 6px rgba(255, 122, 0, 0.2);
  outline-color: var(--mmo-color-warning);
  outline-width: calc(0.25 * var(--mmo-size-border));
  outline-style: solid;
  border: 0;
}
.required:hover .label, .required:focus-within .label {
  color: var(--mmo-color-warning);
}

.input.valid, .valid .input {
  background-color: var(--mmo-color-white);
  border-width: calc(0.25 * var(--mmo-size-border));
  border-color: var(--mmo-color-success);
  border-style: solid;
  --mmo-color-icon: var(--mmo-color-success);
}
.input.valid:after, .valid .input:after {
  background-color: var(--mmo-color-success);
  -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMDAgMjAwIj48cGF0aCBzdHJva2U9InZhcigtLW1tby10ZXh0LWNvbG9yKSIgZD0iTTE0Ny42NiwxNjQuMjFjLTEtLjgtMS4zLTEuMzktMS0yLjUxLjgyLTMuMywxLjQ2LTYuNjUsMi40NC05LjlBNzIuNzcsNzIuNzcsMCwwLDAsMTUyLjYzLDEyOGMtLjYtMTYuMzctLjk1LTMyLjc0LTEuNTUtNDkuMTEtLjIzLTYuNDgtLjYyLTEzLTEuMzQtMTkuNDEtMS4wNS05LjQ4LTguMzItMTMuNDYtMTctOS41OWE4LjM0LDguMzQsMCwwLDEtMS4zNi4zNmMtLjQtMi43NC0uNzgtNS4zMi0xLjE2LTcuODktLjc4LTUuMzItMS4yOC0xMC43LTIuNC0xNi0xLjQzLTYuNzEtNy4xLTEwLjUzLTEzLTkuMTdhMTUuNCwxNS40LDAsMCwwLTguOTQsNS44OGMtMS4yMywxLjU5LTIuMjUsMy4zNS0zLjUsNS4yNS0uNTUtMS43NC0xLTMuMjQtMS40OC00Ljc1Qzk5Ljc0LDIwLDk4LjgsMTYuMyw5Ny40NywxMi43NWMtMy4zNS04LjktMTMtMTEuNTgtMjAuNTctNS44NC01Ljc2LDQuMzYtOC4wOCwxMi4zMS01LjgzLDE5LjY4cTQuNjEsMTUuMDgsOS4xMiwzMC4xOWMuODgsMi45LDEuNyw1LjgyLDIuNTcsOC44LTguMjkuMzYtMTAuMzUuNzYtMTYuMzMsNS4zNWExOTkuNSwxOTkuNSwwLDAsMS0yNywxNy4xNmMtMS42NC44OC0zLDMuMDgtMy42LDUtMS4yOCwzLjk0LjUyLDcuNCwyLjg4LDEwLjcxLTYuNiw1LjktNS43LDEwLjIzLTEuMjUsMTUuODRhNTcuMjUsNTcuMjUsMCwwLDEsNy4xLDEyLjc3LDM3LjI5LDM3LjI5LDAsMCwwLDExLDE0LjkzYzMsMi4zNCw2LjEyLDQuNDksOS4xNCw2LjhhMTQuNDIsMTQuNDIsMCwwLDEsNS40Myw3LjU4LDIuMSwyLjEsMCwwLDEtLjg0LDIuNTUsNS43Nyw1Ljc3LDAsMCwwLTEuNzcsMy44Yy0uMTYsNy4xMi0uMSwxNC4yNS0uMDcsMjEuMzcsMCwzLjE0LDEuMzgsNC41Miw0LjQ3LDQuNTJxMzYuNTYsMCw3My4xMywwYzMsMCw0LjQ2LTEuMzQsNC40OS00LjI5LjA2LTcuMjguMS0xNC41Ny0uMDYtMjEuODVBNS40MSw1LjQxLDAsMCwwLDE0Ny42NiwxNjQuMjFabS01Ljc2LDIySDc1LjA4VjE3MWg1M2MuNzgsMCwxLjU2LDAsMi4zNCwwSDE0MS45Wm0zLjMtNTguNjhhNzguMDYsNzguMDYsMCwwLDEtMy4wNiwyMS41Yy0xLjQxLDQuNjctMi4zNyw5LjQ5LTMuNTksMTQuNDhIMTI3Ljg3Yy0xMSwwLTQ0LjU0LDAtNDcuOTQsMEg3OC4yNmMtLjY1LTIuMjItMS4xMS00LjM4LTEuOTEtNi40LTItNS02LTguMjUtMTAuMjEtMTEuMjctMi4zMS0xLjY1LTQuNjMtMy4zMi02LjgzLTUuMTNBMjUuMTcsMjUuMTcsMCwwLDEsNTEuNzIsMTMwYTU3LjE5LDU3LjE5LDAsMCwwLTkuMTYtMTYuMjVjLTEuNTItMS44Ni0xLjM1LTIuNTYuNjktMy44OCwzLjc5LTIuNDQsOS44My0xLjM0LDEzLjM2LDIuNTQsMS4zMywxLjQ2LDIuNDcsMy4wOSwzLjY4LDQuNjZhMzAuMTMsMzAuMTMsMCwwLDAsMTUuNTIsMTAuMzYsOC43Myw4LjczLDAsMCwwLDguNTMtMS41NCw2Mi44Niw2Mi44NiwwLDAsMCw5LjE5LTkuNDgsOS40Niw5LjQ2LDAsMCwwLS4xNi0xMS43OUE4NS40MSw4NS40MSwwLDAsMCw4Mi42LDkzLjA1Yy0zLjE2LTIuODYtNy4yNy0yLjY2LTExLS45NC00LjMsMi04LjM2LDQuNDctMTIuNTgsNi42My0zLjE0LDEuNjEtNi41MSwyLjYzLTEwLjA3LDIuMDVBOC45NCw4Ljk0LDAsMCwxLDQ0LjczLDk5Yy0yLjY4LTIuMjctMi4xNy00LjA5Ljc3LTUuOSw3Ljg3LTQuODUsMTUuNjItOS44OCwyMy40LTE0Ljg2QzcwLDc3LjU2LDcxLDc2Ljc4LDcyLDc2YzQuODktMy41Niw5LjcxLTMuOTMsMTQuODgtLjMxYTc3LjY1LDc3LjY1LDAsMCwwLDkuOTEsNS40LDMuNDUsMy40NSwwLDAsMCw0LjUxLS45M2MxLjI5LTEuNTksMS4zOS0zLjQ1LS4xNC00LjY5QTQxLjgyLDQxLjgyLDAsMCwwLDk0LDcxYy0xLjI2LS42NS0yLjI0LTEuMTUtMi42Ny0yLjYyQzg3LDUzLjU4LDgyLjUyLDM4LjgxLDc4LjEyLDI0YTEwLDEwLDAsMCwxLDIuMzQtMTAuMzVjMy42OC0zLjg4LDguNDYtMi44OCwxMC4yNSwyLjE0LDEuMTEsMy4xMiwyLDYuMzMsMyw5LjUxLDQuMTYsMTMuOTQsOC4yMiwyNy45MSwxMi41MSw0MS44YTI1LjA4LDI1LjA4LDAsMCwwLDMuODMsN2MyLjMyLDMuMiw0LjEzLDYuNSw0LjU1LDEwLjUyQTMuNTQsMy41NCwwLDAsMCwxMTguNjYsODhjMi0uMjIsMy4yNS0xLjcyLDMuMTQtNC0uMi00LTEuMTctOC0zLjc0LTExLjA3LTUuMy02LjM3LTYuODctMTMuODktNy43My0yMS43Ni0uNDctNC4zMi0xLjE4LTguNjItMS42OS0xMi45NGExMy4wOSwxMy4wOSwwLDAsMSw0LjI0LTExLjhjMy43Ni0zLjQzLDcuMDUtMi40NCw4LDIuNTVzMS41LDEwLjMzLDIuMTksMTUuNXEzLjQyLDI1LjY0LDYuODMsNTEuMjhjLjM0LDIuNTksMiw0LjA3LDQuMjQsMy44MXMzLjUyLTIuMjksMy4xNi01UTEzNS4xMSw3OC4zOCwxMzMsNjIuMTNjLS40OC0zLjYzLDIuODctNyw2LjQtNi4xNmE0LjIxLDQuMjEsMCwwLDEsMi41NCwyLjY1LDQzLjQ2LDQzLjQ2LDAsMCwxLDEsOEMxNDQsODYuOSwxNDUuNTUsMTA3LjE4LDE0NS4yLDEyNy41NlpNNjEuMTMsMTA2LjFjNC4zNS0yLjM4LDguNTYtNC43LDEyLjgtN2E0LjIxLDQuMjEsMCwwLDEsNS41OC44OGMyLjMyLDIuNDgsNC44LDQuODMsNi45Myw3LjQ2LDIsMi40NiwxLjgsNC4xNi0uMzEsNi41Ni0xLjUxLDEuNzEtMy4xMywzLjM0LTQuNzUsNWE0LjMyLDQuMzIsMCwwLDEtNS4yNC44MWMtNC4yLTEuODMtNy45My00LjI0LTEwLjYzLTguMDdDNjQuMTksMTA5Ljg0LDYyLjY5LDEwOC4wOSw2MS4xMywxMDYuMVoiLz48L3N2Zz4=");
  mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMDAgMjAwIj48cGF0aCBzdHJva2U9InZhcigtLW1tby10ZXh0LWNvbG9yKSIgZD0iTTE0Ny42NiwxNjQuMjFjLTEtLjgtMS4zLTEuMzktMS0yLjUxLjgyLTMuMywxLjQ2LTYuNjUsMi40NC05LjlBNzIuNzcsNzIuNzcsMCwwLDAsMTUyLjYzLDEyOGMtLjYtMTYuMzctLjk1LTMyLjc0LTEuNTUtNDkuMTEtLjIzLTYuNDgtLjYyLTEzLTEuMzQtMTkuNDEtMS4wNS05LjQ4LTguMzItMTMuNDYtMTctOS41OWE4LjM0LDguMzQsMCwwLDEtMS4zNi4zNmMtLjQtMi43NC0uNzgtNS4zMi0xLjE2LTcuODktLjc4LTUuMzItMS4yOC0xMC43LTIuNC0xNi0xLjQzLTYuNzEtNy4xLTEwLjUzLTEzLTkuMTdhMTUuNCwxNS40LDAsMCwwLTguOTQsNS44OGMtMS4yMywxLjU5LTIuMjUsMy4zNS0zLjUsNS4yNS0uNTUtMS43NC0xLTMuMjQtMS40OC00Ljc1Qzk5Ljc0LDIwLDk4LjgsMTYuMyw5Ny40NywxMi43NWMtMy4zNS04LjktMTMtMTEuNTgtMjAuNTctNS44NC01Ljc2LDQuMzYtOC4wOCwxMi4zMS01LjgzLDE5LjY4cTQuNjEsMTUuMDgsOS4xMiwzMC4xOWMuODgsMi45LDEuNyw1LjgyLDIuNTcsOC44LTguMjkuMzYtMTAuMzUuNzYtMTYuMzMsNS4zNWExOTkuNSwxOTkuNSwwLDAsMS0yNywxNy4xNmMtMS42NC44OC0zLDMuMDgtMy42LDUtMS4yOCwzLjk0LjUyLDcuNCwyLjg4LDEwLjcxLTYuNiw1LjktNS43LDEwLjIzLTEuMjUsMTUuODRhNTcuMjUsNTcuMjUsMCwwLDEsNy4xLDEyLjc3LDM3LjI5LDM3LjI5LDAsMCwwLDExLDE0LjkzYzMsMi4zNCw2LjEyLDQuNDksOS4xNCw2LjhhMTQuNDIsMTQuNDIsMCwwLDEsNS40Myw3LjU4LDIuMSwyLjEsMCwwLDEtLjg0LDIuNTUsNS43Nyw1Ljc3LDAsMCwwLTEuNzcsMy44Yy0uMTYsNy4xMi0uMSwxNC4yNS0uMDcsMjEuMzcsMCwzLjE0LDEuMzgsNC41Miw0LjQ3LDQuNTJxMzYuNTYsMCw3My4xMywwYzMsMCw0LjQ2LTEuMzQsNC40OS00LjI5LjA2LTcuMjguMS0xNC41Ny0uMDYtMjEuODVBNS40MSw1LjQxLDAsMCwwLDE0Ny42NiwxNjQuMjFabS01Ljc2LDIySDc1LjA4VjE3MWg1M2MuNzgsMCwxLjU2LDAsMi4zNCwwSDE0MS45Wm0zLjMtNTguNjhhNzguMDYsNzguMDYsMCwwLDEtMy4wNiwyMS41Yy0xLjQxLDQuNjctMi4zNyw5LjQ5LTMuNTksMTQuNDhIMTI3Ljg3Yy0xMSwwLTQ0LjU0LDAtNDcuOTQsMEg3OC4yNmMtLjY1LTIuMjItMS4xMS00LjM4LTEuOTEtNi40LTItNS02LTguMjUtMTAuMjEtMTEuMjctMi4zMS0xLjY1LTQuNjMtMy4zMi02LjgzLTUuMTNBMjUuMTcsMjUuMTcsMCwwLDEsNTEuNzIsMTMwYTU3LjE5LDU3LjE5LDAsMCwwLTkuMTYtMTYuMjVjLTEuNTItMS44Ni0xLjM1LTIuNTYuNjktMy44OCwzLjc5LTIuNDQsOS44My0xLjM0LDEzLjM2LDIuNTQsMS4zMywxLjQ2LDIuNDcsMy4wOSwzLjY4LDQuNjZhMzAuMTMsMzAuMTMsMCwwLDAsMTUuNTIsMTAuMzYsOC43Myw4LjczLDAsMCwwLDguNTMtMS41NCw2Mi44Niw2Mi44NiwwLDAsMCw5LjE5LTkuNDgsOS40Niw5LjQ2LDAsMCwwLS4xNi0xMS43OUE4NS40MSw4NS40MSwwLDAsMCw4Mi42LDkzLjA1Yy0zLjE2LTIuODYtNy4yNy0yLjY2LTExLS45NC00LjMsMi04LjM2LDQuNDctMTIuNTgsNi42My0zLjE0LDEuNjEtNi41MSwyLjYzLTEwLjA3LDIuMDVBOC45NCw4Ljk0LDAsMCwxLDQ0LjczLDk5Yy0yLjY4LTIuMjctMi4xNy00LjA5Ljc3LTUuOSw3Ljg3LTQuODUsMTUuNjItOS44OCwyMy40LTE0Ljg2QzcwLDc3LjU2LDcxLDc2Ljc4LDcyLDc2YzQuODktMy41Niw5LjcxLTMuOTMsMTQuODgtLjMxYTc3LjY1LDc3LjY1LDAsMCwwLDkuOTEsNS40LDMuNDUsMy40NSwwLDAsMCw0LjUxLS45M2MxLjI5LTEuNTksMS4zOS0zLjQ1LS4xNC00LjY5QTQxLjgyLDQxLjgyLDAsMCwwLDk0LDcxYy0xLjI2LS42NS0yLjI0LTEuMTUtMi42Ny0yLjYyQzg3LDUzLjU4LDgyLjUyLDM4LjgxLDc4LjEyLDI0YTEwLDEwLDAsMCwxLDIuMzQtMTAuMzVjMy42OC0zLjg4LDguNDYtMi44OCwxMC4yNSwyLjE0LDEuMTEsMy4xMiwyLDYuMzMsMyw5LjUxLDQuMTYsMTMuOTQsOC4yMiwyNy45MSwxMi41MSw0MS44YTI1LjA4LDI1LjA4LDAsMCwwLDMuODMsN2MyLjMyLDMuMiw0LjEzLDYuNSw0LjU1LDEwLjUyQTMuNTQsMy41NCwwLDAsMCwxMTguNjYsODhjMi0uMjIsMy4yNS0xLjcyLDMuMTQtNC0uMi00LTEuMTctOC0zLjc0LTExLjA3LTUuMy02LjM3LTYuODctMTMuODktNy43My0yMS43Ni0uNDctNC4zMi0xLjE4LTguNjItMS42OS0xMi45NGExMy4wOSwxMy4wOSwwLDAsMSw0LjI0LTExLjhjMy43Ni0zLjQzLDcuMDUtMi40NCw4LDIuNTVzMS41LDEwLjMzLDIuMTksMTUuNXEzLjQyLDI1LjY0LDYuODMsNTEuMjhjLjM0LDIuNTksMiw0LjA3LDQuMjQsMy44MXMzLjUyLTIuMjksMy4xNi01UTEzNS4xMSw3OC4zOCwxMzMsNjIuMTNjLS40OC0zLjYzLDIuODctNyw2LjQtNi4xNmE0LjIxLDQuMjEsMCwwLDEsMi41NCwyLjY1LDQzLjQ2LDQzLjQ2LDAsMCwxLDEsOEMxNDQsODYuOSwxNDUuNTUsMTA3LjE4LDE0NS4yLDEyNy41NlpNNjEuMTMsMTA2LjFjNC4zNS0yLjM4LDguNTYtNC43LDEyLjgtN2E0LjIxLDQuMjEsMCwwLDEsNS41OC44OGMyLjMyLDIuNDgsNC44LDQuODMsNi45Myw3LjQ2LDIsMi40NiwxLjgsNC4xNi0uMzEsNi41Ni0xLjUxLDEuNzEtMy4xMywzLjM0LTQuNzUsNWE0LjMyLDQuMzIsMCwwLDEtNS4yNC44MWMtNC4yLTEuODMtNy45My00LjI0LTEwLjYzLTguMDdDNjQuMTksMTA5Ljg0LDYyLjY5LDEwOC4wOSw2MS4xMywxMDYuMVoiLz48L3N2Zz4=");
}
.valid input, .valid select {
  background-color: var(--mmo-color-white);
  color: var(--mmo-color-success);
}
.valid input[type=checkbox]:checked, .valid input[type=radio]:checked, .valid select[type=checkbox]:checked, .valid select[type=radio]:checked {
  border-color: var(--mmo-color-success);
}
.valid:focus-within .input:has(textarea, input:not([type=radio], [type=checkbox], [readonly], [disabled])) {
  box-shadow: 0 0 0 6px rgba(0, 166, 126, 0.2);
  outline-color: var(--mmo-color-success);
  outline-width: calc(0.25 * var(--mmo-size-border));
  outline-style: solid;
  border: 0;
}
.valid:hover .label, .valid:focus-within .label {
  color: var(--mmo-color-success);
}

.required .input > .validity:not(mmo-icon), .required mmo-icon .validity > span, .invalid .input > .validity:not(mmo-icon), .invalid mmo-icon .validity > span {
  display: block;
  padding: calc(0.5 * var(--mmo-size-padding));
  font-size: calc(0.75 * var(--mmo-size-font));
}

input.space-chars {
  box-shadow: none;
  border: none;
  font-family: monospace;
  letter-spacing: 5px;
  background: repeating-linear-gradient(to right, var(--mmo-color-surface) 0 1ch, transparent 1ch calc(1ch + 5px)) left bottom/99% 2px content-box no-repeat;
}
input.space-chars:focus {
  border: none;
  outline: none;
  background: repeating-linear-gradient(to right, var(--mmo-color-primary) 0 1ch, transparent 1ch calc(1ch + 5px)) left bottom/99% 2px content-box no-repeat;
}
.required input.space-chars:focus {
  background: repeating-linear-gradient(to right, var(--mmo-color-warning) 0 1ch, transparent 1ch calc(1ch + 5px)) left bottom/99% 2px content-box no-repeat;
}
.invalid input.space-chars:focus {
  background: repeating-linear-gradient(to right, var(--mmo-color-error) 0 1ch, transparent 1ch calc(1ch + 5px)) left bottom/99% 2px content-box no-repeat;
}
input.space-chars:read-only {
  background: var(--mmo-color-muted) repeating-linear-gradient(to right, var(--mmo-color-dark) 0 1ch, transparent 1ch calc(1ch + 5px)) left bottom/99% 2px content-box no-repeat;
  border: none;
}
input.one.space-chars {
  width: 3.4ch;
}
input.two.space-chars {
  width: 4.7ch;
}
input.five.space-chars {
  width: 9.3ch;
}
input.nine.space-chars {
  width: 15.5ch;
}
input.fourteen.space-chars {
  width: 23.5ch;
}
input.fifteen.space-chars {
  width: 25ch;
}

select {
  cursor: pointer;
  appearance: none;
  padding-right: calc(1.5 * var(--mmo-size-padding));
  padding-left: calc(0.5 * var(--mmo-size-padding));
  border-radius: calc(0.5 * var(--mmo-size-radius));
}
select:not([multiple]) {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3E%3Cpath fill='%23333' d='M0 2l4 4 4-4z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75em center;
  padding-right: 30px;
}
select option {
  cursor: pointer;
  font-weight: 500;
  color: var(--mmo-color-text);
}
select option:disabled {
  cursor: not-allowed;
}
select[multiple] {
  height: auto;
}

textarea {
  min-height: 100px;
  resize: vertical;
  padding-top: calc(0.25 * var(--mmo-size-padding));
  padding-bottom: calc(0.25 * var(--mmo-size-padding));
  padding-left: calc(0.5 * var(--mmo-size-padding));
  padding-right: calc(0.5 * var(--mmo-size-padding));
  border-width: calc(0.25 * var(--mmo-size-border));
  border-color: var(--mmo-color-border);
  border-style: solid;
}
textarea::placeholder {
  color: var(--mmo-color-muted);
}

input:not([type=checkbox], [type=radio], [type=range], [type=submit], [type=color]):read-only, textarea:read-only, input.readonly {
  background-color: var(--mmo-color-surface);
  color: #778B99;
  cursor: not-allowed;
  border-width: calc(0.25 * var(--mmo-size-border));
  border-color: var(--mmo-color-muted);
  border-style: solid;
  outline-color: var(--mmo-color-border);
  outline-width: 0;
  outline-style: solid;
  border: 0;
}

.helper {
  color: var(--mmo-color-primary);
}

.underline {
  border-bottom-width: calc(0.25 * var(--mmo-size-border));
  border-bottom-color: var(--mmo-color-primary);
  border-bottom-style: solid;
}

ol, ul {
  position: relative;
  padding-left: calc(1.5 * var(--mmo-size-padding));
}
ol ol, ul ol, ol ul, ul ul {
  margin-left: calc(0.5 * var(--mmo-size-margin));
  margin-top: calc(0.5 * var(--mmo-size-margin));
  margin-bottom: calc(0.5 * var(--mmo-size-margin));
  margin-right: 0;
}

ul.arrows-to, ul.arrows-from {
  list-style-type: none;
  position: relative;
  text-align: center;
  width: fit-content;
}
ul.arrows-to > *, ul.arrows-from > * {
  position: relative;
}

ul.arrows-from {
  padding-left: 40px;
}
ul.arrows-from:not(:empty):before {
  content: "";
  border-bottom-width: 3px;
  border-bottom-color: var(--mmo-color-primary);
  border-bottom-style: solid;
  position: absolute;
  display: block;
  left: 0px;
  top: calc(50% - 1px);
  width: 45px;
  height: 1px;
}
ul.arrows-from > * {
  padding-left: 15px;
}
ul.arrows-from > *:before {
  position: absolute;
  content: "⎬";
  font-weight: bold;
  left: 0px;
  top: calc(50% - 10px);
  color: var(--mmo-color-primary);
}
ul.arrows-from > *:first-child:not(:last-child):before {
  content: "⎧";
  top: 8px;
}
ul.arrows-from > *:last-child:not(:first-child):before {
  content: "⎩";
  top: auto;
  bottom: 8px;
}

ul.arrows-to {
  padding-right: 40px;
}
ul.arrows-to:after {
  content: "";
  border-bottom-width: 2px;
  border-bottom-color: var(--mmo-color-primary);
  border-bottom-style: solid;
  position: absolute;
  display: block;
  right: 0px;
  top: calc(50% - 1px);
  width: 45px;
  height: 1px;
}
ul.arrows-to > * {
  padding-right: 15px;
}
ul.arrows-to > *:after {
  position: absolute;
  content: "⎨";
  font-weight: bold;
  right: 0px;
  color: var(--mmo-color-primary);
}
ul.arrows-to > *:first-child:not(:last-child):after {
  content: "⎫";
  top: 8px;
}
ul.arrows-to > *:last-child:not(:first-child):after {
  content: "⎭";
  top: auto;
  bottom: 8px;
}

ol.tree, ul.tree, ol.tree ul, ul.tree ul {
  list-style: none outside;
  padding-left: 10px;
}
ol.tree summary, ul.tree summary {
  margin-bottom: 4px;
}
ol.tree summary::marker, ul.tree summary::marker {
  color: var(--mmo-color-border);
}
ol.tree details > ul, ul.tree details > ul {
  position: relative;
  margin-top: 0;
}
ol.tree details > ul:before, ul.tree details > ul:before {
  content: " ";
  position: absolute;
  top: 0;
  left: -3px;
  bottom: 0;
  border-left-width: 1px;
  border-left-color: var(--mmo-color-border);
  border-left-style: solid;
}
ol.tree details > ul li, ul.tree details > ul li {
  position: relative;
}
ol.tree details > ul li:not(:last-child), ul.tree details > ul li:not(:last-child) {
  margin-bottom: 4px;
}
ol.tree details > ul li:before, ul.tree details > ul li:before {
  content: " ";
  position: absolute;
  top: 50%;
  width: 10px;
  height: 1px;
  left: -12px;
  border-bottom-width: 1px;
  border-bottom-color: var(--mmo-color-border);
  border-bottom-style: solid;
}
ol.tree li:not(:has(details)), ul.tree li:not(:has(details)), ol.tree li:has(details) > details > summary, ul.tree li:has(details) > details > summary {
  border-top-right-radius: calc(1 * var(--mmo-size-radius));
  border-bottom-right-radius: calc(1 * var(--mmo-size-radius));
  padding: calc(0.25 * var(--mmo-size-padding));
  border-width: 1px;
  border-color: transparent;
  border-style: solid;
  cursor: pointer;
}
ol.tree li:not(:has(details)):hover, ul.tree li:not(:has(details)):hover, ol.tree li:has(details) > details > summary:hover, ul.tree li:has(details) > details > summary:hover {
  border-color: var(--mmo-color-secondary);
}
ol.tree li:not(:has(details)).selected, ul.tree li:not(:has(details)).selected, ol.tree li:has(details).selected > details > summary, ul.tree li:has(details).selected > details > summary {
  background-color: var(--mmo-color-primary);
}

dl.list {
  display: flex;
  flex-direction: column;
  overflow: auto;
  text-align: justify;
}
dl.list > div {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 5px;
}
dl.list > div:hover {
  background-color: var(--mmo-color-surface);
}
dl.list > div.selected {
  background-color: var(--mmo-color-primary);
}
dl.list dt {
  min-width: 80px;
  font-weight: bold;
}

ol.select, ul.select {
  height: auto;
  list-style: none outside;
  padding: 0;
}
ol.select > li, ul.select > li {
  cursor: pointer;
  padding: calc(0.25 * var(--mmo-size-padding));
}
ol.select > li:hover, ul.select > li:hover {
  background-color: var(--mmo-color-primary);
}

li {
  position: relative;
}

nav ul a:hover, .toc ul a:hover {
  text-decoration: underline;
}

ul.none {
  list-style: none outside;
  padding: 0;
}
.log {
  display: flex;
  flex-direction: row;
  align-items: initial;
  justify-content: initial;
  word-break: break-all;
  gap: calc(0.5 * var(--mmo-size-gap));
  padding: calc(0.5 * var(--mmo-size-padding));
  border-width: 1px;
  border-color: transparent;
  border-style: solid;
  background-color: #333;
  --mmo-color-text: #fff;
  color: var(--mmo-color-text);
  --mmo-color-icon: #fff;
}
.log:before {
  content: attr(data-num);
  font-size: 10px;
  width: 20px;
  text-align: center;
}
.log a {
  color: #77d31d;
}
.log:hover {
  border-color: #fff;
}
.log details {
  display: flex;
  flex-direction: column;
  align-items: initial;
  justify-content: initial;
}
.log summary {
  display: flex;
  flex-direction: row;
  align-items: initial;
  justify-content: initial;
  gap: calc(0.5 * var(--mmo-size-gap));
}
.log.emergency {
  color: #FF3333;
}
.log.alert {
  color: #FF6433;
}
.log.critical {
  color: #FFA133;
}
.log.error {
  color: #FF0000;
}
.log.warning {
  color: #FFD333;
}
.log.notice {
  background-color: #7676A7;
}
.log.info {
  color: #7676A7;
}
.log.debug {
  color: #aaa;
}

.trace {
  display: flex;
  flex-direction: row;
  align-items: initial;
  justify-content: initial;
  padding: 2px 5px 2px 15px;
  margin: 0;
}
.trace:before {
  content: attr(data-index) " ";
  margin-right: 5px;
}
.trace .file {
  margin-right: 15px;
}
.trace .file span {
  font-weight: bold;
}

@media only screen and (min-width: 481px) {
  .mobile-visible {
    display: none;
  }
}
@media only screen and (max-width: 480px) {
  .mobile-visible {
    display: block;
  }
  .mobile-hidden {
    display: none;
  }
  .mobile-wrap {
    flex-wrap: wrap;
  }
  h2, .h2 {
    word-wrap: break-word;
    hyphens: auto;
  }
}
@media print {
  body {
    print-color-adjust: exact;
    overflow: visible;
    counter-reset: page;
  }
  * {
    text-shadow: none !important;
    filter: none !important;
    -ms-filter: none !important;
    overflow: visible;
  }
  p a {
    color: red !important;
    text-decoration: underline;
  }
  p a:visited {
    color: black !important;
    text-decoration: underline !important;
  }
  p a[href]:after {
    content: " (" attr(href) ")";
  }
  abbr[title]:after {
    content: " (" attr(title) ")";
  }
  a[href^="javascript:"]:after, a[href^="#"]:after {
    content: "";
  }
  pre, blockquote {
    border-width: calc(0.25 * var(--mmo-size-border));
    border-color: #999;
    border-style: solid;
    page-break-inside: avoid;
  }
  thead {
    display: table-header-group;
  }
  tr, img {
    page-break-inside: avoid;
  }
  @page {
    margin: 0.5cm;
    @bottom-right {
      content: "Page " counter(page) " / " counter(pages);
    }
  }
  h2, h3 {
    page-break-after: avoid;
  }
  .sticky {
    position: relative;
    top: initial;
    left: initial;
  }
  .no-print {
    display: none;
  }
  /* Ensure elements are fully expanded */
  * {
    overflow: visible !important;
  }
  .print-break-after {
    page-break-after: always; /* Forces section to start on a new page */
  }
  .print-break-before {
    page-break-before: always; /* Forces section to start on a new page */
  }
}
.status-tag {
  position: absolute;
  right: -4px;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  line-height: 16px;
  font-size: 8px;
  font-weight: bold;
  text-align: center;
  border-width: 2px;
  border-color: var(--mmo-color-white);
  border-style: solid;
  background-color: var(--mmo-color-border);
  --mmo-color-text: var(--mmo-color-text);
  color: var(--mmo-color-text);
  --mmo-color-icon: var(--mmo-color-text);
  outline-color: var(--mmo-color-border);
  outline-width: 1px;
  outline-style: solid;
}
.status-tag:empty {
  display: none;
}

.status {
  display: inline-block;
  text-align: center;
  position: relative;
  outline-color: var(--mmo-color-border);
  outline-width: 1px;
  outline-style: solid;
  background-color: var(--mmo-color-border);
  --mmo-color-text: var(--mmo-color-text);
  color: var(--mmo-color-text);
  --mmo-color-icon: var(--mmo-color-text);
  border-radius: calc(1 * var(--mmo-size-radius));
  padding-left: calc(0.25 * var(--mmo-size-padding));
  padding-right: calc(0.25 * var(--mmo-size-padding));
  padding-top: calc(0.25 * var(--mmo-size-padding));
  padding-bottom: calc(0.25 * var(--mmo-size-padding));
  font-size: calc(0.75 * var(--mmo-size-font));
}

.status-tag.warning, .status.warning {
  --mmo-color-text: var(--mmo-color-white);
  --mmo-color-border: var(--mmo-color-warning);
}

.status-tag.error, .status.error {
  --mmo-color-text: var(--mmo-color-white);
  --mmo-color-border: var(--mmo-color-error);
}

.status-tag.success, .status.success {
  --mmo-color-text: var(--mmo-color-white);
  --mmo-color-border: var(--mmo-color-success);
}

table {
  position: relative;
  border-collapse: collapse;
  margin: 0 auto;
  font-variant-numeric: tabular-nums;
}

thead {
  background-color: var(--mmo-color-surface);
}
thead th {
  border-width: 0;
  border-color: var(--mmo-color-border);
  border-style: solid;
  text-align: center;
}

tbody th {
  text-align: left;
}

td, th {
  position: relative;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--mmo-color-text);
  border-bottom-width: calc(0.25 * var(--mmo-size-border));
  border-bottom-color: var(--mmo-color-light);
  border-bottom-style: solid;
  padding: calc(0.5 * var(--mmo-size-padding));
}
.text-center td, td.text-center, .text-center th, th.text-center {
  text-align: center;
}
.text-left td, td.text-left, .text-left th, th.text-left {
  text-align: left;
}
.text-right td, td.text-right, .text-right th, th.text-right {
  text-align: right;
}

td:not(:first-child) {
  border-left-width: calc(0.25 * var(--mmo-size-border));
  border-left-color: var(--mmo-color-light);
  border-left-style: solid;
}

tr:nth-child(even) {
  background-color: var(--mmo-color-emphasis);
}

tbody tr:hover {
  background-color: var(--mmo-color-emphasis);
  --mmo-color-text: var(--mmo-color-dark);
  color: var(--mmo-color-text);
  --mmo-color-icon: var(--mmo-color-dark);
}
tbody tr.selected {
  border-width: calc(1.5 * var(--mmo-size-border));
  border-color: rgba(140, 201, 255, 0.85);
  border-style: solid;
}
tbody tr.selected {
  background-color: var(--mmo-color-info);
  --mmo-color-text: var(--mmo-color-dark);
  color: var(--mmo-color-text);
  --mmo-color-icon: var(--mmo-color-dark);
}
tbody tr.error {
  background-color: #F98499;
  --mmo-color-text: var(--mmo-color-dark);
  color: var(--mmo-color-text);
  --mmo-color-icon: var(--mmo-color-dark);
}
tbody tr.error:hover {
  background-color: #FF5F7B;
  --mmo-color-text: var(--mmo-color-dark);
  color: var(--mmo-color-text);
  --mmo-color-icon: var(--mmo-color-dark);
}
tbody tr.archive {
  --mmo-color-text: var(--mmo-color-muted);
}
tbody tr td.read-only {
  cursor: not-allowed;
}
tbody tr .toolbar {
  display: table-cell;
}
tbody tr .toolbar > * {
  display: table-cell;
  height: 100%;
  padding-left: calc(0.25 * var(--mmo-size-padding));
  padding-right: calc(0.25 * var(--mmo-size-padding));
  white-space: nowrap;
}

table.minimal {
  font-size: 80%;
}
table.minimal thead {
  background-color: transparent;
}
table.minimal td, table.minimal th {
  border-width: 1px;
  border-color: var(--mmo-color-border);
  border-style: solid;
}
table.minimal p {
  margin: 0;
}

table.compact {
  font-size: 80%;
  line-height: 80%;
}
table.compact td, table.compact th {
  border-width: 1px;
  padding: calc(0.25 * var(--mmo-size-padding));
}
table.compact tr.selected, table.compact tr.error {
  border-width: 2px;
}

:root {
  --gap: 20px;
  --container-width: 1160px;
  --menu-padding-h: 80px;
}

mmo-app {
  background: #f8fbfd;
}

blockquote {
  margin-top: calc(3 * var(--mmo-size-margin));
  background-color: var(--mmo-color-surface);
  border-color: #5A5C81;
  --mmo-color-text: var(--mmo-color-text);
  color: var(--mmo-color-text);
  border-radius: 1rem;
}
blockquote .title {
  --mmo-color-text: #5A5C81;
  color: var(--mmo-color-text);
  font-weight: bold;
}

article {
  padding-top: 80px;
}
article .container {
  padding-bottom: 0;
}
article .container .content {
  padding-left: calc(3 * var(--mmo-size-padding));
  padding-right: calc(3 * var(--mmo-size-padding));
  padding-top: calc(3 * var(--mmo-size-padding));
}
article .container .content > .date {
  --mmo-color-text: #AAB3BA;
  color: var(--mmo-color-text);
}
article .container > img {
  width: 100%;
  max-height: 400px;
  object-fit: cover;
  border-radius: calc(1 * var(--mmo-size-radius));
}

mmo-accordion mmo-icon {
  align-content: center;
  padding-left: 1rem;
  --mmo-color-icon: var(--mmo-color-text);
}

a:not([href^=mailto]) {
  text-decoration: none;
  user-select: none;
}

.gap-s {
  gap: calc(0.5 * var(--mmo-size-gap));
}

.gap-xl {
  gap: calc(2 * var(--mmo-size-gap));
}

h1 {
  font-size: calc(2.4 * var(--mmo-size-font));
  font-weight: bold;
}
h1 span {
  font-weight: bold;
}

h2 {
  font-weight: bold;
  font-size: calc(2.4 * var(--mmo-size-font));
  margin-bottom: calc(2 * var(--mmo-size-margin));
}

h3:has(+ ul) {
  margin-bottom: 0;
}
h3 + ul {
  margin-top: 0;
}

h4 {
  font-size: calc(1 * var(--mmo-size-font));
  font-weight: bold;
}

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

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

.border-secondary {
  border-width: calc(0.25 * var(--mmo-size-border));
  border-color: var(--mmo-color-secondary);
  border-style: solid;
}

.border-radius-l {
  border-radius: calc(1.5 * var(--mmo-size-radius));
}

.padding-m {
  padding: calc(1 * var(--mmo-size-padding));
}

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

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

.section {
  margin-bottom: calc(2 * var(--mmo-size-margin));
}

.row-gap-xl {
  row-gap: calc(2 * var(--mmo-size-gap));
}

.container {
  width: 100%;
  max-width: var(--container-width);
  align-self: center;
  padding-top: calc(3 * var(--mmo-size-padding));
  padding-bottom: calc(3 * var(--mmo-size-padding));
}
.container .gap {
  gap: var(--gap);
}
.container h2 + h3 {
  margin-bottom: calc(2 * var(--mmo-size-margin));
}

.flex-1-3 {
  flex: 1 1 calc(33.33% - var(--gap));
  width: initial;
}

.flex-1-4 {
  flex: 1 1 calc(25% - var(--gap));
  width: initial;
}

mmo-icon.boxed {
  width: 46px;
  height: 46px;
  padding: 12px; /* no padding matching in the actual theme */
  border-radius: calc(1 * var(--mmo-size-radius));
  border-width: calc(0.5 * var(--mmo-size-border));
  border-color: var(--mmo-color-white);
  border-style: solid;
  background-color: #F0F6F9;
  /* M box shadow oblic */
  box-shadow: 8px 8px 16px 0px rgba(85, 175, 255, 0.07), 4px 4px 8px 0px rgba(85, 175, 255, 0.07), 2px 2px 4px 0px rgba(85, 175, 255, 0.07), 1px 1px 2px 0px rgba(85, 175, 255, 0.07);
}

.no-margin {
  margin: 0;
}

.no-margin-titles h1,
.no-margin-titles h2,
.no-margin-titles h3,
.no-margin-titles h4,
.no-margin-titles h5,
.no-margin-titles h6 {
  margin: 0;
}

.bold {
  font-weight: bold;
}

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

.mb-m {
  margin-bottom: calc(1 * var(--mmo-size-margin));
}

.mt-s {
  margin-top: calc(0.5 * var(--mmo-size-margin));
}

.mt-m {
  margin-top: calc(1 * var(--mmo-size-margin));
}

.mt-l {
  margin-top: calc(1.5 * var(--mmo-size-margin));
}

.mt-xl {
  margin-top: calc(2 * var(--mmo-size-margin));
}

.mt-xxl {
  margin-top: calc(3 * var(--mmo-size-margin));
}

.font-m {
  font-size: calc(1 * var(--mmo-size-font));
}

.font-l {
  font-size: calc(1.25 * var(--mmo-size-font));
}

.font-xl {
  font-size: calc(1.5 * var(--mmo-size-font));
}

.font-xxl {
  font-size: 30px;
}

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

.float-right {
  float: right;
}

.shadow-highlight-img {
  box-shadow: 0px 0px 64px 0px rgba(85, 175, 255, 0.25);
}

.shadow {
  /* big box shadow oblic */
  box-shadow: 32px 32px 64px 0px rgba(85, 175, 255, 0.25), 16px 16px 32px 0px rgba(85, 175, 255, 0.07), 8px 8px 16px 0px rgba(85, 175, 255, 0.07), 4px 4px 8px 0px rgba(85, 175, 255, 0.07), 2px 2px 4px 0px rgba(85, 175, 255, 0.07), 1px 1px 2px 0px rgba(85, 175, 255, 0.07);
}

.drop-shadow {
  filter: drop-shadow(20px 6px 5px rgba(68, 68, 221, 0.2));
}

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

ul {
  margin: 0;
  line-height: 26px;
  padding-left: calc(1 * var(--mmo-size-padding));
}
ul li {
  list-style: none;
}
ul li::before {
  content: "•";
  font-size: calc(1.5 * var(--mmo-size-font));
  --mmo-color-text: var(--mmo-color-text);
  color: var(--mmo-color-text);
  margin-right: calc(0.5 * var(--mmo-size-margin));
}
ul.bullet-text li::before {
  --mmo-color-text: var(--mmo-color-text);
  color: var(--mmo-color-text);
}

.ul-no-style > li::before {
  display: none;
}
.ul-no-style ul {
  margin-left: 0;
  margin-top: 0;
}

.primary {
  --mmo-color-icon: var(--mmo-color-primary);
  color: var(--mmo-color-primary);
}

.demo {
  --mmo-color-icon: var(--mmo-color-demo);
  color: var(--mmo-color-demo);
}

.success {
  --mmo-color-icon: var(--mmo-color-success);
  color: var(--mmo-color-success);
}

.warning {
  --mmo-color-icon: var(--mmo-color-warning);
  color: var(--mmo-color-warning);
}

.event {
  --mmo-color-icon: var(--mmo-color-event);
  color: var(--mmo-color-event);
}

.yellows-400 {
  --mmo-color-icon: #FFC700;
  color: #FFC700;
}

.greys-600 {
  --mmo-color-icon: #778B99;
  color: #778B99;
}

.greens-600 {
  --mmo-color-icon: #008161;
  color: #008161;
}

.blacks-100 {
  --mmo-color-icon: #5A5C81;
  color: #5A5C81;
}

.title {
  --mmo-color-icon: var(--mmo-color-title);
  color: var(--mmo-color-title);
}

.bg-lights-400 {
  background-color: #F2F7FB;
}

fieldset.horizontal > label {
  width: 100%;
}

p {
  line-height: 24px;
}

#actualites {
  padding-bottom: calc(3 * var(--mmo-size-padding));
}
#actualites .item > span {
  font-weight: 400;
}
#actualites .item > a mmo-icon {
  line-height: 1;
}
#actualites .item > a mmo-icon:hover {
  --mmo-color-icon: var(--mmo-color-event);
}

.price {
  background-color: var(--mmo-color-layout);
  --mmo-color-text: var(--mmo-color-primary);
  color: var(--mmo-color-text);
  padding-top: calc(0.5 * var(--mmo-size-padding));
  padding-bottom: calc(0.5 * var(--mmo-size-padding));
  padding-left: calc(1 * var(--mmo-size-padding));
  padding-right: calc(1 * var(--mmo-size-padding));
  border-radius: calc(2 * var(--mmo-size-radius));
  font-weight: 900;
  align-content: center;
  box-shadow: 0px 0px 20px 0px rgba(0, 133, 255, 0.25);
}

#nos-solutions > div:first-child {
  margin-bottom: calc(1 * var(--mmo-size-margin));
  margin-top: calc(1 * var(--mmo-size-margin));
}

.solution-item {
  width: 100%;
  background-color: var(--mmo-color-white);
  border-width: calc(0.25 * var(--mmo-size-border));
  border-color: var(--mmo-color-white);
  border-style: solid;
}
.solution-item a {
  width: inherit;
}
.solution-item .option {
  flex: 1;
  text-align: left;
  align-items: center;
  gap: calc(0.5 * var(--mmo-size-gap));
  padding: calc(0.5 * var(--mmo-size-padding));
  border-width: calc(0.25 * var(--mmo-size-border));
  border-color: var(--mmo-color-border);
  border-style: solid;
  border-radius: calc(1 * var(--mmo-size-radius));
}
.solution-item .option > span {
  --mmo-color-text: var(--mmo-color-title);
  color: var(--mmo-color-text);
}
.solution-item .title {
  flex: 2;
  align-items: flex-start;
  justify-content: center;
  gap: calc(0.25 * var(--mmo-size-gap));
}
.solution-item .title > span {
  font-size: calc(0.75 * var(--mmo-size-font));
}
.solution-item .title h3 {
  font-weight: bold;
}
.solution-item:hover {
  background-color: #F0F6F9;
  border-color: #C7D2D9;
}

#content {
  background: #f8fbfd;
}

.show-more {
  --mmo-color-icon: var(--mmo-color-primary);
  --mmo-color-text: var(--mmo-color-primary);
}
.show-more mmo-icon {
  margin-right: calc(0.25 * var(--mmo-size-margin));
}

.highlight {
  background: var(--mmo-color-surface);
  --mmo-color-text: var(--mmo-color-text);
  color: var(--mmo-color-text);
  padding-top: calc(0.25 * var(--mmo-size-padding));
  padding-bottom: calc(0.25 * var(--mmo-size-padding));
  padding-left: calc(1 * var(--mmo-size-padding));
  padding-right: calc(1 * var(--mmo-size-padding));
  border-radius: calc(2 * var(--mmo-size-radius));
  text-transform: uppercase;
}

.tag {
  background: none;
}
.tag button {
  font-weight: 500;
  padding-top: calc(0.25 * var(--mmo-size-padding));
  padding-bottom: calc(0.25 * var(--mmo-size-padding));
  padding-left: calc(1 * var(--mmo-size-padding));
  padding-right: calc(1 * var(--mmo-size-padding));
  --mmo-color-text: var(--mmo-color-text);
  color: var(--mmo-color-text);
  border-width: calc(0.25 * var(--mmo-size-border));
  border-color: var(--mmo-color-text);
  border-style: solid;
  border-radius: calc(0.5 * var(--mmo-size-radius));
  background-color: transparent;
  text-transform: uppercase;
  font-size: calc(0.75 * var(--mmo-size-font));
}
.tag.active {
  --mmo-color-text: var(--mmo-color-white);
  color: var(--mmo-color-text);
}
.tag.active button {
  background-color: var(--mmo-color-primary);
  border-color: var(--mmo-color-primary);
}
.tag:not(.active):not(:hover) {
  --mmo-color-text: #5A5C81;
  color: var(--mmo-color-text);
}
.tag:not(.active):hover {
  --mmo-color-text: var(--mmo-color-primary);
  color: var(--mmo-color-text);
}
.tag:not(.active):hover button {
  background-color: var(--mmo-color-white);
  border-color: var(--mmo-color-primary);
}

.hero {
  background-color: var(--mmo-color-surface);
  overflow: hidden;
}
.hero .container {
  display: flex;
  align-items: center;
  background-position: left bottom;
  min-height: 710px;
}
.hero .container > div {
  position: relative;
}
.hero .container:before {
  width: 100%;
  height: 100%;
  content: " ";
  bottom: 0;
  right: 0;
  position: absolute;
  background-repeat: no-repeat;
  background-position: right bottom;
}

mmo-icon[slot=title] {
  display: flex;
  line-height: 1.3;
  align-items: center;
  text-align: left;
}

#footer {
  margin: calc(1 * var(--mmo-size-margin));
  border-radius: calc(1.5 * var(--mmo-size-radius));
  background-color: #5A5C81;
  --mmo-color-text: var(--mmo-color-white);
  color: var(--mmo-color-text);
  --mmo-color-icon: var(--mmo-color-white);
  --mmo-color-icon: var(--mmo-color-white);
}
#footer a,
#footer h3 {
  --mmo-color-text: var(--mmo-color-white);
  color: var(--mmo-color-text);
}
#footer h3 {
  font-weight: 700;
}
#footer .infos {
  gap: calc(1.5 * var(--mmo-size-gap));
}
#footer .links a {
  text-underline: none;
  line-height: 24px;
  font-size: 14px;
}

.demo-button {
  display: flex;
}
.demo-button button {
  display: block;
  border-radius: calc(3 * var(--mmo-size-radius));
}
.demo-button button span:first-child {
  font-size: calc(0.75 * var(--mmo-size-font));
}
.demo-button button span:last-child {
  font-style: italic;
}

#menu {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  justify-content: space-between;
  z-index: 1000;
  border-radius: calc(1.5 * var(--mmo-size-radius));
  background-color: var(--mmo-color-white);
  gap: calc(1.5 * var(--mmo-size-gap));
  width: calc(var(--container-width) + 2 * var(--menu-padding-h));
  height: 75px;
  line-height: 75px;
  padding: 16px var(--menu-padding-h);
  flex-shrink: 0;
  box-shadow: 0px 0px 32px 0px rgba(13, 19, 72, 0.1);
}
#menu > svg {
  display: none;
}
#menu a {
  line-height: 0;
}
#menu .items {
  height: 100%;
}
#menu .items ul {
  align-content: center;
}
#menu .items ul li {
  position: relative;
}
#menu .items ul li:after {
  position: absolute;
  left: 0;
  top: 100%;
  width: 100%;
  height: 20px;
  background: transparent;
}
#menu .items ul li:hover::after {
  content: "";
}
#menu .items ul li:hover ul {
  display: block;
}
#menu .items ul li ul {
  display: none;
  border-radius: calc(1 * var(--mmo-size-radius));
  background-color: var(--mmo-color-white);
  position: absolute;
  padding-top: calc(1 * var(--mmo-size-padding));
  padding-bottom: calc(1 * var(--mmo-size-padding));
  padding-left: calc(0.5 * var(--mmo-size-padding));
  padding-right: calc(0.5 * var(--mmo-size-padding));
  left: 0;
  top: calc(100% + 20px);
  min-width: 311px;
  margin: 0;
  box-shadow: 0px 0px 20px 0px rgba(0, 73, 138, 0.25);
}
#menu .items ul li ul li {
  padding-left: 6px;
}
#menu .items ul li ul li:not(:last-child) {
  margin-bottom: 16px;
}
#menu .items ul li ul a {
  font-weight: 400;
}
#menu .items li a {
  font-weight: 700;
  --mmo-color-text: var(--mmo-color-text);
  color: var(--mmo-color-text);
}
#menu .items li:before {
  display: none;
}
#menu li:has(ul):hover > a,
#menu li > a:hover,
#menu li > a.active,
#menu li:has(.active) > a {
  --mmo-color-text: var(--mmo-color-primary);
  color: var(--mmo-color-text);
}

#services-list {
  padding-left: 0;
}
#services-list h3 {
  font-weight: bold;
  margin: 0;
}
#services-list h3,
#services-list li {
  line-height: normal;
  font-size: 14px;
}
#services-list li {
  text-align: center;
  list-style: none;
}
#services-list li:before {
  display: none;
}
#services-list .hflex {
  padding-left: 0;
}
#services-list > ul {
  margin: 0;
}
#services-list > ul:nth-child(odd) li {
  background-color: var(--mmo-color-light);
}
#services-list > ul h3 {
  background-color: var(--mmo-color-surface);
}
#services-list > ul > * {
  flex: 1 1 calc(20% - var(--gap));
  align-content: center;
  min-height: 70px;
  padding-left: calc(1 * var(--mmo-size-padding));
  padding-right: calc(1 * var(--mmo-size-padding));
  padding-top: calc(0.5 * var(--mmo-size-padding));
  padding-bottom: calc(0.5 * var(--mmo-size-padding));
}

#tabs .labels {
  background-color: var(--mmo-color-surface);
  padding: calc(0.5 * var(--mmo-size-padding));
  gap: calc(1.5 * var(--mmo-size-gap));
}
#tabs .labels label {
  user-select: none;
  --mmo-color-icon: var(--mmo-color-text);
  border-radius: calc(0.5 * var(--mmo-size-radius));
  padding: calc(0.5 * var(--mmo-size-padding));
}
#tabs .labels label mmo-icon,
#tabs .labels label span {
  align-content: center;
  line-height: 1;
}
#tabs .labels label.active {
  background-color: var(--mmo-color-white);
  --mmo-color-text: var(--mmo-color-primary);
  color: var(--mmo-color-text);
  --mmo-color-icon: var(--mmo-color-primary);
  border-width: calc(0.25 * var(--mmo-size-border));
  border-color: var(--mmo-color-primary);
  border-style: solid;
}
#tabs .labels label.active mmo-icon {
  --mmo-color-icon: var(--mmo-color-primary);
}
#tabs .labels label mmo-icon {
  margin-right: calc(0.5 * var(--mmo-size-margin));
}
#tabs .content > div {
  display: none;
  margin-top: 45px;
}
#tabs .content > div h2 {
  font-size: calc(1.5 * var(--mmo-size-font));
  margin: 0;
  margin-bottom: calc(1 * var(--mmo-size-margin));
}
#tabs .content input:checked + div {
  display: block;
}
#tabs input {
  display: none;
}

#clients-usage .flex-1-2:last-child {
  padding-top: 100px;
}

#cards {
  justify-content: space-between;
  gap: 20px;
}
#cards > div {
  padding: 28px;
  border-radius: 16px;
  --mmo-color-text: var(--mmo-color-white);
  color: var(--mmo-color-text);
  font-size: calc(1.5 * var(--mmo-size-font));
  padding-left: 15px;
  padding-right: 15px;
  padding-top: 76px;
}
#cards > div .highlighted {
  font-size: 40px;
}
#cards > div > img {
  margin-bottom: 55px;
  width: 150px;
  height: 150px;
  align-self: center;
}
#cards > div:is(:empty) {
  display: none;
}
#cards > div:nth-child(even) {
  background-color: var(--mmo-color-surface);
}
#cards > div:nth-child(even) span {
  --mmo-color-text: var(--mmo-color-primary);
  color: var(--mmo-color-text);
}
#cards > div:nth-child(odd) {
  background-color: #778B99;
}
#cards > div:nth-child(odd) span {
  --mmo-color-text: var(--mmo-color-white);
  color: var(--mmo-color-text);
}

.circle-text text {
  fill: #00498A;
  font-weight: bold;
}

.offer {
  display: inline-block;
  border-radius: 20px;
  padding-top: calc(0.5 * var(--mmo-size-padding));
  padding-bottom: calc(0.5 * var(--mmo-size-padding));
  padding-left: calc(1.5 * var(--mmo-size-padding));
  padding-right: calc(1.5 * var(--mmo-size-padding));
  --mmo-color-text: var(--mmo-color-primary);
  color: var(--mmo-color-text);
  font-size: calc(1.5 * var(--mmo-size-font));
  background-color: var(--mmo-color-white);
  /* big box shadow oblic */
  box-shadow: 32px 32px 64px 0px rgba(85, 175, 255, 0.25), 16px 16px 32px 0px rgba(85, 175, 255, 0.07), 8px 8px 16px 0px rgba(85, 175, 255, 0.07), 4px 4px 8px 0px rgba(85, 175, 255, 0.07), 2px 2px 4px 0px rgba(85, 175, 255, 0.07), 1px 1px 2px 0px rgba(85, 175, 255, 0.07);
}

.mobile-visible {
  display: none;
}

:root {
  --mobile-padding: 20px;
}

@media (max-width: 1024px) {
  #menu {
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: auto;
    transform: initial;
    flex-wrap: wrap;
    flex: 1 1 50%;
    padding: calc(1 * var(--mmo-size-padding));
    align-items: center;
    row-gap: calc(1 * var(--mmo-size-gap));
    border-radius: 0;
  }
  #menu .demo-button {
    display: none;
  }
  #menu .demo-button {
    width: 100%;
    justify-content: center;
  }
  #menu > svg {
    display: block;
    cursor: pointer;
  }
  #menu > svg.active rect:not(:first-child) {
    fill: #0D1348;
  }
  #menu > svg.active + .items {
    display: block;
  }
  #menu .items {
    display: none;
    width: 100%;
  }
  #menu .items > ul {
    padding-left: 0;
  }
  #menu .items ul li ul {
    background: transparent;
    position: initial;
    box-shadow: none;
    padding-left: 0;
  }
  #menu .items ul li ul li:not(:last-child) {
    margin-bottom: calc(0.5 * var(--mmo-size-margin));
  }
}
@media (max-width: 768px) {
  .mt-xxl {
    margin-top: 0;
  }
  .section {
    margin-bottom: calc(1 * var(--mmo-size-margin));
  }
  h1 {
    font-size: 30px;
  }
  h2 {
    font-size: calc(1.5 * var(--mmo-size-font));
    margin-bottom: calc(1 * var(--mmo-size-margin));
  }
  .font-xxl {
    font-size: calc(1.25 * var(--mmo-size-font));
  }
  h3 {
    margin: 0;
  }
  .mt-xl {
    margin-top: calc(0.25 * var(--mmo-size-margin));
  }
  .row-gap-xl {
    row-gap: calc(1 * var(--mmo-size-gap));
  }
  .hflex {
    gap: calc(1 * var(--mmo-size-gap));
    flex-wrap: wrap;
  }
  #footer-section {
    margin-top: calc(1.5 * var(--mmo-size-margin));
  }
  .covered-hero .container:before {
    display: none;
  }
  .covered-hero h1 {
    padding: calc(1 * var(--mmo-size-padding));
    background-size: cover;
    display: flex;
    align-items: flex-end;
    --mmo-color-text: var(--mmo-color-white);
    color: var(--mmo-color-text);
    min-height: 548px;
  }
  .covered-hero h1 span {
    font-weight: bold;
  }
  .covered-hero h1 br {
    display: none;
  }
  .covered-hero .hflex {
    flex-wrap: wrap;
  }
  #tabs .content input:checked + div {
    display: flex;
  }
  #tabs .content > div {
    padding-top: calc(1 * var(--mmo-size-padding));
    flex-direction: column;
    margin-top: 0;
  }
  #tabs .content > div h2 {
    order: -1;
  }
  #tabs .content > div img {
    order: 0;
  }
  #tabs .labels {
    flex-direction: column;
    gap: calc(1 * var(--mmo-size-gap));
  }
  #tabs .labels .hflex {
    gap: 0;
  }
  fieldset.horizontal {
    flex-direction: column;
  }
  #content {
    padding-top: 95px;
  }
  #content #solutions {
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0;
    row-gap: calc(1 * var(--mmo-size-gap));
  }
  #content #solutions a {
    width: 50%;
  }
  #content #solutions a button {
    width: 100%;
  }
  #content .container {
    padding-top: calc(1 * var(--mmo-size-padding));
    padding-bottom: calc(1 * var(--mmo-size-padding));
    padding-left: var(--mobile-padding);
    padding-right: var(--mobile-padding);
  }
  #content .tag button {
    font-size: 10px;
  }
  #content .home-hero {
    background: transparent;
    min-height: initial;
  }
  #content .home-hero div.justify-center {
    padding-left: var(--mobile-padding);
    padding-right: var(--mobile-padding);
  }
  #content .home-hero img {
    margin-left: var(--mobile-padding);
    margin-right: var(--mobile-padding);
  }
  #content .hero {
    width: 100%;
    padding-top: 0;
  }
  #content .hero .highlight {
    display: none;
  }
  body:not(:has(.home-hero)) #content {
    padding-top: 130px;
  }
  body:not(:has(.home-hero)) .hero:after {
    display: none;
  }
  body:not(:has(.home-hero)) .hero .container {
    min-height: initial;
  }
  body:not(:has(.home-hero)) .hero .container .flex-1-2 {
    width: 100%;
  }
  body:not(:has(.home-hero)) #menu {
    background-color: var(--mmo-color-surface);
  }
  .demo-button button {
    line-height: 26px;
  }
  .section .demo-button {
    text-align: center;
  }
  .section .demo-button button {
    display: inline-block;
    border-radius: calc(3 * var(--mmo-size-radius));
  }
  #cards {
    justify-content: center;
    padding-left: calc(3 * var(--mmo-size-padding));
    padding-right: calc(3 * var(--mmo-size-padding));
  }
  #cards > div {
    padding-top: var(--mobile-padding);
    padding-bottom: var(--mobile-padding);
  }
  #cards > div > img {
    margin-bottom: var(--mobile-padding);
  }
  #services-list {
    padding-left: 0;
  }
  #services-list ul {
    padding-left: 0;
    margin-bottom: calc(0.25 * var(--mmo-size-margin));
  }
  #services-list .hflex {
    flex-direction: column;
    gap: calc(0.25 * var(--mmo-size-gap));
  }
  #services-list .hflex li {
    text-align: left;
  }
  .gap-xl {
    gap: calc(1.5 * var(--mmo-size-gap));
  }
  #logo-oviepro-onelaw {
    margin-top: calc(1 * var(--mmo-size-margin));
  }
  #clients-usage {
    margin-bottom: calc(1 * var(--mmo-size-margin));
    padding-bottom: calc(1 * var(--mmo-size-padding));
    flex-direction: column;
  }
  #clients-usage .flex-1-2 {
    width: 100%;
    display: flex;
  }
  #clients-usage .flex-1-2:last-child {
    padding-top: 0;
  }
  #clients-usage .flex-1-2:last-child img {
    order: 0;
  }
  #clients-usage .flex-1-2:last-child h3 {
    order: 1;
  }
  #clients-usage .flex-1-2:last-child span {
    order: 2;
  }
  #nos-solutions {
    gap: var(--mobile-padding);
  }
  #nos-solutions > div:first-child {
    margin-top: 0;
    flex-direction: column;
    align-items: initial;
  }
  #nos-solutions .title {
    align-items: center;
  }
  #nos-solutions .solution-item a {
    flex-direction: column;
    pointer-events: none;
  }
  #actualites h3 {
    margin-top: calc(0.5 * var(--mmo-size-margin));
    margin-bottom: calc(0.5 * var(--mmo-size-margin));
    font-size: calc(1 * var(--mmo-size-font));
  }
  #footer {
    padding: calc(1.5 * var(--mmo-size-padding));
  }
  #footer .hflex {
    row-gap: calc(1 * var(--mmo-size-gap));
    flex-direction: column;
  }
  .mobile-visible {
    display: block;
  }
}
@media (min-width: 1025px) and (max-width: 1350px) {
  #menu {
    width: calc(100% - 40px);
    padding-left: 20px;
    padding-right: 20px;
  }
}
@media (min-width: 768px) and (max-width: 1350px) {
  :root {
    --gap: 20px;
  }
  .container {
    padding-left: var(--gap);
    padding-right: var(--gap);
  }
  .covered-hero {
    padding-top: 50px;
  }
  .price {
    padding: 7px;
  }
  .mt-xl {
    margin-top: var(--gap);
  }
  .flex-1-3 {
    flex-wrap: wrap;
  }
}
@media (max-width: 1350px) {
  h1 {
    font-size: 2.3rem;
  }
  h2, .h2 {
    font-size: 1.2rem;
  }
  h3, .h3 {
    font-size: 1rem;
  }
  article .container .content {
    padding: 0;
  }
  article#content > .container {
    padding-left: 0;
    padding-right: 0;
  }
}
@media (max-width: 1700px) {
  .hero:after {
    background-size: 50vw;
  }
}
@media (min-width: 768px) and (max-width: 1080px) {
  .hero .container:before {
    background-size: 50vw;
  }
  .solution-item {
    font-size: 10px;
  }
  .solution-item .title {
    text-align: left;
    flex: 1;
  }
  #services-list > ul h3 {
    font-size: 12px;
  }
  #tarifs .hflex {
    flex-direction: column;
  }
  #tarifs .mt-xl {
    margin: 0;
  }
  #tarifs .price {
    align-self: start;
  }
}
@media (min-width: 2560px) {
  .home-hero {
    min-height: 1000px !important;
  }
}
@media print {
  body {
    width: 100%;
    height: auto;
  }
  /* Ensure elements are fully expanded */
  * {
    overflow: visible !important;
    height: auto !important;
  }
  /* Hide unnecessary elements */
  .no-print {
    display: none !important;
  }
  .print-pt {
    padding-top: 120px !important;
  }
  .print-mt {
    margin-top: 120px !important;
  }
  .print-break-after {
    page-break-after: always; /* Forces section to start on a new page */
  }
  .print-break-before {
    page-break-before: always; /* Forces section to start on a new page */
  }
}
@media print {
  div:not(.card-item) {
    background-color: white !important;
  }
  body, a {
    font-size: 12px !important;
  }
  body, p {
    --mmo-color-text: var(--mmo-color-text);
    color: var(--mmo-color-text);
  }
  #cards > div {
    padding-top: 20px !important;
    padding-bottom: 20px !important;
    font-size: 18px;
  }
  #cards > div .highlighted {
    font-size: 23px;
  }
  #cards > div > img {
    margin-bottom: 20px;
  }
  .hero {
    padding-left: 10px;
    padding-right: 10px;
  }
  .hero.home-hero {
    background-size: contain;
  }
  .container {
    padding: 0;
    padding-left: 20px;
    padding-right: 20px;
  }
  #menu {
    padding-top: 30px;
    padding-bottom: 30px;
    background: transparent;
    border: 0;
    box-shadow: none;
  }
  #menu > * {
    display: none;
  }
  #menu > a:not(.demo-button) {
    display: block;
    margin-left: 10px;
  }
  #btn-console, #copyrights {
    display: none !important;
  }
  .section {
    padding: 0;
  }
  .cart-item {
    padding: 0 !important;
  }
  #footer {
    display: inline-flex;
    width: 100%;
    margin: 0;
    padding-bottom: 0;
    --mmo-color-text: var(--mmo-color-text);
    color: var(--mmo-color-text);
  }
  #footer img {
    display: none;
  }
  #footer h3, #footer a {
    color: inherit;
  }
  #footer mmo-icon {
    --mmo-color-icon: var(--mmo-color-text);
  }
  .solution-item a {
    gap: 0 !important;
  }
  .solution-item .hflex {
    margin-left: 10px;
  }
  #content .hero {
    min-height: 100vh;
    justify-content: center;
    align-items: center;
    background-position: bottom;
  }
  #content .hero .hflex.font-m {
    flex-direction: column;
    margin-bottom: 30px;
  }
  #content .hero:not(.home-hero) {
    justify-content: end;
    align-items: end;
  }
  #content .hero:not(.home-hero) .container {
    background-image: none !important;
  }
  #footer {
    gap: 0;
  }
  .section:not(.no-print) {
    padding-top: 50px;
  }
  #tabs .content > div {
    display: block !important;
  }
  * {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  #content p a {
    color: var(--mmo-color-primary) !important;
    font-weight: bold;
  }
  #content p a::after {
    --mmo-color-text: var(--mmo-color-primary);
    color: var(--mmo-color-text);
    font-weight: normal;
  }
}

/*# sourceMappingURL=mmo.client.css.map */