@charset "UTF-8";

:root {
    --blue: #2c8ef8;
    --indigo: #727cf5;
    --purple: #6b5eae;
    --pink: #ff679b;
    --red: #fa5c7c;
    --orange: #fd7e14;
    --yellow: #ffbc00;
    --green: #0acf97;
    --teal: #02a8b5;
    --cyan: #39afd1;
    --white: #fff;
    --gray: #98a6ad;
    --gray-dark: #343a40;
    --primary: #727cf5;
    --secondary: #6c757d;
    --success: #0acf97;
    --info: #39afd1;
    --warning: #ffbc00;
    --danger: #fa5c7c;
    --light: #eef2f7;
    --dark: #313a46;
    --breakpoint-xs: 0;
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1367px;
    --font-family-sans-serif: "Nunito", sans-serif;
    --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    /*
        Common.Helpers.ColorHelper should be defined here and used there
        as var(--custom-prop)
    */
    --light-common-card-color: #143145;
    --error-background: rgba(239, 68, 68, 0.3);
    /*
        AI gradient background
    */
    --ai-gradient-color-1: #f32170;
    --ai-gradient-color-2: #ff6b08;
    --ai-gradient-color-3: #cf23cf;
    --ai-gradient-color-4: #b844ee;
}

*,
*::before,
*::after {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

html {
    font-family: sans-serif;
    line-height: 1.15;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

article, aside, figcaption, figure, footer, header, hgroup, main, nav, section {
    display: block;
}

#blazor-error-ui {
    background: var(--error-background);
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    color: var(--mud-palette-text-primary);
    display: none;
    font-family: var(--font-family-monospace);
    font-size: 0.8rem;
    font-weight: 100;
    left: 0;
    max-height: 2.2rem;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    text-shadow: 1px 1px 2px red, 0 0 1em black, 0 0 0.2em black;
    vertical-align: central;
    width: 100%;
    z-index: 1000;
}
    #blazor-error-ui .reload {
        text-shadow: none;
        font-weight: 200;
        font-size: 1rem;
    }

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

.cut-text {
    text-overflow: ellipsis;
    overflow: hidden;
    width: 250px;
    height: auto.2em;
    white-space: nowrap;
}

.blur-backdrop {
    backdrop-filter: blur(2.5px);
}

.ai-gradient {
    background: linear-gradient(to right, var(--ai-gradient-color-1), var(--ai-gradient-color-2), var(--ai-gradient-color-3), var(--ai-gradient-color-4));
    background-size: 200% 200%;
    animation: ai-gradient-animation 3s linear infinite;
}

@keyframes ai-gradient-animation {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

.ai-gradient-pulse {
    animation: ai-gradient-animation-pulse 3s linear infinite;
}
    .ai-gradient-pulse p {
        font-weight: 400;
    }
    .ai-gradient-pulse div:nth-child(3) > p {
        mix-blend-mode: hue !important;
        text-shadow: 1px 1px 2px #000;
    }

@keyframes ai-gradient-animation-pulse {
    0% {
        background: linear-gradient(to right,
            color-mix(in srgb, var(--ai-gradient-color-1) 50%, transparent),
            color-mix(in srgb, var(--ai-gradient-color-2) 50%, transparent),
            color-mix(in srgb, var(--ai-gradient-color-3) 50%, transparent),
            color-mix(in srgb, var(--ai-gradient-color-4) 50%, transparent)
        );
        background-size: 200% 200%;
        background-position: 0% 50%;
        opacity: 1;
    }

    50% {
        background: linear-gradient(to right,
            color-mix(in srgb, var(--ai-gradient-color-1) 47%, transparent),
            color-mix(in srgb, var(--ai-gradient-color-2) 47%, transparent),
            color-mix(in srgb, var(--ai-gradient-color-3) 47%, transparent),
            color-mix(in srgb, var(--ai-gradient-color-4) 47%, transparent)
        );
        background-size: 200% 200%;
        background-position: 100% 50%;
    }

    100% {
        background: linear-gradient(to right,
            color-mix(in srgb, var(--ai-gradient-color-1) 50%, transparent),
            color-mix(in srgb, var(--ai-gradient-color-2) 50%, transparent),
            color-mix(in srgb, var(--ai-gradient-color-3) 50%, transparent),
            color-mix(in srgb, var(--ai-gradient-color-4) 50%, transparent)
        );
        background-size: 200% 200%;
        background-position: 0% 50%;
        opacity: 1;
    }
}

.incident-comment-card h3 {
    margin-top: 10px;
}

.incident-comment-card ul {
    margin-top: 3px;
    margin-left: 20px;
}

.incident-comment-card ol {
    margin-top: 3px;
    margin-left: 20px;
}

.incident-comment-card p {
    margin-top: 5px;
}