@charset "UTF-8"; /* ================================== #GELINKT NOTULEREN ================================== */ /** * A design system for Flanders GOV applications */ /** * CONTENTS * --- * EMBER-APPUNIVERSUM: The component library * PROJECT: Project specific styles * PLUGINS: RDFA editor custom styles * UTILITIES: Project utility styles * SHAME: Temporary hacks and quickfixes */ /* ================================== #APPUNIVERSUM ================================== */ /** * A design universe for Flanders GOV applications */ /** * CONTENTS * --- * SETTINGS: Project settings and variables * TOOLS: Mixins * GENERIC: Reset, global box-sizing and font-styles * ELEMENTS: Plain html tag styling * OBJECTS: OOCSS unstyled objects (namespace: '.au-o-...') * COMPONENTS: Components (namespace: '.au-c-...') * PLUGINS: Third-party styles * UTILITIES: Single function helper classes (namespace: '.au-u-...') */ /* ================================== #VARIABLES Project settings and variables File namespace: _s-... ================================== */ :root { --au-white: #ffffff; --au-gray-100: #f7f9fc; --au-gray-200: #e8ebee; --au-gray-300: #cfd5dd; --au-gray-400: #afb9c5; --au-gray-500: #8695a8; --au-gray-600: #7f8b99; --au-gray-700: #687483; --au-gray-800: #4f5864; --au-gray-900: #333332; --au-gray-1000: #000000; --au-blue-100: #f4f7fb; --au-blue-200: #e4ebf5; --au-blue-300: #b2ccef; --au-blue-500: #5990de; --au-blue-600: #3779d7; --au-blue-700: #0055cc; --au-blue-800: #004ab2; --au-blue-900: #003b8e; --au-yellow-100: #fff9d5; --au-yellow-200: #fff29b; --au-yellow-300: #ffe615; --au-yellow-400: #ffc515; --au-yellow-600: #7f6e3b; --au-yellow-900: #473d21; --au-orange-200: #fff9e8; --au-orange-300: #ffeeb9; --au-orange-400: #ffe49c; --au-orange-500: #ffa10a; --au-orange-600: #d07b06; --au-orange-700: #9f5804; --au-red-100: #fdf7f7; --au-red-200: #fbeded; --au-red-300: #f4c8c9; --au-red-400: #f1aeae; --au-red-500: #e77474; --au-red-600: #d2373c; --au-red-700: #aa2729; --au-red-900: #470000; --au-green-100: #f8fcf9; --au-green-200: #ecf6ee; --au-green-300: #c5e5cc; --au-green-400: #b1dcbb; --au-green-500: #009e47; --au-green-700: #007a37; --au-green-900: #323d08; --vl-white: #ffffff; --vl-grey-05: #f7f9fc; --vl-grey-10: #e8ebee; --vl-grey-20: #cfd5dd; --vl-grey-50: #8695a8; --vl-grey-70: #687483; --vl-grey-100: #333332; --vl-grey-110: #000000; --vl-yellow-100: #ffe615; --vl-blue-15: #e4ebf5; --vl-blue-30: #b2ccef; --vl-blue-65: #5990de; --vl-blue-100: #0055cc; --vl-blue-110: #003b8e; --vl-green-10: #ecf6ee; --vl-green-30: #c5e5cc; --vl-green-40: #b1dcbb; --vl-green-100: #009e47; --vl-green-130: #007a37; --vl-red-10: #fbeded; --vl-red-30: #f4c8c9; --vl-red-40: #f1aeae; --vl-red-100: #d2373c; --vl-red-130: #aa2729; --vl-orange-10: #fff9e8; --vl-orange-30: #ffeeb9; --vl-orange-40: #ffe49c; --vl-orange-100: #ffa10a; --vl-orange-110: #d07b06; --vl-orange-120: #9f5804; --vl-lime-100: #a3cc00; --vl-lime-120: #6f8b00; --vl-brick-100: #d53d5e; --vl-brick-120: #85273b; --vl-chocolate-100: #d26e25; --vl-chocolate-120: #904e1d; --vl-picton-100: #32b1e9; --vl-picton-120: #16465b; --au-page-bg: #ffffff; --au-select-text-color: #333332; --au-select-text-bg: #e4ebf5; --au-divider-color: #e8ebee; --au-outline-color: #5990de; --au-global-font-size: 1.5rem; --au-global-line-height: 1.5; --au-font: "flanders-sans", BlinkMacSystemFont, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --au-font-secondary: "flanders-serif"; --au-font-tertiary: courier, monospace; --au-light: 300; --au-regular: 400; --au-medium: 500; --au-bold: 700; --au-base: 1.5rem; --au-para: 1.8rem; --au-para-small: 1.6rem; --au-lead: 2.2rem; --au-lead-medium: 2rem; --au-lead-small: 1.8rem; --au-small: 1.4rem; --au-tiny: 1.3rem; --au-h-functional-small: 1.3rem; --au-h-functional: 1.5rem; --au-h6: 1.6rem; --au-h5: 1.8rem; --au-h4: 2rem; --au-h3-small: 2.2rem; --au-h3: 2.6rem; --au-h2-small: 2.6rem; --au-h2: 3.2rem; --au-h1-small: 3rem; --au-h1-medium: 4rem; --au-h1: 4.4rem; --au-icon-size: 1.3rem; --au-icon-size-medium: 1.6rem; --au-icon-size-large: 1.9rem; --au-radius: 0.3rem; --au-border: 0.2rem; --au-outline-border: 0.3rem; --au-outline-border-style: solid; --au-outline: #5990de 0.3rem solid; --au-outline-offset: 0.2rem; --au-outline-offset-negative: -0.3rem; --au-duration: 0.125s; --au-easing: cubic-bezier(0.19, 1, 0.22, 1); --au-transition: 0.125s cubic-bezier(0.19, 1, 0.22, 1); --au-z-index-alpha: 1; --au-z-index-beta: 2; --au-z-index-gamma: 3; } /* ================================== #TOOLS Project settings and variables File namespace: _t-... ================================== */ /* ======================================================================== // #FONT-SIZE - DEPRECATED (set font size in css) // ======================================================================== */ /* ================================== #GENERIC Reset, global box-sizing and font-styles File namespace: _g-... ================================== */ /* ========================================================================== Reset ========================================================================== */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } strong { font-weight: 500; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ""; content: none; } table { border-collapse: collapse; border-spacing: 0; } button { background: transparent; } img { max-width: 100%; } :-moz-submit-invalid { box-shadow: none; } :-moz-ui-invalid { box-shadow: none; } /* ========================================================================== #BOX-SIZING ========================================================================== */ /** * More sensible default box-sizing: * css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice */ html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; } /* ========================================================================== #FONT ========================================================================== */ /* Variables ========================================================================== */ /* Content ========================================================================== */ @font-face { font-family: flanders-serif; src: url(../@appuniversum/ember-appuniversum/fonts/flanders-serif-light.woff2) format("woff2"), url(../@appuniversum/ember-appuniversum/fonts/flanders-serif-light.woff) format("woff"); font-weight: 300; font-style: normal; font-display: fallback; } @font-face { font-family: flanders-serif; src: url(../@appuniversum/ember-appuniversum/fonts/flanders-serif-regular.woff2) format("woff2"), url(../@appuniversum/ember-appuniversum/fonts/flanders-serif-regular.woff) format("woff"); font-weight: 400; font-style: normal; font-display: fallback; } @font-face { font-family: flanders-serif; src: url(../@appuniversum/ember-appuniversum/fonts/flanders-serif-medium.woff2) format("woff2"), url(../@appuniversum/ember-appuniversum/fonts/flanders-serif-medium.woff) format("woff"); font-weight: 500; font-style: normal; font-display: fallback; } @font-face { font-family: flanders-serif; src: url(../@appuniversum/ember-appuniversum/fonts/flanders-serif-bold.woff2) format("woff2"), url(../@appuniversum/ember-appuniversum/fonts/flanders-serif-bold.woff) format("woff"); font-weight: 700; font-style: normal; font-display: fallback; } @font-face { font-family: flanders-sans; src: url(../@appuniversum/ember-appuniversum/fonts/flanders-sans-light.woff2) format("woff2"), url(../@appuniversum/ember-appuniversum/fonts/flanders-sans-light.woff) format("woff"); font-weight: 300; font-style: normal; font-display: fallback; } @font-face { font-family: flanders-sans; src: url(../@appuniversum/ember-appuniversum/fonts/flanders-sans-regular.woff2) format("woff2"), url(../@appuniversum/ember-appuniversum/fonts/flanders-sans-regular.woff) format("woff"); font-weight: 400; font-style: normal; font-display: fallback; } @font-face { font-family: flanders-sans; src: url(../@appuniversum/ember-appuniversum/fonts/flanders-sans-medium.woff2) format("woff2"), url(../@appuniversum/ember-appuniversum/fonts/flanders-sans-medium.woff) format("woff"); font-weight: 500; font-style: normal; font-display: fallback; } @font-face { font-family: flanders-sans; src: url(../@appuniversum/ember-appuniversum/fonts/flanders-sans-bold.woff2) format("woff2"), url(../@appuniversum/ember-appuniversum/fonts/flanders-sans-bold.woff) format("woff"); font-weight: 700; font-style: normal; font-display: fallback; } /* ================================== #ELEMENTS Plain html tag styling File namespace: _e-... ================================== */ /* ========================================================================== #PAGE ========================================================================== */ /** * Simple page-level setup. * * 1. Set the default `line-height` for the entire project, * sourced from our default variables. The `line-height` is calculated to exist unitlessly. * 2. Ensure the page always fills at least the entire height of the viewport. * 3. Set font size to be compatible with WU3 en LNE webcomponents */ html { font-family: var(--au-font); font-size: 62.5%; /* [4] */ min-height: 100%; /* [3] */ background-color: var(--au-page-bg); text-rendering: optimizeLegibility; -webkit-overflow-scrolling: touch; } body { font-size: var(--au-global-font-size); /* [4] */ line-height: var(--au-global-line-height); /* [1] */ } ::selection { color: var(--au-select-text-color); background-color: var(--au-select-text-bg); } /* ================================== #OBJECTS OOCSS unstyled objects File namespace: _o-... Style namespace: .au-o-... ================================== */ /* ========================================================================== #BOX ========================================================================== */ /** * The box object simply boxes off content. Extend with cosmetic styles in the * Components layer. * * 1. So we can apply the `.au-o-box` class to naturally-inline elements. */ .au-o-box { display: block; /* [1] */ padding: 2.4rem; } .au-o-box > :last-child { margin-bottom: 0; } /* Size variants ========================================================================== */ .au-o-box--flush { padding: 0; } .au-o-box--tiny { padding: 0.6rem; } .au-o-box--small { padding: 1.2rem; } .au-o-box--large { padding: 4.8rem; } .au-o-box--huge { padding: 9.6rem; } /* ========================================================================== #FLOW ========================================================================== */ /** * The flow object creates a consistent vertical rhythm * */ .au-o-flow > * { margin-bottom: 0; } .au-o-flow > * + * { margin-top: 2.4rem; } /* Size variants ========================================================================== */ .au-o-flow--tiny > * + * { margin-top: 0.6rem; } .au-o-flow--small > * + * { margin-top: 1.2rem; } .au-o-flow--large > * + * { margin-top: 4.8rem; } .au-o-flow--huge > * + * { margin-top: 9.6rem; } /* ========================================================================== #GRID --- NOTICE: Adapted from https://github.com/Dietr/inuitcss-plugin-flexlayout ========================================================================== */ /** * Grid-like layout system. * * The layout object provides us with a column-style layout system. This file * contains the basic structural elements, but classes should be complemented * with width utilities, for example: * *
*
*
*
*
*
* * The above will create a two-column structure in which each column will * fluidly fill half of the width of the parent. We can have more complex * systems: * *
*
*
*
*
*
*
*
* * The above will create a system in which the first item will be 100% width * until we enter our medium breakpoint, when it will become 33.333% width. The * second and third items will be 50% of their parent, until they also become * 33.333% width at the medium breakpoint. * * We can also manipulate entire layout systems by adding a series of modifiers * to the `.au-o-grid` block. For example: * *
* * This will reverse the displayed order of the system so that it runs in the * opposite order to our source, effectively flipping the system over. * *
* * This will cause the system to fill up from either the centre or the right * hand side. Default behaviour is to fill up the layout system from the left. * * There are plenty more options available to us: explore them below. */ /* Default/mandatory classes. ========================================================================== */ /** * 1. Allows us to use the layout object on any type of element. * 2. We need to defensively reset any box-model properties. * 3. Define flexbox settings to allow grid-like behaviour * 4. Use the negative margin trick for multi-row grids: */ .au-o-grid { display: flex; /* [3] */ align-items: stretch; /* [3] */ flex-wrap: wrap; /* [3] */ padding: 0; /* [2] */ list-style: none; /* [1] */ margin: -2.4rem; /* [4] */ } /** * 1. By default, all grid items are full-width (mobile first). * 2. Gutters provided by padding: */ .au-o-grid__item { width: 100%; /* [1] */ padding: 2.4rem; } /* Gutter size modifiers. ========================================================================== */ .au-o-grid--tiny { margin: -0.6rem; } .au-o-grid--tiny > .au-o-grid__item { padding: 0.6rem; } .au-o-grid--small { margin: -1.2rem; } .au-o-grid--small > .au-o-grid__item { padding: 1.2rem; } .au-o-grid--large { margin: -4.8rem; } .au-o-grid--large > .au-o-grid__item { padding: 4.8rem; } .au-o-grid--huge { margin: -9.6rem; } .au-o-grid--huge > .au-o-grid__item { padding: 9.6rem; } .au-o-grid--flush { margin: 0; } .au-o-grid--flush > .au-o-grid__item { padding: 0; } /* Vertical alignment modifiers. ========================================================================== */ /** * Align all grid items to the middles of each other. */ .au-o-grid--middle > .au-o-grid__item { align-self: center; } /** * Align all grid items to the bottoms of each other. */ .au-o-grid--bottom > .au-o-grid__item { align-self: flex-end; } /* Fill order modifiers. ========================================================================== */ /** * Fill up the grid system from the centre. */ .au-o-grid--center { justify-content: center; } /** * Fill up the grid system from the right-hand side. */ .au-o-grid--right { justify-content: flex-end; } /** * Reverse the rendered order of the grid system. */ .au-o-grid--reverse { flex-direction: row-reverse; } /** * Stretch the grid in the available space */ .au-o-grid--stretch { height: 100%; } /** * Fix the grid in the available space */ .au-o-grid--fixed { height: 100%; overflow: hidden; } .au-o-grid--fixed > .au-o-grid__item { height: 100%; } /* ========================================================================== #LAYOUT --- NOTICE: Adapted from https://github.com/inuitcss/inuitcss/blob/develop/objects/_objects.wrapper.scss ========================================================================== */ /* Variables ========================================================================== */ /* Default classes. ========================================================================== */ .au-o-layout { padding-right: 2.4rem; padding-left: 2.4rem; margin-right: auto; margin-left: auto; max-width: 1280px; } @media (min-width: 63.9375em) { .au-o-layout { padding-right: 4.8rem; padding-left: 4.8rem; } } /* Size variants. ========================================================================== */ .au-o-layout--small { max-width: 768px; } .au-o-layout--large { max-width: 1600px; } /* ========================================================================== #REGION ========================================================================== */ /** * Creates even spaced responsive region using the default spacing variables. * *
*
*
*
* */ /* Variables ========================================================================== */ /* Default classes. ========================================================================== */ .au-o-region { padding-top: 1.2rem; padding-bottom: 1.2rem; } @media (min-width: 63.9375em) { .au-o-region { padding-top: 2.4rem; padding-bottom: 2.4rem; } } .au-o-region-small { padding-top: 0.6rem; padding-bottom: 0.6rem; } @media (min-width: 63.9375em) { .au-o-region-small { padding-top: 1.2rem; padding-bottom: 1.2rem; } } .au-o-region-large { padding-top: 2.4rem; padding-bottom: 2.4rem; } @media (min-width: 63.9375em) { .au-o-region-large { padding-top: 4.8rem; padding-bottom: 4.8rem; } } /* ================================== #Components File namespace: _c-... Style namespace: .au-c-... ================================== */ /* ================================== #ACCORDION ================================== */ /* Variables ========================================================================== */ /* Component ========================================================================== */ .au-c-accordion { padding-bottom: 2.4rem; } .au-c-accordion__subtitle { margin-left: 2.4rem; } .au-c-accordion .au-c-toolbar { margin-bottom: 0.6rem; cursor: pointer; } .au-c-accordion .au-c-button, .au-c-accordion .data-table-pagination-right button, .data-table-pagination-right .au-c-accordion button { padding-left: 0; text-align: left; white-space: initial; overflow: visible; height: auto; cursor: inherit; } .au-c-accordion .au-c-toolbar .au-c-icon { color: var(--au-blue-700); transition: color var(--au-transition); margin-top: 0.4rem; } .au-c-accordion .au-c-toolbar .au-c-icon:hover, .au-c-accordion .au-c-toolbar .au-c-icon:focus-within { color: var(--au-blue-900); } .au-c-accordion .au-c-content:focus { outline: 0; } .au-c-accordion .au-c-content:focus-visible { outline: var(--au-outline); } .au-c-accordion--border .au-c-toolbar { border: 0.1rem solid var(--au-divider-color); border-radius: var(--au-radius); padding: 0.6rem; transition: background-color var(--au-transition); } .au-c-accordion--border .au-c-toolbar:hover, .au-c-accordion--border .au-c-toolbar:focus-within { background-color: var(--au-white); } .au-c-accordion--reverse .au-c-toolbar { justify-content: flex-end; } /* ================================== #ALERT ================================== */ /* Variables ========================================================================== */ /* Component ========================================================================== */ .au-c-alert { color: var(--au-gray-900); display: flex; font-family: var(--au-font); font-size: var(--au-h6); padding: 2.4rem; margin-bottom: 2.4rem; background-color: var(--au-gray-200); border-radius: var(--au-radius); border: 0.1rem solid var(--au-gray-300); } .au-c-alert > :last-child { margin-bottom: 0; } .au-c-alert .au-c-link { flex-shrink: 0; } .au-c-alert__icon { background-color: var(--au-white); border-radius: 4.8rem; height: 4.7rem; width: 4.8rem; margin-right: 2.4rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .au-c-alert__icon .au-c-icon { height: 1.9rem; width: 2rem; bottom: 0; } .au-c-alert__content { display: flex; flex-direction: column; justify-content: center; flex-grow: 1; } .au-c-alert__title { font-weight: var(--au-medium); } .au-c-alert__close { cursor: pointer; display: flex; align-items: center; justify-content: center; appearance: none; border: 0; padding: 0; height: 2.4rem; width: 2.4rem; text-align: center; color: var(--au-gray-700); transition: color var(--au-transition); } .au-c-alert__close:hover, .au-c-alert__close:focus { color: var(--au-gray-600); } /* Modifiers ========================================================================== */ .au-c-alert--tiny { padding: 1.2rem; } .au-c-alert--tiny .au-c-alert__icon { display: none; } .au-c-alert--small { padding: 1.2rem; } .au-c-alert--small .au-c-alert__icon { height: 2.3rem; width: 2.4rem; margin-right: 1.2rem; } .au-c-alert--small .au-c-icon { height: 1.4rem; width: 1.5rem; } .au-c-alert--success { background-color: var(--au-green-200); border-color: var(--au-green-300); } .au-c-alert--success .au-c-alert__icon { background-color: var(--au-green-500); } .au-c-alert--success .au-c-alert__icon .au-c-icon { fill: var(--au-white); } .au-c-alert--warning { background-color: var(--au-orange-200); border-color: var(--au-orange-300); } .au-c-alert--warning .au-c-alert__icon { background-color: var(--au-orange-500); } .au-c-alert--warning .au-c-alert__icon .au-c-icon { fill: var(--au-white); } .au-c-alert--error { background-color: var(--au-red-200); border-color: var(--au-red-300); } .au-c-alert--error .au-c-alert__icon { background-color: var(--au-red-600); } .au-c-alert--error .au-c-alert__icon .au-c-icon { fill: var(--au-white); } /* ================================== #APP Global app container ================================== */ .au-c-app { display: flex; flex-direction: column; height: 100vh; overflow: auto; background-color: var(--au-white); } @media (min-width: 63.9375em) { .au-c-app { overflow: hidden; } } /* ================================== #BADGE ================================== */ /* Variables ========================================================================== */ /* Component ========================================================================== */ .au-c-badge { color: var(--au-gray-700); background-color: var(--au-white); border-radius: 4.8rem; height: 4.7rem; width: 4.8rem; margin-right: 2.4rem; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .au-c-badge .au-c-icon { height: 1.9rem; width: 2rem; bottom: 0; } .au-c-badge__number { font-weight: var(--au-medium); } .au-c-badge:not(.au-c-badge--small) .au-c-badge__number { font-size: 2rem; } /* Modifiers ========================================================================== */ .au-c-badge--default { color: var(--au-gray-900); background-color: var(--au-gray-200); } .au-c-badge--brand { color: var(--au-yellow-900); background-color: var(--au-yellow-300); } .au-c-badge--border { color: var(--au-gray-900); border: 0.1rem solid var(--au-gray-300); } .au-c-badge--action { color: var(--au-white); background-color: var(--au-blue-700); } .au-c-badge--success { color: var(--au-white); background-color: var(--au-green-700); } .au-c-badge--warning { color: var(--au-white); background-color: var(--au-orange-500); } .au-c-badge--error { color: var(--au-white); background-color: var(--au-red-600); } .au-c-badge--small { height: 2.4rem; width: 2.4rem; margin-right: 0; } .au-c-badge--small .au-c-icon { height: 1.4rem; width: 1.5rem; } .au-c-badge--small .au-c-badge__number { font-size: 1.3rem; } /* ================================== #BODY CONTAINER ================================== */ .au-c-body-container { display: flex; flex-direction: column; flex-grow: 1; height: 100%; overflow: hidden; position: relative; } .au-c-body-container--scroll { overflow: auto; } /* ================================== #BRAND ================================== */ /* Variables ========================================================================== */ /* Component ========================================================================== */ .au-c-brand { display: inline-flex; align-items: center; text-decoration: none; position: relative; background-color: var(--au-white); } .au-c-brand--link:focus { outline: none; } .au-c-brand__logo { position: relative; width: 4.2rem; height: 4.2rem; padding-left: 0.75rem; overflow: hidden; background-color: var(--au-white); transition: background-color var(--au-transition); } .au-c-brand__logo svg { fill: var(--au-gray-900); height: 100%; width: 56%; } .au-c-brand__logo::before { content: ""; display: block; position: absolute; right: -0.1rem; bottom: -0.3rem; border-top: 9rem solid var(--au-white); border-left: 3.07818rem solid transparent; } .au-c-brand__logo::after { content: ""; display: block; position: absolute; top: -0.2rem; right: 17%; transform: rotate(-19deg); width: 0.1rem; height: calc(100% + 0.4rem); background-color: var(--au-gray-300); } .au-c-brand--link:hover .au-c-brand__logo, .au-c-brand--link:focus .au-c-brand__logo { background-color: var(--au-gray-200); } .au-c-brand--tagline .au-c-brand__logo { width: 4.8rem; height: 4.8rem; } .au-c-brand__logotype { font-size: 1.8rem; line-height: 1; display: none; position: relative; font-family: var(--au-font); font-weight: var(--au-medium); color: var(--au-gray-900); margin-left: 0.6rem; transition: color var(--au-transition); } .au-c-brand--tagline .au-c-brand__logotype { display: flex; justify-content: center; flex-direction: column; height: 4.2rem; padding-right: 1.2rem; } @media (min-width: 47.9375em) { .au-c-brand__logotype { display: flex; justify-content: center; flex-direction: column; height: 4.2rem; padding-right: 1.2rem; } .au-c-brand--link:hover .au-c-brand__logotype, .au-c-brand--link:focus .au-c-brand__logotype { color: var(--au-blue-700); } .au-c-brand--link:focus .au-c-brand__logotype { outline: var(--au-outline); } } .au-c-brand__main { font-size: var(--au-h5); line-height: 1.2; display: block; } .au-c-brand__tagline { font-size: 1.2rem; line-height: 1.2; font-weight: var(--au-regular); display: block; color: var(--au-gray-900); } /* ================================== #BUTTONS ================================== */ /* Variables ========================================================================== */ /* Component ========================================================================== */ .au-c-button, .data-table-pagination-right button { font-size: var(--au-h6); line-height: 3.2rem; font-family: var(--au-font); font-weight: var(--au-regular); cursor: pointer; height: 3.6rem; text-decoration: none; text-align: center; appearance: none; display: inline-flex; gap: 0.6rem; align-items: center; padding: 0 1.2rem; border-radius: var(--au-radius); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color var(--au-transition), background-color var(--au-transition), border-color var(--au-transition), box-shadow var(--au-transition); } .au-c-button, .data-table-pagination-right button, .au-c-button:visited { color: var(--au-white); background-color: var(--au-blue-700); border: 0.2rem solid var(--au-blue-700); } .au-c-button:hover, .data-table-pagination-right button:hover, .au-c-button:focus-visible, .data-table-pagination-right button:focus-visible { color: var(--au-white); background-color: var(--au-blue-900); border-color: var(--au-blue-900); text-decoration: none; } .au-c-button:focus, .data-table-pagination-right button:focus { outline: 0; } .au-c-button:focus-visible, .data-table-pagination-right button:focus-visible { outline: var(--au-outline); outline-offset: var(--au-outline-offset); } .au-c-button:active, .data-table-pagination-right button:active { border-color: var(--au-blue-900); background-color: var(--au-blue-900); } .au-c-button.is-disabled, .data-table-pagination-right button.is-disabled, .au-c-button.is-disabled:hover, .au-c-button.is-disabled:focus-visible, .au-c-button.is-disabled:active { cursor: not-allowed; color: var(--au-gray-700); background-color: var(--au-gray-300); border-color: var(--au-gray-300); } .au-c-button.is-loading, .data-table-pagination-right button.is-loading, .au-c-button.is-loading:hover { position: relative; color: var(--au-gray-700); background-color: var(--au-gray-300); border-color: var(--au-gray-300); } /* Modifiers ========================================================================== */ .au-c-button--large { font-size: var(--au-h5); line-height: var(--au-global-line-height); padding: 1.2rem 1.2rem 1.3rem; height: 4.8rem; } .au-c-button--primary { font-weight: var(--au-medium); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .au-c-button--secondary { font-weight: var(--au-medium); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .au-c-button--secondary, .au-c-button--secondary:visited { color: var(--au-blue-700); background-color: transparent; border-color: var(--au-blue-700); } .au-c-button--secondary:hover, .au-c-button--secondary:focus-visible, .au-c-button--secondary:active { color: var(--au-blue-900); background-color: transparent; border-color: var(--au-blue-900); } .au-c-button--naked { font-weight: var(--au-medium); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .au-c-button--naked, .au-c-button--naked:visited { color: var(--au-blue-700); background-color: transparent; border-color: transparent; } .au-c-button--naked:hover, .au-c-button--naked:focus-visible, .au-c-button--naked:active { color: var(--au-blue-900); background-color: transparent; border-color: transparent; } .au-c-button--naked.is-disabled, .au-c-button--naked.is-disabled:hover, .au-c-button--naked.is-disabled:focus-visible, .au-c-button--naked.is-disabled:active { color: var(--au-gray-700); background-color: transparent; border-color: transparent; } .au-c-button--naked.is-loading, .au-c-button--naked.is-loading:hover, .au-c-button--naked.is-loading:focus-visible { color: var(--au-gray-700); background-color: transparent; border-color: transparent; } .au-c-button--link, .data-table-pagination-right button, .au-c-button--link-bold { font-size: inherit; border-color: transparent; padding: 0 0.6rem 0; height: 2.4rem; line-height: 2.4rem; } .au-c-button--link, .data-table-pagination-right button, .au-c-button--link:visited, .au-c-button--link-bold, .au-c-button--link-bold:visited { color: var(--au-blue-700); background-color: transparent; text-decoration: underline; text-decoration-color: var(--au-blue-300); } .au-c-button--link:hover, .data-table-pagination-right button:hover, .au-c-button--link:focus-visible, .data-table-pagination-right button:focus-visible, .au-c-button--link:active, .data-table-pagination-right button:active, .au-c-button--link-bold:hover, .au-c-button--link-bold:focus-visible, .au-c-button--link-bold:active { color: var(--au-blue-900); background-color: transparent; border-color: transparent; box-shadow: none; text-decoration: underline; text-decoration-color: var(--au-blue-200); } .au-c-button--link.is-disabled, .data-table-pagination-right button.is-disabled, .au-c-button--link.is-disabled:hover, .au-c-button--link.is-disabled:focus-visible, .au-c-button--link.is-disabled:active, .au-c-button--link-bold.is-disabled, .au-c-button--link-bold.is-disabled:hover, .au-c-button--link-bold.is-disabled:focus-visible, .au-c-button--link-bold.is-disabled:active { color: var(--au-gray-700); background-color: transparent; text-decoration: none; border-color: transparent; } .au-c-button--link.is-loading, .data-table-pagination-right button.is-loading, .au-c-button--link.is-loading:hover, .au-c-button--link-bold.is-loading, .au-c-button--link-bold.is-loading:hover { color: var(--au-gray-700); background-color: transparent; border-color: transparent; text-decoration: none; } .au-c-button--link-bold { font-weight: var(--au-medium); text-decoration: none; } .au-c-button--link-bold:hover, .au-c-button--link-bold:focus-visible, .au-c-button--link-bold:active { text-decoration: underline; } .au-c-button--link-secondary { font-size: inherit; border-color: transparent; padding: 0 0.6rem 0; height: 2.4rem; line-height: 2.4rem; } .au-c-button--link-secondary, .au-c-button--link-secondary:visited { color: var(--au-gray-700); background-color: transparent; text-decoration: underline; text-decoration-color: var(--au-gray-300); } .au-c-button--link-secondary:hover, .au-c-button--link-secondary:focus-visible, .au-c-button--link-secondary:active { color: var(--au-gray-900); background-color: transparent; border-color: transparent; box-shadow: none; text-decoration: underline; text-decoration-color: var(--au-gray-200); } .au-c-button--link-secondary.is-disabled, .au-c-button--link-secondary.is-disabled:hover, .au-c-button--link-secondary.is-disabled:focus-visible, .au-c-button--link-secondary.is-disabled:active { color: var(--au-gray-700); background-color: transparent; text-decoration: none; border-color: transparent; } .au-c-button--link-secondary.is-loading, .au-c-button--link-secondary.is-loading:hover { color: var(--au-gray-700); background-color: transparent; border-color: transparent; text-decoration: none; } .au-c-button--alert:not([class*=is-]) { color: var(--au-white); background-color: var(--au-red-600); border-color: var(--au-red-600); } .au-c-button--alert:not([class*=is-]):hover, .au-c-button--alert:not([class*=is-]):focus-visible, .au-c-button--alert:not([class*=is-]):active { color: var(--au-white); background-color: var(--au-red-700); border-color: var(--au-red-700); } .au-c-button--alert:not([class*=is-]).au-c-button--secondary { background-color: transparent; } .au-c-button--alert:not([class*=is-]).au-c-button--secondary, .au-c-button--alert:not([class*=is-]).au-c-button--secondary:visited { color: var(--au-red-600); border-color: var(--au-red-600); } .au-c-button--alert:not([class*=is-]).au-c-button--secondary:hover, .au-c-button--alert:not([class*=is-]).au-c-button--secondary:focus-visible, .au-c-button--alert:not([class*=is-]).au-c-button--secondary:active { color: var(--au-red-700); border-color: var(--au-red-700); } .au-c-button--alert:not([class*=is-]).au-c-button--secondary.is-disabled, .au-c-button--alert:not([class*=is-]).au-c-button--secondary.is-disabled:hover, .au-c-button--alert:not([class*=is-]).au-c-button--secondary.is-disabled:focus-visible, .au-c-button--alert:not([class*=is-]).au-c-button--secondary.is-disabled:active { color: var(--au-gray-700); background-color: var(--au-gray-300); border-color: var(--au-gray-300); } .au-c-button--alert:not([class*=is-]).au-c-button--secondary.is-loading, .au-c-button--alert:not([class*=is-]).au-c-button--secondary.is-loading:hover { color: var(--au-gray-700); background-color: var(--au-gray-300); border-color: var(--au-gray-300); } .au-c-button--alert:not([class*=is-]).au-c-button--naked { background-color: transparent; } .au-c-button--alert:not([class*=is-]).au-c-button--naked, .au-c-button--alert:not([class*=is-]).au-c-button--naked:visited { color: var(--au-red-600); border-color: transparent; } .au-c-button--alert:not([class*=is-]).au-c-button--naked:hover, .au-c-button--alert:not([class*=is-]).au-c-button--naked:focus-visible, .au-c-button--alert:not([class*=is-]).au-c-button--naked:active { color: var(--au-red-700); border-color: transparent; } .au-c-button--alert:not([class*=is-]).au-c-button--naked.is-disabled, .au-c-button--alert:not([class*=is-]).au-c-button--naked.is-disabled:hover, .au-c-button--alert:not([class*=is-]).au-c-button--naked.is-disabled:focus-visible, .au-c-button--alert:not([class*=is-]).au-c-button--naked.is-disabled:active { color: var(--au-gray-700); background-color: transparent; border-color: transparent; } .au-c-button--alert:not([class*=is-]).au-c-button--naked.is-loading, .au-c-button--alert:not([class*=is-]).au-c-button--naked.is-loading:hover, .au-c-button--alert:not([class*=is-]).au-c-button--naked.is-loading:focus-visible { color: var(--au-gray-700); background-color: transparent; border-color: transparent; } .au-c-button--alert:not([class*=is-]).au-c-button--link, .data-table-pagination-right button.au-c-button--alert:not([class*=is-]), .au-c-button--alert:not([class*=is-]).au-c-button--link-secondary, .au-c-button--alert:not([class*=is-]).au-c-button--link-bold { background-color: transparent; } .au-c-button--alert:not([class*=is-]).au-c-button--link, .data-table-pagination-right button.au-c-button--alert:not([class*=is-]), .au-c-button--alert:not([class*=is-]).au-c-button--link:visited, .au-c-button--alert:not([class*=is-]).au-c-button--link-secondary, .au-c-button--alert:not([class*=is-]).au-c-button--link-secondary:visited, .au-c-button--alert:not([class*=is-]).au-c-button--link-bold, .au-c-button--alert:not([class*=is-]).au-c-button--link-bold:visited { color: var(--au-red-600); border-color: transparent; text-decoration-color: var(--au-red-300); } .au-c-button--alert:not([class*=is-]).au-c-button--link:hover, .data-table-pagination-right button.au-c-button--alert:not([class*=is-]):hover, .au-c-button--alert:not([class*=is-]).au-c-button--link:focus-visible, .data-table-pagination-right button.au-c-button--alert:not([class*=is-]):focus-visible, .au-c-button--alert:not([class*=is-]).au-c-button--link:active, .data-table-pagination-right button.au-c-button--alert:not([class*=is-]):active, .au-c-button--alert:not([class*=is-]).au-c-button--link-secondary:hover, .au-c-button--alert:not([class*=is-]).au-c-button--link-secondary:focus-visible, .au-c-button--alert:not([class*=is-]).au-c-button--link-secondary:active, .au-c-button--alert:not([class*=is-]).au-c-button--link-bold:hover, .au-c-button--alert:not([class*=is-]).au-c-button--link-bold:focus-visible, .au-c-button--alert:not([class*=is-]).au-c-button--link-bold:active { color: var(--au-red-700); border-color: transparent; text-decoration-color: var(--au-red-400); } .au-c-button--alert:not([class*=is-]).au-c-button--link.is-disabled, .data-table-pagination-right button.au-c-button--alert:not([class*=is-]).is-disabled, .au-c-button--alert:not([class*=is-]).au-c-button--link.is-disabled:hover, .au-c-button--alert:not([class*=is-]).au-c-button--link.is-disabled:focus-visible, .au-c-button--alert:not([class*=is-]).au-c-button--link.is-disabled:active, .au-c-button--alert:not([class*=is-]).au-c-button--link-secondary.is-disabled, .au-c-button--alert:not([class*=is-]).au-c-button--link-secondary.is-disabled:hover, .au-c-button--alert:not([class*=is-]).au-c-button--link-secondary.is-disabled:focus-visible, .au-c-button--alert:not([class*=is-]).au-c-button--link-secondary.is-disabled:active, .au-c-button--alert:not([class*=is-]).au-c-button--link-bold.is-disabled, .au-c-button--alert:not([class*=is-]).au-c-button--link-bold.is-disabled:hover, .au-c-button--alert:not([class*=is-]).au-c-button--link-bold.is-disabled:focus-visible, .au-c-button--alert:not([class*=is-]).au-c-button--link-bold.is-disabled:active { color: var(--au-gray-700); background-color: transparent; border-color: transparent; } .au-c-button--alert:not([class*=is-]).au-c-button--link.is-loading, .data-table-pagination-right button.au-c-button--alert:not([class*=is-]).is-loading, .au-c-button--alert:not([class*=is-]).au-c-button--link.is-loading:hover, .au-c-button--alert:not([class*=is-]).au-c-button--link.is-loading:focus-visible, .au-c-button--alert:not([class*=is-]).au-c-button--link-secondary.is-loading, .au-c-button--alert:not([class*=is-]).au-c-button--link-secondary.is-loading:hover, .au-c-button--alert:not([class*=is-]).au-c-button--link-secondary.is-loading:focus-visible, .au-c-button--alert:not([class*=is-]).au-c-button--link-bold.is-loading, .au-c-button--alert:not([class*=is-]).au-c-button--link-bold.is-loading:hover, .au-c-button--alert:not([class*=is-]).au-c-button--link-bold.is-loading:focus-visible { color: var(--au-gray-700); background-color: transparent; border-color: transparent; } .au-c-button--wrap { height: auto; white-space: initial; text-align: left; } .au-c-button--block { display: flex; width: 100%; justify-content: center; } .au-c-button:not(.au-c-button--secondary):not(.au-c-button--link).is-active, .data-table-pagination-right button:not(.au-c-button--secondary):not(.au-c-button--link).is-active { background-color: var(--au-blue-900); border-color: var(--au-blue-900); } .au-c-button--secondary.is-active { color: var(--au-blue-900); background-color: var(--au-blue-200); } .au-c-button--link.is-active, .data-table-pagination-right button.is-active { color: var(--au-gray-900); font-weight: var(--au-medium); } .au-c-button--icon-only { padding: 0 calc((3.2rem - var(--au-icon-size-medium)) / 2); } .au-c-button--icon-only.au-c-button--link, .data-table-pagination-right button.au-c-button--icon-only { padding: 0 calc((2rem - var(--au-icon-size-medium)) / 2); } .au-c-button--icon-only .au-c-icon { width: var(--au-icon-size-medium); height: var(--au-icon-size-medium); } .au-c-button--icon-only.au-c-button--large { padding: 0 calc((4.4rem - var(--au-icon-size-large)) / 2); } .au-c-button--icon-only.au-c-button--large .au-c-icon { width: var(--au-icon-size-large); height: var(--au-icon-size-large); } /* Animations ========================================================================== */ @keyframes buttonLoading { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* ================================== #BUTTON-GROUP ================================== */ .au-c-button-group { display: flex; align-items: center; flex-wrap: wrap; gap: 0.6rem; } /* Modifiers ========================================================================== */ .au-c-button-group--inline { gap: 0; flex-wrap: nowrap; } .au-c-button-group--inline .au-c-button, .au-c-button-group--inline .data-table-pagination-right button, .data-table-pagination-right .au-c-button-group--inline button { margin-right: -2px; margin-top: 0; } .au-c-button-group--inline .au-c-button:first-child, .au-c-button-group--inline .data-table-pagination-right button:first-child, .data-table-pagination-right .au-c-button-group--inline button:first-child { border-top-right-radius: 0; border-bottom-right-radius: 0; } .au-c-button-group--inline .au-c-button + .au-c-button, .au-c-button-group--inline .data-table-pagination-right button + .au-c-button, .data-table-pagination-right .au-c-button-group--inline button + .au-c-button, .au-c-button-group--inline .data-table-pagination-right .au-c-button + button, .data-table-pagination-right .au-c-button-group--inline .au-c-button + button, .au-c-button-group--inline .data-table-pagination-right button + button, .data-table-pagination-right .au-c-button-group--inline button + button { border-top-left-radius: 0; border-bottom-left-radius: 0; } /* Active buttons within inline button groups */ .au-c-button-group--inline .au-c-button:not(.is-active), .au-c-button-group--inline .data-table-pagination-right button:not(.is-active), .data-table-pagination-right .au-c-button-group--inline button:not(.is-active) { text-decoration: underline; text-decoration-color: var(--au-blue-300); } .au-c-button-group--inline .au-c-button:hover:not(.is-active), .au-c-button-group--inline .data-table-pagination-right button:hover:not(.is-active), .data-table-pagination-right .au-c-button-group--inline button:hover:not(.is-active) { text-decoration: underline; text-decoration-color: var(--au-blue-200); } .au-c-button-group--inline .au-c-button--secondary:not(.is-active) { text-decoration: underline; text-decoration-color: var(--au-blue-300); background: var(--au-white); } .au-c-button-group--inline .au-c-button--secondary:hover:not(.is-active) { text-decoration: underline; text-decoration-color: var(--au-blue-200); background: var(--au-white); } .au-c-button-group--inline .au-c-button-link:not(.is-active) { text-decoration: underline; text-decoration-color: var(--au-blue-300); } .au-c-button-group--inline .au-c-button-link:hover:not(.is-active) { text-decoration: underline; text-decoration-color: var(--au-blue-200); } .au-c-button-group--inline .au-c-button--link.is-active, .au-c-button-group--inline .data-table-pagination-right button.is-active, .data-table-pagination-right .au-c-button-group--inline button.is-active { text-decoration: none; } /* ================================== #CARD ================================== */ /* Variables ========================================================================== */ /* Component ========================================================================== */ .au-c-card { display: flex; flex-direction: column; background-color: var(--au-white); border: 0.1rem solid var(--au-gray-200); border-radius: var(--au-radius); } .au-c-card--shadow { border: 0; box-shadow: 0 1px 3px rgba(33, 35, 38, 0.1), 0 4px 20px rgba(33, 35, 38, 0.035), 0 1px 1px rgba(33, 35, 38, 0.025); } .au-c-card--standout { background-color: var(--au-gray-100); border-color: var(--au-gray-100); } .au-c-card--fill { height: 100%; } .au-c-card--flex:not(.au-c-card--expandable) .au-c-card__header, .au-c-card--flex.au-c-card--expandable .au-c-card__header { display: flex; flex-direction: row; flex-wrap: nowrap; } .au-c-card--flex:not(.au-c-card--expandable) .au-c-card__header > *:nth-child(2), .au-c-card--flex.au-c-card--expandable .au-c-card__header > *:nth-child(2) { flex-grow: 2; } .au-c-card--flex:not(.au-c-card--expandable) .au-c-card__header .au-c-badge, .au-c-card--flex.au-c-card--expandable .au-c-card__header .au-c-badge { margin-bottom: 0; } .au-c-card--flex:not(.au-c-card--expandable) .au-c-card__header { align-items: center; } .au-c-card--flex.au-c-card--expandable .au-c-card__header { align-items: flex-start; } .au-c-card__header .au-c-badge { margin-bottom: 1.2rem; } .au-c-card--padding .au-c-card__header, .au-c-card--padding .au-c-card__content, .au-c-card--padding .au-c-card__footer { padding: 2.4rem; } .au-c-card--padding-small .au-c-card__header, .au-c-card--padding-small .au-c-card__content, .au-c-card--padding-small .au-c-card__footer { padding: 1.2rem; } .au-c-card--padding:not(.au-c-card--divided) .au-c-card__header + .au-c-card__header, .au-c-card--padding-small:not(.au-c-card--divided) .au-c-card__header + .au-c-card__header, .au-c-card--padding:not(.au-c-card--divided) .au-c-card__header + .au-c-card__content, .au-c-card--padding-small:not(.au-c-card--divided) .au-c-card__header + .au-c-card__content, .au-c-card--padding:not(.au-c-card--divided) .au-c-card__header + .au-c-card__footer, .au-c-card--padding-small:not(.au-c-card--divided) .au-c-card__header + .au-c-card__footer, .au-c-card--padding:not(.au-c-card--divided) .au-c-card__content + .au-c-card__header, .au-c-card--padding-small:not(.au-c-card--divided) .au-c-card__content + .au-c-card__header, .au-c-card--padding:not(.au-c-card--divided) .au-c-card__content + .au-c-card__content, .au-c-card--padding-small:not(.au-c-card--divided) .au-c-card__content + .au-c-card__content, .au-c-card--padding:not(.au-c-card--divided) .au-c-card__content + .au-c-card__footer, .au-c-card--padding-small:not(.au-c-card--divided) .au-c-card__content + .au-c-card__footer, .au-c-card--padding:not(.au-c-card--divided) .au-c-card__footer + .au-c-card__header, .au-c-card--padding-small:not(.au-c-card--divided) .au-c-card__footer + .au-c-card__header, .au-c-card--padding:not(.au-c-card--divided) .au-c-card__footer + .au-c-card__content, .au-c-card--padding-small:not(.au-c-card--divided) .au-c-card__footer + .au-c-card__content, .au-c-card--padding:not(.au-c-card--divided) .au-c-card__footer + .au-c-card__footer, .au-c-card--padding-small:not(.au-c-card--divided) .au-c-card__footer + .au-c-card__footer { padding-top: 0; } .au-c-card--shadow.au-c-card--expandable .au-c-card__header { padding-left: 0; } .au-c-card--standout .au-c-card__footer { background-color: var(--au-gray-100); } .au-c-card__clickable { display: flex; justify-content: space-between; transition: background-color var(--au-transition); } .au-c-card--shadow .au-c-card__clickable { justify-content: flex-start; } .au-c-card__clickable:hover { background-color: var(--au-gray-100); } .au-c-card__clickable .au-card__header { width: 100%; } /* Modifiers ========================================================================== */ /* center text */ .au-c-card--text-center { text-align: center; } .au-c-card--text-center .au-c-badge { margin-right: 0; } /* Expandable */ .au-c-card--expandable .au-c-card__toggle[aria-expanded] .au-c-card__toggle-false, .au-c-card--expandable .au-c-card__toggle[aria-expanded=true] .au-c-card__toggle-true { display: none; } .au-c-card--expandable .au-c-card__toggle[aria-expanded=true] .au-c-card__toggle-false { display: block; } .au-c-card__toggle, .au-c-card__clickable { cursor: pointer; } .au-c-card__toggle { flex: none; } .au-c-card--padding .au-c-card__toggle { margin-top: 2.4rem; margin-right: 2.4rem; margin-bottom: 2.4rem; } .au-c-card--padding-small .au-c-card__toggle { margin-top: 1.2rem; margin-right: 1.2rem; margin-bottom: 1.2rem; } .au-c-card--shadow.au-c-card--padding .au-c-card__toggle, .au-c-card--shadow.au-c-card--padding-small .au-c-card__toggle { margin-right: 0; } .au-c-card__content { flex-grow: 1; } .au-c-card__content:focus { outline: none !important; } .au-c-card--divided .au-c-card__content, .au-c-card--divided .au-c-card__footer { border-top: 0.1rem solid var(--au-gray-200); } .au-c-card--divided.au-c-card--standout .au-c-card__content, .au-c-card--divided.au-c-card--standou .au-c-card__footer { border-top-color: var(--au-gray-300); } /* ================================== #CONTENT ================================== */ /* Variables ========================================================================== */ /* Component ========================================================================== */ .au-c-content { font-size: var(--au-para-small); line-height: var(--au-global-line-height); color: var(--au-gray-900); } .au-c-content h1, .au-c-content .au-c-heading--1 { font-size: var(--au-h1-small); line-height: var(--au-global-line-height); font-family: var(--au-font); font-weight: var(--au-medium); } .au-c-content h2, .au-c-content .au-c-heading--2 { font-size: var(--au-h2-small); line-height: var(--au-global-line-height); font-family: var(--au-font); font-weight: var(--au-medium); } .au-c-content h3, .au-c-content .au-c-heading--3, .au-c-content [typeof="https://say.data.gift/ns/Title"] > [property="say:heading"] { font-size: var(--au-h3-small); line-height: var(--au-global-line-height); font-family: var(--au-font); font-weight: var(--au-medium); } .au-c-content h4, .au-c-content .au-c-heading--4, .au-c-content [typeof="https://say.data.gift/ns/Chapter"] > [property="say:heading"] { font-size: var(--au-h4); line-height: var(--au-global-line-height); font-family: var(--au-font); font-weight: var(--au-medium); } .au-c-content h5, .au-c-content .au-c-heading--5, .au-c-content [typeof="https://say.data.gift/ns/Section"] > [property="say:heading"] { font-size: var(--au-h5); line-height: var(--au-global-line-height); font-family: var(--au-font); font-weight: var(--au-medium); } .au-c-content h6, .au-c-content .au-c-heading--6, .au-c-content [typeof="https://say.data.gift/ns/Subsection"] > [property="say:heading"] { font-size: var(--au-h6); line-height: var(--au-global-line-height); font-family: var(--au-font); font-weight: var(--au-medium); } .au-c-content ul:not(.au-c-list-horizontal) { list-style: disc; margin-left: 2.4rem; } .au-c-content ol:not(.au-c-list-horizontal) { list-style: decimal; margin-left: 2.4rem; } .au-c-content ul.au-c-list, .au-c-content ol.au-c-list { list-style: none; margin-left: 0; } .au-c-content ul:not(.au-c-list-horizontal) ul { list-style: circle; } .au-c-content ul:not(.au-c-list-horizontal) li + li, .au-c-content ol:not(.au-c-list-horizontal) li + li { margin-top: 0.6rem; } .au-c-content ul.au-c-list li + li, .au-c-content ol.au-c-list li + li { margin-top: 0; } .au-c-content > * + * { margin-top: 2.4rem; } .au-c-content > * + h1, .au-c-content > * + h2, .au-c-content > * + h3 { margin-top: 4.8rem; } .au-c-content > * + h4, .au-c-content > * + h5, .au-c-content > * + h6 { margin-top: 2.4rem; } .au-c-content em { font-style: italic; color: var(--au-gray-700); } .au-c-content table:not(.au-c-table) { font-size: var(--au-h6); line-height: var(--au-global-line-height); display: table; position: relative; width: 100%; border-collapse: collapse; outline: 0.1rem solid var(--au-gray-300); } .au-c-content table:not(.au-c-table) thead { position: relative; width: 100%; z-index: var(--au-z-index-alpha); border: 0; font-size: var(--au-base); line-height: 1.2; } .au-c-content table:not(.au-c-table) th, .au-c-content table:not(.au-c-table) td { max-width: 55ch; position: relative; text-align: start; } .au-c-content table:not(.au-c-table) th + th:after, .au-c-content table:not(.au-c-table) th + td:after, .au-c-content table:not(.au-c-table) td + th:after, .au-c-content table:not(.au-c-table) td + td:after { content: ""; display: block; position: absolute; width: 0.1rem; left: -0.1rem; top: 0; height: 100%; border-left: 0.1rem dotted var(--au-gray-300); } .au-c-content thead:not(.au-c-table__header) { background-color: var(--au-white); } .au-c-content thead:not(.au-c-table__header) th { font-weight: var(--au-medium); text-align: left; white-space: nowrap; padding: 1.2rem; border-radius: 0; border: 0; outline: 0; background-color: var(--au-white); box-shadow: inset 0 -0.2rem 0 0 var(--au-gray-300); } .au-c-content tbody:not(.au-c-table__body) tr { border-bottom: 0.1rem solid var(--au-gray-300); background-color: var(--au-white); } .au-c-content tbody:not(.au-c-table__body) td, .au-c-content tbody:not(.au-c-table__body) th { padding: 1.2rem; } .au-c-content tfoot:not(.au-c-table__footer) tr + tr { border-top: 0.1rem solid var(--au-gray-300); } .au-c-content tfoot:not(.au-c-table__footer) tr:first-child { border-top: 0.2rem solid var(--au-gray-300); } .au-c-content tfoot:not(.au-c-table__footer) tr { background-color: var(--au-white); } .au-c-content tfoot:not(.au-c-table__footer) td, .au-c-content tfoot:not(.au-c-table__footer) th { font-size: var(--au-base); line-height: var(--au-global-line-height); padding: 0.6rem 1.2rem; } .au-c-content caption:not(.au-c-table__caption) { font-size: var(--au-h5); line-height: var(--au-global-line-height); font-weight: var(--au-medium); text-align: left; padding: 0.6rem 1.2rem; background-color: var(--au-gray-100); border-bottom: 0.1rem solid var(--au-gray-300); } @media (min-width: 47.9375em) { .au-c-content h1, .au-c-content .au-c-heading--1 { font-size: var(--au-h1-medium); line-height: var(--au-global-line-height); } } @media (min-width: 63.9375em) { .au-c-content { font-size: var(--au-para); line-height: var(--au-global-line-height); } .au-c-content h1, .au-c-content .au-c-heading--1 { font-size: var(--au-h1); line-height: var(--au-global-line-height); } .au-c-content h2, .au-c-content .au-c-heading--2 { font-size: var(--au-h2); line-height: var(--au-global-line-height); } .au-c-content h3, .au-c-content .au-c-heading--3, .au-c-content [typeof="https://say.data.gift/ns/Title"] > [property="say:heading"] { font-size: var(--au-h3); line-height: var(--au-global-line-height); } } .au-c-content--small { font-size: var(--au-para-small); line-height: var(--au-global-line-height); } .au-c-content--small > * + * { margin-top: 1.2rem; } .au-c-content--small > * + h1, .au-c-content--small > * + h2, .au-c-content--small > * + h3 { margin-top: 1.2rem; } .au-c-content--small > * + h4, .au-c-content--small > * + h5, .au-c-content--small > * + h6 { margin-top: 0.6rem; } @media (min-width: 63.9375em) { .au-c-content--small { font-size: var(--au-para-small); line-height: var(--au-global-line-height); } .au-c-content--small h1, .au-c-content--small .au-c-heading--1 { font-size: var(--au-h1-small); line-height: var(--au-global-line-height); } .au-c-content--small h2, .au-c-content--small .au-c-heading--2 { font-size: var(--au-h2-small); line-height: var(--au-global-line-height); } .au-c-content--small h3, .au-c-content--small .au-c-heading--3, .au-c-content--small [typeof="https://say.data.gift/ns/Title"] > [property="say:heading"] { font-size: var(--au-h3-small); line-height: var(--au-global-line-height); } } .au-c-content--tiny { font-size: var(--au-small); line-height: var(--au-global-line-height); } .au-c-content--tiny > * + * { margin-top: 1.2rem; } .au-c-content--tiny > * + h1, .au-c-content--tiny > * + h2, .au-c-content--tiny > * + h3 { margin-top: 1.2rem; } .au-c-content--tiny > * + h4, .au-c-content--tiny > * + h5, .au-c-content--tiny > * + h6 { margin-top: 0.6rem; } @media (min-width: 63.9375em) { .au-c-content--tiny { font-size: var(--au-small); line-height: var(--au-global-line-height); } .au-c-content--tiny h1, .au-c-content--tiny .au-c-heading--1 { font-size: var(--au-h1-small); line-height: var(--au-global-line-height); } .au-c-content--tiny h2, .au-c-content--tiny .au-c-heading--2 { font-size: var(--au-h2-small); line-height: var(--au-global-line-height); } .au-c-content--tiny h3, .au-c-content--tiny .au-c-heading--3, .au-c-content--tiny [typeof="https://say.data.gift/ns/Title"] > [property="say:heading"] { font-size: var(--au-h3-small); line-height: var(--au-global-line-height); } } .au-c-content--large { font-size: var(--au-para); line-height: var(--au-global-line-height); } @media (min-width: 63.9375em) { .au-c-content--large { font-size: var(--au-lead-small); line-height: var(--au-global-line-height); } } /* ================================== #CONTENT HEADER ================================== */ /* Component ========================================================================== */ .au-c-content-header { position: relative; display: flex; align-items: center; justify-content: center; flex-wrap: nowrap; overflow: hidden; max-height: 40rem; min-height: 10rem; color: var(--au-gray-900); background-color: var(--au-yellow-300); } .au-c-content-header__bg { position: absolute; right: 0; top: 0; height: 100%; width: 40%; overflow: hidden; transform-origin: 100% 50%; } .au-c-content-header__bg img { position: absolute; top: 0; left: 0; height: 100%; width: 100%; object-fit: cover; } .au-c-content-header__bg::after { content: ""; display: block; position: absolute; left: -0.1rem; top: 50%; transform: translateY(-50%); border-bottom: 40rem solid var(--au-yellow-300); border-right: 13.68rem solid transparent; } @media (min-width: 63.9375em) { .au-c-content-header__bg { width: 50%; } } .au-c-content-header__wrapper { width: 100%; padding-top: 2.4rem; padding-bottom: 2.4rem; } @media (min-width: 63.9375em) { .au-c-content-header__wrapper { padding-top: 4.8rem; padding-bottom: 4.8rem; } } .au-c-content-header__top, .au-c-content-header__bottom { font-size: var(--au-h3-small); line-height: 1; font-family: var(--au-font); display: inline-block; max-width: 60%; } @media (min-width: 63.9375em) { .au-c-content-header__top, .au-c-content-header__bottom { font-size: var(--au-h3); line-height: 1.1; max-width: 50%; } } .au-c-content-header__top { font-weight: var(--au-regular); } .au-c-content-header__bottom { font-weight: var(--au-medium); } /* Modifiers ========================================================================== */ .au-c-content-header--large .au-c-content-header__bg { width: 100%; } .au-c-content-header--large .au-c-content-header__bg::after { content: normal; } .au-c-content-header--large .au-c-content-header__top, .au-c-content-header--large .au-c-content-header__bottom { background: var(--au-white); display: inline; padding: 0.4rem 0.5rem; } .au-c-content-header--large .au-c-content-header__wrapper { z-index: 1; padding-top: 4.8rem; padding-bottom: 4.8rem; } @media (min-width: 63.9375em) { .au-c-content-header--large .au-c-content-header__wrapper { padding-top: 9.6rem; padding-bottom: 9.6rem; } } /* ================================== #CONTROL: radio/checkbox https://github.com/mdo/wtf-forms/blob/master/wtf-forms.css ================================== */ /* Variables ========================================================================== */ /* Component ========================================================================== */ .au-c-control { position: relative; display: inline-flex; gap: 0.6rem; color: var(--au-gray-900); cursor: pointer; } .au-c-control__input { position: absolute; opacity: 0; z-index: -1; /* Put the input behind the label so it doesn't overlay text */ } .au-c-control__indicator { position: relative; bottom: 0.1ex; display: block; min-width: 1.8rem; height: 1.8rem; line-height: 1.8rem; color: var(--au-gray-100); text-align: center; background-color: var(--au-gray-100); background-size: 1.2rem; background-position: center center; background-repeat: no-repeat; user-select: none; border: 0.1rem solid var(--au-gray-300); margin-top: 0.3rem; } /* Focus */ .au-c-control__input:focus ~ .au-c-control__indicator { outline: var(--au-outline); outline-offset: 0.2rem; } /* Checked state */ .au-c-control__input:checked ~ .au-c-control__indicator { color: var(--au-white); background-color: var(--au-blue-700); border-color: var(--au-blue-700); } /* Active */ .au-c-control__input:active ~ .au-c-control__indicator { color: var(--au-white); background-color: var(--au-blue-700); border-color: var(--au-blue-700); } /* Labelless modifiers */ .au-c-control--labelless { vertical-align: middle; } .au-c-control--labelless .au-c-control__indicator { margin-top: 0; } /* Checkbox modifiers */ .au-c-control--checkbox .au-c-control__indicator { border-radius: 0.25rem; } .au-c-control--checkbox .au-c-control__input:checked ~ .au-c-control__indicator { background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNy4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgOCA4IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA4IDgiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPHBhdGggZmlsbD0iI0ZGRkZGRiIgZD0iTTYuNCwxTDUuNywxLjdMMi45LDQuNUwyLjEsMy43TDEuNCwzTDAsNC40bDAuNywwLjdsMS41LDEuNWwwLjcsMC43bDAuNy0wLjdsMy41LTMuNWwwLjctMC43TDYuNCwxTDYuNCwxeiINCgkvPg0KPC9zdmc+DQo=); } .au-c-control--checkbox .au-c-control__input:indeterminate ~ .au-c-control__indicator { color: var(--au-white); background-color: var(--au-blue-700); background-image: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgOCA4IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbDpzcGFjZT0icHJlc2VydmUiIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2UtbWl0ZXJsaW1pdD0iMiI+CiAgPHBhdGggZmlsbD0iI2ZmZiIgZD0iTS4xNTIgMy4wMWg3LjcwMnYxLjk4SC4xNTJ6Ii8+Cjwvc3ZnPgo=); border-color: var(--au-blue-700); } /* Radio modifiers */ .au-c-control--radio .au-c-control__indicator { border-radius: 50%; } .au-c-control--radio .au-c-control__input:checked ~ .au-c-control__indicator { background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNy4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgOCA4IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA4IDgiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPHBhdGggZmlsbD0iI0ZGRkZGRiIgZD0iTTQsMUMyLjMsMSwxLDIuMywxLDRzMS4zLDMsMywzczMtMS4zLDMtM1M1LjcsMSw0LDF6Ii8+DQo8L3N2Zz4NCg==); } /* Shared modifiers */ .au-c-control .au-c-control__input[disabled] + .au-c-control__indicator { background-color: var(--au-gray-300); border-color: var(--au-gray-500); } .au-c-control.is-disabled { color: var(--au-gray-600); cursor: not-allowed; } /* ================================== #Control group ================================== */ /* Component ========================================================================== */ .au-c-control-group { display: flex; flex-direction: column; gap: 1.2rem; } .au-c-control-group--inline { flex-direction: row; gap: 2.4rem; align-items: center; } /* ================================== #DATA TABLE (DRAFT) ================================== */ .au-c-data-table { position: relative; display: flex; flex-direction: column; justify-content: flex-start; flex-grow: 1; height: 100%; overflow: hidden; } .au-c-data-table__actions { flex-shrink: 1; } .au-c-data-table__actions--bottom { padding: 1.2rem 2.4rem; border-top: 0.1rem solid var(--au-gray-300); } .au-c-data-table__search { position: relative; min-width: 32rem; } .au-c-data-table__search > .au-c-input, .au-c-data-table .data-table-search .au-c-data-table__search > input, .input-field-icon-container--block.input-field-icon-container--left .au-c-data-table__search > .input-field.input-field--block { padding-right: 4.8rem; } .au-c-data-table__search-icon { position: absolute; top: 50%; right: 0; transform: translateY(-50%); display: flex; align-items: center; padding: 0.6rem 1.2rem; } .au-c-data-table__wrapper { flex-grow: 999; overflow: auto; position: relative; border-top: 1px solid var(--au-gray-300); width: 100%; } .au-c-data-table__table, .au-c-table-border { font-size: var(--au-h6); line-height: var(--au-global-line-height); display: table; position: relative; min-width: 50rem; width: 100%; border-collapse: collapse; } .au-c-data-table__table thead, .au-c-table-border thead { position: relative; width: 100%; z-index: var(--au-z-index-alpha); border: 0; font-size: var(--au-base); line-height: 1.2; } .au-c-data-table__table tbody tr, .au-c-table-border tbody tr { border-bottom: 0.1rem solid var(--au-gray-300); } .au-c-data-table__table tbody tr:nth-child(odd), .au-c-table-border tbody tr:nth-child(odd) { background-color: var(--au-gray-100); } .au-c-data-table__table tbody tr:nth-child(even), .au-c-table-border tbody tr:nth-child(even) { background-color: var(--au-white); } .au-c-data-table__table th, .au-c-table-border th { font-weight: var(--au-medium); text-align: left; padding: 0.6rem 1.2rem; border-radius: 0; } .au-c-data-table__table td, .au-c-table-border td { padding: 1.2rem; } .au-c-data-table__table th, .au-c-table-border th { white-space: nowrap; } .au-c-data-table__table th, .au-c-table-border th, .au-c-data-table__table td, .au-c-table-border td { max-width: 55ch; position: relative; } .au-c-data-table__table th.is-selectable, .au-c-table-border th.is-selectable, .au-c-data-table__table td.is-selectable, .au-c-table-border td.is-selectable { width: 5.4rem; } .au-c-data-table__table th:first-child, .au-c-table-border th:first-child, .au-c-data-table__table td:first-child, .au-c-table-border td:first-child { padding-left: 2.4rem; } .au-c-data-table__table th:last-child, .au-c-table-border th:last-child, .au-c-data-table__table td:last-child, .au-c-table-border td:last-child { padding-right: 2.4rem; min-width: 0; } .au-c-data-table__table th + th:after, .au-c-table-border th + th:after, .au-c-data-table__table td + td:after, .au-c-table-border td + td:after { content: ""; display: block; position: absolute; width: 0.1rem; left: -0.1rem; top: 0; height: 100%; border-left: 0.1rem dotted var(--au-gray-300); } .au-c-data-table__table.au-c-data-table__table--small th, .au-c-table-border th, .au-c-data-table__table.au-c-data-table__table--small td, .au-c-table-border td { padding: 0.6rem; } .au-c-data-table__table.au-c-data-table__table--small th:first-child, .au-c-table-border th:first-child, .au-c-data-table__table.au-c-data-table__table--small td:first-child, .au-c-table-border td:first-child { padding-left: 2.4rem; } .au-c-data-table__header { background-color: var(--au-white); } .au-c-data-table__header th { position: sticky; z-index: 1; top: 0; border: 0; outline: 0; background-color: var(--au-white); box-shadow: inset 0 -0.2rem 0 0 var(--au-gray-300); } .au-c-data-table__sort { border: 0; outline: 0; padding: 0.6rem; color: var(--au-gray-700); } .au-c-data-table__sort > .au-c-icon { bottom: -0.1ex; } .au-c-data-table__sort:after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .au-c-data-table__sort:focus { outline: var(--au-outline); } .au-c-data-table__header-title { font-weight: var(--au-medium); } .au-c-data-table__header-title--sortable { display: flex; align-items: baseline; position: relative; text-decoration: underline; text-decoration-color: var(--au-gray-300); color: var(--au-gray-700); transition: color var(--au-transition); } .au-c-data-table__header-title--sortable:hover { color: var(--au-gray-900); text-decoration: none; } .au-c-data-table__header-title--sortable.is-active { text-decoration: none; color: var(--au-gray-900); } .au-c-data-table__message { border-bottom: 0.1rem solid var(--au-gray-300); } /* ================================== #DROPDOWN ================================== */ /* Variables ========================================================================== */ /* Component ========================================================================== */ .au-c-dropdown { display: inline-block; } .au-c-dropdown > .au-c-button--naked { padding: 0 0.3rem; height: auto; line-height: 1.5; } .au-c-dropdown__name { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 4.8rem; } @media (min-width: 31.25em) { .au-c-dropdown__name { max-width: 9.6rem; } } @media (min-width: 47.9375em) { .au-c-dropdown__name { width: auto; max-width: 38.4rem; } } .au-c-dropdown__floater { z-index: var(--au-z-index-beta); width: auto; box-shadow: 0 0 12px rgba(33, 35, 38, 0.15), 0 0 2px rgba(33, 35, 38, 0.1); border-radius: var(--au-radius); background-color: var(--au-white); font-size: var(--au-base); line-height: 1.5; font-family: var(--au-font); font-weight: var(--au-regular); } .au-c-dropdown__arrow { position: absolute; } .au-c-dropdown__arrow:before, .au-c-dropdown__arrow:after { bottom: 100%; left: 50%; border: solid transparent; content: ""; height: 0; width: 0; position: absolute; pointer-events: none; border-width: 0.4rem; margin-left: -0.2rem; } .au-c-dropdown__arrow:before { border-color: rgba(255, 255, 255, 0); border-bottom-color: var(--au-divider-color); } .au-c-dropdown__arrow:after { border-color: rgba(255, 255, 255, 0); border-bottom-color: var(--au-white); } .au-c-dropdown__menu { position: relative; z-index: var(--au-z-index-beta); display: flex; flex-direction: column; flex-wrap: nowrap; } .au-c-dropdown__menu:focus { outline: 0; } .au-c-dropdown__menu > .au-c-hr { margin: 0; } .au-c-dropdown__menu [role=menuitem] { padding: 0.6rem; height: auto; overflow: hidden; text-decoration: none; border-radius: 0; } .au-c-dropdown__menu [role=menuitem]:first-child { border-top-right-radius: var(--au-radius); border-top-left-radius: var(--au-radius); } .au-c-dropdown__menu [role=menuitem]:last-child { border-bottom-right-radius: var(--au-radius); border-bottom-left-radius: var(--au-radius); } .au-c-dropdown__menu [role=menuitem].active { color: var(--au-gray-900); background-color: var(--au-gray-100); font-weight: var(--au-medium); outline-offset: var(--au-outline-offset-negative); } .au-c-dropdown__menu [role=menuitem]:focus, .au-c-dropdown__menu [role=menuitem].active:focus { outline-offset: var(--au-outline-offset-negative); } .au-c-dropdown__menu > [role=menuitem] + [role=menuitem], .au-c-dropdown__menu > [role=group] + [role=group], .au-c-dropdown__menu > [role=group] + [role=menuitem], .au-c-dropdown__menu > [role=menuitem] + [role=group] { border-top: 0.1rem dotted var(--au-gray-300); } /* ================================== #Fieldset ================================== */ /* Component ========================================================================== */ .au-c-fieldset { display: flex; flex-direction: column; align-items: flex-start; gap: 1.2rem; } .au-c-fieldset--inline { flex-direction: row; gap: 2.4rem; } .au-c-fieldset-legend { font-family: var(--au-font); font-weight: var(--au-medium); color: var(--au-gray-900); display: flex; align-items: center; } .au-c-fieldset-legend > .au-c-pill { margin-left: 0.6rem; } .au-c-fieldset--inline .au-c-fieldset-legend { min-height: 3.6rem; } .au-c-fieldset-legend--error, .au-c-fieldset-legend--warning { position: relative; } .au-c-fieldset-legend__addendum { position: relative; bottom: 0.5ex; font-weight: var(--au-regular); margin-left: 0.3rem; color: var(--au-gray-500); } .au-c-fieldset__content { display: flex; flex-direction: column; gap: 1.2rem; } .au-c-fieldset--inline .au-c-fieldset__content { flex-direction: row; gap: 2.4rem; width: 100%; min-height: 3.6rem; align-items: center; } /* ================================== #FILE CARD ================================== */ /* Variables ========================================================================== */ /* Component ========================================================================== */ .au-c-file-card { position: relative; background-color: var(--au-white); border: 0.1rem solid var(--au-gray-200); border-radius: var(--au-radius); } .au-c-file-card__delete { position: absolute; appearance: none; border: 0; padding: 0; display: inline-flex; align-items: center; top: 1.2rem; right: 1.2rem; color: var(--au-gray-700); cursor: pointer; } .au-c-file-card__delete:hover { color: var(--au-gray-600); } .au-c-file-card__delete:focus { outline: 0.3rem solid rgba(15, 111, 215, 0.65); } .au-c-file-card__file-size { color: var(--au-gray-700); font-style: italic; font-weight: normal; } /* ================================== #FILE UPLOAD ================================== */ .au-c-file-upload-box { border: 0.1rem solid var(--au-gray-200); background-color: var(--au-white); margin-bottom: 2.4rem; } .au-c-file-upload { border: 0.2rem dashed var(--au-gray-300); background-color: var(--au-white); transition: background var(--au-transition); } .au-c-file-upload:hover { background-color: var(--au-gray-100); } .au-c-file-upload:focus, .au-c-file-upload:focus-within { background-color: var(--au-gray-100); outline: var(--au-outline); } .au-c-file-upload input, .file-upload input[hidden] { display: block !important; height: 0; width: 0; outline: 0; } .au-c-file-upload-message { font-size: var(--au-h5); line-height: var(--au-global-line-height); display: flex; align-items: center; justify-content: center; color: var(--au-gray-600); background-color: var(--au-gray-100); padding: 2.7rem 1.2rem; } .au-c-file-upload-message > .au-c-help-text, .au-c-file-upload-message > .data-table-pagination-left { margin-top: 0; } .au-c-file-upload-label { font-size: var(--au-h5); line-height: var(--au-global-line-height); cursor: pointer; display: flex; flex-direction: column; padding: 1.2rem 1.2rem; text-align: center; transition: background-color var(--au-transition); } .au-c-file-upload-label, .au-c-file-upload-label:hover, .au-c-file-upload-label:visited, .au-c-file-upload-label:active { text-decoration: none; color: var(--au-gray-900); } .au-c-file-upload-label__title { font-size: var(--au-h5); line-height: var(--au-global-line-height); display: inline-flex; align-items: center; justify-content: center; color: var(--au-blue-700); text-decoration: underline; text-decoration-color: var(--au-blue-300); } .au-c-file-upload-label__title:hover { color: var(--au-blue-700); text-decoration-color: var(--au-blue-200); } /* ================================== #FORM ================================== */ /* Variables ========================================================================== */ /* Component ========================================================================== */ .au-c-form > * + * { margin-top: 2.4rem; } /* ================================== #FORM-ROW ================================== */ /* Variables ========================================================================== */ /* Component ========================================================================== */ .au-c-form-row { display: flex; flex-direction: column; align-items: flex-start; } .au-c-form-row--inline { flex-direction: row; gap: 2.4rem; } .au-c-form-row--inline > .au-c-label { margin-bottom: 0; min-height: 3.6rem; } .au-c-form-row--inline > .au-c-input, .au-c-data-table .data-table-search .au-c-form-row--inline > input, .input-field-icon-container--block.input-field-icon-container--left .au-c-form-row--inline > .input-field.input-field--block, .au-c-form-row--inline > .au-c-textarea, .au-c-form-row--inline > .au-c-datepicker { display: block; width: 100%; } .au-c-form-row--pre, .au-c-form-row--post { align-items: stretch; gap: 0; } .au-c-form-row--pre > .au-c-label, .au-c-form-row--post > .au-c-label { padding-right: 1.2rem; padding-left: 1.2rem; background-color: var(--au-gray-100); border: 0.1rem solid var(--au-gray-300); } .au-c-form-row--pre > .au-c-textarea, .au-c-form-row--post > .au-c-textarea { margin: 0; } .au-c-form-row--pre > .au-c-label { border-top-right-radius: 0; border-bottom-right-radius: 0; border-top-left-radius: var(--au-radius); border-bottom-left-radius: var(--au-radius); } .au-c-form-row--pre > .au-c-input, .au-c-data-table .data-table-search .au-c-form-row--pre > input, .input-field-icon-container--block.input-field-icon-container--left .au-c-form-row--pre > .input-field.input-field--block, .au-c-form-row--pre > .au-c-textarea, .au-c-form-row--pre > .au-c-datepicker .duet-date__input { border-left: 0; border-top-left-radius: 0; border-bottom-left-radius: 0; } .au-c-form-row--post { flex-direction: row-reverse; } .au-c-form-row--post > .au-c-label { border-top-left-radius: 0; border-bottom-left-radius: 0; border-top-right-radius: var(--au-radius); border-bottom-right-radius: var(--au-radius); } .au-c-form-row--post > .au-c-input, .au-c-data-table .data-table-search .au-c-form-row--post > input, .input-field-icon-container--block.input-field-icon-container--left .au-c-form-row--post > .input-field.input-field--block, .au-c-form-row--post > .au-c-textarea, .au-c-form-row--post > .au-c-datepicker .duet-date__input { border-right: 0; border-top-right-radius: 0; border-bottom-right-radius: 0; } /* ================================== #HEADINGS ================================== */ /* Variables ========================================================================== */ /* Component ========================================================================== */ .au-c-heading { color: var(--au-gray-900); font-family: var(--au-font); font-weight: var(--au-medium); } .au-c-heading--1 { font-size: var(--au-h1-small); line-height: var(--au-global-line-height); } @media (min-width: 47.9375em) { .au-c-heading--1 { font-size: var(--au-h1-medium); line-height: var(--au-global-line-height); } } @media (min-width: 63.9375em) { .au-c-heading--1 { font-size: var(--au-h1); line-height: var(--au-global-line-height); } } .au-c-heading--2 { font-size: var(--au-h2-small); line-height: var(--au-global-line-height); } @media (min-width: 47.9375em) { .au-c-heading--2 { font-size: var(--au-h2); line-height: var(--au-global-line-height); } } .au-c-heading--3, [typeof="https://say.data.gift/ns/Title"] > [property="say:heading"] { font-size: var(--au-h3-small); line-height: var(--au-global-line-height); } @media (min-width: 47.9375em) { .au-c-heading--3, [typeof="https://say.data.gift/ns/Title"] > [property="say:heading"] { font-size: var(--au-h3); line-height: var(--au-global-line-height); } } .au-c-heading--4, [typeof="https://say.data.gift/ns/Chapter"] > [property="say:heading"] { font-size: var(--au-h4); line-height: var(--au-global-line-height); } .au-c-heading--5, [typeof="https://say.data.gift/ns/Section"] > [property="say:heading"] { font-size: var(--au-h5); line-height: var(--au-global-line-height); } .au-c-heading--6, [typeof="https://say.data.gift/ns/Subsection"] > [property="say:heading"] { font-size: var(--au-h6); line-height: var(--au-global-line-height); } .au-c-heading--functional { font-size: var(--au-h-functional-small); line-height: var(--au-global-line-height); color: var(--au-gray-700); } @media (min-width: 47.9375em) { .au-c-heading--functional { font-size: var(--au-h-functional); line-height: var(--au-global-line-height); } } /* ================================== #HELP TEXT ================================== */ /* Variables ========================================================================== */ /* Component ========================================================================== */ .au-c-help-text, .data-table-pagination-left { font-size: var(--au-small); line-height: var(--au-global-line-height); display: block; color: var(--au-gray-900); margin-top: 0.6rem; } .au-c-help-text + .au-c-help-text, .data-table-pagination-left + .au-c-help-text, .au-c-help-text + .data-table-pagination-left, .data-table-pagination-left + .data-table-pagination-left { margin-top: 0; } /* Modifiers ========================================================================== */ .au-c-help-text--normal { font-size: var(--au-base); line-height: var(--au-global-line-height); } .au-c-help-text--large { font-size: var(--au-h6); line-height: var(--au-global-line-height); } .au-c-help-text--secondary { color: var(--au-gray-700); } .au-c-help-text--tertiary { color: var(--au-gray-700); font-style: italic; } .au-c-help-text--error { color: var(--au-red-700); font-weight: var(--au-medium); } .au-c-help-text--warning { color: var(--au-orange-700); font-weight: var(--au-medium); } /* ================================== #Horizontal Ruler ================================== */ /* Variables ========================================================================== */ /* Component ========================================================================== */ .au-c-hr { margin: 1.2rem 0; border: none; border-bottom: 1px solid var(--au-gray-300); } .au-c-hr--large { margin: 2.4rem 0; } .au-c-hr--huge { margin: 4.8rem 0; } /* ================================== #ICONS ================================== */ /* Variables ========================================================================== */ /* Component ========================================================================== */ .au-c-icon { display: inline-block; width: var(--au-icon-size); height: var(--au-icon-size); position: relative; vertical-align: baseline; bottom: 0.05ex; stroke-width: 0; stroke: currentColor; fill: currentColor; } /* Modifiers ========================================================================== */ .au-c-icon--medium { width: var(--au-icon-size-medium); height: var(--au-icon-size-medium); } .au-c-icon--large { width: var(--au-icon-size-large); height: var(--au-icon-size-large); } .au-c-icon--left { margin-right: 0.6rem; } .au-c-icon--right { margin-left: 0.6rem; } /* ================================== #INPUT ================================== */ /* Variables ========================================================================== */ /* Component ========================================================================== */ .au-c-input, .au-c-data-table .data-table-search input, .input-field-icon-container--block.input-field-icon-container--left .input-field.input-field--block { border: 0.1rem solid var(--au-gray-300); color: var(--au-gray-1000); font-size: var(--au-h6); font-weight: var(--au-regular); font-family: var(--au-font); height: 3.6rem; max-width: 100%; padding: 0 1.2rem 0.1ex; border-radius: 0.3rem; } .au-c-input.is-disabled, .au-c-data-table .data-table-search input.is-disabled, .input-field-icon-container--block.input-field-icon-container--left .is-disabled.input-field.input-field--block { background-color: var(--au-gray-100); border-color: var(--au-gray-300); color: var(--au-gray-700); cursor: not-allowed; } .au-c-input:focus, .au-c-data-table .data-table-search input:focus, .input-field-icon-container--block.input-field-icon-container--left .input-field.input-field--block:focus { outline: none; border-width: 0.1rem !important; border-color: var(--au-outline-color) !important; box-shadow: inset 0 0 0 0.2rem var(--au-outline-color) !important; } .au-c-input-wrapper, .input-field-icon-container--block.input-field-icon-container--left { position: relative; display: inline-block; } .au-c-input-wrapper .au-c-input, .au-c-input-wrapper .au-c-data-table .data-table-search input, .au-c-data-table .data-table-search .au-c-input-wrapper input, .input-field-icon-container--block.input-field-icon-container--left .au-c-input, .input-field-icon-container--block.input-field-icon-container--left .au-c-data-table .data-table-search input, .au-c-data-table .data-table-search .input-field-icon-container--block.input-field-icon-container--left input, .input-field-icon-container--block.input-field-icon-container--left .input-field.input-field--block { padding-left: 4rem; } .au-c-input-wrapper .au-c-icon, .input-field-icon-container--block.input-field-icon-container--left .au-c-icon { position: absolute; top: 0; height: 100%; width: 1.6rem; margin-left: 1.2rem; margin-right: 1.2rem; pointer-events: none; } .au-c-input-wrapper .au-c-icon--right, .input-field-icon-container--block.input-field-icon-container--left .au-c-icon--right { right: 0; } .au-c-input-wrapper .au-c-icon--left, .input-field-icon-container--block.input-field-icon-container--left .au-c-icon--left { left: 0; } .au-c-input-wrapper--right .au-c-input, .au-c-input-wrapper--right .au-c-data-table .data-table-search input, .au-c-data-table .data-table-search .au-c-input-wrapper--right input, .au-c-input-wrapper--right .input-field-icon-container--block.input-field-icon-container--left .input-field.input-field--block, .input-field-icon-container--block.input-field-icon-container--left .au-c-input-wrapper--right .input-field.input-field--block { padding-left: 1.2rem; padding-right: 4rem; } /* Modifiers ========================================================================== */ .au-c-input--block, .au-c-data-table .data-table-search input, .input-field-icon-container--block.input-field-icon-container--left .input-field.input-field--block { display: block; width: 100%; } .au-c-input--error { border-color: var(--au-red-600); box-shadow: inset 0 0 0 0.2rem var(--au-red-600); } .au-c-input--warning { border-color: var(--au-orange-500); box-shadow: inset 0 0 0 0.2rem var(--au-orange-500); } .au-c-input--mask { letter-spacing: 0.2rem; } .au-c-input--mask::placeholder { color: var(--au-gray-500); } .au-c-input--mask:-ms-input-placeholder { color: var(--au-gray-500); } .au-c-input--mask::-ms-input-placeholder { color: var(--au-gray-500); } /* ================================== #LABELS ================================== */ /* Variables ========================================================================== */ /* Component ========================================================================== */ .au-c-label { font-size: var(--au-h6); line-height: var(--au-global-line-height); color: var(--au-gray-900); font-family: var(--au-font); font-weight: var(--au-medium); margin-bottom: 0.6rem; display: flex; align-items: center; } .au-c-label > .au-c-pill { margin-left: 0.6rem; } .au-c-label__addendum { position: relative; bottom: 0.5ex; font-weight: var(--au-regular); margin-left: 0.3rem; color: var(--au-gray-500); } /* Modifiers ========================================================================== */ .au-c-label--inline { margin-bottom: 0; } @media (min-width: 47.9375em) { .au-c-label--inline { min-height: 3.6rem; } } .au-c-label--error, .au-c-label--warning { position: relative; } /* ================================== #LINKS ================================== */ /* Variables ========================================================================== */ /* Component ========================================================================== */ .au-c-link { display: inline-flex; gap: 0.6rem; align-items: center; font-family: var(--au-font); transition: color var(--au-transition), text-decoration var(--au-transition); font-weight: var(--au-regular); text-decoration-color: var(--au-blue-300); } .au-c-link, .au-c-link:visited { color: var(--au-blue-700); } .au-c-link:hover, .au-c-link:focus { color: var(--au-blue-900); text-decoration-color: var(--au-blue-200); } .au-c-link:focus { outline: var(--au-outline); outline-offset: var(--au-outline-offset); } .au-c-link.is-active { font-weight: var(--au-medium); color: var(--au-gray-900); text-decoration: none; pointer-events: none; } /* Modifiers ========================================================================== */ .au-c-link--secondary, .au-c-link--secondary:visited { color: var(--au-gray-700); text-decoration-color: var(--au-gray-300); } .au-c-link--secondary:hover, .au-c-link--secondary:focus { color: var(--au-gray-900); text-decoration-color: var(--au-gray-200); } .is-active > .au-c-link--secondary { color: var(--au-gray-900); text-decoration: none; } .au-c-link--secondary.is-active { color: var(--au-gray-900); } .au-c-link--bold { text-decoration: none; font-weight: var(--au-medium); } .au-c-link--bold:hover, .au-c-link--bold:focus { text-decoration: underline; } .au-c-link--icon-only .au-c-icon { width: 1.8rem; height: 1.8rem; } .au-c-link--block { display: flex; width: 100%; justify-content: center; } /* ================================== #LIST ================================== */ /* Component ========================================================================== */ .au-c-list { display: flex; flex-direction: column; gap: 0.6rem; padding-left: 0; margin-bottom: 0; list-style: none !important; } .au-c-list .au-c-list { padding-left: 1.2rem; } .au-c-list--horizontal { display: flex; flex-direction: row; justify-content: flex-start; align-items: center; } .au-c-list--vertical.au-c-list--divider .au-c-list__item + .au-c-list__item { padding-top: 0.6rem; border-top: 0.1rem solid var(--au-divider-color); } .au-c-list--horizontal.au-c-list--divider .au-c-list__item + .au-c-list__item { padding-left: 0.6rem; border-left: 0.1rem solid var(--au-divider-color); } /* ================================== #LIST HORIZONTAL ================================== */ /* Variables ========================================================================== */ /* Component ========================================================================== */ .au-c-list-horizontal { display: flex; align-items: center; } .au-c-list-horizontal--small { font-size: var(--au-base); } .au-c-list-horizontal__item { display: flex; align-items: center; } .au-c-list-horizontal__item + .au-c-list-horizontal__item { margin-left: 1.2rem; padding-left: 1.2rem; border-left: 1px dotted var(--au-gray-300); } .au-c-list-horizontal__item > .au-c-dropdown, .au-c-list-horizontal__item > .au-c-button, .data-table-pagination-right .au-c-list-horizontal__item > button, .au-c-list-horizontal__item > .ember-view > .au-c-button, .data-table-pagination-right .au-c-list-horizontal__item > .ember-view > button { margin-left: -0.6rem; } /* ================================== #LIST NAVIGATION ================================== */ /* Variables ========================================================================== */ /* Component ========================================================================== */ .au-c-list-navigation { font-size: var(--au-base); line-height: var(--au-global-line-height); display: flex; flex-wrap: wrap; } @media (min-width: 63.9375em) { .au-c-list-navigation { font-size: 1.5rem; line-height: var(--au-global-line-height); } } .au-c-list-navigation__item { flex-basis: 20rem; } @media (min-width: 63.9375em) { .au-c-list-navigation__item { flex-basis: 100%; } .au-c-list-navigation__item + .au-c-list-navigation__item { border-top: 1px solid var(--au-divider-color); } } .au-c-list-navigation__item--section { flex-basis: 100%; } .au-c-list-navigation__item--section + .au-c-list-navigation__item--section { border-top: 1px solid var(--au-divider-color); } .au-c-list-navigation__section-title { font-size: 1.4rem; line-height: var(--au-global-line-height); padding: 0.9rem 1.2rem; font-weight: var(--au-medium); color: var(--au-gray-600); text-transform: uppercase; border-bottom: 1px solid var(--au-divider-color); } @media (min-width: 63.9375em) { .au-c-list-navigation__section-title { padding: 1.2rem 1.8rem; } } .au-c-list-navigation__link { font-size: var(--au-base); line-height: var(--au-global-line-height); display: flex; align-items: center; font-family: var(--au-font); transition: color var(--au-transition), text-decoration var(--au-transition); font-weight: var(--au-regular); padding: 0.9rem 1.2rem; text-decoration-color: var(--au-blue-300) !important; text-decoration: underline; text-underline-offset: 0.3ex; } .au-c-list-navigation__link, .au-c-list-navigation__link:visited { color: var(--au-blue-700); } .au-c-list-navigation__link:hover, .au-c-list-navigation__link:focus { color: var(--au-blue-900); text-decoration-color: var(--au-blue-200) !important; } .au-c-list-navigation__link:focus { outline: var(--au-outline); outline-offset: var(--au-outline-offset-negative); } .au-c-list-navigation__link.active { font-weight: var(--au-medium); color: var(--au-gray-900); text-decoration: none; } @media (min-width: 63.9375em) { .au-c-list-navigation__link { padding: 1.2rem 1.8rem; } .au-c-list-navigation__link.active { box-shadow: inset -0.3rem 0 0 var(--au-gray-300); background-color: var(--au-gray-200); } } .au-c-list-navigation__link--highlight { font-weight: var(--au-medium); } /* ================================== #LOADER ================================== */ /* Component ========================================================================== */ .au-c-loader { display: block; } .au-p-c-loading-animation { display: inline-block; position: relative; width: 3rem; height: 1.8rem; } .au-c-loader__animation { display: block; position: relative; width: 5.4rem; height: 5.4rem; } .au-c-loader--small .au-c-loader__animation { width: 3rem; height: 3rem; } .au-c-loader--large .au-c-loader__animation { width: 7.8rem; height: 7.8rem; } .au-p-c-loading-animation::before, .au-c-loader__animation::before { content: ""; display: block; position: absolute; top: 50%; left: 50%; transform: translate(calc(-50% - 2rem), -50%); width: 0.4rem; height: 0.4rem; background-color: transparent; border-radius: 50%; box-shadow: 1rem 0 var(--au-white), 2rem 0 var(--au-white), 3rem 0 var(--au-white); animation: loader-wave infinite 1s linear; } @keyframes loader-wave { 0%, 100%, 60% { box-shadow: 1rem 0 var(--au-gray-600), 2rem 0 var(--au-gray-600), 3rem 0 var(--au-gray-600); } 10% { box-shadow: 1rem -0.3rem var(--au-gray-600), 2rem 0 var(--au-gray-600), 3rem 0 var(--au-gray-600); } 20% { box-shadow: 1rem -0.6rem var(--au-gray-600), 2rem -0.3rem var(--au-gray-600), 3rem 0 var(--au-gray-600); } 30% { box-shadow: 1rem -0.3rem var(--au-gray-600), 2rem -0.6rem var(--au-gray-600), 3rem -0.3rem var(--au-gray-600); } 40% { box-shadow: 1rem 0 var(--au-gray-600), 2rem -0.3rem var(--au-gray-600), 3rem -0.6rem var(--au-gray-600); } 50% { box-shadow: 1rem 0 var(--au-gray-600), 2rem 0 var(--au-gray-600), 3rem -0.3rem var(--au-gray-600); } } /* ================================== #PANEL ================================== */ .au-c-panel { display: flex; flex-direction: column; background-color: var(--au-white); border: 0.1rem solid var(--au-gray-200); border-radius: var(--au-radius); } .au-c-panel--active { background-color: var(--au-gray-100); } .au-c-panel__section + .au-c-panel__section { border-top: 0.1rem solid var(--au-gray-200); } /* ================================== #PAGINATION ================================== */ /* Variables ========================================================================== */ /* Component ========================================================================== */ .au-c-pagination { font-size: var(--au-h6); line-height: var(--au-global-line-height); color: var(--au-gray-700); display: flex; justify-content: space-between; width: 100%; } .au-c-pagination__list { display: flex; justify-content: flex-start; } .au-c-pagination__list-item + .au-c-pagination__list-item { margin-left: 0.6rem; padding-left: 0.6rem; border-left: 0.1rem solid var(--au-divider-color); } /* ================================== #PILLS ================================== */ /* Variables ========================================================================== */ /* Component ========================================================================== */ .au-c-pill { font-size: var(--au-base); line-height: var(--au-global-line-height); display: inline-flex; gap: 0.6rem; align-items: center; font-family: var(--au-font); font-weight: var(--au-medium); border: 0.1rem solid var(--vl-grey-50); padding: 0.1rem 0.6rem 0; border-radius: 0.6rem; min-height: 2.55rem; } .au-c-pill.au-c-pill--hover { text-decoration: none; cursor: default; } .au-c-pill.au-c-pill--hover:focus { outline: var(--au-outline); outline-offset: var(--au-outline-offset); } .au-c-pill-container { display: inline-flex; align-items: center; } .au-c-pill-container > .au-c-pill { border-right: 0; border-top-right-radius: 0; border-bottom-right-radius: 0; } .au-c-pill-container > .au-c-pill-action { border-top-left-radius: 0; border-bottom-left-radius: 0; } .au-c-pill-action { font-size: var(--au-base); line-height: var(--au-global-line-height); display: inline-flex; gap: 0.6rem; align-items: center; font-family: var(--au-font); font-weight: var(--au-medium); color: var(--au-blue-700); background-color: var(--au-blue-100); border: 0.1rem solid var(--au-blue-300); padding: 0 0.6rem 0; border-radius: 0.6rem; min-height: 2.55rem; text-decoration: none; cursor: pointer; } .au-c-pill-action:hover, .au-c-pill-action:focus { background-color: var(--au-white); } .au-c-pill-action:focus { outline: var(--au-outline); outline-offset: var(--au-outline-offset); } /* Sizes ========================================================================== */ .au-c-pill--small, .au-c-pill-action--small { font-size: var(--au-tiny); line-height: 1.3; gap: 0.4rem; min-height: 2.25rem; } .au-c-pill--small { padding: 0.1rem 0.4rem 0; } .au-c-pill-action--small { padding: 0 0.4rem 0; } /* Modifiers ========================================================================== */ .au-c-pill--default { color: var(--vl-grey-70); background-color: var(--vl-grey-05); border-color: var(--vl-grey-50); } .au-c-pill--default.au-c-pill--hover:hover, .au-c-pill--default.au-c-pill--hover:focus { background-color: var(--au-white); } .au-c-pill--border { color: var(--vl-grey-70); background-color: var(--au-white); border-color: var(--vl-grey-20); } .au-c-pill--border.au-c-pill--hover:hover, .au-c-pill--border.au-c-pill--hover:focus { color: var(--vl-grey-80); background-color: var(--au-white); } .au-c-pill--ongoing { color: var(--vl-picton-120); background-color: transparent; border-color: var(--vl-picton-120); } .au-c-pill--ongoing.au-c-pill--hover:hover, .au-c-pill--ongoing.au-c-pill--hover:focus { background-color: var(--au-white); } .au-c-pill--link { color: var(--au-blue-700); background-color: var(--au-blue-100); border-color: var(--au-blue-300); } .au-c-pill--link.au-c-pill--hover:hover, .au-c-pill--link.au-c-pill--hover:focus { color: var(--au-blue-900); background-color: var(--au-white); } .au-c-pill--success { color: var(--vl-green-130); background-color: var(--vl-green-10); border-color: var(--vl-green-100); } .au-c-pill--success.au-c-pill--hover:hover, .au-c-pill--success.au-c-pill--hover:focus { background-color: var(--au-white); } .au-c-pill--warning { color: var(--vl-orange-120); background-color: var(--vl-orange-10); border-color: var(--vl-orange-100); } .au-c-pill--warning.au-c-pill--hover:hover, .au-c-pill--warning.au-c-pill--hover:focus { background-color: var(--au-white); } .au-c-pill--error { color: var(--vl-red-130); background-color: var(--vl-red-10); border-color: var(--vl-red-100); } .au-c-pill--error.au-c-pill--hover:hover, .au-c-pill--error.au-c-pill--hover:focus { background-color: var(--au-white); } .au-c-pill--draft { border-style: dashed; background-color: transparent; } .au-c-pill--draft.au-c-pill--hover:hover, .au-c-pill--draft.au-c-pill--hover:focus { background-color: var(--au-white); } /* ================================== #MAIN CONTAINER ================================== */ /* Variables ========================================================================== */ /* Component ========================================================================== */ .au-c-main-container { display: flex; flex-wrap: wrap; } .au-c-app .au-c-main-container { position: relative; flex-grow: 1; } @media (min-width: 63.9375em) { .au-c-main-container { height: calc(100vh - 4.2rem); } .au-c-app .au-c-main-container { height: auto; overflow: hidden; } } .au-c-main-container__sidebar { flex-basis: 100%; } @media (min-width: 63.9375em) { .au-c-main-container__sidebar { height: 100%; flex-basis: 25rem; flex-grow: 1; } } @media (min-width: 63.9375em) { .au-c-main-container__sidebar--small { flex-basis: 17rem; width: 17rem; } } @media (min-width: 63.9375em) { .au-c-main-container__sidebar--large { flex-basis: 44rem; width: 44rem; } } @media (min-width: 63.9375em) { .au-c-main-container__sidebar--collapsed { flex-basis: 5rem; width: 5rem; } } .au-c-main-container__content { flex-basis: 100%; max-width: 100%; } @media (min-width: 63.9375em) { .au-c-main-container__content { height: 100%; flex-basis: 0; flex-grow: 999; } } @media (min-width: 63.9375em) { .au-c-main-container__content--scroll { height: 100%; overflow: auto; } } /* ================================== #HEADER ================================== */ /* Variables ========================================================================== */ /* Component ========================================================================== */ .au-c-main-header { position: relative; z-index: var(--au-z-index-beta); display: flex; justify-content: space-between; align-items: center; background-color: var(--au-white); box-shadow: 0 1px 3px rgba(33, 35, 38, 0.1), 0 4px 20px rgba(33, 35, 38, 0.035), 0 1px 1px rgba(33, 35, 38, 0.025); } .au-c-main-header__title-group { display: flex; align-items: center; color: var(--au-gray-900); text-decoration: none; } .au-c-main-header__title { font-size: var(--au-base); line-height: 1; font-weight: var(--au-medium); text-transform: uppercase; position: relative; display: block; padding: 0.6rem; color: var(--au-gray-900); transition: color var(--au-transition), text-decoration-color var(--au-transition); letter-spacing: 0.03ex; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 9.6rem; } @media (min-width: 31.25em) { .au-c-main-header__title { max-width: 14.4rem; } } @media (min-width: 47.9375em) { .au-c-main-header__title { margin-left: 0; padding-left: 2.4rem; max-width: 19.2rem; } .au-c-main-header__title::before { content: ""; display: block; position: absolute; top: 0; left: 0.5rem; transform: rotate(-19deg); width: 0.1rem; height: 3rem; background-color: var(--au-gray-300); } } @media (min-width: 63.9375em) { .au-c-main-header__title { max-width: initial; } } .au-c-main-header__title--link { text-decoration: underline; text-underline-offset: 0.3ex; } .au-c-main-header__title--link, .au-c-main-header__title--link:visited { color: var(--au-gray-900); text-decoration-color: var(--au-gray-300); } .au-c-main-header__title--link:hover, .au-c-main-header__title--link:focus { color: var(--au-gray-700); text-decoration: underline; text-decoration-color: var(--au-gray-200); } .au-c-main-header__title--link:focus { outline: var(--au-outline); } .au-c-main-header__skiplink { font-size: var(--au-base); line-height: 1; font-weight: var(--au-regular); position: absolute; transition: color var(--au-transition); letter-spacing: 0.03ex; margin-left: 1.2rem; padding: 0.6rem; background-color: var(--au-gray-100); border-radius: var(--au-radius); z-index: var(--au-z-index-alpha); top: -1000px; left: -1000px; } .au-c-main-header__skiplink, .au-c-main-header__skiplink:hover, .au-c-main-header__skiplink:focus { color: var(--au-gray-900); text-decoration: underline; text-decoration-color: var(--au-gray-300); } .au-c-main-header__skiplink:focus { outline: var(--au-outline); top: 4.8rem; left: -0.6rem; } @media (min-width: 63.9375em) { .au-c-main-header__skiplink { position: relative; } .au-c-main-header__skiplink:focus { top: 0; left: 0; } } .au-c-main-header__actions { font-size: var(--au-base); line-height: 0.7; display: flex; align-items: center; padding: 0.6rem 1.2rem; } /* ================================== #MAIN FOOTER ================================== */ /* Variables ========================================================================== */ /* Component ========================================================================== */ .au-c-main-footer { display: flex; flex-wrap: wrap; padding: 2.4rem; background-color: var(--au-white); border-top: 0.1rem solid var(--au-divider-color); } .au-c-main-footer__brand { padding-right: 2.4rem; padding-bottom: 2.4rem; } @media (min-width: 100em) { .au-c-main-footer__brand { padding-right: 4.8rem; } } /* ================================== #MODAL ================================== */ /* Variables ========================================================================== */ /* Component ========================================================================== */ .au-c-modal-open { overflow: hidden; } .au-c-modal-backdrop { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.4); z-index: 9999; display: none; } .au-c-modal-backdrop.is-visible { display: block; } .au-c-modal { background: var(--au-white); margin: auto; height: auto; max-height: calc(100% - 2.4rem); width: calc(100% - 2.4rem); max-width: 760px; opacity: 1; overflow: auto; position: fixed; display: flex; flex-direction: column; justify-content: flex-start; right: 1.2rem; left: 1.2rem; bottom: auto; top: 50%; transform: translateY(-50%); visibility: visible; border-radius: var(--au-radius); z-index: 9999; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 4px 20px rgba(0, 0, 0, 0.035), 0 1px 1px rgba(0, 0, 0, 0.025); transition: var(--au-transition); display: none; } .au-c-modal:focus { outline: 0 !important; } .au-c-modal.is-visible { display: flex; } .au-c-modal--overflow { overflow: visible; } .au-c-modal--large { max-width: calc(100% - 9.6rem); max-height: calc(100% - 9.6rem); width: calc(100% - 9.6rem); height: calc(100% - 9.6rem); left: 1.2rem; } .au-c-modal--fullscreen { max-width: calc(100% - 1.2rem); max-height: calc(100% - 1.2rem); width: calc(100% - 1.2rem); height: calc(100% - 1.2rem); left: 0.6rem; } .au-c-modal__header { position: relative; z-index: 1; width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 1.2rem; border-bottom: 1px solid var(--au-gray-300); } @media (min-width: 63.9375em) { .au-c-modal__header { padding: 2.4rem; } } .au-c-modal__title { font-size: var(--au-h3-small); line-height: var(--au-global-line-height); font-family: var(--au-font); font-weight: var(--au-medium); } .au-c-modal__title:focus { outline: 0; } @media (min-width: 63.9375em) { .au-c-modal__title { font-size: var(--au-h3); line-height: var(--au-global-line-height); } } .au-c-modal__close { cursor: pointer; display: flex; align-items: center; justify-content: center; appearance: none; border: 0; border-radius: var(--au-radius); padding: 0; text-align: center; color: var(--au-gray-700); transition: color var(--au-transition); } .au-c-modal__close:hover, .au-c-modal__close:focus { color: var(--au-gray-600); } .au-c-modal__close:focus { outline: 0; } .au-c-modal__close:focus-visible { outline: var(--au-outline); outline-offset: var(--au-outline-offset); } .au-c-modal__close.is-disabled, .au-c-modal__close.is-disabled:hover, .au-c-modal__close.is-disabled:focus-visible, .au-c-modal__close.is-disabled:active { color: var(--au-gray-300); cursor: not-allowed; } .au-c-modal__body { flex-grow: 1; position: relative; height: calc(100% - 6rem); background-color: var(--au-white); overflow: auto; padding: 1.2rem; } .au-c-modal__body:focus { outline: 0; } .au-c-modal--flush .au-c-modal__body { padding: 0; } .au-c-modal--overflow .au-c-modal__body { overflow: visible; } .au-c-modal--overflow .au-c-modal__body:last-child { border-bottom-left-radius: var(--au-radius); border-bottom-right-radius: var(--au-radius); } @media (min-width: 63.9375em) { .au-c-modal__body { padding: 2.4rem; } } .au-c-modal__footer { padding: 1.2rem; border-top: 1px solid var(--au-gray-300); } .au-c-modal--overflow .au-c-modal__footer:last-child { border-bottom-left-radius: var(--au-radius); border-bottom-right-radius: var(--au-radius); } @media (min-width: 63.9375em) { .au-c-modal__footer { padding: 2.4rem; } } /* ================================== #SIDEBAR ================================== */ /* Variables ========================================================================== */ /* Component ========================================================================== */ .au-c-sidebar { display: flex; flex-direction: column; justify-content: space-between; background-color: var(--au-gray-100); border-bottom: 1px solid var(--au-gray-200); } @media (min-width: 63.9375em) { .au-c-sidebar { height: 100%; border-bottom: 0; border-right: 1px solid var(--au-gray-200); overflow: auto; } } @media (min-width: 47.9375em) { .au-c-sidebar { overflow: hidden; } } .au-c-sidebar__header { padding: 1.2rem; } @media (min-width: 63.9375em) { .au-c-sidebar__header { padding: 1.8rem 1.8rem 0.6rem; } } @media (min-width: 47.9375em) { .au-c-sidebar__content { flex-grow: 2; overflow: auto; } } .au-c-sidebar__footer { font-size: var(--au-base); line-height: var(--au-global-line-height); padding: 1.2rem; } @media (min-width: 63.9375em) { .au-c-sidebar__footer { text-align: center; padding: 2.4rem; } } @media (min-width: 47.9375em) { .au-c-sidebar__footer.au-c-sidebar__footer--border-top { border-top: 1px solid var(--au-gray-300); } } /* ================================== #ACTION SIDEBAR ================================== */ /* Variables ========================================================================== */ /* Component ========================================================================== */ @media (min-width: 63.9375em) { .au-c-action-sidebar { border-left: 0.1rem solid var(--au-gray-200); box-shadow: 0 0 6rem rgba(33, 35, 38, 0.2), 0 0 0.3rem rgba(33, 35, 38, 0.1); } } .au-c-action-sidebar__header { border-bottom: 0.1rem solid var(--au-gray-200); } .au-c-action-sidebar__header:focus { outline: 0; } .au-c-action-sidebar__footer { border-top: 0.1rem solid var(--au-gray-200); } /* ================================== #DATA TABLE (DRAFT) ================================== */ .au-c-table-wrapper { position: relative; overflow: auto; border: 0.1rem solid var(--au-gray-300); border-radius: var(--au-radius); } .au-c-table { font-size: var(--au-h6); line-height: var(--au-global-line-height); display: table; position: relative; min-width: 50rem; width: 100%; border-collapse: collapse; } .au-c-table thead { position: relative; width: 100%; z-index: var(--au-z-index-alpha); border: 0; font-size: var(--au-base); line-height: 1.2; } .au-c-table th, .au-c-table td { max-width: 55ch; position: relative; } .au-c-table th + th:after, .au-c-table td + td:after { content: ""; display: block; position: absolute; width: 0.1rem; left: -0.1rem; top: 0; height: 100%; border-left: 0.1rem dotted var(--au-gray-300); } .au-c-table--middle tbody, .au-c-table--middle tr, .au-c-table--middle td { vertical-align: middle; } .au-c-table__header { background-color: var(--au-white); } .au-c-table__header th { font-weight: var(--au-medium); text-align: left; white-space: nowrap; padding: 1.2rem; border-radius: 0; border: 0; outline: 0; background-color: var(--au-white); box-shadow: inset 0 -0.2rem 0 0 var(--au-gray-300); } .au-c-table--small .au-c-table__header th { padding: 0.6rem; } .au-c-table__body tr { border-bottom: 0.1rem solid var(--au-gray-300); background-color: var(--au-white); } .au-c-table__body td { padding: 1.2rem; } .au-c-table--small .au-c-table__body td { padding: 0.6rem; } .au-c-table__footer tr + tr { border-top: 0.1rem solid var(--au-gray-300); } .au-c-table__footer tr:first-child { border-top: 0.2rem solid var(--au-gray-300); } .au-c-table__footer tr { background-color: var(--au-white); } .au-c-table__footer td { font-size: var(--au-base); line-height: var(--au-global-line-height); padding: 0.6rem 1.2rem; } .au-c-table--small .au-c-table__footer td { padding: 0.6rem; } .au-c-table__caption { font-size: var(--au-h5); line-height: var(--au-global-line-height); font-weight: var(--au-medium); text-align: left; padding: 0.6rem 1.2rem; background-color: var(--au-gray-100); border-bottom: 0.1rem solid var(--au-gray-300); } .au-c-table--small .au-c-table__caption { padding: 0.6rem; } .au-c-data-table__clickable-row { cursor: pointer; } .au-c-data-table__clickable-row:hover { background-color: var(--au-gray-200) !important; } .au-c-data-table__clickable-row-icon { color: var(--au-blue-700); } .au-c-data-table__detail { background-color: var(--au-white) !important; border-bottom: 0.1rem solid var(--au-divider-color) !important; } .au-c-data-table__detail td { padding-top: 2.4rem !important; padding-bottom: 2.4rem !important; } .au-c-data-table__image { max-width: 44px; max-height: 44px; display: block; } /* ================================== #TABS ================================== */ /* Component ========================================================================== */ .au-c-tabs { font-size: 1.6rem; line-height: var(--au-global-line-height); padding: 0 2.4rem; } .au-c-tabs:not(.au-c-tabs--reversed) { border-bottom: 0.1rem solid var(--au-divider-color); } .au-c-tabs--reversed { border-top: 0.1rem solid var(--au-divider-color); } .au-c-tabs-list { display: flex; flex-direction: flex-start; flex-wrap: nowrap; } .au-c-tabs-list__item + .au-c-tabs-list__item { margin-left: 2.4rem; } .au-c-tabs-list__item .au-c-link { font-weight: var(--au-medium); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-decoration: none; padding: 1.2rem 0; min-height: 4.8rem; } .au-c-tabs-list__item .au-c-link:hover, .au-c-tabs-list__item .au-c-link:focus { text-decoration: none; } .au-c-tabs-list__item .au-c-link.active { color: var(--au-gray-900); } :not(.au-c-tabs--reversed) .au-c-tabs-list__item .au-c-link.active { box-shadow: 0 -3px 0 0 inset var(--au-gray-900); } .au-c-tabs--reversed .au-c-tabs-list__item .au-c-link.active { box-shadow: 0 3px 0 0 inset var(--au-gray-900); } /* ================================== #TEXTAREA ================================== */ /* Variables ========================================================================== */ /* Component ========================================================================== */ .au-c-textarea { border: 0.1rem solid var(--au-gray-300); color: var(--au-gray-1000); font-family: var(--au-font); max-width: 100%; padding: 0.6rem 1.2rem; font-size: var(--au-h6); font-weight: var(--au-regular); border-radius: var(--au-radius); } .au-c-textarea.is-disabled { background-color: var(--au-gray-100); border-color: var(--au-gray-300); color: var(--au-gray-700); cursor: not-allowed; } .au-c-textarea:focus { outline: none; border-color: var(--au-outline-color); box-shadow: inset 0 0 0 0.2rem var(--au-outline-color); } /* Modifiers ========================================================================== */ .au-c-textarea--block { display: block; width: 100%; } .au-c-textarea--error { border: 0.3rem solid var(--au-red-600); } .au-c-textarea--warning { border: 0.3rem solid var(--au-orange-500); } .au-c-textarea--disabled, .au-c-textarea[disabled=true] { background-color: var(--au-gray-100); border-color: var(--au-gray-300); color: var(--au-gray-700); cursor: not-allowed; } /* ================================== #TIMEPICKER ================================== */ /* Variables ========================================================================== */ /* Component ========================================================================== */ .au-c-time-picker { display: flex; align-items: flex-end; } .au-c-time-picker__input-wrapper { position: relative; } .au-c-time-picker__input { width: 100%; max-width: 8rem; } .au-c-time-picker__button-wrapper { position: absolute; right: 0; height: calc(100% - 0.2rem); display: flex; flex-direction: column; justify-content: stretch; top: 0.1rem; right: 0.1rem; border-left: 0.1rem solid var(--au-gray-300); } .au-c-time-picker__button { font-size: 1.4rem; line-height: 1; cursor: pointer; flex-grow: 1; font-family: var(--au-font); font-weight: var(--au-medium); background-color: var(--au-white); border: none; padding: 0 0.6rem; height: 100%; margin: 0; } .au-c-time-picker__button:first-child { border-top-right-radius: 0.3rem; } .au-c-time-picker__button:last-child { border-bottom-right-radius: 0.3rem; } .au-c-time-picker__button + .au-c-time-picker__button { border-top: 0.1rem solid var(--au-gray-300); } .au-c-time-picker__button, .au-c-time-picker__button:visited { color: var(--au-gray-900); background-color: var(--au-white); } .au-c-time-picker__button:hover, .au-c-time-picker__button:focus { color: var(--au-gray-700); background-color: var(--au-gray-100); } .au-c-time-picker__button:focus { outline: var(--au-outline); outline-offset: var(--au-outline-offset); } .au-c-time-picker__separator { font-weight: var(--au-medium); padding: 0.6rem; } .au-c-time-picker__current { margin-left: 1.2rem; } .au-c-toaster { position: fixed; display: flex; gap: 1.2rem; right: 0; z-index: 9999999; width: 320px; } .au-c-toaster > * { margin-right: 1.2rem; margin-bottom: 0; } .au-c-toaster--top { top: 0; flex-direction: column; } .au-c-toaster--top > * { margin-right: 1.2rem; margin-bottom: 0; } .au-c-toaster--top > *:first-child { margin-top: 1.2rem; } .au-c-toaster--bottom { bottom: 0; flex-direction: column-reverse; } .au-c-toaster--bottom > * { margin-right: 1.2rem; margin-bottom: 0; } .au-c-toaster--bottom > *:first-child { margin-bottom: 1.2rem; } /* ================================== #TOOLBAR ================================== */ /* Variables ========================================================================== */ /* Component ========================================================================== */ .au-c-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; font-size: var(--au-h6); } .au-c-toolbar__group { display: flex; justify-content: flex-start; align-items: baseline; } .au-c-toolbar__group > * + * { margin-left: 1.2rem; } .au-c-toolbar--small .au-c-toolbar__group, .au-c-toolbar--medium .au-c-toolbar__group, .au-c-toolbar--large .au-c-toolbar__group { margin: 0.6rem; } /* Modifiers ========================================================================== */ .au-c-toolbar--reverse { flex-direction: row-reverse; } .au-c-toolbar--top { border-top: 0.1rem solid var(--au-divider-color); padding-top: 0.6rem; } .au-c-toolbar--bottom { border-bottom: 0.1rem solid var(--au-divider-color); padding-bottom: 0.6rem; } .au-c-toolbar--tint { background-color: var(--au-gray-100); } .au-c-toolbar--small { padding: 0.6rem; font-size: var(--au-h6); } .au-c-toolbar--medium { padding: 0.6rem 1.8rem; } .au-c-toolbar--large { padding: 1.8rem; } .au-c-toolbar__group--center { align-items: center; } .au-c-toolbar--nowrap { flex-wrap: nowrap; align-items: normal; } /* ================================== #TOGGLE SWITCH ================================== */ /* Variables ========================================================================== */ /* Component ========================================================================== */ .au-c-toggle-switch { position: relative; display: inline-flex; gap: 0.6rem; align-items: center; color: var(--au-gray-900); cursor: pointer; } .au-c-toggle-switch.is-disabled { color: var(--au-gray-600); cursor: not-allowed; } .au-c-toggle-switch__toggle { position: relative; height: 1.6rem; width: 3rem; background-color: var(--au-gray-200); border-radius: 1rem; transition: transform var(--au-transition), color var(--au-transition); flex-shrink: 0; } .au-c-toggle-switch__toggle:before { content: ""; position: absolute; height: 2rem; width: 2rem; background-color: var(--au-white); border-radius: 1rem; border: 0.1rem solid var(--au-gray-300); left: -0.1rem; top: -0.2rem; transition: transform var(--au-transition); } .is-disabled .au-c-toggle-switch__toggle { background-color: var(--au-gray-200); border-radius: 1rem; } .is-disabled .au-c-toggle-switch__toggle:before { background-color: var(--au-gray-300); } .au-c-toggle-switch__input:checked + .au-c-toggle-switch__toggle { background-color: var(--au-blue-700); } .is-disabled .au-c-toggle-switch__input:checked + .au-c-toggle-switch__toggle { background-color: var(--au-gray-400); } .au-c-toggle-switch__input:checked + .au-c-toggle-switch__toggle:before { transform: translateX(1.2rem); } .au-c-toggle-switch__input:focus + .au-c-toggle-switch__toggle { outline: var(--au-outline); outline-offset: var(--au-outline-offset); } .au-c-toggle-switch--alignment-right { flex-direction: row-reverse; } .au-c-toggle-switch--labelless { vertical-align: middle; } /* ================================== #PLUGINS Third-party styles File namespace: _p-... ================================== */ /* ================================== #EMBER POWER SELECT https://ember-power-select.com/ ================================== */ /* Variables ========================================================================== */ /* Ember basic dropdown ========================================================================== */ .ember-basic-dropdown { position: relative; } .ember-basic-dropdown, .ember-basic-dropdown-content, .ember-basic-dropdown-content * { box-sizing: border-box; } .ember-basic-dropdown-content { position: absolute; width: auto; z-index: 99; background-color: #fff; } .ember-basic-dropdown-content--left { left: 0; } .ember-basic-dropdown-content--right { right: 0; } .ember-basic-dropdown-overlay { position: fixed; background: rgba(33, 35, 38, 0.5); width: 100%; height: 100%; z-index: 9; top: 0; left: 0; pointer-events: none; } .ember-basic-dropdown-content-wormhole-origin { display: inline; } /* Ember power select ========================================================================== */ .ember-power-select-dropdown * { box-sizing: border-box; font-family: var(--au-font); } .ember-power-select-trigger { position: relative; overflow: hidden; text-overflow: ellipsis; font-size: var(--au-h6); line-height: 1.25; min-height: 3.6rem; padding: 0.72rem 3rem 0.72rem 0.6rem !important; user-select: none; color: inherit; background-color: #fff; border-top: 0.1rem solid var(--au-gray-300); border-bottom: 0.1rem solid var(--au-gray-300); border-right: 0.1rem solid var(--au-gray-300); border-left: 0.1rem solid var(--au-gray-300); border-radius: 0.3rem; } .ember-power-select-trigger:focus:not(.ember-power-select-trigger[aria-disabled=true]), .ember-power-select-trigger--active:not(.ember-power-select-trigger[aria-disabled=true]) { outline: none; border-width: 0.1rem !important; border-color: var(--au-outline-color) !important; box-shadow: inset 0 0 0 0.2rem var(--au-outline-color) !important; } .ember-basic-dropdown-trigger--below.ember-power-select-trigger[aria-expanded=true], .ember-basic-dropdown-trigger--in-place.ember-power-select-trigger[aria-expanded=true] { border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .ember-basic-dropdown-trigger--above.ember-power-select-trigger[aria-expanded=true] { border-top-left-radius: 0; border-top-right-radius: 0; } .ember-power-select-placeholder { color: var(--au-gray-700); display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .ember-power-select-status-icon { position: absolute; display: block; top: 0; bottom: 0; margin: auto; background-image: url('data:image/svg+xml;utf8,'); background-size: contain; height: 1.2rem; width: 1.2rem; transform: rotate(0deg) !important; } .ember-power-select-status-icon:after { display: none; } .ember-basic-dropdown-trigger[aria-expanded=true] .ember-power-select-status-icon { transform: rotate(180deg) !important; } .ember-power-select-clear-btn { position: absolute; cursor: pointer; top: 50%; transform: translateY(-50%); width: 2rem; height: 2rem; line-height: 0; font-size: 0.1rem; color: transparent; background-color: var(--au-gray-200); border-radius: 100%; transition: opacity var(--au-transition); background-image: url('data:image/svg+xml;utf8,'); background-size: 1.2rem 1.2rem; background-repeat: no-repeat; background-position: center center; overflow: hidden; } .ember-power-select-clear-btn:hover { color: transparent; opacity: 0.8; } .ember-power-select-trigger-multiple-input { font-family: inherit; font-size: inherit; border: none; display: inline-block; line-height: inherit; -webkit-appearance: none; outline: none; padding: 0; background-color: transparent; text-indent: 2px; /* There's a browser bug where this selectos cannot be chained with commas */ } .ember-power-select-trigger-multiple-input:disabled { background-color: var(--au-gray-100); } .ember-power-select-trigger-multiple-input::placeholder { opacity: 1; color: var(--au-gray-700); } .ember-power-select-trigger-multiple-input::-webkit-input-placeholder { opacity: 1; color: var(--au-gray-700); } .ember-power-select-trigger-multiple-input::-moz-placeholder { opacity: 1; color: var(--au-gray-700); } .ember-power-select-trigger-multiple-input::-ms-input-placeholder { opacity: 1; color: var(--au-gray-700); } .ember-power-select-multiple-options { display: flex; flex-wrap: wrap; align-items: center; padding: 0; margin: 0 0.6rem; height: 100%; max-height: 10rem; overflow: auto; } .ember-power-select-multiple-option { font-size: var(--au-base); line-height: var(--au-global-line-height); display: inline-flex; font-family: var(--au-font); font-weight: var(--au-medium); line-height: 2.4rem; min-height: 2.4rem; color: var(--au-gray-700); background-color: var(--au-gray-200); border: 0.1rem solid var(--au-gray-300); padding: 0 0.6rem 0 0.6rem; border-radius: 0.6rem; margin-right: 0.6rem; margin-top: 0.3rem; margin-bottom: 0.3rem; gap: 0.6rem; } .ember-power-select-multiple-remove-btn { position: relative; font-size: 0.1rem; font-weight: var(--au-regular); width: 2rem; cursor: pointer; text-align: center; color: transparent; background-color: var(--au-gray-200); transition: color var(--au-transition); padding-right: 0.6rem; padding-left: 0.6rem; margin-left: -0.6rem; border-right: 0.1rem dotted var(--au-gray-300); border-top-left-radius: var(--au-radius); border-bottom-left-radius: var(--au-radius); background-image: url('data:image/svg+xml;utf8,'); background-size: 1.2rem 1.2rem; background-repeat: no-repeat; background-position: center center; overflow: hidden; } .ember-power-select-multiple-remove-btn:hover { color: transparent; opacity: 0.8; } .ember-power-select-search { padding: 0.6rem; } .ember-power-select-search-input { position: relative; overflow: hidden; text-overflow: ellipsis; font-size: var(--au-h6); line-height: 3.6rem; height: 3.6rem; padding: 0 0.6rem 0.1ex; user-select: none; color: inherit; background-color: #fff; border: 0.1rem solid var(--au-gray-300); border-radius: 0.3rem; width: 100%; } .ember-power-select-search-input:focus { outline: none; border-color: var(--au-outline-color); box-shadow: inset 0 0 0 0.2rem var(--au-outline-color); } .ember-power-select-search-input::-webkit-input-placeholder { color: var(--au-gray-600); font-style: italic; font-weight: 300; } .ember-power-select-search-input::-moz-placeholder { color: var(--au-gray-600); font-style: italic; font-weight: 300; } .ember-power-select-search-input:-ms-input-placeholder { color: var(--au-gray-600); font-style: italic; font-weight: 300; } .ember-power-select-search-input:-moz-placeholder { color: var(--au-gray-600); font-style: italic; font-weight: 300; } .ember-power-select-dropdown { border-left: 0.1rem solid var(--au-gray-300); border-right: 0.1rem solid var(--au-gray-300); line-height: 1.75; border-radius: 0.3rem; box-shadow: 0 0 12px rgba(33, 35, 38, 0.15), 0 0 2px rgba(33, 35, 38, 0.1); overflow: hidden; color: inherit; z-index: 10000; } .ember-power-select-dropdown.ember-basic-dropdown-content--above { border-top: 0.1rem solid var(--au-gray-300); border-bottom: none; border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .ember-power-select-dropdown.ember-basic-dropdown-content--below, .ember-power-select-dropdown.ember-basic-dropdown-content--in-place { border-top: none; border-bottom: 0.1rem solid var(--au-gray-300); border-top-left-radius: 0; border-top-right-radius: 0; } .ember-power-select-dropdown.ember-basic-dropdown-content--in-place { width: 100%; z-index: auto; } .ember-power-select-options { list-style: none; margin: 0; padding: 0; user-select: none; -webkit-user-select: none; border-top: 0.1rem solid var(--au-divider-color); } .ember-power-select-options[role=listbox] { overflow-y: auto; /* in firefox in windows this can cause a word-break issue. Try `overflow-y: scroll` if that happens */ -webkit-overflow-scrolling: touch; max-height: 12.25em; } .ember-power-select-option { cursor: pointer; font-size: var(--au-h6); line-height: 2.2rem; padding: 0.6rem 0.6rem 0.6rem 2.4rem; position: relative; } .ember-power-select-option:hover { text-decoration: underline; } .ember-power-select-group[aria-disabled=true] { color: var(--au-gray-200); cursor: not-allowed; } .ember-power-select-group[aria-disabled=true] .ember-power-select-option, .ember-power-select-option[aria-disabled=true] { color: var(--au-gray-200); pointer-events: none; cursor: not-allowed; } .ember-power-select-option[aria-selected=true] { color: var(--au-blue-700); background-color: var(--au-gray-200); text-decoration: underline; } .ember-power-select-option[aria-current=true] { color: var(--au-blue-700); background-color: var(--au-gray-200); text-decoration: underline; } .ember-power-select-option[aria-selected=true], .ember-power-select-option[aria-current=true] { position: relative; } .ember-power-select-option[aria-selected=true]:before, .ember-power-select-option[aria-current=true]:before { display: none; } .ember-power-select-option[aria-selected=true]:after, .ember-power-select-option[aria-current=true]:after { content: ""; position: absolute; top: 0; left: 0.15rem; display: block; background-image: url('data:image/svg+xml;utf8,'); background-size: contain; background-repeat: no-repeat; background-position: center; height: 100%; width: 1.8rem; } .ember-power-select-option--loading-message, .ember-power-select-option--no-matches-message, .ember-power-select-option--search-message { font-style: italic; color: var(--au-gray-600); padding: 0.6rem 0 0.6rem 0.6rem !important; } .ember-power-select-option--loading-message:hover, .ember-power-select-option--no-matches-message:hover, .ember-power-select-option--search-message:hover { text-decoration: none; } .ember-power-select-group-name { cursor: default; font-weight: bold; } .ember-power-select-trigger[aria-disabled=true] { background-color: var(--au-gray-100); } .ember-power-select--error .ember-power-select-trigger { border: 0.3rem solid var(--au-red-600); } .ember-power-select--error .ember-power-select-trigger:focus, .ember-power-select--error .ember-power-select-trigger.ember-power-select-trigger--active { outline: none; border-width: 0.1rem !important; border-color: var(--au-outline-color) !important; box-shadow: inset 0 0 0 0.2rem var(--au-outline-color) !important; } .ember-power-select-trigger { padding: 0 16px 0 0; } .ember-power-select-selected-item, .ember-power-select-placeholder { margin-left: 0; padding-right: 2.4rem; } .ember-power-select-status-icon { right: 1.2rem; } .ember-power-select-clear-btn { right: 3rem; } .ember-power-select-group .ember-power-select-group .ember-power-select-group-name { padding-left: 1.8rem; } .ember-power-select-group .ember-power-select-group .ember-power-select-option { padding-left: 3rem; } .ember-power-select-group .ember-power-select-option { padding-left: 1.8rem; } .ember-power-select-group .ember-power-select-group-name { padding-left: 0.6rem; } .ember-power-select-visually-hidden { height: 1px; left: -9999px; overflow: hidden; position: absolute; width: 1px; } .ember-power-select-trigger[dir=rtl] { padding: 0 0 0 16px; } .ember-power-select-trigger[dir=rtl] .ember-power-select-selected-item, .ember-power-select-trigger[dir=rtl] .ember-power-select-placeholder { margin-right: 0; } .ember-power-select-trigger[dir=rtl] .ember-power-select-multiple-option { float: right; } .ember-power-select-trigger[dir=rtl] .ember-power-select-trigger-multiple-input { float: right; } .ember-power-select-trigger[dir=rtl] .ember-power-select-status-icon { left: 1.2rem; right: initial; } .ember-power-select-trigger[dir=rtl] .ember-power-select-clear-btn { left: 3rem; right: initial; } .ember-power-select-dropdown[dir=rtl] .ember-power-select-group .ember-power-select-group .ember-power-select-group-name { padding-right: 1.8rem; } .ember-power-select-dropdown[dir=rtl] .ember-power-select-group .ember-power-select-group .ember-power-select-option { padding-right: 3rem; } .ember-power-select-dropdown[dir=rtl] .ember-power-select-group .ember-power-select-option { padding-right: 1.8rem; } .ember-power-select-dropdown[dir=rtl] .ember-power-select-group .ember-power-select-group-name { padding-right: 0.6rem; } /* ================================== #DUET DATEPICKER https://github.com/duetds/date-picker#theming ================================== */ /* Variables ========================================================================== */ :root { --duet-color-primary: var(--au-blue-700); --duet-color-text: var(--au-gray-1000); --duet-color-text-active: var(--au-white); --duet-color-placeholder: var(--au-gray-700); --duet-color-button: var(--au-white); --duet-color-surface: var(--au-white); --duet-color-overlay: rgba(0, 0, 0, 0.3); --duet-font: var(--au-font); --duet-font-normal: 400; --duet-font-bold: 500; --duet-radius: 0.3rem; --duet-z-index: 10; } /* Overrides ========================================================================== */ .duet-date__dialog { overflow: hidden; } @media (min-width: 35.9375em) { .duet-date__dialog { left: auto; right: 0; min-width: 220px; max-width: 220px; } .au-c-datepicker--top .duet-date__dialog { top: auto; bottom: 100%; transform: scale(0.96) translateZ(0) translateY(20px); transform-origin: bottom right; } .au-c-datepicker--top .duet-date__dialog.is-active { top: auto; bottom: calc(100% + 0.5rem); transform: scale(0.96) translateZ(0) translateY(0); } } @media (min-width: 35.9375em) { .duet-date__dialog-content { min-width: 220px; max-width: 220px; padding: 0.3rem 0.6rem 0.6rem; } } .duet-date__input { height: 3.6rem; border-color: var(--au-gray-300); } .duet-date__input:focus { outline: none; border-width: 0.1rem !important; border-color: var(--au-outline-color) !important; box-shadow: 0 0 0 0.2rem var(--au-outline-color) !important; } .duet-date__input[disabled=""] { background-color: var(--au-gray-100); } .duet-date__toggle { width: 3.6rem; transition: background var(--au-transition); } .duet-date__toggle, .duet-date__toggle:focus { box-shadow: none; border-left: 0.1rem solid var(--au-gray-300); } .duet-date__toggle:focus { outline: var(--au-outline); outline-offset: var(--au-outline-offset); } .duet-date__toggle:hover { background-color: var(--au-gray-100); } .duet-date__toggle[disabled=""] { background-color: var(--au-gray-100); cursor: default; } .duet-date__table { font-size: 1.4rem; } .duet-date__toggle-icon svg { width: 1.8rem; height: 1.8rem; } .duet-date__select-label { font-size: 1.6rem; } .duet-date__table-header { font-size: 1.2rem; } .duet-date__cell { padding-top: 0.15rem; padding-bottom: 0.15rem; } .duet-date__day.is-today { box-shadow: 0 0 0 1px var(--au-blue-700); } [aria-selected=true] .duet-date__day { background: var(--au-blue-700); } .duet-date__day { font-size: 1.4rem; line-height: 1; width: 26px; height: 26px; } .duet-date__day:focus { color: var(--au-blue-700); background-color: var(--au-blue-200); border: 0.2rem solid var(--au-blue-300); box-shadow: none; } .duet-date__day:active { color: var(--au-white); background: var(--au-blue-700); box-shadow: 0 0 5px var(--au-blue-700); } .duet-date__day:hover::before, .duet-date__day.is-today::before { background: var(--au-blue-700); } /* Modifiers ========================================================================== */ .duet-date-error .duet-date__input { border-color: var(--au-red-600); box-shadow: 0 0 0 0.2rem var(--au-red-600); } .duet-date-warning .duet-date__input { border-color: var(--au-orange-500); box-shadow: 0 0 0 0.2rem var(--au-orange-500); } /* ================================== #UTILITIES Single function helper classes File namespace: _u-... Style namespace: .au-u-... ================================== */ /* ========================================================================== #TEXT ALIGNMENT ========================================================================== */ /** * Utility classes to align text. Use text alignment like this: * *

* text *

* */ /* Classes ========================================================================== */ .au-u-text-right { text-align: right; } .au-u-text-center { text-align: center; } .au-u-text-left { text-align: left; } /* Breakpoints ========================================================================== */ @media (min-width: 18.75em) { .au-u-text-right\@tiny { text-align: right; } .au-u-text-center\@tiny { text-align: center; } .au-u-text-left\@tiny { text-align: left; } } @media (min-width: 31.25em) { .au-u-text-right\@xsmall { text-align: right; } .au-u-text-center\@xsmall { text-align: center; } .au-u-text-left\@xsmall { text-align: left; } } @media (min-width: 47.9375em) { .au-u-text-right\@small { text-align: right; } .au-u-text-center\@small { text-align: center; } .au-u-text-left\@small { text-align: left; } } @media (min-width: 63.9375em) { .au-u-text-right\@medium { text-align: right; } .au-u-text-center\@medium { text-align: center; } .au-u-text-left\@medium { text-align: left; } } @media (min-width: 100em) { .au-u-text-right\@large { text-align: right; } .au-u-text-center\@large { text-align: center; } .au-u-text-left\@large { text-align: left; } } /* ================================== #Background ================================== */ .au-u-background-gray-100 { background-color: var(--au-gray-100); } .au-u-background-gray-200 { background-color: var(--au-gray-200); } /* ========================================================================== #BREAK WORDS ========================================================================== */ /** * Utility classes to break words. Use it like this: * * * anextremelylongurlanextremelylongurlanextremelylongurlanextremelylongurlanextremelylongurlanextremelylongurlanextremelylongurlanextremelylongurlanextremelylongurl * * */ /* Classes ========================================================================== */ .au-u-word-break { word-break: break-word !important; } .au-u-word-break-all { word-break: break-all !important; } .au-u-word-nowrap { white-space: nowrap !important; } /* ========================================================================== #HEADINGS ========================================================================== */ /** * Utility classes to put specific font-size values onto elements. The below loop * will generate us a suite of classes like: * * .au-u-h1 {} * .au-u-h2 {} * .au-u-h3 {} * .au-u-h4 {} * .au-u-h5 {} * .au-u-h6 {} * .au-u-h-functional {} */ .au-u-h1 { font-size: var(--au-h1-small) !important; line-height: var(--au-global-line-height) !important; } @media (min-width: 47.9375em) { .au-u-h1 { font-size: var(--au-h1-medium) !important; line-height: var(--au-global-line-height) !important; } } @media (min-width: 63.9375em) { .au-u-h1 { font-size: var(--au-h1) !important; line-height: var(--au-global-line-height) !important; } } .au-u-h2 { font-size: var(--au-h2-small) !important; line-height: var(--au-global-line-height) !important; } @media (min-width: 63.9375em) { .au-u-h2 { font-size: var(--au-h2) !important; line-height: var(--au-global-line-height) !important; } } .au-u-h3 { font-size: var(--au-h3-small) !important; line-height: var(--au-global-line-height) !important; } @media (min-width: 63.9375em) { .au-u-h3 { font-size: var(--au-h3) !important; line-height: var(--au-global-line-height) !important; } } .au-u-h4 { font-size: var(--au-h4) !important; line-height: var(--au-global-line-height) !important; } .au-u-h5 { font-size: var(--au-h5) !important; line-height: var(--au-global-line-height) !important; } .au-u-h6 { font-size: var(--au-h6) !important; line-height: var(--au-global-line-height) !important; } .au-u-h-functional { font-size: var(--au-h-functional-small) !important; line-height: var(--au-global-line-height) !important; } @media (min-width: 63.9375em) { .au-u-h-functional { font-size: var(--au-h-functional) !important; line-height: var(--au-global-line-height) !important; } } .au-u-height-full { height: 100% !important; } /* ========================================================================== #HIDE ========================================================================== */ /** * Hide only visually, but have it available for screen readers: * http://snook.ca/archives/html_and_css/hiding-content-for-accessibility */ .au-u-hidden-visually, .u-hidden { border: 0 !important; clip: rect(0 0 0 0) !important; clip-path: inset(50%) !important; height: 1px !important; margin: -1px !important; overflow: hidden !important; padding: 0 !important; position: absolute !important; white-space: nowrap !important; width: 1px !important; } /** * Hide visually and from screen readers. */ .au-u-hidden { display: none !important; } /** * Hide elements visually and on screen readers starting from certain breakpoints, but show visually and for screen readers on others. */ @media (min-width: 18.75em) { .au-u-hidden-from\@tiny { display: none !important; } } @media (min-width: 31.25em) { .au-u-hidden-from\@xsmall { display: none !important; } } @media (min-width: 47.9375em) { .au-u-hidden-from\@small { display: none !important; } } @media (min-width: 63.9375em) { .au-u-hidden-from\@medium { display: none !important; } } @media (min-width: 100em) { .au-u-hidden-from\@large { display: none !important; } } /* ========================================================================== #FLEX ========================================================================== */ /** * Utility classes to put specific flex options on an element: */ /* Variables ========================================================================== */ /* Utility classes ========================================================================== */ .au-u-flex { display: flex !important; } .au-u-flex--inline { display: inline-flex !important; } .au-u-flex--wrap { flex-wrap: wrap !important; } .au-u-flex--no-wrap { flex-wrap: nowrap !important; } .au-u-flex--spaced { gap: 2.4rem !important; } .au-u-flex--spaced-tiny { gap: 0.6rem !important; } .au-u-flex--spaced-small { gap: 1.2rem !important; } .au-u-flex--spaced-large { gap: 4.8rem !important; } .au-u-flex--row { flex-direction: row !important; } .au-u-flex--column { flex-direction: column !important; } .au-u-flex--row-reverse { flex-direction: row-reverse !important; } .au-u-flex--column-reverse { flex-direction: column-reverse !important; } .au-u-flex--start { justify-content: flex-start !important; } .au-u-flex--center { justify-content: center !important; } .au-u-flex--between { justify-content: space-between !important; } .au-u-flex--around { justify-content: space-around !important; } .au-u-flex--end { justify-content: flex-end !important; } .au-u-flex--vertical-start { align-items: flex-start !important; } .au-u-flex--vertical-end { align-items: flex-end !important; } .au-u-flex--vertical-center { align-items: center !important; } .au-u-flex--vertical-baseline { align-items: baseline !important; } .au-u-flex-self-start { align-self: flex-start !important; } .au-u-flex-self-end { align-self: flex-end !important; } .au-u-flex-self-center { align-self: center !important; } .au-u-flex-self-baseline { align-self: baseline !important; } .au-u-flex-self-stretch { align-self: stretch !important; } /* ========================================================================== #FONT FAMILY ========================================================================== */ .au-u-font { font-family: var(--au-font) !important; } .au-u-font-secondary { font-family: var(--au-font-secondary) !important; } /* ========================================================================== #FONT WEIGHTS ========================================================================== */ /** * Utility classes to put specific font-size values onto elements. The below loop * will generate us a suite of classes like: * * .au-u-light {} * .au-u-regular {} * .au-u-medium {} * .au-u-bold {} */ .au-u-light { font-weight: var(--au-light) !important; } .au-u-regular { font-weight: var(--au-regular) !important; } .au-u-medium { font-weight: var(--au-medium) !important; } .au-u-bold { font-weight: var(--au-bold) !important; } /* ========================================================================== #MAX WIDTH ========================================================================== */ .au-u-max-width-tiny { max-width: 300px; } .au-u-max-width-xsmall { max-width: 500px; } .au-u-max-width-small { max-width: 767px; } .au-u-max-width-medium { max-width: 1023px; } .au-u-max-width-large { max-width: 1600px; } /* ========================================================================== #PARAGRAPHS ========================================================================== */ /** * Utility classes to style paragraphs. */ .au-u-para { font-size: var(--au-para-small); line-height: var(--au-global-line-height); } @media (min-width: 63.9375em) { .au-u-para { font-size: var(--au-para); line-height: var(--au-global-line-height); } } .au-u-para-lead { font-size: var(--au-lead-small) !important; line-height: var(--au-global-line-height) !important; } @media (min-width: 47.9375em) { .au-u-para-lead { font-size: var(--au-lead-medium) !important; line-height: var(--au-global-line-height) !important; } } @media (min-width: 63.9375em) { .au-u-para-lead { font-size: var(--au-lead) !important; line-height: var(--au-global-line-height) !important; } } .au-u-para-small { font-size: var(--au-small) !important; line-height: var(--au-global-line-height) !important; } .au-u-para-tiny { font-size: var(--au-tiny) !important; line-height: var(--au-global-line-height) !important; } .au-u-muted { color: var(--au-gray-700) !important; } .au-u-italic { font-style: italic !important; } .au-u-success { color: var(--au-green-700) !important; } .au-u-warning { color: var(--au-orange-700) !important; } .au-u-error { color: var(--au-red-700) !important; } /* ========================================================================== #PRINT ========================================================================== */ /** * Very crude, reset-like styles taken from the HTML5 Boilerplate: * https://github.com/h5bp/html5-boilerplate/blob/5.3.0/dist/doc/css.md#print-styles * https://github.com/h5bp/html5-boilerplate/blob/master/dist/css/main.css#L205-L282 */ @media print { /** * 1. Black prints faster: http://www.sanbeiji.com/archives/953 */ *, *:before, *:after { background: transparent !important; color: #000 !important; /* [1] */ box-shadow: none !important; text-shadow: none !important; } a, a:visited { text-decoration: underline; } a[href]:after { content: " (" attr(href) ")"; } abbr[title]:after { content: " (" attr(title) ")"; } /** * Don’t show links that are fragment identifiers, or use the `javascript:` * pseudo protocol. */ a[href^="#"]:after, a[href^="javascript:"]:after { content: ""; } pre, blockquote { border: 1px solid #999; page-break-inside: avoid; } /** * Printing Tables: http://css-discuss.incutio.com/wiki/Printing_Tables */ thead { display: table-header-group; } tr, img { page-break-inside: avoid; } img { max-width: 100% !important; } p, h2, h3 { orphans: 3; widows: 3; } h2, h3 { page-break-after: avoid; } .au-u-wide-on-print { min-width: 100% !important; width: 100% !important; max-width: none !important; flex-basis: 100% !important; } .au-u-hide-on-print { display: none !important; } } /* ========================================================================== #SPACINGS ========================================================================== */ /** * Utility classes to put specific spacing values onto elements. The below loop * will generate us a suite of classes like: * * .au-u-margin-top {} * .au-u-padding-left-large {} * .au-u-margin-right-small {} * .au-u-padding {} * .au-u-padding-right-none {} * .au-u-padding-horizontal {} * .au-u-padding-vertical-small {} */ /* Variables ========================================================================== */ /* Generate utility classes ========================================================================== */ .au-u-padding { padding: 2.4rem !important; } .au-u-padding-tiny { padding: 0.6rem !important; } .au-u-padding-small { padding: 1.2rem !important; } .au-u-padding-large { padding: 4.8rem !important; } .au-u-padding-huge { padding: 9.6rem !important; } .au-u-padding-none { padding: 0 !important; } .au-u-padding-top { padding-top: 2.4rem !important; } .au-u-padding-top-tiny { padding-top: 0.6rem !important; } .au-u-padding-top-small { padding-top: 1.2rem !important; } .au-u-padding-top-large { padding-top: 4.8rem !important; } .au-u-padding-top-huge { padding-top: 9.6rem !important; } .au-u-padding-top-none { padding-top: 0 !important; } .au-u-padding-right { padding-right: 2.4rem !important; } .au-u-padding-right-tiny { padding-right: 0.6rem !important; } .au-u-padding-right-small { padding-right: 1.2rem !important; } .au-u-padding-right-large { padding-right: 4.8rem !important; } .au-u-padding-right-huge { padding-right: 9.6rem !important; } .au-u-padding-right-none { padding-right: 0 !important; } .au-u-padding-bottom { padding-bottom: 2.4rem !important; } .au-u-padding-bottom-tiny { padding-bottom: 0.6rem !important; } .au-u-padding-bottom-small { padding-bottom: 1.2rem !important; } .au-u-padding-bottom-large { padding-bottom: 4.8rem !important; } .au-u-padding-bottom-huge { padding-bottom: 9.6rem !important; } .au-u-padding-bottom-none { padding-bottom: 0 !important; } .au-u-padding-left { padding-left: 2.4rem !important; } .au-u-padding-left-tiny { padding-left: 0.6rem !important; } .au-u-padding-left-small { padding-left: 1.2rem !important; } .au-u-padding-left-large { padding-left: 4.8rem !important; } .au-u-padding-left-huge { padding-left: 9.6rem !important; } .au-u-padding-left-none { padding-left: 0 !important; } .au-u-margin { margin: 2.4rem !important; } .au-u-margin-tiny { margin: 0.6rem !important; } .au-u-margin-small { margin: 1.2rem !important; } .au-u-margin-large { margin: 4.8rem !important; } .au-u-margin-huge { margin: 9.6rem !important; } .au-u-margin-none { margin: 0 !important; } .au-u-margin-top { margin-top: 2.4rem !important; } .au-u-margin-top-tiny { margin-top: 0.6rem !important; } .au-u-margin-top-small { margin-top: 1.2rem !important; } .au-u-margin-top-large { margin-top: 4.8rem !important; } .au-u-margin-top-huge { margin-top: 9.6rem !important; } .au-u-margin-top-none { margin-top: 0 !important; } .au-u-margin-right { margin-right: 2.4rem !important; } .au-u-margin-right-tiny { margin-right: 0.6rem !important; } .au-u-margin-right-small { margin-right: 1.2rem !important; } .au-u-margin-right-large { margin-right: 4.8rem !important; } .au-u-margin-right-huge { margin-right: 9.6rem !important; } .au-u-margin-right-none { margin-right: 0 !important; } .au-u-margin-bottom { margin-bottom: 2.4rem !important; } .au-u-margin-bottom-tiny { margin-bottom: 0.6rem !important; } .au-u-margin-bottom-small { margin-bottom: 1.2rem !important; } .au-u-margin-bottom-large { margin-bottom: 4.8rem !important; } .au-u-margin-bottom-huge { margin-bottom: 9.6rem !important; } .au-u-margin-bottom-none { margin-bottom: 0 !important; } .au-u-margin-left { margin-left: 2.4rem !important; } .au-u-margin-left-tiny { margin-left: 0.6rem !important; } .au-u-margin-left-small { margin-left: 1.2rem !important; } .au-u-margin-left-large { margin-left: 4.8rem !important; } .au-u-margin-left-huge { margin-left: 9.6rem !important; } .au-u-margin-left-none { margin-left: 0 !important; } /* ========================================================================== #RESPONSIVE-SPACINGS ========================================================================== */ /** * Utility classes enhancing the normal spacing classes by adding responsiveness * to them. By default, there are not responsive spacings defined. You can * generate responsive spacings by adding entries to the following three Sass * maps, e.g.: * * $au-responsive-spacing-directions: ( * null: null, * bottom: bottom, * ); * * $au-responsive-spacing-properties: ( * "margin": "margin", * ); * * $au-responsive-spacing-sizes: ( * "-small": $au-global-spacing-unit-small, * ); * * This would bring us the following classes: * * .au-u-margin-small@xsmall {} * .au-u-margin-small@small {} * .au-u-margin-small@medium {} * .au-u-margin-small@large {} * .au-u-margin-bottom-small@xsmall {} * .au-u-margin-bottom-small@small {} * .au-u-margin-bottom-small@medium {} * .au-u-margin-bottom-small@large {} * * You can change the generated CSS classes by further extending the Sass maps. * If you want every ‘normal’ spacing (those from `utilities.spacings`) also as * a responsive version, you can just mirror the ‘normal’ spacings: * * $au-responsive-spacing-directions: $au-spacing-directions !default; * * $au-responsive-spacing-properties: $au-spacing-properties !default; * * $au-responsive-spacing-sizes: $au-spacing-sizes !default; * * BUT BE AWARE: This can generate a huge chunk of extra CSS, depending on the * amount of breakpoints you defined. So please check your CSS’ output and * filesize! */ /* Generate utility classes ========================================================================== */ /* Generate utility classes ========================================================================== */ /* stylelint-disable max-nesting-depth */ @media (min-width: 18.75em) { .au-u-padding\@tiny { padding: 2.4rem !important; } } @media (min-width: 31.25em) { .au-u-padding\@xsmall { padding: 2.4rem !important; } } @media (min-width: 47.9375em) { .au-u-padding\@small { padding: 2.4rem !important; } } @media (min-width: 63.9375em) { .au-u-padding\@medium { padding: 2.4rem !important; } } @media (min-width: 100em) { .au-u-padding\@large { padding: 2.4rem !important; } } @media (min-width: 18.75em) { .au-u-padding-tiny\@tiny { padding: 0.6rem !important; } } @media (min-width: 31.25em) { .au-u-padding-tiny\@xsmall { padding: 0.6rem !important; } } @media (min-width: 47.9375em) { .au-u-padding-tiny\@small { padding: 0.6rem !important; } } @media (min-width: 63.9375em) { .au-u-padding-tiny\@medium { padding: 0.6rem !important; } } @media (min-width: 100em) { .au-u-padding-tiny\@large { padding: 0.6rem !important; } } @media (min-width: 18.75em) { .au-u-padding-small\@tiny { padding: 1.2rem !important; } } @media (min-width: 31.25em) { .au-u-padding-small\@xsmall { padding: 1.2rem !important; } } @media (min-width: 47.9375em) { .au-u-padding-small\@small { padding: 1.2rem !important; } } @media (min-width: 63.9375em) { .au-u-padding-small\@medium { padding: 1.2rem !important; } } @media (min-width: 100em) { .au-u-padding-small\@large { padding: 1.2rem !important; } } @media (min-width: 18.75em) { .au-u-padding-large\@tiny { padding: 4.8rem !important; } } @media (min-width: 31.25em) { .au-u-padding-large\@xsmall { padding: 4.8rem !important; } } @media (min-width: 47.9375em) { .au-u-padding-large\@small { padding: 4.8rem !important; } } @media (min-width: 63.9375em) { .au-u-padding-large\@medium { padding: 4.8rem !important; } } @media (min-width: 100em) { .au-u-padding-large\@large { padding: 4.8rem !important; } } @media (min-width: 18.75em) { .au-u-padding-huge\@tiny { padding: 9.6rem !important; } } @media (min-width: 31.25em) { .au-u-padding-huge\@xsmall { padding: 9.6rem !important; } } @media (min-width: 47.9375em) { .au-u-padding-huge\@small { padding: 9.6rem !important; } } @media (min-width: 63.9375em) { .au-u-padding-huge\@medium { padding: 9.6rem !important; } } @media (min-width: 100em) { .au-u-padding-huge\@large { padding: 9.6rem !important; } } @media (min-width: 18.75em) { .au-u-padding-none\@tiny { padding: 0 !important; } } @media (min-width: 31.25em) { .au-u-padding-none\@xsmall { padding: 0 !important; } } @media (min-width: 47.9375em) { .au-u-padding-none\@small { padding: 0 !important; } } @media (min-width: 63.9375em) { .au-u-padding-none\@medium { padding: 0 !important; } } @media (min-width: 100em) { .au-u-padding-none\@large { padding: 0 !important; } } @media (min-width: 18.75em) { .au-u-padding-top\@tiny { padding-top: 2.4rem !important; } } @media (min-width: 31.25em) { .au-u-padding-top\@xsmall { padding-top: 2.4rem !important; } } @media (min-width: 47.9375em) { .au-u-padding-top\@small { padding-top: 2.4rem !important; } } @media (min-width: 63.9375em) { .au-u-padding-top\@medium { padding-top: 2.4rem !important; } } @media (min-width: 100em) { .au-u-padding-top\@large { padding-top: 2.4rem !important; } } @media (min-width: 18.75em) { .au-u-padding-top-tiny\@tiny { padding-top: 0.6rem !important; } } @media (min-width: 31.25em) { .au-u-padding-top-tiny\@xsmall { padding-top: 0.6rem !important; } } @media (min-width: 47.9375em) { .au-u-padding-top-tiny\@small { padding-top: 0.6rem !important; } } @media (min-width: 63.9375em) { .au-u-padding-top-tiny\@medium { padding-top: 0.6rem !important; } } @media (min-width: 100em) { .au-u-padding-top-tiny\@large { padding-top: 0.6rem !important; } } @media (min-width: 18.75em) { .au-u-padding-top-small\@tiny { padding-top: 1.2rem !important; } } @media (min-width: 31.25em) { .au-u-padding-top-small\@xsmall { padding-top: 1.2rem !important; } } @media (min-width: 47.9375em) { .au-u-padding-top-small\@small { padding-top: 1.2rem !important; } } @media (min-width: 63.9375em) { .au-u-padding-top-small\@medium { padding-top: 1.2rem !important; } } @media (min-width: 100em) { .au-u-padding-top-small\@large { padding-top: 1.2rem !important; } } @media (min-width: 18.75em) { .au-u-padding-top-large\@tiny { padding-top: 4.8rem !important; } } @media (min-width: 31.25em) { .au-u-padding-top-large\@xsmall { padding-top: 4.8rem !important; } } @media (min-width: 47.9375em) { .au-u-padding-top-large\@small { padding-top: 4.8rem !important; } } @media (min-width: 63.9375em) { .au-u-padding-top-large\@medium { padding-top: 4.8rem !important; } } @media (min-width: 100em) { .au-u-padding-top-large\@large { padding-top: 4.8rem !important; } } @media (min-width: 18.75em) { .au-u-padding-top-huge\@tiny { padding-top: 9.6rem !important; } } @media (min-width: 31.25em) { .au-u-padding-top-huge\@xsmall { padding-top: 9.6rem !important; } } @media (min-width: 47.9375em) { .au-u-padding-top-huge\@small { padding-top: 9.6rem !important; } } @media (min-width: 63.9375em) { .au-u-padding-top-huge\@medium { padding-top: 9.6rem !important; } } @media (min-width: 100em) { .au-u-padding-top-huge\@large { padding-top: 9.6rem !important; } } @media (min-width: 18.75em) { .au-u-padding-top-none\@tiny { padding-top: 0 !important; } } @media (min-width: 31.25em) { .au-u-padding-top-none\@xsmall { padding-top: 0 !important; } } @media (min-width: 47.9375em) { .au-u-padding-top-none\@small { padding-top: 0 !important; } } @media (min-width: 63.9375em) { .au-u-padding-top-none\@medium { padding-top: 0 !important; } } @media (min-width: 100em) { .au-u-padding-top-none\@large { padding-top: 0 !important; } } @media (min-width: 18.75em) { .au-u-padding-right\@tiny { padding-right: 2.4rem !important; } } @media (min-width: 31.25em) { .au-u-padding-right\@xsmall { padding-right: 2.4rem !important; } } @media (min-width: 47.9375em) { .au-u-padding-right\@small { padding-right: 2.4rem !important; } } @media (min-width: 63.9375em) { .au-u-padding-right\@medium { padding-right: 2.4rem !important; } } @media (min-width: 100em) { .au-u-padding-right\@large { padding-right: 2.4rem !important; } } @media (min-width: 18.75em) { .au-u-padding-right-tiny\@tiny { padding-right: 0.6rem !important; } } @media (min-width: 31.25em) { .au-u-padding-right-tiny\@xsmall { padding-right: 0.6rem !important; } } @media (min-width: 47.9375em) { .au-u-padding-right-tiny\@small { padding-right: 0.6rem !important; } } @media (min-width: 63.9375em) { .au-u-padding-right-tiny\@medium { padding-right: 0.6rem !important; } } @media (min-width: 100em) { .au-u-padding-right-tiny\@large { padding-right: 0.6rem !important; } } @media (min-width: 18.75em) { .au-u-padding-right-small\@tiny { padding-right: 1.2rem !important; } } @media (min-width: 31.25em) { .au-u-padding-right-small\@xsmall { padding-right: 1.2rem !important; } } @media (min-width: 47.9375em) { .au-u-padding-right-small\@small { padding-right: 1.2rem !important; } } @media (min-width: 63.9375em) { .au-u-padding-right-small\@medium { padding-right: 1.2rem !important; } } @media (min-width: 100em) { .au-u-padding-right-small\@large { padding-right: 1.2rem !important; } } @media (min-width: 18.75em) { .au-u-padding-right-large\@tiny { padding-right: 4.8rem !important; } } @media (min-width: 31.25em) { .au-u-padding-right-large\@xsmall { padding-right: 4.8rem !important; } } @media (min-width: 47.9375em) { .au-u-padding-right-large\@small { padding-right: 4.8rem !important; } } @media (min-width: 63.9375em) { .au-u-padding-right-large\@medium { padding-right: 4.8rem !important; } } @media (min-width: 100em) { .au-u-padding-right-large\@large { padding-right: 4.8rem !important; } } @media (min-width: 18.75em) { .au-u-padding-right-huge\@tiny { padding-right: 9.6rem !important; } } @media (min-width: 31.25em) { .au-u-padding-right-huge\@xsmall { padding-right: 9.6rem !important; } } @media (min-width: 47.9375em) { .au-u-padding-right-huge\@small { padding-right: 9.6rem !important; } } @media (min-width: 63.9375em) { .au-u-padding-right-huge\@medium { padding-right: 9.6rem !important; } } @media (min-width: 100em) { .au-u-padding-right-huge\@large { padding-right: 9.6rem !important; } } @media (min-width: 18.75em) { .au-u-padding-right-none\@tiny { padding-right: 0 !important; } } @media (min-width: 31.25em) { .au-u-padding-right-none\@xsmall { padding-right: 0 !important; } } @media (min-width: 47.9375em) { .au-u-padding-right-none\@small { padding-right: 0 !important; } } @media (min-width: 63.9375em) { .au-u-padding-right-none\@medium { padding-right: 0 !important; } } @media (min-width: 100em) { .au-u-padding-right-none\@large { padding-right: 0 !important; } } @media (min-width: 18.75em) { .au-u-padding-bottom\@tiny { padding-bottom: 2.4rem !important; } } @media (min-width: 31.25em) { .au-u-padding-bottom\@xsmall { padding-bottom: 2.4rem !important; } } @media (min-width: 47.9375em) { .au-u-padding-bottom\@small { padding-bottom: 2.4rem !important; } } @media (min-width: 63.9375em) { .au-u-padding-bottom\@medium { padding-bottom: 2.4rem !important; } } @media (min-width: 100em) { .au-u-padding-bottom\@large { padding-bottom: 2.4rem !important; } } @media (min-width: 18.75em) { .au-u-padding-bottom-tiny\@tiny { padding-bottom: 0.6rem !important; } } @media (min-width: 31.25em) { .au-u-padding-bottom-tiny\@xsmall { padding-bottom: 0.6rem !important; } } @media (min-width: 47.9375em) { .au-u-padding-bottom-tiny\@small { padding-bottom: 0.6rem !important; } } @media (min-width: 63.9375em) { .au-u-padding-bottom-tiny\@medium { padding-bottom: 0.6rem !important; } } @media (min-width: 100em) { .au-u-padding-bottom-tiny\@large { padding-bottom: 0.6rem !important; } } @media (min-width: 18.75em) { .au-u-padding-bottom-small\@tiny { padding-bottom: 1.2rem !important; } } @media (min-width: 31.25em) { .au-u-padding-bottom-small\@xsmall { padding-bottom: 1.2rem !important; } } @media (min-width: 47.9375em) { .au-u-padding-bottom-small\@small { padding-bottom: 1.2rem !important; } } @media (min-width: 63.9375em) { .au-u-padding-bottom-small\@medium { padding-bottom: 1.2rem !important; } } @media (min-width: 100em) { .au-u-padding-bottom-small\@large { padding-bottom: 1.2rem !important; } } @media (min-width: 18.75em) { .au-u-padding-bottom-large\@tiny { padding-bottom: 4.8rem !important; } } @media (min-width: 31.25em) { .au-u-padding-bottom-large\@xsmall { padding-bottom: 4.8rem !important; } } @media (min-width: 47.9375em) { .au-u-padding-bottom-large\@small { padding-bottom: 4.8rem !important; } } @media (min-width: 63.9375em) { .au-u-padding-bottom-large\@medium { padding-bottom: 4.8rem !important; } } @media (min-width: 100em) { .au-u-padding-bottom-large\@large { padding-bottom: 4.8rem !important; } } @media (min-width: 18.75em) { .au-u-padding-bottom-huge\@tiny { padding-bottom: 9.6rem !important; } } @media (min-width: 31.25em) { .au-u-padding-bottom-huge\@xsmall { padding-bottom: 9.6rem !important; } } @media (min-width: 47.9375em) { .au-u-padding-bottom-huge\@small { padding-bottom: 9.6rem !important; } } @media (min-width: 63.9375em) { .au-u-padding-bottom-huge\@medium { padding-bottom: 9.6rem !important; } } @media (min-width: 100em) { .au-u-padding-bottom-huge\@large { padding-bottom: 9.6rem !important; } } @media (min-width: 18.75em) { .au-u-padding-bottom-none\@tiny { padding-bottom: 0 !important; } } @media (min-width: 31.25em) { .au-u-padding-bottom-none\@xsmall { padding-bottom: 0 !important; } } @media (min-width: 47.9375em) { .au-u-padding-bottom-none\@small { padding-bottom: 0 !important; } } @media (min-width: 63.9375em) { .au-u-padding-bottom-none\@medium { padding-bottom: 0 !important; } } @media (min-width: 100em) { .au-u-padding-bottom-none\@large { padding-bottom: 0 !important; } } @media (min-width: 18.75em) { .au-u-padding-left\@tiny { padding-left: 2.4rem !important; } } @media (min-width: 31.25em) { .au-u-padding-left\@xsmall { padding-left: 2.4rem !important; } } @media (min-width: 47.9375em) { .au-u-padding-left\@small { padding-left: 2.4rem !important; } } @media (min-width: 63.9375em) { .au-u-padding-left\@medium { padding-left: 2.4rem !important; } } @media (min-width: 100em) { .au-u-padding-left\@large { padding-left: 2.4rem !important; } } @media (min-width: 18.75em) { .au-u-padding-left-tiny\@tiny { padding-left: 0.6rem !important; } } @media (min-width: 31.25em) { .au-u-padding-left-tiny\@xsmall { padding-left: 0.6rem !important; } } @media (min-width: 47.9375em) { .au-u-padding-left-tiny\@small { padding-left: 0.6rem !important; } } @media (min-width: 63.9375em) { .au-u-padding-left-tiny\@medium { padding-left: 0.6rem !important; } } @media (min-width: 100em) { .au-u-padding-left-tiny\@large { padding-left: 0.6rem !important; } } @media (min-width: 18.75em) { .au-u-padding-left-small\@tiny { padding-left: 1.2rem !important; } } @media (min-width: 31.25em) { .au-u-padding-left-small\@xsmall { padding-left: 1.2rem !important; } } @media (min-width: 47.9375em) { .au-u-padding-left-small\@small { padding-left: 1.2rem !important; } } @media (min-width: 63.9375em) { .au-u-padding-left-small\@medium { padding-left: 1.2rem !important; } } @media (min-width: 100em) { .au-u-padding-left-small\@large { padding-left: 1.2rem !important; } } @media (min-width: 18.75em) { .au-u-padding-left-large\@tiny { padding-left: 4.8rem !important; } } @media (min-width: 31.25em) { .au-u-padding-left-large\@xsmall { padding-left: 4.8rem !important; } } @media (min-width: 47.9375em) { .au-u-padding-left-large\@small { padding-left: 4.8rem !important; } } @media (min-width: 63.9375em) { .au-u-padding-left-large\@medium { padding-left: 4.8rem !important; } } @media (min-width: 100em) { .au-u-padding-left-large\@large { padding-left: 4.8rem !important; } } @media (min-width: 18.75em) { .au-u-padding-left-huge\@tiny { padding-left: 9.6rem !important; } } @media (min-width: 31.25em) { .au-u-padding-left-huge\@xsmall { padding-left: 9.6rem !important; } } @media (min-width: 47.9375em) { .au-u-padding-left-huge\@small { padding-left: 9.6rem !important; } } @media (min-width: 63.9375em) { .au-u-padding-left-huge\@medium { padding-left: 9.6rem !important; } } @media (min-width: 100em) { .au-u-padding-left-huge\@large { padding-left: 9.6rem !important; } } @media (min-width: 18.75em) { .au-u-padding-left-none\@tiny { padding-left: 0 !important; } } @media (min-width: 31.25em) { .au-u-padding-left-none\@xsmall { padding-left: 0 !important; } } @media (min-width: 47.9375em) { .au-u-padding-left-none\@small { padding-left: 0 !important; } } @media (min-width: 63.9375em) { .au-u-padding-left-none\@medium { padding-left: 0 !important; } } @media (min-width: 100em) { .au-u-padding-left-none\@large { padding-left: 0 !important; } } @media (min-width: 18.75em) { .au-u-margin\@tiny { margin: 2.4rem !important; } } @media (min-width: 31.25em) { .au-u-margin\@xsmall { margin: 2.4rem !important; } } @media (min-width: 47.9375em) { .au-u-margin\@small { margin: 2.4rem !important; } } @media (min-width: 63.9375em) { .au-u-margin\@medium { margin: 2.4rem !important; } } @media (min-width: 100em) { .au-u-margin\@large { margin: 2.4rem !important; } } @media (min-width: 18.75em) { .au-u-margin-tiny\@tiny { margin: 0.6rem !important; } } @media (min-width: 31.25em) { .au-u-margin-tiny\@xsmall { margin: 0.6rem !important; } } @media (min-width: 47.9375em) { .au-u-margin-tiny\@small { margin: 0.6rem !important; } } @media (min-width: 63.9375em) { .au-u-margin-tiny\@medium { margin: 0.6rem !important; } } @media (min-width: 100em) { .au-u-margin-tiny\@large { margin: 0.6rem !important; } } @media (min-width: 18.75em) { .au-u-margin-small\@tiny { margin: 1.2rem !important; } } @media (min-width: 31.25em) { .au-u-margin-small\@xsmall { margin: 1.2rem !important; } } @media (min-width: 47.9375em) { .au-u-margin-small\@small { margin: 1.2rem !important; } } @media (min-width: 63.9375em) { .au-u-margin-small\@medium { margin: 1.2rem !important; } } @media (min-width: 100em) { .au-u-margin-small\@large { margin: 1.2rem !important; } } @media (min-width: 18.75em) { .au-u-margin-large\@tiny { margin: 4.8rem !important; } } @media (min-width: 31.25em) { .au-u-margin-large\@xsmall { margin: 4.8rem !important; } } @media (min-width: 47.9375em) { .au-u-margin-large\@small { margin: 4.8rem !important; } } @media (min-width: 63.9375em) { .au-u-margin-large\@medium { margin: 4.8rem !important; } } @media (min-width: 100em) { .au-u-margin-large\@large { margin: 4.8rem !important; } } @media (min-width: 18.75em) { .au-u-margin-huge\@tiny { margin: 9.6rem !important; } } @media (min-width: 31.25em) { .au-u-margin-huge\@xsmall { margin: 9.6rem !important; } } @media (min-width: 47.9375em) { .au-u-margin-huge\@small { margin: 9.6rem !important; } } @media (min-width: 63.9375em) { .au-u-margin-huge\@medium { margin: 9.6rem !important; } } @media (min-width: 100em) { .au-u-margin-huge\@large { margin: 9.6rem !important; } } @media (min-width: 18.75em) { .au-u-margin-none\@tiny { margin: 0 !important; } } @media (min-width: 31.25em) { .au-u-margin-none\@xsmall { margin: 0 !important; } } @media (min-width: 47.9375em) { .au-u-margin-none\@small { margin: 0 !important; } } @media (min-width: 63.9375em) { .au-u-margin-none\@medium { margin: 0 !important; } } @media (min-width: 100em) { .au-u-margin-none\@large { margin: 0 !important; } } @media (min-width: 18.75em) { .au-u-margin-top\@tiny { margin-top: 2.4rem !important; } } @media (min-width: 31.25em) { .au-u-margin-top\@xsmall { margin-top: 2.4rem !important; } } @media (min-width: 47.9375em) { .au-u-margin-top\@small { margin-top: 2.4rem !important; } } @media (min-width: 63.9375em) { .au-u-margin-top\@medium { margin-top: 2.4rem !important; } } @media (min-width: 100em) { .au-u-margin-top\@large { margin-top: 2.4rem !important; } } @media (min-width: 18.75em) { .au-u-margin-top-tiny\@tiny { margin-top: 0.6rem !important; } } @media (min-width: 31.25em) { .au-u-margin-top-tiny\@xsmall { margin-top: 0.6rem !important; } } @media (min-width: 47.9375em) { .au-u-margin-top-tiny\@small { margin-top: 0.6rem !important; } } @media (min-width: 63.9375em) { .au-u-margin-top-tiny\@medium { margin-top: 0.6rem !important; } } @media (min-width: 100em) { .au-u-margin-top-tiny\@large { margin-top: 0.6rem !important; } } @media (min-width: 18.75em) { .au-u-margin-top-small\@tiny { margin-top: 1.2rem !important; } } @media (min-width: 31.25em) { .au-u-margin-top-small\@xsmall { margin-top: 1.2rem !important; } } @media (min-width: 47.9375em) { .au-u-margin-top-small\@small { margin-top: 1.2rem !important; } } @media (min-width: 63.9375em) { .au-u-margin-top-small\@medium { margin-top: 1.2rem !important; } } @media (min-width: 100em) { .au-u-margin-top-small\@large { margin-top: 1.2rem !important; } } @media (min-width: 18.75em) { .au-u-margin-top-large\@tiny { margin-top: 4.8rem !important; } } @media (min-width: 31.25em) { .au-u-margin-top-large\@xsmall { margin-top: 4.8rem !important; } } @media (min-width: 47.9375em) { .au-u-margin-top-large\@small { margin-top: 4.8rem !important; } } @media (min-width: 63.9375em) { .au-u-margin-top-large\@medium { margin-top: 4.8rem !important; } } @media (min-width: 100em) { .au-u-margin-top-large\@large { margin-top: 4.8rem !important; } } @media (min-width: 18.75em) { .au-u-margin-top-huge\@tiny { margin-top: 9.6rem !important; } } @media (min-width: 31.25em) { .au-u-margin-top-huge\@xsmall { margin-top: 9.6rem !important; } } @media (min-width: 47.9375em) { .au-u-margin-top-huge\@small { margin-top: 9.6rem !important; } } @media (min-width: 63.9375em) { .au-u-margin-top-huge\@medium { margin-top: 9.6rem !important; } } @media (min-width: 100em) { .au-u-margin-top-huge\@large { margin-top: 9.6rem !important; } } @media (min-width: 18.75em) { .au-u-margin-top-none\@tiny { margin-top: 0 !important; } } @media (min-width: 31.25em) { .au-u-margin-top-none\@xsmall { margin-top: 0 !important; } } @media (min-width: 47.9375em) { .au-u-margin-top-none\@small { margin-top: 0 !important; } } @media (min-width: 63.9375em) { .au-u-margin-top-none\@medium { margin-top: 0 !important; } } @media (min-width: 100em) { .au-u-margin-top-none\@large { margin-top: 0 !important; } } @media (min-width: 18.75em) { .au-u-margin-right\@tiny { margin-right: 2.4rem !important; } } @media (min-width: 31.25em) { .au-u-margin-right\@xsmall { margin-right: 2.4rem !important; } } @media (min-width: 47.9375em) { .au-u-margin-right\@small { margin-right: 2.4rem !important; } } @media (min-width: 63.9375em) { .au-u-margin-right\@medium { margin-right: 2.4rem !important; } } @media (min-width: 100em) { .au-u-margin-right\@large { margin-right: 2.4rem !important; } } @media (min-width: 18.75em) { .au-u-margin-right-tiny\@tiny { margin-right: 0.6rem !important; } } @media (min-width: 31.25em) { .au-u-margin-right-tiny\@xsmall { margin-right: 0.6rem !important; } } @media (min-width: 47.9375em) { .au-u-margin-right-tiny\@small { margin-right: 0.6rem !important; } } @media (min-width: 63.9375em) { .au-u-margin-right-tiny\@medium { margin-right: 0.6rem !important; } } @media (min-width: 100em) { .au-u-margin-right-tiny\@large { margin-right: 0.6rem !important; } } @media (min-width: 18.75em) { .au-u-margin-right-small\@tiny { margin-right: 1.2rem !important; } } @media (min-width: 31.25em) { .au-u-margin-right-small\@xsmall { margin-right: 1.2rem !important; } } @media (min-width: 47.9375em) { .au-u-margin-right-small\@small { margin-right: 1.2rem !important; } } @media (min-width: 63.9375em) { .au-u-margin-right-small\@medium { margin-right: 1.2rem !important; } } @media (min-width: 100em) { .au-u-margin-right-small\@large { margin-right: 1.2rem !important; } } @media (min-width: 18.75em) { .au-u-margin-right-large\@tiny { margin-right: 4.8rem !important; } } @media (min-width: 31.25em) { .au-u-margin-right-large\@xsmall { margin-right: 4.8rem !important; } } @media (min-width: 47.9375em) { .au-u-margin-right-large\@small { margin-right: 4.8rem !important; } } @media (min-width: 63.9375em) { .au-u-margin-right-large\@medium { margin-right: 4.8rem !important; } } @media (min-width: 100em) { .au-u-margin-right-large\@large { margin-right: 4.8rem !important; } } @media (min-width: 18.75em) { .au-u-margin-right-huge\@tiny { margin-right: 9.6rem !important; } } @media (min-width: 31.25em) { .au-u-margin-right-huge\@xsmall { margin-right: 9.6rem !important; } } @media (min-width: 47.9375em) { .au-u-margin-right-huge\@small { margin-right: 9.6rem !important; } } @media (min-width: 63.9375em) { .au-u-margin-right-huge\@medium { margin-right: 9.6rem !important; } } @media (min-width: 100em) { .au-u-margin-right-huge\@large { margin-right: 9.6rem !important; } } @media (min-width: 18.75em) { .au-u-margin-right-none\@tiny { margin-right: 0 !important; } } @media (min-width: 31.25em) { .au-u-margin-right-none\@xsmall { margin-right: 0 !important; } } @media (min-width: 47.9375em) { .au-u-margin-right-none\@small { margin-right: 0 !important; } } @media (min-width: 63.9375em) { .au-u-margin-right-none\@medium { margin-right: 0 !important; } } @media (min-width: 100em) { .au-u-margin-right-none\@large { margin-right: 0 !important; } } @media (min-width: 18.75em) { .au-u-margin-bottom\@tiny { margin-bottom: 2.4rem !important; } } @media (min-width: 31.25em) { .au-u-margin-bottom\@xsmall { margin-bottom: 2.4rem !important; } } @media (min-width: 47.9375em) { .au-u-margin-bottom\@small { margin-bottom: 2.4rem !important; } } @media (min-width: 63.9375em) { .au-u-margin-bottom\@medium { margin-bottom: 2.4rem !important; } } @media (min-width: 100em) { .au-u-margin-bottom\@large { margin-bottom: 2.4rem !important; } } @media (min-width: 18.75em) { .au-u-margin-bottom-tiny\@tiny { margin-bottom: 0.6rem !important; } } @media (min-width: 31.25em) { .au-u-margin-bottom-tiny\@xsmall { margin-bottom: 0.6rem !important; } } @media (min-width: 47.9375em) { .au-u-margin-bottom-tiny\@small { margin-bottom: 0.6rem !important; } } @media (min-width: 63.9375em) { .au-u-margin-bottom-tiny\@medium { margin-bottom: 0.6rem !important; } } @media (min-width: 100em) { .au-u-margin-bottom-tiny\@large { margin-bottom: 0.6rem !important; } } @media (min-width: 18.75em) { .au-u-margin-bottom-small\@tiny { margin-bottom: 1.2rem !important; } } @media (min-width: 31.25em) { .au-u-margin-bottom-small\@xsmall { margin-bottom: 1.2rem !important; } } @media (min-width: 47.9375em) { .au-u-margin-bottom-small\@small { margin-bottom: 1.2rem !important; } } @media (min-width: 63.9375em) { .au-u-margin-bottom-small\@medium { margin-bottom: 1.2rem !important; } } @media (min-width: 100em) { .au-u-margin-bottom-small\@large { margin-bottom: 1.2rem !important; } } @media (min-width: 18.75em) { .au-u-margin-bottom-large\@tiny { margin-bottom: 4.8rem !important; } } @media (min-width: 31.25em) { .au-u-margin-bottom-large\@xsmall { margin-bottom: 4.8rem !important; } } @media (min-width: 47.9375em) { .au-u-margin-bottom-large\@small { margin-bottom: 4.8rem !important; } } @media (min-width: 63.9375em) { .au-u-margin-bottom-large\@medium { margin-bottom: 4.8rem !important; } } @media (min-width: 100em) { .au-u-margin-bottom-large\@large { margin-bottom: 4.8rem !important; } } @media (min-width: 18.75em) { .au-u-margin-bottom-huge\@tiny { margin-bottom: 9.6rem !important; } } @media (min-width: 31.25em) { .au-u-margin-bottom-huge\@xsmall { margin-bottom: 9.6rem !important; } } @media (min-width: 47.9375em) { .au-u-margin-bottom-huge\@small { margin-bottom: 9.6rem !important; } } @media (min-width: 63.9375em) { .au-u-margin-bottom-huge\@medium { margin-bottom: 9.6rem !important; } } @media (min-width: 100em) { .au-u-margin-bottom-huge\@large { margin-bottom: 9.6rem !important; } } @media (min-width: 18.75em) { .au-u-margin-bottom-none\@tiny { margin-bottom: 0 !important; } } @media (min-width: 31.25em) { .au-u-margin-bottom-none\@xsmall { margin-bottom: 0 !important; } } @media (min-width: 47.9375em) { .au-u-margin-bottom-none\@small { margin-bottom: 0 !important; } } @media (min-width: 63.9375em) { .au-u-margin-bottom-none\@medium { margin-bottom: 0 !important; } } @media (min-width: 100em) { .au-u-margin-bottom-none\@large { margin-bottom: 0 !important; } } @media (min-width: 18.75em) { .au-u-margin-left\@tiny { margin-left: 2.4rem !important; } } @media (min-width: 31.25em) { .au-u-margin-left\@xsmall { margin-left: 2.4rem !important; } } @media (min-width: 47.9375em) { .au-u-margin-left\@small { margin-left: 2.4rem !important; } } @media (min-width: 63.9375em) { .au-u-margin-left\@medium { margin-left: 2.4rem !important; } } @media (min-width: 100em) { .au-u-margin-left\@large { margin-left: 2.4rem !important; } } @media (min-width: 18.75em) { .au-u-margin-left-tiny\@tiny { margin-left: 0.6rem !important; } } @media (min-width: 31.25em) { .au-u-margin-left-tiny\@xsmall { margin-left: 0.6rem !important; } } @media (min-width: 47.9375em) { .au-u-margin-left-tiny\@small { margin-left: 0.6rem !important; } } @media (min-width: 63.9375em) { .au-u-margin-left-tiny\@medium { margin-left: 0.6rem !important; } } @media (min-width: 100em) { .au-u-margin-left-tiny\@large { margin-left: 0.6rem !important; } } @media (min-width: 18.75em) { .au-u-margin-left-small\@tiny { margin-left: 1.2rem !important; } } @media (min-width: 31.25em) { .au-u-margin-left-small\@xsmall { margin-left: 1.2rem !important; } } @media (min-width: 47.9375em) { .au-u-margin-left-small\@small { margin-left: 1.2rem !important; } } @media (min-width: 63.9375em) { .au-u-margin-left-small\@medium { margin-left: 1.2rem !important; } } @media (min-width: 100em) { .au-u-margin-left-small\@large { margin-left: 1.2rem !important; } } @media (min-width: 18.75em) { .au-u-margin-left-large\@tiny { margin-left: 4.8rem !important; } } @media (min-width: 31.25em) { .au-u-margin-left-large\@xsmall { margin-left: 4.8rem !important; } } @media (min-width: 47.9375em) { .au-u-margin-left-large\@small { margin-left: 4.8rem !important; } } @media (min-width: 63.9375em) { .au-u-margin-left-large\@medium { margin-left: 4.8rem !important; } } @media (min-width: 100em) { .au-u-margin-left-large\@large { margin-left: 4.8rem !important; } } @media (min-width: 18.75em) { .au-u-margin-left-huge\@tiny { margin-left: 9.6rem !important; } } @media (min-width: 31.25em) { .au-u-margin-left-huge\@xsmall { margin-left: 9.6rem !important; } } @media (min-width: 47.9375em) { .au-u-margin-left-huge\@small { margin-left: 9.6rem !important; } } @media (min-width: 63.9375em) { .au-u-margin-left-huge\@medium { margin-left: 9.6rem !important; } } @media (min-width: 100em) { .au-u-margin-left-huge\@large { margin-left: 9.6rem !important; } } @media (min-width: 18.75em) { .au-u-margin-left-none\@tiny { margin-left: 0 !important; } } @media (min-width: 31.25em) { .au-u-margin-left-none\@xsmall { margin-left: 0 !important; } } @media (min-width: 47.9375em) { .au-u-margin-left-none\@small { margin-left: 0 !important; } } @media (min-width: 63.9375em) { .au-u-margin-left-none\@medium { margin-left: 0 !important; } } @media (min-width: 100em) { .au-u-margin-left-none\@large { margin-left: 0 !important; } } /* stylelint-enable max-nesting-depth */ /* ========================================================================== #VISIBLE ========================================================================== */ /** * Show visually and on screen readers starting from certain breakpoints, but hide visually and for screen readers on others. */ @media (max-width: 18.74em) { .au-u-visible-from\@tiny { display: none !important; } } @media (max-width: 31.24em) { .au-u-visible-from\@xsmall { display: none !important; } } @media (max-width: 47.9275em) { .au-u-visible-from\@small { display: none !important; } } @media (max-width: 63.9275em) { .au-u-visible-from\@medium { display: none !important; } } @media (max-width: 99.99em) { .au-u-visible-from\@large { display: none !important; } } /* ========================================================================== #WIDTHS ========================================================================== */ /** * Appuniversum generates a series of utility classes that give a fluid width to * whichever element they’re applied, e.g.: * * * * These classes are most commonly used in conjunction with our layout system, * e.g.: * *
* * By default, Appuniversum will also generate responsive variants of each of these * classes by using your Sass MQ configuration, e.g.: * *
* * Optionally, Appuniversum can generate offset classes which can push and pull * elements left and right by a specified amount, e.g.: * *
* * This is useful for making very granular changes to the rendered order of * items in a layout. * * N.B. This option is turned off by default. */ /* Variables ========================================================================== */ /* Generate utility classes ========================================================================== */ /* Generate utility classes ========================================================================== */ /** * A series of width helper classes that you can use to size things like grid * systems. Classes take a fraction-like format (e.g. `.au-u-2-3`). Use these in * your markup: * *
* * The following will generate widths helper classes based on the fractions * defined in the `$au-fractions` list. */ .au-u-1-1 { width: 100% !important; } .au-u-1-2 { width: 50% !important; } .au-u-2-2 { width: 100% !important; } .au-u-1-3 { width: 33.3333333333% !important; } .au-u-2-3 { width: 66.6666666667% !important; } .au-u-3-3 { width: 100% !important; } .au-u-1-4 { width: 25% !important; } .au-u-2-4 { width: 50% !important; } .au-u-3-4 { width: 75% !important; } .au-u-4-4 { width: 100% !important; } .au-u-1-5 { width: 20% !important; } .au-u-2-5 { width: 40% !important; } .au-u-3-5 { width: 60% !important; } .au-u-4-5 { width: 80% !important; } .au-u-5-5 { width: 100% !important; } .au-u-1-6 { width: 16.6666666667% !important; } .au-u-2-6 { width: 33.3333333333% !important; } .au-u-3-6 { width: 50% !important; } .au-u-4-6 { width: 66.6666666667% !important; } .au-u-5-6 { width: 83.3333333333% !important; } .au-u-6-6 { width: 100% !important; } /** * If we’re using Sass-MQ, automatically generate grid system(s) for each of our * defined breakpoints, and give them a Responsive Suffix, e.g.: * *
*/ @media (min-width: 18.75em) { .au-u-1-1\@tiny { width: 100% !important; } .au-u-1-2\@tiny { width: 50% !important; } .au-u-2-2\@tiny { width: 100% !important; } .au-u-1-3\@tiny { width: 33.3333333333% !important; } .au-u-2-3\@tiny { width: 66.6666666667% !important; } .au-u-3-3\@tiny { width: 100% !important; } .au-u-1-4\@tiny { width: 25% !important; } .au-u-2-4\@tiny { width: 50% !important; } .au-u-3-4\@tiny { width: 75% !important; } .au-u-4-4\@tiny { width: 100% !important; } .au-u-1-5\@tiny { width: 20% !important; } .au-u-2-5\@tiny { width: 40% !important; } .au-u-3-5\@tiny { width: 60% !important; } .au-u-4-5\@tiny { width: 80% !important; } .au-u-5-5\@tiny { width: 100% !important; } .au-u-1-6\@tiny { width: 16.6666666667% !important; } .au-u-2-6\@tiny { width: 33.3333333333% !important; } .au-u-3-6\@tiny { width: 50% !important; } .au-u-4-6\@tiny { width: 66.6666666667% !important; } .au-u-5-6\@tiny { width: 83.3333333333% !important; } .au-u-6-6\@tiny { width: 100% !important; } } @media (min-width: 31.25em) { .au-u-1-1\@xsmall { width: 100% !important; } .au-u-1-2\@xsmall { width: 50% !important; } .au-u-2-2\@xsmall { width: 100% !important; } .au-u-1-3\@xsmall { width: 33.3333333333% !important; } .au-u-2-3\@xsmall { width: 66.6666666667% !important; } .au-u-3-3\@xsmall { width: 100% !important; } .au-u-1-4\@xsmall { width: 25% !important; } .au-u-2-4\@xsmall { width: 50% !important; } .au-u-3-4\@xsmall { width: 75% !important; } .au-u-4-4\@xsmall { width: 100% !important; } .au-u-1-5\@xsmall { width: 20% !important; } .au-u-2-5\@xsmall { width: 40% !important; } .au-u-3-5\@xsmall { width: 60% !important; } .au-u-4-5\@xsmall { width: 80% !important; } .au-u-5-5\@xsmall { width: 100% !important; } .au-u-1-6\@xsmall { width: 16.6666666667% !important; } .au-u-2-6\@xsmall { width: 33.3333333333% !important; } .au-u-3-6\@xsmall { width: 50% !important; } .au-u-4-6\@xsmall { width: 66.6666666667% !important; } .au-u-5-6\@xsmall { width: 83.3333333333% !important; } .au-u-6-6\@xsmall { width: 100% !important; } } @media (min-width: 47.9375em) { .au-u-1-1\@small { width: 100% !important; } .au-u-1-2\@small { width: 50% !important; } .au-u-2-2\@small { width: 100% !important; } .au-u-1-3\@small { width: 33.3333333333% !important; } .au-u-2-3\@small { width: 66.6666666667% !important; } .au-u-3-3\@small { width: 100% !important; } .au-u-1-4\@small { width: 25% !important; } .au-u-2-4\@small { width: 50% !important; } .au-u-3-4\@small { width: 75% !important; } .au-u-4-4\@small { width: 100% !important; } .au-u-1-5\@small { width: 20% !important; } .au-u-2-5\@small { width: 40% !important; } .au-u-3-5\@small { width: 60% !important; } .au-u-4-5\@small { width: 80% !important; } .au-u-5-5\@small { width: 100% !important; } .au-u-1-6\@small { width: 16.6666666667% !important; } .au-u-2-6\@small { width: 33.3333333333% !important; } .au-u-3-6\@small { width: 50% !important; } .au-u-4-6\@small { width: 66.6666666667% !important; } .au-u-5-6\@small { width: 83.3333333333% !important; } .au-u-6-6\@small { width: 100% !important; } } @media (min-width: 63.9375em) { .au-u-1-1\@medium { width: 100% !important; } .au-u-1-2\@medium { width: 50% !important; } .au-u-2-2\@medium { width: 100% !important; } .au-u-1-3\@medium { width: 33.3333333333% !important; } .au-u-2-3\@medium { width: 66.6666666667% !important; } .au-u-3-3\@medium { width: 100% !important; } .au-u-1-4\@medium { width: 25% !important; } .au-u-2-4\@medium { width: 50% !important; } .au-u-3-4\@medium { width: 75% !important; } .au-u-4-4\@medium { width: 100% !important; } .au-u-1-5\@medium { width: 20% !important; } .au-u-2-5\@medium { width: 40% !important; } .au-u-3-5\@medium { width: 60% !important; } .au-u-4-5\@medium { width: 80% !important; } .au-u-5-5\@medium { width: 100% !important; } .au-u-1-6\@medium { width: 16.6666666667% !important; } .au-u-2-6\@medium { width: 33.3333333333% !important; } .au-u-3-6\@medium { width: 50% !important; } .au-u-4-6\@medium { width: 66.6666666667% !important; } .au-u-5-6\@medium { width: 83.3333333333% !important; } .au-u-6-6\@medium { width: 100% !important; } } @media (min-width: 100em) { .au-u-1-1\@large { width: 100% !important; } .au-u-1-2\@large { width: 50% !important; } .au-u-2-2\@large { width: 100% !important; } .au-u-1-3\@large { width: 33.3333333333% !important; } .au-u-2-3\@large { width: 66.6666666667% !important; } .au-u-3-3\@large { width: 100% !important; } .au-u-1-4\@large { width: 25% !important; } .au-u-2-4\@large { width: 50% !important; } .au-u-3-4\@large { width: 75% !important; } .au-u-4-4\@large { width: 100% !important; } .au-u-1-5\@large { width: 20% !important; } .au-u-2-5\@large { width: 40% !important; } .au-u-3-5\@large { width: 60% !important; } .au-u-4-5\@large { width: 80% !important; } .au-u-5-5\@large { width: 100% !important; } .au-u-1-6\@large { width: 16.6666666667% !important; } .au-u-2-6\@large { width: 33.3333333333% !important; } .au-u-3-6\@large { width: 50% !important; } .au-u-4-6\@large { width: 66.6666666667% !important; } .au-u-5-6\@large { width: 83.3333333333% !important; } .au-u-6-6\@large { width: 100% !important; } } /* ================================== #SAY CUSTOM COMPONENTS ================================== */ /* ================================== #SAY CUSTOM COMPONENTS ================================== */ /* ================================== #TOOLS Project settings and variables File namespace: _t-... ================================== */ /* ======================================================================== // #FONT-SIZE - DEPRECATED (set font size in css) // ======================================================================== */ /* ================================== #VARIABLES Project settings and variables File namespace: _s-... ================================== */ :root { --au-white: #ffffff; --au-gray-100: #f7f9fc; --au-gray-200: #e8ebee; --au-gray-300: #cfd5dd; --au-gray-400: #afb9c5; --au-gray-500: #8695a8; --au-gray-600: #7f8b99; --au-gray-700: #687483; --au-gray-800: #4f5864; --au-gray-900: #333332; --au-gray-1000: #000000; --au-blue-100: #f4f7fb; --au-blue-200: #e4ebf5; --au-blue-300: #b2ccef; --au-blue-500: #5990de; --au-blue-600: #3779d7; --au-blue-700: #0055cc; --au-blue-800: #004ab2; --au-blue-900: #003b8e; --au-yellow-100: #fff9d5; --au-yellow-200: #fff29b; --au-yellow-300: #ffe615; --au-yellow-400: #ffc515; --au-yellow-600: #7f6e3b; --au-yellow-900: #473d21; --au-orange-200: #fff9e8; --au-orange-300: #ffeeb9; --au-orange-400: #ffe49c; --au-orange-500: #ffa10a; --au-orange-600: #d07b06; --au-orange-700: #9f5804; --au-red-100: #fdf7f7; --au-red-200: #fbeded; --au-red-300: #f4c8c9; --au-red-400: #f1aeae; --au-red-500: #e77474; --au-red-600: #d2373c; --au-red-700: #aa2729; --au-red-900: #470000; --au-green-100: #f8fcf9; --au-green-200: #ecf6ee; --au-green-300: #c5e5cc; --au-green-400: #b1dcbb; --au-green-500: #009e47; --au-green-700: #007a37; --au-green-900: #323d08; --vl-white: #ffffff; --vl-grey-05: #f7f9fc; --vl-grey-10: #e8ebee; --vl-grey-20: #cfd5dd; --vl-grey-50: #8695a8; --vl-grey-70: #687483; --vl-grey-100: #333332; --vl-grey-110: #000000; --vl-yellow-100: #ffe615; --vl-blue-15: #e4ebf5; --vl-blue-30: #b2ccef; --vl-blue-65: #5990de; --vl-blue-100: #0055cc; --vl-blue-110: #003b8e; --vl-green-10: #ecf6ee; --vl-green-30: #c5e5cc; --vl-green-40: #b1dcbb; --vl-green-100: #009e47; --vl-green-130: #007a37; --vl-red-10: #fbeded; --vl-red-30: #f4c8c9; --vl-red-40: #f1aeae; --vl-red-100: #d2373c; --vl-red-130: #aa2729; --vl-orange-10: #fff9e8; --vl-orange-30: #ffeeb9; --vl-orange-40: #ffe49c; --vl-orange-100: #ffa10a; --vl-orange-110: #d07b06; --vl-orange-120: #9f5804; --vl-lime-100: #a3cc00; --vl-lime-120: #6f8b00; --vl-brick-100: #d53d5e; --vl-brick-120: #85273b; --vl-chocolate-100: #d26e25; --vl-chocolate-120: #904e1d; --vl-picton-100: #32b1e9; --vl-picton-120: #16465b; --au-page-bg: #ffffff; --au-select-text-color: #333332; --au-select-text-bg: #e4ebf5; --au-divider-color: #e8ebee; --au-outline-color: #5990de; --au-global-font-size: 1.5rem; --au-global-line-height: 1.5; --au-font: "flanders-sans", BlinkMacSystemFont, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --au-font-secondary: "flanders-serif"; --au-font-tertiary: courier, monospace; --au-light: 300; --au-regular: 400; --au-medium: 500; --au-bold: 700; --au-base: 1.5rem; --au-para: 1.8rem; --au-para-small: 1.6rem; --au-lead: 2.2rem; --au-lead-medium: 2rem; --au-lead-small: 1.8rem; --au-small: 1.4rem; --au-tiny: 1.3rem; --au-h-functional-small: 1.3rem; --au-h-functional: 1.5rem; --au-h6: 1.6rem; --au-h5: 1.8rem; --au-h4: 2rem; --au-h3-small: 2.2rem; --au-h3: 2.6rem; --au-h2-small: 2.6rem; --au-h2: 3.2rem; --au-h1-small: 3rem; --au-h1-medium: 4rem; --au-h1: 4.4rem; --au-icon-size: 1.3rem; --au-icon-size-medium: 1.6rem; --au-icon-size-large: 1.9rem; --au-radius: 0.3rem; --au-border: 0.2rem; --au-outline-border: 0.3rem; --au-outline-border-style: solid; --au-outline: #5990de 0.3rem solid; --au-outline-offset: 0.2rem; --au-outline-offset-negative: -0.3rem; --au-duration: 0.125s; --au-easing: cubic-bezier(0.19, 1, 0.22, 1); --au-transition: 0.125s cubic-bezier(0.19, 1, 0.22, 1); --au-z-index-alpha: 1; --au-z-index-beta: 2; --au-z-index-gamma: 3; } /* ================================== #SAY EDITOR STYLES ================================== */ /* Variables ========================================================================== */ /* Component ========================================================================== */ .say-editor { background-color: var(--au-white); padding: 2.4rem; height: 100%; overflow: auto; width: 100%; } .say-container--paper .say-editor { background-color: var(--au-gray-100); } @media (min-width: 63.9375em) { .say-container--paper.say-container--sidebar-left .say-editor { padding-left: 2.4rem; } .say-container--paper.say-container--sidebar-right .say-editor { padding-right: 30%; } } @media (min-width: 80em) { .say-container--paper.say-container--sidebar-left .say-editor { padding-left: 14.4rem; } .say-container--paper.say-container--sidebar-right .say-editor { padding-right: 30%; } } .say-editor__paper { position: relative; display: flex; flex-direction: column; width: 100%; min-height: calc(100vh + 2.4rem); } .say-editor__paper:focus { outline: none; } .say-container--paper .say-editor__paper { background-color: var(--au-white); box-shadow: 0 1px 3px rgba(33, 35, 38, 0.1), 0 4px 20px rgba(33, 35, 38, 0.035), 0 1px 1px rgba(33, 35, 38, 0.025); } .say-editor__paper--disabled { background-color: var(--au-gray-100); color: var(--au-gray-700); } .say-editor__inner { padding: 2.4rem; position: relative; white-space: break-spaces; word-wrap: break-word; overflow-wrap: break-word; flex: 1; } .say-editor__inner:focus { outline: 0; } .say-container:not(.say-container--paper) .say-editor__inner { max-width: 120ch; margin-left: auto; margin-right: auto; } /* ================================== #SAY CUSTOM COMPONENTS ================================== */ /* ================================== #SAY CONTAINER ================================== */ /* Component ========================================================================== */ .say-container { height: 100%; position: relative; display: flex; flex-direction: column; } .say-container.say-container--toolbar-bottom { flex-direction: column-reverse; } .say-container__main { position: relative; min-height: 0; flex-grow: 1; } .say-container__aside { position: absolute; bottom: 0; right: 1.2rem; max-width: 380px; max-height: 100%; overflow: auto; padding: 1.2rem 1.8rem; top: 0; } @media (min-width: 63.9375em) { .say-container__aside { width: 30%; max-width: 30%; padding: 2.4rem; } } @media (min-width: 80em) { .say-container__aside { width: calc(30% - 1.8rem); max-width: calc(30% - 1.8rem); } } /* ================================== #SAY CONTENT STYLES ================================== */ /* Variables ========================================================================== */ /* Component ========================================================================== */ .say-content, .say-content .say-bullet-list, .say-content .say-ordered-list, .say-content div { font-size: 1.5rem; line-height: var(--au-global-line-height); font-family: var(--au-font); font-weight: var(--au-regular); } .say-content span, .say-content .say-link { font-size: inherit; } .say-content [data-mark~=color]::selection { color: inherit; } .say-content h1.say-heading, .say-content .h1.say-heading { font-size: 4.4rem; line-height: 1.1; font-family: var(--au-font); font-weight: var(--au-medium); } .say-content h2.say-heading, .say-content .h2.say-heading { font-size: 3.2rem; line-height: 1.3; font-family: var(--au-font); font-weight: var(--au-medium); } .say-content h3.say-heading, .say-content .h3.say-heading { font-size: 2.6rem; line-height: 1.3; font-family: var(--au-font); font-weight: var(--au-medium); } .say-content h4.say-heading, .say-content .h4.say-heading { font-size: 2rem; line-height: var(--au-global-line-height); font-family: var(--au-font); font-weight: var(--au-medium); } .say-content h5.say-heading, .say-content .h5.say-heading { font-size: 1.8rem; line-height: var(--au-global-line-height); font-family: var(--au-font); font-weight: var(--au-medium); } .say-content h6.say-heading, .say-content .h6.say-heading { font-size: 1.6rem; line-height: var(--au-global-line-height); font-family: var(--au-font); font-weight: var(--au-medium); } .say-content .say-paragraph.small, .say-content .say-list-item.small { font-size: 1.5rem; line-height: var(--au-global-line-height); } .say-content .say-paragraph.smaller, .say-content .say-list-item.smaller { font-size: 1.4rem; line-height: 1.5; } .say-content .say-paragraph.smallest, .say-content .say-list-item.smallest { font-size: 1.2rem; line-height: 1.5; } .say-content .say-paragraph + *, .say-content .say-bullet-list + *, .say-content .say-ordered-list + *, .say-content .say-table + *, .say-content div + *, .say-content .say-heading + * { margin-top: 1.2rem; } .say-content .say-hidden + * { margin-top: 0; } .say-content [data-indentation-level="1"] { margin-left: 3rem; } .say-content [data-indentation-level="2"] { margin-left: 6rem; } .say-content [data-indentation-level="3"] { margin-left: 9rem; } .say-content [data-indentation-level="4"] { margin-left: 12rem; } .say-content .say-list-item > [data-indentation-level] { margin-left: 0; } .say-content .say-list-item .say-paragraph + *, .say-content .say-list-item div + *, .say-content .say-paragraph * + *, .say-content .say-paragraph + .say-hard-break, .say-content div + .say-hard-break, .say-content span + .say-hard-break, .say-content .say-bullet-list + .say-hard-break, .say-content .say-ordered-list + .say-hard-break, .say-content i + .say-hard-break, .say-content .say-hard-break + .say-hard-break { margin-top: 0; } .say-content .say-link { transition: color var(--au-transition), text-decoration var(--au-transition); font-weight: var(--au-regular); text-decoration-color: var(--au-blue-300); } .say-content .say-link, .say-content .say-link:visited { color: var(--au-blue-700); } .say-content .say-link:hover, .say-content .say-link:focus { color: var(--au-blue-600); text-decoration-color: var(--au-blue-300); } .say-content .say-link:focus { outline: var(--au-outline); outline-offset: 0.3rem; } .say-content .say-bullet-list, .say-content .say-ordered-list { padding-left: 3rem; } .say-content .say-bullet-list { list-style-type: initial; } .say-content .say-bullet-list .say-bullet-list .say-bullet-list .say-bullet-list .say-bullet-list .say-bullet-list .say-bullet-list .say-bullet-list .say-bullet-list .say-bullet-list .say-bullet-list .say-bullet-list .say-bullet-list .say-bullet-list .say-bullet-list .say-bullet-list .say-bullet-list .say-bullet-list { margin-left: 0; padding-left: 0; } .say-content .say-ordered-list { list-style-type: decimal; } .say-content .say-ordered-list > .say-list-item .say-ordered-list { list-style-type: inherit; } .say-content .say-ordered-list .say-ordered-list .say-ordered-list .say-ordered-list .say-ordered-list .say-ordered-list .say-ordered-list .say-ordered-list .say-ordered-list .say-ordered-list .say-ordered-list .say-ordered-list .say-ordered-list .say-ordered-list .say-ordered-list .say-ordered-list .say-ordered-list .say-ordered-list { margin-left: 0; padding-left: 0; } .say-content .say-bullet-list.article-list { padding-left: 0; } .say-content .say-bullet-list.article-list .say-list-item { margin-bottom: 1.5rem; list-style-type: unset; } .say-content .say-bullet-list > .say-list-item ul > li { list-style-type: circle; } .say-content .say-bullet-list > .say-list-item ul ul > li { list-style-type: square; } .say-content .say-bullet-list > .say-list-item ul ul ul > li { list-style-type: initial; } .say-content .say-bullet-list > .say-list-item ul ul ul ul > li { list-style-type: circle; } .say-content .say-bullet-list > .say-list-item ul ul ul ul ul > li { list-style-type: square; } .say-content .say-bullet-list > .say-list-item ul ul ul ul ul ul > li { list-style-type: initial; } .say-content .say-bullet-list > .say-list-item ul ul ul ul ul ul ul > li { list-style-type: circle; } .say-content .say-bullet-list > .say-list-item ul ul ul ul ul ul ul ul > li { list-style-type: square; } .say-content .say-bullet-list > .say-list-item ul ul ul ul ul ul ul ul ul > li { list-style-type: initial; } .say-content .say-bullet-list > .say-list-item ul ul ul ul ul ul ul ul ul ul > li { list-style-type: circle; } .say-content .say-bullet-list > .say-list-item ul ul ul ul ul ul ul ul ul ul ul > li { list-style-type: square; } .say-content .say-bullet-list > .say-list-item ul ul ul ul ul ul ul ul ul ul ul ul > li { list-style-type: initial; } .say-content .say-bullet-list > .say-list-item ul ul ul ul ul ul ul ul ul ul ul ul ul > li { list-style-type: circle; } .say-content .say-bullet-list > .say-list-item ul ul ul ul ul ul ul ul ul ul ul ul ul ul > li { list-style-type: square; } .say-content .say-bullet-list > .say-list-item ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul > li { list-style-type: initial; } .say-content .say-bullet-list > .say-list-item ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul > li { list-style-type: circle; } .say-content .say-bullet-list > .say-list-item ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul > li { list-style-type: circle; } .say-content .say-bullet-list > .say-list-item ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul > li { list-style-type: circle; } .say-content .say-horizontal-rule { margin: 0; margin-top: 2.4rem; margin-bottom: 2.4rem; border: 0; border-bottom: 3px solid var(--au-gray-200); } .say-content strong, .say-content b { font-weight: var(--au-bold); } .say-content em { font-style: italic; } .say-content i { display: inline-block; } .say-content sub { vertical-align: sub; font-size: smaller; } .say-content sup { vertical-align: super; font-size: smaller; } .say-content .data-table .say-table-header, .say-content .data-table .say-table-cell { font-size: 1.5rem; line-height: 1.5; } .say-content .data-table--lined.data-table--tight .say-table-header, .say-content .data-table--lined.data-table--tight .say-table-cell { font-size: 1.4rem; padding: 0.8rem; } .say-content .data-table--lined.data-table--tight .button--small { font-size: 1.3rem; font-weight: 400; } .say-content .data-table--lined.data-table--tight .button-group .button { margin-bottom: 0.5rem; } .say-content.ProseMirror-hideselection { caret-color: transparent; } .say-content.ProseMirror-hideselection *::selection { background: transparent; } .say-content.ProseMirror-hideselection .selectedCell { background-image: linear-gradient(0deg, var(--au-blue-200) 0%, var(--au-blue-200) 100%); background-blend-mode: multiply; } .say-content.say-selection-all { background-color: var(--au-blue-200); } /* ================================== #SAY TOOLBAR ================================== */ /* Variables ========================================================================== */ /* Component ========================================================================== */ .say-toolbar { font-size: 1.5rem; line-height: var(--au-global-line-height); display: flex; justify-content: flex-start; min-height: 44px; height: 44px; background-color: var(--au-gray-100); border-bottom: 1px solid var(--au-gray-300); } .say-container--toolbar-bottom .say-toolbar { border-bottom: 0; border-top: 1px solid tint(#ccd1d9, 30); } .say-toolbar .say-toolbar__main { display: flex; flex-grow: 1; flex-shrink: 1; } .say-toolbar .say-toolbar__side { display: flex; align-items: center; flex-shrink: 1; } .say-toolbar .say-toolbar__side .say-toolbar__group { border-left: 1px solid var(--au-gray-300); } .say-toolbar *[data-hidden=true] { display: none; } .say-toolbar__main-dropdown, .say-toolbar__side-dropdown { display: flex; justify-content: flex-start; min-height: 44px; border-radius: 0.6rem; padding: 0.1rem 0.6rem 0; background-color: var(--au-gray-100); z-index: 1; width: max-content; max-width: 100%; } .say-toolbar__main-dropdown { flex-wrap: wrap; } .say-toolbar__side-dropdown { flex-direction: column; } .say-toolbar img { max-width: inherit; height: 100%; } .say-toolbar__spacer { width: 100%; } .say-toolbar__divider { height: 44px; border-left: 1px solid var(--au-gray-300); } .say-toolbar__group { display: flex; height: 44px; padding-left: 0.1rem; padding-right: 0.1rem; flex-shrink: 0; align-items: center; } .say-toolbar__group + .say-toolbar__group { border-left: 1px solid var(--au-gray-300); } .say-toolbar__main-dropdown .say-toolbar__group + .say-toolbar__group, .say-toolbar__side-dropdown .say-toolbar__group + .say-toolbar__group { border-left: 0; } .say-toolbar__button { font-size: 1.5rem; line-height: 1; height: 44px; min-width: 44px; display: inline-flex; flex-direction: row; flex-shrink: 0; } .say-toolbar__button .main, .say-toolbar__button .options { appearance: none; outline: none; border: 0; justify-content: center; align-items: center; text-align: center; display: inline-flex; color: var(--au-gray-900); background-color: transparent; transition: color var(--au-transition); padding: 0; margin: 0; } .say-toolbar__button .main:hover, .say-toolbar__button .main:focus, .say-toolbar__button .options:hover, .say-toolbar__button .options:focus { background-color: var(--au-gray-300); } .say-toolbar__button .main:focus, .say-toolbar__button .options:focus { outline: var(--au-outline); outline-offset: -0.4rem; } .say-toolbar__button .main.is-active, .say-toolbar__button .options.is-active { color: var(--au-gray-900); background-color: var(--au-gray-300); box-shadow: inset 0 -0.3rem 0 0 var(--au-gray-900); } .say-toolbar__button .main:disabled, .say-toolbar__button .main.is-disabled, .say-toolbar__button .options:disabled, .say-toolbar__button .options.is-disabled { color: var(--au-gray-500); cursor: not-allowed; background-color: transparent; } .say-toolbar__button .main { flex: 6; } .say-toolbar__button .options { flex: 3; } .say-toolbar__button .options > .say-dropdown__button { min-width: 0; padding: 0; } .say-toolbar__button img { filter: invert(59%) sepia(12%) saturate(457%) hue-rotate(172deg) brightness(91%) contrast(85%); } .say-toolbar__button img:hover, .say-toolbar__button img:focus { filter: invert(43%) sepia(35%) saturate(180%) hue-rotate(173deg) brightness(97%) contrast(94%); } .say-rdfa-toggle { padding: 0 1.2rem; white-space: nowrap; } .say-toolbar__highlight-button .main .au-c-icon { border-bottom: 3px solid transparent; } .local-icon { pointer-events: none; } .say-toolbar__table-cell-background-button { --default-background-color: #ffff00; width: 19px; height: 19px; margin-top: -3px; background-color: var(--selected-background-color, var(--default-background-color)); border: 1px solid var(--au-gray-600); } .say-toolbar__toggle-switch__label { color: var(--au-gray-700); } /* ================================== #DROPDOWN ================================== */ /* Variables ========================================================================== */ /* Component ========================================================================== */ .say-dropdown { position: relative; display: inline-block; flex-shrink: 0; } .say-dropdown__button { font-size: 1.5rem; line-height: 1; appearance: none; outline: none; border: 0; display: inline-flex; justify-content: center; align-items: center; text-align: center; color: var(--au-gray-900); height: 44px; min-width: 44px; background-color: transparent; transition: color var(--au-transition); padding: 0.6rem; margin: 0; } .say-dropdown__button + .say-dropdown__button { border-left: 0.1rem solid var(--au-gray-300); } .say-dropdown__button:hover, .say-dropdown__button:focus { color: var(--au-gray-900); background-color: var(--au-gray-300); } .say-dropdown__button:focus { outline: var(--au-outline); outline-offset: -0.4rem; } .say-dropdown__button.is-active { color: var(--au-gray-900); background-color: var(--au-gray-300); box-shadow: inset 0 -0.3rem 0 0 var(--au-gray-900); } .say-dropdown__button:disabled { color: var(--au-gray-500); cursor: not-allowed; background-color: transparent; } .say-dropdown__button img { filter: invert(59%) sepia(12%) saturate(457%) hue-rotate(172deg) brightness(91%) contrast(85%); } .say-dropdown__button img:hover, .say-dropdown__button img:focus { filter: invert(43%) sepia(35%) saturate(180%) hue-rotate(173deg) brightness(97%) contrast(94%); } .say-dropdown__menu { font-size: 1.5rem; line-height: 1.5; font-family: var(--au-font); font-weight: var(--au-regular); z-index: var(--au-z-index-beta); background-color: var(--au-gray-100); display: flex; flex-wrap: nowrap; width: max-content; box-shadow: 0 0 12px rgba(33, 35, 38, 0.15), 0 0 2px rgba(33, 35, 38, 0.1); border-radius: 0.3rem; display: none; flex-direction: column; } .say-dropdown__menu.say-dropdown__menu-horizontal { flex-direction: row; } .say-dropdown__menu:focus { outline: 0; } .say-dropdown__menu.is-visible { display: flex; } .say-dropdown__menu [role=menuitem] { font-size: 1.4rem; line-height: 1.5; display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; font-family: var(--au-font); font-weight: var(--au-regular); color: var(--au-gray-700); appearance: none; border: 0; padding: 1.2rem; height: auto; white-space: nowrap; overflow: hidden; text-align: left; } .say-dropdown__menu [role=menuitem]:first-child { border-top-right-radius: 0.3rem; border-top-left-radius: 0.3rem; } .say-dropdown__menu [role=menuitem]:last-child { border-bottom-right-radius: 0.3rem; border-bottom-left-radius: 0.3rem; } .say-dropdown__menu [role=menuitem]:hover:not(:disabled), .say-dropdown__menu [role=menuitem]:focus:not(:disabled) { background-color: var(--au-gray-300); } .say-dropdown__menu [role=menuitem]:disabled { color: var(--au-gray-500); cursor: not-allowed; background-color: transparent; } .say-dropdown__menu [role=menuitem] + [role=menuitem] { border-top: 1px dotted var(--au-gray-300); } .say-dropdown__menu [role=menuitem] img, .say-dropdown__menu [role=menuitem] svg { margin-right: 0.6rem; } .say-dropdown__menu [role=menuitem] img { filter: invert(43%) sepia(35%) saturate(180%) hue-rotate(173deg) brightness(97%) contrast(94%); } .say-dropdown__menu [role=menuitem]:hover img, .say-dropdown__menu [role=menuitem]:focus img { filter: invert(35%) sepia(14%) saturate(463%) hue-rotate(175deg) brightness(92%) contrast(91%); } .say-dropdown__menu .say-dropdown__menu-with-inputs { justify-content: space-between; } .say-dropdown__menu [role=menuitem] input { margin-left: 0.6rem; } /* ================================== #SAY EDITOR HINTS ================================== */ .say-editor-hints { display: block; position: relative; } .say-editor-hints__list { position: relative; width: 100%; } @media (min-width: 63.9375em) { .say-editor-hints__list { width: auto; max-width: 100%; } } .say-editor-hints__list-item { margin-bottom: 1.2rem; } .say-editor-hints__insert .au-c-accordion { padding-bottom: 1.2rem; } @media (max-width: 63.9375em) { .say-editor-hints__insert { position: relative; } .say-editor-hints__insert .au-c-accordion { display: flex; flex-direction: column; align-items: flex-end; padding-bottom: 0.6rem; } .say-editor-hints__insert .au-c-accordion .au-c-toolbar { background-color: var(--au-gray-100); width: auto; align-items: center; justify-content: center; width: 3.6rem; height: 3.6rem; } .say-editor-hints__insert .au-c-accordion .au-c-toolbar:hover { background-color: var(--au-white); } .say-editor-hints__insert .au-c-accordion .au-c-toolbar .au-c-toolbar__group { align-items: center; justify-content: center; } .say-editor-hints__insert .au-c-accordion .au-c-toolbar .au-c-icon { margin-top: 0; margin-right: 0; } .say-editor-hints__insert .au-c-accordion .au-c-toolbar .au-c-button, .say-editor-hints__insert .au-c-accordion .au-c-toolbar .data-table-pagination-right button, .data-table-pagination-right .say-editor-hints__insert .au-c-accordion .au-c-toolbar button { border: 0 !important; clip: rect(0 0 0 0) !important; clip-path: inset(50%) !important; height: 1px !important; margin: -1px !important; overflow: hidden !important; padding: 0 !important; position: absolute !important; white-space: nowrap !important; width: 1px !important; } .say-editor-hints__insert .au-c-accordion__content { padding: 0.6rem; border-radius: var(--au-radius); border: 0.1rem solid var(--au-gray-200); background-color: var(--au-white); box-shadow: 0 1px 3px rgba(33, 35, 38, 0.1), 0 4px 20px rgba(33, 35, 38, 0.035), 0 1px 1px rgba(33, 35, 38, 0.025); } } /* ================================== #ICONS ================================== */ /* Variables ========================================================================== */ /* Component ========================================================================== */ .say-icon { display: inline-block; width: 1.3rem; height: 1.3rem; position: relative; vertical-align: baseline; stroke-width: 0; stroke: currentColor; fill: currentColor; } /* Modifiers ========================================================================== */ .say-icon--medium { width: 1.25rem; height: 1.25rem; } .say-icon--large { width: 1.7rem; height: 1.7rem; vertical-align: center; } .say-icon--left { margin-right: 0.6rem; } .say-icon--right { margin-left: 0.6rem; } .say-icon--rotate { animation-name: iconRotate; animation-iteration-count: infinite; animation-duration: 1s; transform-origin: center; } @keyframes iconRotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } :root { --au-white: #ffffff; --au-gray-100: #f7f9fc; --au-gray-200: #e8ebee; --au-gray-300: #cfd5dd; --au-gray-400: #afb9c5; --au-gray-500: #8695a8; --au-gray-600: #7f8b99; --au-gray-700: #687483; --au-gray-800: #4f5864; --au-gray-900: #333332; --au-gray-1000: #000000; --au-blue-100: #f4f7fb; --au-blue-200: #e4ebf5; --au-blue-300: #b2ccef; --au-blue-500: #5990de; --au-blue-600: #3779d7; --au-blue-700: #0055cc; --au-blue-800: #004ab2; --au-blue-900: #003b8e; --au-yellow-100: #fff9d5; --au-yellow-200: #fff29b; --au-yellow-300: #ffe615; --au-yellow-400: #ffc515; --au-yellow-600: #7f6e3b; --au-yellow-900: #473d21; --au-orange-200: #fff9e8; --au-orange-300: #ffeeb9; --au-orange-400: #ffe49c; --au-orange-500: #ffa10a; --au-orange-600: #d07b06; --au-orange-700: #9f5804; --au-red-100: #fdf7f7; --au-red-200: #fbeded; --au-red-300: #f4c8c9; --au-red-400: #f1aeae; --au-red-500: #e77474; --au-red-600: #d2373c; --au-red-700: #aa2729; --au-red-900: #470000; --au-green-100: #f8fcf9; --au-green-200: #ecf6ee; --au-green-300: #c5e5cc; --au-green-400: #b1dcbb; --au-green-500: #009e47; --au-green-700: #007a37; --au-green-900: #323d08; --vl-white: #ffffff; --vl-grey-05: #f7f9fc; --vl-grey-10: #e8ebee; --vl-grey-20: #cfd5dd; --vl-grey-50: #8695a8; --vl-grey-70: #687483; --vl-grey-100: #333332; --vl-grey-110: #000000; --vl-yellow-100: #ffe615; --vl-blue-15: #e4ebf5; --vl-blue-30: #b2ccef; --vl-blue-65: #5990de; --vl-blue-100: #0055cc; --vl-blue-110: #003b8e; --vl-green-10: #ecf6ee; --vl-green-30: #c5e5cc; --vl-green-40: #b1dcbb; --vl-green-100: #009e47; --vl-green-130: #007a37; --vl-red-10: #fbeded; --vl-red-30: #f4c8c9; --vl-red-40: #f1aeae; --vl-red-100: #d2373c; --vl-red-130: #aa2729; --vl-orange-10: #fff9e8; --vl-orange-30: #ffeeb9; --vl-orange-40: #ffe49c; --vl-orange-100: #ffa10a; --vl-orange-110: #d07b06; --vl-orange-120: #9f5804; --vl-lime-100: #a3cc00; --vl-lime-120: #6f8b00; --vl-brick-100: #d53d5e; --vl-brick-120: #85273b; --vl-chocolate-100: #d26e25; --vl-chocolate-120: #904e1d; --vl-picton-100: #32b1e9; --vl-picton-120: #16465b; --au-page-bg: #ffffff; --au-select-text-color: #333332; --au-select-text-bg: #e4ebf5; --au-divider-color: #e8ebee; --au-outline-color: #5990de; --au-global-font-size: 1.5rem; --au-global-line-height: 1.5; --au-font: "flanders-sans", BlinkMacSystemFont, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --au-font-secondary: "flanders-serif"; --au-font-tertiary: courier, monospace; --au-light: 300; --au-regular: 400; --au-medium: 500; --au-bold: 700; --au-base: 1.5rem; --au-para: 1.8rem; --au-para-small: 1.6rem; --au-lead: 2.2rem; --au-lead-medium: 2rem; --au-lead-small: 1.8rem; --au-small: 1.4rem; --au-tiny: 1.3rem; --au-h-functional-small: 1.3rem; --au-h-functional: 1.5rem; --au-h6: 1.6rem; --au-h5: 1.8rem; --au-h4: 2rem; --au-h3-small: 2.2rem; --au-h3: 2.6rem; --au-h2-small: 2.6rem; --au-h2: 3.2rem; --au-h1-small: 3rem; --au-h1-medium: 4rem; --au-h1: 4.4rem; --au-icon-size: 1.3rem; --au-icon-size-medium: 1.6rem; --au-icon-size-large: 1.9rem; --au-radius: 0.3rem; --au-border: 0.2rem; --au-outline-border: 0.3rem; --au-outline-border-style: solid; --au-outline: #5990de 0.3rem solid; --au-outline-offset: 0.2rem; --au-outline-offset-negative: -0.3rem; --au-duration: 0.125s; --au-easing: cubic-bezier(0.19, 1, 0.22, 1); --au-transition: 0.125s cubic-bezier(0.19, 1, 0.22, 1); --au-z-index-alpha: 1; --au-z-index-beta: 2; --au-z-index-gamma: 3; } .say-link-tooltip { z-index: 3; background-color: var(--au-white); gap: 0; align-items: stretch; padding: 0; width: 28rem; } .say-link-tooltip a, .say-link-tooltip button { padding: 0; flex: 1; border: 0; justify-content: center; } .say-link-tooltip .au-c-input, .say-link-tooltip .au-c-data-table .data-table-search input, .au-c-data-table .data-table-search .say-link-tooltip input, .say-link-tooltip .input-field-icon-container--block.input-field-icon-container--left .input-field.input-field--block, .input-field-icon-container--block.input-field-icon-container--left .say-link-tooltip .input-field.input-field--block { border-width: 0 0.1rem; border-radius: 0%; padding: 0 0.3rem; flex: 7; } .say-link-tooltip .au-c-input:focus, .say-link-tooltip .au-c-data-table .data-table-search input:focus, .au-c-data-table .data-table-search .say-link-tooltip input:focus, .say-link-tooltip .input-field-icon-container--block.input-field-icon-container--left .input-field.input-field--block:focus, .input-field-icon-container--block.input-field-icon-container--left .say-link-tooltip .input-field.input-field--block:focus { border-width: 0 0 !important; } .say-pill { gap: 0; vertical-align: bottom; min-height: 2.55rem; margin-bottom: -0.1rem; margin-top: 2px; background-color: var(--au-blue-100); border-color: var(--au-blue-300); border-radius: var(--au-radius); font-weight: var(--au-regular); color: var(--au-blue-700); } .say-pill [contenteditable] { outline: none; white-space: break-spaces; word-break: break-all; word-wrap: break-word; cursor: text; color: var(--au-blue-700); } .ember-node.ProseMirror-selectednode .say-pill { background-color: var(--au-blue-200); outline: 2px solid var(--au-blue-500); outline-offset: -2px; } .ember-node.ProseMirror-selectednode .say-pill ::selection { background-color: var(--au-blue-300); } .say-placeholder { font-style: italic; border-radius: 0.3rem; color: var(--au-orange-700); background-color: var(--au-orange-300); padding-right: 0.05rem; line-height: 1.2rem; user-select: none; } .say-placeholder[data-editor-position-level="1"], .say-placeholder:hover, .say-placeholder:focus, .say-placeholder:focus-within { opacity: 0.75; } .say-placeholder::selection { background-color: var(--au-blue-200); } .say-placeholder.ProseMirror-selectednode { background-color: var(--au-blue-200); outline: 2px solid var(--au-blue-500); color: var(--au-black); } [data-placeholder]:empty::before { color: var(--au-gray-400); content: attr(data-placeholder); float: left; height: 0; pointer-events: none; } /* ================================== #TOAST ================================== */ .say-toast { font-size: 1.3rem; line-height: 1.3; position: fixed; z-index: 3; bottom: 0; left: 0; display: flex; align-items: center; padding: 0.6rem 1.2rem; color: #ffffff; border-top-right-radius: var(--au-radius); background-color: var(--au-gray-800); min-height: 3rem; } .say-toast.is-loaded { background-color: var(--au-green-500); animation-name: dissappear; animation-iteration-count: 1; animation-duration: 0.3s; animation-delay: 1s; animation-fill-mode: forwards; } @keyframes dissappear { 0% { opacity: 1; } 100% { opacity: 0; } } .say-editor-selection-tooltip { background: var(--au-gray-100); border: 0.1rem solid var(--au-gray-300); border-radius: 0.5rem; } .say-table { font-size: 1.6rem; line-height: var(--au-global-line-height); display: table; table-layout: auto; position: relative; min-width: 100%; border-collapse: collapse; border: 0.1rem solid var(--au-gray-300); } .say-table + .say-table { margin-top: 2.4rem; } .say-table thead { border-bottom: 0.2rem solid var(--au-gray-300); } .say-table th.say-table-header, .say-table td.say-table-cell { font-size: 1.5rem; line-height: 1.2; text-align: left; padding: 1.2rem 1.2rem; min-height: 4.8rem; position: relative; background-clip: padding-box; } .say-table th.say-table-header { font-weight: var(--au-medium); } .say-table tr + tr { border-top: 0.1rem solid var(--au-gray-300); } .say-table tr:nth-child(even) { background: var(--say-even-row-background); } .say-table tr:nth-child(odd) { background: var(--say-odd-row-background); } .say-table th.say-table-header + th.say-table-header, .say-table td.say-table-cell + td.say-table-cell, .say-table th.say-table-header + td.say-table-cell, .say-table td.say-table-cell + th.say-table-header { border-left: 0.1rem solid var(--au-gray-300); } .say-table th.say-table-header, .say-table td.say-table-cell { max-width: 55ch; } .say-table th.say-table-header:focus, .say-table td.say-table-cell:focus { outline: none; } .say-table .column-resize-handle { position: absolute !important; right: -2px; top: 0; bottom: 0; width: 4px; background-color: #adf; pointer-events: none; margin-top: 0; } .tableWrapper { overflow-y: hidden; } table.ProseMirror-selectednode, .tableWrapper.ProseMirror-selectednode { background-color: var(--au-blue-200); outline: 2px solid var(--au-blue-500); color: var(--au-black); } .resize-cursor { cursor: col-resize; } .say-table-tooltip { display: flex; flex-direction: column; } .say-table-tooltip .color-selector__grid { padding: 0 12px; display: grid; grid-template-columns: repeat(7, 1fr); grid-gap: 1.2rem; margin-bottom: 1.2rem; } .say-table-tooltip .color-selector__grid button { padding: 0; width: 18px; height: 18px; border-radius: 50%; border: none; } .say-table-tooltip--actions { display: flex; flex-direction: row; } .say-table-tooltip--actions button { outline: none; border: 0; color: var(--au-gray-900); padding: 1.2rem; } .say-table-tooltip--actions button:hover, .say-table-tooltip--actions button:focus { color: var(--au-gray-900); background-color: var(--au-gray-300); } .say-table-tooltip--actions button:disabled { color: var(--au-gray-500); cursor: not-allowed; background-color: transparent; } span.ember-node { display: inline-block; } .ember-node { white-space: normal; } .ember-node .au-c-dropdown__menu.is-visible { overflow: auto; height: 200px; } .ember-node .au-c-dropdown__menu.is-visible .au-c-link { min-height: 50px; } .ember-node [data-ember-node-content=true] { white-space: break-spaces; } .say-color-selector .color-selector__grid { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 10px 5px; justify-items: center; padding: 5px; } .say-color-selector .color-selector__grid > * { width: 20px; height: 20px; border-radius: 50%; border: none; } .say-color-selector .color-selector__grid > *:hover { border: 1px solid black; cursor: pointer; } .say-color-selector .color-selector__grid > *::before { content: ""; position: relative; padding-left: 20px; padding-right: 20px; padding-top: 5px; padding-bottom: 5px; left: -10px; top: -5px; } .say-color-selector .color-selector__picker { display: none; } .say-image-insert-modal .say-image-insert-preview { display: block; margin: auto; padding: 0.6rem; margin-top: 1.2rem; max-width: 300px; max-height: 300px; border: 0.1rem solid var(--au-gray-200); border-radius: var(--au-radius); } .say-image { display: inline-flex; cursor: move; } .ProseMirror-selectednode .say-image img::selection { background-color: transparent; } .ember-node:not(.ProseMirror-selectednode) .say-image .say-image__resizer { display: none; } .say-image { position: relative; } .say-image .say-image__resizer { outline: 2px solid var(--au-blue-500); position: absolute !important; top: 0; left: 0; width: 100%; height: 100%; margin: 0; padding: 0; } .say-image .say-image__resizer .say-image__resize__handle { width: 8px; height: 8px; background-color: var(--au-blue-500); position: absolute; margin: 0; padding: 0; } .say-image .say-image__resizer .say-image__resize__handle-top-left { left: -5px; top: -5px; cursor: nw-resize; } .say-image .say-image__resizer .say-image__resize__handle-top-right { right: -5px; top: -5px; cursor: ne-resize; } .say-image .say-image__resizer .say-image__resize__handle-bottom-right { right: -5px; bottom: -5px; cursor: se-resize; } .say-image .say-image__resizer .say-image__resize__handle-bottom-left { left: -5px; bottom: -5px; cursor: sw-resize; } .say-image .say-image__resizer .say-image__resize__handle-top { left: 0; right: 0; margin-left: auto; margin-right: auto; top: -5px; cursor: n-resize; } .say-image .say-image__resizer .say-image__resize__handle-right { top: 0; bottom: 0; right: -5px; cursor: e-resize; margin-top: auto; margin-bottom: auto; } .say-image .say-image__resizer .say-image__resize__handle-bottom { bottom: -5px; left: 0; right: 0; cursor: s-resize; margin-left: auto; margin-right: auto; } .say-image .say-image__resizer .say-image__resize__handle-left { top: 0; bottom: 0; left: -5px; cursor: w-resize; margin-top: auto; margin-bottom: auto; } .say-attribute-editor__formatted-content { white-space: pre-wrap; width: 100%; } /* * Adapted from https://github.com/guardian/prosemirror-invisibles/blob/main/src/css/invisibles.css * * Copyright 2018 The Guardian * * Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: * * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. * * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. * */ .say-editor .invisible::before { position: relative; caret-color: inherit; color: gray; display: inline-block; font-weight: 400; font-style: normal; line-height: initial; width: 0; top: 0; left: 0; z-index: 1; } .say-editor .invisible.invisible--space::before { content: "·"; } .say-editor .invisible.invisible--break::before { content: "⏎"; } .say-editor .invisible.invisible--par::before { content: "¶"; } .say-editor .invisible.invisible--heading::before { content: "¶"; } .say-block-rdfa { --padding: 0.5rem; --border-size: 0.1rem; --border-color: #c5cbd5; --border-color-active: #0055cc; --solid-border: var(--border-size) solid var(--border-color); --solid-border-active: var(--border-size) solid var(--border-color-active); position: relative; border-radius: 3px; padding: var(--padding); margin-top: 1rem !important; margin-bottom: 0.5rem !important; margin-left: calc((var(--padding) + var(--border-size)) * -1); border: var(--solid-border); } .say-block-rdfa.say-active { border: var(--solid-border-active); } .say-block-rdfa.say-active .say-block-rdfa { border-left: var(--solid-border-active); } .say-block-rdfa.ProseMirror-selectednode { background-color: var(--au-blue-200); } .say-block-rdfa.ProseMirror-selectednode > .say-block-rdfa--label { cursor: grab; } .say-block-rdfa .say-block-rdfa--label { position: absolute; top: -5px; right: 10px; background-color: white; padding: 0.2rem 0.6rem; color: #687483; line-height: 10px; cursor: pointer; } .say-block-rdfa.say-active > .say-block-rdfa--label { color: var(--border-color-active); } .say-inline-rdfa { display: inline-block; border-color: green; border-style: dashed; border-width: 1px; } .say-inline-rdfa.say-active { outline: 0.2rem solid var(--au-blue-500); } .ember-node { white-space: normal !important; } .ember-node.say-active { outline: 0.2rem solid var(--au-blue-500); border-radius: var(--au-radius); } .ember-node .say-inline-rdfa [contenteditable] { white-space: break-spaces; word-break: break-all; word-wrap: break-word; outline: 0px; padding: 2px; } .ember-node .say-inline-rdfa .label { font-size: var(--au-base); color: var(--au-blue-700); user-select: none; margin: 0.5rem; } .ember-node .say-inline-rdfa .au-c-icon { margin: 0; } .ember-node.ProseMirror-selectednode > .say-inline-rdfa { outline: 1px solid var(--au-blue-500); } .ember-node.ProseMirror-selectednode > .say-inline-rdfa.atomic { background-color: var(--au-blue-200); } .ember-node.ProseMirror-selectednode > .say-inline-rdfa ::selection { background-color: var(--au-blue-300); } .say-number-settings { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: 1fr; } .say-number-settings .to { display: flex; justify-content: center; color: var(--au-gray-900); } .say-number-settings .to span { position: relative; top: 33px; } .say-number-settings input[type=number] { width: 100%; } .say-number-settings .au-c-help-text, .say-number-settings .data-table-pagination-left { grid-column: span 3; } .say-tooltip { z-index: 3; } .say-number-tooltip { width: 200px; } .say-number-tooltip input[type=number] { width: 100%; } .say-number-tooltip .au-c-content * { margin-top: 0; } .say-number-tooltip * :not(*:nth-child(1)) { margin-top: 5px; } /* ========================================================================== #SHAME Temporary css Some parts will be reused, but most of them will not. ========================================================================== */ .say-typography #text { display: none !important; } .say-typography .annotation:hover { background-color: transparent !important; } .say-typography mark { cursor: pointer; } .say-typography mark table { font-weight: normal; border: 4px solid var(--au-yellow-400); } .say-typography mark table:active { opacity: 0.5; } .internal-component { display: block; width: 50%; margin: 5px auto; border: 1px solid #333; } .internal-component .close { float: right; margin: 5px; } .say-card .modal-dialog { position: relative; top: 0; left: 0; box-shadow: none; transform: none; padding: 0; width: 100%; } .say-card .say-card { box-shadow: none; position: relative; } .say-card ul li div.u-hr { display: none; } .say-card .modal-dialog__header { font-size: 1.6rem; line-height: var(--au-global-line-height); color: var(--au-gray-800); padding: 1.2rem; border-bottom: 0.1rem solid var(--au-gray-200); } .say-card .modal-dialog__header * { margin-bottom: 0; } .say-card .modal-dialog__header * + * { margin-top: 1.2rem; } .say-card .modal-dialog__header .grid { align-items: center; } .say-card .modal-dialog__header .col--2-12.u-align-right { margin-top: 0; padding-right: 0.6rem; } .say-card .modal-dialog__content { padding: 1.2rem; } .say-card .modal-dialog__content--sectioned { padding: 0; } .say-card .modal-dialog__content--sectioned > * { max-height: 50vh; } .say-card .modal-dialog__content--sectioned .modal-dialog__footer { border-top: 1px solid var(--au-gray-200); } .say-card .modal-dialog__footer { padding: 1.2rem; } .say-card .modal-dialog__footer button { margin-bottom: 0; } @media screen and (max-width: 767px) { .say-card .link-list { margin-bottom: 0 !important; } } .say-card .link-list.link-list--bordered .link-list__item.link-list__item--sidenotes a { padding: 1.2rem !important; } .say-card .link-list.link-list--bordered .link-list__item.link-list__item--sidenotes a:hover { background-color: var(--au-gray-100); } .say-card .link-list.link-list--bordered .link-list__item__sidenote.uppercase { font-size: 1.2rem; line-height: 1.3; color: var(--au-gray-600); padding: 0; } .say-card .modal-dialog__link-list { padding: 1.2rem; width: 100%; overflow: hidden; } .modal-dialog.modal-dialog--sectioned .modal-dialog__content.modal-dialog__content--sidebar-grid { padding: 0; overflow: hidden; } .modal-dialog.modal-dialog--sectioned .modal-dialog__content.modal-dialog__content--sidebar-grid > .grid { max-height: 60vh; overflow: hidden; } .modal-dialog.modal-dialog--sectioned .modal-dialog__content.modal-dialog__content--sidebar-grid > .grid > div:first-child { max-height: 60vh; overflow-y: auto; } .modal-dialog.modal-dialog--sectioned .modal-dialog__content.modal-dialog__content--sidebar-grid > .grid > div:nth-child(2) { max-height: 60vh; display: flex; flex-direction: column; overflow: hidden; } .modal-dialog.modal-dialog--sectioned .modal-dialog__content.modal-dialog__content--sidebar-grid > .grid > div:nth-child(2) > div:first-child { overflow-y: auto; flex-grow: 1; } .modal-dialog.modal-dialog--sectioned .modal-dialog__content.modal-dialog__content--sidebar-grid > .grid > div:nth-child(2) > div:nth-child(2) { flex-grow: 0; } .say-border-bottom { border-bottom: 0.1rem solid var(--au-gray-300); } .say-toolbar .au-c-toggle-switch__toggle { background-color: var(--au-gray-300); } .say-toolbar .au-c-toggle-switch__label { font-size: 1.5rem; line-height: var(--au-global-line-height); } .form__row + .form__row { margin-top: 0.6rem; } .say-flex-grow { flex-grow: 1; } /* ================================== #SAY EDITOR ================================== */ /** * CONTENTS * --- * VARIABLES: Project settings and variables * TOOLS: Mixins * OBJECTS: OOCSS unstyled objects (namespace: '.au-o-...') * COMPONENTS: Components (namespace: '.au-c-...') * CUSTOM COMPONENTS: Say editor components (namespace: '.say-...') * UTILITIES: Single function helper classes (namespace: '.au-u-...') * SHAME: Quick fixes */ .ProseMirror-gapcursor { display: none; border-top: 1px solid black; animation: ProseMirror-cursor-blink 1.1s steps(2, start) infinite; margin-top: 0.5rem; margin-bottom: 0.5rem; width: 20px; } @keyframes ProseMirror-cursor-blink { to { visibility: hidden; } } .ProseMirror-focused .ProseMirror-gapcursor { display: block; } .u-hidden { visibility: visible; display: inline-block; background: yellow; } ol > li[data-list-marker]::marker { content: attr(data-list-marker); font-variant-numeric: tabular-nums; } ol > *[data-content-container] > li[data-list-marker]::marker { content: attr(data-list-marker); font-variant-numeric: tabular-nums; } .citaten--decision-list { max-height: 35vh; overflow: auto; } .citaten--decision-title { /*Still with vendor prefixes for now */ /*Have the title only a couple of lines long at the most*/ display: -webkit-box; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 3; -webkit-box-orient: vertical; } /*To show the dopdown content on top of the modal*/ .ember-basic-dropdown-content { z-index: 1000000 !important; } .citaten--main-container { height: 100% !important; } @media (min-width: 63.9375em) { .citaten--main-container .citaten--sidebar, .citaten--main-container .au-c-main-container__sidebar { flex-basis: 30rem; } } .citaten--main-container .au-c-main-container__content { display: flex; flex-direction: column; justify-content: space-between; } .citaten--container-header { border-bottom: 0.1rem solid var(--au-gray-200); } .citaten--container-content { overflow: auto; } .citaten-modal .error-code { font-family: var(--au-font-tertiary); } .say-citation-hint { background-color: var(--au-gray-100); border-bottom: 0.2rem dotted var(--au-gray-300); padding-bottom: 0.2rem; transition: background-color var(--au-transition); } .say-citation-hint::selection { background-color: var(--au-gray-300); } .say-citation-hint:hover { background-color: var(--au-gray-200); border-bottom-color: rgb(135, 141.4, 150.2); } #date-plugin-time-info-tooltip { z-index: 3; } .say-pill [typeof="ext:Mapping"] + [typeof="ext:Mapping"] { margin-left: 0.3rem; } .say-pill .mark-highlight-manual + .ProseMirror-firefox-fake-cursor { margin-left: -0.5rem; } .say-pill [typeof="ext:Mapping"] { border-bottom: 0 !important; } .say-pill [typeof="ext:Mapping"] [property], .say-pill [typeof="ext:Mapping"] .mark-highlight-manual { border-bottom: 0; } .say-pill [typeof="ext:Mapping"] [property="ext:content"] { border-radius: 0.3rem; padding: 0 0.3rem; line-height: 1.2rem; margin-bottom: 0.3rem; } .say-pill [typeof="ext:Mapping"] [property="dct:type"] ~ [property="ext:content"] { color: var(--vl-picton-120); border-radius: 0.3rem; background-color: rgba(22, 70, 91, 0.15); transition: border 0.1s ease-in-out, background-color 0.1s ease-in-out; } .say-pill [typeof="ext:Mapping"] [property="dct:type"] ~ [property="ext:content"]:hover, .say-pill [typeof="ext:Mapping"] [property="dct:type"] ~ [property="ext:content"]:focus, .say-pill [typeof="ext:Mapping"] [property="dct:type"] ~ [property="ext:content"]:focus-within { background-color: rgba(22, 70, 91, 0.1); } .say-pill [typeof="ext:Mapping"] [property="dct:type"] ~ [property="ext:content"]:after { position: relative; top: -0.2rem; content: "" !important; display: inline-block !important; width: 1rem; height: 1rem; margin-left: 0.3rem; background-size: contain; background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBmaWxsPSIjMTY0NjVCIj48cGF0aCBkPSJNMjAuODMxMTAwMywzLjE4Mzg0MTggQzIwLjQ1OTEwMDMsMi44MDc0MjE4IDIwLjAxNjEwMDMsMi41MDg1NjE4IDE5LjUyNzcwMDMsMi4zMDQ2MDE4IEMxOS4wMzk0MDAzLDIuMTAwNjMxOCAxOC41MTU0MDAzLDEuOTk1NjAxOCAxNy45ODYxMDAzLDEuOTk1NjAxOCBDMTcuNDU2OTAwMywxLjk5NTYwMTggMTYuOTMyOTAwMywyLjEwMDYzMTggMTYuNDQ0NjAwMywyLjMwNDYwMTggQzE1Ljk1NjIwMDMsMi41MDg1NjE4IDE1LjUxMzIwMDMsMi44MDc0MjE4IDE1LjE0MTEwMDMsMy4xODM4NDE4IEwzLjczMTE0MDMyLDE0LjU5MzgwMTggQzMuNjEzMTgwMzIsMTQuNzI3MzAxOCAzLjUyNDYwMDMyLDE0Ljg4NDAwMTggMy40NzExNDAzMiwxNS4wNTM4MDE4IEwyLjAxMTE0MDMyLDIwLjc2MzgwMTggQzEuOTY4ODEwMzIsMjAuOTMxMjAxOCAxLjk3MDUxMDMyLDIxLjEwNjYwMTggMi4wMTYwNzAzMiwyMS4yNzMxMDE4IEMyLjA2MTYzMDMyLDIxLjQzOTUwMTggMi4xNDk1MDAzMiwyMS41OTE0MDE4IDIuMjcxMTQwMzIsMjEuNzEzODAxOCBDMi4zOTM1OTAzMiwyMS44MzU1MDE4IDIuNTQ1NDQwMzIsMjEuOTIzNDAxOCAyLjcxMTkxMDMyLDIxLjk2ODkwMTggQzIuODc4MzgwMzIsMjIuMDE0NTAxOCAzLjA1MzgyMDMyLDIyLjAxNjIwMTggMy4yMjExNDAzMiwyMS45NzM4MDE4IEw4LjkyMTE0MDMyLDIwLjU0MzgwMTggQzkuMDkxMDEwMzIsMjAuNDkwNDAxOCA5LjI0NzczMDMyLDIwLjQwMTgwMTggOS4zODExNDAzMiwyMC4yODM4MDE4IEwyMC44MzExMDAzLDguODczODQxOCBDMjEuMjA3NjAwMyw4LjUwMTgyMTggMjEuNTA2NDAwMyw4LjA1ODc5MTggMjEuNzEwNDAwMyw3LjU3MDQzMTggQzIxLjkxNDQwMDMsNy4wODIwNzE4IDIyLjAxOTQwMDMsNi41NTgwOTE4IDIyLjAxOTQwMDMsNi4wMjg4NDE4IEMyMi4wMTk0MDAzLDUuNDk5NjAxOCAyMS45MTQ0MDAzLDQuOTc1NjIxOCAyMS43MTA0MDAzLDQuNDg3MjYxOCBDMjEuNTA2NDAwMywzLjk5ODkwMTggMjEuMjA3NjAwMywzLjU1NTg3MTggMjAuODMxMTAwMywzLjE4Mzg0MTggWiBNMTQuNDIxMTAwMyw2LjczMzg0MTggTDE3LjI4MTEwMDMsOS41OTM4NDE4IEw4LjcyMTE0MDMyLDE4LjE2MzgwMTggTDUuODUxMTQwMzIsMTUuMzAzODAxOCBMMTQuNDIxMTAwMyw2LjczMzg0MTggWiBNNC40MjExNDAzMiwxOS42MzM4MDE4IEw1LjAxMTE0MDMyLDE3LjI1MzgwMTggTDYuNzYxMTQwMzIsMTkuMDAzODAxOCBMNC40MjExNDAzMiwxOS42MzM4MDE4IFogTTE5LjQyMTEwMDMsNC42MzM4NDE4IEMxOS43ODY5MDAzLDUuMDIwMTQxOCAxOS45OTA3MDAzLDUuNTMxODgxOCAxOS45OTA3MDAzLDYuMDYzODQxOCBDMTkuOTkwNzAwMyw2LjU5NTgwMTggMTkuNzg2OTAwMyw3LjEwNzU0MTggMTkuNDIxMTAwMyw3LjQ5Mzg0MTggTDE4LjcwMTEwMDMsOC4yMTM4NDE4IEwxNS44MzExMDAzLDUuMzEzODQxOCBMMTYuNTUxMTAwMyw0LjU5Mzg0MTggQzE2LjkzNjgwMDMsNC4yMjI5MTE4IDE3LjQ1MTEwMDMsNC4wMTU3MTE4IDE3Ljk4NjEwMDMsNC4wMTU3MTE4IEMxOC41MjEyMDAzLDQuMDE1NzExOCAxOS4wMzU1MDAzLDQuMjIyOTExOCAxOS40MjExMDAzLDQuNTkzODQxOCBMMTkuNDIxMTAwMyw0LjYzMzg0MTggWiIvPjwvc3ZnPgo="); } .ember-node.say-active:has(> .say-pill) { outline: none; } .ember-node { white-space: normal !important; } .ember-node .say-pill [contenteditable].mark-highlight-manual { color: var(--au-orange-700); } .ember-node .say-pill [contenteditable].mark-highlight-manual.ProseMirror-selectednode { background-color: var(--au-blue-300); outline: none; } .ember-node .say-pill .unfilled-variable { color: var(--au-orange-700); background-color: var(--au-orange-300); font-style: italic; line-height: 1.2rem; padding: 0.3rem; } .ember-node.ProseMirror-selectednode > .say-pill.atomic { background-color: var(--au-blue-200); } .ember-node.ProseMirror-selectednode .say-pill .unfilled-variable { background-color: var(--au-blue-200); } .say-number-settings { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: 1fr; } .say-number-settings .to { display: flex; justify-content: center; color: var(--au-gray-900); } .say-number-settings .to span { position: relative; top: 33px; } .say-number-settings input[type=number] { width: 100%; } .say-number-settings .au-c-help-text, .say-number-settings .data-table-pagination-left { grid-column: span 3; } .say-tooltip { z-index: 3; } .say-number-tooltip { width: 200px; } .say-number-tooltip input[type=number] { width: 100%; } .say-number-tooltip .au-c-content * { margin-top: 0; } .say-number-tooltip * :not(*:nth-child(1)) { margin-top: 5px; } @media only screen and (min-width: 2500px) { #location-select, .location-select-dropdown { width: 600px; } } @media only screen and (max-width: 2500px) { #location-select, .location-select-dropdown { width: 500px; } } @media only screen and (max-width: 2000px) { #location-select, .location-select-dropdown { width: 400px; } } @media only screen and (max-width: 1700px) { #location-select, .location-select-dropdown { width: 300px; } } @media only screen and (max-width: 1400px) { #location-select, .location-select-dropdown { width: 200px; } } .say-variable:not(.say-pill) { color: var(--au-orange-700); background-color: var(--au-orange-300); font-style: italic; } .say-validation-alert .au-c-button, .say-validation-alert .data-table-pagination-right button, .data-table-pagination-right .say-validation-alert button { padding: 0; } .besluit-toolbar-pill { padding: 0 1.2rem; } .snippet-modal--main-container { height: 100% !important; background-color: var(--au-gray-100); } .snippet-modal--main-container .au-c-sidebar { border-right: 0; } .snippet-modal--main-container #content { display: flex; flex-direction: column; } .snippet-modal--list-container { overflow: auto; flex-grow: 1; } .snippet-modal--list-container .snippet-list-table-select-column { width: 100px; text-align: center; } .snippet-modal--list-container .snippet-list-table-created-column { width: 200px; } .snippet-modal .error-code { font-family: var(--au-font-tertiary); } .snippet-preview { display: flex; flex-direction: column; background-color: var(--au-white); border: 0.1rem solid var(--au-gray-200); border-radius: var(--au-radius); } .snippet-preview--expanded > .snippet-preview__header { border-bottom: 0.1rem solid var(--au-gray-200); } .snippet-preview__header { display: flex; flex-direction: row; align-items: center; } .snippet-preview__header > :nth-child(1) { flex-grow: 1; display: flex; flex-direction: row; align-items: center; padding: 1.2rem; cursor: pointer; } .snippet-preview__header > :nth-child(2) { border-left: 1px solid var(--au-gray-200); padding: 1.2rem; cursor: pointer; } .snippet-preview__title { color: var(--au-gray-700); font-weight: var(--au-medium); } .snippet-preview__content { padding: 1.2rem 2.4rem 1.2rem 2.4rem; } .say-snippet-lists-table .au-c-table-wrapper { margin-top: 20px; margin-right: 100px; } .say-snippet-lists-table .au-c-table-wrapper .selectColumn { width: 200px; } .say-snippet-card { border: 1px solid var(--au-blue-300); border-radius: var(--au-radius); } .say-snippet-card .say-snippet-title { background-color: var(--au-gray-100); border-radius: 0.1em 0.1em 0 0; font-size: 1.6rem; font-weight: var(--au-medium); padding: 5px; border-bottom: 1px solid var(--au-blue-300); color: var(--au-blue-700); cursor: pointer; } .say-snippet-card .say-snippet-title .say-snippet-title-icon { background-color: var(--au-blue-300); color: black; } .say-snippet-card .say-snippet-body { position: relative; margin-top: 0; } .say-snippet-card .say-snippet-content { padding: 20px; min-height: 100px; padding-right: 50px; margin-top: 0; } .say-snippet-card .say-snippet-icons { display: flex; width: fit-content; position: absolute !important; right: 5px; top: 0; margin-top: 0; flex-direction: column; } .say-snippet-card .say-snippet-icons .say-snippet-button { height: 32px; width: 32px; margin: 4px; display: flex; justify-content: center; align-items: center; border: 2px solid var(--au-blue-700); border-radius: 4px; color: var(--au-blue-700); cursor: pointer; } .say-snippet-card .say-snippet-icons .say-snippet-button.say-snippet-remove-button { color: var(--au-red-600); border-color: var(--au-red-600); } .say-snippet-card .say-snippet-icons .say-snippet-button .say-snippet-button-text { display: none; position: absolute !important; right: 38px; border: 1px solid; border-radius: 3px; width: max-content; font-size: 1.2rem; height: 32px; padding-right: 1rem; padding-left: 1rem; align-items: center; background-color: #fff; } .say-snippet-card .say-snippet-icons .say-snippet-button:hover .say-snippet-button-text { display: flex; } .ProseMirror-selectednode .say-snippet-content { background-color: var(--au-blue-200); } .ProseMirror-selectednode .say-snippet-title { background-color: var(--au-blue-300); } .ProseMirror-selectednode > .say-snippet-card > .say-snippet-title { cursor: grab; } .ember-node.say-active:has(> .say-snippet-card) { outline: none; } .ember-node.say-active > .say-snippet-card { border-color: var(--au-blue-700); border-width: 0.2rem; } .ember-node.say-active > .say-snippet-card > .say-snippet-title { border-bottom-color: var(--au-blue-700); border-bottom-width: 0.2rem; } .say-snippet.say-snippet-placeholder { display: flex; flex-direction: row; padding: 1.2rem 1.8rem; background-color: var(--au-orange-300); border-radius: var(--au-radius); border: 0.1rem solid var(--au-orange-500); cursor: pointer; } .say-snippet.say-snippet-placeholder .say-snippet-placeholder__icon { background-color: var(--au-orange-500); color: black; height: 2.3rem; width: 2.4rem; margin-right: 1.2rem; border-radius: 4.8rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .say-snippet.say-snippet-placeholder .say-snippet-placeholder__content { margin-top: 0; } .say-snippet.say-snippet-placeholder .say-snippet-placeholder__title { color: var(--au-orange-700); font-weight: var(--au-medium); } .say-snippet.say-snippet-placeholder .say-snippet-placeholder__button { margin: 0; padding: 0; } .ProseMirror-selectednode > .say-snippet.say-snippet-placeholder { background-color: var(--au-blue-200); cursor: grab; } div[typeof="besluitpublicatie:Documentonderdeel"] .say-snippet.say-snippet-placeholder { background-color: var(--au-gray-300); } .say-template-comment { color: var(--au-blue-900); padding: 1.2rem; border-radius: var(--au-radius); border: 0.1rem solid var(--au-gray-300); background-color: var(--au-blue-200); } .say-template-comment .au-c-alert__content { margin-top: 0; } .say-template-comment .au-c-alert__content ::selection { background-color: var(--au-blue-300); } .say-template-comment .au-c-alert__icon { background-color: var(--au-blue-200); } .say-template-comment .au-c-alert__message { color: var(--au-gray-900); } .say-template-comment .au-c-alert__message p { white-space: break-spaces; word-wrap: break-word; } .say-template-comment.ProseMirror-selectednode { outline: 2px solid var(--au-blue-500); } .say-default-cursor { cursor: default; } .say-template-comment-content { cursor: text; } .say-redacted { background-color: var(--au-red-200); } .say-redacted del { text-decoration: none; position: relative; color: var(--au-red-700); padding-left: 0.3rem; padding-right: 0.3rem; } .say-redacted del::selection { color: var(--au-red-900); background-color: var(--au-red-300); } .say-redacted del:before { content: ""; display: inline-block; vertical-align: middle; width: 1.25rem; height: 1.25rem; margin-right: 0.6rem; background-size: cover; background-repeat: no-repeat; background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBmaWxsPSIjQUEyNzI5IiBkPSJNNC43MDcxMSwzLjI5MjkwMjUgQzQuMzE2NTgsMi45MDIzODI1IDMuNjgzNDIsMi45MDIzODI1IDMuMjkyODksMy4yOTI5MDI1IEMyLjkwMjM3LDMuNjgzNDMyNSAyLjkwMjM3LDQuMzE2NTkyNSAzLjI5Mjg5LDQuNzA3MTIyNSBMNS43MTcwNiw3LjEzMTI4MjUgQzQuMjg2MzksOC4yMDczODI1IDMuMDM5MjUsOS42ODU0NDI1IDIuMTA1NTcsMTEuNTUyODEyNSBDMS45NjQ4MSwxMS44MzQzMTI1IDEuOTY0ODEsMTIuMTY1NzEyNSAyLjEwNTU3LDEyLjQ0NzIxMjUgQzQuMjYzNzksMTYuNzYzNzEyNSA4LjA5Njg3LDE5LjAwMDAxMjUgMTIsMTkuMDAwMDEyNSBDMTMuNTU1MiwxOS4wMDAwMTI1IDE1LjA5OTIsMTguNjQ1MDEyNSAxNi41MzA2LDE3Ljk0NDgxMjUgTDE5LjI5MjksMjAuNzA3MTEyNSBDMTkuNjgzNCwyMS4wOTc2MTI1IDIwLjMxNjYsMjEuMDk3NjEyNSAyMC43MDcxLDIwLjcwNzExMjUgQzIxLjA5NzYsMjAuMzE2NjEyNSAyMS4wOTc2LDE5LjY4MzQxMjUgMjAuNzA3MSwxOS4yOTI5MTI1IEw0LjcwNzExLDMuMjkyOTAyNSBaIE0xNS4wMTM4LDE2LjQyODAxMjUgQzE0LjAzNDMsMTYuODExMjEyNSAxMy4wMTM0LDE3LjAwMDAxMjUgMTIsMTcuMDAwMDEyNSBDOS4wMzEyMSwxNy4wMDAwMTI1IDUuOTk4MDYsMTUuMzc5MjEyNSA0LjEyOTY2LDEyLjAwMDAxMjUgQzQuOTQ3MjEsMTAuNTIxNDEyNSA1Ljk4Nzc4LDkuMzc5NDEyNSA3LjE0ODM4LDguNTYyNjAyNSBMOS4yOTIzNywxMC43MDY2MTI1IEM5LjEwNDk1LDExLjA5ODIxMjUgOSwxMS41MzY5MTI1IDksMTIuMDAwMDEyNSBDOSwxMy42NTY5MTI1IDEwLjM0MzEsMTUuMDAwMDEyNSAxMiwxNS4wMDAwMTI1IEMxMi40NjMxLDE1LjAwMDAxMjUgMTIuOTAxOCwxNC44OTUxMTI1IDEzLjI5MzQsMTQuNzA3NjEyNSBMMTUuMDEzOCwxNi40MjgwMTI1IFogTTE4LjU1MjMsMTMuODk1NTEyNSBDMTkuMDM1MywxMy4zNDAyMTI1IDE5LjQ3ODQsMTIuNzA4ODEyNSAxOS44NzAzLDEyLjAwMDAxMjUgQzE4LjAwMTksOC42MjA3OTI1IDE0Ljk2ODcsNy4wMDAwMTI1IDEyLDcuMDAwMDEyNSBDMTEuODg4LDcuMDAwMDEyNSAxMS43NzU5LDcuMDAyMzIyNSAxMS42NjM3LDcuMDA2OTQyNSBMOS44NzkzOSw1LjIyMjU5MjUgQzEwLjU3NzQsNS4wNzQ1MjI1IDExLjI4NzUsNS4wMDAwMTI1IDEyLDUuMDAwMDEyNSBDMTUuOTAzMSw1LjAwMDAxMjUgMTkuNzM2Miw3LjIzNjM2MjUgMjEuODk0NCwxMS41NTI4MTI1IEMyMi4wMzUyLDExLjgzNDMxMjUgMjIuMDM1MiwxMi4xNjU3MTI1IDIxLjg5NDQsMTIuNDQ3MjEyNSBDMjEuMzUwNCwxMy41MzUyMTI1IDIwLjcsMTQuNDkxMDEyNSAxOS45Njg5LDE1LjMxMjExMjUgTDE4LjU1MjMsMTMuODk1NTEyNSBaIi8+PC9zdmc+"); } .worship-modal--main-container { height: 100% !important; } .worship-modal--main-container #content { display: flex; flex-direction: column; } .worship-modal--list-container { overflow: auto; flex-grow: 1; } .worship-modal .error-code { font-family: var(--au-font-tertiary); } .snippet-modal--main-container { height: 100% !important; background-color: var(--au-gray-100); } .snippet-modal--main-container .au-c-sidebar { border-right: 0; } .snippet-modal--main-container #content { display: flex; flex-direction: column; } .snippet-modal--list-container { overflow: auto; flex-grow: 1; } .snippet-modal--list-container .snippet-list-table-select-column { width: 100px; text-align: center; } .snippet-modal--list-container .snippet-list-table-created-column { width: 200px; } .snippet-modal .error-code { font-family: var(--au-font-tertiary); } .snippet-preview { display: flex; flex-direction: column; background-color: var(--au-white); border: 0.1rem solid var(--au-gray-200); border-radius: var(--au-radius); } .snippet-preview--expanded > .snippet-preview__header { border-bottom: 0.1rem solid var(--au-gray-200); } .snippet-preview__header { display: flex; flex-direction: row; align-items: center; } .snippet-preview__header > :nth-child(1) { flex-grow: 1; display: flex; flex-direction: row; align-items: center; padding: 1.2rem; cursor: pointer; } .snippet-preview__header > :nth-child(2) { border-left: 1px solid var(--au-gray-200); padding: 1.2rem; cursor: pointer; } .snippet-preview__title { color: var(--au-gray-700); font-weight: var(--au-medium); } .snippet-preview__content { padding: 1.2rem 2.4rem 1.2rem 2.4rem; } .say-snippet-lists-table .au-c-table-wrapper { margin-top: 20px; margin-right: 100px; } .say-snippet-lists-table .au-c-table-wrapper .selectColumn { width: 200px; } .say-snippet-card { border: 1px solid var(--au-blue-300); border-radius: var(--au-radius); } .say-snippet-card .say-snippet-title { background-color: var(--au-gray-100); border-radius: 0.1em 0.1em 0 0; font-size: 1.6rem; font-weight: var(--au-medium); padding: 5px; border-bottom: 1px solid var(--au-blue-300); color: var(--au-blue-700); cursor: pointer; } .say-snippet-card .say-snippet-title .say-snippet-title-icon { background-color: var(--au-blue-300); color: black; } .say-snippet-card .say-snippet-body { position: relative; margin-top: 0; } .say-snippet-card .say-snippet-content { padding: 20px; min-height: 100px; padding-right: 50px; margin-top: 0; } .say-snippet-card .say-snippet-icons { display: flex; width: fit-content; position: absolute !important; right: 5px; top: 0; margin-top: 0; flex-direction: column; } .say-snippet-card .say-snippet-icons .say-snippet-button { height: 32px; width: 32px; margin: 4px; display: flex; justify-content: center; align-items: center; border: 2px solid var(--au-blue-700); border-radius: 4px; color: var(--au-blue-700); cursor: pointer; } .say-snippet-card .say-snippet-icons .say-snippet-button.say-snippet-remove-button { color: var(--au-red-600); border-color: var(--au-red-600); } .say-snippet-card .say-snippet-icons .say-snippet-button .say-snippet-button-text { display: none; position: absolute !important; right: 38px; border: 1px solid; border-radius: 3px; width: max-content; font-size: 1.2rem; height: 32px; padding-right: 1rem; padding-left: 1rem; align-items: center; background-color: #fff; } .say-snippet-card .say-snippet-icons .say-snippet-button:hover .say-snippet-button-text { display: flex; } .ProseMirror-selectednode .say-snippet-content { background-color: var(--au-blue-200); } .ProseMirror-selectednode .say-snippet-title { background-color: var(--au-blue-300); } .ProseMirror-selectednode > .say-snippet-card > .say-snippet-title { cursor: grab; } .ember-node.say-active:has(> .say-snippet-card) { outline: none; } .ember-node.say-active > .say-snippet-card { border-color: var(--au-blue-700); border-width: 0.2rem; } .ember-node.say-active > .say-snippet-card > .say-snippet-title { border-bottom-color: var(--au-blue-700); border-bottom-width: 0.2rem; } .say-snippet.say-snippet-placeholder { display: flex; flex-direction: row; padding: 1.2rem 1.8rem; background-color: var(--au-orange-300); border-radius: var(--au-radius); border: 0.1rem solid var(--au-orange-500); cursor: pointer; } .say-snippet.say-snippet-placeholder .say-snippet-placeholder__icon { background-color: var(--au-orange-500); color: black; height: 2.3rem; width: 2.4rem; margin-right: 1.2rem; border-radius: 4.8rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .say-snippet.say-snippet-placeholder .say-snippet-placeholder__content { margin-top: 0; } .say-snippet.say-snippet-placeholder .say-snippet-placeholder__title { color: var(--au-orange-700); font-weight: var(--au-medium); } .say-snippet.say-snippet-placeholder .say-snippet-placeholder__button { margin: 0; padding: 0; } .ProseMirror-selectednode > .say-snippet.say-snippet-placeholder { background-color: var(--au-blue-200); cursor: grab; } div[typeof="besluitpublicatie:Documentonderdeel"] .say-snippet.say-snippet-placeholder { background-color: var(--au-gray-300); } .location-modal .au-c-form-row > * { width: 100%; } .location-modal .au-c-modal__body { padding: 1.2rem; padding-bottom: 0; } .location-modal .au-c-modal__body > .au-o-grid { height: 100%; } .location-modal .edit-form { height: 100%; overflow: scroll; } .location-modal .map-wrapper { height: 100%; } .location-modal .map-cursor-pointer > .leaflet-grab { cursor: pointer; } .location-modal .leaflet-container { height: 100%; } .say-structure { border: 0.1rem solid var(--au-gray-300); border-radius: var(--au-radius); display: flex; flex-direction: column; white-space: normal; } .say-structure__header { background-color: var(--au-gray-100); padding-left: 0.7rem; border-bottom: 1px solid var(--au-gray-300); border-radius: 0.1em 0.1em 0 0; cursor: pointer; } .say-structure__header .say-structure__header-element { margin: 0; font-weight: var(--au-medium); /* font-size: var(--au-h-functional); */ gap: 5px; flex-direction: row; flex-wrap: nowrap; display: flex; width: 100%; align-content: baseline; } .say-structure__header .say-structure__header-element .say-structure__name { flex: 0 0 content; } .say-structure__header .say-structure__header-element .say-structure__title { flex: 1 1 100%; cursor: text; border: none; flex-grow: 1; display: inline-block; padding: 0; white-space: break-spaces; word-break: break-word; word-wrap: break-word; } .say-structure__header .say-structure__header-element .say-structure__title:focus { outline: none; } .say-structure__header h1.say-structure__header-element { font-size: var(--au-h1); } .say-structure__header h2.say-structure__header-element { font-size: var(--au-h2); } .say-structure__header h3.say-structure__header-element { font-size: var(--au-h3); } .say-structure__header h4.say-structure__header-element { font-size: var(--au-h4); } .say-structure__header h5.say-structure__header-element { font-size: var(--au-h5); } .say-structure__header h6.say-structure__header-element { font-size: var(--au-h6); } .say-structure > [data-slot] { margin-top: 0; } .say-structure__content { margin-top: 0; padding: 0.7rem; padding-right: 3rem; } .say-structure__content [data-slot] { white-space: break-spaces; word-break: break-word; word-wrap: break-word; } .ember-node.say-active:has(> .say-structure) { outline: none; } .ember-node.say-active > .say-structure { border-color: var(--au-blue-700); border-width: 0.2rem; } .ember-node.say-active > .say-structure > .say-structure__header { border-bottom-color: var(--au-blue-700); border-bottom-width: 0.2rem; } .ember-node.ProseMirror-selectednode > .say-structure:not(:has(.ProseMirror-focused)) { background-color: var(--au-blue-200); } .ember-node.ProseMirror-selectednode > .say-structure:not(:has(.ProseMirror-focused)) > .say-structure__header { background-color: var(--au-blue-300); } .ember-node.ProseMirror-selectednode > .say-structure:not(:has(.ProseMirror-focused)) > .say-structure__header { cursor: grab; } .ember-node.ProseMirror-selectednode > .say-structure:not(:has(.ProseMirror-focused)) > .say-structure__header .say-structure__header { cursor: text; } .say-mandatee-table-node { border: 1px solid var(--au-blue-300); border-radius: var(--au-radius); } .say-mandatee-table-node .say-mandatee-table-header { display: flex; flex-direction: row; align-items: center; background-color: var(--au-blue-300); padding: 0.6rem 0.6rem 0.6rem 0.6rem; cursor: default; } .say-mandatee-table-node .say-mandatee-table__warning .au-c-alert__content { margin-top: 0; } .say-mandatee-table-node .say-mandatee-table-content { padding: 1.2rem; margin-top: 0; } .say-mandatee-table-node .say-mandatee-table__title { margin: 0; white-space: pre-line; } /* ================================== #APP CHROME ================================== */ /* Variables ========================================================================== */ /* Component ========================================================================== */ .au-c-app-chrome { position: relative; z-index: 9997; background-color: #ffffff; box-shadow: 0 1px 3px rgba(33, 35, 38, 0.1), 0 4px 20px rgba(33, 35, 38, 0.035), 0 1px 1px rgba(33, 35, 38, 0.025); } .au-c-app-chrome-container { height: calc(100vh - 9.6rem); } .au-c-app-chrome__entity { position: relative; font-weight: 500; padding-left: 1.2rem; margin-left: 1.2rem; } .au-c-app-chrome__entity::before { content: ""; display: block; position: absolute; top: 0.1rem; left: 0; transform: rotate(-19deg); width: 0.1rem; height: 2.3rem; background-color: #ccd1d9; } .au-c-app-chrome__status { font-style: italic; display: inline-flex; align-items: center; height: 2.4rem; line-height: 2.4rem; color: #69717c; padding: 0.3rem; } .au-c-app-chrome__title { font-size: 2rem; line-height: var(--au-global-line-height); display: block; position: relative; height: 3.6rem; line-height: 3.6rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 0.3rem; border: 0.1rem solid transparent; border-radius: 0.3rem; max-width: 33.6rem; } .au-c-app-chrome__title .au-c-button:after, .au-c-app-chrome__title .data-table-pagination-right button:after, .data-table-pagination-right .au-c-app-chrome__title button:after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; } @media (min-width: 71.25em) { .au-c-app-chrome__title { max-width: 43.2rem; } } @media (min-width: 80em) { .au-c-app-chrome__title { max-width: 52.8rem; } } @media (min-width: 83.75em) { .au-c-app-chrome__title { max-width: 62.4rem; } } @media (min-width: 100em) { .au-c-app-chrome__title { max-width: 72rem; } } @media (min-width: 93.75em) { .au-c-app-chrome__title { max-width: 81.6rem; } } .au-c-app-chrome__title--edit { transition: color 0.125s cubic-bezier(0.19, 1, 0.22, 1), border 0.125s cubic-bezier(0.19, 1, 0.22, 1); color: #2a2d31; } .au-c-app-chrome__title--edit:hover, .au-c-app-chrome__title--edit:focus { color: #545961; border: 0.1rem solid #e6e8eb; } .au-c-app-chrome__title--edit:focus { outline: 0.2rem dashed #ffc515; } .au-c-app-chrome__title-fade { color: #69717c; } .au-c-app-chrome__title-group { display: flex; flex-wrap: nowrap; width: 33.6rem; } @media (min-width: 63.9375em) { .au-c-app-chrome__title-group { width: 33.6rem; } } @media (min-width: 71.25em) { .au-c-app-chrome__title-group { width: 43.2rem; } } @media (min-width: 80em) { .au-c-app-chrome__title-group { width: 52.8rem; } } @media (min-width: 83.75em) { .au-c-app-chrome__title-group { width: 62.4rem; } } @media (min-width: 100em) { .au-c-app-chrome__title-group { width: 72rem; } } @media (min-width: 93.75em) { .au-c-app-chrome__title-group { width: 81.6rem; } } .au-c-app-chrome__title-input { font-size: 2rem; line-height: var(--au-global-line-height); font-family: "flanders-sans", BlinkMacSystemFont, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; display: block; width: 100%; padding: 0 0.3rem; height: 3.6rem; line-height: 3.6rem; border: 0.1rem solid #ccd1d9; border-radius: 0.3rem; border-top-right-radius: 0; border-bottom-right-radius: 0; color: #2a2d31; } .au-c-app-chrome__title-input:focus { outline: 0; } .au-c-button.au-c-app-chrome__title-button, .data-table-pagination-right button.au-c-app-chrome__title-button { border-color: #ccd1d9; border-top-right-radius: 0.3rem; border-bottom-right-radius: 0.3rem; border-left: 0; padding-left: 0.6rem; padding-right: 0.6rem; } .au-c-button.au-c-app-chrome__title-button:hover, .data-table-pagination-right button.au-c-app-chrome__title-button:hover { border-color: #ccd1d9; box-shadow: none; background-color: #f4f5f6; color: #2a2d31; } .au-c-button.au-c-app-chrome__title-button .au-c-icon, .data-table-pagination-right button.au-c-app-chrome__title-button .au-c-icon { width: 1.9rem; height: 1.9rem; } .au-c-toolbar--wrap { flex-wrap: wrap; } @media (min-width: 63.9375em) { .au-c-toolbar--wrap { flex-wrap: nowrap; } } /* ================================== #MEETING CHROME ================================== */ /* Variables ========================================================================== */ /* Component ========================================================================== */ .au-c-meeting { background-color: #f4f5f6; display: flex; flex-direction: row; } .au-c-meeting-chrome { width: 100%; padding: 2.4rem 1.2rem; flex-grow: 1; position: relative; overflow: scroll; z-index: 2; } .au-c-meeting__sidebar-left { padding: 2.4rem 1.2rem; padding-right: 0; align-self: flex-start; max-height: 100%; font-size: 1.6rem; line-height: var(--au-global-line-height); flex-shrink: 0; overflow: scroll; width: 38rem; z-index: 10; } @media (max-width: 78.125em) { .au-c-meeting__sidebar-left { position: absolute; right: 2.4rem; top: 1.2rem; max-height: calc(100% - 1.2rem); } } .au-c-meeting-chrome__paper { font-size: 1.6rem; line-height: var(--au-global-line-height); max-width: 1250px; position: relative; width: 100%; background-color: #ffffff; padding: 4.8rem; box-shadow: 0 0.1rem 0.3rem rgba(33, 35, 38, 0.1), 0 0.4rem 2rem rgba(33, 35, 38, 0.035), 0 0.1rem 0.1rem rgba(33, 35, 38, 0.025); cursor: default; } .au-c-meeting-chrome__paper:focus { outline: none; } .au-c-meeting-section { margin-bottom: 3.6rem; border-bottom: 0.2rem dotted #ccd1d9; } .au-c-meeting-chrome-card__small-title { font-size: 1.5rem; line-height: var(--au-global-line-height); font-weight: 500; } .au-c-meeting-chrome-card { position: relative; color: #545961; border: 0.1rem solid #ccd1d9; background-color: #f4f5f6; margin-top: 0.6rem; margin-bottom: 3.6rem; border-radius: 0.3rem; } .au-c-meeting-chrome-card > .au-c-button, .data-table-pagination-right .au-c-meeting-chrome-card > button { position: absolute; left: -0.1rem; width: calc(100% + 0.2rem); border-width: 0.1rem !important; border-color: #ccd1d9 !important; background-color: #ffffff; border-top-left-radius: 0; border-top-right-radius: 0; } .au-c-meeting-chrome-card + .au-c-button, .data-table-pagination-right .au-c-meeting-chrome-card + button { position: relative; margin-top: -1.3rem !important; border-width: 0.1rem !important; border-color: #ccd1d9 !important; border-top-left-radius: 0; border-top-right-radius: 0; } .au-c-meeting-chrome-card.au-u-margin-bottom-none + .au-c-button, .data-table-pagination-right .au-c-meeting-chrome-card.au-u-margin-bottom-none + button { margin-top: -0.1rem !important; } .au-c-meeting-chrome-card .au-c-editor-preview { border: 0; padding-left: 2.4rem; } .au-c-meeting-chrome-card .au-c-details-list__item { display: flex; flex-direction: column; } .au-c-meeting-chrome-card .au-c-details-list__label { font-weight: 500; font-style: normal; color: #69717c; } .au-c-meeting-chrome-card .au-c-details-list__value { display: flex; justify-content: start; align-items: baseline; gap: 0.5rem; } .au-c-meeting-chrome-card .au-c-details-list__value .au-c-details-list__value-pill { padding-top: 0.6rem; } .au-c-meeting-chrome-card .au-c-details-list__value .au-c-details-list__value-text { font-weight: 500; text-decoration: underline; border-bottom: none; color: #212326; padding-top: 0.6rem; } .au-c-meeting-chrome-card--editable { border: 0.1rem solid #ccd1d9; } .au-c-meeting-chrome-card--editor { background-color: #ffffff; } .au-c-meeting-chrome-card__title { background-color: #e6e8eb; padding: 0.6rem 1.2rem; border-bottom: 0.1rem solid #ccd1d9; } .au-c-meeting-chrome-card__title--flex { display: flex; justify-content: space-between; align-items: center; } .au-c-meeting-chrome-card__title--inset { margin-top: -1.2rem; margin-left: -1.2rem; margin-right: -1.2rem; } .au-c-meeting-chrome-editable { position: relative; padding-top: 1.2rem; color: #545961; } .au-c-meeting-chrome-editable .container-flex--contain { overflow: visible; margin-top: -2.4rem; border: 0.1rem solid #e6e8eb; } .au-c-meeting-chrome-editable .say-container { position: relative; z-index: 9; overflow: visible !important; } .au-c-meeting-chrome-editable .say-container__main { overflow: visible !important; } .au-c-meeting-chrome-editable .au-c-rdfa-editor { overflow: visible !important; } .au-c-meeting-chrome-editable .tasklist { display: none; } .au-c-meeting-chrome-editable .say-editor { background-color: transparent; padding: 1.8rem !important; overflow: visible !important; } .au-c-meeting-chrome-editable .say-editor__paper, .au-c-meeting-chrome-editable .say-editor__inner { min-height: 19.2rem !important; overflow: visible !important; } .au-c-meeting-chrome-editable .say-editor__paper { box-shadow: none; background-color: transparent; padding: 0; } .au-c-meeting-chrome-editable .say-editor:not(.show-rdfa-blocks) *:after { display: none !important; } .au-c-meeting-chrome-editable .say-editor:not(.show-rdfa-blocks) *:before { display: none !important; } .au-c-meeting-chrome-editable .say-toolbar { position: sticky; top: 0; left: 0; z-index: 1; width: 100%; } .au-c-meeting-chrome-editable .say-container__aside { left: calc(100% - 33.6rem); position: absolute; width: 33.6rem; height: 100%; overflow: visible; z-index: 999; padding: 1.2rem; } @media (min-width: 100em) { .au-c-meeting-chrome-editable .say-container__aside { left: calc(100% + 4.8rem); width: 38.4rem; } } .au-c-meeting-chrome-editable .say-editor-hints { position: sticky; top: 4.2rem; } .au-c-meeting-chrome-editable .say-editor-hints__list { position: sticky; top: 0; } .au-c-meeting-chrome-editable .say-toast { display: none !important; opacity: 0 !important; } .au-c-meeting-chrome-editable .say-modal--fullscreen { transform: translate(0) !important; top: 116px; left: 0; height: calc(100% - 136px); width: calc(100% - 4.8rem); } .au-c-meeting-chrome__highlight { display: inline-block; background-color: #fff9d5; margin-top: 0.3rem; } .au-c-meeting-chrome-table { font-size: 1.6rem; line-height: var(--au-global-line-height); display: table; position: relative; min-width: 50rem; width: 100%; border-collapse: separate; margin-bottom: -0.1rem; } .au-c-meeting-chrome-table strong { font-style: normal; font-weight: 500; border-bottom: 0.2rem dotted #ccd1d9; } .au-c-meeting-chrome-table thead { position: relative; width: 100%; z-index: 1; border-top: 0; border-bottom: 0.1rem solid #ccd1d9; font-size: 1.5rem; line-height: 1.2; } .au-c-meeting-chrome-table tr { background-color: #f4f5f6; position: relative; } .au-c-meeting-chrome-table th { font-weight: 500; text-align: left; padding: 0.6rem 1.2rem; border-radius: 0; } .au-c-meeting-chrome-table td { padding: 1.2rem; } .au-c-meeting-chrome-table th { white-space: nowrap; } .au-c-meeting-chrome-table th, .au-c-meeting-chrome-table td { border-bottom: 0.1rem solid #ccd1d9; max-width: 55ch; position: relative; vertical-align: middle; } .au-c-meeting-chrome-table th.is-selectable, .au-c-meeting-chrome-table td.is-selectable { width: 5.4rem; } .au-c-meeting-chrome-table th + th:after, .au-c-meeting-chrome-table td + td:after { content: ""; display: block; position: absolute; width: 0.1rem; left: -0.1rem; top: 0; height: 100%; border-left: 0.1rem dotted #ccd1d9; } .au-c-meeting-numbered-list { counter-reset: list-number; } .au-c-meeting-numbered-list > li + li { border-top: 0.1rem dashed #ccd1d9; } .au-c-meeting-numbered-list > li { position: relative; padding-bottom: 1.2rem; } .au-c-meeting-numbered-list > li::before { font-size: 1.3rem; line-height: var(--au-global-line-height); content: counter(list-number); counter-increment: list-number; position: absolute; display: flex; justify-content: center; align-items: center; left: -3rem; top: 1.56rem; color: #545961; font-weight: 500; width: 2.4rem; height: 2.4rem; background-color: #e6e8eb; border-radius: 2.4rem; } .gn-meeting-copy--section-container { position: relative; } .gn-meeting-copy--section-button { position: absolute; right: 0; top: 0; width: 0; } .gn-meeting-copy--section-container .gn-meeting-copy--section-container .gn-meeting-copy--section-button { right: -1rem; } .gn-meeting-copy--structure { border: 0.1rem solid var(--au-gray-300); border-radius: var(--au-radius); } .gn-meeting-copy--structure-header { background-color: var(--au-gray-100); border-bottom: 0.1rem solid var(--au-gray-300); padding-left: 0.7rem; font-weight: var(--au-medium); } .gn-meeting-copy--structure-content { margin: 1rem; } .meeting-validation-card { border: 0; box-shadow: 0 0.1rem 0.3rem rgba(33, 35, 38, 0.1), 0 0.4rem 2rem rgba(33, 35, 38, 0.035), 0 0.1rem 0.1rem rgba(33, 35, 38, 0.025); } .meeting-validation-card__icon { height: 2rem; width: 2rem; } .meeting-validation-card__icon .au-c-icon { height: 1.4rem; width: 1.4rem; } /* ================================== #RDFA EDITOR ================================== */ .au-c-rdfa-editor { height: 100%; position: relative; overflow: hidden; } .au-c-rdfa-editor [property=heeftNotulen], .au-c-rdfa-editor [property="ext:metadata"], .au-c-rdfa-editor [property="ext:templateVersion"] { border: 0 !important; clip: rect(0 0 0 0) !important; clip-path: inset(50%) !important; height: 1px !important; margin: -1px !important; overflow: hidden !important; padding: 0 !important; position: absolute !important; white-space: nowrap !important; width: 1px !important; } .au-c-rdfa-publication-holder { background-color: #f4f5f6; border-left: 0.1rem solid #e6e8eb; height: 100%; overflow: auto; } .au-c-rdfa-publication-aside { height: 100%; overflow: auto; } .au-c-rdfa-publication { padding: 2.4rem 4.5rem 2.4rem 2.4rem; margin: 2.4rem; background-color: #ffffff; box-shadow: 0 1px 3px rgba(33, 35, 38, 0.2), 0 4px 20px rgba(33, 35, 38, 0.035), 0 1px 1px rgba(33, 35, 38, 0.025); } .au-c-rdfa-publication *:before { display: none; } /* ================================== #ONBOARDING ================================== */ .au-c-onboarding-wrapper { position: relative; } .au-c-onboarding { font-size: 1.5rem; line-height: 1.3; font-family: "flanders-sans", BlinkMacSystemFont, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-weight: 400; color: #69717c; width: 28.8rem; font-style: italic; padding-left: 2.7rem; background-color: #e6e8eb; border-radius: 0.3rem; padding-top: 0.6rem; padding-bottom: 0.6rem; position: relative; display: block; width: 100%; margin-top: 1.2rem; } .au-c-onboarding .au-c-icon { position: absolute; top: 0.75rem; left: 0.5rem; width: 1.6rem; height: 1.6rem; } @media (min-width: 100em) { .au-c-onboarding { width: 33.6rem; position: absolute; top: 0; left: calc(100% + 7.2rem); margin-top: 0; } } .au-c-onboarding--error { color: #d92626; border: 0.1rem solid #f7e3e3; background-color: #fcf3f3; font-weight: 500; font-style: normal; } .au-c-onboarding--error .au-c-icon { color: #d92626; } /* ========================================================================== #EDITOR-PREVIEW Used in the publish flow ========================================================================== */ .au-c-editor-preview { padding: 1.2rem 2.4rem 1.2rem; border: 0.1rem solid #e6e8eb; background-color: #f4f5f6; } .au-c-editor-preview h5 { font-weight: 500; } .au-c-editor-preview [property="besluit:geplandOpenbaar"], .au-c-editor-preview [property="http://data.vlaanderen.be/ns/besluit#geplandOpenbaar"], .au-c-editor-preview [property="besluit:openbaar"], .au-c-editor-preview [property="http://data.vlaanderen.be/ns/besluit#openbaar"], .au-c-rdfa-publication [property="besluit:geplandOpenbaar"], .au-c-rdfa-publication [property="http://data.vlaanderen.be/ns/besluit#geplandOpenbaar"], .au-c-rdfa-publication [property="besluit:openbaar"], .au-c-rdfa-publication [property="http://data.vlaanderen.be/ns/besluit#openbaar"] { font-size: 1.6rem; line-height: var(--au-global-line-height); color: #69717c; text-transform: initial; letter-spacing: 0; } .au-c-editor-preview [typeof="besluit:BehandelingVanAgendapunt"] [property="besluit:geplandOpenbaar"] i, .au-c-editor-preview [typeof="besluit:BehandelingVanAgendapunt"] [property="http://data.vlaanderen.be/ns/besluit#geplandOpenbaar"] i, .au-c-editor-preview [typeof="besluit:BehandelingVanAgendapunt"] [property="besluit:geplandOpenbaar"] em, .au-c-editor-preview [typeof="besluit:BehandelingVanAgendapunt"] [property="http://data.vlaanderen.be/ns/besluit#geplandOpenbaar"] em, .au-c-editor-preview [typeof="besluit:BehandelingVanAgendapunt"] [property="besluit:openbaar"] i, .au-c-editor-preview [typeof="besluit:BehandelingVanAgendapunt"] [property="http://data.vlaanderen.be/ns/besluit#openbaar"] i, .au-c-editor-preview [typeof="besluit:BehandelingVanAgendapunt"] [property="besluit:openbaar"] em, .au-c-editor-preview [typeof="besluit:BehandelingVanAgendapunt"] [property="http://data.vlaanderen.be/ns/besluit#openbaar"] em, .au-c-editor-preview [typeof="http://data.vlaanderen.be/ns/besluit#BehandelingVanAgendapunt"] [property="ext:behandelt"] [property="besluit:geplandOpenbaar"] i, .au-c-editor-preview [typeof="http://data.vlaanderen.be/ns/besluit#BehandelingVanAgendapunt"] [property="ext:behandelt"] [property="http://data.vlaanderen.be/ns/besluit#geplandOpenbaar"] i, .au-c-editor-preview [typeof="http://data.vlaanderen.be/ns/besluit#BehandelingVanAgendapunt"] [property="ext:behandelt"] [property="besluit:geplandOpenbaar"] em, .au-c-editor-preview [typeof="http://data.vlaanderen.be/ns/besluit#BehandelingVanAgendapunt"] [property="ext:behandelt"] [property="http://data.vlaanderen.be/ns/besluit#geplandOpenbaar"] em, .au-c-editor-preview [typeof="http://data.vlaanderen.be/ns/besluit#BehandelingVanAgendapunt"] [property="ext:behandelt"] [property="besluit:openbaar"] i, .au-c-editor-preview [typeof="http://data.vlaanderen.be/ns/besluit#BehandelingVanAgendapunt"] [property="ext:behandelt"] [property="http://data.vlaanderen.be/ns/besluit#openbaar"] i, .au-c-editor-preview [typeof="http://data.vlaanderen.be/ns/besluit#BehandelingVanAgendapunt"] [property="ext:behandelt"] [property="besluit:openbaar"] em, .au-c-editor-preview [typeof="http://data.vlaanderen.be/ns/besluit#BehandelingVanAgendapunt"] [property="ext:behandelt"] [property="http://data.vlaanderen.be/ns/besluit#openbaar"] em, .au-c-editor-preview [property="http://mu.semte.ch/vocabularies/ext/behandelt"] [property="besluit:geplandOpenbaar"] i, .au-c-editor-preview [property="http://mu.semte.ch/vocabularies/ext/behandelt"] [property="http://data.vlaanderen.be/ns/besluit#geplandOpenbaar"] i, .au-c-editor-preview [property="http://mu.semte.ch/vocabularies/ext/behandelt"] [property="besluit:geplandOpenbaar"] em, .au-c-editor-preview [property="http://mu.semte.ch/vocabularies/ext/behandelt"] [property="http://data.vlaanderen.be/ns/besluit#geplandOpenbaar"] em, .au-c-editor-preview [property="http://mu.semte.ch/vocabularies/ext/behandelt"] [property="besluit:openbaar"] i, .au-c-editor-preview [property="http://mu.semte.ch/vocabularies/ext/behandelt"] [property="http://data.vlaanderen.be/ns/besluit#openbaar"] i, .au-c-editor-preview [property="http://mu.semte.ch/vocabularies/ext/behandelt"] [property="besluit:openbaar"] em, .au-c-editor-preview [property="http://mu.semte.ch/vocabularies/ext/behandelt"] [property="http://data.vlaanderen.be/ns/besluit#openbaar"] em, .au-c-editor-preview [property="besluit:heeftAgendapunt"] [property="besluit:geplandOpenbaar"] i, .au-c-editor-preview [property="besluit:heeftAgendapunt"] [property="http://data.vlaanderen.be/ns/besluit#geplandOpenbaar"] i, .au-c-editor-preview [property="besluit:heeftAgendapunt"] [property="besluit:geplandOpenbaar"] em, .au-c-editor-preview [property="besluit:heeftAgendapunt"] [property="http://data.vlaanderen.be/ns/besluit#geplandOpenbaar"] em, .au-c-editor-preview [property="besluit:heeftAgendapunt"] [property="besluit:openbaar"] i, .au-c-editor-preview [property="besluit:heeftAgendapunt"] [property="http://data.vlaanderen.be/ns/besluit#openbaar"] i, .au-c-editor-preview [property="besluit:heeftAgendapunt"] [property="besluit:openbaar"] em, .au-c-editor-preview [property="besluit:heeftAgendapunt"] [property="http://data.vlaanderen.be/ns/besluit#openbaar"] em, .au-c-editor-preview [property="http://data.vlaanderen.be/ns/besluit#heeftAgendapunt"] [property="besluit:geplandOpenbaar"] i, .au-c-editor-preview [property="http://data.vlaanderen.be/ns/besluit#heeftAgendapunt"] [property="http://data.vlaanderen.be/ns/besluit#geplandOpenbaar"] i, .au-c-editor-preview [property="http://data.vlaanderen.be/ns/besluit#heeftAgendapunt"] [property="besluit:geplandOpenbaar"] em, .au-c-editor-preview [property="http://data.vlaanderen.be/ns/besluit#heeftAgendapunt"] [property="http://data.vlaanderen.be/ns/besluit#geplandOpenbaar"] em, .au-c-editor-preview [property="http://data.vlaanderen.be/ns/besluit#heeftAgendapunt"] [property="besluit:openbaar"] i, .au-c-editor-preview [property="http://data.vlaanderen.be/ns/besluit#heeftAgendapunt"] [property="http://data.vlaanderen.be/ns/besluit#openbaar"] i, .au-c-editor-preview [property="http://data.vlaanderen.be/ns/besluit#heeftAgendapunt"] [property="besluit:openbaar"] em, .au-c-editor-preview [property="http://data.vlaanderen.be/ns/besluit#heeftAgendapunt"] [property="http://data.vlaanderen.be/ns/besluit#openbaar"] em, .au-c-editor-preview [typeof="besluit:Agendapunt"] [property="besluit:geplandOpenbaar"] i, .au-c-editor-preview [typeof="besluit:Agendapunt"] [property="http://data.vlaanderen.be/ns/besluit#geplandOpenbaar"] i, .au-c-editor-preview [typeof="besluit:Agendapunt"] [property="besluit:geplandOpenbaar"] em, .au-c-editor-preview [typeof="besluit:Agendapunt"] [property="http://data.vlaanderen.be/ns/besluit#geplandOpenbaar"] em, .au-c-editor-preview [typeof="besluit:Agendapunt"] [property="besluit:openbaar"] i, .au-c-editor-preview [typeof="besluit:Agendapunt"] [property="http://data.vlaanderen.be/ns/besluit#openbaar"] i, .au-c-editor-preview [typeof="besluit:Agendapunt"] [property="besluit:openbaar"] em, .au-c-editor-preview [typeof="besluit:Agendapunt"] [property="http://data.vlaanderen.be/ns/besluit#openbaar"] em, .au-c-editor-preview [typeof="http://data.vlaanderen.be/ns/besluit#Agendapunt"] [property="besluit:geplandOpenbaar"] i, .au-c-editor-preview [typeof="http://data.vlaanderen.be/ns/besluit#Agendapunt"] [property="http://data.vlaanderen.be/ns/besluit#geplandOpenbaar"] i, .au-c-editor-preview [typeof="http://data.vlaanderen.be/ns/besluit#Agendapunt"] [property="besluit:geplandOpenbaar"] em, .au-c-editor-preview [typeof="http://data.vlaanderen.be/ns/besluit#Agendapunt"] [property="http://data.vlaanderen.be/ns/besluit#geplandOpenbaar"] em, .au-c-editor-preview [typeof="http://data.vlaanderen.be/ns/besluit#Agendapunt"] [property="besluit:openbaar"] i, .au-c-editor-preview [typeof="http://data.vlaanderen.be/ns/besluit#Agendapunt"] [property="http://data.vlaanderen.be/ns/besluit#openbaar"] i, .au-c-editor-preview [typeof="http://data.vlaanderen.be/ns/besluit#Agendapunt"] [property="besluit:openbaar"] em, .au-c-editor-preview [typeof="http://data.vlaanderen.be/ns/besluit#Agendapunt"] [property="http://data.vlaanderen.be/ns/besluit#openbaar"] em, .au-c-rdfa-publication [typeof="besluit:BehandelingVanAgendapunt"] [property="besluit:geplandOpenbaar"] i, .au-c-rdfa-publication [typeof="besluit:BehandelingVanAgendapunt"] [property="http://data.vlaanderen.be/ns/besluit#geplandOpenbaar"] i, .au-c-rdfa-publication [typeof="besluit:BehandelingVanAgendapunt"] [property="besluit:geplandOpenbaar"] em, .au-c-rdfa-publication [typeof="besluit:BehandelingVanAgendapunt"] [property="http://data.vlaanderen.be/ns/besluit#geplandOpenbaar"] em, .au-c-rdfa-publication [typeof="besluit:BehandelingVanAgendapunt"] [property="besluit:openbaar"] i, .au-c-rdfa-publication [typeof="besluit:BehandelingVanAgendapunt"] [property="http://data.vlaanderen.be/ns/besluit#openbaar"] i, .au-c-rdfa-publication [typeof="besluit:BehandelingVanAgendapunt"] [property="besluit:openbaar"] em, .au-c-rdfa-publication [typeof="besluit:BehandelingVanAgendapunt"] [property="http://data.vlaanderen.be/ns/besluit#openbaar"] em, .au-c-rdfa-publication [typeof="http://data.vlaanderen.be/ns/besluit#BehandelingVanAgendapunt"] [property="ext:behandelt"] [property="besluit:geplandOpenbaar"] i, .au-c-rdfa-publication [typeof="http://data.vlaanderen.be/ns/besluit#BehandelingVanAgendapunt"] [property="ext:behandelt"] [property="http://data.vlaanderen.be/ns/besluit#geplandOpenbaar"] i, .au-c-rdfa-publication [typeof="http://data.vlaanderen.be/ns/besluit#BehandelingVanAgendapunt"] [property="ext:behandelt"] [property="besluit:geplandOpenbaar"] em, .au-c-rdfa-publication [typeof="http://data.vlaanderen.be/ns/besluit#BehandelingVanAgendapunt"] [property="ext:behandelt"] [property="http://data.vlaanderen.be/ns/besluit#geplandOpenbaar"] em, .au-c-rdfa-publication [typeof="http://data.vlaanderen.be/ns/besluit#BehandelingVanAgendapunt"] [property="ext:behandelt"] [property="besluit:openbaar"] i, .au-c-rdfa-publication [typeof="http://data.vlaanderen.be/ns/besluit#BehandelingVanAgendapunt"] [property="ext:behandelt"] [property="http://data.vlaanderen.be/ns/besluit#openbaar"] i, .au-c-rdfa-publication [typeof="http://data.vlaanderen.be/ns/besluit#BehandelingVanAgendapunt"] [property="ext:behandelt"] [property="besluit:openbaar"] em, .au-c-rdfa-publication [typeof="http://data.vlaanderen.be/ns/besluit#BehandelingVanAgendapunt"] [property="ext:behandelt"] [property="http://data.vlaanderen.be/ns/besluit#openbaar"] em, .au-c-rdfa-publication [property="http://mu.semte.ch/vocabularies/ext/behandelt"] [property="besluit:geplandOpenbaar"] i, .au-c-rdfa-publication [property="http://mu.semte.ch/vocabularies/ext/behandelt"] [property="http://data.vlaanderen.be/ns/besluit#geplandOpenbaar"] i, .au-c-rdfa-publication [property="http://mu.semte.ch/vocabularies/ext/behandelt"] [property="besluit:geplandOpenbaar"] em, .au-c-rdfa-publication [property="http://mu.semte.ch/vocabularies/ext/behandelt"] [property="http://data.vlaanderen.be/ns/besluit#geplandOpenbaar"] em, .au-c-rdfa-publication [property="http://mu.semte.ch/vocabularies/ext/behandelt"] [property="besluit:openbaar"] i, .au-c-rdfa-publication [property="http://mu.semte.ch/vocabularies/ext/behandelt"] [property="http://data.vlaanderen.be/ns/besluit#openbaar"] i, .au-c-rdfa-publication [property="http://mu.semte.ch/vocabularies/ext/behandelt"] [property="besluit:openbaar"] em, .au-c-rdfa-publication [property="http://mu.semte.ch/vocabularies/ext/behandelt"] [property="http://data.vlaanderen.be/ns/besluit#openbaar"] em, .au-c-rdfa-publication [property="besluit:heeftAgendapunt"] [property="besluit:geplandOpenbaar"] i, .au-c-rdfa-publication [property="besluit:heeftAgendapunt"] [property="http://data.vlaanderen.be/ns/besluit#geplandOpenbaar"] i, .au-c-rdfa-publication [property="besluit:heeftAgendapunt"] [property="besluit:geplandOpenbaar"] em, .au-c-rdfa-publication [property="besluit:heeftAgendapunt"] [property="http://data.vlaanderen.be/ns/besluit#geplandOpenbaar"] em, .au-c-rdfa-publication [property="besluit:heeftAgendapunt"] [property="besluit:openbaar"] i, .au-c-rdfa-publication [property="besluit:heeftAgendapunt"] [property="http://data.vlaanderen.be/ns/besluit#openbaar"] i, .au-c-rdfa-publication [property="besluit:heeftAgendapunt"] [property="besluit:openbaar"] em, .au-c-rdfa-publication [property="besluit:heeftAgendapunt"] [property="http://data.vlaanderen.be/ns/besluit#openbaar"] em, .au-c-rdfa-publication [property="http://data.vlaanderen.be/ns/besluit#heeftAgendapunt"] [property="besluit:geplandOpenbaar"] i, .au-c-rdfa-publication [property="http://data.vlaanderen.be/ns/besluit#heeftAgendapunt"] [property="http://data.vlaanderen.be/ns/besluit#geplandOpenbaar"] i, .au-c-rdfa-publication [property="http://data.vlaanderen.be/ns/besluit#heeftAgendapunt"] [property="besluit:geplandOpenbaar"] em, .au-c-rdfa-publication [property="http://data.vlaanderen.be/ns/besluit#heeftAgendapunt"] [property="http://data.vlaanderen.be/ns/besluit#geplandOpenbaar"] em, .au-c-rdfa-publication [property="http://data.vlaanderen.be/ns/besluit#heeftAgendapunt"] [property="besluit:openbaar"] i, .au-c-rdfa-publication [property="http://data.vlaanderen.be/ns/besluit#heeftAgendapunt"] [property="http://data.vlaanderen.be/ns/besluit#openbaar"] i, .au-c-rdfa-publication [property="http://data.vlaanderen.be/ns/besluit#heeftAgendapunt"] [property="besluit:openbaar"] em, .au-c-rdfa-publication [property="http://data.vlaanderen.be/ns/besluit#heeftAgendapunt"] [property="http://data.vlaanderen.be/ns/besluit#openbaar"] em, .au-c-rdfa-publication [typeof="besluit:Agendapunt"] [property="besluit:geplandOpenbaar"] i, .au-c-rdfa-publication [typeof="besluit:Agendapunt"] [property="http://data.vlaanderen.be/ns/besluit#geplandOpenbaar"] i, .au-c-rdfa-publication [typeof="besluit:Agendapunt"] [property="besluit:geplandOpenbaar"] em, .au-c-rdfa-publication [typeof="besluit:Agendapunt"] [property="http://data.vlaanderen.be/ns/besluit#geplandOpenbaar"] em, .au-c-rdfa-publication [typeof="besluit:Agendapunt"] [property="besluit:openbaar"] i, .au-c-rdfa-publication [typeof="besluit:Agendapunt"] [property="http://data.vlaanderen.be/ns/besluit#openbaar"] i, .au-c-rdfa-publication [typeof="besluit:Agendapunt"] [property="besluit:openbaar"] em, .au-c-rdfa-publication [typeof="besluit:Agendapunt"] [property="http://data.vlaanderen.be/ns/besluit#openbaar"] em, .au-c-rdfa-publication [typeof="http://data.vlaanderen.be/ns/besluit#Agendapunt"] [property="besluit:geplandOpenbaar"] i, .au-c-rdfa-publication [typeof="http://data.vlaanderen.be/ns/besluit#Agendapunt"] [property="http://data.vlaanderen.be/ns/besluit#geplandOpenbaar"] i, .au-c-rdfa-publication [typeof="http://data.vlaanderen.be/ns/besluit#Agendapunt"] [property="besluit:geplandOpenbaar"] em, .au-c-rdfa-publication [typeof="http://data.vlaanderen.be/ns/besluit#Agendapunt"] [property="http://data.vlaanderen.be/ns/besluit#geplandOpenbaar"] em, .au-c-rdfa-publication [typeof="http://data.vlaanderen.be/ns/besluit#Agendapunt"] [property="besluit:openbaar"] i, .au-c-rdfa-publication [typeof="http://data.vlaanderen.be/ns/besluit#Agendapunt"] [property="http://data.vlaanderen.be/ns/besluit#openbaar"] i, .au-c-rdfa-publication [typeof="http://data.vlaanderen.be/ns/besluit#Agendapunt"] [property="besluit:openbaar"] em, .au-c-rdfa-publication [typeof="http://data.vlaanderen.be/ns/besluit#Agendapunt"] [property="http://data.vlaanderen.be/ns/besluit#openbaar"] em { display: none; } .au-c-editor-preview div[typeof="ext:TemplateComment"], .au-c-editor-preview div[typeof="http://mu.semte.ch/vocabularies/ext/TemplateComment"], .au-c-rdfa-publication div[typeof="ext:TemplateComment"], .au-c-rdfa-publication div[typeof="http://mu.semte.ch/vocabularies/ext/TemplateComment"] { display: none; } /* Notulen treatment (public/private) ========================================================================== */ .au-c-editor-preview-treatment { margin-top: 1.2rem; margin-bottom: 1.2rem; border: 0.1rem solid #ccd1d9; } .au-c-editor-preview-treatment .behandeling { margin-top: 2.4rem; padding-left: 2.4rem; transition: all 200ms; padding-right: 11.4rem; } .au-c-editor-preview-treatment .behandeling [property="dc:subject"], .au-c-editor-preview-treatment .behandeling [property="http://purl.org/dc/elements/1.1/subject"], .au-c-editor-preview-treatment .behandeling [property="eli:title"], .au-c-editor-preview-treatment .behandeling [property="http://data.europa.eu/eli/ontology#title"], .au-c-editor-preview-treatment .behandeling [property="eli:description"], .au-c-editor-preview-treatment .behandeling [property="http://data.europa.eu/eli/ontology#description"], .au-c-editor-preview-treatment .behandeling [property="besluit:openbaar"], .au-c-editor-preview-treatment .behandeling [property="http://data.vlaanderen.be/ns/besluit#openbaar"], .au-c-editor-preview-treatment .behandeling div[property^="ext:insert"], .au-c-editor-preview-treatment .behandeling div[property^="ext:insert"], .au-c-editor-preview-treatment .behandeling [data-flagged-remove=complete], .au-c-editor-preview-treatment .behandeling [data-flagged-remove=complete] { margin-top: 0.5rem; } .au-c-editor-preview-treatment .behandeling [property="dc:subject"]::after, .au-c-editor-preview-treatment .behandeling [property="http://purl.org/dc/elements/1.1/subject"]::after, .au-c-editor-preview-treatment .behandeling [property="eli:title"]::after, .au-c-editor-preview-treatment .behandeling [property="http://data.europa.eu/eli/ontology#title"]::after, .au-c-editor-preview-treatment .behandeling [property="eli:description"]::after, .au-c-editor-preview-treatment .behandeling [property="http://data.europa.eu/eli/ontology#description"]::after, .au-c-editor-preview-treatment .behandeling [property="besluit:openbaar"]::after, .au-c-editor-preview-treatment .behandeling [property="http://data.vlaanderen.be/ns/besluit#openbaar"]::after, .au-c-editor-preview-treatment .behandeling div[property^="ext:insert"]::after, .au-c-editor-preview-treatment .behandeling div[property^="ext:insert"]::after, .au-c-editor-preview-treatment .behandeling [data-flagged-remove=complete]::after, .au-c-editor-preview-treatment .behandeling [data-flagged-remove=complete]::after { font-size: 1.5rem; line-height: 1; position: absolute; right: -11.5rem; top: 0rem; width: 9rem; font-size: 1.3rem; text-transform: uppercase; letter-spacing: 1px; line-height: 1.1; font-weight: 400; padding: 0 0.2rem 0 0; font-family: "flanders-sans", sans-serif; } .au-c-editor-preview-treatment div[typeof="ext:TemplateComment"], .au-c-editor-preview-treatment div[typeof="http://mu.semte.ch/vocabularies/ext/TemplateComment"] { display: none; } .au-c-editor-preview-treatment--private .behandeling > * { color: #a1abba; } .au-c-editor-preview-treatment--private .behandeling [property="dc:subject"], .au-c-editor-preview-treatment--private .behandeling [property="http://purl.org/dc/elements/1.1/subject"], .au-c-editor-preview-treatment--private .behandeling [property="eli:title"], .au-c-editor-preview-treatment--private .behandeling [property="http://data.europa.eu/eli/ontology#title"], .au-c-editor-preview-treatment--private .behandeling [property="eli:description"], .au-c-editor-preview-treatment--private .behandeling [property="http://data.europa.eu/eli/ontology#description"], .au-c-editor-preview-treatment--private .behandeling [property="besluit:openbaar"], .au-c-editor-preview-treatment--private .behandeling [property="http://data.vlaanderen.be/ns/besluit#openbaar"] { position: relative; background-color: rgba(14, 94, 184, 0.2); box-shadow: inset -4px 0 0 0 #0e5eb8; width: 100%; display: block; color: #212326; } .au-c-editor-preview-treatment--private .behandeling [property="dc:subject"]:after, .au-c-editor-preview-treatment--private .behandeling [property="http://purl.org/dc/elements/1.1/subject"]:after, .au-c-editor-preview-treatment--private .behandeling [property="eli:title"]:after, .au-c-editor-preview-treatment--private .behandeling [property="http://data.europa.eu/eli/ontology#title"]:after, .au-c-editor-preview-treatment--private .behandeling [property="eli:description"]:after, .au-c-editor-preview-treatment--private .behandeling [property="http://data.europa.eu/eli/ontology#description"]:after, .au-c-editor-preview-treatment--private .behandeling [property="besluit:openbaar"]:after, .au-c-editor-preview-treatment--private .behandeling [property="http://data.vlaanderen.be/ns/besluit#openbaar"]:after { color: #073261; content: "Publieke informatie"; border-right: 4px solid #0e5eb8; } .au-c-editor-preview-treatment--private .behandeling [property="dc:subject"] { width: auto; flex-grow: 1; margin-top: 0; } .au-c-editor-preview-treatment--private .behandeling [typeof="besluit:BehandelingVanAgendapunt"] > h3 { display: flex; flex-direction: row; align-items: center; } .au-c-editor-preview-treatment-toggle-box { border: 0.1rem solid #ccd1d9; background-color: #e6e8eb; } .au-c-editor-preview-treatment-toggle-box .au-c-toggle-switch__toggle { background-color: #ccd1d9; } .au-c-editor-preview-treatment__info { transition: all 200ms; padding: 2.4rem; border-bottom: 0.1rem solid #ccd1d9; background-color: #e6e8eb; } .au-c-editor-preview-treatment__info .au-c-toggle-switch__toggle { background-color: #ccd1d9; } .au-c-editor-preview-treatment__info--private .checkbox--switch + .checkbox--switch__label:after { border-color: #ccd1d9; } /* Behandeling overview ========================================================================== */ .behandeling-preview div[property^="ext:insert"], .behandeling-preview div[property^="ext:insert"], .behandeling-preview [data-flagged-remove=complete], .behandeling-preview [data-flagged-remove=complete] { background-color: #fee539; color: #000000; } .behandeling-preview div[property^="ext:insert"]:after, .behandeling-preview div[property^="ext:insert"]:after, .behandeling-preview [data-flagged-remove=complete]:after, .behandeling-preview [data-flagged-remove=complete]:after { content: "Informatie ontbreekt"; border-right: 4px solid #fee539; } .behandeling-preview div[typeof="ext:TemplateComment"], .behandeling-preview div[typeof="http://mu.semte.ch/vocabularies/ext/TemplateComment"] { display: none; } .behandeling-preview div[property^="ext:insert"], .steps div[property^="ext:insert"] { position: relative; } .behandeling-preview [data-flagged-remove=complete]:before, .steps [data-flagged-remove=complete]:before { content: "Leeg veld"; font-weight: 300; color: #69717c; } /* Style publishing animation ========================================================================== */ .au-c-scanner { position: absolute !important; top: 0; left: 0; width: 100%; height: 100%; backface-visibility: hidden; pointer-events: none; } .au-c-scanner:after { content: ""; display: block; left: 0; right: 0; top: 0; bottom: 0; position: absolute; background-color: rgba(255, 255, 255, 0.7); } .au-c-scanner .au-c-loader { margin-left: auto; margin-right: auto; } .au-c-scanner .au-c-loader::before { height: 0.4rem !important; } .au-c-scanner__text { position: absolute; left: 0; top: 0; right: 0; bottom: 0; padding-top: 9.6rem; text-align: center; z-index: 10; } .au-c-scanner__bar { position: absolute; left: 0; top: 0; height: 100%; background-color: #fee539; z-index: 1; animation: move 3s cubic-bezier(0.15, 0.44, 0.76, 0.64); animation-iteration-count: infinite; border-right: 1rem #fee539 solid; margin-top: 0; } @keyframes move { 0% { width: 0; background-color: rgba(255, 255, 255, 0.5); } 100% { width: 100%; background-color: rgba(254, 229, 57, 0.5); } } /* Notulen preview missing data ========================================================================== */ .is-required[content=""] { display: inline-block; padding: 0.3rem 0.6rem; border-radius: 0.3rem; background-color: #d92626; } .is-required[content=""]:after { content: "Deze informatie is vereist om te kunnen publiceren"; color: #ffffff; } [data--language=en] .is-required[content=""]:after { content: "Warning: You must fill this information"; } /* ================================== #PUBLISHED TEMPLATE ================================== */ .au-c-template h1, .au-c-editor-preview h1 { font-size: var(--au-h2); line-height: var(--au-global-line-height); font-family: var(--au-font); font-weight: var(--au-medium); color: var(--au-gray-900); } .au-c-template h2, .au-c-editor-preview h2 { font-size: var(--au-h4); line-height: var(--au-global-line-height); font-family: var(--au-font); font-weight: var(--au-medium); color: var(--au-gray-900); } .au-c-template h3, .au-c-editor-preview h3 { font-size: var(--au-h5); line-height: var(--au-global-line-height); font-family: var(--au-font); font-weight: var(--au-medium); color: var(--au-gray-900); } .au-c-template h4, .au-c-editor-preview h4 { font-size: var(--au-h6); line-height: var(--au-global-line-height); font-family: var(--au-font); font-weight: var(--au-medium); color: var(--au-gray-900); } .au-c-template h5, .au-c-template h6, .au-c-editor-preview h5, .au-c-editor-preview h6 { font-size: var(--au-h6); line-height: var(--au-global-line-height); font-family: var(--au-font); font-weight: var(--au-medium); color: var(--au-gray-900); } .au-c-template p + *, .au-c-editor-preview p + * { margin-top: 0.6rem; } .au-c-template h1 + *, .au-c-template h2 + *, .au-c-template h3 + *, .au-c-template h4 + *, .au-c-template h5 + *, .au-c-template h6 + *, .au-c-editor-preview h1 + *, .au-c-editor-preview h2 + *, .au-c-editor-preview h3 + *, .au-c-editor-preview h4 + *, .au-c-editor-preview h5 + *, .au-c-editor-preview h6 + * { margin-top: 1.2rem; } .au-c-template div + h1, .au-c-template div + h2, .au-c-template div + h3, .au-c-template div + h4, .au-c-template div + h5, .au-c-template div + h6, .au-c-editor-preview div + h1, .au-c-editor-preview div + h2, .au-c-editor-preview div + h3, .au-c-editor-preview div + h4, .au-c-editor-preview div + h5, .au-c-editor-preview div + h6 { margin-top: 2.4rem; } .au-c-template table, .au-c-editor-preview table { font-size: 1.6rem; line-height: var(--au-global-line-height); display: table; table-layout: fixed; position: relative; width: 100%; border-collapse: collapse; border: 0.1rem solid #ccd1d9; white-space: normal; } .au-c-template table:has(colgroup), .au-c-editor-preview table:has(colgroup) { table-layout: auto; } .au-c-template table + .au-c-template table, .au-c-template table + .au-c-editor-preview table, .au-c-editor-preview table + .au-c-template table, .au-c-editor-preview table + .au-c-editor-preview table { margin-top: 2.4rem; } .au-c-template table thead, .au-c-editor-preview table thead { border-bottom: 0.2rem solid #ccd1d9; } .au-c-template table th, .au-c-template table td, .au-c-editor-preview table th, .au-c-editor-preview table td { font-size: 1.5rem; line-height: 1.2; text-align: left; padding: 1.2rem 1.2rem; min-height: 4.8rem; } .au-c-template table th, .au-c-editor-preview table th { font-weight: 500; } .au-c-template table tr + tr, .au-c-editor-preview table tr + tr { border-top: 0.1rem solid #ccd1d9; } .au-c-template table th + th, .au-c-template table td + td, .au-c-editor-preview table th + th, .au-c-editor-preview table td + td { border-left: 0.1rem solid #ccd1d9; } .au-c-template table th, .au-c-template table td, .au-c-editor-preview table th, .au-c-editor-preview table td { max-width: 55ch; } .au-c-template table th:focus, .au-c-template table td:focus, .au-c-editor-preview table th:focus, .au-c-editor-preview table td:focus { outline: none; } .au-c-template [property="besluit:geplandOpenbaar"], .au-c-template [property="http://data.vlaanderen.be/ns/besluit#geplandOpenbaar"], .au-c-template [property="besluit:openbaar"], .au-c-template [property="http://data.vlaanderen.be/ns/besluit#openbaar"], .au-c-editor-preview [property="besluit:geplandOpenbaar"], .au-c-editor-preview [property="http://data.vlaanderen.be/ns/besluit#geplandOpenbaar"], .au-c-editor-preview [property="besluit:openbaar"], .au-c-editor-preview [property="http://data.vlaanderen.be/ns/besluit#openbaar"] { font-size: 1.6rem !important; line-height: var(--au-global-line-height) !important; color: #69717c !important; text-transform: initial !important; letter-spacing: 0 !important; } .au-c-template [typeof="besluit:BehandelingVanAgendapunt"], .au-c-template [typeof="http://data.vlaanderen.be/ns/besluit#BehandelingVanAgendapunt"], .au-c-template [property="ext:behandelt"], .au-c-template [property="http://mu.semte.ch/vocabularies/ext/behandelt"], .au-c-template [property="besluit:heeftAgendapunt"], .au-c-template [property="http://data.vlaanderen.be/ns/besluit#heeftAgendapunt"], .au-c-template [typeof="besluit:Agendapunt"], .au-c-template [typeof="http://data.vlaanderen.be/ns/besluit#Agendapunt"], .au-c-editor-preview [typeof="besluit:BehandelingVanAgendapunt"], .au-c-editor-preview [typeof="http://data.vlaanderen.be/ns/besluit#BehandelingVanAgendapunt"], .au-c-editor-preview [property="ext:behandelt"], .au-c-editor-preview [property="http://mu.semte.ch/vocabularies/ext/behandelt"], .au-c-editor-preview [property="besluit:heeftAgendapunt"], .au-c-editor-preview [property="http://data.vlaanderen.be/ns/besluit#heeftAgendapunt"], .au-c-editor-preview [typeof="besluit:Agendapunt"], .au-c-editor-preview [typeof="http://data.vlaanderen.be/ns/besluit#Agendapunt"] { display: block !important; position: relative; } .au-c-template [property="besluit:geplandOpenbaar"]:before, .au-c-template [property="http://data.vlaanderen.be/ns/besluit#geplandOpenbaar"]:before, .au-c-template [property="besluit:openbaar"]:before, .au-c-template [property="http://data.vlaanderen.be/ns/besluit#openbaar"]:before, .au-c-editor-preview [property="besluit:geplandOpenbaar"]:before, .au-c-editor-preview [property="http://data.vlaanderen.be/ns/besluit#geplandOpenbaar"]:before, .au-c-editor-preview [property="besluit:openbaar"]:before, .au-c-editor-preview [property="http://data.vlaanderen.be/ns/besluit#openbaar"]:before { content: "" !important; color: #69717c !important; } .au-c-template [property="besluit:geplandOpenbaar"][content=false]:before, .au-c-template [property="http://data.vlaanderen.be/ns/besluit#geplandOpenbaar"][content=false]:before, .au-c-template [property="besluit:openbaar"][content=false]:before, .au-c-template [property="http://data.vlaanderen.be/ns/besluit#openbaar"][content=false]:before, .au-c-editor-preview [property="besluit:geplandOpenbaar"][content=false]:before, .au-c-editor-preview [property="http://data.vlaanderen.be/ns/besluit#geplandOpenbaar"][content=false]:before, .au-c-editor-preview [property="besluit:openbaar"][content=false]:before, .au-c-editor-preview [property="http://data.vlaanderen.be/ns/besluit#openbaar"][content=false]:before { content: "" !important; color: #69717c !important; } .au-c-template [property="besluit:geplandOpenbaar"]:after, .au-c-template [property="http://data.vlaanderen.be/ns/besluit#geplandOpenbaar"]:after, .au-c-template [property="besluit:openbaar"]:after, .au-c-template [property="http://data.vlaanderen.be/ns/besluit#openbaar"]:after, .au-c-editor-preview [property="besluit:geplandOpenbaar"]:after, .au-c-editor-preview [property="http://data.vlaanderen.be/ns/besluit#geplandOpenbaar"]:after, .au-c-editor-preview [property="besluit:openbaar"]:after, .au-c-editor-preview [property="http://data.vlaanderen.be/ns/besluit#openbaar"]:after { color: #69717c !important; } .au-c-template [property="besluit:geplandOpenbaar"][content=false]:after, .au-c-template [property="http://data.vlaanderen.be/ns/besluit#geplandOpenbaar"][content=false]:after, .au-c-template [property="besluit:openbaar"][content=false]:after, .au-c-template [property="http://data.vlaanderen.be/ns/besluit#openbaar"][content=false]:after, .au-c-editor-preview [property="besluit:geplandOpenbaar"][content=false]:after, .au-c-editor-preview [property="http://data.vlaanderen.be/ns/besluit#geplandOpenbaar"][content=false]:after, .au-c-editor-preview [property="besluit:openbaar"][content=false]:after, .au-c-editor-preview [property="http://data.vlaanderen.be/ns/besluit#openbaar"][content=false]:after { color: #69717c !important; } .au-c-template--agenda { padding-left: 0 !important; } .au-c-template--agenda h1 { font-size: var(--au-h3); line-height: var(--au-global-line-height); font-family: var(--au-font); font-weight: var(--au-medium); color: var(--au-gray-900); } .au-c-template--agenda h2 { font-size: var(--au-h4); line-height: var(--au-global-line-height); font-family: "flanders-sans", BlinkMacSystemFont, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } .au-c-template--agenda [property="besluit:Agendapunt.type"] { display: none; } .au-c-template--treatment h1, .au-c-rdfa-publication .behandeling h1 { font-size: var(--au-h3); line-height: var(--au-global-line-height); font-family: var(--au-font); font-weight: var(--au-medium); color: var(--au-gray-900); } .au-c-template--treatment [property="besluit:heeftAanwezige"], .au-c-template--treatment [property="http://data.vlaanderen.be/ns/besluit#heeftAanwezige"], .au-c-rdfa-publication .behandeling [property="besluit:heeftAanwezige"], .au-c-rdfa-publication .behandeling [property="http://data.vlaanderen.be/ns/besluit#heeftAanwezige"] { display: block; margin-bottom: 1.2rem; } .au-c-template--decision, .au-c-editor-preview .besluiten { padding-left: 0 !important; } .au-c-template--decision h1, .au-c-editor-preview .besluiten h1 { font-size: var(--au-h3); line-height: var(--au-global-line-height); font-family: var(--au-font); font-weight: var(--au-medium); color: var(--au-gray-900); } .au-c-template--decision h3, .au-c-template--decision h4, .au-c-editor-preview .besluiten h3, .au-c-editor-preview .besluiten h4 { font-size: var(--au-h4) !important; line-height: var(--au-global-line-height) !important; font-family: "flanders-sans", BlinkMacSystemFont, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important; font-weight: 500 !important; } .au-c-template--decision [typeof="besluit:BehandelingVanAgendapunt"], .au-c-template--decision [typeof="http://data.vlaanderen.be/ns/besluit#BehandelingVanAgendapunt"], .au-c-editor-preview .besluiten [typeof="besluit:BehandelingVanAgendapunt"], .au-c-editor-preview .besluiten [typeof="http://data.vlaanderen.be/ns/besluit#BehandelingVanAgendapunt"] { margin-top: 2.4rem; padding-top: 2.4rem; border-top: 0.1rem dotted #ccd1d9; } .au-c-template--decision [typeof="besluit:BehandelingVanAgendapunt"] > h3, .au-c-template--decision [typeof="http://data.vlaanderen.be/ns/besluit#BehandelingVanAgendapunt"] > h3, .au-c-editor-preview .besluiten [typeof="besluit:BehandelingVanAgendapunt"] > h3, .au-c-editor-preview .besluiten [typeof="http://data.vlaanderen.be/ns/besluit#BehandelingVanAgendapunt"] > h3 { font-size: 1.8rem !important; line-height: var(--au-global-line-height) !important; } .au-c-template--decision [typeof="besluit:BehandelingVanAgendapunt"] [property="besluit:openbaar"]:after, .au-c-template--decision [typeof="besluit:BehandelingVanAgendapunt"] [property="http://data.vlaanderen.be/ns/besluit#openbaar"]:after, .au-c-template--decision [typeof="http://data.vlaanderen.be/ns/besluit#BehandelingVanAgendapunt"] [property="besluit:openbaar"]:after, .au-c-template--decision [typeof="http://data.vlaanderen.be/ns/besluit#BehandelingVanAgendapunt"] [property="http://data.vlaanderen.be/ns/besluit#openbaar"]:after, .au-c-editor-preview .besluiten [typeof="besluit:BehandelingVanAgendapunt"] [property="besluit:openbaar"]:after, .au-c-editor-preview .besluiten [typeof="besluit:BehandelingVanAgendapunt"] [property="http://data.vlaanderen.be/ns/besluit#openbaar"]:after, .au-c-editor-preview .besluiten [typeof="http://data.vlaanderen.be/ns/besluit#BehandelingVanAgendapunt"] [property="besluit:openbaar"]:after, .au-c-editor-preview .besluiten [typeof="http://data.vlaanderen.be/ns/besluit#BehandelingVanAgendapunt"] [property="http://data.vlaanderen.be/ns/besluit#openbaar"]:after { position: relative; left: 0; width: auto; } .au-c-template--decision [typeof="besluit:BehandelingVanAgendapunt"] [property="besluit:openbaar"][content=false]:before, .au-c-template--decision [typeof="besluit:BehandelingVanAgendapunt"] [property="http://data.vlaanderen.be/ns/besluit#openbaar"][content=false]:before, .au-c-template--decision [typeof="http://data.vlaanderen.be/ns/besluit#BehandelingVanAgendapunt"] [property="besluit:openbaar"][content=false]:before, .au-c-template--decision [typeof="http://data.vlaanderen.be/ns/besluit#BehandelingVanAgendapunt"] [property="http://data.vlaanderen.be/ns/besluit#openbaar"][content=false]:before, .au-c-editor-preview .besluiten [typeof="besluit:BehandelingVanAgendapunt"] [property="besluit:openbaar"][content=false]:before, .au-c-editor-preview .besluiten [typeof="besluit:BehandelingVanAgendapunt"] [property="http://data.vlaanderen.be/ns/besluit#openbaar"][content=false]:before, .au-c-editor-preview .besluiten [typeof="http://data.vlaanderen.be/ns/besluit#BehandelingVanAgendapunt"] [property="besluit:openbaar"][content=false]:before, .au-c-editor-preview .besluiten [typeof="http://data.vlaanderen.be/ns/besluit#BehandelingVanAgendapunt"] [property="http://data.vlaanderen.be/ns/besluit#openbaar"][content=false]:before { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij4KICA8cGF0aCBmaWxsPSIjNjk3MTdDIiBkPSJNNC43MDcsMy4yOTMgQzQuMzE0NjIxMTEsMi45MTQwMjc3OSAzLjY5MDkxNTIyLDIuOTE5NDQ3NjMgMy4zMDUxODE0MiwzLjMwNTE4MTQyIEMyLjkxOTQ0NzYzLDMuNjkwOTE1MjIgMi45MTQwMjc3OSw0LjMxNDYyMTExIDMuMjkzLDQuNzA3IEw1LjcxNyw3LjEzMSBDNC4yODcsOC4yMDcgMy4wMzksOS42ODUgMi4xMDYsMTEuNTUzIEMxLjk2NTM3ODYxLDExLjgzNDQxMDggMS45NjUzNzg2MSwxMi4xNjU1ODkyIDIuMTA2LDEyLjQ0NyBDNC4yNjQsMTYuNzY0IDguMDk2LDE5IDEyLDE5IEMxMy41NTUsMTkgMTUuMSwxOC42NDUgMTYuNTMsMTcuOTQ1IEwxOS4yOTMsMjAuNzA3IEMxOS42ODUzNzg5LDIxLjA4NTk3MjIgMjAuMzA5MDg0OCwyMS4wODA1NTI0IDIwLjY5NDgxODYsMjAuNjk0ODE4NiBDMjEuMDgwNTUyNCwyMC4zMDkwODQ4IDIxLjA4NTk3MjIsMTkuNjg1Mzc4OSAyMC43MDcsMTkuMjkzIEw0LjcwNywzLjI5MyBaIE0xNS4wMTQsMTYuNDI4IEMxNC4wMzQsMTYuODExIDEzLjAxNCwxNyAxMiwxNyBDOS4wMzEsMTcgNS45OTgsMTUuMzggNC4xMywxMiBDNC45NDcsMTAuNTIxIDUuOTg4LDkuMzggNy4xNDgsOC41NjMgTDkuMjkyLDEwLjcwNyBDOC43NDI5NDU1OCwxMS44NTQ1NDA3IDguOTc3MzQwMDUsMTMuMjIzNTk4OCA5Ljg3Njg3MDYzLDE0LjEyMzEyOTQgQzEwLjc3NjQwMTIsMTUuMDIyNjU5OSAxMi4xNDU0NTkzLDE1LjI1NzA1NDQgMTMuMjkzLDE0LjcwOCBMMTUuMDEzLDE2LjQyOCBMMTUuMDE0LDE2LjQyOCBaIE0xOC41NTIsMTMuODk2IEMxOS4wMzUsMTMuMzQgMTkuNDc4LDEyLjcwOSAxOS44NywxMiBDMTguMDAyLDguNjIgMTQuOTcsNyAxMiw3IEMxMS44ODgsNyAxMS43NzYsNy4wMDIgMTEuNjY0LDcuMDA3IEw5Ljg3OSw1LjIyMyBDMTAuNTc2MjgyNCw1LjA3NDg2NDI4IDExLjI4NzE1NTcsNS4wMDAxMjM3MSAxMiw1IEMxNS45MDMsNSAxOS43MzYsNy4yMzYgMjEuODk0LDExLjU1MyBDMjIuMDM0NjIxNCwxMS44MzQ0MTA4IDIyLjAzNDYyMTQsMTIuMTY1NTg5MiAyMS44OTQsMTIuNDQ3IEMyMS4zODE0NDU1LDEzLjQ4MjY4OTEgMjAuNzM0MTY2NywxNC40NDYwNDE2IDE5Ljk2OSwxNS4zMTIgTDE4LjU1MiwxMy44OTYgTDE4LjU1MiwxMy44OTYgWiIvPgo8L3N2Zz4K"); } .au-c-template--decision [typeof="besluit:BehandelingVanAgendapunt"] [property="besluit:openbaar"][content=false]:after, .au-c-template--decision [typeof="besluit:BehandelingVanAgendapunt"] [property="http://data.vlaanderen.be/ns/besluit#openbaar"][content=false]:after, .au-c-template--decision [typeof="http://data.vlaanderen.be/ns/besluit#BehandelingVanAgendapunt"] [property="besluit:openbaar"][content=false]:after, .au-c-template--decision [typeof="http://data.vlaanderen.be/ns/besluit#BehandelingVanAgendapunt"] [property="http://data.vlaanderen.be/ns/besluit#openbaar"][content=false]:after, .au-c-editor-preview .besluiten [typeof="besluit:BehandelingVanAgendapunt"] [property="besluit:openbaar"][content=false]:after, .au-c-editor-preview .besluiten [typeof="besluit:BehandelingVanAgendapunt"] [property="http://data.vlaanderen.be/ns/besluit#openbaar"][content=false]:after, .au-c-editor-preview .besluiten [typeof="http://data.vlaanderen.be/ns/besluit#BehandelingVanAgendapunt"] [property="besluit:openbaar"][content=false]:after, .au-c-editor-preview .besluiten [typeof="http://data.vlaanderen.be/ns/besluit#BehandelingVanAgendapunt"] [property="http://data.vlaanderen.be/ns/besluit#openbaar"][content=false]:after { content: "Besloten behandeling van agendapunt"; } .au-c-template--decision [typeof="besluit:BehandelingVanAgendapunt"] [property="besluit:openbaar"][content=true]:before, .au-c-template--decision [typeof="besluit:BehandelingVanAgendapunt"] [property="http://data.vlaanderen.be/ns/besluit#openbaar"][content=true]:before, .au-c-template--decision [typeof="http://data.vlaanderen.be/ns/besluit#BehandelingVanAgendapunt"] [property="besluit:openbaar"][content=true]:before, .au-c-template--decision [typeof="http://data.vlaanderen.be/ns/besluit#BehandelingVanAgendapunt"] [property="http://data.vlaanderen.be/ns/besluit#openbaar"][content=true]:before, .au-c-editor-preview .besluiten [typeof="besluit:BehandelingVanAgendapunt"] [property="besluit:openbaar"][content=true]:before, .au-c-editor-preview .besluiten [typeof="besluit:BehandelingVanAgendapunt"] [property="http://data.vlaanderen.be/ns/besluit#openbaar"][content=true]:before, .au-c-editor-preview .besluiten [typeof="http://data.vlaanderen.be/ns/besluit#BehandelingVanAgendapunt"] [property="besluit:openbaar"][content=true]:before, .au-c-editor-preview .besluiten [typeof="http://data.vlaanderen.be/ns/besluit#BehandelingVanAgendapunt"] [property="http://data.vlaanderen.be/ns/besluit#openbaar"][content=true]:before { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij4KICA8cGF0aCBmaWxsPSIjNjk3MTdDIiBkPSJNMTIsNSBDMTUuOTA0LDUgMTkuNzM2LDcuMjM2IDIxLjg5NCwxMS41NTMgQzIyLjAzNDYyMTQsMTEuODM0NDEwOCAyMi4wMzQ2MjE0LDEyLjE2NTU4OTIgMjEuODk0LDEyLjQ0NyBDMTkuNzM2LDE2Ljc2NCAxNS45MDMsMTkgMTIsMTkgQzguMDk2LDE5IDQuMjY0LDE2Ljc2NCAyLjEwNiwxMi40NDcgQzEuOTY1Mzc4NjEsMTIuMTY1NTg5MiAxLjk2NTM3ODYxLDExLjgzNDQxMDggMi4xMDYsMTEuNTUzIEM0LjI2NCw3LjIzNiA4LjA5Nyw1IDEyLDUgWiBNMTIsNyBDOS4wMyw3IDUuOTk4LDguNjIgNC4xMywxMiBDNS45OTgsMTUuMzggOS4wMzEsMTcgMTIsMTcgQzE0Ljk2OSwxNyAxOC4wMDIsMTUuMzggMTkuODcsMTIgQzE4LjAwMiw4LjYyIDE0Ljk2OSw3IDEyLDcgWiBNMTIsOSBDMTMuNjU2ODU0Miw5IDE1LDEwLjM0MzE0NTggMTUsMTIgQzE1LDEzLjY1Njg1NDIgMTMuNjU2ODU0MiwxNSAxMiwxNSBDMTAuMzQzMTQ1OCwxNSA5LDEzLjY1Njg1NDIgOSwxMiBDOSwxMC4zNDMxNDU4IDEwLjM0MzE0NTgsOSAxMiw5IFoiLz4KPC9zdmc+Cg=="); } .au-c-template--decision [typeof="besluit:BehandelingVanAgendapunt"] [property="besluit:openbaar"][content=true]:after, .au-c-template--decision [typeof="besluit:BehandelingVanAgendapunt"] [property="http://data.vlaanderen.be/ns/besluit#openbaar"][content=true]:after, .au-c-template--decision [typeof="http://data.vlaanderen.be/ns/besluit#BehandelingVanAgendapunt"] [property="besluit:openbaar"][content=true]:after, .au-c-template--decision [typeof="http://data.vlaanderen.be/ns/besluit#BehandelingVanAgendapunt"] [property="http://data.vlaanderen.be/ns/besluit#openbaar"][content=true]:after, .au-c-editor-preview .besluiten [typeof="besluit:BehandelingVanAgendapunt"] [property="besluit:openbaar"][content=true]:after, .au-c-editor-preview .besluiten [typeof="besluit:BehandelingVanAgendapunt"] [property="http://data.vlaanderen.be/ns/besluit#openbaar"][content=true]:after, .au-c-editor-preview .besluiten [typeof="http://data.vlaanderen.be/ns/besluit#BehandelingVanAgendapunt"] [property="besluit:openbaar"][content=true]:after, .au-c-editor-preview .besluiten [typeof="http://data.vlaanderen.be/ns/besluit#BehandelingVanAgendapunt"] [property="http://data.vlaanderen.be/ns/besluit#openbaar"][content=true]:after { content: "Openbare behandeling van agendapunt"; } .au-c-template--decision [typeof="besluit:BehandelingVanAgendapunt"] [property="besluit:openbaar"][content=true]:before, .au-c-template--decision [typeof="besluit:BehandelingVanAgendapunt"] [property="besluit:openbaar"][content=false]:before, .au-c-template--decision [typeof="besluit:BehandelingVanAgendapunt"] [property="http://data.vlaanderen.be/ns/besluit#openbaar"][content=true]:before, .au-c-template--decision [typeof="besluit:BehandelingVanAgendapunt"] [property="http://data.vlaanderen.be/ns/besluit#openbaar"][content=false]:before, .au-c-template--decision [typeof="http://data.vlaanderen.be/ns/besluit#BehandelingVanAgendapunt"] [property="besluit:openbaar"][content=true]:before, .au-c-template--decision [typeof="http://data.vlaanderen.be/ns/besluit#BehandelingVanAgendapunt"] [property="besluit:openbaar"][content=false]:before, .au-c-template--decision [typeof="http://data.vlaanderen.be/ns/besluit#BehandelingVanAgendapunt"] [property="http://data.vlaanderen.be/ns/besluit#openbaar"][content=true]:before, .au-c-template--decision [typeof="http://data.vlaanderen.be/ns/besluit#BehandelingVanAgendapunt"] [property="http://data.vlaanderen.be/ns/besluit#openbaar"][content=false]:before, .au-c-editor-preview .besluiten [typeof="besluit:BehandelingVanAgendapunt"] [property="besluit:openbaar"][content=true]:before, .au-c-editor-preview .besluiten [typeof="besluit:BehandelingVanAgendapunt"] [property="besluit:openbaar"][content=false]:before, .au-c-editor-preview .besluiten [typeof="besluit:BehandelingVanAgendapunt"] [property="http://data.vlaanderen.be/ns/besluit#openbaar"][content=true]:before, .au-c-editor-preview .besluiten [typeof="besluit:BehandelingVanAgendapunt"] [property="http://data.vlaanderen.be/ns/besluit#openbaar"][content=false]:before, .au-c-editor-preview .besluiten [typeof="http://data.vlaanderen.be/ns/besluit#BehandelingVanAgendapunt"] [property="besluit:openbaar"][content=true]:before, .au-c-editor-preview .besluiten [typeof="http://data.vlaanderen.be/ns/besluit#BehandelingVanAgendapunt"] [property="besluit:openbaar"][content=false]:before, .au-c-editor-preview .besluiten [typeof="http://data.vlaanderen.be/ns/besluit#BehandelingVanAgendapunt"] [property="http://data.vlaanderen.be/ns/besluit#openbaar"][content=true]:before, .au-c-editor-preview .besluiten [typeof="http://data.vlaanderen.be/ns/besluit#BehandelingVanAgendapunt"] [property="http://data.vlaanderen.be/ns/besluit#openbaar"][content=false]:before { display: inline-block; content: ""; width: 18px; height: 18px; background-size: 100%; margin-right: 0.3rem; vertical-align: middle; position: relative; bottom: 0.2ex; } .au-c-template--notes h2, .au-c-rdfa-publication .notulen h2 { font-size: var(--au-h3); line-height: var(--au-global-line-height); font-family: var(--au-font); font-weight: 500; color: #212326; } .au-c-template--notes * + h2, .au-c-rdfa-publication .notulen * + h2 { margin-top: 2.4rem; } .au-c-template--notes [typeof="besluit:Zitting"] > [property="dc:title"], .au-c-template--notes [typeof="besluit:Zitting"] > [property="http://purl.org/dc/elements/1.1/title"], .au-c-template--notes [typeof="http://data.vlaanderen.be/ns/besluit#Zitting"] > [property="dc:title"], .au-c-template--notes [typeof="http://data.vlaanderen.be/ns/besluit#Zitting"] > [property="http://purl.org/dc/elements/1.1/title"], .au-c-rdfa-publication .notulen [typeof="besluit:Zitting"] > [property="dc:title"], .au-c-rdfa-publication .notulen [typeof="besluit:Zitting"] > [property="http://purl.org/dc/elements/1.1/title"], .au-c-rdfa-publication .notulen [typeof="http://data.vlaanderen.be/ns/besluit#Zitting"] > [property="dc:title"], .au-c-rdfa-publication .notulen [typeof="http://data.vlaanderen.be/ns/besluit#Zitting"] > [property="http://purl.org/dc/elements/1.1/title"] { margin-bottom: 2.4rem; } .au-c-template--notes .au-c-template--treatment > h3, .au-c-template--notes [property="dc:subject"], .au-c-template--notes [property="http://purl.org/dc/elements/1.1/subject"], .au-c-rdfa-publication .notulen .au-c-template--treatment > h3, .au-c-rdfa-publication .notulen [property="dc:subject"], .au-c-rdfa-publication .notulen [property="http://purl.org/dc/elements/1.1/subject"] { font-size: var(--au-h6); line-height: var(--au-global-line-height); color: #69717c; text-transform: initial; letter-spacing: 0; position: relative; } .au-c-template--notes .mark-highlight-manual, .au-c-rdfa-publication .notulen .mark-highlight-manual { background-color: transparent; } .au-c-template--notes [property="ext:agendapuntenTable"] [property="besluit:heeftAgendapunt"], .au-c-template--notes [property="ext:agendapuntenTable"] [property="http://data.vlaanderen.be/ns/besluit#heeftAgendapunt"], .au-c-template--notes [property="http://mu.semte.ch/vocabularies/ext/agendapuntenTable"] [property="besluit:heeftAgendapunt"], .au-c-template--notes [property="http://mu.semte.ch/vocabularies/ext/agendapuntenTable"] [property="http://data.vlaanderen.be/ns/besluit#heeftAgendapunt"], .au-c-rdfa-publication .notulen [property="ext:agendapuntenTable"] [property="besluit:heeftAgendapunt"], .au-c-rdfa-publication .notulen [property="ext:agendapuntenTable"] [property="http://data.vlaanderen.be/ns/besluit#heeftAgendapunt"], .au-c-rdfa-publication .notulen [property="http://mu.semte.ch/vocabularies/ext/agendapuntenTable"] [property="besluit:heeftAgendapunt"], .au-c-rdfa-publication .notulen [property="http://mu.semte.ch/vocabularies/ext/agendapuntenTable"] [property="http://data.vlaanderen.be/ns/besluit#heeftAgendapunt"] { display: block; } .au-c-template-list { margin-left: 0 !important; } .au-c-template-list__item { margin-top: 1.2rem !important; padding-top: 1.2rem !important; border-top: 0.1rem dotted #ccd1d9; color: #69717c; } .au-c-template-list-container + p, p + .au-c-template-list-container { margin-top: 1.2rem; } .au-c-template-list-container > *:first-child:after { content: ":"; margin-left: -0.2em; } .au-c-template-list-container > * { display: inline; } .au-c-template-list-container * + * { margin-top: 0; } .au-c-template-list-inline { list-style: none; margin-left: 0 !important; } .au-c-template-list-inline__item { display: inline !important; margin-right: 0.6rem; } .au-c-template-list-inline__item:after { content: ","; } .au-c-template-list-inline__item:last-child:after { content: ""; } .au-c-template-list-inline__item [property="mandaat:isBestuurlijkeAliasVan"]:before, .au-c-template-list-inline__item [property="http://data.vlaanderen.be/ns/mandaat#isBestuurlijkeAliasVan"]:before { display: none !important; } .au-c-template-list-inline__item[property="besluit:heeftAanwezige"], .au-c-template-list-inline__item[property="http://data.vlaanderen.be/ns/besluit#heeftAanwezige"] { margin-right: 0.6rem !important; } .au-c-template-content { margin-bottom: 2.4rem; } .c-template-content--treatment { margin-top: 2.4rem; padding-top: 2.4rem; border-top: 0.1rem dotted #ccd1d9; } .au-c-template-public, .au-c-template-private, [property="besluit:geplandOpenbaar"], [property="http://data.vlaanderen.be/ns/besluit#geplandOpenbaar"], [property="besluit:openbaar"], [property="http://data.vlaanderen.be/ns/besluit#openbaar"] { font-size: 1.6rem; line-height: var(--au-global-line-height); color: #69717c; text-transform: initial; letter-spacing: 0; position: relative; } .au-c-template-public:before, .au-c-template-private:before, [property="besluit:geplandOpenbaar"]:before, [property="http://data.vlaanderen.be/ns/besluit#geplandOpenbaar"]:before, [property="besluit:openbaar"]:before, [property="http://data.vlaanderen.be/ns/besluit#openbaar"]:before { display: inline-block; content: ""; width: 18px; height: 18px; background-size: 100%; margin-right: 0.3rem; vertical-align: middle; position: relative; bottom: 0.2ex; } [property="besluit:geplandOpenbaar"] .au-c-template-public:before, [property="besluit:geplandOpenbaar"] .au-c-template-private:before, [property="http://data.vlaanderen.be/ns/besluit#geplandOpenbaar"] .au-c-template-public:before, [property="http://data.vlaanderen.be/ns/besluit#geplandOpenbaar"] .au-c-template-private:before, [property="besluit:openbaar"] .au-c-template-public:before, [property="besluit:openbaar"] .au-c-template-private:before, [property="http://data.vlaanderen.be/ns/besluit#openbaar"] .au-c-template-public:before, [property="http://data.vlaanderen.be/ns/besluit#openbaar"] .au-c-template-private:before { display: none !important; } .au-c-template-public:before, [property="besluit:geplandOpenbaar"][content=true]:before, [property="http://data.vlaanderen.be/ns/besluit#geplandOpenbaar"][content=true]:before, [property="besluit:openbaar"][content=true]:before, [property="http://data.vlaanderen.be/ns/besluit#openbaar"][content=true]:before { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij4KICA8cGF0aCBmaWxsPSIjNjk3MTdDIiBkPSJNMTIsNSBDMTUuOTA0LDUgMTkuNzM2LDcuMjM2IDIxLjg5NCwxMS41NTMgQzIyLjAzNDYyMTQsMTEuODM0NDEwOCAyMi4wMzQ2MjE0LDEyLjE2NTU4OTIgMjEuODk0LDEyLjQ0NyBDMTkuNzM2LDE2Ljc2NCAxNS45MDMsMTkgMTIsMTkgQzguMDk2LDE5IDQuMjY0LDE2Ljc2NCAyLjEwNiwxMi40NDcgQzEuOTY1Mzc4NjEsMTIuMTY1NTg5MiAxLjk2NTM3ODYxLDExLjgzNDQxMDggMi4xMDYsMTEuNTUzIEM0LjI2NCw3LjIzNiA4LjA5Nyw1IDEyLDUgWiBNMTIsNyBDOS4wMyw3IDUuOTk4LDguNjIgNC4xMywxMiBDNS45OTgsMTUuMzggOS4wMzEsMTcgMTIsMTcgQzE0Ljk2OSwxNyAxOC4wMDIsMTUuMzggMTkuODcsMTIgQzE4LjAwMiw4LjYyIDE0Ljk2OSw3IDEyLDcgWiBNMTIsOSBDMTMuNjU2ODU0Miw5IDE1LDEwLjM0MzE0NTggMTUsMTIgQzE1LDEzLjY1Njg1NDIgMTMuNjU2ODU0MiwxNSAxMiwxNSBDMTAuMzQzMTQ1OCwxNSA5LDEzLjY1Njg1NDIgOSwxMiBDOSwxMC4zNDMxNDU4IDEwLjM0MzE0NTgsOSAxMiw5IFoiLz4KPC9zdmc+Cg=="); } .au-c-template-private:before, [property="besluit:geplandOpenbaar"][content=false]:before, [property="http://data.vlaanderen.be/ns/besluit#geplandOpenbaar"][content=false]:before, [property="besluit:openbaar"][content=false]:before, [property="http://data.vlaanderen.be/ns/besluit#openbaar"][content=false]:before { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij4KICA8cGF0aCBmaWxsPSIjNjk3MTdDIiBkPSJNNC43MDcsMy4yOTMgQzQuMzE0NjIxMTEsMi45MTQwMjc3OSAzLjY5MDkxNTIyLDIuOTE5NDQ3NjMgMy4zMDUxODE0MiwzLjMwNTE4MTQyIEMyLjkxOTQ0NzYzLDMuNjkwOTE1MjIgMi45MTQwMjc3OSw0LjMxNDYyMTExIDMuMjkzLDQuNzA3IEw1LjcxNyw3LjEzMSBDNC4yODcsOC4yMDcgMy4wMzksOS42ODUgMi4xMDYsMTEuNTUzIEMxLjk2NTM3ODYxLDExLjgzNDQxMDggMS45NjUzNzg2MSwxMi4xNjU1ODkyIDIuMTA2LDEyLjQ0NyBDNC4yNjQsMTYuNzY0IDguMDk2LDE5IDEyLDE5IEMxMy41NTUsMTkgMTUuMSwxOC42NDUgMTYuNTMsMTcuOTQ1IEwxOS4yOTMsMjAuNzA3IEMxOS42ODUzNzg5LDIxLjA4NTk3MjIgMjAuMzA5MDg0OCwyMS4wODA1NTI0IDIwLjY5NDgxODYsMjAuNjk0ODE4NiBDMjEuMDgwNTUyNCwyMC4zMDkwODQ4IDIxLjA4NTk3MjIsMTkuNjg1Mzc4OSAyMC43MDcsMTkuMjkzIEw0LjcwNywzLjI5MyBaIE0xNS4wMTQsMTYuNDI4IEMxNC4wMzQsMTYuODExIDEzLjAxNCwxNyAxMiwxNyBDOS4wMzEsMTcgNS45OTgsMTUuMzggNC4xMywxMiBDNC45NDcsMTAuNTIxIDUuOTg4LDkuMzggNy4xNDgsOC41NjMgTDkuMjkyLDEwLjcwNyBDOC43NDI5NDU1OCwxMS44NTQ1NDA3IDguOTc3MzQwMDUsMTMuMjIzNTk4OCA5Ljg3Njg3MDYzLDE0LjEyMzEyOTQgQzEwLjc3NjQwMTIsMTUuMDIyNjU5OSAxMi4xNDU0NTkzLDE1LjI1NzA1NDQgMTMuMjkzLDE0LjcwOCBMMTUuMDEzLDE2LjQyOCBMMTUuMDE0LDE2LjQyOCBaIE0xOC41NTIsMTMuODk2IEMxOS4wMzUsMTMuMzQgMTkuNDc4LDEyLjcwOSAxOS44NywxMiBDMTguMDAyLDguNjIgMTQuOTcsNyAxMiw3IEMxMS44ODgsNyAxMS43NzYsNy4wMDIgMTEuNjY0LDcuMDA3IEw5Ljg3OSw1LjIyMyBDMTAuNTc2MjgyNCw1LjA3NDg2NDI4IDExLjI4NzE1NTcsNS4wMDAxMjM3MSAxMiw1IEMxNS45MDMsNSAxOS43MzYsNy4yMzYgMjEuODk0LDExLjU1MyBDMjIuMDM0NjIxNCwxMS44MzQ0MTA4IDIyLjAzNDYyMTQsMTIuMTY1NTg5MiAyMS44OTQsMTIuNDQ3IEMyMS4zODE0NDU1LDEzLjQ4MjY4OTEgMjAuNzM0MTY2NywxNC40NDYwNDE2IDE5Ljk2OSwxNS4zMTIgTDE4LjU1MiwxMy44OTYgTDE4LjU1MiwxMy44OTYgWiIvPgo8L3N2Zz4K"); } .au-c-toolbar__group--vertical { flex-direction: column; } /* ================================== #ENVIRONMENT BANNER ================================== */ .au-c-environment-banner { background-color: #ffa10a; } .au-c-environment-banner .au-c-button, .au-c-environment-banner .data-table-pagination-right button, .data-table-pagination-right .au-c-environment-banner button { color: #000000; } .meeting__sync-button { font-weight: var(--au-medium); } .meeting__sync-button--up-to-date { background-color: var(--au-green-200); border-color: var(--au-green-500); color: var(--au-green-500); } .meeting__sync-button--up-to-date:hover, .meeting__sync-button--up-to-date:focus-visible, .meeting__sync-button--up-to-date:active { background-color: var(--au-green-200); border-color: var(--au-green-700); color: var(--au-green-700); } .meeting__sync-button--out-of-date { background-color: transparent; border-color: var(--au-blue-700); color: var(--au-blue-700); } .meeting__sync-button--out-of-date:hover, .meeting__sync-button--out-of-date:focus-visible, .meeting__sync-button--out-of-date:active { background-color: transparent; border-color: var(--au-blue-900); color: var(--au-blue-900); } .meeting__sync-button--failed { background-color: var(--au-orange-200); border-color: var(--au-orange-500); color: var(--au-orange-500); } .meeting__sync-button--failed:hover, .meeting__sync-button--failed:focus-visible, .meeting__sync-button--failed:active { background-color: var(--au-orange-200); border-color: var(--au-orange-700); color: var(--au-orange-700); } .meeting__sync-modal__header { border-bottom: 1px solid var(--au-gray-300); } .meeting__sync-modal__treatments { counter-reset: list-number; } .meeting__sync-modal__treatments__entry { margin-bottom: 2.4rem; display: flex; flex-direction: row; align-items: center; gap: 1.2rem; justify-content: space-between; } .meeting__sync-modal__treatments__entry::before { content: counter(list-number); counter-increment: list-number; display: flex; justify-content: center; align-items: center; width: 2.4rem; height: 2.4rem; font-weight: 500; background-color: #f7f9fc; border: 1px solid #cfd4db; border-radius: 2.4rem; } .meeting__sync-mocal__treatments__entry__header { width: 60%; } .meeting__sync-mocal__treatments__entry__pill { width: 40%; } tr.sortable-item { transition: all 0.125s; } tr.sortable-item.is-dragging { transition-duration: 0s; z-index: 10; } .drag-handle { cursor: grab; color: var(--au-blue-700); display: inline-flex; flex-direction: row; align-items: center; gap: 0.3rem; padding: 0 0.6rem; } .drag-handle__icon { width: 1.75rem; height: 1.75rem; } .c-template-content--treatment, .c-template-content--treatment .say-bullet-list, .c-template-content--treatment .say-ordered-list, .c-template-content--treatment div { font-size: 1.5rem; line-height: var(--au-global-line-height); font-family: var(--au-font); font-weight: var(--au-regular); } .c-template-content--treatment span, .c-template-content--treatment .say-link { font-size: inherit; } .c-template-content--treatment [data-mark~=color]::selection { color: inherit; } .c-template-content--treatment h1.say-heading, .c-template-content--treatment .h1.say-heading { font-size: 4.4rem; line-height: 1.1; font-family: var(--au-font); font-weight: var(--au-medium); } .c-template-content--treatment h2.say-heading, .c-template-content--treatment .h2.say-heading { font-size: 3.2rem; line-height: 1.3; font-family: var(--au-font); font-weight: var(--au-medium); } .c-template-content--treatment h3.say-heading, .c-template-content--treatment .h3.say-heading { font-size: 2.6rem; line-height: 1.3; font-family: var(--au-font); font-weight: var(--au-medium); } .c-template-content--treatment h4.say-heading, .c-template-content--treatment .h4.say-heading { font-size: 2rem; line-height: var(--au-global-line-height); font-family: var(--au-font); font-weight: var(--au-medium); } .c-template-content--treatment h5.say-heading, .c-template-content--treatment .h5.say-heading { font-size: 1.8rem; line-height: var(--au-global-line-height); font-family: var(--au-font); font-weight: var(--au-medium); } .c-template-content--treatment h6.say-heading, .c-template-content--treatment .h6.say-heading { font-size: 1.6rem; line-height: var(--au-global-line-height); font-family: var(--au-font); font-weight: var(--au-medium); } .c-template-content--treatment .say-paragraph.small, .c-template-content--treatment .say-list-item.small { font-size: 1.5rem; line-height: var(--au-global-line-height); } .c-template-content--treatment .say-paragraph.smaller, .c-template-content--treatment .say-list-item.smaller { font-size: 1.4rem; line-height: 1.5; } .c-template-content--treatment .say-paragraph.smallest, .c-template-content--treatment .say-list-item.smallest { font-size: 1.2rem; line-height: 1.5; } .c-template-content--treatment .say-paragraph + *, .c-template-content--treatment .say-bullet-list + *, .c-template-content--treatment .say-ordered-list + *, .c-template-content--treatment .say-table + *, .c-template-content--treatment div + *, .c-template-content--treatment .say-heading + * { margin-top: 1.2rem; } .c-template-content--treatment .say-hidden + * { margin-top: 0; } .c-template-content--treatment [data-indentation-level="1"] { margin-left: 3rem; } .c-template-content--treatment [data-indentation-level="2"] { margin-left: 6rem; } .c-template-content--treatment [data-indentation-level="3"] { margin-left: 9rem; } .c-template-content--treatment [data-indentation-level="4"] { margin-left: 12rem; } .c-template-content--treatment .say-list-item > [data-indentation-level] { margin-left: 0; } .c-template-content--treatment .say-list-item .say-paragraph + *, .c-template-content--treatment .say-list-item div + *, .c-template-content--treatment .say-paragraph * + *, .c-template-content--treatment .say-paragraph + .say-hard-break, .c-template-content--treatment div + .say-hard-break, .c-template-content--treatment span + .say-hard-break, .c-template-content--treatment .say-bullet-list + .say-hard-break, .c-template-content--treatment .say-ordered-list + .say-hard-break, .c-template-content--treatment i + .say-hard-break, .c-template-content--treatment .say-hard-break + .say-hard-break { margin-top: 0; } .c-template-content--treatment .say-link { transition: color var(--au-transition), text-decoration var(--au-transition); font-weight: var(--au-regular); text-decoration-color: var(--au-blue-300); } .c-template-content--treatment .say-link, .c-template-content--treatment .say-link:visited { color: var(--au-blue-700); } .c-template-content--treatment .say-link:hover, .c-template-content--treatment .say-link:focus { color: var(--au-blue-600); text-decoration-color: var(--au-blue-300); } .c-template-content--treatment .say-link:focus { outline: var(--au-outline); outline-offset: 0.3rem; } .c-template-content--treatment .say-bullet-list, .c-template-content--treatment .say-ordered-list { padding-left: 3rem; } .c-template-content--treatment .say-bullet-list { list-style-type: initial; } .c-template-content--treatment .say-bullet-list .say-bullet-list .say-bullet-list .say-bullet-list .say-bullet-list .say-bullet-list .say-bullet-list .say-bullet-list .say-bullet-list .say-bullet-list .say-bullet-list .say-bullet-list .say-bullet-list .say-bullet-list .say-bullet-list .say-bullet-list .say-bullet-list .say-bullet-list { margin-left: 0; padding-left: 0; } .c-template-content--treatment .say-ordered-list { list-style-type: decimal; } .c-template-content--treatment .say-ordered-list > .say-list-item .say-ordered-list { list-style-type: inherit; } .c-template-content--treatment .say-ordered-list .say-ordered-list .say-ordered-list .say-ordered-list .say-ordered-list .say-ordered-list .say-ordered-list .say-ordered-list .say-ordered-list .say-ordered-list .say-ordered-list .say-ordered-list .say-ordered-list .say-ordered-list .say-ordered-list .say-ordered-list .say-ordered-list .say-ordered-list { margin-left: 0; padding-left: 0; } .c-template-content--treatment .say-bullet-list.article-list { padding-left: 0; } .c-template-content--treatment .say-bullet-list.article-list .say-list-item { margin-bottom: 1.5rem; list-style-type: unset; } .c-template-content--treatment .say-bullet-list > .say-list-item ul > li { list-style-type: circle; } .c-template-content--treatment .say-bullet-list > .say-list-item ul ul > li { list-style-type: square; } .c-template-content--treatment .say-bullet-list > .say-list-item ul ul ul > li { list-style-type: initial; } .c-template-content--treatment .say-bullet-list > .say-list-item ul ul ul ul > li { list-style-type: circle; } .c-template-content--treatment .say-bullet-list > .say-list-item ul ul ul ul ul > li { list-style-type: square; } .c-template-content--treatment .say-bullet-list > .say-list-item ul ul ul ul ul ul > li { list-style-type: initial; } .c-template-content--treatment .say-bullet-list > .say-list-item ul ul ul ul ul ul ul > li { list-style-type: circle; } .c-template-content--treatment .say-bullet-list > .say-list-item ul ul ul ul ul ul ul ul > li { list-style-type: square; } .c-template-content--treatment .say-bullet-list > .say-list-item ul ul ul ul ul ul ul ul ul > li { list-style-type: initial; } .c-template-content--treatment .say-bullet-list > .say-list-item ul ul ul ul ul ul ul ul ul ul > li { list-style-type: circle; } .c-template-content--treatment .say-bullet-list > .say-list-item ul ul ul ul ul ul ul ul ul ul ul > li { list-style-type: square; } .c-template-content--treatment .say-bullet-list > .say-list-item ul ul ul ul ul ul ul ul ul ul ul ul > li { list-style-type: initial; } .c-template-content--treatment .say-bullet-list > .say-list-item ul ul ul ul ul ul ul ul ul ul ul ul ul > li { list-style-type: circle; } .c-template-content--treatment .say-bullet-list > .say-list-item ul ul ul ul ul ul ul ul ul ul ul ul ul ul > li { list-style-type: square; } .c-template-content--treatment .say-bullet-list > .say-list-item ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul > li { list-style-type: initial; } .c-template-content--treatment .say-bullet-list > .say-list-item ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul > li { list-style-type: circle; } .c-template-content--treatment .say-bullet-list > .say-list-item ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul > li { list-style-type: circle; } .c-template-content--treatment .say-bullet-list > .say-list-item ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul > li { list-style-type: circle; } .c-template-content--treatment .say-horizontal-rule { margin: 0; margin-top: 2.4rem; margin-bottom: 2.4rem; border: 0; border-bottom: 3px solid var(--au-gray-200); } .c-template-content--treatment strong, .c-template-content--treatment b { font-weight: var(--au-bold); } .c-template-content--treatment em { font-style: italic; } .c-template-content--treatment i { display: inline-block; } .c-template-content--treatment sub { vertical-align: sub; font-size: smaller; } .c-template-content--treatment sup { vertical-align: super; font-size: smaller; } .c-template-content--treatment .data-table .say-table-header, .c-template-content--treatment .data-table .say-table-cell { font-size: 1.5rem; line-height: 1.5; } .c-template-content--treatment .data-table--lined.data-table--tight .say-table-header, .c-template-content--treatment .data-table--lined.data-table--tight .say-table-cell { font-size: 1.4rem; padding: 0.8rem; } .c-template-content--treatment .data-table--lined.data-table--tight .button--small { font-size: 1.3rem; font-weight: 400; } .c-template-content--treatment .data-table--lined.data-table--tight .button-group .button { margin-bottom: 0.5rem; } .gn-meeting-copy--structure-content, .gn-meeting-copy--structure-content .say-bullet-list, .gn-meeting-copy--structure-content .say-ordered-list, .gn-meeting-copy--structure-content div { font-size: 1.5rem; line-height: var(--au-global-line-height); font-family: var(--au-font); font-weight: var(--au-regular); } .gn-meeting-copy--structure-content span, .gn-meeting-copy--structure-content .say-link { font-size: inherit; } .gn-meeting-copy--structure-content [data-mark~=color]::selection { color: inherit; } .gn-meeting-copy--structure-content h1.say-heading, .gn-meeting-copy--structure-content .h1.say-heading { font-size: 4.4rem; line-height: 1.1; font-family: var(--au-font); font-weight: var(--au-medium); } .gn-meeting-copy--structure-content h2.say-heading, .gn-meeting-copy--structure-content .h2.say-heading { font-size: 3.2rem; line-height: 1.3; font-family: var(--au-font); font-weight: var(--au-medium); } .gn-meeting-copy--structure-content h3.say-heading, .gn-meeting-copy--structure-content .h3.say-heading { font-size: 2.6rem; line-height: 1.3; font-family: var(--au-font); font-weight: var(--au-medium); } .gn-meeting-copy--structure-content h4.say-heading, .gn-meeting-copy--structure-content .h4.say-heading { font-size: 2rem; line-height: var(--au-global-line-height); font-family: var(--au-font); font-weight: var(--au-medium); } .gn-meeting-copy--structure-content h5.say-heading, .gn-meeting-copy--structure-content .h5.say-heading { font-size: 1.8rem; line-height: var(--au-global-line-height); font-family: var(--au-font); font-weight: var(--au-medium); } .gn-meeting-copy--structure-content h6.say-heading, .gn-meeting-copy--structure-content .h6.say-heading { font-size: 1.6rem; line-height: var(--au-global-line-height); font-family: var(--au-font); font-weight: var(--au-medium); } .gn-meeting-copy--structure-content .say-paragraph.small, .gn-meeting-copy--structure-content .say-list-item.small { font-size: 1.5rem; line-height: var(--au-global-line-height); } .gn-meeting-copy--structure-content .say-paragraph.smaller, .gn-meeting-copy--structure-content .say-list-item.smaller { font-size: 1.4rem; line-height: 1.5; } .gn-meeting-copy--structure-content .say-paragraph.smallest, .gn-meeting-copy--structure-content .say-list-item.smallest { font-size: 1.2rem; line-height: 1.5; } .gn-meeting-copy--structure-content .say-paragraph + *, .gn-meeting-copy--structure-content .say-bullet-list + *, .gn-meeting-copy--structure-content .say-ordered-list + *, .gn-meeting-copy--structure-content .say-table + *, .gn-meeting-copy--structure-content div + *, .gn-meeting-copy--structure-content .say-heading + * { margin-top: 1.2rem; } .gn-meeting-copy--structure-content .say-hidden + * { margin-top: 0; } .gn-meeting-copy--structure-content [data-indentation-level="1"] { margin-left: 3rem; } .gn-meeting-copy--structure-content [data-indentation-level="2"] { margin-left: 6rem; } .gn-meeting-copy--structure-content [data-indentation-level="3"] { margin-left: 9rem; } .gn-meeting-copy--structure-content [data-indentation-level="4"] { margin-left: 12rem; } .gn-meeting-copy--structure-content .say-list-item > [data-indentation-level] { margin-left: 0; } .gn-meeting-copy--structure-content .say-list-item .say-paragraph + *, .gn-meeting-copy--structure-content .say-list-item div + *, .gn-meeting-copy--structure-content .say-paragraph * + *, .gn-meeting-copy--structure-content .say-paragraph + .say-hard-break, .gn-meeting-copy--structure-content div + .say-hard-break, .gn-meeting-copy--structure-content span + .say-hard-break, .gn-meeting-copy--structure-content .say-bullet-list + .say-hard-break, .gn-meeting-copy--structure-content .say-ordered-list + .say-hard-break, .gn-meeting-copy--structure-content i + .say-hard-break, .gn-meeting-copy--structure-content .say-hard-break + .say-hard-break { margin-top: 0; } .gn-meeting-copy--structure-content .say-link { transition: color var(--au-transition), text-decoration var(--au-transition); font-weight: var(--au-regular); text-decoration-color: var(--au-blue-300); } .gn-meeting-copy--structure-content .say-link, .gn-meeting-copy--structure-content .say-link:visited { color: var(--au-blue-700); } .gn-meeting-copy--structure-content .say-link:hover, .gn-meeting-copy--structure-content .say-link:focus { color: var(--au-blue-600); text-decoration-color: var(--au-blue-300); } .gn-meeting-copy--structure-content .say-link:focus { outline: var(--au-outline); outline-offset: 0.3rem; } .gn-meeting-copy--structure-content .say-bullet-list, .gn-meeting-copy--structure-content .say-ordered-list { padding-left: 3rem; } .gn-meeting-copy--structure-content .say-bullet-list { list-style-type: initial; } .gn-meeting-copy--structure-content .say-bullet-list .say-bullet-list .say-bullet-list .say-bullet-list .say-bullet-list .say-bullet-list .say-bullet-list .say-bullet-list .say-bullet-list .say-bullet-list .say-bullet-list .say-bullet-list .say-bullet-list .say-bullet-list .say-bullet-list .say-bullet-list .say-bullet-list .say-bullet-list { margin-left: 0; padding-left: 0; } .gn-meeting-copy--structure-content .say-ordered-list { list-style-type: decimal; } .gn-meeting-copy--structure-content .say-ordered-list > .say-list-item .say-ordered-list { list-style-type: inherit; } .gn-meeting-copy--structure-content .say-ordered-list .say-ordered-list .say-ordered-list .say-ordered-list .say-ordered-list .say-ordered-list .say-ordered-list .say-ordered-list .say-ordered-list .say-ordered-list .say-ordered-list .say-ordered-list .say-ordered-list .say-ordered-list .say-ordered-list .say-ordered-list .say-ordered-list .say-ordered-list { margin-left: 0; padding-left: 0; } .gn-meeting-copy--structure-content .say-bullet-list.article-list { padding-left: 0; } .gn-meeting-copy--structure-content .say-bullet-list.article-list .say-list-item { margin-bottom: 1.5rem; list-style-type: unset; } .gn-meeting-copy--structure-content .say-bullet-list > .say-list-item ul > li { list-style-type: circle; } .gn-meeting-copy--structure-content .say-bullet-list > .say-list-item ul ul > li { list-style-type: square; } .gn-meeting-copy--structure-content .say-bullet-list > .say-list-item ul ul ul > li { list-style-type: initial; } .gn-meeting-copy--structure-content .say-bullet-list > .say-list-item ul ul ul ul > li { list-style-type: circle; } .gn-meeting-copy--structure-content .say-bullet-list > .say-list-item ul ul ul ul ul > li { list-style-type: square; } .gn-meeting-copy--structure-content .say-bullet-list > .say-list-item ul ul ul ul ul ul > li { list-style-type: initial; } .gn-meeting-copy--structure-content .say-bullet-list > .say-list-item ul ul ul ul ul ul ul > li { list-style-type: circle; } .gn-meeting-copy--structure-content .say-bullet-list > .say-list-item ul ul ul ul ul ul ul ul > li { list-style-type: square; } .gn-meeting-copy--structure-content .say-bullet-list > .say-list-item ul ul ul ul ul ul ul ul ul > li { list-style-type: initial; } .gn-meeting-copy--structure-content .say-bullet-list > .say-list-item ul ul ul ul ul ul ul ul ul ul > li { list-style-type: circle; } .gn-meeting-copy--structure-content .say-bullet-list > .say-list-item ul ul ul ul ul ul ul ul ul ul ul > li { list-style-type: square; } .gn-meeting-copy--structure-content .say-bullet-list > .say-list-item ul ul ul ul ul ul ul ul ul ul ul ul > li { list-style-type: initial; } .gn-meeting-copy--structure-content .say-bullet-list > .say-list-item ul ul ul ul ul ul ul ul ul ul ul ul ul > li { list-style-type: circle; } .gn-meeting-copy--structure-content .say-bullet-list > .say-list-item ul ul ul ul ul ul ul ul ul ul ul ul ul ul > li { list-style-type: square; } .gn-meeting-copy--structure-content .say-bullet-list > .say-list-item ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul > li { list-style-type: initial; } .gn-meeting-copy--structure-content .say-bullet-list > .say-list-item ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul > li { list-style-type: circle; } .gn-meeting-copy--structure-content .say-bullet-list > .say-list-item ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul > li { list-style-type: circle; } .gn-meeting-copy--structure-content .say-bullet-list > .say-list-item ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul > li { list-style-type: circle; } .gn-meeting-copy--structure-content .say-horizontal-rule { margin: 0; margin-top: 2.4rem; margin-bottom: 2.4rem; border: 0; border-bottom: 3px solid var(--au-gray-200); } .gn-meeting-copy--structure-content strong, .gn-meeting-copy--structure-content b { font-weight: var(--au-bold); } .gn-meeting-copy--structure-content em { font-style: italic; } .gn-meeting-copy--structure-content i { display: inline-block; } .gn-meeting-copy--structure-content sub { vertical-align: sub; font-size: smaller; } .gn-meeting-copy--structure-content sup { vertical-align: super; font-size: smaller; } .gn-meeting-copy--structure-content .data-table .say-table-header, .gn-meeting-copy--structure-content .data-table .say-table-cell { font-size: 1.5rem; line-height: 1.5; } .gn-meeting-copy--structure-content .data-table--lined.data-table--tight .say-table-header, .gn-meeting-copy--structure-content .data-table--lined.data-table--tight .say-table-cell { font-size: 1.4rem; padding: 0.8rem; } .gn-meeting-copy--structure-content .data-table--lined.data-table--tight .button--small { font-size: 1.3rem; font-weight: 400; } .gn-meeting-copy--structure-content .data-table--lined.data-table--tight .button-group .button { margin-bottom: 0.5rem; } .toaster { width: 380px; } /* ========================================================================== Print Style what printing looks like here. ========================================================================== */ .u-hide-on-print--show, .au-u-hide-on-print--show { border-bottom: 3px dashed #ccd1d9; position: relative; margin-bottom: 6rem; } .u-hide-on-print--show:before, .au-u-hide-on-print--show:before { content: "\f070"; font-family: fontawesome; position: absolute; left: 2rem; bottom: -1.6rem; background-color: #ccd1d9; color: #ffffff; width: 3rem; height: 3rem; border-radius: 2rem; display: block; text-align: center; padding-top: 0.15rem; } @media print { .toolbar__annotations-switch, .sidebar, .search-box, .editor-commands, .editor-loading-events, .editor-chrome, .au-c-app-chrome, .tasklist.tasklist--open, .u-hide-on-print, .au-u-hide-on-print, .say-toolbar, .say-container__aside, .au-c-toolbar__group--search, .au-c-main-header, .au-c-card .au-c-button, .au-c-card .data-table-pagination-right button, .data-table-pagination-right .au-c-card button, .au-c-pagination button, .au-c-editor-preview-treatment__info .au-c-toggle-switch, .au-c-editor-preview-treatment__info .au-c-hr, .au-c-data-table__sort, .au-c-onboarding, .au-c-modal--fullscreen .au-c-modal__footer, .au-c-modal--fullscreen .au-c-modal__close, .au-template-public::before, .au-template-private::before, .au-c-template-public::before, .au-c-template-private::before, [property="besluit:geplandOpenbaar"]::before, [property="http://data.vlaanderen.be/ns/besluit#geplandOpenbaar"]::before, [property="besluit:openbaar"]::before, [property="http://data.vlaanderen.be/ns/besluit#openbaar"]::before, .au-c-card .au-c-badge, .au-c-editor-preview-treatment-toggle-box { display: none !important; } .au-c-editor-preview-treatment--private .behandeling [property="dc:subject"]::after, .au-c-editor-preview-treatment--private .behandeling [property="http://purl.org/dc/elements/1.1/subject"]::after, .au-c-editor-preview-treatment--private .behandeling [property="eli:title"]::after, .au-c-editor-preview-treatment--private .behandeling [property="http://data.europa.eu/eli/ontology#title"]::after, .au-c-editor-preview-treatment--private .behandeling [property="eli:description"]::after, .au-c-editor-preview-treatment--private .behandeling [property="http://data.europa.eu/eli/ontology#description"]::after, .au-c-editor-preview-treatment--private .behandeling [property="besluit:openbaar"]::after, .au-c-editor-preview-treatment--private .behandeling [property="http://data.vlaanderen.be/ns/besluit#openbaar"]::after { display: none !important; } a[href]:after { word-break: break-all !important; } .tasklist.tasklist--expanded { display: block !important; } .data-table { position: relative; width: 100%; } .au-c-meeting-chrome-table { min-width: auto !important; } .au-c-meeting-chrome-table thead { display: table-row-group !important; } .au-c-meeting-chrome-table th, .au-c-meeting-chrome-table td { min-width: initial !important; width: initial !important; max-width: initial !important; white-space: initial !important; } .au-c-meeting-chrome-table .au-c-button-group { display: none !important; } .au-c-meeting-chrome-table td:after { display: none !important; } body, .container, .grid, .container-flex--contain, .container-flex--scroll, .tasklist__content { overflow-y: visible !important; display: block !important; height: auto !important; } .say-container { all: initial; } .editor, .say-editor { background-color: transparent; padding: 0 !important; } .tasklist.tasklist--open + .container-flex--contain .editor__paper, .tasklist + .container-flex--contain .editor__paper, .editor__paper, .say-editor, .say-editor__paper { width: 100% !important; max-width: none; min-height: none; height: auto; overflow: visible; margin: 0; box-shadow: none; padding: 0; position: static !important; pointer-events: none; } .au-c-pill { border: none !important; padding: 0 !important; min-height: auto !important; } .u-wide-on-print, .au-u-wide-on-print { min-width: 100% !important; width: 100% !important; max-width: none !important; flex-basis: 100% !important; } @page { counter-increment: page; counter-reset: page 1; size: auto; margin: 6mm; } body { margin: 6mm !important; } .au-c-app, .au-c-main-container { display: initial !important; flex-direction: initial !important; height: initial !important; overflow: initial !important; } .au-c-main-container__content--scroll { height: initial !important; overflow: initial !important; } .au-c-body-container { display: initial !important; flex-direction: initial !important; flex-grow: initial !important; height: initial !important; overflow: initial !important; position: initial !important; } .au-c-body-container--scroll { overflow: initial !important; } .au-o-box, .au-o-box--large, .au-c-toolbar__group, .au-c-toolbar--large { margin: 0 !important; padding: 0 !important; } .au-c-alert, .au-c-list-divider__item, .au-c-meeting-chrome-card__title { padding: 5px !important; } .au-u-margin-bottom, .au-u-margin-bottom-tiny, .au-u-margin-bottom-small, .au-u-margin-bottom-large, .au-u-margin-bottom-huge .au-u-margin-bottom-large, .au-c-meeting-chrome-card { margin-bottom: 5px !important; } .au-u-margin-top, .au-u-margin-top-tiny, .au-u-margin-top-small, .au-u-margin-top-large, .au-c-meeting-chrome-card { margin-top: 5px !important; } .au-u-margin-top-huge { margin-top: 15px !important; } .say-content { margin-left: 18px !important; } .au-c-link { display: block !important; text-decoration: none !important; } .au-c-data-table__wrapper { flex-grow: initial !important; overflow: initial !important; position: initial !important; width: initial !important; } .au-c-data-table__table, .au-c-table-border { display: initial !important; position: initial !important; min-width: initial !important; width: initial !important; } th, td, .au-c-data-table__actions--bottom { padding: 5px !important; } .au-c-data-table__header { border-bottom: 0.2rem solid #ccd1d9; } .au-c-data-table__header-title--sortable { text-decoration: none !important; } .say-container__main * { border-bottom: 0 !important; } .au-c-meeting-chrome-card__title--inset { margin: 0 !important; } .au-c-meeting-chrome { width: 100% !important; left: 0 !important; padding: 0 !important; } .au-c-meeting-chrome strong { border-bottom: 0 !important; } .au-c-meeting-chrome__paper { padding: 0 !important; } .au-c-editor-preview-treatment--private .behandeling [property="dc:subject"]:after, .au-c-editor-preview-treatment--private .behandeling [property="eli:title"]:after, .au-c-editor-preview-treatment--private .behandeling [property="eli:description"]:after, .au-c-editor-preview-treatment--private .behandeling [property="besluit:openbaar"]:after { border-right-color: #ccd1d9 !important; } .au-c-editor-preview-treatment__info, .au-c-modal__header, .au-c-modal__body { padding: 5px !important; } .au-c-template--treatment { margin-top: 5px !important; padding-left: 5px !important; padding-right: 5px !important; } .au-c-modal-backdrop { background-color: white !important; } .au-c-rdfa-publication { margin: 0 !important; padding: 5px !important; } .au-c-rdfa-publication-holder { border-left: 0 !important; } .au-c-modal--fullscreen { position: absolute !important; height: initial !important; max-height: initial !important; width: initial !important; max-width: initial !important; top: initial !important; left: initial !important; transform: initial !important; } .au-c-modal--fullscreen .au-c-modal__body { overflow: initial !important; height: initial !important; } .say-editor__paper { padding: 5px !important; margin: 0 !important; } * { font-size: 14px !important; } .au-c-content, body, p, ul, ol, .au-c-pill, .au-c-template table, .au-c-editor-preview table, .au-c-template table th, .au-c-template table td, .au-c-editor-preview table th, .au-c-editor-preview table td { font-size: 14px !important; } .au-c-heading--1, .au-c-content .au-c-heading--1, .au-c-content h1, .au-c-heading--1 > *, .au-c-modal__title { font-size: 24px !important; line-height: 28px !important; } .au-c-heading--1 br, .au-c-content .au-c-heading--1 br, .au-c-content h1 br, .au-c-heading--1 > * br, .au-c-modal__title br { display: none !important; } .au-c-heading--2, .au-c-content .au-c-heading--2, .au-c-content h2, .au-c-content h2 > * { font-size: 21px !important; } .au-c-heading--3, [typeof="https://say.data.gift/ns/Title"] > [property="say:heading"], .au-c-template h3, .au-c-editor-preview h3, .au-c-content .au-c-heading--3, .au-c-content h3, .au-c-template--decision h3, .au-c-template--decision h4, .au-c-editor-preview .besluiten h3, .au-c-editor-preview .besluiten h4, .au-c-template h1, .au-c-template h1 > * { font-size: 18px !important; } .au-c-heading--4, [typeof="https://say.data.gift/ns/Chapter"] > [property="say:heading"], .au-c-template h4, .au-c-editor-preview h4, .au-c-content .au-c-heading--4, .au-c-content h4, .au-c-template-list__item h2, .au-c-template-list__item h2 > *, .au-c-template-list__item h3, .au-c-template-list__item h3 > * { font-size: 16px !important; } .au-c-heading--5, [typeof="https://say.data.gift/ns/Section"] > [property="say:heading"], .au-c-heading--6, [typeof="https://say.data.gift/ns/Subsection"] > [property="say:heading"], .au-c-content .au-c-heading--5, .au-c-content .au-c-heading--6, .au-c-template h5, .au-c-template h6, .au-c-editor-preview h5, .au-c-editor-preview h6 { font-size: 16px !important; } .au-c-template [property="besluit:geplandOpenbaar"], .au-c-template [property="http://data.vlaanderen.be/ns/besluit#geplandOpenbaar"], .au-c-template [property="besluit:openbaar"], .au-c-template [property="http://data.vlaanderen.be/ns/besluit#openbaar"], .au-c-editor-preview [property="besluit:geplandOpenbaar"], .au-c-editor-preview [property="http://data.vlaanderen.be/ns/besluit#geplandOpenbaar"], .au-c-editor-preview [property="besluit:openbaar"], .au-c-editor-preview [property="http://data.vlaanderen.be/ns/besluit#openbaar"], .au-c-template-public, .au-c-template-private, [property="besluit:geplandOpenbaar"], [property="http://data.vlaanderen.be/ns/besluit#geplandOpenbaar"], [property="besluit:openbaar"], [property="http://data.vlaanderen.be/ns/besluit#openbaar"], .au-c-template--notes [property="dc:subject"], .au-c-template--notes [property="http://purl.org/dc/elements/1.1/subject"], .au-c-rdfa-publication .notulen [property="dc:subject"], .au-c-rdfa-publication .notulen [property="http://purl.org/dc/elements/1.1/subject"] { font-size: 16px !important; } .au-c-hr { border-bottom: 1px solid #000000 !important; } .au-c-hr--large { margin: 1.2rem 0 !important; } .au-c-alert { border-color: black !important; } .au-c-alert__icon { width: 18px !important; height: 18px !important; margin-right: 6px !important; } .au-c-editor-preview h5 { margin-top: 5px !important; } .au-c-editor-preview table { margin-top: 10px; margin-bottom: 10px; } .au-c-meeting-numbered-list > li { padding-top: 10px; } .au-c-meeting-numbered-list > li:before { content: counter(list-number) "." !important; position: absolute !important; display: inline-block !important; left: 0 !important; top: 5px !important; } .au-c-editor-preview, .au-c-card--padding .au-c-card__header, .au-c-card--padding .au-c-card__content { padding: 0 !important; } .au-c-card, .au-c-editor-preview { border: 0 !important; } } /* ========================================================================== #DEPRECATED Styles that are flagged to be removed ========================================================================== */ /* ember data table red color override */ /* temporary styling for import-export demo */ /* temporary demo fixes for fracties */ /* temporary fix for besluittypes dropdown */ .ember-basic-dropdown-content.ember-power-select-dropdown.ember-basic-dropdown-content--below { z-index: 9999; } /* handle remaining flex--contain elements */ .container-flex--contain { position: relative; display: flex; flex: 1; min-height: 0; flex-direction: column; overflow: hidden; height: 100%; } /* ========================================================================== #SHAME Dirty temporary css for demo purposes. Some parts will be reused, but most of them will not. ========================================================================== */ body { overflow: hidden; } #main:focus, #content:focus { outline: 0; } .au-c-main-header__actions .au-c-alert { position: absolute; right: 1.8rem; max-width: 480px; top: 5.4rem; } .au-c-main-header__actions .au-c-loader { position: absolute; right: 0; max-width: 480px; top: 4.2rem; padding: 0; background-color: #ffffff; } .au-c-dropdown__menu [role=menuitem] { padding-top: 0.6rem; padding-bottom: 0.6rem; } .au-c-data-table__header th { border-radius: 0; } .au-c-list-divider { font-style: italic; } .au-c-list-divider a, .au-c-list-divider h2 { font-style: normal; } .au-c-list-divider strong { font-style: normal; font-weight: 500; border-bottom: 0.2rem dotted #ccd1d9; } .au-c-list-divider .au-c-list-divider { padding-left: 1.5rem; border-left: 0.3rem solid #ccd1d9; margin-top: 0.9rem; } .au-c-list-divider .au-c-list-numbered { border-left: 0.3rem solid #ccd1d9; margin-top: 1.2rem; } .au-c-list-divider .au-c-list-divider .au-c-list-divider__item, .au-c-list-divider .au-c-list-numbered .au-c-list-numbered__item { padding-left: 0; } .au-c-list-divider .au-c-list-divider .au-c-list-divider__item:last-child, .au-c-list-divider .au-c-list-numbered .au-c-list-numbered__item:last-child { padding-bottom: 0; } .au-c-list-divider .au-c-list-divider .au-c-list-divider__item:first-child, .au-c-list-divider .au-c-list-numbered .au-c-list-numbered__item:first-child { padding-top: 0; } .au-c-list-divider__item { padding: 0.9rem; position: relative; } .au-c-list-divider__item + .au-c-list-divider__item { border-top: 0.1rem dotted #ccd1d9; } .au-c-list-divider__item.has-error { padding-left: 3rem; } .au-c-list-divider__item.has-error:before { content: "!"; font-size: 1.2rem; font-style: normal; display: inline-flex; align-items: center; justify-content: center; color: #ffffff; position: absolute; top: 50%; left: 0.3rem; transform: translateY(-50%); background-color: var(--au-red-700); width: 1.8rem; height: 1.75rem; border-radius: 1.8rem; margin-right: 0.6rem; } .au-c-list-numbered { list-style: decimal; padding-left: 2.4rem; font-style: normal; } .au-c-list-numbered__item { padding: 0.9rem; position: relative; } .au-c-list-numbered__item + .au-c-list-numbered__item { border-top: 0.1rem dotted #ccd1d9; } .au-c-list-numbered__item.has-error { padding-left: 3rem; } .au-c-list-numbered__item.has-error:before { content: "!"; font-size: 1.2rem; font-style: normal; display: inline-flex; align-items: center; justify-content: center; color: #ffffff; position: absolute; top: 50%; left: 0.3rem; transform: translateY(-50%); background-color: var(--au-red-700); width: 1.8rem; height: 1.75rem; border-radius: 1.8rem; margin-right: 0.6rem; } .au-c-datepicker input, .au-c-datepicker .datepicker { display: block; width: 100%; } .au-c-modal__footer { position: relative; z-index: 99; } .say-modal-backdrop, .au-c-modal-backdrop { z-index: 9998; } .modal-overlay, .au-c-modal { z-index: 9999; } .pika-single { z-index: 9999; } .ember-basic-dropdown-content--above .ember-power-select-dropdown.ember-basic-dropdown-content--below, .ember-power-select-dropdown.ember-basic-dropdown-content--in-place { border-bottom: 0; border-top: 0.1rem solid #ccd1d9; } .au-u-table-right { text-align: right; } .au-u-table-right .au-c-button, .au-u-table-right .data-table-pagination-right button, .data-table-pagination-right .au-u-table-right button { display: flex; margin-left: auto; } .au-u-table-right .au-c-button-group { display: flex; justify-content: flex-end; } .au-u-table-right .au-c-button-group .au-c-button, .au-u-table-right .au-c-button-group .data-table-pagination-right button, .data-table-pagination-right .au-u-table-right .au-c-button-group button { margin-left: 0.6rem; } .au-c-modal--no-padding .au-c-modal__body { padding: 0; } .au-u-capitalize { text-transform: capitalize; } .au-c-card--flex.au-c-card--expandable.au-c-card--publish { padding: 0 !important; } .au-c-card--flex.au-c-card--expandable.au-c-card--publish > .au-c-card__header--clickable { align-items: center; padding: 1.2rem; margin-bottom: 0; } .au-c-card--flex.au-c-card--expandable.au-c-card--publish .au-c-card__header .au-c-toolbar--nowrap { align-items: center; } .au-c-card--flex.au-c-card--expandable.au-c-card--publish .au-c-toolbar .au-c-pill { white-space: nowrap; } .au-c-card--flex.au-c-card--expandable.au-c-card--publish .au-c-button, .au-c-card--flex.au-c-card--expandable.au-c-card--publish .data-table-pagination-right button, .data-table-pagination-right .au-c-card--flex.au-c-card--expandable.au-c-card--publish button { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } .au-c-card--flex.au-c-card--expandable.au-c-card--publish .au-c-button .au-c-icon, .au-c-card--flex.au-c-card--expandable.au-c-card--publish .data-table-pagination-right button .au-c-icon, .data-table-pagination-right .au-c-card--flex.au-c-card--expandable.au-c-card--publish button .au-c-icon { bottom: -0.1ex; } .au-c-card--flex.au-c-card--expandable.au-c-card--publish > .au-c-card__content { padding: 1.2rem; } .au-c-card--flex.au-c-card--expandable.au-c-card--publish .au-c-card__toggle { margin-left: 1.2rem; } .au-c-modal--publish > .au-c-modal__body { padding: 0; } .au-c-control { font-size: 1.6rem; line-height: var(--au-global-line-height); } .au-c-table-border { border: 0.1rem solid #ccd1d9; } .au-c-table-border thead { border-bottom: 0.1rem solid #ccd1d9; } .au-c-table-border th, .au-c-table-border td { padding: 0.6rem !important; } .au-c-button-group-fix { display: flex; } .au-c-button-group-fix .au-c-button, .au-c-button-group-fix .data-table-pagination-right button, .data-table-pagination-right .au-c-button-group-fix button { display: inline-flex; } .au-c-radio-group .au-c-control--radio { margin-right: 1.2rem; } .input-field-icon-container--block.input-field-icon-container--left .input-field__icon { position: absolute; left: 1.2rem; top: 0.5rem; } .au-c-modal--editor .au-c-modal__body { padding: 0; } .au-c-modal--editor .au-c-modal__footer { display: flex; justify-content: space-between; flex-wrap: wrap; } @media (min-width: 63.9375em) { .au-c-main-container { flex-wrap: nowrap !important; } } .au-c-button-group--inline { align-items: center; } .au-c-button-group--inline .au-c-button, .au-c-button-group--inline .data-table-pagination-right button, .data-table-pagination-right .au-c-button-group--inline button { display: inline-flex; } .au-c-button-group--inline .au-c-button.is-active, .au-c-button-group--inline .data-table-pagination-right button.is-active, .data-table-pagination-right .au-c-button-group--inline button.is-active { user-select: none; } .au-c-button-group--inline .au-c-button.is-active:hover, .au-c-button-group--inline .data-table-pagination-right button.is-active:hover, .data-table-pagination-right .au-c-button-group--inline button.is-active:hover { box-shadow: none; border-color: #0f6fd7; } .au-c-data-table__header th { box-shadow: inset 0 -0.2rem 0 0 #ccd1d9; } .au-c-custom-select { font-size: 1.5rem; line-height: var(--au-global-line-height); font-family: "flanders-sans", BlinkMacSystemFont, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; width: 100%; padding: 0.6rem; background-color: #ffffff; border: 1px solid #a1abba; border-radius: 0.2rem; } .au-c-custom-select-cell { min-width: 150px; } .say-content, .au-c-editor-preview, .au-c-template { overflow-wrap: break-word; word-break: break-word; } .has-tooltip { position: relative; overflow: visible; } .au-c-button__tooltip { font-size: 1.5rem; line-height: var(--au-global-line-height); display: none; position: absolute; left: 50%; transform: translateX(-50%); z-index: 2; color: #ffffff; background-color: #073261; border-radius: 0.3rem; padding: 0 0.6rem 0.18rem; } .au-c-button__tooltip:before { bottom: 100%; left: 50%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; border-width: 0.4rem; margin-left: -0.2rem; } .au-c-button__tooltip:before { border-color: rgba(255, 255, 255, 0); border-bottom-color: #073261; } .has-tooltip:hover > .au-c-button__tooltip, .has-tooltip:focus > .au-c-button__tooltip { display: block; } .au-c-button__tooltip--top { bottom: calc(100% + 0.8rem); } .au-c-button__tooltip--top:before { top: 100%; left: 50%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; border-width: 0.4rem; margin-left: -0.2rem; } .au-c-button__tooltip--top:before { border-color: rgba(255, 255, 255, 0); border-top-color: #073261; } .au-c-button__tooltip--bottom { top: calc(100% + 0.8rem); } .au-c-button__tooltip--bottom:before { bottom: 100%; left: 50%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; border-width: 0.4rem; margin-left: -0.2rem; } .au-c-button__tooltip--bottom:before { border-color: rgba(255, 255, 255, 0); border-bottom-color: #073261; } .au-c-button__tooltip--bottom-right { top: calc(100% + 0.8rem); left: auto; right: 0; transform: translateX(0); } .au-c-button__tooltip--bottom-right:before { bottom: 100%; left: auto; right: 1.2rem; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; border-width: 0.4rem; margin-left: 0; } .au-c-button__tooltip--bottom-right:before { border-color: rgba(255, 255, 255, 0); border-bottom-color: #073261; } .say-content--disabled { cursor: default; } .au-c-main-container--mock-login { height: 100%; } .au-c-modal--flat { z-index: 9997; max-width: 100%; max-height: 100%; width: 100%; height: 100%; left: 0; border-radius: 0; } .data-table-pagination { margin-top: 2.4rem; } .data-table-pagination div { display: flex; flex-direction: row; justify-content: space-between; align-items: center; } .data-table-pagination-right { display: flex; gap: 0.6rem; } .data-table-pagination-right select { background-color: var(--au-white); border: 0.1rem solid var(--au-gray-300); border-radius: 0.3rem; padding: 0.6rem; } .au-c-app--environment .au-c-main-container { height: calc(100vh - 92px); } div.table-of-contents { padding: 1.2rem !important; margin-bottom: 4.8rem; outline: 0.2rem dashed var(--au-gray-300); outline-offset: 0.2rem; } div.table-of-contents h3 { margin-top: 0; } div.table-of-contents ul { margin-top: 0.6rem; padding-left: 0; } div.table-of-contents ul ul { margin-left: 0; } div.table-of-contents ul li { list-style-type: none !important; } [property="say:hasPart"] + [property="say:hasPart"] { margin-top: 2.4rem !important; } [property="say:hasPart"] [property="say:heading"] + [property="say:body"] { margin-top: 0.6rem !important; } .au-c-select { font-family: inherit; font-size: inherit; width: 100%; padding: 0.8rem 0.6rem; border: 1px solid var(--au-gray-300); border-radius: 0.3rem; background-color: var(--au-white); appearance: none; background: url(data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0Ljk1IDEwIj48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6I2ZmZjt9LmNscy0ye2ZpbGw6IzQ0NDt9PC9zdHlsZT48L2RlZnM+PHRpdGxlPmFycm93czwvdGl0bGU+PHJlY3QgY2xhc3M9ImNscy0xIiB3aWR0aD0iNC45NSIgaGVpZ2h0PSIxMCIvPjxwb2x5Z29uIGNsYXNzPSJjbHMtMiIgcG9pbnRzPSIxLjQxIDQuNjcgMi40OCAzLjE4IDMuNTQgNC42NyAxLjQxIDQuNjciLz48cG9seWdvbiBjbGFzcz0iY2xzLTIiIHBvaW50cz0iMy41NCA1LjMzIDIuNDggNi44MiAxLjQxIDUuMzMgMy41NCA1LjMzIi8+PC9zdmc+) no-repeat; background-position: right; background-size: 3rem 3rem; } .au-c-button-group .au-c-button.active, .au-c-button-group .data-table-pagination-right button.active, .data-table-pagination-right .au-c-button-group button.active { user-select: none; color: var(--au-blue-900); background-color: var(--au-blue-200); text-decoration: none; cursor: default; } .au-c-button-group .au-c-button.active:hover, .au-c-button-group .data-table-pagination-right button.active:hover, .data-table-pagination-right .au-c-button-group button.active:hover { box-shadow: none; color: var(--au-blue-900); background-color: var(--au-blue-200); } .regulatory-statement-current-version-container-active { white-space: nowrap; border-left: 3px solid #5990de; } .regulatory-statement-current-version-container { white-space: nowrap; color: var(--au-gray-700); } [data-inline-component="editor-plugins/regulatory-statements/view"] { cursor: not-allowed; user-select: none; } div[typeof="besluit:Zitting"] div[property="besluit:heeftStemming"] div[property="besluit:heeftVoorstander"], div[typeof="besluit:Zitting"] div[property="besluit:heeftStemming"] div[property="besluit:heeftTegenstander"], div[typeof="besluit:Zitting"] div[property="besluit:heeftStemming"] div[property="besluit:heeftOnthouder"] { display: none; } .signature-warning { position: relative; border: 1px solid var(--au-red-400); background-color: var(--au-red-300); padding: 10px; padding-left: 35px; margin-top: 10px; max-width: 400px; } .signature-warning-icon { position: absolute; top: 10px; left: 10px; color: var(--au-red-600); } .signature-warning-close-button { position: absolute; top: 5px; right: 5px; } .signature-delete-button { border: 0; } .signature-timestamp { flex-shrink: 0; } .publication-actions-detail-container { border: 1px solid var(--au-gray-300); color: var(--au-gray-300); padding: 20px; } .publication-actions-detail-container .au-c-template * { color: var(--au-gray-600); } div[typeof="besluitpublicatie:Documentonderdeel"] { cursor: default; } div[typeof="besluitpublicatie:Documentonderdeel"]:hover { border: 0.1rem solid var(--au-gray-400); } div[typeof="besluitpublicatie:Documentonderdeel"] span.mark-highlight-manual { background-color: var(--au-gray-300); color: var(--au-gray-900); } div[typeof="besluitpublicatie:Documentonderdeel"] [typeof="ext:Mapping"] [property="dct:type"] + [property="ext:content"]:after, div[typeof="besluitpublicatie:Documentonderdeel"] [typeof="ext:Mapping"] [property="ext:codelist"] + [property="ext:content"]:after { background-image: none; height: 0; width: 0; margin: 0; } .au-c-card__content div[typeof="besluitpublicatie:Documentonderdeel"]:hover, .au-c-meeting-chrome-card div[typeof="besluitpublicatie:Documentonderdeel"]:hover { border: none; } #ember-basic-dropdown-wormhole { z-index: 20000; } .au-c-data-table-with-borders { border-left: 0.1rem solid var(--au-gray-300); border-right: 0.1rem solid var(--au-gray-300); } .au-c-data-table:has(.au-c-data-table-without-pagination) .au-c-data-table__actions { display: none; } .download-meeting-part-downloaded { color: var(--au-green-700); border-color: var(--au-green-700); border-width: 0; } .gn-tooltip { z-index: 2; max-width: 800px; } @media screen and (max-width: 1200px) { .rdfa-editor-container__small-screen { display: block; } .rdfa-editor-container__big-screen { display: none; } } @media screen and (min-width: 1201px) { .rdfa-editor-container__small-screen { display: none; } .rdfa-editor-container__big-screen { display: block; } }