.search-result, .button-toggle-visibility.icon-view, .inner-container .close-button.icon-close {
   color: rgb(39, 43, 114) !important;
}

/* Animation for showing error message after delay. */
@keyframes fadeInErrorMessage {
0%   {opacity:0;}
100% {opacity:1;}
}

#tileList-8311 {
animation-name: fadeInErrorMessage;
animation-duration: 4s;
animation-delay: 10s;
animation-fill-mode: both;
}

#submitCheckin{
  color: white
}

// .org-chart-align-center
{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.component-titlebar .actions-small-2 .list-item h2{
  color: white !important;
}


.collapse .login-links p .samlbutton {
    margin-left: 0 !important;
}

.v3dp__datepicker .v3dp__input_wrapper .datepicker{
  background-color: white;
  color: black;
}
.row > * {
    width: none !important; /* Reset width to default */
}
.homepage-6905{
  background: black
}

.homepage-6905 .small-12 .component-titlebar .actions-small-3 .list-item h2{
  color: white;
}

.customCSS {
  background: black;
  color: white;
}

.tabs-content .information-list .actions-small-1{
background: none;
}

//// add css file here temp
@import url('https://fonts.googleapis.com/css2?family=Public+Sans:ital,wght@0,400;0,700;1,400&display=swap');

* {
  font-family: 'Public Sans', sans-serif !important;
}

/* ************************* Styles to change login page *************************** */

/* Make SSO button larger */
#login .row .login-links .samlbutton {
  background-color: #272b72/* #349834 */;
  width: 100%;
  display: inline-block;
  padding: 20px 0;
  font-size: 16px;
  color: #ffffff;
  cursor:pointer;
  margin-top: -7.8rem;
  position: absolute;
  margin-left: -9.25rem;
  text-decoration: none !important;
}

#login .row .login-links .samlbutton:hover {
background-color: rgba(calc(var(--content-ui-submit-background-r) + (255 - var(--content-ui-submit-background-r)) * 0.2),calc(var(--content-ui-submit-background-g) + (255 - var(--content-ui-submit-background-g)) * 0.2),calc(var(--content-ui-submit-background-b) + (255 - var(--content-ui-submit-background-b)) * 0.2),var(--content-ui-submit-background-a));
}

/* Make the background fit the buttons */
#login {
  height: 72vh !important;
}

/* Change colour of normal login button */
#login div:nth-of-type(2) div:nth-child(3) input {
  background-color: #454654 !important;
}

#login div:nth-of-type(2) div:nth-child(3) input:hover {
  background-color: #5c5d70 !important;
}

/* Reposition 'OR' text */
#login div:nth-of-type(2) div:nth-child(3) p:nth-child(2) {
  margin-top: -21rem;
}

/* General styling for warning messages */
#login div:first-of-type div:first-of-type:not(.logo)::after, 
#login .row .login-links p::before {
  display: inline-block;
  width: 100%;
  border-radius: 3px;
  margin: 15px 0;
  padding: 10px;
  text-align: center;
}

/* Top warning */
#login div:first-of-type div:first-of-type:not(.logo)::after {
  content: "Home educators, please use the username and password fields below.";
  background-color: #ffd844;
  color: #000000;
  white-space: pre-wrap;
  margin-top: 140px !important;
}

/*  Warning just above SSO button (not currently in use) */
/* #login .row .login-links p::before {
  content: "Home educators, please use the username and password fields below.";
  background-color:  #ffd844;
  color: #272b72;
} */

/* Reposition error message when logged out */
#error-msg {
  width: 100vw;
  position: fixed;
  top: 0;
  right: 0;
  text-align: center;
}

.login .logo img
{
   max-width: 70%;
}

/* ********************************************************************************* */

/* ******************** Styles for the custom task help buttons ******************** */

.faith-feedback-btn {
  width: 2rem;
  height: 2rem;
  min-width: 2rem;
  min-height: 2rem;
  line-height: 2rem;
  padding-left: 0.5rem;
  display: block;
  color: #fff;
  background-color: #ed9d2b;
  border-color: #ec971f;
  margin: 0.25rem;
  transition: all 360ms cubic-bezier(.2,1,0,1);
}

