:root {
  /* Solid colors */
  --color-signal: #f19000;
  --color-strong-solid: #010d34;
  --color-muted-solid: #c5cdd7;
  --color-weak-solid: #fff;
  --color-faint-solid: #e2e4ea;
  /* Basic colors */
  --color-strong: rgb(1, 16, 59);
  --color-muted: rgba(6, 23, 80, 0.7);
  --color-weak: rgba(62, 86, 122, 0.3);
  --color-faint: rgba(5, 36, 139, .06);
  --color-red: #ef4d65;
  --color-green: #79e230;
  --color-yellow: #fed000;
  --color-orange: #ffa535;
  --color-blue: #179be6;
  --color-violet: #b482f2;
  --color-white: #fff;
  /* Hover colors */
  --color-signal-hover: #d06200;
  --color-strong-hover: #00134a;
  --color-muted-hover: rgba(0, 22, 31, 0.6);
  --color-weak-hover: rgba(0, 32, 38, 0.34);
  --color-faint-hover: rgba(28, 33, 0, 0.2);
  --color-red-hover: #d4112f;
  --color-green-hover: #59b816;
  --color-yellow-hover: #ecb900;
  --color-orange-hover: #d0780a;
  --color-blue-hover: #0c72e0;
  --color-violet-hover: #7b2edd;
  --color-white-hover: #d2d2d2;
  /* Font sizes */
  --font-size: 1em;
  --font-size-xs: 11px;
  --font-size-s: 13px;
  --font-size-m: 16px;
  --font-size-l: 18px;
  --font-size-xl: 24px;
  --font-size-2xl: 32px;
  --font-size-3xl: 64px;
  --font-size-4xl: 140px;
  /* Typography */
  --font-family-sans: 'Nunito Sans', sans-serif;
  --font-family-mono: monaco, 'Consolas', 'Lucida Console', monospace;
  --bold: 700;
  /* Line height */
  --line-height: 1.6;
  --line-height-s: 1.1;
  --line-height-m: 1.3;
  --line-height-l: 1.5;
  --line-height-xl: 1.7;
  /* Letter spacing */
  --letter-spacing: 0.05ch;
  --letter-spacing-s: 0.1ch;
  --letter-spacing-m: 0.2ch;
  --letter-spacing-l: 0.3ch;
  --letter-spacing-xl: 0.4ch;
  /* Forms */
  --input-border-width: 3px;
  /* Forms */
  --table-striped-bg: var(--color-faint-solid);
  /* Corner radius */
  --rounded-s: 3px;
  --rounded-m: 6px;
  --rounded-l: 10px;
  --rounded-xl: 20px;
  /* Border width */
  --border-s: 1px;
  --border-m: 2px;
  --border-l: 3px;
  --border-xl: 5px;
  /* Border color */
  --border-color: var(--color-strong);
  /* Offsets */
  --offset-xs: 5px;
  --offset-s: 10px;
  --offset-m: 20px;
  --offset-l: 30px;
  --offset-xl: 50px;
  --offset-2xl: 80px;
  /* Transitions */
  --transition-fastest: all 0.07s cubic-bezier(0, 0.9, 0.45, 1);
  --transition-fast: all 0.14s cubic-bezier(0, 0.9, 0.45, 1);
  --transition-medium: all 0.24s cubic-bezier(0, 0.9, 0.45, 1);
  --transition-slow: all 0.37s cubic-bezier(0, 0.9, 0.45, 1);
  --transition-slowest: all 0.5s cubic-bezier(0, 0.9, 0.45, 1);
  /* Shadows */
  --shadow-s: 0 2px 10px rgba(50, 116, 165, 0.2);
  --shadow-m: 0 5px 30px rgba(50, 116, 165, 0.18);
  --shadow-l: 0 0 150px rgba(50, 116, 165, 0.2);
  /* Scaling */
  --scale-s: 1.05;
  --scale-m: 1.1;
  --scale-l: 1.2;
  /* Grid */
  --grid-gap-s: 5px;
  --grid-gap-m: 10px;
  --grid-gap-l: 20px;
}

.inverted *,
*.inverted {
  --color-signal: #ffb431;
  --color-strong: rgb(255, 255, 255);
  --color-muted: rgba(247, 255, 249, 0.6);
  --color-weak: rgba(247, 255, 237, 0.27);
  --color-faint: rgba(250, 255, 237, 0.12);
  --color-white: var(--color-strong-solid);
  --color-signal-hover: #ffce6e;
  --color-strong-hover: rgba(255, 255, 255, 1);
  --color-muted-hover: rgba(247, 255, 249, 0.7);
  --color-weak-hover: rgba(247, 255, 243, 0.34);
  --color-faint-hover: rgba(253, 255, 247, 0.2);
  --color-red-hover: #fd8596;
  --color-green-hover: #b2ff7a;
  --color-yellow-hover: #fcffaf;
  --color-orange-hover: #ffc278;
  --color-blue-hover: #4edcff;
  --color-violet-hover: #cda6ff;
  --color-white-hover: #e0e0e0;
}

