/* Grade badge with no gradient background: white text was invisible on gray.
Give it a dark text colour so it's readable. */
.grade.gradient-none-bg {
color: #1a1a1a !important; /* dark near-black text */
}
.grade.gradient-none-bg span {
color: #1a1a1a !important; /* span sometimes overrides the div */
}

:root {
            --sbx-config-container-corner-radius: var(--sbx-border-radius-l);
            --sbx-config-field-corner-radius: var(--sbx-border-radius-l);
            --sbx-config-container-drop-shadow: var(--sbx-shadow-m);
                --sbx-config-color-body-background-r: 237;
        --sbx-config-color-body-background-g: 237;
        --sbx-config-color-body-background-b: 237;
        --sbx-config-color-body-background-h: 0;
        --sbx-config-color-body-background-s: 0%;
        --sbx-config-color-body-background-l: 92.9%;
        --sbx-config-color-body-background-a: 1;
        --sbx-config-color-body-background:   hsla(
            var(--sbx-config-color-body-background-h),
            var(--sbx-config-color-body-background-s),
            var(--sbx-config-color-body-background-l),
            var(--sbx-config-color-body-background-a)
        );
            --sbx-config-color-body-background-contrast-r: 0;
        --sbx-config-color-body-background-contrast-g: 0;
        --sbx-config-color-body-background-contrast-b: 0;
        --sbx-config-color-body-background-contrast-h: 0;
        --sbx-config-color-body-background-contrast-s: 0%;
        --sbx-config-color-body-background-contrast-l: 0%;
        --sbx-config-color-body-background-contrast-a: 1;
        --sbx-config-color-body-background-contrast:   hsla(
            var(--sbx-config-color-body-background-contrast-h),
            var(--sbx-config-color-body-background-contrast-s),
            var(--sbx-config-color-body-background-contrast-l),
            var(--sbx-config-color-body-background-contrast-a)
        );
            --sbx-config-color-accent-r: 0;
        --sbx-config-color-accent-g: 102;
        --sbx-config-color-accent-b: 176;
        --sbx-config-color-accent-h: 205.2;
        --sbx-config-color-accent-s: 100%;
        --sbx-config-color-accent-l: 34.5%;
        --sbx-config-color-accent-a: 1;
        --sbx-config-color-accent:   hsla(
            var(--sbx-config-color-accent-h),
            var(--sbx-config-color-accent-s),
            var(--sbx-config-color-accent-l),
            var(--sbx-config-color-accent-a)
        );
            --sbx-config-color-accent-contrast-r: 255;
        --sbx-config-color-accent-contrast-g: 255;
        --sbx-config-color-accent-contrast-b: 255;
        --sbx-config-color-accent-contrast-h: 0;
        --sbx-config-color-accent-contrast-s: 0%;
        --sbx-config-color-accent-contrast-l: 100%;
        --sbx-config-color-accent-contrast-a: 1;
        --sbx-config-color-accent-contrast:   hsla(
            var(--sbx-config-color-accent-contrast-h),
            var(--sbx-config-color-accent-contrast-s),
            var(--sbx-config-color-accent-contrast-l),
            var(--sbx-config-color-accent-contrast-a)
        );
            --sbx-config-color-accent-text-r: 255;
        --sbx-config-color-accent-text-g: 255;
        --sbx-config-color-accent-text-b: 255;
        --sbx-config-color-accent-text-h: 0;
        --sbx-config-color-accent-text-s: 0%;
        --sbx-config-color-accent-text-l: 100%;
        --sbx-config-color-accent-text-a: 1;
        --sbx-config-color-accent-text:   hsla(
            var(--sbx-config-color-accent-text-h),
            var(--sbx-config-color-accent-text-s),
            var(--sbx-config-color-accent-text-l),
            var(--sbx-config-color-accent-text-a)
        );
            --sbx-config-color-accent-text-contrast-r: 0;
        --sbx-config-color-accent-text-contrast-g: 0;
        --sbx-config-color-accent-text-contrast-b: 0;
        --sbx-config-color-accent-text-contrast-h: 0;
        --sbx-config-color-accent-text-contrast-s: 0%;
        --sbx-config-color-accent-text-contrast-l: 0%;
        --sbx-config-color-accent-text-contrast-a: 1;
        --sbx-config-color-accent-text-contrast:   hsla(
            var(--sbx-config-color-accent-text-contrast-h),
            var(--sbx-config-color-accent-text-contrast-s),
            var(--sbx-config-color-accent-text-contrast-l),
            var(--sbx-config-color-accent-text-contrast-a)
        );
            --sbx-config-color-active-r: 229;
        --sbx-config-color-active-g: 244;
        --sbx-config-color-active-b: 255;
        --sbx-config-color-active-h: 205.4;
        --sbx-config-color-active-s: 100%;
        --sbx-config-color-active-l: 94.9%;
        --sbx-config-color-active-a: 1;
        --sbx-config-color-active:   hsla(
            var(--sbx-config-color-active-h),
            var(--sbx-config-color-active-s),
            var(--sbx-config-color-active-l),
            var(--sbx-config-color-active-a)
        );
            --sbx-config-color-active-contrast-r: 0;
        --sbx-config-color-active-contrast-g: 0;
        --sbx-config-color-active-contrast-b: 0;
        --sbx-config-color-active-contrast-h: 0;
        --sbx-config-color-active-contrast-s: 0%;
        --sbx-config-color-active-contrast-l: 0%;
        --sbx-config-color-active-contrast-a: 1;
        --sbx-config-color-active-contrast:   hsla(
            var(--sbx-config-color-active-contrast-h),
            var(--sbx-config-color-active-contrast-s),
            var(--sbx-config-color-active-contrast-l),
            var(--sbx-config-color-active-contrast-a)
        );
            --sbx-config-color-menu-background-r: 0;
        --sbx-config-color-menu-background-g: 48;
        --sbx-config-color-menu-background-b: 94;
        --sbx-config-color-menu-background-h: 209.4;
        --sbx-config-color-menu-background-s: 100%;
        --sbx-config-color-menu-background-l: 18.4%;
        --sbx-config-color-menu-background-a: 1;
        --sbx-config-color-menu-background:   hsla(
            var(--sbx-config-color-menu-background-h),
            var(--sbx-config-color-menu-background-s),
            var(--sbx-config-color-menu-background-l),
            var(--sbx-config-color-menu-background-a)
        );
            --sbx-config-color-menu-background-contrast-r: 255;
        --sbx-config-color-menu-background-contrast-g: 255;
        --sbx-config-color-menu-background-contrast-b: 255;
        --sbx-config-color-menu-background-contrast-h: 0;
        --sbx-config-color-menu-background-contrast-s: 0%;
        --sbx-config-color-menu-background-contrast-l: 100%;
        --sbx-config-color-menu-background-contrast-a: 1;
        --sbx-config-color-menu-background-contrast:   hsla(
            var(--sbx-config-color-menu-background-contrast-h),
            var(--sbx-config-color-menu-background-contrast-s),
            var(--sbx-config-color-menu-background-contrast-l),
            var(--sbx-config-color-menu-background-contrast-a)
        );
            --sbx-config-color-menu-foreground-r: 255;
        --sbx-config-color-menu-foreground-g: 255;
        --sbx-config-color-menu-foreground-b: 255;
        --sbx-config-color-menu-foreground-h: 0;
        --sbx-config-color-menu-foreground-s: 0%;
        --sbx-config-color-menu-foreground-l: 100%;
        --sbx-config-color-menu-foreground-a: 1;
        --sbx-config-color-menu-foreground:   hsla(
            var(--sbx-config-color-menu-foreground-h),
            var(--sbx-config-color-menu-foreground-s),
            var(--sbx-config-color-menu-foreground-l),
            var(--sbx-config-color-menu-foreground-a)
        );
            --sbx-config-color-menu-foreground-contrast-r: 0;
        --sbx-config-color-menu-foreground-contrast-g: 0;
        --sbx-config-color-menu-foreground-contrast-b: 0;
        --sbx-config-color-menu-foreground-contrast-h: 0;
        --sbx-config-color-menu-foreground-contrast-s: 0%;
        --sbx-config-color-menu-foreground-contrast-l: 0%;
        --sbx-config-color-menu-foreground-contrast-a: 1;
        --sbx-config-color-menu-foreground-contrast:   hsla(
            var(--sbx-config-color-menu-foreground-contrast-h),
            var(--sbx-config-color-menu-foreground-contrast-s),
            var(--sbx-config-color-menu-foreground-contrast-l),
            var(--sbx-config-color-menu-foreground-contrast-a)
        );
            --sbx-config-color-menu-hover-r: 33;
        --sbx-config-color-menu-hover-g: 122;
        --sbx-config-color-menu-hover-b: 186;
        --sbx-config-color-menu-hover-h: 205.1;
        --sbx-config-color-menu-hover-s: 69.9%;
        --sbx-config-color-menu-hover-l: 42.9%;
        --sbx-config-color-menu-hover-a: 1;
        --sbx-config-color-menu-hover:   hsla(
            var(--sbx-config-color-menu-hover-h),
            var(--sbx-config-color-menu-hover-s),
            var(--sbx-config-color-menu-hover-l),
            var(--sbx-config-color-menu-hover-a)
        );
            --sbx-config-color-menu-hover-contrast-r: 255;
        --sbx-config-color-menu-hover-contrast-g: 255;
        --sbx-config-color-menu-hover-contrast-b: 255;
        --sbx-config-color-menu-hover-contrast-h: 0;
        --sbx-config-color-menu-hover-contrast-s: 0%;
        --sbx-config-color-menu-hover-contrast-l: 100%;
        --sbx-config-color-menu-hover-contrast-a: 1;
        --sbx-config-color-menu-hover-contrast:   hsla(
            var(--sbx-config-color-menu-hover-contrast-h),
            var(--sbx-config-color-menu-hover-contrast-s),
            var(--sbx-config-color-menu-hover-contrast-l),
            var(--sbx-config-color-menu-hover-contrast-a)
        );
            --sbx-config-color-component-heading-background-r: 229;
        --sbx-config-color-component-heading-background-g: 239;
        --sbx-config-color-component-heading-background-b: 247;
        --sbx-config-color-component-heading-background-h: 206.7;
        --sbx-config-color-component-heading-background-s: 52.9%;
        --sbx-config-color-component-heading-background-l: 93.3%;
        --sbx-config-color-component-heading-background-a: 1;
        --sbx-config-color-component-heading-background:   hsla(
            var(--sbx-config-color-component-heading-background-h),
            var(--sbx-config-color-component-heading-background-s),
            var(--sbx-config-color-component-heading-background-l),
            var(--sbx-config-color-component-heading-background-a)
        );
            --sbx-config-color-component-heading-background-contrast-r: 0;
        --sbx-config-color-component-heading-background-contrast-g: 0;
        --sbx-config-color-component-heading-background-contrast-b: 0;
        --sbx-config-color-component-heading-background-contrast-h: 0;
        --sbx-config-color-component-heading-background-contrast-s: 0%;
        --sbx-config-color-component-heading-background-contrast-l: 0%;
        --sbx-config-color-component-heading-background-contrast-a: 1;
        --sbx-config-color-component-heading-background-contrast:   hsla(
            var(--sbx-config-color-component-heading-background-contrast-h),
            var(--sbx-config-color-component-heading-background-contrast-s),
            var(--sbx-config-color-component-heading-background-contrast-l),
            var(--sbx-config-color-component-heading-background-contrast-a)
        );
            --sbx-config-color-component-heading-text-r: 0;
        --sbx-config-color-component-heading-text-g: 0;
        --sbx-config-color-component-heading-text-b: 0;
        --sbx-config-color-component-heading-text-h: 0;
        --sbx-config-color-component-heading-text-s: 0%;
        --sbx-config-color-component-heading-text-l: 0%;
        --sbx-config-color-component-heading-text-a: 1;
        --sbx-config-color-component-heading-text:   hsla(
            var(--sbx-config-color-component-heading-text-h),
            var(--sbx-config-color-component-heading-text-s),
            var(--sbx-config-color-component-heading-text-l),
            var(--sbx-config-color-component-heading-text-a)
        );
            --sbx-config-color-component-heading-text-contrast-r: 255;
        --sbx-config-color-component-heading-text-contrast-g: 255;
        --sbx-config-color-component-heading-text-contrast-b: 255;
        --sbx-config-color-component-heading-text-contrast-h: 0;
        --sbx-config-color-component-heading-text-contrast-s: 0%;
        --sbx-config-color-component-heading-text-contrast-l: 100%;
        --sbx-config-color-component-heading-text-contrast-a: 1;
        --sbx-config-color-component-heading-text-contrast:   hsla(
            var(--sbx-config-color-component-heading-text-contrast-h),
            var(--sbx-config-color-component-heading-text-contrast-s),
            var(--sbx-config-color-component-heading-text-contrast-l),
            var(--sbx-config-color-component-heading-text-contrast-a)
        );
            --sbx-config-login-form-background-r: 229;
        --sbx-config-login-form-background-g: 239;
        --sbx-config-login-form-background-b: 247;
        --sbx-config-login-form-background-h: 206.7;
        --sbx-config-login-form-background-s: 52.9%;
        --sbx-config-login-form-background-l: 93.3%;
        --sbx-config-login-form-background-a: 1;
        --sbx-config-login-form-background:   hsla(
            var(--sbx-config-login-form-background-h),
            var(--sbx-config-login-form-background-s),
            var(--sbx-config-login-form-background-l),
            var(--sbx-config-login-form-background-a)
        );
            --sbx-config-login-form-background-contrast-r: 0;
        --sbx-config-login-form-background-contrast-g: 0;
        --sbx-config-login-form-background-contrast-b: 0;
        --sbx-config-login-form-background-contrast-h: 0;
        --sbx-config-login-form-background-contrast-s: 0%;
        --sbx-config-login-form-background-contrast-l: 0%;
        --sbx-config-login-form-background-contrast-a: 1;
        --sbx-config-login-form-background-contrast:   hsla(
            var(--sbx-config-login-form-background-contrast-h),
            var(--sbx-config-login-form-background-contrast-s),
            var(--sbx-config-login-form-background-contrast-l),
            var(--sbx-config-login-form-background-contrast-a)
        );
            --sbx-config-login-form-foreground-r: 0;
        --sbx-config-login-form-foreground-g: 102;
        --sbx-config-login-form-foreground-b: 176;
        --sbx-config-login-form-foreground-h: 205.2;
        --sbx-config-login-form-foreground-s: 100%;
        --sbx-config-login-form-foreground-l: 34.5%;
        --sbx-config-login-form-foreground-a: 1;
        --sbx-config-login-form-foreground:   hsla(
            var(--sbx-config-login-form-foreground-h),
            var(--sbx-config-login-form-foreground-s),
            var(--sbx-config-login-form-foreground-l),
            var(--sbx-config-login-form-foreground-a)
        );
            --sbx-config-login-form-foreground-contrast-r: 255;
        --sbx-config-login-form-foreground-contrast-g: 255;
        --sbx-config-login-form-foreground-contrast-b: 255;
        --sbx-config-login-form-foreground-contrast-h: 0;
        --sbx-config-login-form-foreground-contrast-s: 0%;
        --sbx-config-login-form-foreground-contrast-l: 100%;
        --sbx-config-login-form-foreground-contrast-a: 1;
        --sbx-config-login-form-foreground-contrast:   hsla(
            var(--sbx-config-login-form-foreground-contrast-h),
            var(--sbx-config-login-form-foreground-contrast-s),
            var(--sbx-config-login-form-foreground-contrast-l),
            var(--sbx-config-login-form-foreground-contrast-a)
        );
    }