/*!**********************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!./Style/site.css ***!
  \**********************************************************************************************/
[data-hidden="true"] {
    display: none !important;
}

.btn-toolbar-add {
    padding: 4px 10px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.btn-toolbar-add > .bi,
.btn-toolbar-add > .fa-solid {
    top: 0;
    font-size: 11px;
    margin-right: 0;
}

/* Sidenav collapse — när menyn är kollapsad på desktop ska sidans innehåll ta hela bredden.
   Ingen transition här: den triggades på route-byten även i EditorPublic och gjorde att
   RendererComponent mätte fel canvas-bredd under animeringen. Collapse-animationen av
   sidomenyn själv räcker visuellt. */
body.sidenav-collapsed #page-wrapper {
    margin-left: 0 !important;
}

/* Transition bara under själva toggle-handlingen (sätts i EditorSidenav/Sidenav-komponenten).
   Route-byten i EditorPublic triggas inte av denna klass → ingen oönskad animation. */
body.sidenav-transitioning #page-wrapper {
    transition: margin-left 250ms ease;
}

/* Global laddningsbar (loading-bar) — sidomenyn är position:fixed med z-index 1001 och dolde
   därför barens start. Låt den i stället börja där toppnavigeringen börjar när menyn är utfälld.
   :has() gör att regeln bara slår på sidor som faktiskt renderar en <sidenav>/<editor-sidenav>;
   publika vyer saknar meny och behåller full bredd. 250px speglar .sidenav-root i
   Sidenav.Component.css — ändras bredden där måste den ändras här också. */
body:has(.sidenav-root):not(.sidenav-collapsed) .global-loading-bar {
    left: 250px;
}

/* Följ med när menyn fälls in/ut, samma villkor som #page-wrapper ovan. */
body.sidenav-transitioning .global-loading-bar {
    transition: left 250ms ease;
}

/* Mobilvy — sidomenyn sitter vid botten; content får padding-bottom så inget göms bakom menyn.
   Viewport-scrollbaren döljs så den inte syns bakom den fixa menyn (touch-scroll påverkas inte). */
@media (max-width: 767px) {
    #page-wrapper {
        margin-left: 0 !important;
        padding-bottom: 45vh;
    }
    body.sidenav-collapsed #page-wrapper {
        padding-bottom: 30px;
    }
    html {
        scrollbar-width: none;
    }
    html::-webkit-scrollbar,
    body::-webkit-scrollbar {
        width: 0;
        height: 0;
        display: none;
    }
}

/* Mobil och surfplatta i stående läge (<992px, SidenavMobileSheet.MEDIA_QUERY): sidor med <sidenav>/<editor-sidenav>
   har en dockad menyrad i botten i stället för sidomenyn. EditorPublic (<sidemenu>) saknar .sidenav-root och
   berörs inte av något i det här blocket. */
@media (max-width: 991px) {
    /* Innehållet tar hela bredden (sidomenyn ligger som ark under raden) och reserverar bara radens höjd. */
    body:has(.sidenav-root) #page-wrapper,
    body.sidenav-collapsed:has(.sidenav-root) #page-wrapper {
        margin-left: 0 !important;
        border-left: 0;
        padding-bottom: calc(var(--sidenav-bar-height) + env(safe-area-inset-bottom));
    }

    /* Editorns kontextark (EditorTouchContextSheet) ligger ovanför den dockade menyraden, inte över den:
       arkets förälder bildar egen stacking context, så z-index räcker inte — och raden ska synas ändå. */
    body:has(.sidenav-bar) editor-touch-contextsheet .tcs {
        bottom: calc(var(--sidenav-bar-height) + env(safe-area-inset-bottom));
        padding-bottom: 0;
        max-height: calc(60vh - var(--sidenav-bar-height));
    }

    /* Editorns vyknappar (3D/2D/förstaperson/centrera/multiplayer) låg bottom: 20px — bakom menyraden
       (tidigare bakom halvskärmsmenyn). Lyft dem ovanför raden, och verktygsknapparna till vänster ovanför dem. */
    body:has(.sidenav-bar) .camera-mode-button-toolbar {
        bottom: calc(var(--sidenav-bar-height) + env(safe-area-inset-bottom) + 10px);
        left: 50%;
        transform: translateX(-50%);
        /* left: 50% ger bara halva bredden att krympa i — utan max-content bryts raden i två */
        width: max-content;
        min-width: 0;
        max-width: calc(100vw - 16px);
        justify-content: center;
    }

    /* Kompakt rad som ryms på en rad även på 360px: korta etiketter även för aktivt läge (markeringen räcker),
       fingervänlig höjd, och mindre luft före multiplayer (inline margin-left: 20px i mallen). */
    body:has(.sidenav-bar) .camera-mode-button-toolbar .btn {
        min-width: 40px;
        min-height: 40px;
    }

    body:has(.sidenav-bar) .camera-mode-button-toolbar .camera-mode-active .camera-mode-selected {
        display: none;
    }

    body:has(.sidenav-bar) .camera-mode-button-toolbar .camera-mode-active .camera-mode-not-selected {
        display: inline;
    }

    body:has(.sidenav-bar) .camera-mode-button-toolbar .btn[style*="margin-left"] {
        margin-left: 8px !important;
    }

    body:has(.sidenav-bar) .editor-side-tools {
        bottom: calc(var(--sidenav-bar-height) + env(safe-area-inset-bottom) + 60px);
    }

    /* Editorns dialoger (.fullscreen-container-menu) ligger inne i #page-wrapper, som är position: fixed på mobil och
       därmed en egen stacking context under toppraden — överkanten hamnade bakom toppmenyn. Låt dem fylla ytan
       mellan toppraden och menyraden i stället, så att båda menyerna syns. Samma mått som egenskapspanelen
       (--part-panel-top/-bottom sätts på #page-wrapper av Editor.Component.updatePartPanelInsets). */
    /* Samma sak på övriga sidor med menyrad (t.ex. Skapa projekt): dialogen hamnade under toppraden. Här finns inga
       uppmätta mått, så toppradens höjd (50px, satt av _Layout.cshtml) används — 0 när toppmenyn är dold. */
    body:has(.sidenav-bar) #page-wrapper .fullscreen-container-menu {
        top: 50px;
        bottom: calc(var(--sidenav-bar-height) + env(safe-area-inset-bottom)) !important;
    }

    body.editor-topmenu-hidden:has(.sidenav-bar) #page-wrapper .fullscreen-container-menu {
        top: 0;
    }

    /* Toppmenyns dölj-pil (.toggle-topmenu) låg ovanpå dialogens bakgrund. */
    body:has(.sidenav-bar):has(#page-wrapper .fullscreen-container-menu) .toggle-topmenu {
        display: none;
    }

    body:has(.sidenav-bar) #page-wrapper .fullscreen-container-menu .inner-container {
        width: calc(100% - 24px);
        margin: 12px auto;
        padding: 16px;
        border-radius: 14px;
    }

    body:has(.sidenav-bar) #page-wrapper .fullscreen-container-menu .inner-container h1 {
        font-size: 20px;
        font-weight: 600;
    }

    body:has(.editor-sidenav-bar) #page-wrapper .fullscreen-container-menu {
        top: var(--part-panel-top, 0px);
        /* !important: den gamla mobilregeln .fullscreen-container-menu { bottom: 0% !important } */
        bottom: var(--part-panel-bottom, 0px) !important;
    }

    /* Sidan bakom det öppna menyarket ska inte scrolla */
    body.sidenav-sheet-open {
        overflow: hidden;
    }

    /* Menyn sitter vid botten i mobilvy och täcker inte längre vänsterkanten. */
    body:has(.sidenav-root):not(.sidenav-collapsed) .global-loading-bar {
        left: 0;
    }
    html:has(.sidenav-root) {
        scrollbar-width: none;
    }
    html:has(.sidenav-root)::-webkit-scrollbar,
    body:has(.sidenav-root)::-webkit-scrollbar {
        width: 0;
        height: 0;
        display: none;
    }
}

/* Titelraden i gallery-card (Gallery.Card.Template.html) — hade tidigare col-xs-12 enbart för bredd och indrag */
.card-title-row {
    position: relative;
    float: left;
    width: 100%;
    min-height: 1px;
    padding: 0 15px;
}

:root {
    /* Höjd på mobilens dockade menyrad (Sidenav.Component.css) */
    --sidenav-bar-height: 56px;
}

#page-wrapper {
    border-left: none !important;
}

.public-start #page-wrapper {
    margin-left: 0;
    padding-left: 50px;
    padding-right: 50px;
    bottom: 0;
    padding-bottom: 115px;
    position: relative;
    background-color: #fff !important;
}

.text-validation {
    color: #a94442;
    margin-top: 3px;
    margin-left: 3px;
}

.bottom-buffer {
    margin-bottom: 10px;
}

.top-buffer {
    margin-top: 10px;
}

.first-person-aim {
    position: absolute;
    z-index: 1;
}

.tooltip-icon {
    font-weight: bold;
    background: #202e48;
    color: white;
    font-size: 11px;
    border-radius: 30px;
    width: 16px;
    display: inline-block;
    text-align: center;
    cursor: pointer;
    bottom: -2px;
    position: relative;
    float: right;
}

.tooltip-container {
    position: absolute;
    right: 8px;
    top: 50%;
    height: 0;
    margin-top: -12px;
}

.image-button .tooltip-icon {
    bottom: auto;
    width: 24px;
    height: 24px;
    vertical-align: middle;
    padding: 2px;
    font-size: 16px;
}

.full-width .tooltip-icon {
    position: absolute;
    top: 11px;
    bottom: auto;
    right: 57px;
}

.ui-datepicker .ui-state-default {
    background-color: #cfcfcf !important;
}

.ui-tooltip {
    z-index: 999999;
    white-space: pre-line;
    max-width: 500px;
}

.property-check {
    position: absolute;
    top: 12px;
    right: 17px;
}

.panel-heading-btn {
    position: absolute;
    top: 1px;
    cursor: pointer;
}

.panel-heading-close-btn {
    right: 20px;
}

.panel-heading-send-btn {
    right: 16px;
    color: inherit;
}

.panel-heading-send-btn i {
    position: relative;
}

canvas.renderer-canvas {
    position: fixed;
    top: 0;
    bottom: 0;
    outline: none;
}

.hovered-option {
    color: white;
}

.navbar {
    margin-bottom: 0;
}

.navbar-static-top .nav>li>a:focus,
.navbar-static-top .nav>li>a:hover {
    color: #888;
    text-shadow: none;
}

.nav li a {
    cursor: pointer;
}

.navbar-top-links {
    margin-right: 0 !important;
}

.navbar-top-links .ms-auto li {
    display: inline-block !important;
}

.navbar-top-links li a {
    padding: 15px !important;
}
.navbar-top-links.project-info li a {
    padding: 0 !important;
}

.navbar-top-links.project-info {
    margin-left: 300px; 

}
/* Header dropdowns must stay clickable above fixed overlays like the editor's IFS/AI button
   stack (z-index 1002/1003), the AI configurator panel (1003) and the global AI assistant panel
   (9999). A z-index on the .dropdown-menu itself does NOT work: Bootstrap's .navbar is
   position: relative and a rule further down forces .navbar-static-top to z-index: 1 !important, so the
   whole navbar is one stacking context painted at layer 1 — nothing inside it can escape. Instead,
   raise the navbar's own stacking context only while one of its dropdowns is open (BS5 marks the
   open menu with .show; BS3 used .open on the .dropdown). 10000 clears
   the AI panels but stays below loading/message overlays (99999+). !important + the higher
   specificity of :has() are both needed to beat that !important. */
.navbar-static-top:has(.dropdown-menu.show) {
    z-index: 10000 !important;
}

/* The navbar's background is opaque and full-width, so raising it to 10000 would otherwise paint
   over the dark-blue side nav (.sidenav-root, z1001) and the notification row's bells/project info
   (z1). Lift both to the SAME 10000 while a navbar dropdown is open — they sit later in the DOM
   than the navbar, so at an equal z-index they win the tie and stay visible. The open dropdown is
   on the far right, clear of the (left) side nav and the (left/centre) notification content, so
   nothing is obscured. */
body:has(.navbar-static-top .dropdown-menu.show) .sidenav-root,
body:has(.navbar-static-top .dropdown-menu.show) .editor-notification-area,
.editor-notification-area:has(.dropdown-menu.show) {
    z-index: 10000;
}

/* Same stacking-context trap for the editor's notification row (project info/revision dropdowns):
   it's position: fixed with z-index: 1, so its open dropdowns would also paint under the editor's
   fixed overlays. */
/* toggleTopMenu() (Pages/_Layout.cshtml) collapses the global top menu and toggles
   `body.editor-topmenu-hidden`. The Editor's fixed overlays (AI configurator panel + IFS/AI button
   stack) are positioned from a --editor-topbar-height custom property (defined ~56px in
   Editor.Template.html); when the menu is hidden they should hug the viewport top instead of
   leaving a gap. This override MUST live here in the global stylesheet, not in Editor.Template.html:
   that template's \3c style> is Angular view-encapsulated, so a `body` selector there gets a
   [_ngcontent-…] attribute appended and never matches the (out-of-view) <body>. Replaces the old
   $('.request-offer').css('top') hack, dead since the buttons moved into a position:static flex
   stack. Custom properties aren't scoped by encapsulation, so setting it from here on #page-wrapper
   cascades into the panel/stack normally. */
body.editor-topmenu-hidden #page-wrapper {
    --editor-topbar-height: 0px;
}

/* Toppraden på mobil och surfplatta (<992px, App.Template.html): sidans <page-header> ritas här i stället för
   som en egen rad på sidan — rubrik, tillbaka-pil och åtgärderna som runda ikonknappar. Knapparnas text döljs
   (font-size: 0 tar även nakna textnoder); title-attributet bär etiketten. */
.app-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1 1 auto;
    min-width: 0;
    height: 50px;
    padding-left: 16px;
}

.app-bar__back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    margin-left: -8px;
    border-radius: 50%;
    color: inherit;
    font-size: 20px;
    text-decoration: none;
}

.app-bar__back:hover,
.app-bar__back:active {
    background-color: rgba(0, 0, 0, 0.06);
    color: inherit;
}

/* Rubriken krymper bara vid behov, så att sidans åtgärder ligger direkt efter den (de hör till sidan, inte till
   användarmenyn längst till höger). */
.app-bar__title {
    flex: 0 1 auto;
    min-width: 0;
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.app-bar__actions {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    gap: 8px;
    margin-left: 4px;
}

/* Samma storlek som profilbilden bredvid (30px, .profile-image), helt rund och utan ram. Träffytan är ändå 40px
   (::before), så knappen går lätt att träffa med tummen. */
.app-bar__actions .btn {
    position: relative;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    min-width: 0;
    min-height: 0;
    padding: 0 !important;
    gap: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    box-shadow: none !important;
    font-size: 0;
    line-height: 1;
}

.app-bar__actions .btn::before {
    content: '';
    position: absolute;
    inset: -5px;
}

.app-bar__actions .btn > i {
    margin: 0 !important;
    font-size: 14px;
    line-height: 1;
}

/* Stängknappen i BootstrapDialog (App/Services/BootstrapDialog.ts). BS5 har ingen .close-klass, så den gamla
   knappen ritades som en grå webbläsarknapp. Ikonen ärver rubrikens textfärg (vit på färgad rubrik, mörk på type-default). */
.bootstrap-dialog .bootstrap-dialog-close-button {
    float: right;
    margin: -6px -8px -6px 8px;
    opacity: 1;
}

.bootstrap-dialog .bootstrap-dialog-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: inherit;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    transition: background-color 150ms ease;
}

.bootstrap-dialog .bootstrap-dialog-close:hover,
.bootstrap-dialog .bootstrap-dialog-close:focus-visible {
    background-color: rgba(255, 255, 255, 0.18);
    outline: none;
}

.bootstrap-dialog.type-default .bootstrap-dialog-close {
    color: #333;
}

.bootstrap-dialog.type-default .bootstrap-dialog-close:hover,
.bootstrap-dialog.type-default .bootstrap-dialog-close:focus-visible {
    background-color: rgba(0, 0, 0, 0.07);
}

/* Standardavataren (användare utan bild) är en vit SVG och syntes knappt mot kortens och toppradens ljusgrå
   bakgrund. SVG:n används som mask och fylls med temats primärfärg; bildens egna vita pixlar flyttas ur sikte
   (object-position), så att bara den färgade bakgrunden syns genom masken. */
