@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz@9..40&family=Fira+Code&family=Poppins&family=Source+Code+Pro&family=Work+Sans&display=swap');

.theme-gray {
	font-family: 'DM Sans', sans-serif;

	/* 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);
	}
}
/* ********************************************************************************************* */
/*  CARD COLOURING - DONE VIA "ID:" TAGS IN SERVICES.YAML  */
.service-card::before {
    content: "";
    opacity: 0.40;
    position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; z-index: 0;
}
/* DARK */
#red    .dark\:hover\:bg-white\/10:is(.dark *).service-card::before { background-color: #812020; }
#yellow .dark\:hover\:bg-white\/10:is(.dark *).service-card::before { background-color: #818120; }
#green  .dark\:hover\:bg-white\/10:is(.dark *).service-card::before { background-color: #208120; }
#cyan   .dark\:hover\:bg-white\/10:is(.dark *).service-card::before { background-color: #208181; }
#blue   .dark\:hover\:bg-white\/10:is(.dark *).service-card::before { background-color: #202081; }
#purple .dark\:hover\:bg-white\/10:is(.dark *).service-card::before { background-color: #812081; }
#black  .dark\:hover\:bg-white\/10:is(.dark *).service-card::before { background-color: #000000; }
#white  .dark\:hover\:bg-white\/10:is(.dark *).service-card::before { background-color: #ffffff; }
/* LIGHT */
#red    .hover\:bg-theme-300\/20.service-card::before { background-color: #ff0000; }
#yellow .hover\:bg-theme-300\/20.service-card::before { background-color: #ffff00; }
#green  .hover\:bg-theme-300\/20.service-card::before { background-color: #00ff00; }
#cyan   .hover\:bg-theme-300\/20.service-card::before { background-color: #00ffff; }
#blue   .hover\:bg-theme-300\/20.service-card::before { background-color: #0000ff; }
#purple .hover\:bg-theme-300\/20.service-card::before { background-color: #ff00ff; }
#black  .hover\:bg-theme-300\/20.service-card::before { background-color: #ffffff; }
#white  .hover\:bg-theme-300\/20.service-card::before { background-color: #000000; }
#orange  .hover\:bg-theme-300\/20.service-card::before { background-color: #ffa500; }
#pink  .hover\:bg-theme-300\/20.service-card::before { background-color: #ffc0cb; }
#teal  .hover\:bg-theme-300\/20.service-card::before { background-color: #008080; }
#magenta  .hover\:bg-theme-300\/20.service-card::before { background-color: #ff00ff; }
#lime  .hover\:bg-theme-300\/20.service-card::before { background-color: #00ff00; }
#navy  .hover\:bg-theme-300\/20.service-card::before { background-color: #000080; }
#maroon  .hover\:bg-theme-300\/20.service-card::before { background-color: #800000; }
#olive  .hover\:bg-theme-300\/20.service-card::before { background-color: #808000; }
#silver  .hover\:bg-theme-300\/20.service-card::before { background-color: #c0c0c0; }
#gray  .hover\:bg-theme-300\/20.service-card::before { background-color: #808080; }
#gold  .hover\:bg-theme-300\/20.service-card::before { background-color: #ffd700; }
#coral  .hover\:bg-theme-300\/20.service-card::before { background-color: #ff7f50; }
#salmon  .hover\:bg-theme-300\/20.service-card::before { background-color: #fa8072; }
#indigo  .hover\:bg-theme-300\/20.service-card::before { background-color: #4b0082; }
#violet  .hover\:bg-theme-300\/20.service-card::before { background-color: #ee82ee; }
#turquoise  .hover\:bg-theme-300\/20.service-card::before { background-color: #40e0d0; }
#plum  .hover\:bg-theme-300\/20.service-card::before { background-color: #dda0dd; }
#orchid  .hover\:bg-theme-300\/20.service-card::before { background-color: #da70d6; }
#tan  .hover\:bg-theme-300\/20.service-card::before { background-color: #d2b48c; }
#beige  .hover\:bg-theme-300\/20.service-card::before { background-color: #f5f5dc; }
#mint  .hover\:bg-theme-300\/20.service-card::before { background-color: #98ff98; }
#lavender  .hover\:bg-theme-300\/20.service-card::before { background-color: #e6e6fa; }
#chocolate  .hover\:bg-theme-300\/20.service-card::before { background-color: #d2691e; }
#crimson  .hover\:bg-theme-300\/20.service-card::before { background-color: #dc143c; }
#khaki  .hover\:bg-theme-300\/20.service-card::before { background-color: #f0e68c; }
#aqua  .hover\:bg-theme-300\/20.service-card::before { background-color: #00ffff; }
#azure  .hover\:bg-theme-300\/20.service-card::before { background-color: #f0ffff; }
#bisque  .hover\:bg-theme-300\/20.service-card::before { background-color: #ffe4c4; }
#bronze  .hover\:bg-theme-300\/20.service-card::before { background-color: #cd7f32; }
#charcoal  .hover\:bg-theme-300\/20.service-card::before { background-color: #36454f; }
#emerald  .hover\:bg-theme-300\/20.service-card::before { background-color: #50c878; }
#ivory  .hover\:bg-theme-300\/20.service-card::before { background-color: #fffff0; }
#jade  .hover\:bg-theme-300\/20.service-card::before { background-color: #00a86b; }
#peach  .hover\:bg-theme-300\/20.service-card::before { background-color: #ffe5b4; }
#rose  .hover\:bg-theme-300\/20.service-card::before { background-color: #ff007f; }
#ruby  .hover\:bg-theme-300\/20.service-card::before { background-color: #e0115f; }
#sapphire  .hover\:bg-theme-300\/20.service-card::before { background-color: #0f52ba; }
#sepia  .hover\:bg-theme-300\/20.service-card::before { background-color: #704214; }
#steel  .hover\:bg-theme-300\/20.service-card::before { background-color: #4682b4; }
#amber  .hover\:bg-theme-300\/20.service-card::before { background-color: #ffbf00; }
#cerulean  .hover\:bg-theme-300\/20.service-card::before { background-color: #007ba7; }
#periwinkle  .hover\:bg-theme-300\/20.service-card::before { background-color: #ccccff; }
#scarlet  .hover\:bg-theme-300\/20.service-card::before { background-color: #ff2400; }
#slate  .hover\:bg-theme-300\/20.service-card::before { background-color: #708090; }