metro4/build/css/metro-colors.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.2.38  (https://metroui.org.ua)
 * Copyright 2019 Sergey Pimenov
 * Licensed under MIT
 */
.op-default {
  background-color: rgba(27, 161, 226, 0.7) !important;
}
.bg-transparent {
  background-color: transparent !important;
}
.bg-hover:hover {
  background-color: rgba(29, 29, 29, 0.1) !important;
}
.bg-hover2:hover {
  background-color: rgba(29, 29, 29, 0.5) !important;
}
.bg-hover-light:hover {
  background-color: rgba(255, 255, 255, 0.01) !important;
}
.bg-hover-light1:hover {
  background-color: rgba(255, 255, 255, 0.1) !important;
}
.bg-hover-light2:hover {
  background-color: rgba(255, 255, 255, 0.2) !important;
}
.bg-hover-light3:hover {
  background-color: rgba(255, 255, 255, 0.3) !important;
}
.bg-facebook {
  background-color: #4267b2;
}
.bg-twitter {
  background-color: #1DA1F2;
}
.bg-github {
  background-color: #24292e;
}
.bg-bootstrap {
  background-color: #563d7c;
}
.bg-gitlab {
  background-color: #e65328;
}
.bg-amazon {
  background-color: #232f3e;
}
.bd-default {
  border-color: #dfdfdf !important;
}
.bd-transparent {
  border-color: transparent !important;
}
.fg-black {
  color: #000000 !important;
}
.bg-black {
  background-color: #000000 !important;
}
.bd-black {
  border-color: #000000 !important;
}
.ol-black {
  outline-color: #000000 !important;
}
.fg-black-active:active {
  color: #000000 !important;
}
.fg-black-hover:hover {
  color: #000000 !important;
}
.fg-black-focus:focus {
  color: #000000 !important;
}
.bg-black-active:active {
  background-color: #000000 !important;
}
.bg-black-hover:hover {
  background-color: #000000 !important;
}
.bg-black-focus:focus {
  background-color: #000000 !important;
}
.bd-black-active:active {
  border-color: #000000 !important;
}
.bd-black-hover:hover {
  border-color: #000000 !important;
}
.bd-black-focus:focus {
  border-color: #000000 !important;
}
.ol-black-active:active {
  outline-color: #000000 !important;
}
.ol-black-hover:hover {
  outline-color: #000000 !important;
}
.ol-black-focus:focus {
  outline-color: #000000 !important;
}
.ribbed-black {
  background: #000000 linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent) !important;
  background-size: 20px 20px !important;
}
.before-bg-black::before {
  background: #000000 !important;
}
.before-fg-black::before {
  color: #000000 !important;
}
.after-bg-black::after {
  background: #000000 !important;
}
.after-fg-black::after {
  color: #000000 !important;
}
.op-black {
  background-color: rgba(0, 0, 0, 0.7) !important;
}
.tg-black::before {
  border-color: #000000;
}
.fg-white {
  color: #ffffff !important;
}
.bg-white {
  background-color: #ffffff !important;
}
.bd-white {
  border-color: #ffffff !important;
}
.ol-white {
  outline-color: #ffffff !important;
}
.fg-white-active:active {
  color: #ffffff !important;
}
.fg-white-hover:hover {
  color: #ffffff !important;
}
.fg-white-focus:focus {
  color: #ffffff !important;
}
.bg-white-active:active {
  background-color: #ffffff !important;
}
.bg-white-hover:hover {
  background-color: #ffffff !important;
}
.bg-white-focus:focus {
  background-color: #ffffff !important;
}
.bd-white-active:active {
  border-color: #ffffff !important;
}
.bd-white-hover:hover {
  border-color: #ffffff !important;
}
.bd-white-focus:focus {
  border-color: #ffffff !important;
}
.ol-white-active:active {
  outline-color: #ffffff !important;
}
.ol-white-hover:hover {
  outline-color: #ffffff !important;
}
.ol-white-focus:focus {
  outline-color: #ffffff !important;
}
.ribbed-white {
  background: #ffffff linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent) !important;
  background-size: 20px 20px !important;
}
.before-bg-white::before {
  background: #ffffff !important;
}
.before-fg-white::before {
  color: #ffffff !important;
}
.after-bg-white::after {
  background: #ffffff !important;
}
.after-fg-white::after {
  color: #ffffff !important;
}
.op-white {
  background-color: rgba(255, 255, 255, 0.7) !important;
}
.tg-white::before {
  border-color: #ffffff;
}
.fg-dark {
  color: #1d1d1d !important;
}
.bg-dark {
  background-color: #1d1d1d !important;
}
.bd-dark {
  border-color: #1d1d1d !important;
}
.ol-dark {
  outline-color: #1d1d1d !important;
}
.fg-dark-active:active {
  color: #1d1d1d !important;
}
.fg-dark-hover:hover {
  color: #1d1d1d !important;
}
.fg-dark-focus:focus {
  color: #1d1d1d !important;
}
.bg-dark-active:active {
  background-color: #1d1d1d !important;
}
.bg-dark-hover:hover {
  background-color: #1d1d1d !important;
}
.bg-dark-focus:focus {
  background-color: #1d1d1d !important;
}
.bd-dark-active:active {
  border-color: #1d1d1d !important;
}
.bd-dark-hover:hover {
  border-color: #1d1d1d !important;
}
.bd-dark-focus:focus {
  border-color: #1d1d1d !important;
}
.ol-dark-active:active {
  outline-color: #1d1d1d !important;
}
.ol-dark-hover:hover {
  outline-color: #1d1d1d !important;
}
.ol-dark-focus:focus {
  outline-color: #1d1d1d !important;
}
.ribbed-dark {
  background: #1d1d1d linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent) !important;
  background-size: 20px 20px !important;
}
.before-bg-dark::before {
  background: #1d1d1d !important;
}
.before-fg-dark::before {
  color: #1d1d1d !important;
}
.after-bg-dark::after {
  background: #1d1d1d !important;
}
.after-fg-dark::after {
  color: #1d1d1d !important;
}
.op-dark {
  background-color: rgba(29, 29, 29, 0.7) !important;
}
.tg-dark::before {
  border-color: #1d1d1d;
}
.fg-light {
  color: #f8f8f8 !important;
}
.bg-light {
  background-color: #f8f8f8 !important;
}
.bd-light {
  border-color: #f8f8f8 !important;
}
.ol-light {
  outline-color: #f8f8f8 !important;
}
.fg-light-active:active {
  color: #f8f8f8 !important;
}
.fg-light-hover:hover {
  color: #f8f8f8 !important;
}
.fg-light-focus:focus {
  color: #f8f8f8 !important;
}
.bg-light-active:active {
  background-color: #f8f8f8 !important;
}
.bg-light-hover:hover {
  background-color: #f8f8f8 !important;
}
.bg-light-focus:focus {
  background-color: #f8f8f8 !important;
}
.bd-light-active:active {
  border-color: #f8f8f8 !important;
}
.bd-light-hover:hover {
  border-color: #f8f8f8 !important;
}
.bd-light-focus:focus {
  border-color: #f8f8f8 !important;
}
.ol-light-active:active {
  outline-color: #f8f8f8 !important;
}
.ol-light-hover:hover {
  outline-color: #f8f8f8 !important;
}
.ol-light-focus:focus {
  outline-color: #f8f8f8 !important;
}
.ribbed-light {
  background: #f8f8f8 linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent) !important;
  background-size: 20px 20px !important;
}
.before-bg-light::before {
  background: #f8f8f8 !important;
}
.before-fg-light::before {
  color: #f8f8f8 !important;
}
.after-bg-light::after {
  background: #f8f8f8 !important;
}
.after-fg-light::after {
  color: #f8f8f8 !important;
}
.op-light {
  background-color: rgba(248, 248, 248, 0.7) !important;
}
.tg-light::before {
  border-color: #f8f8f8;
}
.fg-grayBlue {
  color: #607d8b !important;
}
.bg-grayBlue {
  background-color: #607d8b !important;
}
.bd-grayBlue {
  border-color: #607d8b !important;
}
.ol-grayBlue {
  outline-color: #607d8b !important;
}
.fg-grayBlue-active:active {
  color: #607d8b !important;
}
.fg-grayBlue-hover:hover {
  color: #607d8b !important;
}
.fg-grayBlue-focus:focus {
  color: #607d8b !important;
}
.bg-grayBlue-active:active {
  background-color: #607d8b !important;
}
.bg-grayBlue-hover:hover {
  background-color: #607d8b !important;
}
.bg-grayBlue-focus:focus {
  background-color: #607d8b !important;
}
.bd-grayBlue-active:active {
  border-color: #607d8b !important;
}
.bd-grayBlue-hover:hover {
  border-color: #607d8b !important;
}
.bd-grayBlue-focus:focus {
  border-color: #607d8b !important;
}
.ol-grayBlue-active:active {
  outline-color: #607d8b !important;
}
.ol-grayBlue-hover:hover {
  outline-color: #607d8b !important;
}
.ol-grayBlue-focus:focus {
  outline-color: #607d8b !important;
}
.ribbed-grayBlue {
  background: #607d8b linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent) !important;
  background-size: 20px 20px !important;
}
.before-bg-grayBlue::before {
  background: #607d8b !important;
}
.before-fg-grayBlue::before {
  color: #607d8b !important;
}
.after-bg-grayBlue::after {
  background: #607d8b !important;
}
.after-fg-grayBlue::after {
  color: #607d8b !important;
}
.op-grayBlue {
  background-color: rgba(96, 125, 139, 0.7) !important;
}
.tg-grayBlue::before {
  border-color: #607d8b;
}
.fg-grayWhite {
  color: #f5f5f5 !important;
}
.bg-grayWhite {
  background-color: #f5f5f5 !important;
}
.bd-grayWhite {
  border-color: #f5f5f5 !important;
}
.ol-grayWhite {
  outline-color: #f5f5f5 !important;
}
.fg-grayWhite-active:active {
  color: #f5f5f5 !important;
}
.fg-grayWhite-hover:hover {
  color: #f5f5f5 !important;
}
.fg-grayWhite-focus:focus {
  color: #f5f5f5 !important;
}
.bg-grayWhite-active:active {
  background-color: #f5f5f5 !important;
}
.bg-grayWhite-hover:hover {
  background-color: #f5f5f5 !important;
}
.bg-grayWhite-focus:focus {
  background-color: #f5f5f5 !important;
}
.bd-grayWhite-active:active {
  border-color: #f5f5f5 !important;
}
.bd-grayWhite-hover:hover {
  border-color: #f5f5f5 !important;
}
.bd-grayWhite-focus:focus {
  border-color: #f5f5f5 !important;
}
.ol-grayWhite-active:active {
  outline-color: #f5f5f5 !important;
}
.ol-grayWhite-hover:hover {
  outline-color: #f5f5f5 !important;
}
.ol-grayWhite-focus:focus {
  outline-color: #f5f5f5 !important;
}
.ribbed-grayWhite {
  background: #f5f5f5 linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent) !important;
  background-size: 20px 20px !important;
}
.before-bg-grayWhite::before {
  background: #f5f5f5 !important;
}
.before-fg-grayWhite::before {
  color: #f5f5f5 !important;
}
.after-bg-grayWhite::after {
  background: #f5f5f5 !important;
}
.after-fg-grayWhite::after {
  color: #f5f5f5 !important;
}
.op-grayWhite {
  background-color: rgba(245, 245, 245, 0.7) !important;
}
.tg-grayWhite::before {
  border-color: #f5f5f5;
}
.fg-grayMouse {
  color: #455a64 !important;
}
.bg-grayMouse {
  background-color: #455a64 !important;
}
.bd-grayMouse {
  border-color: #455a64 !important;
}
.ol-grayMouse {
  outline-color: #455a64 !important;
}
.fg-grayMouse-active:active {
  color: #455a64 !important;
}
.fg-grayMouse-hover:hover {
  color: #455a64 !important;
}
.fg-grayMouse-focus:focus {
  color: #455a64 !important;
}
.bg-grayMouse-active:active {
  background-color: #455a64 !important;
}
.bg-grayMouse-hover:hover {
  background-color: #455a64 !important;
}
.bg-grayMouse-focus:focus {
  background-color: #455a64 !important;
}
.bd-grayMouse-active:active {
  border-color: #455a64 !important;
}
.bd-grayMouse-hover:hover {
  border-color: #455a64 !important;
}
.bd-grayMouse-focus:focus {
  border-color: #455a64 !important;
}
.ol-grayMouse-active:active {
  outline-color: #455a64 !important;
}
.ol-grayMouse-hover:hover {
  outline-color: #455a64 !important;
}
.ol-grayMouse-focus:focus {
  outline-color: #455a64 !important;
}
.ribbed-grayMouse {
  background: #455a64 linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent) !important;
  background-size: 20px 20px !important;
}
.before-bg-grayMouse::before {
  background: #455a64 !important;
}
.before-fg-grayMouse::before {
  color: #455a64 !important;
}
.after-bg-grayMouse::after {
  background: #455a64 !important;
}
.after-fg-grayMouse::after {
  color: #455a64 !important;
}
.op-grayMouse {
  background-color: rgba(69, 90, 100, 0.7) !important;
}
.tg-grayMouse::before {
  border-color: #455a64;
}
.fg-brandColor1 {
  color: #2ac4f4 !important;
}
.bg-brandColor1 {
  background-color: #2ac4f4 !important;
}
.bd-brandColor1 {
  border-color: #2ac4f4 !important;
}
.ol-brandColor1 {
  outline-color: #2ac4f4 !important;
}
.fg-brandColor1-active:active {
  color: #2ac4f4 !important;
}
.fg-brandColor1-hover:hover {
  color: #2ac4f4 !important;
}
.fg-brandColor1-focus:focus {
  color: #2ac4f4 !important;
}
.bg-brandColor1-active:active {
  background-color: #2ac4f4 !important;
}
.bg-brandColor1-hover:hover {
  background-color: #2ac4f4 !important;
}
.bg-brandColor1-focus:focus {
  background-color: #2ac4f4 !important;
}
.bd-brandColor1-active:active {
  border-color: #2ac4f4 !important;
}
.bd-brandColor1-hover:hover {
  border-color: #2ac4f4 !important;
}
.bd-brandColor1-focus:focus {
  border-color: #2ac4f4 !important;
}
.ol-brandColor1-active:active {
  outline-color: #2ac4f4 !important;
}
.ol-brandColor1-hover:hover {
  outline-color: #2ac4f4 !important;
}
.ol-brandColor1-focus:focus {
  outline-color: #2ac4f4 !important;
}
.ribbed-brandColor1 {
  background: #2ac4f4 linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent) !important;
  background-size: 20px 20px !important;
}
.before-bg-brandColor1::before {
  background: #2ac4f4 !important;
}
.before-fg-brandColor1::before {
  color: #2ac4f4 !important;
}
.after-bg-brandColor1::after {
  background: #2ac4f4 !important;
}
.after-fg-brandColor1::after {
  color: #2ac4f4 !important;
}
.op-brandColor1 {
  background-color: rgba(42, 196, 244, 0.7) !important;
}
.tg-brandColor1::before {
  border-color: #2ac4f4;
}
.fg-brandColor2 {
  color: #004d6f !important;
}
.bg-brandColor2 {
  background-color: #004d6f !important;
}
.bd-brandColor2 {
  border-color: #004d6f !important;
}
.ol-brandColor2 {
  outline-color: #004d6f !important;
}
.fg-brandColor2-active:active {
  color: #004d6f !important;
}
.fg-brandColor2-hover:hover {
  color: #004d6f !important;
}
.fg-brandColor2-focus:focus {
  color: #004d6f !important;
}
.bg-brandColor2-active:active {
  background-color: #004d6f !important;
}
.bg-brandColor2-hover:hover {
  background-color: #004d6f !important;
}
.bg-brandColor2-focus:focus {
  background-color: #004d6f !important;
}
.bd-brandColor2-active:active {
  border-color: #004d6f !important;
}
.bd-brandColor2-hover:hover {
  border-color: #004d6f !important;
}
.bd-brandColor2-focus:focus {
  border-color: #004d6f !important;
}
.ol-brandColor2-active:active {
  outline-color: #004d6f !important;
}
.ol-brandColor2-hover:hover {
  outline-color: #004d6f !important;
}
.ol-brandColor2-focus:focus {
  outline-color: #004d6f !important;
}
.ribbed-brandColor2 {
  background: #004d6f linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent) !important;
  background-size: 20px 20px !important;
}
.before-bg-brandColor2::before {
  background: #004d6f !important;
}
.before-fg-brandColor2::before {
  color: #004d6f !important;
}
.after-bg-brandColor2::after {
  background: #004d6f !important;
}
.after-fg-brandColor2::after {
  color: #004d6f !important;
}
.op-brandColor2 {
  background-color: rgba(0, 77, 111, 0.7) !important;
}
.tg-brandColor2::before {
  border-color: #004d6f;
}
.fg-lime {
  color: #a4c400 !important;
}
.bg-lime {
  background-color: #a4c400 !important;
}
.bd-lime {
  border-color: #a4c400 !important;
}
.ol-lime {
  outline-color: #a4c400 !important;
}
.fg-lime-active:active {
  color: #a4c400 !important;
}
.fg-lime-hover:hover {
  color: #a4c400 !important;
}
.fg-lime-focus:focus {
  color: #a4c400 !important;
}
.bg-lime-active:active {
  background-color: #a4c400 !important;
}
.bg-lime-hover:hover {
  background-color: #a4c400 !important;
}
.bg-lime-focus:focus {
  background-color: #a4c400 !important;
}
.bd-lime-active:active {
  border-color: #a4c400 !important;
}
.bd-lime-hover:hover {
  border-color: #a4c400 !important;
}
.bd-lime-focus:focus {
  border-color: #a4c400 !important;
}
.ol-lime-active:active {
  outline-color: #a4c400 !important;
}
.ol-lime-hover:hover {
  outline-color: #a4c400 !important;
}
.ol-lime-focus:focus {
  outline-color: #a4c400 !important;
}
.ribbed-lime {
  background: #a4c400 linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent) !important;
  background-size: 20px 20px !important;
}
.before-bg-lime::before {
  background: #a4c400 !important;
}
.before-fg-lime::before {
  color: #a4c400 !important;
}
.after-bg-lime::after {
  background: #a4c400 !important;
}
.after-fg-lime::after {
  color: #a4c400 !important;
}
.op-lime {
  background-color: rgba(164, 196, 0, 0.7) !important;
}
.tg-lime::before {
  border-color: #a4c400;
}
.fg-green {
  color: #60a917 !important;
}
.bg-green {
  background-color: #60a917 !important;
}
.bd-green {
  border-color: #60a917 !important;
}
.ol-green {
  outline-color: #60a917 !important;
}
.fg-green-active:active {
  color: #60a917 !important;
}
.fg-green-hover:hover {
  color: #60a917 !important;
}
.fg-green-focus:focus {
  color: #60a917 !important;
}
.bg-green-active:active {
  background-color: #60a917 !important;
}
.bg-green-hover:hover {
  background-color: #60a917 !important;
}
.bg-green-focus:focus {
  background-color: #60a917 !important;
}
.bd-green-active:active {
  border-color: #60a917 !important;
}
.bd-green-hover:hover {
  border-color: #60a917 !important;
}
.bd-green-focus:focus {
  border-color: #60a917 !important;
}
.ol-green-active:active {
  outline-color: #60a917 !important;
}
.ol-green-hover:hover {
  outline-color: #60a917 !important;
}
.ol-green-focus:focus {
  outline-color: #60a917 !important;
}
.ribbed-green {
  background: #60a917 linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent) !important;
  background-size: 20px 20px !important;
}
.before-bg-green::before {
  background: #60a917 !important;
}
.before-fg-green::before {
  color: #60a917 !important;
}
.after-bg-green::after {
  background: #60a917 !important;
}
.after-fg-green::after {
  color: #60a917 !important;
}
.op-green {
  background-color: rgba(96, 169, 23, 0.7) !important;
}
.tg-green::before {
  border-color: #60a917;
}
.fg-emerald {
  color: #008a00 !important;
}
.bg-emerald {
  background-color: #008a00 !important;
}
.bd-emerald {
  border-color: #008a00 !important;
}
.ol-emerald {
  outline-color: #008a00 !important;
}
.fg-emerald-active:active {
  color: #008a00 !important;
}
.fg-emerald-hover:hover {
  color: #008a00 !important;
}
.fg-emerald-focus:focus {
  color: #008a00 !important;
}
.bg-emerald-active:active {
  background-color: #008a00 !important;
}
.bg-emerald-hover:hover {
  background-color: #008a00 !important;
}
.bg-emerald-focus:focus {
  background-color: #008a00 !important;
}
.bd-emerald-active:active {
  border-color: #008a00 !important;
}
.bd-emerald-hover:hover {
  border-color: #008a00 !important;
}
.bd-emerald-focus:focus {
  border-color: #008a00 !important;
}
.ol-emerald-active:active {
  outline-color: #008a00 !important;
}
.ol-emerald-hover:hover {
  outline-color: #008a00 !important;
}
.ol-emerald-focus:focus {
  outline-color: #008a00 !important;
}
.ribbed-emerald {
  background: #008a00 linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent) !important;
  background-size: 20px 20px !important;
}
.before-bg-emerald::before {
  background: #008a00 !important;
}
.before-fg-emerald::before {
  color: #008a00 !important;
}
.after-bg-emerald::after {
  background: #008a00 !important;
}
.after-fg-emerald::after {
  color: #008a00 !important;
}
.op-emerald {
  background-color: rgba(0, 138, 0, 0.7) !important;
}
.tg-emerald::before {
  border-color: #008a00;
}
.fg-blue {
  color: #00AFF0 !important;
}
.bg-blue {
  background-color: #00AFF0 !important;
}
.bd-blue {
  border-color: #00AFF0 !important;
}
.ol-blue {
  outline-color: #00AFF0 !important;
}
.fg-blue-active:active {
  color: #00AFF0 !important;
}
.fg-blue-hover:hover {
  color: #00AFF0 !important;
}
.fg-blue-focus:focus {
  color: #00AFF0 !important;
}
.bg-blue-active:active {
  background-color: #00AFF0 !important;
}
.bg-blue-hover:hover {
  background-color: #00AFF0 !important;
}
.bg-blue-focus:focus {
  background-color: #00AFF0 !important;
}
.bd-blue-active:active {
  border-color: #00AFF0 !important;
}
.bd-blue-hover:hover {
  border-color: #00AFF0 !important;
}
.bd-blue-focus:focus {
  border-color: #00AFF0 !important;
}
.ol-blue-active:active {
  outline-color: #00AFF0 !important;
}
.ol-blue-hover:hover {
  outline-color: #00AFF0 !important;
}
.ol-blue-focus:focus {
  outline-color: #00AFF0 !important;
}
.ribbed-blue {
  background: #00AFF0 linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent) !important;
  background-size: 20px 20px !important;
}
.before-bg-blue::before {
  background: #00AFF0 !important;
}
.before-fg-blue::before {
  color: #00AFF0 !important;
}
.after-bg-blue::after {
  background: #00AFF0 !important;
}
.after-fg-blue::after {
  color: #00AFF0 !important;
}
.op-blue {
  background-color: rgba(0, 175, 240, 0.7) !important;
}
.tg-blue::before {
  border-color: #00AFF0;
}
.fg-teal {
  color: #00aba9 !important;
}
.bg-teal {
  background-color: #00aba9 !important;
}
.bd-teal {
  border-color: #00aba9 !important;
}
.ol-teal {
  outline-color: #00aba9 !important;
}
.fg-teal-active:active {
  color: #00aba9 !important;
}
.fg-teal-hover:hover {
  color: #00aba9 !important;
}
.fg-teal-focus:focus {
  color: #00aba9 !important;
}
.bg-teal-active:active {
  background-color: #00aba9 !important;
}
.bg-teal-hover:hover {
  background-color: #00aba9 !important;
}
.bg-teal-focus:focus {
  background-color: #00aba9 !important;
}
.bd-teal-active:active {
  border-color: #00aba9 !important;
}
.bd-teal-hover:hover {
  border-color: #00aba9 !important;
}
.bd-teal-focus:focus {
  border-color: #00aba9 !important;
}
.ol-teal-active:active {
  outline-color: #00aba9 !important;
}
.ol-teal-hover:hover {
  outline-color: #00aba9 !important;
}
.ol-teal-focus:focus {
  outline-color: #00aba9 !important;
}
.ribbed-teal {
  background: #00aba9 linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent) !important;
  background-size: 20px 20px !important;
}
.before-bg-teal::before {
  background: #00aba9 !important;
}
.before-fg-teal::before {
  color: #00aba9 !important;
}
.after-bg-teal::after {
  background: #00aba9 !important;
}
.after-fg-teal::after {
  color: #00aba9 !important;
}
.op-teal {
  background-color: rgba(0, 171, 169, 0.7) !important;
}
.tg-teal::before {
  border-color: #00aba9;
}
.fg-cyan {
  color: #1ba1e2 !important;
}
.bg-cyan {
  background-color: #1ba1e2 !important;
}
.bd-cyan {
  border-color: #1ba1e2 !important;
}
.ol-cyan {
  outline-color: #1ba1e2 !important;
}
.fg-cyan-active:active {
  color: #1ba1e2 !important;
}
.fg-cyan-hover:hover {
  color: #1ba1e2 !important;
}
.fg-cyan-focus:focus {
  color: #1ba1e2 !important;
}
.bg-cyan-active:active {
  background-color: #1ba1e2 !important;
}
.bg-cyan-hover:hover {
  background-color: #1ba1e2 !important;
}
.bg-cyan-focus:focus {
  background-color: #1ba1e2 !important;
}
.bd-cyan-active:active {
  border-color: #1ba1e2 !important;
}
.bd-cyan-hover:hover {
  border-color: #1ba1e2 !important;
}
.bd-cyan-focus:focus {
  border-color: #1ba1e2 !important;
}
.ol-cyan-active:active {
  outline-color: #1ba1e2 !important;
}
.ol-cyan-hover:hover {
  outline-color: #1ba1e2 !important;
}
.ol-cyan-focus:focus {
  outline-color: #1ba1e2 !important;
}
.ribbed-cyan {
  background: #1ba1e2 linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent) !important;
  background-size: 20px 20px !important;
}
.before-bg-cyan::before {
  background: #1ba1e2 !important;
}
.before-fg-cyan::before {
  color: #1ba1e2 !important;
}
.after-bg-cyan::after {
  background: #1ba1e2 !important;
}
.after-fg-cyan::after {
  color: #1ba1e2 !important;
}
.op-cyan {
  background-color: rgba(27, 161, 226, 0.7) !important;
}
.tg-cyan::before {
  border-color: #1ba1e2;
}
.fg-cobalt {
  color: #0050ef !important;
}
.bg-cobalt {
  background-color: #0050ef !important;
}
.bd-cobalt {
  border-color: #0050ef !important;
}
.ol-cobalt {
  outline-color: #0050ef !important;
}
.fg-cobalt-active:active {
  color: #0050ef !important;
}
.fg-cobalt-hover:hover {
  color: #0050ef !important;
}
.fg-cobalt-focus:focus {
  color: #0050ef !important;
}
.bg-cobalt-active:active {
  background-color: #0050ef !important;
}
.bg-cobalt-hover:hover {
  background-color: #0050ef !important;
}
.bg-cobalt-focus:focus {
  background-color: #0050ef !important;
}
.bd-cobalt-active:active {
  border-color: #0050ef !important;
}
.bd-cobalt-hover:hover {
  border-color: #0050ef !important;
}
.bd-cobalt-focus:focus {
  border-color: #0050ef !important;
}
.ol-cobalt-active:active {
  outline-color: #0050ef !important;
}
.ol-cobalt-hover:hover {
  outline-color: #0050ef !important;
}
.ol-cobalt-focus:focus {
  outline-color: #0050ef !important;
}
.ribbed-cobalt {
  background: #0050ef linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent) !important;
  background-size: 20px 20px !important;
}
.before-bg-cobalt::before {
  background: #0050ef !important;
}
.before-fg-cobalt::before {
  color: #0050ef !important;
}
.after-bg-cobalt::after {
  background: #0050ef !important;
}
.after-fg-cobalt::after {
  color: #0050ef !important;
}
.op-cobalt {
  background-color: rgba(0, 80, 239, 0.7) !important;
}
.tg-cobalt::before {
  border-color: #0050ef;
}
.fg-indigo {
  color: #6a00ff !important;
}
.bg-indigo {
  background-color: #6a00ff !important;
}
.bd-indigo {
  border-color: #6a00ff !important;
}
.ol-indigo {
  outline-color: #6a00ff !important;
}
.fg-indigo-active:active {
  color: #6a00ff !important;
}
.fg-indigo-hover:hover {
  color: #6a00ff !important;
}
.fg-indigo-focus:focus {
  color: #6a00ff !important;
}
.bg-indigo-active:active {
  background-color: #6a00ff !important;
}
.bg-indigo-hover:hover {
  background-color: #6a00ff !important;
}
.bg-indigo-focus:focus {
  background-color: #6a00ff !important;
}
.bd-indigo-active:active {
  border-color: #6a00ff !important;
}
.bd-indigo-hover:hover {
  border-color: #6a00ff !important;
}
.bd-indigo-focus:focus {
  border-color: #6a00ff !important;
}
.ol-indigo-active:active {
  outline-color: #6a00ff !important;
}
.ol-indigo-hover:hover {
  outline-color: #6a00ff !important;
}
.ol-indigo-focus:focus {
  outline-color: #6a00ff !important;
}
.ribbed-indigo {
  background: #6a00ff linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent) !important;
  background-size: 20px 20px !important;
}
.before-bg-indigo::before {
  background: #6a00ff !important;
}
.before-fg-indigo::before {
  color: #6a00ff !important;
}
.after-bg-indigo::after {
  background: #6a00ff !important;
}
.after-fg-indigo::after {
  color: #6a00ff !important;
}
.op-indigo {
  background-color: rgba(106, 0, 255, 0.7) !important;
}
.tg-indigo::before {
  border-color: #6a00ff;
}
.fg-violet {
  color: #aa00ff !important;
}
.bg-violet {
  background-color: #aa00ff !important;
}
.bd-violet {
  border-color: #aa00ff !important;
}
.ol-violet {
  outline-color: #aa00ff !important;
}
.fg-violet-active:active {
  color: #aa00ff !important;
}
.fg-violet-hover:hover {
  color: #aa00ff !important;
}
.fg-violet-focus:focus {
  color: #aa00ff !important;
}
.bg-violet-active:active {
  background-color: #aa00ff !important;
}
.bg-violet-hover:hover {
  background-color: #aa00ff !important;
}
.bg-violet-focus:focus {
  background-color: #aa00ff !important;
}
.bd-violet-active:active {
  border-color: #aa00ff !important;
}
.bd-violet-hover:hover {
  border-color: #aa00ff !important;
}
.bd-violet-focus:focus {
  border-color: #aa00ff !important;
}
.ol-violet-active:active {
  outline-color: #aa00ff !important;
}
.ol-violet-hover:hover {
  outline-color: #aa00ff !important;
}
.ol-violet-focus:focus {
  outline-color: #aa00ff !important;
}
.ribbed-violet {
  background: #aa00ff linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent) !important;
  background-size: 20px 20px !important;
}
.before-bg-violet::before {
  background: #aa00ff !important;
}
.before-fg-violet::before {
  color: #aa00ff !important;
}
.after-bg-violet::after {
  background: #aa00ff !important;
}
.after-fg-violet::after {
  color: #aa00ff !important;
}
.op-violet {
  background-color: rgba(170, 0, 255, 0.7) !important;
}
.tg-violet::before {
  border-color: #aa00ff;
}
.fg-pink {
  color: #dc4fad !important;
}
.bg-pink {
  background-color: #dc4fad !important;
}
.bd-pink {
  border-color: #dc4fad !important;
}
.ol-pink {
  outline-color: #dc4fad !important;
}
.fg-pink-active:active {
  color: #dc4fad !important;
}
.fg-pink-hover:hover {
  color: #dc4fad !important;
}
.fg-pink-focus:focus {
  color: #dc4fad !important;
}
.bg-pink-active:active {
  background-color: #dc4fad !important;
}
.bg-pink-hover:hover {
  background-color: #dc4fad !important;
}
.bg-pink-focus:focus {
  background-color: #dc4fad !important;
}
.bd-pink-active:active {
  border-color: #dc4fad !important;
}
.bd-pink-hover:hover {
  border-color: #dc4fad !important;
}
.bd-pink-focus:focus {
  border-color: #dc4fad !important;
}
.ol-pink-active:active {
  outline-color: #dc4fad !important;
}
.ol-pink-hover:hover {
  outline-color: #dc4fad !important;
}
.ol-pink-focus:focus {
  outline-color: #dc4fad !important;
}
.ribbed-pink {
  background: #dc4fad linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent) !important;
  background-size: 20px 20px !important;
}
.before-bg-pink::before {
  background: #dc4fad !important;
}
.before-fg-pink::before {
  color: #dc4fad !important;
}
.after-bg-pink::after {
  background: #dc4fad !important;
}
.after-fg-pink::after {
  color: #dc4fad !important;
}
.op-pink {
  background-color: rgba(220, 79, 173, 0.7) !important;
}
.tg-pink::before {
  border-color: #dc4fad;
}
.fg-magenta {
  color: #d80073 !important;
}
.bg-magenta {
  background-color: #d80073 !important;
}
.bd-magenta {
  border-color: #d80073 !important;
}
.ol-magenta {
  outline-color: #d80073 !important;
}
.fg-magenta-active:active {
  color: #d80073 !important;
}
.fg-magenta-hover:hover {
  color: #d80073 !important;
}
.fg-magenta-focus:focus {
  color: #d80073 !important;
}
.bg-magenta-active:active {
  background-color: #d80073 !important;
}
.bg-magenta-hover:hover {
  background-color: #d80073 !important;
}
.bg-magenta-focus:focus {
  background-color: #d80073 !important;
}
.bd-magenta-active:active {
  border-color: #d80073 !important;
}
.bd-magenta-hover:hover {
  border-color: #d80073 !important;
}
.bd-magenta-focus:focus {
  border-color: #d80073 !important;
}
.ol-magenta-active:active {
  outline-color: #d80073 !important;
}
.ol-magenta-hover:hover {
  outline-color: #d80073 !important;
}
.ol-magenta-focus:focus {
  outline-color: #d80073 !important;
}
.ribbed-magenta {
  background: #d80073 linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent) !important;
  background-size: 20px 20px !important;
}
.before-bg-magenta::before {
  background: #d80073 !important;
}
.before-fg-magenta::before {
  color: #d80073 !important;
}
.after-bg-magenta::after {
  background: #d80073 !important;
}
.after-fg-magenta::after {
  color: #d80073 !important;
}
.op-magenta {
  background-color: rgba(216, 0, 115, 0.7) !important;
}
.tg-magenta::before {
  border-color: #d80073;
}
.fg-crimson {
  color: #a20025 !important;
}
.bg-crimson {
  background-color: #a20025 !important;
}
.bd-crimson {
  border-color: #a20025 !important;
}
.ol-crimson {
  outline-color: #a20025 !important;
}
.fg-crimson-active:active {
  color: #a20025 !important;
}
.fg-crimson-hover:hover {
  color: #a20025 !important;
}
.fg-crimson-focus:focus {
  color: #a20025 !important;
}
.bg-crimson-active:active {
  background-color: #a20025 !important;
}
.bg-crimson-hover:hover {
  background-color: #a20025 !important;
}
.bg-crimson-focus:focus {
  background-color: #a20025 !important;
}
.bd-crimson-active:active {
  border-color: #a20025 !important;
}
.bd-crimson-hover:hover {
  border-color: #a20025 !important;
}
.bd-crimson-focus:focus {
  border-color: #a20025 !important;
}
.ol-crimson-active:active {
  outline-color: #a20025 !important;
}
.ol-crimson-hover:hover {
  outline-color: #a20025 !important;
}
.ol-crimson-focus:focus {
  outline-color: #a20025 !important;
}
.ribbed-crimson {
  background: #a20025 linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent) !important;
  background-size: 20px 20px !important;
}
.before-bg-crimson::before {
  background: #a20025 !important;
}
.before-fg-crimson::before {
  color: #a20025 !important;
}
.after-bg-crimson::after {
  background: #a20025 !important;
}
.after-fg-crimson::after {
  color: #a20025 !important;
}
.op-crimson {
  background-color: rgba(162, 0, 37, 0.7) !important;
}
.tg-crimson::before {
  border-color: #a20025;
}
.fg-red {
  color: #CE352C !important;
}
.bg-red {
  background-color: #CE352C !important;
}
.bd-red {
  border-color: #CE352C !important;
}
.ol-red {
  outline-color: #CE352C !important;
}
.fg-red-active:active {
  color: #CE352C !important;
}
.fg-red-hover:hover {
  color: #CE352C !important;
}
.fg-red-focus:focus {
  color: #CE352C !important;
}
.bg-red-active:active {
  background-color: #CE352C !important;
}
.bg-red-hover:hover {
  background-color: #CE352C !important;
}
.bg-red-focus:focus {
  background-color: #CE352C !important;
}
.bd-red-active:active {
  border-color: #CE352C !important;
}
.bd-red-hover:hover {
  border-color: #CE352C !important;
}
.bd-red-focus:focus {
  border-color: #CE352C !important;
}
.ol-red-active:active {
  outline-color: #CE352C !important;
}
.ol-red-hover:hover {
  outline-color: #CE352C !important;
}
.ol-red-focus:focus {
  outline-color: #CE352C !important;
}
.ribbed-red {
  background: #CE352C linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent) !important;
  background-size: 20px 20px !important;
}
.before-bg-red::before {
  background: #CE352C !important;
}
.before-fg-red::before {
  color: #CE352C !important;
}
.after-bg-red::after {
  background: #CE352C !important;
}
.after-fg-red::after {
  color: #CE352C !important;
}
.op-red {
  background-color: rgba(206, 53, 44, 0.7) !important;
}
.tg-red::before {
  border-color: #CE352C;
}
.fg-orange {
  color: #fa6800 !important;
}
.bg-orange {
  background-color: #fa6800 !important;
}
.bd-orange {
  border-color: #fa6800 !important;
}
.ol-orange {
  outline-color: #fa6800 !important;
}
.fg-orange-active:active {
  color: #fa6800 !important;
}
.fg-orange-hover:hover {
  color: #fa6800 !important;
}
.fg-orange-focus:focus {
  color: #fa6800 !important;
}
.bg-orange-active:active {
  background-color: #fa6800 !important;
}
.bg-orange-hover:hover {
  background-color: #fa6800 !important;
}
.bg-orange-focus:focus {
  background-color: #fa6800 !important;
}
.bd-orange-active:active {
  border-color: #fa6800 !important;
}
.bd-orange-hover:hover {
  border-color: #fa6800 !important;
}
.bd-orange-focus:focus {
  border-color: #fa6800 !important;
}
.ol-orange-active:active {
  outline-color: #fa6800 !important;
}
.ol-orange-hover:hover {
  outline-color: #fa6800 !important;
}
.ol-orange-focus:focus {
  outline-color: #fa6800 !important;
}
.ribbed-orange {
  background: #fa6800 linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent) !important;
  background-size: 20px 20px !important;
}
.before-bg-orange::before {
  background: #fa6800 !important;
}
.before-fg-orange::before {
  color: #fa6800 !important;
}
.after-bg-orange::after {
  background: #fa6800 !important;
}
.after-fg-orange::after {
  color: #fa6800 !important;
}
.op-orange {
  background-color: rgba(250, 104, 0, 0.7) !important;
}
.tg-orange::before {
  border-color: #fa6800;
}
.fg-amber {
  color: #f0a30a !important;
}
.bg-amber {
  background-color: #f0a30a !important;
}
.bd-amber {
  border-color: #f0a30a !important;
}
.ol-amber {
  outline-color: #f0a30a !important;
}
.fg-amber-active:active {
  color: #f0a30a !important;
}
.fg-amber-hover:hover {
  color: #f0a30a !important;
}
.fg-amber-focus:focus {
  color: #f0a30a !important;
}
.bg-amber-active:active {
  background-color: #f0a30a !important;
}
.bg-amber-hover:hover {
  background-color: #f0a30a !important;
}
.bg-amber-focus:focus {
  background-color: #f0a30a !important;
}
.bd-amber-active:active {
  border-color: #f0a30a !important;
}
.bd-amber-hover:hover {
  border-color: #f0a30a !important;
}
.bd-amber-focus:focus {
  border-color: #f0a30a !important;
}
.ol-amber-active:active {
  outline-color: #f0a30a !important;
}
.ol-amber-hover:hover {
  outline-color: #f0a30a !important;
}
.ol-amber-focus:focus {
  outline-color: #f0a30a !important;
}
.ribbed-amber {
  background: #f0a30a linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent) !important;
  background-size: 20px 20px !important;
}
.before-bg-amber::before {
  background: #f0a30a !important;
}
.before-fg-amber::before {
  color: #f0a30a !important;
}
.after-bg-amber::after {
  background: #f0a30a !important;
}
.after-fg-amber::after {
  color: #f0a30a !important;
}
.op-amber {
  background-color: rgba(240, 163, 10, 0.7) !important;
}
.tg-amber::before {
  border-color: #f0a30a;
}
.fg-yellow {
  color: #fff000 !important;
}
.bg-yellow {
  background-color: #fff000 !important;
}
.bd-yellow {
  border-color: #fff000 !important;
}
.ol-yellow {
  outline-color: #fff000 !important;
}
.fg-yellow-active:active {
  color: #fff000 !important;
}
.fg-yellow-hover:hover {
  color: #fff000 !important;
}
.fg-yellow-focus:focus {
  color: #fff000 !important;
}
.bg-yellow-active:active {
  background-color: #fff000 !important;
}
.bg-yellow-hover:hover {
  background-color: #fff000 !important;
}
.bg-yellow-focus:focus {
  background-color: #fff000 !important;
}
.bd-yellow-active:active {
  border-color: #fff000 !important;
}
.bd-yellow-hover:hover {
  border-color: #fff000 !important;
}
.bd-yellow-focus:focus {
  border-color: #fff000 !important;
}
.ol-yellow-active:active {
  outline-color: #fff000 !important;
}
.ol-yellow-hover:hover {
  outline-color: #fff000 !important;
}
.ol-yellow-focus:focus {
  outline-color: #fff000 !important;
}
.ribbed-yellow {
  background: #fff000 linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent) !important;
  background-size: 20px 20px !important;
}
.before-bg-yellow::before {
  background: #fff000 !important;
}
.before-fg-yellow::before {
  color: #fff000 !important;
}
.after-bg-yellow::after {
  background: #fff000 !important;
}
.after-fg-yellow::after {
  color: #fff000 !important;
}
.op-yellow {
  background-color: rgba(255, 240, 0, 0.7) !important;
}
.tg-yellow::before {
  border-color: #fff000;
}
.fg-brown {
  color: #825a2c !important;
}
.bg-brown {
  background-color: #825a2c !important;
}
.bd-brown {
  border-color: #825a2c !important;
}
.ol-brown {
  outline-color: #825a2c !important;
}
.fg-brown-active:active {
  color: #825a2c !important;
}
.fg-brown-hover:hover {
  color: #825a2c !important;
}
.fg-brown-focus:focus {
  color: #825a2c !important;
}
.bg-brown-active:active {
  background-color: #825a2c !important;
}
.bg-brown-hover:hover {
  background-color: #825a2c !important;
}
.bg-brown-focus:focus {
  background-color: #825a2c !important;
}
.bd-brown-active:active {
  border-color: #825a2c !important;
}
.bd-brown-hover:hover {
  border-color: #825a2c !important;
}
.bd-brown-focus:focus {
  border-color: #825a2c !important;
}
.ol-brown-active:active {
  outline-color: #825a2c !important;
}
.ol-brown-hover:hover {
  outline-color: #825a2c !important;
}
.ol-brown-focus:focus {
  outline-color: #825a2c !important;
}
.ribbed-brown {
  background: #825a2c linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent) !important;
  background-size: 20px 20px !important;
}
.before-bg-brown::before {
  background: #825a2c !important;
}
.before-fg-brown::before {
  color: #825a2c !important;
}
.after-bg-brown::after {
  background: #825a2c !important;
}
.after-fg-brown::after {
  color: #825a2c !important;
}
.op-brown {
  background-color: rgba(130, 90, 44, 0.7) !important;
}
.tg-brown::before {
  border-color: #825a2c;
}
.fg-olive {
  color: #6d8764 !important;
}
.bg-olive {
  background-color: #6d8764 !important;
}
.bd-olive {
  border-color: #6d8764 !important;
}
.ol-olive {
  outline-color: #6d8764 !important;
}
.fg-olive-active:active {
  color: #6d8764 !important;
}
.fg-olive-hover:hover {
  color: #6d8764 !important;
}
.fg-olive-focus:focus {
  color: #6d8764 !important;
}
.bg-olive-active:active {
  background-color: #6d8764 !important;
}
.bg-olive-hover:hover {
  background-color: #6d8764 !important;
}
.bg-olive-focus:focus {
  background-color: #6d8764 !important;
}
.bd-olive-active:active {
  border-color: #6d8764 !important;
}
.bd-olive-hover:hover {
  border-color: #6d8764 !important;
}
.bd-olive-focus:focus {
  border-color: #6d8764 !important;
}
.ol-olive-active:active {
  outline-color: #6d8764 !important;
}
.ol-olive-hover:hover {
  outline-color: #6d8764 !important;
}
.ol-olive-focus:focus {
  outline-color: #6d8764 !important;
}
.ribbed-olive {
  background: #6d8764 linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent) !important;
  background-size: 20px 20px !important;
}
.before-bg-olive::before {
  background: #6d8764 !important;
}
.before-fg-olive::before {
  color: #6d8764 !important;
}
.after-bg-olive::after {
  background: #6d8764 !important;
}
.after-fg-olive::after {
  color: #6d8764 !important;
}
.op-olive {
  background-color: rgba(109, 135, 100, 0.7) !important;
}
.tg-olive::before {
  border-color: #6d8764;
}
.fg-steel {
  color: #647687 !important;
}
.bg-steel {
  background-color: #647687 !important;
}
.bd-steel {
  border-color: #647687 !important;
}
.ol-steel {
  outline-color: #647687 !important;
}
.fg-steel-active:active {
  color: #647687 !important;
}
.fg-steel-hover:hover {
  color: #647687 !important;
}
.fg-steel-focus:focus {
  color: #647687 !important;
}
.bg-steel-active:active {
  background-color: #647687 !important;
}
.bg-steel-hover:hover {
  background-color: #647687 !important;
}
.bg-steel-focus:focus {
  background-color: #647687 !important;
}
.bd-steel-active:active {
  border-color: #647687 !important;
}
.bd-steel-hover:hover {
  border-color: #647687 !important;
}
.bd-steel-focus:focus {
  border-color: #647687 !important;
}
.ol-steel-active:active {
  outline-color: #647687 !important;
}
.ol-steel-hover:hover {
  outline-color: #647687 !important;
}
.ol-steel-focus:focus {
  outline-color: #647687 !important;
}
.ribbed-steel {
  background: #647687 linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent) !important;
  background-size: 20px 20px !important;
}
.before-bg-steel::before {
  background: #647687 !important;
}
.before-fg-steel::before {
  color: #647687 !important;
}
.after-bg-steel::after {
  background: #647687 !important;
}
.after-fg-steel::after {
  color: #647687 !important;
}
.op-steel {
  background-color: rgba(100, 118, 135, 0.7) !important;
}
.tg-steel::before {
  border-color: #647687;
}
.fg-mauve {
  color: #76608a !important;
}
.bg-mauve {
  background-color: #76608a !important;
}
.bd-mauve {
  border-color: #76608a !important;
}
.ol-mauve {
  outline-color: #76608a !important;
}
.fg-mauve-active:active {
  color: #76608a !important;
}
.fg-mauve-hover:hover {
  color: #76608a !important;
}
.fg-mauve-focus:focus {
  color: #76608a !important;
}
.bg-mauve-active:active {
  background-color: #76608a !important;
}
.bg-mauve-hover:hover {
  background-color: #76608a !important;
}
.bg-mauve-focus:focus {
  background-color: #76608a !important;
}
.bd-mauve-active:active {
  border-color: #76608a !important;
}
.bd-mauve-hover:hover {
  border-color: #76608a !important;
}
.bd-mauve-focus:focus {
  border-color: #76608a !important;
}
.ol-mauve-active:active {
  outline-color: #76608a !important;
}
.ol-mauve-hover:hover {
  outline-color: #76608a !important;
}
.ol-mauve-focus:focus {
  outline-color: #76608a !important;
}
.ribbed-mauve {
  background: #76608a linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent) !important;
  background-size: 20px 20px !important;
}
.before-bg-mauve::before {
  background: #76608a !important;
}
.before-fg-mauve::before {
  color: #76608a !important;
}
.after-bg-mauve::after {
  background: #76608a !important;
}
.after-fg-mauve::after {
  color: #76608a !important;
}
.op-mauve {
  background-color: rgba(118, 96, 138, 0.7) !important;
}
.tg-mauve::before {
  border-color: #76608a;
}
.fg-taupe {
  color: #87794e !important;
}
.bg-taupe {
  background-color: #87794e !important;
}
.bd-taupe {
  border-color: #87794e !important;
}
.ol-taupe {
  outline-color: #87794e !important;
}
.fg-taupe-active:active {
  color: #87794e !important;
}
.fg-taupe-hover:hover {
  color: #87794e !important;
}
.fg-taupe-focus:focus {
  color: #87794e !important;
}
.bg-taupe-active:active {
  background-color: #87794e !important;
}
.bg-taupe-hover:hover {
  background-color: #87794e !important;
}
.bg-taupe-focus:focus {
  background-color: #87794e !important;
}
.bd-taupe-active:active {
  border-color: #87794e !important;
}
.bd-taupe-hover:hover {
  border-color: #87794e !important;
}
.bd-taupe-focus:focus {
  border-color: #87794e !important;
}
.ol-taupe-active:active {
  outline-color: #87794e !important;
}
.ol-taupe-hover:hover {
  outline-color: #87794e !important;
}
.ol-taupe-focus:focus {
  outline-color: #87794e !important;
}
.ribbed-taupe {
  background: #87794e linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent) !important;
  background-size: 20px 20px !important;
}
.before-bg-taupe::before {
  background: #87794e !important;
}
.before-fg-taupe::before {
  color: #87794e !important;
}
.after-bg-taupe::after {
  background: #87794e !important;
}
.after-fg-taupe::after {
  color: #87794e !important;
}
.op-taupe {
  background-color: rgba(135, 121, 78, 0.7) !important;
}
.tg-taupe::before {
  border-color: #87794e;
}
.fg-gray {
  color: #bebebe !important;
}
.bg-gray {
  background-color: #bebebe !important;
}
.bd-gray {
  border-color: #bebebe !important;
}
.ol-gray {
  outline-color: #bebebe !important;
}
.fg-gray-active:active {
  color: #bebebe !important;
}
.fg-gray-hover:hover {
  color: #bebebe !important;
}
.fg-gray-focus:focus {
  color: #bebebe !important;
}
.bg-gray-active:active {
  background-color: #bebebe !important;
}
.bg-gray-hover:hover {
  background-color: #bebebe !important;
}
.bg-gray-focus:focus {
  background-color: #bebebe !important;
}
.bd-gray-active:active {
  border-color: #bebebe !important;
}
.bd-gray-hover:hover {
  border-color: #bebebe !important;
}
.bd-gray-focus:focus {
  border-color: #bebebe !important;
}
.ol-gray-active:active {
  outline-color: #bebebe !important;
}
.ol-gray-hover:hover {
  outline-color: #bebebe !important;
}
.ol-gray-focus:focus {
  outline-color: #bebebe !important;
}
.ribbed-gray {
  background: #bebebe linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 25