/***

Global Theming Styles – Color and Shadow Variables 

HINT: 
- Better overwritte CSS variables instead of individual elements.
- Don't use !important. If possible use a specific selector.

*/

{% if design.font.import_url %}
@import url('{{design.font.import_url}}');
{% endif %}

/* Auto-generated by colorscheme-generator */

:root {
  {% for var_name, color in color_palette.items() %}
    {{ var_name }}: {{ color }};
  {% endfor %}
}

@media (prefers-color-scheme: dark) {
  :root {
    {% for var_name, color in inverted_color_palette.items() %}
      {{ var_name }}: {{ color }};
    {% endfor %}
  }
}

:root, ::after, ::before, ::backdrop {
    /* For Dark Mode Plugin
     * @See https://chromewebstore.google.com/detail/dark-mode/dmghijelimhndkbmpgbldicpogfkceaj
     */
    --native-dark-accent-color:         var(--color-01-60);  /* was #a9a9a9 */
    --native-dark-bg-color:             var(--color-01-10);  /* was #292929 */
    --native-dark-bg-image-color:       rgba(var(--color-01-rgb-01), 0.10); /* remains the same, or adjust if needed */
    --native-dark-border-color:         var(--color-01-40);  /* was #555555 */
    --native-dark-box-shadow:           0 0 0 1px rgb(var(--color-01-rgb-99), / 10%);
    --native-dark-cite-color:           var(--color-01-70);  /* was #92de92 – you might adjust if a green tone is needed */
    --native-dark-fill-color:           var(--color-01-50);  /* was #7d7d7d */
    --native-dark-font-color:           var(--color-01-95);  /* was #dcdcdc */
    --native-dark-link-color:           var(--color-01-80);  /* was #8db2e5 */
    --native-dark-visited-link-color:   var(--color-01-85);  /* was #c76ed7 */
}

