/* AUTO-GENERATED — do not edit by hand.
   Generated by scripts/compile_sass.py (generate_apps_css).
   Run `python scripts/compile_sass.py` to regenerate. */
:root {
    --app-colour-absence: #3a6878;
    --app-colour-activities: #4A6F95;
    --app-colour-administrator: dimgray;
    --app-colour-administrator-tool: #3A3A38;
    --app-colour-apps: #F37021;
    --app-colour-app-store: #1668b8;
    --app-colour-assessments: #7e726a;
    --app-colour-audit: #3a6878;
    --app-colour-bookmarks: #7e726a;
    --app-colour-calculate: #107C41;
    --app-colour-calendar: orangered;
    --app-colour-case-manager: #3a6878;
    --app-colour-chokhmah: #7C5A3E;
    --app-colour-classifieds: #8a6e48;
    --app-colour-cloud-storage: #1a2030;
    --app-colour-configuration: #2D6A8A;
    --app-colour-contacts: rgb(143, 104, 6);
    --app-colour-contracts: #208840;
    --app-colour-dashboard: #6B6560;
    --app-colour-demo: #001d71;
    --app-colour-diary: #8B5E3C;
    --app-colour-document-browser: #c73d78;
    --app-colour-documents: #0278d4;
    --app-colour-draw: #005597;
    --app-colour-drive: #0061FF;
    --app-colour-events: orangered;
    --app-colour-family-tree: #6E1F22;
    --app-colour-favourites: #e0a21a;
    --app-colour-feedback: #208840;
    --app-colour-films: #483D8B;
    --app-colour-gymnast: #C50F1F;
    --app-colour-help: dimgray;
    --app-colour-image-bank: #7E726A;
    --app-colour-images: #fe28a2;
    --app-colour-jahrzeit: #5B6680;
    --app-colour-jobs: #c73d78;
    --app-colour-journal: #FA2D48;
    --app-colour-kiki: #7A5AF8;
    --app-colour-library: #a06430;
    --app-colour-mail: #0078D4;
    --app-colour-mailings: #1668b8;
    --app-colour-meetings: limegreen;
    --app-colour-messages: #4267B2;
    --app-colour-monitor: #0E9C8A;
    --app-colour-music: #1DB954;
    --app-colour-news: #F26522;
    --app-colour-notes: #B8860B;
    --app-colour-notifications: #6e6862;
    --app-colour-office: #1668b8;
    --app-colour-password: #696969;
    --app-colour-people: rgb(143, 104, 6);
    --app-colour-podcasts: #7C4DFF;
    --app-colour-polls: #208840;
    --app-colour-preferences: dimgray;
    --app-colour-present: #C43E1C;
    --app-colour-profile: #6e6862;
    --app-colour-publisher: #1668b8;
    --app-colour-registration: #1a2030;
    --app-colour-reminders: Purple;
    --app-colour-sabra: #1E6F5C;
    --app-colour-search: dimgray;
    --app-colour-setup: #4a6f95;
    --app-colour-signup: #5BA17F;
    --app-colour-slide-bank: #b8232c;
    --app-colour-team-spaces: SeaGreen;
    --app-colour-todo: Purple;
    --app-colour-todo-legacy: #c73d78;
    --app-colour-updates: #6c5ce7;
    --app-colour-weather: #2E97D4;
    --app-colour-whiteboard: #6b46c1;
    --app-colour-workspaces: DodgerBlue;
    --app-colour-write: #0f6cbd;
}

:root {
  --app-colour-absence: #3a6878;
}

/* State comes from marks in the DOM, never from a body-rooted match: this
   template is stamped out once per app, so one such selector becomes 72.
   See the generator's header note. */
.app-absence,
#tabs-bar .tab.application-absence[data-active],
body.kik-space-on .application-absence + .application-label {
    --app-colour: var(--app-colour-absence);
}
/* Inline SVG icons painted with ``currentColor`` (e.g. on a help page
   head, or in a portlet header) pick up the app's brand colour from
   here. The canonical ``<img>`` tile icons stay white because <img>
   doesn't propagate ``color``. */
svg.app-icon.app-absence,
span.app-icon.app-absence {
    color: var(--app-colour-absence);
}
.quaive-portlet.app-absence .well-header:before {
    background-image: url(../../app-icons/artefacts/absence.svg);
}
.tab.application-absence .app-name:before,
.application-absence + .application-label .breadcrumbs a:before {
    background-image: url(../../app-icons/artefacts/absence.svg);
}
#application-body-absence.state-on ~ #tabs-bar .tab.application-absence {
    display: grid;
}
#app-space {

    &.state-off,
    &.state-paused,
    &:not(.active-app-absence) {
        #tabs-bar .tab.application-absence .app-name:before {
            background-color: transparent !important;
        }

        /* Per-tab object-name (e.g. workspace title on the workspaces /
           documents tabs) only shows when that tab's app is the active
           one — keeps inactive tabs compact. */
        #tabs-bar .tab.application-absence .object-name {
            display: none;
        }
    }

    &:not(.active-app-absence) #tabs-bar .tab.application-absence .more-menu-toggle,
    &.state-paused #tabs-bar .tab .more-menu-toggle,
    &.state-paused #application-body + .application-label .more-menu-toggle {
        filter: var(--tabs-bar-tab-app-icon-filter-dimmed);
        display: none;
    }

    &.state-paused #application-body + .application-label .breadcrumbs a:before {
        filter: var(--tabs-bar-tab-app-icon-filter-dimmed);
    }

    &.active-app-absence.state-on,
    &.state-on #application-body + .application-label .breadcrumbs a:before {
        .tab.application-absence .app-name:before {
            filter: invert(0%) !important;
            opacity: 1 !important;
        }

        #application-body-absence {
            display: block;
        }
    }
}
#app-space.active-app-absence.state-on #application-body-absence {
    display: block;
}

/* The active tab's icon at full strength. */
.tab.application-absence[data-active] .app-name:before {
    filter: invert(0%) !important;
}
:root {
  --app-colour-activities: #4A6F95;
}

/* State comes from marks in the DOM, never from a body-rooted match: this
   template is stamped out once per app, so one such selector becomes 72.
   See the generator's header note. */
.app-activities,
#tabs-bar .tab.application-activities[data-active],
body.kik-space-on .application-activities + .application-label {
    --app-colour: var(--app-colour-activities);
}
/* Inline SVG icons painted with ``currentColor`` (e.g. on a help page
   head, or in a portlet header) pick up the app's brand colour from
   here. The canonical ``<img>`` tile icons stay white because <img>
   doesn't propagate ``color``. */
svg.app-icon.app-activities,
span.app-icon.app-activities {
    color: var(--app-colour-activities);
}
.quaive-portlet.app-activities .well-header:before {
    background-image: url(../../app-icons/artefacts/activities.svg);
}
.tab.application-activities .app-name:before,
.application-activities + .application-label .breadcrumbs a:before {
    background-image: url(../../app-icons/artefacts/activities.svg);
}
#application-body-activities.state-on ~ #tabs-bar .tab.application-activities {
    display: grid;
}
#app-space {

    &.state-off,
    &.state-paused,
    &:not(.active-app-activities) {
        #tabs-bar .tab.application-activities .app-name:before {
            background-color: transparent !important;
        }

        /* Per-tab object-name (e.g. workspace title on the workspaces /
           documents tabs) only shows when that tab's app is the active
           one — keeps inactive tabs compact. */
        #tabs-bar .tab.application-activities .object-name {
            display: none;
        }
    }

    &:not(.active-app-activities) #tabs-bar .tab.application-activities .more-menu-toggle,
    &.state-paused #tabs-bar .tab .more-menu-toggle,
    &.state-paused #application-body + .application-label .more-menu-toggle {
        filter: var(--tabs-bar-tab-app-icon-filter-dimmed);
        display: none;
    }

    &.state-paused #application-body + .application-label .breadcrumbs a:before {
        filter: var(--tabs-bar-tab-app-icon-filter-dimmed);
    }

    &.active-app-activities.state-on,
    &.state-on #application-body + .application-label .breadcrumbs a:before {
        .tab.application-activities .app-name:before {
            filter: invert(0%) !important;
            opacity: 1 !important;
        }

        #application-body-activities {
            display: block;
        }
    }
}
#app-space.active-app-activities.state-on #application-body-activities {
    display: block;
}

/* The active tab's icon at full strength. */
.tab.application-activities[data-active] .app-name:before {
    filter: invert(0%) !important;
}
:root {
  --app-colour-administrator: dimgray;
}

/* State comes from marks in the DOM, never from a body-rooted match: this
   template is stamped out once per app, so one such selector becomes 72.
   See the generator's header note. */
.app-administrator,
#tabs-bar .tab.application-administrator[data-active],
body.kik-space-on .application-administrator + .application-label {
    --app-colour: var(--app-colour-administrator);
}
/* Inline SVG icons painted with ``currentColor`` (e.g. on a help page
   head, or in a portlet header) pick up the app's brand colour from
   here. The canonical ``<img>`` tile icons stay white because <img>
   doesn't propagate ``color``. */
svg.app-icon.app-administrator,
span.app-icon.app-administrator {
    color: var(--app-colour-administrator);
}
.quaive-portlet.app-administrator .well-header:before {
    background-image: url(../../app-icons/artefacts/administrator.svg);
}
.tab.application-administrator .app-name:before,
.application-administrator + .application-label .breadcrumbs a:before {
    background-image: url(../../app-icons/artefacts/administrator.svg);
}
#application-body-administrator.state-on ~ #tabs-bar .tab.application-administrator {
    display: grid;
}
#app-space {

    &.state-off,
    &.state-paused,
    &:not(.active-app-administrator) {
        #tabs-bar .tab.application-administrator .app-name:before {
            background-color: transparent !important;
        }

        /* Per-tab object-name (e.g. workspace title on the workspaces /
           documents tabs) only shows when that tab's app is the active
           one — keeps inactive tabs compact. */
        #tabs-bar .tab.application-administrator .object-name {
            display: none;
        }
    }

    &:not(.active-app-administrator) #tabs-bar .tab.application-administrator .more-menu-toggle,
    &.state-paused #tabs-bar .tab .more-menu-toggle,
    &.state-paused #application-body + .application-label .more-menu-toggle {
        filter: var(--tabs-bar-tab-app-icon-filter-dimmed);
        display: none;
    }

    &.state-paused #application-body + .application-label .breadcrumbs a:before {
        filter: var(--tabs-bar-tab-app-icon-filter-dimmed);
    }

    &.active-app-administrator.state-on,
    &.state-on #application-body + .application-label .breadcrumbs a:before {
        .tab.application-administrator .app-name:before {
            filter: invert(0%) !important;
            opacity: 1 !important;
        }

        #application-body-administrator {
            display: block;
        }
    }
}
#app-space.active-app-administrator.state-on #application-body-administrator {
    display: block;
}

/* The active tab's icon at full strength. */
.tab.application-administrator[data-active] .app-name:before {
    filter: invert(0%) !important;
}
:root {
  --app-colour-administrator-tool: #3A3A38;
}

/* State comes from marks in the DOM, never from a body-rooted match: this
   template is stamped out once per app, so one such selector becomes 72.
   See the generator's header note. */
.app-administrator-tool,
#tabs-bar .tab.application-administrator-tool[data-active],
body.kik-space-on .application-administrator-tool + .application-label {
    --app-colour: var(--app-colour-administrator-tool);
}
/* Inline SVG icons painted with ``currentColor`` (e.g. on a help page
   head, or in a portlet header) pick up the app's brand colour from
   here. The canonical ``<img>`` tile icons stay white because <img>
   doesn't propagate ``color``. */
svg.app-icon.app-administrator-tool,
span.app-icon.app-administrator-tool {
    color: var(--app-colour-administrator-tool);
}
.quaive-portlet.app-administrator-tool .well-header:before {
    background-image: url(../../app-icons/artefacts/administrator-tool.svg);
}
.tab.application-administrator-tool .app-name:before,
.application-administrator-tool + .application-label .breadcrumbs a:before {
    background-image: url(../../app-icons/artefacts/administrator-tool.svg);
}
#application-body-administrator-tool.state-on ~ #tabs-bar .tab.application-administrator-tool {
    display: grid;
}
#app-space {

    &.state-off,
    &.state-paused,
    &:not(.active-app-administrator-tool) {
        #tabs-bar .tab.application-administrator-tool .app-name:before {
            background-color: transparent !important;
        }

        /* Per-tab object-name (e.g. workspace title on the workspaces /
           documents tabs) only shows when that tab's app is the active
           one — keeps inactive tabs compact. */
        #tabs-bar .tab.application-administrator-tool .object-name {
            display: none;
        }
    }

    &:not(.active-app-administrator-tool) #tabs-bar .tab.application-administrator-tool .more-menu-toggle,
    &.state-paused #tabs-bar .tab .more-menu-toggle,
    &.state-paused #application-body + .application-label .more-menu-toggle {
        filter: var(--tabs-bar-tab-app-icon-filter-dimmed);
        display: none;
    }

    &.state-paused #application-body + .application-label .breadcrumbs a:before {
        filter: var(--tabs-bar-tab-app-icon-filter-dimmed);
    }

    &.active-app-administrator-tool.state-on,
    &.state-on #application-body + .application-label .breadcrumbs a:before {
        .tab.application-administrator-tool .app-name:before {
            filter: invert(0%) !important;
            opacity: 1 !important;
        }

        #application-body-administrator-tool {
            display: block;
        }
    }
}
#app-space.active-app-administrator-tool.state-on #application-body-administrator-tool {
    display: block;
}

/* The active tab's icon at full strength. */
.tab.application-administrator-tool[data-active] .app-name:before {
    filter: invert(0%) !important;
}
:root {
  --app-colour-apps: #F37021;
}

/* State comes from marks in the DOM, never from a body-rooted match: this
   template is stamped out once per app, so one such selector becomes 72.
   See the generator's header note. */
.app-apps,
#tabs-bar .tab.application-apps[data-active],
body.kik-space-on .application-apps + .application-label {
    --app-colour: var(--app-colour-apps);
}
/* Inline SVG icons painted with ``currentColor`` (e.g. on a help page
   head, or in a portlet header) pick up the app's brand colour from
   here. The canonical ``<img>`` tile icons stay white because <img>
   doesn't propagate ``color``. */
svg.app-icon.app-apps,
span.app-icon.app-apps {
    color: var(--app-colour-apps);
}
.quaive-portlet.app-apps .well-header:before {
    background-image: url(../../app-icons/artefacts/apps.svg);
}
.tab.application-apps .app-name:before,
.application-apps + .application-label .breadcrumbs a:before {
    background-image: url(../../app-icons/artefacts/apps.svg);
}
#application-body-apps.state-on ~ #tabs-bar .tab.application-apps {
    display: grid;
}
#app-space {

    &.state-off,
    &.state-paused,
    &:not(.active-app-apps) {
        #tabs-bar .tab.application-apps .app-name:before {
            background-color: transparent !important;
        }

        /* Per-tab object-name (e.g. workspace title on the workspaces /
           documents tabs) only shows when that tab's app is the active
           one — keeps inactive tabs compact. */
        #tabs-bar .tab.application-apps .object-name {
            display: none;
        }
    }

    &:not(.active-app-apps) #tabs-bar .tab.application-apps .more-menu-toggle,
    &.state-paused #tabs-bar .tab .more-menu-toggle,
    &.state-paused #application-body + .application-label .more-menu-toggle {
        filter: var(--tabs-bar-tab-app-icon-filter-dimmed);
        display: none;
    }

    &.state-paused #application-body + .application-label .breadcrumbs a:before {
        filter: var(--tabs-bar-tab-app-icon-filter-dimmed);
    }

    &.active-app-apps.state-on,
    &.state-on #application-body + .application-label .breadcrumbs a:before {
        .tab.application-apps .app-name:before {
            filter: invert(0%) !important;
            opacity: 1 !important;
        }

        #application-body-apps {
            display: block;
        }
    }
}
#app-space.active-app-apps.state-on #application-body-apps {
    display: block;
}

/* The active tab's icon at full strength. */
.tab.application-apps[data-active] .app-name:before {
    filter: invert(0%) !important;
}
:root {
  --app-colour-app-store: #1668b8;
}

/* State comes from marks in the DOM, never from a body-rooted match: this
   template is stamped out once per app, so one such selector becomes 72.
   See the generator's header note. */
.app-app-store,
#tabs-bar .tab.application-app-store[data-active],
body.kik-space-on .application-app-store + .application-label {
    --app-colour: var(--app-colour-app-store);
}
/* Inline SVG icons painted with ``currentColor`` (e.g. on a help page
   head, or in a portlet header) pick up the app's brand colour from
   here. The canonical ``<img>`` tile icons stay white because <img>
   doesn't propagate ``color``. */
svg.app-icon.app-app-store,
span.app-icon.app-app-store {
    color: var(--app-colour-app-store);
}
.quaive-portlet.app-app-store .well-header:before {
    background-image: url(../../app-icons/artefacts/app-store.svg);
}
.tab.application-app-store .app-name:before,
.application-app-store + .application-label .breadcrumbs a:before {
    background-image: url(../../app-icons/artefacts/app-store.svg);
}
#application-body-app-store.state-on ~ #tabs-bar .tab.application-app-store {
    display: grid;
}
#app-space {

    &.state-off,
    &.state-paused,
    &:not(.active-app-app-store) {
        #tabs-bar .tab.application-app-store .app-name:before {
            background-color: transparent !important;
        }

        /* Per-tab object-name (e.g. workspace title on the workspaces /
           documents tabs) only shows when that tab's app is the active
           one — keeps inactive tabs compact. */
        #tabs-bar .tab.application-app-store .object-name {
            display: none;
        }
    }

    &:not(.active-app-app-store) #tabs-bar .tab.application-app-store .more-menu-toggle,
    &.state-paused #tabs-bar .tab .more-menu-toggle,
    &.state-paused #application-body + .application-label .more-menu-toggle {
        filter: var(--tabs-bar-tab-app-icon-filter-dimmed);
        display: none;
    }

    &.state-paused #application-body + .application-label .breadcrumbs a:before {
        filter: var(--tabs-bar-tab-app-icon-filter-dimmed);
    }

    &.active-app-app-store.state-on,
    &.state-on #application-body + .application-label .breadcrumbs a:before {
        .tab.application-app-store .app-name:before {
            filter: invert(0%) !important;
            opacity: 1 !important;
        }

        #application-body-app-store {
            display: block;
        }
    }
}
#app-space.active-app-app-store.state-on #application-body-app-store {
    display: block;
}

/* The active tab's icon at full strength. */
.tab.application-app-store[data-active] .app-name:before {
    filter: invert(0%) !important;
}
:root {
  --app-colour-assessments: #7e726a;
}

/* State comes from marks in the DOM, never from a body-rooted match: this
   template is stamped out once per app, so one such selector becomes 72.
   See the generator's header note. */
.app-assessments,
#tabs-bar .tab.application-assessments[data-active],
body.kik-space-on .application-assessments + .application-label {
    --app-colour: var(--app-colour-assessments);
}
/* Inline SVG icons painted with ``currentColor`` (e.g. on a help page
   head, or in a portlet header) pick up the app's brand colour from
   here. The canonical ``<img>`` tile icons stay white because <img>
   doesn't propagate ``color``. */
svg.app-icon.app-assessments,
span.app-icon.app-assessments {
    color: var(--app-colour-assessments);
}
.quaive-portlet.app-assessments .well-header:before {
    background-image: url(../../app-icons/artefacts/assessments.svg);
}
.tab.application-assessments .app-name:before,
.application-assessments + .application-label .breadcrumbs a:before {
    background-image: url(../../app-icons/artefacts/assessments.svg);
}
#application-body-assessments.state-on ~ #tabs-bar .tab.application-assessments {
    display: grid;
}
#app-space {

    &.state-off,
    &.state-paused,
    &:not(.active-app-assessments) {
        #tabs-bar .tab.application-assessments .app-name:before {
            background-color: transparent !important;
        }

        /* Per-tab object-name (e.g. workspace title on the workspaces /
           documents tabs) only shows when that tab's app is the active
           one — keeps inactive tabs compact. */
        #tabs-bar .tab.application-assessments .object-name {
            display: none;
        }
    }

    &:not(.active-app-assessments) #tabs-bar .tab.application-assessments .more-menu-toggle,
    &.state-paused #tabs-bar .tab .more-menu-toggle,
    &.state-paused #application-body + .application-label .more-menu-toggle {
        filter: var(--tabs-bar-tab-app-icon-filter-dimmed);
        display: none;
    }

    &.state-paused #application-body + .application-label .breadcrumbs a:before {
        filter: var(--tabs-bar-tab-app-icon-filter-dimmed);
    }

    &.active-app-assessments.state-on,
    &.state-on #application-body + .application-label .breadcrumbs a:before {
        .tab.application-assessments .app-name:before {
            filter: invert(0%) !important;
            opacity: 1 !important;
        }

        #application-body-assessments {
            display: block;
        }
    }
}
#app-space.active-app-assessments.state-on #application-body-assessments {
    display: block;
}

/* The active tab's icon at full strength. */
.tab.application-assessments[data-active] .app-name:before {
    filter: invert(0%) !important;
}
:root {
  --app-colour-audit: #3a6878;
}

/* State comes from marks in the DOM, never from a body-rooted match: this
   template is stamped out once per app, so one such selector becomes 72.
   See the generator's header note. */
.app-audit,
#tabs-bar .tab.application-audit[data-active],
body.kik-space-on .application-audit + .application-label {
    --app-colour: var(--app-colour-audit);
}
/* Inline SVG icons painted with ``currentColor`` (e.g. on a help page
   head, or in a portlet header) pick up the app's brand colour from
   here. The canonical ``<img>`` tile icons stay white because <img>
   doesn't propagate ``color``. */
svg.app-icon.app-audit,
span.app-icon.app-audit {
    color: var(--app-colour-audit);
}
.quaive-portlet.app-audit .well-header:before {
    background-image: url(../../app-icons/artefacts/audit.svg);
}
.tab.application-audit .app-name:before,
.application-audit + .application-label .breadcrumbs a:before {
    background-image: url(../../app-icons/artefacts/audit.svg);
}
#application-body-audit.state-on ~ #tabs-bar .tab.application-audit {
    display: grid;
}
#app-space {

    &.state-off,
    &.state-paused,
    &:not(.active-app-audit) {
        #tabs-bar .tab.application-audit .app-name:before {
            background-color: transparent !important;
        }

        /* Per-tab object-name (e.g. workspace title on the workspaces /
           documents tabs) only shows when that tab's app is the active
           one — keeps inactive tabs compact. */
        #tabs-bar .tab.application-audit .object-name {
            display: none;
        }
    }

    &:not(.active-app-audit) #tabs-bar .tab.application-audit .more-menu-toggle,
    &.state-paused #tabs-bar .tab .more-menu-toggle,
    &.state-paused #application-body + .application-label .more-menu-toggle {
        filter: var(--tabs-bar-tab-app-icon-filter-dimmed);
        display: none;
    }

    &.state-paused #application-body + .application-label .breadcrumbs a:before {
        filter: var(--tabs-bar-tab-app-icon-filter-dimmed);
    }

    &.active-app-audit.state-on,
    &.state-on #application-body + .application-label .breadcrumbs a:before {
        .tab.application-audit .app-name:before {
            filter: invert(0%) !important;
            opacity: 1 !important;
        }

        #application-body-audit {
            display: block;
        }
    }
}
#app-space.active-app-audit.state-on #application-body-audit {
    display: block;
}

