/* Used to reduce the width of the inner section */
.inner-wrap {
    /*width: calc(100% - 260px);*/
    float: right;
}

/* Used to enforce the tile text to black */
.tileList>.tile>.title {
    font-size: 10pt !important;
    text-align: left !important;
    padding-left: 25px !important;
    padding-right: 20px !important;
}
/* Used to add the footer to the bottom of each page */
.off-canvas-wrap {
    background: url('https://schoolbox.wesley.wa.edu.au/wesley/footer.jpg') bottom center repeat-x;
    min-height: 100%;
}

/* Used to decrease the size of the footer */
#footer {
    margin: 0 3rem 4rem;
}

/* Used to style the greeting bar */
.small-12.columns > h1 {
    background-color: #8fad9f;
    height: 40px;
    display: flex;
    font-size: 10pt;
    align-items: center;
    text-transform: uppercase;
    font-weight: normal;
    color: white;
    padding-left: 1rem;
}

/* Used to style the text in the left menu (weight 600, adjust padding and color to green) */
.left-off-canvas-menu h3 {
    font-weight: 600;
    padding: 0.25rem 1rem;
    color: #205c40;
}

/* Used to make all text in the left hand bar uppercase */
.off-canvas-list {
    text-transform: uppercase;
}

/* Used to round peoples images and apply a transparent border */
.left-off-canvas-menu>.row img {
    border-radius: 100%;
    border:7px solid transparent;
}

/* Used to remove padding around container div */
#container {
    padding: 0;
}

/* Used to remove padding around the greeting webpart */
.component-container.Component_Dashboard_GreetingController.no-margin>.row>.small-12.columns {
    padding: 0;
}

/* Fixes greeting bar size which changes during schoolbox dynamic resizing */
@media screen and (max-width: 1024px) {
    .component-container.Component_Dashboard_GreetingController.no-margin>.row>.small-12.columns {
        right: 20px;
        width: 100vw;
    }
}

/* Corrects greeting on administration page */
.main-section>div>div>.row>.small-12.columns>h1 {
    position: relative;
    width: calc(100% + 40px);
    left: -20px;
}

/* Forces all component titlebars to transparent */
.component-titlebar {
    background-color: rgba(255, 255, 255, 0) !important;
}

/* Forces all titlebar fonts to specified */
.component-titlebar>.actions-small-3>.list-item>.small-12.card.ui-sortable-handle>h2>a {
    color: #205c40 !important;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 1rem;
}

/* Forces all titlebar fonts to specified */
.component-container>.row>.small-12.island>.subheader, .component-titlebar>.actions-small-3>.list-item>.small-12.card>h2>a, .component-titlebar>.actions-small-3>nav>a {
    color: #205c40 !important;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 1rem;
}

/* Sets text colour for calendar part */
.component-container.Component_Dashboard_CalendarController>.row>.small-12.island>.subheader>a {
    color: #205c40;
}

/* Removes hyperlink transition */
a {
    transition: none;
}

/* Used to set the tiles look and feel */
.tileList>.tile {
    text-transform: uppercase;
    font-weight: 600;
}

/* Used to set the background colour of the container for the tiles */
.tileList {
    background-color: #f3f3f3;
}

















/* Used to set the modify folders button to hidden */
.component-container.Component_Homepage_FolderListController>.row>.small-12.island>section>.columns.small-6.medium-6.large-4.left>.row>.v-card.small-12>.card-content.classes.actions-small-1>nav>.icon-modify {
    visibility: hidden;
}

/* Used to hide the div above the text */
.component-container.Component_Homepage_FolderListController>.row>.small-12.island>section>.columns.small-6.medium-6.large-4.left>.row>.v-card.small-12>a>.card-class-image {
    display: none;
}

/* Used to correct background color of folders part */
.component-container.Component_Homepage_FolderListController>.row>.small-12.island>section {
    background-color: #f3f3f3 !important;
}

/* Used to align text vertically center in the folders part */
.component-container.Component_Homepage_FolderListController>.row>.small-12.island>section>.columns.small-6.medium-6.large-4.left>.row>.v-card.small-12>.card-content.classes.actions-small-1>.list-item {
    display: table-cell;
    vertical-align: middle;
}