.faith-help-btn {
  width: 2rem;
  height: 2rem;
  min-width: 2rem;
  min-height: 2rem;
  line-height: 2rem;
  padding-left: 0.8rem;
  display: block;
  color: #fff;
  background-color: #a9291b;
  border-color: #9e2619;
  margin: 0.25rem;
  transition: all 360ms cubic-bezier(.2,1,0,1);
  font-size: large;
  font-weight: 700;
}

.faith-help-btn:hover {
  color: #fff;
  background-color: #c53120;
}

.faith-feedback-btn:hover {
  color: #fff;
  background-color: #f1b25b;
}

/* ********************************************************************************* */

/* ******************** Styles for the BBB integration ******************** */

.hidden {
  display:none !important;
}

/* ********************************************************************************* */

/* **************** Styles for disabling the adding of certain components ****************** */

.faithDisableComponentButton {
    opacity: 0.5;
    background-color: #cccccc;
}

.faithDisableComponentButton:hover {
    opacity: 1;
    background-color: rgba( 208, 0, 0, 1 );
}

.faithDisableComponentButton:hover a {
    display: none;
}

.faithDisableComponentButton:hover::before {
    content: "This component should not be used on your class page, and is not endorsed by the school.";
    color: white;
}

/* ********************************************************************************* */

/* **************** Styles for hiding "submitted in person button" ***************** */

#editor-submittedInPerson {
  display: none !important;
}
.checkbox-label[for="editor-submittedInPerson"] {
  display: none !important;
}


/* ********************************************************************************* */

/* **************** Styles for Pastoral Care checkin ***************** */
#pastoralCareDescriptionContainer, #pastoralCareCheckboxContainer {
  background-color: white;
  padding: 20px;
}

.pastoralCareH3 {
  text-align: center;
}

#checkin-description {
  height: 150px;
}

.checkboxWrapper {
display:flex;
flex-wrap: wrap;
justify-content: center;
}

.checkboxContainer {
display: block;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  margin: 10px;
}

.checkboxContainer input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.checkmark {
  display: block;
  height: 150px;
  width: 150px;
  box-sizing: border-box;
  border: 5px solid #d1d3df;
  border-radius: 20px;
  text-align: center;
}

.checkmark img {
	width: 100%;
    height: 100px; /* auto */
    max-height: 100px;
    margin-bottom: 6px;
    border-radius: 15px 15px 0 0;
    background-color: white;
   object-fit: cover;
}

.checkmark span {
	color: #272b72;
}

.checkboxContainer:hover input ~ .checkmark {
  border: 5px solid #272b72 !important;
}

.checkboxContainer input:checked ~ .checkmark {
  border: 5px solid #FFD844;
}

#submitCheckin {
    width: 100%;
}

.submitCheckinSuccess, .submitCheckinSuccess:hover {
  background-color: #75e052 !important;
  cursor:default !important;
}

.submitCheckinError, .submitCheckinError:hover {
  background-color: #e61919 !important;
  cursor:default !important;
}

.submitCheckinLoading, .submitCheckinLoading:hover {
  background-color: #939393 !important;
  cursor:default !important;
  padding-bottom: 0;
}

.pastoralCareLoader {
  border: 5px solid #ccc;
  border-radius: 50%;
  border-top: 5px solid #272b72;
  width: 1.5rem;
  height: 1.5rem;
  -webkit-animation: pastoralCareSpin 2s linear infinite;
  animation: pastoralCareSpin 2s linear infinite;
  display: inline-block;
}

#submitCheckin span {
  display: inline-block;
  margin-right: 10px;
  vertical-align: top;
  height: 2rem;
}

@-webkit-keyframes pastoralCareSpin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes pastoralCareSpin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}


/* ********************************************************************************* */

/* **************** Styles for page identification tags (group, etc) ****************** */

.faithPillBadge {
  background-color: #272b72;
  color: white;
  padding: 4px 8px;
  text-align: center;
  border-radius: 20px;
  margin: 5px 0;
  margin-right: 10px;
}


