/* Default (fallback) theme */
:root {
  --body-background-image: url("/images/Graphics/Portal10.jpg");
  --body-background-color: rgba(0,0,0,1);
  --body-text-color:rgb(255, 255, 255);
  --button-bg:rgb(40, 53, 63);
  --button-bg-a: rgba(40, 53, 63,.9);   /*alpha version of button-bg */
  --button-color: rgb(255, 255, 255);
  --button-bg-hover: rgb(75, 98, 118);
  --button-bg-hover-opaque: rgba(75, 98, 118, 0.973);
  --button-bg-hover-faded: rgba(75, 98, 118, 0.851);
  --button-color-hover: rgb(255, 255, 255);
  --logo-path: "/images/Logos/Menu_Logo_0.svg";
  --header-bg-color: rgba(230,230,230,.9);
  --header-color: rgb(0, 0, 0);
  --sm-color: rgb(255, 255, 255);
  --sm-color-dark1: color-mix(in srgb, var(--sm-color) 90%, black);
  --sm-color-hover: var(--button-color-hover);
  --sm-bg: var(--button-bg);
  --sm-bg-hover: var(--button-bg-hover);
  --sm-bg-dark1: color-mix(in srgb, var(--sm-bg) 90%, black);
  --sm-bg-dark2: color-mix(in srgb, var(--sm-bg) 80%, black);
  --sm-button-bg: var(--button-bg-hover);
  --sm-button-color: var(--button-color-hover);
  --sm-button-bg-hover: var(--button-bg);
  --sm-button-color-hover: var(--button-color);
  --short-name: "Headwater Companies";
  --modal-background-color: rgb(0,0,0);
  --modal-text-color: rgb(255,255,255);
  --modal-header-background-color: rgb(25, 25, 25);
  --modal-footer-background-color: rgb(25, 25, 25);
  --modal-border-color: rgb(70, 70, 70);
  --modal-img-bg-color: rgb(255,255,255);
  --modal-table-th-bg-color: rgb(126,126,126);
  --modal-table-th-color: rgb(18,18,18);
  --modal-table-td-bg-color: rgb(18,18,18);
  --modal-table-td-color: rgb(255,255,255);
  --modal-scrollbar-slider: rgb(191, 191, 191);
  --modal-scrollbar-bg: rgb(0, 0, 0);
  --modal-hover-bg: rgb(40, 40, 40);

  /* public variables (not overridden in individual themes) */
  --pub-light-sm-white-mix: 20%;
  --pub-prod-category-background-mix: 40%;
  --pub-content-header-height: 140px;
  --pub-content-header-height-mobile: 90px;
}

/* Dark Theme for division 0 - Headwater */
:root[data-theme="0d"] {
  --body-background-image: url("/images/Graphics/Portal10.jpg");
  --button-bg: rgb(40, 53, 63);
  --button-bg-a: rgba(40, 53, 63,.9);  /*alpha version of button-bg */
  --button-color: rgb(255, 255, 255);
  --button-bg-hover: rgb(75, 98, 118);
  --button-bg-hover-opaque: rgba(75, 98, 118, 0.973);
  --button-bg-hover-faded: rgba(75, 98, 118, 0.851);
  --button-color-hover: rgb(255, 255, 255);
  --logo-path: "/images/Logos/Menu_Logo_0.svg";
  --short-name: "Headwater Companies";
  --initials: "HWC";
}

/* Dark Theme for division 100 - Drillers Service */
:root[data-theme="100d"] {
  --body-background-image: url("/images/Graphics/Portal9.jpg");
  --button-bg: rgb(7, 73, 101);
  --button-bg-a: rgba(7, 73, 101, .9);  /*alpha version of button-bg */
  --button-color: rgb(255, 255, 255);
  --button-bg-hover: rgb(0, 160, 223);
  --button-bg-hover-opaque: rgba(0, 160, 223, 0.973);
  --button-bg-hover-faded: rgba(0, 160, 223, 0.851);
  --button-color-hover: rgb(255, 255, 255);
  --logo-path: "/images/Logos/Menu_Logo_100.svg";
  --short-name: "Drillers Service";
  --initials: "DSI";
}

