/******************************************************
 *                              WCC CUSTOM CSS
 *                        July 2026 - To suit Sonar UI
 ******************************************************/

.component-titlebar {
    background: rgb(0, 106, 82) !important;
}

/*********************** LOGIN ***********************/
.login .samlbutton {
    background: var(--sbx-config-color-accent);
    border: var(--sbx-border-width-normal) solid var(--sbx-config-color-accent);
    border-radius: var(--sbx-config-field-corner-radius);
    color: var(--sbx-config-color-accent-text);
    font-weight: 600;
    color: white !important;
    display: block;
    z-index: 9999;
    position: absolute;
    width: 100%;
    padding: .5rem .5rem .5625rem !important;
    font-size: 16px;
}
.login .samlbutton:before {
  content: "Staff & Students";
  display: block;
  font-weight: 700;
}
.login .samlbutton:hover {
    text-decoration: none;
    z-index: 9999 !important;
    background: var(--sbx-config-color-active);
    color: var(--sbx-config-color-accent) !important;
    -webkit-filter: brightness(1.1);
    filter: brightness(1.1);
}
.login .logo:after {
  content: "Parents & Guest Login";
  color: white;
  top: 25px;
  display: block;
  position: relative;
  font-weight: 600;
  font-size: 16px;
}

/* ADD PARENT LOGIN ALERT MESSAGE */
#login #error-msg:after {
    content: "\A Parents, please ensure your username \Ahas a zero after the P or S.";
    white-space: pre;
}

#login #error-msg::before {
    content: "Staff and Students please login \Awith SSO.";
    font-weight: bold;
    display: block;
    white-space: pre;
}

:root {
            --sbx-config-container-corner-radius: var(--sbx-border-radius-m);
            --sbx-config-field-corner-radius: var(--sbx-border-radius-s);
            --sbx-config-container-drop-shadow: var(--sbx-shadow-none);
                --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: 106;
        --sbx-config-color-accent-b: 82;
        --sbx-config-color-accent-h: 166.4;
        --sbx-config-color-accent-s: 100%;
        --sbx-config-color-accent-l: 20.8%;
        --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: 233;
        --sbx-config-color-active-b: 232;
        --sbx-config-color-active-h: 165;
        --sbx-config-color-active-s: 8.3%;
        --sbx-config-color-active-l: 90.6%;
        --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: 106;
        --sbx-config-color-menu-background-b: 82;
        --sbx-config-color-menu-background-h: 166.4;
        --sbx-config-color-menu-background-s: 100%;
        --sbx-config-color-menu-background-l: 20.8%;
        --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: 237;
        --sbx-config-color-menu-foreground-g: 237;
        --sbx-config-color-menu-foreground-b: 237;
        --sbx-config-color-menu-foreground-h: 0;
        --sbx-config-color-menu-foreground-s: 0%;
        --sbx-config-color-menu-foreground-l: 92.9%;
        --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: 0;
        --sbx-config-color-menu-hover-g: 0;
        --sbx-config-color-menu-hover-b: 0;
        --sbx-config-color-menu-hover-h: 0;
        --sbx-config-color-menu-hover-s: 0%;
        --sbx-config-color-menu-hover-l: 0%;
        --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: 0;
        --sbx-config-color-component-heading-background-g: 106;
        --sbx-config-color-component-heading-background-b: 82;
        --sbx-config-color-component-heading-background-h: 166.4;
        --sbx-config-color-component-heading-background-s: 100%;
        --sbx-config-color-component-heading-background-l: 20.8%;
        --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: 255;
        --sbx-config-color-component-heading-background-contrast-g: 255;
        --sbx-config-color-component-heading-background-contrast-b: 255;
        --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: 100%;
        --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: 255;
        --sbx-config-color-component-heading-text-g: 255;
        --sbx-config-color-component-heading-text-b: 255;
        --sbx-config-color-component-heading-text-h: 0;
        --sbx-config-color-component-heading-text-s: 0%;
        --sbx-config-color-component-heading-text-l: 100%;
        --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: 0;
        --sbx-config-color-component-heading-text-contrast-g: 0;
        --sbx-config-color-component-heading-text-contrast-b: 0;
        --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: 0%;
        --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: 94;
        --sbx-config-login-form-background-g: 94;
        --sbx-config-login-form-background-b: 94;
        --sbx-config-login-form-background-h: 0;
        --sbx-config-login-form-background-s: 0%;
        --sbx-config-login-form-background-l: 36.9%;
        --sbx-config-login-form-background-a: 0.41;
        --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: 255;
        --sbx-config-login-form-background-contrast-g: 255;
        --sbx-config-login-form-background-contrast-b: 255;
        --sbx-config-login-form-background-contrast-h: 0;
        --sbx-config-login-form-background-contrast-s: 0%;
        --sbx-config-login-form-background-contrast-l: 100%;
        --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: 255;
        --sbx-config-login-form-foreground-g: 255;
        --sbx-config-login-form-foreground-b: 255;
        --sbx-config-login-form-foreground-h: 0;
        --sbx-config-login-form-foreground-s: 0%;
        --sbx-config-login-form-foreground-l: 100%;
        --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: 0;
        --sbx-config-login-form-foreground-contrast-g: 0;
        --sbx-config-login-form-foreground-contrast-b: 0;
        --sbx-config-login-form-foreground-contrast-h: 0;
        --sbx-config-login-form-foreground-contrast-s: 0%;
        --sbx-config-login-form-foreground-contrast-l: 0%;
        --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)
        );
    }