:root{
{% for i in range(1, 21) %}
  {% set black = i * 50 %}
  {% set color = 100 - i * 5 %}
  --pf-v5-global--palette--black-{{ black }}: var(--color-01-{{ "%02d" % color }});
{% endfor %}
  --pf-v5-global--palette--white:      var(--color-01-99);
  --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-rgb-01-10),0.7);
  --pf-v5-global--BackgroundColor--dark-transparent-200: rgba(var(--color-rgb-01-20),0.8);
  --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);
  --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);
  --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);
  --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);
  --pf-v5-global--secondary-color--100: var(--color-01-40);
  --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);
  --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);
  --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);
  --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);
    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-rgb-01-56), 0.4);
}
/* Keycloak */
div#app header{
    background-color: var(--color-01-60);
    background: linear-gradient({{ CSS_GRADIENT_ANGLE }}deg, var(--color-01-55), var(--color-01-60), var(--color-01-61), var(--color-01-65));
    color: var(--color-01-98);
}