/************************************************************************
 * WESTSIDE CHRISTIAN COLLEGE
 * CUSTOM SCHOOLBOX SKIN STYLE
 * FIRST MODIFIED: APRIL 2016 
 * LAST MODIFIED: JANUARY 2020 
 ************************************************************************/
/* 
COLLEGE COLOUR PALLET
GREEN:  rgb(0, 106, 82) 
BLUE:   rgb(0, 32, 91)
YELLOW: rgb(255, 199, 44)
GOLD:   rgb(132, 117, 78)
BEIGE:  rgb(176, 170, 126) 
*/

/* 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;
}

/* Remove small logo on mobile view  */
.tab-bar-section > .logo { display: none; }  

/** LOGIN STYLES **/
.login > #container > #content { 
	margin:0px; 
}
/* LOGIN SIDEBAR */
body.login.side #content {
  background: rgba(255,255,255,0.55);
}

body.login.side #login label,
body.login.side #login a {
   color:  #0D2D6C;
}

@media only screen and (max-width: 40em) {  
    .login > #container > #content { margin:auto; }
	
    body.login.side #content {
      background: none;
    }
	
    body.login.side #login label,
    body.login.side #login a {
      color:  rgb(13, 44, 84);
    }
  
  body.login #content form {
    background-color: rgba(255,255,255,0.55);
  }
 }


