@layer scheme {
    /* Text settings */
    :root {
        text-wrap-mode: wrap;
        /* text-wrap-style: balance; */
        hyphens: none;
        overflow-wrap: normal;
        word-wrap: normal;
    }

    .main-text {
        font-size: 1rem;
        line-height: 1.5rem;
        text-align: left;
        text-wrap-style: pretty;
    }

    /* Theme/ Scheme colours */
    /******************** scheme-dark (Dark) *********************/
    .scheme-dark,
    .scheme-dark-main {
        background-color: var(--general-background-dark);
        color: var(--general-text-dark);
        border-color: #00000000;
        padding-left:  1em;
        padding-right: 1em;
    }


/* ****** All focusable elements ****** */
/* Input - Default settings */
    .scheme-dark input[type="text"],
    .scheme-dark select,
    .scheme-dark textarea {
        background-color: var(--input-background-dark);
        border-color: var(--input-border-dark);
        color: var(--input-text-dark);
    }
    .scheme-dark ::placeholder {
        color: var(--input-placeholder-dark);
        opacity: 1;
    }

    .scheme-dark input[type="radio"],
    .scheme-dark input[type="checkbox"] {
        background-color: var(--checkbox-radio-background-dark);
        border-color: var(--checkbox-radio-border-dark);
        color: var(--checkbox-radio-check-dark);
    }

/* Buttons - Default */
    .scheme-dark button,
    .scheme-dark .button,
    .scheme-dark .btn,
    .scheme-dark [role="button"],
    .scheme-dark input[type="submit"],
    .scheme-dark input[type="reset"],
    .scheme-dark input[type="button"] {
        background-color: var(--button-background-dark);
        color: var(--button-text-dark);
        outline-color: var(--button-border-dark);
    }

/* Buttons - Alt */
    .scheme-dark button + .button,
    .scheme-dark button + .btn,
    .scheme-dark button + [role="button"],
    .scheme-dark button + input[type="button"],

    .scheme-dark .btn + button,
    .scheme-dark .btn + .button,
    .scheme-dark .btn + .btn,
    .scheme-dark .btn + [role="button"],
    .scheme-dark .btn + input[type="button"]
    {
        background-color: var(--button2-background-dark);
        color: var(--button2-text-dark);
        outline-color: var(--button2-border-dark);
    }

    /* Call To Action buttons */
    .scheme-dark .cta button,
    .scheme-dark .cta .button,
    .scheme-dark .cta .btn,
    .scheme-dark .cta [role="button"]{
        outline-width: 2px;
        outline-style: solid;
    }

/* Links - Default */
    .scheme-dark a[href]:not(.button, .btn, .menu-button, .menu-link),
    .scheme-dark .link {
        background-color: var(--general-link-background-dark);
        color: var(--general-link-text-dark);
        text-decoration: underline;
    }

/* In-Menu button/link */
    .scheme-dark button.menu-button,
    .scheme-dark a.menu-button,
    .scheme-dark button.menu-link,
    .scheme-dark a.menu-link
    {
        background-color: var(--general-background-dark);
        color: var(--link-menu-text-dark);
        font-size: 1rem;
    }

    .scheme-dark a.menu-button,
    .scheme-dark a.menu-link {
        padding: 0.5rem;
        border-radius: 0.5rem;
        border: 1px solid var(--link-menu-border-dark);
    }

/* Switch/ Toggle - Default */
    /* Switch Example

    <div class="switch-toggle">
        <input type="checkbox" role="switch" id="toggle1" checked>
        <div class="switch-toggle-track" aria-hidden="true">
            <div class="switch-toggle-dot">
                <i class="icon"></i>
            </div>
        </div>
    </div>
    */
    .scheme-dark .switch-toggle {
        background: var(--toggle-inner-border-dark);
        border: 2px solid black;
    }
    .scheme-dark .switch-toggle > .switch-toggle-track {
        background: var(--toggle-background-dark);
    }
    /* Switch Off */
    .scheme-dark .switch-toggle > .switch-toggle-track > .switch-toggle-dot {
        color: var(--toggle-icon-dark);
        border: 1px solid black;
        background-color: var(--toggle-dot-off-dark);
    }
    /* Switch On */
    .scheme-dark .switch-toggle > input[type="checkbox"]:checked + .switch-toggle-track > .switch-toggle-dot {
        background-color: var(--toggle-dot-on-dark);
    }

/* Radio and checkboxes - Default */
    .scheme-dark input[type="checkbox"],
    .scheme-dark input[type="radio"] {
        background-color: var(--checkbox-radio-background-dark);
        border-color: var(--checkbox-radio-inner-border-dark);
    }

/***** Table List Stripes *****/
    .list tr:nth-child(even) > td {
        opacity: 1;
    }
        .scheme-dark .list tr td {
        background-color: var(--background-colour-dark);
    }
    .scheme-dark .list tr:nth-child(odd) > td {
        background-color: color-mix(in oklab, var(--background-colour-dark) 90%, black);
    }

/* ****** Focus ******** */
/* Focus - Buttons */
    .scheme-dark button:focus,
    .scheme-dark .button:focus,
    .scheme-dark .btn:focus,
    .scheme-dark [role="button"]:focus,
    .scheme-dark input[type="submit"]:focus,
    .scheme-dark input[type="reset"]:focus,
    .scheme-dark input[type="button"]:focus{
        background-color: var(--button-focus-background-dark);
        color: var(--button-focus-text-dark);
        outline-color: var(--button-focus-border-dark);
        text-decoration: none!important;
    }

/* Buttons - Focus - Alt */
    .scheme-dark button + .button:focus,
    .scheme-dark button + .btn:focus,
    .scheme-dark button + [role="button"]:focus,
    .scheme-dark button + input[type="button"]:focus,

    .scheme-dark .btn + button:focus,
    .scheme-dark .btn + .button:focus,
    .scheme-dark .btn + .btn:focus,
    .scheme-dark .btn + [role="button"]:focus,
    .scheme-dark .btn + input[type="button"]:focus
    {
        background-color: var(--button2-focus-background-dark);
        color: var(--button2-focus-text-dark);
        outline-color: var(--button2-focus-border-dark);
    }

/* Focus - Links - Default */
    .scheme-dark a[href]:focus:not(.button, .btn),
    .scheme-dark .link:focus {
        background-color: var(--general-link-focus-background-dark);
        color: var(--general-link-focus-text-dark);
        outline:2px solid var(--general-link-focus-border-dark);
    }

    .scheme-dark button.menu-button:focus,
    .scheme-dark a.menu-button:focus,
    .scheme-dark button.menu-link:focus,
    .scheme-dark a.menu-link:focus {
        background-color: var(--link-menu-focus-background-dark);
        color: var(--link-menu-focus-text-dark);
        outline:2px solid var(--link-menu-focus-border-dark);
    }

/* Focus - Static Elements */
    .scheme-dark audio:focus,
    .scheme-dark canvas:focus,
    .scheme-dark details:focus,
    .scheme-dark video:focus,
    .scheme-dark [accesskey]:focus,
    .scheme-dark [tabindex="0"]:focus,
    .scheme-dark .menu-button:focus
    {
        outline: 2px solid var(--link-menu-text-dark);
    }
    .scheme-dark [tabindex="-1"]:focus {
        outline: none;
        border-bottom: 2px solid var(--focus-colour-dark);
        border-top: 2px solid var(--focus-colour-dark);
    }

/* Focus - Form Fields */
    .scheme-dark input:focus,
    .scheme-dark select:focus,
    .scheme-dark summary:focus,
    .scheme-dark textarea:focus,
    .scheme-dark [contenteditable]:focus
    {
        outline: 2px solid var(--focus-colour-dark);
    }
/* Focus - Toggles */
    .scheme-dark .switch-toggle > input[role="switch"]:focus + .switch-toggle-track {
        background-color: var(--toggle-focus-border-dark);
    }

    .scheme-dark input[type="radio"]:focus,
    .scheme-dark input[type="checkbox"]:focus {
        border-color: var(--checkbox-radio-focus-border-dark);
    }

/* ******************** END OF FOCUS ******************** */

/* ****** Hover ******** */
/* hover - Buttons */
    .scheme-dark button:hover,
    .scheme-dark .button:hover,
    .scheme-dark .btn:hover,
    .scheme-dark [role="button"]:hover,
    .scheme-dark input[type="submit"]:hover,
    .scheme-dark input[type="reset"]:hover,
    .scheme-dark input[type="button"]:hover{
        background-color: var(--button-focus-background-dark);
        color: var(--button-focus-text-dark);
        outline-color: var(--button-focus-border-dark);
        text-decoration: none!important;
    }

/* Buttons - hover - Alt */
    .scheme-dark button + .button:hover,
    .scheme-dark button + .btn:hover,
    .scheme-dark button + [role="button"]:hover,
    .scheme-dark button + input[type="button"]:hover,

    .scheme-dark .btn + button:hover,
    .scheme-dark .btn + .button:hover,
    .scheme-dark .btn + .btn:hover,
    .scheme-dark .btn + [role="button"]:hover,
    .scheme-dark .btn + input[type="button"]:hover
    {
        background-color: var(--button2-focus-background-dark);
        color: var(--button2-focus-text-dark);
        outline-color: var(--button2-focus-border-dark);
    }

/* hover - Links - Default */
    .scheme-dark a[href]:hover:not(.button, .btn),
    .scheme-dark .link:hover {
        background-color: var(--link-menu-focus-background-dark);
        color: var(--link-menu-focus-text-dark);
        outline:2px solid var(--link-menu-focus-border-dark);
    }

    .scheme-dark button.menu-button:hover,
    .scheme-dark a.menu-button:hover,
    .scheme-dark button.menu-link:hover,
    .scheme-dark a.menu-link:hover {
        background-color: var(--link-menu-focus-background-dark);
        color: var(--link-menu-focus-text-dark);
        outline: 2px solid var(--link-menu-focus-border-dark);
    }

/* hover - Static Elements */
    .scheme-dark audio:hover,
    .scheme-dark canvas:hover,
    .scheme-dark details:hover,
    .scheme-dark video:hover,
    .scheme-dark [accesskey]:hover,
    .scheme-dark [tabindex="0"]:hover,
    .scheme-dark .menu-button:hover
    {
        outline: 2px solid var(--link-menu-text-dark);
    }
/* hover - Form Fields */
    .scheme-dark input:hover,
    .scheme-dark select:hover,
    .scheme-dark summary:hover,
    .scheme-dark textarea:hover,
    .scheme-dark [contenteditable]:hover
    {
        outline: 2px solid var(--input-focus-border-dark);
    }
/* hover - Toggles */
    .scheme-dark .switch-toggle > input[role="switch"]:hover + .switch-toggle-track {
        background-color: var(--toggle-focus-border-dark);
    }

    .scheme-dark input[type="radio"]:hover,
    .scheme-dark input[type="checkbox"]:hover {
        border-color: var(--checkbox-radio-focus-border-dark);
    }

/* ******************** END OF HOVER ******************** */

.scheme-dark .card {
    background-color: color-mix(in oklab, var(--set-background-colour-dark) 90%, black);
    color: var(--general-text-dark);
    border-color: var(--general-text-dark);
    border-radius: var(--card-border-radius);
}

.scheme-dark .card > .card-tag {
    color: var(--pair-6-light);
    font-size: small;
    background-color: var(--pair-6-dark);
}
.scheme-dark .color-card .h-card:nth-child(1),
.scheme-dark .color-card .card:nth-child(1),
.scheme-dark .color-card .stat-card:nth-child(1) {
    color: var(--pair-1-light);
    background-color: var(--pair-1-dark);
}
.scheme-dark .color-card .h-card:nth-child(2),
.scheme-dark .color-card .card:nth-child(2) ,
.scheme-dark .color-card .stat-card:nth-child(2) {
    color: var(--pair-2-light);
    background-color: var(--pair-2-dark);
}
.scheme-dark .color-card .h-card:nth-child(3),
.scheme-dark .color-card .card:nth-child(3),
.scheme-dark .color-card .stat-card:nth-child(3){
    color: var(--pair-3-light);
    background-color: var(--pair-3-dark);
}
.scheme-dark .color-card .h-card:nth-child(4),
.scheme-dark .color-card .card:nth-child(4),
.scheme-dark .color-card .stat-card:nth-child(4) {
    color: var(--pair-4-light);
    background-color: var(--pair-4-dark);
}
.scheme-dark .color-card .h-card:nth-child(5),
.scheme-dark .color-card .card:nth-child(5),
.scheme-dark .color-card .stat-card:nth-child(5) {
    color: var(--pair-5-light);
    background-color: var(--pair-5-dark);
}
.scheme-dark .color-card .h-card:nth-child(6),
.scheme-dark .color-card .card:nth-child(6),
.scheme-dark .color-card .stat-card:nth-child(6) {
    color: var(--pair-6-light);
    background-color: var(--pair-6-dark);
}

.scheme-dark .h-card .icon {
    color: black;
}

/* ********************** Video ********************** */
.scheme-dark #hero-video-button {
    border-color: var(--general-background-dark);;
    background-color: var(--general-background-dark);
    color: black;
}
.scheme-dark .hero-video-container {
    border-color: var(--general-background-dark);
}