/* HTML
----------------------------------------------------------------------------------------------------------------------*/
div {
  box-sizing: border-box;
}

html,
body {
  background-color: var(--color-white);
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  font-family: "Segoe UI", "Helvetica Neue", sans-serif; /*fallback*/
}

body {
  font-family: var(--font-family-sans);
  letter-spacing: 0.05em;
  line-height: var(--line-height);
  font-size: var(--font-size);
  color: var(--color-strong);
  margin: 0;
  padding: 0;
}

body.inverted,
body .inverted {
  color: var(--color-strong);
}

a {
  background-color: transparent;
  outline: none;
  color: var(--color-signal);
  text-decoration: none;
  transition: var(--transition-fast);
}

a:hover {
  color: var(--color-strong);
  -webkit-tap-highlight-color: transparent;
  text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: var(--bold);
  font-size: 16px;
  line-height: 1.4;
  margin: 0;
}

h1 {
  font-size: 2em;
}

h2 {
  font-size: 1.75em;
}

h3 {
  font-size: 1.5em;
}

h4 {
  font-size: 1.25em;
}

h5 {
  font-size: 1em;
}

h6 {
  font-size: 0.85em;
}

p {
  margin: 0;
  line-height: var(--line-height);
}

i,
em {
  font-style: italic;
}

b,
strong {
  font-weight: var(--bold);
}

abbr[title] {
  border-bottom: none;
}

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

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

img {
  border-style: none;
  max-width: 100%;
}

button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
  line-height: 1.4;
  color: var(--color-strong);
  border: none;
  background: transparent;
  outline: none;
  margin: 0;
}

button {
  font-family: inherit;
  border: none;
  background: transparent;
  outline: none;
}

button:hover {
  cursor: pointer;
}

button:focus {
  outline: none;
}

button,
input {
  overflow: visible;
}

button,
select {
  text-transform: none;
}

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

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

progress {
  vertical-align: baseline;
}

textarea {
  overflow: auto;
}

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

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

[type="search"] {
  -webkit-appearance: textfield;
  outline: 0;
}

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

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

details {
  display: block;
}

summary {
  display: list-item;
}

template {
  display: none;
}

code,
kbd,
pre,
samp,
tt {
  font-family: var(--font-family-mono);
}

code,
kbd {
  font-size: 90%;
  white-space: pre-wrap;
  border-radius: 4px;
  padding: 0.2em 0.4em;
  background-color: var(--color-faint);
  color: var(--color-red);
}

pre {
  background-color: var(--color-faint);
  font-size: 1em;
  padding: 1rem;
  overflow-x: auto;
}

pre code {
  background: none;
  padding: 0;
}

abbr[title] {
  border-bottom: none;
  text-decoration: underline dotted;
}

iframe {
  border: 0;
}

[hidden] {
  display: none;
}

/* Block-Quote
----------------------------------------------------------------------------------------------------------------------*/
blockquote {
  font: bold 32px / 1.7 serif;
  font-style: italic;
  letter-spacing: 0;
  color: var(--color-muted);
  margin: 4em 0 2em 0;
  padding: 0 0 0 4em;
  overflow-wrap: break-word;
}

/* Lists
----------------------------------------------------------------------------------------------------------------------*/
ol {
  list-style-type: decimal;
  padding: 0;
}

ul {
  list-style-type: circle;
  padding: 0;
}

ul li {
  margin-bottom: .7em;
}

ul li li {
  list-style-type: square;
}

ul.inline-list {
  list-style: none;
}

ul.inline-list li {
  display: inline-block;
  margin-bottom: 0;
  margin-left: 0;
}

ul.inline-list li li {
  list-style: none;
}

dt {
  font-weight: var(--bold);
}

dd,
li {
  margin-left: 10px;
}

dd > *,
li > * {
  margin-top: 0;
}

/* Horizontal rule
----------------------------------------------------------------------------------------------------------------------*/
hr {
  background: none;
  border: none;
  border-bottom: var(--input-border-width) solid var(--color-faint);
  width: auto;
  height: 0;
  overflow: hidden;
  box-sizing: content-box;
}

hr.dotted {
  border-style: none;
  border-bottom-style: dashed;
}

hr.dashed {
  border-style: none;
  border-bottom-style: dashed;
}

hr.s {
  border-width: 1px;
}

hr.m {
  border-width: 3px;
}

hr.l {
  border-width: 5px;
}

hr.short {
  width: 5em;
}

/* Tables
----------------------------------------------------------------------------------------------------------------------*/
table {
  display: table;
  border-collapse: collapse;
  text-align: left;
  width: 99.9%;
}