img[src$="/images/svg/rounduser-icon.svg"] {
    background-color: var(--primary-color, #202e48);
    object-position: -99999px 0;
    -webkit-mask: url('/images/svg/rounduser-icon.svg') center / contain no-repeat;
    mask: url('/images/svg/rounduser-icon.svg') center / contain no-repeat;
}

/* De publika sidorna (PublicStart, EditorPublic) har en mörk toppmeny i temafärg — där är avataren ljus. */
.public-configurator .navbar-static-top img[src$="/images/svg/rounduser-icon.svg"] {
    background-color: var(--icon-color, #fff);
}

/* Dynamiskt objekt (Addo3DObject.Form.Template.html): formuläret tar hela bredden i stället för att ligga i
   .info-row:s 15 % indrag (längre ned). Mobilen har inget indrag — där nollas marginalen (Style/mobile.css). */
.dynamic-object-outdent {
    margin-left: -18.5%;
}

/* Undermenyer i toppradens dropdowns (tema, språk): hover på desktop, utfällda med ett tryck (.open) överallt. */
.dropdown-submenu.open > .dropdown-menu {
    display: block;
}

@media (max-width: 991px) {
    /* Toppradens länkar (flagga, profilbild) centrerade i radens höjd — med bara padding hamnade flaggan 5px för högt. */
    .navbar-static-top .navbar-top-links > li > a {
        display: flex;
        align-items: center;
        height: 50px;
        padding: 0 12px !important;
    }

    .navbar-static-top .navbar-top-links .fa-caret-down {
        margin-left: 6px;
    }

    /* Undermenyerna fälls ut på plats i stället för att flyga ut åt vänster (utanför skärmen på en telefon). */
    .navbar-top-links .dropdown-submenu > .dropdown-menu {
        position: static;
        float: none;
        min-width: 0;
        margin: 0;
        padding: 0 0 4px 16px;
        border: 0;
        box-shadow: none;
    }

    .navbar-top-links .dropdown-submenu:not(.open):hover > .dropdown-menu,
    .dropdown-submenu__flyout-arrow {
        display: none;
    }

    .navbar-top-links .dropdown-menu .dropdown-item {
        min-height: 40px !important;
        display: flex;
        align-items: center;
        gap: 8px;
    }
}

.navbar-top-links .dropdown-menu li {
    display: block !important;
}

.navbar-top-links .dropdown-menu li a {
    padding: 3px 20px !important;
    min-height: 0 !important;
}


#page-wrapper form .form-control.ng-invalid,
#page-wrapper form .form-control.ng-invalid:focus,
#page-wrapper [data-form] .form-control.ng-invalid,
#page-wrapper [data-form] .form-control.ng-invalid:focus,
.fullscreen-container-menu form .form-control.ng-invalid,
.fullscreen-container-menu form .form-control.ng-invalid:focus,
.public-configurator .form-control.ng-invalid,
.public-configurator .form-control.ng-invalid:focus,
.public-configurator .form-control.forced-invalid {
    border-left: 4px solid #a94442 !important;
    /* red */
}

.button-table tr td:last-child {
    text-align: right;
}

.button-table td,
.button-table a:has(i) {
    vertical-align: middle !important;
}

.button-table .btn {
    margin-right: 2px;
}

.fading-message {
    display: inline-table !important;
    margin: 20px auto;
    width: 600px;
    /* BS5:s .modal har bara left: 0 (BS3 hade även right: 0) — utan right centrerar margin: auto inte */
    right: 0;
    /* Modalens omslag täcker hela skärmen och fångade mushjul och klick - sidan bakom ska gå att använda
       medan meddelandet visas (fadingMessage öppnas icke-modalt, se BootstrapDialog.ts) */
    pointer-events: none;
}

.fading-message .modal-dialog {
    margin: 0;
    /* Själva rutan går att klicka i (t.ex. stängknappen när showTimer = -1) */
    pointer-events: auto;
}

.confirm-dialog,
.buttonaction-dialog {
    z-index: 999999 !important;
}

.buttonaction-dialog .modal-footer {
    text-align: right;
}

.buttonaction-dialog .modal-footer .btn,
.buttonaction-body-buttons .btn {
    border-radius: 10px;
    padding: 2px 22px;
}

/* Varianten med valknapparna i dialogens body (se actionMessage(..., buttonsInBody: true) i
   Message.Service.ts) - exportdialogen har för många formatval för att se bra ut på en
   footer-rad, så de läggs i stället i en kolumn under meddelandetexten. Cancel-knappen ligger
   kvar i footern som vanligt (den saknar en egen action och hamnar automatiskt kvar där). */
.buttonaction-body-buttons {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    margin-top: 16px;
}

.buttonaction-body-buttons .btn {
    margin: 0;
}

/* Avbryt-knappen (ingen cssClass) renderas som btn-default - en liten extra marginal skiljer
   den visuellt från kolumnen med formatval i stället för att den smälter in i samma grupp. */
.buttonaction-body-buttons .btn-default {
    margin-top: 8px;
}

.menu-checkbox:not(.hide-checkbox) {
    margin-top: 4px;
    margin-bottom: 8px;
}

.menu-checkbox input[type='checkbox'] {
    top: 1px;
    position: relative;
    margin-right: 5px;
    cursor: pointer;
}

.menu-checkbox label {
    margin-bottom: 0;
    cursor: pointer;
}

input.form-control.quantity-input {
    display: inline;
    width: 38px;
    height: 14px;
    font-size: 12px;
    float: right;
    padding: 0 5px;
    margin-top: 3px;
    line-height: 14px;
}

.nav>li>a:focus,
.nav>li>a:hover {
    background-color: transparent;
}

.quantity-container {
    font-size: 12px;
    line-height: 20px;
}

@media (min-width: 768px) {
    .sidebar {
        margin-top: 0;
    }
}

/** Load fullscreen **/
.fullscreen-container {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgb(0, 0, 0);
    background: rgba(0, 0, 0, 0.5);
    z-index: 999999;
    overflow-y: auto;
}

.fullscreen-container .inner-container {
    margin: 50px auto 0 auto;
    display: table;
    font-size: 26pt;
    color: #FFF;
    text-shadow: 2px 2px #000;
}

.fullscreen-container .inner-container .bi-arrow-repeat {
    top: 8px;
    left: 10px;
    text-shadow: none;
    font-size: 30px;
}

/** Element-specific loading (SPA-friendly) **/
.element-loading-container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.5);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.element-loading-inner {
    text-align: center;
}

.element-loading-spinner {
    font-size: 32px;
    color: #337ab7;
    margin-bottom: 10px;
}

.element-loading-spinner .bi-arrow-repeat {
    display: inline-block;
}

.element-loading-message {
    font-size: 14px;
    color: #333;
    font-weight: 500;
}

.icon-spin {
    animation: rotate .8s infinite linear;

    -webkit-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    -moz-transform-origin: 50% 50%;
    -o-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
}

#VRButton {
    bottom: -123px !important;
    left: auto !important;
    right: 14px !important;
    position: absolute !important;
    width: 70px !important;
    padding: 5px !important;
    border: 1px solid !important;
    border-radius: 5px !important;
    background: white !important;
    color: #565656 !important;
    text-align: center;
    opacity: 20 !important;
    outline: none !important;
    z-index: 0 !important;
    cursor: auto !important;
    pointer-events: auto;
}

canvas.a-canvas {
    position: fixed;
}

.rs-base {
    left: 250px !important;
    top: 50px !important;
}

.icon {
    position: absolute;
    left: 18px;
    top: 9px;
    font-size: 20px;
    color: black;
}


@keyframes rotate {
    0% {
        transform: rotateZ(0);
    }

    100% {
        transform: rotateZ(360deg);
    }
}

/** Load fullscreen **/


/** Menu fullscreen **/
.fullscreen-container-menu {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgb(0, 0, 0);
    background: rgba(0, 0, 0, 0.5);
    z-index: 1010;
    overflow: auto;
}

.fullscreen-container-menu .inner-container {
    background-color: white;
    margin: 20px auto;
    width: 90%;
    border-radius: 5px;
    padding: 20px;
}

.fullscreen-container-menu .inner-container h1 {
    padding: 0;
    margin: 0;
    margin-bottom: 10px;
}

/** Menu fullscreen **/

ul.context-menu {
    position: fixed;
    border: 1px solid #8d8d8d;
    padding: 0;
    list-style-type: none;
    left: 340px;
    top: 100px;
    white-space: nowrap;
    background: #fff;
    border-radius: 3px;
}

ul.context-menu li {
    padding: 4px;
    cursor: pointer;
    position: relative;
    display: flex;
}

ul.context-menu li:first-child {
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
}

ul.context-menu li:last-child {
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
}

ul.context-menu li:hover {
    background: #1a253a;
    color: #fff;
}

ul.context-menu li:not(:hover) {
    color: #000;
}

.context-menu a.listview-icons {
    font-size: 9px;
    top: -2px;
    position: relative;
}

.context-menu a.listview-icons,
.context-menu a.listview-icons i {
    margin-right: 0;
}

ul.context-menu .context-menu-sub ul {
    position: absolute;
    left: 9px;
    top: 24px;
    z-index: 999;
}

.context-menu-buttons {
    position: absolute;
    right: 0;
    top: -1px;
    transform: translateX(100%);
    padding: 4px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.context-menu-buttons.last-hovered {
    opacity: 1;
}

.context-menu-buttons a.listview-icons {
    margin-right: 2px !important;
}

.context-menu-text {
    padding-right: 14px;
}

/** Object context menu (right-click menu for objects on floors/walls) **/

.object-context-menu {
    position: fixed;
    background: #fff;
    color: #1a253a;
    border: 1px solid #d0d4db;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    min-width: 160px;
    max-width: 240px;
    font-size: 12px;
    z-index: 999999;
    user-select: none;
    visibility: hidden;
}

.object-context-menu[data-positioned="true"] {
    visibility: visible;
}

.object-context-menu .ocm-header {
    padding: 5px 10px;
    font-weight: 600;
    font-size: 12px;
    border-bottom: 1px solid #e5e8ee;
    background: #f5f7fa;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.object-context-menu .ocm-section {
    list-style: none;
    margin: 0;
    padding: 2px 0;
    border-bottom: 1px solid #e5e8ee;
}

.object-context-menu .ocm-section:last-child {
    border-bottom: none;
}

.object-context-menu .ocm-row {
    display: flex;
    align-items: center;
    padding: 3px 10px;
    cursor: pointer;
    position: relative;
    white-space: nowrap;
    line-height: 18px;
}

.object-context-menu .ocm-row:hover,
.object-context-menu .ocm-row.hovered {
    background: #1a253a;
    color: #fff;
}

.object-context-menu .ocm-icon,
.object-context-menu .ocm-icon.fa-box,
.object-context-menu .ocm-icon.fa-camera {
    width: 14px;
    text-align: center;
    margin-right: 8px;
    font-size: 11px;
    color: inherit !important;
}

.object-context-menu .ocm-label {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
}

.object-context-menu .ocm-chevron {
    margin-left: 6px;
    font-size: 9px;
    opacity: 0.6;
}

/* Chevron direction mirrors submenu flip. Direct child scope so nested submenus don't inherit. */
editor-object-contextmenu-submenu.ocm-flip-left > ul.object-context-menu-sub > li > .ocm-chevron {
    transform: scaleX(-1);
}

.object-context-menu .ocm-ellipsis-trigger {
    display: none;
    margin-left: 6px;
    padding: 0 4px;
    font-size: 12px;
    opacity: 0.8;
    cursor: pointer;
    position: relative;
}

.object-context-menu .ocm-row-child:hover .ocm-ellipsis-trigger,
.object-context-menu .ocm-row-child.hovered .ocm-ellipsis-trigger,
.object-context-menu .ocm-ellipsis-trigger.hovered {
    display: inline-block;
}

.object-context-menu .ocm-ellipsis-trigger:hover {
    opacity: 1;
}

.object-context-menu .ocm-actions-popover {
    position: absolute;
    left: 100%;
    top: -3px;
    margin-left: 1px;
    list-style: none;
    padding: 2px 0;
    background: #fff;
    color: #1a253a;
    border: 1px solid #d0d4db;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    min-width: 140px;
    font-size: 12px;
    z-index: 1000001;
}

.object-context-menu .ocm-actions-popover[data-hidden="true"] {
    display: none;
}

.object-context-menu .ocm-actions-popover.ocm-flip-left {
    left: auto;
    right: 100%;
    margin-left: 0;
    margin-right: 1px;
}

.object-context-menu .ocm-actions-popover.ocm-flip-up {
    top: auto;
    bottom: -3px;
}

.object-context-menu .ocm-actions-popover::before,
.object-context-menu .ocm-actions-popover::after {
    content: '';
    position: absolute;
    top: 8px;
    width: 0;
    height: 0;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
}

.object-context-menu .ocm-actions-popover::before {
    left: -8px;
    border-right: 7px solid rgba(0, 0, 0, 0.25);
}

.object-context-menu .ocm-actions-popover::after {
    left: -6px;
    border-right: 6px solid #fff;
}

.object-context-menu .ocm-actions-popover.ocm-flip-left::before {
    left: auto;
    right: -8px;
    border-right: none;
    border-left: 7px solid rgba(0, 0, 0, 0.25);
}

.object-context-menu .ocm-actions-popover.ocm-flip-left::after {
    left: auto;
    right: -6px;
    border-right: none;
    border-left: 6px solid #fff;
}

.object-context-menu .ocm-actions-popover.ocm-flip-up::before,
.object-context-menu .ocm-actions-popover.ocm-flip-up::after {
    top: auto;
    bottom: 8px;
}

.object-context-menu.object-context-menu-sub {
    position: static;
    display: block;
    visibility: visible;
    padding: 2px 0;
}

editor-object-contextmenu-submenu.ocm-submenu {
    position: absolute;
    left: 100%;
    top: -3px;
    margin-left: 1px;
    z-index: 1000000;
}

editor-object-contextmenu-submenu.ocm-submenu[data-hidden="true"] {
    display: none;
}

editor-object-contextmenu-submenu.ocm-submenu.ocm-flip-left {
    left: auto;
    right: 100%;
    margin-left: 0;
    margin-right: 1px;
}

editor-object-contextmenu-submenu.ocm-submenu.ocm-flip-up {
    top: auto;
    bottom: -3px;
}

ul.object-context-menu.object-context-menu-sub {
    list-style: none;
    margin: 0;
    padding: 2px 0;
    background: #fff;
    color: #1a253a;
    border: 1px solid #b8bdc7;
    border-radius: 4px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(0, 0, 0, 0.08);
    min-width: 160px;
    max-width: 240px;
    font-size: 12px;
}

/* Arrow indicator pointing back to parent row */
ul.object-context-menu.object-context-menu-sub::before,
ul.object-context-menu.object-context-menu-sub::after {
    content: '';
    position: absolute;
    top: 8px;
    width: 0;
    height: 0;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
}

ul.object-context-menu.object-context-menu-sub::before {
    left: -8px;
    border-right: 7px solid rgba(0, 0, 0, 0.25);
}

ul.object-context-menu.object-context-menu-sub::after {
    left: -6px;
    border-right: 6px solid #fff;
}

/* Flipped left: arrow on right edge, points right. Use direct child so nested submenus don't inherit the flip. */
editor-object-contextmenu-submenu.ocm-flip-left > ul.object-context-menu-sub::before {
    left: auto;
    right: -8px;
    border-right: none;
    border-left: 7px solid rgba(0, 0, 0, 0.25);
}

editor-object-contextmenu-submenu.ocm-flip-left > ul.object-context-menu-sub::after {
    left: auto;
    right: -6px;
    border-right: none;
    border-left: 6px solid #fff;
}

/* Flipped up: arrow at bottom (parent row is below the opened-upward menu) */
editor-object-contextmenu-submenu.ocm-flip-up > ul.object-context-menu-sub::before,
editor-object-contextmenu-submenu.ocm-flip-up > ul.object-context-menu-sub::after {
    top: auto;
    bottom: 8px;
}

.context-menu i.fa.fa-chevron-right {
    position: absolute;
    right: 4px;
    top: 7px;
}

.combobox-list {
    list-style-type: none;
    padding: 0;
    position: absolute;
    background: #fff;
    
    z-index: 900;
    border-radius: 5px;
    border: 1px solid #d3d3d3;
    overflow-x: hidden;
    overflow-y: auto;
    max-height: calc(75vh - 50px);
}

/* Listan positioneras av ComboboxDirective i viewport-koordinater. position: fixed gör att den
   inte klipps av scrollande föräldrar (t.ex. dialogkroppar med overflow), vilket annars gömmer
   alternativen helt när fältet sitter i en låg container. */
.combobox-list.combobox-list--floating {
    position: fixed;
}

.combobox-list li {
    padding: 5px 12px;
    cursor: pointer;
}

.right-buffer {
    margin-right: 15px;
}

.left-buffer {
    margin-left: 5px;
}

.card h3 {
    margin: 0;
}

.card h4 {
    margin: 0;
    margin-bottom: 5px;
}

.flexbox {
    display: flex;

    flex-wrap: wrap;
}

.flexitem {
    display: flex;
}

.flex-justify-center {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}

.card-flex {
    display: flex;
    flex-direction: column;
    justify-content: start;
}

.card {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin-bottom: 0;
    border-radius: 10px;
    border: 0;
}

.white-border {
    padding: 20px;
    background: #fff;
    border-radius: 5px;
}

.pointer {
    cursor: pointer;
}

.border-radius {
    border-radius: 5px;
}

select,
textarea,
input[type="text"],
input[type="password"],
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="color"] {
    font-size: 16px;
}

.full-width {
    width: 100%;
}

renderer {
    display: inline-block;
    height: 0;
}

.small-control {
    width: 84px;
    display: inline;
}

.no-break {
    white-space: nowrap;
}

.table>tbody .labour-part:hover {
    background-color: #f9f9f9;
}

.table>tbody .labour-part {
    cursor: pointer;
}

.labour-part .table {
    margin-top: 8px;
}

.table>tbody+tbody {
    border-top: 0;
}

.labour-table tr>th {
    width: 200px;
}

.labour-table tr>th:nth-child(1),
.labour-table tr>th:nth-child(2) {
    width: auto;
}

.table-image-container {
    position: absolute;
    padding: 5px;
    background: lightgray;
    border-radius: 5px;
    margin-top: 2px;
    margin-left: 150px;
    max-width: 300px;
    background:#fff;
}

.image-container {
    border: 1px solid lightgray;
    margin-top: 30px;
    border-radius: 5px;
    padding-bottom: 10px;
    cursor: pointer;
}

.image-container:hover {
    box-shadow: inset 0 0 10px grey;
}

.public-start .image-button {
    height: 100%;
    max-width: 100%;
    padding-bottom: 13px;
}

.part-image-button {
    height: 100%;
    padding-bottom: 15px !important;
}

.part-image-button-text,
.public-start .image-button-text {
    width: 100%;
    position: absolute;
}

.part-image-button-text {
    bottom: 8px;
    left: 0px;
}