/* ********************** Table-List ********************** */

.scheme-dark table.list[role="presentation"] tr  td > span {
    color: var(--general-text-dark);
}
.scheme-dark table.list[role="presentation"] tr {
    border-bottom: 1px solid color-mix(in oklab, var(--background-colour-dark) 90%, black);
}
.scheme-dark table.list[role="presentation"] tr  td > span.active {
    background-color: var(--toggle-dot-on-dark);
}
.scheme-dark table.list[role="presentation"] tr  td > span.expired {
    background-color: var(--toggle-dot-off-dark);
}

/* ********************** Description List ********************** */
dl.dl-inline > div  {
    border-bottom: 1px solid color-mix(in oklab, var(--background-colour-dark) 90%, black);
}

/* ********************** Modal ********************** */
.scheme-dark .modal .modal-body {
    background-color: var(--general-background-dark);
    color: var(--general-text-dark);
}

/* Expanding content */
.scheme-dark .expand {
    background-color: var(--general-background-dark);
    color: var(--general-text-dark);
    border-color: var(--link-menu-focus-border-dark);
}


/* 'Process' Points  ??? */
    .scheme-dark .process-point > div {
        border-left-color: var(--focus-colour-dark);
    }
    .scheme-dark .process-point > div > span {
        border-color: var(--focus-colour-light);
        background-color: var(--set-background-colour-dark);
    }