table tr th {
  color: var(--color-strong);
  font-weight: var(--bold);
  padding: 1em .9em;
  border-bottom: var(--input-border-width) solid var(--color-weak);
}

table tr td {
  padding: 10px 8px;
  border-bottom: 1px solid var(--color-faint);
}

table tbody tr:last-child td {
  border-bottom: none;
}

table.striped tr:nth-of-type(even) td {
  background-color: var(--table-striped-bg);
}

table.hoverable tbody tr:hover td {
  background-color: rgba(128, 113, 0, 0.045);
}

table.table-fixed {
  table-layout: fixed;
}

table tr td:first-of-type,
table tr th:first-of-type {
  padding-left: 0;
}

table tr td:last-of-type,
table tr th:last-of-type {
  padding-right: 0;
}

/* Forms
----------------------------------------------------------------------------------------------------------------------*/
::-webkit-input-placeholder {
  color: var(--color-weak);
}

:-moz-placeholder {
  color: var(--color-weak);
}

::-moz-placeholder {
  color: var(--color-weak);
}

:-ms-input-placeholder {
  color: var(--color-weak);
}

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

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

input,
textarea,
select {
  background-color: var(--color-white);
  border: var(--input-border-width) solid var(--color-faint);
  border-radius: var(--rounded-s);
  outline: none;
  width: 100%;
  font-size: var(--font-size);
  line-height: 1;
  box-shadow: none;
  box-sizing: border-box;
  transition: var(--transition-fast);
}

textarea {
  overflow-y: hidden;
  resize: vertical;
  transition: height 0s, width 0s;
  line-height: 1.4;
}

input:hover,
textarea:hover,
select:hover {
  color: var(--color-strong-solid);
  border-color: var(--color-weak-solid);
}

input:focus,
textarea:focus,
select:focus {
  color: var(--color-strong);
  border-color: var(--color-signal);
}

input:disabled,
textarea:disabled,
select:disabled {
  background-color: var(--color-faint);
  color: var(--color-weak);
  border-color: var(--color-weak-solid);
  opacity: 0.5;
}

input:disabled:hover,
textarea:disabled:hover,
select:disabled:hover {
  color: var(--color-weak);
  border-color: var(--color-weak-solid);
}

/* Select
----------------------------------------------------------------------------------------------------------------------*/
.select {
  position: relative;
}

.select select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.select .select-indicator {
  position: absolute;
  width: 17px;
  height: 12px;
  right: 16px;
  top: 50%;
  margin-top: -6px;
  transition: cubic-bezier(0, 0.9, 0.45, 1) all 0.4s;
}

.select .select-indicator:after,
.select .select-indicator:before {
  content: '';
  position: absolute;
  width: 4px;
  height: 12px;
  left: 8px;
  top: 0;
  border-radius: 4px;
  background: var(--color-weak-solid);
  transform-origin: bottom;
  transition: cubic-bezier(0, 0.9, 0.45, 1) all 0.4s;
}

.select .select-indicator:before {
  transform: rotate(-45deg);
}

.select .select-indicator:after {
  transform: rotate(45deg) translate(-2px, 2px);
}

.select:hover select:not(:disabled) + .select-indicator:after,
.select:hover select:not(:disabled) + .select-indicator:before,
.select:focus select:not(:disabled) + .select-indicator:after,
.select:focus select:not(:disabled) + .select-indicator:before {
  background-color: var(--color-muted-solid);
}

.select select:disabled + .select-indicator {
  opacity: 0.5;
}

/* Input icon
----------------------------------------------------------------------------------------------------------------------*/
.input-icon {
  position: relative;
}

.input-icon input {
  padding-left: 46px;
}

.input-icon > :not(input) {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  top: 0;
  bottom: 0;
  left: 0;
}

/* Checkbox and Radio
----------------------------------------------------------------------------------------------------------------------*/
.checkbox,
.radio {
  font-weight: 400;
  letter-spacing: 0.05em;
  text-transform: none;
}

.checkbox *,
.radio * {
  vertical-align: middle;
}

.checkbox input[type=checkbox],
.radio input[type=radio] {
  position: fixed;
  opacity: 0;
  width: 10px;
  height: 10px;
  z-index: -9;
}

.checkbox-indicator,
.radio-indicator,
.switch-indicator {
  position: relative;
  display: inline-block;
  box-sizing: content-box;
  top: -2px;
  width: 20px;
  height: 20px;
  margin-right: 10px;
  background-color: var(--color-white);
  border: var(--input-border-width) solid var(--color-weak);
  border-radius: var(--rounded-s);
  transition: var(--transition-fast);
}

