@font-face {
  font-family: 'metro';
  src: url('../fonts/metro.eot?izvoei');
  src: url('../fonts/metro.eot?#iefixizvoei') format('embedded-opentype'), url('../fonts/metro.woff?izvoei') format('woff'), url('../fonts/metro.ttf?izvoei') format('truetype'), url('../fonts/metro.svg?izvoei#metro') format('svg');
  font-weight: normal;
  font-style: normal;
}
[class^="mif-"],
[class*=" mif-"] {
  display: inline-block;
  font: normal normal normal 1.5em/1;
  font-family: metro, "Segoe UI", "Open Sans", serif;
  line-height: 1 ;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-transform: translate(0, 0);
          transform: translate(0, 0);
  vertical-align: middle;
  position: static;
  cursor:pointer;
}
[class^="mif-"]:before,
[class*=" mif-"]:before {
  font-family: metro, serif;
  font-weight:normal;
}
.mif-lg {
  font-size: 1.3rem;
  line-height: 0.75em;
  vertical-align: -35%;
}
.mif-2x {
  font-size: 1.75rem;
  vertical-align: -25%;
}
.mif-3x {
  font-size: 2.625rem;
  vertical-align: -30%;
}
.mif-4x {
  font-size: 3.5rem;
  vertical-align: -35%;
}
.op-default {
  background-color: rgba(27, 161, 226, 0.7);
}
.fg-black {
  color: #000000;
}
.bg-black {
  background-color: #000000 !important;
}
.bd-black {
  border-color: #000000 !important;
}
.ol-black {
  outline-color: #000000 !important;
}
.op-black {
  background-color: rgba(0, 0, 0, 0.7);
}
.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: 40px 40px !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;
}
.bg-hover-black:hover {
  background: #000000 !important;
}
.bg-active-black:active {
  background: #000000 !important;
}
.bg-focus-black:focus {
  background: #000000 !important;
}
.fg-hover-black:hover {
  color: #000000 !important;
}
.fg-active-black:active {
  color: #000000 !important;
}
.fg-focus-black:focus {
  color: #000000 !important;
}
.fg-white {
  color: #ffffff !important;
}
.fg-iconblue {
  color: #a5c2ee !important;
}
.fg-light-orange{
    color:#ff8a00;
}

.fg-new-gray{
   color :#626262;
}
.bg-white {
  background-color: #ffffff !important;
}

