.theme-gray {
  /* DRACULA COLORS */
  --dracula-background: #282a36;
  --dracula-background-dark: #15161d;
  --dracula-foreground: #44475a;
  --dracula-text: #f8f8f2;
  --dracula-slate: #6272a4;
  --dracula-cyan: #8be9fd;
  --dracula-green: #50fa7ae8;
  --dracula-orange: #ffb86c;
  --dracula-pink: #ff79c6;
  --dracula-purple: #bd93f9;
  --dracula-red: #ff5555;
  --dracula-yellow: #f1fa8c;

  /* Theme preset colors */
  --color-50: 249 250 251;
  --color-100: 243 244 246;
  --color-200: 248 248 242; /* Text Color - use Dracula text color */
  --color-300: 209 213 219;
  --color-400: 156 163 175;
  --color-500: 107 114 128;
  --color-600: 75 85 99;
  --color-700: 55 65 81;
  --color-800: 40 42 54; /* Background color - use Dracula theme color */
  --color-900: 21 22 29; /* Dracula specific */
  --color-logo-start: 156 163 175;
  --color-logo-stop: 55 65 81;

  --standard-bg: #44475a8e;

  /* INFO WIDGET COLORS */
  --info-widgets: var(--dracula-purple);
  --resource-bar-bg: var(--standard-bg);
  --resource-bar-fg: var(--dracula-green);

  --widget-border: var(--dracula-foreground);

  /* SERVICES COLORS */
  --service-group: var(--dracula-purple);

  --service-name: var(--dracula-text);
  --service-description: var(--dracula-purple);

  --service-block-bg: #232530;
  --service-block-text: var(--dracula-pink);

  /* BOOKMARKS COLORS */
  --bookmark-group: var(--dracula-purple);

  --bookmark-icon-bg: #44475a60;
  --bookmark-icon: var(--dracula-purple);
  --bookmark-name: var(--dracula-text);

  /* ALL CARD COLORS */
  --card-color: #44475a46;
  --card-color-hover: #44475a91;

  /* FOOTER COLORS */
  --footer-items: var(--dracula-pink);

  /* FOOTER COLORS */
  --scrollbar-fg: var(--dracula-purple);
  --scrollbar-bg: var(--standard-bg);

  /*Class color values */
  .service-tags .dark\:bg-theme-900\/50 {
    background-color: rgb(var(--color-900) / 0.3) !important;
  }

  /*******************************
  *  INFORMATION WIDGETS STYLES  *
  *******************************/
  #information-widgets {
    border-color: var(--widget-border);
  }

  #information-widgets * {
    color: var(--info-widgets);
  }

  .resource-usage {
    background-color: var(--resource-bar-bg);
  }

  .resource-usage > div {
    background-color: var(--resource-bar-fg);
  }

  /*******************************
  *       SERVICES STYLES        *
  *******************************/
  .service-group-icon > div {
    background: var(--service-group) !important; /* group label ICON color */
  }

  .service-group-name {
    color: var(--service-group); /* group label NAME color */
  }

  .services-group > button > svg {
    color: var(--service-group); /* group label EXPAND/COLLAPSE ICON color */
  }

  .service-card {
    background-color: var(--card-color);
  }

  .service-card:hover {
    background-color: var(--card-color-hover);
  }

  .service-name.text-sm {
    font-size: 0.95rem;
    color: var(--service-name);
  }

  .service-description.text-xs {
    font-size: 0.75rem;
    color: var(--service-description);
  }

  .service img {
    border-radius: 25%;
  }

  .service-block {
    background: var(--service-block-bg);
  }

  .service-block .uppercase {
    color: var(--service-block-text);
  }

  .service-block .font-thin {
    color: var(--dracula-text);
  }

  /*******************************
  *       BOOKMARK STYLES        *
  *******************************/

  .bookmark-group-name {
    color: var(--bookmark-group);
  }

  .bookmark-icon {
    background-color: var(--bookmark-icon-bg) !important;
  }

  .bookmark-icon > div > div {
    background: var(
      --bookmark-icon
    ) !important; /* If using si or md icons, make default purple */
  }

  .bookmark-name.text-xs {
    font-size: 0.85rem;
    color: var(--bookmark-name);
  }

  li.bookmark > a {
    background-color: var(--card-color);
  }

  li.bookmark > a:hover {
    background-color: var(--card-color-hover);
  }

  /*******************************
  *       CALENDAR STYLES        *
  *******************************/

  #dracula-calendar .flex.justify-between.flex-wrap span {
    color: var(--dracula-purple);
  }

  /*******************************
  *        FOOTER STYLES         *
  *******************************/

  #footer svg {
    color: var(--footer-items);
  }

  /*******************************
  *      SCROLLBAR STYLES        *
  *******************************/

  * {
    --scrollbar-thumb: var(--scrollbar-fg);
    --scrollbar-track: var(--scrollbar-bg);
  }

  /*******************************
  *       GLANCES STYLES         *
  *******************************/

  li[id^="glances-"] .recharts-surface > g:nth-of-type(1) path:nth-child(1) {
    fill: var(--dracula-green);
    fill-opacity: 0.15;
  }

  li[id^="glances-"] .recharts-surface g:nth-of-type(1) path:nth-child(2) {
    stroke: var(--dracula-green);
    stroke-opacity: 0.5;
  }

  li[id^="glances-"] .recharts-surface g:nth-of-type(2) path:nth-child(1) {
    fill: var(--dracula-purple);
    fill-opacity: 0.15;
  }

  li[id^="glances-"] .recharts-surface g:nth-of-type(2) path:nth-child(2) {
    stroke: var(--dracula-purple);
    stroke-opacity: 0.5;
  }

  li[id^="glances-"] .bottom-3.left-3 {
    color: var(--dracula-pink);
  }

  li[id^="glances-"] .bottom-3.right-3 .opacity-75 {
    color: var(--dracula-cyan);
    opacity: 1;
    font-size: 0.8rem;
  }

  li[id^="glances-"] .top-3.right-3 .opacity-50 {
    color: var(--dracula-cyan);
    opacity: 1;
    font-size: 0.8rem;
  }

  li[id^="glances-"] .opacity-50 {
    opacity: 0.8;
  }

  li[id^="glances-"] .flex.items-center.text-xs .text-right {
    color: var(--dracula-cyan);
  }

  li[id^="glances-"] .flex.items-center .opacity-25.w-14.text-right {
    color: var(--dracula-purple);
    opacity: 0.85;
  }

  li[id^="glances-"]
    .bottom-4.right-3.left-3.z-20
    .w-3.h-3.mr-1\.5.opacity-50
    > div {
    background: var(--dracula-green) !important;
    opacity: 1;
  }

  li[id^="glances-"] .bottom-4.right-3.left-3.z-20 .opacity-75.grow {
    color: var(--dracula-pink) !important;
    opacity: 0.75;
  }

  /*******************************
  *      HOMEPAGE PRESETS        *
  *******************************/
  .bg-amber-500 {
    background-color: var(--dracula-orange);
  }

  .bg-black {
    background-color: rgb(0 0 0);
  }

  .bg-blue-500 {
    background-color: var(--dracula-cyan);
  }

  .bg-cyan-500 {
    background-color: var(--dracula-cyan);
  }

  .bg-emerald-500 {
    background-color: var(--dracula-green);
  }

  .bg-fuchsia-500 {
    background-color: var(--dracula-pink);
  }

  .bg-gray-500 {
    background-color: var(--dracula-foreground);
  }

  .bg-green-500 {
    background-color: var(--dracula-green);
  }

  .bg-indigo-500 {
    background-color: var(--dracula-purple);
  }

  .bg-lime-500 {
    background-color: var(--dracula-green);
  }

  .bg-neutral-500 {
    background-color: rgb(115 115 115);
  }

  .bg-orange-400 {
    background-color: var(--dracula-orange);
  }

  .bg-orange-500 {
    background-color: var(--dracula-orange);
  }

  .bg-pink-500 {
    background-color: var(--dracula-pink);
  }

  .bg-purple-500 {
    background-color: var(--dracula-purple);
  }

  .bg-red-500 {
    background-color: var(--dracula-red);
  }

  .bg-rose-100 {
    background-color: rgb(255, 205, 205);
  }

  .bg-rose-500 {
    background-color: var(--dracula-red);
  }

  .bg-rose-900\/80 {
    background-color: var(--dracula-red);
  }

  .bg-sky-500 {
    background-color: var(--dracula-cyan);
  }

  .bg-slate-500 {
    background-color: var(--dracula-slate);
  }

  .bg-stone-500 {
    background-color: rgb(120 113 108);
  }

  .bg-teal-500 {
    background-color: rgb(20 184 166);
  }

  .bg-violet-500 {
    background-color: var(--dracula-purple);
  }

  .bg-white {
    background-color: var(--dracula-text);
  }

  .bg-white\/50 {
    background-color: hsla(0, 0%, 100%, 0.5);
  }

  .bg-yellow-500 {
    background-color: var(--dracula-yellow);
  }

  .bg-zinc-500 {
    background-color: rgb(113 113 122);
  }

  .text-amber-800 {
    color: var(--dracula-orange);
  }

  .text-black {
    color: rgb(0 0 0);
  }

  .text-black\/20 {
    color: rgba(0, 0, 0, 0.2);
  }

  .text-blue-500\/80 {
    color: rgba(139, 233, 253, 0.8);
  }

  .text-emerald-300 {
    color: var(--dracula-green);
  }

  .text-emerald-500\/80 {
    color: rgba(80, 250, 123, 0.8);
  }

  .text-gray-500 {
    color: rgb(107 114 128);
  }

  .text-green-500 {
    color: var(--dracula-green);
  }

  .text-orange-400\/50 {
    color: rgba(255, 184, 108, 0.5);
  }

  .text-red-400 {
    color: var(--dracula-red);
  }

  .text-red-500 {
    color: var(--dracula-red);
  }

  .text-red-500\/40 {
    color: rgba(255, 85, 85, 0.4);
  }

  .text-rose-300 {
    color: var(--dracula-red);
  }

  .text-rose-500 {
    color: var(--dracula-red);
  }

  .text-rose-500\/80 {
    color: rgba(255, 85, 85, 0.8);
  }

  .text-rose-900 {
    color: var(--dracula-red);
  }

  .text-white {
    color: var(--dracula-text);
  }
}