/* Used to manipulate text for folders part (add background, etc.) */
.component-container.Component_Homepage_FolderListController>.row>.small-12.island>section>.columns.small-6.medium-6.large-4.left>.row>.v-card.small-12>.card-content.classes.actions-small-1 {background-image: url(https://schoolbox.wesley.wa.edu.au/send.php?id=1783);background-size: 100% 100%;height: 8vw;display: table;}

/* Used to force the width and height of the folders */
.component-container.Component_Homepage_FolderListController>.row>.small-12.island>section>.columns.small-6.medium-6.large-4.left>.row>.v-card.small-12>.card-content.classes.actions-small-1 {
    width: 200px;
    height: 112.5px;
}

/* Used to force the width and height of the folders */
.component-container.Component_Homepage_FolderListController>.row>.small-12.island>section>.columns.small-6.medium-6.large-4.left {
    width: 200px;
    height: 112.5px;
}

/* Used to stop text from wrapping around and adjusts the font in the folders part */
.component-container.Component_Homepage_FolderListController>.row>.small-12.island>section>.columns.small-6.medium-6.large-4.left>.row>.v-card.small-12>.card-content.classes.actions-small-1>.list-item>h3 {
    text-overflow: inherit;
    overflow: inherit;
    white-space: inherit;
    padding-left: 5%;
    font-size: 10pt;
}

/* Used to style the text for folders */
.component-container.Component_Homepage_FolderListController>.row>.small-12.island>section>.columns.small-6.medium-6.large-4.left>.row>.v-card.small-12>.card-content.classes.actions-small-1>.list-item>h3>a {
    color: black;
    font-size:13px;
    font-weight: 500;
    text-transform: uppercase;
}

/* Used to round images and add a border when searching for people */
.small-12.island>div>div>.row>.small-12.island>section>.action-list>.actions-small-1>.list-item>.card.small-12>a>img {
    border-radius: 100%;
    border: 7px solid transparent;
}






















































/* Used to change the look of the child selector under parents */
.component-container.Component_Dashboard_ChildSubjectController>.row>.small-12.island {
    display: flex;
    flex-wrap: wrap;
    text-align: center;
}

/* Used to change the look of the child selector under parents */
.small-12.island>.actions-small-1 {
    flex: 1;
    margin-left: 5px !important;
    margin-right: 5px !important;
    margin-top: 5px !important;
    margin-bottom: 5px !important;
    min-width: 460px;
}

/* Used to control the size of buttons for parents my student view */
.component-container.Component_Dashboard_ChildSubjectController>.row>.small-12.island>.actions-small-1>.content>.button {
    width: calc(33% - 0.5rem);
    text-align: left;
    background: #d6d2c2;
}

/* Used to hide the my students text at the top of the student view */
.component-container.Component_Dashboard_ChildSubjectController>.row>.small-12.island>.subheader {
    display: none;
}

/* Used to left align all buttons under the student view */
.component-container.Component_Dashboard_ChildSubjectController>.row>.small-12.island>.actions-small-1>.content {
    text-align: left;
}

/* Used to round the images and add a border on the students view */
.component-container.Component_Dashboard_ChildSubjectController>.row>.small-12.island>.actions-small-1>.list-item>.card.small-12>a>img {
    border-radius: 100%;
    border: 7px solid transparent;
}




/* Used to force the colour of the settings icon on page elements */
.icon-settings.settings.edit {
    color: #205c40 !important;
}

/* Used to force the colour of the up arrow icon on page elements */
.icon-up-arrow {
    color: #205c40 !important;
}

/* Used to force the colour of the close icon on page elements */
.icon-close {
    color: #205c40 !important;
}


























/* Used to control the students dashboard calendar stripe */
.component-container.Component_Dashboard_CalendarController>.row>.small-12.island>section>.calendar-list>li:nth-child(n) {
    background: linear-gradient(to right, #a4d65e 10px, white 0) !important;
}

/* Used to control the students dashboard calendar stripe */
.component-container.Component_Dashboard_CalendarController>.row>.small-12.island>section>.calendar-list>li:nth-child(2n) {
    background: linear-gradient(to right, #40c1ac 10px, white 0) !important;
}

/* Used to control the students dashboard calendar stripe */
.component-container.Component_Dashboard_CalendarController>.row>.small-12.island>section>.calendar-list>li:nth-child(3n) {
    background: linear-gradient(to right, #ef9600 10px, white 0) !important;
}

/* Used to control the students dashboard calendar stripe */
.component-container.Component_Dashboard_CalendarController>.row>.small-12.island>section>.calendar-list>li:nth-child(4n) {
    background: linear-gradient(to right, #994878 10px, white 0) !important;
}

/* Used to control the students dashboard calendar stripe */
.component-container.Component_Dashboard_CalendarController>.row>.small-12.island>section>.calendar-list>li:nth-child(5n) {
    background: linear-gradient(to right, #cfb500 10px, white 0) !important;
}
















/* Used to control the students dashboard calendar stripe */
.component-container.Component_Dashboard_CalendarController>.row>.small-12.island>section>.calendar-list>li:nth-child(6n) {
    background: linear-gradient(to right, #a69f88 10px, white 0) !important;
}

/* Used to correct greeting on certain pages */
.small-12.columns.list-item {
    width: calc(100% + 68px);
}

/* Used to correct the breadcrumb on certain pages */
#container>#content>.breadcrumb {
    margin: 0 0 0rem 0rem;
}

/* Used to round portrait on pages */
.actions-small-4>.list-item>.card.small-12>a>img {
    border-radius: 100%;
}


















/* Used to adjust the my classes text position and style TGEDIT201900424*/
.component-container.Schoolbox_Learning_Component_Dashboard_ClassController .card-content.classes.actions-small-1>.list-item>h3 {
    position: relative;
    color: #205c40;
	font-size: 11px;
        font-weight: 500;
        text-transform:uppercase;
	top: -5vw;
}

/* Used to adjust the position of the secondary text for my classes */
.component-container.Schoolbox_Learning_Component_Dashboard_ClassController .card-content.classes.actions-small-1>.list-item>.meta {
    position: relative;
    top: -22px;
    font-size: 11px;
    font-style: normal;
}

/* Used to enforce the height of the secondary text section for my classes */
.component-container.Schoolbox_Learning_Component_Dashboard_ClassController .card-content.classes.actions-small-1>.list-item {
    height: 24px;
}

/* Used to adjust border for my classes elements */
.component-container.Schoolbox_Learning_Component_Dashboard_ClassController .row>.v-card.small-12>a>.card-class-image {
    border-bottom: 2px solid !important;
    border-right: 2px solid !important;
    border-color: #c8c8c8 !important;
}

/* Style for my classes for when dock is out */
.inner-wrap.docking>.main-section>#container>#content>.row>.small-12.large-8.columns>.component-container.Schoolbox_Learning_Component_Dashboard_ClassController .card-content.classes.actions-small-1>.list-item>h3 {
    top: -4.1vw;
}

/* Style for my classes when dock is closed */
.inner-wrap>.main-section>#container>#content>.row>.small-12.large-8.columns>.component-container.Schoolbox_Learning_Component_Dashboard_ClassController .card-content.classes.actions-small-1>.list-item>h3 {
    top: -4.7vw;
}

/* Used to adjust the text colour and weight for my classes */
.inner-wrap>.main-section>#container>#content>.row>.small-12.large-8.columns>.component-container.Schoolbox_Learning_Component_Dashboard_ClassController .card-content.classes.actions-small-1>.list-item>h3>a {
    color: #54585a;
    font-weight: 600;
}

/* Used to make my classes four across */
.component-container.Schoolbox_Learning_Component_Dashboard_ClassController>.row section>.columns {
    width: 25%;
}


/* Used to apply transparency background to my classes */
.component-container.Schoolbox_Learning_Component_Dashboard_ClassController .card-class-image {
    background-image: url(/storage/image.php?hash=9533edf25f49683a937af0db6ddf899b08989523&size=cardImageLarge);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}







/* Used to make my groups four across */
.component-container.Schoolbox_Resource_Folder_Component_Dashboard_GroupController>.row>.small-12.island>section>.columns.small-6.medium-6.large-4.left {
    width: 25%;
}

/* Used to set My Groups background to transparent */
.component-container.Schoolbox_Resource_Folder_Component_Dashboard_GroupController>.row>.small-12.island>section>.columns.small-6.medium-6.large-4.left>.row>.v-card.small-12>a>.card-class-image {
    background-image: url(/storage/image.php?hash=9533edf25f49683a937af0db6ddf899b08989523&size=cardImageLarge);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;

    border-bottom: 2px solid !important;
    border-right: 2px solid !important;
    border-color: #c8c8c8 !important;
}

/* Used to shift the text on to the tile for when the dock is not out */
.inner-wrap .component-container.Schoolbox_Resource_Folder_Component_Dashboard_GroupController>.row>.small-12.island>section>.columns.small-6.medium-6.large-4.left>.row>.v-card.small-12>.card-content.classes.actions-small-1>.list-item>h3 {
    top: -4.7vw;
    position: relative;
}

/* Used to shift the text on to the tile for when the dock is out */
.inner-wrap.docking .component-container.Schoolbox_Resource_Folder_Component_Dashboard_GroupController>.row>.small-12.island>section>.columns.small-6.medium-6.large-4.left>.row>.v-card.small-12>.card-content.classes.actions-small-1>.list-item>h3 {
    top: -4.1vw;
    position: relative;
}

/* Used to set the style of the text on the tile */
.component-container.Schoolbox_Resource_Folder_Component_Dashboard_GroupController>.row>.small-12.island>section>.columns.small-6.medium-6.large-4.left>.row>.v-card.small-12>.card-content.classes.actions-small-1>.list-item>h3>a {
    color: #54585a;
    font-weight: 600;
    text-transform: uppercase;
}





/* Mobile CSS Styles */
@media screen and (max-width: 950px) {

/* Used to make my classes two across on mobile */
.component-container.Schoolbox_Learning_Component_Dashboard_ClassController section .columns {
    width: 50% !important;
}

/* Used to adjust the left offset of the left sidebar in mobile view */
.left-off-canvas-menu {
    left: 0px;
}

/* Used to update the width of the inner div when the side bar is hidden */
.inner-wrap {
    width: 100%;
}

/* Used to adjust my classes sections to center text on mobile */
.component-container.Schoolbox_Learning_Component_Dashboard_ClassController section .list-item>h3 {
    top: -17.5vw !important;
}

  /* Used to hide the banner on mobile */
  .small-12.columns > h1 {
    height: 0px;
    font-size: 0px;
  }

  /* Used to change the size of the buttons for parents my student view on mobile */
  .component-container.Component_Dashboard_ChildSubjectController>.row>.small-12.island>.actions-small-1>.content>.button {
    width: calc(50% - 0.5rem);
  }

  /* Used to change the minimum width of the my students buttons in mobile view */
  .small-12.island>.actions-small-1 {
    min-width: 360px;
  }

  /* Used to change the size of the buttons for parents my student view on mobile */
  .component-container.Component_Dashboard_ChildSubjectController>.row>.small-12.island>.actions-small-1>.content>.button {
    width: calc(50% - 0.5rem);
  }

/* Used to make my groups two across */
.component-container.Schoolbox_Resource_Folder_Component_Dashboard_GroupController>.row>.small-12.island>section>.columns.small-6.medium-6.large-4.left {
    width: 50%;
}

/* Used to shift the text up */
.component-container.Schoolbox_Resource_Folder_Component_Dashboard_GroupController>.row>.small-12.island>section>.columns.small-6.medium-6.large-4.left>.row>.v-card.small-12>.card-content.classes.actions-small-1>.list-item>h3 {
    top: -17.5vw !important;
    position: relative;
}
}

/* Rounds students photo on grades page */
.main-section .row>.small-12.medium-5.island>section>.action-list>li>.small-12.card>a>img {
    border-radius: 100%;
}

/* Rounds staff photo on the grades page */
.main-section .row>.small-12.large-6.island>section>.action-list>li>.small-12.card>a>img {
    border-radius: 100%;
}

/* Corrects dock icon position when right hand dock is out */
/*
    .tab-bar-section>ul {
   	position: relative;
   	right: 80px;
}
*/

@media screen and (max-width: 640px) {
    .tab-bar-section>ul {
         position: initial !important;
    }
}

/* Stops icons in the dock from hiding */
.inner-wrap>.main-section>.hybrid-bar>.tab-bar>.tab-bar-section>ul {
   	position: relative;
   	right: 80px;
}

/* Hides required fields in the pastoral form - section hidden 20/7/23 PKLE
#formPastoral>#pastoralForm>section>.content>.small-12.columns:nth-child(n+3) {
    display: none;
} */

/* Used to allow the actions menu to be visible on a page with a main section which is too small */
.main-section {
    min-height: 100vh;
}

/* Used to style the hyperlinks in text users manually add */
.component-container article a:link {
        color: #0000EE;
}
.component-container article a:visited {
        color: #551A8B;
}

/* Used to adjust the properties for my classes */
.inner-wrap>.main-section>#container>#content>.row>.small-12.large-8.columns>.component-container.Schoolbox_Learning_Component_Dashboard_ClassController .card-content.classes.actions-small-1>.list-item>h3>a {
        font-size: 10pt;
        white-space: normal;
}
.inner-wrap>.main-section>#container>#content>.row>.small-12.large-8.columns>.component-container.Schoolbox_Learning_Component_Dashboard_ClassController .card-content.classes.actions-small-1>.list-item>h3 {
        top: -6.5vw;
        width: 10vw;
        height: 5.5vw;
}
.component-container.Schoolbox_Learning_Component_Dashboard_ClassController .card-content.classes.actions-small-1>.list-item>.meta {
            top: -5vw;
}

/* Used to adjust the properties for my classes for mobile */
@media screen and (max-width: 950px)
{
	.inner-wrap>.main-section>#container>#content>.row>.small-12.large-8.columns>.component-container.Schoolbox_Learning_Component_Dashboard_ClassController .card-content.classes.actions-small-1>.list-item>h3 {
		top: -25vw !important;
		height: 18vw !important;
		width: 44vw !important;
	}
	.component-container.Schoolbox_Learning_Component_Dashboard_ClassController .card-content.classes.actions-small-1>.list-item>.meta {
		top: -17vw;
	}
}

/* Used to fix header tags on some pages because h2 tag does not have class added to it */
.list-item>h2 {
    color: #205c40 !important;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 1rem;
}

/* Used to round peoples images and apply a transparent border */
#profile-drop>img {
    border-radius: 100%;
    border: 2px solid transparent;
}