/* The active tab's icon at full strength. */
.tab.application-audit[data-active] .app-name:before {
    filter: invert(0%) !important;
}
:root {
  --app-colour-bookmarks: #7e726a;
}

/* State comes from marks in the DOM, never from a body-rooted match: this
   template is stamped out once per app, so one such selector becomes 72.
   See the generator's header note. */
.app-bookmarks,
#tabs-bar .tab.application-bookmarks[data-active],
body.kik-space-on .application-bookmarks + .application-label {
    --app-colour: var(--app-colour-bookmarks);
}
/* Inline SVG icons painted with ``currentColor`` (e.g. on a help page
   head, or in a portlet header) pick up the app's brand colour from
   here. The canonical ``<img>`` tile icons stay white because <img>
   doesn't propagate ``color``. */
svg.app-icon.app-bookmarks,
span.app-icon.app-bookmarks {
    color: var(--app-colour-bookmarks);
}
.quaive-portlet.app-bookmarks .well-header:before {
    background-image: url(../../app-icons/artefacts/bookmarks.svg);
}
.tab.application-bookmarks .app-name:before,
.application-bookmarks + .application-label .breadcrumbs a:before {
    background-image: url(../../app-icons/artefacts/bookmarks.svg);
}
#application-body-bookmarks.state-on ~ #tabs-bar .tab.application-bookmarks {
    display: grid;
}
#app-space {

    &.state-off,
    &.state-paused,
    &:not(.active-app-bookmarks) {
        #tabs-bar .tab.application-bookmarks .app-name:before {
            background-color: transparent !important;
        }

        /* Per-tab object-name (e.g. workspace title on the workspaces /
           documents tabs) only shows when that tab's app is the active
           one — keeps inactive tabs compact. */
        #tabs-bar .tab.application-bookmarks .object-name {
            display: none;
        }
    }

    &:not(.active-app-bookmarks) #tabs-bar .tab.application-bookmarks .more-menu-toggle,
    &.state-paused #tabs-bar .tab .more-menu-toggle,
    &.state-paused #application-body + .application-label .more-menu-toggle {
        filter: var(--tabs-bar-tab-app-icon-filter-dimmed);
        display: none;
    }

    &.state-paused #application-body + .application-label .breadcrumbs a:before {
        filter: var(--tabs-bar-tab-app-icon-filter-dimmed);
    }

    &.active-app-bookmarks.state-on,
    &.state-on #application-body + .application-label .breadcrumbs a:before {
        .tab.application-bookmarks .app-name:before {
            filter: invert(0%) !important;
            opacity: 1 !important;
        }

        #application-body-bookmarks {
            display: block;
        }
    }
}
#app-space.active-app-bookmarks.state-on #application-body-bookmarks {
    display: block;
}

/* The active tab's icon at full strength. */
.tab.application-bookmarks[data-active] .app-name:before {
    filter: invert(0%) !important;
}
:root {
  --app-colour-calculate: #107C41;
}

/* State comes from marks in the DOM, never from a body-rooted match: this
   template is stamped out once per app, so one such selector becomes 72.
   See the generator's header note. */
.app-calculate,
#tabs-bar .tab.application-calculate[data-active],
body.kik-space-on .application-calculate + .application-label {
    --app-colour: var(--app-colour-calculate);
}
/* Inline SVG icons painted with ``currentColor`` (e.g. on a help page
   head, or in a portlet header) pick up the app's brand colour from
   here. The canonical ``<img>`` tile icons stay white because <img>
   doesn't propagate ``color``. */
svg.app-icon.app-calculate,
span.app-icon.app-calculate {
    color: var(--app-colour-calculate);
}
.quaive-portlet.app-calculate .well-header:before {
    background-image: url(../../app-icons/artefacts/calculate.svg);
}
.tab.application-calculate .app-name:before,
.application-calculate + .application-label .breadcrumbs a:before {
    background-image: url(../../app-icons/artefacts/calculate.svg);
}
#application-body-calculate.state-on ~ #tabs-bar .tab.application-calculate {
    display: grid;
}
#app-space {

    &.state-off,
    &.state-paused,
    &:not(.active-app-calculate) {
        #tabs-bar .tab.application-calculate .app-name:before {
            background-color: transparent !important;
        }

        /* Per-tab object-name (e.g. workspace title on the workspaces /
           documents tabs) only shows when that tab's app is the active
           one — keeps inactive tabs compact. */
        #tabs-bar .tab.application-calculate .object-name {
            display: none;
        }
    }

    &:not(.active-app-calculate) #tabs-bar .tab.application-calculate .more-menu-toggle,
    &.state-paused #tabs-bar .tab .more-menu-toggle,
    &.state-paused #application-body + .application-label .more-menu-toggle {
        filter: var(--tabs-bar-tab-app-icon-filter-dimmed);
        display: none;
    }

    &.state-paused #application-body + .application-label .breadcrumbs a:before {
        filter: var(--tabs-bar-tab-app-icon-filter-dimmed);
    }

    &.active-app-calculate.state-on,
    &.state-on #application-body + .application-label .breadcrumbs a:before {
        .tab.application-calculate .app-name:before {
            filter: invert(0%) !important;
            opacity: 1 !important;
        }

        #application-body-calculate {
            display: block;
        }
    }
}
#app-space.active-app-calculate.state-on #application-body-calculate {
    display: block;
}

/* The active tab's icon at full strength. */
.tab.application-calculate[data-active] .app-name:before {
    filter: invert(0%) !important;
}
:root {
  --app-colour-calendar: orangered;
}

/* State comes from marks in the DOM, never from a body-rooted match: this
   template is stamped out once per app, so one such selector becomes 72.
   See the generator's header note. */
.app-calendar,
#tabs-bar .tab.application-calendar[data-active],
body.kik-space-on .application-calendar + .application-label {
    --app-colour: var(--app-colour-calendar);
}
/* Inline SVG icons painted with ``currentColor`` (e.g. on a help page
   head, or in a portlet header) pick up the app's brand colour from
   here. The canonical ``<img>`` tile icons stay white because <img>
   doesn't propagate ``color``. */
svg.app-icon.app-calendar,
span.app-icon.app-calendar {
    color: var(--app-colour-calendar);
}
.quaive-portlet.app-calendar .well-header:before {
    background-image: url(../../app-icons/artefacts/calendar.svg);
}
.tab.application-calendar .app-name:before,
.application-calendar + .application-label .breadcrumbs a:before {
    background-image: url(../../app-icons/artefacts/calendar.svg);
}
#application-body-calendar.state-on ~ #tabs-bar .tab.application-calendar {
    display: grid;
}
#app-space {

    &.state-off,
    &.state-paused,
    &:not(.active-app-calendar) {
        #tabs-bar .tab.application-calendar .app-name:before {
            background-color: transparent !important;
        }

        /* Per-tab object-name (e.g. workspace title on the workspaces /
           documents tabs) only shows when that tab's app is the active
           one — keeps inactive tabs compact. */
        #tabs-bar .tab.application-calendar .object-name {
            display: none;
        }
    }

    &:not(.active-app-calendar) #tabs-bar .tab.application-calendar .more-menu-toggle,
    &.state-paused #tabs-bar .tab .more-menu-toggle,
    &.state-paused #application-body + .application-label .more-menu-toggle {
        filter: var(--tabs-bar-tab-app-icon-filter-dimmed);
        display: none;
    }

    &.state-paused #application-body + .application-label .breadcrumbs a:before {
        filter: var(--tabs-bar-tab-app-icon-filter-dimmed);
    }

    &.active-app-calendar.state-on,
    &.state-on #application-body + .application-label .breadcrumbs a:before {
        .tab.application-calendar .app-name:before {
            filter: invert(0%) !important;
            opacity: 1 !important;
        }

        #application-body-calendar {
            display: block;
        }
    }
}
#app-space.active-app-calendar.state-on #application-body-calendar {
    display: block;
}

/* The active tab's icon at full strength. */
.tab.application-calendar[data-active] .app-name:before {
    filter: invert(0%) !important;
}
:root {
  --app-colour-case-manager: #3a6878;
}

/* State comes from marks in the DOM, never from a body-rooted match: this
   template is stamped out once per app, so one such selector becomes 72.
   See the generator's header note. */
.app-case-manager,
#tabs-bar .tab.application-case-manager[data-active],
body.kik-space-on .application-case-manager + .application-label {
    --app-colour: var(--app-colour-case-manager);
}
/* Inline SVG icons painted with ``currentColor`` (e.g. on a help page
   head, or in a portlet header) pick up the app's brand colour from
   here. The canonical ``<img>`` tile icons stay white because <img>
   doesn't propagate ``color``. */
svg.app-icon.app-case-manager,
span.app-icon.app-case-manager {
    color: var(--app-colour-case-manager);
}
.quaive-portlet.app-case-manager .well-header:before {
    background-image: url(../../app-icons/artefacts/case-manager.svg);
}
.tab.application-case-manager .app-name:before,
.application-case-manager + .application-label .breadcrumbs a:before {
    background-image: url(../../app-icons/artefacts/case-manager.svg);
}
#application-body-case-manager.state-on ~ #tabs-bar .tab.application-case-manager {
    display: grid;
}
#app-space {

    &.state-off,
    &.state-paused,
    &:not(.active-app-case-manager) {
        #tabs-bar .tab.application-case-manager .app-name:before {
            background-color: transparent !important;
        }

        /* Per-tab object-name (e.g. workspace title on the workspaces /
           documents tabs) only shows when that tab's app is the active
           one — keeps inactive tabs compact. */
        #tabs-bar .tab.application-case-manager .object-name {
            display: none;
        }
    }

    &:not(.active-app-case-manager) #tabs-bar .tab.application-case-manager .more-menu-toggle,
    &.state-paused #tabs-bar .tab .more-menu-toggle,
    &.state-paused #application-body + .application-label .more-menu-toggle {
        filter: var(--tabs-bar-tab-app-icon-filter-dimmed);
        display: none;
    }

    &.state-paused #application-body + .application-label .breadcrumbs a:before {
        filter: var(--tabs-bar-tab-app-icon-filter-dimmed);
    }

    &.active-app-case-manager.state-on,
    &.state-on #application-body + .application-label .breadcrumbs a:before {
        .tab.application-case-manager .app-name:before {
            filter: invert(0%) !important;
            opacity: 1 !important;
        }

        #application-body-case-manager {
            display: block;
        }
    }
}
#app-space.active-app-case-manager.state-on #application-body-case-manager {
    display: block;
}

/* The active tab's icon at full strength. */
.tab.application-case-manager[data-active] .app-name:before {
    filter: invert(0%) !important;
}
:root {
  --app-colour-chokhmah: #7C5A3E;
}

/* State comes from marks in the DOM, never from a body-rooted match: this
   template is stamped out once per app, so one such selector becomes 72.
   See the generator's header note. */
.app-chokhmah,
#tabs-bar .tab.application-chokhmah[data-active],
body.kik-space-on .application-chokhmah + .application-label {
    --app-colour: var(--app-colour-chokhmah);
}
/* Inline SVG icons painted with ``currentColor`` (e.g. on a help page
   head, or in a portlet header) pick up the app's brand colour from
   here. The canonical ``<img>`` tile icons stay white because <img>
   doesn't propagate ``color``. */
svg.app-icon.app-chokhmah,
span.app-icon.app-chokhmah {
    color: var(--app-colour-chokhmah);
}
.quaive-portlet.app-chokhmah .well-header:before {
    background-image: url(../../app-icons/artefacts/chokhmah.svg);
}
.tab.application-chokhmah .app-name:before,
.application-chokhmah + .application-label .breadcrumbs a:before {
    background-image: url(../../app-icons/artefacts/chokhmah.svg);
}
#application-body-chokhmah.state-on ~ #tabs-bar .tab.application-chokhmah {
    display: grid;
}
#app-space {

    &.state-off,
    &.state-paused,
    &:not(.active-app-chokhmah) {
        #tabs-bar .tab.application-chokhmah .app-name:before {
            background-color: transparent !important;
        }

        /* Per-tab object-name (e.g. workspace title on the workspaces /
           documents tabs) only shows when that tab's app is the active
           one — keeps inactive tabs compact. */
        #tabs-bar .tab.application-chokhmah .object-name {
            display: none;
        }
    }

    &:not(.active-app-chokhmah) #tabs-bar .tab.application-chokhmah .more-menu-toggle,
    &.state-paused #tabs-bar .tab .more-menu-toggle,
    &.state-paused #application-body + .application-label .more-menu-toggle {
        filter: var(--tabs-bar-tab-app-icon-filter-dimmed);
        display: none;
    }

    &.state-paused #application-body + .application-label .breadcrumbs a:before {
        filter: var(--tabs-bar-tab-app-icon-filter-dimmed);
    }

    &.active-app-chokhmah.state-on,
    &.state-on #application-body + .application-label .breadcrumbs a:before {
        .tab.application-chokhmah .app-name:before {
            filter: invert(0%) !important;
            opacity: 1 !important;
        }

        #application-body-chokhmah {
            display: block;
        }
    }
}
#app-space.active-app-chokhmah.state-on #application-body-chokhmah {
    display: block;
}

/* The active tab's icon at full strength. */
.tab.application-chokhmah[data-active] .app-name:before {
    filter: invert(0%) !important;
}
:root {
  --app-colour-classifieds: #8a6e48;
}

/* State comes from marks in the DOM, never from a body-rooted match: this
   template is stamped out once per app, so one such selector becomes 72.
   See the generator's header note. */
.app-classifieds,
#tabs-bar .tab.application-classifieds[data-active],
body.kik-space-on .application-classifieds + .application-label {
    --app-colour: var(--app-colour-classifieds);
}
/* Inline SVG icons painted with ``currentColor`` (e.g. on a help page
   head, or in a portlet header) pick up the app's brand colour from
   here. The canonical ``<img>`` tile icons stay white because <img>
   doesn't propagate ``color``. */
svg.app-icon.app-classifieds,
span.app-icon.app-classifieds {
    color: var(--app-colour-classifieds);
}
.quaive-portlet.app-classifieds .well-header:before {
    background-image: url(../../app-icons/artefacts/classifieds.svg);
}
.tab.application-classifieds .app-name:before,
.application-classifieds + .application-label .breadcrumbs a:before {
    background-image: url(../../app-icons/artefacts/classifieds.svg);
}
#application-body-classifieds.state-on ~ #tabs-bar .tab.application-classifieds {
    display: grid;
}
#app-space {

    &.state-off,
    &.state-paused,
    &:not(.active-app-classifieds) {
        #tabs-bar .tab.application-classifieds .app-name:before {
            background-color: transparent !important;
        }

        /* Per-tab object-name (e.g. workspace title on the workspaces /
           documents tabs) only shows when that tab's app is the active
           one — keeps inactive tabs compact. */
        #tabs-bar .tab.application-classifieds .object-name {
            display: none;
        }
    }

    &:not(.active-app-classifieds) #tabs-bar .tab.application-classifieds .more-menu-toggle,
    &.state-paused #tabs-bar .tab .more-menu-toggle,
    &.state-paused #application-body + .application-label .more-menu-toggle {
        filter: var(--tabs-bar-tab-app-icon-filter-dimmed);
        display: none;
    }

    &.state-paused #application-body + .application-label .breadcrumbs a:before {
        filter: var(--tabs-bar-tab-app-icon-filter-dimmed);
    }

    &.active-app-classifieds.state-on,
    &.state-on #application-body + .application-label .breadcrumbs a:before {
        .tab.application-classifieds .app-name:before {
            filter: invert(0%) !important;
            opacity: 1 !important;
        }

        #application-body-classifieds {
            display: block;
        }
    }
}
#app-space.active-app-classifieds.state-on #application-body-classifieds {
    display: block;
}

/* The active tab's icon at full strength. */
.tab.application-classifieds[data-active] .app-name:before {
    filter: invert(0%) !important;
}
:root {
  --app-colour-cloud-storage: #1a2030;
}

/* State comes from marks in the DOM, never from a body-rooted match: this
   template is stamped out once per app, so one such selector becomes 72.
   See the generator's header note. */
.app-cloud-storage,
#tabs-bar .tab.application-cloud-storage[data-active],
body.kik-space-on .application-cloud-storage + .application-label {
    --app-colour: var(--app-colour-cloud-storage);
}
/* Inline SVG icons painted with ``currentColor`` (e.g. on a help page
   head, or in a portlet header) pick up the app's brand colour from
   here. The canonical ``<img>`` tile icons stay white because <img>
   doesn't propagate ``color``. */
svg.app-icon.app-cloud-storage,
span.app-icon.app-cloud-storage {
    color: var(--app-colour-cloud-storage);
}
.quaive-portlet.app-cloud-storage .well-header:before {
    background-image: url(../../app-icons/artefacts/cloud-storage.svg);
}
.tab.application-cloud-storage .app-name:before,
.application-cloud-storage + .application-label .breadcrumbs a:before {
    background-image: url(../../app-icons/artefacts/cloud-storage.svg);
}
#application-body-cloud-storage.state-on ~ #tabs-bar .tab.application-cloud-storage {
    display: grid;
}
#app-space {

    &.state-off,
    &.state-paused,
    &:not(.active-app-cloud-storage) {
        #tabs-bar .tab.application-cloud-storage .app-name:before {
            background-color: transparent !important;
        }

        /* Per-tab object-name (e.g. workspace title on the workspaces /
           documents tabs) only shows when that tab's app is the active
           one — keeps inactive tabs compact. */
        #tabs-bar .tab.application-cloud-storage .object-name {
            display: none;
        }
    }

    &:not(.active-app-cloud-storage) #tabs-bar .tab.application-cloud-storage .more-menu-toggle,
    &.state-paused #tabs-bar .tab .more-menu-toggle,
    &.state-paused #application-body + .application-label .more-menu-toggle {
        filter: var(--tabs-bar-tab-app-icon-filter-dimmed);
        display: none;
    }

    &.state-paused #application-body + .application-label .breadcrumbs a:before {
        filter: var(--tabs-bar-tab-app-icon-filter-dimmed);
    }

    &.active-app-cloud-storage.state-on,
    &.state-on #application-body + .application-label .breadcrumbs a:before {
        .tab.application-cloud-storage .app-name:before {
            filter: invert(0%) !important;
            opacity: 1 !important;
        }

        #application-body-cloud-storage {
            display: block;
        }
    }
}
#app-space.active-app-cloud-storage.state-on #application-body-cloud-storage {
    display: block;
}

/* The active tab's icon at full strength. */
.tab.application-cloud-storage[data-active] .app-name:before {
    filter: invert(0%) !important;
}
:root {
  --app-colour-configuration: #2D6A8A;
}

/* State comes from marks in the DOM, never from a body-rooted match: this
   template is stamped out once per app, so one such selector becomes 72.
   See the generator's header note. */
.app-configuration,
#tabs-bar .tab.application-configuration[data-active],
body.kik-space-on .application-configuration + .application-label {
    --app-colour: var(--app-colour-configuration);
}
/* Inline SVG icons painted with ``currentColor`` (e.g. on a help page
   head, or in a portlet header) pick up the app's brand colour from
   here. The canonical ``<img>`` tile icons stay white because <img>
   doesn't propagate ``color``. */
svg.app-icon.app-configuration,
span.app-icon.app-configuration {
    color: var(--app-colour-configuration);
}
.quaive-portlet.app-configuration .well-header:before {
    background-image: url(../../app-icons/artefacts/configuration.svg);
}
.tab.application-configuration .app-name:before,
.application-configuration + .application-label .breadcrumbs a:before {
    background-image: url(../../app-icons/artefacts/configuration.svg);
}
#application-body-configuration.state-on ~ #tabs-bar .tab.application-configuration {
    display: grid;
}
#app-space {

    &.state-off,
    &.state-paused,
    &:not(.active-app-configuration) {
        #tabs-bar .tab.application-configuration .app-name:before {
            background-color: transparent !important;
        }

        /* Per-tab object-name (e.g. workspace title on the workspaces /
           documents tabs) only shows when that tab's app is the active
           one — keeps inactive tabs compact. */
        #tabs-bar .tab.application-configuration .object-name {
            display: none;
        }
    }

    &:not(.active-app-configuration) #tabs-bar .tab.application-configuration .more-menu-toggle,
    &.state-paused #tabs-bar .tab .more-menu-toggle,
    &.state-paused #application-body + .application-label .more-menu-toggle {
        filter: var(--tabs-bar-tab-app-icon-filter-dimmed);
        display: none;
    }

    &.state-paused #application-body + .application-label .breadcrumbs a:before {
        filter: var(--tabs-bar-tab-app-icon-filter-dimmed);
    }

    &.active-app-configuration.state-on,
    &.state-on #application-body + .application-label .breadcrumbs a:before {
        .tab.application-configuration .app-name:before {
            filter: invert(0%) !important;
            opacity: 1 !important;
        }

        #application-body-configuration {
            display: block;
        }
    }
}
#app-space.active-app-configuration.state-on #application-body-configuration {
    display: block;
}

/* The active tab's icon at full strength. */
.tab.application-configuration[data-active] .app-name:before {
    filter: invert(0%) !important;
}
:root {
  --app-colour-contacts: rgb(143, 104, 6);
}

/* State comes from marks in the DOM, never from a body-rooted match: this
   template is stamped out once per app, so one such selector becomes 72.
   See the generator's header note. */
.app-contacts,
#tabs-bar .tab.application-contacts[data-active],
body.kik-space-on .application-contacts + .application-label {
    --app-colour: var(--app-colour-contacts);
}
/* Inline SVG icons painted with ``currentColor`` (e.g. on a help page
   head, or in a portlet header) pick up the app's brand colour from
   here. The canonical ``<img>`` tile icons stay white because <img>
   doesn't propagate ``color``. */
svg.app-icon.app-contacts,
span.app-icon.app-contacts {
    color: var(--app-colour-contacts);
}
.quaive-portlet.app-contacts .well-header:before {
    background-image: url(../../app-icons/artefacts/contacts.svg);
}
.tab.application-contacts .app-name:before,
.application-contacts + .application-label .breadcrumbs a:before {
    background-image: url(../../app-icons/artefacts/contacts.svg);
}
#application-body-contacts.state-on ~ #tabs-bar .tab.application-contacts {
    display: grid;
}
#app-space {

    &.state-off,
    &.state-paused,
    &:not(.active-app-contacts) {
        #tabs-bar .tab.application-contacts .app-name:before {
            background-color: transparent !important;
        }

        /* Per-tab object-name (e.g. workspace title on the workspaces /
           documents tabs) only shows when that tab's app is the active
           one — keeps inactive tabs compact. */
        #tabs-bar .tab.application-contacts .object-name {
            display: none;
        }
    }

    &:not(.active-app-contacts) #tabs-bar .tab.application-contacts .more-menu-toggle,
    &.state-paused #tabs-bar .tab .more-menu-toggle,
    &.state-paused #application-body + .application-label .more-menu-toggle {
        filter: var(--tabs-bar-tab-app-icon-filter-dimmed);
        display: none;
    }

    &.state-paused #application-body + .application-label .breadcrumbs a:before {
        filter: var(--tabs-bar-tab-app-icon-filter-dimmed);
    }

    &.active-app-contacts.state-on,
    &.state-on #application-body + .application-label .breadcrumbs a:before {
        .tab.application-contacts .app-name:before {
            filter: invert(0%) !important;
            opacity: 1 !important;
        }

        #application-body-contacts {
            display: block;
        }
    }
}
#app-space.active-app-contacts.state-on #application-body-contacts {
    display: block;
}

