/* ========================================================================== TABLE OF CONTENTS: 1. DESCRIPTION 2. TREE STRUCTURE 3. LAYOUT 3.1 Accordion 4. ACCORDION CONTENT 4.1 Title 4.2 Toggle button 4.3 Toggle button behaviours 4.3.1 Hover 4.3.2 Active 5. PANEL GROUP — SINGLE OUTER FRAME ========================================================================== 1. ACCORDION ========================================================================== Styling for accordions. Accordions are used to group related content and allow users to toggle the visibility of each section. ========================================================================== 2. TREE STRUCTURE ========================================================================== .accordion ├─ .col-4 │ └─ .accordion-title └─ .col-8 └─ .divRight └─ span.no-print └─ .button-toggle-accordion ========================================================================== 3. LAYOUT ========================================================================== */ /* HIERARCHY COLOUR VARIABLES -------------------------- The parent/child/grandchild bar, filter and section colours (backgrounds, text) are defined by the active theme — see the single source of truth in themes/theme-sandstone.css. Borders are level-independent: bar, filter, section and outer frame all share --border-outer / --border-left, and only the open state swaps them. Depth is derived purely from nesting: a bar/section/filter inside one open .innerContent.content-container reads as child, two deep as grandchild. Filters inherit their level via the local --filter-* vars (filter.css). */ /* 3.1 ACCORDION */ .accordion-bar { background-color: var(--parent-bar-bg); color: var(--parent-bar-text); border-radius: 0 var(--border-radius-base) var(--border-radius-base) 0; border-top: var(--border-width-sm) solid var(--border-outer); border-right: var(--border-width-sm) solid var(--border-outer); border-bottom: var(--border-width-sm) solid var(--border-outer); border-left: var(--border-width-brand) solid var(--state-border-left, var(--border-left)); /* Only the colour animates on open/close — border-radius is part of the same state swap but must snap, so the corner never lags the panel it belongs to. */ transition: border-color var(--transition-base); /*box-shadow: var(--shadow-base);*/ width: 100%; height: fit-content; display: inline-flex; align-items: center; justify-content: space-between; margin: 0; padding: var(--spacing-xs) var(--spacing-lg); } @media (min-width: 768px) { .accordion-bar { padding: var(--spacing-sm) var(--spacing-3xl); } } .accordion-bar .container-flex-between { width: 100%; display: flex; justify-content: space-between; align-items: center; flex-direction: row; gap: var(--spacing-md); } .accordion-bar.is-open { border-radius: 0 var(--border-radius-base) 0 0; } .accordion-bar.is-disabled { /* Grey the bar with color tokens rather than `filter: grayscale()`. A CSS filter clips its descendants to the element's box, which cut off the info-button tooltip when it opened above the bar (no z-index can escape a clip). Colour-based graying has no such side effect. */ background-color: var(--color-grey-100); border-top-color: var(--color-grey-100); border-right-color: var(--color-grey-100); border-bottom-color: var(--color-grey-100); border-left-color: var(--color-grey-200); box-shadow: none; cursor: default; } .accordion-bar.is-disabled .accordion-title { color: var(--color-grey-500); } /* A disabled bar hides every action button (chevron toggle + any extra buttons such as "Slet Alle"), not just the chevron. Each button is wrapped in a flex item, so we must hide the whole span — hiding only the button leaves an empty span that still consumes a gap slot and pushes the visible info button off the right edge. Everything except an explicit info button (kept to explain why the panel is disabled/empty) is hidden. The kept button carries .has-tooltip (see tooltip.css) for its explanatory bubble. */ .accordion-bar.is-disabled .content-right > span:has(> button:not(.has-tooltip)) { display: none; } /* Exception: when the toggle is the only control (no info button), keep its span in the layout but invisible, so a disabled/empty bar keeps the same height as a bar with a visible button instead of collapsing to the title height. When an info button IS present it already provides the height, so the toggle stays fully removed above (avoids pushing the info button). */ .accordion-bar.is-disabled .content-right:not(:has(button.has-tooltip)) > span:has(> button:not(.has-tooltip)) { display: inline; visibility: hidden; } .accordion-bar.is-disabled button.has-tooltip { display: inline-flex; pointer-events: auto; } /* The .form-ajax shell (overflow-y: auto, see screenmenu.css) wraps the bar, and an accordion shell is only as tall as its content — collapsed, the bar is the whole box (the .innerContent below it is empty until the panel is opened). A scroll container that tight has nowhere to put a scrollbar but inside the bar: the bar is squeezed and clipped into a thin, scrollable strip. It also clips whatever has to leave the box, like the .has-tooltip bubble that opens above a disabled bar (no z-index escapes a clip). Nothing scrolls at this level anyway — a table in the panel carries its own scroll chain (.dt-container → .dt-table), the same argument the title + body shape makes further down — so let every accordion shell overflow visibly. Scoped with :has(>) so only the accordion shape is affected; a shell wrapped around anything else keeps whatever overflow it was given. */ .form-ajax:has(> .accordion-bar) { overflow: visible; } .accordion-bar.is-child, .innerContent.content-container .accordion-bar { background-color: var(--child-bar-bg); color: var(--child-bar-text); width: 100%; } /* Open accordion's content-area gets a section tint so hierarchy is visible even when the area surrounds its children. Top-level open content = parent tint; nested = child tint. (Standalone, non-accordion .content-container panels are themed in base.css instead.) */ .innerContent.content-container { background-color: var(--parent-section-bg); color: var(--parent-section-text); border-right: var(--border-width-sm) solid var(--border-outer); border-bottom: var(--border-width-sm) solid var(--border-outer); border-left: var(--border-width-brand) solid var(--border-left); border-radius: 0 0 var(--border-radius-base) var(--border-radius-base); /* Fade the content both ways, in the same timing as the border-colour swap on the bar. Opening and closing is an inline display flip done by JS (Elem.show/hide from Loader.toggleContainer), which a transition normally cannot follow — `display … allow-discrete` makes it follow: on open display flips to block immediately and the opacity fades up, on close display waits at block until the fade-out has finished. The closed state has to be read off the inline style, because that is where JS puts it — there is no class to hook onto. */ opacity: 1; transition: opacity var(--transition-base), display var(--transition-base) allow-discrete; } .innerContent.content-container[style*="display: none"] { opacity: 0; } @media (prefers-reduced-motion: reduce) { .innerContent.content-container { transition: none; } } .innerContent.content-container .innerContent.content-container, .innerContent.content-container .content-container:not(.innerContent) { background-color: var(--child-section-bg); color: var(--child-section-text); } /* Grandchild bar (2 levels deep inside open content) */ .innerContent.content-container .innerContent.content-container .accordion-bar, .innerContent.content-container .content-container:not(.innerContent) .accordion-bar { background-color: var(--grandchild-bar-bg); color: var(--grandchild-bar-text); } /* Open/closed is the only thing that moves the border colours: every level draws the same --border-left / --border-outer pair, so one selector covers parent, child and grandchild bars. A state colour still wins — --state-border-left keeps its fallback position. */ .accordion-bar.is-open { border-left-color: var(--state-border-left, var(--accordion-open-border-left)); border-top-color: var(--accordion-open-border-outer); border-right-color: var(--accordion-open-border-outer); border-bottom-color: var(--accordion-open-border-outer); } /* Grandchild content-area (2 levels deep). Covers both flavours of nested section: .innerContent.content-container (toggle/accordion content) and standalone .content-container (home-view table wrapper from ReloadableDiv.php:539). */ .innerContent.content-container .innerContent.content-container .innerContent.content-container, .innerContent.content-container .innerContent.content-container .content-container:not(.innerContent), .innerContent.content-container .content-container:not(.innerContent) .innerContent.content-container, .innerContent.content-container .content-container:not(.innerContent) .content-container:not(.innerContent) { background-color: var(--grandchild-section-bg); color: var(--grandchild-section-text); } /* ========================================================================== 4. ACCORDION CONTENT Contains the title and the toggle button. ========================================================================== */ /* 4.1 ACCORDION TITLE */ .accordion-title { /* Inherit the bar's themed text colour (--{parent,child,grandchild}-bar-text) set on .accordion-bar, so the title tracks the level. The disabled rule above has higher specificity and still overrides this to grey. */ color: inherit; } /* 4.2 TOGGLE BUTTON */ /* Uses button secondary styling except bg color on default */ .button-toggle-accordion { padding: var(--spacing-sm) var(--spacing-sm); font-size: var(--font-size-body-base); color: var(--button-primary-bg); /* Remove our default button styles */ background-color: transparent; box-shadow: none; border: none; } /* 4.2.1 Disabled — greyed out and inert to match the disabled bar */ .accordion-bar.is-disabled .button-toggle-accordion, .button-toggle-accordion:disabled { color: var(--color-grey-500); opacity: var(--opacity-disabled); cursor: default; pointer-events: none; } /* 4.3 TOGGLE BUTTON BEHAVIOURS */ /* 4.3.1 Hover */ .button-toggle-accordion:hover { padding: var(--spacing-sm) var(--spacing-sm); font-size: var(--font-size-body-base); color: var(--button-tertiary-text); background-color: var(--color-grey-125); } /* 4.3.2 Active */ .button-toggle-accordion:active { padding: var(--spacing-sm) var(--spacing-sm); font-size: var(--font-size-body-base); color: var(--button-secondary-text); background-color: var(--button-secondary-active); } /* ========================================================================== 5. PANEL GROUP — SINGLE OUTER FRAME ========================================================================== The bar, the filter and the results panel each drew their own border. Stacked on top of each other they read as dividers *between* the elements — the filter in particular looked like it had a border top (the bar's bottom edge) and a border bottom (its own). Instead: strip every edge inside the group and let the .form-ajax shell draw one frame around the whole thing. Which element carries the frame depends on what topRow() rendered into the .form-ajax shell (cssClassBorder), because the frame must enclose the group and nothing else: accordion (toggleDivButtonType 1) shell = bar + body → frame on the shell plain div (toggleDivButtonType 0) shell = title + body → frame on .innerContent An accordion bar is the group's own header, so it belongs inside the frame. A .page-title-container is the page heading — it must stay outside, which rules the shell out for that shape and leaves the .innerContent (filter + results panel) as the group wrapper. On accordions the frame is drawn whether open or closed, so nothing shifts when it toggles — a closed bar looked identical with its own four borders anyway. Excluded: the shells modal.css flattens with `display: contents` — the direct children of .modal-body and of .modal-body > form. A frame on a display:contents box would not paint at all, so those panels must keep their own borders. The exclusion is deliberately limited to that one level: an accordion nested deeper in a modal (e.g. inside the animal modal's .grid-row > .grid-col-* columns) is a normal box, so it gets the same single frame — and the same edge-less bar — as on a page. The frame draws with the same themed pair as everything inside it (--border-outer / --border-left, see themes/theme-sandstone.css), so the group reads as one box no matter which element happens to carry the edge. */ .form-ajax:not(.modal-body > *):not(.modal-body > form > *):has(> .accordion-bar), .form-ajax:not(.modal-body > *):not(.modal-body > form > *):not(:has(> .accordion-bar)) > .innerContent:has(> .filter-container) { border-top: var(--border-width-sm) solid var(--border-outer); border-right: var(--border-width-sm) solid var(--border-outer); border-bottom: var(--border-width-sm) solid var(--border-outer); border-left: var(--border-width-brand) solid var(--border-left); /* The frame carries the open marker for a top-level (edge-less) bar, so it fades with the same timing as the bar's own border. */ transition: border-color var(--transition-base); /* Left corners stay square because of the wide brand accent, matching the closed bar and the standalone panels. */ border-radius: 0 var(--border-radius-base) var(--border-radius-base) 0; /* One shadow for the whole group. On a collapsed accordion the body is display:none, so the shell's box *is* the bar and the shadow lands on the bar alone; opening it grows the same box around bar + content, so the shadow wraps everything with no rule change and nothing to re-declare per state. */ box-shadow: var(--shadow-base); } /* The shell is a scroll container (overflow-y: auto, see screenmenu.css), and a scroll container clips its descendants' box shadows. On an accordion that is harmless — the frame sits on the shell itself, so nothing above it clips — but in the title + body shape the frame is on the .innerContent *inside* the shell, and --shadow-base has only downward offsets with a negative spread, so the whole shadow fell outside the .innerContent box and was clipped away. Nothing scrolls at this level (the shell just stacks the page title and the panel; tables carry their own scroll chain in .dt-container), so let it overflow. */ .form-ajax:not(.modal-body > *):not(.modal-body > form > *):not(:has(> .accordion-bar)):has(> .innerContent > .filter-container) { overflow: visible; } /* A disabled/empty accordion is greyed rather than filtered (see the .accordion-bar.is-disabled note above); the frame has to grey with it instead of shouting in the group colour — and stay flat, like the is-disabled bar itself. */ .form-ajax:not(.modal-body > *):not(.modal-body > form > *):has(> .accordion-bar.is-disabled) { border-color: var(--color-grey-100); border-left-color: var(--color-grey-200); box-shadow: none; } /* A top-level bar inside the frame is edge-less (see below), so its own is-open stripe never shows — the frame draws it instead. Carry the open marker onto the frame's left edge so the whole group is flagged. Only accordions get this. Everything outside an accordion keeps the default pair, with one exception in filter.css: the leading filter on a page that is built from several bar-less blocks. */ .form-ajax:not(.modal-body > *):not(.modal-body > form > *):has(> .accordion-bar.is-open) { border-color: var(--accordion-open-border-outer); border-left-color: var(--accordion-open-border-left); } /* Everything inside the frame goes edge-less: the bar, the .innerContent when it doubles as the section (toggle/table bodies), and the filter + results panel of a `home` or plain body. Direct-child scoped, so a nested div keeps its own frame. No :has() guard needed — these four patterns are exactly the ones that get a frame above. The filter's drop shadow goes too: it is a divider by another name, drawing the same faint line under the filter that the border used to. */ .form-ajax:not(.modal-body > *):not(.modal-body > form > *) > .accordion-bar, .form-ajax:not(.modal-body > *):not(.modal-body > form > *) > .innerContent.content-container, .form-ajax:not(.modal-body > *):not(.modal-body > form > *) > .innerContent > .filter-container, .form-ajax:not(.modal-body > *):not(.modal-body > form > *) > .innerContent > .content-container { border: 0; border-radius: 0; box-shadow: none; } /* A page body that is nothing but a table has no filter to be grouped with, so there is no group to frame: the table's own .dt-container card carries the surface. The wrapper goes flush — no panel background, no padding pushing the table in from the page edge — so it reads like the pages that render the table straight into .innerContent without a .content-container at all. A results panel that sits under a filter keeps its surface: there the frame above groups the two, and the panel is what fills it. */ .form-ajax:not(.modal-body > *):not(.modal-body > form > *):not(:has(> .accordion-bar)) > .innerContent:not(:has(> .filter-container)) > .content-container { padding: 0; background-color: transparent; } @media screen { .alert { font-family: Arial, sans-serif; font-size: 1.15em; text-align: center; padding: 8px; margin-top: 4px; margin-bottom: 4px; } .alert-warning { color: #000; background-color: #FFA; border: 1px solid orange; } }/* Card */ .article-content { display: flex; flex-direction: column; gap: var(--spacing-xl); background-color: var(--color-neutral-20); color: var(--color-neutral-700); padding-inline: var(--spacing-4xl); padding-block: var(--spacing-8xl); border-radius: var(--border-radius-base); border: var(--border-width-sm) solid var(--color-neutral-50); box-shadow: var(--shadow-base); min-height: 100%; } .article-content br { display: none; } .article-container { display: grid; gap: var(--spacing-5xl); grid-template-columns: 1fr; max-width: 1600px; padding-inline: var(--padding-inline-base); align-items: stretch; /* Keep the article content above the decorative background */ position: relative; z-index: 1; } .article-section { background-color: var(--color-neutral-100); justify-content: center; display: flex; padding-block: 65px; padding-inline: var(--spacing-xl); position: relative; overflow: hidden; } /* Decorative DanBred icon */ .article-section::before { content: ""; position: absolute; inset-inline-start: 0; inset-block-end: 0; width: 350px; height: 350px; /* Recolor the SVG by using it as a mask and filling with a CSS color. Inlined as a data URI because the static host sends no CORS header, and mask-image (unlike background-image) is CORS-restricted. */ --db-icon: url("data:image/svg+xml,%3Csvg%20fill%3D%22%23B81D2F%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22598%22%20height%3D%22498%22%3E%20%3Cpath%20d%3D%22M0%200%20C1.67040023%20-0.00702777%203.34080021%20-0.01411452%205.01119995%20-0.02125549%20C10.34340797%20-0.04070596%2015.6755726%20-0.04569308%2021.0078125%20-0.046875%20C21.92017166%20-0.04731686%2022.83253082%20-0.04775871%2023.77253723%20-0.04821396%20C54.65601857%20-0.05604613%2085.34143187%200.62347289%20116.1328125%203.203125%20C117.26376343%203.29740784%20118.39471436%203.39169067%20119.55993652%203.48883057%20C145.13430988%205.63736586%20170.64754067%208.17529611%20196.1328125%2011.203125%20C197.09790069%2014.25451201%20197.26071976%2014.91622716%20195.89208984%2017.98608398%20C195.2573877%2019.04641846%20194.62268555%2020.10675293%20193.96875%2021.19921875%20C193.62563782%2021.77968964%20193.28252563%2022.36016052%20192.92901611%2022.95822144%20C191.8006042%2024.85979979%20190.65457959%2026.75006907%20189.5078125%2028.640625%20C188.71571945%2029.96649501%20187.92454869%2031.29291642%20187.13427734%2032.61987305%20C182.26160738%2040.77788967%20177.29261113%2048.87706486%20172.24536133%2056.92822266%20C168.85799108%2062.35032188%20165.56461363%2067.82198404%20162.31640625%2073.328125%20C161.89456055%2074.042603%20161.47271484%2074.75708099%20161.03808594%2075.49320984%20C158.93664145%2079.05504743%20156.84149408%2082.62041287%20154.75439453%2086.19067383%20C150.87035972%2092.80499379%20146.9265786%2099.19360441%20142.1328125%20105.203125%20C138.01926086%20103.91259899%20134.22364015%20102.37682649%20130.3671875%20100.453125%20C129.31273437%2099.9271875%20128.25828125%2099.40125%20127.171875%2098.859375%20C126.08648437%2098.3128125%20125.00109375%2097.76625%20123.8828125%2097.203125%20C122.78195312%2096.6565625%20121.68109375%2096.11%20120.546875%2095.546875%20C119.49757813%2095.0209375%20118.44828125%2094.495%20117.3671875%2093.953125%20C116.41038086%2093.47359375%20115.45357422%2092.9940625%20114.46777344%2092.5%20C112.1328125%2091.203125%20112.1328125%2091.203125%20110.1328125%2089.203125%20C110.45267279%2085.23425778%20112.89564166%2081.95877181%20114.921875%2078.63671875%20C115.30338715%2078.0025856%20115.68489929%2077.36845245%20116.07797241%2076.71510315%20C117.29979853%2074.6873431%20118.52884131%2072.66406068%20119.7578125%2070.640625%20C120.56163974%2069.30690681%20121.36502943%2067.97292481%20122.16796875%2066.63867188%20C126.71924809%2059.09217474%20131.35668711%2051.60990376%20136.1328125%2044.203125%20C133.15250062%2042.71296906%20130.01202333%2042.76428516%20126.734375%2042.51953125%20C125.97025803%2042.45969055%20125.20614105%2042.39984985%20124.41886902%2042.3381958%20C121.86560845%2042.14115203%20119.31185448%2041.95225805%20116.7578125%2041.765625%20C115.42464493%2041.66766129%20115.42464493%2041.66766129%20114.06454468%2041.56771851%20C63.49526707%2037.88757155%2012.7388229%2036.28591246%20-37.8671875%2040.203125%20C-36.93898193%2040.50903564%20-36.01077637%2040.81494629%20-35.05444336%2041.13012695%20C29.42513868%2062.40440574%2092.33139607%2086.86362814%20151.1328125%20121.203125%20C152.29544863%20121.877123%20153.45838535%20122.55060269%20154.62158203%20123.22363281%20C167.15375494%20130.47609982%20179.67645731%20137.73560226%20191.84423828%20145.59033203%20C196.66041269%20148.68788037%20201.54389736%20151.64312938%20206.48046875%20154.54296875%20C208.42740575%20155.69469606%20210.37374963%20156.84742086%20212.32003784%20158.00024414%20C213.6033262%20158.75545965%20214.89003032%20159.50490322%20216.1802063%20160.24829102%20C217.98834139%20161.29056718%20219.78381361%20162.35212072%20221.578125%20163.41796875%20C222.62500488%20164.02761475%20223.67188477%20164.63726074%20224.75048828%20165.26538086%20C227.1328125%20167.203125%20227.1328125%20167.203125%20227.97998047%20169.93969727%20C228.05563232%20171.06009399%20228.05563232%20171.06009399%20228.1328125%20172.203125%20C225.69515258%20173.52352412%20223.25749128%20174.84392071%20220.81982422%20176.16430664%20C218.66517918%20177.33141979%20216.51055741%20178.49857589%20214.35595703%20179.66577148%20C208.89408506%20182.62451618%20203.43191788%20185.58271124%20197.96875%20188.5390625%20C188.34870995%20193.74572853%20178.73351974%20198.96088338%20169.1328125%20204.203125%20C156.47000427%20211.11735524%20143.78076742%20217.98257136%20131.09179688%20224.84863281%20C120.43039558%20230.61813068%20109.77246255%20236.39359296%2099.1328125%20242.203125%20C86.47000427%20249.11735524%2073.78076742%20255.98257136%2061.09179688%20262.84863281%20C50.43039558%20268.61813068%2039.77246255%20274.39359296%2029.1328125%20280.203125%20C21.51515111%20284.36257082%2013.89000973%20288.50790955%206.2578125%20292.640625%20C4.7720874%20293.44536255%204.7720874%20293.44536255%203.25634766%20294.26635742%20C-1.90225133%20297.05958877%20-7.06304361%20299.84868612%20-12.2265625%20302.6328125%20C-13.26723877%20303.19476318%20-14.30791504%20303.75671387%20-15.38012695%20304.33569336%20C-17.44016584%20305.44772973%20-19.5011884%20306.55794594%20-21.56323242%20307.66625977%20C-25.67408018%20309.88480714%20-29.76854394%20312.09951301%20-33.74609375%20314.55078125%20C-65.1631357%20333.80160152%20-108.22744207%20336.76225462%20-143.46679688%20328.60107422%20C-186.26764502%20318.13603168%20-221.7133162%20291.30790635%20-244.6171875%20253.765625%20C-253.13140532%20239.26386674%20-258.98281137%20224.57547111%20-262.8671875%20208.203125%20C-263.04652832%20207.46497559%20-263.22586914%20206.72682617%20-263.41064453%20205.96630859%20C-270.60725013%20174.84295471%20-265.96741096%20143.24718393%20-253.8671875%20114.203125%20C-255.43678223%20114.5885144%20-255.43678223%20114.5885144%20-257.03808594%20114.98168945%20C-295.83497766%20124.47823787%20-295.83497766%20124.47823787%20-311.8671875%20126.203125%20C-312.60517578%20126.2959375%20-313.34316406%20126.38875%20-314.10351562%20126.484375%20C-321.49185798%20127.348649%20-328.26364669%20127.203125%20-335.8671875%20127.203125%20C-335.8671875%20114.333125%20-335.8671875%20101.463125%20-335.8671875%2088.203125%20C-331.8246875%2087.831875%20-327.7821875%2087.460625%20-323.6171875%2087.078125%20C-279.35573351%2082.52275477%20-229.16470316%2068.83997053%20-191.73046875%2044.0390625%20C-135.46985417%207.96472573%20-65.49479106%200.17192664%200%200%20Z%20M-204.5546875%20103.953125%20C-221.5721289%20123.74956142%20-231.24175437%20148.1574941%20-232.8671875%20174.203125%20C-232.94839844%20175.24146484%20-232.94839844%20175.24146484%20-233.03125%20176.30078125%20C-234.32461803%20206.81250876%20-215.84598541%20235.27949071%20-196.1328125%20256.76953125%20C-195.38515625%20257.57261719%20-194.6375%20258.37570312%20-193.8671875%20259.203125%20C-192.83851563%20260.33041016%20-192.83851563%20260.33041016%20-191.7890625%20261.48046875%20C-171.41181459%20282.95205034%20-141.57216659%20295.29477352%20-112.21875%20296.484375%20C-100.48653612%20296.76477978%20-89.25732883%20296.0713246%20-77.8671875%20293.203125%20C-77.21137695%20293.0469873%20-76.55556641%20292.89084961%20-75.87988281%20292.72998047%20C-54.49268373%20287.40141138%20-34.7331964%20274.05681669%20-15.77075195%20263.20874023%20C-6.87417096%20258.14302996%202.17222707%20253.37415204%2011.2265625%20248.59887695%20C19.72855848%20244.1120441%2028.16825455%20239.5502181%2036.5078125%20234.765625%20C46.66491569%20228.94044501%2056.99783651%20223.47824079%2067.36099243%20218.03216553%20C76.38658079%20213.28617272%2085.34777326%20208.4638807%2094.1953125%20203.390625%20C102.95700959%20198.367252%20111.8480047%20193.64996042%20120.82763672%20189.02856445%20C128.97173333%20184.83120268%20137.02966542%20180.49197214%20145.05493164%20176.07202148%20C149.37579148%20173.69408478%20153.69968157%20171.36527396%20158.1328125%20169.203125%20C154.85004685%20166.47960707%20151.56329389%20164.15570711%20147.87109375%20162.0234375%20C146.84822266%20161.43159668%20145.82535156%20160.83975586%20144.77148438%20160.22998047%20C143.67384766%20159.60236816%20142.57621094%20158.97475586%20141.4453125%20158.328125%20C140.87546631%20158.00120667%20140.30562012%20157.67428833%20139.71850586%20157.33746338%20C73.35028245%20119.2841692%20-24.8587064%2064.42744863%20-204.5546875%20103.953125%20Z%20%22%20transform%3D%22translate%28335.8671875%2C-0.203125%29%22%2F%3E%20%3Cpath%20d%3D%22M0%200%20C0.66918961%200.2886644%201.33837921%200.5773288%202.02784729%200.8747406%20C4.04758545%201.78241188%206.03988519%202.73487227%208.03125%203.703125%20C9.14265854%204.23487083%209.14265854%204.23487083%2010.27651978%204.77735901%20C11.86263713%205.53649908%2013.4477074%206.29783022%2015.03179932%207.06118774%20C19.27307909%209.10400598%2023.52316585%2011.12831575%2027.7734375%2013.15234375%20C28.63508514%2013.56292526%2029.49673279%2013.97350677%2030.38449097%2014.39653015%20C38.58862242%2018.29703156%2046.84641346%2022.073194%2055.125%2025.8125%20C56.46887226%2026.42040117%2057.81270391%2027.02839213%2059.15649414%2027.63647461%20C60.1450666%2028.08379189%2060.1450666%2028.08379189%2061.15361023%2028.54014587%20C61.80803604%2028.83627274%2062.46246185%2029.1323996%2063.13671875%2029.4375%20C63.78417557%2029.73036392%2064.43163239%2030.02322784%2065.09870911%2030.32496643%20C71.76575096%2033.34257945%2078.42210492%2036.38307219%2085.06658936%2039.45004272%20C86.89272047%2040.29185741%2088.72099367%2041.12902039%2090.54931641%2041.96606445%20C91.63519043%2042.468396%2092.72106445%2042.97072754%2093.83984375%2043.48828125%20C94.79238037%2043.92696533%2095.74491699%2044.36564941%2096.72631836%2044.81762695%20C99%2046%2099%2046%20101%2048%20C100.63133646%2051.58034049%2099.46146754%2054.44366929%2097.84765625%2057.6328125%20C97.39970703%2058.52355469%2096.95175781%2059.41429687%2096.49023438%2060.33203125%20C96.01908203%2061.25371094%2095.54792969%2062.17539062%2095.0625%2063.125%20C94.62615234%2063.99253906%2094.18980469%2064.86007812%2093.74023438%2065.75390625%20C90.64405904%2071.87677752%2087.45265876%2077.94807796%2084.25%2084.015625%20C79.50969658%2092.99791027%2074.86077456%20102.02477937%2070.24215698%20111.07012939%20C67.96611015%20115.52724358%2065.6859147%20119.98223547%2063.40625%20124.4375%20C62.94911118%20125.33111237%2062.49197235%20126.22472473%2062.02098083%20127.14541626%20C52.73609117%20145.29202118%2043.40275076%20163.41416233%2034%20181.5%20C33.50105225%20182.46244629%2033.00210449%20183.42489258%2032.48803711%20184.41650391%20C32.03823486%20185.27937012%2031.58843262%20186.14223633%2031.125%20187.03125%20C30.54105469%20188.15370117%2030.54105469%20188.15370117%2029.9453125%20189.29882812%20C29%20191%2029%20191%2028%20192%20C22.46310876%20192.38576701%2016.8679199%20192.01630786%2011.3395977%20191.64362717%20C1.30373006%20190.97209091%20-8.70234627%20190.82157947%20-18.7578125%20190.796875%20C-20.53341191%20190.78985109%20-22.30901106%20190.78276429%20-24.08460999%20190.77561951%20C-29.76474348%20190.7561273%20-35.44483646%20190.75118101%20-41.125%20190.75%20C-42.09645084%20190.74955814%20-43.06790169%20190.74911629%20-44.06879044%20190.74866104%20C-75.68417807%20190.74112689%20-107.11398886%20191.32773309%20-138.65112305%20193.74353027%20C-142.17002964%20194.01302152%20-145.68946456%20194.27478001%20-149.20898438%20194.53613281%20C-195.05973392%20197.97431893%20-240.77806827%20202.64751057%20-286.375%20208.5625%20C-287.43782196%20208.69839539%20-288.50064392%20208.83429077%20-289.59567261%20208.9743042%20C-301.39021444%20210.49226414%20-313.09781444%20212.28746681%20-324.78125%20214.51171875%20C-325.82469574%20214.7095546%20-326.86814148%20214.90739044%20-327.94320679%20215.11122131%20C-361.41235105%20221.67679525%20-404.73025489%20234.36878138%20-429%20260%20C-429.66%20260.99%20-430.32%20261.98%20-431%20263%20C-438.13634581%20262.28811156%20-443.19443351%20258.39261048%20-448.98828125%20254.50878906%20C-450.87783241%20253.24811026%20-452.78521199%20252.01831568%20-454.6953125%20250.7890625%20C-455.89963309%20249.99138548%20-457.10280127%20249.19196524%20-458.3046875%20248.390625%20C-459.39765137%20247.66907227%20-460.49061523%20246.94751953%20-461.61669922%20246.20410156%20C-464%20244%20-464%20244%20-464.44555664%20241.37304688%20C-463.49846932%20236.32883387%20-459.31452456%20232.72814145%20-456%20229%20C-455.02353516%20227.88044922%20-455.02353516%20227.88044922%20-454.02734375%20226.73828125%20C-394.73613042%20163.10590008%20-274.20260858%20164.63536017%20-142.625%20152.75%20C-141.6081311%20152.6727771%20-140.59126221%20152.5955542%20-139.5435791%20152.51599121%20C-132.03245985%20151.95215796%20-124.51819255%20151.45937321%20-117%20151%20C-116.30780869%20150.95695992%20-115.61561737%20150.91391983%20-114.90245056%20150.8695755%20C-88.50965179%20149.23396569%20-62.21748903%20148.73207534%20-35.777771%20148.8626709%20C-31.03546061%20148.88371958%20-26.29312559%20148.89238606%20-21.55078125%20148.90234375%20C-12.36712755%20148.92332732%20-3.18357587%20148.95711245%206%20149%20C6.30273834%20148.06764023%206.60547668%20147.13528046%206.91738892%20146.17466736%20C7.98979225%20143.02993338%209.29481548%20140.25676369%2010.8359375%20137.31640625%20C11.39933838%20136.23601074%2011.96273926%20135.15561523%2012.54321289%20134.04248047%20C13.14770264%20132.89408691%2013.75219238%20131.74569336%2014.375%20130.5625%20C15.0088002%20129.35064172%2015.64217643%20128.13856161%2016.27514648%20126.92626953%20C17.56341642%20124.4605183%2018.8540815%20121.99604608%2020.14697266%20119.53271484%20C22.79469839%20114.4849426%2025.4279068%20109.42963429%2028.0625%20104.375%20C30.62823244%2099.45680321%2033.19467174%2094.53898275%2035.76660156%2089.62402344%20C37.57548944%2086.16701633%2039.38164468%2082.708592%2041.1875%2079.25%20C41.75283447%2078.17153809%2042.31816895%2077.09307617%2042.90063477%2075.98193359%20C43.42197998%2074.98242676%2043.9433252%2073.98291992%2044.48046875%2072.953125%20C44.94348389%2072.06786133%2045.40649902%2071.18259766%2045.88354492%2070.27050781%20C47.09921352%2067.92709195%2047.09921352%2067.92709195%2048%2065%20C46.8346875%2064.65453125%2045.669375%2064.3090625%2044.46875%2063.953125%20C37.96255589%2061.7793265%2031.84996657%2058.75283237%2025.67581177%2055.79275513%20C21.91311353%2053.9894866%2018.14206513%2052.20385652%2014.37109375%2050.41796875%20C13.20923805%2049.86724953%2013.20923805%2049.86724953%2012.02391052%2049.30540466%20C3.91047624%2045.46847515%20-4.25883036%2041.75781455%20-12.4375%2038.0625%20C-24.01603392%2032.82731459%20-35.54870364%2027.50916344%20-47%2022%20C-46.65463968%2019.33085299%20-46.34562265%2018.27133734%20-44.19165039%2016.58032227%20C-43.00043579%2015.92374634%20-43.00043579%2015.92374634%20-41.78515625%2015.25390625%20C-40.87910645%2014.74230957%20-39.97305664%2014.23071289%20-39.03955078%2013.70361328%20C-38.03649902%2013.1414209%20-37.03344727%2012.57922852%20-36%2012%20C-33.80924686%2010.67901154%20-31.62053151%209.35463916%20-29.43359375%208.02734375%20C-27.69406477%207.00328581%20-25.95034441%205.98686162%20-24.2043457%204.97387695%20C-23.0180315%204.27802179%20-21.83833489%203.57077034%20-20.6652832%202.8527832%20C-18.93715448%201.79783341%20-17.18964223%200.78495427%20-15.43359375%20-0.22265625%20C-14.41322021%20-0.82859619%20-13.39284668%20-1.43453613%20-12.34155273%20-2.05883789%20C-7.51973671%20-3.41692226%20-4.47433537%20-1.95527192%200%200%20Z%20%22%20transform%3D%22translate%28497%2C235%29%22%2F%3E%20%3C%2Fsvg%3E"); background-color: var(--color-neutral-125); mask: var(--db-icon) left bottom / contain no-repeat; -webkit-mask: var(--db-icon) left bottom / contain no-repeat; pointer-events: none; z-index: 0; } /* ========================= RESPONSIVE COLUMNS ========================= */ /* Tablet */ @media (min-width: 768px) { .article-container { grid-template-columns: repeat(2, 1fr); } .article-container > :first-child { grid-column: 1 / -1; } } @media (min-width: 1024px) { .article-container { grid-template-columns: repeat(3, 1fr); } .article-container > :first-child { grid-column: 1; } } /* Title */ .article-title { color: var(--color-neutral-650); margin: 0; } /* Line under title */ .article-title::after { content: ""; display: block; width: 44px; height: var(--border-width-brand); margin-top: var(--spacing-sm); background-color: var(--color-neutral-100); } /* Text */ .article-text { font-size: var(--font-size-body-sm); line-height: var(--line-height-md); color: var(--color-neutral-700); display: flex; flex-direction: column; gap: var(--spacing-base); } .article-text strong { letter-spacing: var(--letter-spacing-sm); font-weight: var(--font-weight-semi-bold); font-size: var(--font-size-body-sm); color: var(--color-neutral-650); } /* Dark mode */ /* body.dark-mode .articleTitle { color: red; } */.badge { display: inline-flex; align-items: center; gap: var(--spacing-2xs); padding: var(--spacing-2xs) var(--spacing-sm); height: fit-content; /* Normalt kasus og medium vægt for alle badges. Versaler med sperring var før forbeholdt status-badges, og selv om skriftstørrelsen er den samme 11px begge steder, læses en versalsat streng bredere og tungere - to badges ved siden af hinanden så ud til at være sat i hver sin størrelse. Tilstanden bæres af farve og ikon; typografien behøver ikke også råbe. */ font-size: var(--font-size-body-sm); font-weight: var(--font-weight-medium); letter-spacing: normal; text-transform: none; line-height: normal; border-radius: var(--border-radius-full); border: var(--border-width-sm) solid var(--state-border, var(--state-neutral-border)); background-color: var(--state-bg-medium, var(--state-neutral-bg-medium)); color: var(--state-text, var(--state-neutral-text)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Neutral carries a readout, not a verdict. The medium fill is the lightness the app greys things out with, so on neutral it read as the failed one: a lighter fill and a border dark enough to draw against the panel instead. Typography is no longer part of the difference - the base rule now carries what used to be set here. Every neutral badge, tone class or not; the fill outweighs .is-tone-* by specificity. */ .badge.is-state-neutral { background-color: var(--state-neutral-bg-soft); border-color: var(--state-neutral-border); } .badge-icon { display: flex; align-items: center; justify-content: center; gap: var(--spacing-2xs); } /* A badge whose icon is left out (the last-modified readout, where the clock sits on the detail label instead) must not keep the gap the empty span would otherwise still get from .badge. */ .badge-icon:empty { display: none; } .badge-icon i { font-size: var(--font-size-body-base); } .badge-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* A whole list of values in one cell - a table field that holds several codes, one per line. The badges wrap as a block instead of stretching the column, and the gap is tighter than the legend's: these entries belong to one value, they are not separate entries that each need room around them. */ .badge-list { display: flex; flex-wrap: wrap; gap: var(--spacing-2xs); } /* A row of badges used as a legend - each badge followed by what it means. The row gap separates the entries, the entry gap ties a badge to its own text. */ .badge-legend { display: flex; align-items: center; flex-wrap: wrap; gap: var(--spacing-lg); } .badge-legend-item { display: inline-flex; align-items: center; gap: var(--spacing-2xs); } /* Base reset */ html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; box-sizing: border-box; scroll-behavior: smooth; } *, *::before, *::after { box-sizing: inherit; } /* Body */ body { margin: 0; font-family: var(--font-family-body), serif; font-size: var(--font-size-body-base); color: var(--color-black); overflow-x: hidden; background: var(--color-neutral-15); } form { margin-block-end: 0; } /* .form-ajax > .innerContent { background: pink; padding: 20px; } */ /* Container */ .container { width: 100%; margin-inline: auto; padding-inline: var(--padding-inline-base); max-width: 2400px; } .main-container { width: 100%; margin-inline: auto; padding-inline: var(--padding-inline-base); padding-top: var(--padding-block-base); max-width: 2400px; } .main-content { padding-top: var(--spacing-base); padding-bottom: 85px; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--spacing-3xl); } .main-content > * { min-width: 0; } .page-title-container { padding-block: var(--padding-block-lg); } /* Content */ .content { padding-block: var(--padding-block-base); } .contentRow { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--grid-gap); } .contentRow > * { min-width: 0; } .test { background-color: hotpink !important; padding: 20px; } ul { margin: 0; padding: 0; } img { max-width: 100%; height: auto; } .hide { display: none; } .show { display: block; } .innerContent.show { display: block; } .innerContent.hide { display: none; } /* The export buttons and the table below them are concatenated as flat siblings by exportButtonsTable() — only some divs wrap the pair in a .contentRow, and without one there is no parent carrying a gap, so the buttons sit glued to the table. Giving .innerContent the same single-column grid as a .contentRow makes the two cases look alike. Panels (.innerContent.content-container) bring their own grid and are left to it. */ .innerContent:not(.content-container):has(> .table-button-container) { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--grid-gap); } .hidden { display: none; } .only-print, .only-print * { display: none; } .general-container { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--spacing-3xl); } .test-1 { padding: 20px; background-color: greenyellow; } .test-3 { padding: 20px; background-color: deepskyblue; } /*Better name for this later*/ .content-container { padding-inline: var(--spacing-lg); padding-bottom: var(--spacing-3xl); padding-top: var(--spacing-lg); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--grid-gap); white-space: normal; } /* Bg/border kun på standalone content-container. Når klassen kombineres med .innerContent (åben accordion's indhold, sat i ReloadableDiv.php), skal accordion-rammen bære hierarkiet — ikke en konkurrerende baggrund. Baggrunden kommer fra det aktive temas parent-section-variabler og kanterne fra det fælles --border-outer / --border-left-par (se themes/theme-sandstone.css), så panelet følger temaet. */ .content-container:not(.innerContent) { border-radius: 0 0 10px 0; background-color: var(--parent-section-bg); border-top: var(--border-width-sm) solid var(--border-outer); border-right: var(--border-width-sm) solid var(--border-outer); border-bottom: var(--border-width-sm) solid var(--border-outer); border-left: var(--border-width-brand) solid var(--border-left); } .content-container > * { min-width: 0; } .force-right { text-align: right; } .container-flex-between { width: 100%; display: flex; justify-content: space-between; align-items: start; flex-direction: column; gap: var(--spacing-2xs); } .container-flex { width: 100%; display: flex; justify-content: start; align-items: center; flex-direction: row; } /* Left / right grouping */ .content-right { text-align: right; justify-content: end; } .content-left { text-align: left; justify-content: start; } .content-left, .content-right { display: flex; align-items: center; gap: var(--spacing-sm); flex-wrap: wrap; } @media (min-width: 768px) { .container-flex-between { align-items: center; flex-direction: row; } .content-left { flex-direction: row; margin-right: auto; gap: var(--spacing-sm); flex-wrap: wrap; } .content-right { margin-left: auto; justify-content: end; gap: var(--spacing-sm); flex-wrap: wrap; } /*Better name for this later*/ .content-container { padding-inline: var(--spacing-3xl); padding-bottom: 35px; padding-top: var(--spacing-3xl); } } .breadcrumb { display: inline-flex; align-items: center; list-style: none; gap: var(--spacing-xs); padding-inline: 0; padding-block: var(--spacing-xs); margin: 0; background-color: transparent; font-size: var(--font-size-body-sm); letter-spacing: var(--letter-spacing-base); } .breadcrumb-item { display: inline-flex; align-items: center; } .breadcrumb-item a { text-decoration: none; color: var(--button-primary-bg); } .breadcrumb-item a:hover { color: var(--button-primary-bg-hover); transition: all var(--transition-base); } .breadcrumb-separator { display: inline-flex; align-items: center; color: var(--button-secondary-bg); } .breadcrumb-content { display: inline-flex; align-items: center; gap: var(--spacing-2xs); } .breadcrumb-icon { display: inline-flex; align-items: center; } .breadcrumb-label { color: var(--button-secondary-bg-hover); } .breadcrumb-current { font-weight: var(--font-weight-medium); color: var(--button-secondary-bg); } /* The first item (home) is rendered in the primary colour */ .breadcrumb-home { color: var(--button-primary-bg); } .breadcrumb-item a:hover > .breadcrumb-home { color: var(--button-primary-bg-hover); } .breadcrumb-home .breadcrumb-label { color: inherit; } /* ----- ROOT ------ */ :root { /* --- Primary --- */ --button-primary-bg: var(--color-grey-750); --button-primary-bg-hover: color-mix(in hsl, var(--button-primary-bg), white 15%); --button-primary-border: color-mix(in hsl, var(--button-primary-bg), black 10%); --button-primary-border-hover: color-mix(in hsl, var(--button-primary-border), white 15%); --button-primary-text: var(--color-white); --button-primary-active: color-mix(in hsl, var(--button-primary-bg), black 15%); /* --- Secondary --- */ --button-secondary-bg: var(--color-grey-550); --button-secondary-bg-hover: color-mix(in hsl, var(--button-secondary-bg), black 15%); --button-secondary-border: color-mix(in hsl, var(--button-secondary-bg), black 10%); --button-secondary-border-hover: color-mix(in hsl, var(--button-secondary-border), black 15%); --button-secondary-text: var(--color-white); --button-secondary-active: color-mix(in hsl, var(--button-secondary-bg), black 15%); /* --- Tertiary --- */ --button-tertiary-bg: var(--color-white); --button-tertiary-bg-hover: color-mix(in hsl, var(--button-tertiary-bg), black 5%); --button-tertiary-border: color-mix(in hsl, var(--button-tertiary-bg), black 35%); --button-tertiary-border-hover: color-mix(in hsl, var(--button-tertiary-border), black 10%); --button-tertiary-text: var(--button-primary-bg); --button-tertiary-active: color-mix(in hsl, var(--button-tertiary-bg), black 5%); /* --- Status buttons: success, warning, danger --- One recipe for all three: fill at 125, border at 200, label at 800, each in the state's own hue. Danger used to be the odd one out - a solid 600 fill with white text - which made a delete button the heaviest thing on a page full of light ones. It is soft now like its two siblings. The label sits at 800 and not at 700, where success and warning had it. At 700 the label measured 4,26:1 on success and 4,03:1 on warning, both under the 4,5:1 that SC 1.4.3 asks of an 11px label - button text is nowhere near WCAG's large-text threshold. At 800 the three land on 7,50:1, 7,26:1 and 9,38:1, and the hover fill (the same fill mixed 7,5% into black) still leaves 6,16:1 at worst. Warning's label also changes hue: it was --color-yellow-700, hue 30, on a hue 42 fill - a different yellow from the one it sat on. */ /* --- Success / Save --- */ --button-success-bg: var(--color-status-green-100); --button-success-bg-hover: color-mix(in hsl, var(--button-success-bg), black 5%); --button-success-border: var(--color-status-green-600); --button-success-border-hover: color-mix(in hsl, var(--button-success-border), black 10%); --button-success-text: var(--color-status-green-700); --button-success-active: color-mix(in hsl, var(--button-success-bg), black 10%); /* --- Warning --- */ --button-warning-bg: var(--color-status-yellow-100); --button-warning-bg-hover: color-mix(in hsl, var(--button-warning-bg), black 7.5%); --button-warning-border: var(--color-status-yellow-600); --button-warning-border-hover: color-mix(in hsl, var(--button-warning-border), black 10%); --button-warning-text: var(--color-status-yellow-700); --button-warning-active: color-mix(in hsl, var(--button-warning-bg), black 10%); /* --- Danger / Delete --- */ --button-danger-bg: var(--color-status-red-100); --button-danger-bg-hover: color-mix(in hsl, var(--button-danger-bg), black 5%); --button-danger-border: var(--color-brand-red); --button-danger-border-hover: color-mix(in hsl, var(--button-danger-border), black 10%); --button-danger-text: var(--color-brand-red); --button-danger-active: color-mix(in hsl, var(--button-danger-bg), black 10%); /* --- Styling --- */ --button-border-radius: var(--border-radius-base); --button-border-width: var(--border-width-sm); --button-font-size: var(--font-size-body-xs); --button-icon-only-font-size: var(--font-size-body-xl); --button-font-weight: var(--font-weight-bold); --button-letter-spacing: var(--letter-spacing-base); --button-shadow: var(--shadow-base); --button-outline-color: var(--color-blue-desat-300); /* --- Size base --- */ --button-base-height: 32px; --button-base-gap: var(--spacing-sm); --button-base-padding: var(--spacing-base); --button-base-icon-only-padding: var(--spacing-sm); /* --- Size sm --- */ --button-sm-height: 30px; --button-sm-gap: var(--spacing-xs); --button-sm-padding: var(--spacing-sm); --button-sm-icon-only-padding: var(--spacing-xs); /* --- Size xs --- */ --button-xs-height: 28px; --button-xs-gap: var(--spacing-2xs); --button-xs-padding: var(--spacing-xs); --button-xs-icon-only-padding: var(--spacing-2xs); } /* ----- BASE BUTTON ------ */ /* Tab titles are inside .nav-tabs > li, so they cannot carry .button without the markup change. They are listed here instead, so they inherit the interaction properties (transition, shadow, cursor, outline reset) along with the shape and typography. tabs.css loads after this file and keeps the tab-specific overrides — sm sizing, top-only radius, the border-bottom trick and the secondary/primary state mapping. */ .button, button, .nav-tabs > li > a { display: inline-flex; align-items: center; justify-content: center; /* Size base by default */ height: var(--button-base-height); gap: var(--button-base-gap); padding-inline: var(--button-base-padding); font-size: var(--button-font-size); font-weight: var(--button-font-weight); letter-spacing: var(--button-letter-spacing); text-transform: uppercase; line-height: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left; border-radius: var(--button-border-radius); border: var(--button-border-width) solid transparent; outline: none; cursor: pointer; box-sizing: border-box; box-shadow: var(--button-shadow); transition: all var(--transition-base); } .button > i, button > i, .nav-tabs > li > a > i { font-size: var(--button-icon-only-font-size); text-align: center; flex-shrink: 0; } /* ----- VARIANTS ----- */ /* --- Icon only --- */ .is-icon-only-button { padding-inline: var(--button-base-icon-only-padding); } /* --- SIZES --- */ /* --- Xs --- */ .button.is-size-xs, button.is-size-xs { height: var(--button-xs-height); gap: var(--button-xs-gap); padding-inline: var(--button-xs-padding); font-size: var(--font-size-body-2xs); } .button.is-size-xs > i, button.is-size-xs > i { font-size: var(--font-size-body-sm); } .is-icon-only-button.is-size-xs { padding-inline: var(--button-xs-icon-only-padding); } /* All buttons in tables (export buttons too) are size xs */ table button, table .button, .table-export-button-container button, .table-export-button-container .button { height: var(--button-xs-height); gap: var(--button-xs-gap); padding-inline: var(--button-xs-padding); } table .is-icon-only-button, .table-export-button-container .is-icon-only-button { padding-inline: var(--button-xs-icon-only-padding); } /* --- Sm --- */ .button.is-size-sm, button.is-size-sm { height: var(--button-sm-height); gap: var(--button-sm-gap); padding-inline: var(--button-sm-padding); font-size: var(--font-size-body-xs); } .button.is-size-sm > i, button.is-size-sm > i { font-size: var(--font-size-body-base); } .is-icon-only-button.is-size-sm { padding-inline: var(--button-sm-icon-only-padding); } /* --- Primary --- */ .is-button-primary { background-color: var(--button-primary-bg); color: var(--button-primary-text); border-color: var(--button-primary-border); } .is-button-primary:hover { background-color: var(--button-primary-bg-hover); border-color: var(--button-primary-border-hover); } .is-button-primary:active { background-color: var(--button-primary-active); } /* --- Secondary --- */ .is-button-secondary { background-color: var(--button-secondary-bg); color: var(--button-secondary-text); border-color: var(--button-secondary-border); } .is-button-secondary:hover { background-color: var(--button-secondary-bg-hover); border-color: var(--button-secondary-border-hover); } .is-button-secondary:active { background-color: var(--button-secondary-active); } /* --- Tertiary --- */ .is-button-tertiary { background-color: var(--button-tertiary-bg); color: var(--button-tertiary-text); border-color: var(--button-tertiary-border); } .is-button-tertiary:hover { background-color: var(--button-tertiary-bg-hover); border-color: var(--button-tertiary-border-hover); } .is-button-tertiary:active { background-color: var(--button-tertiary-active); } /* --- Success / Save --- */ .is-button-success { background-color: var(--button-success-bg); color: var(--button-success-text); border-color: var(--button-success-border); } .is-button-success:hover { background-color: var(--button-success-bg-hover); border-color: var(--button-success-border-hover); } .is-button-success:active { background-color: var(--button-success-active); } /* --- Warning --- */ .is-button-warning { background-color: var(--button-warning-bg); color: var(--button-warning-text); border-color: var(--button-warning-border); } .is-button-warning:hover { background-color: var(--button-warning-bg-hover); border-color: var(--button-warning-border-hover); } .is-button-warning:active { background-color: var(--button-warning-active); } /* --- Danger / Delete --- */ .is-button-danger { background-color: var(--button-danger-bg); color: var(--button-danger-text); border-color: var(--button-danger-border); } .is-button-danger:hover { background-color: var(--button-danger-bg-hover); border-color: var(--button-danger-border-hover); } .is-button-danger:active { background-color: var(--button-danger-active); } /* --- WCAG keyboard accessibility --- */ /* button:focus-visible, .button:focus-visible { box-shadow: 0 0 0 1px var(--button-outline-color, #5bc0ff), 0 0 2px 1px rgba(91, 192, 255, 0.6), 0 0 2px 1px rgba(91, 192, 255, 0.4); } */ /* --- Mobile only (icon only) --- */ @media (max-width: 900px) { .button-mobile-icon-only > span { display: none; } .button-mobile-icon-only { padding-inline: var(--button-base-icon-only-padding); } } /* --- Mobile: prevent overflow on long button text with ellipses (...) --- */ @media (max-width: 768px) { .button, button { max-width: 100%; } .button:not(:has(*)), button:not(:has(*)) { display: inline-block; line-height: calc(var(--button-base-height) - 2 * var(--button-border-width)); } .button.is-size-sm:not(:has(*)), button.is-size-sm:not(:has(*)) { line-height: calc(var(--button-sm-height) - 2 * var(--button-border-width)); } .button.is-size-xs:not(:has(*)), button.is-size-xs:not(:has(*)), table button:not(:has(*)), table .button:not(:has(*)), .table-export-button-container button:not(:has(*)), .table-export-button-container .button:not(:has(*)) { line-height: calc(var(--button-xs-height) - 2 * var(--button-border-width)); } } /* ----- FILE INPUT BUTTON ----- renders a native picker button followed by the filename. The .button rules above style the outer input box; these rules tame that and style ::file-selector-button so the inner picker matches the project's button system. */ input[type="file"].button { /* Undo the button-box look on the input itself; the inner ::file-selector-button is the actual button. */ padding: 0; background: transparent; border: none; box-shadow: none; text-transform: none; letter-spacing: normal; overflow: hidden; cursor: pointer; } input[type="file"].button::file-selector-button { display: inline-flex; align-items: center; justify-content: center; height: 100%; margin-inline-end: var(--spacing-sm); padding-inline: var(--button-base-padding); font-size: var(--button-font-size); font-weight: var(--button-font-weight); letter-spacing: var(--button-letter-spacing); text-transform: uppercase; line-height: normal; border-radius: var(--button-border-radius); border: var(--button-border-width) solid transparent; box-shadow: var(--button-shadow); cursor: pointer; transition: all var(--transition-base); } /* Variant color inheritance — picker button picks up the same .is-button-* variant declared on the input. */ input[type="file"].is-button-primary::file-selector-button { background-color: var(--button-primary-bg); color: var(--button-primary-text); border-color: var(--button-primary-border); } input[type="file"].is-button-primary:hover::file-selector-button { background-color: var(--button-primary-bg-hover); border-color: var(--button-primary-border-hover); } input[type="file"].is-button-secondary::file-selector-button { background-color: var(--button-secondary-bg); color: var(--button-secondary-text); border-color: var(--button-secondary-border); } input[type="file"].is-button-secondary:hover::file-selector-button { background-color: var(--button-secondary-bg-hover); border-color: var(--button-secondary-border-hover); } input[type="file"].is-button-success::file-selector-button { background-color: var(--button-success-bg); color: var(--button-success-text); border-color: var(--button-success-border); } input[type="file"].is-button-success:hover::file-selector-button { background-color: var(--button-success-bg-hover); border-color: var(--button-success-border-hover); } /* Wrapper for : hides the browser's locale "no file chosen" text (font-size:0 collapses the input's intrinsic filename area; the existing ::file-selector-button rule above declares its own font-size so the button label stays). The translated replacement is rendered as a sibling .file-input-empty span in PHP so it goes through Lang::t. */ .file-input-wrap { display: inline-flex; align-items: center; } .file-input-wrap input[type="file"].button { font-size: 0; min-width: 0; width: max-content; } .file-input-empty { color: var(--button-primary-bg); font-size: var(--font-size-body-sm); } /* --- SCROLL TO TOP --- */ .scroll-to-top-button { font-size: var(--font-size-body-3xl); height: 40px; width: 40px; position: fixed; bottom: var(--spacing-5xl); right: var(--spacing-5xl); text-decoration: none; z-index: var(--z-sticky); opacity: var(--opacity-muted); transition: opacity var(--transition-base); } .scroll-to-top-button:hover { color: var(--button-secondary-text); opacity: var(--opacity-hover); }@media screen { .asButton { font-size: 1em; font-weight: bold; text-align: center; padding: 2px 4px; } .btn-xs { font-size: smaller; } .btn-warning { background-color: yellow; color: black; } .btn-invalid { background-color: red; color: yellow; border-width: 3px; } .btn-link { background-color: transparent; margin: 4px; padding: 2px 4px; border: none; color: #222; font-weight: bold; } .btn-link:hover, .btn-link:focus, .btn-link:active { color: #fff; background-color: #a79c94; } /* .btn-icon { background-color: transparent; font-size: 1.25em; font-weight: bold; border: none; line-height: 1.5; color: #222; padding: 2px 4px; } .btn-icon:hover, .btn-icon:focus, .btn-icon:active, .btn-icon.active { color: #000; background-color: #FFF; border: #a79c94 solid 1px; line-height: 1.5; padding: 1px 3px; } */ .btn-action { font-weight: bold; color: #000; background-color: #0ff21d; border: #05520b solid 1px; border-radius: 1em; padding: 2px 4px; font-size: 1em; } .btn-action:hover, .btn-action:focus, .btn-action:active, .btn-action.active { color: #fff; background-color: #05520b; } .btn-blue { background: lightskyblue; } .btn-xxs, .btn-group-xxs > .btn { border-radius: 1em; font-size: 0.8em; line-height: 1em; padding: 0 2px; } } @media print { /* button { font-weight: bold; background-color: transparent; border: none; } .btn { font-weight: 700; color: #222; background-color: transparent; border: solid transparent; border-radius: 2em; border-width: 1px 3px 3px 1px; } */ .btn-info { border: none; padding: 1mm; margin: 1mm; } .btn-link, .btn-xs, .btn-group-xs > .btn { line-height: 0.8; } .btn-warning { background-color: #eea236; color: black; -webkit-print-color-adjust: exact; color-adjust: exact; } }:root { /* Common color pattern Base color: S: 100% L: 95%,90%,80%,70%,60%,50%,40%,30%,20%,10%,5% Desat: S: 50% L: 95%,90%,80%,70%,60%,50%,40%,30%,20%,10%,5% */ /* --- Red --- */ --color-red-50: hsl(345, 100%, 95%); --color-red-75: hsl(345, 100%, 92.5%); --color-red-100: hsl(345, 100%, 90%); --color-red-200: hsl(345, 100%, 80%); --color-red-300: hsl(345, 100%, 70%); --color-red-400: hsl(345, 100%, 60%); --color-red-500: hsl(345, 100%, 50%); --color-red-600: hsl(345, 100%, 40%); --color-red-700: hsl(345, 100%, 30%); --color-red-800: hsl(345, 100%, 20%); --color-red-900: hsl(345, 100%, 10%); --color-red-950: hsl(345, 100%, 5%); --color-red-desat-50: hsl(345, 50%, 95%); --color-red-desat-100: hsl(345, 50%, 90%); --color-red-desat-200: hsl(345, 50%, 80%); --color-red-desat-300: hsl(345, 50%, 70%); --color-red-desat-400: hsl(345, 50%, 60%); --color-red-desat-500: hsl(345, 50%, 50%); --color-red-desat-600: hsl(345, 50%, 40%); --color-red-desat-700: hsl(345, 50%, 30%); --color-red-desat-800: hsl(345, 50%, 20%); --color-red-desat-900: hsl(345, 50%, 10%); --color-red-desat-950: hsl(345, 50%, 5%); /* --- Blue (full scale, 0–1000 in steps of 25; L = 100 − n/10) --- */ --color-blue-0: hsl(205.79, 100%, 100%); --color-blue-25: hsl(205.79, 100%, 97.5%); --color-blue-50: hsl(205.79, 100%, 95%); --color-blue-75: hsl(205.79, 100%, 92.5%); --color-blue-100: hsl(205.79, 100%, 90%); --color-blue-125: hsl(205.79, 100%, 87.5%); --color-blue-150: hsl(205.79, 100%, 85%); --color-blue-175: hsl(205.79, 100%, 82.5%); --color-blue-200: hsl(205.79, 100%, 80%); --color-blue-225: hsl(205.79, 100%, 77.5%); --color-blue-250: hsl(205.79, 100%, 75%); --color-blue-275: hsl(205.79, 100%, 72.5%); --color-blue-300: hsl(205.79, 100%, 70%); --color-blue-325: hsl(205.79, 100%, 67.5%); --color-blue-350: hsl(205.79, 100%, 65%); --color-blue-375: hsl(205.79, 100%, 62.5%); --color-blue-400: hsl(205.79, 100%, 60%); --color-blue-425: hsl(205.79, 100%, 57.5%); --color-blue-450: hsl(205.79, 100%, 55%); --color-blue-475: hsl(205.79, 100%, 52.5%); --color-blue-500: hsl(205.79, 100%, 50%); --color-blue-525: hsl(205.79, 100%, 47.5%); --color-blue-550: hsl(205.79, 100%, 45%); --color-blue-575: hsl(205.79, 100%, 42.5%); --color-blue-600: hsl(205.79, 100%, 40%); --color-blue-625: hsl(205.79, 100%, 37.5%); --color-blue-650: hsl(205.79, 100%, 35%); --color-blue-675: hsl(205.79, 100%, 32.5%); --color-blue-700: hsl(205.79, 100%, 30%); --color-blue-725: hsl(205.79, 100%, 27.5%); --color-blue-750: hsl(205.79, 100%, 25%); --color-blue-775: hsl(205.79, 100%, 22.5%); --color-blue-800: hsl(205.79, 100%, 20%); --color-blue-825: hsl(205.79, 100%, 17.5%); --color-blue-850: hsl(205.79, 100%, 15%); --color-blue-875: hsl(205.79, 100%, 12.5%); --color-blue-900: hsl(205.79, 100%, 10%); --color-blue-925: hsl(205.79, 100%, 7.5%); --color-blue-950: hsl(205.79, 100%, 5%); --color-blue-975: hsl(205.79, 100%, 2.5%); --color-blue-1000: hsl(205.79, 100%, 0%); --color-blue-desat-50: hsl(205.79, 50%, 95%); --color-blue-desat-75: hsl(205.79, 50%, 92.5%); --color-blue-desat-100: hsl(205.79, 50%, 90%); --color-blue-desat-200: hsl(205.79, 50%, 80%); --color-blue-desat-300: hsl(205.79, 50%, 70%); --color-blue-desat-400: hsl(205.79, 50%, 60%); --color-blue-desat-500: hsl(205.79, 50%, 50%); --color-blue-desat-600: hsl(205.79, 50%, 40%); --color-blue-desat-700: hsl(205.79, 50%, 30%); --color-blue-desat-800: hsl(205.79, 50%, 20%); --color-blue-desat-900: hsl(205.79, 50%, 10%); --color-blue-desat-950: hsl(205.79, 50%, 5%); /* --- Green --- */ --color-green-50: hsl(161.76, 100%, 95%); --color-green-100: hsl(161.76, 100%, 90%); --color-green-200: hsl(161.76, 100%, 80%); --color-green-300: hsl(161.76, 100%, 70%); --color-green-400: hsl(161.76, 100%, 60%); --color-green-500: hsl(161.76, 100%, 50%); --color-green-600: hsl(161.76, 100%, 40%); --color-green-700: hsl(161.76, 100%, 30%); --color-green-800: hsl(161.76, 100%, 20%); --color-green-900: hsl(161.76, 100%, 10%); --color-green-950: hsl(161.76, 100%, 5%); --color-green-desat-50: hsl(161.76, 50%, 95%); --color-green-desat-100: hsl(161.76, 50%, 90%); --color-green-desat-200: hsl(161.76, 50%, 80%); --color-green-desat-300: hsl(161.76, 50%, 70%); --color-green-desat-400: hsl(161.76, 50%, 60%); --color-green-desat-500: hsl(161.76, 50%, 50%); --color-green-desat-600: hsl(161.76, 50%, 40%); --color-green-desat-700: hsl(161.76, 50%, 30%); --color-green-desat-800: hsl(161.76, 50%, 20%); --color-green-desat-900: hsl(161.76, 50%, 10%); --color-green-desat-950: hsl(161.76, 50%, 5%); /* --- Purple --- */ --color-purple-50: hsl(267.02, 100%, 95%); --color-purple-100: hsl(267.02, 100%, 90%); --color-purple-200: hsl(267.02, 100%, 80%); --color-purple-300: hsl(267.02, 100%, 70%); --color-purple-400: hsl(267.02, 100%, 60%); --color-purple-500: hsl(267.02, 100%, 50%); --color-purple-600: hsl(267.02, 100%, 40%); --color-purple-700: hsl(267.02, 100%, 30%); --color-purple-800: hsl(267.02, 100%, 20%); --color-purple-900: hsl(267.02, 100%, 10%); --color-purple-950: hsl(267.02, 100%, 5%); --color-purple-desat-50: hsl(267.02, 50%, 95%); --color-purple-desat-100: hsl(267.02, 50%, 90%); --color-purple-desat-200: hsl(267.02, 50%, 80%); --color-purple-desat-300: hsl(267.02, 50%, 70%); --color-purple-desat-400: hsl(267.02, 50%, 60%); --color-purple-desat-500: hsl(267.02, 50%, 50%); --color-purple-desat-600: hsl(267.02, 50%, 40%); --color-purple-desat-700: hsl(267.02, 50%, 30%); --color-purple-desat-800: hsl(267.02, 50%, 20%); --color-purple-desat-900: hsl(267.02, 50%, 10%); --color-purple-desat-950: hsl(267.02, 50%, 5%); /* --- Yellow --- */ --color-yellow-25: hsl(30, 100%, 97.5%); --color-yellow-35: hsl(30, 100%, 96.5%); --color-yellow-50: hsl(30, 100%, 95%); --color-yellow-100: hsl(30, 100%, 90%); --color-yellow-200: hsl(30, 100%, 80%); --color-yellow-300: hsl(30, 100%, 70%); --color-yellow-400: hsl(30, 100%, 60%); --color-yellow-500: hsl(30, 100%, 50%); --color-yellow-600: hsl(30, 100%, 40%); --color-yellow-700: hsl(30, 100%, 30%); --color-yellow-800: hsl(30, 100%, 20%); --color-yellow-900: hsl(30, 100%, 10%); --color-yellow-950: hsl(30, 100%, 5%); --color-yellow-desat-50: hsl(30, 50%, 95%); --color-yellow-desat-100: hsl(30, 50%, 90%); --color-yellow-desat-200: hsl(30, 50%, 80%); --color-yellow-desat-300: hsl(30, 50%, 70%); --color-yellow-desat-400: hsl(30, 50%, 60%); --color-yellow-desat-500: hsl(30, 50%, 50%); --color-yellow-desat-600: hsl(30, 50%, 40%); --color-yellow-desat-700: hsl(30, 50%, 30%); --color-yellow-desat-800: hsl(30, 50%, 20%); --color-yellow-desat-900: hsl(30, 50%, 10%); --color-yellow-desat-950: hsl(30, 50%, 5%); /* --- Neutral --- */ --color-neutral-5: hsl(32, 14%, 99.5%); --color-neutral-10: hsl(32, 14%, 99%); --color-neutral-15: hsl(32, 14%, 98%); --color-neutral-20: hsl(32, 14%, 97.75%); --color-neutral-25: hsl(32, 14%, 97.5%); --color-neutral-30: hsl(32, 14%, 97%); --color-neutral-35: hsl(32, 14%, 96.5%); --color-neutral-40: hsl(32, 14%, 96%); --color-neutral-45: hsl(32, 14%, 95.5%); --color-neutral-50: hsl(32, 14%, 95%); --color-neutral-75: hsl(32, 14%, 92.7%); --color-neutral-85: hsl(32, 14%, 91.6%); --color-neutral-100: hsl(32, 14%, 90%); --color-neutral-125: hsl(32, 14%, 87.5%); --color-neutral-150: hsl(32, 14%, 85%); --color-neutral-175: hsl(32, 14%, 82.5%); --color-neutral-200: hsl(32, 14%, 80%); --color-neutral-250: hsl(32, 14%, 75%); --color-neutral-300: hsl(32, 14%, 70%); --color-neutral-400: hsl(32, 14%, 60%); --color-neutral-500: hsl(32, 14%, 50%); --color-neutral-600: hsl(32, 14%, 40%); --color-neutral-650: hsl(32, 14%, 35%); --color-neutral-700: hsl(32, 14%, 30%); --color-neutral-800: hsl(32, 14%, 20%); --color-neutral-900: hsl(32, 14%, 10%); --color-neutral-950: hsl(32, 14%, 5%); /* --- White --- */ --color-white: hsl(0, 0%, 100%); /* --- Grey --- */ --color-grey-5: hsl(0, 0%, 99.5%); --color-grey-10: hsl(0, 0%, 99%); --color-grey-15: hsl(0, 0%, 98%); --color-grey-20: hsl(0, 0%, 97.75%); --color-grey-25: hsl(0, 0%, 97.5%); --color-grey-30: hsl(0, 0%, 97%); --color-grey-35: hsl(0, 0%, 96.5%); --color-grey-40: hsl(0, 0%, 96%); --color-grey-45: hsl(0, 0%, 95.5%); --color-grey-50: hsl(0, 0%, 95%); --color-grey-55: hsl(0, 0%, 94.5%); --color-grey-60: hsl(0, 0%, 94%); --color-grey-65: hsl(0, 0%, 93.5%); --color-grey-75: hsl(0, 0%, 92.7%); --color-grey-85: hsl(0, 0%, 91.5%); --color-grey-90: hsl(0, 0%, 91%); --color-grey-100: hsl(0, 0%, 90%); --color-grey-110: hsl(0, 0%, 89%); --color-grey-115: hsl(0, 0%, 88.5%); --color-grey-125: hsl(0, 0%, 87.5%); --color-grey-150: hsl(0, 0%, 85%); --color-grey-175: hsl(0, 0%, 82.5%); --color-grey-200: hsl(0, 0%, 80%); --color-grey-225: hsl(0, 0%, 77.5%); --color-grey-250: hsl(0, 0%, 75%); --color-grey-275: hsl(0, 0%, 72.5%); --color-grey-300: hsl(0, 0%, 70%); --color-grey-400: hsl(0, 0%, 60%); --color-grey-450: hsl(0, 0%, 55%); --color-grey-500: hsl(0, 0%, 50%); --color-grey-550: hsl(0, 0%, 45%); --color-grey-600: hsl(0, 0%, 40%); --color-grey-650: hsl(0, 0%, 35%); --color-grey-700: hsl(0, 0%, 30%); --color-grey-750: hsl(0, 0%, 25%); --color-grey-800: hsl(0, 0%, 20%); --color-grey-900: hsl(0, 0%, 10%); --color-grey-950: hsl(0, 0%, 5%); /* --- Greige (50/50 neutral + grey), full scale 0–1000 in steps of 25; L = 100 − n/10 --- Før: --color-greige-0: hsl(16, 7%, 100%);*/ --color-greige-5: hsl(16, 10%, 99.5%); --color-greige-10: hsl(16, 10%, 99%); --color-greige-15: hsl(16, 10%, 98%); --color-greige-20: hsl(16, 10%, 97.75%); --color-greige-25: hsl(16, 10%, 97.5%); --color-greige-30: hsl(16, 10%, 97%); --color-greige-35: hsl(16, 10%, 96.5%); --color-greige-40: hsl(16, 10%, 96%); --color-greige-45: hsl(16, 10%, 95.5%); --color-greige-50: hsl(16, 10%, 95%); --color-greige-55: hsl(16, 10%, 94.5%); --color-greige-60: hsl(16, 10%, 94%); --color-greige-65: hsl(16, 10%, 93.5%); --color-greige-75: hsl(16, 10%, 92.5%); --color-greige-100: hsl(16, 10%, 90%); --color-greige-110: hsl(16, 10%, 89%); --color-greige-115: hsl(16, 10%, 88.5%); --color-greige-125: hsl(16, 10%, 87.5%); --color-greige-135: hsl(16, 10%, 86.5%); --color-greige-150: hsl(16, 10%, 85%); --color-greige-160: hsl(16, 10%, 84%); --color-greige-175: hsl(16, 10%, 82.5%); --color-greige-200: hsl(16, 10%, 80%); --color-greige-225: hsl(16, 10%, 77.5%); --color-greige-250: hsl(16, 10%, 75%); --color-greige-275: hsl(16, 10%, 72.5%); --color-greige-300: hsl(16, 10%, 70%); --color-greige-325: hsl(16, 10%, 67.5%); --color-greige-350: hsl(16, 10%, 65%); --color-greige-375: hsl(16, 10%, 62.5%); --color-greige-400: hsl(16, 10%, 60%); --color-greige-425: hsl(16, 10%, 57.5%); --color-greige-450: hsl(16, 10%, 55%); --color-greige-475: hsl(16, 10%, 52.5%); --color-greige-500: hsl(16, 10%, 50%); --color-greige-525: hsl(16, 10%, 47.5%); --color-greige-550: hsl(16, 10%, 45%); --color-greige-575: hsl(16, 10%, 42.5%); --color-greige-600: hsl(16, 10%, 40%); --color-greige-625: hsl(16, 10%, 37.5%); --color-greige-650: hsl(16, 10%, 35%); --color-greige-675: hsl(16, 10%, 32.5%); --color-greige-700: hsl(16, 10%, 30%); --color-greige-725: hsl(16, 10%, 27.5%); --color-greige-750: hsl(16, 10%, 25%); --color-greige-775: hsl(16, 10%, 22.5%); --color-greige-800: hsl(16, 10%, 20%); --color-greige-825: hsl(16, 10%, 17.5%); --color-greige-850: hsl(16, 10%, 15%); --color-greige-875: hsl(16, 10%, 12.5%); --color-greige-900: hsl(16, 10%, 10%); --color-greige-925: hsl(16, 10%, 7.5%); --color-greige-950: hsl(16, 10%, 5%); --color-greige-975: hsl(16, 10%, 2.5%); --color-greige-1000: hsl(16, 10%, 0%); /* --- Black --- */ --color-black: hsl(0, 0%, 0%); /* --- Brand - Primary --- */ --color-brand-red-dark: hsl(345, 100%, 25.1%); /* #800020 - Primary Dark Red */ --color-brand-red: hsl(353.03, 72.77%, 41.76%); /* #B81D2F - Primary Logo Red */ --color-brand-grey-11: hsl(26.09, 11.44%, 39.41%); /* #706359 - Primary Grey 11 */ --color-brand-grey-6: hsl(25.26, 9.74%, 61.76%); /* #A79C94 - Primary Grey 6 */ --color-brand-grey-1: hsl(30, 15.56%, 82.35%); /* #D9D2CB - Primary Grey 1 */ --color-brand-grey-0: hsl(36, 18.52%, 94.71%); /* #F4F2EF - Primary Grey 0 */ --color-brand-gold: hsl(36, 59%, 75%); /* #E5C799 - Gold */ --color-brand-gradient-primary: linear-gradient( 90deg, var(--color-brand-red-dark) 0%, var(--color-brand-red) 100% ); /* --- Brand - Secondary --- */ --color-brand-purple: hsl(267.02, 100%, 25.69%); /* #3B0083 - Secondary Purple */ --color-brand-blue: hsl(205.79, 72.15%, 30.98%); /* #165788 - Secondary Blue */ --color-brand-green: hsl(161.76, 100%, 24.51%); /* #007D57 - Secondary Green */ --color-brand-yellow: hsl(30, 93.44%, 47.84%); /* #EC7A08 - Secondary Yellow */ /* --- Special colors --- */ --color-hacker-green: hsl(140, 100%, 50%); --color-cta-guide: color-mix(in hsl, var(--color-blue-700), black 12.5%); /* --- Status Red (pure red) --- */ --color-status-red-50: hsl(0, 75%, 95%); --color-status-red-75: hsl(0, 75%, 92.7%); --color-status-red-100: hsl(0, 75%, 90%); --color-status-red-125: hsl(0, 75%, 87.5%); --color-status-red-150: hsl(0, 75%, 85%); --color-status-red-200: hsl(0, 75%, 80%); --color-status-red-300: hsl(0, 75%, 70%); --color-status-red-400: hsl(0, 75%, 60%); --color-status-red-500: hsl(0, 75%, 50%); --color-status-red-600: hsl(0, 75%, 40%); --color-status-red-700: hsl(0, 75%, 30%); --color-status-red-800: hsl(0, 75%, 20%); --color-status-red-900: hsl(0, 75%, 10%); --color-status-red-950: hsl(0, 75%, 5%); /* --- Status Yellow (pure yellow) --- */ --color-status-yellow-25: hsl(42, 100%, 97.5%); --color-status-yellow-35: hsl(42, 100%, 96.5%); --color-status-yellow-50: hsl(42, 100%, 95%); --color-status-yellow-75: hsl(42, 100%, 92.7%); --color-status-yellow-100: hsl(42, 100%, 90%); --color-status-yellow-125: hsl(42, 100%, 87.5%); --color-status-yellow-150: hsl(42, 100%, 85%); --color-status-yellow-200: hsl(42, 100%, 80%); --color-status-yellow-300: hsl(42, 100%, 70%); --color-status-yellow-400: hsl(42, 100%, 60%); --color-status-yellow-500: hsl(42, 100%, 50%); --color-status-yellow-600: hsl(42, 100%, 40%); --color-status-yellow-700: hsl(42, 100%, 30%); --color-status-yellow-800: hsl(42, 100%, 20%); --color-status-yellow-900: hsl(42, 100%, 10%); --color-status-yellow-950: hsl(42, 100%, 5%); /* --- Status Green (pure green) --- */ --color-status-green-50: hsl(120, 65%, 95%); --color-status-green-75: hsl(120, 65%, 92.7%); --color-status-green-100: hsl(120, 65%, 90%); --color-status-green-125: hsl(120, 65%, 87.5%); --color-status-green-150: hsl(120, 65%, 85%); --color-status-green-200: hsl(120, 65%, 80%); --color-status-green-300: hsl(120, 65%, 70%); --color-status-green-400: hsl(120, 65%, 60%); --color-status-green-500: hsl(120, 65%, 50%); --color-status-green-600: hsl(120, 65%, 40%); --color-status-green-700: hsl(120, 65%, 30%); --color-status-green-800: hsl(120, 65%, 20%); --color-status-green-900: hsl(120, 65%, 10%); --color-status-green-950: hsl(120, 65%, 5%); /* --- Slate --- */ --color-slate-25: hsl(210, 14%, 97.5%); --color-slate-50: hsl(210, 14%, 95%); --color-slate-65: hsl(210, 14%, 94.2%); --color-slate-75: hsl(210, 14%, 92.7%); --color-slate-100: hsl(210, 14%, 90%); --color-slate-150: hsl(210, 14%, 85%); --color-slate-200: hsl(210, 14%, 80%); --color-slate-300: hsl(210, 14%, 70%); --color-slate-400: hsl(210, 14%, 60%); --color-slate-500: hsl(210, 14%, 50%); --color-slate-600: hsl(210, 14%, 40%); --color-slate-650: hsl(210, 14%, 35%); --color-slate-700: hsl(210, 14%, 30%); --color-slate-750: hsl(210, 14%, 25%); --color-slate-800: hsl(210, 14%, 20%); --color-slate-900: hsl(210, 14%, 10%); --color-slate-950: hsl(210, 14%, 5%); }/* ========================= DETAIL GRID Responsive grid of label/value pairs (e.g. the animal detail readout). Four columns on desktop, collapsing to two on tablet and one on mobile. Each item shows a semibold label separated from its value by a gap. ========================= */ .detail-grid { /* The floor for a row: the height of an xs button, the tallest thing a row can hold (the health button, a badge). A row of plain text gets it too, so it keeps the same rhythm instead of collapsing to the text height. */ --detail-row-height: var(--button-xs-height); display: grid; grid-template-columns: 1fr; /* 1fr as the maximum, not auto: in a grid of indefinite height every 1fr row is sized to the tallest row's content, so all rows end up equal. One value that wraps onto a second line - a long address - therefore makes every row two lines tall rather than leaving one row taller than the rest. The minmax floor still applies when nothing wraps. */ grid-auto-rows: minmax(var(--detail-row-height), 1fr); gap: var(--spacing-sm) var(--spacing-xl); width: 100%; background-color: var(--color-neutral-15); padding: var(--spacing-md); } @media (min-width: 768px) { .detail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1200px) { .detail-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } } /* A detail grid that sits in a column rather than across the full page - the profile card next to the change-password card - has room for two columns, not four. The viewport is wide enough for the four-column rule, but the grid's own container is not, so it opts out explicitly. Mobile and tablet are unchanged: one column, then two. */ @media (min-width: 1200px) { .detail-grid.detail-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* An item that needs more room (e.g. a long ear-tag id) spans two columns. NOT USED AT THE MOMENT*/ .detail-item--wide { grid-column: span 2; } /* align-self, not align-items, is the one that decides where the item sits in its row: the item always starts at the top of its cell, so the first line of a one-line value lines up with the first line of the wrapped address beside it instead of floating in the middle of the taller row. align-items then centres the label against its own value inside the item, where the two have different type sizes. */ .detail-item { display: flex; flex-wrap: wrap; align-self: start; align-items: center; gap: var(--spacing-xs); min-width: 0; } /* An item whose value is a button (the herd place link on the supplier cards, the health status button on the herd place page) centres label and button on one line. Two things are needed: the item must centre its children instead of stretching them, and the value must be a flex box rather than an inline one — an inline-flex button in an inline span carries a baseline gap underneath, which pushes the button off centre even after the span itself is centred. A badge value (the last modified timestamp, with the user's initials after it) is inline-flex too, so it needs the same treatment. */ .detail-item:has(> .detail-value button), .detail-item:has(> .detail-value .button), .detail-item:has(> .detail-value > .badge) { align-items: center; } .detail-value:has(button), .detail-value:has(.button), .detail-value:has(> .badge) { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-xs); } /* The health status value is a badge followed by its link button wrapped in a bare (Buttons::herdHealthButtonFromRow). display: contents makes that wrapper layout-transparent so the button becomes a direct flex child of the value and is centred with the label like any other button — the same trick .td-content uses for the report chapter's cell wrappers (see table.css). Wrappers that carry a class of their own (.badge) keep their own box. */ .detail-value:has(button) > span:not([class]), .detail-value:has(.button) > span:not([class]) { display: contents; } /* Buttons in a detail readout are size xs — the same treatment tables give their own buttons (see the `table button` rule in button.css). Without it the health status button stands 32px tall next to its own ~24px badge. Height, gap and padding only, exactly like the table rule, so one and the same button renders identically in a table cell and in a detail card. */ .detail-value button, .detail-value .button { height: var(--button-xs-height); gap: var(--button-xs-gap); padding-inline: var(--button-xs-padding); } .detail-value .is-icon-only-button { padding-inline: var(--button-xs-icon-only-padding); } /* A label is the detail readout's equivalent of a table's column title, so it carries the same typography as `th` (see table.css) — uppercase, 11px, wide letter spacing — one step lighter and in a neutral grey, so a card of labels reads calmer than a table header row. An inline-flex box, so a label that leads with an icon (Icons::location(), date(), health()) keeps icon and text on one line separated by a gap, with the icon inheriting the label's size and colour. */ .detail-label { display: inline-flex; align-items: center; /* Deliberately NOT flex-wrap: wrap. The icon and the label text are two flex items, and wrapping breaks the line *between* items - the icon ends up alone on the first line with the whole text underneath. Kept on one flex line, the text item shrinks instead and wraps inside itself at word boundaries, so the icon stays beside the label's first line. */ flex-wrap: nowrap; gap: var(--spacing-xs); min-width: 0; white-space: normal; overflow-wrap: break-word; font-size: var(--font-size-body-xs); font-weight: var(--font-weight-semi-bold); letter-spacing: var(--letter-spacing-base); line-height: var(--line-height-xs); text-transform: uppercase; color: var(--color-neutral-650); } /* Every label icon gets the same box, whatever the glyph is (a pig is wide, a clock is round, a calendar is narrow), so the label text starts at the same offset in every column instead of stepping in and out across the card. 1.25em is Font Awesome's own fixed-width measure (.fa-fw), wide enough that the widest glyph is centred in the box rather than spilling into the gap. */ .detail-label > i { flex: 0 0 1.25em; text-align: center; } /* ... and a value is the equivalent of cell content, so it matches `td`. A long value (an address, a place name) has to break between words, not inside them: `overflow-wrap` breaks a word only when that single word is wider than the column on its own, and it leaves the value's min-content width at its longest word - so flexbox keeps room for whole words and wraps the value under its label instead of squeezing it into a one-word column. `word-break: break-word` did the opposite: it let the box shrink to a single glyph, which is what turned an address into a mid-word column of syllables. */ .detail-value { min-width: 0; /* The div layer wraps every div in .form-ajax, which sets white-space: nowrap (see screenmenu.css), and the card inherits it. That kept the value on one line whatever the column width - a long address ran out of the card and over whatever sat beside it, and none of the wrapping below ever got a chance to act. Same override .login-body needs, for the same reason. */ white-space: normal; overflow-wrap: break-word; font-size: var(--font-size-body-sm); letter-spacing: var(--letter-spacing-sm); line-height: var(--line-height-xs); color: var(--color-grey-900); } /* ========================= MOBILE Under the 768px breakpoint where the grid drops to one column, the item itself stacks too: the value on its own line under its label, both against the start edge. Wrapping alone was not enough - it only moved the value down once it stopped fitting, so short values stayed beside their label and the column read unevenly. The selector carries the .detail-grid ancestor on purpose: it has to match the specificity of the .detail-item:has(> .detail-value button) rules above, which otherwise keep align-items: center - and in a column that centres the label and value horizontally instead of aligning them left. max-width: 767px, not 768px, so this never applies at the same width as the min-width: 768px two-column rule. ========================= */ @media (max-width: 767px) { .detail-grid .detail-item { flex-direction: column; align-items: start; } } .p-readonly { font-size: 1em; margin: 4px 0; } .p-negative { background: yellow; color: red; } .p-positive { background: yellow; color: green; } .div-odd { background-color: #F0F0E9; margin: 0; } .div-even { background-color: #ffffff; margin: 0; } .divRight { padding-right: 4px; float: right; } .divInLine { overflow: auto; white-space: nowrap; } .radio-inline { max-width: 100%; word-break: normal; white-space: nowrap; } .divNoWrap{ max-width: 100%; word-break: normal; white-space: nowrap; } .vertical{ -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -ms-transform: rotate(-90deg); -o-transform: rotate(-90deg); margin: 2px; } .title { background: inherit; color: inherit; font-size: 1.25em; font-weight: bold; } .title-brandred { color: #000000; border: 2px solid #B81D2F; font-size: 1.25em; font-weight: bold; } .visible-when-broad { visibility: visible; font-size: 1em; } .visible-when-narrow { visibility: hidden; font-size: 0; } /* .chapter-break { margin-top: 1em; page-break-before: always; display: block; } */ [data-chapterid] { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--spacing-xs); } [data-chapterid] > * { min-width: 0; } .table-noborder { width:100%; } .td-md-1 { width: 8.33%; } .td-md-2 { width: 16.67%; } .td-md-3 { width: 25%; } .td-md-4 { width: 33.33%; } .td-md-5 { width: 41.67%; } .td-md-6 { width: 50%; } .td-md-7 { width: 58.33%; } .td-md-8 { width: 66.67%; } .td-md-9 { width: 75%; } .td-md-10 { width: 83.33%; } .td-md-11 { width: 91.67%; } .td-md-12 { width: 100%; } @media only screen and (min-width: 641px) and (max-width: 1240px) { .visible-when-broad { visibility: hidden; font-size: 0; } .visible-when-narrow { visibility: visible; font-size: 1em; } } @media only screen and (max-width: 640px) { .visible-when-broad { visibility: hidden; font-size: 0; } .visible-when-narrow { visibility: visible; } } /*! * @copyright Copyright © Kartik Visweswaran, Krajee.com, 2014 - 2021 * @version 2.2.1 * * Additional CSS for Select2 for extra functionalities added by Krajee * * Author: Kartik Visweswaran * For more JQuery plugins visit http://plugins.krajee.com * For more Yii related demos visit http://demos.krajee.com */ .s2-togall-select .s2-unselect-label, .s2-togall-unselect .s2-select-label { display: none; } .s2-togall-button { display: inline-block; font-weight: 400; color: #337ab7; padding: 0.5rem; cursor: pointer; } .s2-togall-button:focus, .s2-togall-button:hover { color: #23527c; text-decoration: underline; background-color: transparent; } .s2-togall-select .s2-select-label, .s2-togall-unselect .s2-unselect-label { display: inline; } .s2-select-label, .s2-unselect-label { line-height: 1.1; font-size: 13px; } .s2-togall-button .s2-select-label i, .s2-togall-button .s2-unselect-label i { margin: auto 0.25rem; } /*! Select2 Bootstrap Theme v0.1.0-beta.3 | MIT License | github.com/select2/select2-bootstrap-theme */ .select2-container--bootstrap { display: block; /*------------------------------------*\ #COMMON STYLES \*------------------------------------*/ /** * Search field in the Select2 dropdown. */ /** * No outline for all search fields - in the dropdown * and inline in multi Select2s. */ /** * Adjust Select2's choices hover and selected styles to match * Bootstrap 3's default dropdown styles. * * @see http://getbootstrap.com/components/#dropdowns */ /** * Clear the selection. */ /** * Address disabled Select2 styles. * * @see https://select2.github.io/examples.html#disabled * @see http://getbootstrap.com/css/#forms-control-disabled */ /*------------------------------------*\ #DROPDOWN \*------------------------------------*/ /** * Dropdown border color and box-shadow. */ /** * Limit the dropdown height. */ /*------------------------------------*\ #SINGLE SELECT2 \*------------------------------------*/ /*------------------------------------*\ #MULTIPLE SELECT2 \*------------------------------------*/ /** * Address Bootstrap control sizing classes * * 1. Reset Bootstrap defaults. * 2. Adjust the dropdown arrow button icon position. * * @see http://getbootstrap.com/css/#forms-control-sizes */ /* 1 */ /*------------------------------------*\ #RTL SUPPORT \*------------------------------------*/ } .select2-container--bootstrap .select2-selection { -webkit-box-shadow: none; box-shadow: none; background-color: #fff; border: 1px solid #ccc; border-radius: 4px; color: #555555; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 14px; outline: 0; } .select2-container--bootstrap .select2-search--dropdown .select2-search__field { -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); background-color: #fff; border: 1px solid #ccc; border-radius: 4px; color: #555555; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 14px; } .select2-container--bootstrap .select2-search__field { outline: 0; /* Firefox 18- */ /** * Firefox 19+ * * @see http://stackoverflow.com/questions/24236240/color-for-styled-placeholder-text-is-muted-in-firefox */ } .select2-container--bootstrap .select2-search__field::-webkit-input-placeholder { color: #999; } .select2-container--bootstrap .select2-search__field:-moz-placeholder { color: #999; } .select2-container--bootstrap .select2-search__field::-moz-placeholder { color: #999; opacity: var(--opacity-visible); } .select2-container--bootstrap .select2-search__field:-ms-input-placeholder { color: #999; } .select2-container--bootstrap .select2-results__option { /** * Disabled results. * * @see https://select2.github.io/examples.html#disabled-results */ /** * Hover state. */ /** * Selected state. */ } .select2-container--bootstrap .select2-results__option[role=group] { padding: 0; } .select2-container--bootstrap .select2-results__option[aria-disabled=true] { color: #777777; cursor: not-allowed; } .select2-container--bootstrap .select2-results__option[aria-selected=true] { background-color: #f5f5f5; color: #262626; } .select2-container--bootstrap .select2-results__option--highlighted[aria-selected] { background-color: #337ab7; color: #fff; } .select2-container--bootstrap .select2-results__option .select2-results__option { padding: 6px 12px; } .select2-container--bootstrap .select2-results__option .select2-results__option .select2-results__group { padding-left: 0; } .select2-container--bootstrap .select2-results__option .select2-results__option .select2-results__option { margin-left: -12px; padding-left: 24px; } .select2-container--bootstrap .select2-results__option .select2-results__option .select2-results__option .select2-results__option { margin-left: -24px; padding-left: 36px; } .select2-container--bootstrap .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option { margin-left: -36px; padding-left: 48px; } .select2-container--bootstrap .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option { margin-left: -48px; padding-left: 60px; } .select2-container--bootstrap .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option { margin-left: -60px; padding-left: 72px; } .select2-container--bootstrap .select2-results__group { color: #777777; display: block; padding: 6px 12px; font-size: 12px; line-height: 1.428571429; white-space: nowrap; } .select2-container--bootstrap.select2-container--focus .select2-selection, .select2-container--bootstrap.select2-container--open .select2-selection { outline: var(--input-outline); box-shadow: var(--input-outline-shadow); -webkit-transition: outline ease-in-out 0.15s, box-shadow ease-in-out 0.15s; -o-transition: outline ease-in-out 0.15s, box-shadow ease-in-out 0.15s; transition: outline ease-in-out 0.15s, box-shadow ease-in-out 0.15s; border-color: var(--input-outline-color); } .select2-container--bootstrap.select2-container--open { /** * Make the dropdown arrow point up while the dropdown is visible. */ /** * Handle border radii of the container when the dropdown is showing. */ } .select2-container--bootstrap.select2-container--open .select2-selection .select2-selection__arrow b { border-color: transparent transparent #999 transparent; border-width: 0 4px 4px 4px; } .select2-container--bootstrap.select2-container--open.select2-container--below .select2-selection { border-bottom-right-radius: 0; border-bottom-left-radius: 0; border-bottom-color: transparent; } .select2-container--bootstrap.select2-container--open.select2-container--above .select2-selection { border-top-right-radius: 0; border-top-left-radius: 0; border-top-color: transparent; } .select2-container--bootstrap .select2-selection__clear { position: absolute; color: #999; cursor: pointer; float: right; font-weight: bold; } .select2-container--bootstrap .select2-selection__clear:hover { color: #333; } .select2-container--bootstrap .select2-selection--single .select2-selection__clear, .select2-container--bootstrap .select2-selection--multiple .select2-selection__clear { font-size: 16px; } .select2-container--bootstrap .select2-selection--single .select2-selection__clear { right: 1.2rem; } .select2-container--bootstrap[dir="rtl"] .select2-selection--single .select2-selection__clear { left: 1.2rem; right: auto; } .select2-container--bootstrap .select2-selection--multiple .select2-selection__clear { right: 1rem; } .select2-container--bootstrap[dir="rtl"] .select2-selection--multiple .select2-selection__clear { left: 1rem; right: auto; } .select2-container--bootstrap.select2-container--disabled .select2-selection { border-color: #ccc; -webkit-box-shadow: none; box-shadow: none; } .select2-container--bootstrap.select2-container--disabled .select2-selection, .select2-container--bootstrap.select2-container--disabled .select2-search__field { cursor: not-allowed; } .select2-container--bootstrap.select2-container--disabled .select2-selection, .select2-container--bootstrap.select2-container--disabled .select2-selection--multiple .select2-selection__choice { background-color: #eeeeee; } .select2-container--bootstrap.select2-container--disabled .select2-selection__clear, .select2-container--bootstrap.select2-container--disabled .select2-selection--multiple .select2-selection__choice__remove { display: none; } .select2-container--bootstrap .select2-dropdown { -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175); box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175); border-color: #66afe9; overflow-x: hidden; margin-top: -1px; } .select2-container--bootstrap .select2-dropdown--above { margin-top: 1px; } .select2-container--bootstrap .select2-results > .select2-results__options { max-height: 250px; overflow-y: auto; } .select2-container--bootstrap .select2-selection--single { height: 34px; line-height: 1.428571429; padding: 6px 24px 6px 12px; /** * Adjust the single Select2's dropdown arrow button appearance. */ } .select2-container--bootstrap .select2-selection--single .select2-selection__arrow { position: absolute; bottom: 0; right: 12px; top: 0; width: 4px; } .select2-container--bootstrap .select2-selection--single .select2-selection__arrow b { border-color: #999 transparent transparent transparent; border-style: solid; border-width: 4px 4px 0 4px; height: 0; left: 0; margin-left: -4px; margin-top: -2px; position: absolute; top: 50%; width: 0; } .select2-container--bootstrap .select2-selection--single .select2-selection__rendered { color: #555555; padding: 0; } .select2-container--bootstrap .select2-selection--single .select2-selection__placeholder { color: #999; } .select2-container--bootstrap .select2-selection--multiple { min-height: 34px; /** * Make Multi Select2's choices match Bootstrap 3's default button styles. */ /** * Minus 2px borders. */ /** * Clear the selection. */ } .select2-container--bootstrap .select2-selection--multiple .select2-selection__rendered { box-sizing: border-box; line-height: 1.428571429; list-style: none; margin: 0; padding: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .select2-container--bootstrap .select2-selection--multiple .select2-selection__placeholder { color: #999; float: left; margin-top: 5px; } .select2-container--bootstrap .select2-selection--multiple .select2-selection__choice { color: #555555; background: #fff; border: 1px solid #ccc; border-radius: 4px; cursor: default; float: left; margin: 5px 0 0 6px; padding: 0 6px; } .select2-container--bootstrap .select2-selection--multiple .select2-search--inline .select2-search__field { background: transparent; padding: 6px; height: 32px; line-height: 1.428571429; margin-top: 0; min-width: 5em; } .select2-container--bootstrap .select2-selection--multiple .select2-selection__choice__remove { border: none; background: none; box-shadow: none; outline: none; color: #999; cursor: pointer; display: inline-block; font-weight: 700; margin-right: 3px; font-size: 1rem; line-height: 1.2rem; } .select2-container--bootstrap .select2-selection--multiple .select2-selection__choice__remove:hover { color: #333; } .select2-container--bootstrap .select2-selection--multiple .select2-selection__clear { margin-top: 6px; } .select2-container--bootstrap.input-sm, .select2-container--bootstrap.input-lg { border-radius: 0; font-size: 12px; height: auto; line-height: 1; padding: 0; } .select2-container--bootstrap.input-sm .select2-selection--single, .input-group-sm .select2-container--bootstrap .select2-selection--single, .form-group-sm .select2-container--bootstrap .select2-selection--single { border-radius: 3px; font-size: 12px; height: 30px; line-height: 1.5; padding: 5px 22px 5px 10px; /* 2 */ } .select2-container--bootstrap.input-sm .select2-selection--single .select2-selection__arrow b, .input-group-sm .select2-container--bootstrap .select2-selection--single .select2-selection__arrow b, .form-group-sm .select2-container--bootstrap .select2-selection--single .select2-selection__arrow b { margin-left: -5px; } .select2-container--bootstrap.input-sm .select2-selection--multiple, .input-group-sm .select2-container--bootstrap .select2-selection--multiple, .form-group-sm .select2-container--bootstrap .select2-selection--multiple { min-height: 30px; } .select2-container--bootstrap.input-sm .select2-selection--multiple .select2-selection__choice, .input-group-sm .select2-container--bootstrap .select2-selection--multiple .select2-selection__choice, .form-group-sm .select2-container--bootstrap .select2-selection--multiple .select2-selection__choice { font-size: 12px; line-height: 1.5; margin: 4px 0 0 5px; padding: 0 5px; } .select2-container--bootstrap.input-sm .select2-selection--multiple .select2-search--inline .select2-search__field, .input-group-sm .select2-container--bootstrap .select2-selection--multiple .select2-search--inline .select2-search__field, .form-group-sm .select2-container--bootstrap .select2-selection--multiple .select2-search--inline .select2-search__field { font-size: 12px; height: 28px; line-height: 1.5; } .select2-container--bootstrap.input-sm .select2-selection--multiple .select2-selection__clear, .input-group-sm .select2-container--bootstrap .select2-selection--multiple .select2-selection__clear, .form-group-sm .select2-container--bootstrap .select2-selection--multiple .select2-selection__clear { margin-top: 5px; } .select2-container--bootstrap.input-lg .select2-selection--single, .input-group-lg .select2-container--bootstrap .select2-selection--single, .form-group-lg .select2-container--bootstrap .select2-selection--single { border-radius: 6px; font-size: 18px; height: 46px; line-height: 1.3333333; padding: 10px 31px 10px 16px; /* 1 */ } .select2-container--bootstrap.input-lg .select2-selection--single .select2-selection__arrow, .input-group-lg .select2-container--bootstrap .select2-selection--single .select2-selection__arrow, .form-group-lg .select2-container--bootstrap .select2-selection--single .select2-selection__arrow { width: 5px; } .select2-container--bootstrap.input-lg .select2-selection--single .select2-selection__arrow b, .input-group-lg .select2-container--bootstrap .select2-selection--single .select2-selection__arrow b, .form-group-lg .select2-container--bootstrap .select2-selection--single .select2-selection__arrow b { border-width: 5px 5px 0 5px; margin-left: -5px; margin-left: -10px; margin-top: -2.5px; } .select2-container--bootstrap.input-lg .select2-selection--multiple, .input-group-lg .select2-container--bootstrap .select2-selection--multiple, .form-group-lg .select2-container--bootstrap .select2-selection--multiple { min-height: 46px; } .select2-container--bootstrap.input-lg .select2-selection--multiple .select2-selection__choice, .input-group-lg .select2-container--bootstrap .select2-selection--multiple .select2-selection__choice, .form-group-lg .select2-container--bootstrap .select2-selection--multiple .select2-selection__choice { font-size: 18px; line-height: 1.3333333; border-radius: 4px; margin: 9px 0 0 8px; padding: 0 10px; } .select2-container--bootstrap.input-lg .select2-selection--multiple .select2-search--inline .select2-search__field, .input-group-lg .select2-container--bootstrap .select2-selection--multiple .select2-search--inline .select2-search__field, .form-group-lg .select2-container--bootstrap .select2-selection--multiple .select2-search--inline .select2-search__field { padding: 12px; font-size: 18px; height: 44px; line-height: 1.3333333; } .select2-container--bootstrap.input-lg .select2-selection--multiple .select2-selection__clear, .input-group-lg .select2-container--bootstrap .select2-selection--multiple .select2-selection__clear, .form-group-lg .select2-container--bootstrap .select2-selection--multiple .select2-selection__clear { margin-top: 10px; } .select2-container--bootstrap.input-lg.select2-container--open .select2-selection--single { /** * Make the dropdown arrow point up while the dropdown is visible. */ } .select2-container--bootstrap.input-lg.select2-container--open .select2-selection--single .select2-selection__arrow b { border-color: transparent transparent #999 transparent; border-width: 0 5px 5px 5px; } .input-group-lg .select2-container--bootstrap.select2-container--open .select2-selection--single { /** * Make the dropdown arrow point up while the dropdown is visible. */ } .input-group-lg .select2-container--bootstrap.select2-container--open .select2-selection--single .select2-selection__arrow b { border-color: transparent transparent #999 transparent; border-width: 0 5px 5px 5px; } .select2-container--bootstrap[dir="rtl"] { /** * Single Select2 * * 1. Makes sure that .select2-selection__placeholder is positioned * correctly. */ /** * Multiple Select2 */ } .select2-container--bootstrap[dir="rtl"] .select2-selection--single { padding-left: 24px; padding-right: 12px; } .select2-container--bootstrap[dir="rtl"] .select2-selection--single .select2-selection__rendered { padding-right: 0; padding-left: 0; text-align: right; /* 1 */ } .select2-container--bootstrap[dir="rtl"] .select2-selection--single .select2-selection__clear { float: left; } .select2-container--bootstrap[dir="rtl"] .select2-selection--single .select2-selection__arrow { left: 12px; right: auto; } .select2-container--bootstrap[dir="rtl"] .select2-selection--single .select2-selection__arrow b { margin-left: 0; } .select2-container--bootstrap[dir="rtl"] .select2-selection--multiple .select2-selection__choice, .select2-container--bootstrap[dir="rtl"] .select2-selection--multiple .select2-selection__placeholder { float: right; } .select2-container--bootstrap[dir="rtl"] .select2-selection--multiple .select2-selection__choice { margin-left: 0; margin-right: 6px; } .select2-container--bootstrap[dir="rtl"] .select2-selection--multiple .select2-selection__choice__remove { margin-left: 2px; margin-right: auto; } /*------------------------------------*\ #ADDITIONAL GOODIES \*------------------------------------*/ /** * Address Bootstrap's validation states * * If a Select2 widget parent has one of Bootstrap's validation state modifier * classes, adjust Select2's border colors and focus states accordingly. * You may apply said classes to the Select2 dropdown (body > .select2-container) * via JavaScript match Bootstraps' to make its styles match. * * @see http://getbootstrap.com/css/#forms-control-validation */ .has-warning .select2-container--bootstrap .select2-dropdown, .has-warning .select2-container--bootstrap .select2-selection { border-color: #8a6d3b; } .has-warning .select2-container--bootstrap.select2-container--focus .select2-selection, .has-warning .select2-container--bootstrap.select2-container--open .select2-selection { -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #c0a16b; box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #c0a16b; border-color: #66512c; } .has-warning.select2-container--bootstrap .select2-drop-active { border-color: #66512c; } .has-warning.select2-container--bootstrap .select2-drop-active.select2-drop.select2-drop-above { border-top-color: #66512c; } .has-error .select2-container--bootstrap .select2-dropdown, .has-error .select2-container--bootstrap .select2-selection { border-color: #a94442; } .has-error .select2-container--bootstrap.select2-container--focus .select2-selection, .has-error .select2-container--bootstrap.select2-container--open .select2-selection { -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ce8483; box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ce8483; border-color: #843534; } .has-error.select2-container--bootstrap .select2-drop-active { border-color: #843534; } .has-error.select2-container--bootstrap .select2-drop-active.select2-drop.select2-drop-above { border-top-color: #843534; } .has-success .select2-container--bootstrap .select2-dropdown, .has-success .select2-container--bootstrap .select2-selection { border-color: #3c763d; } .has-success .select2-container--bootstrap.select2-container--focus .select2-selection, .has-success .select2-container--bootstrap.select2-container--open .select2-selection { -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #67b168; box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #67b168; border-color: #2b542c; } .has-success.select2-container--bootstrap .select2-drop-active { border-color: #2b542c; } .has-success.select2-container--bootstrap .select2-drop-active.select2-drop.select2-drop-above { border-top-color: #2b542c; } /** * Select2 widgets in Bootstrap Input Groups * * When Select2 widgets are combined with other elements using Bootstraps * "Input Group" component, we don't want specific edges of the Select2 * container to have a border-radius. * * Use .select2-bootstrap-prepend and .select2-bootstrap-append on * a Bootstrap 3 .input-group to let the contained Select2 widget know which * edges should not be rounded as they are directly followed by another element. * * @see http://getbootstrap.com/components/#input-groups */ /** * Mimick Bootstraps .input-group .form-control styles. * * @see https://github.com/twbs/bootstrap/blob/master/less/input-groups.less */ .input-group .select2-container--bootstrap { display: table; table-layout: fixed; position: relative; z-index: 2; float: left; width: 100%; margin-bottom: 0; } .input-group.select2-bootstrap-prepend .select2-container--bootstrap .select2-selection { border-bottom-left-radius: 0; border-top-left-radius: 0; } .input-group.select2-bootstrap-append .select2-container--bootstrap .select2-selection { border-bottom-right-radius: 0; border-top-right-radius: 0; } /** * Adjust alignment of Bootstrap buttons in Bootstrap Input Groups to address * Multi Select2's height which - depending on how many elements have been selected - * may grow taller than its initial size. * * @see http://getbootstrap.com/components/#input-groups */ .select2-bootstrap-append .select2-container--bootstrap, .select2-bootstrap-append .input-group-btn, .select2-bootstrap-append .input-group-btn .btn, .select2-bootstrap-prepend .select2-container--bootstrap, .select2-bootstrap-prepend .input-group-btn, .select2-bootstrap-prepend .input-group-btn .btn { vertical-align: top; } /** * Temporary fix for https://github.com/select2/select2-bootstrap-theme/issues/9 * * Provides `!important` for certain properties of the class applied to the * original `). Inside a filter cell the wrapper should not cap the input at 75% — let it fill the cell. */ .filter-item .row { margin: 0; width: 100%; } .filter-item .row > [class*="col-"] { flex: 1 1 100%; max-width: 100%; padding: 0; width: 100%; } /* Select2 fix */ .filter-item .select2-container { width: 100% !important; } /* ========================= UTILITIES ========================= */ .filter-utilities { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--spacing-md); width: 100%; } .filter-utilities .content-left { color: var(--color-brand-red); } /* ========================= SAFETY / STABILITY FIX ========================= */ .filter-grid > * { min-width: 0; }/* MAIN FOOTER */ .footer { background-color: var(--color-neutral-200); color: var(--color-grey-800); display: flex; flex-direction: column; align-items: center; padding-bottom: var(--spacing-4xl); } /* Logo */ .footer-logo { width: clamp(110px, 8vw, 130px); height: auto; } .footer-logo-wrapper { padding-block: 6em; width: 100%; display: flex; justify-content: center; } /* DEV FOOTER */ .dev-footer-wrapper { display: flex; flex-direction: column; gap: var(--spacing-md); } .dev-footer-header { letter-spacing: var(--letter-spacing-base); font-size: var(--font-size-body-base); font-weight: var(--font-weight-semi-bold); text-transform: uppercase; color: var(--color-grey-50); } /* Info */ .dev-footer-info { color: var(--color-grey-600); display: flex; gap: var(--spacing-2xl); } .dev-footer-host { color: var(--color-grey-600); display: flex; gap: var(--spacing-sm); font-family: var(--font-family-mono), monospace; } .dev-footer-info-wrapper { width: 100%; display: flex; flex-wrap: wrap; gap: var(--spacing-xs); justify-content: space-between; align-items: center; padding-bottom: var(--spacing-sm); font-size: var(--font-size-body-sm); } /*SQL*/ .dev-footer-query-wrapper { padding: var(--spacing-4xl); display: flex; flex-direction: column; gap: var(--spacing-md); background: var(--color-grey-800); border-radius: var(--border-radius-base); color: var(--color-grey-100); } .dev-footer-query { padding: var(--spacing-lg); background: var(--color-grey-700); } .dev-footer-query-title { font-weight: var(--font-weight-semi-bold); letter-spacing: var(--letter-spacing-base); font-size: var(--font-size-body-xs); text-transform: uppercase; color: var(--color-grey-100); } .dev-footer-query-sql { font-family: var(--font-family-mono), monospace; font-size: var(--font-size-body-sm); background: var(--color-grey-900); border: var(--border-width-sm) solid var(--color-grey-600); padding: var(--spacing-sm); border-radius: var(--border-radius-base); overflow-x: auto; margin: 0; color: var(--color-hacker-green); white-space: pre-wrap; } .dev-footer-query-execution { font-family: monospace; color: var(--color-grey-100); text-align: right; letter-spacing: var(--letter-spacing-base); font-size: var(--font-size-body-sm); font-weight: var(--font-weight-normal); } .dev-footer-query-sqlgroup { display: flex; flex-direction: column; gap: var(--spacing-md); } .dev-footer-query-section { display: flex; flex-direction: column; gap: var(--spacing-sm); } /* Overview */ .dev-footer-overview-wrapper { padding: var(--spacing-4xl); background: var(--color-grey-800); border-radius: var(--border-radius-base); display: flex; flex-direction: column; gap: var(--spacing-md); color: var(--color-grey-100); overflow-x: auto; } .dev-footer-overview-wrapper table tbody tr td, .dev-footer-overview-wrapper table thead tr th { border: var(--border-width-sm) solid var(--color-grey-600); } .dev-footer-overview-table { width: 100%; border-collapse: collapse; border: var(--border-width-sm) solid var(--color-grey-600); color: var(--color-grey-100); } .dev-footer-overview-table thead th { font-weight: var(--font-weight-semi-bold); letter-spacing: var(--letter-spacing-base); font-size: var(--font-size-body-sm); text-transform: uppercase; color: var(--color-grey-50); border-bottom: var(--border-width-base) solid var(--color-grey-600); background-color: var(--color-grey-700); padding: var(--spacing-sm) var(--spacing-md); } .dev-footer-overview-table tbody td { border-bottom: var(--border-width-sm) solid var(--color-grey-600); padding: var(--spacing-sm) var(--spacing-md); font-family: var(--font-family-mono), monospace; font-size: var(--font-size-body-sm); letter-spacing: var(--letter-spacing-base); text-align: right; } .dev-footer-overview-table tbody td:first-child, .dev-footer-overview-table thead th:first-child { text-align: left; font-family: inherit; } .dev-footer-overview-table tbody tr:nth-child(odd) { background: var(--color-grey-750); } .dev-footer-overview-table tbody tr:nth-child(even) { background: var(--color-grey-700); } .dev-footer-overview-table tbody td:nth-child(n+2):nth-child(-n+5), .dev-footer-overview-table thead th:nth-child(n+2):nth-child(-n+5) { text-align: right; } .dev-footer-overview-wrapper .dev-footer-overview-table { border-radius: var(--border-radius-base); } @media (max-width: 768px) { .dev-footer-overview-table th, .dev-footer-overview-table td { padding: var(--spacing-xs) var(--spacing-sm); } } @media (max-width: 480px) { .dev-footer-info { width: 100%; justify-content: space-between; } }@media screen { /* Read-only twin of .form-control-sm below: same width and right-aligned numbers, so a read-only week row lines up with the input row under it (PigsForSaleDiv's week tables). */ .form-readonly-sm { width: 8em; padding: 4px; font-size: inherit; text-align: right; } .form-control { border: 1px solid #ccc; padding: 8px 4px; margin: 0; font-size: 1em; line-height: 1.2; height: auto; } .form-control[disabled] { background-color: var(--color-grey-200); } .form-control:focus, .form-control-sm:focus, .form-control-inline:focus, .date-input:focus-within { outline: var(--input-outline); box-shadow: var(--input-outline-shadow); border-color: var(--input-outline-color); transition: outline 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s; } .form-control-sm { width: 8em; padding: 2px; background: #FFFFFF none; border: 1px solid #ccc; border-radius: 1em; box-shadow: none; color: #000000; font-size: inherit; transition: border-color 0.15s ease-in-out 0s; text-align: right; vertical-align: middle; } .form-control-inline { padding: 2px 4px; font-size: inherit; background: #FFFFFF none; border: 1px solid #ccc; border-radius: 2em; box-shadow: none; color: #000000; transition: border-color 0.15s ease-in-out 0s; text-align: left; vertical-align: middle; } .date-input { padding: 2px 4px; font-size: inherit; background: #FFFFFF none; border: 1px solid #ccc; border-radius: 2em; box-shadow: none; color: #000000; transition: border-color 0.15s ease-in-out 0s; text-align: left; vertical-align: middle; display: flex; } .form-horizontal .form-group { margin-right: 1em; margin-left: 1em; } .pw-input { margin-right: auto; margin-left: auto; } .control-label { display: block; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: var(--letter-spacing-sm); font-weight: var(--font-weight-medium); font-size: var(--font-size-body-sm); color: var(--color-neutral-600); } }.graph { width: 100%; padding: clamp( var(--spacing-xl), 2vw, var(--spacing-4xl) ); background-color: var(--color-neutral-5); border-radius: var(--border-radius-base); border: var(--border-width-sm) solid var(--color-grey-200); transition: padding var(--transition-base); height: auto; font-size: var(--font-size-body-sm); } .highcharts-background { fill: var(--color-neutral-5) !important; } .highcharts-title { fill: var(--color-neutral-650) !important; font-size: var(--font-size-body-md) !important; font-weight: var(--font-weight-bold) !important; letter-spacing: var(--letter-spacing-base); text-transform: uppercase; } .highcharts-subtitle { fill: var(--color-neutral-500) !important; font-size: var(--font-size-body-sm) !important; } .highcharts-legend-item text, .highcharts-legend-item tspan { fill: var(--color-neutral-650) !important; font-size: var(--font-size-body-base) !important; font-weight: var(--font-weight-semi-bold) !important; letter-spacing: var(--letter-spacing-base); text-transform: uppercase; } .highcharts-axis-labels text, .highcharts-axis-labels tspan { fill: var(--color-neutral-500) !important; font-size: var(--font-size-body-sm) !important; font-weight: var(--font-weight-normal) !important; text-transform: uppercase; } /* Aksetitlen ("Dag", "Antal", "Date"). Uden en regel her beholdt den Highcharts' egen default på 0.8em/grå, mens søjlegraferne sendte 1.2em/sort med i optionerne - samme label så forskellig ud fra graf til graf. */ .highcharts-axis-title, .highcharts-axis-title tspan { fill: var(--color-neutral-650) !important; font-size: var(--font-size-body-sm) !important; font-weight: var(--font-weight-semi-bold) !important; letter-spacing: var(--letter-spacing-base); text-transform: uppercase; } /* Gitter og akser er presentation attributes (stroke="#e6e6e6"), ikke inline style, så de kan overskrives uden !important. Kun stroke sættes - Highcharts slukker x-aksens gitter med stroke-width: 0, og det skal blive ved med at virke. */ .highcharts-grid-line { stroke: var(--color-grey-100); } .highcharts-axis-line, .highcharts-tick { stroke: var(--color-grey-200); } .highcharts-plot-border { stroke: var(--color-grey-100); } /* Tooltip: kun rammes, ikke - seriernes farvede prikker sætter deres egen fill inline og skal beholde serie-farven. */ .highcharts-tooltip text { fill: var(--color-grey-900) !important; font-size: var(--font-size-body-sm) !important; } .highcharts-tooltip-box { fill: var(--color-neutral-5); stroke: var(--color-grey-200); } .highcharts-data-labels text, .highcharts-data-labels tspan { fill: var(--color-neutral-650) !important; font-size: var(--font-size-body-xs) !important; font-weight: var(--font-weight-semi-bold) !important; } :root { --grid-gap: var(--spacing-2xl); /* Tighter gap for pairs that belong closely together — the export buttons and the table they act on. */ --grid-gap-sm: var(--spacing-sm); } /* ========================= BASE GRID ========================= */ .grid { display: grid; gap: var(--grid-gap); width: 100%; align-items: start; grid-template-columns: 1fr; transition: all var(--transition-base); } /* alle direkte children er grid items */ .grid > * { min-width: 0; } /* ========================= 2 COL (TABLET) ========================= */ @media (min-width: 768px) { .grid--2, .grid--3 { grid-template-columns: repeat(2, 1fr); transition: all var(--transition-base); } .grid--3 .grid__feature { grid-column: span 2; } } /* ========================= 3 COL (DESKTOP) ========================= */ @media (min-width: 1440px) { .grid--3 { grid-template-columns: repeat(3, 1fr); } .grid--3 .grid__feature { grid-column: span 1; } } /* ========================= FEATURE ITEM - 2 cols på desktop - 1 col på tablet ========================= */ .grid__feature { grid-column: auto; } /* ========================= FULL WIDTH ========================= */ .grid__full { grid-template-columns: 1fr; } /* ========================= GAP MODIFIERS Override the default --grid-gap for vertical stacks where siblings need tighter or looser spacing than the base value. ========================= */ .grid--gap-md { gap: var(--spacing-md); } .grid--gap-lg { gap: var(--spacing-lg); } .grid--gap-xl { gap: var(--spacing-xl); } .grid--gap-2xl { gap: var(--spacing-2xl); } /* ========================= RANK GRID (nested) ========================= */ .rank-grid { display: grid; gap: var(--grid-gap); grid-template-columns: 1fr; width: 100%; } /* vigtigt: spacing mellem items */ .rank-grid > * { min-width: 0; } .grid-row { display: grid; gap: var(--grid-gap); } .grid-row:has(> .grid-item) { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); } [class*="grid-col-"]:has(> .grid-row + .grid-row) { display: flex; flex-direction: column; gap: var(--grid-gap); }.trix-button--icon-attach { display: none; } trix-toolbar .trix-button-group--file-tools { border: 0 }/*! * @package yii2-krajee-base * @subpackage yii2-widget-activeform * @author Kartik Visweswaran * @copyright Copyright © Kartik Visweswaran, Krajee.com, 2014 - 2021 * @version 2.0.6 * * Common CSS file for all kartik\widgets. * * For more JQuery/Bootstrap plugins and demos visit http://plugins.krajee.com * For more Yii related demos visit http://demos.krajee.com */ .kv-plugin-loading { width: 25px; height: 25px; background: transparent url('../img/loading-plugin.gif') center left no-repeat; } .kv-hide { display: none; } /* ========================================================================== TABLE OF CONTENTS: 1. DESCRIPTION 2. TREE STRUCTURE 3. LIGHT MODE 3.1 Body styling 3.2 Sun icon hidden 3.3 Moon icon visible 4. DARK MODE 4.1 Body styling 4.2 Sun icon visible 4.3 Moon icon hidden 5. TOGGLE BUTTON 5.1 Button 5.2 Button icon ========================================================================== 1. DESCRIPTION ========================================================================== Styling for light and dark mode. Light mode is the default, with dark mode as an alternative. Includes a toggle button with overlapping sun/moon icons that switch visibility when changing modes. ========================================================================== 2. TREE STRUCTURE ========================================================================== #light-dark-mode-toggle-button ├─ .icon-sun └─ .icon-moon ========================================================================== 3. LIGHT MODE ========================================================================== */ /* 3.1 Body styling */ body.light-mode { background: var(--color-neutral-35); color: var(--color-grey-700); } /* 3.2 Sun icon hidden */ body.light-mode #light-dark-mode-toggle-button .icon-sun { opacity: var(--opacity-hidden); transform: rotate(90deg) scale(0.6); z-index: var(--z-toggle-icon-back); } /* 3.3 Moon icon visible */ body.light-mode #light-dark-mode-toggle-button .icon-moon { opacity: var(--opacity-visible); transform: rotate(0deg) scale(1); z-index: var(--z-toggle-icon-front); } /* ========================================================================== 4. DARK MODE ========================================================================== */ /* 4.1 Body styling */ body.dark-mode { background-color: var(--color-grey-800); color: var(--color-white); } /* 4.2 Sun icon visible */ body.dark-mode #light-dark-mode-toggle-button .icon-sun { opacity: var(--opacity-visible); transform: rotate(0deg) scale(1); z-index: var(--z-toggle-icon-front); } /* 4.3 Moon icon hidden */ body.dark-mode #light-dark-mode-toggle-button .icon-moon { opacity: var(--opacity-hidden); transform: rotate(-90deg) scale(0.6); z-index: var(--z-toggle-icon-back); } /* ========================================================================== 5. TOGGLE BUTTON ========================================================================== */ /* 5.1 Button */ #light-dark-mode-toggle-button { display: inline-grid; place-items: center; position: relative; font-size: var(--font-size-body-xl) } /* 5.2 Button icon */ #light-dark-mode-toggle-button .icon { position: relative; grid-area: 1 / 1; transition: opacity var(--transition-slow), transform 0.4s cubic-bezier(.4,0,.2,1); }/* Link */ .link, a { position: relative; color: var(--link-color); text-decoration: none; cursor: pointer; padding: 0; background-color: transparent; box-shadow: none; font-weight: var(--font-weight-semi-bold); } /* .link::after { content: ''; position: absolute; left: 0; bottom: -2px; height: 2px; width: 100%; background-color: var(--color-blue-700); transform: scaleX(0); transform-origin: right; transition: transform 0.6s ease; } */ .link:hover, a:hover { text-decoration: none; color: color-mix(in hsl, var(--link-color), white 10%); } /* .link:hover::after { transform: scaleX(1); transform-origin: left; } */ /* Loader baggrund overlay */ #loader { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(255,255,255,0.90); display: flex; justify-content: center; align-items: center; z-index: var(--z-loader); flex-direction: column; gap: var(--spacing-2xl); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); } /* Spinner */ #loader .spinner { border: 5px solid var(--color-grey-150); border-top: 5px solid var(--button-primary-bg); border-radius: 50%; width: 60px; height: 60px; animation: spin 1.15s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* Tekst under spinner */ #loader .loader-message { letter-spacing: var(--letter-spacing-sm); font-weight: var(--font-weight-medium); font-size: var(--font-size-body-sm); color: var(--color-grey-700); text-transform: uppercase; } /* Skjul indhold indtil loader er væk */ body.loaded #loader { display: none; }/* ========================================================================== TABLE OF CONTENTS: 01. DESCRIPTION 02. TREE STRUCTURE 03. LAYOUT 3.1 Content container 3.2 Form container 3.3 Standalone card 3.4 Card that fills its column 3.5 Image container 04. TYPOGRAPHY 4.1 Text container 4.2 Header underline 4.3 Body text 05. FORM ELEMENTS 5.1 Form content outer container 5.2 Input container 5.3 Password container 5.4 Forgot password link 06. IMAGE 6.1 Image 07. HELPERS 7.1 Column flex 08. MEDIA QUERIES 8.1 Mobile devices (0 - 768px) 1 col 8.2 Small devices (769 - 1439px) 2 col 8.3 Large devices (1440px+) 3 col ========================================================================== 01. DESCRIPTION ========================================================================== Layout for the login page. Uses two main containers: a form container for the login form and an image container for the login image. Both are grid items on .login-content-container. The card - everything from .login-form-container down - is built by Divs::authCard() and shared by all three auth forms: the login page puts it next to the image half, while ChangePasswordDiv and PasswordResetConfirmDiv use it on its own, with no grid around it. Keep the card self-contained so it works in both places. The grid changes column count with the viewport: - Mobile (≤768px): 1 column — form row 1 / image row 2 - Small (<1440px): 2 columns — image 1 col / form 1 col - Large (≥1440px): 3 columns — image 2 cols / form 1 col The image comes first in the DOM, so from 769px up it always occupies the leading column(s) and the form takes the trailing one. On mobile the two are stacked and explicitly placed by row, so the form comes first visually without changing the DOM order. From 769px up the grid is one row tall, fixed at 425px. The image container fills that row regardless of the image's own dimensions (cropped with object-fit: cover), while the form container is a card centred in its column. On mobile the grid height is auto (the form decides it) and the image row gets its own fixed height instead. The card fills the full width of its grid column and only stops growing once the form inside it would exceed 425px — so it is full-bleed on narrow viewports and capped on wide ones. The cap is the content ceiling plus the card's inline padding, both declared as custom properties on .login-form-container itself. ========================================================================== 02. TREE STRUCTURE ========================================================================== .login-content-container │ ├─ .login-image-container │ └─ .login-image │ └─ .login-form-container └─ .login-form-content │ ├─ .login-text-container │ ├─ .login-header │ │ └─ .login-header::after (underline) │ └─ .login-body │ ├─ .login-input-container │ ├─ username input │ └─ .login-password-container │ ├─ password input │ └─ .login-password-forgot (link) │ └─ .login-button-container └─ login button ========================================================================== 3. LAYOUT ========================================================================== */ /* 3.1 Outer content container */ /* Grid holding the image container and the form container. */ /* Column count is set in the media queries (section 8). */ .login-content-container { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); /* One explicit row. minmax(0, 1fr) makes the row height definite */ /* (it fills the container's 425px) AND caps its automatic minimum */ /* at 0, so the image's intrinsic height can never stretch the row. */ /* Without this the row is auto-sized, height: 100% on the image */ /* container has nothing to resolve against, and the raw image */ /* height leaks out as vertical overflow. */ grid-template-rows: minmax(0, 1fr); align-items: center; gap: var(--grid-gap); height: 425px; text-align: left; } /* 3.2 Form container */ /* Card, matching .article-content (see article.css). It fills the */ /* width of its grid column until the form inside reaches the content */ /* ceiling — the max-width is that ceiling plus the card's own inline */ /* padding, so the form never gets wider than the ceiling and the card */ /* never gets wider than the form needs. Past that point the card */ /* stops growing and is centred in its column. */ /* Vertical centring comes from align-items on the grid (see 3.1). */ .login-form-container { /* Sizing contract for the card (see 5.1). The card fills its column */ /* and stops growing once the form inside would exceed the content */ /* ceiling. Both values live here - on the card, not on the grid */ /* container - so the card also works on its own, outside the login */ /* grid (the change-password form has no image half). */ --login-form-content-max-width: 425px; --login-form-padding-inline: clamp( var(--spacing-3xl), 3vw, var(--spacing-4xl) ); justify-self: center; width: 100%; max-width: calc( var(--login-form-content-max-width) + 2 * var(--login-form-padding-inline) ); min-width: 0; background-color: var(--color-greige-30); color: var(--color-neutral-700); padding-inline: var(--login-form-padding-inline); padding-block: clamp( var(--spacing-5xl), 4vw, var(--spacing-8xl) ); border-radius: var(--border-radius-base); border: var(--border-width-sm) solid var(--color-grey-150); box-shadow: var(--shadow-base); } /* 3.3 Standalone card */ /* The card on a page of its own - the password-reset landing page - */ /* has neither an image half nor a grid column to be centred in, so */ /* justify-self has nothing to act on. Centre it in the content area */ /* instead. Only the standalone page opts in: the change-password card */ /* is one of two equal columns and is placed by that grid. */ .login-form-container.login-standalone { margin-inline: auto; } /* 3.4 Card that fills its column */ /* Beside another card of equal width - the profile page's two columns */ /* - the content ceiling would leave the card narrower than its */ /* neighbour. Let it fill the column instead; the column itself is the */ /* constraint there. */ .login-form-container.login-fill { max-width: none; } /* 3.5 Image container */ /* overflow: hidden both crops the image and zeroes the item's */ /* automatic minimum size, so it can never push the grid track wider */ /* or taller than its share. */ .login-image-container { display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; overflow: hidden; } /* ========================================================================== 4. TYPOGRAPHY ========================================================================== */ /* 4.1 - Text container (header and body text) */ .login-text-container { gap: var(--spacing-xl); } /* 4.2 - Header underline */ .login-header::after { content: ""; display: block; width: 44px; height: var(--border-width-brand); margin-top: var(--spacing-sm); background-color: var(--color-greige-150); } /* 4.3 - Form body text */ /* Colour is inherited from the card (see 3.2). */ /* white-space is NOT redundant: ReloadableDiv wraps the whole div in */ /* .form-ajax, which sets white-space: nowrap (see screenmenu.css). */ /* Without this override the sentence runs out of the card instead of */ /* wrapping. */ .login-body { font-size: var(--font-size-body-sm); line-height: 1.85; white-space: normal; } /* ========================================================================== 5. FORM CONTENT ========================================================================== */ /* 5.1 Form content outer container (text, input and button) */ /* Fills the card. The ceiling is enforced by the card's max-width */ /* (see 3.2), so there is deliberately no max-width here — two caps */ /* would have to be kept in sync. */ .login-form-content { width: 100%; min-width: 0; row-gap: var(--spacing-xl); } /* 5.2 Input container (username and password) */ .login-input-container { gap: var(--spacing-lg); } /* 5.3 Password container (input and forgot password link) */ .login-password-container { gap: var(--spacing-sm); } /* 5.4 Forgot password link */ .login-password-forgot { text-align: right; font-size: var(--font-size-body-sm); } /* ========================================================================== 6. IMAGE ========================================================================== */ /* 6.1 Image (login image) */ .login-image { width: 100%; height: 100%; object-fit: cover; } /* ========================================================================== 7. HELPERS ========================================================================== */ /* 7.1 Column flex (for gap between elements) */ .login-form-container, .login-text-container, .login-form-content, .login-input-container, .login-password-container { display: flex; flex-direction: column; } /* ========================================================================== 8. MEDIA QUERIES ========================================================================== */ /* 8.1 Mobile devices (0 - 768px) */ /* 1 column, stacked: form on top, image below. The DOM order is */ /* image first, so both items are placed explicitly by row. */ /* The 425px container height is dropped — the grid is as tall as the */ /* form plus the image row — and the image row gets a definite height */ /* of its own so object-fit: cover still has something to resolve */ /* against. */ @media (max-width: 768px) { .login-content-container { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto; height: auto; } .login-form-container { grid-row: 1; } .login-image-container { grid-row: 2; height: 200px; } } /* 8.2 Small devices (769 - 1439px) */ /* 2 columns: image and form get one column each (see section 3.1). */ /* 8.3 Large devices (1440px+) */ /* 3 columns: the image spans two of them, the form takes the last. */ @media (min-width: 1440px) { .login-content-container { grid-template-columns: repeat(3, minmax(0, 1fr)); } .login-image-container { grid-column: span 2; } } body.modal-open { overflow: hidden; } .modal { display: none; position: fixed; inset: 0; z-index: var(--z-modal); /* The overlay itself never scrolls — the dialog is height-capped and the scroll lives inside .modal-body. This keeps the whole page (and the overlay) fixed. */ overflow: hidden; padding: var(--spacing-8xl); } .modal.show { display: flex; align-items: center; justify-content: center; } /* Centred dialog with a sensible cap on wide screens; full-bleed on small. Height is capped to the viewport (minus the .modal padding) just like the width, so the dialog is a fixed-size card. It's a flex column so .modal-body can take the remaining space and scroll on its own. */ .modal-dialog { position: relative; width: 100%; height: 100%; margin: auto; max-width: 2000px; max-height: 1400px; display: flex; flex-direction: column; min-height: 0; } /* Mirrors .row-detail-container so popups, modals and inline detail rows share one visual language. Rounded corners and a soft shadow make the modal read as a card floating above the page. */ .modal-content { background: var(--color-neutral-10); padding-inline: var(--spacing-lg); padding-bottom: var(--spacing-3xl); padding-top: var(--spacing-lg); /* Flex column so the header/footer stay put and .modal-body gets the rest and scrolls. min-height:0 lets this shrink to the dialog's capped height (otherwise a tall body would push the card past the viewport). */ display: flex; flex-direction: column; min-height: 0; gap: var(--spacing-sm); max-width: 100%; border-radius: var(--border-radius-base); box-shadow: var(--shadow-base); } /* Mirrors .detail-header — close button right-aligned, the page title (h1, rendered by the loaded content) below. */ .modal-header { flex: 0 0 auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--spacing-xs); border-bottom: none; padding: 0; } /* The modal navigation trail is injected as the first child of the loaded content's .page-title-container, so it inherits the page-title's padding and lines up with it. Kept on one line and horizontally scrollable so a deep trail of long animal titles never widens the dialog. Always rendered but invisible by default so it reserves its space from level one — stepping a level deeper reveals it (Modal._renderBreadcrumb() adds .is-visible) without shifting the content down. */ .modal-breadcrumb { visibility: hidden; max-width: 100%; overflow-x: auto; } .modal-breadcrumb.is-visible { visibility: visible; } /* When the trail is present, stack it above the title/buttons row with a gap so they don't sit flush. Applied whenever the (reserved) breadcrumb exists so the gap is constant across levels and nothing jumps. Scoped via :has() to the injected breadcrumb, so plain page-title-containers outside modals are untouched. */ .page-title-container:has(> .modal-breadcrumb) { display: flex; flex-direction: column; gap: var(--spacing-sm); } .modal-breadcrumb .breadcrumb { flex-wrap: nowrap; } .modal-breadcrumb .breadcrumb-label { white-space: nowrap; } .modal-body { /* Take the remaining height and scroll internally; min-height:0 is required for a flex child to be allowed to scroll instead of growing the card. */ flex: 1 1 auto; min-height: 0; /* Same padding as .content-container so the modal reads like the in-page content areas. Padding sits inside the scroll area, so it also spaces the content off the scrollbar. */ padding-inline: var(--spacing-lg); /*padding-top: var(--spacing-lg);*/ padding-bottom: var(--spacing-3xl); min-width: 0; overflow-y: auto; overflow-x: auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--grid-gap); /* Scroll fade, the vertical twin of the one the tables get on .dt-table (table/data-tables.css): a soft bottom edge telling the user there is more content below. Multi-layer mask - the gradient covers the content area and an always-opaque strip along the right keeps the scrollbar (and the card's edge) unfaded. */ --scroll-fade-size: 24px; --scroll-fade-keep-right: 10px; /* Static state: solid mask (no fade), so a modal whose content fits is fully visible. Browsers with scroll-driven animations replace this via the @keyframes below, which only run when the body actually scrolls. (Safari falls back to "no fade ever" until it ships them - the custom scrollbar still shows that there is more.) */ --scroll-fade-mask: linear-gradient(black, black); -webkit-mask-image: var(--scroll-fade-mask), linear-gradient(black, black); mask-image: var(--scroll-fade-mask), linear-gradient(black, black); -webkit-mask-size: calc(100% - var(--scroll-fade-keep-right)) 100%, var(--scroll-fade-keep-right) 100%; mask-size: calc(100% - var(--scroll-fade-keep-right)) 100%, var(--scroll-fade-keep-right) 100%; -webkit-mask-position: 0 0, 100% 0; mask-position: 0 0, 100% 0; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; } @supports (animation-timeline: scroll()) { .modal-body { animation: scroll-fade-y linear; animation-timeline: scroll(self block); } } /* The bottom edge is faded the whole way down and only turns solid once the last line is reached, so the fade itself says "there is more below". The top is never faded - the content has to stay flush under the modal header. Same number of gradient stops in both keyframes so the browser can interpolate, and the second linear-gradient(black, black) is the opaque right strip (mask-size/position on .modal-body splits the layers). */ @keyframes scroll-fade-y { 0%, 90% { -webkit-mask-image: linear-gradient( to bottom, black 0, black calc(100% - var(--scroll-fade-size)), rgba(0, 0, 0, 0.7) calc(100% - var(--scroll-fade-size) * 0.6), rgba(0, 0, 0, 0.3) calc(100% - var(--scroll-fade-size) * 0.3), transparent 100% ), linear-gradient(black, black); mask-image: linear-gradient( to bottom, black 0, black calc(100% - var(--scroll-fade-size)), rgba(0, 0, 0, 0.7) calc(100% - var(--scroll-fade-size) * 0.6), rgba(0, 0, 0, 0.3) calc(100% - var(--scroll-fade-size) * 0.3), transparent 100% ), linear-gradient(black, black); } 100% { -webkit-mask-image: linear-gradient( to bottom, black 0, black calc(100% - var(--scroll-fade-size)), black calc(100% - var(--scroll-fade-size) * 0.6), black calc(100% - var(--scroll-fade-size) * 0.3), black 100% ), linear-gradient(black, black); mask-image: linear-gradient( to bottom, black 0, black calc(100% - var(--scroll-fade-size)), black calc(100% - var(--scroll-fade-size) * 0.6), black calc(100% - var(--scroll-fade-size) * 0.3), black 100% ), linear-gradient(black, black); } } /* Allow .grid-row and .grid-col-* inside the modal to shrink below their intrinsic content width, so that wide children (tables, accordions) hand their horizontal overflow off to .table-scroll-x's own `overflow-x: auto` instead of pushing the modal's column track wider than the dialog. */ .modal-body .grid-row { grid-template-columns: minmax(0, 1fr); min-width: 0; } .modal-body [class*="grid-col-"] { min-width: 0; } /* Two-column split: a row whose direct children are grid-col-6 halves (e.g. the animal modal's left/right accordion columns) sits side by side instead of stacking. Only once the dialog has reached its max-width (1800px) and is no longer full-width — which happens from viewport 1800px + 2×30px .modal padding = 1860px — do we go to two columns; below that the modal is fluid, so keep the split single-column to avoid cramping. Overrides the default above. */ @media (min-width: 1860px) { .modal-body .grid-row:has(> .grid-col-6) { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* Flatten the structural wrappers (form + form-ajax shell + open .innerContent) so their children participate directly in the modal-body grid and inherit its gap. Scoped to .modal-body so the form-ajax pattern still works normally outside modals. The `show`/`hide` are HTML attributes (not classes), so we match `[show]` here. Hidden `.innerContent[hide]` keeps display:none from JS so the accordion collapse behaviour is preserved. The last selector is the ajax-loaded modal page: it has no
and no id wrapper (ReloadableDiv::isModalPage()), so its .innerContent sits directly in .modal-body. */ .modal-body > form, .modal-body > form > div[id], .modal-body > form > div[id] > .innerContent[show], .modal-body > div[id], .modal-body > div[id] > .innerContent[show], .modal-body > .innerContent[show] { display: contents; } /* Exception to the flattening above: a filter and the .content-container that follows it are one attached block — the filter keeps its bottom-right corner square and the results panel carries the rounded bottom (see filter.css). Flattened into the .modal-body grid they would be pulled apart by its gap, so keep that .innerContent as a block-level grid item, exactly like the page shell does outside a modal. */ .modal-body > form > div[id] > .innerContent[show]:has(> .filter-container), .modal-body > div[id] > .innerContent[show]:has(> .filter-container), .modal-body > .innerContent[show]:has(> .filter-container) { display: block; min-width: 0; } .modal-footer { flex: 0 0 auto; border-top: none; padding: 0; display: flex; justify-content: flex-end; gap: var(--spacing-sm); } .modal-backdrop { position: fixed; inset: 0; z-index: var(--z-overlay); background-color: var(--scrim-bg-dark); backdrop-filter: blur(var(--scrim-blur)); -webkit-backdrop-filter: blur(var(--scrim-blur)); }/* ----- COLORS ----- */ /* Every colour in the menu is defined here, the rules below only refer to these variables */ :root { /* --- Surfaces, one per menu level --- */ --menu-surface-main: var(--color-neutral-35); --menu-surface-navbar: var(--color-grey-60); --menu-surface-dropdown: var(--color-white); --menu-surface-submenu: var(--color-grey-10); /* --- The steps of black that turn a surface into a state --- */ --menu-tint-hover: 5%; --menu-tint-active: 10%; --menu-tint-active-hover: 15%; /* --- States, the same steps on every surface --- */ --menu-navbar-active: var(--color-neutral-100); --menu-dropdown-hover: color-mix(in hsl, var(--menu-surface-dropdown), black 7.5%); --menu-dropdown-active: var(--color-neutral-75); --menu-dropdown-active-hover: color-mix(in hsl, var(--menu-dropdown-active), black 7.5%); --menu-submenu-hover: color-mix(in hsl, var(--menu-surface-submenu), black 2.5%); --menu-submenu-active: var(--color-neutral-75); --menu-submenu-active-hover: color-mix(in hsl, var(--menu-submenu-active), black 2.5%); /* --- The navbar item is held dark for as long as its dropdown is open --- */ --menu-item-open-bg: var(--button-secondary-bg); --menu-item-open-bg-hover: var(--button-secondary-bg-hover); /* --- Text --- */ --menu-text-navbar: var(--color-grey-800); --menu-text-dropdown: var(--color-grey-750); --menu-text-tinted: var(--button-tertiary-text); --menu-text-on-dark: var(--button-secondary-text); /* --- Borders and decorators --- */ --menu-border-topbar: var(--color-brand-red); --menu-border-navbar: var(--color-grey-200); --menu-border-dropdown: var(--color-grey-175); --menu-border-submenu: var(--color-grey-150); --menu-border-divider: var(--color-grey-100); --submenu-border-divider: var(--color-grey-75); --menu-border-open: var(--button-secondary-bg-hover); /* --- Mobile toggle --- */ --menu-toggle-bg: transparent; --menu-toggle-text: var(--color-grey-750); --menu-toggle-icon: var(--button-primary-bg); } /* ----- MAIN MENU ----- */ /* Contains both topbar and navbar */ .main-menu { /* Lifts the whole menu above the scrim below, so only the page is dimmed. Everything inside it — dropdown, submenu — stacks within this context. */ position: relative; z-index: var(--z-menu); background-color: var(--menu-surface-main); list-style: none; padding-left: 0; text-decoration: none; } /* TOPBAR */ /* Contains logo and utility items */ .topbar { display: flex; justify-content: space-between; align-items: center; padding-block: var(--spacing-xl); } .topbar-wrapper { border-bottom: var(--border-width-base) solid var(--menu-border-topbar); } .topbar-utility-items { display: flex; align-items: center; list-style: none; gap: var(--spacing-sm); } a > .topbar-logo { width: clamp(120px, 8vw, 140px); height: auto; } /* ----- NAVBAR ----- */ /* Contains container and navbar items */ .navbar-container { display: flex; justify-content: space-between; align-items: center; list-style: none; position: relative; } .navbar { border-bottom: var(--border-width-sm) solid var(--menu-border-navbar); background-color: var(--menu-surface-navbar); box-shadow: var(--shadow-base); text-align: left; } /* ----- NAVBAR ITEMS ----- */ /* Contains container and navbar items */ .navbar-item-container { position: relative; --dropdown-menu-width: 342px; } .navbar-item { position: relative; display: inline-flex; align-items: center; justify-content: center; text-transform: uppercase; text-decoration: none; letter-spacing: var(--letter-spacing-xl); font-size: var(--font-size-body-sm); font-weight: var(--font-weight-semi-bold); color: var(--menu-text-navbar); gap: var(--spacing-xs); padding-inline: var(--spacing-xl); height: 64px; min-width: 52px; transition: all var(--transition-base); } .navbar-item:hover, .navbar-item-container.navbar-item-active.dropdown-active > .navbar-item:hover { background-color: var(--menu-item-open-bg); color: var(--menu-text-on-dark); } .navbar-item-container.open > .navbar-item:hover { background-color: var(--menu-item-open-bg-hover); color: var(--menu-text-on-dark); } .navbar-item:active, .navbar-item:focus, .navbar-item-container.navbar-item-active.dropdown-active > .navbar-item:active, .navbar-item-container.navbar-item-active.dropdown-active > .navbar-item:focus, .navbar-item-container.navbar-item-active.open > .navbar-item:active, .navbar-item-container.navbar-item-active.open > .navbar-item:focus { text-decoration: none; color: var(--menu-text-on-dark); background-color: var(--menu-item-open-bg); } /* When navbar item is active */ .navbar-item-container.navbar-item-active.dropdown-active > .navbar-item { background-color: var(--menu-navbar-active); color: var(--menu-text-tinted); } /* Held for as long as the dropdown is open, so the colour does not disappear when hover or focus moves into the dropdown */ .navbar-item-container.open > .navbar-item { background-color: var(--menu-item-open-bg); color: var(--menu-text-on-dark); } /* Static border underneath the open navbar item, in the width of the item only */ .open > .navbar-item::after { content: ''; position: absolute; left: 0; bottom: 0; height: var(--border-width-brand); width: 100%; background-color: var(--menu-border-open); pointer-events: none; z-index: var(--z-dropdown-decorator); } /* Border from the end of the navbar item to the end of the dropdown container. Placed on the container so left: 100% is the right edge of the navbar item, and the width is what is left of the dropdown to the right of it. */ .navbar-item-container::after { content: ''; position: absolute; top: calc(100% - var(--border-width-brand)); left: 100%; height: var(--border-width-brand); width: calc(var(--dropdown-menu-width) - 100%); background-color: var(--menu-border-open); transform: scaleX(0); transform-origin: left; pointer-events: none; z-index: var(--z-dropdown-decorator); } /* The transition only belongs to the open state, so the border sweeps in but is removed instantly on close — same as the border below the navbar item */ .navbar-item-container.open::after { transform: scaleX(1); transition: transform var(--transition-slow); } /* ----- DROPDOWN MENU ----- */ /* Contains container and dropdown items */ .dropdown-menu-container { position: absolute; top: 100%; left: 0; list-style: none; text-decoration: none; background-color: var(--menu-surface-dropdown); border-inline: var(--border-width-sm) solid var(--menu-border-dropdown); border-bottom: var(--border-width-sm) solid var(--menu-border-dropdown); min-width: var(--dropdown-menu-width); box-shadow: var(--shadow-base); border-radius: 0 0 var(--border-radius-base) var(--border-radius-base); margin-top: -4px; opacity: var(--opacity-hidden); visibility: hidden; pointer-events: none; z-index: var(--z-dropdown); } /* Fades in on open, but closes instantly — same as the borders */ .open > .dropdown-menu-container { opacity: var(--opacity-visible); visibility: visible; pointer-events: auto; transition: opacity var(--transition-base); } /* ----- SCRIM ----- */ /* Dims the page while a dropdown is open, so the eye is held by the dropdown. Driven by the same .open class as the dropdown, so it needs no JS of its own. It is hit-testable on purpose: a click lands on , which is outside the navbar, so the document handler in menu.js closes the menu — without also following whatever link happened to sit under the pointer. */ body:has(.navbar-item-container.open)::after { content: ''; position: fixed; inset: 0; /* The same dim as .modal-backdrop, from the shared scrim tokens */ background-color: var(--scrim-bg); backdrop-filter: blur(var(--scrim-blur)); -webkit-backdrop-filter: blur(var(--scrim-blur)); z-index: var(--z-menu-scrim); /* The pseudo-element is created on open and destroyed on close, so a transition has nothing to run on — it fades in with an animation and disappears instantly, same as the dropdown and its borders. */ animation: menu-scrim-in var(--transition-base) both; } @keyframes menu-scrim-in { from { opacity: var(--opacity-hidden); } to { opacity: var(--opacity-visible); } } .dropdown-menu-item { list-style: none; display: block; padding: var(--spacing-xl) var(--spacing-3xl); letter-spacing: var(--letter-spacing-sm); font-size: var(--font-size-body-sm); font-weight: var(--font-weight-medium); color: var(--menu-text-dropdown); transition: background-color var(--transition-base); text-decoration: none; } .dropdown-menu-item:hover { background-color: var(--menu-dropdown-hover); color: var(--menu-text-tinted); text-decoration: none; } .dropdown-menu-item:active { background-color: var(--menu-dropdown-active); text-decoration: none; } .dropdown-menu-item, .dropdown-submenu-item > .has-submenu { display: flex; justify-content: space-between; align-items: center; } .dropdown-menu-item > i, .dropdown-submenu-item > .has-submenu > i { margin-left: auto; flex-shrink: 0; } .dropdown-menu-item.submenu-hover, .has-submenu > a.submenu-hover { background-color: var(--menu-dropdown-hover); color: var(--menu-text-tinted); } .dropdown-menu-container, .dropdown-submenu-container { top: 100%; left: 0; right: auto; } .dropdown-submenu-container { top: 0; left: 100%; right: auto; } /* ----- DROPDOWN SUBMENU ----- */ /* Contains dropdown submenu items */ .dropdown-submenu-container { display: none; position: absolute; list-style: none; width: 100%; justify-content: space-between; top: 0; left: 100%; min-width: 350px; background-color: var(--menu-surface-submenu); box-shadow: var(--shadow-base); border: var(--border-width-sm) solid var(--menu-border-submenu); border-radius: 0 var(--border-radius-base) var(--border-radius-base) 0; padding: 0; z-index: var(--z-popover); font-weight: var(--font-weight-normal); } .dropdown-submenu-item { position: relative; font-weight: var(--font-weight-normal); } /* Marks where the submenu ends, since it shares its surface with the dropdown */ .dropdown-submenu-container > .dropdown-submenu-item:last-child { border-bottom: var(--border-width-sm) solid var(--submenu-border-divider); } .has-submenu { display: flex; justify-content: space-between; align-items: center; cursor: pointer; } .sr-only { display: none; } .has-submenu > i { margin-left: 0; flex-shrink: 0; } /* Hover / aktiv effekt */ /* Keeps the row tinted while the pointer is inside its submenu */ .has-submenu.submenu-hover, .dropdown-submenu-item:hover > .dropdown-menu-item.has-submenu { background-color: var(--menu-dropdown-hover); color: var(--menu-text-tinted); } /* Unless the row is active, which goes one step further so hover never lightens it */ .dropdown-submenu-item.menu-item-active:hover > .dropdown-menu-item.has-submenu, .menu-item-active > .has-submenu.submenu-hover { background-color: var(--menu-dropdown-active-hover); } /* The submenu repeats the steps on its own surface */ .dropdown-submenu-container .dropdown-menu-item:hover { background-color: var(--menu-submenu-hover); } .dropdown-submenu-container .dropdown-menu-item:active { background-color: var(--menu-submenu-active); } .dropdown-menu-item.has-submenu, .dropdown-submenu-item > .has-submenu { cursor: default; } /* ----- OPENING LEFTWARDS ----- */ /* The open-left class is set by menu.js when a dropdown would otherwise reach past the right edge of the viewport */ .navbar-item-container.open-left > .dropdown-menu-container { left: auto; right: 0; } /* The border continues from the left edge of the navbar item instead */ .navbar-item-container.open-left::after { left: auto; right: 100%; transform-origin: right; } .dropdown-submenu-item.open-left > .dropdown-submenu-container { left: auto; right: 100%; border-radius: var(--border-radius-base) 0 0 var(--border-radius-base); } /* ----- GENERAL ----- */ /* Applies to both dropdown-menu-item and dropdown-submenu-item */ .menu-item-active { text-decoration: none; } .menu-item-active > a { background-color: var(--menu-dropdown-active); color: var(--menu-text-tinted); text-decoration: none; } /* One step further, so the active row still answers the pointer */ .menu-item-active > a:hover, .menu-item-active > a:active { background-color: var(--menu-dropdown-active-hover); color: var(--menu-text-tinted); text-decoration: none; } /* The same two steps on the surface of the submenu */ .dropdown-submenu-container .menu-item-active > a { background-color: var(--menu-submenu-active); } .dropdown-submenu-container .menu-item-active > a:hover, .dropdown-submenu-container .menu-item-active > a:active { background-color: var(--menu-submenu-active-hover); } /* ----- MOBILE ----- */ /* Hide menu, show burger */ #navbar { display: none; } .mobile-navbar-toggle-container { display: flex; justify-content: end; } .mobile-navbar-toggle-button { position: relative; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; letter-spacing: var(--letter-spacing-lg); font-size: var(--font-size-heading-base); color: var(--menu-toggle-text); background-color: var(--menu-toggle-bg); gap: var(--spacing-xs); padding-inline: var(--spacing-xl); border: none; box-shadow: none; height: 64px; transition: all var(--transition-base); } .mobile-navbar-toggle-icon { color: var(--menu-toggle-icon); } /* The burger becomes a close icon while the menu is open */ .mobile-navbar-toggle-icon-active { display: none; } .mobile-navbar-toggle-button.is-open .mobile-navbar-toggle-icon { display: none; } .mobile-navbar-toggle-button.is-open .mobile-navbar-toggle-icon-active { display: inline-flex; } #navbar.in { display: flex; flex-direction: column; } /* ----- MOBILE ----- */ @media (max-width: 1439px) { .navbar-container, .navbar-item-container { width: 100%; } .navbar-item { display: flex; justify-content: flex-start; padding: var(--spacing-lg) var(--spacing-xl); text-align: left; width: 100%; letter-spacing: normal; } /* Separates the navbar items when they are stacked */ .navbar-item-container:not(:last-child) { border-bottom: var(--border-width-sm) solid var(--menu-border-divider); } /* The dropdown is stacked below the navbar item, so there is nothing to continue into */ .navbar-item-container::after { display: none; } /* Dropdown menus */ .dropdown-menu-container { position: relative; top: 0; left: 0; box-shadow: none; border: none; min-width: 100%; margin: 0; opacity: var(--opacity-visible); visibility: visible; pointer-events: auto; display: none; flex-direction: column; border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .navbar-item-container.open > .dropdown-menu-container, .dropdown-menu-container.open { display: flex; } /* Nesting is shown with the same tint as on desktop, without the panel */ .dropdown-submenu-container { position: relative; top: 0; left: 0; min-width: 100%; border: none; box-shadow: none; display: none; flex-direction: column; border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .dropdown-submenu-container.open { display: flex; } .navbar-item > i, .has-submenu > i { margin-left: auto; transition: transform var(--transition-base); } /* The menus expand downwards here, so the chevron points down and flips when open */ .navbar-item > i, .dropdown-submenu-item > .has-submenu > i { transform: rotate(90deg); } .navbar-item-container.open > .navbar-item > i, .has-submenu.submenu-hover > i { transform: rotate(-90deg); } } /* ----- DESKTOP ----- */ /* Hide burger, show navbar */ @media (min-width: 1440px) { #navbar { display: flex; flex-direction: row; } /* Submenus open on hover here, where a pointer can reach them */ .dropdown-menu-item.has-submenu:hover + .dropdown-submenu-container, .dropdown-submenu-item:hover > .dropdown-submenu-container { display: block; } /* The navbar items are wide enough to read without a chevron */ .navbar-item > i { display: none; } .mobile-navbar-toggle-container { display: none; } .navbar-container { width: 100%; max-width: 2200px; margin-inline: auto; padding-inline: var(--padding-inline-base); } }.panel-info { background-color: #00aaff; color: black; padding: 4px; } .innerContent { max-width: 100%; } .panel-error { border: 1px solid red !important; color: red !important; background: #FFA !important; font-weight: bold !important; } .panel-skyblue { background-color: skyblue !important; color: black; } .panel-bottomLine { background: #ffffff; border-bottom: 2px solid #B81D2F; color: #000; padding-top: 6px; word-break: normal; word-wrap: break-word; } @media screen { .panel-default { width: 100%; margin-bottom: 0; margin-top: 0; border-color: #222222; } .panel-heading { border-bottom: 1px solid #d9d2cb; border-top-left-radius: 2em; border-top-right-radius: 2em; color: #222; background-color: transparent; padding: 4px; } .panel-default > .panel-heading:hover, .panel-default > .panel-heading:focus, .panel-default > .panel-heading:active, .panel-default > .panel-heading.active, .open > .dropdown-toggle.panel-default > .panel-heading { color: #fff; background-color: #a79c94; } .panel-default > .panel-heading { color: #222222; border-color: #a79c94; background-color: transparent; } .panel-heading > .panel-default { color: #222222; background-color: #e0e0e0; font-size: 1em; } .panel-body { padding: 0; border-color: #a79c94; } .panel-default > .panel-body { color: #222222; background-color: #ffffff; font-size: 1em; padding: 4px; } .panel-warning { border: 1px solid orange; background: #FFA; font-weight: bold; text-align: center; } .panel-title { color: inherit; font-size: 1em; font-weight: bold; margin-bottom: 0; margin-top: 4px; } .panel-group .panel { border-radius: 2em; margin-bottom: 6px; margin-top: 6px; overflow: hidden; } .panel-animal { background: #ffffff; line-height: 1.2em; color: #222222; margin-bottom: 8px; word-break: normal; word-wrap: break-word; } .panel-detail { background: #ffffff; line-height: 1.2em; color: #222222; padding: 4px; margin-bottom: 4px; word-break: normal; word-wrap: break-word; } .panel-detail-grey { background: #dddddd; } .panel-detail-blue { border: 2px solid lightskyblue; } .panel-scroll { border: 2px solid #aaa; width: 100%; overflow-x: auto; white-space: nowrap; } .panel-detail-red { background: linear-gradient(90deg, #B81D2F 1%, #b81d2f 77%); } .panel-detail-green { border: 2px solid #88ff88; } .panel-detail-info { border: 2px solid lightskyblue; margin: 4px; padding: 2px; } .panel-print { font-family: "Lato", sans-serif; font-size: 10px; width: 100%; max-width: 190mm; overflow-x: hidden; padding: 0; margin: auto; word-break: normal; word-wrap: break-word; white-space: normal; } .panel-print .chapter { width: 100%; max-width: 190mm; } .panel-print .head2 { max-width: 190mm; } .panel-print .head4 { max-width: 190mm; } .panel-print .graph { font-family: "Times New Roman", serif; width: 190mm; margin: 0 auto; } .panel-print .largeprintfont { font-size: large; white-space: normal; } .panel-print > largeTextTable { font-size: large; padding: 10mm; } .panel-scroll { width: 100%; overflow: auto; } } @media print { .panel-print { width: 100%; font-size: 10pt; padding: 0; margin: 0 auto; word-break: break-word; white-space: normal; overflow-wrap: break-word; } .panel-detail { width: 100%; margin: 0; padding: 1%; page-break-inside: avoid; } }.page-header { font-size: 10px; padding-left: 10mm; padding-right: 10mm; margin: 0; border-bottom: 2px solid #B81D2F; } @page { margin: 10mm; @top-right { counter-increment: page; counter-reset: page 1; content: "page " counter(page); } } @media print { .no-print, .no-print * { display: none !important; } .only-print, .only-print * { display: block; } .address { max-width: 90%; margin: 0 auto; } .form { padding: 0; width: 100%; } .row { margin: 0; padding: 2px; width: 100%; page-break-inside: avoid; } .col-md-12{ padding: 4px; width: 100%; } .col-md-11{ padding: 4px; width: 91.666667%; } .col-md-10{ padding: 4px; width: 83.333333%; } .col-md-9{ padding: 4px; width: 75%; } .col-md-8{ padding: 4px; width: 66.666667%; } .col-md-7{ padding: 4px; width: 58.333333%; } .col-md-6{ padding: 4px; width: 50%; } .col-md-5{ padding: 4px; width: 41.666667%; } .col-md-4{ padding: 4px; width: 33.333333%; } .col-md-3{ padding: 4px; width: 25%; } .col-md-2{ padding: 4px; width: 16.666667%; } .col-md-1{ padding: 4px; width: 8.3333333%; } .graph { width: 100%; margin: 0 auto; } .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 { float: left; } .rowspace { margin: 0 0; padding: 1mm 0; } .control-label { margin: 0; } a[href]:after { content: none; } .filters { display: none; } .dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_processing, .dataTables_wrapper .dataTables_paginate, .dataTables_wrapper .DTTT_container { display: none !important; border: 1px solid #000000; } .head2 { font-size: 14px; font-weight: bold; page-break-after: avoid; } } .prompt-dialog * { box-sizing: border-box; } .prompt-dialog { position: fixed; z-index: 10000; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.4); border: none; display: flex; align-items: center; justify-content: center; } .prompt-window { background-color: #fff; min-width: 480px; border: 4px solid black; border-top-width: 0; box-shadow: 4px 4px 10px rgba(0,0,0,0.1); display: flex; flex-flow: column wrap; } .prompt-title { display: flex; align-items: center; justify-content: center; font-weight: 500; background-color: #000000; width: 100%; color: #fff; padding: 4px 16px; } .prompt-close { margin-left: auto; background: none; border: 0 none; font-size: 26px; font-weight: inherit; font-family: inherit; color: #fff; } .prompt-text { margin: 48px 0; padding: 0 16px; } .prompt-button-group { margin: auto 0 16px 0; padding: 0 16px; display: flex; justify-content: space-between; flex-direction: row; } .prompt-button-group button { font-weight: inherit; font-family: inherit; }.rank-item { display: inline-flex; align-items: center; justify-content: center; gap: var(--spacing-2xs); font-weight: var(--font-weight-bold); } .rank-icon { font-size: var(--font-size-body-lg); } /* FIRST */ .is-rank-first { color: var(--color-status-yellow-500); } .table tbody tr.row-rank-first td { background-color: var(--color-status-yellow-35); } /* SECOND */ .is-rank-second { color: var(--color-grey-400); } .table tbody tr.row-rank-second td { background-color: var(--color-grey-35); } /* THIRD */ .table tbody tr.row-rank-third td { background-color: var(--color-yellow-35); } .is-rank-third { color: var(--color-yellow-600); }@media screen { p { margin: 0; } .address { max-width: 970px; margin: 0 auto; } .noPadding { padding: 0; } .noPaddingRight { padding-right: 0; } .noPaddingLeft { padding-left: 0; } .head2 { font-size: 1.25em; font-weight: bold; margin: 4px; page-break-after: avoid; } .head4 { font-size: 1em; font-weight: bold; margin: 4px; word-break: break-word; white-space: normal; page-break-after: avoid; } .context-menu { position: absolute; left: 0; top: 0; } .divBlock { display: inline-block; } .divhead { padding: 0; margin: 0; vertical-align: middle; font-size: inherit; font-weight: bold; text-align: center; word-wrap: break-word !important; white-space: normal; } .divvalue { font-size: inherit; text-align: center; word-wrap: break-word !important; white-space: normal; } .divrow { margin-left: 0; margin-right: 0; } .modal-dialog { /* Only centre horizontally. Width, max-width and the height cap are owned by modal.css; spacing around the dialog comes from .modal's padding. A vertical margin here would be added on top of the max-height:100% cap and get clipped by the overlay's overflow. */ margin-inline: auto; } /* add sorting icons to gridview sort links */ .glyphicon { font-family: inherit; } .glyphicon:before { font-family: 'Glyphicons Halflings', serif; } a.asc:after, a.desc:after { position: relative; top: 1px; display: inline-block; font-family: 'Glyphicons Halflings', serif; font-style: normal; font-weight: normal; padding-left: 4px; } a.asc:after { content: /*"\e113"*/ "\e151"; } a.desc:after { content: /*"\e114"*/ "\e152"; } .sort-numerical a.asc:after { content: "\e153"; } .sort-numerical a.desc:after { content: "\e154"; } .sort-ordinal a.asc:after { content: "\e155"; } .sort-ordinal a.desc:after { content: "\e156"; } .select2-dropdown { border: 1px solid #d9d2cb !important; } .select2-container--bootstrap .select2-selection { font-size: 1em; line-height: 1.2em; height: auto; color: #000000; } .select2-container--bootstrap.input-sm, .select2-container--bootstrap.input-lg { border-radius: 0; padding: 0; } .select2-container--bootstrap.input-sm .select2-selection--single, .form-group-sm .select2-container--bootstrap .select2-selection--single, .input-group-sm .select2-container--bootstrap .select2-selection--single, .select2-container--bootstrap.input-sm .select2-selection--single { font-size: 1em; line-height: 1.2em; padding: 4px 24px 4px 4px; height: auto; } .select2-container--bootstrap.input-sm .select2-selection--single, .input-group-sm .select2-container--bootstrap .select2-selection--single, .form-group-sm .select2-container--bootstrap .select2-selection--single { font-size: 1em; line-height: 1.2em; } .select2-container--bootstrap .select2-selection--single .select2-selection__rendered { padding: 4px; } .select2-container--bootstrap .select2-selection--single .select2-selection__clear { right: -6px; } .select2-search--dropdown .select2-search__field { padding: 4px; border-color: #d9d2cb; } .select2-container--bootstrap .select2-selection--single { height: auto; padding: 4px; } .select2-container--bootstrap .select2-selection--multiple .select2-selection__rendered { box-sizing: border-box; display: block; list-style: none; overflow: hidden; width: 100%; text-overflow: ellipsis; white-space: nowrap; } .select2-container--bootstrap.input-sm .select2-selection--multiple .select2-selection__choice, .input-group-sm .select2-container--bootstrap .select2-selection--multiple .select2-selection__choice, .form-group-sm .select2-container--bootstrap .select2-selection--multiple .select2-selection__choice { font-size: 1em; } .select2-container--bootstrap.input-sm .select2-selection--multiple .select2-search--inline .select2-search__field, .input-group-sm .select2-container--bootstrap .select2-selection--multiple .select2-search--inline .select2-search__field, .form-group-sm .select2-container--bootstrap .select2-selection--multiple .select2-search--inline .select2-search__field { font-size: 1em; } .select2-results__options { list-style: none; margin: 0; padding: 0; font-size: 1em; } .select2-container--bootstrap .select2-results__option--highlighted[aria-selected] { background-color: var(--button-secondary-bg) !important; color: var(--button-secondary-text) !important; font-weight: bold; } .select2-container--bootstrap .select2-selection { -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); background-color: #fff; border: 1px solid #ccc; outline: 0; } .select2-container--krajee .select2-selection { border: 1px solid #aaa; } .list-group-item { background-color: #fff; border: 1px solid #ddd; display: block; margin-bottom: -1px; padding: 4px 12px; position: relative; } .col-side-border { border-left: 1px solid #d9d2cb; border-right: 1px solid #d9d2cb; } .selector { padding: 4px; } .listselector { border: 1px solid #aaa; border-radius: 2em; margin: 4px 0 4px 0; padding: 4px; height: 40em; overflow-x: hidden; overflow-y: auto; } .listselector .selected { background-color: #d8d8d8; } .datepicker-dropdown { z-index: 1151 !important; } .ul200 { font-size: 1em; height: 20em !important; overflow: scroll; padding: 4px 12px; } } .smallText { font-size: .8em; } .largeprintfont { font-size: large; } .form-ajax { margin: 0; overflow-y: auto; white-space: nowrap; } .form-ajax-pagebreak { page-break-before: always; } .text-vertical { writing-mode: vertical-rl; transform: rotate(180deg); }/* Custom scrollbar — shared by .dt-table, .modal-body, .nav-tabs and any table wrapper that scrolls on its own (.table-scroll-x outside a DataTables wrapper), so every scroll area in the app looks the same however its markup was built. Uses the standard CSS scrollbar properties so styling works in both Chromium (since v121) and Firefox. scrollbar-color takes . */ .dt-table, .table-scroll-x:not(.dsorttablediv), .modal-body, .nav-tabs { scrollbar-width: thin; scrollbar-color: var(--button-primary-bg) var(--button-tertiary-bg); }:root { /* Neutral */ --state-neutral: var(--color-neutral-600); --state-neutral-bg-soft: var(--color-neutral-50); --state-neutral-bg-medium-soft: var(--color-neutral-75); --state-neutral-bg-medium: var(--color-neutral-100); --state-neutral-bg-solid: var(--color-neutral-600); --state-neutral-border: var(--color-neutral-200); --state-neutral-border-left: var(--color-neutral-400); --state-neutral-text: var(--color-neutral-700); --state-neutral-text-dark: var(--color-neutral-900); /* Info */ --state-info: var(--color-blue-600); --state-info-bg-soft: var(--color-blue-50); --state-info-bg-medium-soft: var(--color-blue-75); --state-info-bg-medium: var(--color-blue-100); --state-info-bg-solid: var(--color-blue-600); --state-info-border: var(--color-blue-200); --state-info-border-left: var(--color-blue-400); --state-info-text: var(--color-blue-700); --state-info-text-dark: var(--color-blue-900); /* Success */ --state-success: var(--color-status-green-700); --state-success-bg-soft: var(--color-status-green-50); --state-success-bg-medium-soft: var(--color-status-green-75); --state-success-bg-medium: var(--color-status-green-100); --state-success-bg-solid: var(--color-status-green-600); --state-success-border: var(--color-status-green-200); --state-success-border-left: var(--color-status-green-400); --state-success-text: var(--color-status-green-700); --state-success-text-dark: var(--color-status-green-900); /* Warning */ --state-warning: var(--color-status-yellow-600); --state-warning-bg-soft: var(--color-status-yellow-50); --state-warning-bg-medium-soft: var(--color-status-yellow-75); --state-warning-bg-medium: var(--color-status-yellow-100); --state-warning-banner-bg: var(--color-status-yellow-300); --state-warning-bg-solid: var(--color-status-yellow-600); --state-warning-border: var(--color-status-yellow-200); --state-warning-border-left: var(--color-status-yellow-400); --state-warning-text: var(--color-status-yellow-700); --state-warning-text-dark: var(--color-status-yellow-900); /* Danger */ --state-danger: var(--color-status-red-600); --state-danger-bg-soft: var(--color-status-red-50); --state-danger-bg-medium-soft: var(--color-status-red-75); --state-danger-bg-medium: var(--color-status-red-100); --state-danger-bg-solid: var(--color-status-red-600); --state-danger-border: var(--color-status-red-200); --state-danger-border-left: var(--color-status-red-400); --state-danger-text: var(--color-status-red-700); --state-danger-text-dark: var(--color-status-red-900); } .is-state-neutral { --state-text: var(--state-neutral-text); --state-text-dark: var(--state-neutral-text-dark); --state-bg-soft: var(--state-neutral-bg-soft); --state-bg-medium-soft: var(--state-neutral-bg-medium-soft); --state-bg-medium: var(--state-neutral-bg-medium); --state-bg-solid: var(--state-neutral-bg-solid); --state-border: var(--state-neutral-border); --state-border-left: var(--state-neutral-border-left); } .is-state-info { --state-text: var(--state-info-text); --state-text-dark: var(--state-info-text-dark); --state-bg-soft: var(--state-info-bg-soft); --state-bg-medium-soft: var(--state-info-bg-medium-soft); --state-bg-medium: var(--state-info-bg-medium); --state-bg-solid: var(--state-info-bg-solid); --state-border: var(--state-info-border); --state-border-left: var(--state-info-border-left); } .is-state-success { --state-text: var(--state-success-text); --state-text-dark: var(--state-success-text-dark); --state-bg-soft: var(--state-success-bg-soft); --state-bg-medium-soft: var(--state-success-bg-medium-soft); --state-bg-medium: var(--state-success-bg-medium); --state-bg-solid: var(--state-success-bg-solid); --state-border: var(--state-success-border); --state-border-left: var(--state-success-border-left); } .is-state-warning { --state-text: var(--state-warning-text); --state-text-dark: var(--state-warning-text-dark); --state-bg-soft: var(--state-warning-bg-soft); --state-bg-medium-soft: var(--state-warning-bg-medium-soft); --state-bg-medium: var(--state-warning-bg-medium); --state-bg-solid: var(--state-warning-bg-solid); --state-banner-bg: var(--state-warning-banner-bg); --state-border: var(--state-warning-border); --state-border-left: var(--state-warning-border-left); } .is-state-danger { --state-text: var(--state-danger-text); --state-text-dark: var(--state-danger-text-dark); --state-bg-soft: var(--state-danger-bg-soft); --state-bg-medium-soft: var(--state-danger-bg-medium-soft); --state-bg-medium: var(--state-danger-bg-medium); --state-bg-solid: var(--state-danger-bg-solid); --state-border: var(--state-danger-border); --state-border-left: var(--state-danger-border-left); } /* State helpers */ .has-state-text { color: var(--state-text); } .has-state-text-dark { color: var(--state-text-dark); } .has-state-bg { background-color: var(--state-bg-soft); } .has-state-border { border: var(--state-border); } .has-state-border-left { border-left: var(--state-border-left); } /* Tone helpers */ .is-tone-soft { background-color: var(--state-bg-soft); } .is-tone-medium-soft { background-color: var(--state-bg-medium-soft); } .is-tone-medium { background-color: var(--state-bg-medium); } .is-tone-solid { background-color: var(--state-bg-solid); color: var(--color-white); } .is-tone-outline { background: transparent; border: 1px solid var(--state-border); color: var(--state-text); }/* ----- CONTAINER ------ */ .nav-tabs { display: flex; gap: var(--spacing-sm); border-bottom: var(--border-width-base) solid var(--button-primary-border); list-style: none; overflow-x: auto; /* Multi-layer mask: gradient fades the right edge of tab content; a second always-opaque layer covers the bottom strip so the scrollbar and the border-bottom are NOT faded out at the right edge. */ --scroll-fade-size: 16px; --scroll-fade-keep-bottom: 12px; /* Static state: solid mask (no fade) so non-overflowing tabs are fully visible. Scroll-driven animation applies the actual fade only when there's horizontal overflow. */ --scroll-fade-mask: linear-gradient(black, black); -webkit-mask-image: var(--scroll-fade-mask), linear-gradient(black, black); mask-image: var(--scroll-fade-mask), linear-gradient(black, black); -webkit-mask-size: 100% calc(100% - var(--scroll-fade-keep-bottom)), 100% var(--scroll-fade-keep-bottom); mask-size: 100% calc(100% - var(--scroll-fade-keep-bottom)), 100% var(--scroll-fade-keep-bottom); -webkit-mask-position: 0 0, 0 100%; mask-position: 0 0, 0 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; } @supports (animation-timeline: scroll()) { .nav-tabs { animation: scroll-fade-x linear; animation-timeline: scroll(self inline); } } /* ----- TITLE ------ */ /* Tab titles inherit the button base from button.css (display, typography, transition, shadow, cursor, outline reset — see the note on the base rule there). Only the tab-specific bits live here: sm sizing, top-only radius, the border-bottom that merges the active tab with the pane below, and the secondary/primary state mapping. */ /* --- Inactive --- */ .nav-tabs > li > a { position: relative; height: var(--button-sm-height); padding-inline: var(--button-sm-padding); font-size: var(--font-size-body-xs); font-weight: var(--font-weight-bold); color: var(--button-secondary-text); background-color: var(--button-secondary-bg); border: var(--border-width-base) solid var(--button-secondary-border); border-bottom: var(--border-width-sm) solid var(--button-secondary-border); border-radius: var(--border-radius-base) var(--border-radius-base) 0 0; } /* --- Inactive hover --- */ .nav-tabs > li:not(.active) > a:hover { color: var(--button-secondary-text); background-color: var(--button-secondary-bg-hover); border: var(--border-width-base) solid var(--button-secondary-border-hover); border-bottom: var(--border-width-sm) solid var(--button-secondary-bg-hover); border-radius: var(--border-radius-base) var(--border-radius-base) 0 0; } /* --- Inactive pressed --- */ .nav-tabs > li:not(.active) > a:active { background-color: var(--button-secondary-active); } /* --- Active --- */ .nav-tabs > li.active > a { color: var(--button-primary-text); background-color: var(--button-primary-bg); border: var(--border-width-base) solid var(--button-primary-border); border-bottom: var(--border-width-sm) solid var(--button-primary-bg); cursor: default; } /* --- Active hover --- */ .nav-tabs > li.active > a:hover { color: var(--button-primary-text); background-color: var(--button-primary-bg-hover); border: var(--border-width-base) solid var(--button-primary-border-hover); border-bottom: var(--border-width-sm) solid var(--button-primary-bg-hover); } /* --- Active pressed --- */ .nav-tabs > li.active > a:active { background-color: var(--button-primary-active); } /* A card inside a tab pane butts up against the tab strip, so it must never round its top corners — only the bottom two. The flag is inherited by every descendant card that opts in by reading --dt-radius-top (.dt-container, .table-scroll-x:has(> .table-title), .empty-table-container). */ .tab-content { --dt-radius-top: 0; } .tab-content > .tab-pane { display: none; } .tab-content > .active { display: flex; flex-direction: column; gap: var(--spacing-md); } /*Tabs whose panes wrap content that is not a self-styled card on its own. Matches: - panes wrapping accordions (form-ajax > accordion-bar) - panes wrapping a pageDiv (id^="divdiv") that mixes table + descriptive text/lists, so the surrounding prose also sits inside the card - panes containing a raw 
 (eg. the imported-lines File tab)
  A form-ajax that only wraps a table — eg. the stdfactor tab — is excluded
  because the dt-container already provides its own padded card. */
.tab-content:has(> .tab-pane > [class*="form-ajax"] > .accordion-bar),
.tab-content:has(> .tab-pane > [id^="divdiv"]),
.tab-content:has(> .tab-pane > pre) {
    /* Here the .tab-content itself is the flush card, so cards nested inside
       its padding keep all four corners rounded. */
    --dt-radius-top: var(--border-radius-base);
    padding: clamp(
            var(--spacing-xl),
            2vw,
            var(--spacing-4xl)
    );
    background-color: var(--color-neutral-5);
    border-radius: 0 0 var(--border-radius-base) var(--border-radius-base);
    border: var(--border-width-sm) solid var(--color-grey-100);
    transition: padding var(--transition-base);

}

/*
.tabs-wrapper {
}

.tab-content {
    border-bottom: 1px solid var(--button-secondary-bg);
    border-inline: 1px solid var(--button-secondary-bg);
    border-radius: 0 0 10px 10px;
}

*/h1, h2, h3 {
    text-transform: uppercase;
    margin: 0;
    padding: 0;
    white-space: normal;
}

p {
    margin: 0;
    padding: 0;
}

/* Sekundær tekst - beskrivelseslinjen under et parameternavn i en tabelcelle.
   Erstatter de tidligere -tags, som arvede browserens 80 % og derfor gav
   forskellig størrelse alt efter forælderens (celle eller knap). */
.is-text-secondary {
    font-size: var(--font-size-body-xs);
    color: var(--color-grey-500);
}

h1 {
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--letter-spacing-md);
    font-size: var(--font-size-body-2xl);
    color: var(--color-grey-900);
}

h2 {
    font-weight: var(--font-weight-semi-bold);
    letter-spacing: var(--letter-spacing-base);
    font-size: var(--font-size-body-md);
    color: var(--color-grey-750);
}

/* .card-title is the h3 typography as a class, so a card headline keeps the same
   look whatever element it sits on (see .card-header below). */
h3, .card-title {
    font-weight: var(--font-weight-semi-bold);
    letter-spacing: var(--letter-spacing-base);
    font-size: var(--font-size-body-base);
    color: var(--color-neutral-700);
}

/* A card's title line: the headline to the left, the card's own action buttons
   to the right on the same line (the supplier cards' "create purchase order"
   button, SuppliersDiv::supplierCardTitle()). The actions keep their auto start
   margin as well as space-between, so they stay right even when the headline
   wraps onto its own line. */
.card-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-2xs) var(--spacing-md);
    width: 100%;
}