/* ******************** END OF DARK SCHEME ******************** */

/******************** scheme-light *********************/
    .scheme-light,
    .scheme-light-main {
        background-color: var(--general-background-light);
        color: var(--general-text-light);
        border-color: #00000000;
        padding-left:  1em;
        padding-right: 1em;
    }

    .has-tooltip + span {
        color: var(--general-text-light);
        background-color: var(--general-background-light);
        border:  2px solid var(--general-text-light);
    }


/* ****** All focusable elements ****** */
/* Input - Default settings */
    .scheme-light input[type="text"],
    .scheme-light select,
    .scheme-light textarea {
        background-color: var(--input-background-light);
        border-color: var(--input-border-light);
        color: var(--input-text-light);
    }
    .scheme-light ::placeholder {
        color: var(--input-placeholder-light);
        opacity: 1;
    }

    .scheme-light input[type="radio"],
    .scheme-light input[type="checkbox"] {
        background-color: var(--checkbox-radio-background-light);
        border-color: var(--checkbox-radio-border-light);
        color: var(--checkbox-radio-check-light);
    }

/* Buttons - Default */
    .scheme-light button,
    .scheme-light .button,
    .scheme-light .btn,
    .scheme-light [role="button"],
    .scheme-light input[type="submit"],
    .scheme-light input[type="reset"],
    .scheme-light input[type="button"] {
        background-color: var(--button-background-light);
        color: var(--button-text-light);
        outline-color: var(--button-border-light);
    }

