/*
 * Metro 4 Components Library v4.2.26 build 704 (https://metroui.org.ua)
 * Copyright 2018 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: #60b5f0;
}
.bg-twitter {
  background-color: #4464a2;
}
.bg-github {
  background-color: #7B7E8C;
}
.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, 255, 0.15) 75%, transparent 75%, transparent) !important;
  background-size: 20px 20px !important;
}
.before-bg-gray::before {
  background: #bebebe !important;
}
.before-fg-gray::before {
  color: #bebebe !important;
}
.after-bg-gray::after {
  background: #bebebe !important;
}
.after-fg-gray::after {
  color: #bebebe !important;
}
.op-gray {
  background-color: rgba(190, 190, 190, 0.7) !important;
}
.tg-gray::before {
  border-color: #bebebe;
}
.fg-lightLime {
  color: #d8ff12 !important;
}
.bg-lightLime {
  background-color: #d8ff12 !important;
}
.bd-lightLime {
  border-color: #d8ff12 !important;
}
.ol-lightLime {
  outline-color: #d8ff12 !important;
}
.fg-lightLime-active:active {
  color: #d8ff12 !important;
}
.fg-lightLime-hover:hover {
  color: #d8ff12 !important;
}
.fg-lightLime-focus:focus {
  color: #d8ff12 !important;
}
.bg-lightLime-active:active {
  background-color: #d8ff12 !important;
}
.bg-lightLime-hover:hover {
  background-color: #d8ff12 !important;
}
.bg-lightLime-focus:focus {
  background-color: #d8ff12 !important;
}
.bd-lightLime-active:active {
  border-color: #d8ff12 !important;
}
.bd-lightLime-hover:hover {
  border-color: #d8ff12 !important;
}
.bd-lightLime-focus:focus {
  border-color: #d8ff12 !important;
}
.ol-lightLime-active:active {
  outline-color: #d8ff12 !important;
}
.ol-lightLime-hover:hover {
  outline-color: #d8ff12 !important;
}
.ol-lightLime-focus:focus {
  outline-color: #d8ff12 !important;
}
.ribbed-lightLime {
  background: #d8ff12 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-lightLime::before {
  background: #d8ff12 !important;
}
.before-fg-lightLime::before {
  color: #d8ff12 !important;
}
.after-bg-lightLime::after {
  background: #d8ff12 !important;
}
.after-fg-lightLime::after {
  color: #d8ff12 !important;
}
.op-lightLime {
  background-color: rgba(216, 255, 18, 0.7) !important;
}
.tg-lightLime::before {
  border-color: #d8ff12;
}
.fg-lightGreen {
  color: #86e22a !important;
}
.bg-lightGreen {
  background-color: #86e22a !important;
}
.bd-lightGreen {
  border-color: #86e22a !important;
}
.ol-lightGreen {
  outline-color: #86e22a !important;
}
.fg-lightGreen-active:active {
  color: #86e22a !important;
}
.fg-lightGreen-hover:hover {
  color: #86e22a !important;
}
.fg-lightGreen-focus:focus {
  color: #86e22a !important;
}
.bg-lightGreen-active:active {
  background-color: #86e22a !important;
}
.bg-lightGreen-hover:hover {
  background-color: #86e22a !important;
}
.bg-lightGreen-focus:focus {
  background-color: #86e22a !important;
}
.bd-lightGreen-active:active {
  border-color: #86e22a !important;
}
.bd-lightGreen-hover:hover {
  border-color: #86e22a !important;
}
.bd-lightGreen-focus:focus {
  border-color: #86e22a !important;
}
.ol-lightGreen-active:active {
  outline-color: #86e22a !important;
}
.ol-lightGreen-hover:hover {
  outline-color: #86e22a !important;
}
.ol-lightGreen-focus:focus {
  outline-color: #86e22a !important;
}
.ribbed-lightGreen {
  background: #86e22a 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-lightGreen::before {
  background: #86e22a !important;
}
.before-fg-lightGreen::before {
  color: #86e22a !important;
}
.after-bg-lightGreen::after {
  background: #86e22a !important;
}
.after-fg-lightGreen::after {
  color: #86e22a !important;
}
.op-lightGreen {
  background-color: rgba(134, 226, 42, 0.7) !important;
}
.tg-lightGreen::before {
  border-color: #86e22a;
}
.fg-lightEmerald {
  color: #00d600 !important;
}
.bg-lightEmerald {
  background-color: #00d600 !important;
}
.bd-lightEmerald {
  border-color: #00d600 !important;
}
.ol-lightEmerald {
  outline-color: #00d600 !important;
}
.fg-lightEmerald-active:active {
  color: #00d600 !important;
}
.fg-lightEmerald-hover:hover {
  color: #00d600 !important;
}
.fg-lightEmerald-focus:focus {
  color: #00d600 !important;
}
.bg-lightEmerald-active:active {
  background-color: #00d600 !important;
}
.bg-lightEmerald-hover:hover {
  background-color: #00d600 !important;
}
.bg-lightEmerald-focus:focus {
  background-color: #00d600 !important;
}
.bd-lightEmerald-active:active {
  border-color: #00d600 !important;
}
.bd-lightEmerald-hover:hover {
  border-color: #00d600 !important;
}
.bd-lightEmerald-focus:focus {
  border-color: #00d600 !important;
}
.ol-lightEmerald-active:active {
  outline-color: #00d600 !important;
}
.ol-lightEmerald-hover:hover {
  outline-color: #00d600 !important;
}
.ol-lightEmerald-focus:focus {
  outline-color: #00d600 !important;
}
.ribbed-lightEmerald {
  background: #00d600 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-lightEmerald::before {
  background: #00d600 !important;
}
.before-fg-lightEmerald::before {
  color: #00d600 !important;
}
.after-bg-lightEmerald::after {
  background: #00d600 !important;
}
.after-fg-lightEmerald::after {
  color: #00d600 !important;
}
.op-lightEmerald {
  background-color: rgba(0, 214, 0, 0.7) !important;
}
.tg-lightEmerald::before {
  border-color: #00d600;
}
.fg-lightBlue {
  color: #3ecbff !important;
}
.bg-lightBlue {
  background-color: #3ecbff !important;
}
.bd-lightBlue {
  border-color: #3ecbff !important;
}
.ol-lightBlue {
  outline-color: #3ecbff !important;
}
.fg-lightBlue-active:active {
  color: #3ecbff !important;
}
.fg-lightBlue-hover:hover {
  color: #3ecbff !important;
}
.fg-lightBlue-focus:focus {
  color: #3ecbff !important;
}
.bg-lightBlue-active:active {
  background-color: #3ecbff !important;
}
.bg-lightBlue-hover:hover {
  background-color: #3ecbff !important;
}
.bg-lightBlue-focus:focus {
  background-color: #3ecbff !important;
}
.bd-lightBlue-active:active {
  border-color: #3ecbff !important;
}
.bd-lightBlue-hover:hover {
  border-color: #3ecbff !important;
}
.bd-lightBlue-focus:focus {
  border-color: #3ecbff !important;
}
.ol-lightBlue-active:active {
  outline-color: #3ecbff !important;
}
.ol-lightBlue-hover:hover {
  outline-color: #3ecbff !important;
}
.ol-lightBlue-focus:focus {
  outline-color: #3ecbff !important;
}
.ribbed-lightBlue {
  background: #3ecbff 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-lightBlue::before {
  background: #3ecbff !important;
}
.before-fg-lightBlue::before {
  color: #3ecbff !important;
}
.after-bg-lightBlue::after {
  background: #3ecbff !important;
}
.after-fg-lightBlue::after {
  color: #3ecbff !important;
}
.op-lightBlue {
  background-color: rgba(62, 203, 255, 0.7) !important;
}
.tg-lightBlue::before {
  border-color: #3ecbff;
}
.fg-lightTeal {
  color: #00f7f5 !important;
}
.bg-lightTeal {
  background-color: #00f7f5 !important;
}
.bd-lightTeal {
  border-color: #00f7f5 !important;
}
.ol-lightTeal {
  outline-color: #00f7f5 !important;
}
.fg-lightTeal-active:active {
  color: #00f7f5 !important;
}
.fg-lightTeal-hover:hover {
  color: #00f7f5 !important;
}
.fg-lightTeal-focus:focus {
  color: #00f7f5 !important;
}
.bg-lightTeal-active:active {
  background-color: #00f7f5 !important;
}
.bg-lightTeal-hover:hover {
  background-color: #00f7f5 !important;
}
.bg-lightTeal-focus:focus {
  background-color: #00f7f5 !important;
}
.bd-lightTeal-active:active {
  border-color: #00f7f5 !important;
}
.bd-lightTeal-hover:hover {
  border-color: #00f7f5 !important;
}
.bd-lightTeal-focus:focus {
  border-color: #00f7f5 !important;
}
.ol-lightTeal-active:active {
  outline-color: #00f7f5 !important;
}
.ol-lightTeal-hover:hover {
  outline-color: #00f7f5 !important;
}
.ol-lightTeal-focus:focus {
  outline-color: #00f7f5 !important;
}
.ribbed-lightTeal {
  background: #00f7f5 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-lightTeal::before {
  background: #00f7f5 !important;
}
.before-fg-lightTeal::before {
  color: #00f7f5 !important;
}
.after-bg-lightTeal::after {
  background: #00f7f5 !important;
}
.after-fg-lightTeal::after {
  color: #00f7f5 !important;
}
.op-lightTeal {
  background-color: rgba(0, 247, 245, 0.7) !important;
}
.tg-lightTeal::before {
  border-color: #00f7f5;
}
.fg-lightCyan {
  color: #5ebdec !important;
}
.bg-lightCyan {
  background-color: #5ebdec !important;
}
.bd-lightCyan {
  border-color: #5ebdec !important;
}
.ol-lightCyan {
  outline-color: #5ebdec !important;
}
.fg-lightCyan-active:active {
  color: #5ebdec !important;
}
.fg-lightCyan-hover:hover {
  color: #5ebdec !important;
}
.fg-lightCyan-focus:focus {
  color: #5ebdec !important;
}
.bg-lightCyan-active:active {
  background-color: #5ebdec !important;
}
.bg-lightCyan-hover:hover {
  background-color: #5ebdec !important;
}
.bg-lightCyan-focus:focus {
  background-color: #5ebdec !important;
}
.bd-lightCyan-active:active {
  border-color: #5ebdec !important;
}
.bd-lightCyan-hover:hover {
  border-color: #5ebdec !important;
}
.bd-lightCyan-focus:focus {
  border-color: #5ebdec !important;
}
.ol-lightCyan-active:active {
  outline-color: #5ebdec !important;
}
.ol-lightCyan-hover:hover {
  outline-color: #5ebdec !important;
}
.ol-lightCyan-focus:focus {
  outline-color: #5ebdec !important;
}
.ribbed-lightCyan {
  background: #5ebdec 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-lightCyan::before {
  background: #5ebdec !important;
}
.before-fg-lightCyan::before {
  color: #5ebdec !important;
}
.after-bg-lightCyan::after {
  background: #5ebdec !important;
}
.after-fg-lightCyan::after {
  color: #5ebdec !important;
}
.op-lightCyan {
  background-color: rgba(94, 189, 236, 0.7) !important;
}
.tg-lightCyan::before {
  border-color: #5ebdec;
}
.fg-lightCobalt {
  color: #3d7eff !important;
}
.bg-lightCobalt {
  background-color: #3d7eff !important;
}
.bd-lightCobalt {
  border-color: #3d7eff !important;
}
.ol-lightCobalt {
  outline-color: #3d7eff !important;
}
.fg-lightCobalt-active:active {
  color: #3d7eff !important;
}
.fg-lightCobalt-hover:hover {
  color: #3d7eff !important;
}
.fg-lightCobalt-focus:focus {
  color: #3d7eff !important;
}
.bg-lightCobalt-active:active {
  background-color: #3d7eff !important;
}
.bg-lightCobalt-hover:hover {
  background-color: #3d7eff !important;
}
.bg-lightCobalt-focus:focus {
  background-color: #3d7eff !important;
}
.bd-lightCobalt-active:active {
  border-color: #3d7eff !important;
}
.bd-lightCobalt-hover:hover {
  border-color: #3d7eff !important;
}
.bd-lightCobalt-focus:focus {
  border-color: #3d7eff !important;
}
.ol-lightCobalt-active:active {
  outline-color: #3d7eff !important;
}
.ol-lightCobalt-hover:hover {
  outline-color: #3d7eff !important;
}
.ol-lightCobalt-focus:focus {
  outline-color: #3d7eff !important;
}
.ribbed-lightCobalt {
  background: #3d7eff 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-lightCobalt::before {
  background: #3d7eff !important;
}
.before-fg-lightCobalt::before {
  color: #3d7eff !important;
}
.after-bg-lightCobalt::after {
  background: #3d7eff !important;
}
.after-fg-lightCobalt::after {
  color: #3d7eff !important;
}
.op-lightCobalt {
  background-color: rgba(61, 126, 255, 0.7) !important;
}
.tg-lightCobalt::before {
  border-color: #3d7eff;
}
.fg-lightIndigo {
  color: #974dff !important;
}
.bg-lightIndigo {
  background-color: #974dff !important;
}
.bd-lightIndigo {
  border-color: #974dff !important;
}
.ol-lightIndigo {
  outline-color: #974dff !important;
}
.fg-lightIndigo-active:active {
  color: #974dff !important;
}
.fg-lightIndigo-hover:hover {
  color: #974dff !important;
}
.fg-lightIndigo-focus:focus {
  color: #974dff !important;
}
.bg-lightIndigo-active:active {
  background-color: #974dff !important;
}
.bg-lightIndigo-hover:hover {
  background-color: #974dff !important;
}
.bg-lightIndigo-focus:focus {
  background-color: #974dff !important;
}
.bd-lightIndigo-active:active {
  border-color: #974dff !important;
}
.bd-lightIndigo-hover:hover {
  border-color: #974dff !important;
}
.bd-lightIndigo-focus:focus {
  border-color: #974dff !important;
}
.ol-lightIndigo-active:active {
  outline-color: #974dff !important;
}
.ol-lightIndigo-hover:hover {
  outline-color: #974dff !important;
}
.ol-lightIndigo-focus:focus {
  outline-color: #974dff !important;
}
.ribbed-lightIndigo {
  background: #974dff 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-lightIndigo::before {
  background: #974dff !important;
}
.before-fg-lightIndigo::before {
  color: #974dff !important;
}
.after-bg-lightIndigo::after {
  background: #974dff !important;
}
.after-fg-lightIndigo::after {
  color: #974dff !important;
}
.op-lightIndigo {
  background-color: rgba(151, 77, 255, 0.7) !important;
}
.tg-lightIndigo::before {
  border-color: #974dff;
}
.fg-lightViolet {
  color: #c44dff !important;
}
.bg-lightViolet {
  background-color: #c44dff !important;
}
.bd-lightViolet {
  border-color: #c44dff !important;
}
.ol-lightViolet {
  outline-color: #c44dff !important;
}
.fg-lightViolet-active:active {
  color: #c44dff !important;
}
.fg-lightViolet-hover:hover {
  color: #c44dff !important;
}
.fg-lightViolet-focus:focus {
  color: #c44dff !important;
}
.bg-lightViolet-active:active {
  background-color: #c44dff !important;
}
.bg-lightViolet-hover:hover {
  background-color: #c44dff !important;
}
.bg-lightViolet-focus:focus {
  background-color: #c44dff !important;
}
.bd-lightViolet-active:active {
  border-color: #c44dff !important;
}
.bd-lightViolet-hover:hover {
  border-color: #c44dff !important;
}
.bd-lightViolet-focus:focus {
  border-color: #c44dff !important;
}
.ol-lightViolet-active:active {
  outline-color: #c44dff !important;
}
.ol-lightViolet-hover:hover {
  outline-color: #c44dff !important;
}
.ol-lightViolet-focus:focus {
  outline-color: #c44dff !important;
}
.ribbed-lightViolet {
  background: #c44dff 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-lightViolet::before {
  background: #c44dff !important;
}
.before-fg-lightViolet::before {
  color: #c44dff !important;
}
.after-bg-lightViolet::after {
  background: #c44dff !important;
}
.after-fg-lightViolet::after {
  color: #c44dff !important;
}
.op-lightViolet {
  background-color: rgba(196, 77, 255, 0.7) !important;
}
.tg-lightViolet::before {
  border-color: #c44dff;
}
.fg-lightPink {
  color: #e98fcb !important;
}
.bg-lightPink {
  background-color: #e98fcb !important;
}
.bd-lightPink {
  border-color: #e98fcb !important;
}
.ol-lightPink {
  outline-color: #e98fcb !important;
}
.fg-lightPink-active:active {
  color: #e98fcb !important;
}
.fg-lightPink-hover:hover {
  color: #e98fcb !important;
}
.fg-lightPink-focus:focus {
  color: #e98fcb !important;
}
.bg-lightPink-active:active {
  background-color: #e98fcb !important;
}
.bg-lightPink-hover:hover {
  background-color: #e98fcb !important;
}
.bg-lightPink-focus:focus {
  background-color: #e98fcb !important;
}
.bd-lightPink-active:active {
  border-color: #e98fcb !important;
}
.bd-lightPink-hover:hover {
  border-color: #e98fcb !important;
}
.bd-lightPink-focus:focus {
  border-color: #e98fcb !important;
}
.ol-lightPink-active:active {
  outline-color: #e98fcb !important;
}
.ol-lightPink-hover:hover {
  outline-color: #e98fcb !important;
}
.ol-lightPink-focus:focus {
  outline-color: #e98fcb !important;
}
.ribbed-lightPink {
  background: #e98fcb 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-lightPink::before {
  background: #e98fcb !important;
}
.before-fg-lightPink::before {
  color: #e98fcb !important;
}
.after-bg-lightPink::after {
  background: #e98fcb !important;
}
.after-fg-lightPink::after {
  color: #e98fcb !important;
}
.op-lightPink {
  background-color: rgba(233, 143, 203, 0.7) !important;
}
.tg-lightPink::before {
  border-color: #e98fcb;
}
.fg-lightMagenta {
  color: #ff2599 !important;
}
.bg-lightMagenta {
  background-color: #ff2599 !important;
}
.bd-lightMagenta {
  border-color: #ff2599 !important;
}
.ol-lightMagenta {
  outline-color: #ff2599 !important;
}
.fg-lightMagenta-active:active {
  color: #ff2599 !important;
}
.fg-lightMagenta-hover:hover {
  color: #ff2599 !important;
}
.fg-lightMagenta-focus:focus {
  color: #ff2599 !important;
}
.bg-lightMagenta-active:active {
  background-color: #ff2599 !important;
}
.bg-lightMagenta-hover:hover {
  background-color: #ff2599 !important;
}
.bg-lightMagenta-focus:focus {
  background-color: #ff2599 !important;
}
.bd-lightMagenta-active:active {
  border-color: #ff2599 !important;
}
.bd-lightMagenta-hover:hover {
  border-color: #ff2599 !important;
}
.bd-lightMagenta-focus:focus {
  border-color: #ff2599 !important;
}
.ol-lightMagenta-active:active {
  outline-color: #ff2599 !important;
}
.ol-lightMagenta-hover:hover {
  outline-color: #ff2599 !important;
}
.ol-lightMagenta-focus:focus {
  outline-color: #ff2599 !important;
}
.ribbed-lightMagenta {
  background: #ff2599 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-lightMagenta::before {
  background: #ff2599 !important;
}
.before-fg-lightMagenta::before {
  color: #ff2599 !important;
}
.after-bg-lightMagenta::after {
  background: #ff2599 !important;
}
.after-fg-lightMagenta::after {
  color: #ff2599 !important;
}
.op-lightMagenta {
  background-color: rgba(255, 37, 153, 0.7) !important;
}
.tg-lightMagenta::before {
  border-color: #ff2599;
}
.fg-lightCrimson {
  color: #ef0036 !important;
}
.bg-lightCrimson {
  background-color: #ef0036 !important;
}
.bd-lightCrimson {
  border-color: #ef0036 !important;
}
.ol-lightCrimson {
  outline-color: #ef0036 !important;
}
.fg-lightCrimson-active:active {
  color: #ef0036 !important;
}
.fg-lightCrimson-hover:hover {
  color: #ef0036 !important;
}
.fg-lightCrimson-focus:focus {
  color: #ef0036 !important;
}
.bg-lightCrimson-active:active {
  background-color: #ef0036 !important;
}
.bg-lightCrimson-hover:hover {
  background-color: #ef0036 !important;
}
.bg-lightCrimson-focus:focus {
  background-color: #ef0036 !important;
}
.bd-lightCrimson-active:active {
  border-color: #ef0036 !important;
}
.bd-lightCrimson-hover:hover {
  border-color: #ef0036 !important;
}
.bd-lightCrimson-focus:focus {
  border-color: #ef0036 !important;
}
.ol-lightCrimson-active:active {
  outline-color: #ef0036 !important;
}
.ol-lightCrimson-hover:hover {
  outline-color: #ef0036 !important;
}
.ol-lightCrimson-focus:focus {
  outline-color: #ef0036 !important;
}
.ribbed-lightCrimson {
  background: #ef0036 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-lightCrimson::before {
  background: #ef0036 !important;
}
.before-fg-lightCrimson::before {
  color: #ef0036 !important;
}
.after-bg-lightCrimson::after {
  background: #ef0036 !important;
}
.after-fg-lightCrimson::after {
  color: #ef0036 !important;
}
.op-lightCrimson {
  background-color: rgba(239, 0, 54, 0.7) !important;
}
.tg-lightCrimson::before {
  border-color: #ef0036;
}
.fg-lightRed {
  color: #df6e68 !important;
}
.bg-lightRed {
  background-color: #df6e68 !important;
}
.bd-lightRed {
  border-color: #df6e68 !important;
}
.ol-lightRed {
  outline-color: #df6e68 !important;
}
.fg-lightRed-active:active {
  color: #df6e68 !important;
}
.fg-lightRed-hover:hover {
  color: #df6e68 !important;
}
.fg-lightRed-focus:focus {
  color: #df6e68 !important;
}
.bg-lightRed-active:active {
  background-color: #df6e68 !important;
}
.bg-lightRed-hover:hover {
  background-color: #df6e68 !important;
}
.bg-lightRed-focus:focus {
  background-color: #df6e68 !important;
}
.bd-lightRed-active:active {
  border-color: #df6e68 !important;
}
.bd-lightRed-hover:hover {
  border-color: #df6e68 !important;
}
.bd-lightRed-focus:focus {
  border-color: #df6e68 !important;
}
.ol-lightRed-active:active {
  outline-color: #df6e68 !important;
}
.ol-lightRed-hover:hover {
  outline-color: #df6e68 !important;
}
.ol-lightRed-focus:focus {
  outline-color: #df6e68 !important;
}
.ribbed-lightRed {
  background: #df6e68 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-lightRed::before {
  background: #df6e68 !important;
}
.before-fg-lightRed::before {
  color: #df6e68 !important;
}
.after-bg-lightRed::after {
  background: #df6e68 !important;
}
.after-fg-lightRed::after {
  color: #df6e68 !important;
}
.op-lightRed {
  background-color: rgba(223, 110, 104, 0.7) !important;
}
.tg-lightRed::before {
  border-color: #df6e68;
}
.fg-lightOrange {
  color: #ff9447 !important;
}
.bg-lightOrange {
  background-color: #ff9447 !important;
}
.bd-lightOrange {
  border-color: #ff9447 !important;
}
.ol-lightOrange {
  outline-color: #ff9447 !important;
}
.fg-lightOrange-active:active {
  color: #ff9447 !important;
}
.fg-lightOrange-hover:hover {
  color: #ff9447 !important;
}
.fg-lightOrange-focus:focus {
  color: #ff9447 !important;
}
.bg-lightOrange-active:active {
  background-color: #ff9447 !important;
}
.bg-lightOrange-hover:hover {
  background-color: #ff9447 !important;
}
.bg-lightOrange-focus:focus {
  background-color: #ff9447 !important;
}
.bd-lightOrange-active:active {
  border-color: #ff9447 !important;
}
.bd-lightOrange-hover:hover {
  border-color: #ff9447 !important;
}
.bd-lightOrange-focus:focus {
  border-color: #ff9447 !important;
}
.ol-lightOrange-active:active {
  outline-color: #ff9447 !important;
}
.ol-lightOrange-hover:hover {
  outline-color: #ff9447 !important;
}
.ol-lightOrange-focus:focus {
  outline-color: #ff9447 !important;
}
.ribbed-lightOrange {
  background: #ff9447 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-lightOrange::before {
  background: #ff9447 !important;
}
.before-fg-lightOrange::before {
  color: #ff9447 !important;
}
.after-bg-lightOrange::after {
  background: #ff9447 !important;
}
.after-fg-lightOrange::after {
  color: #ff9447 !important;
}
.op-lightOrange {
  background-color: rgba(255, 148, 71, 0.7) !important;
}
.tg-lightOrange::before {
  border-color: #ff9447;
}
.fg-lightAmber {
  color: #f8bf4f !important;
}
.bg-lightAmber {
  background-color: #f8bf4f !important;
}
.bd-lightAmber {
  border-color: #f8bf4f !important;
}
.ol-lightAmber {
  outline-color: #f8bf4f !important;
}
.fg-lightAmber-active:active {
  color: #f8bf4f !important;
}
.fg-lightAmber-hover:hover {
  color: #f8bf4f !important;
}
.fg-lightAmber-focus:focus {
  color: #f8bf4f !important;
}
.bg-lightAmber-active:active {
  background-color: #f8bf4f !important;
}
.bg-lightAmber-hover:hover {
  background-color: #f8bf4f !important;
}
.bg-lightAmber-focus:focus {
  background-color: #f8bf4f !important;
}
.bd-lightAmber-active:active {
  border-color: #f8bf4f !important;
}
.bd-lightAmber-hover:hover {
  border-color: #f8bf4f !important;
}
.bd-lightAmber-focus:focus {
  border-color: #f8bf4f !important;
}
.ol-lightAmber-active:active {
  outline-color: #f8bf4f !important;
}
.ol-lightAmber-hover:hover {
  outline-color: #f8bf4f !important;
}
.ol-lightAmber-focus:focus {
  outline-color: #f8bf4f !important;
}
.ribbed-lightAmber {
  background: #f8bf4f 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-lightAmber::before {
  background: #f8bf4f !important;
}
.before-fg-lightAmber::before {
  color: #f8bf4f !important;
}
.after-bg-lightAmber::after {
  background: #f8bf4f !important;
}
.after-fg-lightAmber::after {
  color: #f8bf4f !important;
}
.op-lightAmber {
  background-color: rgba(248, 191, 79, 0.7) !important;
}
.tg-lightAmber::before {
  border-color: #f8bf4f;
}
.fg-lightYellow {
  color: #fff44d !important;
}
.bg-lightYellow {
  background-color: #fff44d !important;
}
.bd-lightYellow {
  border-color: #fff44d !important;
}
.ol-lightYellow {
  outline-color: #fff44d !important;
}
.fg-lightYellow-active:active {
  color: #fff44d !important;
}
.fg-lightYellow-hover:hover {
  color: #fff44d !important;
}
.fg-lightYellow-focus:focus {
  color: #fff44d !important;
}
.bg-lightYellow-active:active {
  background-color: #fff44d !important;
}
.bg-lightYellow-hover:hover {
  background-color: #fff44d !important;
}
.bg-lightYellow-focus:focus {
  background-color: #fff44d !important;
}
.bd-lightYellow-active:active {
  border-color: #fff44d !important;
}
.bd-lightYellow-hover:hover {
  border-color: #fff44d !important;
}
.bd-lightYellow-focus:focus {
  border-color: #fff44d !important;
}
.ol-lightYellow-active:active {
  outline-color: #fff44d !important;
}
.ol-lightYellow-hover:hover {
  outline-color: #fff44d !important;
}
.ol-lightYellow-focus:focus {
  outline-color: #fff44d !important;
}
.ribbed-lightYellow {
  background: #fff44d 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-lightYellow::before {
  background: #fff44d !important;
}
.before-fg-lightYellow::before {
  color: #fff44d !important;
}
.after-bg-lightYellow::after {
  background: #fff44d !important;
}
.after-fg-lightYellow::after {
  color: #fff44d !important;
}
.op-lightYellow {
  background-color: rgba(255, 244, 77, 0.7) !important;
}
.tg-lightYellow::before {
  border-color: #fff44d;
}
.fg-lightBrown {
  color: #bb823f !important;
}
.bg-lightBrown {
  background-color: #bb823f !important;
}
.bd-lightBrown {
  border-color: #bb823f !important;
}
.ol-lightBrown {
  outline-color: #bb823f !important;
}
.fg-lightBrown-active:active {
  color: #bb823f !important;
}
.fg-lightBrown-hover:hover {
  color: #bb823f !important;
}
.fg-lightBrown-focus:focus {
  color: #bb823f !important;
}
.bg-lightBrown-active:active {
  background-color: #bb823f !important;
}
.bg-lightBrown-hover:hover {
  background-color: #bb823f !important;
}
.bg-lightBrown-focus:focus {
  background-color: #bb823f !important;
}
.bd-lightBrown-active:active {
  border-color: #bb823f !important;
}
.bd-lightBrown-hover:hover {
  border-color: #bb823f !important;
}
.bd-lightBrown-focus:focus {
  border-color: #bb823f !important;
}
.ol-lightBrown-active:active {
  outline-color: #bb823f !important;
}
.ol-lightBrown-hover:hover {
  outline-color: #bb823f !important;
}
.ol-lightBrown-focus:focus {
  outline-color: #bb823f !important;
}
.ribbed-lightBrown {
  background: #bb823f 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-lightBrown::before {
  background: #bb823f !important;
}
.before-fg-lightBrown::before {
  color: #bb823f !important;
}
.after-bg-lightBrown::after {
  background: #bb823f !important;
}
.after-fg-lightBrown::after {
  color: #bb823f !important;
}
.op-lightBrown {
  background-color: rgba(187, 130, 63, 0.7) !important;
}
.tg-lightBrown::before {
  border-color: #bb823f;
}
.fg-lightOlive {
  color: #95ab8d !important;
}
.bg-lightOlive {
  background-color: #95ab8d !important;
}
.bd-lightOlive {
  border-color: #95ab8d !important;
}
.ol-lightOlive {
  outline-color: #95ab8d !important;
}
.fg-lightOlive-active:active {
  color: #95ab8d !important;
}
.fg-lightOlive-hover:hover {
  color: #95ab8d !important;
}
.fg-lightOlive-focus:focus {
  color: #95ab8d !important;
}
.bg-lightOlive-active:active {
  background-color: #95ab8d !important;
}
.bg-lightOlive-hover:hover {
  background-color: #95ab8d !important;
}
.bg-lightOlive-focus:focus {
  background-color: #95ab8d !important;
}
.bd-lightOlive-active:active {
  border-color: #95ab8d !important;
}
.bd-lightOlive-hover:hover {
  border-color: #95ab8d !important;
}
.bd-lightOlive-focus:focus {
  border-color: #95ab8d !important;
}
.ol-lightOlive-active:active {
  outline-color: #95ab8d !important;
}
.ol-lightOlive-hover:hover {
  outline-color: #95ab8d !important;
}
.ol-lightOlive-focus:focus {
  outline-color: #95ab8d !important;
}
.ribbed-lightOlive {
  background: #95ab8d 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-lightOlive::before {
  background: #95ab8d !important;
}
.before-fg-lightOlive::before {
  color: #95ab8d !important;
}
.after-bg-lightOlive::after {
  background: #95ab8d !important;
}
.after-fg-lightOlive::after {
  color: #95ab8d !important;
}
.op-lightOlive {
  background-color: rgba(149, 171, 141, 0.7) !important;
}
.tg-lightOlive::before {
  border-color: #95ab8d;
}
.fg-lightSteel {
  color: #8d9cab !important;
}
.bg-lightSteel {
  background-color: #8d9cab !important;
}
.bd-lightSteel {
  border-color: #8d9cab !important;
}
.ol-lightSteel {
  outline-color: #8d9cab !important;
}
.fg-lightSteel-active:active {
  color: #8d9cab !important;
}
.fg-lightSteel-hover:hover {
  color: #8d9cab !important;
}
.fg-lightSteel-focus:focus {
  color: #8d9cab !important;
}
.bg-lightSteel-active:active {
  background-color: #8d9cab !important;
}
.bg-lightSteel-hover:hover {
  background-color: #8d9cab !important;
}
.bg-lightSteel-focus:focus {
  background-color: #8d9cab !important;
}
.bd-lightSteel-active:active {
  border-color: #8d9cab !important;
}
.bd-lightSteel-hover:hover {
  border-color: #8d9cab !important;
}
.bd-lightSteel-focus:focus {
  border-color: #8d9cab !important;
}
.ol-lightSteel-active:active {
  outline-color: #8d9cab !important;
}
.ol-lightSteel-hover:hover {
  outline-color: #8d9cab !important;
}
.ol-lightSteel-focus:focus {
  outline-color: #8d9cab !important;
}
.ribbed-lightSteel {
  background: #8d9cab 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-lightSteel::before {
  background: #8d9cab !important;
}
.before-fg-lightSteel::before {
  color: #8d9cab !important;
}
.after-bg-lightSteel::after {
  background: #8d9cab !important;
}
.after-fg-lightSteel::after {
  color: #8d9cab !important;
}
.op-lightSteel {
  background-color: rgba(141, 156, 171, 0.7) !important;
}
.tg-lightSteel::before {
  border-color: #8d9cab;
}
.fg-lightMauve {
  color: #9c89ad !important;
}
.bg-lightMauve {
  background-color: #9c89ad !important;
}
.bd-lightMauve {
  border-color: #9c89ad !important;
}
.ol-lightMauve {
  outline-color: #9c89ad !important;
}
.fg-lightMauve-active:active {
  color: #9c89ad !important;
}
.fg-lightMauve-hover:hover {
  color: #9c89ad !important;
}
.fg-lightMauve-focus:focus {
  color: #9c89ad !important;
}
.bg-lightMauve-active:active {
  background-color: #9c89ad !important;
}
.bg-lightMauve-hover:hover {
  background-color: #9c89ad !important;
}
.bg-lightMauve-focus:focus {
  background-color: #9c89ad !important;
}
.bd-lightMauve-active:active {
  border-color: #9c89ad !important;
}
.bd-lightMauve-hover:hover {
  border-color: #9c89ad !important;
}
.bd-lightMauve-focus:focus {
  border-color: #9c89ad !important;
}
.ol-lightMauve-active:active {
  outline-color: #9c89ad !important;
}
.ol-lightMauve-hover:hover {
  outline-color: #9c89ad !important;
}
.ol-lightMauve-focus:focus {
  outline-color: #9c89ad !important;
}
.ribbed-lightMauve {
  background: #9c89ad 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-lightMauve::before {
  background: #9c89ad !important;
}
.before-fg-lightMauve::before {
  color: #9c89ad !important;
}
.after-bg-lightMauve::after {
  background: #9c89ad !important;
}
.after-fg-lightMauve::after {
  color: #9c89ad !important;
}
.op-lightMauve {
  background-color: rgba(156, 137, 173, 0.7) !important;
}
.tg-lightMauve::before {
  border-color: #9c89ad;
}
.fg-lightTaupe {
  color: #aea073 !important;
}
.bg-lightTaupe {
  background-color: #aea073 !important;
}
.bd-lightTaupe {
  border-color: #aea073 !important;
}
.ol-lightTaupe {
  outline-color: #aea073 !important;
}
.fg-lightTaupe-active:active {
  color: #aea073 !important;
}
.fg-lightTaupe-hover:hover {
  color: #aea073 !important;
}
.fg-lightTaupe-focus:focus {
  color: #aea073 !important;
}
.bg-lightTaupe-active:active {
  background-color: #aea073 !important;
}
.bg-lightTaupe-hover:hover {
  background-color: #aea073 !important;
}
.bg-lightTaupe-focus:focus {
  background-color: #aea073 !important;
}
.bd-lightTaupe-active:active {
  border-color: #aea073 !important;
}
.bd-lightTaupe-hover:hover {
  border-color: #aea073 !important;
}
.bd-lightTaupe-focus:focus {
  border-color: #aea073 !important;
}
.ol-lightTaupe-active:active {
  outline-color: #aea073 !important;
}
.ol-lightTaupe-hover:hover {
  outline-color: #aea073 !important;
}
.ol-lightTaupe-focus:focus {
  outline-color: #aea073 !important;
}
.ribbed-lightTaupe {
  background: #aea073 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-lightTaupe::before {
  background: #aea073 !important;
}
.before-fg-lightTaupe::before {
  color: #aea073 !important;
}
.after-bg-lightTaupe::after {
  background: #aea073 !important;
}
.after-fg-lightTaupe::after {
  color: #aea073 !important;
}
.op-lightTaupe {
  background-color: rgba(174, 160, 115, 0.7) !important;
}
.tg-lightTaupe::before {
  border-color: #aea073;
}
.fg-lightGray {
  color: #e4e4e4 !important;
}
.bg-lightGray {
  background-color: #e4e4e4 !important;
}
.bd-lightGray {
  border-color: #e4e4e4 !important;
}
.ol-lightGray {
  outline-color: #e4e4e4 !important;
}
.fg-lightGray-active:active {
  color: #e4e4e4 !important;
}
.fg-lightGray-hover:hover {
  color: #e4e4e4 !important;
}
.fg-lightGray-focus:focus {
  color: #e4e4e4 !important;
}
.bg-lightGray-active:active {
  background-color: #e4e4e4 !important;
}
.bg-lightGray-hover:hover {
  background-color: #e4e4e4 !important;
}
.bg-lightGray-focus:focus {
  background-color: #e4e4e4 !important;
}
.bd-lightGray-active:active {
  border-color: #e4e4e4 !important;
}
.bd-lightGray-hover:hover {
  border-color: #e4e4e4 !important;
}
.bd-lightGray-focus:focus {
  border-color: #e4e4e4 !important;
}
.ol-lightGray-active:active {
  outline-color: #e4e4e4 !important;
}
.ol-lightGray-hover:hover {
  outline-color: #e4e4e4 !important;
}
.ol-lightGray-focus:focus {
  outline-color: #e4e4e4 !important;
}
.ribbed-lightGray {
  background: #e4e4e4 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-lightGray::before {
  background: #e4e4e4 !important;
}
.before-fg-lightGray::before {
  color: #e4e4e4 !important;
}
.after-bg-lightGray::after {
  background: #e4e4e4 !important;
}
.after-fg-lightGray::after {
  color: #e4e4e4 !important;
}
.op-lightGray {
  background-color: rgba(228, 228, 228, 0.7) !important;
}
.tg-lightGray::before {
  border-color: #e4e4e4;
}
.fg-lightGrayBlue {
  color: #8aa2ae !important;
}
.bg-lightGrayBlue {
  background-color: #8aa2ae !important;
}
.bd-lightGrayBlue {
  border-color: #8aa2ae !important;
}
.ol-lightGrayBlue {
  outline-color: #8aa2ae !important;
}
.fg-lightGrayBlue-active:active {
  color: #8aa2ae !important;
}
.fg-lightGrayBlue-hover:hover {
  color: #8aa2ae !important;
}
.fg-lightGrayBlue-focus:focus {
  color: #8aa2ae !important;
}
.bg-lightGrayBlue-active:active {
  background-color: #8aa2ae !important;
}
.bg-lightGrayBlue-hover:hover {
  background-color: #8aa2ae !important;
}
.bg-lightGrayBlue-focus:focus {
  background-color: #8aa2ae !important;
}
.bd-lightGrayBlue-active:active {
  border-color: #8aa2ae !important;
}
.bd-lightGrayBlue-hover:hover {
  border-color: #8aa2ae !important;
}
.bd-lightGrayBlue-focus:focus {
  border-color: #8aa2ae !important;
}
.ol-lightGrayBlue-active:active {
  outline-color: #8aa2ae !important;
}
.ol-lightGrayBlue-hover:hover {
  outline-color: #8aa2ae !important;
}
.ol-lightGrayBlue-focus:focus {
  outline-color: #8aa2ae !important;
}
.ribbed-lightGrayBlue {
  background: #8aa2ae 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-lightGrayBlue::before {
  background: #8aa2ae !important;
}
.before-fg-lightGrayBlue::before {
  color: #8aa2ae !important;
}
.after-bg-lightGrayBlue::after {
  background: #8aa2ae !important;
}
.after-fg-lightGrayBlue::after {
  color: #8aa2ae !important;
}
.op-lightGrayBlue {
  background-color: rgba(138, 162, 174, 0.7) !important;
}
.tg-lightGrayBlue::before {
  border-color: #8aa2ae;
}
.fg-darkLime {
  color: #647800 !important;
}
.bg-darkLime {
  background-color: #647800 !important;
}
.bd-darkLime {
  border-color: #647800 !important;
}
.ol-darkLime {
  outline-color: #647800 !important;
}
.fg-darkLime-active:active {
  color: #647800 !important;
}
.fg-darkLime-hover:hover {
  color: #647800 !important;
}
.fg-darkLime-focus:focus {
  color: #647800 !important;
}
.bg-darkLime-active:active {
  background-color: #647800 !important;
}
.bg-darkLime-hover:hover {
  background-color: #647800 !important;
}
.bg-darkLime-focus:focus {
  background-color: #647800 !important;
}
.bd-darkLime-active:active {
  border-color: #647800 !important;
}
.bd-darkLime-hover:hover {
  border-color: #647800 !important;
}
.bd-darkLime-focus:focus {
  border-color: #647800 !important;
}
.ol-darkLime-active:active {
  outline-color: #647800 !important;
}
.ol-darkLime-hover:hover {
  outline-color: #647800 !important;
}
.ol-darkLime-focus:focus {
  outline-color: #647800 !important;
}
.ribbed-darkLime {
  background: #647800 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-darkLime::before {
  background: #647800 !important;
}
.before-fg-darkLime::before {
  color: #647800 !important;
}
.after-bg-darkLime::after {
  background: #647800 !important;
}
.after-fg-darkLime::after {
  color: #647800 !important;
}
.op-darkLime {
  background-color: rgba(100, 120, 0, 0.7) !important;
}
.tg-darkLime::before {
  border-color: #647800;
}
.fg-darkGreen {
  color: #3a660e !important;
}
.bg-darkGreen {
  background-color: #3a660e !important;
}
.bd-darkGreen {
  border-color: #3a660e !important;
}
.ol-darkGreen {
  outline-color: #3a660e !important;
}
.fg-darkGreen-active:active {
  color: #3a660e !important;
}
.fg-darkGreen-hover:hover {
  color: #3a660e !important;
}
.fg-darkGreen-focus:focus {
  color: #3a660e !important;
}
.bg-darkGreen-active:active {
  background-color: #3a660e !important;
}
.bg-darkGreen-hover:hover {
  background-color: #3a660e !important;
}
.bg-darkGreen-focus:focus {
  background-color: #3a660e !important;
}
.bd-darkGreen-active:active {
  border-color: #3a660e !important;
}
.bd-darkGreen-hover:hover {
  border-color: #3a660e !important;
}
.bd-darkGreen-focus:focus {
  border-color: #3a660e !important;
}
.ol-darkGreen-active:active {
  outline-color: #3a660e !important;
}
.ol-darkGreen-hover:hover {
  outline-color: #3a660e !important;
}
.ol-darkGreen-focus:focus {
  outline-color: #3a660e !important;
}
.ribbed-darkGreen {
  background: #3a660e 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-darkGreen::before {
  background: #3a660e !important;
}
.before-fg-darkGreen::before {
  color: #3a660e !important;
}
.after-bg-darkGreen::after {
  background: #3a660e !important;
}
.after-fg-darkGreen::after {
  color: #3a660e !important;
}
.op-darkGreen {
  background-color: rgba(58, 102, 14, 0.7) !important;
}
.tg-darkGreen::before {
  border-color: #3a660e;
}
.fg-darkEmerald {
  color: #003d00 !important;
}
.bg-darkEmerald {
  background-color: #003d00 !important;
}
.bd-darkEmerald {
  border-color: #003d00 !important;
}
.ol-darkEmerald {
  outline-color: #003d00 !important;
}
.fg-darkEmerald-active:active {
  color: #003d00 !important;
}
.fg-darkEmerald-hover:hover {
  color: #003d00 !important;
}
.fg-darkEmerald-focus:focus {
  color: #003d00 !important;
}
.bg-darkEmerald-active:active {
  background-color: #003d00 !important;
}
.bg-darkEmerald-hover:hover {
  background-color: #003d00 !important;
}
.bg-darkEmerald-focus:focus {
  background-color: #003d00 !important;
}
.bd-darkEmerald-active:active {
  border-color: #003d00 !important;
}
.bd-darkEmerald-hover:hover {
  border-color: #003d00 !important;
}
.bd-darkEmerald-focus:focus {
  border-color: #003d00 !important;
}
.ol-darkEmerald-active:active {
  outline-color: #003d00 !important;
}
.ol-darkEmerald-hover:hover {
  outline-color: #003d00 !important;
}
.ol-darkEmerald-focus:focus {
  outline-color: #003d00 !important;
}
.ribbed-darkEmerald {
  background: #003d00 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-darkEmerald::before {
  background: #003d00 !important;
}
.before-fg-darkEmerald::before {
  color: #003d00 !important;
}
.after-bg-darkEmerald::after {
  background: #003d00 !important;
}
.after-fg-darkEmerald::after {
  color: #003d00 !important;
}
.op-darkEmerald {
  background-color: rgba(0, 61, 0, 0.7) !important;
}
.tg-darkEmerald::before {
  border-color: #003d00;
}
.fg-darkBlue {
  color: #0077a3 !important;
}
.bg-darkBlue {
  background-color: #0077a3 !important;
}
.bd-darkBlue {
  border-color: #0077a3 !important;
}
.ol-darkBlue {
  outline-color: #0077a3 !important;
}
.fg-darkBlue-active:active {
  color: #0077a3 !important;
}
.fg-darkBlue-hover:hover {
  color: #0077a3 !important;
}
.fg-darkBlue-focus:focus {
  color: #0077a3 !important;
}
.bg-darkBlue-active:active {
  background-color: #0077a3 !important;
}
.bg-darkBlue-hover:hover {
  background-color: #0077a3 !important;
}
.bg-darkBlue-focus:focus {
  background-color: #0077a3 !important;
}
.bd-darkBlue-active:active {
  border-color: #0077a3 !important;
}
.bd-darkBlue-hover:hover {
  border-color: #0077a3 !important;
}
.bd-darkBlue-focus:focus {
  border-color: #0077a3 !important;
}
.ol-darkBlue-active:active {
  outline-color: #0077a3 !important;
}
.ol-darkBlue-hover:hover {
  outline-color: #0077a3 !important;
}
.ol-darkBlue-focus:focus {
  outline-color: #0077a3 !important;
}
.ribbed-darkBlue {
  background: #0077a3 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-darkBlue::before {
  background: #0077a3 !important;
}
.before-fg-darkBlue::before {
  color: #0077a3 !important;
}
.after-bg-darkBlue::after {
  background: #0077a3 !important;
}
.after-fg-darkBlue::after {
  color: #0077a3 !important;
}
.op-darkBlue {
  background-color: rgba(0, 119, 163, 0.7) !important;
}
.tg-darkBlue::before {
  border-color: #0077a3;
}
.fg-darkTeal {
  color: #005e5d !important;
}
.bg-darkTeal {
  background-color: #005e5d !important;
}
.bd-darkTeal {
  border-color: #005e5d !important;
}
.ol-darkTeal {
  outline-color: #005e5d !important;
}
.fg-darkTeal-active:active {
  color: #005e5d !important;
}
.fg-darkTeal-hover:hover {
  color: #005e5d !important;
}
.fg-darkTeal-focus:focus {
  color: #005e5d !important;
}
.bg-darkTeal-active:active {
  background-color: #005e5d !important;
}
.bg-darkTeal-hover:hover {
  background-color: #005e5d !important;
}
.bg-darkTeal-focus:focus {
  background-color: #005e5d !important;
}
.bd-darkTeal-active:active {
  border-color: #005e5d !important;
}
.bd-darkTeal-hover:hover {
  border-color: #005e5d !important;
}
.bd-darkTeal-focus:focus {
  border-color: #005e5d !important;
}
.ol-darkTeal-active:active {
  outline-color: #005e5d !important;
}
.ol-darkTeal-hover:hover {
  outline-color: #005e5d !important;
}
.ol-darkTeal-focus:focus {
  outline-color: #005e5d !important;
}
.ribbed-darkTeal {
  background: #005e5d 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-darkTeal::before {
  background: #005e5d !important;
}
.before-fg-darkTeal::before {
  color: #005e5d !important;
}
.after-bg-darkTeal::after {
  background: #005e5d !important;
}
.after-fg-darkTeal::after {
  color: #005e5d !important;
}
.op-darkTeal {
  background-color: rgba(0, 94, 93, 0.7) !important;
}
.tg-darkTeal::before {
  border-color: #005e5d;
}
.fg-darkCyan {
  color: #13709e !important;
}
.bg-darkCyan {
  background-color: #13709e !important;
}
.bd-darkCyan {
  border-color: #13709e !important;
}
.ol-darkCyan {
  outline-color: #13709e !important;
}
.fg-darkCyan-active:active {
  color: #13709e !important;
}
.fg-darkCyan-hover:hover {
  color: #13709e !important;
}
.fg-darkCyan-focus:focus {
  color: #13709e !important;
}
.bg-darkCyan-active:active {
  background-color: #13709e !important;
}
.bg-darkCyan-hover:hover {
  background-color: #13709e !important;
}
.bg-darkCyan-focus:focus {
  background-color: #13709e !important;
}
.bd-darkCyan-active:active {
  border-color: #13709e !important;
}
.bd-darkCyan-hover:hover {
  border-color: #13709e !important;
}
.bd-darkCyan-focus:focus {
  border-color: #13709e !important;
}
.ol-darkCyan-active:active {
  outline-color: #13709e !important;
}
.ol-darkCyan-hover:hover {
  outline-color: #13709e !important;
}
.ol-darkCyan-focus:focus {
  outline-color: #13709e !important;
}
.ribbed-darkCyan {
  background: #13709e 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-darkCyan::before {
  background: #13709e !important;
}
.before-fg-darkCyan::before {
  color: #13709e !important;
}
.after-bg-darkCyan::after {
  background: #13709e !important;
}
.after-fg-darkCyan::after {
  color: #13709e !important;
}
.op-darkCyan {
  background-color: rgba(19, 112, 158, 0.7) !important;
}
.tg-darkCyan::before {
  border-color: #13709e;
}
.fg-darkCobalt {
  color: #0036a3 !important;
}
.bg-darkCobalt {
  background-color: #0036a3 !important;
}
.bd-darkCobalt {
  border-color: #0036a3 !important;
}
.ol-darkCobalt {
  outline-color: #0036a3 !important;
}
.fg-darkCobalt-active:active {
  color: #0036a3 !important;
}
.fg-darkCobalt-hover:hover {
  color: #0036a3 !important;
}
.fg-darkCobalt-focus:focus {
  color: #0036a3 !important;
}
.bg-darkCobalt-active:active {
  background-color: #0036a3 !important;
}
.bg-darkCobalt-hover:hover {
  background-color: #0036a3 !important;
}
.bg-darkCobalt-focus:focus {
  background-color: #0036a3 !important;
}
.bd-darkCobalt-active:active {
  border-color: #0036a3 !important;
}
.bd-darkCobalt-hover:hover {
  border-color: #0036a3 !important;
}
.bd-darkCobalt-focus:focus {
  border-color: #0036a3 !important;
}
.ol-darkCobalt-active:active {
  outline-color: #0036a3 !important;
}
.ol-darkCobalt-hover:hover {
  outline-color: #0036a3 !important;
}
.ol-darkCobalt-focus:focus {
  outline-color: #0036a3 !important;
}
.ribbed-darkCobalt {
  background: #0036a3 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-darkCobalt::before {
  background: #0036a3 !important;
}
.before-fg-darkCobalt::before {
  color: #0036a3 !important;
}
.after-bg-darkCobalt::after {
  background: #0036a3 !important;
}
.after-fg-darkCobalt::after {
  color: #0036a3 !important;
}
.op-darkCobalt {
  background-color: rgba(0, 54, 163, 0.7) !important;
}
.tg-darkCobalt::before {
  border-color: #0036a3;
}
.fg-darkIndigo {
  color: #4a00b3 !important;
}
.bg-darkIndigo {
  background-color: #4a00b3 !important;
}
.bd-darkIndigo {
  border-color: #4a00b3 !important;
}
.ol-darkIndigo {
  outline-color: #4a00b3 !important;
}
.fg-darkIndigo-active:active {
  color: #4a00b3 !important;
}
.fg-darkIndigo-hover:hover {
  color: #4a00b3 !important;
}
.fg-darkIndigo-focus:focus {
  color: #4a00b3 !important;
}
.bg-darkIndigo-active:active {
  background-color: #4a00b3 !important;
}
.bg-darkIndigo-hover:hover {
  background-color: #4a00b3 !important;
}
.bg-darkIndigo-focus:focus {
  background-color: #4a00b3 !important;
}
.bd-darkIndigo-active:active {
  border-color: #4a00b3 !important;
}
.bd-darkIndigo-hover:hover {
  border-color: #4a00b3 !important;
}
.bd-darkIndigo-focus:focus {
  border-color: #4a00b3 !important;
}
.ol-darkIndigo-active:active {
  outline-color: #4a00b3 !important;
}
.ol-darkIndigo-hover:hover {
  outline-color: #4a00b3 !important;
}
.ol-darkIndigo-focus:focus {
  outline-color: #4a00b3 !important;
}
.ribbed-darkIndigo {
  background: #4a00b3 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-darkIndigo::before {
  background: #4a00b3 !important;
}
.before-fg-darkIndigo::before {
  color: #4a00b3 !important;
}
.after-bg-darkIndigo::after {
  background: #4a00b3 !important;
}
.after-fg-darkIndigo::after {
  color: #4a00b3 !important;
}
.op-darkIndigo {
  background-color: rgba(74, 0, 179, 0.7) !important;
}
.tg-darkIndigo::before {
  border-color: #4a00b3;
}
.fg-darkViolet {
  color: #7700b3 !important;
}
.bg-darkViolet {
  background-color: #7700b3 !important;
}
.bd-darkViolet {
  border-color: #7700b3 !important;
}
.ol-darkViolet {
  outline-color: #7700b3 !important;
}
.fg-darkViolet-active:active {
  color: #7700b3 !important;
}
.fg-darkViolet-hover:hover {
  color: #7700b3 !important;
}
.fg-darkViolet-focus:focus {
  color: #7700b3 !important;
}
.bg-darkViolet-active:active {
  background-color: #7700b3 !important;
}
.bg-darkViolet-hover:hover {
  background-color: #7700b3 !important;
}
.bg-darkViolet-focus:focus {
  background-color: #7700b3 !important;
}
.bd-darkViolet-active:active {
  border-color: #7700b3 !important;
}
.bd-darkViolet-hover:hover {
  border-color: #7700b3 !important;
}
.bd-darkViolet-focus:focus {
  border-color: #7700b3 !important;
}
.ol-darkViolet-active:active {
  outline-color: #7700b3 !important;
}
.ol-darkViolet-hover:hover {
  outline-color: #7700b3 !important;
}
.ol-darkViolet-focus:focus {
  outline-color: #7700b3 !important;
}
.ribbed-darkViolet {
  background: #7700b3 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-darkViolet::before {
  background: #7700b3 !important;
}
.before-fg-darkViolet::before {
  color: #7700b3 !important;
}
.after-bg-darkViolet::after {
  background: #7700b3 !important;
}
.after-fg-darkViolet::after {
  color: #7700b3 !important;
}
.op-darkViolet {
  background-color: rgba(119, 0, 179, 0.7) !important;
}
.tg-darkViolet::before {
  border-color: #7700b3;
}
.fg-darkPink {
  color: #ba2588 !important;
}
.bg-darkPink {
  background-color: #ba2588 !important;
}
.bd-darkPink {
  border-color: #ba2588 !important;
}
.ol-darkPink {
  outline-color: #ba2588 !important;
}
.fg-darkPink-active:active {
  color: #ba2588 !important;
}
.fg-darkPink-hover:hover {
  color: #ba2588 !important;
}
.fg-darkPink-focus:focus {
  color: #ba2588 !important;
}
.bg-darkPink-active:active {
  background-color: #ba2588 !important;
}
.bg-darkPink-hover:hover {
  background-color: #ba2588 !important;
}
.bg-darkPink-focus:focus {
  background-color: #ba2588 !important;
}
.bd-darkPink-active:active {
  border-color: #ba2588 !important;
}
.bd-darkPink-hover:hover {
  border-color: #ba2588 !important;
}
.bd-darkPink-focus:focus {
  border-color: #ba2588 !important;
}
.ol-darkPink-active:active {
  outline-color: #ba2588 !important;
}
.ol-darkPink-hover:hover {
  outline-color: #ba2588 !important;
}
.ol-darkPink-focus:focus {
  outline-color: #ba2588 !important;
}
.ribbed-darkPink {
  background: #ba2588 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-darkPink::before {
  background: #ba2588 !important;
}
.before-fg-darkPink::before {
  color: #ba2588 !important;
}
.after-bg-darkPink::after {
  background: #ba2588 !important;
}
.after-fg-darkPink::after {
  color: #ba2588 !important;
}
.op-darkPink {
  background-color: rgba(186, 37, 136, 0.7) !important;
}
.tg-darkPink::before {
  border-color: #ba2588;
}
.fg-darkMagenta {
  color: #8c004a !important;
}
.bg-darkMagenta {
  background-color: #8c004a !important;
}
.bd-darkMagenta {
  border-color: #8c004a !important;
}
.ol-darkMagenta {
  outline-color: #8c004a !important;
}
.fg-darkMagenta-active:active {
  color: #8c004a !important;
}
.fg-darkMagenta-hover:hover {
  color: #8c004a !important;
}
.fg-darkMagenta-focus:focus {
  color: #8c004a !important;
}
.bg-darkMagenta-active:active {
  background-color: #8c004a !important;
}
.bg-darkMagenta-hover:hover {
  background-color: #8c004a !important;
}
.bg-darkMagenta-focus:focus {
  background-color: #8c004a !important;
}
.bd-darkMagenta-active:active {
  border-color: #8c004a !important;
}
.bd-darkMagenta-hover:hover {
  border-color: #8c004a !important;
}
.bd-darkMagenta-focus:focus {
  border-color: #8c004a !important;
}
.ol-darkMagenta-active:active {
  outline-color: #8c004a !important;
}
.ol-darkMagenta-hover:hover {
  outline-color: #8c004a !important;
}
.ol-darkMagenta-focus:focus {
  outline-color: #8c004a !important;
}
.ribbed-darkMagenta {
  background: #8c004a 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-darkMagenta::before {
  background: #8c004a !important;
}
.before-fg-darkMagenta::before {
  color: #8c004a !important;
}
.after-bg-darkMagenta::after {
  background: #8c004a !important;
}
.after-fg-darkMagenta::after {
  color: #8c004a !important;
}
.op-darkMagenta {
  background-color: rgba(140, 0, 74, 0.7) !important;
}
.tg-darkMagenta::before {
  border-color: #8c004a;
}
.fg-darkCrimson {
  color: #560014 !important;
}
.bg-darkCrimson {
  background-color: #560014 !important;
}
.bd-darkCrimson {
  border-color: #560014 !important;
}
.ol-darkCrimson {
  outline-color: #560014 !important;
}
.fg-darkCrimson-active:active {
  color: #560014 !important;
}
.fg-darkCrimson-hover:hover {
  color: #560014 !important;
}
.fg-darkCrimson-focus:focus {
  color: #560014 !important;
}
.bg-darkCrimson-active:active {
  background-color: #560014 !important;
}
.bg-darkCrimson-hover:hover {
  background-color: #560014 !important;
}
.bg-darkCrimson-focus:focus {
  background-color: #560014 !important;
}
.bd-darkCrimson-active:active {
  border-color: #560014 !important;
}
.bd-darkCrimson-hover:hover {
  border-color: #560014 !important;
}
.bd-darkCrimson-focus:focus {
  border-color: #560014 !important;
}
.ol-darkCrimson-active:active {
  outline-color: #560014 !important;
}
.ol-darkCrimson-hover:hover {
  outline-color: #560014 !important;
}
.ol-darkCrimson-focus:focus {
  outline-color: #560014 !important;
}
.ribbed-darkCrimson {
  background: #560014 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-darkCrimson::before {
  background: #560014 !important;
}
.before-fg-darkCrimson::before {
  color: #560014 !important;
}
.after-bg-darkCrimson::after {
  background: #560014 !important;
}
.after-fg-darkCrimson::after {
  color: #560014 !important;
}
.op-darkCrimson {
  background-color: rgba(86, 0, 20, 0.7) !important;
}
.tg-darkCrimson::before {
  border-color: #560014;
}
.fg-darkRed {
  color: #8f251f !important;
}
.bg-darkRed {
  background-color: #8f251f !important;
}
.bd-darkRed {
  border-color: #8f251f !important;
}
.ol-darkRed {
  outline-color: #8f251f !important;
}
.fg-darkRed-active:active {
  color: #8f251f !important;
}
.fg-darkRed-hover:hover {
  color: #8f251f !important;
}
.fg-darkRed-focus:focus {
  color: #8f251f !important;
}
.bg-darkRed-active:active {
  background-color: #8f251f !important;
}
.bg-darkRed-hover:hover {
  background-color: #8f251f !important;
}
.bg-darkRed-focus:focus {
  background-color: #8f251f !important;
}
.bd-darkRed-active:active {
  border-color: #8f251f !important;
}
.bd-darkRed-hover:hover {
  border-color: #8f251f !important;
}
.bd-darkRed-focus:focus {
  border-color: #8f251f !important;
}
.ol-darkRed-active:active {
  outline-color: #8f251f !important;
}
.ol-darkRed-hover:hover {
  outline-color: #8f251f !important;
}
.ol-darkRed-focus:focus {
  outline-color: #8f251f !important;
}
.ribbed-darkRed {
  background: #8f251f 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-darkRed::before {
  background: #8f251f !important;
}
.before-fg-darkRed::before {
  color: #8f251f !important;
}
.after-bg-darkRed::after {
  background: #8f251f !important;
}
.after-fg-darkRed::after {
  color: #8f251f !important;
}
.op-darkRed {
  background-color: rgba(143, 37, 31, 0.7) !important;
}
.tg-darkRed::before {
  border-color: #8f251f;
}
.fg-darkOrange {
  color: #ae4800 !important;
}
.bg-darkOrange {
  background-color: #ae4800 !important;
}
.bd-darkOrange {
  border-color: #ae4800 !important;
}
.ol-darkOrange {
  outline-color: #ae4800 !important;
}
.fg-darkOrange-active:active {
  color: #ae4800 !important;
}
.fg-darkOrange-hover:hover {
  color: #ae4800 !important;
}
.fg-darkOrange-focus:focus {
  color: #ae4800 !important;
}
.bg-darkOrange-active:active {
  background-color: #ae4800 !important;
}
.bg-darkOrange-hover:hover {
  background-color: #ae4800 !important;
}
.bg-darkOrange-focus:focus {
  background-color: #ae4800 !important;
}
.bd-darkOrange-active:active {
  border-color: #ae4800 !important;
}
.bd-darkOrange-hover:hover {
  border-color: #ae4800 !important;
}
.bd-darkOrange-focus:focus {
  border-color: #ae4800 !important;
}
.ol-darkOrange-active:active {
  outline-color: #ae4800 !important;
}
.ol-darkOrange-hover:hover {
  outline-color: #ae4800 !important;
}
.ol-darkOrange-focus:focus {
  outline-color: #ae4800 !important;
}
.ribbed-darkOrange {
  background: #ae4800 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-darkOrange::before {
  background: #ae4800 !important;
}
.before-fg-darkOrange::before {
  color: #ae4800 !important;
}
.after-bg-darkOrange::after {
  background: #ae4800 !important;
}
.after-fg-darkOrange::after {
  color: #ae4800 !important;
}
.op-darkOrange {
  background-color: rgba(174, 72, 0, 0.7) !important;
}
.tg-darkOrange::before {
  border-color: #ae4800;
}
.fg-darkAmber {
  color: #a77107 !important;
}
.bg-darkAmber {
  background-color: #a77107 !important;
}
.bd-darkAmber {
  border-color: #a77107 !important;
}
.ol-darkAmber {
  outline-color: #a77107 !important;
}
.fg-darkAmber-active:active {
  color: #a77107 !important;
}
.fg-darkAmber-hover:hover {
  color: #a77107 !important;
}
.fg-darkAmber-focus:focus {
  color: #a77107 !important;
}
.bg-darkAmber-active:active {
  background-color: #a77107 !important;
}
.bg-darkAmber-hover:hover {
  background-color: #a77107 !important;
}
.bg-darkAmber-focus:focus {
  background-color: #a77107 !important;
}
.bd-darkAmber-active:active {
  border-color: #a77107 !important;
}
.bd-darkAmber-hover:hover {
  border-color: #a77107 !important;
}
.bd-darkAmber-focus:focus {
  border-color: #a77107 !important;
}
.ol-darkAmber-active:active {
  outline-color: #a77107 !important;
}
.ol-darkAmber-hover:hover {
  outline-color: #a77107 !important;
}
.ol-darkAmber-focus:focus {
  outline-color: #a77107 !important;
}
.ribbed-darkAmber {
  background: #a77107 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-darkAmber::before {
  background: #a77107 !important;
}
.before-fg-darkAmber::before {
  color: #a77107 !important;
}
.after-bg-darkAmber::after {
  background: #a77107 !important;
}
.after-fg-darkAmber::after {
  color: #a77107 !important;
}
.op-darkAmber {
  background-color: rgba(167, 113, 7, 0.7) !important;
}
.tg-darkAmber::before {
  border-color: #a77107;
}
.fg-darkYellow {
  color: #b3a800 !important;
}
.bg-darkYellow {
  background-color: #b3a800 !important;
}
.bd-darkYellow {
  border-color: #b3a800 !important;
}
.ol-darkYellow {
  outline-color: #b3a800 !important;
}
.fg-darkYellow-active:active {
  color: #b3a800 !important;
}
.fg-darkYellow-hover:hover {
  color: #b3a800 !important;
}
.fg-darkYellow-focus:focus {
  color: #b3a800 !important;
}
.bg-darkYellow-active:active {
  background-color: #b3a800 !important;
}
.bg-darkYellow-hover:hover {
  background-color: #b3a800 !important;
}
.bg-darkYellow-focus:focus {
  background-color: #b3a800 !important;
}
.bd-darkYellow-active:active {
  border-color: #b3a800 !important;
}
.bd-darkYellow-hover:hover {
  border-color: #b3a800 !important;
}
.bd-darkYellow-focus:focus {
  border-color: #b3a800 !important;
}
.ol-darkYellow-active:active {
  outline-color: #b3a800 !important;
}
.ol-darkYellow-hover:hover {
  outline-color: #b3a800 !important;
}
.ol-darkYellow-focus:focus {
  outline-color: #b3a800 !important;
}
.ribbed-darkYellow {
  background: #b3a800 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-darkYellow::before {
  background: #b3a800 !important;
}
.before-fg-darkYellow::before {
  color: #b3a800 !important;
}
.after-bg-darkYellow::after {
  background: #b3a800 !important;
}
.after-fg-darkYellow::after {
  color: #b3a800 !important;
}
.op-darkYellow {
  background-color: rgba(179, 168, 0, 0.7) !important;
}
.tg-darkYellow::before {
  border-color: #b3a800;
}
.fg-darkBrown {
  color: #493219 !important;
}
.bg-darkBrown {
  background-color: #493219 !important;
}
.bd-darkBrown {
  border-color: #493219 !important;
}
.ol-darkBrown {
  outline-color: #493219 !important;
}
.fg-darkBrown-active:active {
  color: #493219 !important;
}
.fg-darkBrown-hover:hover {
  color: #493219 !important;
}
.fg-darkBrown-focus:focus {
  color: #493219 !important;
}
.bg-darkBrown-active:active {
  background-color: #493219 !important;
}
.bg-darkBrown-hover:hover {
  background-color: #493219 !important;
}
.bg-darkBrown-focus:focus {
  background-color: #493219 !important;
}
.bd-darkBrown-active:active {
  border-color: #493219 !important;
}
.bd-darkBrown-hover:hover {
  border-color: #493219 !important;
}
.bd-darkBrown-focus:focus {
  border-color: #493219 !important;
}
.ol-darkBrown-active:active {
  outline-color: #493219 !important;
}
.ol-darkBrown-hover:hover {
  outline-color: #493219 !important;
}
.ol-darkBrown-focus:focus {
  outline-color: #493219 !important;
}
.ribbed-darkBrown {
  background: #493219 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-darkBrown::before {
  background: #493219 !important;
}
.before-fg-darkBrown::before {
  color: #493219 !important;
}
.after-bg-darkBrown::after {
  background: #493219 !important;
}
.after-fg-darkBrown::after {
  color: #493219 !important;
}
.op-darkBrown {
  background-color: rgba(73, 50, 25, 0.7) !important;
}
.tg-darkBrown::before {
  border-color: #493219;
}
.fg-darkOlive {
  color: #4a5b43 !important;
}
.bg-darkOlive {
  background-color: #4a5b43 !important;
}
.bd-darkOlive {
  border-color: #4a5b43 !important;
}
.ol-darkOlive {
  outline-color: #4a5b43 !important;
}
.fg-darkOlive-active:active {
  color: #4a5b43 !important;
}
.fg-darkOlive-hover:hover {
  color: #4a5b43 !important;
}
.fg-darkOlive-focus:focus {
  color: #4a5b43 !important;
}
.bg-darkOlive-active:active {
  background-color: #4a5b43 !important;
}
.bg-darkOlive-hover:hover {
  background-color: #4a5b43 !important;
}
.bg-darkOlive-focus:focus {
  background-color: #4a5b43 !important;
}
.bd-darkOlive-active:active {
  border-color: #4a5b43 !important;
}
.bd-darkOlive-hover:hover {
  border-color: #4a5b43 !important;
}
.bd-darkOlive-focus:focus {
  border-color: #4a5b43 !important;
}
.ol-darkOlive-active:active {
  outline-color: #4a5b43 !important;
}
.ol-darkOlive-hover:hover {
  outline-color: #4a5b43 !important;
}
.ol-darkOlive-focus:focus {
  outline-color: #4a5b43 !important;
}
.ribbed-darkOlive {
  background: #4a5b43 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-darkOlive::before {
  background: #4a5b43 !important;
}
.before-fg-darkOlive::before {
  color: #4a5b43 !important;
}
.after-bg-darkOlive::after {
  background: #4a5b43 !important;
}
.after-fg-darkOlive::after {
  color: #4a5b43 !important;
}
.op-darkOlive {
  background-color: rgba(74, 91, 67, 0.7) !important;
}
.tg-darkOlive::before {
  border-color: #4a5b43;
}
.fg-darkSteel {
  color: #43505b !important;
}
.bg-darkSteel {
  background-color: #43505b !important;
}
.bd-darkSteel {
  border-color: #43505b !important;
}
.ol-darkSteel {
  outline-color: #43505b !important;
}
.fg-darkSteel-active:active {
  color: #43505b !important;
}
.fg-darkSteel-hover:hover {
  color: #43505b !important;
}
.fg-darkSteel-focus:focus {
  color: #43505b !important;
}
.bg-darkSteel-active:active {
  background-color: #43505b !important;
}
.bg-darkSteel-hover:hover {
  background-color: #43505b !important;
}
.bg-darkSteel-focus:focus {
  background-color: #43505b !important;
}
.bd-darkSteel-active:active {
  border-color: #43505b !important;
}
.bd-darkSteel-hover:hover {
  border-color: #43505b !important;
}
.bd-darkSteel-focus:focus {
  border-color: #43505b !important;
}
.ol-darkSteel-active:active {
  outline-color: #43505b !important;
}
.ol-darkSteel-hover:hover {
  outline-color: #43505b !important;
}
.ol-darkSteel-focus:focus {
  outline-color: #43505b !important;
}
.ribbed-darkSteel {
  background: #43505b 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-darkSteel::before {
  background: #43505b !important;
}
.before-fg-darkSteel::before {
  color: #43505b !important;
}
.after-bg-darkSteel::after {
  background: #43505b !important;
}
.after-fg-darkSteel::after {
  color: #43505b !important;
}
.op-darkSteel {
  background-color: rgba(67, 80, 91, 0.7) !important;
}
.tg-darkSteel::before {
  border-color: #43505b;
}
.fg-darkMauve {
  color: #4f415d !important;
}
.bg-darkMauve {
  background-color: #4f415d !important;
}
.bd-darkMauve {
  border-color: #4f415d !important;
}
.ol-darkMauve {
  outline-color: #4f415d !important;
}
.fg-darkMauve-active:active {
  color: #4f415d !important;
}
.fg-darkMauve-hover:hover {
  color: #4f415d !important;
}
.fg-darkMauve-focus:focus {
  color: #4f415d !important;
}
.bg-darkMauve-active:active {
  background-color: #4f415d !important;
}
.bg-darkMauve-hover:hover {
  background-color: #4f415d !important;
}
.bg-darkMauve-focus:focus {
  background-color: #4f415d !important;
}
.bd-darkMauve-active:active {
  border-color: #4f415d !important;
}
.bd-darkMauve-hover:hover {
  border-color: #4f415d !important;
}
.bd-darkMauve-focus:focus {
  border-color: #4f415d !important;
}
.ol-darkMauve-active:active {
  outline-color: #4f415d !important;
}
.ol-darkMauve-hover:hover {
  outline-color: #4f415d !important;
}
.ol-darkMauve-focus:focus {
  outline-color: #4f415d !important;
}
.ribbed-darkMauve {
  background: #4f415d 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-darkMauve::before {
  background: #4f415d !important;
}
.before-fg-darkMauve::before {
  color: #4f415d !important;
}
.after-bg-darkMauve::after {
  background: #4f415d !important;
}
.after-fg-darkMauve::after {
  color: #4f415d !important;
}
.op-darkMauve {
  background-color: rgba(79, 65, 93, 0.7) !important;
}
.tg-darkMauve::before {
  border-color: #4f415d;
}
.fg-darkTaupe {
  color: #574e32 !important;
}
.bg-darkTaupe {
  background-color: #574e32 !important;
}
.bd-darkTaupe {
  border-color: #574e32 !important;
}
.ol-darkTaupe {
  outline-color: #574e32 !important;
}
.fg-darkTaupe-active:active {
  color: #574e32 !important;
}
.fg-darkTaupe-hover:hover {
  color: #574e32 !important;
}
.fg-darkTaupe-focus:focus {
  color: #574e32 !important;
}
.bg-darkTaupe-active:active {
  background-color: #574e32 !important;
}
.bg-darkTaupe-hover:hover {
  background-color: #574e32 !important;
}
.bg-darkTaupe-focus:focus {
  background-color: #574e32 !important;
}
.bd-darkTaupe-active:active {
  border-color: #574e32 !important;
}
.bd-darkTaupe-hover:hover {
  border-color: #574e32 !important;
}
.bd-darkTaupe-focus:focus {
  border-color: #574e32 !important;
}
.ol-darkTaupe-active:active {
  outline-color: #574e32 !important;
}
.ol-darkTaupe-hover:hover {
  outline-color: #574e32 !important;
}
.ol-darkTaupe-focus:focus {
  outline-color: #574e32 !important;
}
.ribbed-darkTaupe {
  background: #574e32 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-darkTaupe::before {
  background: #574e32 !important;
}
.before-fg-darkTaupe::before {
  color: #574e32 !important;
}
.after-bg-darkTaupe::after {
  background: #574e32 !important;
}
.after-fg-darkTaupe::after {
  color: #574e32 !important;
}
.op-darkTaupe {
  background-color: rgba(87, 78, 50, 0.7) !important;
}
.tg-darkTaupe::before {
  border-color: #574e32;
}
.fg-darkGray {
  color: #989898 !important;
}
.bg-darkGray {
  background-color: #989898 !important;
}
.bd-darkGray {
  border-color: #989898 !important;
}
.ol-darkGray {
  outline-color: #989898 !important;
}
.fg-darkGray-active:active {
  color: #989898 !important;
}
.fg-darkGray-hover:hover {
  color: #989898 !important;
}
.fg-darkGray-focus:focus {
  color: #989898 !important;
}
.bg-darkGray-active:active {
  background-color: #989898 !important;
}
.bg-darkGray-hover:hover {
  background-color: #989898 !important;
}
.bg-darkGray-focus:focus {
  background-color: #989898 !important;
}
.bd-darkGray-active:active {
  border-color: #989898 !important;
}
.bd-darkGray-hover:hover {
  border-color: #989898 !important;
}
.bd-darkGray-focus:focus {
  border-color: #989898 !important;
}
.ol-darkGray-active:active {
  outline-color: #989898 !important;
}
.ol-darkGray-hover:hover {
  outline-color: #989898 !important;
}
.ol-darkGray-focus:focus {
  outline-color: #989898 !important;
}
.ribbed-darkGray {
  background: #989898 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-darkGray::before {
  background: #989898 !important;
}
.before-fg-darkGray::before {
  color: #989898 !important;
}
.after-bg-darkGray::after {
  background: #989898 !important;
}
.after-fg-darkGray::after {
  color: #989898 !important;
}
.op-darkGray {
  background-color: rgba(152, 152, 152, 0.7) !important;
}
.tg-darkGray::before {
  border-color: #989898;
}
.fg-darkGrayBlue {
  color: #41545e !important;
}
.bg-darkGrayBlue {
  background-color: #41545e !important;
}
.bd-darkGrayBlue {
  border-color: #41545e !important;
}
.ol-darkGrayBlue {
  outline-color: #41545e !important;
}
.fg-darkGrayBlue-active:active {
  color: #41545e !important;
}
.fg-darkGrayBlue-hover:hover {
  color: #41545e !important;
}
.fg-darkGrayBlue-focus:focus {
  color: #41545e !important;
}
.bg-darkGrayBlue-active:active {
  background-color: #41545e !important;
}
.bg-darkGrayBlue-hover:hover {
  background-color: #41545e !important;
}
.bg-darkGrayBlue-focus:focus {
  background-color: #41545e !important;
}
.bd-darkGrayBlue-active:active {
  border-color: #41545e !important;
}
.bd-darkGrayBlue-hover:hover {
  border-color: #41545e !important;
}
.bd-darkGrayBlue-focus:focus {
  border-color: #41545e !important;
}
.ol-darkGrayBlue-active:active {
  outline-color: #41545e !important;
}
.ol-darkGrayBlue-hover:hover {
  outline-color: #41545e !important;
}
.ol-darkGrayBlue-focus:focus {
  outline-color: #41545e !important;
}
.ribbed-darkGrayBlue {
  background: #41545e 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-darkGrayBlue::before {
  background: #41545e !important;
}
.before-fg-darkGrayBlue::before {
  color: #41545e !important;
}
.after-bg-darkGrayBlue::after {
  background: #41545e !important;
}
.after-fg-darkGrayBlue::after {
  color: #41545e !important;
}
.op-darkGrayBlue {
  background-color: rgba(65, 84, 94, 0.7) !important;
}
.tg-darkGrayBlue::before {
  border-color: #41545e;
}