.checkbox-indicator:before,
.checkbox-indicator:after {
  position: absolute;
  content: '';
  width: 5px;
  border-radius: var(--rounded-s);
  background: var(--color-signal);
  transition: var(--transition-fast);
  transform-origin: bottom;
  opacity: 0;
}

.checkbox-indicator:before {
  transform: rotate(-45deg) scaleY(0.2);
  height: 10px;
  left: 7px;
  top: 5px;
}

.checkbox-indicator:after {
  transform: rotate(45deg) scaleY(0.2);
  height: 23px;
  left: 5px;
  top: -7px;
}

.checkbox input[type=checkbox]:checked + .checkbox-indicator:before {
  transform: rotate(-45deg) scaleY(1);
  opacity: 1;
}

.checkbox input[type=checkbox]:checked + .checkbox-indicator:after {
  transform: rotate(45deg) scaleY(1);
  opacity: 1;
}

.checkbox input[type=checkbox]:hover + .checkbox-indicator,
.radio input[type=radio]:hover + .radio-indicator {
  border-color: var(--color-muted);
}

.checkbox input[type=checkbox]:focus + .checkbox-indicator,
.radio input[type=radio]:focus + .radio-indicator {
  border-color: var(--color-muted);
}

.switch-indicator {
  top: -2px;
  width: 36px;
  height: 20px;
  border-radius: 30px;
}

.switch-indicator:before {
  display: none;
}

.switch-indicator:after {
  position: absolute;
  content: '';
  width: 16px;
  height: 16px;
  top: 2px;
  left: 2px;
  border-radius: 100%;
  background: var(--color-weak-solid);
  transition: 0.4s all cubic-bezier(0, 0.9, 0.45, 1);
  transform-origin: center;
}

.checkbox input[type=checkbox]:checked + .switch-indicator:after {
  background: var(--color-signal);
  border-color: var(--color-signal);
  transform: translate(16px, 0);
}

.checkbox input[type=checkbox]:hover + .switch-indicator,
.radio input[type=radio]:hover + .radio-indicator {
  border-color: var(--color-muted);
}

.checkbox input[type=checkbox]:focus + .switch-indicator,
.radio input[type=radio]:focus + .radio-indicator {
  border-color: var(--color-muted);
}

.radio-indicator {
  border-radius: 100%;
}

.radio-indicator:before {
  position: absolute;
  content: '';
  width: 14px;
  height: 14px;
  top: 3px;
  left: 3px;
  background: var(--color-signal);
  border-radius: 100%;
  transition: 0.4s all cubic-bezier(0, 0.9, 0.45, 1);
  opacity: 0;
  transform: scale(0.2);
}

.radio input[type=radio]:checked + .radio-indicator:before {
  opacity: 1;
  transform: scale(1);
}

.checkbox-indicator.size-xs,
.radio-indicator.size-xs,
.switch-indicator.size-xs {
  transform: scale(0.6);
  margin: -3px 10px -3px -4px;
}

.checkbox-indicator.size-s,
.radio-indicator.size-s,
.switch-indicator.size-s {
  transform: scale(0.77);
  margin: -2px 10px -2px -2px;
}

.checkbox-indicator.size-m,
.radio-indicator.size-m,
.switch-indicator.size-m {
  transform: scale(1);
}

.checkbox-indicator.size-l,
.radio-indicator.size-l,
.switch-indicator.size-l {
  transform: scale(1.23);
  margin: 5px 12px 5px 3px;
}

.checkbox-indicator.size-xl,
.radio-indicator.size-xl,
.switch-indicator.size-xl {
  transform: scale(1.6);
  margin: 5px 18px 5px 3px;
}

.checkbox input[type=checkbox]:disabled + .checkbox-indicator,
.checkbox input[type=checkbox]:disabled + .switch-indicator,
.radio input[type=radio]:disabled + .radio-indicator {
  pointer-events: none;
  background: var(--color-faint);
  opacity: 0.5;
}

.checkbox input[type=checkbox]:disabled + .checkbox-indicator:before,
.radio input[type=radio]:disabled + .radio-indicator:before {
  background: var(--color-weak-solid);
}

.checkbox input[type=checkbox]:disabled + .checkbox-indicator:after,
.checkbox input[type=checkbox]:disabled + .switch-indicator:after,
.radio input[type=radio]:disabled + .radio-indicator:after {
  background: var(--color-weak-solid);
}

.checkbox input[type=checkbox]:disabled:hover + .checkbox-indicator,
.checkbox input[type=checkbox]:disabled:hover + .switch-indicator,
.radio input[type=radio]:disabled:hover + .radio-indicator {
  border-color: var(--color-weak-solid);
}

/* Buttons
----------------------------------------------------------------------------------------------------------------------*/
.btn,
.btn a {
  text-decoration: none;
  outline: 0;
  cursor: pointer;
}