/* Bootstrap Overrides (Color/Shadow Variables Only) */
:root {
  --bs-black: var(--color-01-01); /* Original tone: Black (#000) */
  --bs-white: var(--color-01-99); /* Original tone: White (#fff) */
  --bs-gray: var(--color-01-50); /* Original tone: Gray (#6c757d) */
  --bs-gray-dark: var(--color-01-20); /* Original tone: Dark Gray (#343a40) */
{% for i in range(1, 10) %}
{# @see https://chatgpt.com/share/67bcd94e-bb44-800f-bf63-06d1ae0f5096 #}
  {% set gray = i * 100 %}
  {% set color = 100 - i * 10 %}
  --bs-gray-{{ gray }}: var(--color-01-{{ "%02d" % color }});
{% endfor %}
  --bs-primary: var(--color-01-65); /* Original tone: Blue (#0d6efd) */
  --bs-light: var(--color-01-95); /* Original tone: Light (#f8f9fa) */
  --bs-dark: var(--color-01-10); /* Original tone: Dark (#212529) */
  --bs-primary-rgb: var(--color-01-rgb-65); /* Original tone: Blue (13, 110, 253) */
  --bs-secondary-rgb: var(--color-01-rgb-50); /* Original tone: Grayish (#6c757d / 108, 117, 125) */
  --bs-light-rgb: var(--color-01-rgb-95); /* Original tone: Light (248, 249, 250) */
  --bs-dark-rgb: var(--color-01-rgb-10); /* Original tone: Dark (33, 37, 41) */
  --bs-white-rgb: var(--color-01-rgb-99); /* Original tone: White (255, 255, 255) */
  --bs-black-rgb: var(--color-01-rgb-01); /* Original tone: Black (0, 0, 0) */
  --bs-body-color-rgb: var(--color-01-rgb-10); /* Original tone: Dark (#212529 / 33, 37, 41) */
  --bs-body-bg-rgb: var(--color-01-rgb-99); /* Original tone: White (#fff / 255, 255, 255) */
  --bs-body-color: var(--color-01-10); /* Original tone: Dark (#212529) */
  --bs-body-bg: var(--color-01-99); /* Original tone: White (#fff) */
  --bs-border-color: var(--color-01-85); /* Original tone: Gray (#dee2e6) */
  --bs-link-color: var(--color-01-65); /* Original tone: Blue (#0d6efd) */
  --bs-link-hover-color: var(--color-01-60); /* Original tone: Darker Blue (#0a58ca) */
  --bs-code-color: var(--color-01-55); /* Original tone: Pink (#d63384) */
  --bs-highlight-bg: var(--color-01-93); /* Original tone: Light Yellow (#fff3cd) */
  --bs-list-group-bg: var(--color-01-40);
  --bs-emphasis-color: var(--color-01-01); /* Gemappt von #000 */
  --bs-emphasis-color-rgb: var(--color-01-rgb-01); /* Gemappt von 0, 0, 0 */
  --bs-secondary-color: rgba(var(--color-01-rgb-10), 0.75); /* Gemappt von rgba(33, 37, 41, 0.75) */
  --bs-secondary-color-rgb: var(--color-01-rgb-10); /* Gemappt von 33, 37, 41 */
  --bs-secondary-bg: var(--color-01-90); /* Gemappt von #e9ecef */
  --bs-secondary-bg-rgb: var(--color-01-rgb-90); /* Gemappt von 233, 236, 239 */
  --bs-tertiary-color: rgba(var(--color-01-rgb-10), 0.5); /* Gemappt von rgba(33, 37, 41, 0.5) */
  --bs-tertiary-color-rgb: var(--color-01-rgb-10); /* Gemappt von 33, 37, 41 */
  --bs-tertiary-bg: var(--color-01-95); /* Gemappt von #f8f9fa */
  --bs-tertiary-bg-rgb: var(--color-01-rgb-95); /* Gemappt von 248, 249, 250 */
  --bs-link-color-rgb: var(--color-01-rgb-65); /* Gemappt von 13, 110, 253 */
  --bs-link-hover-color-rgb: var(--color-01-rgb-60); /* Gemappt von 10, 88, 202 */
  --bs-highlight-color: var(--color-01-10); /* Gemappt von #212529 */
  --bs-border-color-translucent: rgba(var(--color-01-rgb-01), 0.175); /* Gemappt von rgba(0, 0, 0, 0.175) */
  --bs-focus-ring-color: rgba(var(--color-01-rgb-65), 0.25); /* Gemappt von rgba(13, 110, 253, 0.25) */
  
  --bs-table-color: var(--bs-emphasis-color);
  --bs-table-bg: var(--color-01-99);          /* White (#fff) */
  --bs-table-border-color: var(--color-01-99);  /* White (#fff) */
  --bs-table-striped-bg: var(--color-01-85);    /* Light Gray (entspricht ca. #dee2e6) */
  --bs-table-hover-color: var(--color-01-01);   /* Black (#000) */
  --bs-table-hover-bg: rgba(var(--bs-emphasis-color-rgb), 0.075);
}


/* Discourse */
:root section#main{
  /* Base Colors */
  --primary:                   var(--color-01-20); /* originally #203243 */
  --secondary:                 var(--color-01-95); /* originally #eef4f7 */
  --tertiary:                  var(--color-01-40); /* originally #416376 */
  --quaternary:                var(--color-01-50); /* originally #5e99b9 */

  /* Header & Highlight */
  --header_background:         var(--color-01-86); /* originally #86bddb */
  --header_primary:            var(--color-01-20); /* same as --primary */
  --highlight:                 var(--color-01-70); /* same as header_background */
  --d-selected:                var(--color-01-85); /* originally #bee0f2 */
  --d-hover:                   var(--color-01-90); /* originally #d2efff */
  
  /* Normally refers to secondary. Somehow this reference does not work.*/
  --d-sidebar-background:      var(--color-01-92); 
  --d-sidebar-footer-fade:     var(--color-01-92);


  /* RGB values */
  --always-black-rgb:          var(--color-01-rgb-01);
  --primary-rgb:               var(--color-01-rgb-20);
  --primary-low-rgb:           var(--color-01-rgb-95);
  --primary-very-low-rgb:      var(--color-01-rgb-99);
  --secondary-rgb:             var(--color-01-rgb-95);
  --header_background-rgb:     var(--color-01-rgb-70);
  --tertiary-rgb:              var(--color-01-rgb-40);
  --highlight-rgb:             var(--color-01-rgb-70);
  --success-rgb:               var(--color-01-rgb-50);


  /* Primary Scale */
  --primary-very-low:          var(--color-01-99); /* originally #f7f9fb */
  --primary-low:               var(--color-01-95);  /* originally #e3ebf2 */
  --primary-low-mid:           var(--color-01-75);  /* originally #acc2d7 */
  --primary-medium:            var(--color-01-60);  /* originally #7499bd */
  --primary-high:              var(--color-01-40);  /* originally #487096 */
  --primary-very-high:         var(--color-01-20);  /* originally #34516d */
  --primary-50:                var(--color-01-99); /* originally #f7f9fb */
{% for i in range(1, 10) %}
{# @see https://chatgpt.com/share/67bcd94e-bb44-800f-bf63-06d1ae0f5096 #}
  {% set primary = i * 100 %}
  {% set color = 100 - i * 8 %}
  --primary-{{ primary }}: var(--color-01-{{ "%02d" % color }});
{% endfor %}

  /* Header Primary Scale */
  --header_primary-low:        rgb(var(--color-01-rgb-75));  /* rgb(128, 180, 209) */
  --header_primary-low-mid:    rgb(var(--color-01-rgb-70));  /* rgb(110, 155, 181) */
  --header_primary-medium:     rgb(var(--color-01-rgb-60));  /* rgb(93, 132, 155) */
  --header_primary-high:       rgb(var(--color-01-rgb-50));  /* rgb(78, 112, 132) */
  --header_primary-very-high:  rgb(var(--color-01-rgb-20));  /* rgb(52, 76, 94) */

  /* Secondary Scale */
  --secondary-low:             var(--color-01-20);  /* originally #2f5163 */
  --secondary-medium:          var(--color-01-40);  /* originally #4e88a5 */
  --secondary-high:            var(--color-01-60);  /* originally #7ba9c1 */
  --secondary-very-high:       var(--color-01-90);  /* originally #d7e5ec */

  /* Tertiary Scale */
  --tertiary-very-low:         var(--color-01-99); /* originally #eaf0f3 */
  --tertiary-low:              var(--color-01-95);  /* originally #dfe8ee */
  --tertiary-medium:           var(--color-01-60);  /* originally #96b4c5 */
  --tertiary-high:             var(--color-01-40);  /* originally #5886a0 */
  --tertiary-hover:            var(--color-01-20);  /* originally #314a59 */
  --tertiary-50:               var(--color-01-99); /* originally #eaf0f3 */
{% for i in range(1, 10) %}
{# @see https://chatgpt.com/share/67bcd94e-bb44-800f-bf63-06d1ae0f5096 #}
  {% set tertiary = i * 100 %}
  {% set color = 100 - i * 5 %}
  --tertiary-{{ tertiary }}: var(--color-01-{{ "%02d" % color }});
{% endfor %}

  /* Quaternary */
  --quaternary-low:           var(--color-01-80);  /* originally #cfe0ea */

  /* Highlight */
  --highlight-bg:             var(--color-01-90);  /* originally #dbebf4 */
  --highlight-low:            var(--color-01-90);  /* originally #dbebf4 */
  --highlight-medium:         var(--color-01-80);  /* originally #c3deed */
  --highlight-high:           var(--color-01-30);  /* originally #286688 */

  /* Combination Variables */
  --blend-primary-secondary-5:          rgb(var(--color-01-rgb-95));  /* originally rgb(232, 238, 241) */
  --primary-med-or-secondary-med:       var(--color-01-60);  /* originally #7499bd */
  --primary-med-or-secondary-high:      var(--color-01-60);  /* originally #7499bd */
  --primary-high-or-secondary-low:      var(--color-01-40);  /* originally #487096 */
  --primary-low-mid-or-secondary-high:  var(--color-01-75);  /* originally #acc2d7 */
  --primary-low-mid-or-secondary-low:   var(--color-01-75);  /* originally #acc2d7 */
  --primary-or-primary-low-mid:         var(--color-01-20);  /* originally #203243 */
  --highlight-low-or-medium:            var(--color-01-90);  /* originally #dbebf4 */
  --tertiary-or-tertiary-low:           var(--color-01-40);  /* originally #416376 */
  --tertiary-low-or-tertiary-high:      var(--color-01-95);  /* originally #dfe8ee */
  --tertiary-med-or-tertiary:           var(--color-01-60);  /* originally #96b4c5 */
  --secondary-or-primary:               var(--color-01-95);  /* originally #eef4f7 */
  --tertiary-or-white:                  var(--color-01-40);  /* originally #416376 */

  /* Float Kit */
  --float-kit-arrow-stroke-color:       var(--primary-low);  /* already mapped above */
  --float-kit-arrow-fill-color:         var(--secondary);      /* already mapped above */
}

/* gitea */
:root {
  /* Base and derived colors are now referenced from the computed scale */
  --color-01-primary:           var(--color-01-50);
  --color-01-primary-contrast:  var(--color-01-99);
  --color-01-primary-dark-1:    var(--color-01-48);
  --color-01-primary-dark-2:    var(--color-01-47);
  --color-01-primary-dark-3:    var(--color-01-46);
  --color-01-primary-dark-4:    var(--color-01-45);
  --color-01-primary-dark-5:    var(--color-01-44);
  --color-01-primary-dark-6:    var(--color-01-43);
  --color-01-primary-dark-7:    var(--color-01-42);
  --color-01-primary-light-1:   var(--color-01-52);
  --color-01-primary-light-2:   var(--color-01-53);
  --color-01-primary-light-3:   var(--color-01-54);
  --color-01-primary-light-4:   var(--color-01-55);
  --color-01-primary-light-5:   var(--color-01-57);
  --color-01-primary-light-6:   var(--color-01-59);
  --color-01-primary-light-7:   var(--color-01-61);

  /* Alpha variants reference the base RGB variable */
{% for i in range(1, 10) %}
{# @see https://chatgpt.com/share/67bcd94e-bb44-800f-bf63-06d1ae0f5096 #}
  {% set alpha = i * 10 %}
  --color-01-primary-alpha-{{ alpha }}: rgba(var(--color-01-rgb-50), 0.{{ alpha }});
{% endfor %}

  --color-01-primary-hover:     var(--color-01-primary-dark-1);
  --color-01-primary-active:    var(--color-01-primary-dark-2);

  /* Secondary colors */
  --color-01-secondary:         var(--color-01-80);
  --color-01-secondary-dark-1:  var(--color-01-78);
  --color-01-secondary-dark-2:  var(--color-01-76);
  --color-01-secondary-dark-3:  var(--color-01-74);
  --color-01-secondary-dark-4:  var(--color-01-72);
  --color-01-secondary-dark-5:  var(--color-01-70);
  --color-01-secondary-dark-6:  var(--color-01-68);
  --color-01-secondary-dark-7:  var(--color-01-66);
  --color-01-secondary-dark-8:  var(--color-01-64);
  --color-01-secondary-dark-9:  var(--color-01-62);
  --color-01-secondary-dark-10: var(--color-01-60);
  --color-01-secondary-dark-11: var(--color-01-58);
  --color-01-secondary-dark-12: var(--color-01-56);
  --color-01-secondary-dark-13: var(--color-01-54);
  --color-01-secondary-light-1: var(--color-01-92);
  --color-01-secondary-light-2: var(--color-01-93);
  --color-01-secondary-light-3: var(--color-01-94);
  --color-01-secondary-light-4: var(--color-01-95);

{% for i in range(1, 10) %}
{# @see https://chatgpt.com/share/67bcd94e-bb44-800f-bf63-06d1ae0f5096 #}
  {% set alpha = i * 10 %}
  --color-01-secondary-alpha-{{ alpha }}: rgba(var(--color-01-rgb-80), 0.{{ alpha }});
{% endfor %}

  --color-01-secondary-button:  var(--color-01-secondary-dark-4);
  --color-01-secondary-hover:   var(--color-01-secondary-dark-5);
  --color-01-secondary-active:  var(--color-01-secondary-dark-6);

  /* Console Colors */
  --color-01-console-fg:         var(--color-01-98);
  --color-01-console-fg-subtle:  var(--color-01-85);
  --color-01-console-bg:         var(--color-01-10);
  --color-01-console-border:     var(--color-01-40);
  --color-01-console-hover-bg:   var(--color-01-42);
  --color-01-console-active-bg:  var(--color-01-40);
  --color-01-console-menu-bg:    var(--color-01-38);
  --color-01-console-menu-border:var(--color-01-45);

  /* Body, Text, and Miscellaneous Colors */
  --color-01-white:      var(--color-01-99);
  --color-01-grey:       var(--color-01-60);
  --color-01-grey-light: var(--color-01-65);

  --color-01-body:       var(--color-01-white);
  --color-01-text-dark:  var(--color-01-10);
  --color-01-text:       var(--color-01-40);
  --color-01-text-light: var(--color-01-60);
  --color-01-text-light-1: var(--color-01-65);
  --color-01-text-light-2: var(--color-01-70);
  --color-01-text-light-3: var(--color-01-75);

  --color-01-footer:     var(--color-01-nav-bg);
  --color-01-timeline:   var(--color-01-80);

  /* Input Colors */
  --color-01-input-text: var(--color-01-10);
  --color-01-input-background: var(--color-01-white);
  --color-01-input-toggle-background: var(--color-01-80);
  --color-01-input-border: var(--color-01-secondary);
  --color-01-input-border-hover: var(--color-01-secondary-dark-1);

  /* Effects */
  --color-01-light: var(--color-01-05);
  --color-01-light-mimic-enabled: rgba(var(--color-01-rgb-05), calc(6 / 255 * 222 / 255 / 0.55));
  --color-01-light-border: var(--color-01-05);
  --color-01-hover: var(--color-01-05);
  --color-01-hover-opaque: var(--color-01-95);
  --color-01-active: var(--color-01-05);

  /* Menu, Card, and Markup Colors */
  --color-01-menu: var(--color-01-99);
  --color-01-card: var(--color-01-99);
  --color-01-markup-table-row: var(--color-01-01);
  --color-01-markup-code-block: var(--color-01-01);
  --color-01-markup-code-inline: var(--color-01-01);
  --color-01-button: var(--color-01-99);
  --color-01-code-bg: var(--color-01-99);
  --color-01-shadow: var(--color-01-05);
  --color-01-shadow-opaque: var(--color-01-85);
  --color-01-secondary-bg: var(--color-01-95);
  --color-01-expand-button: var(--color-01-98);
  --color-01-placeholder-text: var(--color-01-text-light-3);
  --color-01-editor-line-highlight: var(--color-01-primary-light-6);
  --color-01-project-column-bg: var(--color-01-secondary-light-4);
  --color-01-caret: var(--color-01-10);

  /* Reaction and Tooltip Colors */
  --color-01-reaction-bg: var(--color-01-05);
  --color-01-reaction-hover-bg: var(--color-01-primary-light-5);
  --color-01-reaction-active-bg: var(--color-01-primary-light-6);
  --color-01-tooltip-text: var(--color-01-99);
  --color-01-tooltip-bg: var(--color-01-05);

  /* Navigation Colors */
  --color-01-nav-bg: var(--color-01-99);
  --color-01-nav-hover-bg: var(--color-01-secondary-light-1);
  --color-01-nav-text: var(--color-01-40);
  --color-01-secondary-nav-bg: var(--color-01-99);

  /* Label and Accent Colors */
  --color-01-label-text: var(--color-01-40);
  --color-01-label-bg: var(--color-01-50);
  --color-01-label-hover-bg: var(--color-01-60);
  --color-01-label-active-bg: var(--color-01-70);
  --color-01-accent: var(--color-01-primary-light-1);
  --color-01-small-accent: var(--color-01-primary-light-6);
  --color-01-highlight-fg: var(--color-01-10);
  --color-01-highlight-bg: var(--color-01-99);
  --color-01-overlay-backdrop: var(--color-01-05);
}

/* Keycloak */
:root{
  /* --- Palette Black (Graustufen) --- */
{% for i in range(1, 21) %}
{# @see https://chatgpt.com/share/67bcd94e-bb44-800f-bf63-06d1ae0f5096 #}
  {% set black = i * 50 %}
  {% set color = 100 - i * 5 %}
  --pf-v5-global--palette--black-{{ black }}: var(--color-01-{{ "%02d" % color }});
{% endfor %}

  /* --- White --- */
  --pf-v5-global--palette--white:      var(--color-01-99);

  /* --- Background Colors --- */
  --pf-v5-global--BackgroundColor--100:              var(--color-01-99);
  --pf-v5-global--BackgroundColor--150:              var(--color-01-95);
  --pf-v5-global--BackgroundColor--200:              var(--color-01-85);
  --pf-v5-global--BackgroundColor--300:              var(--color-01-75);
  --pf-v5-global--BackgroundColor--400:              var(--color-01-65);
  --pf-v5-global--BackgroundColor--light-100:        var(--color-01-99);
  --pf-v5-global--BackgroundColor--light-200:        var(--color-01-95);
  --pf-v5-global--BackgroundColor--light-300:        var(--color-01-85);
  --pf-v5-global--BackgroundColor--dark-100:         var(--color-01-10);
  --pf-v5-global--BackgroundColor--dark-200:         var(--color-01-25);
  --pf-v5-global--BackgroundColor--dark-300:         var(--color-01-20);
  --pf-v5-global--BackgroundColor--dark-400:         var(--color-01-30);
  --pf-v5-global--BackgroundColor--dark-transparent-100: rgba(var(--color-01-rgb-10),0.7);
  --pf-v5-global--BackgroundColor--dark-transparent-200: rgba(var(--color-01-rgb-20),0.8);

  /* --- Color Variables --- */
  --pf-v5-global--color-01--100:           var(--color-01-10);
  --pf-v5-global--color-01--200:           var(--color-01-40);
  --pf-v5-global--color-01--300:           var(--color-01-25);
  --pf-v5-global--color-01--400:           var(--color-01-50);
  --pf-v5-global--color-01--light-100:     var(--color-01-99);
  --pf-v5-global--color-01--light-200:     var(--color-01-85);
  --pf-v5-global--color-01--light-300:     var(--color-01-75);
  --pf-v5-global--color-01--dark-100:      var(--color-01-10);
  --pf-v5-global--color-01--dark-200:      var(--color-01-40);

  /* --- Active Colors --- */
  --pf-v5-global--active-color--100:    var(--color-01-65);
  --pf-v5-global--active-color--200:    var(--color-01-95);
  --pf-v5-global--active-color--300:    var(--color-01-75);
  --pf-v5-global--active-color--400:    var(--color-01-85);

  /* --- Disabled Colors --- */
  --pf-v5-global--disabled-color--100:  var(--color-01-40);
  --pf-v5-global--disabled-color--200:  var(--color-01-75);
  --pf-v5-global--disabled-color--300:  var(--color-01-85);

  /* --- Primary Colors --- */
  --pf-v5-global--primary-color--100:   var(--color-01-65);
  --pf-v5-global--primary-color--200:   var(--color-01-40);
  --pf-v5-global--primary-color--light-100: var(--color-01-75);
  --pf-v5-global--primary-color--dark-100:  var(--color-01-65);

  /* --- Secondary Colors --- */
  --pf-v5-global--secondary-color--100: var(--color-01-40);

  /* --- Custom Colors --- */
  --pf-v5-global--custom-color--100:    var(--color-01-65);
  --pf-v5-global--custom-color--200:    var(--color-01-65);
  --pf-v5-global--custom-color--300:    var(--color-01-30);

  /* --- Link Colors --- */
  --pf-v5-global--link--Color:                  var(--color-01-65);
  --pf-v5-global--link--color-01--hover:           var(--color-01-40);
  --pf-v5-global--link--color-01--light:           var(--color-01-75);
  --pf-v5-global--link--color-01--light--hover:    var(--color-01-85);
  --pf-v5-global--link--color-01--dark:            var(--color-01-65);
  --pf-v5-global--link--color-01--dark--hover:     var(--color-01-40);
  --pf-v5-global--link--color-01--visited:         var(--color-01-40);

  /* --- Border Colors --- */
  --pf-v5-global--BorderColor--100:             var(--color-01-75);
  --pf-v5-global--BorderColor--200:             var(--color-01-50);
  --pf-v5-global--BorderColor--300:             var(--color-01-85);
  --pf-v5-global--BorderColor--400:             var(--color-01-65);
  --pf-v5-global--BorderColor--dark-100:        var(--color-01-75);
  --pf-v5-global--BorderColor--light-100:       var(--color-01-65);

  /* --- Icon Colors --- */
  --pf-v5-global--icon--color-01--light:          var(--color-01-40);
  --pf-v5-global--icon--color-01--dark:           var(--color-01-10);
  --pf-v5-global--icon--color-01--light--light:   var(--color-01-85);
  --pf-v5-global--icon--color-01--dark--light:    var(--color-01-99);
  --pf-v5-global--icon--color-01--light--dark:    var(--color-01-40);
  --pf-v5-global--icon--color-01--dark--dark:     var(--color-01-10);

}

.pf-v5-c-button.pf-m-tertiary {
    --pf-v5-c-button--m-tertiary--BackgroundColor: var(--color-01-70);
    {# Assume that the following line is necessary due to load order #}
    background-color: var(--pf-v5-c-button--m-tertiary--BackgroundColor); 
}

/* Additional Keykloak Configuration */
a.pf-v5-c-nav__link{
    --pf-v5-c-nav__link--BackgroundColor: rgba(var(--color-01-rgb-56), 0.4);
}

/* LAM */
:root {
--lam-background-color-default: var(--color-01-99); {# from #FFFFFF (very bright white) #}
--lam-input-bg-color: var(--color-01-98); {# from #fcfcfc (almost white) #}
--lam-text-color-default: var(--color-01-01); {# from #000000 (pure black) #}
--lam-border-color: var(--color-01-90); {# from #e8e8e8 (light grey) #}
--lam-border-color-primary: var(--color-01-15); {# from #01689e (dark blue) #}
--lam-border-color-secondary: var(--color-01-85); {# from #ffcb1d (bright yellow) #}
--lam-background-color-primary: var(--color-01-50); {# from #3daee9 (mid-tone blue) #}
--lam-background-color-secondary: var(--color-01-90); {# from #ffe233 (bright yellow) #}
--lam-text-color-primary: var(--color-01-99); {# from #ffffff (pure white) #}
--lam-text-color-secondary: var(--color-01-01); {# from #000000 (pure black) #}
--lam-text-color-ok: var(--color-01-10); {# from #237d0c (dark green) #}
--lam-table-background-color-bright: var(--color-01-98); {# from #fbfbfb (very light grey) #}
--lam-table-background-color-dark: var(--color-01-92); {# from #e8f3ff (light blue) #}
--lam-table-background-color-hover: var(--color-01-50); {# from #3daee9 (mid-tone blue) #}
--lam-table-text-color-hover: var(--color-01-99); {# from #ffffff (pure white) #}
--lam-table-border-color: var(--color-01-50); {# from #3daee9 (mid-tone blue) #}
}

/** Mastodon Overrides **/
div#mastodon, div#admin-wrapper {
  /* Dropdown */
  --dropdown-border-color: var(--color-01-35);
  --dropdown-background-color: rgba(var(--color-01-rgb-03), 0.9);
  --dropdown-shadow: 0 20px 25px -5px rgba(var(--color-01-rgb-01), 0.25),
                       0 8px 10px -6px rgba(var(--color-01-rgb-01), 0.25);

  /* Modal */
  --modal-background-color: rgba(var(--color-01-rgb-03), 0.7);
  --modal-background-variant-color: rgba(var(--color-01-rgb-05), 0.7);
  --modal-border-color: var(--color-01-35);

  /* Background */
  --background-border-color: var(--color-01-82);
  --background-filter: blur(10px) saturate(180%) contrast(75%) brightness(70%);
  --background-color: var(--color-01-93);
  --background-color-tint: rgba(var(--color-01-rgb-03), 0.9);

  /* Surface */
  --surface-background-color: var(--color-01-90);
  --surface-variant-background-color: var(--color-01-89);
  --surface-variant-active-background-color: var(--color-01-35);
  --on-surface-color: rgba(var(--color-01-rgb-05), 0.5);

  /* Media & Overlay */
  --media-outline-color: rgba(var(--color-01-rgb-99), 0.15);
  --overlay-icon-shadow: drop-shadow(0 0 8px rgba(var(--color-01-rgb-01), 0.25));
}

.swal2-popup {
    color: #000;
}

/* Modal Overwrittes */ 
div.modal div.modal-content {
  /* Colors – adjusted to the existing scheme */
  --bs-modal-color: var(--color-01-21);                /* Text color: dark contrast against the light modal background */
  --bs-modal-bg: var(--color-01-82);                   /* Background color, as desired */
  --bs-modal-border-color: var(--color-01-82);         /* A slightly darker border than the background */
  --bs-modal-header-border-color: var(--color-01-87);  /* Same shade as the modal border */
  --bs-modal-footer-bg: var(--color-01-87);            /* A slightly offset footer background (a bit darker than the main area) */
  --bs-modal-footer-border-color: var(--color-01-87);
}

/** Nextcloud Specific**/
:root{
    --color-01-main-background:        var(--color-01-84);
    --color-01-main-background-rgb:    rgba(var(--color-01-rgb-84),0.83);
    --color-01-primary-element:        var(--color-01-80);
    --color-01-main-text:              var(--color-01-40);
    --color-01-background-hover:       var(--color-01-65);

    /** Calendar **/
    --color-01-background-dark:        var(--color-01-73); /** Days which aren't in the current month **/
    --color-01-primary-element-light:  var(--color-01-65);
}

/** Peertube **/
body#custom-css {
    --mainColor: var(--color-01-60); /* Original tone: hsl(24, 90%, 50%) – vibrant orange */
    --mainColorLighter: var(--color-01-70); /* Original tone: #f5873d – lighter orange */
    --mainColorLightest: var(--color-01-90); /* Original tone: #fce1cf – very light orange/beige */
    --mainColorVeryLight: var(--color-01-95); /* Original tone: #fff5eb – almost white */
    --mainHoverColor: var(--color-01-64); /* Original tone: #f47825 – hover orange */
    --mainBackgroundHoverColor: var(--color-01-92); /* Original tone: #e9ecef – light gray */
    --mainBackgroundColor: var(--color-01-99); /* Original tone: #fff – white */
    --mainForegroundColor: var(--color-01-10); /* Original tone: #212529 – dark gray/black */
    --greyForegroundColor: var(--color-01-50); /* Original tone: #585858 – medium gray */
    --greyBackgroundColor: var(--color-01-90); /* Original tone: #E5E5E5 – light gray */
    --greySecondaryBackgroundColor: var(--color-01-91); /* Original tone: #EFEFEF – very light gray */
    --menuBackgroundColor: var(--color-01-82); /* Original tone: #000 – black */
    --menuForegroundColor: var(--color-01-99); /* Original tone: #fff – white */
    --submenuBackgroundColor: var(--color-01-95); /* Original tone: #F7F7F7 – off-white/light gray */
    --channelBackgroundColor: var(--color-01-93); /* Original tone: #f6ede8 – warm light beige */
    --inputForegroundColor: var(--color-01-10); /* Original tone: #212529 – dark gray */
    --inputBackgroundColor: var(--color-01-99); /* Original tone: #fff – white */
    --inputPlaceholderColor: var(--color-01-55); /* Original tone: #797676 – medium gray */
    --inputBorderColor: var(--color-01-80); /* Original tone: #C6C6C6 – light gray */
    --textareaForegroundColor: var(--color-01-10); /* Original tone: #212529 – dark gray */
    --textareaBackgroundColor: var(--color-01-99); /* Original tone: #fff – white */
    --markdownTextareaBackgroundColor: var(--color-01-91); /* Original tone: #EFEFEF – very light gray */
    --actionButtonColor: var(--color-01-50); /* Original tone: #585858 – medium gray */
    --supportButtonColor: var(--actionButtonColor); /* Original tone: same as actionButtonColor (#585858) */
    --activatedActionButtonColor: var(--color-01-10); /* Original tone: #212529 – dark gray */
    color: var(--mainForegroundColor);
    background-color: var(--mainBackgroundColor);
}

div.searchbox input.autocomplete-input{
    background-position: 12px;
    background-repeat: no-repeat;
}

html[native-dark-active] my-app button, button {
    background-color: transparent;
}

/** Pixelfed **/

:root {
    /* Base Colors */
    --light:                  var(--color-01-05);    /* Very dark (was #000) */
    --dark:                   var(--color-01-99);   /* Very light (was #fff) */
    
    /* Backgrounds */
    --body-bg:                var(--color-01-05);    /* Main background: very dark */
    --nav-bg:                 var(--color-01-05);    /* Navigation background: very dark */
    
    /* Text Colors */
    --body-color:             var(--color-01-70);    /* Main text – mid brightness */
    --text-lighter:           var(--color-01-60);    /* Lighter text for less prominent elements */
    
    /* Section Backgrounds and Cards */
    --bg-light:               var(--color-01-95);    /* Lighter background areas */
    --card-bg:                var(--color-01-90);    /* Card background */
    --light-gray:             var(--color-01-75);    /* For less dominant elements */
    --light-hover-bg:         var(--color-01-85);    /* Slightly lighter hover background */
    
    /* Borders and Input Fields */
    --btn-light-border:       var(--color-01-10);    /* Dark border for buttons */
    --input-border:           var(--color-01-10);    /* Border color for inputs */
    --border-color:           var(--color-01-85);    /* General border: slightly lighter than background */
    
    /* Other Areas */
    --comment-bg:             var(--color-01-85);    /* Background for comments */
    --card-header-accent:     var(--color-01-85);    /* Accent color in card headers */
    
    /* Dropdown Menus */
    --dropdown-item-hover-bg:       var(--color-01-05);    /* Hover background: very dark */
    --dropdown-item-hover-color:    var(--color-01-60);    /* Hover text: a bit lighter */
    --dropdown-item-color:          var(--color-01-70);    /* Regular dropdown item text */
    --dropdown-item-active-color:   var(--color-01-99);    /* Active state: very light (white) */
}

/** Sphinx **/
.bg-background\/95 {
    background-color: var(--color-01-96);
}

.border-border {
    border-color: var(--color-01-85);
}

{# Hide Toogle Button #}
nav.flex.items-center.space-x-1{
    display:none;
}

/** Taiga **/
:host, :root {
  --color-01-solid-primary: var(--color-01-83);
  --color-01-link-primary: var(--color-01-44);
  --color-01-link-tertiary: var(--color-01-45);
  --color-01-gray100: var(--color-01-97);
  --color-01-gray200: var(--color-01-93);
  --color-01-gray300: var(--color-01-90);
  --color-01-gray400: var(--color-01-86);
  --color-01-black600: var(--color-01-34);
  --color-01-black700: var(--color-01-30);
  --color-01-black800: var(--color-01-26);
  --color-01-black900: var(--color-01-21);
  --color-01-black: var(--color-01-01);
  --color-01-white: var(--color-01-99);
}

/* Global Defaults (Colors Only) */
body, html[native-dark-active] {
    background-color: var(--color-01-93);
    background: linear-gradient({{ range(0, 361) | random }}deg, var(--color-01-93), var(--color-01-91), var(--color-01-95), var(--color-01-93));
    background-attachment: fixed;
    color: var(--color-01-40);
    font-family: {{design.font.type}};
}

{# All links (applies to all anchor elements regardless of state) #}
a {
    color: var(--color-01-50);
}

{# Unvisited links (applies only to links that have not been visited) #}
a:link {
    color: var(--color-01-55);
}

{# Visited links (applies only to links that have been visited) #}
a:visited {
    color: var(--color-01-45);
}

{# Hover state (applies when the mouse pointer is over the link) #}
a:hover {
    color: var(--color-01-60);
}

{# Active state (applies during the time the link is being activated, e.g., on click) #}
a:active {
    color: var(--color-01-65);
}

/** Set default buttons transparent **/ 
html[native-dark-active] button, button{
     background-color: var(--color-01-87);
}

button:hover, .btn:hover {
    filter: brightness(0.9);
}

/* {# Invalid state: when the input value fails validation criteria. Use danger color for error indication. #} */
input:invalid,
textarea:invalid,
select:invalid {
    background-color: var(--color-01-01);
    background: linear-gradient({{ range(0, 361) | random }}deg, var(--color-01-01), var(--color-01-10));
    /* Use Bootstrap danger color for error messages */
    color: var(--bs-danger);
    border-color: var(--color-01-20);
}

/* {# Valid state: when the input value meets all validation criteria. Use success color for confirmation. #} */
input:valid,
textarea:valid,
select:valid {
    background-color: var(--color-01-80);
    background: linear-gradient({{ range(0, 361) | random }}deg, var(--color-01-80), var(--color-01-90));
    /* Use Bootstrap success color for confirmation messages */
    color: var(--bs-success);
    border-color: var(--color-01-70);
}

/* {# Required field: applied to elements that must be filled out by the user. Use warning color for emphasis. #} */
input:required,
textarea:required,
select:required {
    background-color: var(--color-01-50);
    background: linear-gradient({{ range(0, 361) | random }}deg, var(--color-01-50), var(--color-01-60));
    /* Use Bootstrap warning color to indicate a required field */
    color: var(--bs-warning);
    border-color: var(--color-01-70);
}

/* {# Optional field: applied to elements that are not mandatory. Use info color to denote additional information. #} */
input:optional,
textarea:optional,
select:optional {
    background-color: var(--color-01-60);
    background: linear-gradient({{ range(0, 361) | random }}deg, var(--color-01-60), var(--color-01-70));
    /* Use Bootstrap info color to indicate optional information */
    color: var(--bs-info);
    border-color: var(--color-01-70);
}

/* {# Read-only state: when an element is not editable by the user. #} */
input:read-only,
textarea:read-only,
select:read-only {
    background-color: var(--color-01-80);
    background: linear-gradient({{ range(0, 361) | random }}deg, var(--color-01-90), var(--color-01-70));
    color: var(--color-01-20);
    border-color: var(--color-01-50);
}

/* {# Read-write state: when an element is editable by the user. #} */
input:read-write,
textarea:read-write,
select:read-write {
    background-color: var(--color-01-70);
    background: linear-gradient({{ range(0, 361) | random }}deg, var(--color-01-70), var(--color-01-80));
    color: var(--color-01-40);
    border-color: var(--color-01-70);
}

/* {# In-range: for inputs with a defined range, when the value is within the allowed limits. #} */
input:in-range,
textarea:in-range,
select:in-range {
    background-color: var(--color-01-70);
    background: linear-gradient({{ range(0, 361) | random }}deg, var(--color-01-70), var(--color-01-85));
    color: var(--color-01-40);
    border-color: var(--color-01-70);
}

/* {# Out-of-range: for inputs with a defined range, when the value falls outside the allowed limits. #} */
input:out-of-range,
textarea:out-of-range,
select:out-of-range {
    background-color: var(--color-01-10);
    background: linear-gradient({{ range(0, 361) | random }}deg, var(--color-01-10), var(--color-01-30));
    color: var(--color-01-10);
    border-color: var(--color-01-50);
}

/* {# Placeholder-shown: when the input field is displaying its placeholder text. #} */
input:placeholder-shown,
textarea:placeholder-shown,
select:placeholder-shown {
    background-color: var(--color-01-82);
    background: linear-gradient({{ range(0, 361) | random }}deg, var(--color-01-82), var(--color-01-90));
    color: var(--color-01-40);
    border-color: var(--color-01-70);
}

/* {# Focus state: when the element is focused by the user. #} */
input:focus,
textarea:focus,
select:focus {
    background-color: var(--color-01-75);
    background: linear-gradient({{ range(0, 361) | random }}deg, var(--color-01-75), var(--color-01-85));
    color: var(--color-01-40);
    border-color: var(--color-01-50);
}

/* {# Hover state: when the mouse pointer is over the element. #} */
input:hover,
textarea:hover,
select:hover {
    background-color: var(--color-01-78);
    background: linear-gradient({{ range(0, 361) | random }}deg, var(--color-01-78), var(--color-01-88));
    color: var(--color-01-40);
    border-color: var(--color-01-65);
}

/* {# Active state: when the element is being activated (e.g., clicked). #} */
input:active,
textarea:active,
select:active {
    background-color: var(--color-01-68);
    background: linear-gradient({{ range(0, 361) | random }}deg, var(--color-01-68), var(--color-01-78));
    color: var(--color-01-40);
    border-color: var(--color-01-60);
}

/* {# Checked state: specifically for radio buttons and checkboxes when selected. #} */
input:checked {
    background-color: var(--color-01-90);
    background: linear-gradient({{ range(0, 361) | random }}deg, var(--color-01-90), var(--color-01-99));
    color: var(--color-01-40);
    border-color: var(--color-01-70);
}

option {
    background-color: var(--color-01-82);
    color: var(--color-01-07);
}

/* Tables (Borders and Header Colors) */
th, td {
    border-color: var(--color-01-70);
}

thead {
    background-color: var(--color-01-80);
    /* New Gradient based on original background (80 -5, 80, 80 +1, 80 +5) */
    background: linear-gradient({{ range(0, 361) | random }}deg, var(--color-01-75), var(--color-01-80), var(--color-01-81), var(--color-01-85));
    color: var(--color-01-40);
}

/* Headings (Text Color) */
h1, h2, h3, h4, h5, h6, p{
    color: var(--color-01-10);
}

/* Buttons (Background, Text, Border, and Shadow)
   Now using a button background that is only slightly darker than the overall background */
html[native-dark-active] .btn, .btn {
    background-color: var(--color-01-87);
    background: linear-gradient({{ range(0, 361) | random }}deg, var(--color-01-70), var(--color-01-91), var(--color-01-95), var(--color-01-95));
    color: var(--color-01-50);
    border-color: var(--color-01-80);
    cursor: pointer;
}

/* Navigation (Background and Text Colors) */
.navbar, .navbar-light, .navbar-dark, .navbar.bg-light {
    background-color: var(--color-01-90);
    /* New Gradient based on original background (90 -5, 90, 90 +1, 90 +5) */
    background: linear-gradient({{ range(0, 361) | random }}deg, var(--color-01-85), var(--color-01-90), var(--color-01-91), var(--color-01-95));
    color: var(--color-01-50);
    border-color: var(--color-01-85);
}

.navbar a {
    color: var(--color-01-40);
}

.navbar a.dropdown-item {
    color: var(--color-01-43);
}

/* Cards / Containers (Background, Border, and Shadow)
   Cards now use a slightly lighter background and a bold, clear shadow */
.card {
    background-color: var(--color-01-90);
    /* New Gradient based on original background (90 -5, 90, 90 +1, 90 +5) */
    background: linear-gradient({{ range(0, 361) | random }}deg, var(--color-01-85), var(--color-01-90), var(--color-01-91), var(--color-01-95));
    border-color: var(--color-01-85);
    color: var(--color-01-12);
}

.card-body {
    color: var(--color-01-40);
}

/* Dropdown Menu and Submenu (Background, Text, and Shadow) */
.navbar .dropdown-menu,
.nav-item .dropdown-menu {
    background-color: var(--color-01-80);
    /* New Gradient based on original background (80 -5, 80, 80 +1, 80 +5) */
    background: linear-gradient({{ range(0, 361) | random }}deg, var(--color-01-75), var(--color-01-80), var(--color-01-81), var(--color-01-85));
    color: var(--color-01-40);
}

.navbar-nav {
    --bs-nav-link-hover-color: var(--color-01-17);
}

.dropdown-item {
    color: var(--color-01-40);
    background-color: var(--color-01-80);
    /* New Gradient based on original background (80 -5, 80, 80 +1, 80 +5) */
    background: linear-gradient({{ range(0, 361) | random }}deg, var(--color-01-75), var(--color-01-80), var(--color-01-81), var(--color-01-85));
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: var(--color-01-65);
    /* New Gradient based on original background (65 -5, 65, 65 +1, 65 +5) */
    background: linear-gradient({{ range(0, 361) | random }}deg, var(--color-01-60), var(--color-01-65), var(--color-01-66), var(--color-01-70));
    color: var(--color-01-40);
}

/* Keycloak */
div#app header{
    background-color: var(--color-01-60);
    /* New Gradient based on original background (60 -5, 60, 60 +1, 60 +5) */
    background: linear-gradient({{ range(0, 361) | random }}deg, var(--color-01-55), var(--color-01-60), var(--color-01-61), var(--color-01-65));
    color: var(--color-01-98);
}

/** LAM Specific **/
.lam-vertical-tabs-navigation li, .lam-vertical-tabs-navigation{
    background-color: transparent !important;
    border-color:     transparent;
}

ul.lam-tab-navigation {
    background: rgba(var(--color-01-rgb-90), 0.1);
    border-color:      transparent;
}

/* Not changable due to inline css */
.roundedShadowBox {
    color: #000000;
}

.titleBar {
    background-image: linear-gradient(var(--color-01-83), var(--color-01-92));
    /* New Gradient based on original background (83 -5, 83, 83 +1, 83 +5) */
    background-image: linear-gradient({{ range(0, 361) | random }}deg, var(--color-01-78), var(--color-01-83), var(--color-01-84), var(--color-01-88));
    border-top-color: var(--color-01-78);
    border-left-color: var(--color-01-87);
    border-right-color: var(--color-01-87);
}

div.statusInfo {
    background-color: var(--color-01-81);
    /* New Gradient based on original background (81 -5, 81, 81 +1, 81 +5) */
    background: linear-gradient({{ range(0, 361) | random }}deg, var(--color-01-76), var(--color-01-81), var(--color-01-82), var(--color-01-86));
    color: var(--color-01-23);
}

/** Mailu **/
[class*=sidebar-dark-], .bg-mailu-logo {
    background-color: var(--color-01-90);
    /* New Gradient based on original background (90 -5, 90, 90 +1, 90 +5) */
    background: linear-gradient({{ range(0, 361) | random }}deg, var(--color-01-85), var(--color-01-90), var(--color-01-91), var(--color-01-95));
}

div.statusError {
    background-color: var(--color-01-60);
    /* New Gradient based on original background (60 -5, 60, 60 +1, 60 +5) */
    background: linear-gradient({{ range(0, 361) | random }}deg, var(--color-01-55), var(--color-01-60), var(--color-01-61), var(--color-01-65));
}

div.wrapper footer.main-footer, div.wrapper div.content-wrapper{
    background-color: var(--color-01-85);
    background: linear-gradient({{ range(0, 361) | random }}deg, var(--color-01-89), var(--color-01-85), var(--color-01-80), var(--color-01-79));
    color: var(--color-01-39);
}

html.dark-mode #layout-menu .special-buttons a:not(:focus) {
    background: none;
}

html.dark-mode #taskmenu a.selected, html.dark-mode .menu.toolbar a.selected {
    background-color: rgba(var(--color-01-rgb-82), 0.5);
}

html.dark-mode .listing li.selected, html.dark-mode .listing li.selected>a, html.dark-mode .listing li.selected>div>a, html.dark-mode .listing tr.selected td {
    color: var(--color-01-30);
    background-color: rgba(var(--color-01-rgb-82), 0.5);
}

html.dark-mode .message-htmlpart {
    background-color: rgba(var(--color-01-rgb-99), 0.08);
    color: var(--color-01-15);
}

/** Nextcloud specific **/
html.ng-csp header#header{
    background-color: var(--color-01-80);
    /* New Gradient based on original background (80 -5, 80, 80 +1, 80 +5) */
    background: linear-gradient({{ range(0, 361) | random }}deg, var(--color-01-75), var(--color-01-80), var(--color-01-81), var(--color-01-85));
    color: var(--color-01-17);
}

.files-list__row-name button, button.button-vue{
    background: transparent;
}

html.ng-csp div#postsetupchecks ul.info{
    background-color: transparent;
}

div#mastodon .column-link{
    color: var(--color-01-55); 
}

div#mastodon .column-back-button {
    color: var(--color-01-58);
}

div#mastodon textarea, div#mastodon input, div#mastodon .compose-form__highlightable {
    background-color: var(--color-01-89);
    /* New Gradient based on original background (89 -5, 89, 89 +1, 89 +5) */
    background: linear-gradient({{ range(0, 361) | random }}deg, var(--color-01-84), var(--color-01-89), var(--color-01-90), var(--color-01-94));
    color: var(--color-01-19);
}

div#mastodon .status-card__title, div#mastodon .display-name strong{
    color: var(--color-01-33);
}

div#mastodon a.unhandled-link, div#mastodon .dropdown-button, div#mastodon .status__content a, div#mastodon .status-card__author{
    color: var(--color-01-29);
}
div#mastodon .dropdown-button{
    border: 1px solid #8c8dff;
}

div#mastodon .button, div#mastodon .button:active, div#mastodon .button:focus, div#mastodon .button:hover{
    background-color: var(--color-01-71);
    background: linear-gradient({{ range(0, 361) | random }}deg, var(--color-01-66), var(--color-01-71), var(--color-01-72), var(--color-01-76));
}

.compose-form__actions .icon-button {
    color: var(--color-01-28);
}

/** OpenProject **/
header.op-app-header{
    background-color: var(--color-01-40);
    background: linear-gradient({{ range(0, 361) | random }}deg, var(--color-01-35), var(--color-01-40), var(--color-01-41), var(--color-01-45));
    color: var(--color-01-40);
}

div#wrapper button, div#wrapper input, button.top-menu-search-button, div.menu-sidebar a{
    background-color: transparent;
}

/* OAuth2 Proxy */
{# The variables look like they are bootstrap variables. @todo Verify and generalize if possible #}
.box {
    background-color: var(--color-01-92);
    color: var(--color-01-10);
}

.subtitle {
    color: inherit;
}

.has-background-light {
    background-color: var(--color-01-96) !important;
}

/* Pixelfed */
div.page-wrapper{
    background: none;
    background-color: none;
}

.card-header-title {
    color: var(--color-01-37);
}

/* PHP MyAdmin */
#pma_navigation {
    background: linear-gradient(to right, var(--color-01-95), var(--color-01-85));
    color: var(--color-01-05);
}

#pma_navigation_tree a {
    color: var(--color-01-05);
}

#pma_navigation_tree li.activePointer, #pma_navigation_tree li.selected {
    color: var(--color-01-05);
    background-color: var(--color-01-70);
}

.breadcrumb-navbar {
    background-color: var(--color-01-86);
}

.navbar-nav .nav-item {
    background: linear-gradient(var(--color-01-99), var(--color-01-85));
    border-right-color: var(--color-01-99);
    border-left-color: var(--color-01-80);
    border-bottom-color: var(--color-01-80);
}

.result_query div.sqlOuter {
    background: var(--color-01-50);
}

.table {
    --bs-table-bg: var(--color-01-99);               /* #fff → white */
    --bs-table-border-color: var(--color-01-99);     /* #fff → white */
    --bs-table-striped-bg: var(--color-01-90);       /* #dfdfdf → light gray */
    --bs-table-hover-color: var(--color-01-01);      /* #000 → black */
}

.table thead th {
    background-image: linear-gradient(var(--color-01-90), var(--color-01-80));
    border-color: var(--color-01-99);
}

.table th, .table td {
    text-shadow: 0 1px 0 var(--color-01-60);
}

div.tools, .tblFooters {
    color: var(--color-01-01);
    background: var(--color-01-62);
}


.navigation {
    background: linear-gradient(var(--color-01-87), var(--color-01-69));
}

.pma-fieldset {
    border-color: var(--color-01-17);
    background: var(--color-01-80);
}

/** Taiga specific configuration  **/

section.main.kanban{
    background-color: transparent;
}

div.master, div.kanban-header, div.kanban-table-inner, section.kanban button,a.dropdown-project-list-projects{
    background-color: var(--color-01-92);
    background: linear-gradient({{ range(0, 361) | random }}deg, var(--color-01-87), var(--color-01-92), var(--color-01-93), var(--color-01-97));
    color: var(--color-01-40);
}

section.kanban h1, section.kanban h2{
    color: var(--color-01-40);
}

.home-project {
    background: var(--color-01-88);
    background: linear-gradient({{ range(0, 361) | random }}deg, var(--color-01-83), var(--color-01-88), var(--color-01-89), var(--color-01-93));
    border-color: var(--color-01-60);
    color: var(--color-01-12);
}

.home-wrapper .title-bar {
    background: var(--color-01-75);
    background: linear-gradient({{ range(0, 361) | random }}deg, var(--color-01-70), var(--color-01-75), var(--color-01-76), var(--color-01-80));
}

.kanban.swimlane .kanban-header {
    background: none;
}

.kanban-table-header .task-colum-name {
    background-color: var(--color-01-70);
    color: var(--color-01-10);
}

input.ng-empty::placeholder,.ng-empty::placeholder  {
  color: rgba(var(--color-01-rgb-03),0.6);
}

.lightbox {
    background: rgba(var(--color-01-rgb-97), .93);
    color: var(--color-01-03);
}

.kanban-filter tg-filter {
    border-color: var(--color-01-70);
}

.discover-header {
    background: none;
}

/* Portfolio */ 
.card-img-top i {
    filter: drop-shadow(4px 4px 4px rgba(var(--color-01-rgb-23), 0.6));
}

.kanban-table-body .kanban-uses-box {
    background-color: var(--color-01-81);
}

.kanban-swimlane-title {
    border-bottom: none;
}

.navbar-toggler {
    background-color:   rgba(var(--color-rgb-01-75), 0.9);
    border-color:       var(--color-01-67)
}

.sys-ctl-alm-info {
    --bs-sys-ctl-alm-color: var(--color-03-14);
    --bs-sys-ctl-alm-bg: var(--color-01-86);
}