:root {
    /* Typography */
    --ps-label-sm: 10px;
    --ps-label-md: 12px;
    --ps-body-sm: 14px;
    --ps-body-md: 17px;
    --ps-title-sm: 20px;
    --ps-title-md: 24px;
    --ps-headline: 32px;
    /* Radius & spacing */
    --ps-2xs: 4px;
    --ps-xs: 8px;
    --ps-sm: 12px;
    --ps-md: 16px;
    --ps-lg: 20px;
    --ps-xl: 24px;
    --ps-2xl: 32px;
    --ps-3xl: 40px;
    --ps-4xl: 60px;
    /* Colors */
    --ps-yellow-200: #FFE042;
    --ps-yellow-400: #E5BF00;
    --ps-orange-400: #FF8E0E;
    --ps-gray-500: #A6A6A6;
    --ps-red-300: #FEAF9A;
    --ps-red-500: #FD7653;
    --ps-green-300: #17FF70;
    --ps-people: #FF8E0E;
    --ps-vehicle: #C2A200;
    --ps-humidity: #17FF70;
    --ps-temperature: #FFE042;
    --ps-rain: #6691FF;
    --ps-wind: #D15FFF;
    /* Blur */
    --ps-blur: 10px;
    /* Height */
    --ps-btn-icon-height: 32px;
    --ps-icon-height: 20px;
    --ps-icon-sm-height: 16px;
    /* Font family */
    --ps-font-family: 'Figtree', '-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'sans-serif';
}

/*photosentinel*/
[data-theme="photosentinel"] {
    --ps-card-selected: #3E4D63;
    --blazor-wasm-loading-url: url('brands/photosentinel/images/blazor-wasm-loading.gif');
    --ps-bg-dropdown-menu: rgba(37, 38, 53, 0.92);
    --ps-bg-skeleton: rgba(130, 130, 130, 0.2);
    --ps-bg-skeleton2: rgba(130, 130, 130, 0.3);
    /* Font */
    --ps-typeface: "Manrope";
    /* Toaster */
    --ps-toast-info: #BADBF7;
    --ps-toast-success: #40916C;
    --ps-toast-warning: #E0A600;
    --ps-toast-danger: #DC2F02;
    /* Colour Palette */
    --ps-primary: #81A4CD;
    --ps-on-primary: #FFFFFF;
    --ps-primary-container: #BADBF7;
    --ps-on-primary-container: #186BB4;
    --ps-secondary: #DD7F08;
    --ps-on-secondary: #FFFFFF;
    --ps-error: #DC2F02;
    --ps-on-error: #FFFFFF;
    --ps-surface: #252635;
    --ps-on-surface: #FFFFFF;
    --ps-surface-container: #11121D;
    --ps-surface-container-low: #050505;
    --ps-on-surface-variant: #BADBF7;
    --ps-on-surface-variant-2: #A6A6A6;
    --ps-outline: #186BB4;
    --ps-outline-variant: #4D4D4D;
    --ps-disabled: #737373;
    --ps-on-disabled: #BFBFBF;
    --ps-warning: #FF8E0E;
    --ps-on-warning: #11121D;
    --ps-explore-insights-button: #0A4980;
    /* Hover */
    --ps-primary-hover: #A4C6E5;
    --ps-error-hover: #e4380d;
    --ps-surface-container-hover: #3E4D63;
}