/* Links - Default */
    .scheme-light a[href]:not(.button, .btn),
    .scheme-light .link {
        background-color: var(--general-link-background-light);
        color: var(--general-link-text-light);
        text-decoration: underline;
    }

/* Menu button/link */
    .scheme-light button.menu-button,
    .scheme-light a.menu-button,
    .scheme-light button.menu-link,
    .scheme-light a.menu-link
    {
        background-color: var(--general-background-light);
        color: var(--link-menu-text-light);
        font-size: 1rem;
    }

/* Switch/ Toggle - Default */
    /* Switch Example

    <div class="switch-toggle">
        <input type="checkbox" role="switch" id="toggle1" checked>
        <div class="switch-toggle-track" aria-hidden="true">
            <div class="switch-toggle-dot">
                <i class="icon"></i>
            </div>
        </div>
    </div>
    */
    .scheme-light .switch-toggle {
        background: var(--toggle-inner-border-light);
        border: 2px solid black;
    }
    .scheme-light .switch-toggle > .switch-toggle-track {
        background: var(--toggle-background-light);
    }
    /* Switch Off */
    .scheme-light .switch-toggle > .switch-toggle-track > .switch-toggle-dot {
        color: var(--toggle-icon-light);
        border: 1px solid black;
        background-color: var(--toggle-dot-off-light);
    }
    /* Switch On */
    .scheme-light .switch-toggle > input[type="checkbox"]:checked + .switch-toggle-track > .switch-toggle-dot {
        background-color: var(--toggle-dot-on-light);
    }

