:root {
    --arc-id-accent: #2498d2;
    --arc-id-navy: #192331;
    --arc-id-panel: #263244;
    --arc-id-surface: #ffffff;
    --arc-id-text: #172334;
    --arc-id-muted: #6a7989;
    --arc-id-border: rgba(255, 255, 255, 0.18);
    --arc-id-radius: 5px;
    --arc-id-font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --arc-id-login-width: 310px;
    --arc-id-control-height: 38px;
    --arc-id-input-height: 40px;
    --arc-id-logo-max-width: 90px;
    --arc-id-logo-max-height: 40px;
}

.arc-identity,
.arc-identity * {
    box-sizing: border-box;
}

.arc-identity {
    width: 100%;
    font-family: var(--arc-id-font);
}

    .arc-identity .arc-id-login-panel {
        width: min(100%, var(--arc-id-login-width));
        margin-inline: auto;
        padding: 24px 28px;
        color: #fff;
        border: 1px solid rgba(36, 152, 210, .35);
        background: rgba(25, 35, 49, .22);
    }

    .arc-identity .arc-id-login-header {
        margin-bottom: 16px;
        text-align: center;
    }

    .arc-identity .arc-id-logo {
        display: block;
        width: auto;
        max-width: var(--arc-id-logo-max-width);
        max-height: var(--arc-id-logo-max-height);
        margin: 0 auto 6px;
        object-fit: contain;
    }

    .arc-identity .arc-id-login-header h1,
    .arc-identity .arc-id-login-header h2 {
        margin: 0;
        color: #fff !important;
        font-size: 1rem !important;
        font-weight: 700 !important;
        line-height: 1.2;
    }

    .arc-identity .arc-id-login-header p {
        margin: 3px 0 0;
        color: rgba(255, 255, 255, .78) !important;
        font-size: .72rem;
    }

    .arc-identity .arc-id-external-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 7px;
    }

    .arc-identity .arc-id-provider-button {
        min-height: var(--arc-id-control-height);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 7px;
        padding: 6px 10px;
        color: #fff;
        border: 1px solid rgba(255, 255, 255, .24);
        border-radius: var(--arc-id-radius);
        background: transparent;
        font: inherit;
        font-size: .74rem;
        font-weight: 650;
        cursor: pointer;
        appearance: none;
    }

        .arc-identity .arc-id-provider-button:hover,
        .arc-identity .arc-id-provider-button:focus-visible {
            color: #fff;
            background: rgba(255, 255, 255, .07);
            border-color: rgba(255, 255, 255, .38);
        }

    .arc-identity .arc-id-provider-mark {
        display: inline-block;
        width: 18px;
        height: 18px;
        flex: 0 0 18px;
        background-color: transparent;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        border: 0;
        border-radius: 0;
    }

    .arc-identity .arc-id-provider-microsoft {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 21 21'%3E%3Crect x='1' y='1' width='9' height='9' fill='%23F25022'/%3E%3Crect x='11' y='1' width='9' height='9' fill='%237FBA00'/%3E%3Crect x='1' y='11' width='9' height='9' fill='%2300A4EF'/%3E%3Crect x='11' y='11' width='9' height='9' fill='%23FFB900'/%3E%3C/svg%3E");
    }

    .arc-identity .arc-id-provider-google {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%234285F4' d='M21.805 10.023H12v3.955h5.617c-.242 1.273-.969 2.352-2.063 3.078v2.555h3.336c1.953-1.797 3.078-4.445 3.078-7.594 0-.727-.063-1.43-.163-1.994z'/%3E%3Cpath fill='%2334A853' d='M12 22c2.8 0 5.148-.93 6.867-2.523l-3.336-2.555c-.93.625-2.117.992-3.531.992-2.703 0-4.992-1.82-5.813-4.273H2.742v2.633A10.39 10.39 0 0 0 12 22z'/%3E%3Cpath fill='%23FBBC05' d='M6.187 13.641A6.23 6.23 0 0 1 5.86 11.63c0-.695.117-1.375.328-2.012V6.984H2.742A10.37 10.37 0 0 0 1.625 11.63c0 1.68.398 3.266 1.117 4.645l3.445-2.634z'/%3E%3Cpath fill='%23EA4335' d='M12 5.344c1.523 0 2.883.523 3.961 1.547l2.969-2.969C17.141 2.25 14.797 1.227 12 1.227A10.39 10.39 0 0 0 2.742 6.984l3.445 2.633C7.008 7.164 9.297 5.344 12 5.344z'/%3E%3C/svg%3E");
    }

    .arc-identity .arc-id-provider-github {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23181717' d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.084-.729.084-.729 1.205.084 1.838 1.237 1.838 1.237 1.07 1.835 2.809 1.305 3.495.998.108-.776.418-1.305.762-1.605-2.665-.305-5.466-1.334-5.466-5.93 0-1.31.465-2.381 1.235-3.221-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23a11.5 11.5 0 0 1 3-.405c1.02.005 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.911 1.23 3.221 0 4.61-2.805 5.625-5.475 5.921.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E");
    }

    .arc-identity .arc-id-provider-facebook {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12' fill='%231877F2'/%3E%3Cpath fill='%23ffffff' d='M13.7 24v-9.28h3.12l.47-3.62H13.7V8.79c0-1.05.29-1.76 1.8-1.76h1.92V3.79c-.33-.04-1.47-.14-2.8-.14-2.77 0-4.67 1.69-4.67 4.8v2.65H6.82v3.62h3.13V24h3.75z'/%3E%3C/svg%3E");
    }

    .arc-identity .arc-id-divider {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        align-items: center;
        gap: 9px;
        margin: 12px 0;
        color: rgba(255, 255, 255, .58);
        font-size: .58rem;
        font-weight: 750;
        letter-spacing: .08em;
        text-transform: uppercase;
    }

        .arc-identity .arc-id-divider::before,
        .arc-identity .arc-id-divider::after {
            content: "";
            height: 1px;
            background: rgba(255, 255, 255, .16);
        }

    .arc-identity .arc-id-login-form {
        display: grid;
        gap: 8px;
    }

    .arc-identity .arc-id-field {
        position: relative;
        display: block;
        margin: 0;
    }

    .arc-identity .arc-id-field-label {
        position: absolute;
        left: -9999px;
    }

    .arc-identity .arc-id-field input {
        width: 100%;
        height: var(--arc-id-input-height);
        min-height: var(--arc-id-input-height);
        padding: 8px 12px;
        color: var(--arc-id-text);
        border: 1px solid #d6dee7;
        border-radius: var(--arc-id-radius);
        background: var(--arc-id-surface);
        outline: none;
        font: inherit;
        font-size: .75rem;
    }

        .arc-identity .arc-id-field input:focus {
            border-color: var(--arc-id-accent);
            box-shadow: 0 0 0 2px color-mix(in srgb, var(--arc-id-accent) 18%, transparent);
        }

    .arc-identity .arc-id-password-field input {
        padding-right: 58px;
    }

    .arc-identity .arc-id-password-toggle {
        position: absolute;
        top: 50%;
        right: 7px;
        transform: translateY(-50%);
        padding: 4px 7px;
        color: #526276;
        border: 0;
        background: transparent;
        font: inherit;
        font-size: .66rem;
        cursor: pointer;
    }

    .arc-identity .arc-id-submit-button {
        min-height: var(--arc-id-control-height);
        margin-top: 0;
        color: #142234;
        border: 1px solid rgba(255, 255, 255, .82);
        border-radius: var(--arc-id-radius);
        background: #fff;
        font: inherit;
        font-size: .75rem;
        font-weight: 750;
        cursor: pointer;
        appearance: none;
    }

        .arc-identity .arc-id-submit-button:hover,
        .arc-identity .arc-id-submit-button:focus-visible {
            background: #f0f5f8;
        }

    .arc-identity .arc-id-login-links {
        display: grid;
        justify-items: center;
        gap: 4px;
        margin-top: 12px;
        color: rgba(255, 255, 255, .76);
        font-size: .68rem;
    }

        .arc-identity .arc-id-login-links a {
            color: #55c4ee !important;
            text-decoration: none;
        }

            .arc-identity .arc-id-login-links a:hover,
            .arc-identity .arc-id-login-links a:focus-visible {
                text-decoration: underline;
            }