:root {
    --rz-input-placeholder-color: #383838;
}

:root {
    --rz-primary: hsl(206.04deg 100% 41.57%) !important;
    --rz-primary-light: #ABD2FA !important;
    --rz-primary-lighter: #d7eafb !important;
    --rz-primary-dark: hsl(206 100% 31.57% / 1) !important;
    --rz-primary-darker: hsl(206 100% 25% / 1) !important;

    --rz-on-primary: #e1eaf6 !important;
    --rz-on-primary-light: hsl(206.04deg 100% 41.57%) !important;
    --rz-on-primary-lighter: hsl(206.04deg 100% 41.57%) !important;
    --rz-on-primary-dark: #ABD2FA !important;
    --rz-on-primary-darker: #d7eafb !important;

    --bs-link-color: hsl(206.04deg 100% 41.57%) !important;
    --bs-link-hover-color: hsl(206 100% 31.57% / 1) !important;

    /* SUCCESS */
    --rz-success: #16A34A !important;
    --rz-success-light: #86EFAC !important;
    --rz-success-lighter: #D1FAE5 !important;
    --rz-success-dark: #2F7A40 !important;       /* modernized ~#347736 for text */
    --rz-success-darker: #275F31 !important;     /* a touch deeper, still readable */

    /* WARNING */
    --rz-warning: #D97706 !important;
    --rz-warning-light: #FDE68A !important;
    --rz-warning-lighter: #FEF3C7 !important;
    --rz-warning-dark: #946200 !important;       /* mid-amber for text */
    --rz-warning-darker: #6F4700 !important;

    /* DANGER */
    --rz-danger: #DC2626 !important;
    --rz-danger-light: #FCA5A5 !important;
    --rz-danger-lighter: #FEE2E2 !important;
    --rz-danger-dark: #B91C1C !important;        /* mid-red for text */
    --rz-danger-darker: #8A1212 !important;

    --sharc-warning-bg: #fff59db5;
}

:root:has(.Dark) {
    --rz-white: #ffffff !important;
    --rz-black: #000000 !important;
    --rz-base: #45494f !important;
    --rz-base-50: #e0e4e9 !important;
    --rz-base-100: #c4c9d0 !important;
    --rz-base-200: #8f9399 !important;
    --rz-base-300: #45494f !important;
    --rz-base-400: #383b3e !important;
    --rz-base-500: #34373b !important;
    --rz-base-600: #292c30 !important;
    --rz-base-700: #1f2226 !important;
    --rz-base-800: #1b1d20 !important;
    --rz-base-900: #121518 !important;
    --rz-base-light: #8f9399 !important;
    --rz-base-lighter: #ffffff !important;
    --rz-base-dark: #121518 !important;
    --rz-base-darker: #000000 !important;
    --rz-primary: #94c1ff !important;
    --rz-primary-light: #bcd7ff !important;
    --rz-primary-lighter: rgba(148, 193, 255, 0.24) !important;
    --rz-primary-dark: #37598b !important;
    --rz-primary-darker: #001f5d !important;
    --rz-secondary: #c2cbdc !important;
    --rz-secondary-light: #c2cbdc !important;
    --rz-secondary-lighter: rgba(144, 181, 255, 0.28) !important;
    --rz-secondary-dark: #444b58 !important;
    --rz-secondary-darker: #191f2b !important;
    --rz-info: #69add5 !important;
    --rz-info-light: #aadaff !important;
    --rz-info-lighter: rgba(170, 218, 255, 0.24) !important;
    --rz-info-dark: #086791 !important;
    --rz-info-darker: #002d41 !important;
    --rz-on-base: #ffffff !important;
    --rz-on-base-light: #121518 !important;
    --rz-on-base-lighter: #121518 !important;
    --rz-on-base-dark: #ffffff !important;
    --rz-on-base-darker: #ffffff !important;
    --rz-on-primary: #001f5d !important;
    --rz-on-primary-light: #001f5d !important;
    --rz-on-primary-lighter: #bcd7ff !important;
    --rz-on-primary-dark: #bcd7ff !important;
    --rz-on-primary-darker: #bcd7ff !important;
    --rz-on-secondary: #191f2b !important;
    --rz-on-secondary-light: #191f2b !important;
    --rz-on-secondary-lighter: #c2cbdc !important;
    --rz-on-secondary-dark: #c2cbdc !important;
    --rz-on-secondary-darker: #c2cbdc !important;
    --rz-on-info: #ffffff !important;
    --rz-on-info-light: #002d41 !important;
    --rz-on-info-lighter: #aadaff !important;
    --rz-on-info-dark: #aadaff !important;
    --rz-on-info-darker: #aadaff !important;
    --rz-on-success: #ffffff !important;
    --rz-on-success-light: #194100 !important;
    --rz-on-success-lighter: #c0ffaa !important;
    --rz-on-success-dark: #c0ffaa !important;
    --rz-on-success-darker: #c0ffaa !important;
    --rz-on-warning: #121518 !important;
    --rz-on-warning-light: #413d00 !important;
    --rz-on-warning-lighter: #f9ffaa !important;
    --rz-on-warning-dark: #f9ffaa !important;
    --rz-on-warning-darker: #f9ffaa !important;
    --rz-on-danger: #ffffff !important;
    --rz-on-danger-light: #410001 !important;
    --rz-on-danger-lighter: #ffb4aa !important;
    --rz-on-danger-dark: #ffb4aa !important;
    --rz-on-danger-darker: #ffb4aa !important;
    --rz-series-1: #3d71b8 !important;
    --rz-series-2: #663db8 !important;
    --rz-series-3: #b83dae !important;
    --rz-series-4: #b83d52 !important;
    --rz-series-5: #b8843d !important;
    --rz-series-6: #8fb83d !important;
    --rz-series-7: #3db847 !important;
    --rz-series-8: #3db8a3 !important;
    --rz-series-9: #478ceb !important;
    --rz-series-10: #7d47eb !important;
    --rz-series-11: #eb47de !important;
    --rz-series-12: #eb4763 !important;
    --rz-series-13: #eba647 !important;
    --rz-series-14: #b5eb47 !important;
    --rz-series-15: #47eb54 !important;
    --rz-series-16: #47ebcf !important;
    --rz-series-17: #a3c6f5 !important;
    --rz-series-18: #bea3f5 !important;
    --rz-series-19: #f5a3ee !important;
    --rz-series-20: #f5a3b1 !important;
    --rz-series-21: #f5d2a3 !important;
    --rz-series-22: #daf5a3 !important;
    --rz-series-23: #a3f5aa !important;
    --rz-series-24: #a3f5e7 !important;
}