.component-titlebar { background-color: #007054 !important; color: #ffffff; }  /* Class component title bar  */
.calendar-list li {  color: #007054; background-color: #cad7d3 !important;  } 


/*** SIDEBAR NAVIGATION WRAPPER ***/
.nav-wrapper {
	color: #ffffff !important; 
}

/************ CONTAINER BACKGROUND COLOUR ************/
#container {
	background: rgb(255,255,255);
}

/** BACKGROUND GRADIENT WITH W LOGO **/
.inner-wrap {
    /* background-image: linear-gradient(45deg,  rgba(0,48,36,0.9) 0%,rgba(0,48,36,0.9) 5%,rgba(0,113,97,0.9) 100%); 
    background-repeat: no-repeat; */
	background: rgb(0,112,84);
	
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#003024+5,007161+100&0.9+0,0.9+100 */
}

/************ MENUS & BUTTON STYLES ***********/
/***** SUBMENUS *****/
.sub-nav li a,
.sub-nav dd a,
.sub-nav.secondary li a,
.sub-nav.secondary dd a, 
.tabs dd a, .tabs li.tab-title a {
	color: #ffffff;
	background-color: #007054; 
}
.sub-nav li a:hover,
.sub-nav dd a:hover,
.sub-nav.secondary li a:hover,
.sub-nav.secondary dd a:hover,
.tabs dd a:hover, .tabs li.tab-title a:hover,
.sub-nav li.active a:hover {
	background-color: rgba(0,112,84,0.75);
	color: #ffffff; 
}
.sub-nav li.active a,
.sub-nav dd.active a,
.sub-nav.secondary li.active a,
.sub-nav.secondary dd.active a,
.tabs dd.active > a, .tabs .tab-title.active > a,
.sub-nav li.active a {
	background-color: rgba(0,112,84,0.75);
	color: #ffffff; 
}


/***** BUTTONS *****/
.button, .f-dropdown li a, .fc-button-group button {
	background: #007054;
	background-color: #007054 !important; 
	color: #ffffff !important; 
}
.button:hover, .f-dropdown li a:hover, .fc-button-group button:hover {
	background: rgb(21, 142, 121);
	background-color: rgb(21, 142, 121) !important;
	color: #ffffff !important;
}
.right-off-canvas-menu .button {
	background: #007054;
}
.right-off-canvas-menu .button:hover {
	background: rgba(0, 0, 0, 0.2); 
}
.component a {
    color: #FFFFFF;
}

/***** LEFT SIDEBAR MENU *****/
.left-off-canvas-menu {
	background: none; 
	background: #007054; 
}
.left-off-canvas-menu span {
	color: rgb(255,255,255);	
}
.left-off-canvas-menu .logo-wrapper {
	background: none !important; 
}
.left-submenu {
	background:rgba(0,113,97,0.98) !important;
}
.left-off-canvas-menu .left-submenu .back > a {
	background-color: none;
	color: #ffffff; 
}
.left-off-canvas-menu .left-submenu .back > a:hover {
	color: #ffffff; 
}
.left-off-canvas-menu, .hybrid-bar .tab-bar, .off-canvas-list li label {
	/*background: none;
	color: white; */
}

/***** LEFT MENU - MOBILE VIEW *****/
@media only screen and (max-width: 950px) {
	.left-off-canvas-menu {
		background-color: #007054;
		color: #ffffff; 
	}
	.left-off-canvas-menu ul.off-canvas-list a {
	    color: white;
	}
}

/***** TOP MENU ICONS *****/
.icon-nav li:hover {
	background-color: rgba(0, 0, 0, 0.2) !important;
}


/************ OTHER ELEMENTS ************/
/** SWITCH **/
.switch input:checked+label {
	background: #007054;
}
.switch span:first-child {
	color: #ffffff;
}

/***** TEXT AREAS, SELECT DROPDOWNS, INPUT FIELDS *****/
textarea, select, input:not([type]),
input[type="text"], input[type="password"],
input[type="date"], input[type="datetime"],
input[type="datetime-local"], input[type="month"],
input[type="week"], input[type="email"],
input[type="number"], input[type="search"],
input[type="tel"], input[type="time"],
input[type="url"], input[type="color"] {
	border-color: #cad7d3;
    background-color: #fff;
	color: #000;
}
textarea:focus, select:focus, input:not([type]):focus,
input[type="text"]:focus, input[type="password"]:focus,
input[type="date"]:focus, input[type="datetime"]:focus,
input[type="datetime-local"]:focus, input[type="month"]:focus,
input[type="week"]:focus, input[type="email"]:focus,
input[type="number"]:focus, input[type="search"]:focus,
input[type="tel"]:focus, input[type="time"]:focus,
input[type="url"]:focus, input[type="color"]:focus {
	color: #000;
	background: rgb(202, 215, 211);
	border-color: #007054; 
}
textarea:hover, select:hover, input:not([type]):hover,
input[type="text"]:hover, input[type="password"]:hover,
input[type="date"]:hover, input[type="datetime"]:hover,
input[type="datetime-local"]:hover, input[type="month"]:hover,
input[type="week"]:hover, input[type="email"]:hover,
input[type="number"]:hover, input[type="search"]:hover,
input[type="tel"]:hover, input[type="time"]:hover,
input[type="url"]:hover, input[type="color"]:hover {
	background: rgb(202, 215, 211);
	color: #000;
}

/**** PROFILE IMAGE ****/
.profile-drop img {
	border-radius: 50%; 
}
.full-width {
	width: auto;
}


/**** RESOURCES TREE ****/
div.jstree-default .jstree-node .jstree-wholerow.jstree-wholerow-clicked,
ul.jstree-default .jstree-node .jstree-wholerow.jstree-wholerow-clicked {
	background: rgba(0, 0, 0, 0.2);
}
div.jstree-default .jstree-anchor, ul.jstree-default .jstree-anchor {
    color: #007054;
}
.jstree-wholerow:hover, .jstree-wholerow-hovered {
	background: rgba(0, 0, 0, 0.2) !important;
}


.left-off-canvas-menu ul.off-canvas-list li a {
	color: #ffffff;
}
.left-off-canvas-menu ul.off-canvas-list li a:hover {
	color: #ffffff; 
}

/* July 2023 - Make profile photos fit */
#portraitImage img { width: auto !important; max-width: 100% !important; }
.profile img { width: auto !important; max-width: 100% !important; }


/* 2023 December - Login button */
.login .samlbutton {
  color: var(--content-ui-submit-foreground);
    background-color: var(--content-ui-submit-background);
    font-weight: 600;
    padding: 0.5rem 1rem 0.5625rem 1rem !important;
    font-size: 16px;
    color: white !important;
    display: block;
    z-index: 9999;
    position: absolute;
    width: 100%;
}

.login .samlbutton:before {
  content: "Staff & Students";
  display: block;
  font-weight: 700;
}

.login .samlbutton:hover {
  text-decoration: none;
  background-color: #338875;
  z-index: 9999 !important;
  width: 100%;
}

.login .logo:after {
  content: "Parents & Guest Login";
  color: black;
  top: 25px;
  display: block;
  position: relative;
  font-weight: 600;
  font-size: 16px;
}

:root {
            --navigation-foreground-r: 136;
        --navigation-foreground-g: 168;
        --navigation-foreground-b: 160;
        --navigation-foreground-h: 165;
        --navigation-foreground-s: 15.53%;
        --navigation-foreground-l: 59.61%;
        --navigation-foreground-a: 1;
        --navigation-foreground:   hsla(
            var(--navigation-foreground-h),
            var(--navigation-foreground-s),
            var(--navigation-foreground-l),
            var(--navigation-foreground-a)
        );
            --navigation-foreground-contrast-r: 255;
        --navigation-foreground-contrast-g: 255;
        --navigation-foreground-contrast-b: 255;
        --navigation-foreground-contrast-h: 0;
        --navigation-foreground-contrast-s: 0%;
        --navigation-foreground-contrast-l: 100%;
        --navigation-foreground-contrast-a: 1;
        --navigation-foreground-contrast:   hsla(
            var(--navigation-foreground-contrast-h),
            var(--navigation-foreground-contrast-s),
            var(--navigation-foreground-contrast-l),
            var(--navigation-foreground-contrast-a)
        );
            --navigation-background-r: 0;
        --navigation-background-g: 106;
        --navigation-background-b: 82;
        --navigation-background-h: 166.42;
        --navigation-background-s: 100%;
        --navigation-background-l: 20.78%;
        --navigation-background-a: 1;
        --navigation-background:   hsla(
            var(--navigation-background-h),
            var(--navigation-background-s),
            var(--navigation-background-l),
            var(--navigation-background-a)
        );
            --navigation-background-contrast-r: 255;
        --navigation-background-contrast-g: 255;
        --navigation-background-contrast-b: 255;
        --navigation-background-contrast-h: 0;
        --navigation-background-contrast-s: 0%;
        --navigation-background-contrast-l: 100%;
        --navigation-background-contrast-a: 1;
        --navigation-background-contrast:   hsla(
            var(--navigation-background-contrast-h),
            var(--navigation-background-contrast-s),
            var(--navigation-background-contrast-l),
            var(--navigation-background-contrast-a)
        );
            --navigation-hover-r: 0;
        --navigation-hover-g: 0;
        --navigation-hover-b: 0;
        --navigation-hover-h: 0;
        --navigation-hover-s: 0%;
        --navigation-hover-l: 0%;
        --navigation-hover-a: 0.3;
        --navigation-hover:   hsla(
            var(--navigation-hover-h),
            var(--navigation-hover-s),
            var(--navigation-hover-l),
            var(--navigation-hover-a)
        );
            --navigation-hover-contrast-r: 255;
        --navigation-hover-contrast-g: 255;
        --navigation-hover-contrast-b: 255;
        --navigation-hover-contrast-h: 0;
        --navigation-hover-contrast-s: 0%;
        --navigation-hover-contrast-l: 100%;
        --navigation-hover-contrast-a: 1;
        --navigation-hover-contrast:   hsla(
            var(--navigation-hover-contrast-h),
            var(--navigation-hover-contrast-s),
            var(--navigation-hover-contrast-l),
            var(--navigation-hover-contrast-a)
        );
            --off-canvas-foreground-r: 255;
        --off-canvas-foreground-g: 255;
        --off-canvas-foreground-b: 255;
        --off-canvas-foreground-h: 0;
        --off-canvas-foreground-s: 0%;
        --off-canvas-foreground-l: 100%;
        --off-canvas-foreground-a: 1;
        --off-canvas-foreground:   hsla(
            var(--off-canvas-foreground-h),
            var(--off-canvas-foreground-s),
            var(--off-canvas-foreground-l),
            var(--off-canvas-foreground-a)
        );
            --off-canvas-foreground-contrast-r: 0;
        --off-canvas-foreground-contrast-g: 0;
        --off-canvas-foreground-contrast-b: 0;
        --off-canvas-foreground-contrast-h: 0;
        --off-canvas-foreground-contrast-s: 0%;
        --off-canvas-foreground-contrast-l: 0%;
        --off-canvas-foreground-contrast-a: 1;
        --off-canvas-foreground-contrast:   hsla(
            var(--off-canvas-foreground-contrast-h),
            var(--off-canvas-foreground-contrast-s),
            var(--off-canvas-foreground-contrast-l),
            var(--off-canvas-foreground-contrast-a)
        );
            --off-canvas-background-r: 0;
        --off-canvas-background-g: 106;
        --off-canvas-background-b: 82;
        --off-canvas-background-h: 166.42;
        --off-canvas-background-s: 100%;
        --off-canvas-background-l: 20.78%;
        --off-canvas-background-a: 0.9;
        --off-canvas-background:   hsla(
            var(--off-canvas-background-h),
            var(--off-canvas-background-s),
            var(--off-canvas-background-l),
            var(--off-canvas-background-a)
        );
            --off-canvas-background-contrast-r: 255;
        --off-canvas-background-contrast-g: 255;
        --off-canvas-background-contrast-b: 255;
        --off-canvas-background-contrast-h: 0;
        --off-canvas-background-contrast-s: 0%;
        --off-canvas-background-contrast-l: 100%;
        --off-canvas-background-contrast-a: 1;
        --off-canvas-background-contrast:   hsla(
            var(--off-canvas-background-contrast-h),
            var(--off-canvas-background-contrast-s),
            var(--off-canvas-background-contrast-l),
            var(--off-canvas-background-contrast-a)
        );
            --off-canvas-hover-r: 0;
        --off-canvas-hover-g: 0;
        --off-canvas-hover-b: 0;
        --off-canvas-hover-h: 0;
        --off-canvas-hover-s: 0%;
        --off-canvas-hover-l: 0%;
        --off-canvas-hover-a: 0.3;
        --off-canvas-hover:   hsla(
            var(--off-canvas-hover-h),
            var(--off-canvas-hover-s),
            var(--off-canvas-hover-l),
            var(--off-canvas-hover-a)
        );
            --off-canvas-hover-contrast-r: 255;
        --off-canvas-hover-contrast-g: 255;
        --off-canvas-hover-contrast-b: 255;
        --off-canvas-hover-contrast-h: 0;
        --off-canvas-hover-contrast-s: 0%;
        --off-canvas-hover-contrast-l: 100%;
        --off-canvas-hover-contrast-a: 1;
        --off-canvas-hover-contrast:   hsla(
            var(--off-canvas-hover-contrast-h),
            var(--off-canvas-hover-contrast-s),
            var(--off-canvas-hover-contrast-l),
            var(--off-canvas-hover-contrast-a)
        );
            --accounts-menu-foreground-r: 0;
        --accounts-menu-foreground-g: 106;
        --accounts-menu-foreground-b: 82;
        --accounts-menu-foreground-h: 166.42;
        --accounts-menu-foreground-s: 100%;
        --accounts-menu-foreground-l: 20.78%;
        --accounts-menu-foreground-a: 1;
        --accounts-menu-foreground:   hsla(
            var(--accounts-menu-foreground-h),
            var(--accounts-menu-foreground-s),
            var(--accounts-menu-foreground-l),
            var(--accounts-menu-foreground-a)
        );
            --accounts-menu-foreground-contrast-r: 255;
        --accounts-menu-foreground-contrast-g: 255;
        --accounts-menu-foreground-contrast-b: 255;
        --accounts-menu-foreground-contrast-h: 0;
        --accounts-menu-foreground-contrast-s: 0%;
        --accounts-menu-foreground-contrast-l: 100%;
        --accounts-menu-foreground-contrast-a: 1;
        --accounts-menu-foreground-contrast:   hsla(
            var(--accounts-menu-foreground-contrast-h),
            var(--accounts-menu-foreground-contrast-s),
            var(--accounts-menu-foreground-contrast-l),
            var(--accounts-menu-foreground-contrast-a)
        );
            --accounts-menu-background-r: 232;
        --accounts-menu-background-g: 238;
        --accounts-menu-background-b: 236;
        --accounts-menu-background-h: 160;
        --accounts-menu-background-s: 15%;
        --accounts-menu-background-l: 92.16%;
        --accounts-menu-background-a: 1;
        --accounts-menu-background:   hsla(
            var(--accounts-menu-background-h),
            var(--accounts-menu-background-s),
            var(--accounts-menu-background-l),
            var(--accounts-menu-background-a)
        );
            --accounts-menu-background-contrast-r: 0;
        --accounts-menu-background-contrast-g: 0;
        --accounts-menu-background-contrast-b: 0;
        --accounts-menu-background-contrast-h: 0;
        --accounts-menu-background-contrast-s: 0%;
        --accounts-menu-background-contrast-l: 0%;
        --accounts-menu-background-contrast-a: 1;
        --accounts-menu-background-contrast:   hsla(
            var(--accounts-menu-background-contrast-h),
            var(--accounts-menu-background-contrast-s),
            var(--accounts-menu-background-contrast-l),
            var(--accounts-menu-background-contrast-a)
        );
            --accounts-menu-hover-r: 217;
        --accounts-menu-hover-g: 218;
        --accounts-menu-hover-b: 217;
        --accounts-menu-hover-h: 120;
        --accounts-menu-hover-s: 1.33%;
        --accounts-menu-hover-l: 85.29%;
        --accounts-menu-hover-a: 1;
        --accounts-menu-hover:   hsla(
            var(--accounts-menu-hover-h),
            var(--accounts-menu-hover-s),
            var(--accounts-menu-hover-l),
            var(--accounts-menu-hover-a)
        );
            --accounts-menu-hover-contrast-r: 0;
        --accounts-menu-hover-contrast-g: 0;
        --accounts-menu-hover-contrast-b: 0;
        --accounts-menu-hover-contrast-h: 0;
        --accounts-menu-hover-contrast-s: 0%;
        --accounts-menu-hover-contrast-l: 0%;
        --accounts-menu-hover-contrast-a: 1;
        --accounts-menu-hover-contrast:   hsla(
            var(--accounts-menu-hover-contrast-h),
            var(--accounts-menu-hover-contrast-s),
            var(--accounts-menu-hover-contrast-l),
            var(--accounts-menu-hover-contrast-a)
        );
            --content-ui-foreground-r: 0;
        --content-ui-foreground-g: 106;
        --content-ui-foreground-b: 82;
        --content-ui-foreground-h: 166.42;
        --content-ui-foreground-s: 100%;
        --content-ui-foreground-l: 20.78%;
        --content-ui-foreground-a: 1;
        --content-ui-foreground:   hsla(
            var(--content-ui-foreground-h),
            var(--content-ui-foreground-s),
            var(--content-ui-foreground-l),
            var(--content-ui-foreground-a)
        );
            --content-ui-foreground-contrast-r: 255;
        --content-ui-foreground-contrast-g: 255;
        --content-ui-foreground-contrast-b: 255;
        --content-ui-foreground-contrast-h: 0;
        --content-ui-foreground-contrast-s: 0%;
        --content-ui-foreground-contrast-l: 100%;
        --content-ui-foreground-contrast-a: 1;
        --content-ui-foreground-contrast:   hsla(
            var(--content-ui-foreground-contrast-h),
            var(--content-ui-foreground-contrast-s),
            var(--content-ui-foreground-contrast-l),
            var(--content-ui-foreground-contrast-a)
        );
            --content-ui-background-r: 202;
        --content-ui-background-g: 215;
        --content-ui-background-b: 211;
        --content-ui-background-h: 161.54;
        --content-ui-background-s: 13.98%;
        --content-ui-background-l: 81.76%;
        --content-ui-background-a: 1;
        --content-ui-background:   hsla(
            var(--content-ui-background-h),
            var(--content-ui-background-s),
            var(--content-ui-background-l),
            var(--content-ui-background-a)
        );
            --content-ui-background-contrast-r: 0;
        --content-ui-background-contrast-g: 0;
        --content-ui-background-contrast-b: 0;
        --content-ui-background-contrast-h: 0;
        --content-ui-background-contrast-s: 0%;
        --content-ui-background-contrast-l: 0%;
        --content-ui-background-contrast-a: 1;
        --content-ui-background-contrast:   hsla(
            var(--content-ui-background-contrast-h),
            var(--content-ui-background-contrast-s),
            var(--content-ui-background-contrast-l),
            var(--content-ui-background-contrast-a)
        );
            --content-ui-hover-r: 213;
        --content-ui-hover-g: 224;
        --content-ui-hover-b: 221;
        --content-ui-hover-h: 163.64;
        --content-ui-hover-s: 15.07%;
        --content-ui-hover-l: 85.69%;
        --content-ui-hover-a: 1;
        --content-ui-hover:   hsla(
            var(--content-ui-hover-h),
            var(--content-ui-hover-s),
            var(--content-ui-hover-l),
            var(--content-ui-hover-a)
        );
            --content-ui-hover-contrast-r: 0;
        --content-ui-hover-contrast-g: 0;
        --content-ui-hover-contrast-b: 0;
        --content-ui-hover-contrast-h: 0;
        --content-ui-hover-contrast-s: 0%;
        --content-ui-hover-contrast-l: 0%;
        --content-ui-hover-contrast-a: 1;
        --content-ui-hover-contrast:   hsla(
            var(--content-ui-hover-contrast-h),
            var(--content-ui-hover-contrast-s),
            var(--content-ui-hover-contrast-l),
            var(--content-ui-hover-contrast-a)
        );
            --content-ui-selected-r: 229;
        --content-ui-selected-g: 233;
        --content-ui-selected-b: 232;
        --content-ui-selected-h: 165;
        --content-ui-selected-s: 8.33%;
        --content-ui-selected-l: 90.59%;
        --content-ui-selected-a: 1;
        --content-ui-selected:   hsla(
            var(--content-ui-selected-h),
            var(--content-ui-selected-s),
            var(--content-ui-selected-l),
            var(--content-ui-selected-a)
        );
            --content-ui-selected-contrast-r: 0;
        --content-ui-selected-contrast-g: 0;
        --content-ui-selected-contrast-b: 0;
        --content-ui-selected-contrast-h: 0;
        --content-ui-selected-contrast-s: 0%;
        --content-ui-selected-contrast-l: 0%;
        --content-ui-selected-contrast-a: 1;
        --content-ui-selected-contrast:   hsla(
            var(--content-ui-selected-contrast-h),
            var(--content-ui-selected-contrast-s),
            var(--content-ui-selected-contrast-l),
            var(--content-ui-selected-contrast-a)
        );
            --content-ui-submit-foreground-r: 255;
        --content-ui-submit-foreground-g: 255;
        --content-ui-submit-foreground-b: 255;
        --content-ui-submit-foreground-h: 0;
        --content-ui-submit-foreground-s: 0%;
        --content-ui-submit-foreground-l: 100%;
        --content-ui-submit-foreground-a: 1;
        --content-ui-submit-foreground:   hsla(
            var(--content-ui-submit-foreground-h),
            var(--content-ui-submit-foreground-s),
            var(--content-ui-submit-foreground-l),
            var(--content-ui-submit-foreground-a)
        );
            --content-ui-submit-foreground-contrast-r: 0;
        --content-ui-submit-foreground-contrast-g: 0;
        --content-ui-submit-foreground-contrast-b: 0;
        --content-ui-submit-foreground-contrast-h: 0;
        --content-ui-submit-foreground-contrast-s: 0%;
        --content-ui-submit-foreground-contrast-l: 0%;
        --content-ui-submit-foreground-contrast-a: 1;
        --content-ui-submit-foreground-contrast:   hsla(
            var(--content-ui-submit-foreground-contrast-h),
            var(--content-ui-submit-foreground-contrast-s),
            var(--content-ui-submit-foreground-contrast-l),
            var(--content-ui-submit-foreground-contrast-a)
        );
            --content-ui-submit-background-r: 0;
        --content-ui-submit-background-g: 106;
        --content-ui-submit-background-b: 82;
        --content-ui-submit-background-h: 166.42;
        --content-ui-submit-background-s: 100%;
        --content-ui-submit-background-l: 20.78%;
        --content-ui-submit-background-a: 1;
        --content-ui-submit-background:   hsla(
            var(--content-ui-submit-background-h),
            var(--content-ui-submit-background-s),
            var(--content-ui-submit-background-l),
            var(--content-ui-submit-background-a)
        );
            --content-ui-submit-background-contrast-r: 255;
        --content-ui-submit-background-contrast-g: 255;
        --content-ui-submit-background-contrast-b: 255;
        --content-ui-submit-background-contrast-h: 0;
        --content-ui-submit-background-contrast-s: 0%;
        --content-ui-submit-background-contrast-l: 100%;
        --content-ui-submit-background-contrast-a: 1;
        --content-ui-submit-background-contrast:   hsla(
            var(--content-ui-submit-background-contrast-h),
            var(--content-ui-submit-background-contrast-s),
            var(--content-ui-submit-background-contrast-l),
            var(--content-ui-submit-background-contrast-a)
        );
            --accent-foreground-r: 0;
        --accent-foreground-g: 106;
        --accent-foreground-b: 82;
        --accent-foreground-h: 166.42;
        --accent-foreground-s: 100%;
        --accent-foreground-l: 20.78%;
        --accent-foreground-a: 1;
        --accent-foreground:   hsla(
            var(--accent-foreground-h),
            var(--accent-foreground-s),
            var(--accent-foreground-l),
            var(--accent-foreground-a)
        );
            --accent-foreground-contrast-r: 255;
        --accent-foreground-contrast-g: 255;
        --accent-foreground-contrast-b: 255;
        --accent-foreground-contrast-h: 0;
        --accent-foreground-contrast-s: 0%;
        --accent-foreground-contrast-l: 100%;
        --accent-foreground-contrast-a: 1;
        --accent-foreground-contrast:   hsla(
            var(--accent-foreground-contrast-h),
            var(--accent-foreground-contrast-s),
            var(--accent-foreground-contrast-l),
            var(--accent-foreground-contrast-a)
        );
            --accent-background-r: 244;
        --accent-background-g: 246;
        --accent-background-b: 245;
        --accent-background-h: 150;
        --accent-background-s: 10%;
        --accent-background-l: 96.08%;
        --accent-background-a: 1;
        --accent-background:   hsla(
            var(--accent-background-h),
            var(--accent-background-s),
            var(--accent-background-l),
            var(--accent-background-a)
        );
            --accent-background-contrast-r: 0;
        --accent-background-contrast-g: 0;
        --accent-background-contrast-b: 0;
        --accent-background-contrast-h: 0;
        --accent-background-contrast-s: 0%;
        --accent-background-contrast-l: 0%;
        --accent-background-contrast-a: 1;
        --accent-background-contrast:   hsla(
            var(--accent-background-contrast-h),
            var(--accent-background-contrast-s),
            var(--accent-background-contrast-l),
            var(--accent-background-contrast-a)
        );
            --accent-hover-r: 255;
        --accent-hover-g: 255;
        --accent-hover-b: 255;
        --accent-hover-h: 0;
        --accent-hover-s: 0%;
        --accent-hover-l: 100%;
        --accent-hover-a: 1;
        --accent-hover:   hsla(
            var(--accent-hover-h),
            var(--accent-hover-s),
            var(--accent-hover-l),
            var(--accent-hover-a)
        );
            --accent-hover-contrast-r: 0;
        --accent-hover-contrast-g: 0;
        --accent-hover-contrast-b: 0;
        --accent-hover-contrast-h: 0;
        --accent-hover-contrast-s: 0%;
        --accent-hover-contrast-l: 0%;
        --accent-hover-contrast-a: 1;
        --accent-hover-contrast:   hsla(
            var(--accent-hover-contrast-h),
            var(--accent-hover-contrast-s),
            var(--accent-hover-contrast-l),
            var(--accent-hover-contrast-a)
        );
            --logo-background-r: 255;
        --logo-background-g: 255;
        --logo-background-b: 255;
        --logo-background-h: 0;
        --logo-background-s: 0%;
        --logo-background-l: 100%;
        --logo-background-a: 1;
        --logo-background:   hsla(
            var(--logo-background-h),
            var(--logo-background-s),
            var(--logo-background-l),
            var(--logo-background-a)
        );
            --logo-background-contrast-r: 0;
        --logo-background-contrast-g: 0;
        --logo-background-contrast-b: 0;
        --logo-background-contrast-h: 0;
        --logo-background-contrast-s: 0%;
        --logo-background-contrast-l: 0%;
        --logo-background-contrast-a: 1;
        --logo-background-contrast:   hsla(
            var(--logo-background-contrast-h),
            var(--logo-background-contrast-s),
            var(--logo-background-contrast-l),
            var(--logo-background-contrast-a)
        );
            --body-background-r: 237;
        --body-background-g: 237;
        --body-background-b: 237;
        --body-background-h: 0;
        --body-background-s: 0%;
        --body-background-l: 92.94%;
        --body-background-a: 1;
        --body-background:   hsla(
            var(--body-background-h),
            var(--body-background-s),
            var(--body-background-l),
            var(--body-background-a)
        );
            --body-background-contrast-r: 0;
        --body-background-contrast-g: 0;
        --body-background-contrast-b: 0;
        --body-background-contrast-h: 0;
        --body-background-contrast-s: 0%;
        --body-background-contrast-l: 0%;
        --body-background-contrast-a: 1;
        --body-background-contrast:   hsla(
            var(--body-background-contrast-h),
            var(--body-background-contrast-s),
            var(--body-background-contrast-l),
            var(--body-background-contrast-a)
        );
            --login-form-background-r: 0;
        --login-form-background-g: 0;
        --login-form-background-b: 0;
        --login-form-background-h: 0;
        --login-form-background-s: 0%;
        --login-form-background-l: 0%;
        --login-form-background-a: 0.4;
        --login-form-background:   hsla(
            var(--login-form-background-h),
            var(--login-form-background-s),
            var(--login-form-background-l),
            var(--login-form-background-a)
        );
            --login-form-background-contrast-r: 255;
        --login-form-background-contrast-g: 255;
        --login-form-background-contrast-b: 255;
        --login-form-background-contrast-h: 0;
        --login-form-background-contrast-s: 0%;
        --login-form-background-contrast-l: 100%;
        --login-form-background-contrast-a: 1;
        --login-form-background-contrast:   hsla(
            var(--login-form-background-contrast-h),
            var(--login-form-background-contrast-s),
            var(--login-form-background-contrast-l),
            var(--login-form-background-contrast-a)
        );
            --form-border-color-r: 202;
        --form-border-color-g: 215;
        --form-border-color-b: 211;
        --form-border-color-h: 161.54;
        --form-border-color-s: 13.98%;
        --form-border-color-l: 81.76%;
        --form-border-color-a: 1;
        --form-border-color:   hsla(
            var(--form-border-color-h),
            var(--form-border-color-s),
            var(--form-border-color-l),
            var(--form-border-color-a)
        );
            --form-border-color-contrast-r: 0;
        --form-border-color-contrast-g: 0;
        --form-border-color-contrast-b: 0;
        --form-border-color-contrast-h: 0;
        --form-border-color-contrast-s: 0%;
        --form-border-color-contrast-l: 0%;
        --form-border-color-contrast-a: 1;
        --form-border-color-contrast:   hsla(
            var(--form-border-color-contrast-h),
            var(--form-border-color-contrast-s),
            var(--form-border-color-contrast-l),
            var(--form-border-color-contrast-a)
        );
            --form-bg-hover-color-r: 213;
        --form-bg-hover-color-g: 224;
        --form-bg-hover-color-b: 221;
        --form-bg-hover-color-h: 163.64;
        --form-bg-hover-color-s: 15.07%;
        --form-bg-hover-color-l: 85.69%;
        --form-bg-hover-color-a: 1;
        --form-bg-hover-color:   hsla(
            var(--form-bg-hover-color-h),
            var(--form-bg-hover-color-s),
            var(--form-bg-hover-color-l),
            var(--form-bg-hover-color-a)
        );
            --form-bg-hover-color-contrast-r: 0;
        --form-bg-hover-color-contrast-g: 0;
        --form-bg-hover-color-contrast-b: 0;
        --form-bg-hover-color-contrast-h: 0;
        --form-bg-hover-color-contrast-s: 0%;
        --form-bg-hover-color-contrast-l: 0%;
        --form-bg-hover-color-contrast-a: 1;
        --form-bg-hover-color-contrast:   hsla(
            var(--form-bg-hover-color-contrast-h),
            var(--form-bg-hover-color-contrast-s),
            var(--form-bg-hover-color-contrast-l),
            var(--form-bg-hover-color-contrast-a)
        );
            --body-foreground-r: 154;
        --body-foreground-g: 154;
        --body-foreground-b: 154;
        --body-foreground-h: 0;
        --body-foreground-s: 0%;
        --body-foreground-l: 60.39%;
        --body-foreground-a: 1;
        --body-foreground:   hsla(
            var(--body-foreground-h),
            var(--body-foreground-s),
            var(--body-foreground-l),
            var(--body-foreground-a)
        );
            --body-foreground-h1-r: 36;
        --body-foreground-h1-g: 36;
        --body-foreground-h1-b: 36;
        --body-foreground-h1-h: 0;
        --body-foreground-h1-s: 0%;
        --body-foreground-h1-l: 14.12%;
        --body-foreground-h1-a: 1;
        --body-foreground-h1:   hsla(
            var(--body-foreground-h1-h),
            var(--body-foreground-h1-s),
            var(--body-foreground-h1-l),
            var(--body-foreground-h1-a)
        );
            --navigation-foreground-highlight-r: 255;
        --navigation-foreground-highlight-g: 255;
        --navigation-foreground-highlight-b: 255;
        --navigation-foreground-highlight-h: 0;
        --navigation-foreground-highlight-s: 0%;
        --navigation-foreground-highlight-l: 100%;
        --navigation-foreground-highlight-a: 1;
        --navigation-foreground-highlight:   hsla(
            var(--navigation-foreground-highlight-h),
            var(--navigation-foreground-highlight-s),
            var(--navigation-foreground-highlight-l),
            var(--navigation-foreground-highlight-a)
        );
    }