:root {

    .app-sidebar .has-sub > ul {
        display: none;
    }

    .app-sidebar .has-sub.open > ul {
        display: block;
    }

    --gnc-primary-rgb: 0, 95, 205;
    --gnc-secondary-rgb: 0, 115, 210;
    --gnc-primary-dark-rgb: 0, 60, 145;
    --gnc-primary-light-rgb: 0, 135, 220;
    --gnc-metal-rgb: 100, 116, 139;
    --gnc-neutral-surface-rgb: 248, 250, 252;
    --gnc-neutral-ink-rgb: 15, 23, 42;
    --gnc-neutral-panel-gradient: linear-gradient(
            135deg,
            rgba(248, 250, 252, 0.95),
            rgba(255, 255, 255, 0.95)
    );

    --primary-rgb: var(--gnc-primary-rgb) !important;
    --secondary-rgb: var(--gnc-secondary-rgb) !important;
    --primary-tint1-rgb: var(--gnc-primary-dark-rgb) !important;
    --primary-tint2-rgb: var(--gnc-primary-light-rgb) !important;
    --primary-tint3-rgb: var(--gnc-metal-rgb) !important;

    --primary-color: rgb(var(--primary-rgb)) !important;
    --primary-tint1-color: rgb(var(--primary-tint1-rgb)) !important;
    --primary-tint2-color: rgb(var(--primary-tint2-rgb)) !important;
    --primary-tint3-color: rgb(var(--primary-tint3-rgb)) !important;
    --primary-border: rgb(var(--primary-rgb)) !important;

    --primary005: rgba(var(--primary-rgb), 0.05) !important;
    --primary01: rgba(var(--primary-rgb), 0.10) !important;
    --primary02: rgba(var(--primary-rgb), 0.20) !important;
    --primary03: rgba(var(--primary-rgb), 0.30) !important;
    --primary04: rgba(var(--primary-rgb), 0.40) !important;
    --primary05: rgba(var(--primary-rgb), 0.50) !important;
    --primary06: rgba(var(--primary-rgb), 0.60) !important;
    --primary07: rgba(var(--primary-rgb), 0.70) !important;
    --primary08: rgba(var(--primary-rgb), 0.80) !important;
    --primary09: rgba(var(--primary-rgb), 0.90) !important;

    --custom-primary-rgb: var(--gnc-primary-rgb);
    --custom-secondary-rgb: var(--gnc-secondary-rgb);
    --custom-primary-dark-rgb: var(--gnc-primary-dark-rgb);
    --custom-primary-light-rgb: var(--gnc-primary-light-rgb);
    --custom-metal-rgb: var(--gnc-metal-rgb);

    --custom-primary-solid: rgb(var(--custom-primary-rgb));
    --custom-secondary-solid: rgb(var(--custom-secondary-rgb));
    --custom-primary-dark-solid: rgb(var(--custom-primary-dark-rgb));
    --custom-primary-light-solid: rgb(var(--custom-primary-light-rgb));

    --custom-grad-primary: linear-gradient(
            90deg,
            rgba(var(--custom-primary-dark-rgb), 1) 0%,
            rgba(var(--custom-primary-rgb), 1) 48%,
            rgba(var(--custom-secondary-rgb), 1) 78%,
            rgba(var(--custom-primary-rgb), 1) 100%
    );

    --custom-grad-secondary: linear-gradient(
            90deg,
            rgba(var(--custom-primary-dark-rgb), 1) 0%,
            rgba(var(--custom-primary-rgb), 1) 48%,
            rgba(var(--custom-secondary-rgb), 1) 78%,
            rgba(var(--custom-primary-rgb), 1) 100%
    );

    --custom-grad-primary-hover: linear-gradient(
            90deg,
            rgba(var(--custom-primary-dark-rgb), 1) 0%,
            rgba(var(--custom-primary-rgb), 1) 46%,
            rgba(var(--custom-secondary-rgb), 1) 78%,
            rgba(var(--custom-primary-rgb), 1) 100%
    );

    --custom-grad-secondary-hover: linear-gradient(
            90deg,
            rgba(var(--custom-primary-dark-rgb), 1) 0%,
            rgba(var(--custom-primary-rgb), 1) 46%,
            rgba(var(--custom-secondary-rgb), 1) 78%,
            rgba(var(--custom-primary-rgb), 1) 100%
    );

    --custom-grad-primary-subtle: linear-gradient(
            90deg,
            rgba(var(--custom-primary-dark-rgb), 0.96) 0%,
            rgba(var(--custom-primary-rgb), 0.92) 68%,
            rgba(var(--custom-secondary-rgb), 0.22) 100%
    );

    --custom-grad-secondary-subtle: linear-gradient(
            90deg,
            rgba(var(--custom-primary-dark-rgb), 0.94) 0%,
            rgba(var(--custom-primary-rgb), 0.90) 58%,
            rgba(var(--custom-secondary-rgb), 0.30) 100%
    );

    .btn-primary {
        background-color: rgb(var(--gnc-primary-rgb)) !important;
        border-color: rgb(var(--gnc-primary-rgb)) !important;
        color: #fff !important;
    }

    .btn-primary:hover,
    .btn-primary:focus,
    .btn-primary:active,
    .btn-primary.active,
    .show > .btn-primary.dropdown-toggle {
        background-color: rgb(var(--gnc-primary-dark-rgb)) !important;
        border-color: rgb(var(--gnc-primary-dark-rgb)) !important;
        color: #fff !important;
    }

    .btn-outline-primary {
        color: rgb(var(--gnc-primary-rgb)) !important;
        border-color: rgb(var(--gnc-primary-rgb)) !important;
    }

    .btn-outline-primary:hover,
    .btn-outline-primary:focus,
    .btn-outline-primary:active,
    .btn-outline-primary.active,
    .show > .btn-outline-primary.dropdown-toggle {
        background-color: rgb(var(--gnc-primary-rgb)) !important;
        border-color: rgb(var(--gnc-primary-rgb)) !important;
        color: #fff !important;
    }

    .text-primary {
        color: rgb(var(--gnc-primary-rgb)) !important;
    }

    .bg-primary {
        background-color: rgb(var(--gnc-primary-rgb)) !important;
    }

    .border-primary {
        border-color: rgb(var(--gnc-primary-rgb)) !important;
    }

    .bg-primary-transparent {
        background-color: rgba(var(--gnc-primary-rgb), 0.10) !important;
        color: rgb(var(--gnc-primary-rgb)) !important;
    }

    .bg-info-transparent {
        background-color: rgba(var(--gnc-secondary-rgb), 0.10) !important;
        color: rgb(var(--gnc-secondary-rgb)) !important;
    }
    
    .progress-bar {
        background-color: rgb(var(--gnc-primary-rgb)) !important;
    }

    .custom-bg-content {
        background-color: rgba(var(--custom-primary-rgb), 0.050) !important;
        background-image: linear-gradient(
                180deg,
                rgba(var(--custom-primary-rgb), 0.016) 0%,
                rgba(var(--custom-secondary-rgb), 0.008) 100%
        ) !important;
    }

    .app-content,
    .main-content,
    .content,
    .content-wrapper,
    .page,
    .app-content-wrapper {
        background-color: rgba(var(--custom-primary-rgb), 0.012) !important;
        background-image: linear-gradient(
                180deg,
                rgba(var(--custom-primary-rgb), 0.016) 0%,
                rgba(var(--custom-secondary-rgb), 0.008) 100%
        ) !important;
    }

    .btn-outline-primary:disabled,
    .btn-outline-primary.disabled {
        color: rgba(var(--custom-primary-rgb), 0.55) !important;
        border-color: rgba(var(--custom-primary-rgb), 0.25) !important;
        background-color: rgba(var(--custom-primary-rgb), 0.08) !important;
        opacity: 1 !important;
    }

    .btn-primary-gradient {
        background-image: var(--custom-grad-primary) !important;
        background-color: transparent !important;
        border: none !important;
        color: #fff !important;
        box-shadow: 0 0.18rem 0.45rem rgba(var(--custom-primary-rgb), 0.16) !important;
        transition:
                background-image 0.16s ease,
                background-color 0.16s ease,
                box-shadow 0.16s ease,
                filter 0.16s ease !important;
    }

    .btn-primary-gradient:hover,
    .btn-primary-gradient:focus,
    .btn-primary-gradient:active,
    .btn-primary-gradient.active,
    .show > .btn-primary-gradient.dropdown-toggle {
        background-image: var(--custom-grad-primary-hover) !important;
        background-color: transparent !important;
        border: none !important;
        color: #fff !important;
        box-shadow: 0 0.22rem 0.5rem rgba(var(--custom-primary-rgb), 0.20) !important;
        transform: none !important;
        filter: brightness(1.05) saturate(1.03) !important;
    }

    .btn-primary-gradient:disabled,
    .btn-primary-gradient.disabled {
        background-image: var(--custom-grad-primary) !important;
        background-color: transparent !important;
        border: none !important;
        color: #fff !important;
        box-shadow: none !important;
        transform: none !important;
        filter: none !important;
        opacity: 0.65 !important;
    }

    .btn-primary1,
    .btn-primary1-gradient {
        background-image: var(--custom-grad-secondary) !important;
        background-color: transparent !important;
        border: none !important;
        color: #fff !important;
        box-shadow: 0 0.18rem 0.45rem rgba(var(--custom-primary-dark-rgb), 0.16) !important;
        transition:
                background-image 0.16s ease,
                background-color 0.16s ease,
                box-shadow 0.16s ease,
                filter 0.16s ease !important;
    }

    .btn-primary1:hover,
    .btn-primary1:focus,
    .btn-primary1:active,
    .btn-primary1.active,
    .show > .btn-primary1.dropdown-toggle,
    .btn-primary1-gradient:hover,
    .btn-primary1-gradient:focus,
    .btn-primary1-gradient:active,
    .btn-primary1-gradient.active,
    .show > .btn-primary1-gradient.dropdown-toggle {
        background-image: var(--custom-grad-secondary-hover) !important;
        background-color: transparent !important;
        border: none !important;
        color: #fff !important;
        box-shadow: 0 0.22rem 0.5rem rgba(var(--custom-primary-dark-rgb), 0.20) !important;
        transform: none !important;
        filter: brightness(1.05) saturate(1.03) !important;
    }

    .btn-primary1:disabled,
    .btn-primary1.disabled,
    .btn-primary1-gradient:disabled,
    .btn-primary1-gradient.disabled {
        background-image: var(--custom-grad-secondary) !important;
        background-color: transparent !important;
        border: none !important;
        color: #fff !important;
        box-shadow: none !important;
        transform: none !important;
        filter: none !important;
        opacity: 0.65 !important;
    }

    .bg-gradient-primary {
        background-image: var(--custom-grad-primary) !important;
        background-color: transparent !important;
        color: #fff !important;
    }

    .card.card-accent {
        position: relative;
    }

    .card.card-accent::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 6px;
        background-image: var(--custom-grad-primary);
        background-color: transparent;
        border-top-left-radius: inherit;
        border-top-right-radius: inherit;
        pointer-events: none;
    }

    .card .card-header-primary {
        background-image: none !important;
        background-color: var(--custom-primary-solid) !important;
        color: #fff !important;
    }

    .card .card-header-secondary {
        background-image: none !important;
        background-color: var(--custom-secondary-solid) !important;
        color: #fff !important;
    }

    .app-sidebar .side-menu__icon {
        color: rgba(var(--custom-primary-rgb), 0.85) !important;
    }

    .app-sidebar .side-menu__icon svg {
        fill: currentColor !important;
        stroke: currentColor !important;
    }

    .app-sidebar .main-menu > li > .side-menu__item {
        position: relative !important;
        z-index: 0 !important;
        min-height: 40px !important;
        height: 40px !important;
        display: flex !important;
        align-items: center !important;
        border-radius: 0.25rem !important;
        overflow: hidden !important;
        background-image: none !important;
        background-color: transparent !important;
        isolation: isolate !important;
        transition:
                background-color 0.16s ease,
                color 0.16s ease,
                transform 0.16s ease,
                box-shadow 0.16s ease,
                filter 0.16s ease !important;
    }

    .app-sidebar .main-menu > li > .side-menu__item::before,
    .app-sidebar .main-menu > li > .side-menu__item::after {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        pointer-events: none;
        opacity: 0;
        transition:
                opacity 0.16s ease,
                filter 0.16s ease !important;
    }

    .app-sidebar .main-menu > li > .side-menu__item::before {
        z-index: -2;
        background-image: var(--custom-grad-primary);
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }

    .app-sidebar .main-menu > li > .side-menu__item::after {
        z-index: -1;
        box-shadow: inset 2px 0 0 rgba(var(--custom-primary-light-rgb), 0.82);
    }

    .app-sidebar .main-menu > li > .side-menu__item .side-menu__icon,
    .app-sidebar .main-menu > li > .side-menu__item .side-menu__label,
    .app-sidebar .main-menu > li > .side-menu__item .side-menu__angle {
        position: relative;
        z-index: 1;
    }

    .app-sidebar .main-menu > li:not(.active):not(.open):not(.has-sub.active):not(.has-sub.open):not(.slide.active):not(.slide.open)
    > .side-menu__item:not(.active):not([aria-current="page"]):hover {
        background-image: none !important;
        background-color: rgba(var(--custom-primary-rgb), 0.075) !important;
        color: rgb(var(--custom-primary-rgb)) !important;
        border-color: transparent !important;
        border-radius: 0.25rem !important;
        overflow: hidden !important;
        transform: none !important;
        box-shadow: inset 2px 0 0 rgba(var(--custom-secondary-rgb), 0.65) !important;
    }

    .app-sidebar .main-menu > li:not(.active):not(.open):not(.has-sub.active):not(.has-sub.open):not(.slide.active):not(.slide.open)
    > .side-menu__item:not(.active):not([aria-current="page"]):hover .side-menu__label,
    .app-sidebar .main-menu > li:not(.active):not(.open):not(.has-sub.active):not(.has-sub.open):not(.slide.active):not(.slide.open)
    > .side-menu__item:not(.active):not([aria-current="page"]):hover .side-menu__icon {
        color: rgb(var(--custom-primary-rgb)) !important;
    }

    .app-sidebar .main-menu > li:not(.active):not(.open):not(.has-sub.active):not(.has-sub.open):not(.slide.active):not(.slide.open)
    > .side-menu__item:not(.active):not([aria-current="page"]):hover .side-menu__icon svg {
        fill: currentColor !important;
        stroke: currentColor !important;
    }

    .app-sidebar .main-menu > li.has-sub.open:not(.active) > .side-menu__item,
    .app-sidebar .main-menu > li.slide.open:not(.active) > .side-menu__item {
        background-image: none !important;
        background-color: rgba(var(--custom-primary-rgb), 0.075) !important;
        color: rgb(var(--custom-primary-rgb)) !important;
        border-color: transparent !important;
        border-radius: 0.25rem !important;
        overflow: hidden !important;
        box-shadow: inset 2px 0 0 rgba(var(--custom-secondary-rgb), 0.65) !important;
    }

    .app-sidebar .main-menu > li.has-sub.open:not(.active) > .side-menu__item .side-menu__label,
    .app-sidebar .main-menu > li.has-sub.open:not(.active) > .side-menu__item .side-menu__icon,
    .app-sidebar .main-menu > li.slide.open:not(.active) > .side-menu__item .side-menu__label,
    .app-sidebar .main-menu > li.slide.open:not(.active) > .side-menu__item .side-menu__icon {
        color: rgb(var(--custom-primary-rgb)) !important;
    }

    .app-sidebar .main-menu > li.has-sub.open:not(.active) > .side-menu__item .side-menu__icon svg,
    .app-sidebar .main-menu > li.slide.open:not(.active) > .side-menu__item .side-menu__icon svg {
        fill: currentColor !important;
        stroke: currentColor !important;
    }

    .app-sidebar .main-menu > li.has-sub.active > .side-menu__item,
    .app-sidebar .main-menu > li.slide.active > .side-menu__item,
    .app-sidebar .main-menu > li > .side-menu__item.active,
    .app-sidebar .main-menu > li > .side-menu__item[aria-current="page"] {
        min-height: 40px !important;
        height: 40px !important;
        display: flex !important;
        align-items: center !important;
        background-image: none !important;
        background-color: transparent !important;
        color: #fff !important;
        border-color: transparent !important;
        border-radius: 0.25rem !important;
        overflow: hidden !important;
        box-shadow: 0 0.16rem 0.42rem rgba(var(--custom-primary-rgb), 0.14) !important;
    }

    .app-sidebar .main-menu > li.has-sub.active > .side-menu__item::before,
    .app-sidebar .main-menu > li.slide.active > .side-menu__item::before,
    .app-sidebar .main-menu > li > .side-menu__item.active::before,
    .app-sidebar .main-menu > li > .side-menu__item[aria-current="page"]::before {
        opacity: 1;
    }

    .app-sidebar .main-menu > li.has-sub.active > .side-menu__item:hover,
    .app-sidebar .main-menu > li.slide.active > .side-menu__item:hover,
    .app-sidebar .main-menu > li > .side-menu__item.active:hover,
    .app-sidebar .main-menu > li > .side-menu__item[aria-current="page"]:hover {
        min-height: 40px !important;
        height: 40px !important;
        display: flex !important;
        align-items: center !important;
        background-image: none !important;
        background-color: transparent !important;
        color: #fff !important;
        border-radius: 0.25rem !important;
        overflow: hidden !important;
        box-shadow: 0 0.2rem 0.48rem rgba(var(--custom-primary-rgb), 0.18) !important;
        transform: none !important;
        filter: brightness(1.04) saturate(1.02) !important;
    }

    .app-sidebar .main-menu > li.has-sub.active > .side-menu__item:hover::before,
    .app-sidebar .main-menu > li.slide.active > .side-menu__item:hover::before,
    .app-sidebar .main-menu > li > .side-menu__item.active:hover::before,
    .app-sidebar .main-menu > li > .side-menu__item[aria-current="page"]:hover::before {
        background-image: var(--custom-grad-primary-hover);
        opacity: 1;
    }

    .app-sidebar .main-menu > li.has-sub.active > .side-menu__item:hover::after,
    .app-sidebar .main-menu > li.slide.active > .side-menu__item:hover::after,
    .app-sidebar .main-menu > li > .side-menu__item.active:hover::after,
    .app-sidebar .main-menu > li > .side-menu__item[aria-current="page"]:hover::after {
        opacity: 1;
    }

    .app-sidebar .main-menu > li.has-sub.active > .side-menu__item .side-menu__label,
    .app-sidebar .main-menu > li.slide.active > .side-menu__item .side-menu__label,
    .app-sidebar .main-menu > li > .side-menu__item.active .side-menu__label,
    .app-sidebar .main-menu > li > .side-menu__item[aria-current="page"] .side-menu__label,
    .app-sidebar .main-menu > li.has-sub.active > .side-menu__item .side-menu__icon,
    .app-sidebar .main-menu > li.slide.active > .side-menu__item .side-menu__icon,
    .app-sidebar .main-menu > li > .side-menu__item.active .side-menu__icon,
    .app-sidebar .main-menu > li > .side-menu__item[aria-current="page"] .side-menu__icon {
        color: #fff !important;
    }

    .app-sidebar .slide-menu .side-menu__item.active,
    .app-sidebar .slide-menu .side-menu__item[aria-current="page"],
    .app-sidebar .slide-menu li.has-sub.active > .side-menu__item,
    .app-sidebar .slide-menu li.has-sub.open > .side-menu__item {
        background-image: none !important;
        background-color: transparent !important;
        border-color: transparent !important;
        color: var(--custom-primary-solid) !important;
    }

    .app-sidebar .slide-menu .side-menu__item:hover {
        background-color: rgba(var(--custom-primary-rgb), 0.06) !important;
        color: rgb(var(--custom-primary-rgb)) !important;
        border-radius: 0.25rem !important;
        overflow: hidden !important;
    }

    .app-sidebar .slide-menu .side-menu__item.active .side-menu__label,
    .app-sidebar .slide-menu .side-menu__item[aria-current="page"] .side-menu__label,
    .app-sidebar .slide-menu li.has-sub.active > .side-menu__item .side-menu__label,
    .app-sidebar .slide-menu li.has-sub.open > .side-menu__item .side-menu__label {
        color: var(--custom-primary-solid) !important;
    }

    .app-sidebar .slide-menu .side-menu__item.active .side-menu__icon,
    .app-sidebar .slide-menu .side-menu__item[aria-current="page"] .side-menu__icon,
    .app-sidebar .slide-menu li.has-sub.active > .side-menu__item .side-menu__icon,
    .app-sidebar .slide-menu li.has-sub.open > .side-menu__item .side-menu__icon {
        color: var(--custom-primary-solid) !important;
    }

    .app-sidebar .slide-menu .side-menu__item.active .side-menu__icon svg,
    .app-sidebar .slide-menu .side-menu__item[aria-current="page"] .side-menu__icon svg,
    .app-sidebar .slide-menu li.has-sub.active > .side-menu__item .side-menu__icon svg,
    .app-sidebar .slide-menu li.has-sub.open > .side-menu__item .side-menu__icon svg {
        fill: currentColor !important;
        stroke: currentColor !important;
    }

    &[data-theme-mode="dark"] {
        --gnc-neutral-surface-rgb: var(--body-bg-rgb2);
        --gnc-neutral-ink-rgb: 255, 255, 255;
        --gnc-neutral-panel-gradient: linear-gradient(
                135deg,
                rgba(var(--body-bg-rgb2), 0.95),
                rgba(var(--body-bg-rgb2), 0.72)
        );
    }

    &[data-theme-mode="dark"] .btn-light,
    &[data-theme-mode="dark"] .btn-light:hover,
    &[data-theme-mode="dark"] .btn-light:focus,
    &[data-theme-mode="dark"] .btn-light:active,
    &[data-theme-mode="dark"] .btn-light.active,
    &[data-theme-mode="dark"] .btn-light.show,
    &[data-theme-mode="dark"] .btn-check:active + .btn-light,
    &[data-theme-mode="dark"] .btn-check:checked + .btn-light {
        background-color: rgb(var(--body-bg-rgb2)) !important;
        background-image: none !important;
        color: rgba(255, 255, 255, 0.8) !important;
        border-color: rgba(255, 255, 255, 0.1) !important;
    }

    &[data-theme-mode="dark"] .badge.bg-light,
    &[data-theme-mode="dark"] .bg-light.badge,
    &[data-theme-mode="dark"] .badge.bg-light.text-dark.border {
        background-color: rgb(var(--body-bg-rgb2)) !important;
        background-image: none !important;
        color: rgba(255, 255, 255, 0.8) !important;
        border-color: rgba(255, 255, 255, 0.1) !important;
    }

    &[data-theme-mode="dark"] .bg-light {
        background-color: rgb(var(--body-bg-rgb2)) !important;
        background-image: none !important;
    }

    &[data-theme-mode="dark"] .text-dark {
        color: rgba(255, 255, 255, 0.8) !important;
    }

    &[data-theme-mode="dark"] .border {
        border-color: rgba(255, 255, 255, 0.1) !important;
    }

    .gnc-reconnect-modal {
        position: fixed !important;
        inset: 0 !important;
        z-index: 99999 !important;
        display: none;
        align-items: center;
        justify-content: center;
        padding: 1.5rem;
        background:
                radial-gradient(circle at top, rgba(var(--custom-primary-rgb), 0.16), transparent 28rem),
                rgba(248, 251, 255, 0.94) !important;
        backdrop-filter: blur(8px);
        text-align: center;
    }

    .gnc-reconnect-modal.components-reconnect-show,
    .gnc-reconnect-modal.components-reconnect-failed,
    .gnc-reconnect-modal.components-reconnect-rejected {
        display: flex !important;
    }

    .gnc-reconnect-card {
        width: min(100%, 420px);
        border-radius: 1.25rem;
        padding: 2rem;
        background: #fff;
        border: 1px solid rgba(148, 163, 184, 0.24);
        box-shadow: 0 1.25rem 3rem rgba(15, 23, 42, 0.14);
    }

    .gnc-reconnect-icon {
        width: 72px;
        height: 72px;
        margin: 0 auto 1.15rem;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .gnc-reconnect-icon img {
        width: 72px;
        height: 72px;
        object-fit: contain;
    }

    .gnc-reconnect-title {
        margin-bottom: 0.55rem;
        color: #1f2937;
        font-weight: 800;
    }

    .gnc-reconnect-message {
        margin-bottom: 1.25rem;
        color: #64748b;
        line-height: 1.55;
    }

    .gnc-reconnect-loader {
        width: 2.25rem;
        height: 2.25rem;
        margin: 0 auto 1.25rem;
        border-radius: 50%;
        border: 0.22rem solid rgba(var(--custom-primary-rgb), 0.14);
        border-top-color: rgb(var(--custom-primary-rgb));
        transform-origin: 50% 50%;
        animation-name: gncReconnectSpin;
        animation-duration: 0.8s;
        animation-timing-function: linear;
        animation-iteration-count: infinite;
    }

    .gnc-reconnect-button {
        display: none;
        width: 100%;
        border: 0;
        border-radius: 0.55rem;
        padding: 0.75rem 1rem;
        color: #fff;
        font-weight: 700;
        background-image: var(--custom-grad-primary);
    }

    .gnc-reconnect-small {
        margin: 1rem 0 0;
        color: #94a3b8;
        font-size: 0.82rem;
        line-height: 1.45;
    }

    .gnc-reconnect-modal.components-reconnect-failed .gnc-reconnect-button,
    .gnc-reconnect-modal.components-reconnect-rejected .gnc-reconnect-button {
        display: block;
    }

    .gnc-reconnect-modal.components-reconnect-failed .gnc-reconnect-loader,
    .gnc-reconnect-modal.components-reconnect-rejected .gnc-reconnect-loader {
        display: none;
    }

    .gnc-reconnect-modal.components-reconnect-failed .gnc-reconnect-title,
    .gnc-reconnect-modal.components-reconnect-rejected .gnc-reconnect-title {
        color: #dc2626;
    }

}

@keyframes gncReconnectSpin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}