.btn {
  display: inline-flex;
  align-self: center;
  align-content: center;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  color: var(--color-white);
  background: var(--color-signal);
  border: var(--input-border-width) solid transparent;
  border-radius: var(--rounded-s);
  font-size: .8em;
  font-weight: normal;
  line-height: 1;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-align: center;
  min-height: 38px;
  padding: 4px 18px;
  vertical-align: middle;
  transition: all 0.5s cubic-bezier(0, 0.9, 0.45, 1);
  -webkit-tap-highlight-color: transparent;
  box-shadow: none;
  filter: none;
}

.btn:focus {
  color: var(--color-white);
  background: var(--color-signal);
  border-color: var(--color-strong-solid);
  box-shadow: none;
  filter: none;
}

.btn:hover {
  color: var(--color-white);
  background: var(--color-strong-solid);
  border-color: transparent;
  box-shadow: none;
  filter: none;
}

.btn:active {
  color: var(--color-white);
  background: var(--color-strong-solid);
  border-color: var(--color-strong-solid);
  box-shadow: none;
  filter: contrast(120%) saturate(130%) brightness(80%);
}

.btn.strong-bg {
  color: var(--color-white);
  background: var(--color-strong);
}

.btn.strong-bg:focus {
  border-color: var(--color-signal);
}

.btn.strong-bg:hover {
  background: var(--color-signal);
}

.btn.muted-bg {
  color: var(--color-white);
  background: var(--color-muted);
}

.btn.muted-bg:hover {
  background: var(--color-strong-solid);
}

.btn.muted-bg:focus {
  border-color: var(--color-strong-solid);
}

.btn.weak-bg {
  color: var(--color-strong-solid);
  background: var(--color-weak);
}

.btn.weak-bg:hover {
  background: var(--color-muted-solid);
}

.btn.weak-bg:focus {
  border-color: var(--color-strong-solid);
}

.btn.faint-bg {
  color: var(--color-strong-solid);
  background: var(--color-faint);
}

.btn.faint-bg:hover {
  background: var(--color-weak-solid);
}

.btn.faint-bg:focus {
  border-color: var(--color-weak-solid);
}

.btn.red-bg {
  color: var(--color-white);
  background: var(--color-red);
}

.btn.red-bg:hover {
  background: #c70b1e;
}

.btn.red-bg:focus {
  border-color: #c70b1e;
}

.btn.orange-bg {
  color: var(--color-white);
  background: var(--color-orange);
}

.btn.orange-bg:hover {
  background: #d87800;
}

.btn.orange-bg:focus {
  border-color: #d87800;
}

.btn.green-bg {
  color: var(--color-white);
  background: var(--color-green);
}

.btn.green-bg:hover {
  background: #8da724;
}

.btn.green-bg:focus {
  border-color: #8da724;
}

.btn.yellow-bg {
  color: var(--color-strong-solid);
  background: var(--color-yellow);
}

.btn.yellow-bg:hover {
  background: #dac012;
}

.btn.yellow-bg:focus {
  border-color: #dac012;
}

.btn.blue-bg {
  color: var(--color-white);
  background: var(--color-blue);
}

.btn.blue-bg:hover {
  background: #076cd8;
}

.btn.blue-bg:focus {
  border-color: #076cd8;
}

.btn.violet-bg {
  color: var(--color-white);
  background: var(--color-violet);
}

.btn.violet-bg:hover {
  background: #771de7;
}

.btn.violet-bg:focus {
  border-color: #771de7;
}

.btn.white-bg {
  color: var(--color-strong-solid);
  background: var(--color-white);
}

.btn.blank {
  color: var(--color-signal);
}

.btn.blank.blank:hover,
.btn.blank.blank:focus {
  color: var(--color-strong-solid);
}

.btn.white-bg.signal,
.btn.blank.signal {
  color: var(--color-signal);
}

.btn.white-bg.signal:hover,
.btn.blank.signal:hover,
.btn.white-bg.signal.blank.signal:hover,
.btn.blank.signal.blank.signal:hover {
  color: var(--color-strong-solid);
}

.btn.white-bg.strong,
.btn.blank.strong {
  color: var(--color-strong-solid);
}

.btn.white-bg.strong:hover,
.btn.blank.strong:hover,
.btn.white-bg.strong.blank.strong:hover,
.btn.blank.strong.blank.strong:hover {
  color: var(--color-signal);
}

.btn.white-bg.muted,
.btn.blank.muted {
  color: var(--color-muted-solid);
}

.btn.white-bg.muted:hover,
.btn.blank.muted:hover,
.btn.white-bg.muted.blank.muted:hover,
.btn.blank.muted.blank.muted:hover {
  color: var(--color-strong-solid);
}

.btn.white-bg.red,
.btn.blank.red {
  color: var(--color-red);
}

