@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&family=Roboto+Flex:opsz,wght@8..144,100..1000&display=swap');

.logo-text {
    font-family: "Roboto Condensed", sans-serif;
    font-optical-sizing: auto;
    font-weight: 600;
    font-style: normal;
    font-size: 1.5rem;
    height: 1.5rem;
    color: var(--inverse-surface);
    bottom: 0.1em;
    left: -0.2em;
}

.inline-icon {
    display: inline;
    bottom: 0.1rem;
}

:root,
body.light {
    --font: "Roboto Flex", sans-serif;

    --primary: #4659a9;
    --on-primary: #ffffff;
    --primary-container: #dde1ff;
    --on-primary-container: #001356;
    --secondary: #5a5d72;
    --on-secondary: #ffffff;
    --secondary-container: #dfe1f9;
    --on-secondary-container: #171b2c;
    --tertiary: #76546e;
    --on-tertiary: #ffffff;
    --tertiary-container: #ffd7f3;
    --on-tertiary-container: #2c1229;
    --error: #ba1a1a;
    --on-error: #ffffff;
    --error-container: #ffdad6;
    --on-error-container: #410002;
    --background: #fefbff;
    --on-background: #1b1b1f;
    --surface: #fbf8fd;
    --on-surface: #1b1b1f;
    --surface-variant: #e2e1ec;
    --on-surface-variant: #45464f;
    --outline: #767680;
    --outline-variant: #c6c5d0;
    --shadow: #000000;
    --scrim: #000000;
    --inverse-surface: #303034;
    --inverse-on-surface: #f3f0f4;
    --inverse-primary: #b8c3ff;
    --surface-dim: #dcd9de;
    --surface-bright: #fbf8fd;
    --surface-container-lowest: #ffffff;
    --surface-container-low: #f5f2f7;
    --surface-container: #f0edf1;
    --surface-container-high: #eae7ec;
    --surface-container-highest: #e4e1e6;
}

:root,
body.light {
    --json-key: #032F62;
    --json-colon: #D73A49;
    --json-string: #032F62;
    --json-constant: #005CC5;
}

:root,
body.dark {
    --json-key: #9FCEF6;
    --json-colon: #ff7b72;
    --json-string: #9FCEF6;
    --json-constant: #BBDAFF;
}

.logs-font {
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'Source Code Pro', 'source-code-pro', monospace;
    font-size: 14px;
    line-height: 1.6;
    color: var(--json-string);
}

.data-font {
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'Source Code Pro', 'source-code-pro', monospace;
    font-size: 14px;
    line-height: 1.6;
    border-inline-start: none;
}

body.light .signin-button {
    background-color: #fff;
    color: #181717;
    border: 1px solid #ddd;
}

body.dark .signin-button {
    background-color: #181717;
    color: #fff;
    border: 1px solid #444;
}

@keyframes connection-fade-in-out {
    from {
        opacity: 0.35;
    }
}

.connection-status-icon {
    animation: connection-fade-in-out 2s infinite alternate;
}