/* =========================================================
   Summative Reporting
   Author : KrishanG
   Date   : 06/02/2026a
   Updated: 23/02/2026
   Notes  : Learning Behaviours rubric + print styles
   ========================================================= */

/* Note: vars defined in :root are not supported in the summative reports */

/* ---------------------------
   Global styles
---------------------------- */
article a {
    text-decoration: underline;
}

ul.tileList li.tile .title {
    font-family: gotham, sans-serif;
    font-weight: bold;
}

.left-off-canvas-menu .left-menu-dock {
    background-color: #ffcd00;
}

a {
    color: #141b4d;
}

h1 {
    color: #001b66;
}

#notification-toggle-full {
    color: #001b66;
    background-color: #ff7d78;
    font-weight: bold;
}

/* ---------------------------
   Summative Report Text
---------------------------- */
.summative-report .summative-content h3 {
    color: #002060;
}

/* For Rubrics in markbook - make cells larger and clearer for assessment */
.rb-description.markdown {
    min-height: 16px;
    outline: 1px solid #f0f0f0;
    outline-offset: 8px;
}

/* Remove work type from summative report */
.summative-report .summative-content .worktype {
    color: transparent;
    font-size: 0;
    line-height: 0;
}

/* Report title */
.summative-report .header-content h1 {
    font-size: 24pt;
    margin: 0;
}

/* Hide School name and new Govt ID (kept as you had it) */
.summative-report .summative-content h4.govtStudentNumber,
.summative-report .header-content h2.school-name {
    color: #002060;
    font-size: 14px;
}

/* Student name */
.summative-report .card.summative-content h3.name {
    font-size: 18pt;
}

/* Student year */
.summative-report .card.summative-content .year {
    font-size: 14pt;
    color: transparent;
}

/* Headings on Intro page */
.summative-report .introduction h2 {
    font-size: 18pt;
    font-weight: bold;
    margin-top: 24pt;
    margin-bottom: 12pt;
}

/* Motto on intro page */
.summative-report .introduction h3 {
    font-size: 24pt;
    font-weight: 500;
    color: #002060;
}

/* Body text */
.summative-report .comment p,
.summative-report .comment li,
.summative-report .course-overview-textbox p,
.summative-report .course-overview-textbox li,
.summative-report .introduction p,
.summative-report .introduction li,
.summative-report .feedback-assessment p,
.summative-report .introduction article table,
.summative-report table.markable {
    color: #002060;
    cursor: auto;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
        "Droid Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-style: normal;
    font-weight: 400;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    font-size: 13pt;
}

/* Adjust positions of elements that appear "shifted" */
.summative-report .comment {
    position: relative;
    left: -0.6rem;
}

.summative-report .comment li {
    position: relative;
    left: 0.3rem;
}

/* Summary - Header block (FIXED invalid background+font-size) */
.summative-report .summary h3 {
    background: #002060;
    font-size: 18pt;
    font-weight: bold;
    color: #ffffff;
    padding: 12pt;
    margin-bottom: 48pt;
}

/* Summary - General layout */
.summative-report .summary .folder-title {
    margin: 12pt 0 6pt 0;
    padding: 0 0 6pt 24pt;
}

/* Summary - Subjects */
.summative-report .summary .folder-title h4 {
    font-size: 14pt;
    font-weight: normal;
}

/* Summary - Grades */
.summative-report .summary .folder-title .grade {
    font-size: 18pt;
    font-weight: 700;
    text-align: left;
}

/* Class page - Banner */
.summative-report .folder-title.class-page.summative-content {
    background: #002060;
    border: none;
    margin-bottom: 18pt;
}

/* Class page - Subject name */
.summative-report .folder-title.class-page.summative-content h4 {
    font-size: 18pt;
    font-weight: bold;
    color: #ffffff;
}

/* Class page - Teacher name */
.summative-report .folder-title.class-page.summative-content h5 {
    font-size: 14pt;
    font-weight: normal;
    color: #ffffff;
}

/* Class page - Overall grade */
.summative-report .folder-title.class-page.summative-content .grade {
    font-size: 24pt;
    font-weight: 700;
    color: #ffffff;
}

/* Class page - Subject Description */
.summative-report .course-overview-textbox h2 {
    font-size: 14pt;
    font-weight: bold;
}

/* Class page - Headings and assessment names */
.summative-report .feedback-assessment h5 {
    font-size: 14pt;
    font-weight: 500;
    position: relative;
    left: -0.6rem;
    color: #002060;
}

