/* Sidan "Om kakor och personuppgifter", delad av publika webbplatsen och e-handeln. */

.cookie-information {
    line-height: 1.55;
    max-width: 46rem;
    padding: 1.5rem 1rem 3rem;
}

/* Rubrikstorlekarna kommer från Bootstrap-klasserna i markupen, inte härifrån. */
.cookie-information h2 {
    margin: 2rem 0 0.75rem;
}

.cookie-information p {
    margin-bottom: 1rem;
}

.cookie-information-table {
    border-collapse: collapse;
    margin-bottom: 1.25rem;
    width: 100%;
}

.cookie-information-table th,
.cookie-information-table td {
    padding: 0.4rem 0.6rem 0.4rem 0;
    text-align: left;
    vertical-align: top;
}

.cookie-information-table th {
    font-weight: 600;
}

/* Förklaringsraden hör ihop med raden ovanför, så linjen dras under den och inte emellan. */
.cookie-information-why td {
    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
    color: rgba(33, 37, 41, 0.78);
    padding-bottom: 0.8rem;
}

.outer-login-container {
    display: flex;
    justify-content: center; 
    align-items: center; 
    height: 100vh; 
}

.login-form-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: white;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    width: 350px;
    min-height: 300px; 
}

.form-input-item {
    display: flex;
    flex-direction: column; 
    margin-bottom: 15px;
}

    .form-input-item label {
        font-weight: bold; 
        margin-bottom: 5px; 
    }

    .form-input-item input {
        padding: 8px;
        border: 1px solid #ccc;
        border-radius: 5px;
        width: 100%; 
        box-sizing: border-box; 
    }

/*.overflow-auto {
    overflow: auto;
}*/

/*.gridlayout-item {
    font-size: 1.2em;
    font-weight: 500;
    text-align: center;
    height: 100%;
    padding: 0.5rem;
    text-align: center;
    position: relative;
    z-index: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .gridlayout-item:before {
        content: " ";
        position: absolute;
        z-index: -1;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        opacity: 0.4;
    }
.gridlayout-footer {
    position: relative;
    width: 100%;
    bottom: 0;
}*/