.bd-white {
  border-color: #ffffff !important;
}
.ol-white {
  outline-color: #ffffff !important;
}
.op-white {
  background-color: rgba(255, 255, 255, 0.7);
}
.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: 40px 40px !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;
}
.bg-hover-white:hover {
  background: #ffffff !important;
}
.bg-active-white:active {
  background: #ffffff !important;
}
.bg-focus-white:focus {
  background: #ffffff !important;
}
.fg-hover-white:hover {
  color: #ffffff !important;
}
.fg-active-white:active {
  color: #ffffff !important;
}
.fg-focus-white:focus {
  color: #ffffff !important;
}
.fg-lime {
  color: #a4c400 !important;
}
.bg-lime {
  background-color: #a4c400 !important;
}
.bd-lime {
  border-color: #a4c400 !important;
}
.ol-lime {
  outline-color: #a4c400 !important;
}
.op-lime {
  background-color: rgba(164, 196, 0, 0.7);
}
.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: 40px 40px !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;
}
.bg-hover-lime:hover {
  background: #a4c400 !important;
}
.bg-active-lime:active {
  background: #a4c400 !important;
}
.bg-focus-lime:focus {
  background: #a4c400 !important;
}
.fg-hover-lime:hover {
  color: #a4c400 !important;
}
.fg-active-lime:active {
  color: #a4c400 !important;
}
.fg-focus-lime:focus {
  color: #a4c400 !important;
}
.fg-green {
  color: #67b835 !important;
}
.fg-green2 {
  color: #c1cc63 !important;
}
/*.fg-green:hover {
  color: #c2cd60 !important;
}*/
.fg-dark-green {
   color: #0b4900;
}
.fg-headgray {
  color: #ddd !important;
}
.fg-skyblue {
  color: #42aaff;
}
.fg-darkBlue2 {
    color:#3580be !important;
}
.fg-navyblue {
  /*color: rgb(1, 68, 136) !important;*/
  color:#005cb9 !important;
}
.fg-skyblue:hover {
  color: #005cb9;
}
.fg-skyblue:focus {
  color: #005cb9;
}
button:focus > .fg-skyblue {
    color: #005cb9;
}
.fg-skyblue.disabled {
  color: #a9c3d8 !important;
}
.fg-marron {
  color: #d19292 !important;
}
.fg-marron:hover {
  color: #bf6464 !important;
}
.fg-marron.disabled {
  color: #cfb7b7 !important;
}
.fg-pink {
  color: #a9c3d8 !important;
}
.fg-gray30 {
  color: #7d7d7d !important;
}
.bg-green {
  background-color: #60a917 !important;
}
.bd-green {
  border-color: #60a917 !important;
}
.ol-green {
  outline-color: #60a917 !important;
}
.op-green {
  background-color: rgba(96, 169, 23, 0.7);
}
.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: 40px 40px !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;
}
.bg-hover-green:hover {
  background: #60a917 !important;
}
.bg-active-green:active {
  background: #60a917 !important;
}
.bg-focus-green:focus {
  background: #60a917 !important;
}
.fg-hover-green:hover {
  color: #60a917 !important;
}
.fg-active-green:active {
  color: #60a917 !important;
}
.fg-focus-green:focus {
  color: #60a917 !important;
}
.fg-emerald {
  color: #008a00 !important;
}
.bg-emerald {
  background-color: #008a00 !important;
}
.bd-emerald {
  border-color: #008a00 !important;
}
.ol-emerald {
  outline-color: #008a00 !important;
}
.op-emerald {
  background-color: rgba(0, 138, 0, 0.7);
}
.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: 40px 40px !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;
}
.bg-hover-emerald:hover {
  background: #008a00 !important;
}
.bg-active-emerald:active {
  background: #008a00 !important;
}
.bg-focus-emerald:focus {
  background: #008a00 !important;
}
.fg-hover-emerald:hover {
  color: #008a00 !important;
}
.fg-active-emerald:active {
  color: #008a00 !important;
}
.fg-focus-emerald:focus {
  color: #008a00 !important;
}
.fg-blue {
  color: #00aff0 !important;
}
.bg-blue {
  background-color: #00aff0 !important;
}
.bd-blue {
  border-color: #00aff0 !important;
}
.ol-blue {
  outline-color: #00aff0 !important;
}
.op-blue {
  background-color: rgba(0, 175, 240, 0.7);
}
.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: 40px 40px !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;
}
.bg-hover-blue:hover {
  background: #00aff0 !important;
}
.bg-active-blue:active {
  background: #00aff0 !important;
}
.bg-focus-blue:focus {
  background: #00aff0 !important;
}
.fg-hover-blue:hover {
  color: #00aff0 !important;
}
.fg-active-blue:active {
  color: #00aff0 !important;
}
.fg-focus-blue:focus {
  color: #00aff0 !important;
}
.fg-teal {
  color: #00aba9 !important;
}
.bg-teal {
  background-color: #00aba9 !important;
}
.bd-teal {
  border-color: #00aba9 !important;
}
.ol-teal {
  outline-color: #00aba9 !important;
}
.op-teal {
  background-color: rgba(0, 171, 169, 0.7);
}
.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: 40px 40px !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;
}
.bg-hover-teal:hover {
  background: #00aba9 !important;
}
.bg-active-teal:active {
  background: #00aba9 !important;
}
.bg-focus-teal:focus {
  background: #00aba9 !important;
}
.fg-hover-teal:hover {
  color: #00aba9 !important;
}
.fg-active-teal:active {
  color: #00aba9 !important;
}
.fg-focus-teal:focus {
  color: #00aba9 !important;
}
.fg-cyan {
  color: #1ba1e2 !important;
}
.bg-cyan {
  background-color: #1ba1e2 !important;
}
.bd-cyan {
  border-color: #1ba1e2 !important;
}
.ol-cyan {
  outline-color: #1ba1e2 !important;
}
.op-cyan {
  background-color: rgba(27, 161, 226, 0.7);
}
.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: 40px 40px !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;
}
.bg-hover-cyan:hover {
  background: #1ba1e2 !important;
}
.bg-active-cyan:active {
  background: #1ba1e2 !important;
}
.bg-focus-cyan:focus {
  background: #1ba1e2 !important;
}
.fg-hover-cyan:hover {
  color: #1ba1e2 !important;
}
.fg-active-cyan:active {
  color: #1ba1e2 !important;
}
.fg-focus-cyan:focus {
  color: #1ba1e2 !important;
}
.fg-cobalt {
  color: #0050ef !important;
}
.bg-cobalt {
  background-color: #0050ef !important;
}
.bd-cobalt {
  border-color: #0050ef !important;
}
.ol-cobalt {
  outline-color: #0050ef !important;
}
.op-cobalt {
  background-color: rgba(0, 80, 239, 0.7);
}
.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: 40px 40px !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;
}
.bg-hover-cobalt:hover {
  background: #0050ef !important;
}
.bg-active-cobalt:active {
  background: #0050ef !important;
}
.bg-focus-cobalt:focus {
  background: #0050ef !important;
}
.fg-hover-cobalt:hover {
  color: #0050ef !important;
}
.fg-active-cobalt:active {
  color: #0050ef !important;
}
.fg-focus-cobalt:focus {
  color: #0050ef !important;
}
.fg-indigo {
  color: #6a00ff !important;
}
.bg-indigo {
  background-color: #6a00ff !important;
}
.bd-indigo {
  border-color: #6a00ff !important;
}
.ol-indigo {
  outline-color: #6a00ff !important;
}
.op-indigo {
  background-color: rgba(106, 0, 255, 0.7);
}
.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: 40px 40px !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;
}
.bg-hover-indigo:hover {
  background: #6a00ff !important;
}
.bg-active-indigo:active {
  background: #6a00ff !important;
}
.bg-focus-indigo:focus {
  background: #6a00ff !important;
}
.fg-hover-indigo:hover {
  color: #6a00ff !important;
}
.fg-active-indigo:active {
  color: #6a00ff !important;
}
.fg-focus-indigo:focus {
  color: #6a00ff !important;
}
.fg-violet {
  color: #9e9cff !important;
}
.bg-violet {
  background-color: #9e9cff !important;
}
.bd-violet {
  border-color: #9e9cff !important;
}
.ol-violet {
  outline-color: #9e9cff !important;
}
.op-violet {
  background-color: rgba(170, 0, 255, 0.7);
}
.ribbed-violet {
  background: #9e9cff 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: 40px 40px !important;
}
.before-bg-violet:before {
  background: #9e9cff !important;
}
.before-fg-violet:before {
  color: #9e9cff !important;
}
.after-bg-violet:after {
  background: #9e9cff !important;
}
.after-fg-violet:after {
  color: #9e9cff !important;
}
.bg-hover-violet:hover {
  background: #9e9cff !important;
}
.bg-active-violet:active {
  background: #9e9cff !important;
}
.bg-focus-violet:focus {
  background: #9e9cff !important;
}
.fg-hover-violet:hover {
  color: #9e9cff !important;
}
.fg-active-violet:active {
  color: #9e9cff !important;
}
.fg-focus-violet:focus {
  color: #9e9cff !important;
}
.fg-pink {
  color: #dc4fad !important;
}
.fg-purple{color:#ae8fe2;}
.fg-purple:hover{color:#7e55c4;} 
.fg-purple.disabled{color:#c0b7cf;} 
.bg-pink {
  background-color: #dc4fad !important;
}
.bd-pink {
  border-color: #dc4fad !important;
}
.ol-pink {
  outline-color: #dc4fad !important;
}
.op-pink {
  background-color: rgba(220, 79, 173, 0.7);
}
.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: 40px 40px !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;
}
.bg-hover-pink:hover {
  background: #dc4fad !important;
}
.bg-active-pink:active {
  background: #dc4fad !important;
}
.bg-focus-pink:focus {
  background: #dc4fad !important;
}
.fg-hover-pink:hover {
  color: #dc4fad !important;
}
.fg-active-pink:active {
  color: #dc4fad !important;
}
.fg-focus-pink:focus {
  color: #dc4fad !important;
}
.fg-magenta {
  color: #d80073 !important;
}
.bg-magenta {
  background-color: #d80073 !important;
}
.bd-magenta {
  border-color: #d80073 !important;
}
.ol-magenta {
  outline-color: #d80073 !important;
}
.op-magenta {
  background-color: rgba(216, 0, 115, 0.7);
}
.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: 40px 40px !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;
}
.bg-hover-magenta:hover {
  background: #d80073 !important;
}
.bg-active-magenta:active {
  background: #d80073 !important;
}
.bg-focus-magenta:focus {
  background: #d80073 !important;
}
.fg-hover-magenta:hover {
  color: #d80073 !important;
}
.fg-active-magenta:active {
  color: #d80073 !important;
}
.fg-focus-magenta:focus {
  color: #d80073 !important;
}
.fg-crimson {
  color: #a20025 !important;
}
.bg-crimson {
  background-color: #a20025 !important;
}
.bd-crimson {
  border-color: #a20025 !important;
}
.ol-crimson {
  outline-color: #a20025 !important;
}
.op-crimson {
  background-color: rgba(162, 0, 37, 0.7);
}
.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: 40px 40px !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;
}
.bg-hover-crimson:hover {
  background: #a20025 !important;
}
.bg-active-crimson:active {
  background: #a20025 !important;
}
.bg-focus-crimson:focus {
  background: #a20025 !important;
}
.fg-hover-crimson:hover {
  color: #a20025 !important;
}
.fg-active-crimson:active {
  color: #a20025 !important;
}
.fg-focus-crimson:focus {
  color: #a20025 !important;
}
.fg-red {
  color: #ae0202 !important;
}
.fg-redTwo{
    color:#b74e4e !important;
}
.bg-red {
  background-color: #ce352c !important;
}
.bd-red {
  border-color: #ce352c !important;
}
.ol-red {
  outline-color: #ce352c !important;
}
.op-red {
  background-color: rgba(206, 53, 44, 0.7);
}
.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: 40px 40px !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;
}
.bg-hover-red:hover {
  background: #ce352c !important;
}
.bg-active-red:active {
  background: #ce352c !important;
}
.bg-focus-red:focus {
  background: #ce352c !important;
}
.fg-hover-red:hover {
  color: #ce352c !important;
}
.fg-active-red:active {
  color: #ce352c !important;
}
.fg-focus-red:focus {
  color: #ce352c !important;
}
.fg-orange {
  color: #d5aa75 !important;
}
.bg-orange {
  background-color: #d5aa75 !important;
}
.bd-orange {
  border-color: #d5aa75 !important;
}
.ol-orange {
  outline-color: #d5aa75 !important;
}
.op-orange {
  background-color: rgba(250, 104, 0, 0.7);
}
.ribbed-orange {
  background: #d5aa75 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: 40px 40px !important;
}
.before-bg-orange:before {
  background: #d5aa75 !important;
}
.before-fg-orange:before {
  color: #d5aa75 !important;
}
.after-bg-orange:after {
  background: #d5aa75 !important;
}
.after-fg-orange:after {
  color: #d5aa75 !important;
}
.bg-hover-orange:hover {
  background: #d5aa75 !important;
}
.bg-active-orange:active {
  background: #d5aa75 !important;
}
.bg-focus-orange:focus {
  background: #d5aa75 !important;
}
.fg-hover-orange:hover {
  color: #d5aa75 !important;
}
.fg-active-orange:active {
  color: #d5aa75 !important;
}
.fg-focus-orange:focus {
  color: #d5aa75 !important;
}
.fg-amber {
  color: #f0a30a !important;
}
.bg-amber {
  background-color: #f0a30a !important;
}
.bd-amber {
  border-color: #f0a30a !important;
}
.ol-amber {
  outline-color: #f0a30a !important;
}
.op-amber {
  background-color: rgba(240, 163, 10, 0.7);
}
.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: 40px 40px !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;
}
.bg-hover-amber:hover {
  background: #f0a30a !important;
}
.bg-active-amber:active {
  background: #f0a30a !important;
}
.bg-focus-amber:focus {
  background: #f0a30a !important;
}
.fg-hover-amber:hover {
  color: #f0a30a !important;
}
.fg-active-amber:active {
  color: #f0a30a !important;
}
.fg-focus-amber:focus {
  color: #f0a30a !important;
}
.fg-yellow {
  color: #e3c800 !important;
}
.bg-yellow {
  background-color: #e3c800 !important;
}
.bg-mng-yellow {
  background-color: #ffc600 !important;
}
.bd-yellow {
  border-color: #e3c800 !important;
}
.ol-yellow {
  outline-color: #e3c800 !important;
}
.op-yellow {
  background-color: rgba(227, 200, 0, 0.7);
}
.ribbed-yellow {
  background: #e3c800 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: 40px 40px !important;
}
.before-bg-yellow:before {
  background: #e3c800 !important;
}
.before-fg-yellow:before {
  color: #e3c800 !important;
}
.after-bg-yellow:after {
  background: #e3c800 !important;
}
.after-fg-yellow:after {
  color: #e3c800 !important;
}
.bg-hover-yellow:hover {
  background: #e3c800 !important;
}
.bg-active-yellow:active {
  background: #e3c800 !important;
}
.bg-focus-yellow:focus {
  background: #e3c800 !important;
}
.fg-hover-yellow:hover {
  color: #e3c800 !important;
}
.fg-active-yellow:active {
  color: #e3c800 !important;
}
.fg-focus-yellow:focus {
  color: #e3c800 !important;
}
.fg-brown {
  color: #825a2c !important;
}
.bg-brown {
  background-color: #825a2c !important;
}
.bd-brown {
  border-color: #825a2c !important;
}
.ol-brown {
  outline-color: #825a2c !important;
}
.op-brown {
  background-color: rgba(130, 90, 44, 0.7);
}
.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: 40px 40px !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;
}
.bg-hover-brown:hover {
  background: #825a2c !important;
}
.bg-active-brown:active {
  background: #825a2c !important;
}
.bg-focus-brown:focus {
  background: #825a2c !important;
}
.fg-hover-brown:hover {
  color: #825a2c !important;
}
.fg-active-brown:active {
  color: #825a2c !important;
}
.fg-focus-brown:focus {
  color: #825a2c !important;
}
.fg-olive {
  color: #6d8764 !important;
}
.bg-olive {
  background-color: #6d8764 !important;
}
.bd-olive {
  border-color: #6d8764 !important;
}
.ol-olive {
  outline-color: #6d8764 !important;
}
.op-olive {
  background-color: rgba(109, 135, 100, 0.7);
}
.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: 40px 40px !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;
}
.bg-hover-olive:hover {
  background: #6d8764 !important;
}
.bg-active-olive:active {
  background: #6d8764 !important;
}
.bg-focus-olive:focus {
  background: #6d8764 !important;
}
.fg-hover-olive:hover {
  color: #6d8764 !important;
}
.fg-active-olive:active {
  color: #6d8764 !important;
}
.fg-focus-olive:focus {
  color: #6d8764 !important;
}
.fg-steel {
  color: #647687 !important;
}
.bg-steel {
  background-color: #fff !important;
}
.bd-steel {
  border-color: #647687 !important;
}
.ol-steel {
  outline-color: #647687 !important;
}
.op-steel {
  background-color: rgba(100, 118, 135, 0.7);
}
.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: 40px 40px !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;
}
.bg-hover-steel:hover {
  background: #647687 !important;
}
.bg-active-steel:active {
  background: #647687 !important;
}
.bg-focus-steel:focus {
  background: #647687 !important;
}
.fg-hover-steel:hover {
  color: #647687 !important;
}
.fg-active-steel:active {
  color: #647687 !important;
}
.fg-focus-steel:focus {
  color: #647687 !important;
}
.fg-mauve {
  color: #76608a !important;
}
.bg-mauve {
  background-color: #76608a !important;
}
.bd-mauve {
  border-color: #76608a !important;
}
.ol-mauve {
  outline-color: #76608a !important;
}
.op-mauve {
  background-color: rgba(118, 96, 138, 0.7);
}
.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: 40px 40px !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;
}
.bg-hover-mauve:hover {
  background: #76608a !important;
}
.bg-active-mauve:active {
  background: #76608a !important;
}
.bg-focus-mauve:focus {
  background: #76608a !important;
}
.fg-hover-mauve:hover {
  color: #76608a !important;
}
.fg-active-mauve:active {
  color: #76608a !important;
}
.fg-focus-mauve:focus {
  color: #76608a !important;
}
.fg-taupe {
  color: #87794e !important;
}
.bg-taupe {
  background-color: #87794e !important;
}
.bd-taupe {
  border-color: #87794e !important;
}
.ol-taupe {
  outline-color: #87794e !important;
}
.op-taupe {
  background-color: rgba(135, 121, 78, 0.7);
}
.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: 40px 40px !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;
}
.bg-hover-taupe:hover {
  background: #87794e !important;
}
.bg-active-taupe:active {
  background: #87794e !important;
}
.bg-focus-taupe:focus {
  background: #87794e !important;
}
.fg-hover-taupe:hover {
  color: #87794e !important;
}
.fg-active-taupe:active {
  color: #87794e !important;
}
.fg-focus-taupe:focus {
  color: #87794e !important;
}
.fg-dark {
  color: #1d1d1d !important;
}
.bg-dark {
  background-color: #1d1d1d !important;
}
.bd-dark {
  border-color: #1d1d1d !important;
}
.ol-dark {
  outline-color: #1d1d1d !important;
}
.op-dark {
  background-color: rgba(29, 29, 29, 0.7);
}
.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: 40px 40px !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;
}
.bg-hover-dark:hover {
  background: #1d1d1d !important;
}
.bg-active-dark:active {
  background: #1d1d1d !important;
}
.bg-focus-dark:focus {
  background: #1d1d1d !important;
}
.fg-hover-dark:hover {
  color: #1d1d1d !important;
}
.fg-active-dark:active {
  color: #1d1d1d !important;
}
.fg-focus-dark:focus {
  color: #1d1d1d !important;
}
.fg-darkBrown {
  color: #63362f !important;
}
.bg-darkBrown {
  background-color: #63362f !important;
}
.bd-darkBrown {
  border-color: #63362f !important;
}
.ol-darkBrown {
  outline-color: #63362f !important;
}
.op-darkBrown {
  background-color: rgba(99, 54, 47, 0.7);
}
.ribbed-darkBrown {
  background: #63362f 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: 40px 40px !important;
}
.before-bg-darkBrown:before {
  background: #63362f !important;
}
.before-fg-darkBrown:before {
  color: #63362f !important;
}
.after-bg-darkBrown:after {
  background: #63362f !important;
}
.after-fg-darkBrown:after {
  color: #63362f !important;
}
.bg-hover-darkBrown:hover {
  background: #63362f !important;
}
.bg-active-darkBrown:active {
  background: #63362f !important;
}
.bg-focus-darkBrown:focus {
  background: #63362f !important;
}
.fg-hover-darkBrown:hover {
  color: #63362f !important;
}
.fg-active-darkBrown:active {
  color: #63362f !important;
}
.fg-focus-darkBrown:focus {
  color: #63362f !important;
}
.fg-darkCrimson {
  color: #640024 !important;
}
.bg-darkCrimson {
  background-color: #640024 !important;
}
.bd-darkCrimson {
  border-color: #640024 !important;
}
.ol-darkCrimson {
  outline-color: #640024 !important;
}
.op-darkCrimson {
  background-color: rgba(100, 0, 36, 0.7);
}
.ribbed-darkCrimson {
  background: #640024 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: 40px 40px !important;
}
.before-bg-darkCrimson:before {
  background: #640024 !important;
}
.before-fg-darkCrimson:before {
  color: #640024 !important;
}
.after-bg-darkCrimson:after {
  background: #640024 !important;
}
.after-fg-darkCrimson:after {
  color: #640024 !important;
}
.bg-hover-darkCrimson:hover {
  background: #640024 !important;
}
.bg-active-darkCrimson:active {
  background: #640024 !important;
}
.bg-focus-darkCrimson:focus {
  background: #640024 !important;
}
.fg-hover-darkCrimson:hover {
  color: #640024 !important;
}
.fg-active-darkCrimson:active {
  color: #640024 !important;
}
.fg-focus-darkCrimson:focus {
  color: #640024 !important;
}
.fg-darkMagenta {
  color: #81003c !important;
}
.bg-darkMagenta {
  background-color: #81003c !important;
}
.bd-darkMagenta {
  border-color: #81003c !important;
}
.ol-darkMagenta {
  outline-color: #81003c !important;
}
.op-darkMagenta {
  background-color: rgba(129, 0, 60, 0.7);
}
.ribbed-darkMagenta {
  background: #81003c 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: 40px 40px !important;
}
.before-bg-darkMagenta:before {
  background: #81003c !important;
}
.before-fg-darkMagenta:before {
  color: #81003c !important;
}
.after-bg-darkMagenta:after {
  background: #81003c !important;
}
.after-fg-darkMagenta:after {
  color: #81003c !important;
}
.bg-hover-darkMagenta:hover {
  background: #81003c !important;
}
.bg-active-darkMagenta:active {
  background: #81003c !important;
}
.bg-focus-darkMagenta:focus {
  background: #81003c !important;
}
.fg-hover-darkMagenta:hover {
  color: #81003c !important;
}
.fg-active-darkMagenta:active {
  color: #81003c !important;
}
.fg-focus-darkMagenta:focus {
  color: #81003c !important;
}
.fg-darkIndigo {
  color: #4b0096 !important;
}
.bg-darkIndigo {
  background-color: #4b0096 !important;
}
.bd-darkIndigo {
  border-color: #4b0096 !important;
}
.ol-darkIndigo {
  outline-color: #4b0096 !important;
}
.op-darkIndigo {
  background-color: rgba(75, 0, 150, 0.7);
}
.ribbed-darkIndigo {
  background: #4b0096 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: 40px 40px !important;
}
.before-bg-darkIndigo:before {
  background: #4b0096 !important;
}
.before-fg-darkIndigo:before {
  color: #4b0096 !important;
}
.after-bg-darkIndigo:after {
  background: #4b0096 !important;
}
.after-fg-darkIndigo:after {
  color: #4b0096 !important;
}
.bg-hover-darkIndigo:hover {
  background: #4b0096 !important;
}
.bg-active-darkIndigo:active {
  background: #4b0096 !important;
}
.bg-focus-darkIndigo:focus {
  background: #4b0096 !important;
}
.fg-hover-darkIndigo:hover {
  color: #4b0096 !important;
}
.fg-active-darkIndigo:active {
  color: #4b0096 !important;
}
.fg-focus-darkIndigo:focus {
  color: #4b0096 !important;
}
.fg-darkCyan {
  color: #1b6eae !important;
}
.bg-darkCyan {
  background-color: #1b6eae !important;
}
.bd-darkCyan {
  border-color: #1b6eae !important;
}
.ol-darkCyan {
  outline-color: #1b6eae !important;
}
.op-darkCyan {
  background-color: rgba(27, 110, 174, 0.7);
}
.ribbed-darkCyan {
  background: #1b6eae 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: 40px 40px !important;
}
.before-bg-darkCyan:before {
  background: #1b6eae !important;
}
.before-fg-darkCyan:before {
  color: #1b6eae !important;
}
.after-bg-darkCyan:after {
  background: #1b6eae !important;
}
.after-fg-darkCyan:after {
  color: #1b6eae !important;
}
.bg-hover-darkCyan:hover {
  background: #1b6eae !important;
}
.bg-active-darkCyan:active {
  background: #1b6eae !important;
}
.bg-focus-darkCyan:focus {
  background: #1b6eae !important;
}
.fg-hover-darkCyan:hover {
  color: #1b6eae !important;
}
.fg-active-darkCyan:active {
  color: #1b6eae !important;
}
.fg-focus-darkCyan:focus {
  color: #1b6eae !important;
}
.fg-darkCobalt {
  color: #00356a !important;
}
.bg-darkCobalt {
  background-color: #00356a !important;
}
.bd-darkCobalt {
  border-color: #00356a !important;
}
.ol-darkCobalt {
  outline-color: #00356a !important;
}
.op-darkCobalt {
  background-color: rgba(0, 53, 106, 0.7);
}
.ribbed-darkCobalt {
  background: #00356a 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: 40px 40px !important;
}
.before-bg-darkCobalt:before {
  background: #00356a !important;
}
.before-fg-darkCobalt:before {
  color: #00356a !important;
}
.after-bg-darkCobalt:after {
  background: #00356a !important;
}
.after-fg-darkCobalt:after {
  color: #00356a !important;
}
.bg-hover-darkCobalt:hover {
  background: #00356a !important;
}
.bg-active-darkCobalt:active {
  background: #00356a !important;
}
.bg-focus-darkCobalt:focus {
  background: #00356a !important;
}
.fg-hover-darkCobalt:hover {
  color: #00356a !important;
}
.fg-active-darkCobalt:active {
  color: #00356a !important;
}
.fg-focus-darkCobalt:focus {
  color: #00356a !important;
}
.fg-darkTeal {
  color: #004050 !important;
}
.bg-darkTeal {
  background-color: #004050 !important;
}
.bd-darkTeal {
  border-color: #004050 !important;
}
.ol-darkTeal {
  outline-color: #004050 !important;
}
.op-darkTeal {
  background-color: rgba(0, 64, 80, 0.7);
}
.ribbed-darkTeal {
  background: #004050 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: 40px 40px !important;
}
.before-bg-darkTeal:before {
  background: #004050 !important;
}
.before-fg-darkTeal:before {
  color: #004050 !important;
}
.after-bg-darkTeal:after {
  background: #004050 !important;
}
.after-fg-darkTeal:after {
  color: #004050 !important;
}
.bg-hover-darkTeal:hover {
  background: #004050 !important;
}
.bg-active-darkTeal:active {
  background: #004050 !important;
}
.bg-focus-darkTeal:focus {
  background: #004050 !important;
}
.fg-hover-darkTeal:hover {
  color: #004050 !important;
}
.fg-active-darkTeal:active {
  color: #004050 !important;
}
.fg-focus-darkTeal:focus {
  color: #004050 !important;
}
.fg-darkEmerald {
  color: #003e00 !important;
}
.bg-darkEmerald {
  background-color: #003e00 !important;
}
.bd-darkEmerald {
  border-color: #003e00 !important;
}
.ol-darkEmerald {
  outline-color: #003e00 !important;
}
.op-darkEmerald {
  background-color: rgba(0, 62, 0, 0.7);
}
.ribbed-darkEmerald {
  background: #003e00 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: 40px 40px !important;
}
.before-bg-darkEmerald:before {
  background: #003e00 !important;
}
.before-fg-darkEmerald:before {
  color: #003e00 !important;
}
.after-bg-darkEmerald:after {
  background: #003e00 !important;
}
.after-fg-darkEmerald:after {
  color: #003e00 !important;
}
.bg-hover-darkEmerald:hover {
  background: #003e00 !important;
}
.bg-active-darkEmerald:active {
  background: #003e00 !important;
}
.bg-focus-darkEmerald:focus {
  background: #003e00 !important;
}
.fg-hover-darkEmerald:hover {
  color: #003e00 !important;
}
.fg-active-darkEmerald:active {
  color: #003e00 !important;
}
.fg-focus-darkEmerald:focus {
  color: #003e00 !important;
}
.fg-darkGreen {
  color: #128023 !important;
}
.bg-darkGreen {
  background-color: #128023 !important;
}
.bd-darkGreen {
  border-color: #128023 !important;
}
.ol-darkGreen {
  outline-color: #128023 !important;
}
.op-darkGreen {
  background-color: rgba(18, 128, 35, 0.7);
}
.ribbed-darkGreen {
  background: #128023 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: 40px 40px !important;
}
.before-bg-darkGreen:before {
  background: #128023 !important;
}
.before-fg-darkGreen:before {
  color: #128023 !important;
}
.after-bg-darkGreen:after {
  background: #128023 !important;
}
.after-fg-darkGreen:after {
  color: #128023 !important;
}
.bg-hover-darkGreen:hover {
  background: #128023 !important;
}
.bg-active-darkGreen:active {
  background: #128023 !important;
}
.bg-focus-darkGreen:focus {
  background: #128023 !important;
}
.fg-hover-darkGreen:hover {
  color: #128023 !important;
}
.fg-active-darkGreen:active {
  color: #128023 !important;
}
.fg-focus-darkGreen:focus {
  color: #128023 !important;
}
.fg-darkOrange {
  color: #bf5a15 !important;
}
.bg-darkOrange {
  background-color: #bf5a15 !important;
}
.bd-darkOrange {
  border-color: #bf5a15 !important;
}
.ol-darkOrange {
  outline-color: #bf5a15 !important;
}
.op-darkOrange {
  background-color: rgba(191, 90, 21, 0.7);
}
.ribbed-darkOrange {
  background: #bf5a15 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: 40px 40px !important;
}
.before-bg-darkOrange:before {
  background: #bf5a15 !important;
}
.before-fg-darkOrange:before {
  color: #bf5a15 !important;
}
.after-bg-darkOrange:after {
  background: #bf5a15 !important;
}
.after-fg-darkOrange:after {
  color: #bf5a15 !important;
}
.bg-hover-darkOrange:hover {
  background: #bf5a15 !important;
}
.bg-active-darkOrange:active {
  background: #bf5a15 !important;
}
.bg-focus-darkOrange:focus {
  background: #bf5a15 !important;
}
.fg-hover-darkOrange:hover {
  color: #bf5a15 !important;
}
.fg-active-darkOrange:active {
  color: #bf5a15 !important;
}
.fg-focus-darkOrange:focus {
  color: #bf5a15 !important;
}
.fg-darkRed {
  color: #9a1616 !important;
}
.bg-darkRed {
  background-color: #9a1616 !important;
}
.bd-darkRed {
  border-color: #9a1616 !important;
}
.ol-darkRed {
  outline-color: #9a1616 !important;
}
.op-darkRed {
  background-color: rgba(154, 22, 22, 0.7);
}
.ribbed-darkRed {
  background: #9a1616 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: 40px 40px !important;
}
.before-bg-darkRed:before {
  background: #9a1616 !important;
}
.before-fg-darkRed:before {
  color: #9a1616 !important;
}
.after-bg-darkRed:after {
  background: #9a1616 !important;
}
.after-fg-darkRed:after {
  color: #9a1616 !important;
}
.bg-hover-darkRed:hover {
  background: #9a1616 !important;
}
.bg-active-darkRed:active {
  background: #9a1616 !important;
}
.bg-focus-darkRed:focus {
  background: #9a1616 !important;
}
.fg-hover-darkRed:hover {
  color: #9a1616 !important;
}
.fg-active-darkRed:active {
  color: #9a1616 !important;
}
.fg-focus-darkRed:focus {
  color: #9a1616 !important;
}
.fg-darkPink {
  color: #9a165a !important;
}
.bg-darkPink {
  background-color: #9a165a !important;
}
.bd-darkPink {
  border-color: #9a165a !important;
}
.ol-darkPink {
  outline-color: #9a165a !important;
}
.op-darkPink {
  background-color: rgba(154, 22, 90, 0.7);
}
.ribbed-darkPink {
  background: #9a165a 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: 40px 40px !important;
}
.before-bg-darkPink:before {
  background: #9a165a !important;
}
.before-fg-darkPink:before {
  color: #9a165a !important;
}
.after-bg-darkPink:after {
  background: #9a165a !important;
}
.after-fg-darkPink:after {
  color: #9a165a !important;
}
.bg-hover-darkPink:hover {
  background: #9a165a !important;
}
.bg-active-darkPink:active {
  background: #9a165a !important;
}
.bg-focus-darkPink:focus {
  background: #9a165a !important;
}
.fg-hover-darkPink:hover {
  color: #9a165a !important;
}
.fg-active-darkPink:active {
  color: #9a165a !important;
}
.fg-focus-darkPink:focus {
  color: #9a165a !important;
}
.fg-darkViolet {
  color: #57169a !important;
}
.bg-darkViolet {
  background-color: #57169a !important;
}
.bd-darkViolet {
  border-color: #57169a !important;
}
.ol-darkViolet {
  outline-color: #57169a !important;
}
.op-darkViolet {
  background-color: rgba(87, 22, 154, 0.7);
}
.ribbed-darkViolet {
  background: #57169a 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: 40px 40px !important;
}
.before-bg-darkViolet:before {
  background: #57169a !important;
}
.before-fg-darkViolet:before {
  color: #57169a !important;
}
.after-bg-darkViolet:after {
  background: #57169a !important;
}
.after-fg-darkViolet:after {
  color: #57169a !important;
}
.bg-hover-darkViolet:hover {
  background: #57169a !important;
}
.bg-active-darkViolet:active {
  background: #57169a !important;
}
.bg-focus-darkViolet:focus {
  background: #57169a !important;
}
.fg-hover-darkViolet:hover {
  color: #57169a !important;
}
.fg-active-darkViolet:active {
  color: #57169a !important;
}
.fg-focus-darkViolet:focus {
  color: #57169a !important;
}
.fg-darkBlue {
  color: #16499a !important;
}
.bg-darkBlue {
  background-color: #16499a !important;
}
.bd-darkBlue {
  border-color: #16499a !important;
}
.ol-darkBlue {
  outline-color: #16499a !important;
}
.op-darkBlue {
  background-color: rgba(22, 73, 154, 0.7);
}
.ribbed-darkBlue {
  background: #16499a 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: 40px 40px !important;
}
.before-bg-darkBlue:before {
  background: #16499a !important;
}
.before-fg-darkBlue:before {
  color: #16499a !important;
}
.after-bg-darkBlue:after {
  background: #16499a !important;
}
.after-fg-darkBlue:after {
  color: #16499a !important;
}
.bg-hover-darkBlue:hover {
  background: #16499a !important;
}
.bg-active-darkBlue:active {
  background: #16499a !important;
}
.bg-focus-darkBlue:focus {
  background: #16499a !important;
}
.fg-hover-darkBlue:hover {
  color: #16499a !important;
}
.fg-active-darkBlue:active {
  color: #16499a !important;
}
.fg-focus-darkBlue:focus {
  color: #16499a !important;
}
.fg-lightBlue {
  color: #4390df !important;
}
.bg-lightBlue {
  background-color: #4390df !important;
}
.bd-lightBlue {
  border-color: #4390df !important;
}
.ol-lightBlue {
  outline-color: #4390df !important;
}
.op-lightBlue {
  background-color: rgba(67, 144, 223, 0.7);
}
.ribbed-lightBlue {
  background: #4390df 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: 40px 40px !important;
}
.before-bg-lightBlue:before {
  background: #4390df !important;
}
.before-fg-lightBlue:before {
  color: #4390df !important;
}
.after-bg-lightBlue:after {
  background: #4390df !important;
}
.after-fg-lightBlue:after {
  color: #4390df !important;
}
.bg-hover-lightBlue:hover {
  background: #4390df !important;
}
.bg-active-lightBlue:active {
  background: #4390df !important;
}
.bg-focus-lightBlue:focus {
  background: #4390df !important;
}
.fg-hover-lightBlue:hover {
  color: #4390df !important;
}
.fg-active-lightBlue:active {
  color: #4390df !important;
}
.fg-focus-lightBlue:focus {
  color: #4390df !important;
}
.fg-lighterBlue {
  color: #00ccff !important;
}
.bg-lighterBlue {
  background-color: #00ccff !important;
}
.bd-lighterBlue {
  border-color: #00ccff !important;
}
.ol-lighterBlue {
  outline-color: #00ccff !important;
}
.op-lighterBlue {
  background-color: rgba(0, 204, 255, 0.7);
}
.ribbed-lighterBlue {
  background: #00ccff 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: 40px 40px !important;
}
.before-bg-lighterBlue:before {
  background: #00ccff !important;
}
.before-fg-lighterBlue:before {
  color: #00ccff !important;
}
.after-bg-lighterBlue:after {
  background: #00ccff !important;
}
.after-fg-lighterBlue:after {
  color: #00ccff !important;
}
.bg-hover-lighterBlue:hover {
  background: #00ccff !important;
}
.bg-active-lighterBlue:active {
  background: #00ccff !important;
}
.bg-focus-lighterBlue:focus {
  background: #00ccff !important;
}
.fg-hover-lighterBlue:hover {
  color: #00ccff !important;
}
.fg-active-lighterBlue:active {
  color: #00ccff !important;
}
.fg-focus-lighterBlue:focus {
  color: #00ccff !important;
}
.fg-lightTeal {
  color: #45fffd !important;
}
.bg-lightTeal {
  background-color: #45fffd !important;
}
.bd-lightTeal {
  border-color: #45fffd !important;
}
.ol-lightTeal {
  outline-color: #45fffd !important;
}
.op-lightTeal {
  background-color: rgba(69, 255, 253, 0.7);
}
.ribbed-lightTeal {
  background: #45fffd 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: 40px 40px !important;
}
.before-bg-lightTeal:before {
  background: #45fffd !important;
}
.before-fg-lightTeal:before {
  color: #45fffd !important;
}
.after-bg-lightTeal:after {
  background: #45fffd !important;
}
.after-fg-lightTeal:after {
  color: #45fffd !important;
}
.bg-hover-lightTeal:hover {
  background: #45fffd !important;
}
.bg-active-lightTeal:active {
  background: #45fffd !important;
}
.bg-focus-lightTeal:focus {
  background: #45fffd !important;
}
.fg-hover-lightTeal:hover {
  color: #45fffd !important;
}
.fg-active-lightTeal:active {
  color: #45fffd !important;
}
.fg-focus-lightTeal:focus {
  color: #45fffd !important;
}
.fg-lightOlive {
  color: #78aa1c !important;
}
.bg-lightOlive {
  background-color: #78aa1c !important;
}
.bd-lightOlive {
  border-color: #78aa1c !important;
}
.ol-lightOlive {
  outline-color: #78aa1c !important;
}
.op-lightOlive {
  background-color: rgba(120, 170, 28, 0.7);
}
.ribbed-lightOlive {
  background: #78aa1c 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: 40px 40px !important;
}
.before-bg-lightOlive:before {
  background: #78aa1c !important;
}
.before-fg-lightOlive:before {
  color: #78aa1c !important;
}
.after-bg-lightOlive:after {
  background: #78aa1c !important;
}
.after-fg-lightOlive:after {
  color: #78aa1c !important;
}
.bg-hover-lightOlive:hover {
  background: #78aa1c !important;
}
.bg-active-lightOlive:active {
  background: #78aa1c !important;
}
.bg-focus-lightOlive:focus {
  background: #78aa1c !important;
}
.fg-hover-lightOlive:hover {
  color: #78aa1c !important;
}
.fg-active-lightOlive:active {
  color: #78aa1c !important;
}
.fg-focus-lightOlive:focus {
  color: #78aa1c !important;
}
.fg-lightOrange {
  color: #ffc194 !important;
}
.bg-lightOrange {
  background-color: #ffc194 !important;
}
.bd-lightOrange {
  border-color: #ffc194 !important;
}
.ol-lightOrange {
  outline-color: #ffc194 !important;
}
.op-lightOrange {
  background-color: rgba(255, 193, 148, 0.7);
}
.ribbed-lightOrange {
  background: #ffc194 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: 40px 40px !important;
}
.before-bg-lightOrange:before {
  background: #ffc194 !important;
}
.before-fg-lightOrange:before {
  color: #ffc194 !important;
}
.after-bg-lightOrange:after {
  background: #ffc194 !important;
}
.after-fg-lightOrange:after {
  color: #ffc194 !important;
}
.bg-hover-lightOrange:hover {
  background: #ffc194 !important;
}
.bg-active-lightOrange:active {
  background: #ffc194 !important;
}
.bg-focus-lightOrange:focus {
  background: #ffc194 !important;
}
.fg-hover-lightOrange:hover {
  color: #ffc194 !important;
}
.fg-active-lightOrange:active {
  color: #ffc194 !important;
}
.fg-focus-lightOrange:focus {
  color: #ffc194 !important;
}
.fg-lightPink {
  color: #f472d0 !important;
}
.bg-lightPink {
  background-color: #f472d0 !important;
}
.bd-lightPink {
  border-color: #f472d0 !important;
}
.ol-lightPink {
  outline-color: #f472d0 !important;
}
.op-lightPink {
  background-color: rgba(244, 114, 208, 0.7);
}
.ribbed-lightPink {
  background: #f472d0 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: 40px 40px !important;
}
.before-bg-lightPink:before {
  background: #f472d0 !important;
}
.before-fg-lightPink:before {
  color: #f472d0 !important;
}
.after-bg-lightPink:after {
  background: #f472d0 !important;
}
.after-fg-lightPink:after {
  color: #f472d0 !important;
}
.bg-hover-lightPink:hover {
  background: #f472d0 !important;
}
.bg-active-lightPink:active {
  background: #f472d0 !important;
}
.bg-focus-lightPink:focus {
  background: #f472d0 !important;
}
.fg-hover-lightPink:hover {
  color: #f472d0 !important;
}
.fg-active-lightPink:active {
  color: #f472d0 !important;
}
.fg-focus-lightPink:focus {
  color: #f472d0 !important;
}
.fg-lightRed {
  color: #da5a53 !important;
}
.bg-lightRed {
  background-color: #da5a53 !important;
}
/*.fg-black {
  color: #000 !important;
}*/
.bd-lightRed {
  border-color: #da5a53 !important;
}
.ol-lightRed {
  outline-color: #da5a53 !important;
}
.op-lightRed {
  background-color: rgba(218, 90, 83, 0.7);
}
.ribbed-lightRed {
  background: #da5a53 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: 40px 40px !important;
}
.before-bg-lightRed:before {
  background: #da5a53 !important;
}
.before-fg-lightRed:before {
  color: #da5a53 !important;
}
.after-bg-lightRed:after {
  background: #da5a53 !important;
}
.after-fg-lightRed:after {
  color: #da5a53 !important;
}
.bg-hover-lightRed:hover {
  background: #da5a53 !important;
}
.bg-active-lightRed:active {
  background: #da5a53 !important;
}
.bg-focus-lightRed:focus {
  background: #da5a53 !important;
}
.fg-hover-lightRed:hover {
  color: #da5a53 !important;
}
.fg-active-lightRed:active {
  color: #da5a53 !important;
}
.fg-focus-lightRed:focus {
  color: #da5a53 !important;
}
.fg-lightGreen {
  color: #7ad61d !important;
}
.fg-disabled{
  color: #d1cfcf !important;
}
.bg-lightGreen {
  background-color: #7ad61d !important;
}
.bd-lightGreen {
  border-color: #7ad61d !important;
}
.ol-lightGreen {
  outline-color: #7ad61d !important;
}
.op-lightGreen {
  background-color: rgba(122, 214, 29, 0.7);
}
.ribbed-lightGreen {
  background: #7ad61d 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: 40px 40px !important;
}
.before-bg-lightGreen:before {
  background: #7ad61d !important;
}
.before-fg-lightGreen:before {
  color: #7ad61d !important;
}
.after-bg-lightGreen:after {
  background: #7ad61d !important;
}
.after-fg-lightGreen:after {
  color: #7ad61d !important;
}
.bg-hover-lightGreen:hover {
  background: #7ad61d !important;
}
.bg-active-lightGreen:active {
  background: #7ad61d !important;
}
.bg-focus-lightGreen:focus {
  background: #7ad61d !important;
}
.fg-hover-lightGreen:hover {
  color: #7ad61d !important;
}
.fg-active-lightGreen:active {
  color: #7ad61d !important;
}
.fg-focus-lightGreen:focus {
  color: #7ad61d !important;
}
.fg-lightCyan {
  color: #59cde2 !important;
}
.bg-lightCyan {
  background-color: #59cde2 !important;
}
.bd-lightCyan {
  border-color: #59cde2 !important;
}
.ol-lightCyan {
  outline-color: #59cde2 !important;
}
.op-lightCyan {
  background-color: rgba(89, 205, 226, 0.7);
}
.ribbed-lightCyan {
  background: #59cde2 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: 40px 40px !important;
}
.before-bg-lightCyan:before {
  background: #59cde2 !important;
}
.before-fg-lightCyan:before {
  color: #59cde2 !important;
}
.after-bg-lightCyan:after {
  background: #59cde2 !important;
}
.after-fg-lightCyan:after {
  color: #59cde2 !important;
}
.bg-hover-lightCyan:hover {
  background: #59cde2 !important;
}
.bg-active-lightCyan:active {
  background: #59cde2 !important;
}
.bg-focus-lightCyan:focus {
  background: #59cde2 !important;
}
.fg-hover-lightCyan:hover {
  color: #59cde2 !important;
}
.fg-active-lightCyan:active {
  color: #59cde2 !important;
}
.fg-focus-lightCyan:focus {
  color: #59cde2 !important;
}
.fg-grayed {
  color: #585858 !important;
}
.bg-grayed {
  background-color: #585858 !important;
}
.bd-grayed {
  border-color: #585858 !important;
}
.ol-grayed {
  outline-color: #585858 !important;
}
.op-grayed {
  background-color: rgba(88, 88, 88, 0.7);
}
.ribbed-grayed {
  background: #585858 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: 40px 40px !important;
}
.before-bg-grayed:before {
  background: #585858 !important;
}
.before-fg-grayed:before {
  color: #585858 !important;
}
.after-bg-grayed:after {
  background: #585858 !important;
}
.after-fg-grayed:after {
  color: #585858 !important;
}
.bg-hover-grayed:hover {
  background: #585858 !important;
}
.bg-active-grayed:active {
  background: #585858 !important;
}
.bg-focus-grayed:focus {
  background: #585858 !important;
}
.fg-hover-grayed:hover {
  color: #585858 !important;
}
.fg-active-grayed:active {
  color: #585858 !important;
}
.fg-focus-grayed:focus {
  color: #585858 !important;
}
.fg-grayDarker {
  color: #222222 !important;
}
.bg-grayDarker {
  background-color: #222222 !important;
}
.bd-grayDarker {
  border-color: #222222 !important;
}
.ol-grayDarker {
  outline-color: #222222 !important;
}
.op-grayDarker {
  background-color: rgba(34, 34, 34, 0.7);
}
.ribbed-grayDarker {
  background: #222222 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: 40px 40px !important;
}
.before-bg-grayDarker:before {
  background: #222222 !important;
}
.before-fg-grayDarker:before {
  color: #222222 !important;
}
.after-bg-grayDarker:after {
  background: #222222 !important;
}
.after-fg-grayDarker:after {
  color: #222222 !important;
}
.bg-hover-grayDarker:hover {
  background: #222222 !important;
}
.bg-active-grayDarker:active {
  background: #222222 !important;
}
.bg-focus-grayDarker:focus {
  background: #222222 !important;
}
.fg-hover-grayDarker:hover {
  color: #222222 !important;
}
.fg-active-grayDarker:active {
  color: #222222 !important;
}
.fg-focus-grayDarker:focus {
  color: #222222 !important;
}
.fg-grayDark {
  color: #333333 !important;
}
.bg-grayDark {
  background-color: #333333 !important;
}
.bd-grayDark {
  border-color: #333333 !important;
}
.ol-grayDark {
  outline-color: #333333 !important;
}
.op-grayDark {
  background-color: rgba(51, 51, 51, 0.7);
}
.ribbed-grayDark {
  background: #333333 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: 40px 40px !important;
}
.before-bg-grayDark:before {
  background: #333333 !important;
}
.before-fg-grayDark:before {
  color: #333333 !important;
}
.after-bg-grayDark:after {
  background: #333333 !important;
}
.after-fg-grayDark:after {
  color: #333333 !important;
}
.bg-hover-grayDark:hover {
  background: #333333 !important;
}
.bg-active-grayDark:active {
  background: #333333 !important;
}
.bg-focus-grayDark:focus {
  background: #333333 !important;
}
.fg-hover-grayDark:hover {
  color: #333333 !important;
}
.fg-active-grayDark:active {
  color: #333333 !important;
}
.fg-focus-grayDark:focus {
  color: #333333 !important;
}
.fg-gray10 {
  color: #cfcfcf !important;
}
.fg-gray10:hover {
 color: #cfcfcf !important;
}
.fg-gray20:hover {
 color: #7d7d7d !important;
}
.fg-positive-value, .fg-positive-value:hover {
 color: #649346 !important;
}

