/* 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-camera: #383E42;
    --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-design: #4A5C96;
    --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-maps: rgb(23, 108, 96);
    --app-colour-meetings: limegreen;
    --app-colour-messages: #4267B2;
    --app-colour-migration: #2f8f6f;
    --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-radio: #F2820D;
    --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);
}
/* @app-icon-rules:begin — the generator DROPS everything between these two
   markers for an app that has no materialised icon file. Both rules below
   contain nothing but the icon URL, so emitting them for an iconless app buys
   one guaranteed 404 per page and paints nothing. Keep it that way: anything
   added in here disappears for those apps too. */
.quaive-portlet.app-absence .well-header:before {
    background-image: url(../../app-icons/artefacts/absence.svg?v=e1f6ece6bd);
}
.tab.application-absence .app-name:before,
.application-absence + .application-label .breadcrumbs a:before {
    background-image: url(../../app-icons/artefacts/absence.svg?v=e1f6ece6bd);
}
/* @app-icon-rules:end */
#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);
}
/* @app-icon-rules:begin — the generator DROPS everything between these two
   markers for an app that has no materialised icon file. Both rules below
   contain nothing but the icon URL, so emitting them for an iconless app buys
   one guaranteed 404 per page and paints nothing. Keep it that way: anything
   added in here disappears for those apps too. */
.quaive-portlet.app-activities .well-header:before {
    background-image: url(../../app-icons/artefacts/activities.svg?v=d8b2cd45d2);
}
.tab.application-activities .app-name:before,
.application-activities + .application-label .breadcrumbs a:before {
    background-image: url(../../app-icons/artefacts/activities.svg?v=d8b2cd45d2);
}
/* @app-icon-rules:end */
#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);
}
/* @app-icon-rules:begin — the generator DROPS everything between these two
   markers for an app that has no materialised icon file. Both rules below
   contain nothing but the icon URL, so emitting them for an iconless app buys
   one guaranteed 404 per page and paints nothing. Keep it that way: anything
   added in here disappears for those apps too. */
.quaive-portlet.app-administrator .well-header:before {
    background-image: url(../../app-icons/artefacts/administrator.svg?v=9c8ed39405);
}
.tab.application-administrator .app-name:before,
.application-administrator + .application-label .breadcrumbs a:before {
    background-image: url(../../app-icons/artefacts/administrator.svg?v=9c8ed39405);
}
/* @app-icon-rules:end */
#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);
}
/* @app-icon-rules:begin — the generator DROPS everything between these two
   markers for an app that has no materialised icon file. Both rules below
   contain nothing but the icon URL, so emitting them for an iconless app buys
   one guaranteed 404 per page and paints nothing. Keep it that way: anything
   added in here disappears for those apps too. */
.quaive-portlet.app-administrator-tool .well-header:before {
    background-image: url(../../app-icons/artefacts/administrator-tool.svg?v=9c8ed39405);
}
.tab.application-administrator-tool .app-name:before,
.application-administrator-tool + .application-label .breadcrumbs a:before {
    background-image: url(../../app-icons/artefacts/administrator-tool.svg?v=9c8ed39405);
}
/* @app-icon-rules:end */
#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);
}
/* @app-icon-rules:begin — the generator DROPS everything between these two
   markers for an app that has no materialised icon file. Both rules below
   contain nothing but the icon URL, so emitting them for an iconless app buys
   one guaranteed 404 per page and paints nothing. Keep it that way: anything
   added in here disappears for those apps too. */
.quaive-portlet.app-apps .well-header:before {
    background-image: url(../../app-icons/artefacts/apps.svg?v=0057a54acd);
}
.tab.application-apps .app-name:before,
.application-apps + .application-label .breadcrumbs a:before {
    background-image: url(../../app-icons/artefacts/apps.svg?v=0057a54acd);
}
/* @app-icon-rules:end */
#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);
}
/* @app-icon-rules:begin — the generator DROPS everything between these two
   markers for an app that has no materialised icon file. Both rules below
   contain nothing but the icon URL, so emitting them for an iconless app buys
   one guaranteed 404 per page and paints nothing. Keep it that way: anything
   added in here disappears for those apps too. */
.quaive-portlet.app-app-store .well-header:before {
    background-image: url(../../app-icons/artefacts/app-store.svg?v=9ebc6c4dd1);
}
.tab.application-app-store .app-name:before,
.application-app-store + .application-label .breadcrumbs a:before {
    background-image: url(../../app-icons/artefacts/app-store.svg?v=9ebc6c4dd1);
}
/* @app-icon-rules:end */
#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);
}
/* @app-icon-rules:begin — the generator DROPS everything between these two
   markers for an app that has no materialised icon file. Both rules below
   contain nothing but the icon URL, so emitting them for an iconless app buys
   one guaranteed 404 per page and paints nothing. Keep it that way: anything
   added in here disappears for those apps too. */
.quaive-portlet.app-assessments .well-header:before {
    background-image: url(../../app-icons/artefacts/assessments.svg?v=389222aeb6);
}
.tab.application-assessments .app-name:before,
.application-assessments + .application-label .breadcrumbs a:before {
    background-image: url(../../app-icons/artefacts/assessments.svg?v=389222aeb6);
}
/* @app-icon-rules:end */
#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);
}
/* @app-icon-rules:begin — the generator DROPS everything between these two
   markers for an app that has no materialised icon file. Both rules below
   contain nothing but the icon URL, so emitting them for an iconless app buys
   one guaranteed 404 per page and paints nothing. Keep it that way: anything
   added in here disappears for those apps too. */
.quaive-portlet.app-audit .well-header:before {
    background-image: url(../../app-icons/artefacts/audit.svg?v=adb8092d89);
}
.tab.application-audit .app-name:before,
.application-audit + .application-label .breadcrumbs a:before {
    background-image: url(../../app-icons/artefacts/audit.svg?v=adb8092d89);
}
/* @app-icon-rules:end */
#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);
}
/* @app-icon-rules:begin — the generator DROPS everything between these two
   markers for an app that has no materialised icon file. Both rules below
   contain nothing but the icon URL, so emitting them for an iconless app buys
   one guaranteed 404 per page and paints nothing. Keep it that way: anything
   added in here disappears for those apps too. */
.quaive-portlet.app-bookmarks .well-header:before {
    background-image: url(../../app-icons/artefacts/bookmarks.svg?v=4bcf6cfd92);
}
.tab.application-bookmarks .app-name:before,
.application-bookmarks + .application-label .breadcrumbs a:before {
    background-image: url(../../app-icons/artefacts/bookmarks.svg?v=4bcf6cfd92);
}
/* @app-icon-rules:end */
#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);
}
/* @app-icon-rules:begin — the generator DROPS everything between these two
   markers for an app that has no materialised icon file. Both rules below
   contain nothing but the icon URL, so emitting them for an iconless app buys
   one guaranteed 404 per page and paints nothing. Keep it that way: anything
   added in here disappears for those apps too. */