/*buildcam*/
[data-theme="buildcam"] {
    --ps-card-selected: #364A62;
    --blazor-wasm-loading-url: url('brands/buildcam/images/blazor-wasm-loading.gif');
    --ps-bg-dropdown-menu: rgba(6, 24, 45, 0.92);
    --ps-bg-skeleton: rgba(94, 190, 242, 0.2);
    --ps-bg-skeleton2: rgba(94, 190, 242, 0.3);
    /* Font */
    --ps-typeface: "Manrope";
    /* Toaster */
    --ps-toast-info: #A1D9F7;
    --ps-toast-success: #40916C;
    --ps-toast-warning: #E0A600;
    --ps-toast-danger: #DC2F02;
    /* Colour Palette */
    --ps-primary: #1298E1;
    --ps-on-primary: #FFFFFF;
    --ps-primary-container: #A1D9F7;
    --ps-on-primary-container: #0E76AF;
    --ps-secondary: #DD7F08;
    --ps-on-secondary: #FFFFFF;
    --ps-error: #DC2F02;
    --ps-on-error: #FFFFFF;
    --ps-surface: #08223F;
    --ps-on-surface: #FFFFFF;
    --ps-surface-container: #040E1B;
    --ps-surface-container-low: #06182D;
    --ps-on-surface-variant: #A1D9F7;
    --ps-on-surface-variant-2: #A6A6A6;
    --ps-outline: #A1D9F7;
    --ps-outline-variant: #095076;
    --ps-disabled: #E6E6E6;
    --ps-on-disabled: #8C8C8C;
    --ps-warning: #FF8E0E;
    --ps-on-warning: #040E1B;
    --ps-explore-insights-button: #0A4980;
    /* Hover */
    --ps-primary-hover: #4BB1E8;
    --ps-error-hover: #e4380d;
    --ps-surface-container-hover: #0C305A;
}

/*timelapse*/
[data-theme="timelapse"],
[data-theme="insights"] {
    --ps-card-selected: #102555;
    --blazor-wasm-loading-url: url('brands/timelapse/images/blazor-wasm-loading.gif');
    --ps-bg-dropdown-menu: rgba(0, 6, 20, 0.92);
    --ps-bg-skeleton: rgba(27, 42, 74, 0.7);
    --ps-bg-skeleton2: rgba(27, 42, 74, 0.9);
    /* Toaster */
    --ps-toast-info: #6691FF;
    --ps-toast-success: #00B245;
    --ps-toast-warning: #FF8E0E;
    --ps-toast-danger: #DC2F02;
    /* Colour Palette */
    --ps-primary: #1759FF;
    --ps-on-primary: #FFFFFF;
    --ps-primary-container: #6691FF;
    --ps-on-primary-container: #FFFFFF;
    --ps-secondary: #FFD70E;
    --ps-on-secondary: #0E182A;
    --ps-error: #DC2F02;
    --ps-on-error: #FFFFFF;
    --ps-surface: #000614;
    --ps-on-surface: #FFFFFF;
    --ps-surface-container: #0E182A;
    --ps-surface-container-low: #1F2C42;
    --ps-on-surface-variant: #6691FF;
    --ps-on-surface-variant-2: #737373;
    --ps-outline: #6691FF;
    --ps-outline-variant: #1F2C42;
    --ps-disabled: #4D4D4D;
    --ps-on-disabled: #8C8C8C;
    --ps-warning: #FF8E0E;
    --ps-on-warning: #0E182A;
    --ps-explore-insights-button: #0A4980;
    /* Hover */
    --ps-primary-hover: #4D7FFF;
    --ps-error-hover: #e4380d;
    --ps-surface-container-hover: #0C305A;
}