.public-start .image-button-text {
    bottom: 8px;
    margin-left: -7px;
}

.sidebar {
    white-space: nowrap;
}

.toggle-sidemenu {
    position: fixed;
    left: 250px;
    top: 50%;
    background-color: #f8f8f8;
    border: 1px solid #e7e7e7;
    cursor: pointer;
    margin-top: -13px;
    height: 29px;
    padding-top: 4px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}

.toggle-bottommenu {
    position: fixed;
    left: 50%;
    bottom: 100px;
    background: #f8f8f8;
    width: 29px;
    padding-left: 6px;
    border: 1px solid #e7e7e7;
    height: 17px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    cursor: pointer;
    z-index: 1;
}

.toggle-bottommenu-mobile {
    display: none;
    bottom: 45%;
}

.editor-background {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

#page-wrapper,
.container-fluid {
    position: relative;
}

.dragndrop-fileupload-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.6);
    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #333;
}

.dragndrop-fileupload-overlay h3 {
    margin: 0;
    font-size: 28px;
    color: #202e48;
    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.3);
    padding: 20px;
}

.dragndrop-fileupload-overlay img {
    margin-top: 20px;
    fill: #202e48;
}

.toggle-topmenu {
    position: fixed;
    left: 50%;
    z-index: 999;
    background-color: #f8f8f8;
    border: 1px solid #e7e7e7;
    cursor: pointer;
    height: 16px;
    width: 29px;
    text-align: center;
    padding-right: 4px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    display: none;
}

.navbar-static-top:hover+.toggle-topmenu,
.toggle-topmenu:hover,
.navbar-static-top[style*="height: 0px"]+.toggle-topmenu {
    display: block;
}

.toggle-topmenu i {
    top: -1px;
    left: 3px;
}

.nav li>div {
    padding: 10px 15px;
}

.project-erp-info {
    position: absolute;
    top: 115px;
    left: 0;
    width: 100%;
    box-sizing: border-box;
    padding: 0px 10px;
    height: 0;
}

.project-erp-info .erp-quotation-no {
    float: left;
    cursor: pointer;
}

.project-erp-info .erp-status {
    float: right;
}

.col-sm-12 .btn {
    margin-right: 3px;
}

.side-menu li.disabled,
.side-menu.nav>li.disabled>a {
    color: #843534;
}

.side-menu li.disabled {
    cursor: not-allowed;
}

.image-button {
    cursor: pointer;
}

.image-button,
.image-checkbox {
    border: 2px solid lightgrey;
    border-radius: 13px;
    text-align: center;
    margin-bottom: 10px;
    font-weight: bold;
    position: relative;
    padding: 7px;
}

.image-button:not(.selected):hover {
    border: 2px inset lightgrey;
}

.image-button.selected {
    background-color: #ddd;
    border: 2px inset lightblue;
}

.image-checkbox button.btn {
    margin-right: 0;
}

.image-button-info {
    position: absolute;
    background: #f9f9f9;
    width: 500px;
    white-space: normal;
    z-index: 9999;
    left: 106%;
    top: 0;
    border: 1px solid #7daad0;
    padding: 10px;
    border-radius: 4px;
    display: none;
}

.image-button:hover .image-button-info,
.image-checkbox:hover .image-button-info {
    display: inline-block;
}

.image-button-info:after,
.image-button-info:before {
    content: '';
    display: block;
    position: absolute;
    right: 100%;
    width: 0;
    height: 0;
    border-style: solid;
}

.image-button-info:after {
    top: 10px;
    border-color: transparent #f9f9f9 transparent transparent;
    border-width: 10px;
}

.image-button-info:before {
    top: 9px;
    border-color: transparent #202e48 transparent transparent;
    border-width: 11px;
}

.text-sm {
    font-size: 16px;
}

.text-normal {
    font-weight: normal;
}

.menu-checkbox button {
    margin-left: 5px;
    bottom: 1px;
    position: relative;
    padding: 0px 2px;
    line-height: 12px;
}

.powered-by-container {
    position: absolute;
    left: 0;
    bottom: 0;
    text-align: left;
    margin: 10px;
    opacity: 0.5;
    cursor: pointer;
    z-index: 1001;
}

.read-only .powered-by-container {
    left: 260px;
}

.powered-by,
.powered-by-company {
    display: block;
    color: gray;
}

.powered-by {
    font-style: italic;
    font-size: 12px;
}

.powered-by-company {
    font-size: 14px;
    line-height: 1;
}

.hide-checkbox {
    font-size: 10pt;
    color: #fff;
    cursor: pointer;
}

.public-configurator .hide-checkbox {
    font-size: 10pt;
    color: #000;
    cursor: pointer;
    display: inline;
}

.public-configurator .hide-checkbox.header-checkbox {
    color: var(--icon-color);
}

.public-configurator .hide-checkbox.imagebutton-checkbox {
    position: relative;
    top: 10px;
}

.max-min-text {
    font-weight: normal;
    font-size: 11px;
}

.nav li>div.question-checkbox {
    display: flex;
    padding-top: 0;
}

.nav-second-level {
    position: relative;
}

.question-checkbox label {
    margin-top: 3px;
}

.sort-container i.fa-angle-down {
    top: 0px;
}

.button-row-form i {
    vertical-align: text-top;
}


.public-configurator:not(.read-only) .navbar-default.sidebar {
    position: absolute !important;
    left: 20px;
    top: 50%;
    height: 0;
    background: transparent;
    border: none;
}

.public-configurator .sidebar .arrow {
    padding-top: 5px;
}

.public-configurator canvas {
    cursor: move;
}

.public-configurator .toggle-sidemenu {
    display: none;
}


.price {
    position: fixed;
    right: 15px;
    bottom: 0;
    padding: 15px;
    margin-left: 0;
    margin-bottom: 10px;
    border-radius: 10px;
    background: var(--primary-color);
    color: white;
}

.price h2 {
    margin: 0px;
    font-size: 24px;
}

.price h2 .text-sm {
    font-size: 14px;
}


.request-offer {
    position: fixed;
    top: 15px;
    right: 15px;
}

.a-enter-vr-button,
.a-enter-ar-button {
    display: none !important;
}

.btn.btn-default.selected {
    background-color: #bbb;
}

.option-image {
    max-width: 75%;
    max-height: 150px;
    margin: 15px 0px;
}

a.disabled {
    pointer-events: none;
    cursor: default;
}

input.disabled {
    cursor: not-allowed;
    background: #eee;
}

.no-margin {
    margin: 0 !important;
}

.normal-wrap {
    white-space: normal;
}

.request-offer .btn {
    width: 100%;
    text-align: left;
    margin-left: 0;
}

.text-danger-primary {
    color: #920000;
    font-weight: bold;
}

.sp-palette-container {
    padding-bottom: 0;
    margin-bottom: 0;
}

.sp-palette {
    max-height: 202px;
    overflow-y: scroll;
}

.sp-palette .sp-thumb-el {
    width: 10px;
    height: 10px;
    margin: 1px 1px;
}

.sp-replacer,
.sp-preview {
    width: 100%;
}

.sp-replacer {
    border-radius: 5px;
    padding: 6px;
}

.public-configurator .sp-preview {
    height: 45px;
}

.sp-dd {
    display: none;
}

.public-property-label {
    width: 80%;
    white-space: normal;
}

.mouse-3d-icons {
    position: fixed;
    right: 7px;
    top: 50%;
    height: 0;
    overflow: visible;
    pointer-events: none;
    z-index: 1001;
}

.mouse-3d-icons img {
    position: absolute;
    right: 0;
    top: -60px;
    height: 100px;
    cursor: move;
    pointer-events: none;
}

.first-person-mode-legend,
.first-person-mode-legend .first-person-mode-legend-item,
.measurement-mode-bar {
    align-items: center;
    display: flex;
}

.first-person-mode-legend {
    position: absolute;
    bottom: 0%;
    height: 50px;
    overflow: visible;
    width: 100%;
    background: #f5f5f5;
    font-size: 16px;
    justify-content: center;
    gap: 30px;
}

.first-person-mode-legend .first-person-mode-legend-item {
    justify-content: center;
    text-align: center;
    white-space: nowrap;
}

.first-person-mode-legend .first-person-mode-legend-item .info {
    margin-right: 10px;
    font-weight: 600;
}

/* Mätvyns panel — kompakt, centrerad överst i canvasen. position: absolute gör att den
   (precis som .camera-mode-button-toolbar) centreras mot #page-wrapper och därmed följer med
   automatiskt när AI-panelen krymper wrappern. */
.measurement-mode-bar {
    position: absolute;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1002;
    max-width: calc(100% - 30px);
    gap: 6px;
    padding: 6px 8px;
    background: #f5f5f5;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.measurement-mode-bar .measurement-mode-bar__icon {
    flex: 0 0 auto;
    margin: 0 2px;
    opacity: 0.65;
}

.measurement-mode-bar .measurement-mode-bar__tool,
.measurement-mode-bar .measurement-mode-bar__filters {
    margin-left: 4px;
}

.measurement-mode-bar .measurement-mode-bar__tool.active,
.measurement-mode-bar .measurement-mode-bar__filters .btn.active {
    background-color: #202E48;
    border-color: #202E48;
    color: #fff;
    box-shadow: none;
}

.measurement-mode-bar .measurement-mode-bar__dropdown {
    flex: 0 1 auto;
    min-width: 0;
}

.measurement-mode-bar .measurement-mode-bar__dropdown .dropdown-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    max-width: 190px;
}

.measurement-mode-bar .measurement-mode-bar__dropdown-text {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left;
}

.measurement-mode-bar .dropdown-menu {
    max-height: 320px;
    overflow-y: auto;
    margin-top: 4px;
}

.measurement-mode-bar .dropdown-menu > li > a {
    cursor: pointer;
}
.measurement-mode-bar .dropdown-menu > li > a:hover,
.measurement-mode-bar .dropdown-menu > li > a:focus,
.measurement-mode-bar .dropdown-menu > li.active > a,
.measurement-mode-bar .dropdown-menu > li.active > a:hover,
.measurement-mode-bar .dropdown-menu > li.active > a:focus {
    color: #fff;
    background-color: var(--primary-color);
}

/* themes.css satter vissa ikoner (.fa-expand, .fa-cube ...) till var(--icon-color) (vit)
   globalt med !important. I matbaren ska ikonen folja knappens egen fargsattning - annars blir
   den vit mot vit bakgrund sa fort knappen inte ar aktiv, och forsvinner helt. */
.measurement-mode-bar .dropdown-menu > li > a .fa,
.measurement-mode-bar .btn .fa {
    color: inherit !important;
}

.measurement-mode-bar .measurement-mode-bar__close {
    flex: 0 0 auto;
}


.public-configurator .side-menu li.active {
    overflow: visible;
}

.public-configurator .side-menu li.active~li {
    overflow: hidden;
}

table.price-matrix-table {
    margin-bottom: 10px;
}

table.price-matrix-table td {
    padding: 8px;
    border: 1px solid lightgrey;
    white-space: nowrap;
    position: relative;
}

.fixed-width {
    width: 90px;
    display: inline-block;
}

.price-matrix-remove-btn {
    position: absolute;
    font-size: 10px;
    top: 0px;
    right: -4px;
}

.padding-sides {
    padding-right: 15px;
    padding-left: 15px;
}

.distance-line-input {
    position: fixed;
    background-color: #fff;
    border: 0;
    border-radius: 0;
    box-sizing: content-box;
    color: #000;
    font-size: 13px;
    font-weight: 500;
    margin: 0;
    padding: 2px;
    text-align: center;
    transform-origin: center;
    width: 60px;
}

.nav-tabs .nav-link.active,
.nav-tabs .nav-link.active:focus,
.nav-tabs .nav-link.active:hover {
    background: none;
}


.header-with-tabs {
    display: flex;
    align-items: center;
    padding: 20px 20px 0 0;
}

.header-with-tabs li a {
    color: #000;
}

.header-with-tabs h1 {
    margin: 0;
    font-size: 28px;
    margin-right: 20px;
    white-space: nowrap;
}

.nav-tabs {
    margin: 0;
    flex-grow: 1;
}

.tab-content {
    padding: 20px 0 20px 0;
    height: calc(100% - 80px);
}


span.listview-icons.float-end {
    flex-grow: 0 !important;
    width: 22px;
    text-align: center;
    padding: 2px;
    margin: 0;
    text-overflow: unset !important;
}

/** Notification Badges **/
.editor-notification-area {
    position: fixed;
    top: 0;
    margin-left: 20px;
    padding-left: 250px;
    z-index: 1;
}
.public-configurator .editor-notification-area {
    top: 18px;
    display: none !important;
}
.editor-notification-area .notification-item {
    position: relative;
    float: left;
    margin-right: 20px;
}

.editor-notification-area .notification-item i {
    font-size: 18px;
}

.editor-notification-area .notification-item .badge {
    position: absolute;
    left: 25px;
    transform: translate(-50%, -50%) !important;
    font-size: 9px;
}

.badge-danger {
    background-color: #d9534f;
    color: white;
}

.badge-warning {
    background-color: #f0ad4e;
    color: white;
}

.badge-success {
    background-color: #5cb85c;
    color: white;
}

.badge-info {
    background-color: #5bc0de;
    color: white;
}

.complementary-part-row,
.complementary-part-article-wrapper,
.complementary-part-article {
    display: flex;
}

.complementary-part-row {
    flex-wrap: wrap;
    align-items: stretch;
}

.complementary-part-article-image {
    max-height: 120px;
    max-width: 120px;
    width: auto;
    height: auto;
}

.complementary-part-article {
    padding: 10px;
    border: solid 1px #ccc;
    text-align: center;
    flex: 1;
    flex-direction: column;
    justify-content: flex-end;
}

.complementary-part-article.has-quantity {
    border-color: #337ab7;
    background-color: #e6f0fa;
}

.complementary-part-article label {
    font-weight: inherit;
}

.complementary-part-article label.complementary-part-article-number,
.complementary-part-article-unit {
    font-size: 12px;
    opacity: 0.8;
}

.complementary-part-article label.complementary-part-article-number {
    margin-bottom: 0px;
}

.complementary-part-article input {
    width: 80px;
    margin: 0 auto;
}

.complementary-part-article-unit {
    margin-top: 4px;
}

.disabled-text {
    font-style: italic;
    color: grey;
}

.public-panel-flex-items {
    padding: 10px;
}

    .form-control.project-form-control.autocomplete-input {
  border-top-right-radius: 10px !important; 
  border-bottom-right-radius: 10px !important;
}
    .public-configurator .form-control.project-form-control.autocomplete-input {
  border-top-right-radius: 4px !important; 
  border-bottom-right-radius: 4px !important;
}

.public-configurator .ac .select-button button{
    border-bottom-right-radius: 4px !important;
    border-top-right-radius: 4px !important;
    font-size: 14px !important;
}
/* 1 card per row */
@media (max-width: 1050px) {
    .public-panel-flex-items {
        flex: 1 1 100%;
        max-width: 100%;
    }
}

/* 2 cards per row */
@media (min-width: 1051px) and (max-width: 1450px) { 
    .public-panel-flex-items {
        flex: 1 1 50%;
        max-width: 50%;
    }
}

/* 3 cards per row */
@media (min-width: 1451px) and (max-width: 1850px) {
    .public-panel-flex-items {
        flex: 1 1 33.33%;
        max-width: 33.33%;
    }
}

/* 4 cards per row */
@media (min-width: 1851px) and (max-width: 2500px) {
    .public-panel-flex-items {
        flex: 1 1 25%;
        max-width: 25%;
    }
}

/* 5 cards per row */
@media (min-width: 2501px) {
    .public-panel-flex-items {
        flex: 1 1 20%;
        max-width: 20%;
    }
}


@media (min-width: 2000px) {
    .col-xl-6 {
        width: 50%;
        float: left;
    }

    .current-parts-container {
        display: flex;
        flex-wrap: wrap;
        align-items: stretch;
        gap: 20px;
    }

    .public-part {
        flex: 0 0 calc(50% - 10px);
        box-sizing: border-box;
    }
}

@media (min-width: 3000px) {
}

/* Make each col act like a flex item to stretch height */
.gallery-card {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    justify-content: space-between;
    background: #fff;
    border-radius: 10px;
    overflow: visible;
    border: 0;
}