/* Radio and checkboxes - Default */
    .scheme-light input[type="checkbox"],
    .scheme-light input[type="radio"] {
        background-color: var(--checkbox-radio-background-light);
        border-color: var(--checkbox-radio-inner-border-light);
    }

/***** Table List Stripes *****/
    .list tr:nth-child(even) > td {
        opacity: 1;
    }
        .scheme-light .list tr td {
        background-color: var(--background-colour-light);
    }
    .scheme-light .list tr:nth-child(odd) > td {
        background-color: color-mix(in oklab, var(--background-colour-light) 90%, black);
    }

/* ****** Focus ******** */
/* Focus - Buttons */
    .scheme-light button:focus,
    .scheme-light .button:focus,
    .scheme-light .btn:focus,
    .scheme-light [role="button"]:focus,
    .scheme-light input[type="submit"]:focus,
    .scheme-light input[type="reset"]:focus,
    .scheme-light input[type="button"]:focus{
        background-color: var(--button-focus-background-light);
        color: var(--button-focus-text-light);
        outline: 2px solid var(--button-focus-border-light);
        text-decoration: none!important;
    }
/* Focus - Links - Default */
    .scheme-light a[href]:focus:not(.button, .btn),
    .scheme-light .link:focus {
        background-color: var(--general-link-focus-background-light);
        color: var(--general-link-focus-text-light);
        outline:2px solid var(--general-link-focus-border-light);
    }
    .scheme-light button.menu-button:focus,
    .scheme-light a.menu-button:focus,
    .scheme-light button.menu-link:focus,
    .scheme-light a.menu-link:focus {
        background-color: var(--link-menu-focus-background-light);
        color: var(--link-menu-focus-text-light);
        outline:2px solid var(--link-menu-focus-border-light);
    }
/* Focus - Static Elements */
    .scheme-light audio:focus,
    .scheme-light canvas:focus,
    .scheme-light details:focus,
    .scheme-light video:focus,
    .scheme-light [accesskey]:focus,
    .scheme-light [tabindex="0"]:focus,
    .scheme-light .menu-button:focus
    {
        outline: 2px solid var(--link-menu-text-light);
    }
    .scheme-light [tabindex="-1"]:focus {
        outline: none;
        border-bottom: 2px solid var(--focus-colour-light);
        border-top: 2px solid var(--focus-colour-light);
    }