.quaive-portlet.app-calculate .well-header:before {
    background-image: url(../../app-icons/artefacts/calculate.svg?v=f1a59a4099);
}
.tab.application-calculate .app-name:before,
.application-calculate + .application-label .breadcrumbs a:before {
    background-image: url(../../app-icons/artefacts/calculate.svg?v=f1a59a4099);
}
/* @app-icon-rules:end */
#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);
}
/* @app-icon-rules:begin — the generator DROPS everything between these two
   markers for an app that has no materialised icon file. Both rules below
   contain nothing but the icon URL, so emitting them for an iconless app buys
   one guaranteed 404 per page and paints nothing. Keep it that way: anything
   added in here disappears for those apps too. */
.quaive-portlet.app-calendar .well-header:before {
    background-image: url(../../app-icons/artefacts/calendar.svg?v=0a8ce58718);
}
.tab.application-calendar .app-name:before,
.application-calendar + .application-label .breadcrumbs a:before {
    background-image: url(../../app-icons/artefacts/calendar.svg?v=0a8ce58718);
}
/* @app-icon-rules:end */
#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-camera: #383E42;
}

/* 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-camera,
#tabs-bar .tab.application-camera[data-active],
body.kik-space-on .application-camera + .application-label {
    --app-colour: var(--app-colour-camera);
}
/* 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-camera,
span.app-icon.app-camera {
    color: var(--app-colour-camera);
}
/* @app-icon-rules:begin — the generator DROPS everything between these two
   markers for an app that has no materialised icon file. Both rules below
   contain nothing but the icon URL, so emitting them for an iconless app buys
   one guaranteed 404 per page and paints nothing. Keep it that way: anything
   added in here disappears for those apps too. */
.quaive-portlet.app-camera .well-header:before {
    background-image: url(../../app-icons/artefacts/camera.svg?v=e9d7f4e17d);
}
.tab.application-camera .app-name:before,
.application-camera + .application-label .breadcrumbs a:before {
    background-image: url(../../app-icons/artefacts/camera.svg?v=e9d7f4e17d);
}
/* @app-icon-rules:end */
#application-body-camera.state-on ~ #tabs-bar .tab.application-camera {
    display: grid;
}
#app-space {

    &.state-off,
    &.state-paused,
    &:not(.active-app-camera) {
        #tabs-bar .tab.application-camera .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-camera .object-name {
            display: none;
        }
    }

    &:not(.active-app-camera) #tabs-bar .tab.application-camera .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-camera.state-on,
    &.state-on #application-body + .application-label .breadcrumbs a:before {
        .tab.application-camera .app-name:before {
            filter: invert(0%) !important;
            opacity: 1 !important;
        }

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

/* The active tab's icon at full strength. */
.tab.application-camera[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);
}
/* @app-icon-rules:begin — the generator DROPS everything between these two
   markers for an app that has no materialised icon file. Both rules below
   contain nothing but the icon URL, so emitting them for an iconless app buys
   one guaranteed 404 per page and paints nothing. Keep it that way: anything
   added in here disappears for those apps too. */
.quaive-portlet.app-case-manager .well-header:before {
    background-image: url(../../app-icons/artefacts/case-manager.svg?v=6e75dc7ada);
}
.tab.application-case-manager .app-name:before,
.application-case-manager + .application-label .breadcrumbs a:before {
    background-image: url(../../app-icons/artefacts/case-manager.svg?v=6e75dc7ada);
}
/* @app-icon-rules:end */
#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);
}
/* @app-icon-rules:begin — the generator DROPS everything between these two
   markers for an app that has no materialised icon file. Both rules below
   contain nothing but the icon URL, so emitting them for an iconless app buys
   one guaranteed 404 per page and paints nothing. Keep it that way: anything
   added in here disappears for those apps too. */
.quaive-portlet.app-chokhmah .well-header:before {
    background-image: url(../../app-icons/artefacts/chokhmah.svg?v=c1bdcd5fb9);
}
.tab.application-chokhmah .app-name:before,
.application-chokhmah + .application-label .breadcrumbs a:before {
    background-image: url(../../app-icons/artefacts/chokhmah.svg?v=c1bdcd5fb9);
}
/* @app-icon-rules:end */
#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);
}
/* @app-icon-rules:begin — the generator DROPS everything between these two
   markers for an app that has no materialised icon file. Both rules below
   contain nothing but the icon URL, so emitting them for an iconless app buys
   one guaranteed 404 per page and paints nothing. Keep it that way: anything
   added in here disappears for those apps too. */
.quaive-portlet.app-classifieds .well-header:before {
    background-image: url(../../app-icons/artefacts/classifieds.svg?v=57b0d2a278);
}
.tab.application-classifieds .app-name:before,
.application-classifieds + .application-label .breadcrumbs a:before {
    background-image: url(../../app-icons/artefacts/classifieds.svg?v=57b0d2a278);
}
/* @app-icon-rules:end */
#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);
}
#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);
}
/* @app-icon-rules:begin — the generator DROPS everything between these two
   markers for an app that has no materialised icon file. Both rules below
   contain nothing but the icon URL, so emitting them for an iconless app buys
   one guaranteed 404 per page and paints nothing. Keep it that way: anything
   added in here disappears for those apps too. */
.quaive-portlet.app-configuration .well-header:before {
    background-image: url(../../app-icons/artefacts/configuration.svg?v=8604d73dfb);
}
.tab.application-configuration .app-name:before,
.application-configuration + .application-label .breadcrumbs a:before {
    background-image: url(../../app-icons/artefacts/configuration.svg?v=8604d73dfb);
}
/* @app-icon-rules:end */
#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);
}
/* @app-icon-rules:begin — the generator DROPS everything between these two
   markers for an app that has no materialised icon file. Both rules below
   contain nothing but the icon URL, so emitting them for an iconless app buys
   one guaranteed 404 per page and paints nothing. Keep it that way: anything
   added in here disappears for those apps too. */
.quaive-portlet.app-contacts .well-header:before {
    background-image: url(../../app-icons/artefacts/contacts.svg?v=d975ea3bf5);
}
.tab.application-contacts .app-name:before,
.application-contacts + .application-label .breadcrumbs a:before {
    background-image: url(../../app-icons/artefacts/contacts.svg?v=d975ea3bf5);
}
/* @app-icon-rules:end */
#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);
}
/* @app-icon-rules:begin — the generator DROPS everything between these two
   markers for an app that has no materialised icon file. Both rules below
   contain nothing but the icon URL, so emitting them for an iconless app buys
   one guaranteed 404 per page and paints nothing. Keep it that way: anything
   added in here disappears for those apps too. */
.quaive-portlet.app-contracts .well-header:before {
    background-image: url(../../app-icons/artefacts/contracts.svg?v=b5667a061a);
}
.tab.application-contracts .app-name:before,
.application-contracts + .application-label .breadcrumbs a:before {
    background-image: url(../../app-icons/artefacts/contracts.svg?v=b5667a061a);
}
/* @app-icon-rules:end */
#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);
}
/* @app-icon-rules:begin — the generator DROPS everything between these two
   markers for an app that has no materialised icon file. Both rules below
   contain nothing but the icon URL, so emitting them for an iconless app buys
   one guaranteed 404 per page and paints nothing. Keep it that way: anything
   added in here disappears for those apps too. */
