metro4/build/css/metro-common.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
 */
.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,
.image-button.info:active,
.shortcut.info:active,
.tool-button.info:active,
.split-button .split.info:active,
tbody tr.info:active,
tbody td.info:active,
.tally.info:active,
code.info:active,
.notify.info:active,
.info-button.info:active,
.input .button.info:active,
.select .button.info:active,
.tag-input .button.info:active,
.spinner .button.info:active,
.toast.info:active,
.button.info.focus,
.command-button.info.focus,
.image-button.info.focus,
.shortcut.info.focus,
.tool-button.info.focus,
.split-button .split.info.focus,
tbody tr.info.focus,
tbody td.info.focus,
.tally.info.focus,
code.info.focus,
.notify.info.focus,
.info-button.info.focus,
.input .button.info.focus,
.select .button.info.focus,
.tag-input .button.info.focus,
.spinner .button.info.focus,
.toast.info.focus,
.button.info:focus,
.command-button.info:focus,
.image-button.info:focus,
.shortcut.info:focus,
.tool-button.info:focus,
.split-button .split.info:focus,
tbody tr.info:focus,
tbody td.info:focus,
.tally.info:focus,
code.info:focus,
.notify.info:focus,
.info-button.info:focus,
.input .button.info:focus,
.select .button.info:focus,
.tag-input .button.info:focus,
.spinner .button.info:focus,
.toast.info:focus {
  -webkit-box-shadow: 0 0 0 3px rgba(94, 189, 236, 0.45);
          box-shadow: 0 0 0 3px rgba(94, 189, 236, 0.45);
}
.button.dark,
.command-button.dark,
.image-button.dark,
.shortcut.dark,
.tool-button.dark,
.split-button .split.dark,
tbody tr.dark,
tbody td.dark,
.tally.dark,
code.dark,
.notify.dark,
.info-button.dark,
.input .button.dark,
.select .button.dark,
.tag-input .button.dark,
.spinner .button.dark,
.toast.dark {
  outline-color: #9d9d9d;
  background-color: #505050;
  color: #ffffff;
}
.button.dark.outline,
.command-button.dark.outline,
.image-button.dark.outline,
.shortcut.dark.outline,
.tool-button.dark.outline,
.split-button .split.dark.outline,
tbody tr.dark.outline,
tbody td.dark.outline,
.tally.dark.outline,
code.dark.outline,
.notify.dark.outline,
.info-button.dark.outline,
.input .button.dark.outline,
.select .button.dark.outline,
.tag-input .button.dark.outline,
.spinner .button.dark.outline,
.toast.dark.outline {
  color: #505050;
  border-color: #505050;
}
.button.dark.outline.dropdown-toggle::before,
.command-button.dark.outline.dropdown-toggle::before,
.image-button.dark.outline.dropdown-toggle::before,
.shortcut.dark.outline.dropdown-toggle::before,
.tool-button.dark.outline.dropdown-toggle::before,
.split-button .split.dark.outline.dropdown-toggle::before,
tbody tr.dark.outline.dropdown-toggle::before,
tbody td.dark.outline.dropdown-toggle::before,
.tally.dark.outline.dropdown-toggle::before,
code.dark.outline.dropdown-toggle::before,
.notify.dark.outline.dropdown-toggle::before,
.info-button.dark.outline.dropdown-toggle::before,
.input .button.dark.outline.dropdown-toggle::before,
.select .button.dark.outline.dropdown-toggle::before,
.tag-input .button.dark.outline.dropdown-toggle::before,
.spinner .button.dark.outline.dropdown-t