/* Focus - Form Fields */
    .scheme-light input:focus,
    .scheme-light select:focus,
    .scheme-light summary:focus,
    .scheme-light textarea:focus,
    .scheme-light [contenteditable]:focus
    {
        outline: 2px solid var(--button-focus-border-light);
    }
/* Focus - Toggles */
    .scheme-light .switch-toggle > input[role="switch"]:focus + .switch-toggle-track {
        background-color: var(--toggle-focus-border-light);
    }

    .scheme-light input[type="radio"]:focus,
    .scheme-light input[type="checkbox"]:focus {
        border-color: var(--checkbox-radio-focus-border-light);
    }

/* ******************** END OF FOCUS ******************** */

/* ****** Hover ******** */
/* hover - Buttons */
    .scheme-light button:hover,
    .scheme-light .button:hover,
    .scheme-light .btn:hover,
    .scheme-light [role="button"]:hover,
    .scheme-light input[type="submit"]:hover,
    .scheme-light input[type="reset"]:hover,
    .scheme-light input[type="button"]:hover{
        background-color: var(--button-focus-background-light);
        color: var(--button-focus-text-light);
        outline: 2px solid var(--button-focus-border-light);
        text-decoration: none!important;
    }
/* hover - Links - Default */
    .scheme-light a[href]:hover:not(.button, .btn),
    .scheme-light .link:hover {
        background-color: var(--link-menu-hover-background-light);
        color: var(--link-menu-hover-text-light);
        outline: 2px solid var(--button-focus-border-light);
    }
/* hover - Static Elements */
    .scheme-light audio:hover,
    .scheme-light canvas:hover,
    .scheme-light details:hover,
    .scheme-light video:hover,
    .scheme-light [accesskey]:hover,
    .scheme-light [tabindex="0"]:hover,
    .scheme-light .menu-button:hover
    {
        outline: 2px solid var(--link-menu-text-light);
    }
/* hover - Form Fields */
    .scheme-light input:hover,
    .scheme-light select:hover,
    .scheme-light summary:hover,
    .scheme-light textarea:hover,
    .scheme-light [contenteditable]:hover
    {
        outline: 2px solid var(--input-focus-border-light);
    }
/* hover - Toggles */
    .scheme-light .switch-toggle > input[role="switch"]:hover + .switch-toggle-track {
        background-color: var(--toggle-hover-border-light);
    }

    .scheme-light input[type="radio"]:hover,
    .scheme-light input[type="checkbox"]:hover {
        border-color: var(--checkbox-radio-hover-border-light);
    }

/* ******************** END OF HOVER ******************** */

/* ******************* Card ***************************/
.scheme-light .card {
    background-color: color-mix(in oklab, var(--set-background-colour-light) 90%, black);
    color: var(--general-text-light);
    border-color: var(--general-text-light);
    border-radius: var(--card-border-radius);
}

.scheme-light .card > .card-tag {
    color: var(--pair-6-light);
    font-size: small;
    background-color: var(--pair-6-dark);
}
.scheme-light .color-card  .h-card:nth-child(1),
.scheme-light .color-card  .card:nth-child(1),
.scheme-light .color-card  .stat-card:nth-child(1){
    color: var(--pair-1-dark);
    background-color: var(--pair-1-light);
}
.scheme-light .color-card  .h-card:nth-child(2),
.scheme-light .color-card  .card:nth-child(2),
.scheme-light .color-card  .stat-card:nth-child(2) {
    color: var(--pair-2-dark);
    background-color: var(--pair-2-light);
}
.scheme-light .color-card .h-card:nth-child(3),
.scheme-light .color-card .card:nth-child(3),
.scheme-light .color-card .stat-card:nth-child(3) {
    color: var(--pair-3-dark);
    background-color: var(--pair-3-light);
}
.scheme-light .color-card .h-card:nth-child(4),
.scheme-light .color-card .card:nth-child(4) ,
.scheme-light .color-card .stat-card:nth-child(4) {
    color: var(--pair-4-dark);
    background-color: var(--pair-4-light);
}
.scheme-light .color-card .h-card:nth-child(5),
.scheme-light .color-card .card:nth-child(5),
.scheme-light .color-card .stat-card:nth-child(5) {
    color: var(--pair-5-dark);
    background-color: var(--pair-5-light);
}
.scheme-light .color-card .h-card:nth-child(6),
.scheme-light .color-card .card:nth-child(6) ,
.scheme-light .color-card .stat-card:nth-child(6) {
    color: var(--pair-6-dark);
    background-color: var(--pair-6-light);
}