/* Class page - Grades (FIXED selector typo from your original) */
.summative-report .summative-content .feedback-assessment-container .feedback-assessment .grade {
    font-size: 14pt;
    font-weight: 700;
    color: #002060;
}

/* Extra margin for tables in intro */
.summative-report article table {
    margin-bottom: 28pt;
}

/* Rubric - Extra margin */
.rubric-wrap {
    margin-top: 12pt;
    margin-bottom: 28pt;
}

/* Rubric - Table layout */
.summative-report .summative-content table.rb {
    table-layout: unset;
}

/* Rubric - Level columns */
.summative-report .summative-content table.rb th[scope="col"] {
    width: 10%;
}

/* Rubric - Indicators column */
.summative-report .summative-content .rb-criterion-name.markdown {
    width: auto;
}

/* Rubric - Headings */
.summative-report .rb th {
    background-color: #f0817c33;
}

/* Rubric - Selected item */
.summative-report .rb-selected {
    background-color: #6da9dc !important;
    /*  border-left: 4px solid #ffcd00 !important;*/
    border-left: 1px solid #f7f6f6 !important;


}

/* Rubric - body text */
.summative-report table.rb p {
    font-size: 9.5pt;
    color: #002060;
}

/* Hide rubric description text */
.summative-report table.rb .rb-description.markdown p {
    display: none;
}

/* Hide rubric numerical values */
.summative-report table.rb .rb-value.used {
    display: none;
}

/* ---------------------------
   Tick ✓ centred in selected rubric cell
---------------------------- */

/* Make the selected cell a positioning context */
.summative-report table.rb td.rb-selected {
    position: relative;
}

/* Center tick perfectly */
.summative-report table.rb td.rb-selected::after {
    content: "✓";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    line-height: 1;
    font-weight: 700;
    font-size: 14pt;
    /* adjust if you want bigger/smaller */
    color: #ffffff;
    /* white pops on the blue; change if desired */
    pointer-events: none;
    z-index: 2;
}

/* Keep any existing content beneath tick if present */
.summative-report table.rb td.rb-selected>* {
    position: relative;
    z-index: 1;
}

.summative-report .summative-content p {
    color: #002060;
}

/* ---------------------------
   Hide ONLY the report title + school name block
   (prevents it printing at the top)
---------------------------- */
.summative-report .header-content .left h1[data-test="summative-preview-title"],
.summative-report .header-content .left h2.school-name {
    display: none !important;
}

/* ---------------------------
   Logo (base)
---------------------------- */
.summative-report .logo {
    position: fixed;
    right: 0;
    bottom: 0;
    z-index: 1020;
    object-fit: contain;
    margin: 0 !important;
    background: #fff;
}

/* Clean up inline span artefacts */
.summative-report p span {
    background-color: transparent !important;
    color: #002060 !important;
    font-family: inherit !important;
    font-size: 16px !important;
}

/* ---------------------------
   Learning Behaviours Rubric Table (custom)
---------------------------- */
.summative-report article table th {
    width: 10px;
}

.summative-report .learning-behaviours-rubric h3 {
    font-size: 18pt;
    font-weight: bold;
    margin-bottom: 16pt;
    color: #002060;
}

.summative-report table.learning-rubric {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 28pt;
    table-layout: fixed;
    color: #002060;
}

.summative-report table.learning-rubric thead th {
    background-color: #f0f4fa;
    color: #002060;
    font-weight: 700;
    text-align: left;
    padding: 10pt;
    border-bottom: 2px solid #6da9dc;
}

.summative-report table.learning-rubric tbody th {
    background-color: #fafbfd;
    font-weight: 700;
    padding: 10pt;
    vertical-align: top;
    width: 18%;
    border-right: 1px solid #e5eef7;
}

.summative-report table.learning-rubric td {
    padding: 10pt;
    vertical-align: top;
    border-bottom: 1px solid #e6e6f0;
}

.summative-report table.learning-rubric tbody tr:nth-child(even) td {
    background-color: #fcfdff;
}

/* Space between the assessments list and the Learning Behaviours block */
.summative-report .feedback-assessment-container:not(:has(.rubric-wrap))+.feedback-assessment-container:has(.rubric-wrap) {
    margin-top: 22px;
}