.gallery-card-title {
    flex-grow: 1;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

.card-buttons {
    display: flex;
    flex-direction: column;
    margin: auto 15px 0 15px;
}

.card-buttons a {
    margin-bottom: 5px;
}

.positioning-legend {
    width: auto;
    border-bottom: 0;
    margin-bottom: 0;
}

legend {
    margin-bottom: 0;
}

.camera-mode-button-toolbar,
.editor-side-tools {
    position: absolute;
    z-index: 1001;
}

.camera-mode-button-toolbar {
    left: 50%;
    transform: translateX(-50%);
    bottom: 20px;
    min-width: 300px;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
}

.editor-side-tools {
    left: 20px;
    bottom: 20px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.editor-side-tools .btn {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.camera-mode-button-toolbar .btn:hover {
    color: #fff;
    background-color: var(--primary-color);
}

.camera-mode-selected {
    display: none;
}

.camera-mode-active .camera-mode-selected {
    display: initial;
    font-weight: 600;
}

.camera-mode-active .camera-mode-not-selected {
    display: none;
}

.canvas-overlay-image {
    background-color: white;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1000;
}

.unit-text {
    position: absolute;
    right: 34px;
    bottom: 5px;
    color: #8d8ca1;
    pointer-events: none;
    z-index: 5;
}

/* Public Configurator Specific Styles */

.btn.btn-grey:disabled,
.btn.btn-grey[disabled],
.btn.btn-grey:disabled i {
    color: #000;
}

.btn.btn-grey:disabled,
.btn.btn-grey[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
}

.public-configurator .mouse-3d-icons {
    position: absolute;
    right: 20px;
    z-index: 1001;
}

.current-parts-container :not(.active-part) .bi-x-lg,
.current-parts-container :not(.active-part)>.fa-cubes {
    color: var(--secondary-color) !important;
}

.public-configurator .navbar-static-top.public>.navbar-top-links>li>a {
    color: #fff;
}

.public-configurator .navbar-default.navbar-static-top.public {
    background-color: var(--primary-color) !important;
    background-size: cover;
}

.public-configurator .navbar-center-logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.public-configurator .navbar-center-logo a {
    text-decoration: none;
}

.navbar-center-logo {
    display: flex;
    justify-content: center;
    /* centers horizontally */
    align-items: center;
    /* centers vertically */
    height: 100%;
    /* fill navbar height */
    gap: 5px;
    /* space between text and logo */
}

.navbar-center-logo h1 {
    margin: 0;
    color: white;
    /* remove default h1 margin */
    font-family: "Gadugi", sans-serif;
    font-size: 32px;
}

.navbar-center-logo img {
    max-height: 38px;
    /* make sure logo fits nicely */
    width: auto;
}

.nav .dropdown-toggle.show,
.nav .dropdown-toggle.show:focus,
.nav .dropdown-toggle.show:hover {
    background-color: transparent;
}

/* Stängknappen i Begär offert-formuläret (RequestOffer.Template.html): rund knapp uppe till höger i stället för ett
   ensamt "X" i vänstra hörnet. */
.request-offer-form .request-offer-close {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.06);
    color: #333;
    font-size: 15px;
    cursor: pointer;
}

.request-offer-form .request-offer-close:hover {
    background-color: rgba(0, 0, 0, 0.12);
}

/* themes.css färgar vissa ikoner med --icon-color (vit) — mot den ljusa knappen ska krysset vara mörkt. */
.request-offer-form .request-offer-close > i {
    color: #333 !important;
}

.tips-and-info-label {
    width: 100%;
    font-size: 15px;
    font-weight: normal;
    margin-top: 20px;
}

.tips-and-info-text {
    margin-bottom: 20px;
    display: inline-block;
}

.public-button-container {
    width: 100%;
    text-align: center;
    display: block;
}

.request-offer-form {
    position: absolute;
    left: 0;
    right: 0;
    top: 10px;
    bottom: 0;
    overflow-y: auto;
    overflow-x: hidden;
    background-color: #eaf1f9;
}


.partrules-dialog>.inner-container h1 {
    display: none;
}

.editor-public-complementaryparts .fullscreen-container-menu {
    position: relative;
    background: #eaf1f9;
    height: 1000%;
    overflow: hidden;
    z-index: 80;
}

.editor-public-complementaryparts .fullscreen-container-menu .inner-container {
    background-color: #eaf1f9;
    margin: 20px auto;
    width: 100%;
    border-radius: 5px;
    padding: 0;
}

.editor-public-complementaryparts .complementary-part-article {
    background: #fff;
    border-radius: 10px;
    border: 0;
}

.editor-public-complementaryparts .btn,
.editor-public-complementaryparts h1 {
    display: none;
}

/* public-configurator .navbar-default.sidebar .side-menu */

.configurator-left-container,
.configurator-right-container {
    position: absolute;
    height: 100%;
}

.configurator-left-container {
    width: 66.67%;
    left: 0;
    top: 0;
    background-size: contain;
    background-repeat: round;
}

.configurator-right-container {
    width: 33.33%;
    left: 66.67%;
    top: 0;
    background: #eaf1f9;
    border-left: 1px solid #acadaf;
    display: flex;
    flex-direction: column;
}

ul.step-menu {
    list-style: none;
    display: flex;
    position: relative;
    padding: 0;
    text-align: center;
    z-index: 1001;
    margin-top: -1px;
}

ul.step-menu li:last-child {
    border-right: 0;
}

ul.step-menu li {
    background-color: #fff;
    margin-top: 1px;
    display: inline;
    position: relative;
    float: left;
    padding: 11px;
    width: 100%;
    min-height: 50px;
    color: #000;
    border-inline-end: 1px solid #acadaf;
    border-bottom: 1px solid #acadaf
}

ul.step-menu li.shimmer {
    border-radius: 0 !important;
}

ul.step-menu li.active {
    background-color: #eaf1f9 !important;
    color: #000;
    font-weight: bold;
    border-bottom: 1px solid #000;
    border-inline: 1px solid #000;
    z-index: 1;
}

.step-text {
    width: 100%;
    /* Fluidly scale the tab label with the viewport so it fits at any window size */
    font-size: clamp(10px, 0.5em + 0.45vw, 14px);
    overflow-wrap: break-word;
    hyphens: auto;
}

.step-text-container {
    min-width: 90%;
}

span.step-number {
    display: none;
}

.shimmer {
    border-radius: 10px;
    background: linear-gradient(-45deg, #eee 40%, #fafafa 50%, #eee 60%);
    background-size: 300%;
    background-position-x: 100%;
    animation: shimmer 1s infinite linear;
    position: relative;
    display: inline-block;
}

.first-row {
    padding-right: 128px;
    position: relative;
}

@keyframes shimmer {
    to {
        background-position-x: 0%
    }
}

.progress-bar {
    width: 200px;
    height: 15px;
    background-color: #d8d8d8;
    border: none;
    box-shadow: none;
    border-radius: 5px;
    padding: 3px;
}

.progress-bar-fill {
    background: linear-gradient(-45deg, #ffffff 0%, var(--primary-color) 1%, var(--primary-color) 17%, #ffffff 18%, #ffffff 20%, var(--primary-color) 21%, var(--primary-color) 37%, #ffffff 38%, #ffffff 40%, var(--primary-color) 41%, var(--primary-color) 57%, #ffffff 58%, #ffffff 60%, var(--primary-color) 61%, var(--primary-color) 77%, #ffffff 78%, #ffffff 80%, var(--primary-color) 81%, var(--primary-color) 99%, #ffffff 100%);
    height: 100%;
    /* This is important */
    animation: progress 3s infinite linear;
    background-size: 400px;
    background-position-x: 200px;
    border-radius: 2px;
}

@keyframes progress {
    to {
        background-position-x: 286px;
    }
}

.readonly-loading-container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.loading {
    position: absolute;
    top: 50%;
    height: 0;
    overflow: visible;
    left: 50%;
    transform: translate(-50%, -50%);
}

.loading-text {
    font-size: 14px;
    font-weight: bold;
    color: var(--primary-color);
    margin-top: 10px;
    text-align: center;
}

@media (max-width: 1120px) {
    .flag-lang {
        display: none;
    }
}

@media (max-width: 768px) {
    .read-only .powered-by-container {
        left: 0;
    }

    .public-configurator .editor-notification-area {
        display: block !important;
    }

    .public-configurator .fa-bell {
        color: var(--icon-color);
    }

    .powered-by {
        font-size: 12px;
        bottom: 0;
    }

    .powered-by-company {
        font-size: 14px;
    }

    .navbar-top-links {
        gap: 0 !important;
    }

    .navbar-top-links li:last-child {
        margin-right: 0 !important;
    }

    .navbar-collapse.collapse {
        display: block;
    }

    .sidebar {
        position: fixed;
        top: 55% !important;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 99999;
        border-top: 1px solid lightgrey;
        min-height: auto !important;
    }

    .editor-background {
        bottom: 40%;
    }

    /* Editorn har en dockad bottenrad (<editor-sidenav>) i stället för halvskärmsmenyn — bakgrunden/laddningsytan
       ska gå ända ner till raden. EditorPublic (<sidemenu>) behåller 40 % ovan. */
    body:has(.sidenav-bar) .editor-background {
        bottom: calc(var(--sidenav-bar-height) + env(safe-area-inset-bottom));
    }

    .normal-wrap.col-12 {
        float: none;
    }

    .toggle-bottommenu-mobile {
        display: block;
    }

    .image-button {
        max-width: 45%;
        min-width: 45%;
        display: inline-block;
        float: left;
        margin: 2.5%;
    }

    .fullscreen-container-menu .image-button {
        max-width: 100%;
        min-width: 100%;
        margin: 0;
        margin-bottom: 10px;
    }

    .fullscreen-container .inner-container {
        max-width: 80%;
        max-height: 80%;
    }

    .public-configurator .fullscreen-container,
    .fullscreen-container-menu {
        bottom: 0% !important;
    }

    .public-configurator .rule-messages-container {
        display: none !important;
    }

    .public-start .fullscreen-container,
    .public-start .fullscreen-container-menu {
        bottom: 0;
    }

    .image-button-info {
        display: none !important;
    }

    /* Gäller 3D-vyns canvas — inte kodredigerarens (Monaco) egna canvasar: dess översiktslinjal sträcktes
       annars över hela redigeraren och tog alla tryck, så att det inte gick att skriva i Kod-fliken på mobil. */
    canvas:not(.monaco-editor canvas) {
        width: 100% !important;
        height: 55%;
        top: 0 !important;
    }

    .price {
        bottom: 40%;
    }

    #page-wrapper {
        bottom: 40%;
        overflow: auto !important;
        min-width: 100%;
        max-width: 100%;
        min-height: 0 !important;
    }

    .flex-wrap {
        display: flex;
        flex-wrap: wrap;
    }

    .image-section {
        max-width: 100%;
    }

    .image-section .option-image {
        width: 45%;
    }

    .tooltip-container {
        right: 4px;
    }

    /* Inaktiverad: BS5:s .btn:disabled nollställer annars bakgrund/ram/färg (osynlig knapp) — behåll dem som i BS3 */
    .alert-rulemessage {
        border-radius: 0;
        border-left: none;
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
    }

    .sidebar-nav {
        margin-top: 0 !important;
    }

    .sidebar a:hover::before,
    .sidebar .active>a::before {
        left: 2% !important;
        width: 96% !important;
    }

    .sidebar .nav-second-level a:hover::before,
    .sidebar .nav-second-level .active>a::before {
        left: auto !important;
        width: 94% !important;
    }

    .public-configurator .step-menu .hide-checkbox {
        font-size: 8pt;
        color: #000;
        cursor: pointer;
        position: absolute;
        left: 0;
        top: -50px;
        width: 100%;
    }
}

@media (max-width: 768px) {
    .public-configurator .navbar-center-logo {
        top: 0;
        left: 50px;
        transform: none;
    }

    .public-configurator .navbar-center-logo a h1 {
        font-size: 3vh;
    }

    .partrules-dialog>.inner-container {
        width: 100%;
    }

    .camera-mode-button-toolbar {
        bottom: 20px;
    }

    .request-offer-form {
        position: fixed;
        top: 50px;
        bottom: 0;
        left: 0;
    }

    .step-text {
        font-size: small;
    }

    .public-button-container {
        padding-right: 0;
        bottom: 10px;
        position: fixed;
    }

    .public-configurator:not(.read-only) .navbar-default.sidebar {
        display: none !important;
        /**** TODO: TEMP FIX FOR DEMO *****/
    }

    .powered-by-container {
        position: fixed;
        text-align: left;
        margin: 10px;
        opacity: 0.5;
        cursor: pointer;
        z-index: 1001;
    }

    .public-start .powered-by-container {
        bottom: 0;
    }
}

@media (max-width: 800px) {
    .step-text {
        font-size: small;
    }
}

/* Public Configurator Specific Styles */

/** nx-bootstrap modal overrides **/
.modal-backdrop.fade.show {
    opacity: 0.3;
}

.modal.fade.show {
    opacity: 1;
}

.modal.fade .modal-dialog {
    transform: none;
}

.modal-title {
    float: left;
}

user-list td.inactive::after{
     content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #a94442; /* grå, "inactive" */
    margin-left: 10px;
}

/*** NAV PILLS ***/
ul.nav.nav-pills {
    display: inline-flex;
    /* BS5:s .nav radbryter flikarna; här ska de stå på en rad (texten bryts i stället) som i BS3 */
    flex-wrap: nowrap;
    padding: 5px;
    background: #eaeef0;
    border-radius: 12px;
}

.nav.nav-pills>li>a,
.nav.nav-pills>li>a:focus,
.nav.nav-pills>li>a:hover {
    padding: 5px 10px;
    border-radius: 8px;
}

.nav.nav-pills>li+li {
    margin-left: 10px;
}

.nav.nav-pills>li.active>a,
.nav.nav-pills>li.active>a:focus,
.nav.nav-pills>li.active>a:hover,
.nav.nav-pills>li>a.active,
.nav.nav-pills>li>a.active:focus,
.nav.nav-pills>li>a.active:hover {
    color: var(--text-color-secondary);
    background-color: var(--primary-color) !important;
}


.alert-property-link {
    float: right;
    cursor: pointer;
}

.inactive-user-row {
    /* Light background color to "dim" the row */
    background-color: #FAFAFA; /* A very light grey */
    
    /* Optional: A very light red border/shadow for extra cue */
    box-shadow: inset 5px 0 0 0 #F0C0C0;
    
    /* Dim the text color slightly to show it's less important/active */
    color: #888888; 
    
    /* Ensure the row doesn't look clickable/active */
    opacity: 0.85; 
}

/* Optional: To further ensure text isn't visually distracting */
.inactive-user-row td {
    /* Use a light grey for text if it's not inherited from tr */
    color: inherit; 
}

/* Optional: If you want to keep the email/link colors consistent, you might need to override the inherited grey */
.inactive-user-row a {
    color: #337ab7; /* Use your application's standard link color */
}


/**** card view ****/
.inactive-user-card .gallery-card {
    opacity: 0.75 !important; 
    cursor: default; 
}

/* 2. Grey out the user name (cardTitle) and prevent link hover state */
.inactive-user-card .gallery-card-title h4,
.inactive-user-card .gallery-card-title a {
    color: #888888 !important; /* Grey out the title text */
    text-decoration: none !important; /* Remove underline from the title link */
}

/* 3. Apply a grayscale filter to the user image/placeholder */
.inactive-user-card .card-header img {
    filter: grayscale(100%); 
}

.inactive-user-card .alert-danger {
    font-weight: bold;
    text-transform: uppercase;
    color: #A00000; /* Darker red text */
    background-color: #FFEEEE; /* Lightest red background */
    padding: 3px 8px;
    border-radius: 4px;
    margin-top: 5px; 
    display: inline-block;
    opacity: 1; 
}
@media (max-width: 1000px) {
    .price {
        padding: 5px 10px;
    }
    .price h2 {
        font-size: 16px;
    }
    .price .text-sm {
        font-size: 10px;
    }

    .camera-mode-button-toolbar {
        left: 10px;
        transform: none;
        justify-content: flex-start;
    }

    .editor-side-tools {
        bottom: 80px;
    }
}

/* Multiplayer Styles */
.multiplayer-users-panel {
    position: fixed;
    top: 80px;
    right: 20px;
    z-index: 1000;
    max-width: 280px;
}

.multiplayer-users-panel .card {
    margin-bottom: 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.multiplayer-users-panel .card-header {
    background-color: #337ab7;
    color: white;
    font-weight: 600;
    padding: 10px 15px;
}

.multiplayer-users-panel .card-body {
    padding: 10px;
    max-height: 300px;
    overflow-y: auto;
}

.multiplayer-user-item,
.user-info {
    align-items: center;
    display: flex;
}

.multiplayer-user-item {
    padding: 8px;
    margin-bottom: 5px;
    background-color: #f5f5f5;
    border-radius: 4px;
}

.user-color-indicator {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin-right: 8px;
    border: 2px solid white;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
}

.user-info {
    flex: 1;
    justify-content: space-between;
}

.user-mode {
    color: #666;
    font-size: 14px;
}

.btn .badge,
.btn-success .badge {
    background-color: #fff;
    color: #5cb85c;
}

.btn .badge {
    position: relative;
    top: -1px;
    margin-left: 5px;
    font-weight: bold;
}

.badge.badge-default{
    background-color: var(--primary-color);
    color: white;
}

.changelog-ai-watermark {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 12px;
    color: #bbb;
    font-style: italic;
    pointer-events: none;
    user-select: none;
}
/* Analytics Dashboard Global Overrides */
.analytics-container .card-header {
    height: auto !important;
    width: auto;
    padding: 10px 15px;
    text-align: left;
}


/* Analytics Flexbox Equal Height */
.analytics-summary-row {
    display: flex;
    flex-wrap: wrap;
}
.analytics-summary-row > [class*='col-'] {
    display: flex;
    flex-direction: column;
}
.analytics-summary-row .card {
    flex: 1;
    width: 100%;
    display: flex;
    flex-direction: column;
}
.analytics-summary-row .card-header {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}


/* Analytics Component Specifics */
.analytics-container .card-title {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    height: auto !important;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-start !important;
}
.analytics-container .card-title i {
    margin-right: 5px;
}
.analytics-container form label {
    display: block;
    margin-bottom: 5px;
    text-align: left;
}


.analytics-container .form-row {
    padding-top: 0 !important;
}

/* ImageSelect — EditableProperty rendering (standard Editor) */
.image-select-tiles,
.image-select-tile-image {
    width: 100%;
    display: flex;
}

.image-select-tiles {
    flex-wrap: wrap;
    gap: 8px;
}
.image-select-tile {
    flex: 0 0 calc(33.333% - 6px);
    box-sizing: border-box;
    border: 2px solid #ddd;
    border-radius: 4px;
    padding: 4px;
    cursor: pointer;
    background: #fff;
    transition: border-color 120ms ease, box-shadow 120ms ease;
    text-align: center;
    user-select: none;
}
.image-select-tile:hover {
    border-color: #5cb85c;
}
.image-select-tile.active {
    border-color: #449d44;
    box-shadow: 0 0 0 2px rgba(68, 157, 68, 0.25);
}
.image-select-tile-image {
    aspect-ratio: 1 / 1;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 3px;
    background-color: #f5f5f5;
    align-items: center;
    justify-content: center;
}
.image-select-tile-placeholder {
    color: #bbb;
    font-size: 28px;
}
.image-select-tile-label {
    margin-top: 4px;
    font-size: 12px;
    line-height: 1.2;
    color: #333;
    word-break: break-word;
}
.image-select-tiles.disabled .image-select-tile {
    cursor: not-allowed;
    opacity: 0.6;
}
.image-select-tiles.forced-invalid {
    outline: 1px solid #d9534f;
    outline-offset: 2px;
}

/* Custom dropdown med thumbnails (ImageSelect, mode = dropdown) */
.image-select-cd {
    position: relative;
    width: 100%;
}
.image-select-cd-button {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    text-align: left;
    cursor: pointer;
    background: #fff;
    color: #555;
    font: inherit;
    border: 1px solid #ccc;
    border-radius: 4px;
}
/* Match native select i Editor */
.image-select-cd-button.project-form-control {
    height: 30px;
    padding: 2px 8px;
}
/* Match native select i EditorPublic */
.public-configurator .image-select-cd-button.project-form-control {
    height: 45px;
    padding: 4px 10px;
    font-size: 17px;
}
.image-select-cd.open .image-select-cd-button,
.image-select-cd-button:focus {
    border-color: #66afe9;
    outline: none;
    box-shadow: 0 0 5px rgba(102, 175, 233, 0.4);
}
.image-select-cd.disabled .image-select-cd-button {
    cursor: not-allowed;
    opacity: 0.6;
    pointer-events: none;
}
.image-select-cd.forced-invalid .image-select-cd-button {
    border-color: #d9534f;
}
.image-select-cd-thumb {
    width: 24px;
    height: 24px;
    object-fit: contain;
    border-radius: 3px;
    border: 1px solid #ddd;
    flex: 0 0 auto;
    background-color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
/* Lite större thumb i menyn — och i EditorPublics större trigger */
.public-configurator .image-select-cd-button .image-select-cd-thumb {
    width: 32px;
    height: 32px;
}
.image-select-cd-menu .image-select-cd-thumb {
    width: 36px;
    height: 36px;
}
.image-select-cd-thumb-placeholder {
    color: #bbb;
    font-size: 14px;
}
.image-select-cd-label {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.image-select-cd-label-placeholder {
    color: #999;
}
.image-select-cd-caret {
    flex: 0 0 auto;
    font-size: 11px;
    color: #777;
    transition: transform 120ms ease;
}
.image-select-cd.open .image-select-cd-caret {
    transform: rotate(180deg);
}
.image-select-cd-menu {
    position: absolute;
    top: calc(100% + 2px);
    left: 0;
    right: 0;
    z-index: 1050;
    margin: 0;
    padding: 4px 0;
    list-style: none;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
    max-height: 320px;
    overflow-y: auto;
}
.image-select-cd-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    cursor: pointer;
}
.image-select-cd-item:hover {
    background: #f5f5f5;
}
.image-select-cd-item.active {
    background: #e7f3ff;
    font-weight: 500;
}

/* Ja/Nej-toggle — ersätter kryssrutor. Används av EditableProperty (typ Checkbox) och Materialsidan.
   Markup: .yes-no-toggle > button.yes-no-option.yes-no-option-yes / .yes-no-option-no (+ .active) */
.yes-no-toggle-container {
    display: flex;
    align-items: center;
    gap: 6px;
}

.yes-no-toggle {
    display: inline-flex;
    padding: 3px;
    background-color: #f0f2f5;
    border: 1px solid #dfe3e8;
    border-radius: 999px;
    line-height: 1;
}

.yes-no-toggle .yes-no-option {
    min-width: 56px;
    padding: 6px 16px;
    border: none;
    border-radius: 999px;
    background-color: transparent;
    color: #555;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 120ms ease, color 120ms ease;
}

.yes-no-toggle .yes-no-option:hover:not(.active):not([disabled]) {
    background-color: rgba(0, 0, 0, 0.06);
    color: #222;
}

.yes-no-toggle .yes-no-option:focus {
    outline: none;
}

.yes-no-toggle .yes-no-option.active {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

/* Ja följer aktuellt tema, Nej är en neutral vit pill – annars läser ett valt "Nej"
   som något positivt. Fallback-färgerna matchar :root i Style/themes.css. */
.yes-no-toggle .yes-no-option-yes.active {
    background-color: var(--primary-color, #202E48);
    color: var(--icon-color, #fff);
}

.yes-no-toggle .yes-no-option-no.active {
    background-color: #fff;
    color: #333;
}

.yes-no-toggle.forced-invalid {
    border-left: 4px solid #a94442;
}

.yes-no-toggle.is-disabled {
    opacity: 0.6;
}

.yes-no-toggle .yes-no-option[disabled] {
    cursor: not-allowed;
}


/* ==========================================================================================================
   Tidigare Style/stylejj.css — ligger efter resten av site.css, i samma ordning som när filerna laddades var för sig
   ========================================================================================================== */

.flag-icon {
    margin-right: 10px;
}

.footerbutton-class a .fa-solid {
    margin-right: 10px;
}

.fa-caret-down {
    margin-left: 10px;
}

#page-wrapper,
body,
.navbar-static-top {
    background-color: #F4F7F9 !important;
}

.navbar-static-top {
    z-index: 1 !important;
}


.input-group .form-control {
    z-index: 0 !important;
}


/*List view*/

.listviewclass {
    position: absolute;
    right: 0;
    top: 30px;
}

/* Ligger direkt i en .row: BS5:s .row > * ger den annars width: 100% och gutter-padding, så vy-knapparna hamnade
   längst till vänster över sökfälten i stället för uppe till höger. */
.row > .listviewclass {
    width: auto;
    padding: 0;
    margin-top: 0;
}

/* Vy-knapparnas ruta (tidigare col-xs-6 col-md-3 col-lg-2, vilket inte betyder något i en absolut positionerad ruta) */
.listviewclass > div {
    padding: 0 15px;
}

.btn-group {
    display: flex;
}

/*projectcards*/


.panel-details,
.card-title {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
    height: auto;
    font-size: 14px !important;
    word-wrap: break-word;
    flex: 0 1 auto;
}

.card-title {
    padding-top: 15px;
}

/*footer with the buttons*/
.panel-footer-content {
    justify-content: flex-start;
    width: 100%;
    gap: 10px;
    margin-bottom: 5px;
}


.panel-footer-content>* {
    margin: 0 15px 0 15px;
    flex-grow: 10;
}

.panel-details .col-8 {
    padding-left: 30px !important;
}

.footerbutton-class {
    border-radius: 5px;
    border: none;
    color: white;
    font-size: 12px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 3px;
    flex-grow: 1;
    margin: 0;
}

/* 1 card per row */
@media (max-width: 600px) {
    .panel-flex-items {
        flex: 1 1 100%;
        max-width: 100%;
    }
}
/* 2 card per row */
@media (min-width: 600px) {
    .panel-flex-items {
        flex: 1 1 50%;
        max-width: 50%;
    }
}

/* 3 cards per row */
@media (min-width: 950px) {
    .panel-flex-items {
        flex: 1 1 calc(33.33% - 0px);
        max-width: calc(33.33% - 0px);
    }
}

/* 4 cards per row */
@media (min-width: 1300px) {
    .panel-flex-items {
        flex: 1 1 calc(25% - 0px);
        max-width: calc(25% - 0px);
    }
}


/* 5 cards per row */
@media (min-width: 1550px) {
    .panel-flex-items {
        flex: 1 1 calc(20% - 0px);
        max-width: calc(20% - 0px);
    }
}

/* 6 cards per row */
@media (min-width: 1900px) {
    .panel-flex-items {
        flex: 1 1 calc(16.66% - 0px);
        max-width: calc(16.66% - 0px);
    }
}

/* 7 cards per row */
@media (min-width: 2200px) {
    .panel-flex-items {
        flex: 1 1 calc(14.28% - 0px);
        max-width: calc(14.28% - 0px);
    }
}

/* 8 cards per row */
@media (min-width: 2500px) {
    .panel-flex-items {
        flex: 1 1 calc(12.5% - 0px);
        max-width: calc(12.5% - 0px);
    }
}

/*Sidemenu*/

.menu-item>ul.nav-second-level {
    margin-left: 20px;
    margin-top: 5px;
    margin-bottom: 5px;
    position: relative;
}

.line-style::before,
.line-style>li::before {
    position: absolute;
    content: "";
    background-color: white;
}

.line-style::before {
    top: -5px;
    left: 19px;
    width: 1.5px;
    height: calc(100% - 15px);
}

.line-style>li::before {
    top: 20px;
    left: 19px;
    width: 12px;
    height: 1.5px;
}


.sidebar .active>a>.fa.arrow:before,
.sidebar .fa.arrow:before {
    display: inline-block;
    vertical-align: middle;
}

.sidebar .active>a>.fa.arrow:before {
    content: "\f107";
    transform: rotate(180deg);
}

.sidebar .fa.arrow:before {
    content: "\f104";
    transform: rotate(270deg);
}

.sidebar-nav {
    margin-top: 5px;
}

.public-configurator:not(.read-only) .sidemenulogocontainer {
    display: none !important;
}

.public-configurator:not(.read-only) .navbar-default.sidebar li:not(.active) a {
    color: var(--primary-color) !important;
}

.public-configurator:not(.read-only) .navbar-default.sidebar li:not(.active) a:hover {
    color: var(--text-color-secondary) !important;
}

.mobile-action-button:hover {
    color: initial;
}

.public-configurator:not(.read-only) .navbar-default.sidebar li {
    border: none;
}

.sidemenulogocontainer {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
}

.read-only .sidemenulogocontainer {
    display: none;
}

.read-only .sidemenu-top {
    top: 50px;
}

.sidemenulogo {
    margin-top: 5px;
    margin-bottom: 10px;
    max-width: 220px;
    max-height: 90px;
}

.sidemenubrand {
    color: white;
    text-decoration: none !important;
}

.navbar-default.sidebar {
    position: fixed;
    top: 0;
    height: 100% !important;
    overflow-x: hidden;
}

.public-configurator:not(.read-only) .sidemenu-top {
    z-index: 1001 !important;
    width: auto !important;
    top: calc(50% - 150px) !important;
}

.public-configurator:not(.read-only) .sidebar {
    z-index: 1001;
}

.sidemenu-top {
    position: fixed;
    bottom: 66px;
    top: 155px;
    left: 0;
    width: 250px;
    overflow-y: auto;
}

.sidemenu-bottom {
    position: fixed;
    bottom: 0;
    background-color: #202E48 !important;
    width: 250px;
    z-index: 1000;
    padding-bottom: 5px;
}


@media (max-width: 768px) {
    #page-wrapper {
        position: fixed;
        max-height: 100%;
    }

    .read-only .sidemenu-top,
    .sidemenu-top {
        top: 0;
    }

    .nav-second-level::before,
    .nav-second-level>li::before {
        content: none;
    }

    .sidemenulogocontainer {
        display: none;
    }

    .sidemenu-top {
        position: relative;
        width: 100%;
        margin-bottom: 0vh;
    }

    .navbar-default.sidebar {
        height: auto !important;
        position: fixed;
        overflow-y: auto;
    }

    .sidemenu-bottom {
        position: relative;
        text-align: left;
        width: auto;
    }

    body .sidebar {
        top: 60% !important;
    }

    .sidebar li.active-part a::before,
    sidemenu .sidebar .nav-second-level a:hover::before {
        right: 3% !important;
        width: 91% !important;
        height: 88% !important;
    }

    .editor-notification-area {
        padding-left:0;
    }
}

 body:has(.editor-notification-area:hover) .toggle-topmenu{
    display:block;
    }
.sidebar {
    background-color: #202E48 !important;
    color: #202E48 !important;
    border-right: none;
    top: 0% !important;
}

.sidebar a,
.nav>li>a {
    padding: 10px 20px;
}

.sidebar a,
.sidebar .active>a {
    color: white;
    text-decoration: none;
}

.sidebar a {
    display: block;
    margin: 0 auto;
    margin-top: 5px;
    text-overflow: ellipsis;
    overflow: hidden;
}

.sidebar a:hover,
.sidebar .active>a {
    position: relative;
}

sidemenu:not(.sidebar-editor) .sidebar a:hover::before,
.sidebar a:hover::before,
.sidebar .active>a::before,
.sidebar li.active-part a::before,
sidemenu .sidebar .nav-second-level a:hover::before,
.sidebar .nav.nav-second-level .active>a::before,
sidemenu:not(.sidebar-editor) .sidebar .nav.nav-second-level a:hover:hover::before {
    position: absolute;
    content: "";
    border-radius: 10px;
    transform: translateY(-50%);
    z-index: -1;
}

sidemenu:not(.sidebar-editor) .sidebar a:hover::before,
.sidebar a:hover::before,
.sidebar .active>a::before,
.sidebar li.active-part a::before {
    top: 50%;
    left: 5%;
    width: 90%;
    height: 100%;
    background-color: #1A253A;
}

.sidebar li.active-part a::before,
sidemenu .sidebar .nav-second-level a:hover::before {
    top: 50%;
    left: auto;
    right: 5%;
    width: 83%;
    height: 78%;
}

.sidebar .nav.nav-second-level .active>a::before,
sidemenu:not(.sidebar-editor) .sidebar .nav.nav-second-level a:hover:hover::before {
    top: 50%;
    left: 14%;
    width: 80%;
    height: 60%;
    background-color: #1A253A;
}


.sidebar ul li {
    border-bottom: none;
}

.sidebar a svg,
.sidebar a img {
    margin-right: 10px;
    font-size: 16px;
}

.sidebar hr {
    border: none;
    border-top: 0.5px solid #ffffff7c;
    margin: 10px auto;
    width: 100%;
}

.sidebar .sidemenu-bottom hr {
    margin-top: 0;
}

.sidebar li.active-part,
.sidebar li.active-part a {
    background-color: transparent !important;
}

.nav>li>a:hover {
    text-decoration: none;
    background-color: transparent !important;
}

/*sorting*/

.sort-container,
.sort-container:focus {
    outline: none;
    cursor: pointer;
    font-weight: normal;
}

button.panel-footer-edit {
    width: 100%;
    border: 1px solid;
    background-color: transparent;
}

.col-4 {
    padding-right: 0px !important;
}

.footerbutton-class .btn-primary,
.deletebutton .btn-primary {
    border: none;
    border-radius: 13px;
    font-weight: 700;
}

.footerbutton-class .btn-primary {
    width: 100%;
    margin-right: 10px;
}

.deletebutton .btn-primary {
    padding: 5px 30px;
}

.btn:focus {
    outline: none !important;
}


.dropdown-submenu {
    position: relative;
}

.dropdown-submenu>.dropdown-menu {
    top: 0;
    right: 100%;
    margin-top: -1px;
    display: none;
    position: absolute;
}

.dropdown-submenu:hover>.dropdown-menu {
    display: block;
}


/* ==========================================================================================================
   Tidigare Style/lia.css
   ========================================================================================================== */

.relative {
  position: relative;
}

.h-full {
  height: 100%;
}

.input-hr {
  border: none;
  height: 1.5px;
  background-color: #ccc;
  margin: 20px 0;
}

.input-hr.smaller { 
  margin: 10px;
}

.card-header {
    position: relative;    
    text-align:center;
    height: 140px;
    width: 100%;
    padding: 0;
    border-radius: 10px 10px 0 0 ;
}

.panel-details {
  color: black;
  display: flex;
  margin-bottom: 10px;
}

.card-title a, .panel-details a {
    color: black;
    text-decoration: none;
}

.panel-footer-content {
  display: flex;
  align-items: center;
  border: none;
}

.panel-footer-edit,
.panel-footer-icon-btn {
  cursor: pointer;
}

.panel-footer-edit {
  color: black;
  padding: 6px;
  border: 1px solid black;
  border-radius: 13px;
  font-size: 14px;
  font-weight: bold;
  position: relative;
  display: block;
  text-align: center;
}

.panel-footer-edit:hover {
  color: #3f3e3c;
  text-decoration: none;
}

.panel-footer-icon-btn {
  width: 50px;
  padding: 16px;
  border: 1px solid black;
  border-radius: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: bold;
  position: relative;
}

.search-article-btn {
  background-color: #202e48;
  border-radius: 10px;
  color: white;
  width: 100px;
  padding: 4px;
  border: none;
}

.search-article-btn:hover {
  background-color: #2a3c5e;
}

.reseller-img {
  max-width: 150px;
  max-height: 400px;
  border-radius: 10px;
}

.panel-footer-icon,
.panel-copy-icon {
  position: absolute;
  right: 5px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--icon-color);
  cursor: pointer;
}

.listview-icons,
.listview-icons-big {
  padding: 4px 6px;
  cursor: pointer;
  color: white;
  border-radius: 7px;
  font-size: 12px;
  margin-right: 10px;
}

.listview-icons-big,
.listview-icons-big:hover {
  padding: 6px;
  font-size: 14px;
}

/* Ikonknapparna som lika stora rutor med ikonen i mitten. Med bara padding berodde storleken på glyfen:
   Bootstrap Icons (inline, glyfen nedflyttad med vertical-align) och Font Awesome (inline-block) blev olika höga.
   will-change: med webbläsarzoom/skalning som inte är 100 % hamnar raderna på olika bråkdelar av en skärmpixel.
   Rutan ritas då på bråkdelen men glyfens baslinje avrundas till hel pixel, så ikonen hoppade upp till 1px
   upp/ned i rutan från rad till rad. I ett eget lager ritas ruta och glyf tillsammans och flyttas lika. */
i.listview-icons,
i.listview-icons-big,
i.listview-icons-big:hover {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  line-height: 1;
  vertical-align: middle;
  will-change: transform;
}

i.listview-icons-big {
  width: 28px;
  height: 28px;
}

/* position: static — .bi-trash:before har en gammal halvpixelsknuff (right/top .5px) från glyphicon-tiden. */
i.listview-icons::before,
i.listview-icons-big::before {
  position: static;
  line-height: 1;
  vertical-align: 0;
}

 .bi-check-lg, .bi-trash {
  font-size: 12px;
} 


.revision-active .listview-icons,.revision-active.listview-icons {
    color: #3c7d26 !important;
    background-color: rgba(255, 255, 255, 1) !important;
    cursor: default;
}

.show-project-image {
  background-color: white;
  z-index: 1;
  max-width: 150px;
}

.list-view-input {
  background-color: white;
  border: #f6f6f6;
  border-radius: 10px;
  padding: 4px;
  width: 100%;
}

   .project-form-control.list-view-input.autocomplete-input {
    border: 1px solid #ccc !important;
}

.table > tbody > tr > th,
.table > tbody > tr > td {
  vertical-align: bottom;
  padding: 16px;
  white-space: nowrap;
  border: none;
  font-weight: normal;
}

.table.white-space-normal > tbody > tr > th,
.table.white-space-normal > tbody > tr > td {
  white-space: normal;
}

.tr-divider {
  position: relative;
}

.tr-divider::after {
  content: "";
  position: absolute;
  margin: auto;
  right: 0;
  bottom: 0px;
  left: 0;
  width: 98%;
  height: 1px;
  background-color: #e6e6e6;
}

.project-form-control {
  height: 30px;
  background-color: white;
  border-bottom-left-radius: 10px;
  border-top-left-radius: 10px;
  border: none;
  box-shadow: none;
}

.public-configurator .project-form-control,
.public-configurator .input-group .btn-default {
  height: 45px;
}

.public-configurator .project-form-control {
  padding: 8px;
  border-radius: 4px;
  font-size: 17px !important;
}
.panel-heading-btn:first-child {
  top: 12px;
}
.panel-heading-btn:nth-child(2) {
  top: 40px;
}

.project-close-btn {
  color: black;
  font-size: 18px;
}

.project-send-btn {
  color: #202e48;
}

.project-send-btn > i {
  margin-right: 0;
}

.panel-heading-send-btn i {
  font-size: 18px;
  top: 9px;
}

.col-6.col-md-3.col-lg-2.bottom-buffer .btn-default {
  height: 30px;
  border: none;
  background: none;
  color: #202e48;
}

.col-6.col-md-3.col-lg-2.bottom-buffer .btn-default:hover,
.col-6.col-md-3.col-lg-2.bottom-buffer .btn-group .btn-default.active,
.input-group .btn-default {
  color: white;
  background-color: #202e48;
}

.col-6.col-md-3.col-lg-2.bottom-buffer .btn-group .btn-default.active {
  border-color: #3f3e3c;
  outline: none;
}

.btn-group .btn {
  transition: background-color 0.3s, color 0.3s;
}

.input-group .btn-default {
  height: 30px;
  width: 30px;
  border-radius: 10px;
  border: none;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s, border-color 0.3s;
}

.input-group .btn-default:hover {
  background-color: #2a3c5e;
  border-color: white;
  cursor: pointer;
}

.table-striped > tbody > tr:nth-of-type(odd) {
  background: none;
}

.panel-flex-items {
  padding: 10px;
}

.card-header .col-4 {
  padding-right: 0;
}

.card-title h4 {
    margin: 0;
    margin-bottom: 10px;
    color: #000000;
    font-size: 19px;
    font-weight: bold;
}

.card-details {
  margin: 0 15px;
}

.card-details-subtitle {
  font-size: 12px;
  font-weight: bold;
  color: rgb(88, 88, 88);
  margin-bottom: -5px;
}

.card-details-data {
  font-size: 15px;
  margin: 0;
  margin-bottom: 5px;
  overflow-wrap: break-word;  /* Rekommenderat (nyare standard) */
  word-wrap: break-word;      /* För äldre webbläsare */
  word-break: break-word;     /* Extra fallback */
}

.card-details-data a {
  color: black;
}


.panel-details .row .col-8 {
  color: #333;
}

.no-background {
  border: none;
  background: none;
}

.navbar-static-top {
  background: #f5f5f5;
}

.navbar-default {
  border: none;
}

.navbar-top-links > li > a {
  color: black;
  text-shadow: none;
}

.navbar-top-links,
.navbar-top-links li {
  align-items: center;
  display: flex;
}

.navbar-top-links {
  gap: 15px;
}

.table {
  background-color: #f0f0f0;
  border-radius: 10px;
}
.table .footer-row{
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}
.table .footer-row th{
  font-weight: bold;
}
.table-list {
  background-color: white;
  border-radius: 10px;
}

.throughput-list {
  border-radius: 10px;
  margin-right: 15px;
  margin-left: 15px;
}

.throughput-btn-add {
  color: white;
  border: none;
  padding: 3px;
  width: 25px;
  border-radius: 50%;
  margin-top: 5px;
  position: relative;
  top: 22px;
}

button.option-btn-add {
  top: inherit;
  margin-top: 0;
  margin-bottom: 5px;
  margin-left: 15px;
}

 table.table-list tbody tr:first-child {
  background-color: #f0f0f0;
} 

.table-header-row th.rounded-top-left {
  border-top-left-radius: 10px;
}

.table-header-row th.rounded-top-right {
  border-top-right-radius: 10px;
}

.form-row {
  padding-top: 30px;
}

.article-checkbox {
  width: 100%;
  cursor: pointer;
  padding-right: 10px;
  font-size: 15px;
  margin: 3px;
}

.white-btn,
.black-btn {
  color: black;
  padding: 7px;
  width: 100%;
  border: 1px solid black;
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: bold;
  position: relative;
  cursor: pointer;
}

.black-btn {
  color: white;
}

.profile-image {
  position: relative;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  margin-right: 10px;
  object-fit: cover;
  transform: translate3d(0px, 0px, 0.1px);
  overflow-clip-margin: unset;
}

/* Image för customer */

.img-container-customer img {
  object-fit: contain;
  transform: translate3d(0px, 0px, 0.1px);
  overflow-clip-margin: unset;
  top: 0;
  left: 0;
  aspect-ratio: 1 / 1;
  max-height: 80%;
  max-width: 80%;
  border-radius: 0;
}

.img-container-customer img.portrait-image {
  height: 110px;
  width: 110px;
  object-fit: cover;
  border-radius: 50%;
}

.img-container-customer {
  width: 100%;
  height: 100%;
  overflow: hidden;
  margin: auto;
}

.img-container-customer svg {
  position: absolute;
  top: 0;
  left: 0px;
  height: 100%;
  padding: 30px;
  object-fit: inherit;
}

.reseller-placeholder-img {
  opacity: 0.7;
  width: 90%;
}

.img-fluid {
    width: 100%;
    background-color: #e0e0e0;
}

.add-translation {
  background-color: #202e48;
  color: white;
  border-radius: 10px;
}

.add-translation:hover {
  background-color: #2a3c5e;
  color: white;
  border-radius: 10px;
}

.translation-btns {
  color: black;
  border-radius: 10px;
}

.translation-btns:hover {
  color: black;
  border-radius: 10px;
}

.reseller-name {
  color: #3e3d3b;
  padding-left: 10px;
  margin-top: 10px;
}

.info-row {
  margin-left: 15%;
  position: relative;
  bottom: 7px;
}

.info-row label {
  font-weight: 500;
}

.info-input {
  border-radius: 10px;
  height: 30px;
  background-color: #fff;
}

.info-title {
  font-size: 16px;
  font-weight: 700;
}

.info-text {
  margin-top: 40px;
  font-size: 13px;
  font-weight: bold;
  color: #333;
  max-width: 300px;
  text-align: left;
}

.info-secondary {
  display: flex;
  justify-content: space-between;
  gap: 20px;
}

.info-secondary > div {
  flex: 1;
}

/* Buttons */
.button-row {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.button-row .btn-primary {
  border: none;
}

.btn:disabled,
.btn[disabled] {
  color: white;
  cursor: not-allowed;
}

a.disabled-link i {
  opacity: 0.5;
  cursor: not-allowed;
}

button.no-background:disabled i {
  cursor: not-allowed;
  opacity: 0.5;
}

.btn:disabled i {
  color: #a1a1a1;
}

.btn:disabled:focus {
  box-shadow: none;
}

.button-row .btn {
  margin-left: 10px;
  border-radius: 10px;
  padding: 2px 22px;
  border: none;
}

.button-row .btn-danger {
  color: white;
}

.button-row .btn-default {
  color: black;
  background: none;
}

.button-row .btn-default:hover {
  transform: scale(1.05);
}

.button-row .btn-success {
  color: white;
}

.button-row .btn-warning {
  color: white;
  border: #ebb208;
}

.button-row.button-row-form {
  display: inline-block;
  min-width: 100%;
}

.button-row.button-row-form .btn {
  margin-left: 0;
  padding: 6px 22px;
  margin-bottom: 2px;
}

.file-upload-container,
.custom-file-upload {
  align-items: center;
  display: flex;
  justify-content: center;
  flex-direction: column;
}

.file-upload-container {
  border: 2px dashed #ccc;
  background-color: #fafafa;
  border-radius: 8px;
  padding: 20px;
  text-align: center;
  position: relative;
  transition: border-color 0.3s ease, background-color 0.3s ease;
}

.file-upload-container:hover {
  border-color: #888;
  background-color: #f9f9f9;
}

.custom-file-upload {
  cursor: pointer;
}

.custom-file-upload i {
  font-size: 24px;
  margin-bottom: 8px;
}

.custom-file-upload span {
  font-size: 14px;
  color: #777;
  text-align: center;
  line-height: 1.5;
}

.file-upload-container input[type="file"] {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.file-upload-container small {
  margin-top: 10px;
  font-size: 12px;
  color: #999;
}

.modal-footer .btn-default,
.modal-footer .btn-primary {
  border: none;
  padding: 3px 8px;
  border-radius: 10px;
}

.modal-footer .btn-default {
  background: none;
  color: black;
}

.modal-footer .btn-primary,
.modal-footer .btn-primary:hover,
.bootstrap-dialog .bootstrap-dialog-title {
  color: white;
}

.modal-footer .btn-primary:hover {
  border: none;
}

.modal-footer .btn-default:hover {
  background: none;
  color: #202e48;
  border: none;
}

.bootstrap-dialog.type-primary .modal-header {
  background-color: #202e48;
  color: white;
}

.input-icon-wrapper,
.password-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.input-icon-wrapper input {
  padding-right: 30px;
  width: 100%;
}

.input-icon-wrapper i {
  position: absolute;
  left: 10px;
  color: #aaa;
  pointer-events: none;
}

.list-view-input::placeholder {
  position: relative;
  left: 30px;
}

.input-icon-wrapper input:focus + i,
.list-view-input:focus::placeholder,
.input-icon-wrapper input:not(:placeholder-shown) + i {
  opacity: 0;
}

.input-icon-wrapper input:focus + i {
  pointer-events: none;
}

.input-icon-wrapper input:not(:placeholder-shown) + i {
  pointer-events: none;
}

.text-success::before {
  color: #202e48;
}

.bi-trash:before {
  position: relative;
  right: 0.5px;
  top: 0.5px;
}

.hover-thumbnail {
  display: none;
}

/* Visa thumbnailn när man hovrar över raden */
tr:hover .hover-thumbnail {
  display: block;
}

/* Image Preview */
.image-preview-container {
  margin-top: 20px;
  text-align: center;
}

.image-preview {
  max-width: 100%;
  max-height: 100px;
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 5px;
  background: #f9f9f9;
}

.panel-buttons {
  opacity: 0;
  transition: opacity 0.3s ease;
}

.card:hover .panel-buttons {
  opacity: 1;
}

#page-wrapper form .form-control.ng-valid,
#page-wrapper form .form-control.ng-valid:focus,
#page-wrapper [data-form] .form-control.ng-valid,
#page-wrapper [data-form] .form-control.ng-valid:focus,
.public-configurator .form-control.ng-valid,
.public-configurator .form-control.ng-valid:focus,
#page-wrapper form .form-control.ng-invalid,
#page-wrapper form .form-control.ng-invalid:focus,
#page-wrapper [data-form] .form-control.ng-invalid,
#page-wrapper [data-form] .form-control.ng-invalid:focus,
.public-configurator .form-control.ng-invalid,
.public-configurator .form-control.ng-invalid:focus,
.combobox-input,
.multi-select-button {
  border: 1px solid #b4b4b4;
}

/* Login Page */

#login-page {
  display: flex;
  height: 100vh;
}

.left-panel {
  flex: 1;
  background-image: url("/images/background.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 40px;
  text-align: center;
}

.right-panel {
  flex: 1;
  background: #fff;
  padding: 60px 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.branding .loginpage-logo {
  width: 160px;
  margin-bottom: 20px;
}

.login-form {
  width: 320px;
  margin: auto;
}

.login-form label {
  font-weight: 600;
}

/* Slide on/off toggle switch */
.slide-toggle {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    user-select: none;
    gap: 6px;
}

.slide-toggle.disabled {
    cursor: default;
    opacity: 0.6;
}

.slide-toggle-track {
    position: relative;
    width: 34px;
    height: 18px;
    background: #ccc;
    border-radius: 9px;
    transition: background 0.1s;
    flex-shrink: 0;
}

.slide-toggle.on .slide-toggle-track {
    background: #5cb85c;
}

.slide-toggle-thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 14px;
    height: 14px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0,0,0,.3);
    transition: left 0.1s;
}

.slide-toggle.on .slide-toggle-thumb {
    left: 18px;
}


.login-form input {
  margin-bottom: 15px;
  border-radius: 10px;
}

.external-logins .btn {
  display: flex;
  align-items: center;
  justify-content: center;
}

.separator {
  display: flex;
  align-items: center;
  text-align: center;
  margin: 20px 0;
}

.separator hr {
  flex: 1;
  height: 1px;
  background-color: #ccc;
  border: none;
}

.separator span {
  margin: 0 12px;
  color: #888;
  font-weight: 500;
}

.external-logins {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Inaktiverad: BS5:s .btn:disabled nollställer annars bakgrund/ram/färg (osynlig knapp) — behåll dem som i BS3 */
.btn-external,
.btn-external:disabled,
.btn-external.disabled {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px;
  border-radius: 999px;
  background-color: white;
  color: black;
  font-weight: 500;
  border: 1px solid #ddd;
  text-decoration: none;
  font-size: 14px;
  line-height: 1.2;
}

.btn-external:hover {
  background-color: #f5f5f5;
  text-decoration: none;
}

.login-icon {
  width: 20px;
  height: 20px;
  object-fit: contain;
  display: inline-block;
}

.options-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 20px 0;
}

.remember-me {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: normal !important;
  cursor: pointer;
  margin: 0;
}

.remember-me input {
  margin: 0;
  transform: scale(1.1);
}

.forgot-link {
  font-size: 14px;
  color: #5a9bd5;
  text-decoration: none;
}

.forgot-link:hover {
  text-decoration: underline;
}
.loginpage-logo {
  position: absolute;
  top: 80px;

  transform: translateX(-50%);
  width: 140px;
}

.branding {
  max-width: 400px;
  text-align: center;
  padding: 0;
}

.branding h1 {
  font-size: 50px;
  font-weight: 400;
  line-height: 1.4;
  margin: 0;
}

.branding strong {
  font-weight: 700;
}

.subheading {
  font-size: 16px;
  opacity: 0.85;
  margin-top: 20px;
}

/* Forgot Password Page */

.forgot-wrapper,
.forgot-form {
  display: flex;
  flex-direction: column;
}

.forgot-wrapper {
  position: relative;
  min-height: 100vh;
  padding-bottom: 60px; 
  align-items: center;
  justify-content: center;
  font-family: "Segoe UI", sans-serif;
}

.lock-icon {
  width: 120px;
}

.forgot-title {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 30px;
  text-align: center;
}

.forgot-form {
  width: 320px;
  gap: 15px;
}
.forgot-form label {
  margin-bottom: 0px;
}

.login-form-control {
  padding: 7px;
  border: 1px solid #ccc;
  border-radius: 10px;
  font-size: 14px;
  width: 100%;
  padding-right: 20px;
}

/* Inaktiverad: BS5:s .btn:disabled nollställer annars bakgrund/ram/färg (osynlig knapp) — behåll dem som i BS3 */
.btn-send,
.btn-send:disabled,
.btn-send.disabled {
  background-color: #1a2a49;
  color: #fff;
  padding: 12px 0;
  border: none;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  width: 100%;
}

.btn-send:hover {
  background-color: #16233d;
  color: #fff;
}

.back-link,
.back-link:hover {
  text-decoration: none;
}

.back-link {
  position: relative;
  right: 110px;
  margin-top: 14px;
  color: black;
  font-weight: 400;
  align-items: center;
}

.toggle-password-btn {
  position: absolute;
  right: 10px;
  top: 8px;
  background: none;
  border: none;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.password-wrapper:hover .toggle-password-btn {
  opacity: 1;
  visibility: visible;
}

/* Mobilanpassning */

@media (max-width: 768px) {
  #login-page {
    flex-direction: column;
  }

  .left-panel {
    display: none;
  }

  .right-panel {
    width: 100%;
    padding: 40px 20px;
  }

  .login-form {
    width: 100%;
    max-width: 320px;
  }
}

/*!************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!./Style/themes.css ***!
  \************************************************************************************************/
:root {
  --primary-color: #202E48;
  --secondary-color: #2a3c5e;
  --background-color: #f5f5f5;
  --icon-color: #ffffff;
  --text-color-primary: #000000;
  --text-color-secondary: #ffffff;

  --button-text-color: var(--icon-color);
}

/* UI-komponenter */
.navbar {
  background-color: var(--primary-color);
}

.navbar a {
  color: var(--secondary-color);
}

.btn-group .btn.active {
  background-color: var(--primary-color) !important;
  color: var(--icon-color) !important;
}

.btn-group .btn:hover {
  background-color: var(--secondary-color) !important;
}

.public-configurator:not(.read-only) .sidebar {
  background-color: transparent !important;
}

.sidebar {
  background-color: var(--primary-color) !important;
}

.public-configurator .sidemenu-bottom {
  display: none !important;
}

.sidemenu-bottom {
  background-color: var(--primary-color) !important;
}

.panel-footer-icon-btn {
  background-color: var(--primary-color) !important;
  color: var(--secondary-color) !important;
}

.listview-icons {
  background-color: var(--primary-color) !important;
  color: var(--icon-color) !important;
}

.listview-icons-success  { background-color: #5cb85c !important; color: #fff !important; }
.listview-icons-warning  { background-color: #f0ad4e !important; color: #fff !important; }
.listview-icons-danger   { background-color: #d9534f !important; color: #fff !important; }

.black-btn {
  background-color: var(--primary-color) !important;
}

.sidebar .active>a::before,
.sidebar a:hover::before,
.sidebar li.active-part a::before {
  background-color: var(--secondary-color) !important;
}

.hovered-option {
  background-color: var(--secondary-color) !important;
}

.delete-btn {
  color: var(--primary-color) !important;
}

.panel-copy-icon {
  color: var(--primary-color) !important;
}

.input-group .btn-default {
  background-color: var(--primary-color) !important;
}

.col-6.col-md-3.col-lg-2.bottom-buffer .btn-default {
  color: var(--primary-color);
}

.btn-primary {
  background-color: var(--primary-color) !important;
  color: var(--text-color-secondary) !important;
}

.bootstrap-dialog.type-primary .modal-header {
  background-color: var(--primary-color) !important;
  color: var(--secondary-color) !important;
}

.throughput-btn-add {
  background-color: var(--primary-color) !important;
}

.theme-color-icon {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  margin-right: 8px;
  vertical-align: middle;
}

.selected-theme-icon {
  margin-left: 8px;
  color: var(--primary-color);
  font-size: 14px;
  vertical-align: middle;
  display: inline-block;
}

.navbar-static-top {
  background-color: var(--background-color) !important;
}

body {
  color: var(--text-color-primary);
}

.sidebar,
.sidebar a,
.sidebar .active>a,
.sidebar li {
  color: var(--text-color-secondary);
}

.sidemenu-icon-mask {
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  background-color: var(--icon-color);
  width: 20px;
  height: 20px;
  display: inline-block;
  margin-right: 8px;
  vertical-align: middle;
}

.sidemenubrand {
  color: var(--text-color-secondary);
}

.start-icon {
  -webkit-mask-image: url('/images/svg/start-icon.svg');
  mask-image: url('/images/svg/start-icon.svg');
}

.reseller-icon {
  -webkit-mask-image: url('/images/svg/reseller-icon.svg');
  mask-image: url('/images/svg/reseller-icon.svg');
}

.object-icon {
  -webkit-mask-image: url('/images/svg/object-icon.svg');
  mask-image: url('/images/svg/object-icon.svg');
}

.setting-icon {
  -webkit-mask-image: url('/images/svg/setting-icon.svg');
  mask-image: url('/images/svg/setting-icon.svg');
}

/* Ikoner i temats ikonfärg (de publika sidornas varianter längre ned har högre specificitet) */
.fa-sync-alt,
.fa-cubes,
.bi-x-lg,
.fa-puzzle-piece,
.fa-file,
.fa-image,
.fa-cloud-upload-alt,
.fa-box,
.fa-ruler,
.fa-expand,
.fa-camera,
.fa-cube {
  color: var(--icon-color) !important;
}

.document-icon {
  -webkit-mask-image: url('/images/svg/document-icon.svg');
  mask-image: url('/images/svg/document-icon.svg');
}

.public-configurator:not(.read-only) .fa-image {
  color: var(--primary-color) !important;
}

.public-configurator:not(.read-only) a:hover .fa-image {
  color: var(--icon-color) !important;
}

.public-configurator:not(.read-only) li:not(.active) .fa-box {
  color: var(--primary-color) !important;
}

.public-configurator:not(.read-only) a:hover .fa-box {
  color: var(--icon-color) !important;
}

.public-configurator:not(.read-only) li:not(.active) .fa-ruler {
  color: var(--primary-color) !important;
}

.public-configurator:not(.read-only) a:hover .fa-ruler {
  color: var(--icon-color) !important;
}
.editor-side-tools .btn i.fa {
  color: inherit !important;
}

.public-configurator:not(.read-only) li:not(.active) .fa-expand {
  color: var(--primary-color) !important;
}

.public-configurator:not(.read-only) a:hover .fa-expand {
  color: var(--icon-color) !important;
}
.public-configurator:not(.read-only) li:not(.active) .fa-camera {
  color: var(--primary-color) !important;
}

.public-configurator:not(.read-only) a:hover .fa-camera {
  color: var(--icon-color) !important;
}

.public-configurator:not(.read-only) li:not(.active) .fa-arrows-alt {
  color: var(--primary-color) !important;
}

.public-configurator:not(.read-only) a:hover .fa-arrows-alt {
  color: var(--icon-color) !important;
}

.public-configurator:not(.read-only) .fa-camera {
  color: var(--primary-color) !important;
}


.listview-icons-big {
  background-color: var(--primary-color) !important;
}

.ui-state-default {
  background-color: var(--primary-color) !important;
}

ul.line-style::before,
ul.line-style li::before {
  background-color: var(--icon-color) !important;
}

.public-configurator:not(.read-only) ul.line-style::before,
.public-configurator:not(.read-only) ul.line-style li::before {
  background-color: var(--text-color-primary) !important;
}


.input-color-picker {
  margin-bottom: 8px;
}

ul.context-menu li:hover {
  background-color: var(--primary-color) !important;
}

.camera-mode-selected {
  color: var(--text-color-secondary) !important;
}

/*!************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!./Style/mobile.css ***!
  \************************************************************************************************/
/* Mobil och surfplatta — appens egna sidor (<sidenav>). Laddas sist (src/app.js) så att den vinner över
   site.css vid lika specificitet. Brytpunkter som resten av appen:
   < 768px  = telefon, 768–991px = surfplatta i stående läge (båda har den dockade menyraden i botten).
   EditorPublic (<sidemenu>) har ingen .sidenav-root och berörs inte — alla regler här är scopade till den,
   utom avsnittet "Publika sidor" längst ner (PublicStart/EditorPublic, scopat till .public-configurator). */

/* ------------------------------------------------------------------------------------------------------
   Sidans marginaler: #page-wrapper + .container-fluid gav 30px per sida på telefon (60px av 390).
   Radernas negativa marginaler tar ut .container-fluid:s padding, så den behålls — bara omslaget nollas.
   ------------------------------------------------------------------------------------------------------ */
@media (max-width: 991px) {
    body:has(.sidenav-root) #page-wrapper {
        padding-left: 0;
        padding-right: 0;
    }

    body:has(.sidenav-root) #page-wrapper > .container-fluid {
        padding-top: 4px;
    }
}

/* 15px — lika mycket som radernas negativa marginal (BS3-gutter, app-base). Med mindre padding blev varje .row
   några pixlar bredare än sidan, och #page-wrapper fick en horisontell scroll (som också flyttade upp fästa rader). */
@media (max-width: 767px) {
    body:has(.sidenav-root) #page-wrapper > .container-fluid {
        padding-left: 15px;
        padding-right: 15px;
    }
}

/* ------------------------------------------------------------------------------------------------------
   Flikar: en rad som scrollar i sidled i stället för att bryta över tre rader.
   ------------------------------------------------------------------------------------------------------ */
@media (max-width: 991px) {
    body:has(.sidenav-root) #page-wrapper .nav-tabs,
    body:has(.sidenav-root) #page-wrapper .nav-pills {
        /* max-width: vissa rader (Objekt → Generellt/Bilder/…) är inline-flex och blev lika breda som innehållet,
           vilket gav hela sidan en horisontell scroll i stället för att raden själv scrollade. */
        max-width: 100%;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    body:has(.sidenav-root) #page-wrapper .nav-tabs::-webkit-scrollbar,
    body:has(.sidenav-root) #page-wrapper .nav-pills::-webkit-scrollbar {
        display: none;
    }

    body:has(.sidenav-root) #page-wrapper .nav-tabs > .nav-item,
    body:has(.sidenav-root) #page-wrapper .nav-pills > .nav-item {
        flex-shrink: 0;
    }

    body:has(.sidenav-root) #page-wrapper .nav-tabs .nav-link,
    body:has(.sidenav-root) #page-wrapper .nav-pills .nav-link {
        white-space: nowrap;
    }

    body:has(.sidenav-root) .header-with-tabs {
        padding: 8px 0 0;
    }

    /* Fler flikar åt sidan: kanten tonas ut (klasserna sätts av App/Services/ScrollableNavHints.ts). */
    body:has(.sidenav-root) #page-wrapper .nav-scroll-more-right {
        -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent);
        mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent);
    }

    body:has(.sidenav-root) #page-wrapper .nav-scroll-more-left {
        -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 40px), transparent);
        mask-image: linear-gradient(to left, #000 calc(100% - 40px), transparent);
    }

    body:has(.sidenav-root) #page-wrapper .nav-scroll-more-left.nav-scroll-more-right {
        -webkit-mask-image: linear-gradient(to right, transparent, #000 40px, #000 calc(100% - 40px), transparent);
        mask-image: linear-gradient(to right, transparent, #000 40px, #000 calc(100% - 40px), transparent);
    }
}