.btn.white-bg.red:hover,
.btn.blank.red:hover,
.btn.white-bg.red.blank.red:hover,
.btn.blank.red.blank.red:hover {
  color: #c70b1e;
}

.btn.white-bg.orange,
.btn.blank.orange {
  color: var(--color-orange);
}

.btn.white-bg.orange:hover,
.btn.blank.orange:hover,
.btn.white-bg.orange.blank.orange:hover,
.btn.blank.orange.blank.orange:hover {
  color: #d87800;
}

.btn.white-bg.green,
.btn.blank.green {
  color: var(--color-green);
}

.btn.white-bg.green:hover,
.btn.blank.green:hover,
.btn.white-bg.green.blank.green:hover,
.btn.blank.green.blank.green:hover {
  color: #8da724;
}

.btn.white-bg.blue,
.btn.blank.blue {
  color: var(--color-blue);
}

.btn.white-bg.blue:hover,
.btn.blank.blue:hover,
.btn.white-bg.blue.blank.blue:hover,
.btn.blank.blue.blank.blue:hover {
  color: #076cd8;
}

.btn.white-bg.violet,
.btn.blank.violet {
  color: var(--color-violet);
}

.btn.white-bg.violet:hover,
.btn.blank.violet:hover,
.btn.white-bg.violet.blank.violet:hover,
.btn.blank.violet.blank.violet:hover {
  color: #771de7;
}

.btn.white-bg:hover,
.btn.blank:hover {
  color: var(--color-signal);
  background: var(--color-faint-solid);
  border-color: var(--color-faint-solid);
}

.btn.white-bg:focus,
.btn.blank:focus {
  border-color: var(--color-weak-solid);
}

.btn.blank,
.btn.blank:hover,
.btn.blank:focus {
  border-color: transparent;
  background: transparent;
}

.btn.ghost {
  color: var(--color-signal);
  background: transparent;
  border-color: var(--color-signal);
}

.btn.ghost:hover,
.btn.ghost:focus {
  color: var(--color-strong-solid);
  background: transparent;
  border-color: var(--color-strong-solid);
}

.btn.ghost.strong,
.btn.ghost.strong-bg {
  border-color: var(--color-strong-solid);
  color: var(--color-strong-solid);
}

.btn.ghost.strong:hover,
.btn.ghost.strong-bg:hover,
.btn.ghost.strong:focus,
.btn.ghost.strong-bg:focus {
  border-color: var(--color-signal);
  color: var(--color-signal);
}

.btn.ghost.muted,
.btn.ghost.muted-bg {
  border-color: var(--color-muted-solid);
  color: var(--color-muted-solid);
}

.btn.ghost.muted:hover,
.btn.ghost.muted-bg:hover,
.btn.ghost.muted:focus,
.btn.ghost.muted-bg:focus {
  border-color: var(--color-strong-solid);
  color: var(--color-strong-solid);
}

.btn.ghost.weak,
.btn.ghost.weak-bg {
  border-color: var(--color-weak-solid);
  color: var(--color-weak-solid);
}

.btn.ghost.weak:hover,
.btn.ghost.weak-bg:hover,
.btn.ghost.weak:focus,
.btn.ghost.weak-bg:focus {
  border-color: var(--color-muted-solid);
  color: var(--color-muted-solid);
}

.btn.ghost.faint,
.btn.ghost.faint-bg {
  border-color: var(--color-faint-solid);
  color: var(--color-faint-solid);
}

.btn.ghost.faint:hover,
.btn.ghost.faint-bg:hover,
.btn.ghost.faint:focus,
.btn.ghost.faint-bg:focus {
  border-color: var(--color-weak-solid);
  color: var(--color-weak-solid);
}

.btn.ghost.white,
.btn.ghost.white-bg {
  border-color: var(--color-white);
  color: var(--color-white);
}

.btn.ghost.white:hover,
.btn.ghost.white-bg:hover,
.btn.ghost.white:focus,
.btn.ghost.white-bg:focus {
  border-color: var(--color-faint-solid);
  color: var(--color-faint-solid);
}

.btn.ghost.red,
.btn.ghost.red-bg {
  border-color: var(--color-red);
  color: var(--color-red);
}

.btn.ghost.red:hover,
.btn.ghost.red-bg:hover,
.btn.ghost.red:focus,
.btn.ghost.red-bg:focus {
  border-color: #c70b1e;
  color: #c70b1e;
}

.btn.ghost.orange,
.btn.ghost.orange-bg {
  border-color: var(--color-orange);
  color: var(--color-orange);
}

.btn.ghost.orange:hover,
.btn.ghost.orange-bg:hover,
.btn.ghost.orange:focus,
.btn.ghost.orange-bg:focus {
  border-color: #d87800;
  color: #d87800;
}

.btn.ghost.green,
.btn.ghost.green-bg {
  border-color: var(--color-green);
  color: var(--color-green);
}