html, body {
    height: 100%;
    background-color: var(--rz-body-background-color);
}

body {
  display: flex;
  flex-direction: column;
}

:not(.Dark) ::placeholder {
    color: var(--rz-base-400) !important;
}

.Dark ::placeholder {
    color: var(--rz-base-300) !important;
}

#main {
  flex: 1;
}

.section{
    height: 100%;
}

.error-wrapper {
    position: fixed;
    z-index: 9999;
    width: 100%;
    bottom: 0;
    word-break: break-word;
    padding: 5px 5px 5px 15px;
}

.page{
    padding: 4rem 40px 0 40px;
    height: 100%;
}

.server-info-page {
    max-width: 72rem;
    margin: 0 auto;
    padding-bottom: 3rem;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    color: var(--rz-text-body2-color);
}

.server-info-split-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    align-items: start;
}

.server-info-title {
    padding-bottom: 1rem;
    margin: 0;
    font-size: 1.5rem;
    font-weight: 600;
}

.server-info-page-header p,
.server-info-spfx-section p,
.server-info-fallback-section p,
.server-info-how-it-works p {
    margin: 0;
    color: var(--rz-text-secondary-color);
}

.server-info-summary-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.server-info-status-tile {
    min-width: 0;
    padding: 1rem;
    border-radius: 8px;
    background-color: var(--rz-input-background-color);
}

.server-info-section-label {
    color: var(--rz-text-secondary-color);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: uppercase;
}

.server-info-status-tile > .server-info-section-label,
.server-info-accordion-panel > .server-info-section-label {
    margin-bottom: 0.55rem;
}

.server-info-status-value {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    min-width: 0;
    overflow-wrap: anywhere;
    font-weight: 600;
}