.quaive-portlet.app-dashboard .well-header:before {
    background-image: url(../../app-icons/artefacts/dashboard.svg?v=0057a54acd);
}
.tab.application-dashboard .app-name:before,
.application-dashboard + .application-label .breadcrumbs a:before {
    background-image: url(../../app-icons/artefacts/dashboard.svg?v=0057a54acd);
}
/* @app-icon-rules:end */
#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);
}
/* @app-icon-rules:begin — the generator DROPS everything between these two
   markers for an app that has no materialised icon file. Both rules below
   contain nothing but the icon URL, so emitting them for an iconless app buys
   one guaranteed 404 per page and paints nothing. Keep it that way: anything
   added in here disappears for those apps too. */
.quaive-portlet.app-demo .well-header:before {
    background-image: url(../../app-icons/artefacts/demo.svg?v=e92d7771e6);
}
.tab.application-demo .app-name:before,
.application-demo + .application-label .breadcrumbs a:before {
    background-image: url(../../app-icons/artefacts/demo.svg?v=e92d7771e6);
}
/* @app-icon-rules:end */
#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-design: #4A5C96;
}

/* 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-design,
#tabs-bar .tab.application-design[data-active],
body.kik-space-on .application-design + .application-label {
    --app-colour: var(--app-colour-design);
}
/* 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-design,
span.app-icon.app-design {
    color: var(--app-colour-design);
}
/* @app-icon-rules:begin — the generator DROPS everything between these two
   markers for an app that has no materialised icon file. Both rules below
   contain nothing but the icon URL, so emitting them for an iconless app buys
   one guaranteed 404 per page and paints nothing. Keep it that way: anything
   added in here disappears for those apps too. */
.quaive-portlet.app-design .well-header:before {
    background-image: url(../../app-icons/artefacts/design.svg?v=d8552f8ec3);
}
.tab.application-design .app-name:before,
.application-design + .application-label .breadcrumbs a:before {
    background-image: url(../../app-icons/artefacts/design.svg?v=d8552f8ec3);
}
/* @app-icon-rules:end */
#application-body-design.state-on ~ #tabs-bar .tab.application-design {
    display: grid;
}
#app-space {

    &.state-off,
    &.state-paused,
    &:not(.active-app-design) {
        #tabs-bar .tab.application-design .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-design .object-name {
            display: none;
        }
    }

    &:not(.active-app-design) #tabs-bar .tab.application-design .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-design.state-on,
    &.state-on #application-body + .application-label .breadcrumbs a:before {
        .tab.application-design .app-name:before {
            filter: invert(0%) !important;
            opacity: 1 !important;
        }

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

/* The active tab's icon at full strength. */
.tab.application-design[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);
}
/* @app-icon-rules:begin — the generator DROPS everything between these two
   markers for an app that has no materialised icon file. Both rules below
   contain nothing but the icon URL, so emitting them for an iconless app buys
   one guaranteed 404 per page and paints nothing. Keep it that way: anything
   added in here disappears for those apps too. */
.quaive-portlet.app-diary .well-header:before {
    background-image: url(../../app-icons/artefacts/diary.svg?v=327e16efef);
}
.tab.application-diary .app-name:before,
.application-diary + .application-label .breadcrumbs a:before {
    background-image: url(../../app-icons/artefacts/diary.svg?v=327e16efef);
}
/* @app-icon-rules:end */
#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);
}
/* @app-icon-rules:begin — the generator DROPS everything between these two
   markers for an app that has no materialised icon file. Both rules below
   contain nothing but the icon URL, so emitting them for an iconless app buys
   one guaranteed 404 per page and paints nothing. Keep it that way: anything
   added in here disappears for those apps too. */
.quaive-portlet.app-document-browser .well-header:before {
    background-image: url(../../app-icons/artefacts/document-browser.svg?v=df09434473);
}
.tab.application-document-browser .app-name:before,
.application-document-browser + .application-label .breadcrumbs a:before {
    background-image: url(../../app-icons/artefacts/document-browser.svg?v=df09434473);
}
/* @app-icon-rules:end */
#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);
}
/* @app-icon-rules:begin — the generator DROPS everything between these two
   markers for an app that has no materialised icon file. Both rules below
   contain nothing but the icon URL, so emitting them for an iconless app buys
   one guaranteed 404 per page and paints nothing. Keep it that way: anything
   added in here disappears for those apps too. */
.quaive-portlet.app-documents .well-header:before {
    background-image: url(../../app-icons/artefacts/documents.svg?v=5647769470);
}
.tab.application-documents .app-name:before,
.application-documents + .application-label .breadcrumbs a:before {
    background-image: url(../../app-icons/artefacts/documents.svg?v=5647769470);
}
/* @app-icon-rules:end */
#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);
}
/* @app-icon-rules:begin — the generator DROPS everything between these two
   markers for an app that has no materialised icon file. Both rules below
   contain nothing but the icon URL, so emitting them for an iconless app buys
   one guaranteed 404 per page and paints nothing. Keep it that way: anything
   added in here disappears for those apps too. */
.quaive-portlet.app-draw .well-header:before {
    background-image: url(../../app-icons/artefacts/draw.svg?v=4341a36f04);
}
.tab.application-draw .app-name:before,
.application-draw + .application-label .breadcrumbs a:before {
    background-image: url(../../app-icons/artefacts/draw.svg?v=4341a36f04);
}
/* @app-icon-rules:end */
#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);
}
/* @app-icon-rules:begin — the generator DROPS everything between these two
   markers for an app that has no materialised icon file. Both rules below
   contain nothing but the icon URL, so emitting them for an iconless app buys
   one guaranteed 404 per page and paints nothing. Keep it that way: anything
   added in here disappears for those apps too. */
.quaive-portlet.app-drive .well-header:before {
    background-image: url(../../app-icons/artefacts/drive.svg?v=565ee74e4c);
}
.tab.application-drive .app-name:before,
.application-drive + .application-label .breadcrumbs a:before {
    background-image: url(../../app-icons/artefacts/drive.svg?v=565ee74e4c);
}
/* @app-icon-rules:end */
#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);
}
/* @app-icon-rules:begin — the generator DROPS everything between these two
   markers for an app that has no materialised icon file. Both rules below
   contain nothing but the icon URL, so emitting them for an iconless app buys
   one guaranteed 404 per page and paints nothing. Keep it that way: anything
   added in here disappears for those apps too. */
.quaive-portlet.app-events .well-header:before {
    background-image: url(../../app-icons/artefacts/events.svg?v=b5951fda16);
}
.tab.application-events .app-name:before,
.application-events + .application-label .breadcrumbs a:before {
    background-image: url(../../app-icons/artefacts/events.svg?v=b5951fda16);
}
/* @app-icon-rules:end */
#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);
}
/* @app-icon-rules:begin — the generator DROPS everything between these two
   markers for an app that has no materialised icon file. Both rules below
   contain nothing but the icon URL, so emitting them for an iconless app buys
   one guaranteed 404 per page and paints nothing. Keep it that way: anything
   added in here disappears for those apps too. */