.btn.ghost.green:hover,
.btn.ghost.green-bg:hover,
.btn.ghost.green:focus,
.btn.ghost.green-bg:focus {
  border-color: #8da724;
  color: #8da724;
}

.btn.ghost.yellow,
.btn.ghost.yellow-bg {
  border-color: var(--color-yellow);
  color: var(--color-yellow);
}

.btn.ghost.yellow:hover,
.btn.ghost.yellow-bg:hover,
.btn.ghost.yellow:focus,
.btn.ghost.yellow-bg:focus {
  border-color: #dac012;
  color: #dac012;
}

.btn.ghost.blue,
.btn.ghost.blue-bg {
  border-color: var(--color-blue);
  color: var(--color-blue);
}

.btn.ghost.blue:hover,
.btn.ghost.blue-bg:hover,
.btn.ghost.blue:focus,
.btn.ghost.blue-bg:focus {
  border-color: #076cd8;
  color: #076cd8;
}

.btn.ghost.violet,
.btn.ghost.violet-bg {
  border-color: var(--color-violet);
  color: var(--color-violet);
}

.btn.ghost.violet:hover,
.btn.ghost.violet-bg:hover,
.btn.ghost.violet:focus,
.btn.ghost.violet-bg:focus {
  border-color: #771de7;
  color: #771de7;
}

.btn.disabled,
.btn:disabled,
.btn.disabled:hover,
.btn:disabled:hover {
  background-color: var(--color-weak) !important;
  color: var(--color-muted) !important;
  border-color: transparent !important;
  box-shadow: none;
  filter: none;
  cursor: default;
}

.btn.disabled *,
.btn:disabled * {
  pointer-events: none;
}

.btn [class^='spinner'],
.btn [class*=' spinner'] {
  top: 0;
}

/* Size control
----------------------------------------------------------------------------------------------------------------------*/
.v-m,
.vh-m,
input:not([type='radio']),
input:not([type='checkbox']),
input:not([type='submit']),
input:not([type='file']),
input:not([type='range']),
select,
textarea {
  min-height: 38px;
  padding-top: 4px;
  padding-bottom: 4px;
}

.btn.v-0,
.btn.vh-0,
input.v-0,
input.vh-0,
select.v-0,
select.vh-0,
textarea.v-0,
textarea.vh-0 {
  min-height: 20px;
  padding-top: 0;
  padding-bottom: 0;
}

.btn.v-xs,
.btn.vh-xs,
input.v-xs,
input.vh-xs,
select.v-xs,
select.vh-xs,
textarea.v-xs,
textarea.vh-xs {
  min-height: 24px;
  padding-top: 1px;
  padding-bottom: 1px;
}

.btn.v-s,
.btn.vh-s,
input.v-s,
input.vh-s,
select.v-s,
select.vh-s,
textarea.v-s,
textarea.vh-s {
  min-height: 30px;
  padding-top: 2px;
  padding-bottom: 2px;
}

.btn.v-l,
.btn.vh-l,
input.v-l,
input.vh-l,
select.v-l,
select.vh-l,
textarea.v-l,
textarea.vh-l {
  min-height: 50px;
  padding-top: 4px;
  padding-bottom: 4px;
}

.btn.v-xl,
.btn.vh-xl,
input.v-xl,
input.vh-xl,
select.v-xl,
select.vh-xl,
textarea.v-xl,
textarea.vh-xl {
  min-height: 66px;
  padding-top: 6px;
  padding-bottom: 6px;
}

.h-m,
.vh-m,
input:not([type='radio']),
input:not([type='checkbox']),
input:not([type='submit']),
input:not([type='file']),
input:not([type='range']),
select,
textarea {
  padding-left: 12px;
  padding-right: 12px;
}

.btn.h-0,
.btn.vh-0,
input.h-0,
input.vh-0,
select.h-0,
select.vh-0,
textarea.h-0,
textarea.vh-0 {
  padding-left: 0;
  padding-right: 0;
}

.btn.h-xs,
.btn.vh-xs,
input.h-xs,
input.vh-xs,
select.h-xs,
select.vh-xs,
textarea.h-xs,
textarea.vh-xs {
  padding-left: 2px;
  padding-right: 2px;
}

.btn.h-s,
.btn.vh-s,
input.h-s,
input.vh-s,
select.h-s,
select.vh-s,
textarea.h-s,
textarea.vh-s {
  padding-left: 6px;
  padding-right: 6px;
}

.btn.h-l,
.btn.vh-l,
input.h-l,
input.vh-l,
select.h-l,
select.vh-l,
textarea.h-l,
textarea.vh-l {
  padding-left: 18px;
  padding-right: 18px;
}