.card-header-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-2xs);
    margin-inline-start: auto;
}/*
==========================================================================

    TABLE OF CONTENTS:
    1. DESCRIPTION
    2. TREE STRUCTURE
    3. CONTAINER
    4. TOAST
        4.1 Base
        4.2 Icon
        4.3 Message
        4.4 Close button
    5. SMÅ SKÆRME
    6. ENTER / EXIT


==========================================================================
    1. DESCRIPTION
==========================================================================

    Kortvarige beskeder fra Notifier (static/js/concat/notifier.js), stablet
    nederst til højre. Farverne kommer fra state-tokens i states.css via
    .is-state-*, så en toast læses som den samme besked som det tilsvarende
    banner - blot flydende og selvlukkende.


==========================================================================
    2. TREE STRUCTURE
==========================================================================

    .toast-container
    └─ .toast.is-state-*
       ├─ .toast-icon
       ├─ .toast-message
       └─ .toast-close


==========================================================================
    3. CONTAINER
==========================================================================
*/

.toast-container {
    position: fixed;
    inset-block-end: var(--spacing-3xl);
    inset-inline-end: var(--spacing-3xl);
    z-index: var(--z-toast);

    max-width: calc(100% - 2 * var(--spacing-3xl));

    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--spacing-base);

    /* Beholderen dækker et hjørne af skærmen hele tiden, også når den er tom.
       Klik skal gå igennem til siden bagved - kun selve beskederne tager imod. */
    pointer-events: none;
}

