/* ==========================
            Outfit
   ========================== */
@font-face {
  font-family: 'Outfit';
  src: url('../Assets/Fonts/Outfit/Outfit-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
    font-family: 'Outfit';
    src: url('../Assets/Fonts/Outfit/Outfit-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Outfit';
    src: url('../Assets/Fonts/Outfit/Outfit-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Outfit';
    src: url('../Assets/Fonts/Outfit/Outfit-ExtraBold.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}


/** ===========================
     SAIRA
=============================== */

@font-face {
    font-family: 'Saira';
    src: url('../Assets/Fonts/Saira/Saira-Regular.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Saira';
    src: url('../Assets/Fonts/Saira/Saira-Medium.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Saira';
    src: url('../Assets/Fonts/Saira/Saira-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Saira';
    src: url('../Assets/Fonts/Saira/Saira-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}


@font-face {
    font-family: 'Saira';
    src: url('../Assets/Fonts/Saira/Saira-ExtraBold.ttf') format('truetype');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Saira';
    src: url('../Assets/Fonts/Saira/Saira-Black.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

body[index] {
    font-family: 'Outfit', sans-serif;
}

body[user] {
    font-family: 'Outfit', sans-serif;
}

body[admin] {
    font-family: 'Saira', sans-serif;
}

html {
  scroll-behavior: smooth;
}


/* Make sure SweetAlert2 popup is above preloader */
.swal2-container {
  z-index: 99999999999999999 !important;
}

#preloader2 {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  overflow: hidden;
  background: #ffffff82;
}

#preloader2:before {
  content: "";
  position: fixed;
  top: calc(50% - 30px);
  left: calc(50% - 30px);
  border: 6px solid #1977cc;
  border-top-color: #d1e6f9;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  -webkit-animation: animate-preloader 1s linear infinite;
  animation: animate-preloader 1s linear infinite;
}

@-webkit-keyframes animate-preloader {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes animate-preloader {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/**=========================
    Navbar Color Variation
==============================*/
.navbar-light-transparent {
  background: rgba(255, 255, 255, 0.35) !important;

  backdrop-filter: blur(30px);
  -webkit-backdrop-filter: blur(30px);

  color: #fff;
}


/**==============================
   Sidebar color variation
================================*/
.sidebar-light-gradient-mforce {
  background: rgba(255, 255, 255, 0.5) !important;

  backdrop-filter: blur(30px);
  -webkit-backdrop-filter: blur(30px);

  color: #fff;
  border-right: 5px solid rgba(255, 255, 255, 0.8);
}

.sidebar-light-gradient-mforce .active{
    font-weight: 800
}

.sidebar-expand-lg.layout-fixed .app-sidebar{
    box-shadow: 8px 0 30px rgb(255, 255, 255);
}

<!-- @media (min-width: 992px){
  .sidebar-expand-lg.layout-fixed .app-main {
    overflow: hidden;
  }
} -->

#header {
    position: relative; /* or fixed/sticky if needed */
    z-index: 1030; /* higher than card/content */
}

.nav-divider {
  height: 2px;
  background: rgb(255, 255, 255);
  list-style: none;
}

a {
    text-decoration: none;
}


/* Default (mobile first) */
.mforce_logo {
  max-width: 100px;   /* each logo max 40% of viewport */
  height: auto;
  object-fit: contain;
}

@media (min-width: 0px) and (max-width: 300px) {
  .mforce_logo {
    max-width: 40px;
  }
}


/* Small devices (≥300px) */
@media (min-width: 300px) {
  .mforce_logo {
    max-width: 80px;
  }
}

/* Small devices (≥576px) */
@media (min-width: 576px) {
  .mforce_logo {
    max-width: 80px;
  }
}

/* Medium devices (≥768px) */
@media (min-width: 768px) {
  .mforce_logo {
    max-width: 100px;
  }
}

/* Large devices (≥992px) */
@media (min-width: 992px) {
  .mforce_logo {
    max-width: 120px;
  }
}

/* Extra large (≥1200px) */
@media (min-width: 1200px) {
  .mforce_logo {
    max-width: 140px;
  }
}




/*=======================
  Driver JS - User Guide Personalisation
 ========================*/
 
#driver-popover-title,
#driver-popover-description,
.driver-popover-navigation-btns button,
.driver-popover-progress-text
  {
    font-family: 'Dosis';
}

#driver-popover-title,
#driver-popover-description,
.driver-popover-progress-text
  {
    color: white
}

.driver-popover-navigation-btns button,
  {
    color: black;
}

/* Change popover background & text */
.driver-popover {
    background: #00c6ff linear-gradient(180deg, #00c6ff, #0072ff) repeat-x !important;
    color: #fff !important;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
    max-width: 450px !important;  /* default is ~300px */
    width: 450px !important;
}

/* Change popover arrow */
.driver-popover:after {
    border-top-color: #1a73e8 !important; /* for bottom popover arrow */
}

/* Highlighted element border */
.driver-highlighted-element {
    border: 3px solid #ff9800 !important;
    border-radius: 8px !important;
    box-shadow: 0 0 15px rgba(255, 152, 0, 0.7);
}


/* Buttons inside popover */
.driver-popover-buttons button {
    background-color: #ff9800 !important;
    color: #fff !important;
    border: none;
    border-radius: 6px;
    padding: 6px 12px;
    margin: 0 5px;
    cursor: pointer;
}

.driver-popover-buttons button:hover {
    background-color: #e68900 !important;
}


/* ========================================
   Extra Gradient Color Utility Classes
=========================================== */

/* Sky Blue */
.bg-gradient-sky {
  background: #00c6ff linear-gradient(180deg, #00c6ff, #0072ff) repeat-x !important;
  color: #fff !important; 
}

/* Sunset (Orange → Pink) */
.bg-gradient-sunset {
  background: #ff7e5f linear-gradient(180deg, #ff7e5f, #feb47b) repeat-x !important;
  color: #fff !important;
}

/* Ocean (Teal → Blue) */
.bg-gradient-ocean {
  background: #2E8BC0 linear-gradient(180deg, #2E8BC0, #145DA0) repeat-x !important;
  color: #fff !important;
}

/* Emerald Green */
.bg-gradient-emerald {
  background: #2ecc71 linear-gradient(180deg, #2ecc71, #27ae60) repeat-x !important;
  color: #fff !important;
}

/* Steel Gray */
.bg-gradient-steel {
  background: #5a5a5a linear-gradient(180deg, #5a5a5a, #2f2f2f) repeat-x !important;
  color: #fff !important;
}

/* Golden */
.bg-gradient-golden {
  background: #f9d423 linear-gradient(180deg, #f9d423, #ff4e50) repeat-x !important;
  color: #1f2d3d !important;
}

/* Aqua */
.bg-gradient-aqua {
  background: #00f2fe linear-gradient(180deg, #00f2fe, #4facfe) repeat-x !important;
  color: #1f2d3d !important;
}

/* Rose */
.bg-gradient-rose {
  background: #ff758c linear-gradient(180deg, #ff758c, #ff7eb3) repeat-x !important;
  color: #fff !important;
}


.bg-gradient-fire {
  background: #f12711 linear-gradient(180deg, #f12711, #f5af19) repeat-x !important;
  color: #fff !important;
}

.bg-gradient-forest {
  background: #11998e linear-gradient(180deg, #11998e, #38ef7d) repeat-x !important;
  color: #fff !important;
}

.bg-gradient-lavender {
  background: #b993d6 linear-gradient(180deg, #b993d6, #8ca6db) repeat-x !important;
  color: #1f2d3d !important;
}

.bg-gradient-midnight {
  background: #232526 linear-gradient(180deg, #232526, #414345) repeat-x !important;
  color: #fff;
}


/* Peach */
.bg-gradient-peach {
  background: #ffecd2 linear-gradient(180deg, #ffecd2, #fcb69f) repeat-x !important;
  color: #1f2d3d;
}

/* Rainbow */
.bg-gradient-rainbow {
  background: linear-gradient(90deg, #ff6a00, #ee0979, #8e54e9, #4776e6, #00c9ff) repeat-x !important;
  color: #fff;
}

/* Arctic */
.bg-gradient-arctic {
  background: #83a4d4 linear-gradient(180deg, #83a4d4, #b6fbff) repeat-x !important;
  color: #1f2d3d;
}

/* Volcano */
.bg-gradient-volcano {
  background: #ff512f linear-gradient(180deg, #ff512f, #dd2476) repeat-x !important;
  color: #fff;
}

/* Minty */
.bg-gradient-minty {
  background: #76b852 linear-gradient(180deg, #76b852, #8DC26F) repeat-x !important;
  color: #fff;
}

/* Royal */
.bg-gradient-royal {
  background: #141e30 linear-gradient(180deg, #141e30, #243b55) repeat-x !important;
  color: #fff;
}

/* Flame */
.bg-gradient-flame {
  background: #ff416c linear-gradient(180deg, #ff416c, #ff4b2b) repeat-x !important;
  color: #fff;
}

/* Ice */
.bg-gradient-ice {
  background: #83d0cb linear-gradient(180deg, #83d0cb, #b5f4ec) repeat-x !important;
  color: #1f2d3d;
}

/* Galaxy */
.bg-gradient-galaxy {
  background: #0f2027 linear-gradient(180deg, #0f2027, #203a43, #2c5364) repeat-x !important;
  color: #fff;
}

.bg-gradient-galaxy .icon i{
  color: #636363ff;
}

/* Coral */
.bg-gradient-coral {
  background: #ff9966 linear-gradient(180deg, #ff9966, #ff5e62) repeat-x !important;
  color: #fff;
}

/* Coral Reef */
.bg-gradient-coralreef {
  background: #ff7e5f linear-gradient(180deg, #ff7e5f, #feb47b) repeat-x !important;
  color: #fff;
}

/* Twilight */
.bg-gradient-twilight {
  background: #0f2027 linear-gradient(180deg, #0f2027, #203a43, #2c5364) repeat-x !important;
  color: #fff;
}

.bg-gradient-twilight .icon i{
  color: #bcbcbcff;
}

/* Ocean Blue */
.bg-gradient-oceanblue {
  background: #2b5876 linear-gradient(180deg, #2b5876, #4e4376) repeat-x !important;
  color: #fff;
}

/* Sunset Orange */
.bg-gradient-sunsetorange {
  background: #ff416c linear-gradient(180deg, #ff416c, #ff4b2b) repeat-x !important;
  color: #fff;
}

/* Forest Green */
.bg-gradient-forestgreen {
  background: #11998e linear-gradient(180deg, #11998e, #38ef7d) repeat-x !important;
  color: #fff;
}

/* Royal Purple */
.bg-gradient-royalpurple {
  background: #141e30 linear-gradient(180deg, #141e30, #243b55) repeat-x !important;
  color: #fff;
}

/* Fire Red */
.bg-gradient-fireredd {
  background: #f12711 linear-gradient(180deg, #f12711, #f5af19) repeat-x !important;
  color: #fff;
}

/* Aqua Mist */
.bg-gradient-aquamist {
  background: #00f2fe linear-gradient(180deg, #00f2fe, #4facfe) repeat-x !important;
  color: #1f2d3d;
}

/* Lavender Mist */
.bg-gradient-lavendermist {
  background: #b993d6 linear-gradient(180deg, #b993d6, #8ca6db) repeat-x !important;
  color: #1f2d3d;
}

/* Mango Tango */
.bg-gradient-mangotango {
  background: #FFA62E linear-gradient(180deg, #FFA62E, #EA4C1D) repeat-x !important;
  color: #fff;
}

/* Seafoam */
.bg-gradient-seafoam {
  background: #7BE495 linear-gradient(180deg, #7BE495, #4A9C8E) repeat-x !important;
  color: #1f2d3d;
}

/* Violet Dream */
.bg-gradient-violetdream {
  background: #8A2BE2 linear-gradient(180deg, #8A2BE2, #DA70D6) repeat-x !important;
  color: #fff;
}

/* Autumn Leaves */
.bg-gradient-autumnleaves {
  background: #D2691E linear-gradient(180deg, #D2691E, #FFA500) repeat-x !important;
  color: #fff;
}

/* Deep Sea */
.bg-gradient-deepsea {
  background: #00008B linear-gradient(180deg, #00008B, #20B2AA) repeat-x !important;
  color: #fff;
}

/* Cotton Candy */
.bg-gradient-cottoncandy {
  background: #FFB6C1 linear-gradient(180deg, #FFB6C1, #87CEEB) repeat-x !important;
  color: #1f2d3d;
}

/* Desert Sand */
.bg-gradient-desertsand {
  background: #EDC9AF linear-gradient(180deg, #EDC9AF, #C19A6B) repeat-x !important;
  color: #1f2d3d;
}

/* Electric Blue */
.bg-gradient-electricblue {
  background: #7DF9FF linear-gradient(180deg, #7DF9FF, #003366) repeat-x !important;
  color: #1f2d3d;
}

/* Cherry Blossom */
.bg-gradient-cherryblossom {
  background: #FFB7C5 linear-gradient(180deg, #FFB7C5, #FF69B4) repeat-x !important;
  color: #1f2d3d;
}

/* Mossy Stone */
.bg-gradient-mossystone {
  background: #8F9779 linear-gradient(180deg, #8F9779, #4A5D23) repeat-x !important;
  color: #fff;
}

/* Amethyst */
.bg-gradient-amethyst {
  background: #9966CC linear-gradient(180deg, #9966CC, #4B0082) repeat-x !important;
  color: #fff;
}

/* Honey */
.bg-gradient-honey {
  background: #FFB347 linear-gradient(180deg, #FFB347, #FFCC33) repeat-x !important;
  color: #1f2d3d;
}

/* Stormy Sky */
.bg-gradient-stormysky {
  background: #4F4F4F linear-gradient(180deg, #4F4F4F, #A9A9A9) repeat-x !important;
  color: #fff;
}

/* Tropical Lagoon */
.bg-gradient-tropicallagoon {
  background: #00CED1 linear-gradient(180deg, #00CED1, #32CD32) repeat-x !important;
  color: #1f2d3d;
}

/* Berry Smoothie */
.bg-gradient-berrysmoothie {
  background: #8A2BE2 linear-gradient(180deg, #8A2BE2, #FF1493) repeat-x !important;
  color: #fff;
}

/* Copper Glow */
.bg-gradient-copperglow {
  background: #B87333 linear-gradient(180deg, #B87333, #DAA520) repeat-x !important;
  color: #fff;
}

/* Arctic Frost */
.bg-gradient-arcticfrost {
  background: #E0FFFF linear-gradient(180deg, #E0FFFF, #AFEEEE) repeat-x !important;
  color: #1f2d3d;
}

/* Sunset Beach */
.bg-gradient-sunsetbeach {
  background: #FFA07A linear-gradient(180deg, #FFA07A, #FF6347) repeat-x !important;
  color: #fff;
}

/* Midnight Garden */
.bg-gradient-midnightgarden {
  background: #2E8B57 linear-gradient(180deg, #2E8B57, #191970) repeat-x !important;
  color: #fff;
}

/* Neon Glow */
.bg-gradient-neonglow {
  background: #39FF14 linear-gradient(180deg, #39FF14, #FF10F0) repeat-x !important;
  color: #1f2d3d;
}

/* Blue Lagoon */
.bg-gradient-bluelagoon {
  background: #1CA9C9 linear-gradient(180deg, #1CA9C9, #0077B6) repeat-x !important;
  color: #fff;
}

/* Electric Magenta */
.bg-gradient-electricmagenta {
  background: #FF00FF linear-gradient(180deg, #FF00FF, #FF33CC) repeat-x !important;
  color: #fff;
}

/* Deep Ocean */
.bg-gradient-deepocean {
  background: #004E92 linear-gradient(180deg, #004E92, #000428) repeat-x !important;
  color: #fff;
}

/* Neon Blue */
.bg-gradient-neonblue {
  background: #00F0FF linear-gradient(180deg, #00F0FF, #0080FF) repeat-x !important;
  color: #1f2d3d;
}

/* Cosmic Purple */
.bg-gradient-cosmicpurple {
  background: #6A0DAD linear-gradient(180deg, #6A0DAD, #8A2BE2) repeat-x !important;
  color: #fff;
}

/* Royal Magenta */
.bg-gradient-royalmagenta {
  background: #C71585 linear-gradient(180deg, #C71585, #FF1493) repeat-x !important;
  color: #fff;
}

/* Sapphire Sky */
.bg-gradient-sapphiresky {
  background: #0F52BA linear-gradient(180deg, #0F52BA, #4682B4) repeat-x !important;
  color: #fff;
}

/* Orchid Mist */
.bg-gradient-orchidmist {
  background: #DA70D6 linear-gradient(180deg, #DA70D6, #EE82EE) repeat-x !important;
  color: #1f2d3d;
}

/* Magenta Sunset */
.bg-gradient-magentasunset {
  background: #FF00AA linear-gradient(180deg, #FF00AA, #FF66CC) repeat-x !important;
  color: #fff;
}

/* Indigo Night */
.bg-gradient-indigonight {
  background: #4B0082 linear-gradient(180deg, #4B0082, #6A5ACD) repeat-x !important;
  color: #fff;
}

/* Electric Indigo */
.bg-gradient-electricindigo {
  background: #6F00FF linear-gradient(180deg, #6F00FF, #8A2BE2) repeat-x !important;
  color: #fff;
}

/* Cerulean Wave */
.bg-gradient-ceruleanwave {
  background: #007BA7 linear-gradient(180deg, #007BA7, #00BFFF) repeat-x !important;
  color: #fff;
}

/* Fuchsia Dream */
.bg-gradient-fuchsaiadream {
  background: #FF77FF linear-gradient(180deg, #FF77FF, #FF33CC) repeat-x !important;
  color: #1f2d3d;
}

/* Blueberry Blast */
.bg-gradient-blueberryblast {
  background: #4F86F7 linear-gradient(180deg, #4F86F7, #1E3C72) repeat-x !important;
  color: #fff;
}

/* Magenta Storm */
.bg-gradient-magentastorm {
  background: #D100FF linear-gradient(180deg, #D100FF, #FF66FF) repeat-x !important;
  color: #fff;
}

/* Lavender Sky */
.bg-gradient-lavendersky {
  background: #B57EDC linear-gradient(180deg, #B57EDC, #9370DB) repeat-x !important;
  color: #1f2d3d;
}

/* Neon Violet */
.bg-gradient-neonviolet {
  background: #8B00FF linear-gradient(180deg, #8B00FF, #DA70D6) repeat-x !important;
  color: #fff;
}

/* Blue Mirage */
.bg-gradient-bluemirage {
  background: #1E90FF linear-gradient(180deg, #1E90FF, #00CED1) repeat-x !important;
  color: #fff;
}

/* Magenta Glow */
.bg-gradient-magentaglow {
  background: #FF33FF linear-gradient(180deg, #FF33FF, #FF99FF) repeat-x !important;
  color: #fff;
}

/* Twilight Blue */
.bg-gradient-twilightblue {
  background: #0F52BA linear-gradient(180deg, #0F52BA, #1E3C72) repeat-x !important;
  color: #fff;
}

/* White → Ivory */
.bg-gradient-white-ivory {
  background: #ffffff linear-gradient(180deg, #ffffff, #fffff0) repeat-x !important;
  color: #1f2d3d;
}

/* White → Snow */
.bg-gradient-white-snow {
  background: #ffffff linear-gradient(180deg, #ffffff, #fffafa) repeat-x !important;
  color: #1f2d3d;
}

/* White → Floral White */
.bg-gradient-white-floral {
  background: #ffffff linear-gradient(180deg, #ffffff, #fffaf0) repeat-x !important;
  color: #1f2d3d;
}

/* White → Ghost White */
.bg-gradient-white-ghost {
  background: #ffffff linear-gradient(180deg, #ffffff, #f8f8ff) repeat-x !important;
  color: #1f2d3d;
}

/* White → Seashell */
.bg-gradient-white-seashell {
  background: #ffffff linear-gradient(180deg, #ffffff, #fff5ee) repeat-x !important;
  color: #1f2d3d;
}

/* White → Azure Mist */
.bg-gradient-white-azure {
  background: #ffffff linear-gradient(180deg, #ffffff, #f0ffff) repeat-x !important;
  color: #1f2d3d;
}

/* White → Mint Cream */
.bg-gradient-white-mintcream {
  background: #ffffff linear-gradient(180deg, #ffffff, #f5fffa) repeat-x !important;
  color: #1f2d3d;
}

/* White → Alabaster */
.bg-gradient-white-alabaster {
  background: #ffffff linear-gradient(180deg, #ffffff, #f2f0e6) repeat-x !important;
  color: #1f2d3d;
}

/* White → Pearl */
.bg-gradient-white-pearl {
  background: #ffffff linear-gradient(180deg, #ffffff, #eae0c8) repeat-x !important;
  color: #1f2d3d;
}

/* White → Baby Powder */
.bg-gradient-white-babypowder {
  background: #ffffff linear-gradient(180deg, #ffffff, #fefefa) repeat-x !important;
  color: #1f2d3d;
}

/* White → Lily White */
.bg-gradient-white-lily {
  background: #ffffff linear-gradient(180deg, #ffffff, #e9f6ef) repeat-x !important;
  color: #1f2d3d;
}

/* White → Porcelain */
.bg-gradient-white-porcelain {
  background: #ffffff linear-gradient(180deg, #ffffff, #f2f0eb) repeat-x !important;
  color: #1f2d3d;
}

/* White → Coconut */
.bg-gradient-white-coconut {
  background: #ffffff linear-gradient(180deg, #ffffff, #fff1e6) repeat-x !important;
  color: #1f2d3d;
}

/* White → Champagne */
.bg-gradient-white-champagne {
  background: #ffffff linear-gradient(180deg, #ffffff, #f7e7ce) repeat-x !important;
  color: #1f2d3d;
}

/* White → Diamond */
.bg-gradient-white-diamond {
  background: #ffffff linear-gradient(180deg, #ffffff, #f0f8ff) repeat-x !important;
  color: #1f2d3d;
}

/* White → Moonstone */
.bg-gradient-white-moonstone {
  background: #ffffff linear-gradient(180deg, #ffffff, #e6f3ff) repeat-x !important;
  color: #1f2d3d;
}

/* White → Cotton */
.bg-gradient-white-cotton {
  background: #ffffff linear-gradient(180deg, #ffffff, #fbfbf9) repeat-x !important;
  color: #1f2d3d;
}

/* White → Crystal */
.bg-gradient-white-crystal {
  background: #ffffff linear-gradient(180deg, #ffffff, #f4f4f8) repeat-x !important;
  color: #1f2d3d;
}

/* White → Silk */
.bg-gradient-white-silk {
  background: #ffffff linear-gradient(180deg, #ffffff, #f8f4e6) repeat-x !important;
  color: #1f2d3d;
}

/* White → Cloud */
.bg-gradient-white-cloud {
  background: #ffffff linear-gradient(180deg, #ffffff, #f4f4f2) repeat-x !important;
  color: #1f2d3d;
}

/* Sky Blue → Light Blue */
.bg-gradient-blue-sky {
  background: #87ceeb linear-gradient(180deg, #87ceeb, #add8e6) repeat-x !important;
  color: #1f2d3d;
}

/* Navy → Royal Blue */
.bg-gradient-blue-navy {
  background: #000080 linear-gradient(180deg, #000080, #4169e1) repeat-x !important;
  color: #fff;
}

/* Steel Blue → Light Steel Blue */
.bg-gradient-blue-steel {
  background: #4682b4 linear-gradient(180deg, #4682b4, #b0c4de) repeat-x !important;
  color: #fff;
}

/* Dodger Blue → Deep Sky Blue */
.bg-gradient-blue-dodger {
  background: #1e90ff linear-gradient(180deg, #1e90ff, #00bfff) repeat-x !important;
  color: #fff;
}

/* Midnight Blue → Dark Blue */
.bg-gradient-blue-midnight {
  background: #191970 linear-gradient(180deg, #191970, #00008b) repeat-x !important;
  color: #fff;
}

/* Powder Blue → Light Cyan */
.bg-gradient-blue-powder {
  background: #b0e0e6 linear-gradient(180deg, #b0e0e6, #e0ffff) repeat-x !important;
  color: #1f2d3d;
}

/* Cornflower Blue → Medium Slate Blue */
.bg-gradient-blue-cornflower {
  background: #6495ed linear-gradient(180deg, #6495ed, #7b68ee) repeat-x !important;
  color: #fff;
}

/* Dark Slate Blue → Medium Purple */
.bg-gradient-blue-darkslate {
  background: #483d8b linear-gradient(180deg, #483d8b, #9370db) repeat-x !important;
  color: #fff;
}

/* Alice Blue → Azure */
.bg-gradient-blue-alice {
  background: #f0f8ff linear-gradient(180deg, #f0f8ff, #f0ffff) repeat-x !important;
  color: #1f2d3d;
}

/* Light Sky Blue → Pale Turquoise */
.bg-gradient-blue-lightsky {
  background: #87cefa linear-gradient(180deg, #87cefa, #afeeee) repeat-x !important;
  color: #1f2d3d !important;
}

/* Cadet Blue → Dark Turquoise */
.bg-gradient-blue-cadet {
  background: #5f9ea0 linear-gradient(180deg, #5f9ea0, #00ced1) repeat-x !important;
  color: #fff !important;
}

/* Slate Blue → Medium Orchid */
.bg-gradient-blue-slate {
  background: #6a5acd linear-gradient(180deg, #6a5acd, #ba55d3) repeat-x !important;
  color: #fff !important;
}

/* Royal Blue → Medium Blue */
.bg-gradient-blue-royal {
  background: #4169e1 linear-gradient(180deg, #4169e1, #0000cd) repeat-x !important;
  color: #fff !important;
}

/* Baby Blue → Light Blue */
.bg-gradient-blue-baby {
  background: #89cff0 linear-gradient(180deg, #89cff0, #add8e6) repeat-x !important;
  color: #1f2d3d !important;
}

/* Prussian Blue → Air Force Blue */
.bg-gradient-blue-prussian {
  background: #003153 linear-gradient(180deg, #003153, #5d8aa8) repeat-x !important;
  color: #fff !important;
}

/* Sapphire Blue → Columbia Blue */
.bg-gradient-blue-sapphire {
  background: #0f52ba linear-gradient(180deg, #0f52ba, #b9d9eb) repeat-x !important;
  color: #fff !important;
}

/* Yale Blue → Carolina Blue */
.bg-gradient-blue-yale {
  background: #00356b linear-gradient(180deg, #00356b, #4b9cd3) repeat-x !important;
  color: #fff !important;
}

/* Oxford Blue → Duke Blue */
.bg-gradient-blue-oxford {
  background: #002147 linear-gradient(180deg, #002147, #012169) repeat-x !important;
  color: #fff !important;
}

/* UCLA Blue → Berkeley Blue */
.bg-gradient-blue-ucla {
  background: #2774ae linear-gradient(180deg, #2774ae, #003262) repeat-x !important;
  color: #fff !important;
}

/* Tufts Blue → Celtic Blue */
.bg-gradient-blue-tufts {
  background: #3e8ede linear-gradient(180deg, #3e8ede, #246bce) repeat-x !important;
  color: #fff !important;
}

/* Lemon Yellow → Light Yellow */
.bg-gradient-yellow-lemon {
  background: #fff44f linear-gradient(180deg, #fff44f, #ffffe0) repeat-x !important;
  color: #1f2d3d !important;
}

/* Gold → Goldenrod */
.bg-gradient-yellow-gold {
  background: #ffd700 linear-gradient(180deg, #ffd700, #daa520) repeat-x !important;
  color: #1f2d3d;
}

/* Canary Yellow → Pastel Yellow */
.bg-gradient-yellow-canary {
  background: #ffef00 linear-gradient(180deg, #ffef00, #fdfd96) repeat-x !important;
  color: #1f2d3d;
}

/* Sunshine → Pale Yellow */
.bg-gradient-yellow-sunshine {
  background: #ffdb58 linear-gradient(180deg, #ffdb58, #ffffcc) repeat-x !important;
  color: #1f2d3d;
}

/* Mustard → Dark Goldenrod */
.bg-gradient-yellow-mustard {
  background: #ffdb58 linear-gradient(180deg, #ffdb58, #b8860b) repeat-x !important;
  color: #fff;
}

/* Banana → Cornsilk */
.bg-gradient-yellow-banana {
  background: #ffe135 linear-gradient(180deg, #ffe135, #fff8dc) repeat-x !important;
  color: #1f2d3d;
}

/* School Bus Yellow → Safety Yellow */
.bg-gradient-yellow-schoolbus {
  background: #ffd800 linear-gradient(180deg, #ffd800, #eed202) repeat-x !important;
  color: #1f2d3d;
}

/* Citrine → Amber */
.bg-gradient-yellow-citrine {
  background: #e4d00a linear-gradient(180deg, #e4d00a, #ffbf00) repeat-x !important;
  color: #1f2d3d;
}

/* Saffron → Mellow Yellow */
.bg-gradient-yellow-saffron {
  background: #f4c430 linear-gradient(180deg, #f4c430, #f8de7e) repeat-x !important;
  color: #1f2d3d;
}

/* Chrome Yellow → Selective Yellow */
.bg-gradient-yellow-chrome {
  background: #ffa700 linear-gradient(180deg, #ffa700, #ffba00) repeat-x !important;
  color: #1f2d3d;
}

/* Maize → Light Goldenrod */
.bg-gradient-yellow-maize {
  background: #fbec5d linear-gradient(180deg, #fbec5d, #fafad2) repeat-x !important;
  color: #1f2d3d;
}

/* Jonquil → Naples Yellow */
.bg-gradient-yellow-jonquil {
  background: #f4ca16 linear-gradient(180deg, #f4ca16, #fada5e) repeat-x !important;
  color: #1f2d3d;
}

/* Stil de Grain Yellow → Arylide Yellow */
.bg-gradient-yellow-stil {
  background: #fada5e linear-gradient(180deg, #fada5e, #e9d66b) repeat-x !important;
  color: #1f2d3d;
}

/* Mikado Yellow → Royal Yellow */
.bg-gradient-yellow-mikado {
  background: #ffc40c linear-gradient(180deg, #ffc40c, #fada5e) repeat-x !important;
  color: #1f2d3d;
}

/* Vegas Gold → Old Gold */
.bg-gradient-yellow-vegas {
  background: #c5b358 linear-gradient(180deg, #c5b358, #cfb53b) repeat-x !important;
  color: #fff;
}

/* Metallic Gold → Satin Sheen Gold */
.bg-gradient-yellow-metallic {
  background: #d4af37 linear-gradient(180deg, #d4af37, #cba135) repeat-x !important;
  color: #fff;
}

/* Honey Yellow → Lemon Curry */
.bg-gradient-yellow-honey {
  background: #f0c42d linear-gradient(180deg, #f0c42d, #cca01d) repeat-x !important;
  color: #fff;
}

/* Dandelion → Jonquil */
.bg-gradient-yellow-dandelion {
  background: #f0e130 linear-gradient(180deg, #f0e130, #fada5e) repeat-x !important;
  color: #1f2d3d;
}

/* Uranian Blue → Pale Yellow */
.bg-gradient-yellow-uranian {
  background: #afdbd5 linear-gradient(180deg, #afdbd5, #ffffcc) repeat-x !important;
  color: #1f2d3d;
}

/* Imperial Yellow → Chinese Yellow */
.bg-gradient-yellow-imperial {
  background: #ffb200 linear-gradient(180deg, #ffb200, #ff9900) repeat-x !important;
  color: #1f2d3d;
}

/* Lime → Chartreuse */
.bg-gradient-green-lime {
  background: #00ff00 linear-gradient(180deg, #00ff00, #7fff00) repeat-x !important;
  color: #1f2d3d;
}

/* Forest Green → Dark Green */
.bg-gradient-green-forest {
  background: #228b22 linear-gradient(180deg, #228b22, #006400) repeat-x !important;
  color: #fff;
}

/* Spring Green → Medium Spring Green */
.bg-gradient-green-spring {
  background: #00ff7f linear-gradient(180deg, #00ff7f, #00fa9a) repeat-x !important;
  color: #1f2d3d;
}

/* Sea Green → Medium Sea Green */
.bg-gradient-green-sea {
  background: #2e8b57 linear-gradient(180deg, #2e8b57, #3cb371) repeat-x !important;
  color: #fff;
}

/* Olive → Dark Olive Green */
.bg-gradient-green-olive {
  background: #808000 linear-gradient(180deg, #808000, #556b2f) repeat-x !important;
  color: #fff;
}

/* Pale Green → Light Green */
.bg-gradient-green-pale {
  background: #98fb98 linear-gradient(180deg, #98fb98, #90ee90) repeat-x !important;
  color: #1f2d3d;
}

/* Mint Green → Honeydew */
.bg-gradient-green-mint {
  background: #98ff98 linear-gradient(180deg, #98ff98, #f0fff0) repeat-x !important;
  color: #1f2d3d;
}

/* Jade → Malachite */
.bg-gradient-green-jade {
  background: #00a86b linear-gradient(180deg, #00a86b, #0bda51) repeat-x !important;
  color: #fff;
}

/* Emerald → Viridian */
.bg-gradient-green-emerald {
  background: #50c878 linear-gradient(180deg, #50c878, #40826d) repeat-x !important;
  color: #fff;
}

/* Sage → Celadon */
.bg-gradient-green-sage {
  background: #b2ac88 linear-gradient(180deg, #b2ac88, #ace1af) repeat-x !important;
  color: #1f2d3d;
}

/* Shamrock → Erin */
.bg-gradient-green-shamrock {
  background: #45cea2 linear-gradient(180deg, #45cea2, #00ff40) repeat-x !important;
  color: #fff;
}

/* Neon Green → Harlequin */
.bg-gradient-green-neon {
  background: #39ff14 linear-gradient(180deg, #39ff14, #3fff00) repeat-x !important;
  color: #1f2d3d;
}

/* Paris Green → Persian Green */
.bg-gradient-green-paris {
  background: #50c878 linear-gradient(180deg, #50c878, #00a693) repeat-x !important;
  color: #fff;
}

/* Army Green → Olive Drab */
.bg-gradient-green-army {
  background: #4b5320 linear-gradient(180deg, #4b5320, #6b8e23) repeat-x !important;
  color: #fff;
}

/* Bottle Green → Brunswick Green */
.bg-gradient-green-bottle {
  background: #006a4e linear-gradient(180deg, #006a4e, #1b4d3e) repeat-x !important;
  color: #fff;
}

/* Myrtle Green → Pine Green */
.bg-gradient-green-myrtle {
  background: #317873 linear-gradient(180deg, #317873, #01796f) repeat-x !important;
  color: #fff;
}

/* Islamic Green → Pakistan Green */
.bg-gradient-green-islamic {
  background: #009000 linear-gradient(180deg, #009000, #006600) repeat-x !important;
  color: #fff;
}

/* Dartmouth Green → India Green */
.bg-gradient-green-dartmouth {
  background: #00703c linear-gradient(180deg, #00703c, #138808) repeat-x !important;
  color: #fff;
}

/* Sacramento Green → British Racing Green */
.bg-gradient-green-sacramento {
  background: #043927 linear-gradient(180deg, #043927, #004225) repeat-x !important;
  color: #fff;
}

/* Amazon → Jungle Green */
.bg-gradient-green-amazon {
  background: #3b7a57 linear-gradient(180deg, #3b7a57, #29ab87) repeat-x !important;
  color: #fff;
}

/* Hot Pink → Deep Pink */
.bg-gradient-fuchsia-hotpink {
  background: #ff69b4 linear-gradient(180deg, #ff69b4, #ff1493) repeat-x !important;
  color: #fff;
}

/* Magenta → Fuchsia */
.bg-gradient-fuchsia-magenta {
  background: #ff00ff linear-gradient(180deg, #ff00ff, #ff00ff) repeat-x !important;
  color: #fff;
}

/* Pink → Light Pink */
.bg-gradient-fuchsia-pink {
  background: #ffc0cb linear-gradient(180deg, #ffc0cb, #ffb6c1) repeat-x !important;
  color: #1f2d3d;
}

/* Rose Pink → Barbie Pink */
.bg-gradient-fuchsia-rose {
  background: #ff66cc linear-gradient(180deg, #ff66cc, #e0218a) repeat-x !important;
  color: #fff;
}

/* Lavender Pink → Mauve */
.bg-gradient-fuchsia-lavender {
  background: #fbaed2 linear-gradient(180deg, #fbaed2, #e0b0ff) repeat-x !important;
  color: #1f2d3d;
}

/* Cotton Candy → Baby Pink */
.bg-gradient-fuchsia-cottoncandy {
  background: #ffbcd9 linear-gradient(180deg, #ffbcd9, #f4c2c2) repeat-x !important;
  color: #1f2d3d;
}

/* Cerise → Raspberry */
.bg-gradient-fuchsia-cerise {
  background: #de3163 linear-gradient(180deg, #de3163, #e30b5d) repeat-x !important;
  color: #fff;
}

/* Hollywood Cerise → Persian Rose */
.bg-gradient-fuchsia-hollywood {
  background: #f400a1 linear-gradient(180deg, #f400a1, #fe28a2) repeat-x !important;
  color: #fff;
}

/* French Pink → Carmine Pink */
.bg-gradient-fuchsia-french {
  background: #fd6c9e linear-gradient(180deg, #fd6c9e, #eb4c42) repeat-x !important;
  color: #fff;
}

/* Bubblegum Pink → Hot Pink */
.bg-gradient-fuchsia-bubblegum {
  background: #fe5bac linear-gradient(180deg, #fe5bac, #ff69b4) repeat-x !important;
  color: #fff;
}

/* Flamingo Pink → Salmon Pink */
.bg-gradient-fuchsia-flamingo {
  background: #fc8eac linear-gradient(180deg, #fc8eac, #ff91a4) repeat-x !important;
  color: #1f2d3d;
}

/* Tango Pink → Congo Pink */
.bg-gradient-fuchsia-tango {
  background: #e4717a linear-gradient(180deg, #e4717a, #f88379) repeat-x !important;
  color: #fff;
}

/* Persian Pink → Thulian Pink */
.bg-gradient-fuchsia-persian {
  background: #f77fbe linear-gradient(180deg, #f77fbe, #de6fa1) repeat-x !important;
  color: #fff;
}

/* Mexican Pink → Fandango Pink */
.bg-gradient-fuchsia-mexican {
  background: #e4007c linear-gradient(180deg, #e4007c, #de5285) repeat-x !important;
  color: #fff;
}

/* Shocking Pink → Ultra Pink */
.bg-gradient-fuchsia-shocking {
  background: #fc0fc0 linear-gradient(180deg, #fc0fc0, #ff6fff) repeat-x !important;
  color: #fff;
}

/* Razzle Dazzle Rose → Steel Pink */
.bg-gradient-fuchsia-razzle {
  background: #ff33cc linear-gradient(180deg, #ff33cc, #cc33cc) repeat-x !important;
  color: #fff;
}

/* Deep Fuchsia → Byzantine */
.bg-gradient-fuchsia-deep {
  background: #c154c1 linear-gradient(180deg, #c154c1, #bd33a4) repeat-x !important;
  color: #fff;
}

/* Orchid Pink → Fairy Tale */
.bg-gradient-fuchsia-orchid {
  background: #f2bdcd linear-gradient(180deg, #f2bdcd, #ffc1cc) repeat-x !important;
  color: #1f2d3d;
}

/* Amaranth Pink → China Pink */
.bg-gradient-fuchsia-amaranth {
  background: #f19cbb linear-gradient(180deg, #f19cbb, #de6fa1) repeat-x !important;
  color: #fff;
}

/* Tickle Me Pink → Mauvelous */
.bg-gradient-fuchsia-tickle {
  background: #fc89ac linear-gradient(180deg, #fc89ac, #ef98aa) repeat-x !important;
  color: #1f2d3d;
}

/* Lavender → Lilac */
.bg-gradient-violet-lavender {
  background: #e6e6fa linear-gradient(180deg, #e6e6fa, #c8a2c8) repeat-x !important;
  color: #1f2d3d;
}

/* Plum → Orchid */
.bg-gradient-violet-plum {
  background: #dda0dd linear-gradient(180deg, #dda0dd, #da70d6) repeat-x !important;
  color: #1f2d3d;
}

/* Indigo → Violet */
.bg-gradient-violet-indigo {
  background: #4b0082 linear-gradient(180deg, #4b0082, #8f00ff) repeat-x !important;
  color: #fff;
}

/* Amethyst → Purple */
.bg-gradient-violet-amethyst {
  background: #9966cc linear-gradient(180deg, #9966cc, #800080) repeat-x !important;
  color: #fff;
}

/* Thistle → Mauve */
.bg-gradient-violet-thistle {
  background: #d8bfd8 linear-gradient(180deg, #d8bfd8, #e0b0ff) repeat-x !important;
  color: #1f2d3d;
}

/* Heliotrope → Periwinkle */
.bg-gradient-violet-heliotrope {
  background: #df73ff linear-gradient(180deg, #df73ff, #ccccff) repeat-x !important;
  color: #1f2d3d;
}

/* Byzantium → Palatinate Purple */
.bg-gradient-violet-byzantium {
  background: #702963 linear-gradient(180deg, #702963, #682860) repeat-x !important;
  color: #fff;
}

/* Eggplant → Grape */
.bg-gradient-violet-eggplant {
  background: #614051 linear-gradient(180deg, #614051, #6f2da8) repeat-x !important;
  color: #fff;
}

/* Iris → Blue Violet */
.bg-gradient-violet-iris {
  background: #5a4fcf linear-gradient(180deg, #5a4fcf, #8a2be2) repeat-x !important;
  color: #fff;
}

/* Mulberry → Boysenberry */
.bg-gradient-violet-mulberry {
  background: #c54b8c linear-gradient(180deg, #c54b8c, #873260) repeat-x !important;
  color: #fff;
}

/* Wisteria → African Violet */
.bg-gradient-violet-wisteria {
  background: #c9a0dc linear-gradient(180deg, #c9a0dc, #b284be) repeat-x !important;
  color: #1f2d3d;
}

/* Chinese Violet → Japanese Violet */
.bg-gradient-violet-chinese {
  background: #856088 linear-gradient(180deg, #856088, #5b3256) repeat-x !important;
  color: #fff;
}

/* Russian Violet → Persian Indigo */
.bg-gradient-violet-russian {
  background: #32174d linear-gradient(180deg, #32174d, #32127a) repeat-x !important;
  color: #fff;
}

/* Tyrian Purple → Imperial Purple */
.bg-gradient-violet-tyrian {
  background: #66023c linear-gradient(180deg, #66023c, #602f6b) repeat-x !important;
  color: #fff;
}

/* Patriarch → Mardi Gras */
.bg-gradient-violet-patriarch {
  background: #800080 linear-gradient(180deg, #800080, #880085) repeat-x !important;
  color: #fff;
}

/* Eminence → Pomp and Power */
.bg-gradient-violet-eminence {
  background: #6c3082 linear-gradient(180deg, #6c3082, #86608e) repeat-x !important;
  color: #fff;
}

/* Finn → Twilight Lavender */
.bg-gradient-violet-finn {
  background: #683068 linear-gradient(180deg, #683068, #8a496b) repeat-x !important;
  color: #fff;
}

/* Palatinate → Veronica */
.bg-gradient-violet-palatinate {
  background: #682860 linear-gradient(180deg, #682860, #a020f0) repeat-x !important;
  color: #fff;
}

/* Dark Byzantium → Dark Purple */
.bg-gradient-violet-darkbyzantium {
  background: #5d3954 linear-gradient(180deg, #5d3954, #301934) repeat-x !important;
  color: #fff;
}

/* Electric Violet → Electric Purple */
.bg-gradient-violet-electric {
  background: #8f00ff linear-gradient(180deg, #8f00ff, #bf00ff) repeat-x !important;
  color: #fff;
}

/* Valentine Red → Passion Pink */
.bg-gradient-red-valentine {
  background: #e55451 linear-gradient(180deg, #e55451, #ff69b4) repeat-x !important;
  color: #fff;
}

/* Christmas Red → Holly Berry */
.bg-gradient-red-christmas {
  background: #bb2528 linear-gradient(180deg, #bb2528, #a81c1d) repeat-x !important;
  color: #fff;
}

/* Chinese Red → Imperial Red */
.bg-gradient-red-chinese {
  background: #aa381e linear-gradient(180deg, #aa381e, #ed2939) repeat-x !important;
  color: #fff;
}

/* Sangria → Wine Red */
.bg-gradient-red-sangria {
  background: #92000a linear-gradient(180deg, #92000a, #722f37) repeat-x !important;
  color: #fff;
}

/* Garnet → Bordeaux */
.bg-gradient-red-garnet {
  background: #733635 linear-gradient(180deg, #733635, #4c1c24) repeat-x !important;
  color: #fff;
}

/* Poppy Red → Geranium */
.bg-gradient-red-poppy {
  background: #dc343b linear-gradient(180deg, #dc343b, #d53032) repeat-x !important;
  color: #fff;
}

/* Terracotta → Burnt Sienna */
.bg-gradient-red-terracotta {
  background: #e2725b linear-gradient(180deg, #e2725b, #e97451) repeat-x !important;
  color: #fff;
}

/* Rosewood → Mahogany */
.bg-gradient-red-rosewood {
  background: #65000b linear-gradient(180deg, #65000b, #c04000) repeat-x !important;
  color: #fff;
}

/* Coral Pink → Salmon Pink */
.bg-gradient-red-coralpink {
  background: #f88379 linear-gradient(180deg, #f88379, #ff91a4) repeat-x !important;
  color: #1f2d3d;
}

/* Blush → Misty Rose */
.bg-gradient-red-blush {
  background: #de5d83 linear-gradient(180deg, #de5d83, #ffe4e1) repeat-x !important;
  color: #1f2d3d;
}

/* Watermelon → Light Coral */
.bg-gradient-red-watermelon {
  background: #fc6c85 linear-gradient(180deg, #fc6c85, #f08080) repeat-x !important;
  color: #fff;
}

/* Brick Red → Rust */
.bg-gradient-red-brick {
  background: #8b4513 linear-gradient(180deg, #8b4513, #b7410e) repeat-x !important;
  color: #fff;
}

/* Dark Scarlet → Blood */
.bg-gradient-red-darkscarlet {
  background: #560319 linear-gradient(180deg, #560319, #660000) repeat-x !important;
  color: #fff;
}

/* Neon Red → Electric Crimson */
.bg-gradient-red-neon {
  background: #ff073a linear-gradient(180deg, #ff073a, #ff0055) repeat-x !important;
  color: #fff;
}

/* Ruby Red → Garnet */
.bg-gradient-red-rubyred {
  background: #9b111e linear-gradient(180deg, #9b111e, #733635) repeat-x !important;
  color: #fff;
}

/* Fire Red → Flame */
.bg-gradient-red-firered {
  background: #ce2029 linear-gradient(180deg, #ce2029, #e25822) repeat-x !important;
  color: #fff;
}

/* Persian Red → Indian Red */
.bg-gradient-red-persian {
  background: #cc3333 linear-gradient(180deg, #cc3333, #cd5c5c) repeat-x !important;
  color: #fff;
}

/* Oxide Red → Venetian Red */
.bg-gradient-red-oxidized {
  background: #642424 linear-gradient(180deg, #642424, #c80815) repeat-x !important;
  color: #fff;
}

/* Dark Candy Apple → Cordovan */
.bg-gradient-red-candyapple {
  background: #a40000 linear-gradient(180deg, #a40000, #893f45) repeat-x !important;
  color: #fff;
}

/* Rose Taupe → Dark Chestnut */
.bg-gradient-red-rosetaupe {
  background: #905d5d linear-gradient(180deg, #905d5d, #986960) repeat-x !important;
  color: #fff;
}



/* ========================================
   Extra Solid Color Utility Classes
=========================================== */


/* Sky Blue */
.bg-sky {
  background-color: #00c6ff !important;
  color: #fff !important;
}

/* Cyan */
.bg-cyan {
  background-color: #17d4d4 !important;
  color: #fff !important;
}

/* Steel Gray */
.bg-steel {
  background-color: #5a5a5a !important;
  color: #fff !important;
}

/* Slate */
.bg-slate {
  background-color: #708090 !important;
  color: #fff !important;
}

/* Coffee */
.bg-coffee {
  background-color: #6f4e37 !important;
  color: #fff !important;
}

/* Gold */
.bg-gold {
  background-color: #ffd700 !important;
  color: #1f2d3d !important;
}

/* Bronze */
.bg-bronze {
  background-color: #cd7f32 !important;
  color: #fff !important;
}

/* Mint */
.bg-mint {
  background-color: #98ff98 !important;
  color: #1f2d3d !important;
}

/* Rose */
.bg-rose {
  background-color: #ff66cc !important;
  color: #fff !important;
}

/* Charcoal */
.bg-charcoal {
  background-color: #36454f !important;
  color: #fff !important;
}

.bg-lavender  { 
    background-color: #e6e6fa !important; 
    color: #1f2d3d !important; 
}
.bg-turquoise { 
    background-color: #40e0d0 !important; 
    color: #1f2d3d !important; 
}

/* Plum */
.bg-plum {
  background-color: #8e4585 !important;
  color: #fff !important;
}

/* Coral */
.bg-coral {
  background-color: #ff7f50 !important;
  color: #fff !important;
}

/* Indigo Deep */
.bg-indigo-deep {
  background-color: #4b0082 !important;
  color: #fff !important;
}

/* Sky Dark */
.bg-sky-dark {
  background-color: #0093e9 !important;
  color: #fff !important;
}

/* Lemon */
.bg-lemon {
  background-color: #fff44f !important;
  color: #1f2d3d !important;
}

/* Aqua Deep */
.bg-aqua-deep {
  background-color: #018786 !important;
  color: #fff !important;
}

/* Crimson */
.bg-crimson {
  background-color: #dc143c !important;
  color: #fff !important;
}

/* Forest */
.bg-forest {
  background-color: #228b22 !important;
  color: #fff !important;
}

/* Midnight */
.bg-midnight {
  background-color: #191970 !important;
  color: #fff !important;
}

/* Sand */
.bg-sand {
  background-color: #f4a460 !important;
  color: #1f2d3d !important;
}

/* Periwinkle */
.bg-periwinkle {
  background-color: #CCCCFF !important;
  color: #1f2d3d !important;
}

/* Mahogany */
.bg-mahogany {
  background-color: #C04000 !important;
  color: #fff !important;
}

/* Seafoam */
.bg-seafoam {
  background-color: #98F5FF !important;
  color: #1f2d3d !important;
}

/* Tangerine */
.bg-tangerine {
  background-color: #F28500 !important;
  color: #fff !important;
}

/* Orchid */
.bg-orchid {
  background-color: #DA70D6 !important;
  color: #fff !important;
}

/* Olive */
.bg-olive {
  background-color: #808000 !important;
  color: #fff !important;
}

/* Raspberry */
.bg-raspberry {
  background-color: #E30B5D !important;
  color: #fff !important;
}

/* Denim */
.bg-denim {
  background-color: #1560BD !important;
  color: #fff !important;
}

/* Butter */
.bg-butter {
  background-color: #FDFD96 !important;
  color: #1f2d3d !important;
}

/* Eggplant */
.bg-eggplant {
  background-color: #614051 !important;
  color: #fff !important;
}

/* Teal */
.bg-teal {
  background-color: #008080 !important;
  color: #fff !important;
}

/* Marigold */
.bg-marigold {
  background-color: #EAA221 !important;
  color: #1f2d3d !important;
}

/* Lilac */
.bg-lilac {
  background-color: #C8A2C8 !important;
  color: #1f2d3d !important;
}

/* Brick */
.bg-brick {
  background-color: #8B1406 !important;
  color: #fff !important;
}

/* Peach */
.bg-peach {
  background-color: #FFE5B4 !important;
  color: #1f2d3d !important;
}

/* Graphite */
.bg-graphite {
  background-color: #383838 !important;
  color: #fff !important;
}

/* Azure */
.bg-azure {
  background-color: #007FFF !important;
  color: #fff !important;
}

/* Sangria */
.bg-sangria {
  background-color: #92000A !important;
  color: #fff !important;
}

/* Moss */
.bg-moss {
  background-color: #8A9A5B !important;
  color: #fff !important;
}

/* Champagne */
.bg-champagne {
  background-color: #F7E7CE !important;
  color: #1f2d3d !important;
}