/* ********************************************************************************* */

/* **************** Styles for dashboard Welcome Video Dialog ****************** */
#faith-welcome-video-dialog {
  background-color: black;
  padding: 0;

  top: 50% !important;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

.welcomeVideoContainer {
  background-color: black;
  color: white;
  text-align: center;
  height: 500px;
}

.welcomeDialogHeading {
  color: #121435;
  font-weight: 700;
  font-size: 150%;
  width: 100%;
  background-color: #e8e8e8;
  text-align: center;
  padding: 0.4em;
}

.welcomeVideoDialogButtons {
   display: flex;
}

.welcomeVideoDialogButtons div {
  width: 50%;
  margin: 0;
  padding: 16px;
  text-align: center;
  color: white;
  cursor: pointer;
}

.welcomeVideoDialogButtons div:hover {
  background-color: #FFD844 !important;
  color: #272b72 !important;
}

#dontShowAgainBtn {
    background-color: #e8e8e8;
    color: #313131;
}

.dontShowAgainBtnError {
  background-color: #fa4a47 !important;
  color: white !important;
}

#closeBtn {
    background-color: #3f4271;
}

#welcomeVideoOpenBtn {
  float: right;
  font-size: 50%;
  margin: 10px 0;
  cursor: pointer;
}

#welcomeVideoOpenBtn:hover {
  color: #333 !important;
}

@media only print, screen and (max-width: 1140px) {
.welcomeVideoContainer {
  height: 50vw;
}
}


/* ********************************************************************************* */

/* **************** Styles for rebranding site in Faith's colours ****************** */

/*.tile.background-middle.background-center .title.text-bottom.text-center{
    color:black !important;
font-family: garamond, sans-serif;
max-size: 10px;
}*/

/* Staging only
#side-menu > h3 {
    color: lime;
   font-weight: 900;
} */

/* Styles for links inside text box components */
.island article a {
  color: rgb(48, 81, 162) !important;
  text-decoration: underline !important;
}


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

/* Selected Rubric text colour */
table.rubric td input:checked + label {
   color: white !important;
}

/* Drop zone styles */
.dzone {
      color: rgb(39, 43, 114) !important;
}
.dzone:hover {
     color: white !important;
     background-color: rgb(39, 43, 114) !important;
}
.dz-default.dz-message {
    color: inherit !important;
}

/* Side menu custom styles */
.left-off-canvas-menu .left-menu-dock {
    color: rgb(39, 43, 114) !important;
}
.left-off-canvas-menu .logo-wrapper {
    border-right: 2px solid rgb(237, 237, 237);
}

/* Markbook table text color */
#courseMarkbookContent .marksheet td, .marksheet .marksheet td, #courseMarkbookContent .marksheet td a, .marksheet .marksheet td a {
   color: white !important;
}



/* Make buttons on light BG dark blue */
 .button, .adtp-btn, .attachzone .dzone.adtp-btn, .dropzone-wrap .dzone.adtp-btn, .flex-list.buttons a, .flex-list.buttons button, .attachzone .flex-list.buttons a.dzone, .flex-list.buttons .attachzone a.dzone, .attachzone .flex-list.buttons button.dzone, .flex-list.buttons .attachzone button.dzone, .dropzone-wrap .flex-list.buttons a.dzone, .flex-list.buttons .dropzone-wrap a.dzone, .dropzone-wrap .flex-list.buttons button.dzone, .flex-list.buttons .dropzone-wrap button.dzone, .flex-list.buttons a.submit, .flex-list.buttons button.submit, a.submit, button.submit, .attachzone a.dzone.submit, .attachzone button.dzone.submit, .dropzone-wrap a.dzone.submit, .dropzone-wrap button.dzone.submit, .attachzone button.dzone, .dropzone-wrap button.dzone, .context-switch nav a, .avatar-switch nav a, .attachzone .dzone.button, .attachzone button.dzone, .attachzone button.dzone, .attachzone .dropzone-wrap button.dzone, .dropzone-wrap .attachzone button.dzone, .attachzone .context-switch nav a.dzone, .attachzone .avatar-switch nav a.dzone, .context-switch nav .attachzone a.dzone, .avatar-switch nav .attachzone a.dzone, .dropzone-wrap .dzone.button, .dropzone-wrap button.dzone, .dropzone-wrap button.dzone, .dropzone-wrap .context-switch nav a.dzone, .dropzone-wrap .avatar-switch nav a.dzone, .context-switch nav .dropzone-wrap a.dzone, .avatar-switch nav .dropzone-wrap a.dzone, .button.load-more, .component-action button, .component-action .button, .selectize-control .selectize-input > div a.remove:hover, .button-block, .close-button[data-v-a33b3ca4] {
      color: #272b72 !important; /* rgb(39, 43, 114) !important; */
}