/* =========================
   PRINT STYLES (single merged block)
========================= */
@media print {

    /* Keep your original margins (you had bottom only tuned) */
    @page {
        margin-bottom: 2mm;
        /* tune based on PDF measurement */
    }

    .logo {
        height: 40mm;
        width: auto;
    }

    /* Make room for LMS footer/logo */
    .summative-report {
        padding-bottom: 22mm;
    }

    /* Optional global h3 scaling (keep if you want) */
    h3 {
        font-size: 30px !important;
    }

    /* Page breaks */
    .page-break {
        page-break-before: always;
        break-before: page;
    }

    /* ========================================
     FIXED HEADER REPEATED ON ALL PAGES
     ======================================== */

    h3.name[data-test="summative-preview-student-name"] {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        padding: 4px 0;
        margin: 0;
        background: #fff;
        border-bottom: 1px solid #ddd;
        font-size: 14pt !important;
        font-weight: 700;
        z-index: 9999;
    }

    p.year[data-test="summative-preview-student-year"] {
        position: fixed;
        top: 0;
        right: 0;
        padding: 4px 0;
        margin: 0;
        background: #fff;
        font-size: 12pt !important;
        font-weight: 600;
        text-align: right;
        z-index: 10000;
    }

    /* Create space so content does not overlap fixed header */
    body {
        margin-top: 20mm !important;
    }

    /* Print safety: avoid splitting rows */
    .summative-report table.learning-rubric tr {
        page-break-inside: avoid;
        break-inside: avoid;
    }
}


.report-footer {
    font-size: 8px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin-top: 0px;
    margin-bottom: 0px;
    padding: 0px 0.4in 0 0.4in;
}

.report-footer p {
    font-family: Arial, sans-serif;
}



/* or 11px if you prefer */

@media print {

    .summative-report figure.table[data-is-ckeditor5-table="true"]>table.sb-ck-table,
    .summative-report figure.table[data-is-ckeditor5-table="true"]>table.sb-ck-table th,
    .summative-report figure.table[data-is-ckeditor5-table="true"]>table.sb-ck-table td,
    .summative-report figure.table[data-is-ckeditor5-table="true"]>table.sb-ck-table p,
    .summative-report figure.table[data-is-ckeditor5-table="true"]>table.sb-ck-table li {
        font-size: 11pt !important;
    }
}

/* The following is to move the staff name and image to the right of the subject header */
.summative-report .folder-title .left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.summative-report .folder-title .card.compact {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    /* pushes teacher block to the right */
}

.summative-report .folder-title h4,
.summative-report .folder-title h5 {
    margin: 0;
}