/* Dark Theme for division 200 - 2M Company */
:root[data-theme="200d"] {
  --body-background-image: url("/images/Graphics/Portal10.jpg");
  --button-bg: rgb(0, 82, 159);
  --button-bg-a: rgba(0, 82, 159,.9);   /*alpha version of button-bg */
  --button-color: rgb(255, 255, 255);
  --button-bg-hover: rgb(122, 180, 236);
  --button-bg-hover-opaque: rgba(122, 180, 236, 0.973);
  --button-bg-hover-faded: rgba(122, 180, 236, 0.851);
  --button-color-hover: rgb(0, 82, 159);
  --logo-path: "/images/Logos/Menu_Logo_200.svg";
  --short-name: "2M Company";
  --initials: "2M";
}

/* Dark Theme for division 300 - Headwater Wholesale */
:root[data-theme="300d"] {
  --body-background-image: url("/images/Graphics/Portal13.jpg");
  --button-bg: rgb(7, 73, 101);
  --button-bg-a: rgba(7, 73, 101,.9);   /*alpha version of button-bg */
  --button-color: rgb(255, 255, 255);
  --button-bg-hover: rgb(0, 160, 223);
  --button-bg-hover-opaque: rgba(0, 160, 223, 0.973);
  --button-bg-hover-faded: rgba(0, 160, 223, 0.851);
  --button-color-hover: rgb(255, 255, 255);
  --logo-path: "/images/Logos/Menu_Logo_300.svg";
  --short-name: "Headwater Wholesale";
  --initials: "HWW";
}

/* Dark Theme for division 340 - Blake */
:root[data-theme="340d"] {
  --body-background-image: url("/images/Graphics/Portal24.jpg");
  --button-bg: rgb(0, 43, 81);
  --button-bg-a: rgba(0, 43, 81,.9);   /*alpha version of button-bg */
  --button-color: rgb(255, 255, 255);
  --button-bg-hover: rgb(186, 35, 52);
  --button-bg-hover-opaque: rgba(186, 35, 52, 0.973);
  --button-bg-hover-faded: rgba(186, 35, 52, 0.851);
  --button-color-hover: rgb(255, 255, 255);
  --logo-path: "/images/Logos/Menu_Logo_340.svg";
  --short-name: "Blake";
  --initials: "BE";
}

/* Dark Theme for division 400 - Western Hydro */
:root[data-theme="400d"] {
  --body-background-image: url("/images/Graphics/Portal5.jpg");
  --button-bg: rgb(0, 33, 105);
  --button-bg-a: rgba(0, 33, 105,.9);   /*alpha version of button-bg */
  --button-color: rgb(255, 255, 255);
  --button-bg-hover: rgb(238, 118, 35);
  --button-bg-hover-opaque: rgba(238, 118, 35, 0.973);
  --button-bg-hover-faded: rgba(238, 118, 35, 0.851);
  --button-color-hover: rgb(255, 255, 255);
  --logo-path: "/images/Logos/Menu_Logo_400.svg";
  --short-name: "Western Hydro";
  --initials: "WH";
}

/* Dark Theme for division 430 - Gicon */
:root[data-theme="430d"] {
  --body-background-image: url("/images/Graphics/Portal20.jpg");
  --button-bg: rgb(0, 82, 159);
  --button-bg-a: rgba(0, 82, 159,.9);   /*alpha version of button-bg */
  --button-color: rgb(255, 255, 255);
  --button-bg-hover: rgb(118, 191, 92);
  --button-bg-hover-opaque: rgba(118, 191, 92, 0.973);
  --button-bg-hover-faded: rgba(118, 191, 92, 0.851);
  --button-color-hover: rgb(255, 255, 255);
  --logo-path: "/images/Logos/Menu_Logo_430.svg";
  --short-name: "Gicon";
  --initials: "GPE";
}