/*
==========================================================================
    4. TOAST
==========================================================================
*/

/*  4.1     Base                                                        */
.toast {
    /* Farverne bygges her og ikke i states.css, fordi en toast er en anden
       slags flade end et banner: den svæver over vilkårligt indhold i stedet
       for at ligge i sidens flow, og den er væk igen om ti sekunder.
       Betydningen bæres af ikonet og kantstriben frem for af tekstfarven - det
       er dér, læsbarheden vindes. Teksten er --state-text-dark, altså
       tilstandens egen kulør på 900-niveau. På 10% lyshed læses den som
       nærsort med et anstrøg, ikke som farvet tekst, og den binder beskeden
       sammen med fladen uden at koste kontrast: 13,8-14,8:1 mod de 10,1-11,7:1
       en neutral mørkegrå gav på den samme flade.

       Fladen er --state-bg-medium-soft og ikke den lysere --state-bg-soft, som
       bannerne bruger. Et banner ligger i sidens flow og har rammen omkring
       sig til at afgrænse sig; en toast har kun sin egen flade at stå på, og
       på det lyseste niveau blev den for bleg til at holde mod siden bagved.

       Alle par er målt mod WCAG 2.1 AA. Beskeden ligger på 13,8-14,8:1 mod
       kravet 4,5:1 (1.4.3) og klarer dermed også AAA; signalfarven som tekst
       - altså 600/700-niveauet - gav 4,4-6,6:1, hvor advarslen lå tættest på
       at falde igennem. Ikon, kantstribe, kryds og fokusring ligger på
       4,0-7,0:1 mod kravet 3:1 (1.4.11). Tallene gælder de tokens, der står
       her - ændrer nogen --state-*, skal de regnes igen. */
    --toast-surface: var(--state-bg-medium-soft, var(--state-neutral-bg-medium-soft));
    --toast-accent: var(--state-text, var(--state-neutral-text));
    --toast-text: var(--state-text-dark, var(--state-neutral-text-dark));

    pointer-events: auto;

    display: flex;
    align-items: flex-start;
    gap: var(--spacing-md);

    padding-block: var(--spacing-md);
    padding-inline: var(--spacing-xl);

    /* max-width fanger båndet mellem 440px - hvor 400 plus indrykning i begge
       sider holder op med at kunne være der - og de 480px, hvor mobilreglen
       nedenfor tager over. Den fanger også kraftig zoom, hvor viewporten
       bliver smal, uden at media query'en fyrer. */
    width: 500px;
    max-width: 100%;

    font-size: var(--font-size-body-md);
    font-weight: var(--font-weight-normal);
    letter-spacing: var(--letter-spacing-sm);
    line-height: var(--line-height-xs);
    text-align: start;

    border-radius: 0 var(--border-radius-base) var(--border-radius-base) 0;
    border: var(--border-width-sm) solid var(--state-border, var(--state-neutral-border));
    border-inline-start: var(--border-width-brand) solid var(--toast-accent);
    background-color: var(--toast-surface);
    color: var(--toast-text);

    /* --shadow-base er beregnet til flader, der ligger i sidens flow. En toast
       svæver over alt andet og skal løftes tydeligere fra det, den dækker. */
    box-shadow: 0 8px 16px -4px rgba(0, 0, 0, 0.14), 0 2px 6px -2px rgba(0, 0, 0, 0.10);
}

/*  4.2     Icon                                                        */
.toast-icon {
    flex: none;
    font-size: var(--font-size-body-xl);
    color: var(--toast-accent);

    /* Ikonet er kvadratisk og teksten har line-height; uden det her sidder
       ikonet en anelse for højt ved siden af første linje. */
    line-height: var(--line-height-xs);
}

/*  4.3     Message                                                     */
.toast-message {
    /* Teksten fylder pladsen mellem ikon og luk-knap, så knappen bliver i
       højre kant uanset hvor kort beskeden er. */
    flex: 1;

    white-space: normal;
    overflow-wrap: break-word;
    word-break: normal;
}

/*  4.4     Close button                                                */
/*  Knappen er ikke en .button-variant. Den mindste af dem (tertiary, xs,
    icon-only) er en hvid 28px-flade med kant og skygge, og den ville i en
    tonet toast se ud som noget, man skal trykke på for at handle - ikke som
    en måde at afvise beskeden på. Her er den et kryds uden flade, som først
    får en at stå på ved hover. Reglerne nedenfor rydder den
    basis-styling, som button.css lægger på alle