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

:root {
    --brand: #005EFF;
    --bg: #F3F3F3;
    --panel-bg: #FFFFFF;
    --muted-bg: #F8F9FA;
    --border: #D9D9D9;
    --text: #333333;
    --muted: #666666;
}

body {
    --body-font: "Calibri", "Calibri Light", "Segoe UI", Arial, sans-serif;
    --type-ramp-base-font-size: 11pt;
    --type-ramp-base-line-height: 1.2;
    font-family: var(--body-font), sans-serif;
    font-size: var(--type-ramp-base-font-size);
    line-height: var(--type-ramp-base-line-height);
    height: 100vh;
    width: 100vw;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.route-body-content{
    padding: 10px;
    min-width: 0;
    overflow-x: hidden;
}

fluent-select {
    width: 200px;
    min-width: fit-content;
    max-width: 100%;
}

form {
    height: 100%;
    width: 100%;
}

.validation-message {
    color: indianred !important;
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: normal;
    max-width: 100%;
    display: block;
}

fluent-button.custom-border::part(control) {
    border-color: var(--accent-fill-rest);
}

.column-checked div fluent-button svg path{
    stroke: var(--accent-fill-rest);
    stroke-width: 0.6;
}

.column-unchecked div fluent-button svg path{
    fill: gray;
}

.vertical-tabs {
    width: 260px !important;
    background: #F7F7F7;
    border-right: 1px solid var(--border);
}

.horizontal-tabs {
    border-bottom: 1px solid var(--border);
    margin-bottom: 10px;
    background: var(--panel-bg);
}

fluent-dialog#loader-dialog::part(backdrop) {
    background-color: transparent;
}

/* Target the dialog surface (the dialog itself) */
fluent-dialog#loader-dialog::part(control) {
    background-color: transparent;
    box-shadow: none;
}

.component-field-title {
    padding: 4px;
    font-size: 14px;
    font-weight: 550;
    color: #475569;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: transparent;
    border: none;
    outline: none;
    border-radius: 4px;
    transition: all 0.2s ease;
    font-family: inherit;
    text-align: left;
}

.component-field-title:hover {
    background: #f8f9fa;
}