@import '/_content/Microsoft.FluentUI.AspNetCore.Components/css/reboot.css';

body {
    --body-font: "Segoe UI Variable", "Segoe UI", sans-serif;
    font-family: var(--body-font);
    font-size: var(--type-ramp-base-font-size);
    line-height: var(--type-ramp-base-line-height);
    margin: 0;
    color: var(--neutral-foreground-rest);
    background-color: var(--neutral-layer-1);
}

.main {
    min-height: calc(100dvh - 36px);
}

.flex {
    display: flex;
}

.justify-center {
    justify-content: center;
}

.login-card {
    margin-top: 5%;
}

.login-form {
    padding: 20px
}

.login-box {
    border: 2px solid var(--neutral-layer-floating);
    border-radius: calc(var(--control-corner-radius) * 1px);
    padding: 60px 40px 60px 40px;
}

.login-btn {
    min-width: 80px;
}

.input-container {
    margin-bottom: 1em;
    flex-direction: column;
    display: flex;
}

.input-container:hover > input {
    background: padding-box linear-gradient(var(--neutral-fill-input-hover), var(--neutral-fill-input-hover)), border-box var(--neutral-stroke-input-hover);
}

input {
    padding: 0 9px;
    background: padding-box linear-gradient(var(--neutral-fill-input-rest), var(--neutral-fill-input-rest)), border-box var(--neutral-stroke-input-rest);
}

.form-label {
    font-family: var(--body-font);
    color: var(--neutral-foreground-rest);
    margin-bottom: 4px;
}

.control {
    color: inherit;
    font-family: var(--body-font);
    border: calc(var(--stroke-width) * 1px) solid transparent;
    border-radius: calc(var(--control-corner-radius) * 1px);
    height: calc((var(--base-height-multiplier) + var(--density)) * var(--design-unit) * 1px);
}

.accent {
    background-color: var(--accent-fill-rest);
    color: var(--fill-color);
}

.accent:hover {
    background-color: var(--accent-fill-hover);
}

.text-danger {
    color: var(--error);
}

.invalid {
    outline: 1px solid var(--error);
}