.scheme-light .h-card .icon {
    color: black;
}

/* ********************** Video ********************** */
.scheme-light #hero-video-button {
    border-color: var(--general-background-light);;
    background-color: var(--general-background-light);
    color: black;
}
.scheme-light .hero-video-container {
    border-color: var(--general-background-light);
}

/* ********************** Table-List ********************** */

.scheme-light table.list[role="presentation"] tr  td > span {
    color: var(--general-text-light);
}
.scheme-light table.list[role="presentation"] tr {
    border-bottom: 1px solid color-mix(in oklab, var(--background-colour-light) 90%, black);
}
.scheme-light table.list[role="presentation"] tr  td > span.active {
    background-color: var(--toggle-dot-on-light);
}
.scheme-light table.list[role="presentation"] tr  td > span.expired {
    background-color: var(--toggle-dot-off-light);
}

/* ********************** Description List ********************** */
dl.dl-inline > div  {
    border-bottom: 1px solid color-mix(in oklab, var(--background-colour-light) 90%, black);
}

/* ********************** Modal ********************** */
.scheme-light .modal .modal-body {
    background-color: var(--general-background-light);
    color: var(--general-text-light);
}

/* Expanding content */
.scheme-light .expand {
    background-color: var(--general-background-light);
    color: var(--general-text-light);
    border-color: var(--link-menu-focus-border-light);
}

/* 'Process' Points  ??? */
    .scheme-light .process-point > div {
        border-left-color: var(--focus-colour-light);
    }
    .scheme-light .process-point > div > span {
        border-color: var(--focus-colour-light);
        background-color: var(--set-background-colour-light);
    }
/* ******************** END OF LIGHT SCHEME ******************** */

/* ********************* END OF SCHEME STYLES ****************** */

/* Headings */
    .leader-heading {
        hyphens: none;
        font-size: 3.75rem;
        line-height: 4.5rem;
        font-weight: 700;
        text-shadow: 0.1rem 0.1rem 0.1rem rgba(0, 0, 0, 0.25);
    }
    .tag-line {
    /* Under heading */
        hyphens: none;
        font-size: 1.5rem;
        line-height: 2rem;
        font-weight: 600;
    }

    h1, h2, h3, h4, h5, h6 {
        scroll-margin-top: 6rem;
    }

    .h1, .h2, .h3, .h4, .h5, .h6 {
    margin-block-start: 0px;
    margin-block-end: 0px;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
}

    h1, .h1 {
        font-size: 3.75rem;
        font-weight: 700;
        letter-spacing: -.025em;
        line-height: 4rem;
        margin-bottom: 2rem;
    }
    h2, .h2 {
        font-size: 2.7rem;
        line-height: 3rem;
        margin-bottom: 1rem;
        font-weight: 700;
    }
    h3, .h3 {
        font-size: 2rem;
        line-height: 2.25rem;
        margin-bottom: 0.5rem;
    }
    h4, .h4 {
        font-size: 1.2rem;
        line-height: 1.5rem;
    }
    h5, .h5 {
        font-size: 1rem;
        font-weight: 800;
        line-height: 1.2em;
    }
    h6, .h6 {
        font-size: 1rem;
        font-weight: 600;
        text-decoration: underline;
        line-height: 1.1rem;
    }