/* More dark buttons that need white text */
.button, .fc-button-group button, button.title-button, .right-off-canvas-menu .button, .input-group input + .button, .adtp-btn, .attachzone .dzone.adtp-btn, .dropzone-wrap .dzone.adtp-btn, .flex-list.buttons a, .flex-list.buttons button, .attachzone .flex-list.buttons a.dzone, .flex-list.buttons .attachzone a.dzone, .attachzone .flex-list.buttons button.dzone, .flex-list.buttons .attachzone button.dzone, .dropzone-wrap .flex-list.buttons a.dzone, .flex-list.buttons .dropzone-wrap a.dzone, .dropzone-wrap .flex-list.buttons button.dzone, .flex-list.buttons .dropzone-wrap button.dzone, [type="submit"], .flex-list.buttons a.submit, .flex-list.buttons button.submit, a.submit, button.submit, .attachzone .dzone[type="submit"], .attachzone a.dzone.submit, .attachzone button.dzone.submit, .dropzone-wrap .dzone[type="submit"], .dropzone-wrap a.dzone.submit, .dropzone-wrap button.dzone.submit, .attachzone button.dzone, .dropzone-wrap button.dzone, .attachzone .dzone.button, .attachzone button.dzone, .attachzone button.dzone, .attachzone .dropzone-wrap button.dzone, .dropzone-wrap .attachzone button.dzone, .attachzone .context-switch nav a.dzone, .attachzone .avatar-switch nav a.dzone, .context-switch nav .attachzone a.dzone, .avatar-switch nav .attachzone a.dzone, .dropzone-wrap .dzone.button, .dropzone-wrap button.dzone, .dropzone-wrap button.dzone, .dropzone-wrap .context-switch nav a.dzone, .dropzone-wrap .avatar-switch nav a.dzone, .context-switch nav .dropzone-wrap a.dzone, .avatar-switch nav .dropzone-wrap a.dzone, .context-switch nav a, .avatar-switch nav a, ul.pagination li a, ul.pagination li button, .button.load-more:hover {
   color: white !important;
}

/* ckeditor link confirmation button */
button.ck.ck-button.ck-off.ck-button-save {
    background-color: #272b72 !important;
}

/* Make buttons on dark blue BG white (this includes 3-button menus and adding group members) */
.breadcrumb li a, .breadcrumb li span, .sub-nav li a, .sub-nav dd a, .sub-nav li.active a, .sub-nav dd.active a, .hint, .accordion .accordion-navigation > a, .accordion dd > a:not(.tabs dd > a), .f-dropdown li a, #tab-control .separator, .selectize-control.multi .selectize-input > div, .selectize-control .selectize-input > div a.remove, input[type="radio"]:not(.plain):checked + label.radio-label::before, input[type="radio"]:not(.plain):checked + label.radio-label::after, .f-dropdown .separator, .selectize-input p, .vs__selected {
    color: white !important;
}

/* Role Permissions items and adding Group permissions items */
.item[data-v-79c51fda], .selected-code, .selected-code button {
  background-color: #272b72 !important;
}

/* Dashboard alt sourcing button */
.selectize-control.single .selectize-input > div, .selectize-control.multi .selectize-input > div {
    color: white;
}

/* Search bar button */
.list-item-meta {
   color: white !important;
}
.list-item-meta:hover {
   color: rgb(39, 43, 114) !important;
}