: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: 0;
        --navigation-background-g: 27;
        --navigation-background-b: 102;
        --navigation-background-h: 224.12;
        --navigation-background-s: 100%;
        --navigation-background-l: 20%;
        --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: 255;
        --navigation-hover-g: 125;
        --navigation-hover-b: 120;
        --navigation-hover-h: 2.22;
        --navigation-hover-s: 100%;
        --navigation-hover-l: 73.53%;
        --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: 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: 0;
        --off-canvas-foreground-g: 27;
        --off-canvas-foreground-b: 102;
        --off-canvas-foreground-h: 224.12;
        --off-canvas-foreground-s: 100%;
        --off-canvas-foreground-l: 20%;
        --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: 255;
        --off-canvas-background-g: 255;
        --off-canvas-background-b: 255;
        --off-canvas-background-h: 0;
        --off-canvas-background-s: 0%;
        --off-canvas-background-l: 100%;
        --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: 255;
        --off-canvas-hover-g: 125;
        --off-canvas-hover-b: 120;
        --off-canvas-hover-h: 2.22;
        --off-canvas-hover-s: 100%;
        --off-canvas-hover-l: 73.53%;
        --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: 0;
        --accounts-menu-foreground-g: 27;
        --accounts-menu-foreground-b: 102;
        --accounts-menu-foreground-h: 224.12;
        --accounts-menu-foreground-s: 100%;
        --accounts-menu-foreground-l: 20%;
        --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: 190;
        --accounts-menu-hover-b: 17;
        --accounts-menu-hover-h: 43.61;
        --accounts-menu-hover-s: 100%;
        --accounts-menu-hover-l: 53.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: 0;
        --content-ui-foreground-g: 27;
        --content-ui-foreground-b: 102;
        --content-ui-foreground-h: 224.12;
        --content-ui-foreground-s: 100%;
        --content-ui-foreground-l: 20%;
        --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: 188;
        --content-ui-background-g: 189;
        --content-ui-background-b: 192;
        --content-ui-background-h: 225;
        --content-ui-background-s: 3.08%;
        --content-ui-background-l: 74.51%;
        --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: 255;
        --content-ui-hover-g: 205;
        --content-ui-hover-b: 0;
        --content-ui-hover-h: 48.24;
        --content-ui-hover-s: 100%;
        --content-ui-hover-l: 50%;
        --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: 0;
        --content-ui-selected-g: 134;
        --content-ui-selected-b: 191;
        --content-ui-selected-h: 197.91;
        --content-ui-selected-s: 100%;
        --content-ui-selected-l: 37.45%;
        --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: 0;
        --content-ui-submit-background-g: 27;
        --content-ui-submit-background-b: 102;
        --content-ui-submit-background-h: 224.12;
        --content-ui-submit-background-s: 100%;
        --content-ui-submit-background-l: 20%;
        --content-ui-submit-background-a: 1;
        --content-ui-submit-background:   hsla(
            var(--content-ui-submit-background-h),
            var(--content-ui-submit-background-s),
            var(--content-ui-submit-background-l),
            var(--content-ui-submit-background-a)
        );
            --content-ui-submit-background-contrast-r: 255;
        --content-ui-submit-background-contrast-g: 255;
        --content-ui-submit-background-contrast-b: 255;
        --content-ui-submit-background-contrast-h: 0;
        --content-ui-submit-background-contrast-s: 0%;
        --content-ui-submit-background-contrast-l: 100%;
        --content-ui-submit-background-contrast-a: 1;
        --content-ui-submit-background-contrast:   hsla(
            var(--content-ui-submit-background-contrast-h),
            var(--content-ui-submit-background-contrast-s),
            var(--content-ui-submit-background-contrast-l),
            var(--content-ui-submit-background-contrast-a)
        );
            --accent-foreground-r: 0;
        --accent-foreground-g: 134;
        --accent-foreground-b: 191;
        --accent-foreground-h: 197.91;
        --accent-foreground-s: 100%;
        --accent-foreground-l: 37.45%;
        --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: 241;
        --accent-background-g: 249;
        --accent-background-b: 255;
        --accent-background-h: 205.71;
        --accent-background-s: 100%;
        --accent-background-l: 97.25%;
        --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: 0;
        --logo-background-g: 27;
        --logo-background-b: 102;
        --logo-background-h: 224.12;
        --logo-background-s: 100%;
        --logo-background-l: 20%;
        --logo-background-a: 0;
        --logo-background:   hsla(
            var(--logo-background-h),
            var(--logo-background-s),
            var(--logo-background-l),
            var(--logo-background-a)
        );
            --logo-background-contrast-r: 255;
        --logo-background-contrast-g: 255;
        --logo-background-contrast-b: 255;
        --logo-background-contrast-h: 0;
        --logo-background-contrast-s: 0%;
        --logo-background-contrast-l: 100%;
        --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: 255;
        --body-background-g: 255;
        --body-background-b: 255;
        --body-background-h: 0;
        --body-background-s: 0%;
        --body-background-l: 100%;
        --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: 193;
        --form-border-color-g: 229;
        --form-border-color-b: 255;
        --form-border-color-h: 205.16;
        --form-border-color-s: 100%;
        --form-border-color-l: 87.84%;
        --form-border-color-a: 1;
        --form-border-color:   hsla(
            var(--form-border-color-h),
            var(--form-border-color-s),
            var(--form-border-color-l),
            var(--form-border-color-a)
        );
            --form-border-color-contrast-r: 0;
        --form-border-color-contrast-g: 0;
        --form-border-color-contrast-b: 0;
        --form-border-color-contrast-h: 0;
        --form-border-color-contrast-s: 0%;
        --form-border-color-contrast-l: 0%;
        --form-border-color-contrast-a: 1;
        --form-border-color-contrast:   hsla(
            var(--form-border-color-contrast-h),
            var(--form-border-color-contrast-s),
            var(--form-border-color-contrast-l),
            var(--form-border-color-contrast-a)
        );
            --form-bg-hover-color-r: 209;
        --form-bg-hover-color-g: 236;
        --form-bg-hover-color-b: 255;
        --form-bg-hover-color-h: 204.78;
        --form-bg-hover-color-s: 100%;
        --form-bg-hover-color-l: 90.98%;
        --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: 166;
        --body-foreground-g: 166;
        --body-foreground-b: 166;
        --body-foreground-h: 0;
        --body-foreground-s: 0%;
        --body-foreground-l: 65.1%;
        --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: 38;
        --body-foreground-h1-g: 38;
        --body-foreground-h1-b: 38;
        --body-foreground-h1-h: 0;
        --body-foreground-h1-s: 0%;
        --body-foreground-h1-l: 14.9%;
        --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)
        );
    }