/* Standard Colours */
:root {
    --spacewalk-theme-purple-rgb: 167, 93, 176;
    --spacewalk-theme-purple-dark-rgb: 136, 14, 153;
    --spacewalk-theme-orange-rgb: 254, 176, 52;
    --spacewalk-theme-orange-dark-rgb: 195, 121, 0;
    --spacewalk-theme-cyan-rgb: 23, 165, 154;
    --spacewalk-theme-cyan-dark-rgb: 0, 119, 110;
    --spacewalk-theme-paleblue-rgb: 82, 212, 236;
    --spacewalk-theme-paleblue-dark-rgb: 4, 194, 230;
    --spacewalk-theme-blue-rgb: 20, 127, 208;
    --spacewalk-theme-blue-dark-rgb: 3, 83, 140;
    --spacewalk-theme-red-rgb: 230, 100, 97;
    --spacewalk-theme-red-dark-rgb: 184, 15, 11;
    --spacewalk-theme-grey-rgb: 122, 122, 122;
    --spacewalk-theme-grey-dark-rgb: 56, 62, 66;
    --spacewalk-theme-black-rgb: 56, 62, 66;

    --spacewalk-text: rgb(48, 48, 48);

    --spacewalk-black: rgb(var(--spacewalk-theme-black-rgb));
    --spacewalk-dark-grey: rgb(122, 122, 122);
    --spacewalk-grey: rgb(221, 221, 221);
    --spacewalk-shadow-grey: rgb(240, 240, 240);
    --spacewalk-light-grey: rgb(250, 250, 250);
    --spacewalk-white: rgb(255, 255, 255);
    --spacewalk-dark-blue: rgb(35, 96, 172);
    --spacewalk-blue: rgb(65, 126, 202);
    --spacewalk-bright-blue-rgb: 36, 134, 255;
    --spacewalk-bright-blue: rgb(var(--spacewalk-bright-blue-rgb));
    --spacewalk-light-blue: rgb(190, 219, 255);
    --spacewalk-pale-blue: rgb(230, 239, 248);
    --spacewalk-dark-green: rgb(56, 136, 0);
    --spacewalk-green: rgb(116, 196, 45);
    --spacewalk-pale-green: rgb(231, 242, 208);
    --spacewalk-dark-red: rgb(95, 8, 13);
    --spacewalk-red: rgb(232, 99, 94);
    --spacewalk-pale-red: rgb(240, 221, 212);
    --spacewalk-yellow: rgb(253, 196, 14);
    --spacewalk-pale-yellow: rgb(251, 245, 215);
    --spacewalk-purple: rgb(144, 88, 160);

    --spacewalk-incidental: rgb(155, 159, 161);

    --spacewalk-new: rgb(var(--spacewalk-theme-cyan-rgb));
    --spacewalk-unavailable: rgb(var(--spacewalk-theme-orange-rgb));
    --spacewalk-applied: rgb(var(--spacewalk-theme-cyan-rgb));
    --spacewalk-skills-match: rgb(var(--spacewalk-theme-blue-rgb));

    --spacewalk-sidebar-nav-radius: 0.4rem;
    --spacewalk-section-radius: 0.1rem;
    --spacewalk-form-placeholder-color: rgba(108, 117, 125, 0.72);
}

.spacewalk-badge {
    text-transform: capitalize;
    vertical-align: 10%;
}

.spacewalk-badge.sw-small {
    font-size: 0.6rem;
    font-weight: 500;
}

.spacewalk-badge.sw-large {
    font-size: 0.75rem;
}

/* Shared PrimeVue OverlayPanel callout used by tab info buttons and page-level guidance icons. */
.guidance-overlay-content {
    max-width: min(30rem, calc(100vw - 3rem));
}

.guidance-overlay {
    border: 1px solid var(--bs-primary-border-subtle);
    border-radius: var(--bs-border-radius);
    background-color: var(--bs-body-bg);
    box-shadow: 0 0.75rem 1.75rem rgba(0, 0, 0, 0.22);
    z-index: 1055 !important;
}

.guidance-overlay .p-overlaypanel-content {
    padding: 0;
}

.guidance-overlay-title {
    border-top-left-radius: calc(var(--bs-border-radius) - 1px);
    border-top-right-radius: calc(var(--bs-border-radius) - 1px);
    background-color: var(--bs-primary-bg-subtle);
    padding: 0.625rem 1.125rem;
}

.guidance-overlay-body {
    padding: 0.875rem 1.125rem 1rem;
}

.guidance-overlay:after {
    border-bottom-color: var(--bs-primary-bg-subtle);
}

.guidance-overlay:before {
    border-bottom-color: var(--bs-primary-border-subtle);
}

.guidance-overlay.p-overlaypanel-flipped:after {
    border-top-color: var(--bs-primary-bg-subtle);
}

.guidance-overlay.p-overlaypanel-flipped:before {
    border-top-color: var(--bs-primary-border-subtle);
}

.guidance-overlay-text {
    white-space: pre-line;
}

.secondment {
    background-color: rgb(var(--spacewalk-theme-purple-rgb));
}

.contract {
    background-color: rgb(var(--spacewalk-theme-orange-rgb));
    color: var(--spacewalk-black);
}

.temporary,
.volunteer,
.gig {
    background-color: rgb(var(--spacewalk-theme-cyan-rgb));
}

.job,
.internship,
.apprenticeship {
    background-color: rgb(var(--spacewalk-theme-blue-rgb));
}

.duration {
    background-color: rgb(var(--spacewalk-theme-black-rgb));
}

.incidental {
    background-color: var(--spacewalk-incidental);
}

.new {
    background-color: var(--spacewalk-new);
    color: var(--spacewalk-white);
}

.unavailable {
    background-color: var(--spacewalk-unavailable);
    color: var(--spacewalk-black);
}

.applied {
    background-color: var(--spacewalk-applied);
}

.skills-match {
    background-color: var(--spacewalk-skills-match);
}

.admin {
    background-color: rgb(var(--spacewalk-theme-blue-rgb));
}

/* User Profile Types */
.individual,
.freelancer,
.contractor,
.job_seeker {
    background-color: rgb(var(--spacewalk-theme-cyan-rgb));
}

.student,
.graduate {
    background-color: rgb(var(--spacewalk-theme-orange-rgb));
}

.employee {
    background-color: rgb(var(--spacewalk-theme-blue-rgb));
}

.external_employee {
    background-color: rgb(var(--spacewalk-theme-purple-rgb));
}

/* Marketplace Product Types */
.any_niche_community,
.online_groups {
    background-color: rgb(var(--spacewalk-theme-cyan-rgb));
}

.talent_on_demand,
.staff_cover {
    background-color: rgb(var(--spacewalk-theme-orange-rgb));
}

.internal_gigs,
.careers_page {
    background-color: rgb(var(--spacewalk-theme-blue-rgb));
}

.marketplace {
    background-color: rgb(var(--spacewalk-theme-grey-dark-rgb));
}

/* Extra styles for bootstrap alerts */
.alert-internal_gigs,
.alert-careers_page,
.alert-primary,
.alert-employee,
.alert-action,
.alert-admin {
    border-color: rgb(var(--spacewalk-theme-blue-rgb));
    background-color: rgba(var(--spacewalk-theme-blue-rgb), 0.1);
}

.alert-primary {
    color: rgb(var(--spacewalk-theme-blue-dark-rgb));
}