.quaive-portlet.app-family-tree .well-header:before {
    background-image: url(../../app-icons/artefacts/family-tree.svg?v=d85e861ecf);
}
.tab.application-family-tree .app-name:before,
.application-family-tree + .application-label .breadcrumbs a:before {
    background-image: url(../../app-icons/artefacts/family-tree.svg?v=d85e861ecf);
}
/* @app-icon-rules:end */
#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);
}
/* @app-icon-rules:begin — the generator DROPS everything between these two
   markers for an app that has no materialised icon file. Both rules below
   contain nothing but the icon URL, so emitting them for an iconless app buys
   one guaranteed 404 per page and paints nothing. Keep it that way: anything
   added in here disappears for those apps too. */
.quaive-portlet.app-favourites .well-header:before {
    background-image: url(../../app-icons/artefacts/favourites.svg?v=9a69eec6e3);
}
.tab.application-favourites .app-name:before,
.application-favourites + .application-label .breadcrumbs a:before {
    background-image: url(../../app-icons/artefacts/favourites.svg?v=9a69eec6e3);
}
/* @app-icon-rules:end */
#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);
}
/* @app-icon-rules:begin — the generator DROPS everything between these two
   markers for an app that has no materialised icon file. Both rules below
   contain nothing but the icon URL, so emitting them for an iconless app buys
   one guaranteed 404 per page and paints nothing. Keep it that way: anything
   added in here disappears for those apps too. */
.quaive-portlet.app-feedback .well-header:before {
    background-image: url(../../app-icons/artefacts/feedback.svg?v=60eaa035cf);
}
.tab.application-feedback .app-name:before,
.application-feedback + .application-label .breadcrumbs a:before {
    background-image: url(../../app-icons/artefacts/feedback.svg?v=60eaa035cf);
}
/* @app-icon-rules:end */
#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);
}
/* @app-icon-rules:begin — the generator DROPS everything between these two
   markers for an app that has no materialised icon file. Both rules below
   contain nothing but the icon URL, so emitting them for an iconless app buys
   one guaranteed 404 per page and paints nothing. Keep it that way: anything
   added in here disappears for those apps too. */
.quaive-portlet.app-films .well-header:before {
    background-image: url(../../app-icons/artefacts/films.svg?v=d25d04af9a);
}
.tab.application-films .app-name:before,
.application-films + .application-label .breadcrumbs a:before {
    background-image: url(../../app-icons/artefacts/films.svg?v=d25d04af9a);
}
/* @app-icon-rules:end */
#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);
}
/* @app-icon-rules:begin — the generator DROPS everything between these two
   markers for an app that has no materialised icon file. Both rules below
   contain nothing but the icon URL, so emitting them for an iconless app buys
   one guaranteed 404 per page and paints nothing. Keep it that way: anything
   added in here disappears for those apps too. */
.quaive-portlet.app-gymnast .well-header:before {
    background-image: url(../../app-icons/artefacts/gymnast.svg?v=5a651ab7d7);
}
.tab.application-gymnast .app-name:before,
.application-gymnast + .application-label .breadcrumbs a:before {
    background-image: url(../../app-icons/artefacts/gymnast.svg?v=5a651ab7d7);
}
/* @app-icon-rules:end */
#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);
}
/* @app-icon-rules:begin — the generator DROPS everything between these two
   markers for an app that has no materialised icon file. Both rules below
   contain nothing but the icon URL, so emitting them for an iconless app buys
   one guaranteed 404 per page and paints nothing. Keep it that way: anything
   added in here disappears for those apps too. */
.quaive-portlet.app-help .well-header:before {
    background-image: url(../../app-icons/artefacts/help.svg?v=869a4fd7e0);
}
.tab.application-help .app-name:before,
.application-help + .application-label .breadcrumbs a:before {
    background-image: url(../../app-icons/artefacts/help.svg?v=869a4fd7e0);
}
/* @app-icon-rules:end */
#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);
}
/* @app-icon-rules:begin — the generator DROPS everything between these two
   markers for an app that has no materialised icon file. Both rules below
   contain nothing but the icon URL, so emitting them for an iconless app buys
   one guaranteed 404 per page and paints nothing. Keep it that way: anything
   added in here disappears for those apps too. */
.quaive-portlet.app-image-bank .well-header:before {
    background-image: url(../../app-icons/artefacts/image-bank.svg?v=e2e9bd6079);
}
.tab.application-image-bank .app-name:before,
.application-image-bank + .application-label .breadcrumbs a:before {
    background-image: url(../../app-icons/artefacts/image-bank.svg?v=e2e9bd6079);
}
/* @app-icon-rules:end */
#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);
}
/* @app-icon-rules:begin — the generator DROPS everything between these two
   markers for an app that has no materialised icon file. Both rules below
   contain nothing but the icon URL, so emitting them for an iconless app buys
   one guaranteed 404 per page and paints nothing. Keep it that way: anything
   added in here disappears for those apps too. */
.quaive-portlet.app-images .well-header:before {
    background-image: url(../../app-icons/artefacts/images.svg?v=e2e9bd6079);
}
.tab.application-images .app-name:before,
.application-images + .application-label .breadcrumbs a:before {
    background-image: url(../../app-icons/artefacts/images.svg?v=e2e9bd6079);
}
/* @app-icon-rules:end */
#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);
}
/* @app-icon-rules:begin — the generator DROPS everything between these two
   markers for an app that has no materialised icon file. Both rules below
   contain nothing but the icon URL, so emitting them for an iconless app buys
   one guaranteed 404 per page and paints nothing. Keep it that way: anything
   added in here disappears for those apps too. */
.quaive-portlet.app-jahrzeit .well-header:before {
    background-image: url(../../app-icons/artefacts/jahrzeit.svg?v=8230e6f211);
}
.tab.application-jahrzeit .app-name:before,
.application-jahrzeit + .application-label .breadcrumbs a:before {
    background-image: url(../../app-icons/artefacts/jahrzeit.svg?v=8230e6f211);
}
/* @app-icon-rules:end */
#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);
}
/* @app-icon-rules:begin — the generator DROPS everything between these two
   markers for an app that has no materialised icon file. Both rules below
   contain nothing but the icon URL, so emitting them for an iconless app buys
   one guaranteed 404 per page and paints nothing. Keep it that way: anything
   added in here disappears for those apps too. */
.quaive-portlet.app-jobs .well-header:before {
    background-image: url(../../app-icons/artefacts/jobs.svg?v=7b49dfda46);
}
.tab.application-jobs .app-name:before,
.application-jobs + .application-label .breadcrumbs a:before {
    background-image: url(../../app-icons/artefacts/jobs.svg?v=7b49dfda46);
}
/* @app-icon-rules:end */
#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);
}
/* @app-icon-rules:begin — the generator DROPS everything between these two
   markers for an app that has no materialised icon file. Both rules below
   contain nothing but the icon URL, so emitting them for an iconless app buys
   one guaranteed 404 per page and paints nothing. Keep it that way: anything
   added in here disappears for those apps too. */