/* The active tab's icon at full strength. */
.tab.application-contacts[data-active] .app-name:before {
    filter: invert(0%) !important;
}
:root {
  --app-colour-contracts: #208840;
}

/* State comes from marks in the DOM, never from a body-rooted match: this
   template is stamped out once per app, so one such selector becomes 72.
   See the generator's header note. */
.app-contracts,
#tabs-bar .tab.application-contracts[data-active],
body.kik-space-on .application-contracts + .application-label {
    --app-colour: var(--app-colour-contracts);
}
/* Inline SVG icons painted with ``currentColor`` (e.g. on a help page
   head, or in a portlet header) pick up the app's brand colour from
   here. The canonical ``<img>`` tile icons stay white because <img>
   doesn't propagate ``color``. */
svg.app-icon.app-contracts,
span.app-icon.app-contracts {
    color: var(--app-colour-contracts);
}
.quaive-portlet.app-contracts .well-header:before {
    background-image: url(../../app-icons/artefacts/contracts.svg);
}
.tab.application-contracts .app-name:before,
.application-contracts + .application-label .breadcrumbs a:before {
    background-image: url(../../app-icons/artefacts/contracts.svg);
}
#application-body-contracts.state-on ~ #tabs-bar .tab.application-contracts {
    display: grid;
}
#app-space {

    &.state-off,
    &.state-paused,
    &:not(.active-app-contracts) {
        #tabs-bar .tab.application-contracts .app-name:before {
            background-color: transparent !important;
        }

        /* Per-tab object-name (e.g. workspace title on the workspaces /
           documents tabs) only shows when that tab's app is the active
           one — keeps inactive tabs compact. */
        #tabs-bar .tab.application-contracts .object-name {
            display: none;
        }
    }

    &:not(.active-app-contracts) #tabs-bar .tab.application-contracts .more-menu-toggle,
    &.state-paused #tabs-bar .tab .more-menu-toggle,
    &.state-paused #application-body + .application-label .more-menu-toggle {
        filter: var(--tabs-bar-tab-app-icon-filter-dimmed);
        display: none;
    }

    &.state-paused #application-body + .application-label .breadcrumbs a:before {
        filter: var(--tabs-bar-tab-app-icon-filter-dimmed);
    }

    &.active-app-contracts.state-on,
    &.state-on #application-body + .application-label .breadcrumbs a:before {
        .tab.application-contracts .app-name:before {
            filter: invert(0%) !important;
            opacity: 1 !important;
        }

        #application-body-contracts {
            display: block;
        }
    }
}
#app-space.active-app-contracts.state-on #application-body-contracts {
    display: block;
}

/* The active tab's icon at full strength. */
.tab.application-contracts[data-active] .app-name:before {
    filter: invert(0%) !important;
}
:root {
  --app-colour-dashboard: #6B6560;
}

/* State comes from marks in the DOM, never from a body-rooted match: this
   template is stamped out once per app, so one such selector becomes 72.
   See the generator's header note. */
.app-dashboard,
#tabs-bar .tab.application-dashboard[data-active],
body.kik-space-on .application-dashboard + .application-label {
    --app-colour: var(--app-colour-dashboard);
}
/* Inline SVG icons painted with ``currentColor`` (e.g. on a help page
   head, or in a portlet header) pick up the app's brand colour from
   here. The canonical ``<img>`` tile icons stay white because <img>
   doesn't propagate ``color``. */
svg.app-icon.app-dashboard,
span.app-icon.app-dashboard {
    color: var(--app-colour-dashboard);
}
.quaive-portlet.app-dashboard .well-header:before {
    background-image: url(../../app-icons/artefacts/dashboard.svg);
}
.tab.application-dashboard .app-name:before,
.application-dashboard + .application-label .breadcrumbs a:before {
    background-image: url(../../app-icons/artefacts/dashboard.svg);
}
#application-body-dashboard.state-on ~ #tabs-bar .tab.application-dashboard {
    display: grid;
}
#app-space {

    &.state-off,
    &.state-paused,
    &:not(.active-app-dashboard) {
        #tabs-bar .tab.application-dashboard .app-name:before {
            background-color: transparent !important;
        }

        /* Per-tab object-name (e.g. workspace title on the workspaces /
           documents tabs) only shows when that tab's app is the active
           one — keeps inactive tabs compact. */
        #tabs-bar .tab.application-dashboard .object-name {
            display: none;
        }
    }

    &:not(.active-app-dashboard) #tabs-bar .tab.application-dashboard .more-menu-toggle,
    &.state-paused #tabs-bar .tab .more-menu-toggle,
    &.state-paused #application-body + .application-label .more-menu-toggle {
        filter: var(--tabs-bar-tab-app-icon-filter-dimmed);
        display: none;
    }

    &.state-paused #application-body + .application-label .breadcrumbs a:before {
        filter: var(--tabs-bar-tab-app-icon-filter-dimmed);
    }

    &.active-app-dashboard.state-on,
    &.state-on #application-body + .application-label .breadcrumbs a:before {
        .tab.application-dashboard .app-name:before {
            filter: invert(0%) !important;
            opacity: 1 !important;
        }

        #application-body-dashboard {
            display: block;
        }
    }
}
#app-space.active-app-dashboard.state-on #application-body-dashboard {
    display: block;
}

/* The active tab's icon at full strength. */
.tab.application-dashboard[data-active] .app-name:before {
    filter: invert(0%) !important;
}
:root {
  --app-colour-demo: #001d71;
}

/* State comes from marks in the DOM, never from a body-rooted match: this
   template is stamped out once per app, so one such selector becomes 72.
   See the generator's header note. */
.app-demo,
#tabs-bar .tab.application-demo[data-active],
body.kik-space-on .application-demo + .application-label {
    --app-colour: var(--app-colour-demo);
}
/* Inline SVG icons painted with ``currentColor`` (e.g. on a help page
   head, or in a portlet header) pick up the app's brand colour from
   here. The canonical ``<img>`` tile icons stay white because <img>
   doesn't propagate ``color``. */
svg.app-icon.app-demo,
span.app-icon.app-demo {
    color: var(--app-colour-demo);
}
.quaive-portlet.app-demo .well-header:before {
    background-image: url(../../app-icons/artefacts/demo.svg);
}
.tab.application-demo .app-name:before,
.application-demo + .application-label .breadcrumbs a:before {
    background-image: url(../../app-icons/artefacts/demo.svg);
}
#application-body-demo.state-on ~ #tabs-bar .tab.application-demo {
    display: grid;
}
#app-space {

    &.state-off,
    &.state-paused,
    &:not(.active-app-demo) {
        #tabs-bar .tab.application-demo .app-name:before {
            background-color: transparent !important;
        }

        /* Per-tab object-name (e.g. workspace title on the workspaces /
           documents tabs) only shows when that tab's app is the active
           one — keeps inactive tabs compact. */
        #tabs-bar .tab.application-demo .object-name {
            display: none;
        }
    }

    &:not(.active-app-demo) #tabs-bar .tab.application-demo .more-menu-toggle,
    &.state-paused #tabs-bar .tab .more-menu-toggle,
    &.state-paused #application-body + .application-label .more-menu-toggle {
        filter: var(--tabs-bar-tab-app-icon-filter-dimmed);
        display: none;
    }

    &.state-paused #application-body + .application-label .breadcrumbs a:before {
        filter: var(--tabs-bar-tab-app-icon-filter-dimmed);
    }

    &.active-app-demo.state-on,
    &.state-on #application-body + .application-label .breadcrumbs a:before {
        .tab.application-demo .app-name:before {
            filter: invert(0%) !important;
            opacity: 1 !important;
        }

        #application-body-demo {
            display: block;
        }
    }
}
#app-space.active-app-demo.state-on #application-body-demo {
    display: block;
}

/* The active tab's icon at full strength. */
.tab.application-demo[data-active] .app-name:before {
    filter: invert(0%) !important;
}
:root {
  --app-colour-diary: #8B5E3C;
}

/* State comes from marks in the DOM, never from a body-rooted match: this
   template is stamped out once per app, so one such selector becomes 72.
   See the generator's header note. */
.app-diary,
#tabs-bar .tab.application-diary[data-active],
body.kik-space-on .application-diary + .application-label {
    --app-colour: var(--app-colour-diary);
}
/* Inline SVG icons painted with ``currentColor`` (e.g. on a help page
   head, or in a portlet header) pick up the app's brand colour from
   here. The canonical ``<img>`` tile icons stay white because <img>
   doesn't propagate ``color``. */
svg.app-icon.app-diary,
span.app-icon.app-diary {
    color: var(--app-colour-diary);
}
.quaive-portlet.app-diary .well-header:before {
    background-image: url(../../app-icons/artefacts/diary.svg);
}
.tab.application-diary .app-name:before,
.application-diary + .application-label .breadcrumbs a:before {
    background-image: url(../../app-icons/artefacts/diary.svg);
}
#application-body-diary.state-on ~ #tabs-bar .tab.application-diary {
    display: grid;
}
#app-space {

    &.state-off,
    &.state-paused,
    &:not(.active-app-diary) {
        #tabs-bar .tab.application-diary .app-name:before {
            background-color: transparent !important;
        }

        /* Per-tab object-name (e.g. workspace title on the workspaces /
           documents tabs) only shows when that tab's app is the active
           one — keeps inactive tabs compact. */
        #tabs-bar .tab.application-diary .object-name {
            display: none;
        }
    }

    &:not(.active-app-diary) #tabs-bar .tab.application-diary .more-menu-toggle,
    &.state-paused #tabs-bar .tab .more-menu-toggle,
    &.state-paused #application-body + .application-label .more-menu-toggle {
        filter: var(--tabs-bar-tab-app-icon-filter-dimmed);
        display: none;
    }

    &.state-paused #application-body + .application-label .breadcrumbs a:before {
        filter: var(--tabs-bar-tab-app-icon-filter-dimmed);
    }

    &.active-app-diary.state-on,
    &.state-on #application-body + .application-label .breadcrumbs a:before {
        .tab.application-diary .app-name:before {
            filter: invert(0%) !important;
            opacity: 1 !important;
        }

        #application-body-diary {
            display: block;
        }
    }
}
#app-space.active-app-diary.state-on #application-body-diary {
    display: block;
}

/* The active tab's icon at full strength. */
.tab.application-diary[data-active] .app-name:before {
    filter: invert(0%) !important;
}
:root {
  --app-colour-document-browser: #c73d78;
}

/* State comes from marks in the DOM, never from a body-rooted match: this
   template is stamped out once per app, so one such selector becomes 72.
   See the generator's header note. */
.app-document-browser,
#tabs-bar .tab.application-document-browser[data-active],
body.kik-space-on .application-document-browser + .application-label {
    --app-colour: var(--app-colour-document-browser);
}
/* Inline SVG icons painted with ``currentColor`` (e.g. on a help page
   head, or in a portlet header) pick up the app's brand colour from
   here. The canonical ``<img>`` tile icons stay white because <img>
   doesn't propagate ``color``. */
svg.app-icon.app-document-browser,
span.app-icon.app-document-browser {
    color: var(--app-colour-document-browser);
}
.quaive-portlet.app-document-browser .well-header:before {
    background-image: url(../../app-icons/artefacts/document-browser.svg);
}
.tab.application-document-browser .app-name:before,
.application-document-browser + .application-label .breadcrumbs a:before {
    background-image: url(../../app-icons/artefacts/document-browser.svg);
}
#application-body-document-browser.state-on ~ #tabs-bar .tab.application-document-browser {
    display: grid;
}
#app-space {

    &.state-off,
    &.state-paused,
    &:not(.active-app-document-browser) {
        #tabs-bar .tab.application-document-browser .app-name:before {
            background-color: transparent !important;
        }

        /* Per-tab object-name (e.g. workspace title on the workspaces /
           documents tabs) only shows when that tab's app is the active
           one — keeps inactive tabs compact. */
        #tabs-bar .tab.application-document-browser .object-name {
            display: none;
        }
    }

    &:not(.active-app-document-browser) #tabs-bar .tab.application-document-browser .more-menu-toggle,
    &.state-paused #tabs-bar .tab .more-menu-toggle,
    &.state-paused #application-body + .application-label .more-menu-toggle {
        filter: var(--tabs-bar-tab-app-icon-filter-dimmed);
        display: none;
    }

    &.state-paused #application-body + .application-label .breadcrumbs a:before {
        filter: var(--tabs-bar-tab-app-icon-filter-dimmed);
    }

    &.active-app-document-browser.state-on,
    &.state-on #application-body + .application-label .breadcrumbs a:before {
        .tab.application-document-browser .app-name:before {
            filter: invert(0%) !important;
            opacity: 1 !important;
        }

        #application-body-document-browser {
            display: block;
        }
    }
}
#app-space.active-app-document-browser.state-on #application-body-document-browser {
    display: block;
}

/* The active tab's icon at full strength. */
.tab.application-document-browser[data-active] .app-name:before {
    filter: invert(0%) !important;
}
:root {
  --app-colour-documents: #0278d4;
}

/* State comes from marks in the DOM, never from a body-rooted match: this
   template is stamped out once per app, so one such selector becomes 72.
   See the generator's header note. */
.app-documents,
#tabs-bar .tab.application-documents[data-active],
body.kik-space-on .application-documents + .application-label {
    --app-colour: var(--app-colour-documents);
}
/* Inline SVG icons painted with ``currentColor`` (e.g. on a help page
   head, or in a portlet header) pick up the app's brand colour from
   here. The canonical ``<img>`` tile icons stay white because <img>
   doesn't propagate ``color``. */
svg.app-icon.app-documents,
span.app-icon.app-documents {
    color: var(--app-colour-documents);
}
.quaive-portlet.app-documents .well-header:before {
    background-image: url(../../app-icons/artefacts/documents.svg);
}
.tab.application-documents .app-name:before,
.application-documents + .application-label .breadcrumbs a:before {
    background-image: url(../../app-icons/artefacts/documents.svg);
}
#application-body-documents.state-on ~ #tabs-bar .tab.application-documents {
    display: grid;
}
#app-space {

    &.state-off,
    &.state-paused,
    &:not(.active-app-documents) {
        #tabs-bar .tab.application-documents .app-name:before {
            background-color: transparent !important;
        }

        /* Per-tab object-name (e.g. workspace title on the workspaces /
           documents tabs) only shows when that tab's app is the active
           one — keeps inactive tabs compact. */
        #tabs-bar .tab.application-documents .object-name {
            display: none;
        }
    }

    &:not(.active-app-documents) #tabs-bar .tab.application-documents .more-menu-toggle,
    &.state-paused #tabs-bar .tab .more-menu-toggle,
    &.state-paused #application-body + .application-label .more-menu-toggle {
        filter: var(--tabs-bar-tab-app-icon-filter-dimmed);
        display: none;
    }

    &.state-paused #application-body + .application-label .breadcrumbs a:before {
        filter: var(--tabs-bar-tab-app-icon-filter-dimmed);
    }

    &.active-app-documents.state-on,
    &.state-on #application-body + .application-label .breadcrumbs a:before {
        .tab.application-documents .app-name:before {
            filter: invert(0%) !important;
            opacity: 1 !important;
        }

        #application-body-documents {
            display: block;
        }
    }
}
#app-space.active-app-documents.state-on #application-body-documents {
    display: block;
}

/* The active tab's icon at full strength. */
.tab.application-documents[data-active] .app-name:before {
    filter: invert(0%) !important;
}
:root {
  --app-colour-draw: #005597;
}

/* State comes from marks in the DOM, never from a body-rooted match: this
   template is stamped out once per app, so one such selector becomes 72.
   See the generator's header note. */
.app-draw,
#tabs-bar .tab.application-draw[data-active],
body.kik-space-on .application-draw + .application-label {
    --app-colour: var(--app-colour-draw);
}
/* Inline SVG icons painted with ``currentColor`` (e.g. on a help page
   head, or in a portlet header) pick up the app's brand colour from
   here. The canonical ``<img>`` tile icons stay white because <img>
   doesn't propagate ``color``. */
svg.app-icon.app-draw,
span.app-icon.app-draw {
    color: var(--app-colour-draw);
}
.quaive-portlet.app-draw .well-header:before {
    background-image: url(../../app-icons/artefacts/draw.svg);
}
.tab.application-draw .app-name:before,
.application-draw + .application-label .breadcrumbs a:before {
    background-image: url(../../app-icons/artefacts/draw.svg);
}
#application-body-draw.state-on ~ #tabs-bar .tab.application-draw {
    display: grid;
}
#app-space {

    &.state-off,
    &.state-paused,
    &:not(.active-app-draw) {
        #tabs-bar .tab.application-draw .app-name:before {
            background-color: transparent !important;
        }

        /* Per-tab object-name (e.g. workspace title on the workspaces /
           documents tabs) only shows when that tab's app is the active
           one — keeps inactive tabs compact. */
        #tabs-bar .tab.application-draw .object-name {
            display: none;
        }
    }

    &:not(.active-app-draw) #tabs-bar .tab.application-draw .more-menu-toggle,
    &.state-paused #tabs-bar .tab .more-menu-toggle,
    &.state-paused #application-body + .application-label .more-menu-toggle {
        filter: var(--tabs-bar-tab-app-icon-filter-dimmed);
        display: none;
    }

    &.state-paused #application-body + .application-label .breadcrumbs a:before {
        filter: var(--tabs-bar-tab-app-icon-filter-dimmed);
    }

    &.active-app-draw.state-on,
    &.state-on #application-body + .application-label .breadcrumbs a:before {
        .tab.application-draw .app-name:before {
            filter: invert(0%) !important;
            opacity: 1 !important;
        }

        #application-body-draw {
            display: block;
        }
    }
}
#app-space.active-app-draw.state-on #application-body-draw {
    display: block;
}

/* The active tab's icon at full strength. */
.tab.application-draw[data-active] .app-name:before {
    filter: invert(0%) !important;
}
:root {
  --app-colour-drive: #0061FF;
}

/* State comes from marks in the DOM, never from a body-rooted match: this
   template is stamped out once per app, so one such selector becomes 72.
   See the generator's header note. */
.app-drive,
#tabs-bar .tab.application-drive[data-active],
body.kik-space-on .application-drive + .application-label {
    --app-colour: var(--app-colour-drive);
}
/* Inline SVG icons painted with ``currentColor`` (e.g. on a help page
   head, or in a portlet header) pick up the app's brand colour from
   here. The canonical ``<img>`` tile icons stay white because <img>
   doesn't propagate ``color``. */
svg.app-icon.app-drive,
span.app-icon.app-drive {
    color: var(--app-colour-drive);
}
.quaive-portlet.app-drive .well-header:before {
    background-image: url(../../app-icons/artefacts/drive.svg);
}
.tab.application-drive .app-name:before,
.application-drive + .application-label .breadcrumbs a:before {
    background-image: url(../../app-icons/artefacts/drive.svg);
}
#application-body-drive.state-on ~ #tabs-bar .tab.application-drive {
    display: grid;
}
#app-space {

    &.state-off,
    &.state-paused,
    &:not(.active-app-drive) {
        #tabs-bar .tab.application-drive .app-name:before {
            background-color: transparent !important;
        }

        /* Per-tab object-name (e.g. workspace title on the workspaces /
           documents tabs) only shows when that tab's app is the active
           one — keeps inactive tabs compact. */
        #tabs-bar .tab.application-drive .object-name {
            display: none;
        }
    }

    &:not(.active-app-drive) #tabs-bar .tab.application-drive .more-menu-toggle,
    &.state-paused #tabs-bar .tab .more-menu-toggle,
    &.state-paused #application-body + .application-label .more-menu-toggle {
        filter: var(--tabs-bar-tab-app-icon-filter-dimmed);
        display: none;
    }

    &.state-paused #application-body + .application-label .breadcrumbs a:before {
        filter: var(--tabs-bar-tab-app-icon-filter-dimmed);
    }

    &.active-app-drive.state-on,
    &.state-on #application-body + .application-label .breadcrumbs a:before {
        .tab.application-drive .app-name:before {
            filter: invert(0%) !important;
            opacity: 1 !important;
        }

        #application-body-drive {
            display: block;
        }
    }
}
#app-space.active-app-drive.state-on #application-body-drive {
    display: block;
}

/* The active tab's icon at full strength. */
.tab.application-drive[data-active] .app-name:before {
    filter: invert(0%) !important;
}
:root {
  --app-colour-events: orangered;
}

/* State comes from marks in the DOM, never from a body-rooted match: this
   template is stamped out once per app, so one such selector becomes 72.
   See the generator's header note. */
.app-events,
#tabs-bar .tab.application-events[data-active],
body.kik-space-on .application-events + .application-label {
    --app-colour: var(--app-colour-events);
}
/* Inline SVG icons painted with ``currentColor`` (e.g. on a help page
   head, or in a portlet header) pick up the app's brand colour from
   here. The canonical ``<img>`` tile icons stay white because <img>
   doesn't propagate ``color``. */
svg.app-icon.app-events,
span.app-icon.app-events {
    color: var(--app-colour-events);
}
.quaive-portlet.app-events .well-header:before {
    background-image: url(../../app-icons/artefacts/events.svg);
}
.tab.application-events .app-name:before,
.application-events + .application-label .breadcrumbs a:before {
    background-image: url(../../app-icons/artefacts/events.svg);
}
#application-body-events.state-on ~ #tabs-bar .tab.application-events {
    display: grid;
}
#app-space {

    &.state-off,
    &.state-paused,
    &:not(.active-app-events) {
        #tabs-bar .tab.application-events .app-name:before {
            background-color: transparent !important;
        }

        /* Per-tab object-name (e.g. workspace title on the workspaces /
           documents tabs) only shows when that tab's app is the active
           one — keeps inactive tabs compact. */
        #tabs-bar .tab.application-events .object-name {
            display: none;
        }
    }

    &:not(.active-app-events) #tabs-bar .tab.application-events .more-menu-toggle,
    &.state-paused #tabs-bar .tab .more-menu-toggle,
    &.state-paused #application-body + .application-label .more-menu-toggle {
        filter: var(--tabs-bar-tab-app-icon-filter-dimmed);
        display: none;
    }

    &.state-paused #application-body + .application-label .breadcrumbs a:before {
        filter: var(--tabs-bar-tab-app-icon-filter-dimmed);
    }

    &.active-app-events.state-on,
    &.state-on #application-body + .application-label .breadcrumbs a:before {
        .tab.application-events .app-name:before {
            filter: invert(0%) !important;
            opacity: 1 !important;
        }

        #application-body-events {
            display: block;
        }
    }
}
#app-space.active-app-events.state-on #application-body-events {
    display: block;
}

/* The active tab's icon at full strength. */
.tab.application-events[data-active] .app-name:before {
    filter: invert(0%) !important;
}
:root {
  --app-colour-family-tree: #6E1F22;
}