.alert-any_niche_community,
.alert-online_groups,
.alert-success,
.alert-individual,
.alert-freelancer,
.alert-contractor,
.alert-job_seeker {
    border-color: rgb(var(--spacewalk-theme-cyan-rgb));
    background-color: rgba(var(--spacewalk-theme-cyan-rgb), 0.1);
}

.alert-success {
    color: rgb(var(--spacewalk-theme-cyan-dark-rgb));
}

.alert-danger {
    color: rgb(var(--spacewalk-theme-red-dark-rgb));
    border-color: rgb(var(--spacewalk-theme-red-rgb));
    background-color: rgba(var(--spacewalk-theme-red-rgb), 0.1);
}

.alert-talent_on_demand,
.alert-staff_cover,
.alert-warning,
.alert-student,
.alert-graduate {
    border-color: rgb(var(--spacewalk-theme-orange-rgb));
    background-color: rgba(var(--spacewalk-theme-orange-rgb), 0.1);
}

.alert-warning {
    color: rgb(var(--spacewalk-theme-orange-dark-rgb));
}

.alert-info {
    border-color: rgb(var(--spacewalk-theme-paleblue-rgb));
    background-color: rgba(var(--spacewalk-theme-paleblue-rgb), 0.1);
}

.alert-external_employee {
    border-color: rgb(var(--spacewalk-theme-purple-rgb));
    background-color: rgba(var(--spacewalk-theme-purple-rgb), 0.1);
}

.alert-secondary,
.alert-default,
.alert-marketplace {
    color: rgb(var(--spacewalk-theme-grey-dark-rgb));
    border-color: rgb(var(--spacewalk-theme-grey-dark-rgb));
    background-color: rgba(var(--spacewalk-theme-grey-dark-rgb), 0.1);
}

.alert {
    border-width: 3px;
    border-style: solid;
    border-radius: 5px;
    text-align: center;
}

.alert [class*="btn-outline-"]:not(:hover) {
    background-color: white;
}

.text-primary {
    color: rgb(var(--spacewalk-theme-blue-rgb)) !important;
}

.text-success {
    color: rgb(var(--spacewalk-theme-cyan-rgb));
}

.text-danger {
    color: rgb(var(--spacewalk-theme-red-rgb));
}

.text-warning {
    color: rgb(var(--spacewalk-theme-orange-rgb));
}

/* date-picker disabled to match bootstrap disabled gray */
.dp__theme_light {
    --dp-disabled-color: var(--bs-gray-200);
}

/* loading spinner styling */
.loading {
    color: var(--spacewalk-dark-grey);
    display: inline-flex;
}

.loading::before {
    content: "\f110";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-name: fa-spin;
    animation-timing-function: linear;
}

.loading-block {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: calc(1.375rem + 1.5vw) !important;
}

.loading-bar {
    position: relative;
    overflow: hidden;
}

.loading-bar::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    background-color: var(--spacewalk-bright-blue);
    width: 0px;
    transition: width 0s;
}

.loading-bar.top::after {
    /* bottom: 0; */
    top: 0;
}

.loading-bar.show-loading-bar::after {
    width: 50%;
    transition: width ease-out 0.2s, opacity 2s, opacity 2s ease-out 8s, background-color 0.3s;
    opacity: 50%;

    animation-duration: 2s;
    animation-iteration-count: 5;
    animation-name: indeterminate-loading-bar;
}

.loading-bar.show-loading-bar.forever::after {
    animation-iteration-count: infinite;
}

.loading-bar.importing::after {
    background-color: rgb(var(--spacewalk-theme-blue-rgb));
}

.loading-bar.extracting::after {
    background-color: rgb(var(--spacewalk-theme-purple-rgb));
    animation-duration: 3s;
    width: 40%;
}

@keyframes indeterminate-loading-bar {
    from {
        left: -50%;
    }

    to {
        left: 100%;
    }
}

/* password SFC wrapper class */
.pass-sfc {
    min-height: 93.19px;
}

/* Fixing regressions between Bootstrap 4 and 5 */

a:link {
    text-decoration: none;
}

a:visited {
    text-decoration: none;
}

a:hover {
    text-decoration: none;
}

/* a:active {
    text-decoration: underline;
} */

.form-group {
    margin-bottom: 1rem;
}

.form-inline .form-control {
    display: inline-block;
    width: auto;
    vertical-align: middle;
}

@media (min-width: 1400px) {
    .container {
        max-width: 1140px;
    }
}

@media (max-width: 1199.98px) {
    body.app-shell-page>#app.container {
        max-width: 100%;
    }
}

.form-floating.fix-floating-label:before {
    content: "";
    white-space: pre-wrap;
    position: absolute;
    top: 1px;
    left: 1px;
    /* to show scrollbar */
    width: calc(100% - 14px);
    height: 30px;
    /* (default by BS) */
    border-radius: 4px;
    background-color: #ffffff;
}

.form-floating.fix-floating-label textarea.form-control {
    /* height of pseudo element */
    padding-top: 32px;
}

/* Keep placeholder hints visually distinct from entered values in Bootstrap form fields. */
.form-control::placeholder {
    color: var(--spacewalk-form-placeholder-color);
    opacity: 1;
}

/* Make bootstrap buttons use the same blue as bootstrap anchors styled as buttons */
.btn-primary,
.btn-primary:active,
.btn-primary:visited {
    background-color: var(--spacewalk-bright-blue) !important;
    border-color: var(--spacewalk-bright-blue) !important;
}

.btn-primary:hover {
    background-color: #0d6efd !important;
    border-color: #0d6efd !important;
}

.btn-outline-primary,
.btn-outline-primary:active,
.btn-outline-primary:visited {
    border-color: var(--spacewalk-bright-blue) !important;
}

.btn-outline-primary:hover {
    border-color: #0d6efd !important;
}

.bg-primary,
.bg-primary:active,
.bg-primary:visited {
    background-color: var(--spacewalk-bright-blue) !important;
    border-color: var(--spacewalk-bright-blue) !important;
}

/* Category colours are shared by skill tags, legends and management badges. Consumers choose how prominently
   to apply the border and background variables rather than maintaining their own copies of this palette. */
.skill-category {
    --skill-category-border: #6c757d;
    --skill-category-background: #eef0f2;
}

.skill-category-technical {
    --skill-category-border: #0d6efd;
    --skill-category-background: #e7f0ff;
}

.skill-category-tool {
    --skill-category-border: #0f766e;
    --skill-category-background: #e2f2ef;
}

.skill-category-domain {
    --skill-category-border: #7c3aed;
    --skill-category-background: #f0eaff;
}

.skill-category-behavioural {
    --skill-category-border: #c26a00;
    --skill-category-background: #fff1dc;
}

.skill-category-physical {
    --skill-category-border: #475569;
    --skill-category-background: #e8edf2;
}

.skill-category-qualification {
    --skill-category-border: #4f46e5;
    --skill-category-background: #ecebff;
}

.skill-category-certification {
    --skill-category-border: #198754;
    --skill-category-background: #e3f5ec;
}

.skill-category-human-language {
    --skill-category-border: #c2410c;
    --skill-category-background: #ffebe3;
}

/* Base Styles */
html,
body {
    min-height: 100%;
    scroll-behavior: smooth;
}

body {
    font-weight: 400;
    background-color: var(--spacewalk-light-grey);
    font-family: "Poppins", Helvetica, sans-serif;
    color: var(--spacewalk-text);
}

body.app-shell-page {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

body.app-shell-page>#app {
    flex: 1 0 auto;
    width: 100%;
}

/* Keep the footer hidden while Vue content is cloaked so long async pages do not briefly
   show it at the viewport bottom. Vue removes v-cloak when the app mounts, which stops
   this rule matching and lets the footer appear after the mounted app expands the page. */