.server-info-section,
.server-info-spfx-section,
.server-info-fallback-section,
.server-info-how-it-works {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.server-info-framed-group {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem;
    border-radius: 10px;
    background-color: var(--rz-grid-group-header-item-background-color);
    height: 100%;
}

.server-info-status-tile--warning {
    background-color: var(--sharc-warning-bg);
    color: #212121;
}

.server-info-status-tile--warning .server-info-section-label {
    color: #212121;
}

.server-info-heading {
    margin: 0;
    font-weight: 600;
}

.server-info-heading--large {
    font-size: 1.5rem;
}

.server-info-heading--sub {
    font-size: 1rem;
}

.server-info-deployment-selector {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.6rem;
    padding-top: 0.25rem;
}

.server-info-deployment-selector .rz-selectbar {
    max-width: 100%;
    flex-wrap: wrap;
}

.server-info-spfx-block {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.server-info-spfx-section ol {
    margin: 0;
}

.server-info-accordion-panel {
    padding: 1rem 1rem 0.25rem 1rem;
    border-radius: 8px;
    background-color: var(--rz-input-background-color);
    overflow: hidden;
}

.server-info-documentation-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.server-info-documentation-link {
    color: var(--rz-primary) !important;
}

.server-info-action-row {
    padding-top: 1rem;
    display: flex;
    gap: 0.5rem;
}

.server-info-download-action {
    padding-top: 0.5rem;
}

.server-info-spfx-activation-hint {
    font-size: 0.875rem;
    color: var(--rz-text-secondary-color);
    font-style: italic;
}

.server-info-guide-image {
    max-width: 100%;
    width: 42rem;
}

@media (max-width: 700px) {
    .server-info-page {
        max-width: none;
        margin: 0;
        padding-bottom: 2rem;
    }

    .server-info-summary-grid {
        grid-template-columns: 1fr;
    }

    .server-info-split-columns {
        grid-template-columns: 1fr;
    }
}

.archive-job-container{
    display: flex;
    flex-direction: row;
    width: 100%;
    height: auto;
    gap: 3rem;
}
@media only screen and (max-width: 1000px) {
    .archive-job-container{
        flex-direction: column;
        gap: 0.5rem;
    }
}
.frame{
    padding: 2rem;
    border-radius: 8px;
    height: 100%;
    background-color: var(--rz-input-background-color);
}

.archive-preview-overlay {
    position: absolute;
    transition: opacity 0.4s ease, backdrop-filter 0.4s ease;
    opacity: 0;
    background: none;
    backdrop-filter: none;
    width: 100%;
    height: 0;
}
.archive-preview-overlay-active {
    position: absolute;
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
    backdrop-filter: blur(8px);
    z-index: 100;
    display: flex;
    opacity: 100;
    flex-direction: column;
    align-content: center;
    align-items: center;
    justify-content: center;
}

.archive-preview-amount-container{
    position: relative
}

.chart-container {
    aspect-ratio: 1;
    shape-rendering: auto;
    image-rendering: optimizeQuality;
    position: relative;
}

.preview-amount-section{
    width: 100%;
    position: absolute;
    top: 38%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.donut {
    width: 100%;
    height: 100%;
    display: block;
} 

.Dark .donut-ring{
    stroke:var(--rz-base-500);
}

.donut-segment {
    transition: stroke-dasharray 1.5s cubic-bezier(0.4, 0, 0.2, 1), stroke-dashoffset 1.5s cubic-bezier(0.4, 0, 0.2, 1);
    transform-origin: center;
}

.donut-segment.completed,
.donut-segment.excluded,
.donut-segment.affected {
    transition: stroke-dasharray 1.5s cubic-bezier(0.4, 0, 0.2, 1), stroke-dashoffset 1.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.custom-loader {
    width: 48px;
    height: 48px;
    border: 5px solid var(--rz-primary);
    border-bottom-color: transparent;
    border-radius: 50%;
    display: inline-block;
    box-sizing: border-box;
    animation: rotation 1s linear infinite;
}

@keyframes rotation {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.refresh-icon-button-busy i {
    animation: rotation 1s linear infinite;
}


.Dark .rz-progressbar-label-value{
    color: black !important;
}

.Dark .rz-dialog-confirm-message {
    color: white;
}

.remove-treenode-content-selected .rz-treenode-label {
    border-radius: 0 !important;
    background-color: transparent !important;
    cursor: auto !important;
    color: var(--rz-text-body2-color) !important;
    padding: 0 !important;
}

.custom-accordion .rz-accordion .rz-accordion-header>a{
    display: flex !important;
    padding: 1rem 0 !important;
    flex-direction: row-reverse !important;
}

.custom-accordion .rz-accordion {
    box-shadow: none !important;
}

.custom-accordion .rz-accordion-content {
    padding: 0 0 0 1.5rem !important;
}

.custom-accordion .rz-accordion .critical-error-text a{
    /*--rz-danger-darker would be to dark for dark mode*/
    color: var(--rz-danger) !important;
}

.custom-accordion .rz-accordion .major-error-text a{
    color: var(--rz-danger) !important;
}

.custom-accordion .rz-accordion .major-warning-text a{
    color: var(--rz-warning) !important;
}


.menu-icon{
    display: none;
}

@media only screen and (max-width: 950px) {

    .header-menu {
        padding: 1rem;
        display: flex;
        flex-direction: row;
        align-items: start;
        justify-content: flex-end;
    }

    .rz-stack.header-menu-navigation{
        flex-direction: column !important;
    }

    .rz-stack.header-menu-items {
        flex-direction: column !important;
    }
    .header-menu-items.hidden{
        display: none !important;
    }

    .header-menu-items.show{
        display: flex !important;
    }
    .rz-stack.header-wrapper {
        align-items: stretch !important;
    }

    .menu-icon{
        display: block;
    }
}


.header-menu {
    width: 100%;
}

.custom-dialog-wrapper{
    backdrop-filter: blur(10px) !important;
    background-color: rgba(133, 133, 133, 0.42) !important;
}

.custom-dialog{
    border-radius: 8px !important;
    width: auto !important;
}

.rz-dialog-mask{
    background-color: #dcdcdc !important;
}

.Dark .rz-dialog-mask{
    background-color: #1f1f1f !important;
}

.rz-dialog-wrapper {
    position: fixed !important;
    z-index: 20000 !important;
    backdrop-filter: blur(3px) !important;
}

.rz-dialog{
    border: solid 1px var(--rz-base-300) !important;
    box-shadow: none !important;
}
.rz-dialog-content {
    color: var(--rz-text-body2-color);
}
.short-link{
    word-break: break-all;
    color: var(--rz-text-body2-color);
}

.short-link:hover{
    color: var(--rz-primary);
}

.url-list-element{
    word-break: break-all; 
    padding: 0.4rem 0.2rem;
}

.url-list-element .short-link{
    text-decoration: none;
}

.url-list-element:hover .short-link{
    text-decoration: underline;
}

.policy-page-wrapper{
    display: flex;
    flex-direction: row;
    gap: 2rem; 
    height: 100%;
    overflow: auto;
    width: -webkit-fill-available;
}

.policy-wrapper{
    display: flex; 
    flex-direction: column; 
    gap: 1rem; 
    width: 50%;
}

@media (max-width: 950px) {
    .policy-page-wrapper{
        flex-direction: column;
    }
    .policy-wrapper{
        width: 100%;
    }
}

.top-divider-thin {
    border-top: solid 1px var(--rz-grid-header-sorted-background-color);
}

.bottom-divider-thin {
    border-bottom: solid 1px var(--rz-grid-header-sorted-background-color);
}

.top-divider {
    border-top: solid 1px var(--rz-text-secondary-color);
}

.bottom-divider {
    border-bottom: solid 1px var(--rz-text-secondary-color);
}

@keyframes skeleton-pulse {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0.4;
    }
    100% {
        opacity: 1;
    }
}


.rz-progressbar{
    border-radius: 2px !important;
}

.rz-progressbar-value{
    border-radius: 2px !important;
    min-height: 6px !important;
}
.rz-progressbar-indeterminate{
    border-radius: 2px !important;
}

.disabled-progress-bar .rz-progressbar-value {
    background: var(--rz-base-400) !important;
}

.disabled-progress-bar .rz-progressbar{
    background: var(--rz-base-200) !important;
}

.Dark .disabled-progress-bar .rz-progressbar{
    background: var(--rz-base-600) !important;
}

.animated-progressbar .rz-progressbar-value {
    background: linear-gradient(90deg, var(--rz-primary), hsl(206 92% 63% / 1), var(--rz-primary));
    background-size: 50% 100%;
    animation: move-gradient 4s linear infinite;
}

@keyframes move-gradient {
    0% {
        background-position: 0% 0%;
    }
    100% {
        background-position: 200% 0%;
    }
}

.rz-progressbar-circular-value{
    stroke-linecap: round !important;   
}

.progress-container{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: auto;
    grid-template-areas: 
    "storage files versions price"
    "storage-breakdown storage-breakdown storage-breakdown storage-breakdown"
    "progress progress progress conditions";
    gap: 1rem;
}

.progress-bar-current-details-large-screen {
    display: block;
    margin-left: auto;
    margin-right: 1rem;
}

.progress-bar-current-details-small-screen{
    display: none;
}

.Light .progress-storage-breakdown {
    outline: 1px solid #ffffff85;
}

.progress-storage-breakdown-chart {
    width: 195px;
    align-items: center;
    justify-content: center;
    display: flex;
}

.summary-table {
    width: 100%;
    border-collapse: collapse;
}

.summary-table tbody tr:not(:last-child) td {
    border-bottom: 1px solid var(--rz-border-color, #e5e7eb);
}

.summary-table th {
    padding: 0.5rem 3rem 0.5rem 0;
    color: var(--rz-text-secondary-color);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: 1px solid var(--rz-border-color, #e5e7eb);
}

.summary-table th:last-child {
    padding-right: 0;
}

.summary-table td {
    padding: 0.75rem 3rem 0.75rem 0;
}

.summary-table td:last-child {
    padding-right: 0;
}

@media (max-width: 950px) {
    .progress-container {
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
        "storage price"
        "files versions"
        "storage-breakdown storage-breakdown"
        "progress conditions";
    }
    
    .progress-bar-current-details-large-screen {
        display: none;
    }
    
    .progress-bar-current-details-small-screen {
        display: block;
        max-width: 33vw;
    }
}

@media (max-width: 650px) {
    .progress-storage-breakdown-chart {
        display: none;
    }
    
    .progress-container {
        grid-template-columns: 1fr;
        grid-template-areas:
        "storage"
        "price"
        "files"
        "versions"
        "storage-breakdown"
        "progress" 
        "conditions";
    }
    
    .progress-bar-current-details-small-screen {
        display: block;
        max-width: 70vw;
    }
    
    .summary-table th {
        padding-right: 0;
    }

    .summary-table td {
        padding-right: 0;
    }
}

.card-wrapper {
    width: 100%; 
    text-wrap-mode: nowrap;
}

.Dark .card-wrapper {
background: var(--bs-dark);
}

.Light .card-wrapper {
    outline: 1px solid #ffffff85;
    background: linear-gradient(0deg, rgba(237, 239, 250, 0.62) 0%, rgba(218, 224, 245, 0.9) 51%, rgba(235, 239, 247, 0.52) 100%);
}

.field-value-name{
    font-weight: 500;
}

.field-value-bold-value .field-value-name{
    color: var(--rz-text-secondary-color) !important;
    font-weight: 400 !important;
}

.field-value-bold-value .field-value-value{
    font-weight: 400 !important;
}

.field-value-plain .field-value-value{
    font-weight: 400 !important;
}

.field-value-plain .field-value-name{
    font-weight: 400 !important;
}

.tool-tip-icon {
    scale: 0.7;
    transform-origin: top; 
    width: 10px;
}

.tool-tip-icon-centered .tool-tip-icon  {
    transform-origin: center;
}


.badge {
    color: var(--rz-base-darker);
    padding: 0.3rem;
    background-color: var(--rz-base-lighter);
    border-radius: 4px;
    line-height: 1.3;
}

.Dark .badge-base{
    color: var(--rz-base-100);
    background-color: var(--rz-base-600);
}

.badge-warning{
    color: var(--rz-warning-darker);
    background-color: var(--rz-warning-lighter);
    
}

.badge-error{
    color: var(--rz-danger-darker);
    background-color: var(--rz-danger-lighter);
}

.badge-success{
    color: var(--rz-success-darker); 
    background-color: var(--rz-success-lighter);
}

.setting-page-wrapper{
    display: flex; 
    gap: 2rem;
    color: var(--rz-text-body2-color);
}

@media (max-width: 1000px) {
    .setting-page-wrapper {
        flex-direction: column;
    }
}

.extensionsWidget {
    margin-top: 1rem;
}

@media (max-width: 558px) {
    .extensionsWidget {
        margin-top: 0;
    }
}

.rz-numeric.inline-numeric-input {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    
    padding: 0 !important;
    margin-left: 0.5rem;
    height: 100%;

    font-size: var(--rz-text-body2-font-size) !important;

    --rz-input-focus-border: none;
    --rz-input-focus-shadow: none;
    --rz-input-border: none;
}

.rz-numeric.inline-numeric-input input {
    padding: 0 !important;
    margin: 0 !important;

    height: auto !important;
    line-height: inherit !important;

    font-size: inherit;
    font-family: inherit;
}

.rz-numeric.inline-numeric-input:focus {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

.rz-numeric.inline-numeric-input:disabled {
    opacity: 0.6;
}

.rz-numeric.inline-numeric-input::placeholder {
    opacity: 0.6;
}

.loading-text{
    font-size: small;
    color: var(--rz-text-tertiary-color);
}

.user-restore-page .loading-text{
    margin-left: 3ch;
}

.loading__dots::after {
    content: ".";
    display: inline-block;
    width: 3ch;
    text-align: left;
    animation: dots 1.5s steps(4, end) infinite;
}

@keyframes dots {
    0%   { content: ""; }
    25%  { content: "."; }
    50%  { content: ".."; }
    75%  { content: "..."; }
    100% { content: ""; }
}