/* State comes from marks in the DOM, never from a body-rooted match: this
   template is stamped out once per app, so one such selector becomes 72.
   See the generator's header note. */
.app-family-tree,
#tabs-bar .tab.application-family-tree[data-active],
body.kik-space-on .application-family-tree + .application-label {
    --app-colour: var(--app-colour-family-tree);
}
/* Inline SVG icons painted with ``currentColor`` (e.g. on a help page
   head, or in a portlet header) pick up the app's brand colour from
   here. The canonical ``<img>`` tile icons stay white because <img>
   doesn't propagate ``color``. */
svg.app-icon.app-family-tree,
span.app-icon.app-family-tree {
    color: var(--app-colour-family-tree);
}
.quaive-portlet.app-family-tree .well-header:before {
    background-image: url(../../app-icons/artefacts/family-tree.svg);
}
.tab.application-family-tree .app-name:before,
.application-family-tree + .application-label .breadcrumbs a:before {
    background-image: url(../../app-icons/artefacts/family-tree.svg);
}
#application-body-family-tree.state-on ~ #tabs-bar .tab.application-family-tree {
    display: grid;
}
#app-space {

    &.state-off,
    &.state-paused,
    &:not(.active-app-family-tree) {
        #tabs-bar .tab.application-family-tree .app-name:before {
            background-color: transparent !important;
        }

        /* Per-tab object-name (e.g. workspace title on the workspaces /
           documents tabs) only shows when that tab's app is the active
           one — keeps inactive tabs compact. */
        #tabs-bar .tab.application-family-tree .object-name {
            display: none;
        }
    }

    &:not(.active-app-family-tree) #tabs-bar .tab.application-family-tree .more-menu-toggle,
    &.state-paused #tabs-bar .tab .more-menu-toggle,
    &.state-paused #application-body + .application-label .more-menu-toggle {
        filter: var(--tabs-bar-tab-app-icon-filter-dimmed);
        display: none;
    }

    &.state-paused #application-body + .application-label .breadcrumbs a:before {
        filter: var(--tabs-bar-tab-app-icon-filter-dimmed);
    }

    &.active-app-family-tree.state-on,
    &.state-on #application-body + .application-label .breadcrumbs a:before {
        .tab.application-family-tree .app-name:before {
            filter: invert(0%) !important;
            opacity: 1 !important;
        }

        #application-body-family-tree {
            display: block;
        }
    }
}
#app-space.active-app-family-tree.state-on #application-body-family-tree {
    display: block;
}

/* The active tab's icon at full strength. */
.tab.application-family-tree[data-active] .app-name:before {
    filter: invert(0%) !important;
}
:root {
  --app-colour-favourites: #e0a21a;
}

/* State comes from marks in the DOM, never from a body-rooted match: this
   template is stamped out once per app, so one such selector becomes 72.
   See the generator's header note. */
.app-favourites,
#tabs-bar .tab.application-favourites[data-active],
body.kik-space-on .application-favourites + .application-label {
    --app-colour: var(--app-colour-favourites);
}
/* Inline SVG icons painted with ``currentColor`` (e.g. on a help page
   head, or in a portlet header) pick up the app's brand colour from
   here. The canonical ``<img>`` tile icons stay white because <img>
   doesn't propagate ``color``. */
svg.app-icon.app-favourites,
span.app-icon.app-favourites {
    color: var(--app-colour-favourites);
}
.quaive-portlet.app-favourites .well-header:before {
    background-image: url(../../app-icons/artefacts/favourites.svg);
}
.tab.application-favourites .app-name:before,
.application-favourites + .application-label .breadcrumbs a:before {
    background-image: url(../../app-icons/artefacts/favourites.svg);
}
#application-body-favourites.state-on ~ #tabs-bar .tab.application-favourites {
    display: grid;
}
#app-space {

    &.state-off,
    &.state-paused,
    &:not(.active-app-favourites) {
        #tabs-bar .tab.application-favourites .app-name:before {
            background-color: transparent !important;
        }

        /* Per-tab object-name (e.g. workspace title on the workspaces /
           documents tabs) only shows when that tab's app is the active
           one — keeps inactive tabs compact. */
        #tabs-bar .tab.application-favourites .object-name {
            display: none;
        }
    }

    &:not(.active-app-favourites) #tabs-bar .tab.application-favourites .more-menu-toggle,
    &.state-paused #tabs-bar .tab .more-menu-toggle,
    &.state-paused #application-body + .application-label .more-menu-toggle {
        filter: var(--tabs-bar-tab-app-icon-filter-dimmed);
        display: none;
    }

    &.state-paused #application-body + .application-label .breadcrumbs a:before {
        filter: var(--tabs-bar-tab-app-icon-filter-dimmed);
    }

    &.active-app-favourites.state-on,
    &.state-on #application-body + .application-label .breadcrumbs a:before {
        .tab.application-favourites .app-name:before {
            filter: invert(0%) !important;
            opacity: 1 !important;
        }

        #application-body-favourites {
            display: block;
        }
    }
}
#app-space.active-app-favourites.state-on #application-body-favourites {
    display: block;
}

/* The active tab's icon at full strength. */
.tab.application-favourites[data-active] .app-name:before {
    filter: invert(0%) !important;
}
:root {
  --app-colour-feedback: #208840;
}

/* State comes from marks in the DOM, never from a body-rooted match: this
   template is stamped out once per app, so one such selector becomes 72.
   See the generator's header note. */
.app-feedback,
#tabs-bar .tab.application-feedback[data-active],
body.kik-space-on .application-feedback + .application-label {
    --app-colour: var(--app-colour-feedback);
}
/* Inline SVG icons painted with ``currentColor`` (e.g. on a help page
   head, or in a portlet header) pick up the app's brand colour from
   here. The canonical ``<img>`` tile icons stay white because <img>
   doesn't propagate ``color``. */
svg.app-icon.app-feedback,
span.app-icon.app-feedback {
    color: var(--app-colour-feedback);
}
.quaive-portlet.app-feedback .well-header:before {
    background-image: url(../../app-icons/artefacts/feedback.svg);
}
.tab.application-feedback .app-name:before,
.application-feedback + .application-label .breadcrumbs a:before {
    background-image: url(../../app-icons/artefacts/feedback.svg);
}
#application-body-feedback.state-on ~ #tabs-bar .tab.application-feedback {
    display: grid;
}
#app-space {

    &.state-off,
    &.state-paused,
    &:not(.active-app-feedback) {
        #tabs-bar .tab.application-feedback .app-name:before {
            background-color: transparent !important;
        }

        /* Per-tab object-name (e.g. workspace title on the workspaces /
           documents tabs) only shows when that tab's app is the active
           one — keeps inactive tabs compact. */
        #tabs-bar .tab.application-feedback .object-name {
            display: none;
        }
    }

    &:not(.active-app-feedback) #tabs-bar .tab.application-feedback .more-menu-toggle,
    &.state-paused #tabs-bar .tab .more-menu-toggle,
    &.state-paused #application-body + .application-label .more-menu-toggle {
        filter: var(--tabs-bar-tab-app-icon-filter-dimmed);
        display: none;
    }

    &.state-paused #application-body + .application-label .breadcrumbs a:before {
        filter: var(--tabs-bar-tab-app-icon-filter-dimmed);
    }

    &.active-app-feedback.state-on,
    &.state-on #application-body + .application-label .breadcrumbs a:before {
        .tab.application-feedback .app-name:before {
            filter: invert(0%) !important;
            opacity: 1 !important;
        }

        #application-body-feedback {
            display: block;
        }
    }
}
#app-space.active-app-feedback.state-on #application-body-feedback {
    display: block;
}

/* The active tab's icon at full strength. */
.tab.application-feedback[data-active] .app-name:before {
    filter: invert(0%) !important;
}
:root {
  --app-colour-films: #483D8B;
}

/* State comes from marks in the DOM, never from a body-rooted match: this
   template is stamped out once per app, so one such selector becomes 72.
   See the generator's header note. */
.app-films,
#tabs-bar .tab.application-films[data-active],
body.kik-space-on .application-films + .application-label {
    --app-colour: var(--app-colour-films);
}
/* Inline SVG icons painted with ``currentColor`` (e.g. on a help page
   head, or in a portlet header) pick up the app's brand colour from
   here. The canonical ``<img>`` tile icons stay white because <img>
   doesn't propagate ``color``. */
svg.app-icon.app-films,
span.app-icon.app-films {
    color: var(--app-colour-films);
}
.quaive-portlet.app-films .well-header:before {
    background-image: url(../../app-icons/artefacts/films.svg);
}
.tab.application-films .app-name:before,
.application-films + .application-label .breadcrumbs a:before {
    background-image: url(../../app-icons/artefacts/films.svg);
}
#application-body-films.state-on ~ #tabs-bar .tab.application-films {
    display: grid;
}
#app-space {

    &.state-off,
    &.state-paused,
    &:not(.active-app-films) {
        #tabs-bar .tab.application-films .app-name:before {
            background-color: transparent !important;
        }

        /* Per-tab object-name (e.g. workspace title on the workspaces /
           documents tabs) only shows when that tab's app is the active
           one — keeps inactive tabs compact. */
        #tabs-bar .tab.application-films .object-name {
            display: none;
        }
    }

    &:not(.active-app-films) #tabs-bar .tab.application-films .more-menu-toggle,
    &.state-paused #tabs-bar .tab .more-menu-toggle,
    &.state-paused #application-body + .application-label .more-menu-toggle {
        filter: var(--tabs-bar-tab-app-icon-filter-dimmed);
        display: none;
    }

    &.state-paused #application-body + .application-label .breadcrumbs a:before {
        filter: var(--tabs-bar-tab-app-icon-filter-dimmed);
    }

    &.active-app-films.state-on,
    &.state-on #application-body + .application-label .breadcrumbs a:before {
        .tab.application-films .app-name:before {
            filter: invert(0%) !important;
            opacity: 1 !important;
        }

        #application-body-films {
            display: block;
        }
    }
}
#app-space.active-app-films.state-on #application-body-films {
    display: block;
}

/* The active tab's icon at full strength. */
.tab.application-films[data-active] .app-name:before {
    filter: invert(0%) !important;
}
:root {
  --app-colour-gymnast: #C50F1F;
}

/* State comes from marks in the DOM, never from a body-rooted match: this
   template is stamped out once per app, so one such selector becomes 72.
   See the generator's header note. */
.app-gymnast,
#tabs-bar .tab.application-gymnast[data-active],
body.kik-space-on .application-gymnast + .application-label {
    --app-colour: var(--app-colour-gymnast);
}
/* Inline SVG icons painted with ``currentColor`` (e.g. on a help page
   head, or in a portlet header) pick up the app's brand colour from
   here. The canonical ``<img>`` tile icons stay white because <img>
   doesn't propagate ``color``. */
svg.app-icon.app-gymnast,
span.app-icon.app-gymnast {
    color: var(--app-colour-gymnast);
}
.quaive-portlet.app-gymnast .well-header:before {
    background-image: url(../../app-icons/artefacts/gymnast.svg);
}
.tab.application-gymnast .app-name:before,
.application-gymnast + .application-label .breadcrumbs a:before {
    background-image: url(../../app-icons/artefacts/gymnast.svg);
}
#application-body-gymnast.state-on ~ #tabs-bar .tab.application-gymnast {
    display: grid;
}
#app-space {

    &.state-off,
    &.state-paused,
    &:not(.active-app-gymnast) {
        #tabs-bar .tab.application-gymnast .app-name:before {
            background-color: transparent !important;
        }

        /* Per-tab object-name (e.g. workspace title on the workspaces /
           documents tabs) only shows when that tab's app is the active
           one — keeps inactive tabs compact. */
        #tabs-bar .tab.application-gymnast .object-name {
            display: none;
        }
    }

    &:not(.active-app-gymnast) #tabs-bar .tab.application-gymnast .more-menu-toggle,
    &.state-paused #tabs-bar .tab .more-menu-toggle,
    &.state-paused #application-body + .application-label .more-menu-toggle {
        filter: var(--tabs-bar-tab-app-icon-filter-dimmed);
        display: none;
    }

    &.state-paused #application-body + .application-label .breadcrumbs a:before {
        filter: var(--tabs-bar-tab-app-icon-filter-dimmed);
    }

    &.active-app-gymnast.state-on,
    &.state-on #application-body + .application-label .breadcrumbs a:before {
        .tab.application-gymnast .app-name:before {
            filter: invert(0%) !important;
            opacity: 1 !important;
        }

        #application-body-gymnast {
            display: block;
        }
    }
}
#app-space.active-app-gymnast.state-on #application-body-gymnast {
    display: block;
}

/* The active tab's icon at full strength. */
.tab.application-gymnast[data-active] .app-name:before {
    filter: invert(0%) !important;
}
:root {
  --app-colour-help: dimgray;
}

/* State comes from marks in the DOM, never from a body-rooted match: this
   template is stamped out once per app, so one such selector becomes 72.
   See the generator's header note. */
.app-help,
#tabs-bar .tab.application-help[data-active],
body.kik-space-on .application-help + .application-label {
    --app-colour: var(--app-colour-help);
}
/* Inline SVG icons painted with ``currentColor`` (e.g. on a help page
   head, or in a portlet header) pick up the app's brand colour from
   here. The canonical ``<img>`` tile icons stay white because <img>
   doesn't propagate ``color``. */
svg.app-icon.app-help,
span.app-icon.app-help {
    color: var(--app-colour-help);
}
.quaive-portlet.app-help .well-header:before {
    background-image: url(../../app-icons/artefacts/help.svg);
}
.tab.application-help .app-name:before,
.application-help + .application-label .breadcrumbs a:before {
    background-image: url(../../app-icons/artefacts/help.svg);
}
#application-body-help.state-on ~ #tabs-bar .tab.application-help {
    display: grid;
}
#app-space {

    &.state-off,
    &.state-paused,
    &:not(.active-app-help) {
        #tabs-bar .tab.application-help .app-name:before {
            background-color: transparent !important;
        }

        /* Per-tab object-name (e.g. workspace title on the workspaces /
           documents tabs) only shows when that tab's app is the active
           one — keeps inactive tabs compact. */
        #tabs-bar .tab.application-help .object-name {
            display: none;
        }
    }

    &:not(.active-app-help) #tabs-bar .tab.application-help .more-menu-toggle,
    &.state-paused #tabs-bar .tab .more-menu-toggle,
    &.state-paused #application-body + .application-label .more-menu-toggle {
        filter: var(--tabs-bar-tab-app-icon-filter-dimmed);
        display: none;
    }

    &.state-paused #application-body + .application-label .breadcrumbs a:before {
        filter: var(--tabs-bar-tab-app-icon-filter-dimmed);
    }

    &.active-app-help.state-on,
    &.state-on #application-body + .application-label .breadcrumbs a:before {
        .tab.application-help .app-name:before {
            filter: invert(0%) !important;
            opacity: 1 !important;
        }

        #application-body-help {
            display: block;
        }
    }
}
#app-space.active-app-help.state-on #application-body-help {
    display: block;
}

/* The active tab's icon at full strength. */
.tab.application-help[data-active] .app-name:before {
    filter: invert(0%) !important;
}
:root {
  --app-colour-image-bank: #7E726A;
}

/* State comes from marks in the DOM, never from a body-rooted match: this
   template is stamped out once per app, so one such selector becomes 72.
   See the generator's header note. */
.app-image-bank,
#tabs-bar .tab.application-image-bank[data-active],
body.kik-space-on .application-image-bank + .application-label {
    --app-colour: var(--app-colour-image-bank);
}
/* Inline SVG icons painted with ``currentColor`` (e.g. on a help page
   head, or in a portlet header) pick up the app's brand colour from
   here. The canonical ``<img>`` tile icons stay white because <img>
   doesn't propagate ``color``. */
svg.app-icon.app-image-bank,
span.app-icon.app-image-bank {
    color: var(--app-colour-image-bank);
}
.quaive-portlet.app-image-bank .well-header:before {
    background-image: url(../../app-icons/artefacts/image-bank.svg);
}
.tab.application-image-bank .app-name:before,
.application-image-bank + .application-label .breadcrumbs a:before {
    background-image: url(../../app-icons/artefacts/image-bank.svg);
}
#application-body-image-bank.state-on ~ #tabs-bar .tab.application-image-bank {
    display: grid;
}
#app-space {

    &.state-off,
    &.state-paused,
    &:not(.active-app-image-bank) {
        #tabs-bar .tab.application-image-bank .app-name:before {
            background-color: transparent !important;
        }

        /* Per-tab object-name (e.g. workspace title on the workspaces /
           documents tabs) only shows when that tab's app is the active
           one — keeps inactive tabs compact. */
        #tabs-bar .tab.application-image-bank .object-name {
            display: none;
        }
    }

    &:not(.active-app-image-bank) #tabs-bar .tab.application-image-bank .more-menu-toggle,
    &.state-paused #tabs-bar .tab .more-menu-toggle,
    &.state-paused #application-body + .application-label .more-menu-toggle {
        filter: var(--tabs-bar-tab-app-icon-filter-dimmed);
        display: none;
    }

    &.state-paused #application-body + .application-label .breadcrumbs a:before {
        filter: var(--tabs-bar-tab-app-icon-filter-dimmed);
    }

    &.active-app-image-bank.state-on,
    &.state-on #application-body + .application-label .breadcrumbs a:before {
        .tab.application-image-bank .app-name:before {
            filter: invert(0%) !important;
            opacity: 1 !important;
        }

        #application-body-image-bank {
            display: block;
        }
    }
}
#app-space.active-app-image-bank.state-on #application-body-image-bank {
    display: block;
}

/* The active tab's icon at full strength. */
.tab.application-image-bank[data-active] .app-name:before {
    filter: invert(0%) !important;
}
:root {
  --app-colour-images: #fe28a2;
}

/* State comes from marks in the DOM, never from a body-rooted match: this
   template is stamped out once per app, so one such selector becomes 72.
   See the generator's header note. */
.app-images,
#tabs-bar .tab.application-images[data-active],
body.kik-space-on .application-images + .application-label {
    --app-colour: var(--app-colour-images);
}
/* Inline SVG icons painted with ``currentColor`` (e.g. on a help page
   head, or in a portlet header) pick up the app's brand colour from
   here. The canonical ``<img>`` tile icons stay white because <img>
   doesn't propagate ``color``. */
svg.app-icon.app-images,
span.app-icon.app-images {
    color: var(--app-colour-images);
}
.quaive-portlet.app-images .well-header:before {
    background-image: url(../../app-icons/artefacts/images.svg);
}
.tab.application-images .app-name:before,
.application-images + .application-label .breadcrumbs a:before {
    background-image: url(../../app-icons/artefacts/images.svg);
}
#application-body-images.state-on ~ #tabs-bar .tab.application-images {
    display: grid;
}
#app-space {

    &.state-off,
    &.state-paused,
    &:not(.active-app-images) {
        #tabs-bar .tab.application-images .app-name:before {
            background-color: transparent !important;
        }

        /* Per-tab object-name (e.g. workspace title on the workspaces /
           documents tabs) only shows when that tab's app is the active
           one — keeps inactive tabs compact. */
        #tabs-bar .tab.application-images .object-name {
            display: none;
        }
    }

    &:not(.active-app-images) #tabs-bar .tab.application-images .more-menu-toggle,
    &.state-paused #tabs-bar .tab .more-menu-toggle,
    &.state-paused #application-body + .application-label .more-menu-toggle {
        filter: var(--tabs-bar-tab-app-icon-filter-dimmed);
        display: none;
    }

    &.state-paused #application-body + .application-label .breadcrumbs a:before {
        filter: var(--tabs-bar-tab-app-icon-filter-dimmed);
    }

    &.active-app-images.state-on,
    &.state-on #application-body + .application-label .breadcrumbs a:before {
        .tab.application-images .app-name:before {
            filter: invert(0%) !important;
            opacity: 1 !important;
        }

        #application-body-images {
            display: block;
        }
    }
}
#app-space.active-app-images.state-on #application-body-images {
    display: block;
}

/* The active tab's icon at full strength. */
.tab.application-images[data-active] .app-name:before {
    filter: invert(0%) !important;
}
:root {
  --app-colour-jahrzeit: #5B6680;
}

/* State comes from marks in the DOM, never from a body-rooted match: this
   template is stamped out once per app, so one such selector becomes 72.
   See the generator's header note. */
.app-jahrzeit,
#tabs-bar .tab.application-jahrzeit[data-active],
body.kik-space-on .application-jahrzeit + .application-label {
    --app-colour: var(--app-colour-jahrzeit);
}
/* Inline SVG icons painted with ``currentColor`` (e.g. on a help page
   head, or in a portlet header) pick up the app's brand colour from
   here. The canonical ``<img>`` tile icons stay white because <img>
   doesn't propagate ``color``. */
svg.app-icon.app-jahrzeit,
span.app-icon.app-jahrzeit {
    color: var(--app-colour-jahrzeit);
}
.quaive-portlet.app-jahrzeit .well-header:before {
    background-image: url(../../app-icons/artefacts/jahrzeit.svg);
}
.tab.application-jahrzeit .app-name:before,
.application-jahrzeit + .application-label .breadcrumbs a:before {
    background-image: url(../../app-icons/artefacts/jahrzeit.svg);
}
#application-body-jahrzeit.state-on ~ #tabs-bar .tab.application-jahrzeit {
    display: grid;
}
#app-space {

    &.state-off,
    &.state-paused,
    &:not(.active-app-jahrzeit) {
        #tabs-bar .tab.application-jahrzeit .app-name:before {
            background-color: transparent !important;
        }

        /* Per-tab object-name (e.g. workspace title on the workspaces /
           documents tabs) only shows when that tab's app is the active
           one — keeps inactive tabs compact. */
        #tabs-bar .tab.application-jahrzeit .object-name {
            display: none;
        }
    }

    &:not(.active-app-jahrzeit) #tabs-bar .tab.application-jahrzeit .more-menu-toggle,
    &.state-paused #tabs-bar .tab .more-menu-toggle,
    &.state-paused #application-body + .application-label .more-menu-toggle {
        filter: var(--tabs-bar-tab-app-icon-filter-dimmed);
        display: none;
    }

    &.state-paused #application-body + .application-label .breadcrumbs a:before {
        filter: var(--tabs-bar-tab-app-icon-filter-dimmed);
    }

    &.active-app-jahrzeit.state-on,
    &.state-on #application-body + .application-label .breadcrumbs a:before {
        .tab.application-jahrzeit .app-name:before {
            filter: invert(0%) !important;
            opacity: 1 !important;
        }

        #application-body-jahrzeit {
            display: block;
        }
    }
}
#app-space.active-app-jahrzeit.state-on #application-body-jahrzeit {
    display: block;
}

/* The active tab's icon at full strength. */
.tab.application-jahrzeit[data-active] .app-name:before {
    filter: invert(0%) !important;
}
:root {
  --app-colour-jobs: #c73d78;
}

/* State comes from marks in the DOM, never from a body-rooted match: this
   template is stamped out once per app, so one such selector becomes 72.
   See the generator's header note. */
.app-jobs,
#tabs-bar .tab.application-jobs[data-active],
body.kik-space-on .application-jobs + .application-label {
    --app-colour: var(--app-colour-jobs);
}
/* Inline SVG icons painted with ``currentColor`` (e.g. on a help page
   head, or in a portlet header) pick up the app's brand colour from
   here. The canonical ``<img>`` tile icons stay white because <img>
   doesn't propagate ``color``. */