:root {
            --navigation-foreground-r: 255;
        --navigation-foreground-g: 255;
        --navigation-foreground-b: 255;
        --navigation-foreground-h: 0;
        --navigation-foreground-s: 0%;
        --navigation-foreground-l: 100%;
        --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: 0;
        --navigation-foreground-contrast-g: 0;
        --navigation-foreground-contrast-b: 0;
        --navigation-foreground-contrast-h: 0;
        --navigation-foreground-contrast-s: 0%;
        --navigation-foreground-contrast-l: 0%;
        --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: 32;
        --navigation-background-g: 92;
        --navigation-background-b: 64;
        --navigation-background-h: 152;
        --navigation-background-s: 48.39%;
        --navigation-background-l: 24.31%;
        --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: 145;
        --navigation-hover-g: 159;
        --navigation-hover-b: 144;
        --navigation-hover-h: 116;
        --navigation-hover-s: 7.25%;
        --navigation-hover-l: 59.41%;
        --navigation-hover-a: 0.47;
        --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: 44;
        --off-canvas-foreground-g: 42;
        --off-canvas-foreground-b: 41;
        --off-canvas-foreground-h: 20;
        --off-canvas-foreground-s: 3.53%;
        --off-canvas-foreground-l: 16.67%;
        --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: 255;
        --off-canvas-foreground-contrast-g: 255;
        --off-canvas-foreground-contrast-b: 255;
        --off-canvas-foreground-contrast-h: 0;
        --off-canvas-foreground-contrast-s: 0%;
        --off-canvas-foreground-contrast-l: 100%;
        --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: 214;
        --off-canvas-background-g: 210;
        --off-canvas-background-b: 196;
        --off-canvas-background-h: 46.67;
        --off-canvas-background-s: 18%;
        --off-canvas-background-l: 80.39%;
        --off-canvas-background-a: 1;
        --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: 0;
        --off-canvas-background-contrast-g: 0;
        --off-canvas-background-contrast-b: 0;
        --off-canvas-background-contrast-h: 0;
        --off-canvas-background-contrast-s: 0%;
        --off-canvas-background-contrast-l: 0%;
        --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: 135;
        --off-canvas-hover-g: 128;
        --off-canvas-hover-b: 127;
        --off-canvas-hover-h: 7.5;
        --off-canvas-hover-s: 3.23%;
        --off-canvas-hover-l: 51.37%;
        --off-canvas-hover-a: 1;
        --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: 44;
        --accounts-menu-foreground-g: 42;
        --accounts-menu-foreground-b: 41;
        --accounts-menu-foreground-h: 20;
        --accounts-menu-foreground-s: 3.53%;
        --accounts-menu-foreground-l: 16.67%;
        --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: 214;
        --accounts-menu-background-g: 210;
        --accounts-menu-background-b: 196;
        --accounts-menu-background-h: 46.67;
        --accounts-menu-background-s: 18%;
        --accounts-menu-background-l: 80.39%;
        --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: 135;
        --accounts-menu-hover-g: 128;
        --accounts-menu-hover-b: 127;
        --accounts-menu-hover-h: 7.5;
        --accounts-menu-hover-s: 3.23%;
        --accounts-menu-hover-l: 51.37%;
        --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: 255;
        --accounts-menu-hover-contrast-g: 255;
        --accounts-menu-hover-contrast-b: 255;
        --accounts-menu-hover-contrast-h: 0;
        --accounts-menu-hover-contrast-s: 0%;
        --accounts-menu-hover-contrast-l: 100%;
        --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: 44;
        --content-ui-foreground-g: 42;
        --content-ui-foreground-b: 41;
        --content-ui-foreground-h: 20;
        --content-ui-foreground-s: 3.53%;
        --content-ui-foreground-l: 16.67%;
        --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: 214;
        --content-ui-background-g: 210;
        --content-ui-background-b: 196;
        --content-ui-background-h: 46.67;
        --content-ui-background-s: 18%;
        --content-ui-background-l: 80.39%;
        --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: 148;
        --content-ui-hover-g: 154;
        --content-ui-hover-b: 144;
        --content-ui-hover-h: 96;
        --content-ui-hover-s: 4.72%;
        --content-ui-hover-l: 58.43%;
        --content-ui-hover-a: 0.62;
        --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: 255;
        --content-ui-hover-contrast-g: 255;
        --content-ui-hover-contrast-b: 255;
        --content-ui-hover-contrast-h: 0;
        --content-ui-hover-contrast-s: 0%;
        --content-ui-hover-contrast-l: 100%;
        --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: 166;
        --content-ui-selected-g: 159;
        --content-ui-selected-b: 136;
        --content-ui-selected-h: 46;
        --content-ui-selected-s: 14.42%;
        --content-ui-selected-l: 59.22%;
        --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: 255;
        --content-ui-selected-contrast-g: 255;
        --content-ui-selected-contrast-b: 255;
        --content-ui-selected-contrast-h: 0;
        --content-ui-selected-contrast-s: 0%;
        --content-ui-selected-contrast-l: 100%;
        --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: 166;
        --content-ui-submit-background-g: 159;
        --content-ui-submit-background-b: 136;
        --content-ui-submit-background-h: 46;
        --content-ui-submit-background-s: 14.42%;
        --content-ui-submit-background-l: 59.22%;
        --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: 44;
        --accent-foreground-g: 42;
        --accent-foreground-b: 41;
        --accent-foreground-h: 20;
        --accent-foreground-s: 3.53%;
        --accent-foreground-l: 16.67%;
        --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: 214;
        --accent-background-g: 210;
        --accent-background-b: 196;
        --accent-background-h: 46.67;
        --accent-background-s: 18%;
        --accent-background-l: 80.39%;
        --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: 243;
        --body-background-g: 243;
        --body-background-b: 243;
        --body-background-h: 0;
        --body-background-s: 0%;
        --body-background-l: 95.29%;
        --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.49;
        --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: 44;
        --form-border-color-g: 42;
        --form-border-color-b: 41;
        --form-border-color-h: 20;
        --form-border-color-s: 3.53%;
        --form-border-color-l: 16.67%;
        --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: 255;
        --form-border-color-contrast-g: 255;
        --form-border-color-contrast-b: 255;
        --form-border-color-contrast-h: 0;
        --form-border-color-contrast-s: 0%;
        --form-border-color-contrast-l: 100%;
        --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: 214;
        --form-bg-hover-color-g: 210;
        --form-bg-hover-color-b: 196;
        --form-bg-hover-color-h: 46.67;
        --form-bg-hover-color-s: 18%;
        --form-bg-hover-color-l: 80.39%;
        --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: 158;
        --body-foreground-g: 158;
        --body-foreground-b: 158;
        --body-foreground-h: 0;
        --body-foreground-s: 0%;
        --body-foreground-l: 61.96%;
        --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)
        );
    }