.quaive-portlet.app-journal .well-header:before {
    background-image: url(../../app-icons/artefacts/journal.svg?v=8f0619a291);
}
.tab.application-journal .app-name:before,
.application-journal + .application-label .breadcrumbs a:before {
    background-image: url(../../app-icons/artefacts/journal.svg?v=8f0619a291);
}
/* @app-icon-rules:end */
#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);
}
/* @app-icon-rules:begin — the generator DROPS everything between these two
   markers for an app that has no materialised icon file. Both rules below
   contain nothing but the icon URL, so emitting them for an iconless app buys
   one guaranteed 404 per page and paints nothing. Keep it that way: anything
   added in here disappears for those apps too. */
.quaive-portlet.app-kiki .well-header:before {
    background-image: url(../../app-icons/artefacts/kiki.svg?v=103935953c);
}
.tab.application-kiki .app-name:before,
.application-kiki + .application-label .breadcrumbs a:before {
    background-image: url(../../app-icons/artefacts/kiki.svg?v=103935953c);
}
/* @app-icon-rules:end */
#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);
}
/* @app-icon-rules:begin — the generator DROPS everything between these two
   markers for an app that has no materialised icon file. Both rules below
   contain nothing but the icon URL, so emitting them for an iconless app buys
   one guaranteed 404 per page and paints nothing. Keep it that way: anything
   added in here disappears for those apps too. */
.quaive-portlet.app-library .well-header:before {
    background-image: url(../../app-icons/artefacts/library.svg?v=5fb6e575c7);
}
.tab.application-library .app-name:before,
.application-library + .application-label .breadcrumbs a:before {
    background-image: url(../../app-icons/artefacts/library.svg?v=5fb6e575c7);
}
/* @app-icon-rules:end */
#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);
}
/* @app-icon-rules:begin — the generator DROPS everything between these two
   markers for an app that has no materialised icon file. Both rules below
   contain nothing but the icon URL, so emitting them for an iconless app buys
   one guaranteed 404 per page and paints nothing. Keep it that way: anything
   added in here disappears for those apps too. */
.quaive-portlet.app-mail .well-header:before {
    background-image: url(../../app-icons/artefacts/mail.svg?v=b539e30d09);
}
.tab.application-mail .app-name:before,
.application-mail + .application-label .breadcrumbs a:before {
    background-image: url(../../app-icons/artefacts/mail.svg?v=b539e30d09);
}
/* @app-icon-rules:end */
#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);
}
/* @app-icon-rules:begin — the generator DROPS everything between these two
   markers for an app that has no materialised icon file. Both rules below
   contain nothing but the icon URL, so emitting them for an iconless app buys
   one guaranteed 404 per page and paints nothing. Keep it that way: anything
   added in here disappears for those apps too. */
.quaive-portlet.app-mailings .well-header:before {
    background-image: url(../../app-icons/artefacts/mailings.svg?v=67e6ec9845);
}
.tab.application-mailings .app-name:before,
.application-mailings + .application-label .breadcrumbs a:before {
    background-image: url(../../app-icons/artefacts/mailings.svg?v=67e6ec9845);
}
/* @app-icon-rules:end */
#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-maps: rgb(23, 108, 96);
}

/* 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-maps,
#tabs-bar .tab.application-maps[data-active],
body.kik-space-on .application-maps + .application-label {
    --app-colour: var(--app-colour-maps);
}
/* 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-maps,
span.app-icon.app-maps {
    color: var(--app-colour-maps);
}
/* @app-icon-rules:begin — the generator DROPS everything between these two
   markers for an app that has no materialised icon file. Both rules below
   contain nothing but the icon URL, so emitting them for an iconless app buys
   one guaranteed 404 per page and paints nothing. Keep it that way: anything
   added in here disappears for those apps too. */
.quaive-portlet.app-maps .well-header:before {
    background-image: url(../../app-icons/artefacts/maps.svg?v=094aa42816);
}
.tab.application-maps .app-name:before,
.application-maps + .application-label .breadcrumbs a:before {
    background-image: url(../../app-icons/artefacts/maps.svg?v=094aa42816);
}
/* @app-icon-rules:end */
#application-body-maps.state-on ~ #tabs-bar .tab.application-maps {
    display: grid;
}
#app-space {

    &.state-off,
    &.state-paused,
    &:not(.active-app-maps) {
        #tabs-bar .tab.application-maps .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-maps .object-name {
            display: none;
        }
    }

    &:not(.active-app-maps) #tabs-bar .tab.application-maps .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-maps.state-on,
    &.state-on #application-body + .application-label .breadcrumbs a:before {
        .tab.application-maps .app-name:before {
            filter: invert(0%) !important;
            opacity: 1 !important;
        }

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

/* The active tab's icon at full strength. */
.tab.application-maps[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);
}
/* @app-icon-rules:begin — the generator DROPS everything between these two
   markers for an app that has no materialised icon file. Both rules below
   contain nothing but the icon URL, so emitting them for an iconless app buys
   one guaranteed 404 per page and paints nothing. Keep it that way: anything
   added in here disappears for those apps too. */
.quaive-portlet.app-meetings .well-header:before {
    background-image: url(../../app-icons/artefacts/meetings.svg?v=59dea54db6);
}
.tab.application-meetings .app-name:before,
.application-meetings + .application-label .breadcrumbs a:before {
    background-image: url(../../app-icons/artefacts/meetings.svg?v=59dea54db6);
}
/* @app-icon-rules:end */
#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);
}
/* @app-icon-rules:begin — the generator DROPS everything between these two
   markers for an app that has no materialised icon file. Both rules below
   contain nothing but the icon URL, so emitting them for an iconless app buys
   one guaranteed 404 per page and paints nothing. Keep it that way: anything
   added in here disappears for those apps too. */
.quaive-portlet.app-messages .well-header:before {
    background-image: url(../../app-icons/artefacts/messages.svg?v=d0da024823);
}
.tab.application-messages .app-name:before,
.application-messages + .application-label .breadcrumbs a:before {
    background-image: url(../../app-icons/artefacts/messages.svg?v=d0da024823);
}
/* @app-icon-rules:end */
#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-migration: #2f8f6f;
}

/* 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-migration,
#tabs-bar .tab.application-migration[data-active],
body.kik-space-on .application-migration + .application-label {
    --app-colour: var(--app-colour-migration);
}
/* 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-migration,
span.app-icon.app-migration {
    color: var(--app-colour-migration);
}
/* @app-icon-rules:begin — the generator DROPS everything between these two
   markers for an app that has no materialised icon file. Both rules below
   contain nothing but the icon URL, so emitting them for an iconless app buys
   one guaranteed 404 per page and paints nothing. Keep it that way: anything
   added in here disappears for those apps too. */
.quaive-portlet.app-migration .well-header:before {
    background-image: url(../../app-icons/artefacts/migration.svg?v=984b9ce1d6);
}
.tab.application-migration .app-name:before,
.application-migration + .application-label .breadcrumbs a:before {
    background-image: url(../../app-icons/artefacts/migration.svg?v=984b9ce1d6);
}
/* @app-icon-rules:end */
#application-body-migration.state-on ~ #tabs-bar .tab.application-migration {
    display: grid;
}
#app-space {

    &.state-off,
    &.state-paused,
    &:not(.active-app-migration) {
        #tabs-bar .tab.application-migration .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-migration .object-name {
            display: none;
        }
    }

    &:not(.active-app-migration) #tabs-bar .tab.application-migration .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-migration.state-on,
    &.state-on #application-body + .application-label .breadcrumbs a:before {
        .tab.application-migration .app-name:before {
            filter: invert(0%) !important;
            opacity: 1 !important;
        }

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