svg.app-icon.app-jobs,
span.app-icon.app-jobs {
    color: var(--app-colour-jobs);
}
.quaive-portlet.app-jobs .well-header:before {
    background-image: url(../../app-icons/artefacts/jobs.svg);
}
.tab.application-jobs .app-name:before,
.application-jobs + .application-label .breadcrumbs a:before {
    background-image: url(../../app-icons/artefacts/jobs.svg);
}
#application-body-jobs.state-on ~ #tabs-bar .tab.application-jobs {
    display: grid;
}
#app-space {

    &.state-off,
    &.state-paused,
    &:not(.active-app-jobs) {
        #tabs-bar .tab.application-jobs .app-name:before {
            background-color: transparent !important;
        }

        /* Per-tab object-name (e.g. workspace title on the workspaces /
           documents tabs) only shows when that tab's app is the active
           one — keeps inactive tabs compact. */
        #tabs-bar .tab.application-jobs .object-name {
            display: none;
        }
    }

    &:not(.active-app-jobs) #tabs-bar .tab.application-jobs .more-menu-toggle,
    &.state-paused #tabs-bar .tab .more-menu-toggle,
    &.state-paused #application-body + .application-label .more-menu-toggle {
        filter: var(--tabs-bar-tab-app-icon-filter-dimmed);
        display: none;
    }

    &.state-paused #application-body + .application-label .breadcrumbs a:before {
        filter: var(--tabs-bar-tab-app-icon-filter-dimmed);
    }

    &.active-app-jobs.state-on,
    &.state-on #application-body + .application-label .breadcrumbs a:before {
        .tab.application-jobs .app-name:before {
            filter: invert(0%) !important;
            opacity: 1 !important;
        }

        #application-body-jobs {
            display: block;
        }
    }
}
#app-space.active-app-jobs.state-on #application-body-jobs {
    display: block;
}

/* The active tab's icon at full strength. */
.tab.application-jobs[data-active] .app-name:before {
    filter: invert(0%) !important;
}
:root {
  --app-colour-journal: #FA2D48;
}

/* State comes from marks in the DOM, never from a body-rooted match: this
   template is stamped out once per app, so one such selector becomes 72.
   See the generator's header note. */
.app-journal,
#tabs-bar .tab.application-journal[data-active],
body.kik-space-on .application-journal + .application-label {
    --app-colour: var(--app-colour-journal);
}
/* Inline SVG icons painted with ``currentColor`` (e.g. on a help page
   head, or in a portlet header) pick up the app's brand colour from
   here. The canonical ``<img>`` tile icons stay white because <img>
   doesn't propagate ``color``. */
svg.app-icon.app-journal,
span.app-icon.app-journal {
    color: var(--app-colour-journal);
}
.quaive-portlet.app-journal .well-header:before {
    background-image: url(../../app-icons/artefacts/journal.svg);
}
.tab.application-journal .app-name:before,
.application-journal + .application-label .breadcrumbs a:before {
    background-image: url(../../app-icons/artefacts/journal.svg);
}
#application-body-journal.state-on ~ #tabs-bar .tab.application-journal {
    display: grid;
}
#app-space {

    &.state-off,
    &.state-paused,
    &:not(.active-app-journal) {
        #tabs-bar .tab.application-journal .app-name:before {
            background-color: transparent !important;
        }

        /* Per-tab object-name (e.g. workspace title on the workspaces /
           documents tabs) only shows when that tab's app is the active
           one — keeps inactive tabs compact. */
        #tabs-bar .tab.application-journal .object-name {
            display: none;
        }
    }

    &:not(.active-app-journal) #tabs-bar .tab.application-journal .more-menu-toggle,
    &.state-paused #tabs-bar .tab .more-menu-toggle,
    &.state-paused #application-body + .application-label .more-menu-toggle {
        filter: var(--tabs-bar-tab-app-icon-filter-dimmed);
        display: none;
    }

    &.state-paused #application-body + .application-label .breadcrumbs a:before {
        filter: var(--tabs-bar-tab-app-icon-filter-dimmed);
    }

    &.active-app-journal.state-on,
    &.state-on #application-body + .application-label .breadcrumbs a:before {
        .tab.application-journal .app-name:before {
            filter: invert(0%) !important;
            opacity: 1 !important;
        }

        #application-body-journal {
            display: block;
        }
    }
}
#app-space.active-app-journal.state-on #application-body-journal {
    display: block;
}

/* The active tab's icon at full strength. */
.tab.application-journal[data-active] .app-name:before {
    filter: invert(0%) !important;
}
:root {
  --app-colour-kiki: #7A5AF8;
}

/* State comes from marks in the DOM, never from a body-rooted match: this
   template is stamped out once per app, so one such selector becomes 72.
   See the generator's header note. */
.app-kiki,
#tabs-bar .tab.application-kiki[data-active],
body.kik-space-on .application-kiki + .application-label {
    --app-colour: var(--app-colour-kiki);
}
/* Inline SVG icons painted with ``currentColor`` (e.g. on a help page
   head, or in a portlet header) pick up the app's brand colour from
   here. The canonical ``<img>`` tile icons stay white because <img>
   doesn't propagate ``color``. */
svg.app-icon.app-kiki,
span.app-icon.app-kiki {
    color: var(--app-colour-kiki);
}
.quaive-portlet.app-kiki .well-header:before {
    background-image: url(../../app-icons/artefacts/kiki.svg);
}
.tab.application-kiki .app-name:before,
.application-kiki + .application-label .breadcrumbs a:before {
    background-image: url(../../app-icons/artefacts/kiki.svg);
}
#application-body-kiki.state-on ~ #tabs-bar .tab.application-kiki {
    display: grid;
}
#app-space {

    &.state-off,
    &.state-paused,
    &:not(.active-app-kiki) {
        #tabs-bar .tab.application-kiki .app-name:before {
            background-color: transparent !important;
        }

        /* Per-tab object-name (e.g. workspace title on the workspaces /
           documents tabs) only shows when that tab's app is the active
           one — keeps inactive tabs compact. */
        #tabs-bar .tab.application-kiki .object-name {
            display: none;
        }
    }

    &:not(.active-app-kiki) #tabs-bar .tab.application-kiki .more-menu-toggle,
    &.state-paused #tabs-bar .tab .more-menu-toggle,
    &.state-paused #application-body + .application-label .more-menu-toggle {
        filter: var(--tabs-bar-tab-app-icon-filter-dimmed);
        display: none;
    }

    &.state-paused #application-body + .application-label .breadcrumbs a:before {
        filter: var(--tabs-bar-tab-app-icon-filter-dimmed);
    }

    &.active-app-kiki.state-on,
    &.state-on #application-body + .application-label .breadcrumbs a:before {
        .tab.application-kiki .app-name:before {
            filter: invert(0%) !important;
            opacity: 1 !important;
        }

        #application-body-kiki {
            display: block;
        }
    }
}
#app-space.active-app-kiki.state-on #application-body-kiki {
    display: block;
}

/* The active tab's icon at full strength. */
.tab.application-kiki[data-active] .app-name:before {
    filter: invert(0%) !important;
}
:root {
  --app-colour-library: #a06430;
}

/* State comes from marks in the DOM, never from a body-rooted match: this
   template is stamped out once per app, so one such selector becomes 72.
   See the generator's header note. */
.app-library,
#tabs-bar .tab.application-library[data-active],
body.kik-space-on .application-library + .application-label {
    --app-colour: var(--app-colour-library);
}
/* Inline SVG icons painted with ``currentColor`` (e.g. on a help page
   head, or in a portlet header) pick up the app's brand colour from
   here. The canonical ``<img>`` tile icons stay white because <img>
   doesn't propagate ``color``. */
svg.app-icon.app-library,
span.app-icon.app-library {
    color: var(--app-colour-library);
}
.quaive-portlet.app-library .well-header:before {
    background-image: url(../../app-icons/artefacts/library.svg);
}
.tab.application-library .app-name:before,
.application-library + .application-label .breadcrumbs a:before {
    background-image: url(../../app-icons/artefacts/library.svg);
}
#application-body-library.state-on ~ #tabs-bar .tab.application-library {
    display: grid;
}
#app-space {

    &.state-off,
    &.state-paused,
    &:not(.active-app-library) {
        #tabs-bar .tab.application-library .app-name:before {
            background-color: transparent !important;
        }

        /* Per-tab object-name (e.g. workspace title on the workspaces /
           documents tabs) only shows when that tab's app is the active
           one — keeps inactive tabs compact. */
        #tabs-bar .tab.application-library .object-name {
            display: none;
        }
    }

    &:not(.active-app-library) #tabs-bar .tab.application-library .more-menu-toggle,
    &.state-paused #tabs-bar .tab .more-menu-toggle,
    &.state-paused #application-body + .application-label .more-menu-toggle {
        filter: var(--tabs-bar-tab-app-icon-filter-dimmed);
        display: none;
    }

    &.state-paused #application-body + .application-label .breadcrumbs a:before {
        filter: var(--tabs-bar-tab-app-icon-filter-dimmed);
    }

    &.active-app-library.state-on,
    &.state-on #application-body + .application-label .breadcrumbs a:before {
        .tab.application-library .app-name:before {
            filter: invert(0%) !important;
            opacity: 1 !important;
        }

        #application-body-library {
            display: block;
        }
    }
}
#app-space.active-app-library.state-on #application-body-library {
    display: block;
}

/* The active tab's icon at full strength. */
.tab.application-library[data-active] .app-name:before {
    filter: invert(0%) !important;
}
:root {
  --app-colour-mail: #0078D4;
}

/* State comes from marks in the DOM, never from a body-rooted match: this
   template is stamped out once per app, so one such selector becomes 72.
   See the generator's header note. */
.app-mail,
#tabs-bar .tab.application-mail[data-active],
body.kik-space-on .application-mail + .application-label {
    --app-colour: var(--app-colour-mail);
}
/* Inline SVG icons painted with ``currentColor`` (e.g. on a help page
   head, or in a portlet header) pick up the app's brand colour from
   here. The canonical ``<img>`` tile icons stay white because <img>
   doesn't propagate ``color``. */
svg.app-icon.app-mail,
span.app-icon.app-mail {
    color: var(--app-colour-mail);
}
.quaive-portlet.app-mail .well-header:before {
    background-image: url(../../app-icons/artefacts/mail.svg);
}
.tab.application-mail .app-name:before,
.application-mail + .application-label .breadcrumbs a:before {
    background-image: url(../../app-icons/artefacts/mail.svg);
}
#application-body-mail.state-on ~ #tabs-bar .tab.application-mail {
    display: grid;
}
#app-space {

    &.state-off,
    &.state-paused,
    &:not(.active-app-mail) {
        #tabs-bar .tab.application-mail .app-name:before {
            background-color: transparent !important;
        }

        /* Per-tab object-name (e.g. workspace title on the workspaces /
           documents tabs) only shows when that tab's app is the active
           one — keeps inactive tabs compact. */
        #tabs-bar .tab.application-mail .object-name {
            display: none;
        }
    }

    &:not(.active-app-mail) #tabs-bar .tab.application-mail .more-menu-toggle,
    &.state-paused #tabs-bar .tab .more-menu-toggle,
    &.state-paused #application-body + .application-label .more-menu-toggle {
        filter: var(--tabs-bar-tab-app-icon-filter-dimmed);
        display: none;
    }

    &.state-paused #application-body + .application-label .breadcrumbs a:before {
        filter: var(--tabs-bar-tab-app-icon-filter-dimmed);
    }

    &.active-app-mail.state-on,
    &.state-on #application-body + .application-label .breadcrumbs a:before {
        .tab.application-mail .app-name:before {
            filter: invert(0%) !important;
            opacity: 1 !important;
        }

        #application-body-mail {
            display: block;
        }
    }
}
#app-space.active-app-mail.state-on #application-body-mail {
    display: block;
}

/* The active tab's icon at full strength. */
.tab.application-mail[data-active] .app-name:before {
    filter: invert(0%) !important;
}
:root {
  --app-colour-mailings: #1668b8;
}

/* State comes from marks in the DOM, never from a body-rooted match: this
   template is stamped out once per app, so one such selector becomes 72.
   See the generator's header note. */
.app-mailings,
#tabs-bar .tab.application-mailings[data-active],
body.kik-space-on .application-mailings + .application-label {
    --app-colour: var(--app-colour-mailings);
}
/* Inline SVG icons painted with ``currentColor`` (e.g. on a help page
   head, or in a portlet header) pick up the app's brand colour from
   here. The canonical ``<img>`` tile icons stay white because <img>
   doesn't propagate ``color``. */
svg.app-icon.app-mailings,
span.app-icon.app-mailings {
    color: var(--app-colour-mailings);
}
.quaive-portlet.app-mailings .well-header:before {
    background-image: url(../../app-icons/artefacts/mailings.svg);
}
.tab.application-mailings .app-name:before,
.application-mailings + .application-label .breadcrumbs a:before {
    background-image: url(../../app-icons/artefacts/mailings.svg);
}
#application-body-mailings.state-on ~ #tabs-bar .tab.application-mailings {
    display: grid;
}
#app-space {

    &.state-off,
    &.state-paused,
    &:not(.active-app-mailings) {
        #tabs-bar .tab.application-mailings .app-name:before {
            background-color: transparent !important;
        }

        /* Per-tab object-name (e.g. workspace title on the workspaces /
           documents tabs) only shows when that tab's app is the active
           one — keeps inactive tabs compact. */
        #tabs-bar .tab.application-mailings .object-name {
            display: none;
        }
    }

    &:not(.active-app-mailings) #tabs-bar .tab.application-mailings .more-menu-toggle,
    &.state-paused #tabs-bar .tab .more-menu-toggle,
    &.state-paused #application-body + .application-label .more-menu-toggle {
        filter: var(--tabs-bar-tab-app-icon-filter-dimmed);
        display: none;
    }

    &.state-paused #application-body + .application-label .breadcrumbs a:before {
        filter: var(--tabs-bar-tab-app-icon-filter-dimmed);
    }

    &.active-app-mailings.state-on,
    &.state-on #application-body + .application-label .breadcrumbs a:before {
        .tab.application-mailings .app-name:before {
            filter: invert(0%) !important;
            opacity: 1 !important;
        }

        #application-body-mailings {
            display: block;
        }
    }
}
#app-space.active-app-mailings.state-on #application-body-mailings {
    display: block;
}

/* The active tab's icon at full strength. */
.tab.application-mailings[data-active] .app-name:before {
    filter: invert(0%) !important;
}
:root {
  --app-colour-meetings: limegreen;
}

/* State comes from marks in the DOM, never from a body-rooted match: this
   template is stamped out once per app, so one such selector becomes 72.
   See the generator's header note. */
.app-meetings,
#tabs-bar .tab.application-meetings[data-active],
body.kik-space-on .application-meetings + .application-label {
    --app-colour: var(--app-colour-meetings);
}
/* Inline SVG icons painted with ``currentColor`` (e.g. on a help page
   head, or in a portlet header) pick up the app's brand colour from
   here. The canonical ``<img>`` tile icons stay white because <img>
   doesn't propagate ``color``. */
svg.app-icon.app-meetings,
span.app-icon.app-meetings {
    color: var(--app-colour-meetings);
}
.quaive-portlet.app-meetings .well-header:before {
    background-image: url(../../app-icons/artefacts/meetings.svg);
}
.tab.application-meetings .app-name:before,
.application-meetings + .application-label .breadcrumbs a:before {
    background-image: url(../../app-icons/artefacts/meetings.svg);
}
#application-body-meetings.state-on ~ #tabs-bar .tab.application-meetings {
    display: grid;
}
#app-space {

    &.state-off,
    &.state-paused,
    &:not(.active-app-meetings) {
        #tabs-bar .tab.application-meetings .app-name:before {
            background-color: transparent !important;
        }

        /* Per-tab object-name (e.g. workspace title on the workspaces /
           documents tabs) only shows when that tab's app is the active
           one — keeps inactive tabs compact. */
        #tabs-bar .tab.application-meetings .object-name {
            display: none;
        }
    }

    &:not(.active-app-meetings) #tabs-bar .tab.application-meetings .more-menu-toggle,
    &.state-paused #tabs-bar .tab .more-menu-toggle,
    &.state-paused #application-body + .application-label .more-menu-toggle {
        filter: var(--tabs-bar-tab-app-icon-filter-dimmed);
        display: none;
    }

    &.state-paused #application-body + .application-label .breadcrumbs a:before {
        filter: var(--tabs-bar-tab-app-icon-filter-dimmed);
    }

    &.active-app-meetings.state-on,
    &.state-on #application-body + .application-label .breadcrumbs a:before {
        .tab.application-meetings .app-name:before {
            filter: invert(0%) !important;
            opacity: 1 !important;
        }

        #application-body-meetings {
            display: block;
        }
    }
}
#app-space.active-app-meetings.state-on #application-body-meetings {
    display: block;
}

/* The active tab's icon at full strength. */
.tab.application-meetings[data-active] .app-name:before {
    filter: invert(0%) !important;
}
:root {
  --app-colour-messages: #4267B2;
}

/* State comes from marks in the DOM, never from a body-rooted match: this
   template is stamped out once per app, so one such selector becomes 72.
   See the generator's header note. */
.app-messages,
#tabs-bar .tab.application-messages[data-active],
body.kik-space-on .application-messages + .application-label {
    --app-colour: var(--app-colour-messages);
}
/* Inline SVG icons painted with ``currentColor`` (e.g. on a help page
   head, or in a portlet header) pick up the app's brand colour from
   here. The canonical ``<img>`` tile icons stay white because <img>
   doesn't propagate ``color``. */
svg.app-icon.app-messages,
span.app-icon.app-messages {
    color: var(--app-colour-messages);
}
.quaive-portlet.app-messages .well-header:before {
    background-image: url(../../app-icons/artefacts/messages.svg);
}
.tab.application-messages .app-name:before,
.application-messages + .application-label .breadcrumbs a:before {
    background-image: url(../../app-icons/artefacts/messages.svg);
}
#application-body-messages.state-on ~ #tabs-bar .tab.application-messages {
    display: grid;
}
#app-space {

    &.state-off,
    &.state-paused,
    &:not(.active-app-messages) {
        #tabs-bar .tab.application-messages .app-name:before {
            background-color: transparent !important;
        }

        /* Per-tab object-name (e.g. workspace title on the workspaces /
           documents tabs) only shows when that tab's app is the active
           one — keeps inactive tabs compact. */
        #tabs-bar .tab.application-messages .object-name {
            display: none;
        }
    }

    &:not(.active-app-messages) #tabs-bar .tab.application-messages .more-menu-toggle,
    &.state-paused #tabs-bar .tab .more-menu-toggle,
    &.state-paused #application-body + .application-label .more-menu-toggle {
        filter: var(--tabs-bar-tab-app-icon-filter-dimmed);
        display: none;
    }

    &.state-paused #application-body + .application-label .breadcrumbs a:before {
        filter: var(--tabs-bar-tab-app-icon-filter-dimmed);
    }

    &.active-app-messages.state-on,
    &.state-on #application-body + .application-label .breadcrumbs a:before {
        .tab.application-messages .app-name:before {
            filter: invert(0%) !important;
            opacity: 1 !important;
        }

        #application-body-messages {
            display: block;
        }
    }
}
#app-space.active-app-messages.state-on #application-body-messages {
    display: block;
}

/* The active tab's icon at full strength. */
.tab.application-messages[data-active] .app-name:before {
    filter: invert(0%) !important;
}
:root {
  --app-colour-monitor: #0E9C8A;
}

/* State comes from marks in the DOM, never from a body-rooted match: this
   template is stamped out once per app, so one such selector becomes 72.
   See the generator's header note. */
.app-monitor,
#tabs-bar .tab.application-monitor[data-active],
body.kik-space-on .application-monitor + .application-label {
    --app-colour: var(--app-colour-monitor);
}
/* Inline SVG icons painted with ``currentColor`` (e.g. on a help page
   head, or in a portlet header) pick up the app's brand colour from
   here. The canonical ``<img>`` tile icons stay white because <img>
   doesn't propagate ``color``. */
svg.app-icon.app-monitor,
span.app-icon.app-monitor {
    color: var(--app-colour-monitor);
}
.quaive-portlet.app-monitor .well-header:before {
    background-image: url(../../app-icons/artefacts/monitor.svg);
}
.tab.application-monitor .app-name:before,
.application-monitor + .application-label .breadcrumbs a:before {
    background-image: url(../../app-icons/artefacts/monitor.svg);
}
#application-body-monitor.state-on ~ #tabs-bar .tab.application-monitor {
    display: grid;
}
#app-space {

    &.state-off,
    &.state-paused,
    &:not(.active-app-monitor) {
        #tabs-bar .tab.application-monitor .app-name:before {
            background-color: transparent !important;
        }

        /* Per-tab object-name (e.g. workspace title on the workspaces /
           documents tabs) only shows when that tab's app is the active
           one — keeps inactive tabs compact. */
        #tabs-bar .tab.application-monitor .object-name {
            display: none;
        }
    }

    &:not(.active-app-monitor) #tabs-bar .tab.application-monitor .more-menu-toggle,
    &.state-paused #tabs-bar .tab .more-menu-toggle,
    &.state-paused #application-body + .application-label .more-menu-toggle {
        filter: var(--tabs-bar-tab-app-icon-filter-dimmed);
        display: none;
    }

    &.state-paused #application-body + .application-label .breadcrumbs a:before {
        filter: var(--tabs-bar-tab-app-icon-filter-dimmed);
    }

    &.active-app-monitor.state-on,
    &.state-on #application-body + .application-label .breadcrumbs a:before {
        .tab.application-monitor .app-name:before {
            filter: invert(0%) !important;
            opacity: 1 !important;
        }

        #application-body-monitor {
            display: block;
        }
    }
}
#app-space.active-app-monitor.state-on #application-body-monitor {
    display: block;
}

/* The active tab's icon at full strength. */
.tab.application-monitor[data-active] .app-name:before {
    filter: invert(0%) !important;
}
:root {
  --app-colour-music: #1DB954;
}

/* State comes from marks in the DOM, never from a body-rooted match: this
   template is stamped out once per app, so one such selector becomes 72.
   See the generator's header note. */
.app-music,
#tabs-bar .tab.application-music[data-active],
body.kik-space-on .application-music + .application-label {
    --app-colour: var(--app-colour-music);
}
/* Inline SVG icons painted with ``currentColor`` (e.g. on a help page
   head, or in a portlet header) pick up the app's brand colour from
   here. The canonical ``<img>`` tile icons stay white because <img>
   doesn't propagate ``color``. */
