body {
    /* Brand colours belong to the shared theme (paleda.se.Theming/wwwroot/paleda.theme.css).
       These aliases only forward them, so no app can drift to a colour of its own. The literal
       fallbacks apply when a non-Paleda DevExpress theme is selected in Admin. */
    --paleda-background-color: var(--paleda-color-primary, #B3BB7F);
    --paleda-secondary-background-color: var(--paleda-color-surface-muted, #E9ECEF);
    --paleda-font-color: var(--paleda-color-text, #212529);
    --paleda-font-color-grey: var(--paleda-color-text-muted, rgba(0,0,0,50%));
}

html, body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    min-height: 100%;
}

/* The overflow lives on html alone, where it propagates to the viewport. It used to sit on body as well, and
   because the root element also had one, the body's did not propagate: body became a scroll container of its
   own, and a position: sticky element (the category panel, Blad64) sticks to the nearest ancestor with a
   scrolling mechanism — body — which moves with the page, so it never stuck (MDN, position: sticky). Measured
   2026-09-25: the panel computed sticky and still went from y=56 to y=−186 on a 242 px scroll. */
html {
    overflow-x: hidden;
    overflow-y: auto;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

.dx-card {
    box-shadow: 0 1px 3px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.24);
    border-radius: 4px;
    background-color: #fff;
    margin: 2px 2px 3px;
}

    .dx-card.wide-card {
        border-radius: 0;
        margin-left: 0;
        margin-right: 0;
        border-right: 0;
        border-left: 0;
    }

.paleda-button {
    background-color: var(--paleda-background-color);
    color: var(--black);
    border-color: #6c757d;
    border-radius: 0.25rem;
    padding: 0.375rem 0.75rem;
}

    .paleda-button:hover {
        background-color: var(--paleda-color-primary-hover, #8f9861) !important;
        color: #fff;
        border-color: #6c757d;
    }

    .paleda-button:active {
        background-color: var(--paleda-color-primary-active, #c5bd7b) !important;
        color: #fff;
        border-color: lightgrey !important;
        border-width: medium;
    }

    .paleda-button:focus {
        background-color: var(--paleda-color-primary-active, #c5bd7b) !important;
        color: #fff;
        border-color: lightgrey !important;
        border-width: medium;
    }

.dxbl-treeview-items-container {
    padding-top: 10px !important;
}

.dxbl-treeview-item .dxbl-treeview-item-content {
    height: 21px;
    margin-bottom: 0 !important;
    font-size: 13.3333px;
}

.dxbl-treeview-item .dxbl-treeview-item .dxbl-treeview-item-content {
    height: 18px;
    font-size: 13px;
}

@media (max-width: 450px) {
    dxbl-menu-item a.dxbl-btn {
        font-size: 14px;
        padding-top: 4px;
        padding-bottom: 4px;
    }
}

@media (min-width: 451px) {
    dxbl-menu-item a.dxbl-btn {
        font-size: 16px;
    }
}

a {
    font-size: 16px;
    text-decoration: none;
    color: var(--black);
}

/* margin-bottom: 0 satt här nollade styckeavståndet på varenda sida och var det som fick sidorna
   att kännas hoptryckta: rubrik, text och formulär låg 12, 8 och 0 pixlar isär på en telefon.
   Bootstraps eget avstånd får gälla. */
p {
    font-size: 16px;
    color: var(--black);
}

.accordion-button {
    position: static !important;
}

button.dxbl-btn.dxbl-menu-dropdown-item {
    font-size: medium;
}

.custom-menu-logo-container {
    padding-left: 3em;
}

@media only screen and (max-width: 1300px) {

    .custom-html-content td {
        vertical-align: baseline;
    }

    .custom-menu-logo-container {
        padding-left: 1em;
    }

    dxbl-menu-item .dxbl-btn {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }

    .custom-html-content img {
        width: 100%;
        height: 100%;
    }
}

.sidebar {
    min-width: max-content;
    width: max-content;
    max-width: max-content;
}

.sidebar .dxbl-scroll-viewer-vert-scroll-bar {
    visibility: hidden;
}


/*salkjdlkasjdkad*/