luda/dist/css/luda-default.css

A library helps to build cross-framework UI components.

/*! 
* * Luda 0.3.3 | Theme default | https://oatw.github.io/luda
* * Copyright 2019 - 2020 Oatw
* * MIT license | http://opensource.org/licenses/MIT
* */
:root {
  --baseline: 1rem;
  --spacing-tiny: 0.5rem;
  --spacing-small: 1rem;
  --spacing-medium: 2rem;
  --spacing-large: 4rem;
  --primary: #fa73a0;
  --secondary: #8f8f8f;
  --dark: #1f1f1f;
  --light: white;
  --danger: #d12626;
  --muted: #b8b8b8;
  --main: #383838;
  --bc-primary: #fa73a0;
  --bc-secondary: #dbdbdb;
  --bc-dark: #383838;
  --bc-light: white;
  --bc-danger: #d12626;
  --bc-muted: #f7f7f7;
  --bc-main: white;
}

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

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

a:active,
label:active {
  background-color: transparent;
}

html {
  font-size: 12px;
  word-break: break-word;
  cursor: default;
  font-family: "Helvetica Neue", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  text-rendering: optimizeLegibility;
  text-underline-position: under;
  background: #404040;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}

@supports (-webkit-overflow-scrolling: touch) {
  html {
    cursor: pointer;
  }
}
@-moz-document url-prefix() {
  html {
    color: transparent;
  }
}
body {
  min-height: 100vh;
  margin: 0;
  font-size: 1.3333333333rem;
  line-height: 2rem;
  color: #383838;
  background: white;
}

h1 {
  margin: 0;
  font-size: 2.4166666667rem;
}

h2,
h3,
h4,
h5,
h6,
p,
blockquote,
figure {
  margin: 0;
}

hr {
  box-sizing: content-box;
  flex-shrink: 0;
  width: 100%;
  height: 0;
  margin: 0;
  border: none;
  overflow: visible;
}

main {
  display: block;
}

ul,
ol,
dl,
dd {
  margin: 0;
}

ul,
ol {
  padding: 0;
}

nav ol,
nav ul {
  list-style: none;
}

pre {
  margin: 0;
  font-size: 1em;
  word-break: normal;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  font-family: monospace, monospace;
}

a {
  cursor: pointer;
  background-color: transparent;
}

abbr[title] {
  cursor: help;
  text-decoration: underline dotted;
}

b,
strong {
  font-weight: 600;
}

code,
kbd,
samp {
  font-size: 1em;
  font-family: monospace, monospace;
}

small {
  font-size: 88.8888888889%;
}

::-moz-selection {
  color: rgba(255, 255, 255, 0.9);
  text-shadow: none;
  background-color: #383838;
}

::selection {
  color: rgba(255, 255, 255, 0.9);
  text-shadow: none;
  background-color: #383838;
}

audio,
canvas,
iframe,
img,
svg,
video {
  vertical-align: top;
}

audio,
video {
  display: inline-block;
}

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

img {
  border-style: none;
}

iframe {
  border: none;
}

svg {
  fill: currentColor;
}

svg:not(:root) {
  overflow: hidden;
}

table {
  border-collapse: collapse;
}

th,
td {
  padding: 0;
}

button,
input,
optgroup,
select,
textarea {
  margin: 0;
}

button,
input,
select,
textarea {
  font-size: inherit;
  line-height: inherit;
  color: inherit;
  font-family: inherit;
  border-radius: 0;
}

button,
input,
select,
textarea,
optgroup,
option {
  word-break: normal;
}

button {
  overflow: visible;
  text-transform: none;
}

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

button:-moz-focusring,
[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

::-moz-focus-inner {
  padding: 0;
  border-style: none;
}

fieldset {
  padding: 0;
  margin: 0;
  border: none;
}

input {
  overflow: visible;
}

legend {
  box-sizing: border-box;
  display: table;
  max-width: 100%;
  padding: 0;
  white-space: normal;
  color: inherit;
}

progress {
  display: inline-block;
  vertical-align: top;
}

select {
  text-transform: none;
}

textarea {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  resize: vertical;
}

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

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

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

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

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

details {
  display: block;
}

summary {
  display: list-item;
}

canvas {
  display: inline-block;
}

template {
  display: none;
}

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

[hidden] {
  display: none;
}

[aria-busy=true] {
  cursor: progress;
}

[aria-controls] {
  cursor: pointer;
}

[aria-disabled],
[disabled] {
  cursor: not-allowed;
}

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

[disabled] {
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  opacity: 0.618;
  caret-color: transparent;
}

[disabled] [disabled] {
  opacity: 1;
}

html:not([data-focus=false]) :focus {
  outline: none;
}

html:not([data-focus=false]) .focus {
  outline: dashed 2px #b3b3b3;
  outline-offset: -2px;
}

[readonly] {
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  opacity: 0.618;
  caret-color: transparent;
}

[readonly] [readonly] {
  opacity: 1;
}

[data-toggle-target]:not(.toggle-active) {
  display: none;
}

.badge {
  display: inline-flex;
  align-items: center;
  min-width: 1.125em;
  height: 1.125em;
  padding: 0 0.4em;
  margin-left: 0.5em;
  font-size: 0.8888888889em;
  line-height: 0;
  white-space: nowrap;
  color: white;
  background: #fa73a0;
  border-radius: 9999px;
  transform: scale(0.8888888889);
  transform-origin: left center;
}

.baseline {
  position: relative;
}

.baseline::after {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 4;
  pointer-events: none;
  content: "";
  background: linear-gradient(to bottom, #0ff 0, rgba(255, 255, 255, 0) 1px) left top/100% 12px repeat-y;
}

.btn,
.btn-check,
.btn-radio,
.btn-file {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  display: inline-flex;
  vertical-align: top;
  flex: 0 0 auto;
  max-width: 100%;
  min-width: 3rem;
  height: 3rem;
  font-size: 1.3333333333rem;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  -ms-touch-action: manipulation;
  touch-action: manipulation;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  text-decoration: none;
  background: none;
}

@supports (-ms-ime-align: auto) {
  input.btn {
    display: inline-block;
    text-align: center;
  }
}
.btn,
.btn-check label,
.btn-radio label,
.btn-file label {
  align-items: center;
  justify-content: center;
  padding: 0 0.6875em;
  border: solid 1px;
  overflow: hidden;
  border-radius: 0;
}

.btn-check label,
.btn-radio label,
.btn-file label {
  display: flex;
  width: 100%;
  height: inherit;
}

.btn > *,
.btn-check label > *,
.btn-radio label > *,
.btn-file label > * {
  flex: 0 0 auto;
}

.btn-check input,
.btn-radio input,
.btn-file input {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 0.001px;
  min-width: 100%;
  height: 100%;
  margin-right: -100%;
  overflow: hidden;
  cursor: pointer;
  opacity: 0;
}

.btn-check input[disabled],
.btn-radio input[disabled],
.btn-file input[disabled] {
  opacity: 0;
}

.btn-file ::-webkit-file-upload-button {
  display: none;
}

.btn:-moz-focusring {
  outline: none;
}

.btn.focus,
.btn-check input.focus ~ label,
.btn-radio input.focus ~ label,
.btn-file input.focus ~ label {
  outline: dashed 2px #b3b3b3;
  outline-offset: -2px;
}

.btn-fluid.btn,
.btn-fluid.btn-check,
.btn-fluid.btn-radio,
.btn-fluid.btn-file {
  display: flex;
  flex: 1 1 auto;
  width: 100%;
}

.btn-small.btn,
.btn-small.btn-check,
.btn-small.btn-radio,
.btn-small.btn-file {
  min-width: 2rem;
  height: 2rem;
  font-size: 1.1666666667rem;
}

.btn-large.btn,
.btn-large.btn-check,
.btn-large.btn-radio,
.btn-large.btn-file {
  min-width: 4rem;
  height: 4rem;
  font-size: 1.5rem;
}

.btn.btn-primary,
.btn-check.btn-primary label,
.btn-radio.btn-primary label,
.btn-file.btn-primary label {
  color: rgba(255, 255, 255, 0.9);
  background: #fa73a0;
  border-color: transparent;
}

.btn.btn-primary:hover,
.btn-file.btn-primary input:hover ~ label,
.btn-check.btn-primary input:hover ~ label,
.btn-radio.btn-primary input:hover ~ label {
  background: #fa6999;
}

.btn.btn-primary:active,
.btn.btn-primary.btn-active,
.btn-file.btn-primary input:active ~ label,
.btn-check.btn-primary input:checked ~ label,
.btn-radio.btn-primary input:checked ~ label,
.btn-check.btn-primary.btn-active input ~ label,
.btn-radio.btn-primary.btn-active input ~ label,
.btn-file.btn-primary.btn-active input ~ label {
  background: #f95f93;
}

.btn.btn-secondary,
.btn-check.btn-secondary label,
.btn-radio.btn-secondary label,
.btn-file.btn-secondary label {
  color: #383838;
  background: #dbdbdb;
  border-color: transparent;
}

.btn.btn-secondary:hover,
.btn-file.btn-secondary input:hover ~ label,
.btn-check.btn-secondary input:hover ~ label,
.btn-radio.btn-secondary input:hover ~ label {
  background: #d6d6d6;
}

.btn.btn-secondary:active,
.btn.btn-secondary.btn-active,
.btn-file.btn-secondary input:active ~ label,
.btn-check.btn-secondary input:checked ~ label,
.btn-radio.btn-secondary input:checked ~ label,
.btn-check.btn-secondary.btn-active input ~ label,
.btn-radio.btn-secondary.btn-active input ~ label,
.btn-file.btn-secondary.btn-active input ~ label {
  background: #d1d1d1;
}

.btn.btn-danger,
.btn-check.btn-danger label,
.btn-radio.btn-danger label,
.btn-file.btn-danger label {
  color: rgba(255, 255, 255, 0.9);
  background: #d12626;
  border-color: transparent;
}

.btn.btn-danger:hover,
.btn-file.btn-danger input:hover ~ label,
.btn-check.btn-danger input:hover ~ label,
.btn-radio.btn-danger input:hover ~ label {
  background: #c82424;
}

.btn.btn-danger:active,
.btn.btn-danger.btn-active,
.btn-file.btn-danger input:active ~ label,
.btn-check.btn-danger input:checked ~ label,
.btn-radio.btn-danger input:checked ~ label,
.btn-check.btn-danger.btn-active input ~ label,
.btn-radio.btn-danger.btn-active input ~ label,
.btn-file.btn-danger.btn-active input ~ label {
  background: #c02323;
}

.btn.btn-dark,
.btn-check.btn-dark label,
.btn-radio.btn-dark label,
.btn-file.btn-dark label {
  color: rgba(255, 255, 255, 0.9);
  background: #383838;
  border-color: transparent;
}

.btn.btn-dark:hover,
.btn-file.btn-dark input:hover ~ label,
.btn-check.btn-dark input:hover ~ label,
.btn-radio.btn-dark input:hover ~ label {
  background: #333333;
}

.btn.btn-dark:active,
.btn.btn-dark.btn-active,
.btn-file.btn-dark input:active ~ label,
.btn-check.btn-dark input:checked ~ label,
.btn-radio.btn-dark input:checked ~ label,
.btn-check.btn-dark.btn-active input ~ label,
.btn-radio.btn-dark.btn-active input ~ label,
.btn-file.btn-dark.btn-active input ~ label {
  background: #2e2e2e;
}

.btn.btn-light,
.btn-check.btn-light label,
.btn-radio.btn-light label,
.btn-file.btn-light label {
  color: #1f1f1f;
  background: white;
  border-color: transparent;
}

.btn.btn-light:hover,
.btn-file.btn-light input:hover ~ label,
.btn-check.btn-light input:hover ~ label,
.btn-radio.btn-light input:hover ~ label {
  background: #fafafa;
}

.btn.btn-light:active,
.btn.btn-light.btn-active,
.btn-file.btn-light input:active ~ label,
.btn-check.btn-light input:checked ~ label,
.btn-radio.btn-light input:checked ~ label,
.btn-check.btn-light.btn-active input ~ label,
.btn-radio.btn-light.btn-active input ~ label,
.btn-file.btn-light.btn-active input ~ label {
  background: whitesmoke;
}

.btn.btn-hollow-primary,
.btn-check.btn-hollow-primary label,
.btn-radio.btn-hollow-primary label,
.btn-file.btn-hollow-primary label {
  color: #fa73a0;
  border-color: #fa73a0;
}

.btn.btn-hollow-primary:hover,
.btn-file.btn-hollow-primary input:hover ~ label,
.btn-check.btn-hollow-primary input:hover ~ label,
.btn-radio.btn-hollow-primary input:hover ~ label {
  background: rgba(250, 115, 160, 0.1);
}

.btn.btn-hollow-primary:active,
.btn.btn-hollow-primary.btn-active,
.btn-file.btn-hollow-primary input:active ~ label,
.btn-check.btn-hollow-primary input:checked ~ label,
.btn-radio.btn-hollow-primary input:checked ~ label,
.btn-check.btn-hollow-primary.btn-active input ~ label,
.btn-radio.btn-hollow-primary.btn-active input ~ label,
.btn-file.btn-hollow-primary.btn-active input ~ label {
  color: rgba(255, 255, 255, 0.9);
  background: #f95f93;
  border-color: transparent;
}

.btn.btn-hollow-secondary,
.btn-check.btn-hollow-secondary label,
.btn-radio.btn-hollow-secondary label,
.btn-file.btn-hollow-secondary label {
  color: #383838;
  border-color: #dbdbdb;
}

.btn.btn-hollow-secondary:hover,
.btn-file.btn-hollow-secondary input:hover ~ label,
.btn-check.btn-hollow-secondary input:hover ~ label,
.btn-radio.btn-hollow-secondary input:hover ~ label {
  background: rgba(219, 219, 219, 0.382);
}

.btn.btn-hollow-secondary:active,
.btn.btn-hollow-secondary.btn-active,
.btn-file.btn-hollow-secondary input:active ~ label,
.btn-check.btn-hollow-secondary input:checked ~ label,
.btn-radio.btn-hollow-secondary input:checked ~ label,
.btn-check.btn-hollow-secondary.btn-active input ~ label,
.btn-radio.btn-hollow-secondary.btn-active input ~ label,
.btn-file.btn-hollow-secondary.btn-active input ~ label {
  color: #383838;
  background: #d1d1d1;
  border-color: transparent;
}

.btn.btn-hollow-danger,
.btn-check.btn-hollow-danger label,
.btn-radio.btn-hollow-danger label,
.btn-file.btn-hollow-danger label {
  color: #d12626;
  border-color: #d12626;
}

.btn.btn-hollow-danger:hover,
.btn-file.btn-hollow-danger input:hover ~ label,
.btn-check.btn-hollow-danger input:hover ~ label,
.btn-radio.btn-hollow-danger input:hover ~ label {
  background: rgba(209, 38, 38, 0.1);
}

.btn.btn-hollow-danger:active,
.btn.btn-hollow-danger.btn-active,
.btn-file.btn-hollow-danger input:active ~ label,
.btn-check.btn-hollow-danger input:checked ~ label,
.btn-radio.btn-hollow-danger input:checked ~ label,
.btn-check.btn-hollow-danger.btn-active input ~ label,
.btn-radio.btn-hollow-danger.btn-active input ~ label,
.btn-file.btn-hollow-danger.btn-active input ~ label {
  color: rgba(255, 255, 255, 0.9);
  background: #c02323;
  border-color: transparent;
}

.btn.btn-hollow-dark,
.btn-check.btn-hollow-dark label,
.btn-radio.btn-hollow-dark label,
.btn-file.btn-hollow-dark label {
  color: #1f1f1f;
  border-color: #1f1f1f;
}

.btn.btn-hollow-dark:hover,
.btn-file.btn-hollow-dark input:hover ~ label,
.btn-check.btn-hollow-dark input:hover ~ label,
.btn-radio.btn-hollow-dark input:hover ~ label {
  background: rgba(56, 56, 56, 0.1);
}

.btn.btn-hollow-dark:active,
.btn.btn-hollow-dark.btn-active,
.btn-file.btn-hollow-dark input:active ~ label,
.btn-check.btn-hollow-dark input:checked ~ label,
.btn-radio.btn-hollow-dark input:checked ~ label,
.btn-check.btn-hollow-dark.btn-active input ~ label,
.btn-radio.btn-hollow-dark.btn-active input ~ label,
.btn-file.btn-hollow-dark.btn-active input ~ label {
  color: rgba(255, 255, 255, 0.9);
  background: #2e2e2e;
  border-color: transparent;
}

.btn.btn-hollow-light,
.btn-check.btn-hollow-light label,
.btn-radio.btn-hollow-light label,
.btn-file.btn-hollow-light label {
  color: white;
  border-color: white;
}

.btn.btn-hollow-light:hover,
.btn-file.btn-hollow-light input:hover ~ label,
.btn-check.btn-hollow-light input:hover ~ label,
.btn-radio.btn-hollow-light input:hover ~ label {
  background: rgba(255, 255, 255, 0.1);
}

.btn.btn-hollow-light:active,
.btn.btn-hollow-light.btn-active,
.btn-file.btn-hollow-light input:active ~ label,
.btn-check.btn-hollow-light input:checked ~ label,
.btn-radio.btn-hollow-light input:checked ~ label,
.btn-check.btn-hollow-light.btn-active input ~ label,
.btn-radio.btn-hollow-light.btn-active input ~ label,
.btn-file.btn-hollow-light.btn-active input ~ label {
  color: #1f1f1f;
  background: whitesmoke;
  border-color: transparent;
}

.btn.btn-text-primary,
.btn-check.btn-text-primary,
.btn-radio.btn-text-primary,
.btn-file.btn-text-primary {
  color: #fa73a0;
  border-color: transparent;
}

.btn.btn-text-primary:hover,
.btn-file.btn-text-primary input:hover ~ label,
.btn-check.btn-text-primary input:hover ~ label,
.btn-radio.btn-text-primary input:hover ~ label {
  color: #f8427f;
}

.btn.btn-text-primary:active,
.btn.btn-text-primary.btn-active,
.btn-file.btn-text-primary input:active ~ label,
.btn-check.btn-text-primary input:checked ~ label,
.btn-radio.btn-text-primary input:checked ~ label,
.btn-check.btn-text-primary.btn-active input ~ label,
.btn-radio.btn-text-primary.btn-active input ~ label,
.btn-file.btn-text-primary.btn-active input ~ label {
  color: #f8427f;
}

.btn.btn-text-secondary,
.btn-check.btn-text-secondary,
.btn-radio.btn-text-secondary,
.btn-file.btn-text-secondary {
  color: #8f8f8f;
  border-color: transparent;
}

.btn.btn-text-secondary:hover,
.btn-file.btn-text-secondary input:hover ~ label,
.btn-check.btn-text-secondary input:hover ~ label,
.btn-radio.btn-text-secondary input:hover ~ label {
  color: #757575;
}

.btn.btn-text-secondary:active,
.btn.btn-text-secondary.btn-active,
.btn-file.btn-text-secondary input:active ~ label,
.btn-check.btn-text-secondary input:checked ~ label,
.btn-radio.btn-text-secondary input:checked ~ label,
.btn-check.btn-text-secondary.btn-active input ~ label,
.btn-radio.btn-text-secondary.btn-active input ~ label,
.btn-file.btn-text-secondary.btn-active input ~ label {
  color: #757575;
}

.btn.btn-text-danger,
.btn-check.btn-text-danger,
.btn-radio.btn-text-danger,
.btn-file.btn-text-danger {
  color: #d12626;
  border-color: transparent;
}

.btn.btn-text-danger:hover,
.btn-file.btn-text-danger input:hover ~ label,
.btn-check.btn-text-danger input:hover ~ label,
.btn-radio.btn-text-danger input:hover ~ label {
  color: #bb2222;
}

.btn.btn-text-danger:active,
.btn.btn-text-danger.btn-active,
.btn-file.btn-text-danger input:active ~ label,
.btn-check.btn-text-danger input:checked ~ label,
.btn-radio.btn-text-danger input:checked ~ label,
.btn-check.btn-text-danger.btn-active input ~ label,
.btn-radio.btn-text-danger.btn-active input ~ label,
.btn-file.btn-text-danger.btn-active input ~ label {
  color: #bb2222;
}

.btn.btn-text-dark,
.btn-check.btn-text-dark,
.btn-radio.btn-text-dark,
.btn-file.btn-text-dark {
  color: #383838;
  border-color: transparent;
}

.btn.btn-text-dark:hover,
.btn-file.btn-text-dark input:hover ~ label,
.btn-check.btn-text-dark input:hover ~ label,
.btn-radio.btn-text-dark input:hover ~ label {
  color: #1f1f1f;
}

.btn.btn-text-dark:active,
.btn.btn-text-dark.btn-active,
.btn-file.btn-text-dark input:active ~ label,
.btn-check.btn-text-dark input:checked ~ label,
.btn-radio.btn-text-dark input:checked ~ label,
.btn-check.btn-text-dark.btn-active input ~ label,
.btn-radio.btn-text-dark.btn-active input ~ label,
.btn-file.btn-text-dark.btn-active input ~ label {
  color: #1f1f1f;
}

.btn.btn-text-light,
.btn-check.btn-text-light,
.btn-radio.btn-text-light,
.btn-file.btn-text-light {
  color: rgba(255, 255, 255, 0.618);
  border-color: transparent;
}

.btn.btn-text-light:hover,
.btn-file.btn-text-light input:hover ~ label,
.btn-check.btn-text-light input:hover ~ label,
.btn-radio.btn-text-light input:hover ~ label {
  color: white;
}

.btn.btn-text-light:active,
.btn.btn-text-light.btn-active,
.btn-file.btn-text-light input:active ~ label,
.btn-check.btn-text-light input:checked ~ label,
.btn-radio.btn-text-light input:checked ~ label,
.btn-check.btn-text-light.btn-active input ~ label,
.btn-radio.btn-text-light.btn-active input ~ label,
.btn-file.btn-text-light.btn-active input ~ label {
  color: white;
}

.container {
  max-width: 113.8333333333rem;
  min-width: 0;
  padding: 2rem 1rem;
  margin-right: auto;
  margin-left: auto;
}

.fm-label {
  padding-top: 0.504rem;
  padding-bottom: 0.496rem;
  font-size: 1.3333333333rem;
  line-height: 2rem;
  display: block;
}

.fm-label-required.fm-label::after {
  content: " | Required";
  color: #d12626;
}

.fm-label-small.fm-label {
  padding-top: 0.566rem;
  padding-bottom: 0.434rem;
  font-size: 1.1666666667rem;
  line-height: 2rem;
}

.fm-label-large.fm-label {
  padding-top: 0.442rem;
  padding-bottom: 0.558rem;
  font-size: 1.5rem;
  line-height: 2rem;
}

.fm ::-webkit-input-placeholder {
  color: #b8b8b8;
}

.fm ::-moz-placeholder {
  opacity: 1;
  color: #b8b8b8;
}

.fm :-ms-input-placeholder {
  color: #b8b8b8;
}

.fm[data-error]::after,
.fm[data-hint]::after {
  display: block;
  width: 100%;
  font-size: 1.1666666667rem;
  line-height: 2rem;
}

.fm[data-hint]::after {
  content: attr(data-hint);
  color: #b8b8b8;
}

.fm[data-error]::after,
.fm[data-hint][data-error]::after {
  content: attr(data-error);
  color: #d12626;
}

.fm-large.fm[data-hint]::after,
.fm-large.fm[data-error]::after {
  font-size: 1.3333333333rem;
  line-height: 2rem;
}

.fm {
  display: flex;
  flex-wrap: wrap;
  font-size: 1.3333333333rem;
  color: #383838;
}

.fm > * {
  flex: 0 0 auto;
}

.fm input,
.fm select,
.fm textarea {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  display: block;
}

html:not([data-focus-disabled]) .fm .focus {
  outline: none;
}

.fm ::-webkit-inner-spin-button,
.fm ::-webkit-outer-spin-button {
  display: none;
}

.fm [type=number] {
  -moz-appearance: textfield;
}

.fm [type=range]::-moz-focus-outer {
  border: none;
}

.fm :invalid {
  box-shadow: none;
}

.fm select::-ms-expand {
  display: none;
}

.fm ::-ms-clear {
  display: none;
}

.fm ::-webkit-search-cancel-button {
  -webkit-appearance: none;
}

.fm ::-webkit-calendar-picker-indicator {
  display: none;
}

.fm ::-webkit-contacts-auto-fill-button {
  display: none !important;
}

.fm ::-webkit-credentials-auto-fill-button {
  display: none !important;
}

.fm ::-webkit-caps-lock-indicator {
  display: none !important;
}

.fm-inline.fm {
  display: inline-flex;
  vertical-align: top;
}

.fm-small.fm {
  font-size: 1.1666666667rem;
}

.fm-large.fm {
  font-size: 1.5rem;
}

.fm-inline.fm:not(.fm-check):not(.fm-radio) {
  width: 22rem;
}

.fm-small.fm-inline.fm:not(.fm-check):not(.fm-radio) {
  width: 18rem;
}

.fm-large.fm-inline.fm:not(.fm-check):not(.fm-radio) {
  width: 26rem;
}

.fm-text input,
.fm-search input,
.fm-select input,
.fm-file input,
.fm-text textarea,
.fm-select select {
  width: 100%;
  border: solid 1px #ebebeb;
  border-radius: 0;
}

.fm-text input,
.fm-search input,
.fm-select input,
.fm-file input,
.fm-select select:not([multiple]) {
  height: 3rem;
  line-height: normal;
}

.fm-text input,
.fm-select select:not([multiple]) {
  padding: 0 0.6875em;
  background: white;
}

.fm-search input,
.fm-select input,
.fm-file input {
  padding: 0 2.375em 0 0.6875em;
}

.fm-search input {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'%3E%3Cpath fill='%23d1d1d1' d='M983.1,908.7L702.1,625.9c114.2-150.9,102.6-366.6-35-504.2c-150.3-150.3-394.1-150.3-544.4,0c-150.3,150.3-150.3,394,0,544.4c137.5,137.5,353.1,149.2,504,35.2l281,282.8c9.2,9.2,24.2,9.2,33.5,0l41.9-41.9C992.3,932.9,992.3,917.9,983.1,908.7L983.1,908.7z M194.1,596.9c-110.4-110.4-110.4-289.4,0-399.7c110.4-110.4,289.4-110.4,399.8,0c110.4,110.4,110.4,289.3,0,399.7C483.4,707.3,304.5,707.3,194.1,596.9L194.1,596.9z'/%3E%3C/svg%3E") right 0.6875em center/1em no-repeat, white;
}

.fm-select input {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath fill='%23d1d1d1' d='M2.16,6.246 C2.385,6.246 2.61,6.308 2.81,6.442 L9.039,10.598 L15.076,6.401 C15.617,6.042 16.346,6.188 16.705,6.729 C17.065,7.268 16.92,8 16.38,8.359 L9.692,12.989 C9.298,13.253 8.784,13.254 8.388,12.991 L1.508,8.402 C0.966,8.042 0.82,7.31 1.179,6.77 C1.407,6.429 1.78,6.246 2.16,6.246 L2.16,6.246 Z'%3E%3C/path%3E%3C/svg%3E") right 0.6875em center/1em no-repeat, white;
}

.fm-file input {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-100 0 600 500'%3E%3Cpath fill='%23d1d1d1' d='M465.064,207.566l0.028,0H284.436V27.25c0-14.84-12.016-27.248-26.856-27.248h-23.116c-14.836,0-26.904,12.408-26.904,27.248v180.316H26.908c-14.832,0-26.908,12-26.908,26.844v23.248c0,14.832,12.072,26.78,26.908,26.78h180.656v180.968c0,14.832,12.064,26.592,26.904,26.592h23.116c14.84,0,26.856-11.764,26.856-26.592V284.438h180.624c14.84,0,26.936-11.952,26.936-26.78V234.41C492,219.566,479.904,207.566,465.064,207.566z'/%3E%3C/svg%3E") right 0.6875em center/1em no-repeat, white;
}

.fm-text textarea,
.fm-select select[multiple] {
  height: 9rem;
  min-height: 9rem;
  padding: 0.504rem 0.6875em 0.496rem;
  line-height: 2rem;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  background: white;
}

.fm-text[data-error] input,
.fm-search[data-error] input,
.fm-select[data-error] input,
.fm-file[data-error] input,
.fm-text[data-error] textarea,
.fm-select[data-error] select[multiple] {
  border-color: #d12626;
}

.fm-search[data-error] input {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'%3E%3Cpath fill='%23d12626' d='M983.1,908.7L702.1,625.9c114.2-150.9,102.6-366.6-35-504.2c-150.3-150.3-394.1-150.3-544.4,0c-150.3,150.3-150.3,394,0,544.4c137.5,137.5,353.1,149.2,504,35.2l281,282.8c9.2,9.2,24.2,9.2,33.5,0l41.9-41.9C992.3,932.9,992.3,917.9,983.1,908.7L983.1,908.7z M194.1,596.9c-110.4-110.4-110.4-289.4,0-399.7c110.4-110.4,289.4-110.4,399.8,0c110.4,110.4,110.4,289.3,0,399.7C483.4,707.3,304.5,707.3,194.1,596.9L194.1,596.9z'/%3E%3C/svg%3E") right 0.6875em center/1em no-repeat, white;
}

.fm-select[data-error] input {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath fill='%23d12626' d='M2.16,6.246 C2.385,6.246 2.61,6.308 2.81,6.442 L9.039,10.598 L15.076,6.401 C15.617,6.042 16.346,6.188 16.705,6.729 C17.065,7.268 16.92,8 16.38,8.359 L9.692,12.989 C9.298,13.253 8.784,13.254 8.388,12.991 L1.508,8.402 C0.966,8.042 0.82,7.31 1.179,6.77 C1.407,6.429 1.78,6.246 2.16,6.246 L2.16,6.246 Z'%3E%3C/path%3E%3C/svg%3E") right 0.6875em center/1em no-repeat, white;
}

.fm-file[data-error] input {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-100 0 600 500'%3E%3Cpath fill='%23d12626' d='M465.064,207.566l0.028,0H284.436V27.25c0-14.84-12.016-27.248-26.856-27.248h-23.116c-14.836,0-26.904,12.408-26.904,27.248v180.316H26.908c-14.832,0-26.908,12-26.908,26.844v23.248c0,14.832,12.072,26.78,26.908,26.78h180.656v180.968c0,14.832,12.064,26.592,26.904,26.592h23.116c14.84,0,26.856-11.764,26.856-26.592V284.438h180.624c14.84,0,26.936-11.952,26.936-26.78V234.41C492,219.566,479.904,207.566,465.064,207.566z'/%3E%3C/svg%3E") right 0.6875em center/1em no-repeat, white;
}

.fm.fm-text input.focus,
.fm.fm-search input.focus,
.fm.fm-select .focus ~ input,
.fm.fm-select input.focus,
.fm.fm-file .focus ~ input,
.fm.fm-text textarea.focus,
.fm.fm-select select[multiple].focus {
  border-color: #fa73a0;
}

.fm.fm-search input.focus {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'%3E%3Cpath fill='%23fa73a0' d='M983.1,908.7L702.1,625.9c114.2-150.9,102.6-366.6-35-504.2c-150.3-150.3-394.1-150.3-544.4,0c-150.3,150.3-150.3,394,0,544.4c137.5,137.5,353.1,149.2,504,35.2l281,282.8c9.2,9.2,24.2,9.2,33.5,0l41.9-41.9C992.3,932.9,992.3,917.9,983.1,908.7L983.1,908.7z M194.1,596.9c-110.4-110.4-110.4-289.4,0-399.7c110.4-110.4,289.4-110.4,399.8,0c110.4,110.4,110.4,289.3,0,399.7C483.4,707.3,304.5,707.3,194.1,596.9L194.1,596.9z'/%3E%3C/svg%3E") right 0.6875em center/1em no-repeat, white;
}

.fm.fm-select .focus ~ input,
.fm.fm-select input.focus {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath fill='%23fa73a0' d='M2.16,6.246 C2.385,6.246 2.61,6.308 2.81,6.442 L9.039,10.598 L15.076,6.401 C15.617,6.042 16.346,6.188 16.705,6.729 C17.065,7.268 16.92,8 16.38,8.359 L9.692,12.989 C9.298,13.253 8.784,13.254 8.388,12.991 L1.508,8.402 C0.966,8.042 0.82,7.31 1.179,6.77 C1.407,6.429 1.78,6.246 2.16,6.246 L2.16,6.246 Z'%3E%3C/path%3E%3C/svg%3E") right 0.6875em center/1em no-repeat, white;
}

.fm.fm-file .focus ~ input {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-100 0 600 500'%3E%3Cpath fill='%23fa73a0' d='M465.064,207.566l0.028,0H284.436V27.25c0-14.84-12.016-27.248-26.856-27.248h-23.116c-14.836,0-26.904,12.408-26.904,27.248v180.316H26.908c-14.832,0-26.908,12-26.908,26.844v23.248c0,14.832,12.072,26.78,26.908,26.78h180.656v180.968c0,14.832,12.064,26.592,26.904,26.592h23.116c14.84,0,26.856-11.764,26.856-26.592V284.438h180.624c14.84,0,26.936-11.952,26.936-26.78V234.41C492,219.566,479.904,207.566,465.064,207.566z'/%3E%3C/svg%3E") right 0.6875em center/1em no-repeat, white;
}

.fm-small.fm-text input,
.fm-small.fm-search input,
.fm-small.fm-select input,
.fm-small.fm-file input,
.fm-small.fm-select select:not([multiple]) {
  height: 2rem;
}

.fm-small.fm-text textarea,
.fm-small.fm-select select[multiple] {
  height: 6rem;
  min-height: 6rem;
  padding-top: 0.566rem;
  padding-bottom: 0.434rem;
  line-height: 2rem;
}

.fm-large.fm-text input,
.fm-large.fm-search input,
.fm-large.fm-select input,
.fm-large.fm-file input,
.fm-large.fm-select select:not([multiple]) {
  height: 4rem;
}

.fm-large.fm-text textarea,
.fm-large.fm-select select[multiple] {
  height: 12rem;
  min-height: 12rem;
  padding-top: 0.442rem;
  padding-bottom: 0.558rem;
  line-height: 2rem;
}

.fm-select select:not([multiple]),
.fm-file input[type=file] {
  width: 100%;
  opacity: 0;
}

.fm-select select:not([multiple]) + input,
.fm-file [type=file] + input {
  margin-top: -3rem;
}

.fm-file [type=file] {
  overflow: hidden;
}

.fm-small.fm-select select:not([multiple]) + input,
.fm-small.fm-file [type=file] + input {
  margin-top: -2rem;
}

.fm-large.fm-select select:not([multiple]) + input,
.fm-large.fm-file [type=file] + input {
  margin-top: -4rem;
}

.fm-select select[multiple] option {
  display: flex;
  align-items: center;
  height: 2rem;
  min-height: 0;
  padding: 0;
}

.fm-small.fm-select select[multiple] option {
  height: 2rem;
}

.fm-large.fm-select select[multiple] option {
  height: 2rem;
}

.fm-check label,
.fm-radio label {
  flex: 0 1 auto;
  padding-left: 1.65em;
  line-height: 2rem;
  overflow: hidden;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.fm-check label:not(:last-child),
.fm-radio label:not(:last-child) {
  margin-right: 1.2em;
}

.fm-check label input,
.fm-radio label input {
  float: left;
  margin: 0.125em 0.4em 0 -1.65em;
}

.fm-check input,
.fm-radio input {
  width: 1.25em;
  height: 1.25em;
  border: solid 1px #ebebeb;
  background: white;
}

.fm-check input {
  border-radius: 0;
  transform: scale(0.9);
}

.fm-radio input {
  border-radius: 100%;
}

.fm-check[data-error] input,
.fm-radio[data-error] input {
  border-color: #d12626;
}

.fm.fm-check .focus,
.fm.fm-radio .focus {
  border-color: #fa73a0;
}

.fm.fm-check input:checked,
.fm.fm-radio input:checked {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-150 -150 800 800'%3E%3Cpath fill='%23383838' d='M487.75,78.125c-13-13-33-13-46,0l-272,272l-114-113c-13-13-33-13-46,0s-13,33,0,46l137,136c6,6,15,10,23,10s17-4,23-10l295-294C500.75,112.125,500.75,91.125,487.75,78.125z'/%3E%3C/svg%3E") center/contain no-repeat, white;
}

.fm-small.fm-check label,
.fm-small.fm-radio label {
  line-height: 2rem;
}

.fm-large.fm-check label,
.fm-large.fm-radio label {
  line-height: 2rem;
}

.fm-small.fm-check label input,
.fm-small.fm-radio label input {
  margin-top: 0.2321428571em;
}

.fm-large.fm-check label input,
.fm-large.fm-radio label input {
  margin-top: 0.0416666667em;
}

.fm-range input {
  width: 100%;
  height: 3rem;
  background: none;
}

.fm-range ::-webkit-slider-runnable-track {
  background: #ebebeb;
  border-radius: 0;
  height: 0.25em;
}

.fm-range ::-moz-range-track {
  background: #ebebeb;
  border-radius: 0;
  height: 0.25em;
}

.fm-range ::-ms-track {
  height: 0.25em;
  color: transparent;
  background: transparent;
}

.fm-range ::-ms-fill-lower {
  background: #ebebeb;
  border-radius: 0;
}

.fm-range ::-ms-fill-upper {
  background: #ebebeb;
  border-radius: 0;
}

.fm-range ::-webkit-slider-thumb {
  width: 1.25em;
  height: 1.25em;
  border: solid 1px transparent;
  background: #ebebeb;
  border-radius: 100%;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  margin-top: -0.5em;
}

@supports (-ms-ime-align: auto) {
  .fm-range ::-webkit-slider-thumb {
    margin-top: 0;
  }
}
.fm-range ::-moz-range-thumb {
  width: 1.25em;
  height: 1.25em;
  border: solid 1px transparent;
  background: #ebebeb;
  border-radius: 100%;
}

.fm-range ::-ms-thumb {
  width: 1.25em;
  height: 1.25em;
  border: solid 1px transparent;
  background: #ebebeb;
  border-radius: 100%;
}

.fm-range ::-ms-tooltip {
  display: none;
}

.fm-range[data-error] ::-webkit-slider-thumb {
  border-color: #d12626;
}

.fm-range[data-error] ::-moz-range-thumb {
  border-color: #d12626;
}

.fm-range[data-error] ::-ms-thumb {
  border-color: #d12626;
}

.fm-range input.focus::-webkit-slider-thumb {
  background: #fa73a0;
}

.fm-range input.focus::-moz-range-thumb {
  background: #fa73a0;
}

.fm-range input.focus::-ms-thumb {
  background: #fa73a0;
}

.fm-small.fm-range input {
  height: 2rem;
}

.fm-large.fm-range input {
  height: 4rem;
}

.grid,
.grid-edge {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  width: 100%;
}

[class*=col-] {
  flex-grow: 0;
  flex-shrink: 0;
}

.col-auto {
  flex-basis: 0;
  flex-grow: 1;
  flex-shrink: 1;
  max-width: 100%;
  min-width: 1px;
}

.grid > [class*=col-] {
  padding-right: 1rem;
  padding-left: 1rem;
}

.grid [class*=col-] .grid {
  width: auto;
  margin-right: -1rem;
  margin-left: -1rem;
}

.grid .grid-edge > [class*=col-] > .grid {
  margin-right: 0;
  margin-left: 0;
}

.col-1 {
  flex-basis: 8.3333333333%;
  max-width: 8.3333333333%;
}

.col-2 {
  flex-basis: 16.6666666667%;
  max-width: 16.6666666667%;
}

.col-3 {
  flex-basis: 25%;
  max-width: 25%;
}

.col-4 {
  flex-basis: 33.3333333333%;
  max-width: 33.3333333333%;
}

.col-5 {
  flex-basis: 41.6666666667%;
  max-width: 41.6666666667%;
}

.col-6 {
  flex-basis: 50%;
  max-width: 50%;
}

.col-7 {
  flex-basis: 58.3333333333%;
  max-width: 58.3333333333%;
}

.col-8 {
  flex-basis: 66.6666666667%;
  max-width: 66.6666666667%;
}

.col-9 {
  flex-basis: 75%;
  max-width: 75%;
}

.col-10 {
  flex-basis: 83.3333333333%;
  max-width: 83.3333333333%;
}

.col-11 {
  flex-basis: 91.6666666667%;
  max-width: 91.6666666667%;
}

.col-12 {
  flex-basis: 100%;
  max-width: 100%;
}

.offset-1 {
  margin-left: 8.3333333333%;
}

.offset-2 {
  margin-left: 16.6666666667%;
}

.offset-3 {
  margin-left: 25%;
}

.offset-4 {
  margin-left: 33.3333333333%;
}

.offset-5 {
  margin-left: 41.6666666667%;
}

.offset-6 {
  margin-left: 50%;
}

.offset-7 {
  margin-left: 58.3333333333%;
}

.offset-8 {
  margin-left: 66.6666666667%;
}

.offset-9 {
  margin-left: 75%;
}

.offset-10 {
  margin-left: 83.3333333333%;
}

.offset-11 {
  margin-left: 91.6666666667%;
}

@media (min-width:768px) {
  .col-1-m {
    flex-basis: 8.3333333333%;
    max-width: 8.3333333333%;
  }

  .col-2-m {
    flex-basis: 16.6666666667%;
    max-width: 16.6666666667%;
  }

  .col-3-m {
    flex-basis: 25%;
    max-width: 25%;
  }

  .col-4-m {
    flex-basis: 33.3333333333%;
    max-width: 33.3333333333%;
  }

  .col-5-m {
    flex-basis: 41.6666666667%;
    max-width: 41.6666666667%;
  }

  .col-6-m {
    flex-basis: 50%;
    max-width: 50%;
  }

  .col-7-m {
    flex-basis: 58.3333333333%;
    max-width: 58.3333333333%;
  }

  .col-8-m {
    flex-basis: 66.6666666667%;
    max-width: 66.6666666667%;
  }

  .col-9-m {
    flex-basis: 75%;
    max-width: 75%;
  }

  .col-10-m {
    flex-basis: 83.3333333333%;
    max-width: 83.3333333333%;
  }

  .col-11-m {
    flex-basis: 91.6666666667%;
    max-width: 91.6666666667%;
  }

  .col-12-m {
    flex-basis: 100%;
    max-width: 100%;
  }

  .offset-1-m {
    margin-left: 8.3333333333%;
  }

  .offset-2-m {
    margin-left: 16.6666666667%;
  }

  .offset-3-m {
    margin-left: 25%;
  }

  .offset-4-m {
    margin-left: 33.3333333333%;
  }

  .offset-5-m {
    margin-left: 41.6666666667%;
  }

  .offset-6-m {
    margin-left: 50%;
  }

  .offset-7-m {
    margin-left: 58.3333333333%;
  }

  .offset-8-m {
    margin-left: 66.6666666667%;
  }

  .offset-9-m {
    margin-left: 75%;
  }

  .offset-10-m {
    margin-left: 83.3333333333%;
  }

  .offset-11-m {
    margin-left: 91.6666666667%;
  }
}
@media (min-width:1200px) {
  .col-1-l {
    flex-basis: 8.3333333333%;
    max-width: 8.3333333333%;
  }

  .col-2-l {
    flex-basis: 16.6666666667%;
    max-width: 16.6666666667%;
  }

  .col-3-l {
    flex-basis: 25%;
    max-width: 25%;
  }

  .col-4-l {
    flex-basis: 33.3333333333%;
    max-width: 33.3333333333%;
  }

  .col-5-l {
    flex-basis: 41.6666666667%;
    max-width: 41.6666666667%;
  }

  .col-6-l {
    flex-basis: 50%;
    max-width: 50%;
  }

  .col-7-l {
    flex-basis: 58.3333333333%;
    max-width: 58.3333333333%;
  }

  .col-8-l {
    flex-basis: 66.6666666667%;
    max-width: 66.6666666667%;
  }

  .col-9-l {
    flex-basis: 75%;
    max-width: 75%;
  }

  .col-10-l {
    flex-basis: 83.3333333333%;
    max-width: 83.3333333333%;
  }

  .col-11-l {
    flex-basis: 91.6666666667%;
    max-width: 91.6666666667%;
  }

  .col-12-l {
    flex-basis: 100%;
    max-width: 100%;
  }

  .offset-1-l {
    margin-left: 8.3333333333%;
  }

  .offset-2-l {
    margin-left: 16.6666666667%;
  }

  .offset-3-l {
    margin-left: 25%;
  }

  .offset-4-l {
    margin-left: 33.3333333333%;
  }

  .offset-5-l {
    margin-left: 41.6666666667%;
  }

  .offset-6-l {
    margin-left: 50%;
  }

  .offset-7-l {
    margin-left: 58.3333333333%;
  }

  .offset-8-l {
    margin-left: 66.6666666667%;
  }

  .offset-9-l {
    margin-left: 75%;
  }

  .offset-10-l {
    margin-left: 83.3333333333%;
  }

  .offset-11-l {
    margin-left: 91.6666666667%;
  }
}
.ico {
  display: inline-block;
  vertical-align: baseline;
  position: relative;
  width: 1em;
  height: 1em;
  font-size: 1em;
  line-height: 1;
  overflow: hidden;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  object-fit: contain;
  object-position: center;
  font-style: normal;
  background-position: center;
  background-size: contain;
}

.ico::before,
.ico::after {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.ico-left::before,
.ico-right::before,
.ico-up::before,
.ico-down::before {
  width: 0.6em;
  height: 0.6em;
  border: 2px solid;
  border-right: none;
  border-bottom: none;
  content: "";
}

.ico-left::before {
  transform: translate(-25%, -50%) rotate(-45deg);
}

.ico-right::before {
  transform: translate(-75%, -50%) rotate(135deg);
}

.ico-up::before {
  transform: translate(-50%, -25%) rotate(45deg);
}

.ico-down::before {
  transform: translate(-50%, -75%) rotate(225deg);
}

.ico-plus::before,
.ico-plus::after,
.ico-cross::before,
.ico-cross::after {
  content: "";
  background: currentColor;
}

.ico-plus::before,
.ico-cross::before {
  width: 0.9em;
  height: 2px;
}

.ico-plus::after,
.ico-cross::after {
  width: 2px;
  height: 0.9em;
}

.ico-cross::before,
.ico-cross::after {
  transform: translate(-50%, -50%) rotate(45deg);
}

.ico-menu::before {
  width: 0.9em;
  height: 2px;
  content: "";
  background: currentColor;
  box-shadow: 0 -0.35em, 0 0.35em;
}

.ico-search::before {
  top: 5%;
  left: 5%;
  width: 0.75em;
  height: 0.75em;
  border: 2px solid;
  content: "";
  border-radius: 50%;
  transform: translate(0, 0) rotate(45deg);
}

.ico-search::after {
  top: 80%;
  left: 80%;
  width: 0.4em;
  height: 2px;
  content: "";
  background: currentColor;
  transform: translate(-50%, -50%) rotate(45deg);
}

.media {
  display: inline-block;
  vertical-align: top;
  max-width: 100%;
}

.media img,
.media svg,
.media canvas,
.media video,
.media object,
.media embed,
[class*=media-content] {
  display: block;
  max-width: 100%;
  margin: auto;
  overflow: hidden;
  object-fit: cover;
  object-position: center;
  background-color: #f7f7f7;
  background-position: center;
  background-size: cover;
  border-radius: 0;
}

[class*=media-content] {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}

.media [class*=media-content] > * {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: transparent;
}

.media-content-1by1 {
  padding-top: 100%;
}

.media-contain.media img,
.media-contain.media svg,
.media-contain.media video,
.media-contain.media [class*=media-content] {
  object-fit: contain;
  background-size: contain;
}

html:has(.overlay.toggle-active),
body:has(.overlay.toggle-active) {
  overflow: hidden;
}

.overlay {
  display: flex;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 4;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  background: rgba(56, 56, 56, 0.9);
}

.overlay-body {
  margin: auto;
}

.progress {
  display: flex;
  height: 2rem;
  background: #f7f7f7;
  border-radius: 0;
}

.progress-bar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-width: 3em;
  height: 100%;
  padding: 0 0.5rem;
  font-size: 1.1666666667rem;
  white-space: nowrap;
  overflow: hidden;
  color: rgba(255, 255, 255, 0.9);
  background: #fa73a0;
  border-radius: 0;
}

@media (min-width:768px) {
  html {
    -ms-overflow-style: -ms-autohiding-scrollbar;
  }

  * {
    scrollbar-width: thin;
    scrollbar-color: rgba(184, 184, 184, 0.382) transparent;
  }
}
@media (-webkit-min-device-pixel-ratio: 0) and (min-resolution: 0.001dpcm) and (min-width:768px) {
  html {
    overflow: overlay;
  }

  ::-webkit-scrollbar {
    width: 0.5rem;
    height: 0.5rem;
  }

  ::-webkit-scrollbar-thumb {
    background: rgba(184, 184, 184, 0.382);
    border-radius: 0.5rem;
  }

  ::-webkit-scrollbar-corner {
    display: none;
  }

  ::-webkit-resizer {
    display: none;
  }
}
.table,
.table-border {
  word-break: normal;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 0;
}

.table table,
.table-border table {
  min-width: 100%;
}

.table thead,
.table-border thead {
  background: #f7f7f7;
}

.table tbody tr:nth-child(even),
.table-border tbody tr:nth-child(even) {
  background: #f7f7f7;
}

.table tbody tr:nth-child(odd),
.table-border tbody tr:nth-child(odd) {
  background: white;
}

.table th,
.table td,
.table-border th,
.table-border td {
  vertical-align: top;
  text-align: left;
}

.table th,
.table-border th {
  color: #1f1f1f;
  font-weight: 500;
}

.table td,
.table-border td {
  color: #383838;
}

.table th,
.table td {
  padding: 1rem;
}

.table-border {
  border: solid 1px #ebebeb;
}

.table-border th,
.table-border td {
  padding: calc(1rem - 1px) 1rem 1rem 1rem;
}

.table-border td {
  border-top: solid 1px #ebebeb;
}

.table-border tbody tr:last-child td {
  padding: calc(1rem - 1px) 1rem calc(1rem - 1px) 1rem;
}

.table-middle.table th,
.table-middle.table td,
.table-middle.table-border th,
.table-middle.table-border td {
  vertical-align: middle;
}

.table-nowrap.table th,
.table-nowrap.table td,
.table-nowrap.table-border th,
.table-nowrap.table-border td {
  vertical-align: middle;
  white-space: nowrap;
}

.table-stripless.table thead,
.table-stripless.table-border thead {
  background: none;
}

.table-stripless.table table tbody tr,
.table-stripless.table-border table tbody tr {
  background: none;
}

.table-hover.table tbody tr:hover,
.table-hover.table-border tbody tr:hover {
  background: #fedfe9;
}

.turbolinks-progress-bar {
  height: 2px;
  background: #fa73a0;
}

.typo-inline {
  display: inline !important;
  padding: 0 !important;
  line-height: 0 !important;
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
  font-weight: 500;
}

h1,
.h1 {
  padding-top: 0.601rem;
  padding-bottom: 0.399rem;
  font-size: 2.4166666667rem;
  line-height: 3rem;
  display: block;
}

h2,
.h2 {
  padding-top: 0.694rem;
  padding-bottom: 0.306rem;
  font-size: 2.1666666667rem;
  line-height: 3rem;
  display: block;
}

h3,
.h3 {
  padding-top: 0.787rem;
  padding-bottom: 0.213rem;
  font-size: 1.9166666667rem;
  line-height: 3rem;
  display: block;
}

h4,
.h4 {
  padding-top: 0.38rem;
  padding-bottom: 0.62rem;
  font-size: 1.6666666667rem;
  line-height: 2rem;
  display: block;
}

h5,
.h5 {
  padding-top: 0.442rem;
  padding-bottom: 0.558rem;
  font-size: 1.5rem;
  line-height: 2rem;
  display: block;
}

h6,
.h6 {
  padding-top: 0.504rem;
  padding-bottom: 0.496rem;
  font-size: 1.3333333333rem;
  line-height: 2rem;
  display: block;
}

.p5 {
  padding-top: 0.442rem;
  padding-bottom: 0.558rem;
  font-size: 1.5rem;
  line-height: 2rem;
  display: block;
}

p,
.p6 {
  padding-top: 0.504rem;
  padding-bottom: 0.496rem;
  font-size: 1.3333333333rem;
  line-height: 2rem;
  display: block;
}

.p7 {
  padding-top: 0.566rem;
  padding-bottom: 0.434rem;
  font-size: 1.1666666667rem;
  line-height: 2rem;
  display: block;
}

.p8 {
  padding-top: 0.597rem;
  padding-bottom: 0.403rem;
  font-size: 1.0833333333rem;
  line-height: 2rem;
  display: block;
}

code,
kbd,
samp {
  padding: 0 0.2em;
  line-height: 0;
  color: #383838;
  font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  background: #f7f7f7;
  border-radius: 0;
}

.code {
  padding: 0 2rem;
  background: #f7f7f7;
  border-radius: 0;
}

.code code,
.code samp,
.code kbd {
  padding-top: 0.6895383333rem;
  padding-bottom: 0.3104616667rem;
  font-size: 1.1666666667rem;
  line-height: 2rem;
  display: block;
  padding-right: 0;
  padding-left: 0;
  background: none;
  border-radius: 0;
}

q,
.quote p {
  font-style: italic;
}

q {
  line-height: 0;
}

q::before {
  padding: 0 0.3em;
  content: '"';
}

q::after {
  padding: 0 0.3em 0 0.2em;
  content: '"';
}

q q::before {
  content: "'";
}

q q::after {
  content: "'";
}

cite {
  color: #b8b8b8;
  font-style: italic;
  font-weight: 500;
}

.quote {
  padding: 2rem;
}

.quote p {
  padding-top: 0.442rem;
  padding-bottom: 0.558rem;
  font-size: 1.5rem;
  line-height: 2rem;
  margin: 0 auto 1rem;
}

.quote p:first-child {
  position: relative;
}

.quote p:first-child::before {
  display: block;
  position: absolute;
  top: 0;
  left: -2rem;
  width: 2rem;
  font-size: 2.5em;
  content: '"';
  color: #b8b8b8;
}

.quote p:last-of-type {
  margin-bottom: 0;
}

.quote footer {
  color: #b8b8b8;
}

.quote footer::before {
  display: inline-block;
  vertical-align: middle;
  width: 2em;
  margin-right: 1em;
  border-width: 1px 0 0;
  content: "";
  border-style: solid;
}

a:not(.btn) {
  color: #383838;
  text-decoration: underline;
}

a:not(.btn):hover {
  color: #1f1f1f;
}

a.link-light:not(.btn) {
  color: rgba(255, 255, 255, 0.9);
}

a.link-light:not(.btn):hover {
  color: white;
}

mark {
  padding: 0 0.2em;
  color: #fa73a0;
  background: #fedfe9;
  border-radius: 0;
}

ul,
ol {
  list-style-position: outside;
}

ul ul,
ul ol,
ol ul,
ol ol {
  padding: 0 0 0 2em;
}

dt {
  font-weight: 500;
}

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

sub {
  bottom: -0.25em;
  font-feature-settings: "subs" 1;
}

sup {
  top: -0.5em;
  font-feature-settings: "sups" 1;
}

.alert {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem;
  overflow: hidden;
  background: #383838;
  border-radius: 0;
}

.alert-action {
  flex: 0 0 auto;
  order: 1;
}

.alert-content {
  padding: 0;
  margin: 0 1rem;
  color: rgba(255, 255, 255, 0.9);
}

.article {
  max-width: 47.6666666667rem;
  padding: 1rem;
  margin: 0 auto;
}

.article > * {
  margin: 2rem 0;
}

.article > h1,
.article > h2,
.article > h3,
.article > h4,
.article > h5,
.article > h6 {
  margin: 2rem 0 1rem;
}

.article > h1 + h2,
.article > h2 + h3,
.article > h3 + h4,
.article > h4 + h5,
.article > h5 + h6 {
  margin: 1rem 0;
}

.article > p {
  margin: 1rem 0;
}

.article > .media {
  display: block;
  width: 100%;
}

.article > ul,
.article > ol,
.article > dl {
  margin: 1rem 0;
}

.avatar-x,
.avatar-y {
  display: inline-flex;
  vertical-align: top;
  align-items: center;
}

.avatar-x .media,
.avatar-y .media {
  flex: 0 0 auto;
  width: 4rem;
  height: 4rem;
  background-color: #f7f7f7;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23b3b3b3' d='M437.02,330.98c-27.883-27.882-61.071-48.523-97.281-61.018C378.521,243.251,404,198.548,404,148 C404,66.393,337.607,0,256,0S108,66.393,108,148c0,50.548,25.479,95.251,64.262,121.962 c-36.21,12.495-69.398,33.136-97.281,61.018C26.629,379.333,0,443.62,0,512h40c0-119.103,96.897-216,216-216s216,96.897,216,216 h40C512,443.62,485.371,379.333,437.02,330.98z M256,256c-59.551,0-108-48.448-108-108S196.449,40,256,40 c59.551,0,108,48.448,108,108S315.551,256,256,256z'/%3E%3C/svg%3E");
  background-position: center;
  background-size: 50% auto;
  border-radius: 100%;
}

.avatar-x .media img,
.avatar-y .media img {
  width: 100%;
  height: 100%;
  background: none;
  border-radius: 100%;
}

.avatar-info {
  flex: 0 0 auto;
  height: 4rem;
}

.avatar-name,
.avatar-description {
  padding: 0;
  line-height: 1.7