/* 3-button menu hover color */
.f-dropdown li a:hover {
    color: rgb(39, 43, 114) !important;
}
/* 3-dot menu selected color */
#all-actions[aria-expanded="true"], .icon-more[aria-expanded="true"], .icon-overflow[aria-expanded="true"] {
    color: white !important;
}

/* List > Role buttons */
.item[data-v-34c5c70a] {
   color: #000000 !important;
}

/* Resources menu highlighted node */
.jstree-default > .jstree-wholerow-ul .jstree-clicked, .jstree-default > .jstree-wholerow-ul .jstree-clicked .icon-folder::before {
   color: white;
}

/* Side menu My Links text color */
#side-menu-mylinks h3 {
    color: rgb(255, 216, 68) !important;
    /* opacity: 0.8; */
}

.search-result, .button-toggle-visibility.icon-view, .inner-container .close-button.icon-close {
   color: rgb(39, 43, 114) !important;
}

.switch span:last-child, .switch.medium span:last-child, .switch.long span:last-child, .switch span:first-child, .switch.medium span:first-child, .switch.long span:first-child {
   color: rgb(237, 237, 237);
}

/* Progressive form train-line selected colour */
.train-line li.current-stop a span {
    color: rgb(39, 43, 114) !important;
    background-color: rgb(255, 216, 68) !important;
    box-shadow: 0 0 .5rem #cca000 !important;
}
/* .train-line li.current-stop::after {
    background-color: rgb(255, 216, 68) !important;
} */

/* This style was added to fix something, not sure what. However, it has been removed to fix a different error. May need to put it back if we find the original thing it was trying to fix.
.actions-small-5 > nav a[aria-expanded="true"], .island .row.actions-small-1 > nav a[class*="icon-"], .island .row.actions-small-1 > nav a[class^="icon-"] {
   color: white !important;
} */

/* Add button on light BG on my links page */
.actions-small-1 > nav, .island .row.actions-small-1 > nav {
   color: rgb(39, 43, 114) !important;
}

/* Checked check-boxes need white text */
input[type="checkbox"]:not(.plain):checked + label.checkbox-label::before, body.login input[type="checkbox"]:not(.plain):checked + label::before, input[type="checkbox"]:not(.plain):checked + label.checkbox-label::after, body.login input[type="checkbox"]:not(.plain):checked + label::after, .checklist input[type="radio"]:not(.plain):checked + label::before, .checklist input[type="radio"]:not(.plain):checked + label::after, .checklist input[type="checkbox"]:not(.plain):checked + label::before, .checklist input[type="checkbox"]:not(.plain):checked + label::after, .radiolist input[type="radio"]:not(.plain):checked + label::before, .radiolist input[type="radio"]:not(.plain):checked + label::after, .radiolist input[type="checkbox"]:not(.plain):checked + label::before, .radiolist input[type="checkbox"]:not(.plain):checked + label::after {
   color: white !important;
}
/* Checkboxes with label on dark BG */
.checklist.checklist-container input[type="checkbox"]:not(.plain):not(:disabled):checked + label {
   color: white !important;
}
.checklist.checklist-container input[type="checkbox"]:not(.plain):hover + label {
  color: white !important;
}

/* Block checkboxes */
input[type="radio"]:checked + .block, .button-block:hover, input[type="radio"] + .block:hover, input[type="radio"]:checked + .block i, input[type="radio"]:checked + .block:hover i, .button-block:hover i, input[type="radio"] + .block:hover i{
     color: white !important;
}

/* Indeterminate checkboxes */
.checklist input[type="radio"]:not(.plain).indeterminate + label::before, .checklist input[type="radio"]:not(.plain).indeterminate + label::after, .checklist input[type="checkbox"]:not(.plain).indeterminate + label::before, .checklist input[type="checkbox"]:not(.plain).indeterminate + label::after, .radiolist input[type="radio"]:not(.plain).indeterminate + label::before, .radiolist input[type="radio"]:not(.plain).indeterminate + label::after, .radiolist input[type="checkbox"]:not(.plain).indeterminate + label::before, .radiolist input[type="checkbox"]:not(.plain).indeterminate + label::after {
  color: white !important;
}