/* Dark Theme for division 500 - Valley Farms Supply */
:root[data-theme="500d"] {
  --body-background-image: url("/images/Graphics/Portal12.jpg");
  --button-bg: rgb(4, 56, 108);
  --button-bg-a: rgba(4, 56, 108,.9);   /*alpha version of button-bg */
  --button-color: rgb(255, 255, 255);
  --button-bg-hover: rgb(185, 13, 0);
  --button-bg-hover-opaque: rgba(185, 13, 0, 0.973);
  --button-bg-hover-faded: rgba(185, 13, 0, 0.851);
  --button-color-hover: rgb(255, 255, 255);
  --logo-path: "/images/Logos/Menu_Logo_500.svg";
  --short-name: "Valley Farms Supply";
  --initials: "VSF";
}

/* Dark Theme for division 550 - Milan Supply */
:root[data-theme="550d"] {
  --body-background-image: url("/images/Graphics/Portal3.jpg");
  --button-bg: rgb(64, 64, 64);
  --button-bg-a: rgba(64, 64, 64,.9);   /*alpha version of button-bg */
  --button-color: rgb(255, 255, 255);
  --button-bg-hover: rgb(237, 28, 36);
  --button-bg-hover-opaque: rgba(237, 28, 36, 0.973);
  --button-bg-hover-faded: rgba(237, 28, 36, 0.851);
  --button-color-hover: rgb(255, 255, 255);
  --logo-path: "/images/Logos/Menu_Logo_550.svg";
  --short-name: "Milan Supply";
  --initials: "MS";
}
/* Special-case for division 550: add a thin black border */
/* (this block will apply automatically when data-theme="550") */
:root[data-theme="550d"] .bodycontainer .btn-primary {
  border-color: #000000;
  border-style: solid;
  border-width: thin;
}

/* Dark Theme shared variables */
:root[data-theme="0d"], :root[data-theme="100d"], :root[data-theme="200d"], :root[data-theme="300d"], :root[data-theme="340d"], :root[data-theme="400d"], :root[data-theme="430d"], :root[data-theme="500d"], :root[data-theme="550d"] {
  --body-background-color: rgba(0,0,0,.9);
  --body-text-color:rgb(255, 255, 255);
  --header-bg-color: rgba(230,230,230,.9);
  --header-color: rgb(0, 0, 0);
  --sm-bg: var(--button-bg);
  --sm-bg-dark1: color-mix(in srgb, var(--sm-bg) 90%, black);
  --sm-bg-dark2: color-mix(in srgb, var(--sm-bg) 80%, black);
  --sm-bg-hover: var(--button-bg-hover);
  --sm-color: rgb(255, 255, 255);
  --sm-color-dark1: color-mix(in srgb, var(--sm-color) 90%, black);
  --sm-color-hover: var(--button-color-hover);
  --sm-button-bg: var(--button-bg-hover);
  --sm-button-color: var(--button-color-hover);
  --sm-button-bg-hover: var(--button-bg-hover);
  --sm-button-color-hover: var(--button-color);
  --prod-category-background: color-mix(in srgb, var(--button-bg-a) var(--pub-prod-category-background-mix), black);
  /* Modal css */
  --modal-background-color: rgb(0,0,0);
  --modal-text-color: rgb(255,255,255);
  --modal-header-background-color: rgb(25, 25, 25);
  --modal-footer-background-color: rgb(25, 25, 25);
  --modal-border-color: rgb(70, 70, 70);
  --modal-img-bg-color: rgb(255,255,255);
  --modal-table-th-bg-color: rgb(126,126,126);
  --modal-table-th-color: rgb(18,18,18);
  --modal-table-td-bg-color: rgb(18,18,18);
  --modal-table-td-color: rgb(255,255,255);
  --modal-scrollbar-slider: rgb(191, 191, 191);
  --modal-scrollbar-bg: rgb(0, 0, 0);
  --modal-hover-bg: rgb(40, 40, 40);
}


