@charset "UTF-8"; /* ================================== #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] */ } ::-moz-selection { color: var(--au-select-text-color); background-color: var(--au-select-text-bg); } ::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 { 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; -webkit-appearance: none; -moz-appearance: none; 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 { 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; -webkit-appearance: none; -moz-appearance: none; 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, .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, .au-c-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 { outline: 0; } .au-c-button:focus-visible { outline: var(--au-outline); outline-offset: var(--au-outline-offset); } .au-c-button:active { border-color: var(--au-blue-900); background-color: var(--au-blue-900); } .au-c-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, .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 { font-size: inherit; border-color: transparent; padding: 0 0.6rem 0; height: 2.4rem; line-height: 2.4rem; } .au-c-button--link, .au-c-button--link:visited { color: var(--au-blue-700); background-color: transparent; text-decoration: underline; text-decoration-color: var(--au-blue-300); } .au-c-button--link:hover, .au-c-button--link:focus-visible, .au-c-button--link: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, .au-c-button--link.is-disabled:hover, .au-c-button--link.is-disabled:focus-visible, .au-c-button--link.is-disabled:active { color: var(--au-gray-700); background-color: transparent; text-decoration: none; border-color: transparent; } .au-c-button--link.is-loading, .au-c-button--link.is-loading:hover { color: var(--au-gray-700); background-color: transparent; border-color: transparent; text-decoration: none; } .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, .au-c-button--alert:not([class*=is-]).au-c-button--link-secondary { background-color: transparent; } .au-c-button--alert:not([class*=is-]).au-c-button--link, .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 { 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, .au-c-button--alert:not([class*=is-]).au-c-button--link:focus-visible, .au-c-button--alert:not([class*=is-]).au-c-button--link: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 { 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, .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 { color: var(--au-gray-700); background-color: transparent; border-color: transparent; } .au-c-button--alert:not([class*=is-]).au-c-button--link.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 { 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 { 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 { 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 { 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 { margin-right: -2px; margin-top: 0; } .au-c-button-group--inline .au-c-button:first-child { border-top-right-radius: 0; border-bottom-right-radius: 0; } .au-c-button-group--inline .au-c-button + .au-c-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) { text-decoration: underline; text-decoration-color: var(--au-blue-300); } .au-c-button-group--inline .au-c-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 { 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 { 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 { 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 { 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 { 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 { 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 { 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 { 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%; -o-object-fit: cover; 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; -webkit-user-select: none; -moz-user-select: none; 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 { 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 { 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 { 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 { border-bottom: 0.1rem solid var(--au-gray-300); } .au-c-data-table__table tbody tr:nth-child(odd) { background-color: var(--au-gray-100); } .au-c-data-table__table tbody tr:nth-child(even) { background-color: var(--au-white); } .au-c-data-table__table th { font-weight: var(--au-medium); text-align: left; padding: 0.6rem 1.2rem; border-radius: 0; } .au-c-data-table__table td { padding: 1.2rem; } .au-c-data-table__table th { white-space: nowrap; } .au-c-data-table__table th, .au-c-data-table__table td { max-width: 55ch; position: relative; } .au-c-data-table__table th.is-selectable, .au-c-data-table__table td.is-selectable { width: 5.4rem; } .au-c-data-table__table th:first-child, .au-c-data-table__table td:first-child { padding-left: 2.4rem; } .au-c-data-table__table th:last-child, .au-c-data-table__table td:last-child { padding-right: 2.4rem; min-width: 0; } .au-c-data-table__table th + th:after, .au-c-data-table__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-data-table__table.au-c-data-table__table--small th, .au-c-data-table__table.au-c-data-table__table--small td { padding: 0.6rem; } .au-c-data-table__table.au-c-data-table__table--small th:first-child, .au-c-data-table__table.au-c-data-table__table--small 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; -webkit-appearance: none; -moz-appearance: none; 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 { 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-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-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-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 { font-size: var(--au-h3-small); line-height: var(--au-global-line-height); } @media (min-width: 47.9375em) { .au-c-heading--3 { font-size: var(--au-h3); line-height: var(--au-global-line-height); } } .au-c-heading--4 { font-size: var(--au-h4); line-height: var(--au-global-line-height); } .au-c-heading--5 { font-size: var(--au-h5); line-height: var(--au-global-line-height); } .au-c-heading--6 { 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 { 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 { 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 { 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 { background-color: var(--au-gray-100); border-color: var(--au-gray-300); color: var(--au-gray-700); cursor: not-allowed; } .au-c-input: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 { position: relative; display: inline-block; } .au-c-input-wrapper .au-c-input { padding-left: 4rem; } .au-c-input-wrapper .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 { right: 0; } .au-c-input-wrapper .au-c-icon--left { left: 0; } .au-c-input-wrapper--right .au-c-input { padding-left: 1.2rem; padding-right: 4rem; } /* Modifiers ========================================================================== */ .au-c-input--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::-moz-placeholder { color: var(--au-gray-500); } .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), -webkit-text-decoration var(--au-transition); transition: color var(--au-transition), text-decoration var(--au-transition); transition: color var(--au-transition), text-decoration var(--au-transition), -webkit-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--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, .au-c-list-horizontal__item > .ember-view > .au-c-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), -webkit-text-decoration var(--au-transition); transition: color var(--au-transition), text-decoration var(--au-transition); transition: color var(--au-transition), text-decoration var(--au-transition), -webkit-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; -webkit-appearance: none; -moz-appearance: none; 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; -webkit-user-select: none; -moz-user-select: none; 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, .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-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::-moz-placeholder { opacity: 1; color: var(--au-gray-700); } .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; -webkit-user-select: none; -moz-user-select: none; 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; -moz-user-select: none; 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-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; } } /* ========================================================================== #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 { border: 0 !important; clip: rect(0 0 0 0) !important; -webkit-clip-path: inset(50%) !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; } @media (max-width: 18.74em) { .au-u-flex\@tiny { display: flex !important; } .au-u-flex--inline\@tiny { display: inline-flex !important; } .au-u-flex--wrap\@tiny { flex-wrap: wrap !important; } .au-u-flex--no-wrap\@tiny { flex-wrap: nowrap !important; } .au-u-flex--spaced\@tiny { gap: 2.4rem !important; } .au-u-flex--spaced-tiny\@tiny { gap: 0.6rem !important; } .au-u-flex--spaced-small\@tiny { gap: 1.2rem !important; } .au-u-flex--spaced-large\@tiny { gap: 4.8rem !important; } .au-u-flex--row\@tiny { flex-direction: row !important; } .au-u-flex--column\@tiny { flex-direction: column !important; } .au-u-flex--row-reverse\@tiny { flex-direction: row-reverse !important; } .au-u-flex--column-reverse\@tiny { flex-direction: column-reverse !important; } .au-u-flex--start\@tiny { justify-content: flex-start !important; } .au-u-flex--center\@tiny { justify-content: center !important; } .au-u-flex--between\@tiny { justify-content: space-between !important; } .au-u-flex--around\@tiny { justify-content: space-around !important; } .au-u-flex--end\@tiny { justify-content: flex-end !important; } .au-u-flex--vertical-start\@tiny { align-items: flex-start !important; } .au-u-flex--vertical-end\@tiny { align-items: flex-end !important; } .au-u-flex--vertical-center\@tiny { align-items: center !important; } .au-u-flex--vertical-baseline\@tiny { align-items: baseline !important; } .au-u-flex-self-start\@tiny { align-self: flex-start !important; } .au-u-flex-self-end\@tiny { align-self: flex-end !important; } .au-u-flex-self-center\@tiny { align-self: center !important; } .au-u-flex-self-baseline\@tiny { align-self: baseline !important; } .au-u-flex-self-stretch\@tiny { align-self: stretch !important; } } @media (max-width: 31.24em) { .au-u-flex\@xsmall { display: flex !important; } .au-u-flex--inline\@xsmall { display: inline-flex !important; } .au-u-flex--wrap\@xsmall { flex-wrap: wrap !important; } .au-u-flex--no-wrap\@xsmall { flex-wrap: nowrap !important; } .au-u-flex--spaced\@xsmall { gap: 2.4rem !important; } .au-u-flex--spaced-tiny\@xsmall { gap: 0.6rem !important; } .au-u-flex--spaced-small\@xsmall { gap: 1.2rem !important; } .au-u-flex--spaced-large\@xsmall { gap: 4.8rem !important; } .au-u-flex--row\@xsmall { flex-direction: row !important; } .au-u-flex--column\@xsmall { flex-direction: column !important; } .au-u-flex--row-reverse\@xsmall { flex-direction: row-reverse !important; } .au-u-flex--column-reverse\@xsmall { flex-direction: column-reverse !important; } .au-u-flex--start\@xsmall { justify-content: flex-start !important; } .au-u-flex--center\@xsmall { justify-content: center !important; } .au-u-flex--between\@xsmall { justify-content: space-between !important; } .au-u-flex--around\@xsmall { justify-content: space-around !important; } .au-u-flex--end\@xsmall { justify-content: flex-end !important; } .au-u-flex--vertical-start\@xsmall { align-items: flex-start !important; } .au-u-flex--vertical-end\@xsmall { align-items: flex-end !important; } .au-u-flex--vertical-center\@xsmall { align-items: center !important; } .au-u-flex--vertical-baseline\@xsmall { align-items: baseline !important; } .au-u-flex-self-start\@xsmall { align-self: flex-start !important; } .au-u-flex-self-end\@xsmall { align-self: flex-end !important; } .au-u-flex-self-center\@xsmall { align-self: center !important; } .au-u-flex-self-baseline\@xsmall { align-self: baseline !important; } .au-u-flex-self-stretch\@xsmall { align-self: stretch !important; } } @media (max-width: 47.9275em) { .au-u-flex\@small { display: flex !important; } .au-u-flex--inline\@small { display: inline-flex !important; } .au-u-flex--wrap\@small { flex-wrap: wrap !important; } .au-u-flex--no-wrap\@small { flex-wrap: nowrap !important; } .au-u-flex--spaced\@small { gap: 2.4rem !important; } .au-u-flex--spaced-tiny\@small { gap: 0.6rem !important; } .au-u-flex--spaced-small\@small { gap: 1.2rem !important; } .au-u-flex--spaced-large\@small { gap: 4.8rem !important; } .au-u-flex--row\@small { flex-direction: row !important; } .au-u-flex--column\@small { flex-direction: column !important; } .au-u-flex--row-reverse\@small { flex-direction: row-reverse !important; } .au-u-flex--column-reverse\@small { flex-direction: column-reverse !important; } .au-u-flex--start\@small { justify-content: flex-start !important; } .au-u-flex--center\@small { justify-content: center !important; } .au-u-flex--between\@small { justify-content: space-between !important; } .au-u-flex--around\@small { justify-content: space-around !important; } .au-u-flex--end\@small { justify-content: flex-end !important; } .au-u-flex--vertical-start\@small { align-items: flex-start !important; } .au-u-flex--vertical-end\@small { align-items: flex-end !important; } .au-u-flex--vertical-center\@small { align-items: center !important; } .au-u-flex--vertical-baseline\@small { align-items: baseline !important; } .au-u-flex-self-start\@small { align-self: flex-start !important; } .au-u-flex-self-end\@small { align-self: flex-end !important; } .au-u-flex-self-center\@small { align-self: center !important; } .au-u-flex-self-baseline\@small { align-self: baseline !important; } .au-u-flex-self-stretch\@small { align-self: stretch !important; } } @media (max-width: 63.9275em) { .au-u-flex\@medium { display: flex !important; } .au-u-flex--inline\@medium { display: inline-flex !important; } .au-u-flex--wrap\@medium { flex-wrap: wrap !important; } .au-u-flex--no-wrap\@medium { flex-wrap: nowrap !important; } .au-u-flex--spaced\@medium { gap: 2.4rem !important; } .au-u-flex--spaced-tiny\@medium { gap: 0.6rem !important; } .au-u-flex--spaced-small\@medium { gap: 1.2rem !important; } .au-u-flex--spaced-large\@medium { gap: 4.8rem !important; } .au-u-flex--row\@medium { flex-direction: row !important; } .au-u-flex--column\@medium { flex-direction: column !important; } .au-u-flex--row-reverse\@medium { flex-direction: row-reverse !important; } .au-u-flex--column-reverse\@medium { flex-direction: column-reverse !important; } .au-u-flex--start\@medium { justify-content: flex-start !important; } .au-u-flex--center\@medium { justify-content: center !important; } .au-u-flex--between\@medium { justify-content: space-between !important; } .au-u-flex--around\@medium { justify-content: space-around !important; } .au-u-flex--end\@medium { justify-content: flex-end !important; } .au-u-flex--vertical-start\@medium { align-items: flex-start !important; } .au-u-flex--vertical-end\@medium { align-items: flex-end !important; } .au-u-flex--vertical-center\@medium { align-items: center !important; } .au-u-flex--vertical-baseline\@medium { align-items: baseline !important; } .au-u-flex-self-start\@medium { align-self: flex-start !important; } .au-u-flex-self-end\@medium { align-self: flex-end !important; } .au-u-flex-self-center\@medium { align-self: center !important; } .au-u-flex-self-baseline\@medium { align-self: baseline !important; } .au-u-flex-self-stretch\@medium { align-self: stretch !important; } } @media (max-width: 99.99em) { .au-u-flex\@large { display: flex !important; } .au-u-flex--inline\@large { display: inline-flex !important; } .au-u-flex--wrap\@large { flex-wrap: wrap !important; } .au-u-flex--no-wrap\@large { flex-wrap: nowrap !important; } .au-u-flex--spaced\@large { gap: 2.4rem !important; } .au-u-flex--spaced-tiny\@large { gap: 0.6rem !important; } .au-u-flex--spaced-small\@large { gap: 1.2rem !important; } .au-u-flex--spaced-large\@large { gap: 4.8rem !important; } .au-u-flex--row\@large { flex-direction: row !important; } .au-u-flex--column\@large { flex-direction: column !important; } .au-u-flex--row-reverse\@large { flex-direction: row-reverse !important; } .au-u-flex--column-reverse\@large { flex-direction: column-reverse !important; } .au-u-flex--start\@large { justify-content: flex-start !important; } .au-u-flex--center\@large { justify-content: center !important; } .au-u-flex--between\@large { justify-content: space-between !important; } .au-u-flex--around\@large { justify-content: space-around !important; } .au-u-flex--end\@large { justify-content: flex-end !important; } .au-u-flex--vertical-start\@large { align-items: flex-start !important; } .au-u-flex--vertical-end\@large { align-items: flex-end !important; } .au-u-flex--vertical-center\@large { align-items: center !important; } .au-u-flex--vertical-baseline\@large { align-items: baseline !important; } .au-u-flex-self-start\@large { align-self: flex-start !important; } .au-u-flex-self-end\@large { align-self: flex-end !important; } .au-u-flex-self-center\@large { align-self: center !important; } .au-u-flex-self-baseline\@large { align-self: baseline !important; } .au-u-flex-self-stretch\@large { 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; } } .c-interface { display: flex; flex-wrap: wrap; } @media (min-width: 47.9375em) { .c-interface { flex-direction: row-reverse; align-items: stretch; height: 100%; } } .c-interface__sidebar { --sidebar: 100%; flex-basis: var(--sidebar); width: var(--sidebar); padding: 1.2rem; background-color: var(--au-gray-100); border-bottom: 0.1rem solid var(--au-gray-200); } @media (min-width: 47.9375em) { .c-interface__sidebar { --sidebar: 250px; padding: 2.4rem; border-bottom: 0; border-right: 0.1rem solid var(--au-gray-200); height: 100%; } } @media (min-width: 63.9375em) { .c-interface__sidebar { --sidebar: 300px; } } @media (min-width: 100em) { .c-interface__sidebar { --sidebar: 356px; } } @media (max-width: 47.9275em) { .c-interface__sidebar--dialog { display: none; position: fixed; width: 100%; height: 100%; z-index: 3; top: 0; left: 0; background-color: var(--au-white); flex-direction: column; } .c-interface__sidebar--dialog.is-visible { display: flex; } } .c-interface__content { --main: 100%; flex-basis: var(--main); padding: 1.2rem; overflow: auto; } .c-interface__content > div { scroll-behavior: smooth; } @media (min-width: 47.9375em) { .c-interface__content { --main: calc(100% - 250px); height: 100%; padding: 2.4rem; } } @media (min-width: 63.9375em) { .c-interface__content { --main: calc(100% - 300px); } } @media (min-width: 100em) { .c-interface__content { --main: calc(100% - 356px); } } .c-interface__content--fixed { height: 100%; overflow: hidden; padding: 0; } .c-interface__sidebar-main { display: flex; flex-direction: column; gap: 2.4rem; flex-grow: 1; } @media (min-width: 47.9375em) { .c-interface__filter-button { display: none; } } @media (max-width: 47.9275em) { .au-c-interface__filter-link { display: none; } } @media (min-width: 47.9375em) { .au-c-interface__filter-link { font-size: var(--au-base); line-height: 1; font-weight: var(--au-regular); position: absolute; top: -1000px; left: -1000px; } .au-c-interface__filter-link, .au-c-interface__filter-link:hover, .au-c-interface__filter-link:focus { color: var(--au-gray-900); text-decoration: underline; text-decoration-color: var(--au-gray-300); } .au-c-interface__filter-link:focus { position: relative; outline: var(--au-outline); top: 1.2rem; left: 0; } } .c-interface__sidebar-submit-buttons { display: flex; flex-direction: column; gap: 0.6rem; } @media (min-width: 47.9375em) { .c-interface__sidebar-submit-buttons { display: none; } } .c-interface__sidebar-close-button { display: flex; justify-content: flex-end; } @media (min-width: 47.9375em) { .c-interface__sidebar-close-button { display: none; } } .c-infinite-list > li + li { margin-top: 1.2rem; padding-top: 1.2rem; border-top: 0.1rem solid var(--au-gray-200); } @media (min-width: 100em) { .c-infinite-list > li + li { margin-top: 1.8rem; padding-top: 1.8rem; } } .c-description-list { font-size: var(--au-h6); line-height: var(--au-global-line-height); display: flex; flex-direction: column; gap: 1.2rem; color: var(--au-gray-700); margin-left: 0 !important; } .c-description-list > li { list-style: none; display: flex; gap: 1.2rem; align-items: center; } .c-description-list > li > .au-c-icon { color: var(--au-gray-900); } :root { --value-abstentions: 0; --value-opponents: 0; --value-proponents: 0; } .c-chart { display: flex; gap: 2.4rem; margin-top: 2.4rem; align-items: center; flex-direction: column; } @media (min-width: 47.9375em) { .c-chart { flex-direction: row; } } .c-chart__pie { margin: 0 auto; transform: rotate(-90deg); border-radius: 50%; display: block; height: auto; flex-shrink: 0; width: 200px; } .c-chart__pie circle { width: 100%; height: 100%; } .c-chart__legend { font-size: var(--au-h6); line-height: var(--au-global-line-height); color: var(--au-gray-700); flex-shrink: 0; width: 200px; } @media (min-width: 47.9375em) { .c-chart__legend { width: calc(100% - 200px); } } .c-chart__legend-item { list-style-type: none; display: flex; align-items: center; } .c-chart__legend-item::before { content: ""; display: block; width: 1.2rem; height: 1.2rem; background-color: var(--au-gray-500); border-radius: 0.3rem; margin-bottom: 0.1rem; margin-right: 1.2rem; } .c-chart__legend-item--proponents::before { background-color: var(--au-green-500); } .c-chart__legend-item--opponents::before { background-color: var(--au-red-600); } .c-chart__legend-item--abstentions::before { background-color: var(--au-gray-400); } .c-pie { fill: transparent; stroke-width: 50; stroke-dasharray: 0 158; transform: rotate(var(--offset)); transform-origin: center center; } .c-pie--proponents { stroke: var(--au-green-500); stroke-dasharray: var(--value-proponents) 158; } .c-pie--opponents { --offset: calc(((var(--value-proponents) / 158) * 360) * 1deg); stroke: var(--au-red-600); stroke-dasharray: var(--value-opponents) 158; } .c-pie--abstentions { --offset: calc( (((var(--value-proponents) + var(--value-opponents)) / 158) * 360) * 1deg ); stroke: var(--au-gray-400); stroke-dasharray: var(--value-abstentions) 158; } .c-responsive-tables { --width: 100%; --gap: 1.2rem; display: flex; flex-wrap: wrap; margin-top: 1.2rem; gap: var(--gap); } .c-responsive-tables .au-c-table { min-width: 100%; } .c-responsive-tables > .au-c-table-wrapper { flex-basis: var(--width); } .c-responsive-tables tr:last-child { border-bottom: 0; } @media (min-width: 47.9375em) { .c-responsive-tables { --width: 33.333%; --gap: 0; } .c-responsive-tables > .au-c-table-wrapper:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; } .c-responsive-tables > .au-c-table-wrapper + .au-c-table-wrapper { border-left: 0; border-top-left-radius: 0; border-bottom-left-radius: 0; } } .c-home-text { width: 600px; } @media (max-height: 580px) { .c-home-text { height: 100%; } } @media (min-height: 580px) { .c-home-text { height: auto; } } .c-home-text-container { display: flex; justify-content: center; align-items: center; overflow-y: auto; height: 100%; width: 100%; } .c-home { display: flex; flex-direction: column; justify-content: center; width: 100%; } .c-home > * { padding: 2.4rem; } @media (min-width: 47.9375em) { .c-home { margin-left: 50%; width: 50%; height: 100%; } } @media (min-width: 63.9375em) { .c-home > * { padding-top: 4.8rem; margin-left: auto; margin-right: auto; } } @media (max-width: 47.9275em) { .c-home .au-c-home__form { position: relative; z-index: 1; } .c-home .c-home__visual + p { margin-top: 4.8rem; margin-right: 130px; } .c-home h1 { background-color: #ffffff; padding: 2.4rem; margin-top: -2.4rem; margin-right: -2.4rem; margin-left: -2.4rem; padding-bottom: 4.8rem; } } @media (min-width: 47.9375em) { .c-home__visual { position: absolute; left: 0; top: -2.4rem; display: flex; justify-content: center; width: 50%; height: 100%; padding: 4.8rem; background-color: #ffffff; } .c-home__visual > img { max-width: 465px; width: 100%; } } @media (min-width: 47.9375em) { .c-home__visual { padding: 4.8rem; background-color: #ffffff; } } @media (max-width: 47.9275em) { .c-home__visual { position: relative; margin: -3.6rem -1.2rem -9.6rem auto; width: 130px; height: 130px; padding: 0; } } .graph-bar-container { height: 25px; position: relative; justify-content: end; } .au-o-grid { display: grid; grid-template-columns: repeat(2, 1fr); } .au-o-grid--tiny { gap: 1.2rem; } .truncate { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .graph-bar-text { position: absolute; left: 0; } .graph-bar { justify-content: end; height: 25px; background-color: var(--au-blue-300); } .graph-bar-count { text-align: end; padding-right: 10px; padding-left: 10px; } .au-o-region-huge { padding-top: 2.4rem; padding-bottom: 2.4rem; } @media (min-width: 63.9375em) { .au-o-region-huge { padding-top: 9.6rem; padding-bottom: 9.6rem; } } @media (min-width: 47.9375em) { .u-top-sticky { top: 2.4rem; position: sticky; } } .u-header-link { text-decoration: none; font-weight: var(--au-medium); } .u-color-top-border { border-top: solid 0.5rem var(--au-yellow-300); } .u-gray-top-border { border-top: 1px solid var(--au-gray-200); } .au-c-card--fill { height: initial !important; } .c-accordion-holder { display: flex; } .c-accordion-holder .au-c-accordion .au-c-toolbar { align-items: center; } .c-accordion-holder .au-c-accordion .au-c-icon { margin-top: 0 !important; } .c-accordion-holder .au-c-accordion .au-c-button--link { text-decoration: none; font-weight: var(--au-medium); font-size: var(--au-h4); line-height: var(--au-global-line-height); } .c-accordion-holder > .au-c-accordion { margin-top: 0.6rem; width: 100%; padding-bottom: 0; } .c-accordion-holder > .au-c-accordion .au-c-toolbar { align-items: flex-start; } .c-accordion-holder > .au-c-accordion .au-c-toolbar .au-c-icon { margin-top: 0.85rem !important; } .c-accordion-holder > .au-c-accordion > .au-c-content { margin-left: -7.2rem; border-top: 0.1rem solid var(--au-gray-200); margin-top: 2.4rem; padding-top: 0; } .c-accordion-holder:first-of-type { padding-top: 1.2rem; border-top: 0.1rem solid var(--au-gray-200); } .c-accordion-holder + .c-accordion-holder { margin-top: 1.2rem; padding-top: 1.2rem; border-top: 0.1rem solid var(--au-gray-200); } .c-accordion-holder--top > .au-c-accordion > .au-c-content { margin-left: 0; } .au-c-form-row--button { --gap: 1.2rem; --button: 100%; display: flex; flex-flow: row wrap; gap: var(--gap); } .au-c-form-row--button > .au-c-input-wrapper { flex-basis: 100%; } .au-c-form-row--button > .au-c-button { flex-basis: var(--button); } @media (min-width: 47.9375em) { .au-c-form-row--button { --button: 100px; } .au-c-form-row--button > .au-c-input-wrapper { flex-basis: calc(100% - var(--gap) - var(--button)); } } .c-advanced-filter-holder .au-c-accordion .au-c-toolbar__group .au-c-icon { color: var(--au-gray-900); } .c-advanced-filter-holder .au-c-accordion .au-c-button { color: var(--au-gray-900); text-decoration: none; font-weight: var(--au-medium); font-size: var(--au-h5); line-height: var(--au-global-line-height); } .u-truncate { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; text-overflow: ellipsis; overflow: hidden; max-width: 50ch; } .u-overflow-y-scroll { overflow-y: scroll; height: 100%; } * + .u-overflow-divider { border-top: 0.1rem solid var(--au-gray-200); margin-top: 1.2rem; } @media (min-width: 100em) { * + .u-overflow-divider { margin-top: 1.8rem; } } .u-overflow-padding { padding: 1.2rem 2.4rem 2.4rem; } @media (min-width: 100em) { .u-overflow-padding { padding-top: 1.8rem; } } @media (max-width: 47.9275em) { .au-c-main-footer .au-c-list-horizontal { flex-direction: column; gap: 1.2rem; align-items: flex-start; margin-top: 0; } } @media (max-width: 47.9275em) { .au-c-main-footer .au-c-list-horizontal__item + .au-c-list-horizontal__item { border-left: 0; margin-left: 0; padding-left: 0; } } .au-c-input { background-color: var(--au-white); } .ember-power-select-group-name { font-weight: var(--au-medium); padding: 1.2rem 2.4rem; color: var(--au-gray-900); font-family: var(--au-font); } .au-c-input[type=date] { -webkit-appearance: none; -moz-appearance: none; appearance: none; line-height: 3.6rem; } .au-c-input[type=date]::-webkit-datetime-edit, .au-c-input[type=date]::-webkit-datetime-edit-year-field, .au-c-input[type=date]::-webkit-datetime-edit-month-field, .au-c-input[type=date]::-webkit-datetime-edit-day-field, .au-c-input[type=date]::-webkit-datetime-edit-hour-field, .au-c-input[type=date]::-webkit-datetime-edit-minute-field, .au-c-input[type=date]::-webkit-datetime-edit-second-field, .au-c-input[type=date]::-webkit-datetime-edit-millisecond-field, .au-c-input[type=date]::-webkit-datetime-edit-meridiem-field { padding-top: 0; padding-bottom: 0; } .au-c-input[type=date]::-webkit-datetime-edit-fields-wrapper { padding: 0; } .au-c-input[type=date]::-webkit-date-and-time-value { min-height: 1.5em; text-align: left; } @media (min-width: 47.9375em) { .au-u-max-width-xsmall\@small { max-width: 500px; } } .au-o-layout.au-o-region-large, .au-c-main-container__content { height: 100%; display: flex; flex-direction: column; } .au-c-main-footer { display: flex; flex-wrap: wrap; gap: 2.4rem; } .au-c-main-footer > .au-c-main-footer__brand { padding: 0; } .au-c-main-footer .au-c-brand { display: flex; } .au-c-main-footer > .au-c-main-footer__content { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2.4rem; flex-grow: 1; padding-top: 0.18rem; } .ember-power-select-multiple-options li { list-style: none; } ul.au-c-pagination__list > li { margin-top: 6px; list-style-type: none; } img { max-width: none; } #page-not-found .au-o-grid { height: 100%; } .tooltip-wrapper { position: relative; display: inline-block; cursor: pointer; } .custom-tooltip { background-color: #333; color: white; font-size: 0.85rem; border-radius: 4px; padding: 5px 8px; } .no-link { text-decoration: none; color: inherit; } .disabled-link { text-decoration: none; color: var(--au-gray-500); cursor: not-allowed; pointer-events: none; } .disabled-link :hover { text-decoration: none; color: var(--au-gray-500); } .au-u-height-full { height: 100%; }