svg.app-icon.app-music,
span.app-icon.app-music {
    color: var(--app-colour-music);
}
.quaive-portlet.app-music .well-header:before {
    background-image: url(../../app-icons/artefacts/music.svg);
}
.tab.application-music .app-name:before,
.application-music + .application-label .breadcrumbs a:before {
    background-image: url(../../app-icons/artefacts/music.svg);
}
#application-body-music.state-on ~ #tabs-bar .tab.application-music {
    display: grid;
}
#app-space {

    &.state-off,
    &.state-paused,
    &:not(.active-app-music) {
        #tabs-bar .tab.application-music .app-name:before {
            background-color: transparent !important;
        }

        /* Per-tab object-name (e.g. workspace title on the workspaces /
           documents tabs) only shows when that tab's app is the active
           one — keeps inactive tabs compact. */
        #tabs-bar .tab.application-music .object-name {
            display: none;
        }
    }

    &:not(.active-app-music) #tabs-bar .tab.application-music .more-menu-toggle,
    &.state-paused #tabs-bar .tab .more-menu-toggle,
    &.state-paused #application-body + .application-label .more-menu-toggle {
        filter: var(--tabs-bar-tab-app-icon-filter-dimmed);
        display: none;
    }

    &.state-paused #application-body + .application-label .breadcrumbs a:before {
        filter: var(--tabs-bar-tab-app-icon-filter-dimmed);
    }

    &.active-app-music.state-on,
    &.state-on #application-body + .application-label .breadcrumbs a:before {
        .tab.application-music .app-name:before {
            filter: invert(0%) !important;
            opacity: 1 !important;
        }

        #application-body-music {
            display: block;
        }
    }
}
#app-space.active-app-music.state-on #application-body-music {
    display: block;
}

/* The active tab's icon at full strength. */
.tab.application-music[data-active] .app-name:before {
    filter: invert(0%) !important;
}
:root {
  --app-colour-news: #F26522;
}

/* State comes from marks in the DOM, never from a body-rooted match: this
   template is stamped out once per app, so one such selector becomes 72.
   See the generator's header note. */
.app-news,
#tabs-bar .tab.application-news[data-active],
body.kik-space-on .application-news + .application-label {
    --app-colour: var(--app-colour-news);
}
/* Inline SVG icons painted with ``currentColor`` (e.g. on a help page
   head, or in a portlet header) pick up the app's brand colour from
   here. The canonical ``<img>`` tile icons stay white because <img>
   doesn't propagate ``color``. */
svg.app-icon.app-news,
span.app-icon.app-news {
    color: var(--app-colour-news);
}
.quaive-portlet.app-news .well-header:before {
    background-image: url(../../app-icons/artefacts/news.svg);
}
.tab.application-news .app-name:before,
.application-news + .application-label .breadcrumbs a:before {
    background-image: url(../../app-icons/artefacts/news.svg);
}
#application-body-news.state-on ~ #tabs-bar .tab.application-news {
    display: grid;
}
#app-space {

    &.state-off,
    &.state-paused,
    &:not(.active-app-news) {
        #tabs-bar .tab.application-news .app-name:before {
            background-color: transparent !important;
        }

        /* Per-tab object-name (e.g. workspace title on the workspaces /
           documents tabs) only shows when that tab's app is the active
           one — keeps inactive tabs compact. */
        #tabs-bar .tab.application-news .object-name {
            display: none;
        }
    }

    &:not(.active-app-news) #tabs-bar .tab.application-news .more-menu-toggle,
    &.state-paused #tabs-bar .tab .more-menu-toggle,
    &.state-paused #application-body + .application-label .more-menu-toggle {
        filter: var(--tabs-bar-tab-app-icon-filter-dimmed);
        display: none;
    }

    &.state-paused #application-body + .application-label .breadcrumbs a:before {
        filter: var(--tabs-bar-tab-app-icon-filter-dimmed);
    }

    &.active-app-news.state-on,
    &.state-on #application-body + .application-label .breadcrumbs a:before {
        .tab.application-news .app-name:before {
            filter: invert(0%) !important;
            opacity: 1 !important;
        }

        #application-body-news {
            display: block;
        }
    }
}
#app-space.active-app-news.state-on #application-body-news {
    display: block;
}

/* The active tab's icon at full strength. */
.tab.application-news[data-active] .app-name:before {
    filter: invert(0%) !important;
}
:root {
  --app-colour-notes: #B8860B;
}

/* State comes from marks in the DOM, never from a body-rooted match: this
   template is stamped out once per app, so one such selector becomes 72.
   See the generator's header note. */
.app-notes,
#tabs-bar .tab.application-notes[data-active],
body.kik-space-on .application-notes + .application-label {
    --app-colour: var(--app-colour-notes);
}
/* Inline SVG icons painted with ``currentColor`` (e.g. on a help page
   head, or in a portlet header) pick up the app's brand colour from
   here. The canonical ``<img>`` tile icons stay white because <img>
   doesn't propagate ``color``. */
svg.app-icon.app-notes,
span.app-icon.app-notes {
    color: var(--app-colour-notes);
}
.quaive-portlet.app-notes .well-header:before {
    background-image: url(../../app-icons/artefacts/notes.svg);
}
.tab.application-notes .app-name:before,
.application-notes + .application-label .breadcrumbs a:before {
    background-image: url(../../app-icons/artefacts/notes.svg);
}
#application-body-notes.state-on ~ #tabs-bar .tab.application-notes {
    display: grid;
}
#app-space {

    &.state-off,
    &.state-paused,
    &:not(.active-app-notes) {
        #tabs-bar .tab.application-notes .app-name:before {
            background-color: transparent !important;
        }

        /* Per-tab object-name (e.g. workspace title on the workspaces /
           documents tabs) only shows when that tab's app is the active
           one — keeps inactive tabs compact. */
        #tabs-bar .tab.application-notes .object-name {
            display: none;
        }
    }

    &:not(.active-app-notes) #tabs-bar .tab.application-notes .more-menu-toggle,
    &.state-paused #tabs-bar .tab .more-menu-toggle,
    &.state-paused #application-body + .application-label .more-menu-toggle {
        filter: var(--tabs-bar-tab-app-icon-filter-dimmed);
        display: none;
    }

    &.state-paused #application-body + .application-label .breadcrumbs a:before {
        filter: var(--tabs-bar-tab-app-icon-filter-dimmed);
    }

    &.active-app-notes.state-on,
    &.state-on #application-body + .application-label .breadcrumbs a:before {
        .tab.application-notes .app-name:before {
            filter: invert(0%) !important;
            opacity: 1 !important;
        }

        #application-body-notes {
            display: block;
        }
    }
}
#app-space.active-app-notes.state-on #application-body-notes {
    display: block;
}

/* The active tab's icon at full strength. */
.tab.application-notes[data-active] .app-name:before {
    filter: invert(0%) !important;
}
:root {
  --app-colour-notifications: #6e6862;
}

/* State comes from marks in the DOM, never from a body-rooted match: this
   template is stamped out once per app, so one such selector becomes 72.
   See the generator's header note. */
.app-notifications,
#tabs-bar .tab.application-notifications[data-active],
body.kik-space-on .application-notifications + .application-label {
    --app-colour: var(--app-colour-notifications);
}
/* Inline SVG icons painted with ``currentColor`` (e.g. on a help page
   head, or in a portlet header) pick up the app's brand colour from
   here. The canonical ``<img>`` tile icons stay white because <img>
   doesn't propagate ``color``. */
svg.app-icon.app-notifications,
span.app-icon.app-notifications {
    color: var(--app-colour-notifications);
}
.quaive-portlet.app-notifications .well-header:before {
    background-image: url(../../app-icons/artefacts/notifications.svg);
}
.tab.application-notifications .app-name:before,
.application-notifications + .application-label .breadcrumbs a:before {
    background-image: url(../../app-icons/artefacts/notifications.svg);
}
#application-body-notifications.state-on ~ #tabs-bar .tab.application-notifications {
    display: grid;
}
#app-space {

    &.state-off,
    &.state-paused,
    &:not(.active-app-notifications) {
        #tabs-bar .tab.application-notifications .app-name:before {
            background-color: transparent !important;
        }

        /* Per-tab object-name (e.g. workspace title on the workspaces /
           documents tabs) only shows when that tab's app is the active
           one — keeps inactive tabs compact. */
        #tabs-bar .tab.application-notifications .object-name {
            display: none;
        }
    }

    &:not(.active-app-notifications) #tabs-bar .tab.application-notifications .more-menu-toggle,
    &.state-paused #tabs-bar .tab .more-menu-toggle,
    &.state-paused #application-body + .application-label .more-menu-toggle {
        filter: var(--tabs-bar-tab-app-icon-filter-dimmed);
        display: none;
    }

    &.state-paused #application-body + .application-label .breadcrumbs a:before {
        filter: var(--tabs-bar-tab-app-icon-filter-dimmed);
    }

    &.active-app-notifications.state-on,
    &.state-on #application-body + .application-label .breadcrumbs a:before {
        .tab.application-notifications .app-name:before {
            filter: invert(0%) !important;
            opacity: 1 !important;
        }

        #application-body-notifications {
            display: block;
        }
    }
}
#app-space.active-app-notifications.state-on #application-body-notifications {
    display: block;
}

/* The active tab's icon at full strength. */
.tab.application-notifications[data-active] .app-name:before {
    filter: invert(0%) !important;
}
:root {
  --app-colour-office: #1668b8;
}

/* State comes from marks in the DOM, never from a body-rooted match: this
   template is stamped out once per app, so one such selector becomes 72.
   See the generator's header note. */
.app-office,
#tabs-bar .tab.application-office[data-active],
body.kik-space-on .application-office + .application-label {
    --app-colour: var(--app-colour-office);
}
/* Inline SVG icons painted with ``currentColor`` (e.g. on a help page
   head, or in a portlet header) pick up the app's brand colour from
   here. The canonical ``<img>`` tile icons stay white because <img>
   doesn't propagate ``color``. */
svg.app-icon.app-office,
span.app-icon.app-office {
    color: var(--app-colour-office);
}
.quaive-portlet.app-office .well-header:before {
    background-image: url(../../app-icons/artefacts/office.svg);
}
.tab.application-office .app-name:before,
.application-office + .application-label .breadcrumbs a:before {
    background-image: url(../../app-icons/artefacts/office.svg);
}
#application-body-office.state-on ~ #tabs-bar .tab.application-office {
    display: grid;
}
#app-space {

    &.state-off,
    &.state-paused,
    &:not(.active-app-office) {
        #tabs-bar .tab.application-office .app-name:before {
            background-color: transparent !important;
        }

        /* Per-tab object-name (e.g. workspace title on the workspaces /
           documents tabs) only shows when that tab's app is the active
           one — keeps inactive tabs compact. */
        #tabs-bar .tab.application-office .object-name {
            display: none;
        }
    }

    &:not(.active-app-office) #tabs-bar .tab.application-office .more-menu-toggle,
    &.state-paused #tabs-bar .tab .more-menu-toggle,
    &.state-paused #application-body + .application-label .more-menu-toggle {
        filter: var(--tabs-bar-tab-app-icon-filter-dimmed);
        display: none;
    }

    &.state-paused #application-body + .application-label .breadcrumbs a:before {
        filter: var(--tabs-bar-tab-app-icon-filter-dimmed);
    }

    &.active-app-office.state-on,
    &.state-on #application-body + .application-label .breadcrumbs a:before {
        .tab.application-office .app-name:before {
            filter: invert(0%) !important;
            opacity: 1 !important;
        }

        #application-body-office {
            display: block;
        }
    }
}
#app-space.active-app-office.state-on #application-body-office {
    display: block;
}

/* The active tab's icon at full strength. */
.tab.application-office[data-active] .app-name:before {
    filter: invert(0%) !important;
}
:root {
  --app-colour-password: #696969;
}

/* State comes from marks in the DOM, never from a body-rooted match: this
   template is stamped out once per app, so one such selector becomes 72.
   See the generator's header note. */
.app-password,
#tabs-bar .tab.application-password[data-active],
body.kik-space-on .application-password + .application-label {
    --app-colour: var(--app-colour-password);
}
/* Inline SVG icons painted with ``currentColor`` (e.g. on a help page
   head, or in a portlet header) pick up the app's brand colour from
   here. The canonical ``<img>`` tile icons stay white because <img>
   doesn't propagate ``color``. */
svg.app-icon.app-password,
span.app-icon.app-password {
    color: var(--app-colour-password);
}
.quaive-portlet.app-password .well-header:before {
    background-image: url(../../app-icons/artefacts/password.svg);
}
.tab.application-password .app-name:before,
.application-password + .application-label .breadcrumbs a:before {
    background-image: url(../../app-icons/artefacts/password.svg);
}
#application-body-password.state-on ~ #tabs-bar .tab.application-password {
    display: grid;
}
#app-space {

    &.state-off,
    &.state-paused,
    &:not(.active-app-password) {
        #tabs-bar .tab.application-password .app-name:before {
            background-color: transparent !important;
        }

        /* Per-tab object-name (e.g. workspace title on the workspaces /
           documents tabs) only shows when that tab's app is the active
           one — keeps inactive tabs compact. */
        #tabs-bar .tab.application-password .object-name {
            display: none;
        }
    }

    &:not(.active-app-password) #tabs-bar .tab.application-password .more-menu-toggle,
    &.state-paused #tabs-bar .tab .more-menu-toggle,
    &.state-paused #application-body + .application-label .more-menu-toggle {
        filter: var(--tabs-bar-tab-app-icon-filter-dimmed);
        display: none;
    }

    &.state-paused #application-body + .application-label .breadcrumbs a:before {
        filter: var(--tabs-bar-tab-app-icon-filter-dimmed);
    }

    &.active-app-password.state-on,
    &.state-on #application-body + .application-label .breadcrumbs a:before {
        .tab.application-password .app-name:before {
            filter: invert(0%) !important;
            opacity: 1 !important;
        }

        #application-body-password {
            display: block;
        }
    }
}
#app-space.active-app-password.state-on #application-body-password {
    display: block;
}

/* The active tab's icon at full strength. */
.tab.application-password[data-active] .app-name:before {
    filter: invert(0%) !important;
}
:root {
  --app-colour-people: rgb(143, 104, 6);
}

/* State comes from marks in the DOM, never from a body-rooted match: this
   template is stamped out once per app, so one such selector becomes 72.
   See the generator's header note. */
.app-people,
#tabs-bar .tab.application-people[data-active],
body.kik-space-on .application-people + .application-label {
    --app-colour: var(--app-colour-people);
}
/* Inline SVG icons painted with ``currentColor`` (e.g. on a help page
   head, or in a portlet header) pick up the app's brand colour from
   here. The canonical ``<img>`` tile icons stay white because <img>
   doesn't propagate ``color``. */
svg.app-icon.app-people,
span.app-icon.app-people {
    color: var(--app-colour-people);
}
.quaive-portlet.app-people .well-header:before {
    background-image: url(../../app-icons/artefacts/people.svg);
}
.tab.application-people .app-name:before,
.application-people + .application-label .breadcrumbs a:before {
    background-image: url(../../app-icons/artefacts/people.svg);
}
#application-body-people.state-on ~ #tabs-bar .tab.application-people {
    display: grid;
}
#app-space {

    &.state-off,
    &.state-paused,
    &:not(.active-app-people) {
        #tabs-bar .tab.application-people .app-name:before {
            background-color: transparent !important;
        }

        /* Per-tab object-name (e.g. workspace title on the workspaces /
           documents tabs) only shows when that tab's app is the active
           one — keeps inactive tabs compact. */
        #tabs-bar .tab.application-people .object-name {
            display: none;
        }
    }

    &:not(.active-app-people) #tabs-bar .tab.application-people .more-menu-toggle,
    &.state-paused #tabs-bar .tab .more-menu-toggle,
    &.state-paused #application-body + .application-label .more-menu-toggle {
        filter: var(--tabs-bar-tab-app-icon-filter-dimmed);
        display: none;
    }

    &.state-paused #application-body + .application-label .breadcrumbs a:before {
        filter: var(--tabs-bar-tab-app-icon-filter-dimmed);
    }

    &.active-app-people.state-on,
    &.state-on #application-body + .application-label .breadcrumbs a:before {
        .tab.application-people .app-name:before {
            filter: invert(0%) !important;
            opacity: 1 !important;
        }

        #application-body-people {
            display: block;
        }
    }
}
#app-space.active-app-people.state-on #application-body-people {
    display: block;
}

/* The active tab's icon at full strength. */
.tab.application-people[data-active] .app-name:before {
    filter: invert(0%) !important;
}
:root {
  --app-colour-podcasts: #7C4DFF;
}

/* State comes from marks in the DOM, never from a body-rooted match: this
   template is stamped out once per app, so one such selector becomes 72.
   See the generator's header note. */
.app-podcasts,
#tabs-bar .tab.application-podcasts[data-active],
body.kik-space-on .application-podcasts + .application-label {
    --app-colour: var(--app-colour-podcasts);
}
/* Inline SVG icons painted with ``currentColor`` (e.g. on a help page
   head, or in a portlet header) pick up the app's brand colour from
   here. The canonical ``<img>`` tile icons stay white because <img>
   doesn't propagate ``color``. */
svg.app-icon.app-podcasts,
span.app-icon.app-podcasts {
    color: var(--app-colour-podcasts);
}
.quaive-portlet.app-podcasts .well-header:before {
    background-image: url(../../app-icons/artefacts/podcasts.svg);
}
.tab.application-podcasts .app-name:before,
.application-podcasts + .application-label .breadcrumbs a:before {
    background-image: url(../../app-icons/artefacts/podcasts.svg);
}
#application-body-podcasts.state-on ~ #tabs-bar .tab.application-podcasts {
    display: grid;
}
#app-space {

    &.state-off,
    &.state-paused,
    &:not(.active-app-podcasts) {
        #tabs-bar .tab.application-podcasts .app-name:before {
            background-color: transparent !important;
        }

        /* Per-tab object-name (e.g. workspace title on the workspaces /
           documents tabs) only shows when that tab's app is the active
           one — keeps inactive tabs compact. */
        #tabs-bar .tab.application-podcasts .object-name {
            display: none;
        }
    }

    &:not(.active-app-podcasts) #tabs-bar .tab.application-podcasts .more-menu-toggle,
    &.state-paused #tabs-bar .tab .more-menu-toggle,
    &.state-paused #application-body + .application-label .more-menu-toggle {
        filter: var(--tabs-bar-tab-app-icon-filter-dimmed);
        display: none;
    }

    &.state-paused #application-body + .application-label .breadcrumbs a:before {
        filter: var(--tabs-bar-tab-app-icon-filter-dimmed);
    }

    &.active-app-podcasts.state-on,
    &.state-on #application-body + .application-label .breadcrumbs a:before {
        .tab.application-podcasts .app-name:before {
            filter: invert(0%) !important;
            opacity: 1 !important;
        }

        #application-body-podcasts {
            display: block;
        }
    }
}
#app-space.active-app-podcasts.state-on #application-body-podcasts {
    display: block;
}

/* The active tab's icon at full strength. */
.tab.application-podcasts[data-active] .app-name:before {
    filter: invert(0%) !important;
}
:root {
  --app-colour-polls: #208840;
}

/* State comes from marks in the DOM, never from a body-rooted match: this
   template is stamped out once per app, so one such selector becomes 72.
   See the generator's header note. */
.app-polls,
#tabs-bar .tab.application-polls[data-active],
body.kik-space-on .application-polls + .application-label {
    --app-colour: var(--app-colour-polls);
}
/* Inline SVG icons painted with ``currentColor`` (e.g. on a help page
   head, or in a portlet header) pick up the app's brand colour from
   here. The canonical ``<img>`` tile icons stay white because <img>
   doesn't propagate ``color``. */
svg.app-icon.app-polls,
span.app-icon.app-polls {
    color: var(--app-colour-polls);
}
.quaive-portlet.app-polls .well-header:before {
    background-image: url(../../app-icons/artefacts/polls.svg);
}
.tab.application-polls .app-name:before,
.application-polls + .application-label .breadcrumbs a:before {
    background-image: url(../../app-icons/artefacts/polls.svg);
}
#application-body-polls.state-on ~ #tabs-bar .tab.application-polls {
    display: grid;
}
#app-space {

    &.state-off,
    &.state-paused,
    &:not(.active-app-polls) {
        #tabs-bar .tab.application-polls .app-name:before {
            background-color: transparent !important;
        }

        /* Per-tab object-name (e.g. workspace title on the workspaces /
           documents tabs) only shows when that tab's app is the active
           one — keeps inactive tabs compact. */
        #tabs-bar .tab.application-polls .object-name {
            display: none;
        }
    }

    &:not(.active-app-polls) #tabs-bar .tab.application-polls .more-menu-toggle,
    &.state-paused #tabs-bar .tab .more-menu-toggle,
    &.state-paused #application-body + .application-label .more-menu-toggle {
        filter: var(--tabs-bar-tab-app-icon-filter-dimmed);
        display: none;
    }

    &.state-paused #application-body + .application-label .breadcrumbs a:before {
        filter: var(--tabs-bar-tab-app-icon-filter-dimmed);
    }

    &.active-app-polls.state-on,
    &.state-on #application-body + .application-label .breadcrumbs a:before {
        .tab.application-polls .app-name:before {
            filter: invert(0%) !important;
            opacity: 1 !important;
        }

        #application-body-polls {
            display: block;
        }
    }
}
#app-space.active-app-polls.state-on #application-body-polls {
    display: block;
}

/* The active tab's icon at full strength. */
.tab.application-polls[data-active] .app-name:before {
    filter: invert(0%) !important;
}
:root {
  --app-colour-preferences: dimgray;
}

/* State comes from marks in the DOM, never from a body-rooted match: this
   template is stamped out once per app, so one such selector becomes 72.
   See the generator's header note. */
.app-preferences,
#tabs-bar .tab.application-preferences[data-active],
body.kik-space-on .application-preferences + .application-label {
    --app-colour: var(--app-colour-preferences);
}
/* Inline SVG icons painted with ``currentColor`` (e.g. on a help page
   head, or in a portlet header) pick up the app's brand colour from
   here. The canonical ``<img>`` tile icons stay white because <img>
   doesn't propagate ``color``. */
svg.app-icon.app-preferences,
span.app-icon.app-preferences {
    color: var(--app-colour-preferences);
}
.quaive-portlet.app-preferences .well-header:before {
    background-image: url(../../app-icons/artefacts/preferences.svg);
}
.tab.application-preferences .app-name:before,
.application-preferences + .application-label .breadcrumbs a:before {
    background-image: url(../../app-icons/artefacts/preferences.svg);
}
#application-body-preferences.state-on ~ #tabs-bar .tab.application-preferences {
    display: grid;
}
#app-space {

    &.state-off,
    &.state-paused,
    &:not(.active-app-preferences) {
        #tabs-bar .tab.application-preferences .app-name:before {
            background-color: transparent !important;
        }

        /* Per-tab object-name (e.g. workspace title on the workspaces /
           documents tabs) only shows when that tab's app is the active
           one — keeps inactive tabs compact. */
        #tabs-bar .tab.application-preferences .object-name {
            display: none;
        }
    }

    &:not(.active-app-preferences) #tabs-bar .tab.application-preferences .more-menu-toggle,
    &.state-paused #tabs-bar .tab .more-menu-toggle,
    &.state-paused #application-body + .application-label .more-menu-toggle {
        filter: var(--tabs-bar-tab-app-icon-filter-dimmed);
        display: none;
    }

    &.state-paused #application-body + .application-label .breadcrumbs a:before {
        filter: var(--tabs-bar-tab-app-icon-filter-dimmed);
    }

    &.active-app-preferences.state-on,
    &.state-on #application-body + .application-label .breadcrumbs a:before {
        .tab.application-preferences .app-name:before {
            filter: invert(0%) !important;
            opacity: 1 !important;
        }

        #application-body-preferences {
            display: block;
        }
    }
}
#app-space.active-app-preferences.state-on #application-body-preferences {
    display: block;
}