/* Action buttons white text */
.component-configurator .component .component-titlebar .actions-small-2 > nav a[class*="icon-"], .component-configurator .component .component-titlebar .actions-small-2 > nav a[class^="icon-"] {
    color: white !important;
}
.component-configurator .component .component-titlebar .actions-small-2 .ui-sortable-handle:hover {
   color: white !important;
}
.component-configurator .component .component-titlebar h2 {
   color: white;
}

.text-box-body {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    padding: 1.25rem;
}

.text-box-header {
    padding: 0.75rem 1.25rem;
    margin-bottom: 0;
    background-color: rgba(0,0,0,.03);
    border-bottom: 1px solid rgba(0,0,0,.125);
}

/* Styles pulled across from Prod */
.v-card a {
    padding-top: 5px;
    padding-right: 5px;
}

.v-card:first-child a, .v-card:nth-child(5) a {
    padding-left: 5px;
}

.v-card a:hover, .v-card a:focus {
    color: #272b72;
    background-color: #f2dd4d;
}

.c-menu-item:hover:not(.is-disabled) {
	color: rgb(255, 216, 68) !important;
}

div p #use-rubric-value {
    color: white;
}
div.reveal-modal article {
    overflow-y: auto;
    max-height: 75vh;
}

div.empty-state p button {
    color: white;
}

div.homepage-4807 .small-12.column.column-left.large-6 {
    min-width: 630px !important;
}

div.homepage-4807 .small-12.column.column-right.large-6 {
    min-width: 630px !important;
    float: left !important;
}

.org-chart-loader {
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid rgb(48, 81, 162);
  width: 120px;
  height: 120px;
  -webkit-animation: orgChartSpin 2s linear infinite;
  /* Safari */
  animation: orgChartSpin 2s linear infinite;
}

/* Safari */
@-webkit-keyframes orgChartSpin {
  0% {
    -webkit-transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
  }
}