/* ------------------------------------------------------------------------------------------------------
   Kortlistor (gallery-card) på telefon: kompakta rader.

       +--------+ Rubrik ....................  (kopiera)(ta bort)
       |  bild  | statusbricka
       |        | 1000219_r1 · Addovation · 2026-09-24      <- en rad, ellips
       +--------+
       [ Redigera                    ] [->] [dela]          <- hela kortets bredd

   Gallery.Card.Template.html lägger bild, rubrik och sidans innehåll som direkta barn till .card-flex, så
   gridet fungerar för alla listor utan ändringar i mallarna: bilden spänner över textraderna och
   knappraden (grid-column: 1 / -1) placeras automatiskt under både bild och text.
   ------------------------------------------------------------------------------------------------------ */
@media (max-width: 767px) {
    body:has(.sidenav-root) {
        --card-thumb: 64px;
        --card-pad: 12px;
        --card-btn-h: 34px;
    }

    body:has(.sidenav-root) .flexbox {
        margin-left: 0;
        margin-right: 0;
        gap: 10px;
    }

    body:has(.sidenav-root) .flexbox > .flexitem,
    body:has(.sidenav-root) .flexbox > .panel-flex-items {
        flex: 1 1 100%;
        max-width: 100%;
        padding: 0;
    }

    body:has(.sidenav-root) .gallery-card {
        border-radius: 14px;
        box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06);
    }

    body:has(.sidenav-root) .gallery-card .card-flex {
        position: relative;
        display: grid;
        grid-template-columns: var(--card-thumb) minmax(0, 1fr);
        grid-template-rows: auto auto auto;
        column-gap: 12px;
        row-gap: 0;
        align-content: start;
        padding: var(--card-pad);
    }

    body:has(.sidenav-root) .gallery-card .card-flex > * {
        grid-column: 2;
        min-width: 0;
        margin: 0;
    }

    /* Bilden spänner över de tre textraderna och fyller rutan. */
    body:has(.sidenav-root) .gallery-card .card-flex > .card-header {
        position: static;
        grid-column: 1;
        grid-row: 1 / span 3;
        align-self: start;
        width: var(--card-thumb);
        height: var(--card-thumb);
        min-height: 0;
        padding: 0;
        border-radius: 10px;
        overflow: hidden;
        background-color: #f1f3f6;
    }

    body:has(.sidenav-root) .gallery-card .img-container-customer {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    body:has(.sidenav-root) .gallery-card .img-container-customer a {
        display: contents;
    }

    body:has(.sidenav-root) .gallery-card .img-container-customer img {
        width: 100%;
        height: 100%;
        max-width: 100%;
        max-height: 100%;
        padding: 4px;
        object-fit: contain;
    }

    /* Renderingar (projekt, objekt, material) har mycket luft runt motivet — beskär i stället för att krympa.
       Logotyper (återförsäljare) visas hela. */
    body:has(.sidenav-root) .gallery-card .img-container-customer img[src*="/api/images/project/"],
    body:has(.sidenav-root) .gallery-card .img-container-customer img[src*="/api/images/object/"],
    body:has(.sidenav-root) .gallery-card .img-container-customer img[src*="/api/images/texture/"] {
        padding: 0;
        object-fit: cover;
    }

    body:has(.sidenav-root) .gallery-card .img-container-customer img[src*="/api/images/object/"] {
        transform: scale(1.35);
    }

    /* Porträtt (användare) fyller hela rutan; platshållarikoner blir en dämpad symbol i mitten. */
    body:has(.sidenav-root) .gallery-card .img-container-customer img.portrait-image {
        padding: 0;
        border-radius: 0;
        object-fit: cover;
    }

    body:has(.sidenav-root) .gallery-card .img-container-customer img[src*="/images/svg/"] {
        padding: 10px;
        object-fit: contain;
        opacity: 0.5;
    }

    /* Standardavataren är fylld med temafärgen (site.css) — full styrka, men mask-rutan ska inte ha padding. */
    body:has(.sidenav-root) .gallery-card .img-container-customer img[src$="/images/svg/rounduser-icon.svg"] {
        opacity: 0.85;
        -webkit-mask-origin: content-box;
        mask-origin: content-box;
        background-clip: content-box;
    }

    /* Rubrik: en rad med ellips. */
    body:has(.sidenav-root) .gallery-card-title {
        flex-grow: 0;
        align-self: center;
        padding: 0;
    }

    body:has(.sidenav-root) .gallery-card .card-title-row {
        display: flex;
        align-items: center;
        gap: 6px;
        float: none;
        padding: 0;
    }

    body:has(.sidenav-root) .gallery-card .card-title-row > a {
        min-width: 0;
    }

    body:has(.sidenav-root) .gallery-card .card-title h4 {
        margin: 0;
        font-size: 16px;
        font-weight: 700;
        line-height: 1.3;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* Detaljerna (Nummer: …, Kund: …) på en rad utan etiketter: "1000219_r1 · Addovation · 2026-09-24" */
    body:has(.sidenav-root) .gallery-card .card-details {
        display: block;
        margin-top: 2px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        font-size: 13px;
        line-height: 1.45;
        color: #6b7280;
    }

    body:has(.sidenav-root) .gallery-card .card-details-subtitle {
        display: none;
    }

    body:has(.sidenav-root) .gallery-card .card-details-data {
        display: inline;
        margin: 0;
        font-size: inherit;
        color: inherit;
    }

    /* Tomma värden ("-" på desktop, card-details-data--empty) och värden utan text visas inte i raden. */
    body:has(.sidenav-root) .gallery-card .card-details-data:empty,
    body:has(.sidenav-root) .gallery-card .card-details-data--empty,
    body:has(.sidenav-root) .gallery-card .card-details-data.material-editable:has(> span:empty) {
        display: none;
    }

    /* Avskiljaren sitter före varje följande värde (inte efter), så att ett dolt sista värde inte lämnar en ensam punkt. */
    body:has(.sidenav-root) .gallery-card .card-details-data ~ .card-details-data::before {
        content: '\00b7';
        margin: 0 6px;
        color: #b0b6bf;
    }

    /* ...men inte före första synliga värdet när det första är tomt. */
    body:has(.sidenav-root) .gallery-card .card-details > .card-details-data--empty:nth-child(2) + .card-details-subtitle + .card-details-data::before {
        content: none;
    }

    body:has(.sidenav-root) .gallery-card .card-details-data a {
        color: inherit;
    }

    /* Materialkortens redigeringspennor syns bara vid hover — på pekskärm var de osynliga men tog plats
       (glapp och en ensam punkt i detaljraden). Redigera-knappen täcker samma sak. */
    body:has(.sidenav-root) .gallery-card .material-edit-pencil {
        display: none;
    }

    /* Objektlistans brickor (Startdel, Publik webb) på detaljraden; knappraden utan den extra luften under
       (Addo3DObject.List.Styles.css ger den på desktop). */
    body:has(.sidenav-root) .addo3dobject-cards .gallery-card .addo3dobject-card-chips {
        display: inline-flex;
        margin: 0;
        vertical-align: 1px;
    }

    body:has(.sidenav-root) .addo3dobject-cards .gallery-card .card-details-data + .addo3dobject-card-chips {
        margin-left: 8px;
    }

    body:has(.sidenav-root) .addo3dobject-cards .gallery-card .addo3dobject-card-buttons {
        padding-bottom: 0;
    }

    /* Offertnummer och status låg absolut över den stora bilden; här blir de en rad med brickor. */
    body:has(.sidenav-root) .gallery-card .project-erp-info {
        position: static;
        display: flex;
        align-items: center;
        gap: 6px;
        height: auto;
        padding: 0;
        margin-top: 3px;
        font-size: 12px;
        line-height: 1.4;
    }

    body:has(.sidenav-root) .gallery-card .project-erp-info:not(:has(*)) {
        display: none;
    }

    body:has(.sidenav-root) .gallery-card .project-erp-info .erp-quotation-no,
    body:has(.sidenav-root) .gallery-card .project-erp-info .erp-status {
        float: none;
    }

    body:has(.sidenav-root) .gallery-card .project-erp-info .erp-status:not([class*="badge"]):not([class*="label"]) {
        padding: 1px 8px;
        border-radius: 999px;
        background-color: #eef1f5;
        color: #4b5563;
        font-weight: 600;
    }

    /* ---- Knapprad: under både bild och text, hela kortets bredd ---- */
    body:has(.sidenav-root) .gallery-card .card-flex > .card-buttons {
        grid-column: 1 / -1;
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 8px;
        margin: 9px 0 0;
    }

    body:has(.sidenav-root) .gallery-card .card-buttons > a {
        flex: 1 1 0;
        min-width: 0;
        margin: 0;
    }

    body:has(.sidenav-root) .gallery-card .panel-footer-content {
        display: flex;
        align-items: center;
        gap: 8px;
        width: 100%;
        margin: 0;
    }

    body:has(.sidenav-root) .gallery-card .panel-footer-content > * {
        margin: 0;
    }

    body:has(.sidenav-root) .gallery-card .panel-footer-content > .edit-btn-size {
        flex: 1 1 auto;
        min-width: 0;
    }

    body:has(.sidenav-root) .gallery-card .panel-footer-content > .footerbutton-class {
        flex: 0 0 auto;
        gap: 8px;
    }

    /* Textknappar */
    body:has(.sidenav-root) .gallery-card .panel-footer-edit,
    body:has(.sidenav-root) .gallery-card .white-btn,
    body:has(.sidenav-root) .gallery-card .black-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        width: 100%;
        height: var(--card-btn-h);
        min-height: 0;
        padding: 0 12px;
        border-radius: 10px;
        font-size: 13.5px;
        font-weight: 600;
        line-height: 1;
        white-space: nowrap;
        overflow: hidden;
    }

    body:has(.sidenav-root) .gallery-card .panel-footer-edit > span,
    body:has(.sidenav-root) .gallery-card .white-btn > span,
    body:has(.sidenav-root) .gallery-card .black-btn > span {
        float: none !important;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Tomma ikonplatser (<span class="float-end"><i class=""></i></span>) och clearfix tar ingen plats. */
    body:has(.sidenav-root) .gallery-card .white-btn > span:has(> i[class=""]),
    body:has(.sidenav-root) .gallery-card .black-btn > span:has(> i[class=""]),
    body:has(.sidenav-root) .gallery-card .card-buttons .clearfix {
        display: none;
    }

    /* Ikonknappar (visa, dela, flytta): ikonen exakt i mitten. */
    body:has(.sidenav-root) .gallery-card .panel-footer-icon-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        width: 42px;
        height: var(--card-btn-h);
        padding: 0;
        border-radius: 10px;
        font-size: 14px;
        line-height: 1;
    }

    /* site.css placerar ikonerna absolut (right: 5px) — i en knapp av annan bredd hamnar de då snett åt höger. */
    body:has(.sidenav-root) .gallery-card .card-buttons i,
    body:has(.sidenav-root) .gallery-card .card-buttons .panel-footer-icon,
    body:has(.sidenav-root) .gallery-card .panel-buttons .panel-copy-icon {
        position: static;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin: 0 !important;
        transform: none;
        line-height: 1;
    }

    /* ---- Kort med en enda kort åtgärd (Objekt, Material: "Redigera"): knappen till höger om texten i stället för
       en egen rad, så att kortet blir lika högt som bilden. Kort med flera knappar (Projekt, Kunder) och långa
       etiketter ("Visa användare", white-btn) behåller raden — annars trängs rubriken ihop. Knappen är centrerad
       i höjdled, eller ligger mot bildens nederkant när kortet har hörnknappar uppe till höger. */
    body:has(.sidenav-root) .gallery-card .card-flex:has(> .card-buttons > a:only-child > .black-btn) {
        grid-template-columns: var(--card-thumb) minmax(0, 1fr) auto;
    }

    body:has(.sidenav-root) .gallery-card .card-flex > .card-buttons:has(> a:only-child > .black-btn) {
        grid-column: 3;
        grid-row: 1 / span 3;
        align-self: center;
        margin: 0;
    }

    body:has(.sidenav-root) .gallery-card:has(.panel-buttons .panel-heading-btn) .card-flex > .card-buttons:has(> a:only-child > .black-btn) {
        align-self: end;
    }

    body:has(.sidenav-root) .gallery-card .card-buttons:has(> a:only-child > .black-btn) > a {
        flex: 0 0 auto;
    }

    body:has(.sidenav-root) .gallery-card .card-buttons:has(> a:only-child > .black-btn) :is(.white-btn, .black-btn) {
        width: auto;
        max-width: 140px;
        padding: 0 14px;
    }

    /* Utan egen knapprad räcker bildens höjd — ingen luft under den. */
    body:has(.sidenav-root) .gallery-card .card-flex:has(> .card-buttons > a:only-child > .black-btn) > .card-header {
        margin-bottom: 0;
    }

    /* ---- Hörnknappar (kopiera, ta bort): sida vid sida uppe till höger, i appens mörka färg som på desktop ----
       På desktop ligger de staplade över den stora bilden och syns bara vid hover. */
    body:has(.sidenav-root) .gallery-card .panel-buttons {
        position: absolute;
        top: calc(var(--card-pad) - 4px);
        right: calc(var(--card-pad) - 6px);
        z-index: 1;
        display: flex;
        flex-direction: row-reverse;
        gap: 2px;
        opacity: 1;
    }

    body:has(.sidenav-root) .gallery-card .panel-buttons .panel-heading-btn {
        position: static;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 30px;
        height: 30px;
        margin: 0;
        border-radius: 50%;
        color: var(--primary-color, #202e48);
        font-size: 15px;
        line-height: 1;
    }

    body:has(.sidenav-root) .gallery-card .panel-buttons .panel-heading-btn:active {
        background-color: #eef1f5;
    }

    body:has(.sidenav-root) .gallery-card .panel-buttons .panel-heading-btn i {
        margin: 0 !important;
        color: inherit !important;
        font-size: inherit;
    }

    body:has(.sidenav-root) .gallery-card:has(.panel-buttons .panel-heading-btn) .card-title-row {
        padding-right: 30px;
    }

    body:has(.sidenav-root) .gallery-card:has(.panel-buttons .panel-heading-btn + .panel-heading-btn) .card-title-row {
        padding-right: 62px;
    }
}

/* ------------------------------------------------------------------------------------------------------
   Tabeller (listvyer, Översättningar, Artiklar …): scrollar i sidled inom sidan i stället för att klippas.
   display: block på själva tabellen gör den till scrollbehållare utan att mallarna behöver ett omslag;
   raderna ritas fortfarande som tabell (anonym tabellbox).
   ------------------------------------------------------------------------------------------------------ */
@media (max-width: 991px) {
    body:has(.sidenav-root) #page-wrapper table.table-list,
    body:has(.sidenav-root) #page-wrapper table.table-striped {
        display: block;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* ...och tbody blir tabellen, så att smala tabeller fortfarande fyller bredden. */
    body:has(.sidenav-root) #page-wrapper table.table-list > tbody,
    body:has(.sidenav-root) #page-wrapper table.table-striped > tbody {
        display: table;
        width: 100%;
    }
}