/* The active tab's icon at full strength. */
.tab.application-preferences[data-active] .app-name:before {
    filter: invert(0%) !important;
}
:root {
  --app-colour-present: #C43E1C;
}

/* State comes from marks in the DOM, never from a body-rooted match: this
   template is stamped out once per app, so one such selector becomes 72.
   See the generator's header note. */
.app-present,
#tabs-bar .tab.application-present[data-active],
body.kik-space-on .application-present + .application-label {
    --app-colour: var(--app-colour-present);
}
/* Inline SVG icons painted with ``currentColor`` (e.g. on a help page
   head, or in a portlet header) pick up the app's brand colour from
   here. The canonical ``<img>`` tile icons stay white because <img>
   doesn't propagate ``color``. */
svg.app-icon.app-present,
span.app-icon.app-present {
    color: var(--app-colour-present);
}
.quaive-portlet.app-present .well-header:before {
    background-image: url(../../app-icons/artefacts/present.svg);
}
.tab.application-present .app-name:before,
.application-present + .application-label .breadcrumbs a:before {
    background-image: url(../../app-icons/artefacts/present.svg);
}
#application-body-present.state-on ~ #tabs-bar .tab.application-present {
    display: grid;
}
#app-space {

    &.state-off,
    &.state-paused,
    &:not(.active-app-present) {
        #tabs-bar .tab.application-present .app-name:before {
            background-color: transparent !important;
        }

        /* Per-tab object-name (e.g. workspace title on the workspaces /
           documents tabs) only shows when that tab's app is the active
           one — keeps inactive tabs compact. */
        #tabs-bar .tab.application-present .object-name {
            display: none;
        }
    }

    &:not(.active-app-present) #tabs-bar .tab.application-present .more-menu-toggle,
    &.state-paused #tabs-bar .tab .more-menu-toggle,
    &.state-paused #application-body + .application-label .more-menu-toggle {
        filter: var(--tabs-bar-tab-app-icon-filter-dimmed);
        display: none;
    }

    &.state-paused #application-body + .application-label .breadcrumbs a:before {
        filter: var(--tabs-bar-tab-app-icon-filter-dimmed);
    }

    &.active-app-present.state-on,
    &.state-on #application-body + .application-label .breadcrumbs a:before {
        .tab.application-present .app-name:before {
            filter: invert(0%) !important;
            opacity: 1 !important;
        }

        #application-body-present {
            display: block;
        }
    }
}
#app-space.active-app-present.state-on #application-body-present {
    display: block;
}

/* The active tab's icon at full strength. */
.tab.application-present[data-active] .app-name:before {
    filter: invert(0%) !important;
}
:root {
  --app-colour-profile: #6e6862;
}

/* State comes from marks in the DOM, never from a body-rooted match: this
   template is stamped out once per app, so one such selector becomes 72.
   See the generator's header note. */
.app-profile,
#tabs-bar .tab.application-profile[data-active],
body.kik-space-on .application-profile + .application-label {
    --app-colour: var(--app-colour-profile);
}
/* Inline SVG icons painted with ``currentColor`` (e.g. on a help page
   head, or in a portlet header) pick up the app's brand colour from
   here. The canonical ``<img>`` tile icons stay white because <img>
   doesn't propagate ``color``. */
svg.app-icon.app-profile,
span.app-icon.app-profile {
    color: var(--app-colour-profile);
}
.quaive-portlet.app-profile .well-header:before {
    background-image: url(../../app-icons/artefacts/profile.svg);
}
.tab.application-profile .app-name:before,
.application-profile + .application-label .breadcrumbs a:before {
    background-image: url(../../app-icons/artefacts/profile.svg);
}
#application-body-profile.state-on ~ #tabs-bar .tab.application-profile {
    display: grid;
}
#app-space {

    &.state-off,
    &.state-paused,
    &:not(.active-app-profile) {
        #tabs-bar .tab.application-profile .app-name:before {
            background-color: transparent !important;
        }

        /* Per-tab object-name (e.g. workspace title on the workspaces /
           documents tabs) only shows when that tab's app is the active
           one — keeps inactive tabs compact. */
        #tabs-bar .tab.application-profile .object-name {
            display: none;
        }
    }

    &:not(.active-app-profile) #tabs-bar .tab.application-profile .more-menu-toggle,
    &.state-paused #tabs-bar .tab .more-menu-toggle,
    &.state-paused #application-body + .application-label .more-menu-toggle {
        filter: var(--tabs-bar-tab-app-icon-filter-dimmed);
        display: none;
    }

    &.state-paused #application-body + .application-label .breadcrumbs a:before {
        filter: var(--tabs-bar-tab-app-icon-filter-dimmed);
    }

    &.active-app-profile.state-on,
    &.state-on #application-body + .application-label .breadcrumbs a:before {
        .tab.application-profile .app-name:before {
            filter: invert(0%) !important;
            opacity: 1 !important;
        }

        #application-body-profile {
            display: block;
        }
    }
}
#app-space.active-app-profile.state-on #application-body-profile {
    display: block;
}

/* The active tab's icon at full strength. */
.tab.application-profile[data-active] .app-name:before {
    filter: invert(0%) !important;
}
:root {
  --app-colour-publisher: #1668b8;
}

/* State comes from marks in the DOM, never from a body-rooted match: this
   template is stamped out once per app, so one such selector becomes 72.
   See the generator's header note. */
.app-publisher,
#tabs-bar .tab.application-publisher[data-active],
body.kik-space-on .application-publisher + .application-label {
    --app-colour: var(--app-colour-publisher);
}
/* Inline SVG icons painted with ``currentColor`` (e.g. on a help page
   head, or in a portlet header) pick up the app's brand colour from
   here. The canonical ``<img>`` tile icons stay white because <img>
   doesn't propagate ``color``. */
svg.app-icon.app-publisher,
span.app-icon.app-publisher {
    color: var(--app-colour-publisher);
}
.quaive-portlet.app-publisher .well-header:before {
    background-image: url(../../app-icons/artefacts/publisher.svg);
}
.tab.application-publisher .app-name:before,
.application-publisher + .application-label .breadcrumbs a:before {
    background-image: url(../../app-icons/artefacts/publisher.svg);
}
#application-body-publisher.state-on ~ #tabs-bar .tab.application-publisher {
    display: grid;
}
#app-space {

    &.state-off,
    &.state-paused,
    &:not(.active-app-publisher) {
        #tabs-bar .tab.application-publisher .app-name:before {
            background-color: transparent !important;
        }

        /* Per-tab object-name (e.g. workspace title on the workspaces /
           documents tabs) only shows when that tab's app is the active
           one — keeps inactive tabs compact. */
        #tabs-bar .tab.application-publisher .object-name {
            display: none;
        }
    }

    &:not(.active-app-publisher) #tabs-bar .tab.application-publisher .more-menu-toggle,
    &.state-paused #tabs-bar .tab .more-menu-toggle,
    &.state-paused #application-body + .application-label .more-menu-toggle {
        filter: var(--tabs-bar-tab-app-icon-filter-dimmed);
        display: none;
    }

    &.state-paused #application-body + .application-label .breadcrumbs a:before {
        filter: var(--tabs-bar-tab-app-icon-filter-dimmed);
    }

    &.active-app-publisher.state-on,
    &.state-on #application-body + .application-label .breadcrumbs a:before {
        .tab.application-publisher .app-name:before {
            filter: invert(0%) !important;
            opacity: 1 !important;
        }

        #application-body-publisher {
            display: block;
        }
    }
}
#app-space.active-app-publisher.state-on #application-body-publisher {
    display: block;
}

/* The active tab's icon at full strength. */
.tab.application-publisher[data-active] .app-name:before {
    filter: invert(0%) !important;
}
:root {
  --app-colour-registration: #1a2030;
}

/* State comes from marks in the DOM, never from a body-rooted match: this
   template is stamped out once per app, so one such selector becomes 72.
   See the generator's header note. */
.app-registration,
#tabs-bar .tab.application-registration[data-active],
body.kik-space-on .application-registration + .application-label {
    --app-colour: var(--app-colour-registration);
}
/* Inline SVG icons painted with ``currentColor`` (e.g. on a help page
   head, or in a portlet header) pick up the app's brand colour from
   here. The canonical ``<img>`` tile icons stay white because <img>
   doesn't propagate ``color``. */
svg.app-icon.app-registration,
span.app-icon.app-registration {
    color: var(--app-colour-registration);
}
.quaive-portlet.app-registration .well-header:before {
    background-image: url(../../app-icons/artefacts/registration.svg);
}
.tab.application-registration .app-name:before,
.application-registration + .application-label .breadcrumbs a:before {
    background-image: url(../../app-icons/artefacts/registration.svg);
}
#application-body-registration.state-on ~ #tabs-bar .tab.application-registration {
    display: grid;
}
#app-space {

    &.state-off,
    &.state-paused,
    &:not(.active-app-registration) {
        #tabs-bar .tab.application-registration .app-name:before {
            background-color: transparent !important;
        }

        /* Per-tab object-name (e.g. workspace title on the workspaces /
           documents tabs) only shows when that tab's app is the active
           one — keeps inactive tabs compact. */
        #tabs-bar .tab.application-registration .object-name {
            display: none;
        }
    }

    &:not(.active-app-registration) #tabs-bar .tab.application-registration .more-menu-toggle,
    &.state-paused #tabs-bar .tab .more-menu-toggle,
    &.state-paused #application-body + .application-label .more-menu-toggle {
        filter: var(--tabs-bar-tab-app-icon-filter-dimmed);
        display: none;
    }

    &.state-paused #application-body + .application-label .breadcrumbs a:before {
        filter: var(--tabs-bar-tab-app-icon-filter-dimmed);
    }

    &.active-app-registration.state-on,
    &.state-on #application-body + .application-label .breadcrumbs a:before {
        .tab.application-registration .app-name:before {
            filter: invert(0%) !important;
            opacity: 1 !important;
        }

        #application-body-registration {
            display: block;
        }
    }
}
#app-space.active-app-registration.state-on #application-body-registration {
    display: block;
}

/* The active tab's icon at full strength. */
.tab.application-registration[data-active] .app-name:before {
    filter: invert(0%) !important;
}
:root {
  --app-colour-reminders: Purple;
}

/* State comes from marks in the DOM, never from a body-rooted match: this
   template is stamped out once per app, so one such selector becomes 72.
   See the generator's header note. */
.app-reminders,
#tabs-bar .tab.application-reminders[data-active],
body.kik-space-on .application-reminders + .application-label {
    --app-colour: var(--app-colour-reminders);
}
/* Inline SVG icons painted with ``currentColor`` (e.g. on a help page
   head, or in a portlet header) pick up the app's brand colour from
   here. The canonical ``<img>`` tile icons stay white because <img>
   doesn't propagate ``color``. */
svg.app-icon.app-reminders,
span.app-icon.app-reminders {
    color: var(--app-colour-reminders);
}
.quaive-portlet.app-reminders .well-header:before {
    background-image: url(../../app-icons/artefacts/reminders.svg);
}
.tab.application-reminders .app-name:before,
.application-reminders + .application-label .breadcrumbs a:before {
    background-image: url(../../app-icons/artefacts/reminders.svg);
}
#application-body-reminders.state-on ~ #tabs-bar .tab.application-reminders {
    display: grid;
}
#app-space {

    &.state-off,
    &.state-paused,
    &:not(.active-app-reminders) {
        #tabs-bar .tab.application-reminders .app-name:before {
            background-color: transparent !important;
        }

        /* Per-tab object-name (e.g. workspace title on the workspaces /
           documents tabs) only shows when that tab's app is the active
           one — keeps inactive tabs compact. */
        #tabs-bar .tab.application-reminders .object-name {
            display: none;
        }
    }

    &:not(.active-app-reminders) #tabs-bar .tab.application-reminders .more-menu-toggle,
    &.state-paused #tabs-bar .tab .more-menu-toggle,
    &.state-paused #application-body + .application-label .more-menu-toggle {
        filter: var(--tabs-bar-tab-app-icon-filter-dimmed);
        display: none;
    }

    &.state-paused #application-body + .application-label .breadcrumbs a:before {
        filter: var(--tabs-bar-tab-app-icon-filter-dimmed);
    }

    &.active-app-reminders.state-on,
    &.state-on #application-body + .application-label .breadcrumbs a:before {
        .tab.application-reminders .app-name:before {
            filter: invert(0%) !important;
            opacity: 1 !important;
        }

        #application-body-reminders {
            display: block;
        }
    }
}
#app-space.active-app-reminders.state-on #application-body-reminders {
    display: block;
}

/* The active tab's icon at full strength. */
.tab.application-reminders[data-active] .app-name:before {
    filter: invert(0%) !important;
}
:root {
  --app-colour-sabra: #1E6F5C;
}

/* State comes from marks in the DOM, never from a body-rooted match: this
   template is stamped out once per app, so one such selector becomes 72.
   See the generator's header note. */
.app-sabra,
#tabs-bar .tab.application-sabra[data-active],
body.kik-space-on .application-sabra + .application-label {
    --app-colour: var(--app-colour-sabra);
}
/* Inline SVG icons painted with ``currentColor`` (e.g. on a help page
   head, or in a portlet header) pick up the app's brand colour from
   here. The canonical ``<img>`` tile icons stay white because <img>
   doesn't propagate ``color``. */
svg.app-icon.app-sabra,
span.app-icon.app-sabra {
    color: var(--app-colour-sabra);
}
.quaive-portlet.app-sabra .well-header:before {
    background-image: url(../../app-icons/artefacts/sabra.svg);
}
.tab.application-sabra .app-name:before,
.application-sabra + .application-label .breadcrumbs a:before {
    background-image: url(../../app-icons/artefacts/sabra.svg);
}
#application-body-sabra.state-on ~ #tabs-bar .tab.application-sabra {
    display: grid;
}
#app-space {

    &.state-off,
    &.state-paused,
    &:not(.active-app-sabra) {
        #tabs-bar .tab.application-sabra .app-name:before {
            background-color: transparent !important;
        }

        /* Per-tab object-name (e.g. workspace title on the workspaces /
           documents tabs) only shows when that tab's app is the active
           one — keeps inactive tabs compact. */
        #tabs-bar .tab.application-sabra .object-name {
            display: none;
        }
    }

    &:not(.active-app-sabra) #tabs-bar .tab.application-sabra .more-menu-toggle,
    &.state-paused #tabs-bar .tab .more-menu-toggle,
    &.state-paused #application-body + .application-label .more-menu-toggle {
        filter: var(--tabs-bar-tab-app-icon-filter-dimmed);
        display: none;
    }

    &.state-paused #application-body + .application-label .breadcrumbs a:before {
        filter: var(--tabs-bar-tab-app-icon-filter-dimmed);
    }

    &.active-app-sabra.state-on,
    &.state-on #application-body + .application-label .breadcrumbs a:before {
        .tab.application-sabra .app-name:before {
            filter: invert(0%) !important;
            opacity: 1 !important;
        }

        #application-body-sabra {
            display: block;
        }
    }
}
#app-space.active-app-sabra.state-on #application-body-sabra {
    display: block;
}

/* The active tab's icon at full strength. */
.tab.application-sabra[data-active] .app-name:before {
    filter: invert(0%) !important;
}
:root {
  --app-colour-search: dimgray;
}

/* State comes from marks in the DOM, never from a body-rooted match: this
   template is stamped out once per app, so one such selector becomes 72.
   See the generator's header note. */
.app-search,
#tabs-bar .tab.application-search[data-active],
body.kik-space-on .application-search + .application-label {
    --app-colour: var(--app-colour-search);
}
/* Inline SVG icons painted with ``currentColor`` (e.g. on a help page
   head, or in a portlet header) pick up the app's brand colour from
   here. The canonical ``<img>`` tile icons stay white because <img>
   doesn't propagate ``color``. */
svg.app-icon.app-search,
span.app-icon.app-search {
    color: var(--app-colour-search);
}
.quaive-portlet.app-search .well-header:before {
    background-image: url(../../app-icons/artefacts/search.svg);
}
.tab.application-search .app-name:before,
.application-search + .application-label .breadcrumbs a:before {
    background-image: url(../../app-icons/artefacts/search.svg);
}
#application-body-search.state-on ~ #tabs-bar .tab.application-search {
    display: grid;
}
#app-space {

    &.state-off,
    &.state-paused,
    &:not(.active-app-search) {
        #tabs-bar .tab.application-search .app-name:before {
            background-color: transparent !important;
        }

        /* Per-tab object-name (e.g. workspace title on the workspaces /
           documents tabs) only shows when that tab's app is the active
           one — keeps inactive tabs compact. */
        #tabs-bar .tab.application-search .object-name {
            display: none;
        }
    }

    &:not(.active-app-search) #tabs-bar .tab.application-search .more-menu-toggle,
    &.state-paused #tabs-bar .tab .more-menu-toggle,
    &.state-paused #application-body + .application-label .more-menu-toggle {
        filter: var(--tabs-bar-tab-app-icon-filter-dimmed);
        display: none;
    }

    &.state-paused #application-body + .application-label .breadcrumbs a:before {
        filter: var(--tabs-bar-tab-app-icon-filter-dimmed);
    }

    &.active-app-search.state-on,
    &.state-on #application-body + .application-label .breadcrumbs a:before {
        .tab.application-search .app-name:before {
            filter: invert(0%) !important;
            opacity: 1 !important;
        }

        #application-body-search {
            display: block;
        }
    }
}
#app-space.active-app-search.state-on #application-body-search {
    display: block;
}

/* The active tab's icon at full strength. */
.tab.application-search[data-active] .app-name:before {
    filter: invert(0%) !important;
}
:root {
  --app-colour-setup: #4a6f95;
}

/* State comes from marks in the DOM, never from a body-rooted match: this
   template is stamped out once per app, so one such selector becomes 72.
   See the generator's header note. */
.app-setup,
#tabs-bar .tab.application-setup[data-active],
body.kik-space-on .application-setup + .application-label {
    --app-colour: var(--app-colour-setup);
}
/* Inline SVG icons painted with ``currentColor`` (e.g. on a help page
   head, or in a portlet header) pick up the app's brand colour from
   here. The canonical ``<img>`` tile icons stay white because <img>
   doesn't propagate ``color``. */
svg.app-icon.app-setup,
span.app-icon.app-setup {
    color: var(--app-colour-setup);
}
.quaive-portlet.app-setup .well-header:before {
    background-image: url(../../app-icons/artefacts/setup.svg);
}
.tab.application-setup .app-name:before,
.application-setup + .application-label .breadcrumbs a:before {
    background-image: url(../../app-icons/artefacts/setup.svg);
}
#application-body-setup.state-on ~ #tabs-bar .tab.application-setup {
    display: grid;
}
#app-space {

    &.state-off,
    &.state-paused,
    &:not(.active-app-setup) {
        #tabs-bar .tab.application-setup .app-name:before {
            background-color: transparent !important;
        }

        /* Per-tab object-name (e.g. workspace title on the workspaces /
           documents tabs) only shows when that tab's app is the active
           one — keeps inactive tabs compact. */
        #tabs-bar .tab.application-setup .object-name {
            display: none;
        }
    }

    &:not(.active-app-setup) #tabs-bar .tab.application-setup .more-menu-toggle,
    &.state-paused #tabs-bar .tab .more-menu-toggle,
    &.state-paused #application-body + .application-label .more-menu-toggle {
        filter: var(--tabs-bar-tab-app-icon-filter-dimmed);
        display: none;
    }

    &.state-paused #application-body + .application-label .breadcrumbs a:before {
        filter: var(--tabs-bar-tab-app-icon-filter-dimmed);
    }

    &.active-app-setup.state-on,
    &.state-on #application-body + .application-label .breadcrumbs a:before {
        .tab.application-setup .app-name:before {
            filter: invert(0%) !important;
            opacity: 1 !important;
        }

        #application-body-setup {
            display: block;
        }
    }
}
#app-space.active-app-setup.state-on #application-body-setup {
    display: block;
}

/* The active tab's icon at full strength. */
.tab.application-setup[data-active] .app-name:before {
    filter: invert(0%) !important;
}
:root {
  --app-colour-signup: #5BA17F;
}

/* State comes from marks in the DOM, never from a body-rooted match: this
   template is stamped out once per app, so one such selector becomes 72.
   See the generator's header note. */
.app-signup,
#tabs-bar .tab.application-signup[data-active],
body.kik-space-on .application-signup + .application-label {
    --app-colour: var(--app-colour-signup);
}
/* Inline SVG icons painted with ``currentColor`` (e.g. on a help page
   head, or in a portlet header) pick up the app's brand colour from
   here. The canonical ``<img>`` tile icons stay white because <img>
   doesn't propagate ``color``. */
svg.app-icon.app-signup,
span.app-icon.app-signup {
    color: var(--app-colour-signup);
}
.quaive-portlet.app-signup .well-header:before {
    background-image: url(../../app-icons/artefacts/signup.svg);
}
.tab.application-signup .app-name:before,
.application-signup + .application-label .breadcrumbs a:before {
    background-image: url(../../app-icons/artefacts/signup.svg);
}
#application-body-signup.state-on ~ #tabs-bar .tab.application-signup {
    display: grid;
}
#app-space {

    &.state-off,
    &.state-paused,
    &:not(.active-app-signup) {
        #tabs-bar .tab.application-signup .app-name:before {
            background-color: transparent !important;
        }

        /* Per-tab object-name (e.g. workspace title on the workspaces /
           documents tabs) only shows when that tab's app is the active
           one — keeps inactive tabs compact. */
        #tabs-bar .tab.application-signup .object-name {
            display: none;
        }
    }

    &:not(.active-app-signup) #tabs-bar .tab.application-signup .more-menu-toggle,
    &.state-paused #tabs-bar .tab .more-menu-toggle,
    &.state-paused #application-body + .application-label .more-menu-toggle {
        filter: var(--tabs-bar-tab-app-icon-filter-dimmed);
        display: none;
    }

    &.state-paused #application-body + .application-label .breadcrumbs a:before {
        filter: var(--tabs-bar-tab-app-icon-filter-dimmed);
    }

    &.active-app-signup.state-on,
    &.state-on #application-body + .application-label .breadcrumbs a:before {
        .tab.application-signup .app-name:before {
            filter: invert(0%) !important;
            opacity: 1 !important;
        }

        #application-body-signup {
            display: block;
        }
    }
}
#app-space.active-app-signup.state-on #application-body-signup {
    display: block;
}

/* The active tab's icon at full strength. */
.tab.application-signup[data-active] .app-name:before {
    filter: invert(0%) !important;
}
:root {
  --app-colour-slide-bank: #b8232c;
}

/* State comes from marks in the DOM, never from a body-rooted match: this
   template is stamped out once per app, so one such selector becomes 72.
   See the generator's header note. */
.app-slide-bank,
#tabs-bar .tab.application-slide-bank[data-active],
body.kik-space-on .application-slide-bank + .application-label {
    --app-colour: var(--app-colour-slide-bank);
}
/* Inline SVG icons painted with ``currentColor`` (e.g. on a help page
   head, or in a portlet header) pick up the app's brand colour from
   here. The canonical ``<img>`` tile icons stay white because <img>
   doesn't propagate ``color``. */
