fluent-dialog::part(control) {
    max-height: 90dvh;
}

.fluent-dialog-body {
    overflow: auto;
    padding: 0.125rem;
}

    .fluent-dialog-body form {
        display: grid;
        gap: 1rem;
        width: 100%;
    }

        .fluent-dialog-body form label {
            font-style: italic;
            width: fit-content;
        }

    .fluent-dialog-body fluent-text-field {
        width: 100%;
    }

    .fluent-dialog-body fluent-radio-group::part(positioning-region) {
        column-gap: 3rem;
        row-gap: 0.5rem;
    }

    .fluent-dialog-body fluent-radio-group fluent-radio::part(label) {
        padding-inline-start: 0.5rem !important;
        margin: 0;
    }

    .fluent-dialog-body fluent-number-field.invalid {
        outline: none;
    }

    .fluent-dialog-body fluent-number-field.invalid::part(root),
    .fluent-dialog-body [role="checkbox"].invalid::part(control),
    .fluent-dialog-body [role="combobox"].invalid::part(control),
    .fluent-dialog-body fluent-combobox.invalid::part(control),
    .fluent-dialog-body fluent-text-area.invalid::part(control),
    .fluent-dialog-body fluent-text-field.invalid::part(root) {
        outline: calc(var(--stroke-width) * 1px) solid var(--error-clr);
    }


.alarm-threshold {
    display: grid;
    gap: 1rem;
    width: 100%;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
}

    .alarm-threshold fluent-number-field {
        width: 100%;
    }

fluent-dialog[id^="id_"]::part(control) {
    padding-inline: min(3dvw, 2rem) !important;
    padding-block: min(3dvh, 2rem) !important;
}

fluent-dialog[id^="id_"] .fluent-dialog-header {
    padding-bottom: min(2dvh, 1rem) !important;
}