@media (max-width: 767px) {
    body:has(.sidenav-root) #page-wrapper table.table-list > tbody > tr > td,
    body:has(.sidenav-root) #page-wrapper table.table-list > tbody > tr > th {
        padding: 10px 12px;
    }
}

/* .first-row reserverade 128px till höger för de absolut placerade vy-knapparna (.listviewclass). På mobil ligger
   de i filterraden (<list-filters>) — utan knappar blev bara sökfältet onödigt smalt (t.ex. Material). */
@media (max-width: 991px) {
    body:has(.sidenav-root) #page-wrapper .first-row {
        padding-right: 0;
    }

    body:has(.sidenav-root) #page-wrapper .form-row {
        padding-top: 12px;
    }
}

/* ------------------------------------------------------------------------------------------------------
   Detaljformulär (Kund, Användare, Artikel, Tema …): varje avsnitt — h3.info-title följd av .row.info-row —
   ritas som ett vitt kort med rubriken överst och fälten i full bredd. På desktop ligger rubriken till
   vänster och fälten indragna 15 % (site.css), vilket på en telefon bara blev ett tomt vänsterfält.
   Ren CSS på syskonparet, så att mallarna inte behöver något omslag.
   ------------------------------------------------------------------------------------------------------ */
@media (max-width: 991px) {
    body:has(.sidenav-root) #page-wrapper .input-hr {
        display: none;
    }

    body:has(.sidenav-root) #page-wrapper .info-title:has(+ .info-row) {
        margin: 12px 0 0;
        padding: 14px 16px 6px;
        border-radius: 12px 12px 0 0;
        background-color: #fff;
        color: #6b7280;
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 0.06em;
        text-transform: uppercase;
    }

    /* Alla avsnittsrader blir kortets kropp — även rader som fortsätter ett avsnitt utan egen rubrik
       (t.ex. Användare → Användarnamn/Roller). En rad utan rubrik före sig blir ett eget, helt rundat kort. */
    body:has(.sidenav-root) #page-wrapper .info-row {
        bottom: auto;
        margin: 12px 0 0;
        padding: 10px 1px 4px;
        border-radius: 12px;
        background-color: #fff;
    }

    body:has(.sidenav-root) #page-wrapper .info-title + .info-row {
        margin-top: 0;
        padding-top: 2px;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
    }

    body:has(.sidenav-root) #page-wrapper .info-row + .info-row {
        margin-top: 0;
        padding-top: 0;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
    }

    body:has(.sidenav-root) #page-wrapper .info-row:has(+ .info-row) {
        padding-bottom: 0;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }

    /* Nästlade rader i ett avsnitt (Egenskap: .row.mx-0) ska inte bli egna kort. */
    body:has(.sidenav-root) #page-wrapper .info-row .info-row {
        margin: 0;
        padding: 0;
        background: none;
    }

    /* Kolumnerna i kortet: BS3:s 15px sidopadding (app-base) blir kortets innermarginal. */
    body:has(.sidenav-root) #page-wrapper .info-row .info-input,
    body:has(.sidenav-root) #page-wrapper .info-row .form-control {
        min-height: 38px;
    }

    /* Jämn rytm mellan fälten: varje fält (en behållare med en etikett följd av en kontroll) får samma avstånd,
       även där mallen saknar bottom-buffer (t.ex. Kund → Kundnummer/Org nr/Prisfaktor i .info-secondary). */
    body:has(.sidenav-root) #page-wrapper .info-row div:has(> label + *) {
        margin-bottom: 14px;
    }

    /* Tomma distansrader (<div class=""><label>&nbsp;</label></div>) som bara fanns för desktop-rutnätet. */
    body:has(.sidenav-root) #page-wrapper .info-row div:is([class=""], :not([class])):has(> label:only-child):not(:has(input, select, textarea, button)) {
        display: none;
    }

    /* Dynamiskt objekt drogs ut 18,5 % åt vänster för att ta ut desktopens indrag — som inte finns här. */
    body:has(.sidenav-root) #page-wrapper .dynamic-object-outdent {
        margin-left: 0;
    }

    /* Knappar i fältgrupper (combobox: rensa/välj, översättningsglob …) har en fast höjd på 30px, medan fälten ovan
       är 38px på mobil. Knapparna sträcks i stället till fältets höjd, vilken den än är. */
    body:has(.sidenav-root) #page-wrapper .input-group > .btn {
        height: auto;
        min-height: 0;
        align-self: stretch;
    }

    body:has(.sidenav-root) #page-wrapper .info-row label {
        margin-bottom: 4px;
        font-size: 13px;
    }

    /* Formulärets Spara/Avbryt (.form-actions) ligger alltid fast precis ovanför menyraden. Fixed i stället för
       sticky: en sticky rad följer med formulärets slut — den lyfte från menyraden på korta formulär och när man
       scrollat till botten (utfyllnad/innehåll efter raden). Sidan reserverar radens höjd (se nedan). Raden i en
       dold flik är dold med sin flik. */
    body:has(.sidenav-root) #page-wrapper .form-actions {
        position: fixed;
        left: 0;
        right: 0;
        bottom: calc(var(--sidenav-bar-height) + env(safe-area-inset-bottom));
        z-index: 1000;
        margin: 0 !important;
        padding: 10px 15px;
        border-top: 1px solid #e3e6ea;
        background-color: rgba(255, 255, 255, 0.97);
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.06);
    }

    body:has(.sidenav-root) #page-wrapper .form-actions > div {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        width: 100%;
        padding: 0;
    }

    /* Rader där knapparna ligger direkt i .form-actions (Objekt → Generellt). */
    body:has(.sidenav-root) #page-wrapper .form-actions:not(:has(> div)) {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

    body:has(.sidenav-root) #page-wrapper .form-actions .btn {
        width: auto;
        min-height: 38px;
        margin: 0;
        padding: 6px 12px;
        font-size: 14px;
    }

    /* Avbryt ser ut som en länk — den behöver inte full knapputfyllnad. */
    body:has(.sidenav-root) #page-wrapper .form-actions .btn-default {
        padding-left: 6px;
        padding-right: 6px;
    }

    /* Plats för den fasta raden i slutet av sidan, så att sista fältet går att scrolla fram. */
    body:has(.sidenav-root) #page-wrapper:has(.form-actions) > .container-fluid {
        padding-bottom: 76px;
    }

    /* Spara sist och bredast; Avbryt först. */
    body:has(.sidenav-root) #page-wrapper .form-actions .btn-primary {
        flex: 1 1 80px;
        order: 10;
    }

    /* Sidoåtgärder med ikon (Ta bort, Inaktivera, Återställ lösenord …) blir kvadratiska ikonknappar i sin färg, så
       att Spara ryms på samma rad (Användare hade fem knappar och Spara på en egen rad). Etiketten finns kvar för
       skärmläsare (font-size: 0 döljer bara visuellt) och i title-attributet. */
    body:has(.sidenav-root) #page-wrapper .form-actions .btn:is(.btn-danger, .btn-warning, .btn-info, .btn-success):has(i[class*="bi-"], i[class*="fa-"]) {
        flex: 0 0 38px;
        width: 38px;
        padding: 0;
        font-size: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    body:has(.sidenav-root) #page-wrapper .form-actions .btn:is(.btn-danger, .btn-warning, .btn-info, .btn-success):has(i[class*="bi-"], i[class*="fa-"]) i {
        margin: 0;
        font-size: 16px;
    }
}