.n2c-navcomponent-text {
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Notification list, shared by the bell dropdown and the Händelser page.
   DxDropDown renders its body outside the component, so scoped CSS cannot reach it, and the bundler
   regenerates wwwroot/paleda.se.components.css from this folder on every build. */
.notification-page {
	max-width: 60rem;
	margin: 1.5rem auto;
	padding: 0 1rem;
}

.notification-page-header {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 1rem;
}

.notification-page-title {
	margin: 0;
	font-size: 1.4rem;
}

.notification-panel-title {
	font-weight: 600;
}

.notification-mark-all {
	padding: 0;
	border: 0;
	background: none;
	color: var(--paleda-accent, #8a9a5b);
	cursor: pointer;
	font-size: 0.8rem;
	text-decoration: underline;
}

.notification-empty {
	margin: 0.5rem 0;
	color: rgba(0, 0, 0, 0.6);
	font-size: 0.9rem;
}

.notification-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.notification-item {
	display: flex;
	gap: 0.6rem;
	padding: 0.6rem 0.25rem;
	border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.notification-item:first-child {
	border-top: 0;
}

/* Unread events carry a tint, so the badge count and the list agree at a glance. */
.notification-item-unread {
	background-color: rgba(138, 154, 91, 0.08);
}

.notification-item-icon {
	margin-top: 0.15rem;
	color: var(--paleda-accent, #8a9a5b);
}

.notification-item-body {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	min-width: 0;
}

.notification-item-title {
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	cursor: pointer;
	font-weight: 600;
	text-align: left;
}

.notification-item-title:hover {
	text-decoration: underline;
}

.notification-item-message {
	margin: 0;
	font-size: 0.85rem;
	line-height: 1.35;
}

.notification-item-footer {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-top: 0.15rem;
}

.notification-item-time {
	color: rgba(0, 0, 0, 0.55);
	font-size: 0.75rem;
}

.notification-item-link,
.notification-item-read {
	padding: 0;
	border: 0;
	background: none;
	color: var(--paleda-accent, #8a9a5b);
	cursor: pointer;
	font-size: 0.8rem;
	text-decoration: underline;
}

.notification-see-all {
	color: var(--paleda-accent, #8a9a5b);
	font-size: 0.85rem;
}

.paleda-grid {
    width: 100%;
    max-width: 100%;
}

.paleda-grid .dxbl-grid-table > tbody > tr > td {
    vertical-align: top;
}

/* Ränderna räknas på produkter, inte på tabellrader: PaledaGridStriping sätter klassen på varannan
   DATARAD genom DxGrids CustomizeElement, så varken fyllnadsraden under sista posten eller en förhandsrad
   får en egen rand. Färgen sätts på cellerna och inte på raden: Paledas tema läser inte
   --dxbl-grid-row-bg, så variabeln sattes men syntes aldrig (mätt 2026-09-23). DevExpress visar båda formerna
   i "Rows in Blazor Grid"; den här är den som håller mot det här temat. */
.paleda-grid-alt-row > td {
    background-color: rgba(0, 0, 0, 0.05);
}

/* En förhandsrad sitter tätt under sin rad, i varje rutnät.

   DevExpress lägger sin egen vaddering på detaljcellen genom temavariabler
   (--dxbl-grid-detail-cell-padding-x/y, 1,5-1,75rem som standard). Det var de två tomma
   banden över och under varje förhandsrad som Peter kallade "dom två röda raderna" (#1267),
   och samma band dök upp igen på leveranskontrollen när Förväntas in blev en förhandsrad
   (Blad3). Regeln bodde i två komponenters egna stilar — OrderBasketGridComponent (#1267)
   och ProductGridComponent (EH-03) — med olika värden på y-vadderingen. Den hör hemma här,
   en gång, eftersom alla rutnät i e-handeln och på publika sajten bär .paleda-grid.

   Kantlinjen mellan en rad och dess egen förhandsrad tas bort av samma skäl: skiljelinjen
   hör hemma efter paret, inte mitt i det.

   Vadderingen sätts genom komponentens egen variabel och inte med en egen cellväljare.
   En tidigare version riktade sig mot `.dxbl-grid-detail-row > td`, en klass DxGrid aldrig
   renderar, och matchade därför ingenting.

   Väljaren måste nämna .dxbl-grid. Temat sätter variabeln på `.dxbl-grid`, `.dxbl-grid.dxbl-sm`
   och `.dxbl-grid.dxbl-lg` (2rem), och enbart `.paleda-grid` är en klass mot temats två och
   förlorar — mätt 2026-09-23, då cellen räknade fram 32px trots regeln. Med två klasser väger
   de lika, och den här filen laddas efter temat. */
.paleda-grid.dxbl-grid {
    --dxbl-grid-detail-cell-padding-x: 0.5rem;
    --dxbl-grid-detail-cell-padding-y: 0.1rem;
}

.paleda-grid.dxbl-grid table.dxbl-grid-table > tbody > tr > td.dxbl-grid-detail-cell {
    border-top: 0;
}

.paleda-grid--virtual {
    height: clamp(360px, calc(100vh - 220px), 760px);
}

.paleda-grid--compact {
    max-height: clamp(260px, calc(100vh - 260px), 560px);
}

@media (max-width: 768px) {
    .paleda-grid--virtual {
        height: clamp(320px, calc(100vh - 170px), 640px);
    }

    .paleda-grid--compact {
        max-height: clamp(220px, calc(100vh - 220px), 480px);
    }
}

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;
    }

.product-public-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 0.75rem;
    align-items: stretch;
}

.product-public-card {
    background-color: #fff;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.10);
    height: 100%;
    padding: 0.75rem;
}

.product-public-card-layout,
.product-public-card-layout .dxbl-gridlayout-root {
    height: 100%;
}

.product-public-image-cell {
    align-items: center;
    display: flex;
    justify-content: center;
    min-height: 120px;
}

.product-public-image-button {
    background: transparent;
    border: 0;
    cursor: pointer;
    padding: 0;
}

.product-public-content {
    text-align: center;
}

.product-public-card h2 {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.25;
    margin: 0 0 0.35rem;
}

.product-public-card p {
    font-size: 0.9rem;
    line-height: 1.35;
    margin: 0 0 0.25rem;
}

.product-public-badge {
    background-color: lawngreen;
    border-radius: 4px;
    color: black;
    display: inline-block;
    font-size: 0.85rem;
    margin-bottom: 0.35rem;
    padding: 0.15rem 0.5rem;
}

.product-public-description {
    display: -webkit-box;
    font-size: 0.875rem;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.product-public-action {
    display: flex;
    justify-content: center;
}

.product-details-popup {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.product-details-summary {
    text-align: center;
}

.product-details-summary h4 {
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.product-image-carousel-single,
.product-image-carousel-item {
    align-items: center;
    background-color: var(--paleda-background-color);
    display: flex;
    height: 100%;
    justify-content: center;
    padding: 1.25rem;
}

.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);
}

p {
    font-size: 16px;
    color: var(--black);
    margin-bottom: 0;
}

.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;
}

.layout-wrapper {
    padding: 6px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

.footer-content-wrapper {
    display: flex;
    justify-content: center; 
    align-items: center; 
    height: 100%; 
    text-align: center; 
    padding: 10px; 
}
    .footer-content-wrapper a {
        font-weight: bold;
    }
footer-content-wrapper p{
    margin: 0;
    font-size: 14px;  
    word-wrap: break-word;  
    line-height: 1.5;  
    text-align: center !important;
}