/* Light Theme for division 0 - Headwater */
:root[data-theme="0l"] {
  --body-background-image: url("/images/Graphics/Portal10.jpg");
  --button-bg: rgb(40, 53, 63);
  --button-bg-a: rgba(40, 53, 63, .9);   /*alpha version of button-bg */
  --button-color: rgb(255, 255, 255);
  --button-bg-hover: rgb(75, 98, 118);
  --button-bg-hover-opaque: rgba(75, 98, 118, 0.973);
  --button-bg-hover-faded: rgba(75, 98, 118, 0.851);
  --button-color-hover: rgb(255, 255, 255);
  --logo-path: "/images/Logos/Menu_Logo_0.svg";
  --short-name: "Headwater Companies";
  --initials: "HWC";
}

/* Light Theme for division 100 - Drillers Service */
:root[data-theme="100l"] {
  --body-background-image: url("/images/Graphics/Portal9.jpg");
  --button-bg: rgb(7, 73, 101);
  --button-bg-a: rgba(7,73,101,.9);  /*alpha version of button-bg */
  --button-color: rgb(255, 255, 255);
  --button-bg-hover: rgb(0, 160, 223);
  --button-bg-hover-opaque: rgba(0, 160, 223, 0.973);
  --button-bg-hover-faded: rgba(0, 160, 223, 0.851);
  --button-color-hover: rgb(255, 255, 255);
  --logo-path: "/images/Logos/Menu_Logo_100.svg";
  --short-name: "Drillers Service";
  --initials: "DSI";
}

/* Light Theme for division 200 - 2M Company */
:root[data-theme="200l"] {
  --body-background-image: url("/images/Graphics/Portal10.jpg");
  --button-bg: rgb(0, 82, 159);
  --button-bg-a: rgba(0, 82, 159, .9);  /*alpha version of button-bg */
  --button-color: rgb(255, 255, 255);
  --button-bg-hover: rgb(122, 180, 236);
  --button-bg-hover-opaque: rgba(122, 180, 236, 0.973);
  --button-bg-hover-faded: rgba(122, 180, 236, 0.851);
  --button-color-hover: rgb(0, 82, 159);
  --logo-path: "/images/Logos/Menu_Logo_200.svg";
  --short-name: "2M Company";
  --initials: "2M";
}

/* Light Theme for division 300 - Headwater Wholesale */
:root[data-theme="300l"] {
  --body-background-image: url("/images/Graphics/Portal13.jpg");
  --button-bg: rgb(7, 73, 101);
  --button-bg-a: rgba(7, 73, 101, .9); /*alpha version of button-bg */
  --button-color: rgb(255, 255, 255);
  --button-bg-hover: rgb(0, 160, 223);
  --button-bg-hover-opaque: rgba(0, 160, 223, 0.973);
  --button-bg-hover-faded: rgba(0, 160, 223, 0.851);
  --button-color-hover: rgb(255, 255, 255);
  --logo-path: "/images/Logos/Menu_Logo_300.svg";
  --short-name: "Headwater Wholesale";
  --initials: "HWW";
}

/* Light Theme for division 340 - Blake */
:root[data-theme="340l"] {
  --body-background-image: url("/images/Graphics/Portal24.jpg");
  --button-bg: rgb(0, 43, 81);
  --button-bg-a: rgba(0, 43, 81, .9); /*alpha version of button-bg */
  --button-color: rgb(255, 255, 255);
  --button-bg-hover: rgb(186, 35, 52);
  --button-bg-hover-opaque: rgba(186, 35, 52, 0.973);
  --button-bg-hover-faded: rgba(186, 35, 52, 0.851);
  --button-color-hover: rgb(255, 255, 255);
  --logo-path: "/images/Logos/Menu_Logo_340.svg";
  --short-name: "Blake";
  --initials: "BE";
}

/* Light Theme for division 400 - Western Hydro */
:root[data-theme="400l"] {
  --body-background-image: url("/images/Graphics/Portal5.jpg");
  --button-bg: rgb(0, 33, 105);
  --button-bg-a: rgba(0, 33, 105, .9); /*alpha version of button-bg */
  --button-color: rgb(255, 255, 255);
  --button-bg-hover: rgb(238, 118, 35);
  --button-bg-hover-opaque: rgba(238, 118, 35, 0.973);
  --button-bg-hover-faded: rgba(238, 118, 35, 0.851);
  --button-color-hover: rgb(255, 255, 255);
  --logo-path: "/images/Logos/Menu_Logo_400.svg";
  --short-name: "Western Hydro";
  --initials: "WH";
}