/* Insights */
[data-theme="insights"] {
    --blazor-wasm-loading-url: url('brands/insights/images/blazor-wasm-loading.gif');
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html,
body {
    font-family: var(--ps-font-family);
    font-size: var(--ps-body-sm) !important;
    color: var(--ps-on-surface) !important;
    height: 100%;
}

h1, h2, h3, h4, h5, h6, p, span, div, a, button, input, textarea, select, label {
    font-family: inherit;
}

    button:disabled,
    button:disabled:hover,
    a.disabled,
    a.disabled:hover {
        background-color: var(--ps-disabled);
        color: var(--ps-on-disabled);
        cursor: not-allowed;
    }

        a.disabled, a.disabled:hover {
            pointer-events: none;
            text-decoration: none;
        }

            button:disabled svg path,
            a.disabled svg path {
                stroke: var(--ps-on-disabled);
            }

/* Typography */
.ps-label-sm {
    font-size: var(--ps-label-sm);
}

.ps-label-md {
    font-size: var(--ps-label-md);
}

.ps-body-sm {
    font-size: var(--ps-body-sm);
}

.ps-body-md {
    font-size: var(--ps-body-md);
}

.ps-title-sm {
    font-size: var(--ps-title-sm);
}

.ps-title-md {
    font-size: var(--ps-title-md);
}

.ps-headline {
    font-size: var(--ps-headline);
}

/* Background color */
.ps-primary {
    background-color: var(--ps-primary);
}

.ps-surface-container {
    background-color: var(--ps-surface-container);
}

.ps-surface-container-hover {
    background-color: var(--ps-surface-container-hover);
}

.ps-surface-container-low {
    background-color: var(--ps-surface-container-low) !important;
}

.ps-bg-black {
    background-color: #000;
}

/* Text color */
.ps-text-primary {
    color: var(--ps-primary);
}

.ps-text-secondary {
    color: var(--ps-secondary);
}

.ps-text-on-surface {
    color: var(--ps-on-surface);
}

.ps-text-on-surface-variant {
    color: var(--ps-on-surface-variant) !important;
}

.ps-text-on-surface-variant-2 {
    color: var(--ps-on-surface-variant-2);
}

.ps-text-error {
    color: var(--ps-error) !important;
}

.ps-text-outline-variant {
    color: var(--ps-outline-variant);
}

.ps-text-yellow-200 {
    color: var(--ps-yellow-200);
}

.ps-text-yellow-400 {
    color: var(--ps-yellow-400);
}

.ps-text-orange-400 {
    color: var(--ps-orange-400);
}

.ps-text-gray-500 {
    color: var(--ps-gray-500);
}

.ps-text-red-300 {
    color: var(--ps-red-300);
}

.ps-text-red-500 {
    color: var(--ps-red-500);
}

.ps-text-green-300 {
    color: var(--ps-green-300);
}

.ps-text-people {
    color: var(--ps-people);
}

.ps-text-vehicle {
    color: var(--ps-vehicle);
}

.ps-text-humidity {
    color: var(--ps-humidity);
}

.ps-text-temperature {
    color: var(--ps-temperature);
}

.ps-text-rain {
    color: var(--ps-rain);
}

.ps-text-wind {
    color: var(--ps-wind);
}

.ps-text-on-secondary {
    color: var(--ps-on-secondary);
}

.ps-text-on-disabled {
    color: var(--ps-on-disabled);
}

/* Stroke icons: apply current text color to SVG path */
svg.stroke-current path,
svg .stroke-current circle {
    stroke: currentColor !important;
}

svg.fill-current path,
svg.fill-current circle {
    fill: currentColor !important;
}

/* Button */
.ps-btn {
    outline: none;
    border: none;
    border-radius: var(--ps-sm);
    padding: var(--ps-sm) var(--ps-md);
    height: var(--ps-btn-icon-height);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
}

    .ps-btn:disabled {
        cursor: not-allowed;
    }

    .ps-btn.ps-btn-sm {
        font-size: var(--ps-label-md);
        height: 24px;
    }

.ps-btn-outline {
    background: inherit;
    color: var(--ps-on-surface-variant);
    border: 1px solid var(--ps-outline);
}

    .ps-btn-outline:hover {
        background-color: var(--ps-surface-container-hover);
    }

.ps-btn-icon {
    width: var(--ps-btn-icon-height);
    height: var(--ps-btn-icon-height);
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    padding: 1rem;
}

    .ps-btn-icon.ps-btn-icon-md {
        width: 24px;
        height: 24px;
        padding: 0.6rem;
    }

    .ps-btn-icon.ps-btn-icon-sm {
        width: 15px;
        height: 15px;
        padding: 0.6rem;
    }

.ps-btn-primary {
    background-color: var(--ps-primary);
    color: var(--ps-on-primary);
}

    .ps-btn-primary svg path {
        stroke: var(--ps-on-primary);
    }

    .ps-btn-primary:hover {
        background-color: var(--ps-primary-hover);
    }

.ps-btn-dark {
    background-color: var(--ps-surface-container);
    color: var(--ps-on-surface);
}

    .ps-btn-dark:hover {
        background-color: var(--ps-surface-container-hover) !important;
    }

.ps-btn-light {
    background-color: rgba(255, 255, 255, 0.2);
    backdrop-filter: var(--ps-blur);
}

    .ps-btn-light:hover {
        background-color: rgba(255, 255, 255, 0.3);
    }

.ps-btn-danger {
    background-color: var(--ps-error);
    color: var(--ps-on-surface);
}

    .ps-btn-danger:hover {
        background-color: var(--ps-error-hover);
    }

.ps-btn-gradient {
    background: linear-gradient(to right, var(--ps-explore-insights-button), var(--ps-primary));
    background-size: 200% 100%; /* make gradient twice as wide */
    background-position: left center; /* start position */
    color: var(--ps-on-surface);
    border: 2px solid var(--ps-on-surface-variant);
    transition: background-position 0.5s ease;
}

    .ps-btn-gradient svg path {
        stroke: var(--ps-on-surface);
    }

    .ps-btn-gradient:hover {
        background-position: right center; /* animate gradient shift */
    }

.ps-btn-warning {
    background-color: var(--ps-surface);
    color: var(--ps-yellow-400);
}

    .ps-btn-warning svg path {
        stroke: var(--ps-yellow-400);
    }

    .ps-btn-warning:hover {
        background-color: var(--ps-surface-container-hover);
    }

.ps-btn-dark-low {
    background-color: var(--ps-surface-container-low);
    color: var(--ps-on-surface);
}

    .ps-btn-dark-low:hover {
        background-color: var(--ps-surface-container-hover) !important;
    }

.ps-btn-inherit {
    background-color: inherit;
    color: var(--ps-on-surface);
}

    .ps-btn-inherit:hover {
        background-color: var(--ps-surface-container-hover) !important;
    }

.ps-btn-warning {
    background-color: var(--ps-warning);
    color: var(--ps-on-secondary);
}

    .ps-btn-warning:hover {
        background-color: var(--ps-warning);
    }

/* Form control */
.ps-form-control {
    background-color: var(--ps-surface-container);
    color: var(--ps-on-surface);
    border-radius: var(--ps-lg) !important;
}

.ps-form-control-sm {
    height: 24px;
}

.ps-form-control-dark {
    background-color: var(--ps-surface-container);
    color: var(--ps-on-surface);
    border: none;
}

    .ps-form-control-dark:focus {
        background-color: var(--ps-surface-container);
        color: var(--ps-on-surface);
        outline: none;
        box-shadow: none;
    }

    .ps-form-control-dark:-webkit-autofill,
    .ps-form-control-dark:-webkit-autofill:focus {
        -webkit-box-shadow: 0 0 0px 1000px var(--ps-surface-container) inset !important;
        -webkit-text-fill-color: var(--ps-on-surface) !important;
        transition: background-color 5000s ease-in-out 0s;
    }

.ps-form-select-dark {
    background-color: var(--ps-surface);
    color: var(--ps-on-surface);
    border: 1px solid var(--ps-outline-variant);
}

    .ps-form-select-dark:focus {
        background-color: var(--ps-surface);
        color: var(--ps-on-surface);
        outline: none;
        box-shadow: none;
    }

    .ps-form-select-dark:-webkit-autofill,
    .ps-form-select-dark:-webkit-autofill:focus {
        -webkit-box-shadow: 0 0 0px 1000px var(--ps-surface) inset !important;
        -webkit-text-fill-color: var(--ps-on-surface) !important;
        transition: background-color 5000s ease-in-out 0s;
    }

.ps-radio input[type="radio"] {
    display: none;
}

.ps-radio label {
    display: flex;
    align-items: center;
    cursor: pointer;
    font-size: var(--ps-body-sm);
}

.ps-radio input[type="radio"] + label:before {
    content: "";
    display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    margin-right: 0.5rem;
    border: 1px solid var(--ps-on-disabled);
}

.ps-radio input[type="radio"] + label {
    color: var(--ps-on-disabled);
}

.ps-radio input[type="radio"]:checked + label {
    color: var(--ps-on-surface);
}

    .ps-radio input[type="radio"]:checked + label:before {
        border-radius: 50%;
        border: 1px solid var(--ps-primary);
        background: radial-gradient(circle, var(--ps-primary) 50%, transparent 60%);
    }

.ps-switch input:focus {
    box-shadow: none;
}

.ps-switch input:checked {
    background-color: var(--ps-primary);
    border-color: var(--ps-primary);
}

/* Badge */
.ps-badge {
    display: inline-flex;
    align-items: center;
    background-color: var(--ps-surface-container);
    border-radius: var(--ps-md);
    padding: 0.3rem 1rem;
    user-select: none;
}

    .ps-badge.badge-sm {
        padding: 0.1rem 0.8rem;
    }

/* End of badge */
/* Radius */
.ps-radius-2xs {
    border-radius: var(--ps-2xs);
}

.ps-radius-xs {
    border-radius: var(--ps-xs);
}

.ps-radius-sm {
    border-radius: var(--ps-sm);
}

.ps-radius-md {
    border-radius: var(--ps-md);
}

.ps-radius-lg {
    border-radius: var(--ps-lg);
}

.ps-radius-xl {
    border-radius: var(--ps-xl);
}

.ps-radius-2xl {
    border-radius: var(--ps-2xl);
}

.ps-radius-3xl {
    border-radius: var(--ps-3xl);
}

.ps-radius-4xl {
    border-radius: var(--ps-4xl);
}

/* Toast */
.ps-toast .ps-toast-icon {
    height: 20px;
    width: 20px;
    background-position: center;
    background-size: 20px 20px;
    background-repeat: no-repeat;
    padding: 0 0.8rem;
}

.ps-toast-success {
    background-color: var(--ps-toast-success);
}

.ps-toast-info {
    background-color: var(--ps-toast-info);
}

.ps-toast-warning {
    background-color: var(--ps-toast-warning);
}

.ps-toast-danger {
    background-color: var(--ps-toast-danger);
}

/* Utils */
.cursor-pointer {
    cursor: pointer;
}

.cursor-not-allowed {
    cursor: not-allowed !important;
}

.cursor-initial {
    cursor: initial !important;
}

.cursor-wait {
    cursor: wait;
}

.cursor-progress {
    cursor: progress;
}

.ps-list-style-type-none {
    list-style-type: none;
}

.ps-flex-1 {
    flex: 1;
}

.ps-divider {
    display: inline-block;
    width: 1px;
    height: 16px;
    background-color: var(--ps-outline-variant);
    vertical-align: middle;
}

.ps-icon {
    width: var(--ps-icon-height);
    height: var(--ps-icon-height);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

    .ps-icon svg {
        display: block;
    }

    .ps-icon.ps-icon-sm {
        width: var(--ps-icon-sm-height);
        height: var(--ps-icon-sm-height);
    }

.underline-hover {
    text-decoration: none;
}

    .underline-hover:hover {
        text-decoration: underline !important;
    }

.aspect-3-2 {
    aspect-ratio: 3/2;
}
/* Logo spinner*/
.ps-logo-spinner {
    display: inline-block;
    animation: rotateIcon 1.5s linear infinite;
    transform-origin: center;
}

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

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