body.app-shell-page:has(> #app [v-cloak])>.app-shell-footer {
    opacity: 0;
    pointer-events: none;
    animation: none;
}

.bootstrap-loading-fallback.bootstrap-loading-fallback {
    display: none;
}

.bootstrap-loading-host[v-cloak]+.bootstrap-loading-fallback {
    animation: bootstrap-loading-reveal 120ms ease-out 400ms forwards;
    display: flex;
    opacity: 0;
    visibility: hidden;
}

/* This fallback covers the visible gap before Vue, import maps, and SFC CSS have loaded.
   The reveal delay prevents distracting flashes when cached dependencies let Vue mount almost immediately. */
.bootstrap-loading-page {
    align-items: center;
    background:
        radial-gradient(circle at top left, rgba(34, 118, 255, 0.11), transparent 32%),
        linear-gradient(135deg, #f7f9fc 0%, #eef4f8 100%);
    justify-content: center;
    min-height: 100vh;
    padding: 2rem 1rem;
    width: 100%;
}

.bootstrap-loading-panel {
    align-items: center;
    background: #fff;
    border: 1px solid rgba(18, 40, 70, 0.09);
    border-radius: 8px;
    box-shadow: 0 22px 54px rgba(16, 31, 50, 0.14);
    color: var(--bs-body-color);
    display: inline-flex;
    gap: 0.75rem;
    justify-content: center;
    max-width: min(100%, 24rem);
    min-height: 4rem;
    padding: 1rem 1.25rem;
}

.bootstrap-loading-spinner {
    flex: 0 0 auto;
}

.bootstrap-loading-message {
    font-weight: 600;
}

.app-shell-bootstrap-loading-header {
    margin-bottom: 0.5rem;
}

.app-shell-bootstrap-loading-brand {
    pointer-events: none;
}

.app-shell-bootstrap-loading-status {
    align-items: center;
    display: inline-flex;
    gap: 0.5rem;
    margin-left: auto;
    min-width: 0;
    white-space: nowrap;
}

@keyframes bootstrap-loading-reveal {
    to {
        opacity: 1;
        visibility: visible;
    }
}

body:has(dialog[open]) {
    overflow: hidden;
}

strong,
b {
    font-weight: 600;
}

a {
    color: var(--spacewalk-bright-blue);
}

label {
    font-weight: bold;
}

label.form-check-label:hover {
    background: oklch(0 0 0 / 5%);
    border-radius: 5px;
    cursor: pointer;
}

/* Vue.js util & transitions, animations, etc */
[v-cloak] {
    display: none;
}

/* standard fade */
.fade-enter-active,
.fade-leave-active {
    transition: opacity 0.7s ease;
}

.fade-enter-from,
.fade-leave-to {
    opacity: 0;
}

/* standard fade-fast */
.fade-fast-enter-active,
.fade-fast-leave-active {
    transition: opacity 0.2s ease;
}

.fade-fast-enter-from,
.fade-fast-leave-to {
    opacity: 0;
}

.fade-n-slide-move,
.fade-n-slide-enter-active,
.fade-n-slide-leave-active {
    transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1);
}

.fade-n-slide-enter-from,
.fade-n-slide-leave-to {
    opacity: 0;
    transform: scaleY(0.01) translate(30px, 0);
}

.fade-n-slide-leave-active {
    position: absolute;
}

@keyframes fade-bounce-in {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
    }

    100% {
        transform: scale(1);
    }
}

/* standard fade and bounce */
.fade-bounce-in-enter-active {
    animation: fade-bounce-in 1s;
    animation-delay: 1s;
}

.fade-bounce-in-leave-active {
    position: absolute;
}

.fade-in {
    opacity: 0;
    animation: fadeInAnimation ease 1s;
    animation-fill-mode: forwards;
}

.fade-in-slower {
    opacity: 0;
    animation: fadeInAnimation ease 1.6s;
    animation-fill-mode: forwards;
}

.fade-in-faster {
    opacity: 0;
    animation: fadeInAnimation ease 0.4s;
    animation-fill-mode: forwards;
}

@keyframes fadeInAnimation {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes bounce-horizontal {

    0%,
    100% {
        transform: translateX(-2px);
    }

    50% {
        transform: translateX(2px);
    }
}

.bouncing-horizontal {
    animation: bounce-horizontal 2s var(--iterations, infinite) var(--delay, 0s);
}

@keyframes bounce-vertical {

    0%,
    100% {
        transform: translateY(-2px);
    }

    50% {
        transform: translateY(2px);
    }
}

.bouncing-vertical {
    animation: bounce-vertical 2s var(--iterations, infinite) var(--delay, 0s);
}

.rounded-pulse {
    --rounded-pulse-rgb: var(--spacewalk-bright-blue-rgb);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 0 0 rgba(var(--rounded-pulse-rgb), 0.9);
    animation: rounded-pulse 2s infinite;
}

.rounded-pulse.rounded-pulse-once {
    animation: rounded-pulse 2s 1;
}

.rounded-pulse.rounded-pulse-success {
    --rounded-pulse-rgb: var(--bs-success-rgb);
}

.rounded-pulse.rounded-pulse-warning {
    --rounded-pulse-rgb: var(--bs-warning-rgb);
}

.rounded-pulse.rounded-pulse-danger {
    --rounded-pulse-rgb: var(--bs-danger-rgb);
}

@keyframes rounded-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(var(--rounded-pulse-rgb), 0.9);
        transform: scale(0.9);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(var(--rounded-pulse-rgb), 0);
        transform: scale(1.1);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(var(--rounded-pulse-rgb), 0);
        transform: scale(0.9);
    }
}

/* CPU & GPU efficient pulse effect - specifically for pill badges */
.rounded-pill-pulse {
    --rounded-pill-pulse-rgb: var(--spacewalk-bright-blue-rgb);
    --pulse-scale-x: 2;
    --pulse-scale-y: 2;
    cursor: pointer;
}

.rounded-pill-pulse:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(var(--rounded-pill-pulse-rgb));
    border-radius: var(--bs-border-radius-pill);
    z-index: -1;
    animation: rounded-pill-pulse 2s 15 1.5s;
    will-change: transform;
}

.rounded-pill-pulse.rounded-pill-pulse-success {
    --rounded-pill-pulse-rgb: var(--bs-success-rgb);
}

.rounded-pill-pulse.rounded-pill-pulse-warning {
    --rounded-pill-pulse-rgb: var(--bs-warning-rgb);
}

.rounded-pill-pulse.rounded-pill-pulse-danger {
    --rounded-pill-pulse-rgb: var(--bs-danger-rgb);
}

@keyframes rounded-pill-pulse {
    0% {
        transform: scale(1, 1);
        opacity: 0.85;
    }

    100% {
        transform: scale(var(--pulse-scale-x), var(--pulse-scale-y));
        opacity: 0;
    }
}

.button-pulse {
    --button-pulse-rgb: var(--spacewalk-bright-blue-rgb);
    cursor: pointer;
    box-shadow: 0 0 0 rgba(var(--button-pulse-rgb), 0.9);
    animation: button-pulse 2s var(--iterations, infinite) var(--delay, 0s);
}

.button-pulse.button-pulse-success {
    --button-pulse-rgb: var(--bs-success-rgb);
}

.button-pulse.button-pulse-warning {
    --button-pulse-rgb: var(--bs-warning-rgb);
}