/* Light Theme for division 430 - Gicon */
:root[data-theme="430l"] {
  --body-background-image: url("/images/Graphics/Portal20.jpg");
  --button-bg: rgb(0, 82, 159);
  --button-bg-a: rgba(0, 82, 159, .9); /*alpha version of button-bg */
  --button-color: rgb(255, 255, 255);
  --button-bg-hover: rgb(118, 191, 92);
  --button-bg-hover-opaque: rgba(118, 191, 92, 0.973);
  --button-bg-hover-faded: rgba(118, 191, 92, 0.851);
  --button-color-hover: rgb(255, 255, 255);
  --logo-path: "/images/Logos/Menu_Logo_430.svg";
  --short-name: "Gicon";
  --initials: "GPE";
}

/* Light Theme for division 500 - Valley Farms Supply */
:root[data-theme="500l"] {
  --body-background-image: url("/images/Graphics/Portal12.jpg");
  --button-bg: rgb(4, 56, 108);
  --button-bg-a: rgba(4, 56, 108, .9); /*alpha version of button-bg */
  --button-color: rgb(255, 255, 255);
  --button-bg-hover: rgb(185, 13, 0);
  --button-bg-hover-opaque: rgba(185, 13, 0, 0.973);
  --button-bg-hover-faded: rgba(185, 13, 0, 0.851);
  --button-color-hover: rgb(255, 255, 255);
  --logo-path: "/images/Logos/Menu_Logo_500.svg";
  --short-name: "Valley Farms Supply";
  --initials: "VSF";
}

/* Light Theme for division 550 - Milan Supply */
:root[data-theme="550l"] {
  --body-background-image: url("/images/Graphics/Portal3.jpg");
  --button-bg: rgb(64, 64, 64);
  --button-bg-a: rgba(64, 64, 64, .9); /*alpha version of button-bg */
  --button-color: rgb(255, 255, 255);
  --button-bg-hover: rgb(237, 28, 36);
  --button-bg-hover-opaque: rgba(237, 28, 36, 0.973);
  --button-bg-hover-faded: rgba(237, 28, 36, 0.851);
  --button-color-hover: rgb(255, 255, 255);
  --logo-path: "/images/Logos/Menu_Logo_550.svg";
  --short-name: "Milan Supply";
  --initials: "MS";
}
/* Special-case for division 550: add a thin black border */
/* (this block will apply automatically when data-theme="550") */
:root[data-theme="550l"] .bodycontainer .btn-primary {
  border-color: #000000;
  border-style: solid;
  border-width: thin;
}

/* Light Theme shared variables */
:root[data-theme="0l"], :root[data-theme="100l"], :root[data-theme="200l"], :root[data-theme="300l"], :root[data-theme="340l"], :root[data-theme="400l"], :root[data-theme="430l"], :root[data-theme="500l"], :root[data-theme="550l"] {
  --body-background-color: rgba(230, 230, 230, 0.96);
  --body-text-color:rgb(0, 0, 0);
  --header-bg-color: color-mix(in srgb, var(--button-bg-a) var(--pub-light-sm-white-mix), white);
  --header-color: rgb(0, 0, 0);
  --sm-bg: color-mix(in srgb, var(--button-bg) var(--pub-light-sm-white-mix), white);
  --sm-bg-dark1: color-mix(in srgb, var(--sm-bg) 90%, black);
  --sm-bg-dark2: color-mix(in srgb, var(--sm-bg) 80%, black);
  --sm-bg-hover: var(--button-bg);
  --sm-color: rgb(0, 0, 0);
  --sm-color-dark1: color-mix(in srgb, var(--sm-color) 90%, black);
  --sm-color-hover: var(--button-color);
  --sm-button-bg: var(--button-bg);
  --sm-button-color: var(--button-color);
  --sm-button-bg-hover: var(--button-bg-hover);
  --sm-button-color-hover: var(--button-color-hover);
  --prod-category-background: color-mix(in srgb, var(--button-bg-a) var(--pub-prod-category-background-mix), white);
  /* Modal css */
  --modal-background-color: rgb(255,255,255);
  --modal-text-color: rgb(0,0,0);
  --modal-header-background-color: rgb(241, 241, 241);
  --modal-footer-background-color: rgb(241, 241, 241);
  --modal-border-color: rgb(50, 50, 50);
  --modal-img-bg-color: rgb(255,255,255);
  --modal-table-th-bg-color: rgb(220,220,220);
  --modal-table-th-color: rgb(0,0,0);
  --modal-table-td-bg-color: rgb(235,235,235);
  --modal-table-td-color: rgb(0,0,0);
  --modal-scrollbar-slider: rgb(191, 191, 191);
  --modal-scrollbar-bg: rgb(255, 255, 255);
  --modal-hover-bg: rgb(220, 220, 220);
}