.fg-gray {
  color: #515151;
}
.fg-gray:hover {
  color: #000000;
}
.fg-gray.disabled {
  color: #8d8d8d !important;
}
.fg-gray30 {
  color: #9f9e9e !important;
}
.fg-gray30:hover {
  color: #616161 !important;
}
.fg-gray30.disabled {
  color: #e0e0e0 !important;
}
.fg-gray1{
    color:#424242 !important;
}
.fg-gray2{
    color: #5e5e5e !important;
}
.bg-gray {
  background-color: #555555 !important;
}
.bg-gray10 {
  background-color: #f5f5f5 !important;
}
.bd-gray {
  border-color: #555555 !important;
}
.ol-gray {
  outline-color: #555555 !important;
}
#ribbon-icons .fg-gray10:hover{ color:#cfcfcf !important}
#ribbon-icons .fg-green:hover{color:#c2cd60 !important}
#ribbon-icons .fg-pink:hover{color:#dc4fad !important}
.op-gray {
  background-color: rgba(85, 85, 85, 0.7);
}
.ribbed-gray {
  background: #555555 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: 40px 40px !important;
}
.before-bg-gray:before {
  background: #555555 !important;
}
.before-fg-gray:before {
  color: #555555 !important;
}
.after-bg-gray:after {
  background: #555555 !important;
}
.after-fg-gray:after {
  color: #555555 !important;
}
.bg-hover-gray:hover {
  background: #555555 !important;
}
.bg-active-gray:active {
  background: #555555 !important;
}
.bg-focus-gray:focus {
  background: #555555 !important;
}
.fg-hover-gray:hover {
  color: #555555 !important;
}
.fg-active-gray:active {
  color: #555555 !important;
}
.fg-focus-gray:focus {
  color: #555555 !important;
}
/*.fg-grayLight {
  color: #d5d5d5 !important;
}*/
.bg-grayLight {
  background-color: #999999 !important;
}
.bd-grayLight {
  border-color: #999999 !important;
}
.ol-grayLight {
  outline-color: #999999 !important;
}
.op-grayLight {
  background-color: rgba(153, 153, 153, 0.7);
}
.ribbed-grayLight {
  background: #999999 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: 40px 40px !important;
}
.before-bg-grayLight:before {
  background: #999999 !important;
}
.before-fg-grayLight:before {
  color: #999999 !important;
}
.after-bg-grayLight:after {
  background: #999999 !important;
}
.after-fg-grayLight:after {
  color: #999999 !important;
}
.bg-hover-grayLight:hover {
  background: #999999 !important;
}
.bg-active-grayLight:active {
  background: #999999 !important;
}
.bg-focus-grayLight:focus {
  background: #999999 !important;
}
.fg-hover-grayLight:hover {
  color: #999999 !important;
}
.fg-active-grayLight:active {
  color: #999999 !important;
}
.fg-focus-grayLight:focus {
  color: #999999 !important;
}
.fg-grayLighter {
  color: #eeeeee !important;
}
.bg-grayLighter {
  background-color: #eeeeee !important;
}
.bd-grayLighter {
  border-color: #eeeeee !important;
}
.ol-grayLighter {
  outline-color: #eeeeee !important;
}
.op-grayLighter {
  background-color: rgba(238, 238, 238, 0.7);
}
.ribbed-grayLighter {
  background: #eeeeee 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: 40px 40px !important;
}
.before-bg-grayLighter:before {
  background: #eeeeee !important;
}
.before-fg-grayLighter:before {
  color: #eeeeee !important;
}
.after-bg-grayLighter:after {
  background: #eeeeee !important;
}
.after-fg-grayLighter:after {
  color: #eeeeee !important;
}
.bg-hover-grayLighter:hover {
  background: #eeeeee !important;
}
.bg-active-grayLighter:active {
  background: #eeeeee !important;
}
.bg-focus-grayLighter:focus {
  background: #eeeeee !important;
}
.fg-hover-grayLighter:hover {
  color: #eeeeee !important;
}
.fg-active-grayLighter:active {
  color: #eeeeee !important;
}
.fg-focus-grayLighter:focus {
  color: #eeeeee !important;
}
.fg-lightGray {
  color: #999999 !important;
}
.bg-lightGray {
  background-color: #999999 !important;
}
.bd-lightGray {
  border-color: #999999 !important;
}
.ol-lightGray {
  outline-color: #999999 !important;
}
.op-lightGray {
  background-color: rgba(153, 153, 153, 0.7);
}
.ribbed-lightGray {
  background: #999999 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: 40px 40px !important;
}
.before-bg-lightGray:before {
  background: #999999 !important;
}
.before-fg-lightGray:before {
  color: #999999 !important;
}
.after-bg-lightGray:after {
  background: #999999 !important;
}
.after-fg-lightGray:after {
  color: #999999 !important;
}
.bg-hover-lightGray:hover {
  background: #999999 !important;
}
.bg-active-lightGray:active {
  background: #999999 !important;
}
.bg-focus-lightGray:focus {
  background: #999999 !important;
}
.fg-hover-lightGray:hover {
  color: #999999 !important;
}
.fg-active-lightGray:active {
  color: #999999 !important;
}
.fg-focus-lightGray:focus {
  color: #999999 !important;
}
.fg-lighterGray {
  color: #eeeeee !important;
}
.bg-lighterGray {
  background-color: #eeeeee !important;
}
.bd-lighterGray {
  border-color: #eeeeee !important;
}
.ol-lighterGray {
  outline-color: #eeeeee !important;
}
.op-lighterGray {
  background-color: rgba(238, 238, 238, 0.7);
}
.ribbed-lighterGray {
  background: #eeeeee 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: 40px 40px !important;
}
.before-bg-lighterGray:before {
  background: #eeeeee !important;
}
.before-fg-lighterGray:before {
  color: #eeeeee !important;
}
.after-bg-lighterGray:after {
  background: #eeeeee !important;
}
.after-fg-lighterGray:after {
  color: #eeeeee !important;
}
.bg-hover-lighterGray:hover {
  background: #eeeeee !important;
}
.bg-active-lighterGray:active {
  background: #eeeeee !important;
}
.bg-focus-lighterGray:focus {
  background: #eeeeee !important;
}
.fg-hover-lighterGray:hover {
  color: #eeeeee !important;
}
.fg-active-lighterGray:active {
  color: #eeeeee !important;
}
.fg-focus-lighterGray:focus {
  color: #eeeeee !important;
}
.fg-darkGray {
  color: #333333 !important;
}
.bg-darkGray {
  background-color: #333333 !important;
}
.bd-darkGray {
  border-color: #333333 !important;
}
.ol-darkGray {
  outline-color: #333333 !important;
}
.op-darkGray {
  background-color: rgba(51, 51, 51, 0.7);
}
.ribbed-darkGray {
  background: #333333 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: 40px 40px !important;
}
.before-bg-darkGray:before {
  background: #333333 !important;
}
.before-fg-darkGray:before {
  color: #333333 !important;
}
.after-bg-darkGray:after {
  background: #333333 !important;
}
.after-fg-darkGray:after {
  color: #333333 !important;
}
.bg-hover-darkGray:hover {
  background: #333333 !important;
}
.bg-active-darkGray:active {
  background: #333333 !important;
}
.bg-focus-darkGray:focus {
  background: #333333 !important;
}
.fg-hover-darkGray:hover {
  color: #333333 !important;
}
.fg-active-darkGray:active {
  color: #333333 !important;
}
.fg-focus-darkGray:focus {
  color: #333333 !important;
}
.fg-darkerGray {
  color: #222222 !important;
}
.bg-darkerGray {
  background-color: #222222 !important;
}
.bd-darkerGray {
  border-color: #222222 !important;
}
.ol-darkerGray {
  outline-color: #222222 !important;
}
.op-darkerGray {
  background-color: rgba(34, 34, 34, 0.7);
}
.ribbed-darkerGray {
  background: #222222 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: 40px 40px !important;
}
.before-bg-darkerGray:before {
  background: #222222 !important;
}
.before-fg-darkerGray:before {
  color: #222222 !important;
}
.after-bg-darkerGray:after {
  background: #222222 !important;
}
.after-fg-darkerGray:after {
  color: #222222 !important;
}
.bg-hover-darkerGray:hover {
  background: #222222 !important;
}
.bg-active-darkerGray:active {
  background: #222222 !important;
}
.bg-focus-darkerGray:focus {
  background: #222222 !important;
}
.fg-hover-darkerGray:hover {
  color: #222222 !important;
}
.fg-active-darkerGray:active {
  color: #222222 !important;
}
.fg-focus-darkerGray:focus {
  color: #222222 !important;
}
.fg-darker {
  color: #222222 !important;
}
.bg-darker {
  background-color: #222222 !important;
}
.bd-darker {
  border-color: #222222 !important;
}
.ol-darker {
  outline-color: #222222 !important;
}
.op-darker {
  background-color: rgba(34, 34, 34, 0.7);
}
.ribbed-darker {
  background: #222222 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: 40px 40px !important;
}
.before-bg-darker:before {
  background: #222222 !important;
}
.before-fg-darker:before {
  color: #222222 !important;
}
.after-bg-darker:after {
  background: #222222 !important;
}
.after-fg-darker:after {
  color: #222222 !important;
}
.bg-hover-darker:hover {
  background: #222222 !important;
}
.bg-active-darker:active {
  background: #222222 !important;
}
.bg-focus-darker:focus {
  background: #222222 !important;
}
.fg-hover-darker:hover {
  color: #222222 !important;
}
.fg-active-darker:active {
  color: #222222 !important;
}
.fg-focus-darker:focus {
  color: #222222 !important;
}
.dropdown-toggle {
  position: relative;
  cursor: pointer;
}
.dropdown-toggle:before {
  display: block;
  position: absolute;
  vertical-align: middle;
  color: transparent;
  font-size: 0;
  content: "";
  height: 7px;
  width: 7px;
  background-color: transparent;
  border-left: 2px solid;
  border-bottom: 2px solid;
  border-color: #1d1d1d;
  top: 48%;
  left: 102%;
  margin-left: -1rem;
  margin-top: -0.1625rem;
  z-index: 2;
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
		  
}
.dropdown-toggle.drop-marker-light:before {
  border-color: #ffffff;
}
*.dropdown-toggle {
  padding-right: 1.625rem;
}
.flush-list {
  padding: 0;
  margin: 0;
  list-style: none inside none;
}
.shadow {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.35);
}
.before-shadow:before {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.35);
}
.after-shadow:after {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.35);
}
.block-shadow {
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.3);
}
.block-shadow-success {
  box-shadow: 0 0 25px 0 rgba(0, 128, 0, 0.7);
}
.block-shadow-error {
  box-shadow: 0 0 25px 0 rgba(128, 0, 0, 0.7);
}
.block-shadow-danger {
  box-shadow: 0 0 25px 0 rgba(128, 0, 0, 0.7);
}
.block-shadow-warning {
  box-shadow: 0 0 25px 0 rgba(255, 165, 0, 0.7);
}
.block-shadow-info {
  box-shadow: 0 0 25px 0 rgba(89, 205, 226, 0.7);
}
.block-shadow-impact {
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2);
}
.bottom-shadow {
  box-shadow: -1px 6px 6px -6px rgba(0, 0, 0, 0.35);
}
.text-shadow {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
}
.before-text-shadow:before {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
}
.after-text-shadow:after {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
}
.no-shadow {
  box-shadow: none !important;
}
.full-size {
  width: 100% !important;
}
.block {
  display: block !important;
}
.inline-block {
  display: inline-block !important;
}
.no-display {
  display: none !important;
}
.no-margin {
  margin: 0 !important;
}
.no-margin-right {
  margin-right: 0 !important;
}
.no-margin-left {
  margin-left: 0 !important;
}
.no-margin-top {
  margin-top: 0 !important;
}
.no-margin-bottom {
  margin-bottom: 0 !important;
}
.no-padding {
  padding: 0 !important;
}
.no-padding-left {
  padding-left: 0 !important;
}
.no-padding-right {
  padding-right: 0 !important;
}
.no-padding-top {
  padding-top: 0 !important;
}
.no-padding-bottom {
  padding-bottom: 0 !important;
}
.no-float {
  float: none !important;
}
.no-visible {
  visibility: hidden !important;
}
.no-border {
  border: 0 !important;
}
.no-overflow {
  overflow: hidden !important;
}
.no-scroll {
  overflow: hidden !important;
}
.no-scroll-x {
  overflow-x: hidden !important;
}
.no-scroll-y {
  overflow-y: hidden !important;
}
.no-wrap {
  white-space: nowrap !important;
}
.no-border-left {
  border-left: none !important;
}
.no-border-right {
  border-right: none !important;
}
.no-border-top {
  border-top: none !important;
}
.no-border-bottom {
  border-bottom: none !important;
}
.transparent-border {
  border-color: transparent !important;
}
.place-right {
  float: right !important;
}
.place-left {
  float: left !important;
}
.clear-float:before,
.clear-float:after {
  display: table;
  content: "";
}
.clear-float:after {
  clear: both;
}
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}
.no-user-select {
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
.no-appearance {
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
}
.debug {
  border: 1px dashed red;
}
.example {
  padding: .625rem 1.825rem .625rem 2.5rem;
  border: 1px #ccc dashed;
  position: relative;
  margin: 0 0 .625rem 0;
  background-color: #ffffff;
}
.example:before,
.example:after {
  display: table;
  content: "";
}
.example:after {
  clear: both;
}
.example:before {
  position: absolute;
  content: attr(data-text);
  text-transform: lowercase;
  left: 1.5rem;
  top: 11.875rem;
  color: gray;
  display: block;
  font-size: 1rem;
  line-height: 1rem;
  height: 1rem;
  text-align: right;
  white-space: nowrap;
  direction: ltr;
  width: 12.5rem;
  -webkit-transform: rotate(-90deg);
          transform: rotate(-90deg);
  -webkit-transform-origin: 0 100%;
          transform-origin: 0 100%;
}
.video-container {
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 30px;
  height: 0;
  overflow: hidden;
}
.video-container iframe,
.video-container object,
.video-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.paddingR2 {
  padding-right: 2px;
}
.padding-R1{padding-right: 1px;}
.pad15{ padding:0.9375rem;}
.pad10{ padding:0.635rem;}
.paddingT0{ padding-top:0px;}
.padding10 {
  padding: 0.625rem;
}
.padding20 {
  padding: 1.25rem;
}
.padding30 {
  padding: 1.875rem;
}
.padding40 {
  padding: 2.5rem;
}
.padding50 {
  padding: 3.125rem;
}
.padding60 {
  padding: 3.75rem;
}
.padding70 {
  padding: 4.375rem;
}
.padding80 {
  padding: 5rem;
}
.padding90 {
  padding: 5.625rem;
}
.padding100 {
  padding: 6.25rem;
}
.padding5 {
  padding: 0.325rem;
}
.padding0{ padding:0px;}

.margin0 {
  margin:0px !important;
}
.margin5 {
  margin: 5px;
}
.margin10 {
  margin: 0.625rem;
}
.marginTB10 {
  margin: 0.625rem 0;
}
.marginT18 { margin-top:1.125rem;}
.marLR10 { margin-left:0.625rem; margin-right:0.625rem;}
.margin20 {
  margin: 1.25rem;
}
.margin30 {
  margin: 1.875rem;
}
.margin40 {
  margin: 2.5rem;
}
.margin50 {
  margin: 3.125rem;
}
.margin60 {
  margin: 3.75rem;
}
.margin70 {
  margin: 4.375rem;
}
.margin80 {
  margin: 5rem;
}
.margin90 {
  margin: 5.625rem;
}
.margin100 {
  margin: 6.25rem;
}
/*.opacity {
  opacity: .9;
}*/
.half-opacity {
  opacity: .5;
}
.hi-opacity {
  opacity: .2;
}
.element-selected {
  border: 4px #4390df solid;
}
.element-selected:after {
  position: absolute;
  display: block;
  border-top: 28px solid #4390df;
  border-left: 28px solid transparent;
  right: 0;
  content: "";
  top: 0;
  z-index: 101;
}
.element-selected:before {
  position: absolute;
  display: block;
  content: "";
  background-color: transparent;
  border-color: #ffffff;
  border-left: 2px solid;
  border-bottom: 2px solid;
  height: .25rem;
  width: .5rem;
  right: 0;
  top: 0;
  z-index: 102;
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
}
/* Block function */
.set-border {
  border: 1px #d9d9d9 solid;
}
.set-border.medium-border {
  border-width: 8px;
}
.set-border.large-border {
  border-width: 16px;
}


.app-bar .app-bar-menu > li > a.icon{ padding:0 0.50rem;}
.app-bar .app-bar-menu > li{ margin:0px 0.2rem; }
.font11{
font-size:0.6875rem !important;
}
.font12{
font-size:0.75rem;
}
.font13{
font-size:0.8125rem;
}
.font14{
font-size:0.875rem !important;
} 
.font15{
font-size:0.9375rem !important;
}
.font16{
font-size:1rem !important;
}
.font17{
font-size:1.0625rem !important;
}
.font18{
font-size:1.125rem !important;
}
.font19{
    font-size:1.1875rem !important;
}
.font20{
font-size:1.25rem !important;
}
.font21{
font-size:1.3125rem;
}
.font22{
font-size:1.375rem;
}
.font23{
font-size:1.4375rem;
}
.font24{
font-size:1.5rem !important;
}
.font25{
font-size:1.5625rem !important;
}
.font26{
font-size:1.625rem;
}
.font27{
font-size:1.6875rem !IMPORTANT;
}
.font28{
font-size:1.75rem;
}
.font29{
font-size:1.8125rem;
}
.font30{
font-size:1.875rem !important;
}
.font32{
font-size:2rem !important;
}
.font40{
font-size:2.5rem;
}
.font41{
font-size:2.5625rem;
}
.font42{
font-size:2.625rem;
}
.font43{
font-size:2.6875rem;
}
.font44{
font-size:2.75rem;
}
.font45{
font-size:2.8125rem;
}
.font53{
	font-size:3.3125rem;
}
.font54{
	font-size:3.375rem;
}
.font55{
    font-size:3.4375rem;
}
.font56{
    font-size:3.5rem;
}
.font57{
	font-size:3.5625rem;	
}
.font58{
	font-size:3.625rem;	
}
.font70{
	font-size:4.375rem;	
}
.font120{
	font-size:7.5rem;	
}
.font150{
	font-size:9.375rem;	
}
/*HasmukhM: Added below css to make all encounter elements responsive*/ 
.customizedFont .font11{
   font-size:11px !important;
}
.customizedFont .font12{
   font-size:12px !important;
}
.customizedFont .font13{
   font-size:13px !important;
}
.customizedFont .font14{
   font-size:14px !important;
}
.customizedFont .font15{
   font-size:15px !important;
}
.customizedFont .font16{
   font-size:16px !important;
}
.customizedFont .font17{
   font-size:17px !important;
}
.customizedFont .font18{
   font-size:18px !important;
}
.customizedFont .font19{
   font-size:19px !important;
}
.customizedFont .font20{
   font-size:20px !important;
}
.customizedFont .font21{
   font-size:21px !important;
}
.customizedFont .font22{
   font-size:22px !important;
}
.customizedFont .font23{
   font-size:23px !important;
}
.customizedFont .font24{
   font-size:24px !important;
}
.customizedFont .font25{
   font-size:25px !important;
}
.customizedFont .font26{
   font-size:26px !important;
}
.customizedFont .font27{
   font-size:27px !important;
}
.customizedFont .font28{
   font-size:28px !important;
}
.customizedFont .font29{
   font-size:29px !important;
}
.customizedFont .font30{
   font-size:30px !important;
}
.customizedFont .font31{
   font-size:31px !important;
}
.customizedFont .font32{
   font-size:32px !important;
}
.customizedFont .font33{
   font-size:33px !important;
}
.customizedFont .font34{
   font-size:34px !important;
}
.customizedFont .font35{
   font-size:35px !important;
}
.customizedFont .font36{
   font-size:36px !important;
}
.customizedFont .font37{
   font-size:37px !important;
}
.customizedFont .font38{
   font-size:38px !important;
}
.customizedFont .font39{
   font-size:39px !important;
}
.customizedFont .font40{
   font-size:40px !important;
}
.customizedFont .font41{
   font-size:41px !important;
}
.customizedFont .font42{
   font-size:42px !important;
}
.customizedFont .font43{
   font-size:43px !important;
}
.customizedFont .font44{
   font-size:44px !important;
}
.customizedFont .font45{
   font-size:45px !important;
}
/*End changes- HasmukhM*/




/*@media (min-width: 1024px) and (max-width:1279px) 	
{
  .font14 {
font-size:0.9375rem;
}
	
}
@media (min-width:1280px) and (max-width:1365px) 		
{
.font14{
font-size:1.0rem;
}
	
}
@media (min-width: 1366px) and (max-width:1919px) 		
{
 .font14{
font-size:1.0625rem;
}
	
}
@media (min-width: 1920px)		
{
    .font14 {
			font-size:1.2rem;
		}
	
}*/ 


.marL20{ margin-left:1.25rem !important;}
.marL40{ margin-left:2.50rem !important;}
.marR20{ margin-right:1.25rem !important;}
.marL10{ margin-left:0.625rem;}
ul.secondary-icons{ float:left; display:inline-block; margin:0px; padding-left:0px;}
ul.secondary-icons li{ float:left; list-style:none; text-align:center; margin:0px; line-height:1.8125rem;}

ul.secondary-icons li span:hover{ color:#42aaff;}
ul.secondary-icons li span.nohover:hover{ color:inherit;}
ul.secondary-icons li span.fg-gray10:hover, ul.secondary-icons li span.fg-green:hover, ul.secondary-icons li span.fg-pink:hover{ color:inherit;}
ul.secondary-icons li.div{ padding:0 0.2rem; width:inherit;}
ul.secondary-icons li.wid20{ width:1.25rem;}
ul.secondary-icons li.wid30{ width:1.8rem !important;}
ul.secondary-icons li.wid64{ width:4rem;}
ul.secondary-icons li.wid48{ width:3rem;}
ul.secondary-icons li.wid40{ width:3rem;}
ul.secondary-icons li.wid74{ width:5rem;}

.mif-unlink:before {
  content: "\f127";
}
.head-icon-shadow{text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.25);}
.mif-back:before {content: "\e600";}
.mif-forth:before {content: "\e601";}
.mif-copy:before {content: "\e603";}
.mif-home:before {content: "\e604";}
.mif-search:before {
  content: "\e605";
}
.mif-cog:before {content: "\e606";}
.mif-help:before {content: "\e607";}
.mif-efile:before {content: "\e608";}
.mif-auth:before {content: "\e609";}
.mif-circle-check:before {content: "\e609";}
.mif-circle-check-inv:before {content: "\e637";}
.mif-3d:before {content: "\e610";}
.mif-c2:before {content: "\e611";}
.mif-em:before {content: "\e612";}
.mif-eRx:before {content: "\e613";}
.mif-divider:before{content:"|"}
.mif-imageviewer:before {content: "\e614";}
.mif-eye:before {content: "\e615";}
.mif-encounter-imageimport:before {content: "\e616";}
.mif-encounter-insert:before {content: "\e617";}
.mif-encounter-transfer:before {content: "\e618";}
.mif-encounter-signature:before {content: "\e619";}
.mif-encounter-play:before {content: "\e620";}
.mif-encounter-mail-lock:before {content: "\e621";}
.mif-create-task:before {
  content: "\e622";
}
.mif-lock:before {content: "\e684";}
.mif-unlock:before {content: "\e623";}
.mif-chat:before {
  content: "\e624";
}
.mif-circle-plus:before {
  content: "\e661";
}
.mif-copy-to:before {
  content: "\e626";
}
.mif-copy-od-os:before {
  content: "\e627";
}
.mif-copy-previous:before {
  content: "\e628";
}
.mif-clear:before {
  content: "\e629";
}
.mif-calender:before {
  content: "\e630";  
}
.mif-normal-value:before {content: "\e631";}
.mif-remove:before {
  content: "\e632";
}
.mif-disabled:before {content: "\e633";}
.mif-bell:before {content: "\e634";}
.mif-graph:before {content: "\e635";}
.mif-EST:before{content: "\e636"; border-radius:50%; background: rgba(0,0,0,1);
background: -moz-radial-gradient(center, ellipse cover, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 55%, rgba(255,255,255,1) 58%, rgba(255,255,255,1) 68%, rgba(255,255,255,1) 100%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(0,0,0,1)), color-stop(55%, rgba(0,0,0,1)), color-stop(58%, rgba(255,255,255,1)), color-stop(68%, rgba(255,255,255,1)), color-stop(100%, rgba(255,255,255,1)));
background: -webkit-radial-gradient(center, ellipse cover, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 55%, rgba(255,255,255,1) 58%, rgba(255,255,255,1) 68%, rgba(255,255,255,1) 100%);
background: -o-radial-gradient(center, ellipse cover, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 55%, rgba(255,255,255,1) 58%, rgba(255,255,255,1) 68%, rgba(255,255,255,1) 100%);
background: -ms-radial-gradient(center, ellipse cover, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 55%, rgba(255,255,255,1) 58%, rgba(255,255,255,1) 68%, rgba(255,255,255,1) 100%);
background: radial-gradient(ellipse at center, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 55%, rgba(255,255,255,1) 58%, rgba(255,255,255,1) 68%, rgba(255,255,255,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#ffffff', GradientType=1 );}
.mif-EST:before:hover{background-color:#000; border-radius:50%;}

.mif-menu-drawer:before {content: "\e638";}
.mif-history:before {content: "\e639";}
.elem-hist-btn:before {font-family: metro, serif;content: "\e639";}
.normal-elm-btn:before {font-family: metro, serif;content: "\e631"}
.mif-cross-circle:before {content: "\e640";}
.mif-odtoos:before {content: "\e641";}
.mif-nextto:before {content: "\e642";}
.mif-previousto:before {content: "\e643";}
.mif-settounk:before {content: "\e644";}
.mif-settono:before {content: "\e645";}
.mif-settoblank:before {content: "\e646";}
.mif-arrows:before {content: "\e647";}
.mif-edit:before {content: "\e648";}
.mif-settings:before {content: "\e649";}
.mif-copyfrom:before {content: "\e650";}
.mif-copyto:before {content: "\e651";}
.mif-clock:before {content: "\e652";}
.mif-clock:before {content: "\e652";}
.mif-ostood:before {content: "\e653";}
.mif-next:before {content: "\e654";}
.mif-previous:before {content: "\e655";}
.mif-top-hide:before {content: "\e656";}
.mif-bottom-hide:before {content: "\e657";}
.mif-ribbon-hide:before {content: "\e658";}
.mif-left-nav-hide:before {content: "\e659";}
.mif-uncheck:before {content: "\e660";}
.mif-check:before {content: "\e609";}
.mif-acti-dropdown:before {content: "\e662";}
.mif-apply-insurance:before {content: "\e663";}
.mif-percentage:before {content: "\e664";}
.mif-put-bottom:before {content: "\e665";}
.mif-transfer:before {content: "\e665";}
.mif-put-top:before {content: "\e666";}
.mif-plus-witcircle:before {content: "\e667";}
.mif-plus-dollarcircle:before {content: "\e668";}
.mif-info:before {content: "\e669";}
.mif-dropdown:before {content: "\e670";}
.mif-copyfrom:before {content: "\e671";}
.mif-repeat:before {content: "\e672";}
.mif-printer:before {content: "\e673";}
.mif-warning:before {content: "\e674";}
.mif-addframes:before {content: "\e675";}
.mif-deleteframes:before {content: "\e676";}
.mif-duplicate:before {content: "\e677";}
.mif-frame:before {content: "\e678";}
.mif-minus1:before {content: "\e679";}
.mif-plus1:before {content: "\e680";}
.mif-returnvendor:before {content: "\e681";}
.mif-tags:before {content: "\e682";}
.mif-reconciliation:before {content: "\e683";}
.mif-clear:before {content: "\e685";}
.mif-clear-circle:before {content: "\e660";}
.clear-elm-btn:before {
    font-family: metro, serif;
    content: "\e685";    
}
.mif-dropdown1:before {content: "\e686";}
.mif-dropup:before {content: "\e687";}
.mif-right-arrow:before {content: "\e688";}
.mif-Arrow-Left:before {content: "\e689";}
.mif-signoff:before {content: "\e690";}
.mif-user:before {content: "\e691";}

.mif-Encounter-View:before {content: "\e692";}
.mif-Encounter-Add:before {content: "\e693";}

.mif-book:before {content: "\e694";}

.mif-Encounter-Notepad:before {content: "\e695";}

.mif-Medications-Download:before {content: "\e696";}

.mif-Profile-Picture:before {content: "\e697";}
.mif-Webcam:before {content: "\e698";}

.mif-Medications-Scanner:before {content: "\e700";}

.mif-Medications-Image-View:before {content: "\e701";}

.mif-WF:before {
  content: "\e705";
}
.mif-T:before {
  content: "\e706";
}
.mif-refresh:before {
  content: "\e707";
}
.mif-PhoneNo:before {
  content: "\e708";
}
.mif-Email-circle:before {
  content: "\e709";
}
.mif-Email:before {
  content: "\e710";
}
.mif-Transfer:before {
  content: "\e711";
} 

.mif-plus_minus:before {
  content: "\e712";
} 

.mif-minus:before {
  content: "\e713";
} 

.mif-recall:before {
  content: "\e714";
} 

.mif-mic:before {
  content: "\e715";
} 

.mif-e_folder:before {
  content: "\e716";
}
.mif-microscope:before {
  content: "\e717";
}
.mif-History:before {
  content: "\e720";
}
.mif-Export:before {
  content: "\e721";
}
.mif-Add:before {
  content: "\e722";
}
.mif-Barcode:before {
  content: "\e723";
 }
.mif-Movebill:before {
  content: "\e724";
 }
 .mif-Createtask:before {
  content: "\e725";
 }
 .mif-Add-to-waitlist:before {
  content: "\e726";
 }
  .mif-Added-to-waitlist:before {
  content: "\e727";
 }
 .mif-surgery:before {
  content: "\e728";
 }
.mif-transaction:before {
  content: "\e729";
 }
.mif-more-info:before {
  content: "\e730";
 }
.mif-favourite:before {
  content: "\e731";
 }
.mif-Browse:before {
  content: "\e732";
 }
.mif-Fax:before {
  content: "\e733";
 }
.mif-Print-label:before {
  content: "\e734";
 }
.mif-Print-order:before {
  content: "\e735";
 }
.mif-Delete:before {
  content: "\e736";
 }
.mif-Selection:before {
  content: "\e737";
 }
.mif-Info:before {
  content: "\e738";
 }
.mif-Error:before {
  content: "\e739";
 }
.mif-Alert:before {
  content: "\e740";
 }
 .mif-PhoneNo-Type1:before {
  content: "\e741";
 }
 .mif-Email-circle-Type1:before {
  content: "\e742";
 }
.mif-informationnPopup:before {
  content: "\e738";
 }
.mif-errorPopup:before {
  content: "\e739";
 }
.mif-warringPopup:before {
  content: "\e740";
 }
.mif-successPopup:before {
  content: "\e637";
}
.mif-deletePopup:before {
  content: "\e736";
 }
.mif-Selection:before {
    content: "\e737";
}
.mif-Info:before {
    content: "\e738";
}
.mif-Error:before {
    content: "\e739";
}
.mif-Alert:before {
    content: "\e740";
}
.mif-PhoneNo-Type1:before {
    content: "\e741";
}
.mif-Email-circle-Type1:before {
    content: "\e742";
}
.mif-Stop-Type1:before {
    content: "\e743";
}
.mif-Stop:before {
    content: "\e744";
}
.mif-Import:before {
    content: "\e745";
}
.mif-Info-Type1:before {
    content: "\e746";
}
.mif-View:before {
    content: "\e747";
}
.mif-Show-Bill:before {
    content: "\e748";
}
.mif-Zoom:before {
    content: "\e749";
}
.mif-Toggle-Multipage-Mode:before {
    content: "\e750";
}
.mif-Favourite-Type1:before {
    content: "\e751";
}
.mif-Frames-Data:before {
    content: "\e752";
}
.mif-Expand:before {
    content: "\e753";
}
.mif-Copy-Forward:before {
    content: "\e754";
}
.mif-Card:before {
    content: "\e755";
}
.mif-usercircle:before {
    content: "\e702";
}
.mif-accordUP:before {
    content: "\e703";
}
.mif-accorddown:before {
    content: "\e704";
}
.mif-SignUp:before {
    content: "\e759";
}
.mif-Resend-SignUp-Info:before {
    content: "\e760";
}
.mif-Save:before {
    content: "\e761";
}
.mif-Request-Info:before {
    content: "\e762";
}
.mif-Test-Pending:before {
    content: "\e763";
}
.mif-Balance:before {
    content: "\e764";
}
.mif-Recurring:before {
    content: "\e765";
}
.mif-Office-Admin-Folder:before {
    content:"\e766";
}

.mif-Add-from-Templates:before {
    content: "\e767";
}

.mif-Move-to-folder:before {
    content: "\e768";
}

.mif-Select-All:before {
    content: "\e769";
}

.mif-Review:before {
    content: "\e770";
}

.mif-Send:before {
    content: "\e771";
}

.mif-Send-All:before {
    content: "\e772";
}

.mif-Resend:before {
    content: "\e773";
}

.mif-Filter:before {
    content: "\e774";
}

.mif-Foreign-Languages:before {
    content: "\e775";
}

.mif-Defaulted-Payments:before {
 
 content: "\e776";
}

.mif-Deaf:before {
    content: "\e777";
}

.mif-Blind:before {
    content: "\e778";
}

.mif-Confirmed-Appointments:before {
    content: "\e779";
}
.mif-Pending-Appointments:before {
    content: "\e780";
}
.mif-Flag:before {
    content: "\e781";
}
.mif-Payment-History:before {
    content: "\e782";
}
.mif-Reminder:before {
    content: "\e783";
}
.mif-Add-Credits:before {
    content: "\e784";
}
.mif-Advance-Print:before {
   content: "\e785";
}
.mif-Merge:before {
    content: "\e786";
}
.mif-Previous1:before {
    content: "\e787";
}
.mif-Next1:before {
    content: "\e788";
}
.mif-Image-Series:before {
    content: "\e789";
}
.mif-Align-Centre:before {
    content: "\e790";
}
.mif-Align-Top:before {
    content: "\e791";
}
.mif-Align-Middle:before {
    content: "\e792";
}
.mif-Align-Bottom:before {
    content: "\e793";
}
.mif-Same-Width:before {
    content: "\e794";
}
.mif-Same-Height:before {
    content: "\e795";
}
.mif-Same-Size:before {
    content: "\e796";
}
.mif-Same-Horizontal-Space:before {
    content: "\e797";
}
.mif-Same-Vertical-Space:before {
    content: "\e798";
}
.mif-Apply-Style:before {
    content: "\e799";
}
.mif-Label:before {
    content: "\e800";
}
.mif-Text-Box:before {
    content: "\e801";
}
.mif-Test-Area:before {
    content: "\e802";
}
.mif-Line:before {
    content: "\e803";
}
.mif-Panel:before {
    content: "\e804";
}
.mif-Combo-Box:before {
    content: "\e805";
}
.mif-Complex-Control:before {
    content: "\e806";
}
.mif-Check-Box:before {
    content: "\e807";
}
.mif-List-CheckBox:before {
    content: "\e808";
}
.mif-List-OptionButton:before {
    content: "\e809";
}

.mif-Link:before {
    content: "\e810";
}
.mif-Button:before {
    content: "\e811";
}
.mif-Zoom-Out:before {
    content: "\e812";
}
.mif-Undo:before {
    content: "\e813";
}
.mif-ThumbnailView:before {
    content: "\e814";
}
.mif-ListView:before {
    content: "\e815";
}
.mif-PDF:before {
    content: "\e816";
}
.mif-Align-Left:before {
    content: "\e817";
}
.mif-Align-Right:before {
    content: "\e818";
}
.mif-AutoPost:before {
    content: "\e819";
}
.mif-VOID:before {
    content: "\e820";
}
.mif-AdvanceSearch:before {
    content: "\e821";
}
.mif-ReceiveOrder:before {
    content: "\e822";
}
.mif-Insurance:before {
    content: "\e823";
}
.mif-DiagnosisCodes:before {
    content: "\e824";
}
.mif-PendingOrders:before {
    content: "\e825";
}
.mif-Medications:before {
    content: "\e826";
}
.mif-Balance1:before {
    content: "\e827";
}
.mif-Accordion-open:before {
    content: "\e828";
}
.mif-Accordion:before {
    content: "\e829";
}
.mif-Apply-Styletoall:before {
    content: "\e830";
}
.mif-Select:before {
    content: "\e831";
}
.mif-Pencil:before {
    content: "\e832";
}
.mif-Line:before {
    content: "\e833";
}
.mif-Spray:before {
    content: "\e834";
}
.mif-Ellipse:before {
    content: "\e835";
}
.mif-Rectangle:before {
    content: "\e836";
}
.mif-Eraser:before {
    content: "\e837";
}
.mif-Blur:before {
    content: "\e838";
}
.mif-Type:before {
    content: "\e839";
}
.mif-Fillcolor:before {
    content: "\e840";
}
.mif-Background:before {
    content: "\e841";
}
.mif-Pan:before {
    content: "\e842";
}
.mif-Add-SubStamp:before {
    content: "\e843";
}
.mif-Eyedropper:before {
    content: "\e844";
}
.mif-Undo:before {
    content: "\e845";
}
.mif-Redo:before {
    content: "\e846";
}
.mif-ZoomIn:before {
    content: "\e847";
}
.mif-ZoomOut:before {
    content: "\e848";
}
.mif-Clear:before {
    content: "\e849";
}
.mif-Polygon:before {
    content: "\e850";
}
.mif-Addnew:before {
    content: "\e851";
}
.mif-Delete:before {
    content: "\e852";
}
.mif-Edit:before {
    content: "\e853";
}
.mif-Sort:before {
    content: "\e854";
}
/*.mif-user:before {content: "\e02";}*/
.mif-usercircle:before {content: "\e702";}
.mif-accordUP:before {content: "\e703";}
.mif-accorddown:before {content: "\e704";}
.circel { 
    font-size:11px;
}
.circel20 {
    width: 1.0rem;
    height: 1.0rem;
    background-color: #ff8a00;
    border-radius: 50%;

    float: left;
    padding: 1px;
    line-height: 0.9rem;
    font-size: 0.5rem;
    color: #fff;
    text-align: center;
    position: absolute;
    top: -5px;
    left: 0.6rem;

}

.circel15 {
    width: 0.8rem;
    height: 0.8rem;
    background-color: #ff8a00;
    border-radius: 50%;
    float: left;
    padding: 1px;
    line-height: 0.7rem;
    font-size: 9px;
    color: #fff;
    text-align: center;
    position: absolute;
    top: -5px;
    left: 0.8rem;
}    
	
@media screen and (min-width: 1360px) 	
{
    .dropdown-toggle:before{top: 37%; margin-top: 0.1rem;}
	
}