/* Disabled elements */
    [disabled],
    [aria-disabled="true"]
    {
        filter: grayscale(100%) !important;
        text-decoration-line: line-through  !important;
        pointer-events: none  !important;
        cursor: not-allowed  !important;
    }

    /* readonly elements */
    [readonly] {
        pointer-events: none  !important;
       /* cursor: not-allowed  !important; */
    }

    /* accessible hiding */
    [hidden] {
        display: none;
    }

    .sr-only,
    .visually-hidden {
        border: 0 !important;
        border-width: 0 !important;
        position: absolute !important;
        width: 2px !important;
        height: 2px !important;
        padding: 0 !important;
        margin: -2px !important;
        overflow: hidden !important;
        white-space: nowrap !important;
        clip: rect(1px, 1px, 1px, 1px) !important;
        -webkit-clip-path: inset(50%) !important;
        clip-path: inset(50%) !important;
    }

/* Notices & Banner */
    .notice,
    .publish-notice {
        background-color: var(--warning-background);
        color: var(--warning-text);
    }
    .news-banner {
        background-color: var(--news-banner-background);
        color: var(--news-banner-text);
    }


/* Button Sizes */
    button,
    .button,
    .btn,
    input[type="submit"],
    input[type="reset"],
    input[type="button"] {
        font-size: larger;
        font-weight: bold;
        text-decoration: none;
    }

    /* No outline INSIDE buttons */
    button * ,
    .button * ,
    .btn *,
    input[type="submit"] *,
    input[type="reset"] *,
    input[type="button"] * {
        outline: none !important;
    }

    /* Links need underlines */
    a[href]:not(.button, .btn),
    .link {
        text-decoration: underline;
    }

    /* Except, no underline on link in the nav bar */
    nav a[href],
    nav .link {
        text-decoration: none !important;
    }

    /* Remove underline on hover/focus for links that are not buttons */
    a[href]:hover:not(.button, .btn),
    a[href]:focus:not(.button, .btn),
    .link:hover,
    .link:focus {
        text-decoration: none;
    }


    /* Breadcrumbs
    <nav aria-label="Breadcrumbs">
        <ol class="breadcrumbs">
            <li><a href="#">Home</a></li>
            <li><a href="#">Section</a></li>
            <li aria-current="page">Current Page</li>
        </ol>
    */
    .breadcrumbs > li {
        display: inline-block;
        margin-right: 5px;
    }
    .breadcrumbs > li:not(.breadcrumbs > li:last-child):after {
        content: ">";
        margin: 0 5px;
    }

/***** Certificate styles *****/
    .certification-details{
        background-color: #FCFCFD;
    }

    .set-heading-background {
        background-color: var(--set-background-colour-2);
        height: 3em;
        border-radius: 0.75em;
    }

/***** Hidden icons inside buttons should not get focus *****/
    button::focus *[aria-hidden="true"],
    button::hover *[aria-hidden="true"],
    button::active *[aria-hidden="true"],
    a::focus *[aria-hidden="true"],
    a::hover *[aria-hidden="true"],
    a::active *[aria-hidden="true"]
     {
        border: none!important;
        outline: none!important;
    }

/**** Complimentary Colours ****/
.complimentary-blue,
.pastel-blue {
    background-color: lightblue;
    color: darkblue;
    border-color: darkblue
}
.complimentary-brown,
.pastel-brown {
    background-color: burlywood;
    color: #67330E;
    border-color: #67330E;
}
.complimentary-green,
.pastel-green {
    background-color: lightgreen;
    color: darkgreen;
    border-color: darkgreen;
}
.complimentary-orange,
.pastel-orange {
    background-color: #FF8C00;
    color: #603100;
    border-color: #603100;
}
.complimentary-purple,
.pastel-purple {
    background-color: plum;
    color: purple;
    border-color: purple;
}
.complimentary-red,
.pastel-red {
    background-color: #FB9090;
    color: darkred;
    border-color: darkred;
}
.complimentary-yellow,
.pastel-yellow {
    background-color: lightyellow;
    color: #b85B0b;
    border-color: #b85B0b;
}

/********************* Shadows ******************** */

.shadow {
    box-shadow: 1em 1em 1em 1em rgba(0, 0, 0, var(--shadow-opacity));
}


/* ********************** Extra ********************** */





/* End of Layer */
}