svg.app-icon.app-slide-bank,
span.app-icon.app-slide-bank {
    color: var(--app-colour-slide-bank);
}
.quaive-portlet.app-slide-bank .well-header:before {
    background-image: url(../../app-icons/artefacts/slide-bank.svg);
}
.tab.application-slide-bank .app-name:before,
.application-slide-bank + .application-label .breadcrumbs a:before {
    background-image: url(../../app-icons/artefacts/slide-bank.svg);
}
#application-body-slide-bank.state-on ~ #tabs-bar .tab.application-slide-bank {
    display: grid;
}
#app-space {

    &.state-off,
    &.state-paused,
    &:not(.active-app-slide-bank) {
        #tabs-bar .tab.application-slide-bank .app-name:before {
            background-color: transparent !important;
        }

        /* Per-tab object-name (e.g. workspace title on the workspaces /
           documents tabs) only shows when that tab's app is the active
           one — keeps inactive tabs compact. */
        #tabs-bar .tab.application-slide-bank .object-name {
            display: none;
        }
    }

    &:not(.active-app-slide-bank) #tabs-bar .tab.application-slide-bank .more-menu-toggle,
    &.state-paused #tabs-bar .tab .more-menu-toggle,
    &.state-paused #application-body + .application-label .more-menu-toggle {
        filter: var(--tabs-bar-tab-app-icon-filter-dimmed);
        display: none;
    }

    &.state-paused #application-body + .application-label .breadcrumbs a:before {
        filter: var(--tabs-bar-tab-app-icon-filter-dimmed);
    }

    &.active-app-slide-bank.state-on,
    &.state-on #application-body + .application-label .breadcrumbs a:before {
        .tab.application-slide-bank .app-name:before {
            filter: invert(0%) !important;
            opacity: 1 !important;
        }

        #application-body-slide-bank {
            display: block;
        }
    }
}
#app-space.active-app-slide-bank.state-on #application-body-slide-bank {
    display: block;
}

/* The active tab's icon at full strength. */
.tab.application-slide-bank[data-active] .app-name:before {
    filter: invert(0%) !important;
}
:root {
  --app-colour-team-spaces: SeaGreen;
}

/* State comes from marks in the DOM, never from a body-rooted match: this
   template is stamped out once per app, so one such selector becomes 72.
   See the generator's header note. */
.app-team-spaces,
#tabs-bar .tab.application-team-spaces[data-active],
body.kik-space-on .application-team-spaces + .application-label {
    --app-colour: var(--app-colour-team-spaces);
}
/* Inline SVG icons painted with ``currentColor`` (e.g. on a help page
   head, or in a portlet header) pick up the app's brand colour from
   here. The canonical ``<img>`` tile icons stay white because <img>
   doesn't propagate ``color``. */
svg.app-icon.app-team-spaces,
span.app-icon.app-team-spaces {
    color: var(--app-colour-team-spaces);
}
.quaive-portlet.app-team-spaces .well-header:before {
    background-image: url(../../app-icons/artefacts/team-spaces.svg);
}
.tab.application-team-spaces .app-name:before,
.application-team-spaces + .application-label .breadcrumbs a:before {
    background-image: url(../../app-icons/artefacts/team-spaces.svg);
}
#application-body-team-spaces.state-on ~ #tabs-bar .tab.application-team-spaces {
    display: grid;
}
#app-space {

    &.state-off,
    &.state-paused,
    &:not(.active-app-team-spaces) {
        #tabs-bar .tab.application-team-spaces .app-name:before {
            background-color: transparent !important;
        }

        /* Per-tab object-name (e.g. workspace title on the workspaces /
           documents tabs) only shows when that tab's app is the active
           one — keeps inactive tabs compact. */
        #tabs-bar .tab.application-team-spaces .object-name {
            display: none;
        }
    }

    &:not(.active-app-team-spaces) #tabs-bar .tab.application-team-spaces .more-menu-toggle,
    &.state-paused #tabs-bar .tab .more-menu-toggle,
    &.state-paused #application-body + .application-label .more-menu-toggle {
        filter: var(--tabs-bar-tab-app-icon-filter-dimmed);
        display: none;
    }

    &.state-paused #application-body + .application-label .breadcrumbs a:before {
        filter: var(--tabs-bar-tab-app-icon-filter-dimmed);
    }

    &.active-app-team-spaces.state-on,
    &.state-on #application-body + .application-label .breadcrumbs a:before {
        .tab.application-team-spaces .app-name:before {
            filter: invert(0%) !important;
            opacity: 1 !important;
        }

        #application-body-team-spaces {
            display: block;
        }
    }
}
#app-space.active-app-team-spaces.state-on #application-body-team-spaces {
    display: block;
}

/* The active tab's icon at full strength. */
.tab.application-team-spaces[data-active] .app-name:before {
    filter: invert(0%) !important;
}
:root {
  --app-colour-todo: Purple;
}

/* State comes from marks in the DOM, never from a body-rooted match: this
   template is stamped out once per app, so one such selector becomes 72.
   See the generator's header note. */
.app-todo,
#tabs-bar .tab.application-todo[data-active],
body.kik-space-on .application-todo + .application-label {
    --app-colour: var(--app-colour-todo);
}
/* Inline SVG icons painted with ``currentColor`` (e.g. on a help page
   head, or in a portlet header) pick up the app's brand colour from
   here. The canonical ``<img>`` tile icons stay white because <img>
   doesn't propagate ``color``. */
svg.app-icon.app-todo,
span.app-icon.app-todo {
    color: var(--app-colour-todo);
}
.quaive-portlet.app-todo .well-header:before {
    background-image: url(../../app-icons/artefacts/todo.svg);
}
.tab.application-todo .app-name:before,
.application-todo + .application-label .breadcrumbs a:before {
    background-image: url(../../app-icons/artefacts/todo.svg);
}
#application-body-todo.state-on ~ #tabs-bar .tab.application-todo {
    display: grid;
}
#app-space {

    &.state-off,
    &.state-paused,
    &:not(.active-app-todo) {
        #tabs-bar .tab.application-todo .app-name:before {
            background-color: transparent !important;
        }

        /* Per-tab object-name (e.g. workspace title on the workspaces /
           documents tabs) only shows when that tab's app is the active
           one — keeps inactive tabs compact. */
        #tabs-bar .tab.application-todo .object-name {
            display: none;
        }
    }

    &:not(.active-app-todo) #tabs-bar .tab.application-todo .more-menu-toggle,
    &.state-paused #tabs-bar .tab .more-menu-toggle,
    &.state-paused #application-body + .application-label .more-menu-toggle {
        filter: var(--tabs-bar-tab-app-icon-filter-dimmed);
        display: none;
    }

    &.state-paused #application-body + .application-label .breadcrumbs a:before {
        filter: var(--tabs-bar-tab-app-icon-filter-dimmed);
    }

    &.active-app-todo.state-on,
    &.state-on #application-body + .application-label .breadcrumbs a:before {
        .tab.application-todo .app-name:before {
            filter: invert(0%) !important;
            opacity: 1 !important;
        }

        #application-body-todo {
            display: block;
        }
    }
}
#app-space.active-app-todo.state-on #application-body-todo {
    display: block;
}

/* The active tab's icon at full strength. */
.tab.application-todo[data-active] .app-name:before {
    filter: invert(0%) !important;
}
:root {
  --app-colour-todo-legacy: #c73d78;
}

/* State comes from marks in the DOM, never from a body-rooted match: this
   template is stamped out once per app, so one such selector becomes 72.
   See the generator's header note. */
.app-todo-legacy,
#tabs-bar .tab.application-todo-legacy[data-active],
body.kik-space-on .application-todo-legacy + .application-label {
    --app-colour: var(--app-colour-todo-legacy);
}
/* Inline SVG icons painted with ``currentColor`` (e.g. on a help page
   head, or in a portlet header) pick up the app's brand colour from
   here. The canonical ``<img>`` tile icons stay white because <img>
   doesn't propagate ``color``. */
svg.app-icon.app-todo-legacy,
span.app-icon.app-todo-legacy {
    color: var(--app-colour-todo-legacy);
}
.quaive-portlet.app-todo-legacy .well-header:before {
    background-image: url(../../app-icons/artefacts/todo-legacy.svg);
}
.tab.application-todo-legacy .app-name:before,
.application-todo-legacy + .application-label .breadcrumbs a:before {
    background-image: url(../../app-icons/artefacts/todo-legacy.svg);
}
#application-body-todo-legacy.state-on ~ #tabs-bar .tab.application-todo-legacy {
    display: grid;
}
#app-space {

    &.state-off,
    &.state-paused,
    &:not(.active-app-todo-legacy) {
        #tabs-bar .tab.application-todo-legacy .app-name:before {
            background-color: transparent !important;
        }

        /* Per-tab object-name (e.g. workspace title on the workspaces /
           documents tabs) only shows when that tab's app is the active
           one — keeps inactive tabs compact. */
        #tabs-bar .tab.application-todo-legacy .object-name {
            display: none;
        }
    }

    &:not(.active-app-todo-legacy) #tabs-bar .tab.application-todo-legacy .more-menu-toggle,
    &.state-paused #tabs-bar .tab .more-menu-toggle,
    &.state-paused #application-body + .application-label .more-menu-toggle {
        filter: var(--tabs-bar-tab-app-icon-filter-dimmed);
        display: none;
    }

    &.state-paused #application-body + .application-label .breadcrumbs a:before {
        filter: var(--tabs-bar-tab-app-icon-filter-dimmed);
    }

    &.active-app-todo-legacy.state-on,
    &.state-on #application-body + .application-label .breadcrumbs a:before {
        .tab.application-todo-legacy .app-name:before {
            filter: invert(0%) !important;
            opacity: 1 !important;
        }

        #application-body-todo-legacy {
            display: block;
        }
    }
}
#app-space.active-app-todo-legacy.state-on #application-body-todo-legacy {
    display: block;
}

/* The active tab's icon at full strength. */
.tab.application-todo-legacy[data-active] .app-name:before {
    filter: invert(0%) !important;
}
:root {
  --app-colour-updates: #6c5ce7;
}

/* State comes from marks in the DOM, never from a body-rooted match: this
   template is stamped out once per app, so one such selector becomes 72.
   See the generator's header note. */
.app-updates,
#tabs-bar .tab.application-updates[data-active],
body.kik-space-on .application-updates + .application-label {
    --app-colour: var(--app-colour-updates);
}
/* Inline SVG icons painted with ``currentColor`` (e.g. on a help page
   head, or in a portlet header) pick up the app's brand colour from
   here. The canonical ``<img>`` tile icons stay white because <img>
   doesn't propagate ``color``. */
svg.app-icon.app-updates,
span.app-icon.app-updates {
    color: var(--app-colour-updates);
}
.quaive-portlet.app-updates .well-header:before {
    background-image: url(../../app-icons/artefacts/updates.svg);
}
.tab.application-updates .app-name:before,
.application-updates + .application-label .breadcrumbs a:before {
    background-image: url(../../app-icons/artefacts/updates.svg);
}
#application-body-updates.state-on ~ #tabs-bar .tab.application-updates {
    display: grid;
}
#app-space {

    &.state-off,
    &.state-paused,
    &:not(.active-app-updates) {
        #tabs-bar .tab.application-updates .app-name:before {
            background-color: transparent !important;
        }

        /* Per-tab object-name (e.g. workspace title on the workspaces /
           documents tabs) only shows when that tab's app is the active
           one — keeps inactive tabs compact. */
        #tabs-bar .tab.application-updates .object-name {
            display: none;
        }
    }

    &:not(.active-app-updates) #tabs-bar .tab.application-updates .more-menu-toggle,
    &.state-paused #tabs-bar .tab .more-menu-toggle,
    &.state-paused #application-body + .application-label .more-menu-toggle {
        filter: var(--tabs-bar-tab-app-icon-filter-dimmed);
        display: none;
    }

    &.state-paused #application-body + .application-label .breadcrumbs a:before {
        filter: var(--tabs-bar-tab-app-icon-filter-dimmed);
    }

    &.active-app-updates.state-on,
    &.state-on #application-body + .application-label .breadcrumbs a:before {
        .tab.application-updates .app-name:before {
            filter: invert(0%) !important;
            opacity: 1 !important;
        }

        #application-body-updates {
            display: block;
        }
    }
}
#app-space.active-app-updates.state-on #application-body-updates {
    display: block;
}

/* The active tab's icon at full strength. */
.tab.application-updates[data-active] .app-name:before {
    filter: invert(0%) !important;
}
:root {
  --app-colour-weather: #2E97D4;
}

/* State comes from marks in the DOM, never from a body-rooted match: this
   template is stamped out once per app, so one such selector becomes 72.
   See the generator's header note. */
.app-weather,
#tabs-bar .tab.application-weather[data-active],
body.kik-space-on .application-weather + .application-label {
    --app-colour: var(--app-colour-weather);
}
/* Inline SVG icons painted with ``currentColor`` (e.g. on a help page
   head, or in a portlet header) pick up the app's brand colour from
   here. The canonical ``<img>`` tile icons stay white because <img>
   doesn't propagate ``color``. */
svg.app-icon.app-weather,
span.app-icon.app-weather {
    color: var(--app-colour-weather);
}
.quaive-portlet.app-weather .well-header:before {
    background-image: url(../../app-icons/artefacts/weather.svg);
}
.tab.application-weather .app-name:before,
.application-weather + .application-label .breadcrumbs a:before {
    background-image: url(../../app-icons/artefacts/weather.svg);
}
#application-body-weather.state-on ~ #tabs-bar .tab.application-weather {
    display: grid;
}
#app-space {

    &.state-off,
    &.state-paused,
    &:not(.active-app-weather) {
        #tabs-bar .tab.application-weather .app-name:before {
            background-color: transparent !important;
        }

        /* Per-tab object-name (e.g. workspace title on the workspaces /
           documents tabs) only shows when that tab's app is the active
           one — keeps inactive tabs compact. */
        #tabs-bar .tab.application-weather .object-name {
            display: none;
        }
    }

    &:not(.active-app-weather) #tabs-bar .tab.application-weather .more-menu-toggle,
    &.state-paused #tabs-bar .tab .more-menu-toggle,
    &.state-paused #application-body + .application-label .more-menu-toggle {
        filter: var(--tabs-bar-tab-app-icon-filter-dimmed);
        display: none;
    }

    &.state-paused #application-body + .application-label .breadcrumbs a:before {
        filter: var(--tabs-bar-tab-app-icon-filter-dimmed);
    }

    &.active-app-weather.state-on,
    &.state-on #application-body + .application-label .breadcrumbs a:before {
        .tab.application-weather .app-name:before {
            filter: invert(0%) !important;
            opacity: 1 !important;
        }

        #application-body-weather {
            display: block;
        }
    }
}
#app-space.active-app-weather.state-on #application-body-weather {
    display: block;
}

/* The active tab's icon at full strength. */
.tab.application-weather[data-active] .app-name:before {
    filter: invert(0%) !important;
}
:root {
  --app-colour-whiteboard: #6b46c1;
}

/* State comes from marks in the DOM, never from a body-rooted match: this
   template is stamped out once per app, so one such selector becomes 72.
   See the generator's header note. */
.app-whiteboard,
#tabs-bar .tab.application-whiteboard[data-active],
body.kik-space-on .application-whiteboard + .application-label {
    --app-colour: var(--app-colour-whiteboard);
}
/* Inline SVG icons painted with ``currentColor`` (e.g. on a help page
   head, or in a portlet header) pick up the app's brand colour from
   here. The canonical ``<img>`` tile icons stay white because <img>
   doesn't propagate ``color``. */
svg.app-icon.app-whiteboard,
span.app-icon.app-whiteboard {
    color: var(--app-colour-whiteboard);
}
.quaive-portlet.app-whiteboard .well-header:before {
    background-image: url(../../app-icons/artefacts/whiteboard.svg);
}
.tab.application-whiteboard .app-name:before,
.application-whiteboard + .application-label .breadcrumbs a:before {
    background-image: url(../../app-icons/artefacts/whiteboard.svg);
}
#application-body-whiteboard.state-on ~ #tabs-bar .tab.application-whiteboard {
    display: grid;
}
#app-space {

    &.state-off,
    &.state-paused,
    &:not(.active-app-whiteboard) {
        #tabs-bar .tab.application-whiteboard .app-name:before {
            background-color: transparent !important;
        }

        /* Per-tab object-name (e.g. workspace title on the workspaces /
           documents tabs) only shows when that tab's app is the active
           one — keeps inactive tabs compact. */
        #tabs-bar .tab.application-whiteboard .object-name {
            display: none;
        }
    }

    &:not(.active-app-whiteboard) #tabs-bar .tab.application-whiteboard .more-menu-toggle,
    &.state-paused #tabs-bar .tab .more-menu-toggle,
    &.state-paused #application-body + .application-label .more-menu-toggle {
        filter: var(--tabs-bar-tab-app-icon-filter-dimmed);
        display: none;
    }

    &.state-paused #application-body + .application-label .breadcrumbs a:before {
        filter: var(--tabs-bar-tab-app-icon-filter-dimmed);
    }

    &.active-app-whiteboard.state-on,
    &.state-on #application-body + .application-label .breadcrumbs a:before {
        .tab.application-whiteboard .app-name:before {
            filter: invert(0%) !important;
            opacity: 1 !important;
        }

        #application-body-whiteboard {
            display: block;
        }
    }
}
#app-space.active-app-whiteboard.state-on #application-body-whiteboard {
    display: block;
}

/* The active tab's icon at full strength. */
.tab.application-whiteboard[data-active] .app-name:before {
    filter: invert(0%) !important;
}
:root {
  --app-colour-workspaces: DodgerBlue;
}

/* State comes from marks in the DOM, never from a body-rooted match: this
   template is stamped out once per app, so one such selector becomes 72.
   See the generator's header note. */
.app-workspaces,
#tabs-bar .tab.application-workspaces[data-active],
body.kik-space-on .application-workspaces + .application-label {
    --app-colour: var(--app-colour-workspaces);
}
/* Inline SVG icons painted with ``currentColor`` (e.g. on a help page
   head, or in a portlet header) pick up the app's brand colour from
   here. The canonical ``<img>`` tile icons stay white because <img>
   doesn't propagate ``color``. */
svg.app-icon.app-workspaces,
span.app-icon.app-workspaces {
    color: var(--app-colour-workspaces);
}
.quaive-portlet.app-workspaces .well-header:before {
    background-image: url(../../app-icons/artefacts/workspaces.svg);
}
.tab.application-workspaces .app-name:before,
.application-workspaces + .application-label .breadcrumbs a:before {
    background-image: url(../../app-icons/artefacts/workspaces.svg);
}
#application-body-workspaces.state-on ~ #tabs-bar .tab.application-workspaces {
    display: grid;
}
#app-space {

    &.state-off,
    &.state-paused,
    &:not(.active-app-workspaces) {
        #tabs-bar .tab.application-workspaces .app-name:before {
            background-color: transparent !important;
        }

        /* Per-tab object-name (e.g. workspace title on the workspaces /
           documents tabs) only shows when that tab's app is the active
           one — keeps inactive tabs compact. */
        #tabs-bar .tab.application-workspaces .object-name {
            display: none;
        }
    }

    &:not(.active-app-workspaces) #tabs-bar .tab.application-workspaces .more-menu-toggle,
    &.state-paused #tabs-bar .tab .more-menu-toggle,
    &.state-paused #application-body + .application-label .more-menu-toggle {
        filter: var(--tabs-bar-tab-app-icon-filter-dimmed);
        display: none;
    }

    &.state-paused #application-body + .application-label .breadcrumbs a:before {
        filter: var(--tabs-bar-tab-app-icon-filter-dimmed);
    }

    &.active-app-workspaces.state-on,
    &.state-on #application-body + .application-label .breadcrumbs a:before {
        .tab.application-workspaces .app-name:before {
            filter: invert(0%) !important;
            opacity: 1 !important;
        }

        #application-body-workspaces {
            display: block;
        }
    }
}
#app-space.active-app-workspaces.state-on #application-body-workspaces {
    display: block;
}

/* The active tab's icon at full strength. */
.tab.application-workspaces[data-active] .app-name:before {
    filter: invert(0%) !important;
}
:root {
  --app-colour-write: #0f6cbd;
}

/* State comes from marks in the DOM, never from a body-rooted match: this
   template is stamped out once per app, so one such selector becomes 72.
   See the generator's header note. */
.app-write,
#tabs-bar .tab.application-write[data-active],
body.kik-space-on .application-write + .application-label {
    --app-colour: var(--app-colour-write);
}
/* Inline SVG icons painted with ``currentColor`` (e.g. on a help page
   head, or in a portlet header) pick up the app's brand colour from
   here. The canonical ``<img>`` tile icons stay white because <img>
   doesn't propagate ``color``. */
svg.app-icon.app-write,
span.app-icon.app-write {
    color: var(--app-colour-write);
}
.quaive-portlet.app-write .well-header:before {
    background-image: url(../../app-icons/artefacts/write.svg);
}
.tab.application-write .app-name:before,
.application-write + .application-label .breadcrumbs a:before {
    background-image: url(../../app-icons/artefacts/write.svg);
}
#application-body-write.state-on ~ #tabs-bar .tab.application-write {
    display: grid;
}
#app-space {

    &.state-off,
    &.state-paused,
    &:not(.active-app-write) {
        #tabs-bar .tab.application-write .app-name:before {
            background-color: transparent !important;
        }

        /* Per-tab object-name (e.g. workspace title on the workspaces /
           documents tabs) only shows when that tab's app is the active
           one — keeps inactive tabs compact. */
        #tabs-bar .tab.application-write .object-name {
            display: none;
        }
    }

    &:not(.active-app-write) #tabs-bar .tab.application-write .more-menu-toggle,
    &.state-paused #tabs-bar .tab .more-menu-toggle,
    &.state-paused #application-body + .application-label .more-menu-toggle {
        filter: var(--tabs-bar-tab-app-icon-filter-dimmed);
        display: none;
    }

    &.state-paused #application-body + .application-label .breadcrumbs a:before {
        filter: var(--tabs-bar-tab-app-icon-filter-dimmed);
    }

    &.active-app-write.state-on,
    &.state-on #application-body + .application-label .breadcrumbs a:before {
        .tab.application-write .app-name:before {
            filter: invert(0%) !important;
            opacity: 1 !important;
        }

        #application-body-write {
            display: block;
        }
    }
}
#app-space.active-app-write.state-on #application-body-write {
    display: block;
}

/* The active tab's icon at full strength. */
.tab.application-write[data-active] .app-name:before {
    filter: invert(0%) !important;
}

/* Side global nav — rail position follows the active app's sidebar state */
@media only screen and (min-width: calc(768px + 1px)) {
    body[data-global-nav="side"].kik-front-sidebar-closed #global-nav-side {
        left: calc(0.5 * var(--sidebar-padding-right, 25px));
    }
    body[dir="rtl"][data-global-nav="side"].kik-front-sidebar-closed #global-nav-side {
        left: auto;
        right: calc(0.5 * var(--sidebar-padding-right, 25px));
    }
}