metro4/build/css/metro.css

The front-end framework for Build responsive, mobile-first projects on the web with the first front-end component library in Metro Style

/*
 * Metro 4 Components Library v4.5.0  (https://metroui.org.ua)
 * Copyright 2012-2021 Sergey Pimenov
 * Built at 01/08/2021 18:53:43
 * Licensed under MIT
 */
*,
*::before,
*::after {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
html {
  -ms-overflow-style: scrollbar;
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  font-family: sans-serif;
  scroll-behavior: smooth;
}
body {
  line-height: 1.5;
  overflow-x: hidden;
  background-color: #ffffff;
  min-height: 100vh;
  text-rendering: optimizeSpeed;
}
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  vertical-align: baseline;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}
blockquote,
q {
  quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
  content: '';
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
base,
basefont,
datalist,
head,
meta,
script,
style,
title,
noembed,
param,
template {
  display: none;
}
[tabindex="-1"]:focus {
  outline: none !important;
}
[hidden] {
  display: none !important;
}
::-webkit-file-upload-button {
  font: inherit;
  -webkit-appearance: button;
}
[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"] {
  -webkit-appearance: listbox;
}
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  padding: 0;
  border-style: none;
}
button,
html [type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}
a,
area,
button,
input,
label,
select,
summary,
textarea {
  touch-action: manipulation;
}
svg:not(:root) {
  overflow: hidden;
}
img {
  vertical-align: middle;
  border-style: none;
  max-width: 100%;
}
div {
  position: relative;
}
article > * + * {
  margin-top: 1em;
}
input,
button,
textarea,
select {
  font: inherit;
}
@media (prefers-reduced-motion: reduce) {
  * {
    -webkit-animation-duration: 0.01ms !important;
            animation-duration: 0.01ms !important;
    -webkit-animation-iteration-count: 1 !important;
            animation-iteration-count: 1 !important;
    -webkit-transition-duration: 0.01ms !important;
            transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
[disabled] {
  pointer-events: none!important;
  color: lightgray!important;
}
.button.primary,
.command-button.primary,
.image-button.primary,
.shortcut.primary,
.tool-button.primary,
.split-button .split.primary,
tbody tr.primary,
tbody td.primary,
.tally.primary,
code.primary,
.notify.primary,
.info-button.primary,
.input .button.primary,
.select .button.primary,
.tag-input .button.primary,
.spinner .button.primary,
.toast.primary {
  outline-color: #75b5fd;
  background-color: #0366d6;
  color: #ffffff;
}
.button.primary.outline,
.command-button.primary.outline,
.image-button.primary.outline,
.shortcut.primary.outline,
.tool-button.primary.outline,
.split-button .split.primary.outline,
tbody tr.primary.outline,
tbody td.primary.outline,
.tally.primary.outline,
code.primary.outline,
.notify.primary.outline,
.info-button.primary.outline,
.input .button.primary.outline,
.select .button.primary.outline,
.tag-input .button.primary.outline,
.spinner .button.primary.outline,
.toast.primary.outline {
  color: #0366d6;
  border-color: #0366d6;
}
.button.primary.outline.dropdown-toggle::before,
.command-button.primary.outline.dropdown-toggle::before,
.image-button.primary.outline.dropdown-toggle::before,
.shortcut.primary.outline.dropdown-toggle::before,
.tool-button.primary.outline.dropdown-toggle::before,
.split-button .split.primary.outline.dropdown-toggle::before,
tbody tr.primary.outline.dropdown-toggle::before,
tbody td.primary.outline.dropdown-toggle::before,
.tally.primary.outline.dropdown-toggle::before,
code.primary.outline.dropdown-toggle::before,
.notify.primary.outline.dropdown-toggle::before,
.info-button.primary.outline.dropdown-toggle::before,
.input .button.primary.outline.dropdown-toggle::before,
.select .button.primary.outline.dropdown-toggle::before,
.tag-input .button.primary.outline.dropdown-toggle::before,
.spinner .button.primary.outline.dropdown-toggle::before,
.toast.primary.outline.dropdown-toggle::before {
  border-color: #0366d6;
}
.button.primary.outline:hover,
.command-button.primary.outline:hover,
.image-button.primary.outline:hover,
.shortcut.primary.outline:hover,
.tool-button.primary.outline:hover,
.split-button .split.primary.outline:hover,
tbody tr.primary.outline:hover,
tbody td.primary.outline:hover,
.tally.primary.outline:hover,
code.primary.outline:hover,
.notify.primary.outline:hover,
.info-button.primary.outline:hover,
.input .button.primary.outline:hover,
.select .button.primary.outline:hover,
.tag-input .button.primary.outline:hover,
.spinner .button.primary.outline:hover,
.toast.primary.outline:hover {
  color: #ffffff;
}
.button.primary.dropdown-toggle::before,
.command-button.primary.dropdown-toggle::before,
.image-button.primary.dropdown-toggle::before,
.shortcut.primary.dropdown-toggle::before,
.tool-button.primary.dropdown-toggle::before,
.split-button .split.primary.dropdown-toggle::before,
tbody tr.primary.dropdown-toggle::before,
tbody td.primary.dropdown-toggle::before,
.tally.primary.dropdown-toggle::before,
code.primary.dropdown-toggle::before,
.notify.primary.dropdown-toggle::before,
.info-button.primary.dropdown-toggle::before,
.input .button.primary.dropdown-toggle::before,
.select .button.primary.dropdown-toggle::before,
.tag-input .button.primary.dropdown-toggle::before,
.spinner .button.primary.dropdown-toggle::before,
.toast.primary.dropdown-toggle::before {
  border-color: #ffffff;
}
.button.primary:hover,
.command-button.primary:hover,
.image-button.primary:hover,
.shortcut.primary:hover,
.tool-button.primary:hover,
.split-button .split.primary:hover,
tbody tr.primary:hover,
tbody td.primary:hover,
.tally.primary:hover,
code.primary:hover,
.notify.primary:hover,
.info-button.primary:hover,
.input .button.primary:hover,
.select .button.primary:hover,
.tag-input .button.primary:hover,
.spinner .button.primary:hover,
.toast.primary:hover {
  color: #ffffff;
  background-color: #024ea4;
  border-color: #023671;
}
.button.primary:hover.dropdown-toggle::before,
.command-button.primary:hover.dropdown-toggle::before,
.image-button.primary:hover.dropdown-toggle::before,
.shortcut.primary:hover.dropdown-toggle::before,
.tool-button.primary:hover.dropdown-toggle::before,
.split-button .split.primary:hover.dropdown-toggle::before,
tbody tr.primary:hover.dropdown-toggle::before,
tbody td.primary:hover.dropdown-toggle::before,
.tally.primary:hover.dropdown-toggle::before,
code.primary:hover.dropdown-toggle::before,
.notify.primary:hover.dropdown-toggle::before,
.info-button.primary:hover.dropdown-toggle::before,
.input .button.primary:hover.dropdown-toggle::before,
.select .button.primary:hover.dropdown-toggle::before,
.tag-input .button.primary:hover.dropdown-toggle::before,
.spinner .button.primary:hover.dropdown-toggle::before,
.toast.primary:hover.dropdown-toggle::before {
  border-color: #ffffff;
}
.button.primary.same-color:hover,
.command-button.primary.same-color:hover,
.image-button.primary.same-color:hover,
.shortcut.primary.same-color:hover,
.tool-button.primary.same-color:hover,
.split-button .split.primary.same-color:hover,
tbody tr.primary.same-color:hover,
tbody td.primary.same-color:hover,
.tally.primary.same-color:hover,
code.primary.same-color:hover,
.notify.primary.same-color:hover,
.info-button.primary.same-color:hover,
.input .button.primary.same-color:hover,
.select .button.primary.same-color:hover,
.tag-input .button.primary.same-color:hover,
.spinner .button.primary.same-color:hover,
.toast.primary.same-color:hover {
  background-color: #0366d6;
  border-color: #0366d6;
}
.button.primary:active,
.command-button.primary:active,
.image-button.primary:active,
.shortcut.primary:active,
.tool-button.primary:active,
.split-button .split.primary:active,
tbody tr.primary:active,
tbody td.primary:active,
.tally.primary:active,
code.primary:active,
.notify.primary:active,
.info-button.primary:active,
.input .button.primary:active,
.select .button.primary:active,
.tag-input .button.primary:active,
.spinner .button.primary:active,
.toast.primary:active,
.button.primary.focus,
.command-button.primary.focus,
.image-button.primary.focus,
.shortcut.primary.focus,
.tool-button.primary.focus,
.split-button .split.primary.focus,
tbody tr.primary.focus,
tbody td.primary.focus,
.tally.primary.focus,
code.primary.focus,
.notify.primary.focus,
.info-button.primary.focus,
.input .button.primary.focus,
.select .button.primary.focus,
.tag-input .button.primary.focus,
.spinner .button.primary.focus,
.toast.primary.focus,
.button.primary:focus,
.command-button.primary:focus,
.image-button.primary:focus,
.shortcut.primary:focus,
.tool-button.primary:focus,
.split-button .split.primary:focus,
tbody tr.primary:focus,
tbody td.primary:focus,
.tally.primary:focus,
code.primary:focus,
.notify.primary:focus,
.info-button.primary:focus,
.input .button.primary:focus,
.select .button.primary:focus,
.tag-input .button.primary:focus,
.spinner .button.primary:focus,
.toast.primary:focus {
  -webkit-box-shadow: 0 0 0 3px rgba(3, 102, 214, 0.45);
          box-shadow: 0 0 0 3px rgba(3, 102, 214, 0.45);
}
.button.secondary,
.command-button.secondary,
.image-button.secondary,
.shortcut.secondary,
.tool-button.secondary,
.split-button .split.secondary,
tbody tr.secondary,
tbody td.secondary,
.tally.secondary,
code.secondary,
.notify.secondary,
.info-button.secondary,
.input .button.secondary,
.select .button.secondary,
.tag-input .button.secondary,
.spinner .button.secondary,
.toast.secondary {
  outline-color: #b7c6cd;
  background-color: #607d8b;
  color: #ffffff;
}
.button.secondary.outline,
.command-button.secondary.outline,
.image-button.secondary.outline,
.shortcut.secondary.outline,
.tool-button.secondary.outline,
.split-button .split.secondary.outline,
tbody tr.secondary.outline,
tbody td.secondary.outline,
.tally.secondary.outline,
code.secondary.outline,
.notify.secondary.outline,
.info-button.secondary.outline,
.input .button.secondary.outline,
.select .button.secondary.outline,
.tag-input .button.secondary.outline,
.spinner .button.secondary.outline,
.toast.secondary.outline {
  color: #607d8b;
  border-color: #607d8b;
}
.button.secondary.outline.dropdown-toggle::before,
.command-button.secondary.outline.dropdown-toggle::before,
.image-button.secondary.outline.dropdown-toggle::before,
.shortcut.secondary.outline.dropdown-toggle::before,
.tool-button.secondary.outline.dropdown-toggle::before,
.split-button .split.secondary.outline.dropdown-toggle::before,
tbody tr.secondary.outline.dropdown-toggle::before,
tbody td.secondary.outline.dropdown-toggle::before,
.tally.secondary.outline.dropdown-toggle::before,
code.secondary.outline.dropdown-toggle::before,
.notify.secondary.outline.dropdown-toggle::before,
.info-button.secondary.outline.dropdown-toggle::before,
.input .button.secondary.outline.dropdown-toggle::before,
.select .button.secondary.outline.dropdown-toggle::before,
.tag-input .button.secondary.outline.dropdown-toggle::before,
.spinner .button.secondary.outline.dropdown-toggle::before,
.toast.secondary.outline.dropdown-toggle::before {
  border-color: #607d8b;
}
.button.secondary.outline:hover,
.command-button.secondary.outline:hover,
.image-button.secondary.outline:hover,
.shortcut.secondary.outline:hover,
.tool-button.secondary.outline:hover,
.split-button .split.secondary.outline:hover,
tbody tr.secondary.outline:hover,
tbody td.secondary.outline:hover,
.tally.secondary.outline:hover,
code.secondary.outline:hover,
.notify.secondary.outline:hover,
.info-button.secondary.outline:hover,
.input .button.secondary.outline:hover,
.select .button.secondary.outline:hover,
.tag-input .button.secondary.outline:hover,
.spinner .button.secondary.outline:hover,
.toast.secondary.outline:hover {
  color: #ffffff;
}
.button.secondary.dropdown-toggle::before,
.command-button.secondary.dropdown-toggle::before,
.image-button.secondary.dropdown-toggle::before,
.shortcut.secondary.dropdown-toggle::before,
.tool-button.secondary.dropdown-toggle::before,
.split-button .split.secondary.dropdown-toggle::before,
tbody tr.secondary.dropdown-toggle::before,
tbody td.secondary.dropdown-toggle::before,
.tally.secondary.dropdown-toggle::before,
code.secondary.dropdown-toggle::before,
.notify.secondary.dropdown-toggle::before,
.info-button.secondary.dropdown-toggle::before,
.input .button.secondary.dropdown-toggle::before,
.select .button.secondary.dropdown-toggle::before,
.tag-input .button.secondary.dropdown-toggle::before,
.spinner .button.secondary.dropdown-toggle::before,
.toast.secondary.dropdown-toggle::before {
  border-color: #ffffff;
}
.button.secondary:hover,
.command-button.secondary:hover,
.image-button.secondary:hover,
.shortcut.secondary:hover,
.tool-button.secondary:hover,
.split-button .split.secondary:hover,
tbody tr.secondary:hover,
tbody td.secondary:hover,
.tally.secondary:hover,
code.secondary:hover,
.notify.secondary:hover,
.info-button.secondary:hover,
.input .button.secondary:hover,
.select .button.secondary:hover,
.tag-input .button.secondary:hover,
.spinner .button.secondary:hover,
.toast.secondary:hover {
  color: #ffffff;
  background-color: #4b626d;
  border-color: #36474f;
}
.button.secondary:hover.dropdown-toggle::before,
.command-button.secondary:hover.dropdown-toggle::before,
.image-button.secondary:hover.dropdown-toggle::before,
.shortcut.secondary:hover.dropdown-toggle::before,
.tool-button.secondary:hover.dropdown-toggle::before,
.split-button .split.secondary:hover.dropdown-toggle::before,
tbody tr.secondary:hover.dropdown-toggle::before,
tbody td.secondary:hover.dropdown-toggle::before,
.tally.secondary:hover.dropdown-toggle::before,
code.secondary:hover.dropdown-toggle::before,
.notify.secondary:hover.dropdown-toggle::before,
.info-button.secondary:hover.dropdown-toggle::before,
.input .button.secondary:hover.dropdown-toggle::before,
.select .button.secondary:hover.dropdown-toggle::before,
.tag-input .button.secondary:hover.dropdown-toggle::before,
.spinner .button.secondary:hover.dropdown-toggle::before,
.toast.secondary:hover.dropdown-toggle::before {
  border-color: #ffffff;
}
.button.secondary.same-color:hover,
.command-button.secondary.same-color:hover,
.image-button.secondary.same-color:hover,
.shortcut.secondary.same-color:hover,
.tool-button.secondary.same-color:hover,
.split-button .split.secondary.same-color:hover,
tbody tr.secondary.same-color:hover,
tbody td.secondary.same-color:hover,
.tally.secondary.same-color:hover,
code.secondary.same-color:hover,
.notify.secondary.same-color:hover,
.info-button.secondary.same-color:hover,
.input .button.secondary.same-color:hover,
.select .button.secondary.same-color:hover,
.tag-input .button.secondary.same-color:hover,
.spinner .button.secondary.same-color:hover,
.toast.secondary.same-color:hover {
  background-color: #607d8b;
  border-color: #607d8b;
}
.button.secondary:active,
.command-button.secondary:active,
.image-button.secondary:active,
.shortcut.secondary:active,
.tool-button.secondary:active,
.split-button .split.secondary:active,
tbody tr.secondary:active,
tbody td.secondary:active,
.tally.secondary:active,
code.secondary:active,
.notify.secondary:active,
.info-button.secondary:active,
.input .button.secondary:active,
.select .button.secondary:active,
.tag-input .button.secondary:active,
.spinner .button.secondary:active,
.toast.secondary:active,
.button.secondary.focus,
.command-button.secondary.focus,
.image-button.secondary.focus,
.shortcut.secondary.focus,
.tool-button.secondary.focus,
.split-button .split.secondary.focus,
tbody tr.secondary.focus,
tbody td.secondary.focus,
.tally.secondary.focus,
code.secondary.focus,
.notify.secondary.focus,
.info-button.secondary.focus,
.input .button.secondary.focus,
.select .button.secondary.focus,
.tag-input .button.secondary.focus,
.spinner .button.secondary.focus,
.toast.secondary.focus,
.button.secondary:focus,
.command-button.secondary:focus,
.image-button.secondary:focus,
.shortcut.secondary:focus,
.tool-button.secondary:focus,
.split-button .split.secondary:focus,
tbody tr.secondary:focus,
tbody td.secondary:focus,
.tally.secondary:focus,
code.secondary:focus,
.notify.secondary:focus,
.info-button.secondary:focus,
.input .button.secondary:focus,
.select .button.secondary:focus,
.tag-input .button.secondary:focus,
.spinner .button.secondary:focus,
.toast.secondary:focus {
  -webkit-box-shadow: 0 0 0 3px rgba(96, 125, 139, 0.45);
          box-shadow: 0 0 0 3px rgba(96, 125, 139, 0.45);
}
.button.success,
.command-button.success,
.image-button.success,
.shortcut.success,
.tool-button.success,
.split-button .split.success,
tbody tr.success,
tbody td.success,
.tally.success,
code.success,
.notify.success,
.info-button.success,
.input .button.success,
.select .button.success,
.tag-input .button.success,
.spinner .button.success,
.toast.success {
  outline-color: #adeb6e;
  background-color: #60a917;
  color: #ffffff;
}
.button.success.outline,
.command-button.success.outline,
.image-button.success.outline,
.shortcut.success.outline,
.tool-button.success.outline,
.split-button .split.success.outline,
tbody tr.success.outline,
tbody td.success.outline,
.tally.success.outline,
code.success.outline,
.notify.success.outline,
.info-button.success.outline,
.input .button.success.outline,
.select .button.success.outline,
.tag-input .button.success.outline,
.spinner .button.success.outline,
.toast.success.outline {
  color: #60a917;
  border-color: #60a917;
}
.button.success.outline.dropdown-toggle::before,
.command-button.success.outline.dropdown-toggle::before,
.image-button.success.outline.dropdown-toggle::before,
.shortcut.success.outline.dropdown-toggle::before,
.tool-button.success.outline.dropdown-toggle::before,
.split-button .split.success.outline.dropdown-toggle::before,
tbody tr.success.outline.dropdown-toggle::before,
tbody td.success.outline.dropdown-toggle::before,
.tally.success.outline.dropdown-toggle::before,
code.success.outline.dropdown-toggle::before,
.notify.success.outline.dropdown-toggle::before,
.info-button.success.outline.dropdown-toggle::before,
.input .button.success.outline.dropdown-toggle::before,
.select .button.success.outline.dropdown-toggle::before,
.tag-input .button.success.outline.dropdown-toggle::before,
.spinner .button.success.outline.dropdown-toggle::before,
.toast.success.outline.dropdown-toggle::before {
  border-color: #60a917;
}
.button.success.outline:hover,
.command-button.success.outline:hover,
.image-button.success.outline:hover,
.shortcut.success.outline:hover,
.tool-button.success.outline:hover,
.split-button .split.success.outline:hover,
tbody tr.success.outline:hover,
tbody td.success.outline:hover,
.tally.success.outline:hover,
code.success.outline:hover,
.notify.success.outline:hover,
.info-button.success.outline:hover,
.input .button.success.outline:hover,
.select .button.success.outline:hover,
.tag-input .button.success.outline:hover,
.spinner .button.success.outline:hover,
.toast.success.outline:hover {
  color: #ffffff;
}
.button.success.dropdown-toggle::before,
.command-button.success.dropdown-toggle::before,
.image-button.success.dropdown-toggle::before,
.shortcut.success.dropdown-toggle::before,
.tool-button.success.dropdown-toggle::before,
.split-button .split.success.dropdown-toggle::before,
tbody tr.success.dropdown-toggle::before,
tbody td.success.dropdown-toggle::before,
.tally.success.dropdown-toggle::before,
code.success.dropdown-toggle::before,
.notify.success.dropdown-toggle::before,
.info-button.success.dropdown-toggle::before,
.input .button.success.dropdown-toggle::before,
.select .button.success.dropdown-toggle::before,
.tag-input .button.success.dropdown-toggle::before,
.spinner .button.success.dropdown-toggle::before,
.toast.success.dropdown-toggle::before {
  border-color: #ffffff;
}
.button.success:hover,
.command-button.success:hover,
.image-button.success:hover,
.shortcut.success:hover,
.tool-button.success:hover,
.split-button .split.success:hover,
tbody tr.success:hover,
tbody td.success:hover,
.tally.success:hover,
code.success:hover,
.notify.success:hover,
.info-button.success:hover,
.input .button.success:hover,
.select .button.success:hover,
.tag-input .button.success:hover,
.spinner .button.success:hover,
.toast.success:hover {
  color: #ffffff;
  background-color: #477c11;
  border-color: #2d4f0b;
}
.button.success:hover.dropdown-toggle::before,
.command-button.success:hover.dropdown-toggle::before,
.image-button.success:hover.dropdown-toggle::before,
.shortcut.success:hover.dropdown-toggle::before,
.tool-button.success:hover.dropdown-toggle::before,
.split-button .split.success:hover.dropdown-toggle::before,
tbody tr.success:hover.dropdown-toggle::before,
tbody td.success:hover.dropdown-toggle::before,
.tally.success:hover.dropdown-toggle::before,
code.success:hover.dropdown-toggle::before,
.notify.success:hover.dropdown-toggle::before,
.info-button.success:hover.dropdown-toggle::before,
.input .button.success:hover.dropdown-toggle::before,
.select .button.success:hover.dropdown-toggle::before,
.tag-input .button.success:hover.dropdown-toggle::before,
.spinner .button.success:hover.dropdown-toggle::before,
.toast.success:hover.dropdown-toggle::before {
  border-color: #ffffff;
}
.button.success.same-color:hover,
.command-button.success.same-color:hover,
.image-button.success.same-color:hover,
.shortcut.success.same-color:hover,
.tool-button.success.same-color:hover,
.split-button .split.success.same-color:hover,
tbody tr.success.same-color:hover,
tbody td.success.same-color:hover,
.tally.success.same-color:hover,
code.success.same-color:hover,
.notify.success.same-color:hover,
.info-button.success.same-color:hover,
.input .button.success.same-color:hover,
.select .button.success.same-color:hover,
.tag-input .button.success.same-color:hover,
.spinner .button.success.same-color:hover,
.toast.success.same-color:hover {
  background-color: #60a917;
  border-color: #60a917;
}
.button.success:active,
.command-button.success:active,
.image-button.success:active,
.shortcut.success:active,
.tool-button.success:active,
.split-button .split.success:active,
tbody tr.success:active,
tbody td.success:active,
.tally.success:active,
code.success:active,
.notify.success:active,
.info-button.success:active,
.input .button.success:active,
.select .button.success:active,
.tag-input .button.success:active,
.spinner .button.success:active,
.toast.success:active,
.button.success.focus,
.command-button.success.focus,
.image-button.success.focus,
.shortcut.success.focus,
.tool-button.success.focus,
.split-button .split.success.focus,
tbody tr.success.focus,
tbody td.success.focus,
.tally.success.focus,
code.success.focus,
.notify.success.focus,
.info-button.success.focus,
.input .button.success.focus,
.select .button.success.focus,
.tag-input .button.success.focus,
.spinner .button.success.focus,
.toast.success.focus,
.button.success:focus,
.command-button.success:focus,
.image-button.success:focus,
.shortcut.success:focus,
.tool-button.success:focus,
.split-button .split.success:focus,
tbody tr.success:focus,
tbody td.success:focus,
.tally.success:focus,
code.success:focus,
.notify.success:focus,
.info-button.success:focus,
.input .button.success:focus,
.select .button.success:focus,
.tag-input .button.success:focus,
.spinner .button.success:focus,
.toast.success:focus {
  -webkit-box-shadow: 0 0 0 3px rgba(96, 169, 23, 0.45);
          box-shadow: 0 0 0 3px rgba(96, 169, 23, 0.45);
}
.button.alert,
.command-button.alert,
.image-button.alert,
.shortcut.alert,
.tool-button.alert,
.split-button .split.alert,
tbody tr.alert,
tbody td.alert,
.tally.alert,
code.alert,
.notify.alert,
.info-button.alert,
.input .button.alert,
.select .button.alert,
.tag-input .button.alert,
.spinner .button.alert,
.toast.alert {
  outline-color: #ecaba7;
  background-color: #CE352C;
  color: #ffffff;
}
.button.alert.outline,
.command-button.alert.outline,
.image-button.alert.outline,
.shortcut.alert.outline,
.tool-button.alert.outline,
.split-button .split.alert.outline,
tbody tr.alert.outline,
tbody td.alert.outline,
.tally.alert.outline,
code.alert.outline,
.notify.alert.outline,
.info-button.alert.outline,
.input .button.alert.outline,
.select .button.alert.outline,
.tag-input .button.alert.outline,
.spinner .button.alert.outline,
.toast.alert.outline {
  color: #CE352C;
  border-color: #CE352C;
}
.button.alert.outline.dropdown-toggle::before,
.command-button.alert.outline.dropdown-toggle::before,
.image-button.alert.outline.dropdown-toggle::before,
.shortcut.alert.outline.dropdown-toggle::before,
.tool-button.alert.outline.dropdown-toggle::before,
.split-button .split.alert.outline.dropdown-toggle::before,
tbody tr.alert.outline.dropdown-toggle::before,
tbody td.alert.outline.dropdown-toggle::before,
.tally.alert.outline.dropdown-toggle::before,
code.alert.outline.dropdown-toggle::before,
.notify.alert.outline.dropdown-toggle::before,
.info-button.alert.outline.dropdown-toggle::before,
.input .button.alert.outline.dropdown-toggle::before,
.select .button.alert.outline.dropdown-toggle::before,
.tag-input .button.alert.outline.dropdown-toggle::before,
.spinner .button.alert.outline.dropdown-toggle::before,
.toast.alert.outline.dropdown-toggle::before {
  border-color: #CE352C;
}
.button.alert.outline:hover,
.command-button.alert.outline:hover,
.image-button.alert.outline:hover,
.shortcut.alert.outline:hover,
.tool-button.alert.outline:hover,
.split-button .split.alert.outline:hover,
tbody tr.alert.outline:hover,
tbody td.alert.outline:hover,
.tally.alert.outline:hover,
code.alert.outline:hover,
.notify.alert.outline:hover,
.info-button.alert.outline:hover,
.input .button.alert.outline:hover,
.select .button.alert.outline:hover,
.tag-input .button.alert.outline:hover,
.spinner .button.alert.outline:hover,
.toast.alert.outline:hover {
  color: #ffffff;
}
.button.alert.dropdown-toggle::before,
.command-button.alert.dropdown-toggle::before,
.image-button.alert.dropdown-toggle::before,
.shortcut.alert.dropdown-toggle::before,
.tool-button.alert.dropdown-toggle::before,
.split-button .split.alert.dropdown-toggle::before,
tbody tr.alert.dropdown-toggle::before,
tbody td.alert.dropdown-toggle::before,
.tally.alert.dropdown-toggle::before,
code.alert.dropdown-toggle::before,
.notify.alert.dropdown-toggle::before,
.info-button.alert.dropdown-toggle::before,
.input .button.alert.dropdown-toggle::before,
.select .button.alert.dropdown-toggle::before,
.tag-input .button.alert.dropdown-toggle::before,
.spinner .button.alert.dropdown-toggle::before,
.toast.alert.dropdown-toggle::before {
  border-color: #ffffff;
}
.button.alert:hover,
.command-button.alert:hover,
.image-button.alert:hover,
.shortcut.alert:hover,
.tool-button.alert:hover,
.split-button .split.alert:hover,
tbody tr.alert:hover,
tbody td.alert:hover,
.tally.alert:hover,
code.alert:hover,
.notify.alert:hover,
.info-button.alert:hover,
.input .button.alert:hover,
.select .button.alert:hover,
.tag-input .button.alert:hover,
.spinner .button.alert:hover,
.toast.alert:hover {
  color: #ffffff;
  background-color: #a42a23;
  border-color: #7a1f1a;
}
.button.alert:hover.dropdown-toggle::before,
.command-button.alert:hover.dropdown-toggle::before,
.image-button.alert:hover.dropdown-toggle::before,
.shortcut.alert:hover.dropdown-toggle::before,
.tool-button.alert:hover.dropdown-toggle::before,
.split-button .split.alert:hover.dropdown-toggle::before,
tbody tr.alert:hover.dropdown-toggle::before,
tbody td.alert:hover.dropdown-toggle::before,
.tally.alert:hover.dropdown-toggle::before,
code.alert:hover.dropdown-toggle::before,
.notify.alert:hover.dropdown-toggle::before,
.info-button.alert:hover.dropdown-toggle::before,
.input .button.alert:hover.dropdown-toggle::before,
.select .button.alert:hover.dropdown-toggle::before,
.tag-input .button.alert:hover.dropdown-toggle::before,
.spinner .button.alert:hover.dropdown-toggle::before,
.toast.alert:hover.dropdown-toggle::before {
  border-color: #ffffff;
}
.button.alert.same-color:hover,
.command-button.alert.same-color:hover,
.image-button.alert.same-color:hover,
.shortcut.alert.same-color:hover,
.tool-button.alert.same-color:hover,
.split-button .split.alert.same-color:hover,
tbody tr.alert.same-color:hover,
tbody td.alert.same-color:hover,
.tally.alert.same-color:hover,
code.alert.same-color:hover,
.notify.alert.same-color:hover,
.info-button.alert.same-color:hover,
.input .button.alert.same-color:hover,
.select .button.alert.same-color:hover,
.tag-input .button.alert.same-color:hover,
.spinner .button.alert.same-color:hover,
.toast.alert.same-color:hover {
  background-color: #CE352C;
  border-color: #CE352C;
}
.button.alert:active,
.command-button.alert:active,
.image-button.alert:active,
.shortcut.alert:active,
.tool-button.alert:active,
.split-button .split.alert:active,
tbody tr.alert:active,
tbody td.alert:active,
.tally.alert:active,
code.alert:active,
.notify.alert:active,
.info-button.alert:active,
.input .button.alert:active,
.select .button.alert:active,
.tag-input .button.alert:active,
.spinner .button.alert:active,
.toast.alert:active,
.button.alert.focus,
.command-button.alert.focus,
.image-button.alert.focus,
.shortcut.alert.focus,
.tool-button.alert.focus,
.split-button .split.alert.focus,
tbody tr.alert.focus,
tbody td.alert.focus,
.tally.alert.focus,
code.alert.focus,
.notify.alert.focus,
.info-button.alert.focus,
.input .button.alert.focus,
.select .button.alert.focus,
.tag-input .button.alert.focus,
.spinner .button.alert.focus,
.toast.alert.focus,
.button.alert:focus,
.command-button.alert:focus,
.image-button.alert:focus,
.shortcut.alert:focus,
.tool-button.alert:focus,
.split-button .split.alert:focus,
tbody tr.alert:focus,
tbody td.alert:focus,
.tally.alert:focus,
code.alert:focus,
.notify.alert:focus,
.info-button.alert:focus,
.input .button.alert:focus,
.select .button.alert:focus,
.tag-input .button.alert:focus,
.spinner .button.alert:focus,
.toast.alert:focus {
  -webkit-box-shadow: 0 0 0 3px rgba(206, 53, 44, 0.45);
          box-shadow: 0 0 0 3px rgba(206, 53, 44, 0.45);
}
.button.warning,
.command-button.warning,
.image-button.warning,
.shortcut.warning,
.tool-button.warning,
.split-button .split.warning,
tbody tr.warning,
tbody td.warning,
.tally.warning,
code.warning,
.notify.warning,
.info-button.warning,
.input .button.warning,
.select .button.warning,
.tag-input .button.warning,
.spinner .button.warning,
.toast.warning {
  outline-color: #ffede1;
  background-color: #ff9447;
  color: #ffffff;
}
.button.warning.outline,
.command-button.warning.outline,
.image-button.warning.outline,
.shortcut.warning.outline,
.tool-button.warning.outline,
.split-button .split.warning.outline,
tbody tr.warning.outline,
tbody td.warning.outline,
.tally.warning.outline,
code.warning.outline,
.notify.warning.outline,
.info-button.warning.outline,
.input .button.warning.outline,
.select .button.warning.outline,
.tag-input .button.warning.outline,
.spinner .button.warning.outline,
.toast.warning.outline {
  color: #ff9447;
  border-color: #ff9447;
}
.button.warning.outline.dropdown-toggle::before,
.command-button.warning.outline.dropdown-toggle::before,
.image-button.warning.outline.dropdown-toggle::before,
.shortcut.warning.outline.dropdown-toggle::before,
.tool-button.warning.outline.dropdown-toggle::before,
.split-button .split.warning.outline.dropdown-toggle::before,
tbody tr.warning.outline.dropdown-toggle::before,
tbody td.warning.outline.dropdown-toggle::before,
.tally.warning.outline.dropdown-toggle::before,
code.warning.outline.dropdown-toggle::before,
.notify.warning.outline.dropdown-toggle::before,
.info-button.warning.outline.dropdown-toggle::before,
.input .button.warning.outline.dropdown-toggle::before,
.select .button.warning.outline.dropdown-toggle::before,
.tag-input .button.warning.outline.dropdown-toggle::before,
.spinner .button.warning.outline.dropdown-toggle::before,
.toast.warning.outline.dropdown-toggle::before {
  border-color: #ff9447;
}
.button.warning.outline:hover,
.command-button.warning.outline:hover,
.image-button.warning.outline:hover,
.shortcut.warning.outline:hover,
.tool-button.warning.outline:hover,
.split-button .split.warning.outline:hover,
tbody tr.warning.outline:hover,
tbody td.warning.outline:hover,
.tally.warning.outline:hover,
code.warning.outline:hover,
.notify.warning.outline:hover,
.info-button.warning.outline:hover,
.input .button.warning.outline:hover,
.select .button.warning.outline:hover,
.tag-input .button.warning.outline:hover,
.spinner .button.warning.outline:hover,
.toast.warning.outline:hover {
  color: #ffffff;
}
.button.warning.dropdown-toggle::before,
.command-button.warning.dropdown-toggle::before,
.image-button.warning.dropdown-toggle::before,
.shortcut.warning.dropdown-toggle::before,
.tool-button.warning.dropdown-toggle::before,
.split-button .split.warning.dropdown-toggle::before,
tbody tr.warning.dropdown-toggle::before,
tbody td.warning.dropdown-toggle::before,
.tally.warning.dropdown-toggle::before,
code.warning.dropdown-toggle::before,
.notify.warning.dropdown-toggle::before,
.info-button.warning.dropdown-toggle::before,
.input .button.warning.dropdown-toggle::before,
.select .button.warning.dropdown-toggle::before,
.tag-input .button.warning.dropdown-toggle::before,
.spinner .button.warning.dropdown-toggle::before,
.toast.warning.dropdown-toggle::before {
  border-color: #ffffff;
}
.button.warning:hover,
.command-button.warning:hover,
.image-button.warning:hover,
.shortcut.warning:hover,
.tool-button.warning:hover,
.split-button .split.warning:hover,
tbody tr.warning:hover,
tbody td.warning:hover,
.tally.warning:hover,
code.warning:hover,
.notify.warning:hover,
.info-button.warning:hover,
.input .button.warning:hover,
.select .button.warning:hover,
.tag-input .button.warning:hover,
.spinner .button.warning:hover,
.toast.warning:hover {
  color: #ffffff;
  background-color: #ff7615;
  border-color: #e05d00;
}
.button.warning:hover.dropdown-toggle::before,
.command-button.warning:hover.dropdown-toggle::before,
.image-button.warning:hover.dropdown-toggle::before,
.shortcut.warning:hover.dropdown-toggle::before,
.tool-button.warning:hover.dropdown-toggle::before,
.split-button .split.warning:hover.dropdown-toggle::before,
tbody tr.warning:hover.dropdown-toggle::before,
tbody td.warning:hover.dropdown-toggle::before,
.tally.warning:hover.dropdown-toggle::before,
code.warning:hover.dropdown-toggle::before,
.notify.warning:hover.dropdown-toggle::before,
.info-button.warning:hover.dropdown-toggle::before,
.input .button.warning:hover.dropdown-toggle::before,
.select .button.warning:hover.dropdown-toggle::before,
.tag-input .button.warning:hover.dropdown-toggle::before,
.spinner .button.warning:hover.dropdown-toggle::before,
.toast.warning:hover.dropdown-toggle::before {
  border-color: #ffffff;
}
.button.warning.same-color:hover,
.command-button.warning.same-color:hover,
.image-button.warning.same-color:hover,
.shortcut.warning.same-color:hover,
.tool-button.warning.same-color:hover,
.split-button .split.warning.same-color:hover,
tbody tr.warning.same-color:hover,
tbody td.warning.same-color:hover,
.tally.warning.same-color:hover,
code.warning.same-color:hover,
.notify.warning.same-color:hover,
.info-button.warning.same-color:hover,
.input .button.warning.same-color:hover,
.select .button.warning.same-color:hover,
.tag-input .button.warning.same-color:hover,
.spinner .button.warning.same-color:hover,
.toast.warning.same-color:hover {
  background-color: #ff9447;
  border-color: #ff9447;
}
.button.warning:active,
.command-button.warning:active,
.image-button.warning:active,
.shortcut.warning:active,
.tool-button.warning:active,
.split-button .split.warning:active,
tbody tr.warning:active,
tbody td.warning:active,
.tally.warning:active,
code.warning:active,
.notify.warning:active,
.info-button.warning:active,
.input .button.warning:active,
.select .button.warning:active,
.tag-input .button.warning:active,
.spinner .button.warning:active,
.toast.warning:active,
.button.warning.focus,
.command-button.warning.focus,
.image-button.warning.focus,
.shortcut.warning.focus,
.tool-button.warning.focus,
.split-button .split.warning.focus,
tbody tr.warning.focus,
tbody td.warning.focus,
.tally.warning.focus,
code.warning.focus,
.notify.warning.focus,
.info-button.warning.focus,
.input .button.warning.focus,
.select .button.warning.focus,
.tag-input .button.warning.focus,
.spinner .button.warning.focus,
.toast.warning.focus,
.button.warning:focus,
.command-button.warning:focus,
.image-button.warning:focus,
.shortcut.warning:focus,
.tool-button.warning:focus,
.split-button .split.warning:focus,
tbody tr.warning:focus,
tbody td.warning:focus,
.tally.warning:focus,
code.warning:focus,
.notify.warning:focus,
.info-button.warning:focus,
.input .button.warning:focus,
.select .button.warning:focus,
.tag-input .button.warning:focus,
.spinner .button.warning:focus,
.toast.warning:focus {
  -webkit-box-shadow: 0 0 0 3px rgba(255, 148, 71, 0.45);
          box-shadow: 0 0 0 3px rgba(255, 148, 71, 0.45);
}
.button.yellow,
.command-button.yellow,
.image-button.yellow,
.shortcut.yellow,
.tool-button.yellow,
.split-button .split.yellow,
tbody tr.yellow,
tbody td.yellow,
.tally.yellow,
code.yellow,
.notify.yellow,
.info-button.yellow,
.input .button.yellow,
.select .button.yellow,
.tag-input .button.yellow,
.spinner .button.yellow,
.toast.yellow {
  outline-color: #ffffff;
  background-color: #ffe484;
  color: #ffffff;
}
.button.yellow.outline,
.command-button.yellow.outline,
.image-button.yellow.outline,
.shortcut.yellow.outline,
.tool-button.yellow.outline,
.split-button .split.yellow.outline,
tbody tr.yellow.outline,
tbody td.yellow.outline,
.tally.yellow.outline,
code.yellow.outline,
.notify.yellow.outline,
.info-button.yellow.outline,
.input .button.yellow.outline,
.select .button.yellow.outline,
.tag-input .button.yellow.outline,
.spinner .button.yellow.outline,
.toast.yellow.outline {
  color: #ffe484;
  border-color: #ffe484;
}
.button.yellow.outline.dropdown-toggle::before,
.command-button.yellow.outline.dropdown-toggle::before,
.image-button.yellow.outline.dropdown-toggle::before,
.shortcut.yellow.outline.dropdown-toggle::before,
.tool-button.yellow.outline.dropdown-toggle::before,
.split-button .split.yellow.outline.dropdown-toggle::before,
tbody tr.yellow.outline.dropdown-toggle::before,
tbody td.yellow.outline.dropdown-toggle::before,
.tally.yellow.outline.dropdown-toggle::before,
code.yellow.outline.dropdown-toggle::before,
.notify.yellow.outline.dropdown-toggle::before,
.info-button.yellow.outline.dropdown-toggle::before,
.input .button.yellow.outline.dropdown-toggle::before,
.select .button.yellow.outline.dropdown-toggle::before,
.tag-input .button.yellow.outline.dropdown-toggle::before,
.spinner .button.yellow.outline.dropdown-toggle::before,
.toast.yellow.outline.dropdown-toggle::before {
  border-color: #ffe484;
}
.button.yellow.outline:hover,
.command-button.yellow.outline:hover,
.image-button.yellow.outline:hover,
.shortcut.yellow.outline:hover,
.tool-button.yellow.outline:hover,
.split-button .split.yellow.outline:hover,
tbody tr.yellow.outline:hover,
tbody td.yellow.outline:hover,
.tally.yellow.outline:hover,
code.yellow.outline:hover,
.notify.yellow.outline:hover,
.info-button.yellow.outline:hover,
.input .button.yellow.outline:hover,
.select .button.yellow.outline:hover,
.tag-input .button.yellow.outline:hover,
.spinner .button.yellow.outline:hover,
.toast.yellow.outline:hover {
  color: #ffffff;
}
.button.yellow.dropdown-toggle::before,
.command-button.yellow.dropdown-toggle::before,
.image-button.yellow.dropdown-toggle::before,
.shortcut.yellow.dropdown-toggle::before,
.tool-button.yellow.dropdown-toggle::before,
.split-button .split.yellow.dropdown-toggle::before,
tbody tr.yellow.dropdown-toggle::before,
tbody td.yellow.dropdown-toggle::before,
.tally.yellow.dropdown-toggle::before,
code.yellow.dropdown-toggle::before,
.notify.yellow.dropdown-toggle::before,
.info-button.yellow.dropdown-toggle::before,
.input .button.yellow.dropdown-toggle::before,
.select .button.yellow.dropdown-toggle::before,
.tag-input .button.yellow.dropdown-toggle::before,
.spinner .button.yellow.dropdown-toggle::before,
.toast.yellow.dropdown-toggle::before {
  border-color: #ffffff;
}
.button.yellow:hover,
.command-button.yellow:hover,
.image-button.yellow:hover,
.shortcut.yellow:hover,
.tool-button.yellow:hover,
.split-button .split.yellow:hover,
tbody tr.yellow:hover,
tbody td.yellow:hover,
.tally.yellow:hover,
code.yellow:hover,
.notify.yellow:hover,
.info-button.yellow:hover,
.input .button.yellow:hover,
.select .button.yellow:hover,
.tag-input .button.yellow:hover,
.spinner .button.yellow:hover,
.toast.yellow:hover {
  color: #ffffff;
  background-color: #ffd951;
  border-color: #ffce1e;
}
.button.yellow:hover.dropdown-toggle::before,
.command-button.yellow:hover.dropdown-toggle::before,
.image-button.yellow:hover.dropdown-toggle::before,
.shortcut.yellow:hover.dropdown-toggle::before,
.tool-button.yellow:hover.dropdown-toggle::before,
.split-button .split.yellow:hover.dropdown-toggle::before,
tbody tr.yellow:hover.dropdown-toggle::before,
tbody td.yellow:hover.dropdown-toggle::before,
.tally.yellow:hover.dropdown-toggle::before,
code.yellow:hover.dropdown-toggle::before,
.notify.yellow:hover.dropdown-toggle::before,
.info-button.yellow:hover.dropdown-toggle::before,
.input .button.yellow:hover.dropdown-toggle::before,
.select .button.yellow:hover.dropdown-toggle::before,
.tag-input .button.yellow:hover.dropdown-toggle::before,
.spinner .button.yellow:hover.dropdown-toggle::before,
.toast.yellow:hover.dropdown-toggle::before {
  border-color: #ffffff;
}
.button.yellow.same-color:hover,
.command-button.yellow.same-color:hover,
.image-button.yellow.same-color:hover,
.shortcut.yellow.same-color:hover,
.tool-button.yellow.same-color:hover,
.split-button .split.yellow.same-color:hover,
tbody tr.yellow.same-color:hover,
tbody td.yellow.same-color:hover,
.tally.yellow.same-color:hover,
code.yellow.same-color:hover,
.notify.yellow.same-color:hover,
.info-button.yellow.same-color:hover,
.input .button.yellow.same-color:hover,
.select .button.yellow.same-color:hover,
.tag-input .button.yellow.same-color:hover,
.spinner .button.yellow.same-color:hover,
.toast.yellow.same-color:hover {
  background-color: #ffe484;
  border-color: #ffe484;
}
.button.yellow:active,
.command-button.yellow:active,
.image-button.yellow:active,
.shortcut.yellow:active,
.tool-button.yellow:active,
.split-button .split.yellow:active,
tbody tr.yellow:active,
tbody td.yellow:active,
.tally.yellow:active,
code.yellow:active,
.notify.yellow:active,
.info-button.yellow:active,
.input .button.yellow:active,
.select .button.yellow:active,
.tag-input .button.yellow:active,
.spinner .button.yellow:active,
.toast.yellow:active,
.button.yellow.focus,
.command-button.yellow.focus,
.image-button.yellow.focus,
.shortcut.yellow.focus,
.tool-button.yellow.focus,
.split-button .split.yellow.focus,
tbody tr.yellow.focus,
tbody td.yellow.focus,
.tally.yellow.focus,
code.yellow.focus,
.notify.yellow.focus,
.info-button.yellow.focus,
.input .button.yellow.focus,
.select .button.yellow.focus,
.tag-input .button.yellow.focus,
.spinner .button.yellow.focus,
.toast.yellow.focus,
.button.yellow:focus,
.command-button.yellow:focus,
.image-button.yellow:focus,
.shortcut.yellow:focus,
.tool-button.yellow:focus,
.split-button .split.yellow:focus,
tbody tr.yellow:focus,
tbody td.yellow:focus,
.tally.yellow:focus,
code.yellow:focus,
.notify.yellow:focus,
.info-button.yellow:focus,
.input .button.yellow:focus,
.select .button.yellow:focus,
.tag-input .button.yellow:focus,
.spinner .button.yellow:focus,
.toast.yellow:focus {
  -webkit-box-shadow: 0 0 0 3px rgba(255, 228, 132, 0.45);
          box-shadow: 0 0 0 3px rgba(255, 228, 132, 0.45);
}
.button.info,
.command-button.info,
.image-button.info,
.shortcut.info,
.tool-button.info,
.split-button .split.info,
tbody tr.info,
tbody td.info,
.tally.info,
code.info,
.notify.info,
.info-button.info,
.input .button.info,
.select .button.info,
.tag-input .button.info,
.spinner .button.info,
.toast.info {
  outline-color: #e6f5fc;
  background-color: #5ebdec;
  color: #ffffff;
}
.button.info.outline,
.command-button.info.outline,
.image-button.info.outline,
.shortcut.info.outline,
.tool-button.info.outline,
.split-button .split.info.outline,
tbody tr.info.outline,
tbody td.info.outline,
.tally.info.outline,
code.info.outline,
.notify.info.outline,
.info-button.info.outline,
.input .button.info.outline,
.select .button.info.outline,
.tag-input .button.info.outline,
.spinner .button.info.outline,
.toast.info.outline {
  color: #5ebdec;
  border-color: #5ebdec;
}
.button.info.outline.dropdown-toggle::before,
.command-button.info.outline.dropdown-toggle::before,
.image-button.info.outline.dropdown-toggle::before,
.shortcut.info.outline.dropdown-toggle::before,
.tool-button.info.outline.dropdown-toggle::before,
.split-button .split.info.outline.dropdown-toggle::before,
tbody tr.info.outline.dropdown-toggle::before,
tbody td.info.outline.dropdown-toggle::before,
.tally.info.outline.dropdown-toggle::before,
code.info.outline.dropdown-toggle::before,
.notify.info.outline.dropdown-toggle::before,
.info-button.info.outline.dropdown-toggle::before,
.input .button.info.outline.dropdown-toggle::before,
.select .button.info.outline.dropdown-toggle::before,
.tag-input .button.info.outline.dropdown-toggle::before,
.spinner .button.info.outline.dropdown-toggle::before,
.toast.info.outline.dropdown-toggle::before {
  border-color: #5ebdec;
}
.button.info.outline:hover,
.command-button.info.outline:hover,
.image-button.info.outline:hover,
.shortcut.info.outline:hover,
.tool-button.info.outline:hover,
.split-button .split.info.outline:hover,
tbody tr.info.outline:hover,
tbody td.info.outline:hover,
.tally.info.outline:hover,
code.info.outline:hover,
.notify.info.outline:hover,
.info-button.info.outline:hover,
.input .button.info.outline:hover,
.select .button.info.outline:hover,
.tag-input .button.info.outline:hover,
.spinner .button.info.outline:hover,
.toast.info.outline:hover {
  color: #ffffff;
}
.button.info.dropdown-toggle::before,
.command-button.info.dropdown-toggle::before,
.image-button.info.dropdown-toggle::before,
.shortcut.info.dropdown-toggle::before,
.tool-button.info.dropdown-toggle::before,
.split-button .split.info.dropdown-toggle::before,
tbody tr.info.dropdown-toggle::before,
tbody td.info.dropdown-toggle::before,
.tally.info.dropdown-toggle::before,
code.info.dropdown-toggle::before,
.notify.info.dropdown-toggle::before,
.info-button.info.dropdown-toggle::before,
.input .button.info.dropdown-toggle::before,
.select .button.info.dropdown-toggle::before,
.tag-input .button.info.dropdown-toggle::before,
.spinner .button.info.dropdown-toggle::before,
.toast.info.dropdown-toggle::before {
  border-color: #ffffff;
}
.button.info:hover,
.command-button.info:hover,
.image-button.info:hover,
.shortcut.info:hover,
.tool-button.info:hover,
.split-button .split.info:hover,
tbody tr.info:hover,
tbody td.info:hover,
.tally.info:hover,
code.info:hover,
.notify.info:hover,
.info-button.info:hover,
.input .button.info:hover,
.select .button.info:hover,
.tag-input .button.info:hover,
.spinner .button.info:hover,
.toast.info:hover {
  color: #ffffff;
  background-color: #30abe6;
  border-color: #1891cb;
}
.button.info:hover.dropdown-toggle::before,
.command-button.info:hover.dropdown-toggle::before,
.image-button.info:hover.dropdown-toggle::before,
.shortcut.info:hover.dropdown-toggle::before,
.tool-button.info:hover.dropdown-toggle::before,
.split-button .split.info:hover.dropdown-toggle::before,
tbody tr.info:hover.dropdown-toggle::before,
tbody td.info:hover.dropdown-toggle::before,
.tally.info:hover.dropdown-toggle::before,
code.info:hover.dropdown-toggle::before,
.notify.info:hover.dropdown-toggle::before,
.info-button.info:hover.dropdown-toggle::before,
.input .button.info:hover.dropdown-toggle::before,
.select .button.info:hover.dropdown-toggle::before,
.tag-input .button.info:hover.dropdown-toggle::before,
.spinner .button.info:hover.dropdown-toggle::before,
.toast.info:hover.dropdown-toggle::before {
  border-color: #ffffff;
}
.button.info.same-color:hover,
.command-button.info.same-color:hover,
.image-button.info.same-color:hover,
.shortcut.info.same-color:hover,
.tool-button.info.same-color:hover,
.split-button .split.info.same-color:hover,
tbody tr.info.same-color:hover,
tbody td.info.same-color:hover,
.tally.info.same-color:hover,
code.info.same-color:hover,
.notify.info.same-color:hover,
.info-button.info.same-color:hover,
.input .button.info.same-color:hover,
.select .button.info.same-color:hover,
.tag-input .button.info.same-color:hover,
.spinner .button.info.same-color:hover,
.toast.info.same-color:hover {
  background-color: #5ebdec;
  border-color: #5ebdec;
}
.button.info:active,
.command-button.info:active,
.ima