/* ------------------------------------------------------------------------------------------------------
   Ikonknappar i tabeller (.listview-icons: redigera, kopiera, ta bort …). På desktop är de inline-element med
   padding, så varje knapps storlek beror på ikonens bredd och de bröt rad i smala kolumner (t.ex. Regler).
   Här: lika stora kvadrater med ikonen i mitten, på en rad.
   ------------------------------------------------------------------------------------------------------ */
@media (max-width: 991px) {
    body:has(.sidenav-root) #page-wrapper i.listview-icons {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 28px;
        height: 28px;
        padding: 0;
        margin-right: 6px;
        font-size: 13px;
        line-height: 1;
        vertical-align: middle;
    }

    body:has(.sidenav-root) #page-wrapper i.listview-icons::before {
        line-height: 1;
    }

    body:has(.sidenav-root) #page-wrapper td:has(> a > i.listview-icons),
    body:has(.sidenav-root) #page-wrapper .partrules-actions-cell {
        white-space: nowrap;
    }
}

/* ======================================================================================================
   Publika sidor (PublicStart, EditorPublic) — anonyma besökare, ingen menyrad. Scopat till deras egna
   klasser (.public-configurator / .public-start); komponenternas egna mallar har resten.
   ====================================================================================================== */
@media (max-width: 767px) {
    /* EditorPublic → Begär offert: luft ovanför rubriken, som inte heller ska gå in under stängknappen. */
    .public-configurator .request-offer-form {
        padding-top: 14px;
    }

    /* I höjd med rubriken, så att den inte täcker slutet på brödtextens första rad. */
    .public-configurator .request-offer-form .request-offer-close {
        top: -4px;
        right: 4px;
    }

    .public-configurator .request-offer-form .tips-and-info-label {
        margin-top: 4px;
        padding-right: 48px;
        font-size: 20px;
        font-weight: 600;
    }

    /* PublicStart: "Powered by" sist på sidan i stället för fast i nedre vänstra hörnet över produkterna. */
    .powered-by-outer-container.public-start .powered-by-container {
        position: static;
        margin: 8px auto 20px;
        text-align: center;
    }

    /* EditorPublic: stegraden scrollar i sidled — tona ut kanten där fler steg finns (ScrollableNavHints). */
    .public-configurator:not(.embedded) ul.step-menu.nav-scroll-more-right {
        -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent);
        mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent);
    }

    .public-configurator:not(.embedded) ul.step-menu.nav-scroll-more-left {
        -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 36px), transparent);
        mask-image: linear-gradient(to left, #000 calc(100% - 36px), transparent);
    }

    .public-configurator:not(.embedded) ul.step-menu.nav-scroll-more-left.nav-scroll-more-right {
        -webkit-mask-image: linear-gradient(to right, transparent, #000 36px, #000 calc(100% - 36px), transparent);
        mask-image: linear-gradient(to right, transparent, #000 36px, #000 calc(100% - 36px), transparent);
    }
}

/* EditorPublic på låg liggande skärm (telefon på tvären): verktygslistan (bara ikoner, se EditorPublic.Styles.css)
   börjar under stegflikarna och produktrubriken i stället för bakom dem. .sidemenu-top ligger i Sidemenu-
   komponentens mall och nås därför bara härifrån. */
@media (min-width: 769px) and (max-height: 500px) {
    .public-configurator:not(.embedded):not(.read-only) .sidemenu-top {
        top: 140px !important;
    }
}