/* Component styles using CSS vars */
/* General body and other general elements */
  body {
    background-image: var(--body-background-image);
    background-color: var(--body-background-color);
    color: var(--body-text-color);
  }

/* Buttons */
  .bodycontainer .btn-primary,
  .uni-modal-container .btn-primary {
    background-color: var(--button-bg);
    border-color:     var(--button-bg);
    color:            var(--button-color);
  }

  .bodycontainer .btn-primary:hover,
  .bodycontainer .btn-primary:focus,
  .bodycontainer .btn-primary:active,
  .uni-modal-container .btn-primary:hover,
  .uni-modal-container .btn-primary:focus,
  .uni-modal-container .btn-primary:active {
    background-color: var(--button-bg-hover);
    border-color:     var(--button-bg-hover);
    color:            var(--button-color-hover);
  }

/* content body */
  .cb {
      background-color: var(--body-background-color);
      color: var(--body-text-color);
      scrollbar-width: thin;
      scrollbar-color: var(--modal-scrollbar-slider) var(--modal-scrollbar-bg);
  }
/* header */
  .bodycontainer .contentheader {
    background-color: var(--header-bg-color);
    color: var(--header-color);
  }

  .contentheader .contentheaderButtons {
    height: 40px;
    width: 100%;
    top: 100px;
    background-color: var(--button-bg-hover)d9;
    position: fixed;
    display: block;
    /* z-index: 1000; */
  }

  .ch {
    background-color: var(--header-bg-color);
    color: var(--header-color);
  }

  .ch-logo a {
    display: block;
    width: 100%;
    height: 100%;
    background-image: var(--logo-path);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
  }

  .ch-bar {
    background-color: var(--button-bg-hover-opaque);
  }

  .ch-ribbon-btn-span, .ch-menu-btn-span, .ch-ribbon-menu-bubble {
    background-color: var(--button-color);
    color: var(--button-bg);
  }

  .ch-btn {
    background: none;
  }

  .ch-header-message {
    color: var(--button-color);
  }
	.ch-menu-panel-modal {
		background: var(--modal-header-background-color);
		color: var(--modal-text-color);
		border: 1px solid var(--modal-border-color);
	}
	.ch-menu-panel-modal hr {
		border-top: 1px solid var(--sm-color);
  }
	.ch-menu-select-btn:hover, li.ch-menu-section-li:hover {
		background: var(--modal-hover-bg);
	}
  a.ch-menu-section-bookmark {
		  color: var(--modal-text-color);
  }

/* Sidmenu */
  .csm {
    background-color: var(--sm-bg);
    color:            var(--sm-color);
  }

  .sm-container, .rsm-container {
    background-color: var(--sm-bg);
    color:            var(--sm-color);
  }

  .sm-section-a {
    color: var(--sm-color);
  }

  .sm-btn, .rsm-btn, .ch-menu-btn  {
    background-color: var(--sm-button-bg);
    color:            var(--sm-button-color);
  }

  .sm-btn:hover, .rsm-btn:hover, .ch-menu-btn:hover {
    color: var(--sm-button-color-hover);
    font-weight: bold;
  }

  .cb-filter-modal hr, .sm hr, .rsm-container hr{
    border-top: 1px solid var(--sm-color);;
  }