/* The active tab's icon at full strength. */
.tab.application-migration[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);
}
/* @app-icon-rules:begin — the generator DROPS everything between these two
   markers for an app that has no materialised icon file. Both rules below
   contain nothing but the icon URL, so emitting them for an iconless app buys
   one guaranteed 404 per page and paints nothing. Keep it that way: anything
   added in here disappears for those apps too. */
.quaive-portlet.app-monitor .well-header:before {
    background-image: url(../../app-icons/artefacts/monitor.svg?v=ad52bb682a);
}
.tab.application-monitor .app-name:before,
.application-monitor + .application-label .breadcrumbs a:before {
    background-image: url(../../app-icons/artefacts/monitor.svg?v=ad52bb682a);
}
/* @app-icon-rules:end */
#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);
}
/* @app-icon-rules:begin — the generator DROPS everything between these two
   markers for an app that has no materialised icon file. Both rules below
   contain nothing but the icon URL, so emitting them for an iconless app buys
   one guaranteed 404 per page and paints nothing. Keep it that way: anything
   added in here disappears for those apps too. */
.quaive-portlet.app-music .well-header:before {
    background-image: url(../../app-icons/artefacts/music.svg?v=40a737ceb0);
}
.tab.application-music .app-name:before,
.application-music + .application-label .breadcrumbs a:before {
    background-image: url(../../app-icons/artefacts/music.svg?v=40a737ceb0);
}
/* @app-icon-rules:end */
#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);
}
/* @app-icon-rules:begin — the generator DROPS everything between these two
   markers for an app that has no materialised icon file. Both rules below
   contain nothing but the icon URL, so emitting them for an iconless app buys
   one guaranteed 404 per page and paints nothing. Keep it that way: anything
   added in here disappears for those apps too. */
.quaive-portlet.app-news .well-header:before {
    background-image: url(../../app-icons/artefacts/news.svg?v=bad8ea922e);
}
.tab.application-news .app-name:before,
.application-news + .application-label .breadcrumbs a:before {
    background-image: url(../../app-icons/artefacts/news.svg?v=bad8ea922e);
}
/* @app-icon-rules:end */
#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);
}
/* @app-icon-rules:begin — the generator DROPS everything between these two
   markers for an app that has no materialised icon file. Both rules below
   contain nothing but the icon URL, so emitting them for an iconless app buys
   one guaranteed 404 per page and paints nothing. Keep it that way: anything
   added in here disappears for those apps too. */
.quaive-portlet.app-notes .well-header:before {
    background-image: url(../../app-icons/artefacts/notes.svg?v=f01fe650c9);
}
.tab.application-notes .app-name:before,
.application-notes + .application-label .breadcrumbs a:before {
    background-image: url(../../app-icons/artefacts/notes.svg?v=f01fe650c9);
}
/* @app-icon-rules:end */
#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);
}
/* @app-icon-rules:begin — the generator DROPS everything between these two
   markers for an app that has no materialised icon file. Both rules below
   contain nothing but the icon URL, so emitting them for an iconless app buys
   one guaranteed 404 per page and paints nothing. Keep it that way: anything
   added in here disappears for those apps too. */
.quaive-portlet.app-notifications .well-header:before {
    background-image: url(../../app-icons/artefacts/notifications.svg?v=d082ee6544);
}
.tab.application-notifications .app-name:before,
.application-notifications + .application-label .breadcrumbs a:before {
    background-image: url(../../app-icons/artefacts/notifications.svg?v=d082ee6544);
}
/* @app-icon-rules:end */
#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);
}
/* @app-icon-rules:begin — the generator DROPS everything between these two
   markers for an app that has no materialised icon file. Both rules below
   contain nothing but the icon URL, so emitting them for an iconless app buys
   one guaranteed 404 per page and paints nothing. Keep it that way: anything
   added in here disappears for those apps too. */
.quaive-portlet.app-office .well-header:before {
    background-image: url(../../app-icons/artefacts/office.svg?v=f29cb18eea);
}
.tab.application-office .app-name:before,
.application-office + .application-label .breadcrumbs a:before {
    background-image: url(../../app-icons/artefacts/office.svg?v=f29cb18eea);
}
/* @app-icon-rules:end */
#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);
}
/* @app-icon-rules:begin — the generator DROPS everything between these two
   markers for an app that has no materialised icon file. Both rules below
   contain nothing but the icon URL, so emitting them for an iconless app buys
   one guaranteed 404 per page and paints nothing. Keep it that way: anything
   added in here disappears for those apps too. */
.quaive-portlet.app-password .well-header:before {
    background-image: url(../../app-icons/artefacts/password.svg?v=2f5629ec5d);
}
.tab.application-password .app-name:before,
.application-password + .application-label .breadcrumbs a:before {
    background-image: url(../../app-icons/artefacts/password.svg?v=2f5629ec5d);
}
/* @app-icon-rules:end */
#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);
}
/* @app-icon-rules:begin — the generator DROPS everything between these two
   markers for an app that has no materialised icon file. Both rules below
   contain nothing but the icon URL, so emitting them for an iconless app buys
   one guaranteed 404 per page and paints nothing. Keep it that way: anything
   added in here disappears for those apps too. */
.quaive-portlet.app-people .well-header:before {
    background-image: url(../../app-icons/artefacts/people.svg?v=dbc9cfcfd2);
}
.tab.application-people .app-name:before,
.application-people + .application-label .breadcrumbs a:before {
    background-image: url(../../app-icons/artefacts/people.svg?v=dbc9cfcfd2);
}
/* @app-icon-rules:end */
#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);
}
/* @app-icon-rules:begin — the generator DROPS everything between these two
   markers for an app that has no materialised icon file. Both rules below
   contain nothing but the icon URL, so emitting them for an iconless app buys
   one guaranteed 404 per page and paints nothing. Keep it that way: anything
   added in here disappears for those apps too. */
.quaive-portlet.app-podcasts .well-header:before {
    background-image: url(../../app-icons/artefacts/podcasts.svg?v=f7ac150d9c);
}
.tab.application-podcasts .app-name:before,
.application-podcasts + .application-label .breadcrumbs a:before {
    background-image: url(../../app-icons/artefacts/podcasts.svg?v=f7ac150d9c);
}
/* @app-icon-rules:end */
#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);
}
/* @app-icon-rules:begin — the generator DROPS everything between these two
   markers for an app that has no materialised icon file. Both rules below
   contain nothing but the icon URL, so emitting them for an iconless app buys
   one guaranteed 404 per page and paints nothing. Keep it that way: anything
   added in here disappears for those apps too. */