.btn.h-xl,
.btn.vh-xl,
input.h-xl,
input.vh-xl,
select.h-xl,
select.vh-xl,
textarea.h-xl,
textarea.vh-xl {
  padding-left: 28px;
  padding-right: 28px;
}

.btn.h-2xl,
input.h-2xl,
select.h-2xl,
textarea.h-2xl {
  padding-left: 42px;
  padding-right: 42px;
}

.btn.h-3xl,
input.h-3xl,
select.h-3xl,
textarea.h-3xl {
  padding-left: 60px;
  padding-right: 60px;
}

.input-icon input.v-0,
.input-icon input.vh-0 {
  padding-left: 19px;
}

.input-icon input.v-xs,
.input-icon input.vh-xs {
  padding-left: 21px;
}

.input-icon input.v-s,
.input-icon input.vh-s {
  padding-left: 27px;
}

.input-icon input,
.input-icon input.v-m,
.input-icon input.vh-m {
  padding-left: 35px;
}

.input-icon input.v-l,
.input-icon input.vh-l {
  padding-left: 47px;
}

.input-icon input.v-xl,
.input-icon input.vh-xl {
  padding-left: 63px;
}

.input-icon input.v-0 + :not(input),
.input-icon input.vh-0 + :not(input) {
  width: 23px;
}

.input-icon input.v-xs + :not(input),
.input-icon input.vh-xs + :not(input) {
  width: 23px;
}

.input-icon input.v-s + :not(input),
.input-icon input.vh-s + :not(input) {
  width: 28px;
}

.input-icon input.v-m + :not(input),
.input-icon input.vh-m + :not(input),
.input-icon input + :not(input),
.input-icon select + :not(input),
.input-icon textarea + :not(input) {
  width: 40px;
}

.input-icon input.v-l + :not(input),
.input-icon input.vh-l + :not(input) {
  width: 52px;
}

.input-icon input.v-xl + :not(input),
.input-icon input.vh-xl + :not(input) {
  width: 72px;
}

.v-0 + .select-indicator,
.vh-0 + .select-indicator {
  transform: scale(0.5);
  right: 4px;
}

.v-xs + .select-indicator,
.vh-xs + .select-indicator {
  transform: scale(0.65);
  right: 6px;
}

.v-s + .select-indicator,
.vh-s + .select-indicator {
  transform: scale(0.75);
  right: 8px;
}

.v-m + .select-indicator,
.vh-m + .select-indicator,
select + .select-indicator {
  transform: scale(0.85);
  right: 12px;
}

.v-l + .select-indicator,
.vh-l + .select-indicator {
  transform: scale(1) translateY(-1px);
  right: 16px;
}

.v-xl + .select-indicator,
.vh-xl + .select-indicator {
  transform: scale(1.5) translateY(-2px);
  right: 24px;
}

/* Spinner loader
----------------------------------------------------------------------------------------------------------------------*/
[class^='spinner'],
[class*=' spinner'] {
  position: relative;
  display: inline-block;
  width: 12px;
  height: 12px;
  top: 2px;
  border-radius: 100%;
  border-width: 2px;
  border-style: solid;
  border-right-color: rgba(0, 0, 0, 0.08) !important;
  border-bottom-color: rgba(0, 0, 0, 0.08) !important;
  border-left-color: rgba(0, 0, 0, 0.08) !important;
  border-top-color: var(--color-signal);
  transition: 0.3s all cubic-bezier(0.48, 0.01, 0.54, 1);
  animation: spinner-rotation 1.6s cubic-bezier(0.41, 0.26, 0.2, 0.62);
  animation-iteration-count: infinite;
}

.spinner-s {
  width: 8px;
  height: 8px;
}

.spinner-l {
  width: 18px;
  height: 18px;
}

.spinner-xl {
  width: 30px;
  height: 30px;
  border-width: 3px;
}

.spinner-2xl {
  width: 80px;
  height: 80px;
  border-width: 5px;
}

.spinner-3xl {
  width: 150px;
  height: 150px;
  border-width: 5px;
}

[class^='spinner'].negative,
[class*=' spinner'].negative {
  border-right-color: rgba(255, 255, 255, 0.12) !important;
  border-bottom-color: rgba(255, 255, 255, 0.12) !important;
  border-left-color: rgba(255, 255, 255, 0.12) !important;
}

@-moz-keyframes spinner-rotation {
  0% {
    transform: rotate(0);
  }
  to {
    transform: rotate(2turn);
  }
}

@-webkit-keyframes spinner-rotation {
  0% {
    transform: rotate(0);
  }
  to {
    transform: rotate(2turn);
  }
}

@-o-keyframes spinner-rotation {
  0% {
    transform: rotate(0);
  }
  to {
    transform: rotate(2turn);
  }
}

@keyframes spinner-rotation {
  0% {
    transform: rotate(0);
  }
  to {
    transform: rotate(2turn);
  }
}