/* Content Body */
  .cb .btn-primary,
  .ch .btn-primary {
    background-color: var(--button-bg);
    border-color:     var(--button-bg);
    color:            var(--button-color);
  }

  .cb .btn-primary:hover,
  .cb .btn-primary:focus,
  .cb .btn-primary:active {
    background-color: var(--button-bg-hover);
    border-color:     var(--button-bg-hover);
    color:            var(--button-color-hover);
  }

  .cb .contentheader {
    background-color: var(--header-bg-color);
  }

  /* Footer Styles */
  .ft-container {
    background-color: var(--button-bg-hover-opaque);
  }

  .social-media a:hover {
    /* original file had only the color line here */
    color: var(--button-bg-hover);
  }


/* Icon & Ribbon CSS */
  .fa-times-rectangle-o:before,
  .fa-window-close-o:before {
    /* icon SVG left untouched */
    content: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+DQogICAgPCEtLSBTb2xpZCBibGFjayBiYWNrZ3JvdW5kIC0tPg0KICAgIDxyZWN0IHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgZmlsbD0iYmxhY2siLz4NCiAgICANCiAgICA8IS0tIFJlZCBYIHdpdGggcmVkdWNlZCBzdHJva2Ugd2lkdGggLS0+DQogICAgPGxpbmUgeDE9IjYiIHkxPSI2IiB4Mj0iMTgiIHkyPSIxOCIgc3Ryb2tlPSJyZWQiIHN0cm9rZS13aWR0aD0iMyIvPg0KICAgIDxsaW5lIHgxPSIxOCIgeTE9IjYiIHgyPSI2IiB5Mj0iMTgiIHN0cm9rZT0icmVkIiBzdHJva2Utd2lkdGg9IjMiLz4NCiAgICANCiAgICA8IS0tIFJlZCBib3JkZXIgd2l0aCByZWR1Y2VkIHN0cm9rZSB3aWR0aCAtLT4NCiAgICA8cmVjdCB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIGZpbGw9Im5vbmUiIHN0cm9rZT0icmVkIiBzdHJva2Utd2lkdGg9IjQiLz4NCjwvc3ZnPg==');
  }

  .fa-2x {
    font-size: 1.5em;
  }

  .ribbon {
    position: fixed;
    top: 30px;
    right: 10px;
    display: flex;
    flex-direction: row-reverse;
    gap: 10px;
  }

  .ribbon-icon {
    font-size: 2em;
  }

  .ribbon-btn {
    position: relative;
    padding: 6px 12px;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .ribbon-btn-span {
    position: absolute;
    top: 0;
    right: 5px;
    transform: translate(50%, -50%);
    background-color: var(--button-color);
    color:            var(--button-bg);
    opacity: .9;
    border-radius: 10px;
    padding: 0 6px;
    min-width: 20px;
    height: 20px;
    line-height: 20px;
    font-size: 0.75em;
  }

/* Hamburger button override */
  .hamburger-btn button {
    width: 30px;
    height: 30px;
  }

/* Activity Count */
  .activity_count {
    border-radius: 2px;
    background-color: white;
    padding: 0 2px;
    margin-left: 3px;
    font-size: 14px;
    color: var(--button-bg);
  }

  .info-icon {
    color: var(--button-bg);
  }

  .toast {
    border-left: 5px solid var(--button-bg);
  }

  .shortName {
    /* ensure the span itself has no other text */
    display: inline-block;
  }

  .shortName::before {
    content: var(--short-name);
  }

/* Standard Table CSS */
  table.standard_table.theme,
  table.two_row_table.theme {
      --table-header-bg: var(--button-bg);
      --table-header-color: var(--button-color);
  }

  table.standard_table.theme th,
  table.two_row_table.theme th {
      background-color: var(--table-header-bg);
      color: var(--table-header-color);
  }
/* Universal Modal CSS */
  .uni-modal-content {
      /* set background to none and let the component set the background color. */
      background: none;
  }