@keyframes orgChartSpin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.org-chart-align-center{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.fc-org-chart-button{
  margin: 5px 5px 5px 10px;
}

:root {
            --navigation-foreground-r: 39;
        --navigation-foreground-g: 43;
        --navigation-foreground-b: 114;
        --navigation-foreground-h: 236.8;
        --navigation-foreground-s: 49.02%;
        --navigation-foreground-l: 30%;
        --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: 255;
        --navigation-background-g: 255;
        --navigation-background-b: 255;
        --navigation-background-h: 0;
        --navigation-background-s: 0%;
        --navigation-background-l: 100%;
        --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: 0;
        --navigation-background-contrast-g: 0;
        --navigation-background-contrast-b: 0;
        --navigation-background-contrast-h: 0;
        --navigation-background-contrast-s: 0%;
        --navigation-background-contrast-l: 0%;
        --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: 255;
        --navigation-hover-g: 217;
        --navigation-hover-b: 68;
        --navigation-hover-h: 47.81;
        --navigation-hover-s: 100%;
        --navigation-hover-l: 63.33%;
        --navigation-hover-a: 1;
        --navigation-hover:   hsla(
            var(--navigation-hover-h),
            var(--navigation-hover-s),
            var(--navigation-hover-l),
            var(--navigation-hover-a)
        );
            --navigation-hover-contrast-r: 0;
        --navigation-hover-contrast-g: 0;
        --navigation-hover-contrast-b: 0;
        --navigation-hover-contrast-h: 0;
        --navigation-hover-contrast-s: 0%;
        --navigation-hover-contrast-l: 0%;
        --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: 39;
        --off-canvas-background-g: 43;
        --off-canvas-background-b: 114;
        --off-canvas-background-h: 236.8;
        --off-canvas-background-s: 49.02%;
        --off-canvas-background-l: 30%;
        --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: 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: 255;
        --off-canvas-hover-g: 217;
        --off-canvas-hover-b: 68;
        --off-canvas-hover-h: 47.81;
        --off-canvas-hover-s: 100%;
        --off-canvas-hover-l: 63.33%;
        --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: 0;
        --off-canvas-hover-contrast-g: 0;
        --off-canvas-hover-contrast-b: 0;
        --off-canvas-hover-contrast-h: 0;
        --off-canvas-hover-contrast-s: 0%;
        --off-canvas-hover-contrast-l: 0%;
        --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: 39;
        --accounts-menu-foreground-g: 43;
        --accounts-menu-foreground-b: 114;
        --accounts-menu-foreground-h: 236.8;
        --accounts-menu-foreground-s: 49.02%;
        --accounts-menu-foreground-l: 30%;
        --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: 255;
        --accounts-menu-background-g: 255;
        --accounts-menu-background-b: 255;
        --accounts-menu-background-h: 0;
        --accounts-menu-background-s: 0%;
        --accounts-menu-background-l: 100%;
        --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: 255;
        --accounts-menu-hover-g: 217;
        --accounts-menu-hover-b: 68;
        --accounts-menu-hover-h: 47.81;
        --accounts-menu-hover-s: 100%;
        --accounts-menu-hover-l: 63.33%;
        --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: 39;
        --content-ui-foreground-g: 43;
        --content-ui-foreground-b: 114;
        --content-ui-foreground-h: 236.8;
        --content-ui-foreground-s: 49.02%;
        --content-ui-foreground-l: 30%;
        --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: 39;
        --content-ui-background-g: 43;
        --content-ui-background-b: 114;
        --content-ui-background-h: 236.8;
        --content-ui-background-s: 49.02%;
        --content-ui-background-l: 30%;
        --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: 255;
        --content-ui-background-contrast-g: 255;
        --content-ui-background-contrast-b: 255;
        --content-ui-background-contrast-h: 0;
        --content-ui-background-contrast-s: 0%;
        --content-ui-background-contrast-l: 100%;
        --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: 255;
        --content-ui-hover-g: 217;
        --content-ui-hover-b: 68;
        --content-ui-hover-h: 47.81;
        --content-ui-hover-s: 100%;
        --content-ui-hover-l: 63.33%;
        --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: 48;
        --content-ui-selected-g: 81;
        --content-ui-selected-b: 162;
        --content-ui-selected-h: 222.63;
        --content-ui-selected-s: 54.29%;
        --content-ui-selected-l: 41.18%;
        --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: 39;
        --content-ui-submit-background-g: 43;
        --content-ui-submit-background-b: 114;
        --content-ui-submit-background-h: 236.8;
        --content-ui-submit-background-s: 49.02%;
        --content-ui-submit-background-l: 30%;
        --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: 48;
        --accent-foreground-g: 81;
        --accent-foreground-b: 162;
        --accent-foreground-h: 222.63;
        --accent-foreground-s: 54.29%;
        --accent-foreground-l: 41.18%;
        --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: 255;
        --accent-background-g: 255;
        --accent-background-b: 255;
        --accent-background-h: 0;
        --accent-background-s: 0%;
        --accent-background-l: 100%;
        --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: 39;
        --accent-hover-g: 43;
        --accent-hover-b: 114;
        --accent-hover-h: 236.8;
        --accent-hover-s: 49.02%;
        --accent-hover-l: 30%;
        --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: 255;
        --accent-hover-contrast-g: 255;
        --accent-hover-contrast-b: 255;
        --accent-hover-contrast-h: 0;
        --accent-hover-contrast-s: 0%;
        --accent-hover-contrast-l: 100%;
        --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: 39;
        --form-border-color-g: 43;
        --form-border-color-b: 114;
        --form-border-color-h: 236.8;
        --form-border-color-s: 49.02%;
        --form-border-color-l: 30%;
        --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: 255;
        --form-bg-hover-color-g: 255;
        --form-bg-hover-color-b: 255;
        --form-bg-hover-color-h: 0;
        --form-bg-hover-color-s: 0%;
        --form-bg-hover-color-l: 100%;
        --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: 89;
        --navigation-foreground-highlight-g: 89;
        --navigation-foreground-highlight-b: 89;
        --navigation-foreground-highlight-h: 0;
        --navigation-foreground-highlight-s: 0%;
        --navigation-foreground-highlight-l: 34.9%;
        --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)
        );
    }