@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');

html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

body {
    margin: 0;
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
}

    body span {
        font-size: 90%;
    }

a, .btn-link {
    color: #0366d6;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

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

.resize-grid {
    resize: vertical;
    overflow: hidden;
}

.full-page-grid {
    height: calc(100vh - 250px) !important;
}

.color-box {
    min-width: 20px;
    height: 25px;
    padding: 2px 7px;
    float: left;
    display: inline-block;
    margin: 2px 0 2px 2px;
    font-size: 11px !important;
}

.light-signal {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: inline-block;
    cursor: pointer;
    /* OFF state */
    background: transparent;
    border: 1.5px solid #c1c1c1;
    transition: background 0.2s ease, border 0.2s ease;
}

    .light-signal::before {
        content: "";
        inset: -8px; /* controls glow spread */
        border-radius: 50%;
        background: radial-gradient( circle, color-mix(in srgb, var(--signal-color) 65%, white) 0%, var(--signal-color) 35%, transparent 70% );
        opacity: 0;
        transform: scale(0.7);
        filter: blur(6px);
        transition: opacity 0.25s ease, transform 0.25s ease;
    }

    .light-signal::after {
        content: "";
        inset: -14px;
        border-radius: 50%;
        background: var(--signal-color);
        opacity: 0;
        filter: blur(14px);
        transition: opacity 0.3s ease;
    }

    .light-signal[data-state="success"] {
        --signal-color: #28a745;
    }

    .light-signal[data-state="danger"] {
        --signal-color: #f57a00;
    }

    .light-signal[data-state="warning"] {
        --signal-color: #ffc107;
    }

    .light-signal.is-on {
        background: var(--signal-color);
        border-color: var(--signal-color);
        box-shadow: 0 0 6px var(--signal-color), 0 0 14px var(--signal-color), 0 0 28px var(--signal-color);
    }

        .light-signal.is-on::before {
            opacity: 0.9;
            transform: scale(1);
        }

        .light-signal.is-on::after {
            opacity: 0.35;
        }

.custom-drop-zone {
    padding: 0 !important;
    border-style: dashed;
    border-width: 2px !important;
    height: 230px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: rgba(183, 183, 183, 0.1);
}

    .custom-drop-zone.custom-drop-zone-hover {
        border-style: solid;
    }

    .custom-drop-zone svg {
        width: 42px;
        height: 42px;
    }

    .custom-drop-zone > *:not(#overviewDemoSelectButton) {
        pointer-events: none;
    }

.upload-validation-text {
    flex-direction: column;
    align-items: flex-end;
    font-size: 12px;
}

:root {
    --bg: #f1f3f5;
    --card-bg: #ffffff;
    --surface-hover: rgba(0,0,0,0.025);
    --radius: .75rem;
    --shadow: 0 8px 20px -4px rgba(0,0,0,.08);
    --transition: .3s cubic-bezier(.4,.2,.2,1);
    --text: #1f2d3a;
    --muted: #6c7a89;
    --top: 75px;
}

.theme-dark {
    --bg: #1f2429;
    --card-bg: #23272d;
    --surface-hover: rgba(255,255,255,0.05);
    --text: #e4e8ee;
    --muted: #9aa3b1;
}