.quaive-portlet.app-polls .well-header:before {
    background-image: url(../../app-icons/artefacts/polls.svg?v=25131bb641);
}
.tab.application-polls .app-name:before,
.application-polls + .application-label .breadcrumbs a:before {
    background-image: url(../../app-icons/artefacts/polls.svg?v=25131bb641);
}
/* @app-icon-rules:end */
#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);
}
/* @app-icon-rules:begin — the generator DROPS everything between these two
   markers for an app that has no materialised icon file. Both rules below
   contain nothing but the icon URL, so emitting them for an iconless app buys
   one guaranteed 404 per page and paints nothing. Keep it that way: anything
   added in here disappears for those apps too. */
.quaive-portlet.app-preferences .well-header:before {
    background-image: url(../../app-icons/artefacts/preferences.svg?v=44066eb243);
}
.tab.application-preferences .app-name:before,
.application-preferences + .application-label .breadcrumbs a:before {
    background-image: url(../../app-icons/artefacts/preferences.svg?v=44066eb243);
}
/* @app-icon-rules:end */
#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);
}
/* @app-icon-rules:begin — the generator DROPS everything between these two
   markers for an app that has no materialised icon file. Both rules below
   contain nothing but the icon URL, so emitting them for an iconless app buys
   one guaranteed 404 per page and paints nothing. Keep it that way: anything
   added in here disappears for those apps too. */
.quaive-portlet.app-present .well-header:before {
    background-image: url(../../app-icons/artefacts/present.svg?v=76d24843fc);
}
.tab.application-present .app-name:before,
.application-present + .application-label .breadcrumbs a:before {
    background-image: url(../../app-icons/artefacts/present.svg?v=76d24843fc);
}
/* @app-icon-rules:end */
#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);
}
/* @app-icon-rules:begin — the generator DROPS everything between these two
   markers for an app that has no materialised icon file. Both rules below
   contain nothing but the icon URL, so emitting them for an iconless app buys
   one guaranteed 404 per page and paints nothing. Keep it that way: anything
   added in here disappears for those apps too. */
.quaive-portlet.app-profile .well-header:before {
    background-image: url(../../app-icons/artefacts/profile.svg?v=5f63570827);
}
.tab.application-profile .app-name:before,
.application-profile + .application-label .breadcrumbs a:before {
    background-image: url(../../app-icons/artefacts/profile.svg?v=5f63570827);
}
/* @app-icon-rules:end */
#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);
}
/* @app-icon-rules:begin — the generator DROPS everything between these two
   markers for an app that has no materialised icon file. Both rules below
   contain nothing but the icon URL, so emitting them for an iconless app buys
   one guaranteed 404 per page and paints nothing. Keep it that way: anything
   added in here disappears for those apps too. */
.quaive-portlet.app-publisher .well-header:before {
    background-image: url(../../app-icons/artefacts/publisher.svg?v=bdd1742021);
}
.tab.application-publisher .app-name:before,
.application-publisher + .application-label .breadcrumbs a:before {
    background-image: url(../../app-icons/artefacts/publisher.svg?v=bdd1742021);
}
/* @app-icon-rules:end */
#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-radio: #F2820D;
}

/* 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-radio,
#tabs-bar .tab.application-radio[data-active],
body.kik-space-on .application-radio + .application-label {
    --app-colour: var(--app-colour-radio);
}
/* 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-radio,
span.app-icon.app-radio {
    color: var(--app-colour-radio);
}
/* @app-icon-rules:begin — the generator DROPS everything between these two
   markers for an app that has no materialised icon file. Both rules below
   contain nothing but the icon URL, so emitting them for an iconless app buys
   one guaranteed 404 per page and paints nothing. Keep it that way: anything
   added in here disappears for those apps too. */
.quaive-portlet.app-radio .well-header:before {
    background-image: url(../../app-icons/artefacts/radio.svg?v=c2b36a3f79);
}
.tab.application-radio .app-name:before,
.application-radio + .application-label .breadcrumbs a:before {
    background-image: url(../../app-icons/artefacts/radio.svg?v=c2b36a3f79);
}
/* @app-icon-rules:end */
#application-body-radio.state-on ~ #tabs-bar .tab.application-radio {
    display: grid;
}
#app-space {

    &.state-off,
    &.state-paused,
    &:not(.active-app-radio) {
        #tabs-bar .tab.application-radio .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-radio .object-name {
            display: none;
        }
    }

    &:not(.active-app-radio) #tabs-bar .tab.application-radio .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-radio.state-on,
    &.state-on #application-body + .application-label .breadcrumbs a:before {
        .tab.application-radio .app-name:before {
            filter: invert(0%) !important;
            opacity: 1 !important;
        }

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

/* The active tab's icon at full strength. */
.tab.application-radio[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);
}
/* @app-icon-rules:begin — the generator DROPS everything between these two
   markers for an app that has no materialised icon file. Both rules below
   contain nothing but the icon URL, so emitting them for an iconless app buys
   one guaranteed 404 per page and paints nothing. Keep it that way: anything
   added in here disappears for those apps too. */
.quaive-portlet.app-registration .well-header:before {
    background-image: url(../../app-icons/artefacts/registration.svg?v=a43a41f24c);
}
.tab.application-registration .app-name:before,
.application-registration + .application-label .breadcrumbs a:before {
    background-image: url(../../app-icons/artefacts/registration.svg?v=a43a41f24c);
}
/* @app-icon-rules:end */
#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);
}
/* @app-icon-rules:begin — the generator DROPS everything between these two
   markers for an app that has no materialised icon file. Both rules below
   contain nothing but the icon URL, so emitting them for an iconless app buys
   one guaranteed 404 per page and paints nothing. Keep it that way: anything
   added in here disappears for those apps too. */
.quaive-portlet.app-reminders .well-header:before {
    background-image: url(../../app-icons/artefacts/reminders.svg?v=69baeda88b);
}
.tab.application-reminders .app-name:before,
.application-reminders + .application-label .breadcrumbs a:before {
    background-image: url(../../app-icons/artefacts/reminders.svg?v=69baeda88b);
}
/* @app-icon-rules:end */
#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);
}
/* @app-icon-rules:begin — the generator DROPS everything between these two
   markers for an app that has no materialised icon file. Both rules below
   contain nothing but the icon URL, so emitting them for an iconless app buys
   one guaranteed 404 per page and paints nothing. Keep it that way: anything
   added in here disappears for those apps too. */
.quaive-portlet.app-sabra .well-header:before {
    background-image: url(../../app-icons/artefacts/sabra.svg?v=788b408158);
}
.tab.application-sabra .app-name:before,
.application-sabra + .application-label .breadcrumbs a:before {
    background-image: url(../../app-icons/artefacts/sabra.svg?v=788b408158);
}
/* @app-icon-rules:end */
#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);
}
/* @app-icon-rules:begin — the generator DROPS everything between these two
   markers for an app that has no materialised icon file. Both rules below
   contain nothing but the icon URL, so emitting them for an iconless app buys
   one guaranteed 404 per page and paints nothing. Keep it that way: anything
   added in here disappears for those apps too. */