.button-pulse.button-pulse-danger {
    --button-pulse-rgb: var(--bs-danger-rgb);
}

@keyframes button-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(var(--button-pulse-rgb), 0.9);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(var(--button-pulse-rgb), 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(var(--button-pulse-rgb), 0);
    }
}

.grayed-out {
    transition: all 0.3s ease;
    filter: opacity(50%) grayscale(1);
    pointer-events: none;
    user-select: none;
}

.grayed-out.darker {
    filter:
        grayscale(1) grayscale(1) brightness(0.8) opacity(0.6);
}

.hover-scale {
    transition: transform var(--hover-scale-duration, 0.3s) ease;
}

.hover-scale:hover {
    transform: scale(var(--hover-scale-factor, 1.2));
}

.scroll-text {
    display: block;
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
}

.scroll-text:hover {
    text-overflow: clip;
}

/* Makes a scrollable element look like it is scrollable */
/* Needs a max-height to be be set separately where used */
.scrollbox {
    overflow-y: scroll;

    background:
        /* Shadow covers */
        linear-gradient(white 30%, rgba(255, 255, 255, 0)),
        linear-gradient(rgba(255, 255, 255, 0), white 70%) 0 100%,
        /* Shadows */
        radial-gradient(farthest-side at 50% 0, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)),
        radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)) 0 100%;
    background-repeat: no-repeat;
    background-color: white;
    background-size: 100% 40px, 100% 40px, 100% 14px, 100% 14px;

    /* Opera doesn't support this in the shorthand */
    background-attachment: local, local, scroll, scroll;
}

/* Marketplace Hero */
.hero-wrapper {
    position: relative;
}

.hero-banner {
    width: 100%;
    height: auto;
    aspect-ratio: attr(width) / attr(height);
    background-color: var(--spacewalk-white);
}

.hero-logo {
    border: 4px solid var(--spacewalk-grey);
    border-radius: 15%;
    position: absolute;
    left: 87%;
    top: 80%;
    transform: translate(-50%, -50%);
    width: 15%;
    height: auto;
    aspect-ratio: 1/1;
    background-color: var(--spacewalk-white);
}

@media (max-width: 768px) {
    .hero-logo {
        left: 86%;
        top: 90%;
        width: 20%;
    }
}

.hero-logo-bounce {
    animation: hero-bounce-in 1s;
    animation-delay: 1.5s;
}

@keyframes hero-bounce-in {
    0% {
        transform: translate(-50%, -50%) scale(1);
    }

    50% {
        transform: translate(-50%, -50%) scale(1.1);
    }

    100% {
        transform: translate(-50%, -50%) scale(1);
    }
}

.click-to-choose {
    cursor: copy;
}

/* Page Layout */
#portal-container {
    margin-top: 0.3rem;
}

#portal-header {
    color: var(--spacewalk-text);
    padding-top: 0.5rem;
    padding-bottom: 0.6rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--spacewalk-grey);
    background-color: var(--spacewalk-light-grey);
}

#portal-header .spacewalk-logo-small {
    max-height: 30px;
}

#portal-header .spacewalk-logo-medium {
    /*max-height: 40px;*/
    max-height: 40.59px;
}

#portal-header-icons ul {
    margin: 0;
}

#portal-header-icons .portal-header-icon {
    margin-left: 1rem;
    text-align: center;
    cursor: pointer;
}

@media (max-width: 768px) {
    #portal-header-icons .portal-header-icon {
        margin-left: 0.5rem;
    }
}

@media (max-width: 576px) {
    #portal-header-icons .portal-header-icon {
        margin-left: 0rem;
    }
}

#portal-header-icons .portal-header-icon a {
    text-decoration: none;
    color: var(--spacewalk-text);
    font-size: 0.7rem;
}

#portal-header-icons .portal-header-icon a div {
    display: inline-block;
    white-space: nowrap;
}

#portal-header-icons .portal-header-icon a div i {
    font-size: 1.3rem;
    /* font-size: clamp(22px, 1.0333rem + 2vw, 1.8rem); */
}

#portal-header-icons .portal-header-icon:hover svg {
    color: var(--spacewalk-bright-blue);
}

#portal-header-icons .portal-header-icon:hover i {
    color: var(--spacewalk-bright-blue);
}

#portal-header-icons li.nav-current svg {
    color: var(--spacewalk-bright-blue);
}

#portal-header-icons li.nav-current a {
    color: var(--spacewalk-bright-blue);
    font-weight: 500;
}

.app-shell {
    color: var(--bs-body-color);
    position: sticky;
    top: 0;
    z-index: 1040;
}

/* The shell header is server-rendered so cross-document view transitions and slow dependency loads
   have stable chrome to paint. Keep PrimeVue-owned overlay markup hidden until Vue has mounted it. */
.app-shell:not(.is-mounted) .app-shell-enhanced-only {
    display: none !important;
}

.app-shell-header {
    align-items: center;
    background: var(--app-shell-header-bg, #fff);
    /* Keep custom brand colours authoritative while letting scrolled content show faintly beneath the sticky shell. */
    background: color-mix(in srgb, var(--app-shell-header-bg, #fff) 92%, transparent);
    /* Blur the content that scrolls beneath the sticky shell; Safari still requires its prefixed form. */
    -webkit-backdrop-filter: saturate(115%) blur(12px);
    backdrop-filter: saturate(115%) blur(12px);
    /* Keep a plain neutral shadow first because older browsers drop the colour-mixed declaration as invalid. */
    box-shadow:
        0 1px 0 rgba(16, 24, 40, 0.16),
        0 3px 8px rgba(16, 24, 40, 0.14);
    /* In modern browsers the hairline follows a darker version of the chosen header colour, with a neutral layer
       underneath so white or very pale headers still have a visible edge. */
    box-shadow:
        0 1px 0 color-mix(in srgb, var(--app-shell-header-bg, #fff) 76%, #000 24%),
        0 3px 8px rgba(16, 24, 40, 0.12),
        0 3px 6px color-mix(in srgb, var(--app-shell-header-bg, #fff) 30%, transparent);
    color: var(--app-shell-header-fg, #212529);
    display: flex;
    gap: 1rem;
    height: 4rem;
    min-height: 4rem;
    padding: 0.45rem clamp(1rem, 4vw, 2rem);
    margin-bottom: 0.5rem;
    position: relative;
    width: 100%;
    z-index: 1040;
}

/* Page-level Vue islands render their own toast containers outside #app-shell. When the shell is present,
   move every top-positioned toast below its sticky header rather than only the shell’s flash-toast instance. */
body:has(#app-shell) .p-toast.p-toast-top-left,
body:has(#app-shell) .p-toast.p-toast-top-center,
body:has(#app-shell) .p-toast.p-toast-top-right {
    /* The header is at least 4rem tall, followed by a 0.5rem gap. Keep another 0.5rem before the toast stack
       so notices never cover navigation controls. PrimeVue sets its default 20px position inline, so this
       narrow override must be important to win that inline declaration. */
    top: 5rem !important;
}

.app-shell-flash-toast.p-toast.p-toast-top-right {
    z-index: 1060;
}

.app-shell-brand {
    align-items: center;
    color: inherit;
    display: inline-flex;
    flex: 0 0 auto;
    gap: 0.75rem;
    max-height: 3.4rem;
    max-width: min(34rem, 48vw);
    min-width: 0;
    overflow: hidden;
    position: relative;
    text-decoration: none;
    z-index: 2;
}

.app-shell-brand:has(.app-shell-brand-image-wide) {
    height: 4rem;
    margin-block: -0.45rem;
    max-height: 4rem;
    max-width: min(34rem, 48vw);
}

.app-shell-brand:hover {
    color: inherit;
}

.app-shell-brand-picture {
    display: contents;
}

/* Wide-image placement is intentionally scoped to the fixed brand slot; the shared shell header stays 4rem tall.
   Top, bottom and centre need vertical room to be visible, while full-height deliberately consumes the whole slot. */
.app-shell-brand-image {
    display: block;
    flex: 0 0 auto;
    object-fit: contain;
}

.app-shell-brand-image-square {
    aspect-ratio: 1;
    background: #fff;
    border-radius: 6px;
    height: 3.4rem;
    object-fit: contain;
    width: 3.4rem;
}

.app-shell-menu-logo {
    aspect-ratio: 1;
    background: #fff;
    border-radius: 6px;
    height: 2.5rem;
    object-fit: contain;
    width: 2.5rem;
}

.app-shell-brand-image-wide {
    align-self: center;
    height: auto;
    max-height: 3.4rem;
    max-width: min(15rem, 40vw);
    width: auto;
}

.app-shell-brand-image-wide-top {
    align-self: flex-start;
    max-height: 3.7rem;
}

.app-shell-brand-image-wide-bottom {
    align-self: flex-end;
    max-height: 3.7rem;
}

.app-shell-brand-image-wide-full-height {
    flex: 0 0 auto;
    height: 4rem;
    max-height: 4rem;
    max-width: none;
}

.app-shell-brand-name {
    display: -webkit-box;
    flex: 0 1 auto;
    font-weight: 600;
    line-height: 1.15;
    max-height: 2.3em;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
    overflow-wrap: normal;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.app-shell-brand:has(.app-shell-brand-image-wide) .app-shell-brand-name {
    max-width: min(14rem, 20vw);
}

@media (max-width: 767.98px) {
    .app-shell-brand:has(.app-shell-brand-image-wide):has(.app-shell-brand-name) {
        height: auto;
        margin-block: 0;
        max-height: 3.4rem;
    }

    .app-shell-brand:has(.app-shell-brand-name) .app-shell-brand-image-wide {
        align-self: center;
        aspect-ratio: 1;
        background: #fff;
        border-radius: 6px;
        height: 3.4rem;
        max-height: 3.4rem;
        max-width: 3.4rem;
        width: 3.4rem;
    }
}

.app-shell-custom-links {
    align-items: center;
    display: flex;
    flex-wrap: nowrap;
    gap: 0.15rem;
    /* Keep custom links visually attached to the brand so different logo/name combinations do not make centred links look off-balance. */
    justify-content: flex-start;
    max-width: 100%;
    min-width: 0;
    /* Overflowing custom links remain reachable without increasing the fixed 4rem shell height. */
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    /* The desktop grid owns placement; static positioning keeps links after the brand instead of anchoring them to the viewport centre. */
    position: static;
    /* Hide the mechanical scrollbar because the edge mask below is the visual overflow affordance. */
    scrollbar-width: none;
    scroll-snap-type: x proximity;
    white-space: nowrap;
}

.app-shell-custom-links-divider {
    /* Keep the brand/link separation outside the masked scroll container so it remains visible during overflow. */
    align-self: center;
    background-color: rgba(128, 128, 128, 0.38);
    /* Tint the divider from the active header text colour when colour-mix is available. */
    background-color: color-mix(in srgb, currentColor 28%, transparent);
    height: 1.5rem;
    opacity: 1;
}

.app-shell-custom-links.is-scrollable-start.is-scrollable-end {
    /* Fade both edges only when hidden links exist on both sides of the current scroll position. */
    -webkit-mask-image: linear-gradient(
        to right,
        transparent,
        #000 2rem,
        #000 calc(100% - 2rem),
        transparent
    );
    mask-image: linear-gradient(
        to right,
        transparent,
        #000 2rem,
        #000 calc(100% - 2rem),
        transparent
    );
}

.app-shell-custom-links.is-scrollable-start:not(.is-scrollable-end) {
    /* Show a left fade only after the user has scrolled away from the first link. */
    -webkit-mask-image: linear-gradient(to right, transparent, #000 2rem);
    mask-image: linear-gradient(to right, transparent, #000 2rem);
}

.app-shell-custom-links.is-scrollable-end:not(.is-scrollable-start) {
    /* At the initial position, only the right edge needs a fade because no content is hidden to the left. */
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 2rem), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 2rem), transparent);
}

.app-shell-custom-links::-webkit-scrollbar {
    display: none;
}

@media (min-width: 992px) {
    .app-shell-header {
        display: grid;
        grid-template-columns: max-content max-content minmax(0, 1fr) max-content;
    }

    .app-shell-custom-links-divider {
        /* The divider owns the narrow column between brand and links; the nav itself remains purely scrollable content. */
        grid-column: 2;
    }

    .app-shell-custom-links {
        /* Start the link lane immediately after the brand while preserving the right-hand action column. */
        grid-column: 3;
        justify-self: start;
        max-width: 100%;
        width: fit-content;
    }

    .app-shell-header:not(:has(.app-shell-custom-links-divider)) .app-shell-custom-links {
        /* Without a text company name there is no divider, so links can use the divider slot plus the scrollable lane. */
        grid-column: 2 / 4;
    }

    .app-shell-actions {
        /* Keep actions anchored to the final grid column even when the optional divider is not rendered. */
        grid-column: 4;
        margin-left: 0;
    }
}

.app-shell-custom-links a,
.app-shell-footer a,
.app-shell-footer button {
    color: inherit;
    text-decoration: none;
}

.app-shell-custom-links a {
    border-radius: 6px;
    display: block;
    flex: 0 0 auto;
    /* Links are intentionally quieter than the company name so the brand remains the first visual anchor. */
    font-size: 0.95rem;
    font-weight: 500;
    max-width: min(18rem, 100%);
    min-width: 0;
    opacity: 0.88;
    overflow: hidden;
    padding: 0.35rem 0.45rem;
    scroll-snap-align: start;
}

.app-shell-header:has(.app-shell-custom-links-divider) .app-shell-custom-links a:first-child {
    /* The header grid already gives the divider-to-link spacing; remove first-link padding so text spacing matches the brand-to-divider side. */
    padding-left: 0;
}

.app-shell-custom-link-label {
    display: block;
    line-height: 1.15;
    overflow: hidden;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-shell-custom-links a:hover {
    opacity: 1;
    text-decoration: underline;
}

.app-shell-footer a:hover,
.app-shell-footer button:hover {
    text-decoration: underline;
}

.app-shell-actions {
    align-items: center;
    display: inline-flex;
    flex: 0 0 auto;
    gap: 0.4rem;
    margin-left: auto;
    position: relative;
    z-index: 2;
}

.app-shell-icon-button {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: 999px;
    color: inherit;
    display: inline-flex;
    height: 2.4rem;
    justify-content: center;
    padding: 0;
    position: relative;
    width: 2.4rem;
}

.app-shell-icon-button:hover {
    background: rgba(127, 127, 127, 0.14);
}

.app-shell-links-button {
    gap: 0.3rem;
    font-weight: 700;
    padding: 0 0.65rem;
    width: auto;
}

.app-shell-links-button .fa-chevron-down {
    font-size: 0.75rem;
}

.app-shell-count {
    align-items: center;
    background: var(--bs-danger);
    border: 2px solid var(--app-shell-header-bg, #fff);
    border-radius: 999px;
    color: #fff;
    display: inline-flex;
    font-size: 0.7rem;
    font-weight: 700;
    height: 1.25rem;
    justify-content: center;
    min-width: 1.25rem;
    padding: 0 0.25rem;
    position: absolute;
    right: -0.1rem;
    top: -0.1rem;
}

.app-shell-sidebar.p-sidebar {
    width: min(100vw, 26rem);
}

.p-sidebar-mask.p-sidebar-right>.app-shell-sidebar.p-sidebar:not(.p-sidebar-enter-from):not(.p-sidebar-leave-to) {
    transform: translate3d(0, 0, 0);
}

.app-shell-drawer {
    background: var(--bs-body-bg);
    display: flex;
    flex-direction: column;
    height: 100%;
}

.app-shell-drawer-header {
    align-items: center;
    border-bottom: 1px solid var(--bs-border-color);
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    padding: 1rem;
}

.app-shell-drawer-header h2 {
    font-size: 1.15rem;
    font-weight: 700;
    margin: 0;
}

.app-shell-drawer-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    padding: 0.75rem;
}

.app-shell-menu-body {
    display: flex;
    flex-direction: column;
}

.app-shell-menu-brand {
    align-items: center;
    display: flex;
    gap: 0.75rem;
    min-width: 0;
}

.app-shell-menu-brand p {
    color: var(--bs-secondary-color);
    font-size: 0.85rem;
    margin: 0.2rem 0 0;
}

.app-shell-menu-status-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-top: 0.4rem;
}

.app-shell-menu-status-badge {
    align-items: center;
    background: var(--bs-tertiary-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 999px;
    color: var(--bs-secondary-color);
    display: inline-flex;
    font-size: 0.68rem;
    font-weight: 700;
    gap: 0.25rem;
    line-height: 1;
    padding: 0.25rem 0.45rem;
}

.app-shell-menu-status-badge-company {
    background: rgba(var(--bs-primary-rgb), 0.08);
    border-color: rgba(var(--bs-primary-rgb), 0.18);
    color: var(--bs-primary);
}

.app-shell-menu-status-badge-employee {
    background: rgba(var(--bs-secondary-rgb), 0.08);
    border-color: rgba(var(--bs-secondary-rgb), 0.18);
}

.app-shell-menu-status-badge-marketplace {
    background: rgba(var(--bs-success-rgb), 0.08);
    border-color: rgba(var(--bs-success-rgb), 0.18);
    color: var(--bs-success);
}

.app-shell-menu-status-badge-individual {
    background: rgba(var(--bs-info-rgb), 0.1);
    border-color: rgba(var(--bs-info-rgb), 0.2);
    color: var(--bs-info-text-emphasis);
}

.app-shell-menu-status-badge-staff {
    background: rgba(var(--bs-danger-rgb), 0.08);
    border-color: rgba(var(--bs-danger-rgb), 0.18);
    color: var(--bs-danger);
}

.app-shell-menu-section {
    display: grid;
    gap: 0.15rem;
    padding: 0.4rem 0;
}

.app-shell-menu-section:not(:last-child) {
    border-bottom: 1px solid var(--bs-border-color);
}

.app-shell-menu-section h3,
.app-shell-notification-group h3 {
    color: var(--bs-secondary-color);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0;
    margin: 0.25rem 0 0.15rem;
    text-transform: uppercase;
}

.app-shell-menu-section a,
.app-shell-policy-button,
.app-shell-sign-out {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: 6px;
    color: var(--bs-body-color);
    display: flex;
    gap: 0.65rem;
    font-weight: 600;
    padding: 0.45rem 0.75rem;
    text-align: left;
    text-decoration: none;
}

.app-shell-menu-section a.app-shell-menu-item-disabled {
    color: var(--bs-secondary-color);
    cursor: not-allowed;
    opacity: 0.65;
}

.app-shell-menu-section a.app-shell-menu-item-disabled:hover {
    background: transparent;
}

.app-shell-policy-button {
    cursor: pointer;
    font: inherit;
    width: 100%;
}

.app-shell-sign-out {
    cursor: pointer;
    font: inherit;
    width: 100%;
}

.app-shell-menu-section a i,
.app-shell-sign-out i {
    color: var(--bs-secondary-color);
    flex: 0 0 1.1rem;
    line-height: 1.5;
    text-align: center;
}

.app-shell-menu-item-media {
    align-items: center;
    display: inline-flex;
    flex: 0 0 2rem;
    height: 2rem;
    justify-content: center;
    width: 2rem;
}

.app-shell-menu-item-media i {
    font-size: 1rem;
}

.app-shell-menu-item-logo {
    aspect-ratio: 1;
    background: #fff;
    border: 1px solid var(--bs-border-color);
    border-radius: 6px;
    height: 2rem;
    object-fit: contain;
    width: 2rem;
}

.app-shell-menu-item-label {
    min-width: 0;
    overflow-wrap: anywhere;
}

.app-shell-staff-section a {
    background: var(--bs-tertiary-bg);
}

.app-shell-staff-section a i {
    color: var(--bs-primary);
}

.app-shell-tips-section .app-shell-tip {
    align-items: flex-start;
    background: rgba(var(--bs-primary-rgb), 0.05);
    border: 1px solid rgba(var(--bs-primary-rgb), 0.14);
}

.app-shell-tips-section .app-shell-menu-item-media i {
    color: var(--bs-primary);
}

.app-shell-tip-content {
    display: grid;
    gap: 0.1rem;
    min-width: 0;
}

.app-shell-tip-title {
    font-weight: 700;
    line-height: 1.25;
}

.app-shell-tip-text {
    color: var(--bs-secondary-color);
    font-size: 0.8rem;
    font-weight: 400;
    line-height: 1.35;
}

.app-shell-tip-action {
    color: var(--bs-primary);
    font-size: 0.78rem;
    font-weight: 700;
    margin-top: 0.15rem;
}

.app-shell-menu-section a:hover,
.app-shell-policy-button:hover,
.app-shell-sign-out:hover {
    background: var(--bs-tertiary-bg);
}

.app-shell-menu-virtual-scroller {
    width: 100%;
}

.app-shell-menu-virtual-scroller .p-virtualscroller-content,
.app-shell-menu-virtual-scroller .p-virtualscroller-items,
.app-shell-menu-virtual-scroller .p-virtualscroller-item {
    width: 100%;
}

.app-shell-menu-virtual-scroller .p-virtualscroller-content>a,
.app-shell-menu-virtual-scroller .p-virtualscroller-item>a {
    height: 48px;
}

.app-shell-policy-section {
    gap: 0.1rem;
    margin-top: auto;
}

.app-shell-menu-section-toggle {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: 6px;
    color: inherit;
    cursor: pointer;
    display: flex;
    font: inherit;
    justify-content: space-between;
    padding: 0.25rem 0.75rem;
    text-align: left;
    text-transform: inherit;
    width: 100%;
}

.app-shell-menu-section-heading {
    align-items: center;
    display: flex;
    gap: 0.05rem;
}

.app-shell-menu-section-heading .app-shell-menu-section-toggle {
    flex: 0 1 auto;
    min-width: 0;
    padding-right: 0.15rem;
    width: auto;
}

.app-shell-menu-section-info,
.app-shell-menu-section-chevron {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: 6px;
    cursor: pointer;
    display: inline-flex;
    flex: 0 0 2rem;
    font: inherit;
    height: 2rem;
    justify-content: center;
    padding: 0;
    text-transform: inherit;
    width: 2rem;
}

.app-shell-menu-section-info {
    color: var(--bs-primary);
    flex-basis: 1.35rem;
    height: 1.35rem;
    margin-left: -0.05rem;
    opacity: 0.85;
    width: 1.35rem;
}

.app-shell-menu-section-chevron {
    color: var(--bs-secondary-color);
    margin-left: auto;
}

.app-shell-menu-section-toggle:hover,
.app-shell-menu-section-info:hover,
.app-shell-menu-section-chevron:hover {
    background: var(--bs-tertiary-bg);
}

.app-shell-menu-section-toggle i,
.app-shell-menu-section-info i,
.app-shell-menu-section-chevron i {
    font-size: 0.7rem;
}

.app-shell-menu-section-info i {
    font-size: 0.8rem;
}

.app-shell-menu-section-panel {
    width: 100%;
}

.app-shell-menu-section-links {
    display: grid;
    gap: 0.15rem;
}

.app-shell-policy-links {
    display: grid;
    gap: 0.1rem;
}

.app-shell-policy-section a,
.app-shell-policy-section .app-shell-policy-button {
    color: var(--bs-secondary-color);
    font-size: 0.8rem;
    font-weight: 400;
    padding: 0.3rem 0.75rem;
}

.app-shell-notification-group {
    display: grid;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.app-shell-notification {
    border: 1px solid var(--bs-border-color);
    border-radius: 8px;
    color: inherit;
    display: grid;
    gap: 0.25rem;
    padding: 0.75rem;
    text-decoration: none;
}

.app-shell-notification:hover {
    border-color: var(--bs-primary);
    color: inherit;
}

.app-shell-notification-needs-attention {
    border-left-width: 4px;
}

.app-shell-notification-severity-success {
    border-left-color: var(--bs-success);
}

.app-shell-notification-severity-warning {
    border-left-color: var(--bs-warning);
}

.app-shell-notification-severity-critical {
    border-left-color: var(--bs-danger);
}

.app-shell-notification-title {
    font-weight: 700;
}

.app-shell-notification-text {
    color: var(--bs-secondary-color);
    font-size: 0.9rem;

    /* So multi-line staff communications stay multi-line when rendered */
    white-space: pre-line;
}

.app-shell-notification-action {
    color: var(--bs-primary);
    font-size: 0.85rem;
    font-weight: 700;
    margin-top: 0.25rem;
    text-decoration: none;
}

.app-shell-notification-action:hover {
    text-decoration: underline;
}

.app-shell-notification-actions {
    display: grid;
    gap: 0.35rem;
    margin-top: 0.25rem;
}

.app-shell-notification-dismiss {
    align-self: start;
    background: transparent;
    border: 0;
    color: var(--bs-secondary-color);
    font-size: 0.8rem;
    font-weight: 600;
    justify-self: start;
    margin-top: 0.25rem;
    padding: 0;
    text-decoration: underline;
}

.app-shell-notification-dismiss:hover,
.app-shell-notification-dismiss:focus {
    color: var(--bs-primary);
}

.app-shell-notification-dismiss:disabled {
    color: var(--bs-secondary-color);
    cursor: wait;
    opacity: 0.75;
}

.app-shell-notification-action-row {
    align-items: center;
    display: flex;
    gap: 0.75rem;
    justify-content: space-between;
}

.app-shell-action-badge {
    align-items: center;
    background: var(--bs-primary);
    border-radius: 999px;
    color: #fff;
    display: inline-flex;
    flex: 0 0 auto;
    font-size: 0.75rem;
    font-weight: 700;
    justify-content: center;
    min-width: 1.45rem;
    padding: 0.1rem 0.45rem;
}

.app-shell-empty {
    color: var(--bs-secondary-color);
    padding: 2rem 1rem;
    text-align: center;
}

.app-shell-footer {
    background: var(--app-shell-footer-bg, #f8f9fa);
    color: var(--app-shell-footer-fg, #212529);
    flex-shrink: 0;
    margin-top: 3rem;
    padding: 1rem clamp(1rem, 4vw, 2rem);
    position: relative;
    width: 100%;
}

.app-shell-footer-configuration-button {
    color: inherit;
    display: inline-flex;
    line-height: 1;
    position: absolute;
    right: clamp(1rem, 4vw, 2rem);
    top: 0.75rem;
}

.app-shell-footer-links {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 1rem;
    justify-content: center;
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: smaller;
}

.app-shell-footer button {
    background: transparent;
    border: 0;
    padding: 0;
}

.spacewalk-action-menu.p-menu,
.app-shell-configuration-menu.p-menu {
    max-width: calc(100vw - 1rem);
    min-width: 0;
    padding: 0.25rem;
    width: max-content;
}

.app-shell-configuration-menu-title {
    background-color: var(--bs-primary-bg-subtle);
    border-bottom: 1px solid var(--bs-primary-border-subtle);
    border-top-left-radius: calc(var(--bs-border-radius) - 1px);
    border-top-right-radius: calc(var(--bs-border-radius) - 1px);
    color: var(--bs-primary);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.2;
    margin: -0.25rem -0.25rem 0.2rem;
    padding: 0.5rem 0.9rem;
}

.spacewalk-action-menu.p-menu .p-menu-list,
.app-shell-configuration-menu.p-menu .p-menu-list {
    margin: 0;
    padding: 0;
}

.spacewalk-action-menu.p-menu .p-menuitem,
.app-shell-configuration-menu.p-menu .p-menuitem {
    margin: 0;
}

.spacewalk-action-menu.p-menu .p-menuitem+.p-menuitem,
.app-shell-configuration-menu.p-menu .p-menuitem+.p-menuitem {
    margin-top: 0.1rem;
}

.spacewalk-action-menu.p-menu .p-menuitem>.p-menuitem-content .p-menuitem-link,
.app-shell-configuration-menu.p-menu .p-menuitem>.p-menuitem-content .p-menuitem-link {
    gap: 0.55rem;
    padding: 0.45rem 0.65rem;
    text-decoration: none;
}

.spacewalk-action-menu--compact.p-menu .p-menuitem>.p-menuitem-content .p-menuitem-link,
.app-shell-configuration-menu.p-menu .p-menuitem>.p-menuitem-content .p-menuitem-link {
    font-size: 0.78rem;
}

.app-shell-header-links-menu.p-menu {
    box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, 0.28);
}

.spacewalk-action-menu--prominent.p-menu .p-menuitem>.p-menuitem-content .p-menuitem-link,
.app-shell-header-links-menu.p-menu .p-menuitem>.p-menuitem-content .p-menuitem-link {
    font-size: 1rem;
    font-weight: 700;
}

.spacewalk-action-menu.p-menu .p-menuitem>.p-menuitem-content .p-menuitem-link:hover,
.spacewalk-action-menu.p-menu .p-menuitem>.p-menuitem-content .p-menuitem-link:focus,
.app-shell-configuration-menu.p-menu .p-menuitem>.p-menuitem-content .p-menuitem-link:hover,
.app-shell-configuration-menu.p-menu .p-menuitem>.p-menuitem-content .p-menuitem-link:focus {
    text-decoration: none;
}

.spacewalk-action-menu.p-menu .p-menuitem>.p-menuitem-content .p-menuitem-link .p-menuitem-icon,
.app-shell-configuration-menu.p-menu .p-menuitem>.p-menuitem-content .p-menuitem-link .p-menuitem-icon {
    flex: 0 0 1.25rem;
    margin-right: 0;
    text-align: center;
}

.app-shell-footer-powered-by img {
    height: 2.5rem;
    max-width: 8rem;
    object-fit: contain;
    width: auto;
}

@media (max-width: 575.98px) {
    .app-shell-brand-name {
        display: none;
    }
}

/* Logo Styles */
.square-logo {
    /* float: right; */
    border: 4px solid var(--spacewalk-grey);
    border-radius: 15%;
    width: clamp(6rem, 5.0357rem + 4.2857vw, 8.25rem);
    height: clamp(6rem, 5.0357rem + 4.2857vw, 8.25rem);
}

/* General utils */
:target,
.focus-attention {
    transition: all 1s ease 1s;
    box-shadow: 0 0 0.5rem 0.2rem var(--spacewalk-blue);
}

.pulse {
    --pulses: 3;
    --duration: 0.5s;
    --delay: 0s;

    --scale-start: 0.98;
    /* new */
    --scale-peak: 1.01;
    /* new */
    --scale-end: 1;
    /* normal size */

    animation-name: heartbeat;
    animation-duration: var(--duration);
    animation-timing-function: ease-in-out;
    animation-iteration-count: var(--pulses);
    animation-fill-mode: forwards;
    animation-delay: var(--delay);
    transform-origin: center;
}

@keyframes heartbeat {
    0% {
        transform: scale(var(--scale-start));
    }

    40% {
        transform: scale(var(--scale-peak));
    }

    100% {
        transform: scale(var(--scale-end));
    }
}

.prompt-test-pulse {
    display: inline-block;
    animation: prompt-test-pulse 1.4s ease-in-out infinite;
}

.spinner-border.prompt-test-pulse {
    animation-name: spinner-border, prompt-test-pulse;
    animation-duration: 0.75s, 1.4s;
    animation-timing-function: linear, ease-in-out;
    animation-iteration-count: infinite, infinite;
}

@keyframes prompt-test-pulse {

    0%,
    100% {
        opacity: 0.4;
    }

    50% {
        opacity: 1;
    }
}

dialog {
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    border: none;
    border-radius: 10px;
}

dialog::backdrop {
    background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.4));
    animation: fade-in 1s;
}

/* Breakout of a bootstrap container */
.break-out {
    width: 100vw;
    position: relative;
    left: calc(-1 * (100vw - 100%) / 2);
}

/* Show external link icon for anchor tags that open in a new tab */
a[target="_blank"]:not(.no-external-link-icon):after {
    content: "\f35d";
    font-family: "Font Awesome 5 Free";
    font-weight: 600;
    padding-left: 0.5em;
    font-size: 0.65em;
    vertical-align: middle;
}

/* Portal Content - Forms */
span.validation-help-v3 {
    display: inline;
    margin-left: 0.5rem;
    color: var(--spacewalk-red);
    font-size: 0.8rem;
    font-weight: bold;
    opacity: 0;
    animation: fadeInAnimation ease 0.5s;
    animation-fill-mode: forwards;
}

span.validation-help {
    display: none;
    margin-left: 0.5rem;
    color: var(--spacewalk-red);
    font-size: 0.8rem;
    font-weight: bold;
}

span.validation-help-visible {
    display: block;
}

/* #skills, */
/* #marketplaces, */
/* #company-profile, */
/* #branding, */
/* #overview, */
/* #company-details, */
/* #manage-employees, */
/* #invite-employees, */
/* #sharing, */
:target,
.focus-attention,
.scroll-top-below-navbar,
span.validation-help-v3 {
    scroll-margin-top: 80px;
}

.text-balanced {
    text-wrap: balance;
}

.text-capitalized {
    text-transform: capitalize;
}

/* Manage pages common UI styles */
.member-badge {
    font-size: 0.6rem;
    padding-left: 0.2rem;
    padding-right: 0.2rem;
    border-radius: 0.2rem;
    display: inline-block;
    vertical-align: middle;
}

.admin-badge {
    color: var(--spacewalk-dark-blue);
    border: 1px solid var(--spacewalk-dark-blue);
    background-color: var(--spacewalk-pale-blue);
}

.invited-badge {
    color: var(--spacewalk-dark-grey);
    border: 1px solid var(--spacewalk-dark-grey);
    background-color: var(--spacewalk-light-grey);
}

.invited-by {
    color: var(--spacewalk-dark-grey);
}

.membership-row:hover {
    border-radius: 0.3rem;
    background-color: var(--spacewalk-light-grey);
}

.remove-member-button {
    color: var(--spacewalk-red);
    cursor: pointer;
    transition: 0.3s ease;
}

.resend-invite-button {
    color: var(--spacewalk-bright-blue);
    cursor: pointer;
    transition: 0.3s ease;
}

.diagonal-stripes {
    background: repeating-linear-gradient(45deg,
            /* angle of stripes */
            var(--bs-gray-200),
            /* stripe color 1 */
            var(--bs-gray-200) 5px,
            /* end of stripe color 1 */
            #fff 5px,
            /* stripe color 2 */
            #fff 10px
            /* end of stripe color 2 */
        );
}

/* Copy-to-clipboard affordance */
.copyable {
    position: relative;
    padding-right: 1rem;
}

.copyable::after {
    content: "\f0c5";
    font-family: "Font Awesome 5 Free";
    font-weight: 400;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%) scale(1);
    color: rgba(148, 163, 184, 0.9);
    font-size: 0.85em;
    pointer-events: none;
    opacity: 1;
    transition: opacity 160ms ease-in-out, transform 160ms ease-in-out;
}

@media (hover: hover) and (pointer: fine) {
    .copyable::after {
        opacity: 0.35;
        /* So copy icon doesn't get clipped when scaled up during hover */
        margin-right: 0.1rem;
    }

    .copyable:hover::after {
        opacity: 1;
        transform: translateY(-50%) scale(1.1);
    }
}

.scroll-text.copyable {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    width: auto;
    max-width: 100%;
    min-width: 0;
    padding-right: 0;
}

.scroll-text.copyable::after {
    position: static;
    transform: scale(1);
    margin-left: 0.15rem;
    flex-shrink: 0;
}

@media (hover: hover) and (pointer: fine) {
    .scroll-text.copyable::after {
        opacity: 0.35;
    }

    .scroll-text.copyable:hover::after {
        opacity: 1;
        transform: scale(1.1);
    }
}

.scroll-text.copyable .copyable-text {
    display: inline-block;
    min-width: 0;
    flex: 1 1 auto;
    width: auto;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
}

.scroll-text.copyable .copyable-text.text-truncate {
    text-overflow: ellipsis;
}

/* Shared pill-style radio filters for compact table status controls. */
.segmented-radio-group {
    gap: 0.45rem;
}

.segmented-radio-group .form-check {
    margin: 0;
    padding-left: 0;
}

.segmented-radio-group .form-check-label {
    align-items: center;
    background-color: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 999px;
    cursor: pointer;
    display: inline-flex;
    font-size: 0.95rem;
    gap: 0.42rem;
    line-height: 1.15;
    padding: 0.38rem 0.68rem;
    transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
    white-space: nowrap;
}

.segmented-radio-group .btn-check:checked+.form-check-label {
    background-color: color-mix(in srgb, var(--bs-primary) 10%, white);
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 0.12rem color-mix(in srgb, var(--bs-primary) 20%, transparent);
}

.segmented-radio-group .btn-check:focus-visible+.form-check-label {
    box-shadow: 0 0 0 0.18rem rgba(var(--bs-primary-rgb), 0.25);
}

.segmented-radio-group .form-check-label:hover {
    border-color: var(--bs-primary);
    border-radius: 999px;
}

.segmented-radio-label {
    align-items: center;
    display: inline-flex;
    gap: 0.45rem;
}