.quaive-portlet.app-search .well-header:before {
    background-image: url(../../app-icons/artefacts/search.svg?v=716020defc);
}
.tab.application-search .app-name:before,
.application-search + .application-label .breadcrumbs a:before {
    background-image: url(../../app-icons/artefacts/search.svg?v=716020defc);
}
/* @app-icon-rules:end */
#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);
}
/* @app-icon-rules:begin — the generator DROPS everything between these two
   markers for an app that has no materialised icon file. Both rules below
   contain nothing but the icon URL, so emitting them for an iconless app buys
   one guaranteed 404 per page and paints nothing. Keep it that way: anything
   added in here disappears for those apps too. */
.quaive-portlet.app-setup .well-header:before {
    background-image: url(../../app-icons/artefacts/setup.svg?v=5577ef4630);
}
.tab.application-setup .app-name:before,
.application-setup + .application-label .breadcrumbs a:before {
    background-image: url(../../app-icons/artefacts/setup.svg?v=5577ef4630);
}
/* @app-icon-rules:end */
#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);
}
#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);
}
/* @app-icon-rules:begin — the generator DROPS everything between these two
   markers for an app that has no materialised icon file. Both rules below
   contain nothing but the icon URL, so emitting them for an iconless app buys
   one guaranteed 404 per page and paints nothing. Keep it that way: anything
   added in here disappears for those apps too. */
.quaive-portlet.app-slide-bank .well-header:before {
    background-image: url(../../app-icons/artefacts/slide-bank.svg?v=6f9463c1e3);
}
.tab.application-slide-bank .app-name:before,
.application-slide-bank + .application-label .breadcrumbs a:before {
    background-image: url(../../app-icons/artefacts/slide-bank.svg?v=6f9463c1e3);
}
/* @app-icon-rules:end */
#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);
}
/* @app-icon-rules:begin — the generator DROPS everything between these two
   markers for an app that has no materialised icon file. Both rules below
   contain nothing but the icon URL, so emitting them for an iconless app buys
   one guaranteed 404 per page and paints nothing. Keep it that way: anything
   added in here disappears for those apps too. */
.quaive-portlet.app-team-spaces .well-header:before {
    background-image: url(../../app-icons/artefacts/team-spaces.svg?v=c0d19e6cc9);
}
.tab.application-team-spaces .app-name:before,
.application-team-spaces + .application-label .breadcrumbs a:before {
    background-image: url(../../app-icons/artefacts/team-spaces.svg?v=c0d19e6cc9);
}
/* @app-icon-rules:end */
#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);
}
/* @app-icon-rules:begin — the generator DROPS everything between these two
   markers for an app that has no materialised icon file. Both rules below
   contain nothing but the icon URL, so emitting them for an iconless app buys
   one guaranteed 404 per page and paints nothing. Keep it that way: anything
   added in here disappears for those apps too. */
.quaive-portlet.app-todo .well-header:before {
    background-image: url(../../app-icons/artefacts/todo.svg?v=8f494dff63);
}
.tab.application-todo .app-name:before,
.application-todo + .application-label .breadcrumbs a:before {
    background-image: url(../../app-icons/artefacts/todo.svg?v=8f494dff63);
}
/* @app-icon-rules:end */
#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);
}
/* @app-icon-rules:begin — the generator DROPS everything between these two
   markers for an app that has no materialised icon file. Both rules below
   contain nothing but the icon URL, so emitting them for an iconless app buys
   one guaranteed 404 per page and paints nothing. Keep it that way: anything
   added in here disappears for those apps too. */
.quaive-portlet.app-todo-legacy .well-header:before {
    background-image: url(../../app-icons/artefacts/todo-legacy.svg?v=c08a213173);
}
.tab.application-todo-legacy .app-name:before,
.application-todo-legacy + .application-label .breadcrumbs a:before {
    background-image: url(../../app-icons/artefacts/todo-legacy.svg?v=c08a213173);
}
/* @app-icon-rules:end */
#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);
}
/* @app-icon-rules:begin — the generator DROPS everything between these two
   markers for an app that has no materialised icon file. Both rules below
   contain nothing but the icon URL, so emitting them for an iconless app buys
   one guaranteed 404 per page and paints nothing. Keep it that way: anything
   added in here disappears for those apps too. */
.quaive-portlet.app-updates .well-header:before {
    background-image: url(../../app-icons/artefacts/updates.svg?v=d0da024823);
}
.tab.application-updates .app-name:before,
.application-updates + .application-label .breadcrumbs a:before {
    background-image: url(../../app-icons/artefacts/updates.svg?v=d0da024823);
}
/* @app-icon-rules:end */
#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);
}
/* @app-icon-rules:begin — the generator DROPS everything between these two
   markers for an app that has no materialised icon file. Both rules below
   contain nothing but the icon URL, so emitting them for an iconless app buys
   one guaranteed 404 per page and paints nothing. Keep it that way: anything
   added in here disappears for those apps too. */
.quaive-portlet.app-weather .well-header:before {
    background-image: url(../../app-icons/artefacts/weather.svg?v=137392a29a);
}
.tab.application-weather .app-name:before,
.application-weather + .application-label .breadcrumbs a:before {
    background-image: url(../../app-icons/artefacts/weather.svg?v=137392a29a);
}
/* @app-icon-rules:end */
#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);
}
/* @app-icon-rules:begin — the generator DROPS everything between these two
   markers for an app that has no materialised icon file. Both rules below
   contain nothing but the icon URL, so emitting them for an iconless app buys
   one guaranteed 404 per page and paints nothing. Keep it that way: anything
   added in here disappears for those apps too. */
.quaive-portlet.app-whiteboard .well-header:before {
    background-image: url(../../app-icons/artefacts/whiteboard.svg?v=3498ed1724);
}
.tab.application-whiteboard .app-name:before,
.application-whiteboard + .application-label .breadcrumbs a:before {
    background-image: url(../../app-icons/artefacts/whiteboard.svg?v=3498ed1724);
}
/* @app-icon-rules:end */
#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);
}
/* @app-icon-rules:begin — the generator DROPS everything between these two
   markers for an app that has no materialised icon file. Both rules below
   contain nothing but the icon URL, so emitting them for an iconless app buys
   one guaranteed 404 per page and paints nothing. Keep it that way: anything
   added in here disappears for those apps too. */
.quaive-portlet.app-workspaces .well-header:before {
    background-image: url(../../app-icons/artefacts/workspaces.svg?v=c0d19e6cc9);
}
.tab.application-workspaces .app-name:before,
.application-workspaces + .application-label .breadcrumbs a:before {
    background-image: url(../../app-icons/artefacts/workspaces.svg?v=c0d19e6cc9);
}
/* @app-icon-rules:end */
#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);
}
/* @app-icon-rules:begin — the generator DROPS everything between these two
   markers for an app that has no materialised icon file. Both rules below
   contain nothing but the icon URL, so emitting them for an iconless app buys
   one guaranteed 404 per page and paints nothing. Keep it that way: anything
   added in here disappears for those apps too. */
.quaive-portlet.app-write .well-header:before {
    background-image: url(../../app-icons/artefacts/write.svg?v=2eaae3b76f);
}
.tab.application-write .app-name:before,
.application-write + .application-label .breadcrumbs a:before {
    background-image: url(../../app-icons/artefacts/write.svg?v=2eaae3b76f);
}
/* @app-icon-rules:end */
#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));
    }
}