From ad609410c5b0d05a11418967bbbd0f221a820196 Mon Sep 17 00:00:00 2001 From: Angelos Chalaris Date: Mon, 28 May 2018 12:01:52 +0300 Subject: [PATCH] Generator updates --- README.md | 12 +- dist/mini-dark.css | 4532 ++++++++++++------------- dist/mini-dark.min.css | 2 +- dist/mini-default.css | 2 +- dist/mini-nord.css | 4566 ++++++++++++-------------- dist/mini-nord.min.css | 2 +- docs/build-docs.js | 12 + docs/doc-fragments/premadeFlavors.js | 7 +- docs/v3/DEVLOG.md | 3 +- docs/v3/docs.html | 6 +- docs/v3/flavors.html | 9 +- docs/v3/flavors/mini-dark.css | 2171 ++++++++++++ docs/v3/flavors/mini-dark.min.css | 1 + docs/v3/flavors/mini-dark.scss | 276 ++ docs/v3/flavors/mini-default.css | 2169 ++++++++++++ docs/v3/flavors/mini-default.min.css | 1 + docs/v3/flavors/mini-default.scss | 138 + docs/v3/flavors/mini-nord.css | 2168 ++++++++++++ docs/v3/flavors/mini-nord.min.css | 1 + docs/v3/flavors/mini-nord.scss | 277 ++ docs/v3/index.html | 2 +- docs/v3/mini.zip | Bin 25971 -> 0 bytes docs/vinf.js | 2 +- src/flavors/mini-dark.scss | 276 ++ src/flavors/mini-nord.scss | 277 ++ 25 files changed, 12111 insertions(+), 4801 deletions(-) create mode 100644 docs/v3/flavors/mini-dark.css create mode 100644 docs/v3/flavors/mini-dark.min.css create mode 100644 docs/v3/flavors/mini-dark.scss create mode 100644 docs/v3/flavors/mini-default.css create mode 100644 docs/v3/flavors/mini-default.min.css create mode 100644 docs/v3/flavors/mini-default.scss create mode 100644 docs/v3/flavors/mini-nord.css create mode 100644 docs/v3/flavors/mini-nord.min.css create mode 100644 docs/v3/flavors/mini-nord.scss delete mode 100644 docs/v3/mini.zip create mode 100644 src/flavors/mini-dark.scss create mode 100644 src/flavors/mini-nord.scss diff --git a/README.md b/README.md index e29d18a..c762e53 100644 --- a/README.md +++ b/README.md @@ -4,8 +4,7 @@ A minimal, responsive, style-agnostic CSS framework [![npm](https://img.shields.io/npm/v/mini.css.svg)](https://www.npmjs.com/package/mini.css) [![license](https://img.shields.io/badge/license-MIT-yellow.svg)](https://github.com/Chalarangelo/mini.css/blob/master/LICENSE) -[![website](https://img.shields.io/badge/website-online-green.svg)](https://chalarangelo.github.io/mini.css/) -[![Gitter](https://img.shields.io/gitter/room/minicss/Lobby.svg)](https://gitter.im/minicss/Lobby?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge) +[![website](https://img.shields.io/badge/website-online-green.svg)](https://minicss.org) ![Logo](/docs/page_thumb.png) @@ -30,9 +29,9 @@ npm install mini.css yarn add mini.css bower install mini.css ``` -2. Pick one of the available [flavors](https://chalarangelo.github.io/mini.css/flavors.html) and use its CSS file. +2. Pick one of the available [flavors](https://minicss.org/flavors) and use its CSS file. -3. Start working on your project. Detailed documentation is available on the framework's [website](https://chalarangelo.github.io/mini.css/modules.html), so be sure to check it out. +3. Start working on your project. Detailed documentation is available on the framework's [website](https://minicss.org/docs), so be sure to check it out. #### Method 2: Use GitCDN @@ -58,9 +57,9 @@ If you would rather use an older version of the framework, you should head over ## Flavors & customizaton -*Flavors* are one of the key features of **mini.css**, allowing you to customize your website's design and make your project stand out. We provide you with a few pre-defined [flavors](https://chalarangelo.github.io/mini.css/flavors.html) that might suit your needs and will help you figure out how to use the framework and create websites and apps with it. +*Flavors* are one of the key features of **mini.css**, allowing you to customize your website's design and make your project stand out. We provide you with a few pre-defined [flavors](https://minicss.org/flavors#prebuilt-flavors) that might suit your needs and will help you figure out how to use the framework and create websites and apps with it. -But you can easily build you own flavors by editing a flavor file and customizing almost everything. For more information, head over to the [Customization page](https://chalarangelo.github.io/mini.css/customization/index.html) and build your own flavor the way you like it. +But you can easily build you own flavors by using our [flavor generator tool](https://minicss.org/flavors#build-your-own-flavor), which allows you to customize almost everything. Take your time and create the perfect flavo to suit your needs. --- @@ -78,7 +77,6 @@ The team behind **mini.css** is as follows: - Angelos Chalaris ([@chalarangelo](https://github.com/Chalarangelo)) - Sass archmage, project manager Special thanks to these fine folks for helping in the development of **mini.css**: -- Angeliki Daskalakis ([@angiedaskalakis](https://github.com/AngieDaskalakis)) - Author of the [Sucroa](https://github.com/Chalarangelo/mini.css/blob/master/dist/mini-sucroa.css) flavor - [@tphecca](https://github.com/tphecca) - Author of the [Nord](https://github.com/Chalarangelo/mini.css/blob/master/dist/mini-nord.css) flavor - [Per Harald Borgen](https://scrimba.com/perborgen) - Introductory video creator - Rory Primrose ([@roryprimrose](https://github.com/roryprimrose)) - Code restructure diff --git a/dist/mini-dark.css b/dist/mini-dark.css index 150b266..0b7b21b 100644 --- a/dist/mini-dark.css +++ b/dist/mini-dark.css @@ -1,2377 +1,2171 @@ -@charset "UTF-8"; +@charset "UTF-8"; /* Flavor name: Dark (mini-dark) Author: Angelos Chalaris (chalarangelo@gmail.com) Maintainers: Angelos Chalaris - mini.css version: v2.3.7 -*/ + mini.css version: v3.0.0 +*/ +/* + Browsers resets and base typography. +*/ +/* Core module CSS variable definitions */ +:root { + --fore-color: #fdfdfd; + --secondary-fore-color: #f0f0f0; + --back-color: #111; + --secondary-back-color: #222; + --blockquote-color: #f57c00; + --pre-color: #1565c0; + --border-color: #ddd; + --secondary-border-color: #aaa; + --heading-ratio: 1.19; + --universal-margin: 0.5rem; + --universal-padding: 0.5rem; + --universal-border-radius: 0.125rem; + --a-link-color: #0277bd; + --a-visited-color: #01579b; +} + +html { + font-size: 16px; +} + +a, b, del, em, i, ins, q, span, strong, u { + font-size: 1em; +} + +html, * { + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, sans-serif; + line-height: 1.5; + -webkit-text-size-adjust: 100%; +} + +* { + font-size: 1rem; +} + +body { + margin: 0; + color: var(--fore-color); + background: var(--back-color); +} + +details { + display: block; +} + +summary { + display: list-item; +} + +abbr[title] { + border-bottom: none; + text-decoration: underline dotted; +} + +input { + overflow: visible; +} + +img { + max-width: 100%; + height: auto; +} + +h1, h2, h3, h4, h5, h6 { + line-height: 1.2; + margin: calc(1.5 * var(--universal-margin)) var(--universal-margin); + font-weight: 500; +} + +h1 small, h2 small, h3 small, h4 small, h5 small, h6 small { + color: var(--secondary-fore-color); + display: block; + margin-top: -0.25rem; +} + +h1 { + font-size: calc(1rem * var(--heading-ratio) * var(--heading-ratio) * var(--heading-ratio) * var(--heading-ratio)); +} + +h2 { + font-size: calc(1rem * var(--heading-ratio) * var(--heading-ratio) * var(--heading-ratio)); +} + +h3 { + font-size: calc(1rem * var(--heading-ratio) * var(--heading-ratio)); +} + +h4 { + font-size: calc(1rem * var(--heading-ratio)); +} + +h5 { + font-size: 1rem; +} + +h6 { + font-size: calc(1rem / var(--heading-ratio)); +} + +p { + margin: var(--universal-margin); +} + +ol, ul { + margin: var(--universal-margin); + padding-left: calc(2 * var(--universal-margin)); +} + +b, strong { + font-weight: 700; +} + +hr { + box-sizing: content-box; + border: 0; + line-height: 1.25em; + margin: var(--universal-margin); + height: 0.0625rem; + background: linear-gradient(to right, transparent, var(--border-color) 20%, var(--border-color) 80%, transparent); +} + +blockquote { + display: block; + position: relative; + font-style: italic; + color: var(--secondary-fore-color); + margin: var(--universal-margin); + padding: calc(3 * var(--universal-padding)); + border: 0.0625rem solid var(--secondary-border-color); + border-left: 0.375rem solid var(--blockquote-color); + border-radius: 0 var(--universal-border-radius) var(--universal-border-radius) 0; +} + +blockquote:before { + position: absolute; + top: calc(0rem - var(--universal-padding)); + left: 0; + font-family: sans-serif; + font-size: 3rem; + font-weight: 700; + content: "\201c"; + color: var(--blockquote-color); +} + +blockquote[cite]:after { + font-style: normal; + font-size: 0.75em; + font-weight: 700; + content: "\a— " attr(cite); + white-space: pre; +} + +code, kbd, pre, samp { + font-family: Menlo, Consolas, monospace; + font-size: 0.85em; +} + +code { + background: var(--secondary-back-color); + border-radius: var(--universal-border-radius); + padding: calc(var(--universal-padding) / 4) calc(var(--universal-padding) / 2); +} + +kbd { + background: var(--fore-color); + color: var(--back-color); + border-radius: var(--universal-border-radius); + padding: calc(var(--universal-padding) / 4) calc(var(--universal-padding) / 2); +} + +pre { + overflow: auto; + background: var(--secondary-back-color); + padding: calc(1.5 * var(--universal-padding)); + margin: var(--universal-margin); + border: 0.0625rem solid var(--secondary-border-color); + border-left: 0.25rem solid var(--pre-color); + border-radius: 0 var(--universal-border-radius) var(--universal-border-radius) 0; +} + +sup, sub, code, kbd { + line-height: 0; + position: relative; + vertical-align: baseline; +} + +small, sup, sub, figcaption { + font-size: 0.75em; +} + +sup { + top: -0.5em; +} + +sub { + bottom: -0.25em; +} + +figure { + margin: var(--universal-margin); +} + +figcaption { + color: var(--secondary-fore-color); +} + +a { + text-decoration: none; +} + +a:link { + color: var(--a-link-color); +} + +a:visited { + color: var(--a-visited-color); +} + +a:hover, a:focus { + text-decoration: underline; +} + +/* + Definitions for the grid system, cards and containers. +*/ +.container { + margin: 0 auto; + padding: 0 calc(1.5 * var(--universal-padding)); +} + +.row { + box-sizing: border-box; + display: flex; + flex: 0 1 auto; + flex-flow: row wrap; +} + +.col-sm, +[class^='col-sm-'], +[class^='col-sm-offset-'], +.row[class*='cols-sm-'] > * { + box-sizing: border-box; + flex: 0 0 auto; + padding: 0 calc(var(--universal-padding) / 2); +} + +.col-sm, +.row.cols-sm > * { + max-width: 100%; + flex-grow: 1; + flex-basis: 0; +} + +.col-sm-1, +.row.cols-sm-1 > * { + max-width: 8.33333%; + flex-basis: 8.33333%; +} + +.col-sm-offset-0 { + margin-left: 0; +} + +.col-sm-2, +.row.cols-sm-2 > * { + max-width: 16.66667%; + flex-basis: 16.66667%; +} + +.col-sm-offset-1 { + margin-left: 8.33333%; +} + +.col-sm-3, +.row.cols-sm-3 > * { + max-width: 25%; + flex-basis: 25%; +} + +.col-sm-offset-2 { + margin-left: 16.66667%; +} + +.col-sm-4, +.row.cols-sm-4 > * { + max-width: 33.33333%; + flex-basis: 33.33333%; +} + +.col-sm-offset-3 { + margin-left: 25%; +} + +.col-sm-5, +.row.cols-sm-5 > * { + max-width: 41.66667%; + flex-basis: 41.66667%; +} + +.col-sm-offset-4 { + margin-left: 33.33333%; +} + +.col-sm-6, +.row.cols-sm-6 > * { + max-width: 50%; + flex-basis: 50%; +} + +.col-sm-offset-5 { + margin-left: 41.66667%; +} + +.col-sm-7, +.row.cols-sm-7 > * { + max-width: 58.33333%; + flex-basis: 58.33333%; +} + +.col-sm-offset-6 { + margin-left: 50%; +} + +.col-sm-8, +.row.cols-sm-8 > * { + max-width: 66.66667%; + flex-basis: 66.66667%; +} + +.col-sm-offset-7 { + margin-left: 58.33333%; +} + +.col-sm-9, +.row.cols-sm-9 > * { + max-width: 75%; + flex-basis: 75%; +} + +.col-sm-offset-8 { + margin-left: 66.66667%; +} + +.col-sm-10, +.row.cols-sm-10 > * { + max-width: 83.33333%; + flex-basis: 83.33333%; +} + +.col-sm-offset-9 { + margin-left: 75%; +} + +.col-sm-11, +.row.cols-sm-11 > * { + max-width: 91.66667%; + flex-basis: 91.66667%; +} + +.col-sm-offset-10 { + margin-left: 83.33333%; +} + +.col-sm-12, +.row.cols-sm-12 > * { + max-width: 100%; + flex-basis: 100%; +} + +.col-sm-offset-11 { + margin-left: 91.66667%; +} + +.col-sm-normal { + order: initial; +} + +.col-sm-first { + order: -999; +} + +.col-sm-last { + order: 999; +} + +@media screen and (min-width: 768px) { + .col-md, + [class^='col-md-'], + [class^='col-md-offset-'], + .row[class*='cols-md-'] > * { + box-sizing: border-box; + flex: 0 0 auto; + padding: 0 calc(var(--universal-padding) / 2); + } + .col-md, + .row.cols-md > * { + max-width: 100%; + flex-grow: 1; + flex-basis: 0; + } + .col-md-1, + .row.cols-md-1 > * { + max-width: 8.33333%; + flex-basis: 8.33333%; + } + .col-md-offset-0 { + margin-left: 0; + } + .col-md-2, + .row.cols-md-2 > * { + max-width: 16.66667%; + flex-basis: 16.66667%; + } + .col-md-offset-1 { + margin-left: 8.33333%; + } + .col-md-3, + .row.cols-md-3 > * { + max-width: 25%; + flex-basis: 25%; + } + .col-md-offset-2 { + margin-left: 16.66667%; + } + .col-md-4, + .row.cols-md-4 > * { + max-width: 33.33333%; + flex-basis: 33.33333%; + } + .col-md-offset-3 { + margin-left: 25%; + } + .col-md-5, + .row.cols-md-5 > * { + max-width: 41.66667%; + flex-basis: 41.66667%; + } + .col-md-offset-4 { + margin-left: 33.33333%; + } + .col-md-6, + .row.cols-md-6 > * { + max-width: 50%; + flex-basis: 50%; + } + .col-md-offset-5 { + margin-left: 41.66667%; + } + .col-md-7, + .row.cols-md-7 > * { + max-width: 58.33333%; + flex-basis: 58.33333%; + } + .col-md-offset-6 { + margin-left: 50%; + } + .col-md-8, + .row.cols-md-8 > * { + max-width: 66.66667%; + flex-basis: 66.66667%; + } + .col-md-offset-7 { + margin-left: 58.33333%; + } + .col-md-9, + .row.cols-md-9 > * { + max-width: 75%; + flex-basis: 75%; + } + .col-md-offset-8 { + margin-left: 66.66667%; + } + .col-md-10, + .row.cols-md-10 > * { + max-width: 83.33333%; + flex-basis: 83.33333%; + } + .col-md-offset-9 { + margin-left: 75%; + } + .col-md-11, + .row.cols-md-11 > * { + max-width: 91.66667%; + flex-basis: 91.66667%; + } + .col-md-offset-10 { + margin-left: 83.33333%; + } + .col-md-12, + .row.cols-md-12 > * { + max-width: 100%; + flex-basis: 100%; + } + .col-md-offset-11 { + margin-left: 91.66667%; + } + .col-md-normal { + order: initial; + } + .col-md-first { + order: -999; + } + .col-md-last { + order: 999; + } +} + +@media screen and (min-width: 1280px) { + .col-lg, + [class^='col-lg-'], + [class^='col-lg-offset-'], + .row[class*='cols-lg-'] > * { + box-sizing: border-box; + flex: 0 0 auto; + padding: 0 calc(var(--universal-padding) / 2); + } + .col-lg, + .row.cols-lg > * { + max-width: 100%; + flex-grow: 1; + flex-basis: 0; + } + .col-lg-1, + .row.cols-lg-1 > * { + max-width: 8.33333%; + flex-basis: 8.33333%; + } + .col-lg-offset-0 { + margin-left: 0; + } + .col-lg-2, + .row.cols-lg-2 > * { + max-width: 16.66667%; + flex-basis: 16.66667%; + } + .col-lg-offset-1 { + margin-left: 8.33333%; + } + .col-lg-3, + .row.cols-lg-3 > * { + max-width: 25%; + flex-basis: 25%; + } + .col-lg-offset-2 { + margin-left: 16.66667%; + } + .col-lg-4, + .row.cols-lg-4 > * { + max-width: 33.33333%; + flex-basis: 33.33333%; + } + .col-lg-offset-3 { + margin-left: 25%; + } + .col-lg-5, + .row.cols-lg-5 > * { + max-width: 41.66667%; + flex-basis: 41.66667%; + } + .col-lg-offset-4 { + margin-left: 33.33333%; + } + .col-lg-6, + .row.cols-lg-6 > * { + max-width: 50%; + flex-basis: 50%; + } + .col-lg-offset-5 { + margin-left: 41.66667%; + } + .col-lg-7, + .row.cols-lg-7 > * { + max-width: 58.33333%; + flex-basis: 58.33333%; + } + .col-lg-offset-6 { + margin-left: 50%; + } + .col-lg-8, + .row.cols-lg-8 > * { + max-width: 66.66667%; + flex-basis: 66.66667%; + } + .col-lg-offset-7 { + margin-left: 58.33333%; + } + .col-lg-9, + .row.cols-lg-9 > * { + max-width: 75%; + flex-basis: 75%; + } + .col-lg-offset-8 { + margin-left: 66.66667%; + } + .col-lg-10, + .row.cols-lg-10 > * { + max-width: 83.33333%; + flex-basis: 83.33333%; + } + .col-lg-offset-9 { + margin-left: 75%; + } + .col-lg-11, + .row.cols-lg-11 > * { + max-width: 91.66667%; + flex-basis: 91.66667%; + } + .col-lg-offset-10 { + margin-left: 83.33333%; + } + .col-lg-12, + .row.cols-lg-12 > * { + max-width: 100%; + flex-basis: 100%; + } + .col-lg-offset-11 { + margin-left: 91.66667%; + } + .col-lg-normal { + order: initial; + } + .col-lg-first { + order: -999; + } + .col-lg-last { + order: 999; + } +} + +/* Card component CSS variable definitions */ +:root { + --card-back-color: #111; + --card-fore-color: #fdfdfd; + --card-border-color: #aaa; +} + +.card { + display: flex; + flex-direction: column; + justify-content: space-between; + align-self: center; + position: relative; + width: 100%; + background: var(--card-back-color); + color: var(--card-fore-color); + border: 0.0625rem solid var(--card-border-color); + border-radius: var(--universal-border-radius); + margin: var(--universal-margin); + overflow: hidden; +} + +@media screen and (min-width: 320px) { + .card { + max-width: 320px; + } +} + +.card > .section { + background: var(--card-back-color); + color: var(--card-fore-color); + box-sizing: border-box; + margin: 0; + border: 0; + border-radius: 0; + border-bottom: 0.0625rem solid var(--card-border-color); + padding: var(--universal-padding); + width: 100%; +} + +.card > .section.media { + height: 200px; + padding: 0; + -o-object-fit: cover; + object-fit: cover; +} + +.card > .section:last-child { + border-bottom: 0; +} + /* - Browsers resets and base typography. -*/ -html { - font-size: 16px; -} - -html, * { - font-family: -apple-system, BlinkMacSystemFont,"Segoe UI","Roboto", "Droid Sans","Helvetica Neue", Helvetica, Arial, sans-serif; - line-height: 1.5; - -webkit-text-size-adjust: 100%; -} - -* { - font-size: 1rem; -} - -body { - margin: 0; - color: #d0d0d0; - background: #232e33; -} - -article, aside, section, figcaption, figure, main, details, menu { - display: block; -} - -summary { - display: list-item; -} - -abbr[title] { - border-bottom: none; - text-decoration: underline; -} - -audio, video { - display: inline-block; -} - -svg:not(:root) { - overflow: hidden; -} - -input { - overflow: visible; -} - -img { - max-width: 100%; - height: auto; -} - -dfn { - font-style: italic; -} - -h1, h2, h3, h4, h5, h6 { - line-height: 1.2em; - margin: 0.75rem 0.5rem; - font-weight: 500; -} - -h1 small, h2 small, h3 small, h4 small, h5 small, h6 small { - color: #acacac; - display: block; - margin-top: -0.25rem; -} - -h1 { - font-size: 2rem; -} - -h2 { - font-size: 1.6875rem; -} - -h3 { - font-size: 1.4375rem; -} - -h4 { - font-size: 1.1875rem; -} - -h5 { - font-size: 1rem; -} - -h6 { - font-size: 0.8125rem; -} - -p { - margin: 0.5rem; -} - -ol, ul { - margin: 0.5rem; - padding-left: 1rem; -} - -b, strong { - font-weight: 700; -} - -hr { - box-sizing: content-box; - border: 0; - overflow: visible; - line-height: 1.25em; - margin: 0.5rem; - height: 0.0625rem; - background: linear-gradient(to right, #616161, #9e9e9e, #616161); -} - -blockquote { - display: block; - position: relative; - font-style: italic; - margin: 0.5rem; - padding: 0.5rem 0.5rem 1.5rem; - border-left: 0.25rem solid #192024; - border-radius: 0 0.125rem 0.125rem 0; -} - -blockquote:after { - position: absolute; - font-style: normal; - font-size: 0.875rem; - color: #acacac; - left: 0.625rem; - bottom: 0; - content: "— " attr(cite); -} - -code, kbd, pre, samp { - font-family: monospace, monospace; -} - -code { - border-radius: 0.125rem; - background: #20292e; - padding: 0.125rem 0.25rem; -} - -pre { - overflow: auto; - border-radius: 0 0.125rem 0.125rem 0; - background: #20292e; - padding: 0.75rem; - margin: 0.5rem; - border-left: 0.25rem solid #01579b; -} - -kbd { - border-radius: 0.125rem; - background: #fafafa; - color: #0c0c0c; - padding: 0.125rem 0.25rem; -} - -small, sup, sub { - font-size: 0.75em; -} - -sup { - top: -0.5em; -} - -sub { - bottom: -0.25em; -} - -sup, sub { - line-height: 0; - position: relative; - vertical-align: baseline; -} - -a { - color: #039be5; - text-decoration: underline; - opacity: 1; - transition: opacity 0.3s; -} - -a:visited { - color: #0288d1; -} - -a:hover, a:focus { - opacity: 0.75; -} - -figcaption { - font-size: 0.8125rem; - color: #acacac; -} - + Custom elements for card elements. +*/ +@media screen and (min-width: 240px) { + .card.small { + max-width: 240px; + } +} + +@media screen and (min-width: 480px) { + .card.large { + max-width: 480px; + } +} + +.card.fluid { + max-width: 100%; + width: auto; +} + +.card.warning { + --card-back-color: #ffca28; + --card-fore-color: #111; + --card-border-color: #e8b825; +} + +.card.error { + --card-back-color: #b71c1c; + --card-fore-color: #f8f8f8; + --card-border-color: #a71a1a; +} + +.card > .section.dark { + --card-back-color: #e0e0e0; + --card-fore-color: #111; +} + +.card > .section.double-padded { + padding: calc(1.5 * var(--universal-padding)); +} + +/* + Definitions for forms and input elements. +*/ +/* Input_control module CSS variable definitions */ +:root { + --form-back-color: #222; + --form-fore-color: #fdfdfd; + --form-border-color: #aaa; + --input-back-color: #111; + --input-fore-color: #fdfdfd; + --input-border-color: #aaa; + --input-focus-color: #0288d1; + --input-invalid-color: #d32f2f; + --button-back-color: #212121; + --button-hover-back-color: #444; + --button-fore-color: #e2e2e2; + --button-border-color: transparent; + --button-hover-border-color: transparent; + --button-group-border-color: rgba(124, 124, 124, 0.54); +} + +form { + background: var(--form-back-color); + color: var(--form-fore-color); + border: 0.0625rem solid var(--form-border-color); + border-radius: var(--universal-border-radius); + margin: var(--universal-margin); + padding: calc(2 * var(--universal-padding)) var(--universal-padding); +} + +fieldset { + border: 0.0625rem solid var(--form-border-color); + border-radius: var(--universal-border-radius); + margin: calc(var(--universal-margin) / 4); + padding: var(--universal-padding); +} + +legend { + box-sizing: border-box; + display: table; + max-width: 100%; + white-space: normal; + font-weight: 700; + padding: calc(var(--universal-padding) / 2); +} + +label { + padding: calc(var(--universal-padding) / 2) var(--universal-padding); +} + +.input-group { + display: inline-block; +} + +.input-group.fluid { + display: flex; + align-items: center; + justify-content: center; +} + +.input-group.fluid > input { + max-width: 100%; + flex-grow: 1; + flex-basis: 0px; +} + +@media screen and (max-width: 767px) { + .input-group.fluid { + align-items: stretch; + flex-direction: column; + } +} + +.input-group.vertical { + display: flex; + align-items: stretch; + flex-direction: column; +} + +.input-group.vertical > input { + max-width: 100%; + flex-grow: 1; + flex-basis: 0px; +} + +[type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { + height: auto; +} + +[type="search"] { + -webkit-appearance: textfield; + outline-offset: -2px; +} + +[type="search"]::-webkit-search-cancel-button, +[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; +} + +input:not([type]), [type="text"], [type="email"], [type="number"], [type="search"], +[type="password"], [type="url"], [type="tel"], [type="checkbox"], [type="radio"], textarea, select { + box-sizing: border-box; + background: var(--input-back-color); + color: var(--input-fore-color); + border: 0.0625rem solid var(--input-border-color); + border-radius: var(--universal-border-radius); + margin: calc(var(--universal-margin) / 2); + padding: var(--universal-padding) calc(1.5 * var(--universal-padding)); +} + +input:not([type="button"]):not([type="submit"]):not([type="reset"]):hover, input:not([type="button"]):not([type="submit"]):not([type="reset"]):focus, textarea:hover, textarea:focus, select:hover, select:focus { + border-color: var(--input-focus-color); + box-shadow: none; +} + +input:not([type="button"]):not([type="submit"]):not([type="reset"]):invalid, input:not([type="button"]):not([type="submit"]):not([type="reset"]):focus:invalid, textarea:invalid, textarea:focus:invalid, select:invalid, select:focus:invalid { + border-color: var(--input-invalid-color); + box-shadow: none; +} + +input:not([type="button"]):not([type="submit"]):not([type="reset"])[readonly], textarea[readonly], select[readonly] { + background: var(--secondary-back-color); +} + +select { + max-width: 100%; +} + +option { + overflow: hidden; + text-overflow: ellipsis; +} + +[type="checkbox"], [type="radio"] { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + position: relative; + height: calc(1rem + var(--universal-padding) / 2); + width: calc(1rem + var(--universal-padding) / 2); + vertical-align: text-bottom; + padding: 0; + flex-basis: calc(1rem + var(--universal-padding) / 2) !important; + flex-grow: 0 !important; +} + +[type="checkbox"]:checked:before, [type="radio"]:checked:before { + position: absolute; +} + +[type="checkbox"]:checked:before { + content: '\2713'; + font-family: sans-serif; + font-size: calc(1rem + var(--universal-padding) / 2); + top: calc(0rem - var(--universal-padding)); + left: calc(var(--universal-padding) / 4); +} + +[type="radio"] { + border-radius: 100%; +} + +[type="radio"]:checked:before { + border-radius: 100%; + content: ''; + top: calc(0.0625rem + var(--universal-padding) / 2); + left: calc(0.0625rem + var(--universal-padding) / 2); + background: var(--input-fore-color); + width: 0.5rem; + height: 0.5rem; +} + +:placeholder-shown { + color: var(--input-fore-color); +} + +::-ms-placeholder { + color: var(--input-fore-color); + opacity: 0.54; +} + +button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { + border-style: none; + padding: 0; +} + +button, html [type="button"], [type="reset"], [type="submit"] { + -webkit-appearance: button; +} + +button { + overflow: visible; + text-transform: none; +} + +button, [type="button"], [type="submit"], [type="reset"], +a.button, label.button, .button, +a[role="button"], label[role="button"], [role="button"] { + display: inline-block; + background: var(--button-back-color); + color: var(--button-fore-color); + border: 0.0625rem solid var(--button-border-color); + border-radius: var(--universal-border-radius); + padding: var(--universal-padding) calc(1.5 * var(--universal-padding)); + margin: var(--universal-margin); + text-decoration: none; + cursor: pointer; + transition: background 0.3s; +} + +button:hover, button:focus, [type="button"]:hover, [type="button"]:focus, [type="submit"]:hover, [type="submit"]:focus, [type="reset"]:hover, [type="reset"]:focus, +a.button:hover, +a.button:focus, label.button:hover, label.button:focus, .button:hover, .button:focus, +a[role="button"]:hover, +a[role="button"]:focus, label[role="button"]:hover, label[role="button"]:focus, [role="button"]:hover, [role="button"]:focus { + background: var(--button-hover-back-color); + border-color: var(--button-hover-border-color); +} + +input:disabled, input[disabled], textarea:disabled, textarea[disabled], select:disabled, select[disabled], button:disabled, button[disabled], .button:disabled, .button[disabled], [role="button"]:disabled, [role="button"][disabled] { + cursor: not-allowed; + opacity: 0.75; +} + +.button-group { + display: flex; + border: 0.0625rem solid var(--button-group-border-color); + border-radius: var(--universal-border-radius); + margin: var(--universal-margin); +} + +.button-group > button, .button-group [type="button"], .button-group > [type="submit"], .button-group > [type="reset"], +.button-group > .button, .button-group > [role="button"] { + margin: 0; + max-width: 100%; + flex: 1 1 auto; + text-align: center; + border: 0; + border-radius: 0; + box-shadow: none; +} + +.button-group > :not(:first-child) { + border-left: 0.0625rem solid var(--button-group-border-color); +} + +@media screen and (max-width: 767px) { + .button-group { + flex-direction: column; + } + .button-group > :not(:first-child) { + border: 0; + border-top: 0.0625rem solid var(--button-group-border-color); + } +} + /* - Definitions for the grid system. -*/ -.container { - margin: 0 auto; - padding: 0 0.75rem; -} - -.row { - box-sizing: border-box; - display: -webkit-box; - -webkit-box-flex: 0; - -webkit-box-orient: horizontal; - -webkit-box-direction: normal; - display: -webkit-flex; - display: flex; - -webkit-flex: 0 1 auto; - flex: 0 1 auto; - -webkit-flex-flow: row wrap; - flex-flow: row wrap; -} - -.col-sm, -[class^='col-sm-'], -[class^='col-sm-offset-'], -.row[class*='cols-sm-'] > * { - box-sizing: border-box; - -webkit-box-flex: 0; - -webkit-flex: 0 0 auto; - flex: 0 0 auto; - padding: 0 0.25rem; -} - -.col-sm, -.row.cols-sm > * { - -webkit-box-flex: 1; - max-width: 100%; - -webkit-flex-grow: 1; - flex-grow: 1; - -webkit-flex-basis: 0; - flex-basis: 0; -} - -.col-sm-1, -.row.cols-sm-1 > * { - max-width: 8.33333%; - -webkit-flex-basis: 8.33333%; - flex-basis: 8.33333%; -} - -.col-sm-2, -.row.cols-sm-2 > * { - max-width: 16.66667%; - -webkit-flex-basis: 16.66667%; - flex-basis: 16.66667%; -} - -.col-sm-3, -.row.cols-sm-3 > * { - max-width: 25%; - -webkit-flex-basis: 25%; - flex-basis: 25%; -} - -.col-sm-4, -.row.cols-sm-4 > * { - max-width: 33.33333%; - -webkit-flex-basis: 33.33333%; - flex-basis: 33.33333%; -} - -.col-sm-5, -.row.cols-sm-5 > * { - max-width: 41.66667%; - -webkit-flex-basis: 41.66667%; - flex-basis: 41.66667%; -} - -.col-sm-6, -.row.cols-sm-6 > * { - max-width: 50%; - -webkit-flex-basis: 50%; - flex-basis: 50%; -} - -.col-sm-7, -.row.cols-sm-7 > * { - max-width: 58.33333%; - -webkit-flex-basis: 58.33333%; - flex-basis: 58.33333%; -} - -.col-sm-8, -.row.cols-sm-8 > * { - max-width: 66.66667%; - -webkit-flex-basis: 66.66667%; - flex-basis: 66.66667%; -} - -.col-sm-9, -.row.cols-sm-9 > * { - max-width: 75%; - -webkit-flex-basis: 75%; - flex-basis: 75%; -} - -.col-sm-10, -.row.cols-sm-10 > * { - max-width: 83.33333%; - -webkit-flex-basis: 83.33333%; - flex-basis: 83.33333%; -} - -.col-sm-11, -.row.cols-sm-11 > * { - max-width: 91.66667%; - -webkit-flex-basis: 91.66667%; - flex-basis: 91.66667%; -} - -.col-sm-12, -.row.cols-sm-12 > * { - max-width: 100%; - -webkit-flex-basis: 100%; - flex-basis: 100%; -} - -.col-sm-offset-0 { - margin-left: 0; -} - -.col-sm-offset-1 { - margin-left: 8.33333%; -} - -.col-sm-offset-2 { - margin-left: 16.66667%; -} - -.col-sm-offset-3 { - margin-left: 25%; -} - -.col-sm-offset-4 { - margin-left: 33.33333%; -} - -.col-sm-offset-5 { - margin-left: 41.66667%; -} - -.col-sm-offset-6 { - margin-left: 50%; -} - -.col-sm-offset-7 { - margin-left: 58.33333%; -} - -.col-sm-offset-8 { - margin-left: 66.66667%; -} - -.col-sm-offset-9 { - margin-left: 75%; -} - -.col-sm-offset-10 { - margin-left: 83.33333%; -} - -.col-sm-offset-11 { - margin-left: 91.66667%; -} - -.col-sm-normal { - -webkit-order: initial; - order: initial; -} - -.col-sm-first { - -webkit-order: -999; - order: -999; -} - -.col-sm-last { - -webkit-order: 999; - order: 999; -} - -@media screen and (min-width: 768px) { - .col-md, - [class^='col-md-'], - [class^='col-md-offset-'], .row[class*='cols-md-'] > * { - box-sizing: border-box; - -webkit-box-flex: 0; - -webkit-flex: 0 0 auto; - flex: 0 0 auto; - padding: 0 0.25rem; - } - .col-md, - .row.cols-md > * { - -webkit-box-flex: 1; - max-width: 100%; - -webkit-flex-grow: 1; - flex-grow: 1; - -webkit-flex-basis: 0; - flex-basis: 0; - } - .col-md-1, - .row.cols-md-1 > * { - max-width: 8.33333%; - -webkit-flex-basis: 8.33333%; - flex-basis: 8.33333%; - } - .col-md-2, - .row.cols-md-2 > * { - max-width: 16.66667%; - -webkit-flex-basis: 16.66667%; - flex-basis: 16.66667%; - } - .col-md-3, - .row.cols-md-3 > * { - max-width: 25%; - -webkit-flex-basis: 25%; - flex-basis: 25%; - } - .col-md-4, - .row.cols-md-4 > * { - max-width: 33.33333%; - -webkit-flex-basis: 33.33333%; - flex-basis: 33.33333%; - } - .col-md-5, - .row.cols-md-5 > * { - max-width: 41.66667%; - -webkit-flex-basis: 41.66667%; - flex-basis: 41.66667%; - } - .col-md-6, - .row.cols-md-6 > * { - max-width: 50%; - -webkit-flex-basis: 50%; - flex-basis: 50%; - } - .col-md-7, - .row.cols-md-7 > * { - max-width: 58.33333%; - -webkit-flex-basis: 58.33333%; - flex-basis: 58.33333%; - } - .col-md-8, - .row.cols-md-8 > * { - max-width: 66.66667%; - -webkit-flex-basis: 66.66667%; - flex-basis: 66.66667%; - } - .col-md-9, - .row.cols-md-9 > * { - max-width: 75%; - -webkit-flex-basis: 75%; - flex-basis: 75%; - } - .col-md-10, - .row.cols-md-10 > * { - max-width: 83.33333%; - -webkit-flex-basis: 83.33333%; - flex-basis: 83.33333%; - } - .col-md-11, - .row.cols-md-11 > * { - max-width: 91.66667%; - -webkit-flex-basis: 91.66667%; - flex-basis: 91.66667%; - } - .col-md-12, - .row.cols-md-12 > * { - max-width: 100%; - -webkit-flex-basis: 100%; - flex-basis: 100%; - } - .col-md-offset-0 { - margin-left: 0; - } - .col-md-offset-1 { - margin-left: 8.33333%; - } - .col-md-offset-2 { - margin-left: 16.66667%; - } - .col-md-offset-3 { - margin-left: 25%; - } - .col-md-offset-4 { - margin-left: 33.33333%; - } - .col-md-offset-5 { - margin-left: 41.66667%; - } - .col-md-offset-6 { - margin-left: 50%; - } - .col-md-offset-7 { - margin-left: 58.33333%; - } - .col-md-offset-8 { - margin-left: 66.66667%; - } - .col-md-offset-9 { - margin-left: 75%; - } - .col-md-offset-10 { - margin-left: 83.33333%; - } - .col-md-offset-11 { - margin-left: 91.66667%; - } - .col-md-normal { - -webkit-order: initial; - order: initial; - } - .col-md-first { - -webkit-order: -999; - order: -999; - } - .col-md-last { - -webkit-order: 999; - order: 999; - } -} - -@media screen and (min-width: 1280px) { - .col-lg, - [class^='col-lg-'], - [class^='col-lg-offset-'], - .row[class*='cols-lg-'] > * { - box-sizing: border-box; - -webkit-box-flex: 0; - -webkit-flex: 0 0 auto; - flex: 0 0 auto; - padding: 0 0.25rem; - } - .col-lg, - .row.cols-lg > * { - -webkit-box-flex: 1; - max-width: 100%; - -webkit-flex-grow: 1; - flex-grow: 1; - -webkit-flex-basis: 0; - flex-basis: 0; - } - .col-lg-1, - .row.cols-lg-1 > * { - max-width: 8.33333%; - -webkit-flex-basis: 8.33333%; - flex-basis: 8.33333%; - } - .col-lg-2, - .row.cols-lg-2 > * { - max-width: 16.66667%; - -webkit-flex-basis: 16.66667%; - flex-basis: 16.66667%; - } - .col-lg-3, - .row.cols-lg-3 > * { - max-width: 25%; - -webkit-flex-basis: 25%; - flex-basis: 25%; - } - .col-lg-4, - .row.cols-lg-4 > * { - max-width: 33.33333%; - -webkit-flex-basis: 33.33333%; - flex-basis: 33.33333%; - } - .col-lg-5, - .row.cols-lg-5 > * { - max-width: 41.66667%; - -webkit-flex-basis: 41.66667%; - flex-basis: 41.66667%; - } - .col-lg-6, - .row.cols-lg-6 > * { - max-width: 50%; - -webkit-flex-basis: 50%; - flex-basis: 50%; - } - .col-lg-7, - .row.cols-lg-7 > * { - max-width: 58.33333%; - -webkit-flex-basis: 58.33333%; - flex-basis: 58.33333%; - } - .col-lg-8, - .row.cols-lg-8 > * { - max-width: 66.66667%; - -webkit-flex-basis: 66.66667%; - flex-basis: 66.66667%; - } - .col-lg-9, - .row.cols-lg-9 > * { - max-width: 75%; - -webkit-flex-basis: 75%; - flex-basis: 75%; - } - .col-lg-10, - .row.cols-lg-10 > * { - max-width: 83.33333%; - -webkit-flex-basis: 83.33333%; - flex-basis: 83.33333%; - } - .col-lg-11, - .row.cols-lg-11 > * { - max-width: 91.66667%; - -webkit-flex-basis: 91.66667%; - flex-basis: 91.66667%; - } - .col-lg-12, - .row.cols-lg-12 > * { - max-width: 100%; - -webkit-flex-basis: 100%; - flex-basis: 100%; - } - .col-lg-offset-0 { - margin-left: 0; - } - .col-lg-offset-1 { - margin-left: 8.33333%; - } - .col-lg-offset-2 { - margin-left: 16.66667%; - } - .col-lg-offset-3 { - margin-left: 25%; - } - .col-lg-offset-4 { - margin-left: 33.33333%; - } - .col-lg-offset-5 { - margin-left: 41.66667%; - } - .col-lg-offset-6 { - margin-left: 50%; - } - .col-lg-offset-7 { - margin-left: 58.33333%; - } - .col-lg-offset-8 { - margin-left: 66.66667%; - } - .col-lg-offset-9 { - margin-left: 75%; - } - .col-lg-offset-10 { - margin-left: 83.33333%; - } - .col-lg-offset-11 { - margin-left: 91.66667%; - } - .col-lg-normal { - -webkit-order: initial; - order: initial; - } - .col-lg-first { - -webkit-order: -999; - order: -999; - } - .col-lg-last { - -webkit-order: 999; - order: 999; - } -} - + Custom elements for forms and input elements. +*/ +button.primary, [type="button"].primary, [type="submit"].primary, [type="reset"].primary, .button.primary, [role="button"].primary { + --button-back-color: #1976d2; + --button-fore-color: #f8f8f8; +} + +button.primary:hover, button.primary:focus, [type="button"].primary:hover, [type="button"].primary:focus, [type="submit"].primary:hover, [type="submit"].primary:focus, [type="reset"].primary:hover, [type="reset"].primary:focus, .button.primary:hover, .button.primary:focus, [role="button"].primary:hover, [role="button"].primary:focus { + --button-hover-back-color: #1565c0; +} + +button.secondary, [type="button"].secondary, [type="submit"].secondary, [type="reset"].secondary, .button.secondary, [role="button"].secondary { + --button-back-color: #d32f2f; + --button-fore-color: #f8f8f8; +} + +button.secondary:hover, button.secondary:focus, [type="button"].secondary:hover, [type="button"].secondary:focus, [type="submit"].secondary:hover, [type="submit"].secondary:focus, [type="reset"].secondary:hover, [type="reset"].secondary:focus, .button.secondary:hover, .button.secondary:focus, [role="button"].secondary:hover, [role="button"].secondary:focus { + --button-hover-back-color: #c62828; +} + +button.tertiary, [type="button"].tertiary, [type="submit"].tertiary, [type="reset"].tertiary, .button.tertiary, [role="button"].tertiary { + --button-back-color: #308732; + --button-fore-color: #f8f8f8; +} + +button.tertiary:hover, button.tertiary:focus, [type="button"].tertiary:hover, [type="button"].tertiary:focus, [type="submit"].tertiary:hover, [type="submit"].tertiary:focus, [type="reset"].tertiary:hover, [type="reset"].tertiary:focus, .button.tertiary:hover, .button.tertiary:focus, [role="button"].tertiary:hover, [role="button"].tertiary:focus { + --button-hover-back-color: #277529; +} + +button.inverse, [type="button"].inverse, [type="submit"].inverse, [type="reset"].inverse, .button.inverse, [role="button"].inverse { + --button-back-color: #f8f8f8; + --button-fore-color: #212121; +} + +button.inverse:hover, button.inverse:focus, [type="button"].inverse:hover, [type="button"].inverse:focus, [type="submit"].inverse:hover, [type="submit"].inverse:focus, [type="reset"].inverse:hover, [type="reset"].inverse:focus, .button.inverse:hover, .button.inverse:focus, [role="button"].inverse:hover, [role="button"].inverse:focus { + --button-hover-back-color: #f0f0f0; +} + +button.small, [type="button"].small, [type="submit"].small, [type="reset"].small, .button.small, [role="button"].small { + padding: calc(0.5 * var(--universal-padding)) calc(0.75 * var(--universal-padding)); + margin: var(--universal-margin); +} + +button.large, [type="button"].large, [type="submit"].large, [type="reset"].large, .button.large, [role="button"].large { + padding: calc(1.5 * var(--universal-padding)) calc(2 * var(--universal-padding)); + margin: var(--universal-margin); +} + +/* + Definitions for navigation elements. +*/ +/* Navigation module CSS variable definitions */ +:root { + --header-back-color: #111; + --header-hover-back-color: #222; + --header-fore-color: #f0f0f0; + --header-border-color: #aaa; + --nav-back-color: #111; + --nav-hover-back-color: #222; + --nav-fore-color: #f0f0f0; + --nav-border-color: #aaa; + --nav-link-color: #0277bd; + --footer-fore-color: #f0f0f0; + --footer-back-color: #111; + --footer-border-color: #aaa; + --footer-link-color: #0277bd; + --drawer-back-color: #111; + --drawer-hover-back-color: #222; + --drawer-border-color: #aaa; + --drawer-close-color: #f0f0f0; +} + +header { + height: 3.1875rem; + background: var(--header-back-color); + color: var(--header-fore-color); + border-bottom: 0.0625rem solid var(--header-border-color); + padding: calc(var(--universal-padding) / 4) 0; + white-space: nowrap; + overflow-x: auto; + overflow-y: hidden; +} + +header.row { + box-sizing: content-box; +} + +header .logo { + color: var(--header-fore-color); + font-size: 1.75rem; + padding: var(--universal-padding) calc(2 * var(--universal-padding)); + text-decoration: none; +} + +header button, header [type="button"], header .button, header [role="button"] { + box-sizing: border-box; + position: relative; + top: calc(0rem - var(--universal-padding) / 4); + height: calc(3.1875rem + var(--universal-padding) / 2); + background: var(--header-back-color); + line-height: calc(3.1875rem - var(--universal-padding) * 1.5); + text-align: center; + color: var(--header-fore-color); + border: 0; + border-radius: 0; + margin: 0; + text-transform: uppercase; +} + +header button:hover, header button:focus, header [type="button"]:hover, header [type="button"]:focus, header .button:hover, header .button:focus, header [role="button"]:hover, header [role="button"]:focus { + background: var(--header-hover-back-color); +} + +nav { + background: var(--nav-back-color); + color: var(--nav-fore-color); + border: 0.0625rem solid var(--nav-border-color); + border-radius: var(--universal-border-radius); + margin: var(--universal-margin); +} + +nav * { + padding: var(--universal-padding) calc(1.5 * var(--universal-padding)); +} + +nav a, nav a:visited { + display: block; + color: var(--nav-link-color); + border-radius: var(--universal-border-radius); + transition: background 0.3s; +} + +nav a:hover, nav a:focus, nav a:visited:hover, nav a:visited:focus { + text-decoration: none; + background: var(--nav-hover-back-color); +} + +nav .sublink-1 { + position: relative; + margin-left: calc(2 * var(--universal-padding)); +} + +nav .sublink-1:before { + position: absolute; + left: calc(var(--universal-padding) - 1 * var(--universal-padding)); + top: -0.0625rem; + content: ''; + height: 100%; + border: 0.0625rem solid var(--nav-border-color); + border-left: 0; +} + +nav .sublink-2 { + position: relative; + margin-left: calc(4 * var(--universal-padding)); +} + +nav .sublink-2:before { + position: absolute; + left: calc(var(--universal-padding) - 3 * var(--universal-padding)); + top: -0.0625rem; + content: ''; + height: 100%; + border: 0.0625rem solid var(--nav-border-color); + border-left: 0; +} + +footer { + background: var(--footer-back-color); + color: var(--footer-fore-color); + border-top: 0.0625rem solid var(--footer-border-color); + padding: calc(2 * var(--universal-padding)) var(--universal-padding); + font-size: 0.875rem; +} + +footer a, footer a:visited { + color: var(--footer-link-color); +} + +header.sticky { + position: -webkit-sticky; + position: sticky; + z-index: 1101; + top: 0; +} + +footer.sticky { + position: -webkit-sticky; + position: sticky; + z-index: 1101; + bottom: 0; +} + +.drawer-toggle:before { + display: inline-block; + position: relative; + vertical-align: bottom; + content: '\00a0\2261\00a0'; + font-family: sans-serif; + font-size: 1.5em; +} + +@media screen and (min-width: 768px) { + .drawer-toggle:not(.persistent) { + display: none; + } +} + +[type="checkbox"].drawer { + height: 1px; + width: 1px; + margin: -1px; + overflow: hidden; + position: absolute; + clip: rect(0 0 0 0); + -webkit-clip-path: inset(100%); + clip-path: inset(100%); +} + +[type="checkbox"].drawer + * { + display: block; + box-sizing: border-box; + position: fixed; + top: 0; + width: 320px; + height: 100vh; + overflow-y: auto; + background: var(--drawer-back-color); + border: 0.0625rem solid var(--drawer-border-color); + border-radius: 0; + margin: 0; + z-index: 1110; + right: -320px; + transition: right 0.3s; +} + +[type="checkbox"].drawer + * .drawer-close { + position: absolute; + top: var(--universal-margin); + right: var(--universal-margin); + z-index: 1111; + width: 2rem; + height: 2rem; + border-radius: var(--universal-border-radius); + padding: var(--universal-padding); + margin: 0; + cursor: pointer; + transition: background 0.3s; +} + +[type="checkbox"].drawer + * .drawer-close:before { + display: block; + content: '\00D7'; + color: var(--drawer-close-color); + position: relative; + font-family: sans-serif; + font-size: 2rem; + line-height: 1; + text-align: center; +} + +[type="checkbox"].drawer + * .drawer-close:hover, [type="checkbox"].drawer + * .drawer-close:focus { + background: var(--drawer-hover-back-color); +} + +@media screen and (max-width: 320px) { + [type="checkbox"].drawer + * { + width: 100%; + } +} + +[type="checkbox"].drawer:checked + * { + right: 0; +} + +@media screen and (min-width: 768px) { + [type="checkbox"].drawer:not(.persistent) + * { + position: static; + height: 100%; + z-index: 1100; + } + [type="checkbox"].drawer:not(.persistent) + * .drawer-close { + display: none; + } +} + +/* + Definitions for the responsive table component. +*/ +/* Table module CSS variable definitions. */ +:root { + --table-border-color: #ddd; + --table-border-separator-color: #666; + --table-head-back-color: #212121; + --table-head-fore-color: #fdfdfd; + --table-body-back-color: #111; + --table-body-fore-color: #fdfdfd; + --table-body-alt-back-color: #444; +} + +table { + border-collapse: separate; + border-spacing: 0; + margin: 0; + display: flex; + flex: 0 1 auto; + flex-flow: row wrap; + padding: var(--universal-padding); + padding-top: 0; +} + +table caption { + font-size: 1.5rem; + margin: calc(2 * var(--universal-margin)) 0; + max-width: 100%; + flex: 0 0 100%; +} + +table thead, table tbody { + display: flex; + flex-flow: row wrap; + border: 0.0625rem solid var(--table-border-color); +} + +table thead { + z-index: 999; + border-radius: var(--universal-border-radius) var(--universal-border-radius) 0 0; + border-bottom: 0.0625rem solid var(--table-border-separator-color); +} + +table tbody { + border-top: 0; + margin-top: calc(0 - var(--universal-margin)); + border-radius: 0 0 var(--universal-border-radius) var(--universal-border-radius); +} + +table tr { + display: flex; + padding: 0; +} + +table th, table td { + padding: calc(2 * var(--universal-padding)); +} + +table th { + text-align: left; + background: var(--table-head-back-color); + color: var(--table-head-fore-color); +} + +table td { + background: var(--table-body-back-color); + color: var(--table-body-fore-color); + border-top: 0.0625rem solid var(--table-border-color); +} + +table:not(.horizontal) { + overflow: auto; + max-height: 400px; +} + +table:not(.horizontal) thead, table:not(.horizontal) tbody { + max-width: 100%; + flex: 0 0 100%; +} + +table:not(.horizontal) tr { + flex-flow: row wrap; + flex: 0 0 100%; +} + +table:not(.horizontal) th, table:not(.horizontal) td { + flex: 1 0 0%; + overflow: hidden; + text-overflow: ellipsis; +} + +table:not(.horizontal) thead { + position: sticky; + top: 0; +} + +table:not(.horizontal) tbody tr:first-child td { + border-top: 0; +} + +table.horizontal { + border: 0; +} + +table.horizontal thead, table.horizontal tbody { + border: 0; + flex-flow: row nowrap; +} + +table.horizontal tbody { + overflow: auto; + justify-content: space-between; + flex: 1 0 0; + margin-left: calc( 4 * var(--universal-margin)); + padding-bottom: calc(var(--universal-padding) / 4); +} + +table.horizontal tr { + flex-direction: column; + flex: 1 0 auto; +} + +table.horizontal th, table.horizontal td { + width: 100%; + border: 0; + border-bottom: 0.0625rem solid var(--table-border-color); +} + +table.horizontal th:not(:first-child), table.horizontal td:not(:first-child) { + border-top: 0; +} + +table.horizontal th { + text-align: right; + border-left: 0.0625rem solid var(--table-border-color); + border-right: 0.0625rem solid var(--table-border-separator-color); +} + +table.horizontal thead tr:first-child { + padding-left: 0; +} + +table.horizontal th:first-child, table.horizontal td:first-child { + border-top: 0.0625rem solid var(--table-border-color); +} + +table.horizontal tbody tr:last-child td { + border-right: 0.0625rem solid var(--table-border-color); +} + +table.horizontal tbody tr:last-child td:first-child { + border-top-right-radius: 0.25rem; +} + +table.horizontal tbody tr:last-child td:last-child { + border-bottom-right-radius: 0.25rem; +} + +table.horizontal thead tr:first-child th:first-child { + border-top-left-radius: 0.25rem; +} + +table.horizontal thead tr:first-child th:last-child { + border-bottom-left-radius: 0.25rem; +} + +@media screen and (max-width: 767px) { + table, table.horizontal { + border-collapse: collapse; + border: 0; + width: 100%; + display: table; + } + table thead, table th, table.horizontal thead, table.horizontal th { + border: 0; + height: 1px; + width: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + clip: rect(0 0 0 0); + -webkit-clip-path: inset(100%); + clip-path: inset(100%); + } + table tbody, table.horizontal tbody { + border: 0; + display: table-row-group; + } + table tr, table.horizontal tr { + display: block; + border: 0.0625rem solid var(--table-border-color); + border-radius: var(--universal-border-radius); + background: #fafafa; + padding: var(--universal-padding); + margin: var(--universal-margin); + margin-bottom: calc(2 * var(--universal-margin)); + } + table th, table td, table.horizontal th, table.horizontal td { + width: auto; + } + table td, table.horizontal td { + display: block; + border: 0; + text-align: right; + } + table td:before, table.horizontal td:before { + content: attr(data-label); + float: left; + font-weight: 600; + } + table th:first-child, table td:first-child, table.horizontal th:first-child, table.horizontal td:first-child { + border-top: 0; + } + table tbody tr:last-child td, table.horizontal tbody tr:last-child td { + border-right: 0; + } +} + +:root { + --table-body-alt-back-color: #444; +} + +table.striped tr:nth-of-type(2n) > td { + background: var(--table-body-alt-back-color); +} + +@media screen and (max-width: 768px) { + table.striped tr:nth-of-type(2n) { + background: var(--table-body-alt-back-color); + } +} + +:root { + --table-body-hover-back-color: #5c819f; +} + +table.hoverable tr:hover, table.hoverable tr:hover > td, table.hoverable tr:focus, table.hoverable tr:focus > td { + background: var(--table-body-hover-back-color); +} + +@media screen and (max-width: 768px) { + table.hoverable tr:hover, table.hoverable tr:hover > td, table.hoverable tr:focus, table.hoverable tr:focus > td { + background: var(--table-body-hover-back-color); + } +} + +/* + Definitions for contextual background elements, toasts and tooltips. +*/ +/* Contextual module CSS variable definitions */ +:root { + --mark-back-color: #0277bd; + --mark-fore-color: #fafafa; +} + +mark { + background: var(--mark-back-color); + color: var(--mark-fore-color); + font-size: 0.95em; + line-height: 1em; + border-radius: var(--universal-border-radius); + padding: calc(var(--universal-padding) / 4) calc(var(--universal-padding) / 2); +} + +mark.inline-block { + display: inline-block; + font-size: 1em; + line-height: 1.5; + padding: calc(var(--universal-padding) / 2) var(--universal-padding); +} + +:root { + --toast-back-color: #424242; + --toast-fore-color: #fafafa; +} + +.toast { + position: fixed; + bottom: calc(var(--universal-margin) * 3); + left: 50%; + transform: translate(-50%, -50%); + z-index: 1111; + color: var(--toast-fore-color); + background: var(--toast-back-color); + border-radius: calc(var(--universal-border-radius) * 16); + padding: var(--universal-padding) calc(var(--universal-padding) * 3); +} + +:root { + --tooltip-back-color: #fafafa; + --tooltip-fore-color: #212121; +} + +.tooltip { + position: relative; + display: inline-block; +} + +.tooltip:before, .tooltip:after { + position: absolute; + opacity: 0; + clip: rect(0 0 0 0); + -webkit-clip-path: inset(100%); + clip-path: inset(100%); + transition: all 0.3s; + z-index: 1010; + left: 50%; +} + +.tooltip:not(.bottom):before, .tooltip:not(.bottom):after { + bottom: 75%; +} + +.tooltip.bottom:before, .tooltip.bottom:after { + top: 75%; +} + +.tooltip:hover:before, .tooltip:hover:after, .tooltip:focus:before, .tooltip:focus:after { + opacity: 1; + clip: auto; + -webkit-clip-path: inset(0%); + clip-path: inset(0%); +} + +.tooltip:before { + content: ''; + background: transparent; + border: var(--universal-margin) solid transparent; + left: calc(50% - var(--universal-margin)); +} + +.tooltip:not(.bottom):before { + border-top-color: #fafafa; +} + +.tooltip.bottom:before { + border-bottom-color: #fafafa; +} + +.tooltip:after { + content: attr(aria-label); + color: var(--tooltip-fore-color); + background: var(--tooltip-back-color); + border-radius: var(--universal-border-radius); + padding: var(--universal-padding); + white-space: nowrap; + transform: translateX(-50%); +} + +.tooltip:not(.bottom):after { + margin-bottom: calc(2 * var(--universal-margin)); +} + +.tooltip.bottom:after { + margin-top: calc(2 * var(--universal-margin)); +} + +:root { + --modal-overlay-color: rgba(0, 0, 0, 0.45); + --modal-close-color: #f0f0f0; + --modal-close-hover-color: #222; +} + +[type="checkbox"].modal { + height: 1px; + width: 1px; + margin: -1px; + overflow: hidden; + position: absolute; + clip: rect(0 0 0 0); + -webkit-clip-path: inset(100%); + clip-path: inset(100%); +} + +[type="checkbox"].modal + div { + position: fixed; + top: 0; + left: 0; + display: none; + width: 100vw; + height: 100vh; + background: var(--modal-overlay-color); +} + +[type="checkbox"].modal + div .card { + margin: 0 auto; + max-height: 50vh; + overflow: auto; +} + +[type="checkbox"].modal + div .card .modal-close { + position: absolute; + top: 0; + right: 0; + width: 1.75rem; + height: 1.75rem; + border-radius: var(--universal-border-radius); + padding: var(--universal-padding); + margin: 0; + cursor: pointer; + transition: background 0.3s; +} + +[type="checkbox"].modal + div .card .modal-close:before { + display: block; + content: '\00D7'; + color: var(--modal-close-color); + position: relative; + font-family: sans-serif; + font-size: 1.75rem; + line-height: 1; + text-align: center; +} + +[type="checkbox"].modal + div .card .modal-close:hover, [type="checkbox"].modal + div .card .modal-close:focus { + background: var(--modal-close-hover-color); +} + +[type="checkbox"].modal:checked + div { + display: flex; + flex: 0 1 auto; + z-index: 1200; +} + +[type="checkbox"].modal:checked + div .card .modal-close { + z-index: 1211; +} + +:root { + --collapse-label-back-color: #111; + --collapse-label-fore-color: #fafafa; + --collapse-label-hover-back-color: #222; + --collapse-selected-label-back-color: #444; + --collapse-border-color: #aaa; + --collapse-content-back-color: #212121; + --collapse-selected-label-border-color: #0277bd; +} + +.collapse { + width: calc(100% - 2 * var(--universal-margin)); + opacity: 1; + display: flex; + flex-direction: column; + margin: var(--universal-margin); + border-radius: var(--universal-border-radius); +} + +.collapse > [type="radio"], .collapse > [type="checkbox"] { + height: 1px; + width: 1px; + margin: -1px; + overflow: hidden; + position: absolute; + clip: rect(0 0 0 0); + -webkit-clip-path: inset(100%); + clip-path: inset(100%); +} + +.collapse > label { + flex-grow: 1; + display: inline-block; + height: 1.5rem; + cursor: pointer; + transition: background 0.3s; + color: var(--collapse-label-fore-color); + background: var(--collapse-label-back-color); + border: 0.0625rem solid var(--collapse-border-color); + padding: calc(1.5 * var(--universal-padding)); +} + +.collapse > label:hover, .collapse > label:focus { + background: var(--collapse-label-hover-back-color); +} + +.collapse > label + div { + flex-basis: auto; + height: 1px; + width: 1px; + margin: -1px; + overflow: hidden; + position: absolute; + clip: rect(0 0 0 0); + -webkit-clip-path: inset(100%); + clip-path: inset(100%); + transition: max-height 0.3s; + max-height: 1px; +} + +.collapse > :checked + label { + background: var(--collapse-selected-label-back-color); + border-bottom-color: var(--collapse-selected-label-border-color); +} + +.collapse > :checked + label + div { + box-sizing: border-box; + position: relative; + width: 100%; + height: auto; + overflow: auto; + margin: 0; + background: var(--collapse-content-back-color); + border: 0.0625rem solid var(--collapse-border-color); + border-top: 0; + padding: var(--universal-padding); + clip: auto; + -webkit-clip-path: inset(0%); + clip-path: inset(0%); + max-height: 400px; +} + +.collapse > label:not(:first-of-type) { + border-top: 0; +} + +.collapse > label:first-of-type { + border-radius: var(--universal-border-radius) var(--universal-border-radius) 0 0; +} + +.collapse > label:last-of-type:not(:first-of-type) { + border-radius: 0 0 var(--universal-border-radius) var(--universal-border-radius); +} + +.collapse > label:last-of-type:first-of-type { + border-radius: var(--universal-border-radius); +} + +.collapse > :checked:last-of-type:not(:first-of-type) + label { + border-radius: 0; +} + +.collapse > :checked:last-of-type + label + div { + border-radius: 0 0 var(--universal-border-radius) var(--universal-border-radius); +} + /* - Definitions for forms and input elements. -*/ -form { - background: #1c2529; - color: #9e9e9e; - border: 0.0625rem solid #20292e; - margin: 0.5rem; - padding: 0.75rem 0.5rem 1.125rem; -} - -fieldset { - border: 0.0625rem solid #263238; - border-radius: 0.125rem; - margin: 0.125rem; - padding: 0.5rem; -} - -legend { - box-sizing: border-box; - display: table; - max-width: 100%; - white-space: normal; - font-weight: 700; - font-size: 0.875rem; - color: #9e9e9e; - padding: 0.125rem 0.25rem; -} - -label { - padding: 0.25rem 0.5rem; -} - -.input-group { - display: inline-block; -} - -.input-group.fluid { - display: -webkit-box; - -webkit-box-pack: justify; - display: -webkit-flex; - display: flex; - -webkit-align-items: center; - align-items: center; - -webkit-justify-content: center; - justify-content: center; -} - -.input-group.fluid > input { - -webkit-box-flex: 1; - max-width: 100%; - -webkit-flex-grow: 1; - flex-grow: 1; - -webkit-flex-basis: 0px; - flex-basis: 0px; -} - -@media screen and (max-width: 767px) { - .input-group.fluid { - -webkit-box-orient: vertical; - -webkit-align-items: stretch; - align-items: stretch; - -webkit-flex-direction: column; - flex-direction: column; - } -} - -.input-group.vertical { - display: -webkit-box; - -webkit-box-orient: vertical; - -webkit-box-pack: justify; - display: -webkit-flex; - display: flex; - -webkit-flex-direction: column; - flex-direction: column; - -webkit-align-items: stretch; - align-items: stretch; - -webkit-justify-content: center; - justify-content: center; -} - -.input-group.vertical > input { - -webkit-box-flex: 1; - max-width: 100%; - -webkit-flex-grow: 1; - flex-grow: 1; - -webkit-flex-basis: 0px; - flex-basis: 0px; -} - -[type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { - height: auto; -} - -textarea { - overflow: auto; -} - -[type="search"] { - -webkit-appearance: textfield; - outline-offset: -2px; -} - -[type="search"]::-webkit-search-cancel-button, -[type="search"]::-webkit-search-decoration { - -webkit-appearance: none; -} - -input:not([type]), [type="text"], [type="email"], [type="number"], [type="search"], -[type="password"], [type="url"], [type="tel"], textarea, select { - box-sizing: border-box; - background: #39444a; - color: #d0d0d0; - border: 0.0625rem solid #263238; - border-radius: 0.125rem; - margin: 0.25rem; - padding: 0.5rem 0.75rem; -} - -input:not([type="button"]):not([type="submit"]):not([type="reset"]):hover, input:not([type="button"]):not([type="submit"]):not([type="reset"]):focus, textarea:hover, textarea:focus, select:hover, select:focus { - border-color: #0288d1; - box-shadow: none; -} - -input:not([type="button"]):not([type="submit"]):not([type="reset"]):invalid, input:not([type="button"]):not([type="submit"]):not([type="reset"]):focus:invalid, textarea:invalid, textarea:focus:invalid, select:invalid, select:focus:invalid { - border-color: #d32f2f; - box-shadow: none; -} - -input:not([type="button"]):not([type="submit"]):not([type="reset"])[readonly], textarea[readonly], select[readonly] { - background: #263238; - border-color: #20292e; -} - -select:not([multiple]):not([size]) { - padding-right: 1.5rem; - background: url('data:image/svg+xml, ') no-repeat right; - background-color: #39444a; - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; -} - -select:not([multiple]):not([size])[readonly] { - background-color: #263238; -} - -select { - max-width: 100%; -} - -option { - overflow: hidden; - text-overflow: ellipsis; -} - -::-webkit-input-placeholder { - opacity: 1; - color: #757575; -} - -::-moz-placeholder { - opacity: 1; - color: #757575; -} - -::-ms-placeholder { - opacity: 1; - color: #757575; -} - -::placeholder { - opacity: 1; - color: #757575; -} - -button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { - border-style: none; - padding: 0; -} - -button, html [type="button"], [type="reset"], [type="submit"] { - -webkit-appearance: button; -} - -button { - overflow: visible; - text-transform: none; -} - -button, [type="button"], [type="submit"], [type="reset"], -a.button, label.button, .button, -a[role="button"], label[role="button"], [role="button"] { - display: inline-block; - background: rgba(57, 68, 74, 0.75); - color: #d0d0d0; - border: 0; - border-radius: 0.125rem; - padding: 0.5rem 0.75rem; - margin: 0.5rem; - text-decoration: none; - transition: background 0.3s; - cursor: pointer; -} - -button:hover, button:focus, [type="button"]:hover, [type="button"]:focus, [type="submit"]:hover, [type="submit"]:focus, [type="reset"]:hover, [type="reset"]:focus, -a.button:hover, -a.button:focus, label.button:hover, label.button:focus, .button:hover, .button:focus, -a[role="button"]:hover, -a[role="button"]:focus, label[role="button"]:hover, label[role="button"]:focus, [role="button"]:hover, [role="button"]:focus { - background: #39444a; - opacity: 1; -} - -input:disabled, input[disabled], textarea:disabled, textarea[disabled], select:disabled, select[disabled], button:disabled, button[disabled], .button:disabled, .button[disabled], [role="button"]:disabled, [role="button"][disabled] { - cursor: not-allowed; - opacity: 0.75; -} - -input[type="file"] { - border: 0; - height: 1px; - width: 1px; - margin: -1px; - overflow: hidden; - padding: 0; - position: absolute; - clip: rect(0 0 0 0); - -webkit-clip-path: inset(100%); - clip-path: inset(100%); -} - -.button-group { - display: -webkit-box; - display: -webkit-flex; - display: flex; - border: 0.0625rem solid #263238; - border-radius: 0.125rem; - margin: 0.5rem; -} - -.button-group > button, .button-group [type="button"], .button-group > [type="submit"], .button-group > [type="reset"], -.button-group > .button, .button-group > [role="button"] { - margin: 0; - -webkit-box-flex: 1; - max-width: 100%; - -webkit-flex: 1 1 auto; - flex: 1 1 auto; - text-align: center; - border: 0; - border-radius: 0; -} - -.button-group > :not(:first-child) { - border-left: 0.0625rem solid #263238; -} - -@media screen and (max-width: 767px) { - .button-group { - -webkit-box-orient: vertical; - -webkit-flex-direction: column; - flex-direction: column; - } - .button-group > :not(:first-child) { - border: 0; - border-top: 0.0625rem solid #263238; - } -} - -[type="checkbox"], [type="radio"] { - height: 1px; - width: 1px; - margin: -1px; - overflow: hidden; - position: absolute; - clip: rect(0 0 0 0); - -webkit-clip-path: inset(100%); - clip-path: inset(100%); -} - -.input-group [type="checkbox"] + label, .input-group [type="radio"] + label { - position: relative; - display: inline-block; - margin-left: 1.25rem; - cursor: pointer; -} - -.input-group [type="checkbox"] + label:before, .input-group [type="radio"] + label:before { - display: inline-block; - position: absolute; - top: 0.375rem; - left: 0; - width: 1rem; - height: 1rem; - content: ''; - border: 0.0625rem solid #1c2529; - border-radius: 0.125rem; - background: #39444a; - color: #d0d0d0; - margin-left: -1.25rem; -} - -.input-group [type="checkbox"] + label:hover:before, .input-group [type="checkbox"] + label:focus:before, .input-group [type="radio"] + label:hover:before, .input-group [type="radio"] + label:focus:before { - border-color: #0288d1; -} - -.input-group [type="checkbox"]:focus + label:before, .input-group [type="radio"]:focus + label:before { - border-color: #0288d1; -} - -.input-group [type="radio"] + label:before, .input-group [type="radio"] + label:after { - border-radius: 50%; -} - -.input-group [type="checkbox"][disabled] + label, .input-group [type="radio"][disabled] + label, -.input-group [type="checkbox"]:disabled + label, .input-group [type="radio"]:disabled + label { - cursor: not-allowed; -} - -.input-group [type="checkbox"][disabled] + label:before, .input-group [type="checkbox"][disabled] + label:after, .input-group [type="radio"][disabled] + label:before, .input-group [type="radio"][disabled] + label:after, -.input-group [type="checkbox"]:disabled + label:before, -.input-group [type="checkbox"]:disabled + label:after, .input-group [type="radio"]:disabled + label:before, .input-group [type="radio"]:disabled + label:after { - opacity: 0.75; -} - -.input-group [type="checkbox"]:checked + label:after, .input-group [type="radio"]:checked + label:after { - position: absolute; - background: #d0d0d0; - content: ''; - margin-left: -1.25rem; - top: 0.625rem; - left: 0.25rem; - width: 0.625rem; - height: 0.625rem; -} - -.input-group [type="checkbox"] + label.switch:before, .input-group [type="radio"] + label.switch:before { - top: 0.5rem; - width: 1.75rem; - height: 0.875rem; - border: 0; - border-radius: 0.5rem; - background: #324148; - margin-left: -2.375rem; -} - -.input-group [type="checkbox"] + label.switch:after, .input-group [type="radio"] + label.switch:after { - display: inline-block; - content: ''; - position: absolute; - left: 0; - width: 1.25rem; - height: 1.25rem; - background: #39444a; - border-radius: 100%; - top: 0.3125rem; - margin-left: -3rem; - transition: left 0.3s; -} - -.input-group [type="checkbox"]:checked + label.switch:before, .input-group [type="radio"]:checked + label.switch:before { - background: #39444a; -} - -.input-group [type="checkbox"]:checked + label.switch:after, .input-group [type="radio"]:checked + label.switch:after { - left: 1.75rem; - width: 1.25rem; - height: 1.25rem; - top: 0.3125rem; - margin-left: -3rem; - background: #0277bd; -} - + Custom elements for contextual background elements, toasts and tooltips. +*/ +mark.secondary { + --mark-back-color: #d32f2f; +} + +mark.tertiary { + --mark-back-color: #308732; +} + +mark.tag { + padding: calc(var(--universal-padding)/2) var(--universal-padding); + border-radius: 1em; +} + +/* + Definitions for progress elements and spinners. +*/ +/* Progess module CSS variable definitions */ +:root { + --progress-back-color: #aaa; + --progress-fore-color: #555; +} + +progress { + display: block; + vertical-align: baseline; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + height: 0.75rem; + width: calc(100% - 2 * var(--universal-margin)); + margin: var(--universal-margin); + border: 0; + border-radius: calc(2 * var(--universal-border-radius)); + background: var(--progress-back-color); + color: var(--progress-fore-color); +} + +progress::-webkit-progress-value { + background: var(--progress-fore-color); + border-top-left-radius: calc(2 * var(--universal-border-radius)); + border-bottom-left-radius: calc(2 * var(--universal-border-radius)); +} + +progress::-webkit-progress-bar { + background: var(#aaa); +} + +progress::-moz-progress-bar { + background: var(--progress-fore-color); + border-top-left-radius: calc(2 * var(--universal-border-radius)); + border-bottom-left-radius: calc(2 * var(--universal-border-radius)); +} + +progress[value="1000"]::-webkit-progress-value { + border-radius: calc(2 * var(--universal-border-radius)); +} + +progress[value="1000"]::-moz-progress-bar { + border-radius: calc(2 * var(--universal-border-radius)); +} + +progress.inline { + display: inline-block; + vertical-align: middle; + width: 60%; +} + +:root { + --spinner-back-color: #ddd; + --spinner-fore-color: #555; +} + +@keyframes spinner-donut-anim { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(360deg); + } +} + +.spinner { + display: inline-block; + margin: var(--universal-margin); + border: 0.25rem solid var(--spinner-back-color); + border-left: 0.25rem solid var(--spinner-fore-color); + border-radius: 50%; + width: 1.25rem; + height: 1.25rem; + animation: spinner-donut-anim 1.2s linear infinite; +} + /* - Custom elements for forms and input elements. -*/ -button.primary, [type="button"].primary, [type="submit"].primary, -[type="reset"].primary, .button.primary, [role="button"].primary { - background: rgba(2, 119, 189, 0.9); - color: #fafafa; -} - -button.primary:hover, button.primary:focus, [type="button"].primary:hover, [type="button"].primary:focus, [type="submit"].primary:hover, [type="submit"].primary:focus, -[type="reset"].primary:hover, -[type="reset"].primary:focus, .button.primary:hover, .button.primary:focus, [role="button"].primary:hover, [role="button"].primary:focus { - background: #0277bd; -} - -button.secondary, [type="button"].secondary, [type="submit"].secondary, -[type="reset"].secondary, .button.secondary, [role="button"].secondary { - background: rgba(198, 40, 40, 0.9); - color: #fafafa; -} - -button.secondary:hover, button.secondary:focus, [type="button"].secondary:hover, [type="button"].secondary:focus, [type="submit"].secondary:hover, [type="submit"].secondary:focus, -[type="reset"].secondary:hover, -[type="reset"].secondary:focus, .button.secondary:hover, .button.secondary:focus, [role="button"].secondary:hover, [role="button"].secondary:focus { - background: #c62828; -} - -button.tertiary, [type="button"].tertiary, [type="submit"].tertiary, -[type="reset"].tertiary, .button.tertiary, [role="button"].tertiary { - background: rgba(95, 145, 51, 0.9); - color: #fafafa; -} - -button.tertiary:hover, button.tertiary:focus, [type="button"].tertiary:hover, [type="button"].tertiary:focus, [type="submit"].tertiary:hover, [type="submit"].tertiary:focus, -[type="reset"].tertiary:hover, -[type="reset"].tertiary:focus, .button.tertiary:hover, .button.tertiary:focus, [role="button"].tertiary:hover, [role="button"].tertiary:focus { - background: #5f9133; -} - -button.inverse, [type="button"].inverse, [type="submit"].inverse, -[type="reset"].inverse, .button.inverse, [role="button"].inverse { - background: rgba(235, 236, 236, 0.9); - color: #0c0c0c; -} - -button.inverse:hover, button.inverse:focus, [type="button"].inverse:hover, [type="button"].inverse:focus, [type="submit"].inverse:hover, [type="submit"].inverse:focus, -[type="reset"].inverse:hover, -[type="reset"].inverse:focus, .button.inverse:hover, .button.inverse:focus, [role="button"].inverse:hover, [role="button"].inverse:focus { - background: #ebecec; -} - -button.small, [type="button"].small, [type="submit"].small, -[type="reset"].small, .button.small, [role="button"].small { - border-radius: 0.0625rem; - padding: 0.25rem 0.375rem; -} - -button.large, [type="button"].large, [type="submit"].large, -[type="reset"].large, .button.large, [role="button"].large { - border-radius: 0.25rem; - padding: 0.75rem 1.125rem; -} - -/* - Definitions for navigation elements. -*/ -header { - display: block; - height: 2.75rem; - background: #151c1f; - color: #f5f5f5; - padding: 0.125rem 0.5rem; - white-space: nowrap; - overflow-x: auto; - overflow-y: hidden; -} - -header .logo { - color: #f5f5f5; - font-size: 1.75rem; - line-height: 1.3125em; - margin: 0.0625rem 0.375rem 0.0625rem 0.0625rem; - transition: opacity 0.3s; -} - -header button, header [type="button"], -header a.button, header label.button, header .button, -header a[role="button"], header label[role="button"], header [role="button"] { - background: #151c1f; - color: #f5f5f5; - vertical-align: top; - margin: 0.125rem 0; -} - -header button:hover, header button:focus, header [type="button"]:hover, header [type="button"]:focus, -header a.button:hover, -header a.button:focus, header label.button:hover, header label.button:focus, header .button:hover, header .button:focus, -header a[role="button"]:hover, -header a[role="button"]:focus, header label[role="button"]:hover, header label[role="button"]:focus, header [role="button"]:hover, header [role="button"]:focus { - background: #192024; -} - -header .logo, header a.button, header a[role="button"] { - text-decoration: none; -} - -header.row { - box-sizing: content-box; -} - -nav { - display: block; - background: #37474f; - border: 0.0625rem solid #324148; - margin: 0.5rem; - padding: 0.75rem 1rem; -} - -nav a, nav a:visited { - display: block; - color: #3e79bd; - text-decoration: none; -} - -nav .sublink-1 { - padding-left: 1rem; - position: relative; -} - -nav .sublink-1:before { - position: absolute; - left: 0.1875rem; - top: -0.0625rem; - content: ''; - height: 100%; - border: 0.0625rem solid #616161; - border-left: 0; -} - -nav .sublink-2 { - padding-left: 2rem; - position: relative; -} - -nav .sublink-2:before { - position: absolute; - left: 0.1875rem; - top: -0.0625rem; - content: ''; - height: 100%; - border: 0.0625rem solid #616161; - border-left: 0; -} - -footer { - display: block; - background: #192024; - color: #f5f5f5; - margin: 1rem 0 0; - padding: 1.5rem 0.5rem 0.75rem; - font-size: 0.875rem; -} - -footer a, footer a:visited { - color: #0288d1; -} - -header.sticky, footer.sticky { - position: -webkit-sticky; - position: sticky; - z-index: 1101; -} - -header.sticky { - top: 0; -} - -footer.sticky { - bottom: 0; -} - -.drawer-toggle:before { - position: relative; - top: 0.4375rem; - font-family: sans-serif; - font-size: 2.5rem; - line-height: 0.125; - content: '\2261'; -} - -.drawer { - display: block; - box-sizing: border-box; - position: fixed; - top: 0; - width: 320px; - height: 100vh; - overflow-y: auto; - background: #37474f; - border: 0.0625rem solid #324148; - margin: 0; - z-index: 1110; -} - -.drawer:not(.right) { - left: -320px; - transition: left 0.3s; -} - -.drawer.right { - right: -320px; - transition: right 0.3s; -} - -.drawer .close { - position: absolute; - top: 0.75rem; - right: 0.25rem; - z-index: 1111; - padding: 0; -} - -@media screen and (max-width: 320px) { - .drawer { - width: 100%; - } -} - -@media screen and (min-width: 768px) { - .drawer:not(.persistent) { - position: static; - height: 100%; - z-index: 1100; - } - .drawer:not(.persistent) .close { - display: none; - } - .drawer-toggle:not(.persistent) { - display: none; - } -} - -:checked + .drawer:not(.right) { - left: 0; -} - -:checked + .drawer.right { - right: 0; -} - -/* - Definitions for the responsive table component. -*/ -table { - border-collapse: separate; - border-spacing: 0; - border: 0.0625rem solid #1c2529; - margin: 0 auto; -} - -table caption { - font-size: 1.5rem; - margin: 0.5rem; -} - -table tr { - padding: 0.5rem; -} - -table th, table td { - padding: 0.625rem; - border-left: 0.0625rem solid #1c2529; - border-top: 0.0625rem solid #1c2529; -} - -table td { - background: #232e33; -} - -table thead th { - border-top: 0; -} - -table th { - background: #20292e; -} - -table th:first-child, table td:first-child { - border-left: 0; -} - -@media screen and (max-width: 767px) { - table:not(.preset) { - border-collapse: collapse; - border: 0; - width: 100%; - } - table:not(.preset) thead, table:not(.preset) th { - border: 0; - height: 1px; - width: 1px; - margin: -1px; - overflow: hidden; - padding: 0; - position: absolute; - clip: rect(0 0 0 0); - -webkit-clip-path: inset(100%); - clip-path: inset(100%); - } - table:not(.preset) tr { - display: block; - border: 0.0625rem solid #1c2529; - margin-bottom: 0.625rem; - } - table:not(.preset) td { - display: block; - border: 0; - border-bottom: 0.0625rem solid #1c2529; - text-align: right; - min-height: 1.5rem; - } - table:not(.preset) td:before { - content: attr(data-label); - float: left; - font-weight: 700; - } - table:not(.preset) td:last-child { - border-bottom: 0; - } -} - -@media screen and (min-width: 768px) { - table.horizontal, table.scrollable { - display: -webkit-box; - -webkit-box-flex: 0; - -webkit-box-orient: horizontal; - -webkit-box-direction: normal; - display: -webkit-flex; - display: flex; - -webkit-flex: 0 1 auto; - flex: 0 1 auto; - -webkit-flex-flow: row wrap; - flex-flow: row wrap; - padding: 0.5rem; - } - table.horizontal caption, table.scrollable caption { - -webkit-box-flex: 1; - max-width: 100%; - -webkit-flex: 0 0 100%; - flex: 0 0 100%; - } - table.horizontal thead, table.horizontal tbody, table.scrollable thead, table.scrollable tbody { - display: -webkit-box; - -webkit-box-flex: 0; - -webkit-box-orient: horizontal; - -webkit-box-direction: normal; - display: -webkit-flex; - display: flex; - } - table.horizontal thead, table.scrollable thead { - z-index: 999; - } - table.horizontal tr, table.scrollable tr { - display: -webkit-box; - display: -webkit-flex; - display: flex; - } - table.horizontal thead, table.horizontal tbody { - -webkit-flex-flow: row nowrap; - flex-flow: row nowrap; - } - table.horizontal tbody { - overflow: auto; - -webkit-box-pack: justify; - -webkit-justify-content: space-between; - justify-content: space-between; - -webkit-flex: 1 0 0; - flex: 1 0 0; - } - table.horizontal tr { - -webkit-box-flex: 1; - -webkit-box-orient: vertical; - -webkit-box-direction: normal; - -webkit-flex-direction: column; - flex-direction: column; - -webkit-flex: 1 0 auto; - flex: 1 0 auto; - } - table.horizontal th, table.horizontal td { - width: 100%; - border: 0.0625rem solid #1c2529; - } - table.horizontal th:not(:first-child), table.horizontal td:not(:first-child) { - border-top: 0; - } - table.horizontal th { - text-align: right; - } - table.horizontal thead tr:first-child { - padding-left: 0; - } - table.horizontal tbody tr:first-child > td { - padding-left: 1.25rem; - } - table.scrollable { - overflow: auto; - max-height: 400px; - border: 0; - padding-top: 0; - } - table.scrollable thead, table.scrollable tbody { - -webkit-box-flex: 1; - max-width: 100%; - -webkit-flex-flow: row wrap; - flex-flow: row wrap; - -webkit-flex: 0 0 100%; - flex: 0 0 100%; - border: 0.0625rem solid #1c2529; - } - table.scrollable tbody { - border-top: 0; - margin-top: -0.0625rem; - } - table.scrollable tr { - -webkit-box-flex: 0; - -webkit-box-orient: horizontal; - -webkit-box-direction: normal; - -webkit-flex-flow: row wrap; - flex-flow: row wrap; - -webkit-flex: 0 0 100%; - flex: 0 0 100%; - padding: 0; - } - table.scrollable th, table.scrollable td { - -webkit-box-flex: 1; - -webkit-flex: 1 0 0%; - flex: 1 0 0%; - overflow: hidden; - text-overflow: ellipsis; - } - table.scrollable thead { - position: sticky; - top: 0; - } -} - -@media screen and (max-width: 767px) { - table.horizontal.preset, table.scrollable.preset { - display: -webkit-box; - -webkit-box-flex: 0; - -webkit-box-orient: horizontal; - -webkit-box-direction: normal; - display: -webkit-flex; - display: flex; - -webkit-flex: 0 1 auto; - flex: 0 1 auto; - -webkit-flex-flow: row wrap; - flex-flow: row wrap; - padding: 0.5rem; - } - table.horizontal.preset caption, table.scrollable.preset caption { - -webkit-box-flex: 1; - max-width: 100%; - -webkit-flex: 0 0 100%; - flex: 0 0 100%; - } - table.horizontal.preset thead, table.horizontal.preset tbody, table.scrollable.preset thead, table.scrollable.preset tbody { - display: -webkit-box; - -webkit-box-flex: 0; - -webkit-box-orient: horizontal; - -webkit-box-direction: normal; - display: -webkit-flex; - display: flex; - } - table.horizontal.preset thead, table.scrollable.preset thead { - z-index: 999; - } - table.horizontal.preset tr, table.scrollable.preset tr { - display: -webkit-box; - display: -webkit-flex; - display: flex; - } - table.horizontal.preset thead, table.horizontal.preset tbody { - -webkit-flex-flow: row nowrap; - flex-flow: row nowrap; - } - table.horizontal.preset tbody { - overflow: auto; - -webkit-box-pack: justify; - -webkit-justify-content: space-between; - justify-content: space-between; - -webkit-flex: 1 0 0; - flex: 1 0 0; - } - table.horizontal.preset tr { - -webkit-box-flex: 1; - -webkit-box-orient: vertical; - -webkit-box-direction: normal; - -webkit-flex-direction: column; - flex-direction: column; - -webkit-flex: 1 0 auto; - flex: 1 0 auto; - } - table.horizontal.preset th, table.horizontal.preset td { - width: 100%; - border: 0.0625rem solid #1c2529; - } - table.horizontal.preset th:not(:first-child), table.horizontal.preset td:not(:first-child) { - border-top: 0; - } - table.horizontal.preset th { - text-align: right; - } - table.horizontal.preset thead tr:first-child { - padding-left: 0; - } - table.horizontal.preset tbody tr:first-child > td { - padding-left: 1.25rem; - } - table.scrollable.preset { - overflow: auto; - max-height: 400px; - border: 0; - padding-top: 0; - } - table.scrollable.preset thead, table.scrollable.preset tbody { - -webkit-box-flex: 1; - max-width: 100%; - -webkit-flex-flow: row wrap; - flex-flow: row wrap; - -webkit-flex: 0 0 100%; - flex: 0 0 100%; - border: 0.0625rem solid #1c2529; - } - table.scrollable.preset tbody { - border-top: 0; - margin-top: -0.0625rem; - } - table.scrollable.preset tr { - -webkit-box-flex: 0; - -webkit-box-orient: horizontal; - -webkit-box-direction: normal; - -webkit-flex-flow: row wrap; - flex-flow: row wrap; - -webkit-flex: 0 0 100%; - flex: 0 0 100%; - padding: 0; - } - table.scrollable.preset th, table.scrollable.preset td { - -webkit-box-flex: 1; - -webkit-flex: 1 0 0%; - flex: 1 0 0%; - overflow: hidden; - text-overflow: ellipsis; - } - table.scrollable.preset thead { - position: sticky; - top: 0; - } -} - -table.striped tr:nth-of-type(2n) > td { - background: #263238; -} - -@media screen and (max-width: 767px) { - table.striped:not(.preset) tr:nth-of-type(2n) { - background: #263238; - } -} - -/* - Definitions for cards and containers. -*/ -.card { - display: -webkit-box; - -webkit-box-orient: vertical; - -webkit-box-pack: justify; - -webkit-box-align: center; - display: -webkit-flex; - display: flex; - -webkit-flex-direction: column; - flex-direction: column; - -webkit-justify-content: space-between; - justify-content: space-between; - -webkit-align-self: center; - align-self: center; - position: relative; - width: 100%; - background: #232e33; - border: 0.0625rem solid #616161; - margin: 0.5rem; - overflow: hidden; -} - -.card > .section { - box-sizing: border-box; - margin: 0; - border: 0; - border-radius: 0; - border-bottom: 0.0625rem solid #757575; - padding: 0.5rem; - width: 100%; -} - -.card > .section.media { - height: 200px; - padding: 0; - -o-object-fit: cover; - object-fit: cover; -} - -.card > .section:last-child { - border-bottom: 0; -} - -@media screen and (min-width: 320px) { - .card { - max-width: 320px; - } -} - -/* - Custom elements for cards and containers. -*/ -@media screen and (min-width: 480px) { - .card.large { - max-width: 480px; - } -} - -@media screen and (min-width: 240px) { - .card.small { - max-width: 240px; - } -} - -.card.fluid { - max-width: 100%; - width: auto; -} - -.card.warning { - background: #fff176; - color: #232e33; - border: 0.0625rem solid #d1c661; -} - -.card.warning > .section { - border-bottom: 0.0625rem solid #d1c661; -} - -.card.warning > .section:last-child { - border-bottom: 0; -} - -.card.error { - background: #b71c1c; - color: #fafafa; - border: 0.0625rem solid #a71a1a; -} - -.card.error > .section { - border-bottom: 0.0625rem solid #a71a1a; -} - -.card.error > .section:last-child { - border-bottom: 0; -} - -.card > .section.dark { - background: #1d262a; -} - -.card > .section.darker { - background: #171e21; -} - -.card > .section.double-padded { - padding: 0.75rem; -} - -/* - Definitions for tabs/horizontal accordions. -*/ -.tabs { - width: 100%; - opacity: 1; - display: -webkit-box; - -webkit-box-pack: justify; - display: -webkit-flex; - display: flex; - -webkit-justify-content: space-between; - justify-content: space-between; - -webkit-flex-wrap: wrap; - flex-wrap: wrap; -} - -.tabs > label { - -webkit-box-flex: 1; - -webkit-flex-grow: 1; - flex-grow: 1; - -webkit-order: 1; - order: 1; - display: inline-block; - height: 1.5rem; - cursor: pointer; - transition: background 0.3s; - background: #1d262a; - border: 0.0625rem solid #757575; - padding: 0.75rem; -} - -.tabs > label:hover, .tabs > label:focus { - background: rgba(29, 38, 42, 0.8); -} - -.tabs > [type="radio"], .tabs > [type="checkbox"] { - display: none; - visibility: hidden; -} - -.tabs > label + div { - -webkit-flex-basis: auto; - flex-basis: auto; - -webkit-order: 2; - order: 2; - height: 1px; - width: 1px; - margin: -1px; - overflow: hidden; - position: absolute; - clip: rect(0 0 0 0); - -webkit-clip-path: inset(100%); - clip-path: inset(100%); - -webkit-transform: scaleY(0); - transform: scaleY(0); - -webkit-transform-origin: top; - transform-origin: top; - transition: -webkit-transform 0.3s, transform 0.3s; -} - -.tabs > label:not(:first-of-type) { - border-left: 0; -} - -.tabs > :checked + label { - background: #263238; - border-bottom-color: #0277bd; -} - -.tabs > :checked + label:hover, .tabs > :checked + label:focus { - background: rgba(38, 50, 56, 0.8); -} - -.tabs > :checked + label + div { - box-sizing: border-box; - position: relative; - height: 400px; - width: 100%; - overflow: auto; - margin: 0; - -webkit-transform: scaleY(1); - transform: scaleY(1); - border: 0.0625rem solid #757575; - border-top: 0; - padding: 0.5rem; - clip: auto; - -webkit-clip-path: inset(0%); - clip-path: inset(0%); -} - -.tabs.stacked { - -webkit-box-orient: vertical; - -webkit-flex-direction: column; - flex-direction: column; -} - -.tabs.stacked > label { - -webkit-order: initial; - order: initial; -} - -.tabs.stacked > :checked + label { - border: 0.0625rem solid #757575; -} - -.tabs.stacked > label + div { - -webkit-order: initial; - order: initial; - -webkit-transform-origin: top; - transform-origin: top; -} - -.tabs.stacked > label:not(:first-of-type) { - border: 0.0625rem solid #757575; - border-top: 0; -} - -.tabs.stacked > :checked + label + div { - height: auto; -} - -@media screen and (max-width: 767px) { - .tabs { - -webkit-box-orient: vertical; - -webkit-flex-direction: column; - flex-direction: column; - } - .tabs > label { - -webkit-order: initial; - order: initial; - } - .tabs > :checked + label { - border: 0.0625rem solid #757575; - } - .tabs > label + div { - -webkit-order: initial; - order: initial; - } - .tabs > label:not(:first-of-type) { - border: 0.0625rem solid #757575; - border-top: 0; - } -} - -/* - Definitions for contextual background elements, toasts and tooltips. -*/ -mark { - background: #0277bd; - color: #fafafa; - font-size: 0.9375em; - line-height: 1em; - border-radius: 0.125rem; - padding: 0.125em 0.25em; -} - -mark.inline-block { - display: inline-block; -} - -.toast { - position: fixed; - background: #acacac; - bottom: 1.5rem; - left: 50%; - transform: translate(-50%, -50%); - color: #0c0c0c; - border-radius: 2rem; - padding: 0.75rem 1.5rem; - z-index: 1111; -} - -.tooltip { - position: relative; - display: inline-block; -} - -.tooltip:before, .tooltip:after { - position: absolute; - opacity: 0; - clip: rect(0 0 0 0); - -webkit-clip-path: inset(100%); - clip-path: inset(100%); - transition: all 0.3s; - z-index: 1010; - left: 50%; -} - -.tooltip:not(.bottom):before, .tooltip:not(.bottom):after { - bottom: 75%; -} - -.tooltip.bottom:before, .tooltip.bottom:after { - top: 75%; -} - -.tooltip:hover:before, .tooltip:hover:after, .tooltip:focus:before, .tooltip:focus:after { - opacity: 1; - clip: auto; - -webkit-clip-path: inset(0%); - clip-path: inset(0%); -} - -.tooltip:before { - content: ''; - background: transparent; - border: 0.5rem solid transparent; - left: 50%; - left: calc(50% - 0.5rem); -} - -.tooltip:not(.bottom):before { - border-top-color: #d0d0d0; -} - -.tooltip.bottom:before { - border-bottom-color: #d0d0d0; -} - -.tooltip:after { - content: attr(aria-label); - background: #d0d0d0; - border-radius: 0.125rem; - color: #0c0c0c; - padding: 0.5rem; - white-space: nowrap; - -webkit-transform: translateX(-50%); - transform: translateX(-50%); -} - -.tooltip:not(.bottom):after { - margin-bottom: 1rem; -} - -.tooltip.bottom:after { - margin-top: 1rem; -} - -.modal { - position: fixed; - top: 0; - left: 0; - display: none; - width: 100vw; - height: 100vh; - background: rgba(0, 0, 0, 0.45); -} - -.modal .card { - margin: 0 auto; - max-height: 50vh; - overflow: auto; -} - -.modal .card .close { - position: absolute; - top: 0.75rem; - right: 0.25rem; - padding: 0; -} - -:checked + .modal { - display: -webkit-box; - -webkit-box-flex: 0; - display: -webkit-flex; - display: flex; - -webkit-flex: 0 1 auto; - flex: 0 1 auto; - z-index: 1200; -} - -:checked + .modal .card .close { - z-index: 1211; -} - -/* - Custom contextual background elements and alerts. -*/ -mark.secondary { - background: #e53935; -} - -mark.tertiary { - background: #689f38; -} - -mark.tag { - border-radius: 200px; - padding: 0.25em 0.5em; -} - -mark.inline-block { - font-size: 1em; - line-height: 1.375em; - padding: 0.375em; -} - -.toast.small { - border-radius: 1.5rem; - padding: 0.5rem 1rem; -} - -.toast.large { - border-radius: 3rem; - padding: 1.125rem 2.25rem; -} - -/* - Definitions for progress elements and spinners. -*/ -progress { - display: block; - vertical-align: baseline; - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - height: 0.625rem; - width: 90%; - width: calc(100% - 1rem); - margin: 0.5rem 0.5rem; - border: 0; - border-radius: 0.125rem; - background: #39444a; - color: #0277bd; -} - -progress::-webkit-progress-value { - background: #0277bd; - border-top-left-radius: 0.125rem; - border-bottom-left-radius: 0.125rem; -} - -progress::-webkit-progress-bar { - background: #39444a; -} - -progress::-moz-progress-bar { - background: #0277bd; - border-top-left-radius: 0.125rem; - border-bottom-left-radius: 0.125rem; -} - -progress[value="1000"]::-webkit-progress-value { - border-radius: 0.125rem; -} - -progress[value="1000"]::-moz-progress-bar { - border-radius: 0.125rem; -} - -@-webkit-keyframes spinner-donut-anim { - 0% { - -webkit-transform: rotate(0deg); - } - 100% { - -webkit-transform: rotate(360deg); - } -} - -@keyframes spinner-donut-anim { - 0% { - transform: rotate(0deg); - } - 100% { - transform: rotate(360deg); - } -} - -.spinner-donut { - display: inline-block; - border: 0.25rem solid #39444a; - border-left: 0.25rem solid #1565c0; - border-radius: 50%; - width: 1.25rem; - height: 1.25rem; - -webkit-animation: spinner-donut-anim 1.2s linear infinite; - animation: spinner-donut-anim 1.2s linear infinite; -} - -/* - Custom elements for progress elements and spinners. -*/ -progress.inline { - display: inline-block; - vertical-align: middle; - width: 60%; -} - -progress.secondary { - color: #e53935; -} - -progress.secondary::-webkit-progress-value { - background: #e53935; -} - -progress.secondary::-moz-progress-bar { - background: #e53935; -} - -progress.tertiary { - color: #689f38; -} - -progress.tertiary::-webkit-progress-value { - background: #689f38; -} - -progress.tertiary::-moz-progress-bar { - background: #689f38; -} - -.spinner-donut.secondary { - border: 0.25rem solid #39444a; - border-left: 0.25rem solid #c62828; -} - -.spinner-donut.tertiary { - border: 0.25rem solid #39444a; - border-left: 0.25rem solid #2e7d32; -} - -.spinner-donut.large { - border-width: 0.375rem; - width: 2rem; - height: 2rem; -} - -/* - Definitions for utilities and helper classes. -*/ -.hidden { - display: none !important; -} - -.visually-hidden { - position: absolute !important; - width: 1px !important; - height: 1px !important; - margin: -1px !important; - border: 0 !important; - padding: 0 !important; - clip: rect(0 0 0 0) !important; - -webkit-clip-path: inset(100%) !important; - clip-path: inset(100%) !important; - overflow: hidden !important; -} - -ul.breadcrumbs { - display: -webkit-box; - display: -webkit-flex; - display: flex; - list-style: none; - margin: 0.5rem; - padding: 0; -} - -ul.breadcrumbs li { - -webkit-box-flex: 1; - max-width: 100%; - -webkit-flex-grow: 1; - flex-grow: 1; - -webkit-flex-basis: 0; - flex-basis: 0; - position: relative; - text-align: center; - background: #37474f; - height: 2rem; - line-height: 2rem; - margin-right: 1.125rem; -} - -ul.breadcrumbs li:before, ul.breadcrumbs li:after { - content: ""; - position: absolute; - top: 0; - width: 0; - height: 0; - border: 0 solid #37474f; - border-width: 1rem 1rem; -} - -ul.breadcrumbs li:before { - left: -1rem; - border-left-color: transparent; -} - -ul.breadcrumbs li:after { - left: 100%; - border-color: transparent; - border-left-color: #37474f; -} - -ul.breadcrumbs li:first-child:before { - border: 0; -} - -ul.breadcrumbs li:last-child { - margin-right: 0; -} - -ul.breadcrumbs li:last-child:after { - border: 0; -} - -.close { - display: inline-block; - width: 1.5rem; - font-family: sans-serif; - font-size: 1.5rem; - line-height: 1; - font-weight: 700; - border-radius: 2rem; - background: rgba(57, 68, 74, 0); - vertical-align: top; - cursor: pointer; - transition: background 0.3s; -} - -.close:hover, .close:focus { - background: #39444a; -} - -.close:before { - content: "\00D7"; - display: block; - text-align: center; -} - -/* - Custom elements for utilities and helper classes. -*/ -.bordered { - border: 1px solid rgba(0, 0, 0, 0.25) !important; -} - -.rounded { - border-radius: 0.125rem !important; -} - -.circular { - border-radius: 50% !important; -} - -.responsive-margin { - margin: 0.25rem !important; -} - -@media screen and (min-width: 768px) { - .responsive-margin { - margin: 0.375rem !important; - } -} - -@media screen and (min-width: 1280px) { - .responsive-margin { - margin: 0.5rem !important; - } -} - -.responsive-padding { - padding: 0.125rem 0.25rem !important; -} - -@media screen and (min-width: 768px) { - .responsive-padding { - padding: 0.25rem 0.375rem !important; - } -} - -@media screen and (min-width: 1280px) { - .responsive-padding { - padding: 0.375rem 0.5rem !important; - } -} - -.shadowed { - box-shadow: 0 0.25rem 0.25rem 0 rgba(0, 0, 0, 0.125), 0 0.125rem 0.125rem -0.125rem rgba(0, 0, 0, 0.25) !important; -} - -@media screen and (max-width: 767px) { - .hidden-sm { - display: none !important; - } -} - -@media screen and (min-width: 768px) and (max-width: 1279px) { - .hidden-md { - display: none !important; - } -} - -@media screen and (min-width: 1280px) { - .hidden-lg { - display: none !important; - } -} - -@media screen and (max-width: 767px) { - .visually-hidden-sm { - position: absolute !important; - width: 1px !important; - height: 1px !important; - margin: -1px !important; - border: 0 !important; - padding: 0 !important; - clip: rect(0 0 0 0) !important; - -webkit-clip-path: inset(100%) !important; - clip-path: inset(100%) !important; - overflow: hidden !important; - } -} - -@media screen and (min-width: 768px) and (max-width: 1279px) { - .visually-hidden-md { - position: absolute !important; - width: 1px !important; - height: 1px !important; - margin: -1px !important; - border: 0 !important; - padding: 0 !important; - clip: rect(0 0 0 0) !important; - -webkit-clip-path: inset(100%) !important; - clip-path: inset(100%) !important; - overflow: hidden !important; - } -} - -@media screen and (min-width: 1280px) { - .visually-hidden-lg { - position: absolute !important; - width: 1px !important; - height: 1px !important; - margin: -1px !important; - border: 0 !important; - padding: 0 !important; - clip: rect(0 0 0 0) !important; - -webkit-clip-path: inset(100%) !important; - clip-path: inset(100%) !important; - overflow: hidden !important; - } -} + Custom elements for progress bars and spinners. +*/ +progress.primary { + --progress-fore-color: #1976d2; +} + +progress.secondary { + --progress-fore-color: #d32f2f; +} + +progress.tertiary { + --progress-fore-color: #308732; +} + +.spinner.primary { + --spinner-fore-color: #1976d2; +} + +.spinner.secondary { + --spinner-fore-color: #d32f2f; +} + +.spinner.tertiary { + --spinner-fore-color: #308732; +} + +/* + Definitions for icons - powered by Feather (https://feathericons.com/). +*/ +span[class^='icon-'] { + display: inline-block; + height: 1em; + width: 1em; + vertical-align: -0.125em; + background-size: contain; + margin: 0 calc(var(--universal-margin) / 4); +} + +span[class^='icon-'].secondary { + -webkit-filter: invert(25%); + filter: invert(25%); +} + +span[class^='icon-'].inverse { + -webkit-filter: invert(100%); + filter: invert(100%); +} + +span.icon-alert { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fdfdfd' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12' y2='16'%3E%3C/line%3E%3C/svg%3E"); +} + +span.icon-bookmark { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fdfdfd' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z'%3E%3C/path%3E%3C/svg%3E"); +} + +span.icon-calendar { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fdfdfd' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E"); +} + +span.icon-credit { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fdfdfd' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='1' y='4' width='22' height='16' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='1' y1='10' x2='23' y2='10'%3E%3C/line%3E%3C/svg%3E"); +} + +span.icon-edit { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fdfdfd' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 14.66V20a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h5.34'%3E%3C/path%3E%3Cpolygon points='18 2 22 6 12 16 8 16 8 12 18 2'%3E%3C/polygon%3E%3C/svg%3E"); +} + +span.icon-link { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fdfdfd' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'%3E%3C/path%3E%3Cpolyline points='15 3 21 3 21 9'%3E%3C/polyline%3E%3Cline x1='10' y1='14' x2='21' y2='3'%3E%3C/line%3E%3C/svg%3E"); +} + +span.icon-help { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fdfdfd' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3'%3E%3C/path%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='17' x2='12' y2='17'%3E%3C/line%3E%3C/svg%3E"); +} + +span.icon-home { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fdfdfd' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'%3E%3C/path%3E%3Cpolyline points='9 22 9 12 15 12 15 22'%3E%3C/polyline%3E%3C/svg%3E"); +} + +span.icon-info { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fdfdfd' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='16' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='8' x2='12' y2='8'%3E%3C/line%3E%3C/svg%3E"); +} + +span.icon-lock { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fdfdfd' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2' ry='2'%3E%3C/rect%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'%3E%3C/path%3E%3C/svg%3E"); +} + +span.icon-mail { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fdfdfd' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z'%3E%3C/path%3E%3Cpolyline points='22,6 12,13 2,6'%3E%3C/polyline%3E%3C/svg%3E"); +} + +span.icon-location { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fdfdfd' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'%3E%3C/path%3E%3Ccircle cx='12' cy='10' r='3'%3E%3C/circle%3E%3C/svg%3E"); +} + +span.icon-phone { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fdfdfd' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'%3E%3C/path%3E%3C/svg%3E"); +} + +span.icon-rss { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fdfdfd' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 11a9 9 0 0 1 9 9'%3E%3C/path%3E%3Cpath d='M4 4a16 16 0 0 1 16 16'%3E%3C/path%3E%3Ccircle cx='5' cy='19' r='1'%3E%3C/circle%3E%3C/svg%3E"); +} + +span.icon-search { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fdfdfd' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E"); +} + +span.icon-settings { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fdfdfd' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'%3E%3C/circle%3E%3Cpath d='M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z'%3E%3C/path%3E%3C/svg%3E"); +} + +span.icon-share { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fdfdfd' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='18' cy='5' r='3'%3E%3C/circle%3E%3Ccircle cx='6' cy='12' r='3'%3E%3C/circle%3E%3Ccircle cx='18' cy='19' r='3'%3E%3C/circle%3E%3Cline x1='8.59' y1='13.51' x2='15.42' y2='17.49'%3E%3C/line%3E%3Cline x1='15.41' y1='6.51' x2='8.59' y2='10.49'%3E%3C/line%3E%3C/svg%3E"); +} + +span.icon-cart { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fdfdfd' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1'%3E%3C/circle%3E%3Ccircle cx='20' cy='21' r='1'%3E%3C/circle%3E%3Cpath d='M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6'%3E%3C/path%3E%3C/svg%3E"); +} + +span.icon-upload { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fdfdfd' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'%3E%3C/path%3E%3Cpolyline points='17 8 12 3 7 8'%3E%3C/polyline%3E%3Cline x1='12' y1='3' x2='12' y2='15'%3E%3C/line%3E%3C/svg%3E"); +} + +span.icon-user { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fdfdfd' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'%3E%3C/path%3E%3Ccircle cx='12' cy='7' r='4'%3E%3C/circle%3E%3C/svg%3E"); +} + +/* + Definitions for utilities and helper classes. +*/ +/* Utility module CSS variable definitions */ +:root { + --generic-border-color: rgba(0, 0, 0, 0.3); + --generic-box-shadow: 0 0.25rem 0.25rem 0 rgba(0, 0, 0, 0.125), 0 0.125rem 0.125rem -0.125rem rgba(0, 0, 0, 0.125); +} + +.hidden { + display: none !important; +} + +.visually-hidden { + position: absolute !important; + width: 1px !important; + height: 1px !important; + margin: -1px !important; + border: 0 !important; + padding: 0 !important; + clip: rect(0 0 0 0) !important; + -webkit-clip-path: inset(100%) !important; + clip-path: inset(100%) !important; + overflow: hidden !important; +} + +.bordered { + border: 0.0625rem solid var(--generic-border-color) !important; +} + +.rounded { + border-radius: var(--universal-border-radius) !important; +} + +.circular { + border-radius: 50% !important; +} + +.shadowed { + box-shadow: var(--generic-box-shadow) !important; +} + +.responsive-margin { + margin: calc(var(--universal-margin) / 4) !important; +} + +@media screen and (min-width: 768px) { + .responsive-margin { + margin: calc(var(--universal-margin) / 2) !important; + } +} + +@media screen and (min-width: 1280px) { + .responsive-margin { + margin: var(--universal-margin) !important; + } +} + +.responsive-padding { + padding: calc(var(--universal-padding) / 4) !important; +} + +@media screen and (min-width: 768px) { + .responsive-padding { + padding: calc(var(--universal-padding) / 2) !important; + } +} + +@media screen and (min-width: 1280px) { + .responsive-padding { + padding: var(--universal-padding) !important; + } +} + +@media screen and (max-width: 767px) { + .hidden-sm { + display: none !important; + } +} + +@media screen and (min-width: 768px) and (max-width: 1279px) { + .hidden-md { + display: none !important; + } +} + +@media screen and (min-width: 1280px) { + .hidden-lg { + display: none !important; + } +} + +@media screen and (max-width: 767px) { + .visually-hidden-sm { + position: absolute !important; + width: 1px !important; + height: 1px !important; + margin: -1px !important; + border: 0 !important; + padding: 0 !important; + clip: rect(0 0 0 0) !important; + -webkit-clip-path: inset(100%) !important; + clip-path: inset(100%) !important; + overflow: hidden !important; + } +} + +@media screen and (min-width: 768px) and (max-width: 1279px) { + .visually-hidden-md { + position: absolute !important; + width: 1px !important; + height: 1px !important; + margin: -1px !important; + border: 0 !important; + padding: 0 !important; + clip: rect(0 0 0 0) !important; + -webkit-clip-path: inset(100%) !important; + clip-path: inset(100%) !important; + overflow: hidden !important; + } +} + +@media screen and (min-width: 1280px) { + .visually-hidden-lg { + position: absolute !important; + width: 1px !important; + height: 1px !important; + margin: -1px !important; + border: 0 !important; + padding: 0 !important; + clip: rect(0 0 0 0) !important; + -webkit-clip-path: inset(100%) !important; + clip-path: inset(100%) !important; + overflow: hidden !important; + } +} diff --git a/dist/mini-dark.min.css b/dist/mini-dark.min.css index 0478d2e..3877560 100644 --- a/dist/mini-dark.min.css +++ b/dist/mini-dark.min.css @@ -1 +1 @@ -html{font-size:16px}html,*{font-family:-apple-system, BlinkMacSystemFont,"Segoe UI","Roboto", "Droid Sans","Helvetica Neue", Helvetica, Arial, sans-serif;line-height:1.5;-webkit-text-size-adjust:100%}*{font-size:1rem}body{margin:0;color:#d0d0d0;background:#232e33}article,aside,section,figcaption,figure,main,details,menu{display:block}summary{display:list-item}abbr[title]{border-bottom:none;text-decoration:underline}audio,video{display:inline-block}svg:not(:root){overflow:hidden}input{overflow:visible}img{max-width:100%;height:auto}dfn{font-style:italic}h1,h2,h3,h4,h5,h6{line-height:1.2em;margin:0.75rem 0.5rem;font-weight:500}h1 small,h2 small,h3 small,h4 small,h5 small,h6 small{color:#acacac;display:block;margin-top:-.25rem}h1{font-size:2rem}h2{font-size:1.6875rem}h3{font-size:1.4375rem}h4{font-size:1.1875rem}h5{font-size:1rem}h6{font-size:.8125rem}p{margin:.5rem}ol,ul{margin:.5rem;padding-left:1rem}b,strong{font-weight:700}hr{box-sizing:content-box;border:0;overflow:visible;line-height:1.25em;margin:.5rem;height:.0625rem;background:linear-gradient(to right, #616161, #9e9e9e, #616161)}blockquote{display:block;position:relative;font-style:italic;margin:.5rem;padding:0.5rem 0.5rem 1.5rem;border-left:.25rem solid #192024;border-radius:0 .125rem .125rem 0}blockquote:after{position:absolute;font-style:normal;font-size:.875rem;color:#acacac;left:.625rem;bottom:0;content:"— " attr(cite)}code,kbd,pre,samp{font-family:monospace, monospace}code{border-radius:.125rem;background:#20292e;padding:0.125rem 0.25rem}pre{overflow:auto;border-radius:0 .125rem .125rem 0;background:#20292e;padding:.75rem;margin:.5rem;border-left:.25rem solid #01579b}kbd{border-radius:.125rem;background:#fafafa;color:#0c0c0c;padding:0.125rem 0.25rem}small,sup,sub{font-size:.75em}sup{top:-.5em}sub{bottom:-.25em}sup,sub{line-height:0;position:relative;vertical-align:baseline}a{color:#039be5;text-decoration:underline;opacity:1;transition:opacity 0.3s}a:visited{color:#0288d1}a:hover,a:focus{opacity:0.75}figcaption{font-size:.8125rem;color:#acacac}.container{margin:0 auto;padding:0 .75rem}.row{box-sizing:border-box;display:-webkit-box;-webkit-box-flex:0;-webkit-box-orient:horizontal;-webkit-box-direction:normal;display:-webkit-flex;display:flex;-webkit-flex:0 1 auto;flex:0 1 auto;-webkit-flex-flow:row wrap;flex-flow:row wrap}.col-sm,[class^='col-sm-'],[class^='col-sm-offset-'],.row[class*='cols-sm-']>*{box-sizing:border-box;-webkit-box-flex:0;-webkit-flex:0 0 auto;flex:0 0 auto;padding:0 0.25rem}.col-sm,.row.cols-sm>*{-webkit-box-flex:1;max-width:100%;-webkit-flex-grow:1;flex-grow:1;-webkit-flex-basis:0;flex-basis:0}.col-sm-1,.row.cols-sm-1>*{max-width:8.33333%;-webkit-flex-basis:8.33333%;flex-basis:8.33333%}.col-sm-2,.row.cols-sm-2>*{max-width:16.66667%;-webkit-flex-basis:16.66667%;flex-basis:16.66667%}.col-sm-3,.row.cols-sm-3>*{max-width:25%;-webkit-flex-basis:25%;flex-basis:25%}.col-sm-4,.row.cols-sm-4>*{max-width:33.33333%;-webkit-flex-basis:33.33333%;flex-basis:33.33333%}.col-sm-5,.row.cols-sm-5>*{max-width:41.66667%;-webkit-flex-basis:41.66667%;flex-basis:41.66667%}.col-sm-6,.row.cols-sm-6>*{max-width:50%;-webkit-flex-basis:50%;flex-basis:50%}.col-sm-7,.row.cols-sm-7>*{max-width:58.33333%;-webkit-flex-basis:58.33333%;flex-basis:58.33333%}.col-sm-8,.row.cols-sm-8>*{max-width:66.66667%;-webkit-flex-basis:66.66667%;flex-basis:66.66667%}.col-sm-9,.row.cols-sm-9>*{max-width:75%;-webkit-flex-basis:75%;flex-basis:75%}.col-sm-10,.row.cols-sm-10>*{max-width:83.33333%;-webkit-flex-basis:83.33333%;flex-basis:83.33333%}.col-sm-11,.row.cols-sm-11>*{max-width:91.66667%;-webkit-flex-basis:91.66667%;flex-basis:91.66667%}.col-sm-12,.row.cols-sm-12>*{max-width:100%;-webkit-flex-basis:100%;flex-basis:100%}.col-sm-offset-0{margin-left:0}.col-sm-offset-1{margin-left:8.33333%}.col-sm-offset-2{margin-left:16.66667%}.col-sm-offset-3{margin-left:25%}.col-sm-offset-4{margin-left:33.33333%}.col-sm-offset-5{margin-left:41.66667%}.col-sm-offset-6{margin-left:50%}.col-sm-offset-7{margin-left:58.33333%}.col-sm-offset-8{margin-left:66.66667%}.col-sm-offset-9{margin-left:75%}.col-sm-offset-10{margin-left:83.33333%}.col-sm-offset-11{margin-left:91.66667%}.col-sm-normal{-webkit-order:initial;order:initial}.col-sm-first{-webkit-order:-999;order:-999}.col-sm-last{-webkit-order:999;order:999}@media screen and (min-width: 768px){.col-md,[class^='col-md-'],[class^='col-md-offset-'],.row[class*='cols-md-']>*{box-sizing:border-box;-webkit-box-flex:0;-webkit-flex:0 0 auto;flex:0 0 auto;padding:0 0.25rem}.col-md,.row.cols-md>*{-webkit-box-flex:1;max-width:100%;-webkit-flex-grow:1;flex-grow:1;-webkit-flex-basis:0;flex-basis:0}.col-md-1,.row.cols-md-1>*{max-width:8.33333%;-webkit-flex-basis:8.33333%;flex-basis:8.33333%}.col-md-2,.row.cols-md-2>*{max-width:16.66667%;-webkit-flex-basis:16.66667%;flex-basis:16.66667%}.col-md-3,.row.cols-md-3>*{max-width:25%;-webkit-flex-basis:25%;flex-basis:25%}.col-md-4,.row.cols-md-4>*{max-width:33.33333%;-webkit-flex-basis:33.33333%;flex-basis:33.33333%}.col-md-5,.row.cols-md-5>*{max-width:41.66667%;-webkit-flex-basis:41.66667%;flex-basis:41.66667%}.col-md-6,.row.cols-md-6>*{max-width:50%;-webkit-flex-basis:50%;flex-basis:50%}.col-md-7,.row.cols-md-7>*{max-width:58.33333%;-webkit-flex-basis:58.33333%;flex-basis:58.33333%}.col-md-8,.row.cols-md-8>*{max-width:66.66667%;-webkit-flex-basis:66.66667%;flex-basis:66.66667%}.col-md-9,.row.cols-md-9>*{max-width:75%;-webkit-flex-basis:75%;flex-basis:75%}.col-md-10,.row.cols-md-10>*{max-width:83.33333%;-webkit-flex-basis:83.33333%;flex-basis:83.33333%}.col-md-11,.row.cols-md-11>*{max-width:91.66667%;-webkit-flex-basis:91.66667%;flex-basis:91.66667%}.col-md-12,.row.cols-md-12>*{max-width:100%;-webkit-flex-basis:100%;flex-basis:100%}.col-md-offset-0{margin-left:0}.col-md-offset-1{margin-left:8.33333%}.col-md-offset-2{margin-left:16.66667%}.col-md-offset-3{margin-left:25%}.col-md-offset-4{margin-left:33.33333%}.col-md-offset-5{margin-left:41.66667%}.col-md-offset-6{margin-left:50%}.col-md-offset-7{margin-left:58.33333%}.col-md-offset-8{margin-left:66.66667%}.col-md-offset-9{margin-left:75%}.col-md-offset-10{margin-left:83.33333%}.col-md-offset-11{margin-left:91.66667%}.col-md-normal{-webkit-order:initial;order:initial}.col-md-first{-webkit-order:-999;order:-999}.col-md-last{-webkit-order:999;order:999}}@media screen and (min-width: 1280px){.col-lg,[class^='col-lg-'],[class^='col-lg-offset-'],.row[class*='cols-lg-']>*{box-sizing:border-box;-webkit-box-flex:0;-webkit-flex:0 0 auto;flex:0 0 auto;padding:0 0.25rem}.col-lg,.row.cols-lg>*{-webkit-box-flex:1;max-width:100%;-webkit-flex-grow:1;flex-grow:1;-webkit-flex-basis:0;flex-basis:0}.col-lg-1,.row.cols-lg-1>*{max-width:8.33333%;-webkit-flex-basis:8.33333%;flex-basis:8.33333%}.col-lg-2,.row.cols-lg-2>*{max-width:16.66667%;-webkit-flex-basis:16.66667%;flex-basis:16.66667%}.col-lg-3,.row.cols-lg-3>*{max-width:25%;-webkit-flex-basis:25%;flex-basis:25%}.col-lg-4,.row.cols-lg-4>*{max-width:33.33333%;-webkit-flex-basis:33.33333%;flex-basis:33.33333%}.col-lg-5,.row.cols-lg-5>*{max-width:41.66667%;-webkit-flex-basis:41.66667%;flex-basis:41.66667%}.col-lg-6,.row.cols-lg-6>*{max-width:50%;-webkit-flex-basis:50%;flex-basis:50%}.col-lg-7,.row.cols-lg-7>*{max-width:58.33333%;-webkit-flex-basis:58.33333%;flex-basis:58.33333%}.col-lg-8,.row.cols-lg-8>*{max-width:66.66667%;-webkit-flex-basis:66.66667%;flex-basis:66.66667%}.col-lg-9,.row.cols-lg-9>*{max-width:75%;-webkit-flex-basis:75%;flex-basis:75%}.col-lg-10,.row.cols-lg-10>*{max-width:83.33333%;-webkit-flex-basis:83.33333%;flex-basis:83.33333%}.col-lg-11,.row.cols-lg-11>*{max-width:91.66667%;-webkit-flex-basis:91.66667%;flex-basis:91.66667%}.col-lg-12,.row.cols-lg-12>*{max-width:100%;-webkit-flex-basis:100%;flex-basis:100%}.col-lg-offset-0{margin-left:0}.col-lg-offset-1{margin-left:8.33333%}.col-lg-offset-2{margin-left:16.66667%}.col-lg-offset-3{margin-left:25%}.col-lg-offset-4{margin-left:33.33333%}.col-lg-offset-5{margin-left:41.66667%}.col-lg-offset-6{margin-left:50%}.col-lg-offset-7{margin-left:58.33333%}.col-lg-offset-8{margin-left:66.66667%}.col-lg-offset-9{margin-left:75%}.col-lg-offset-10{margin-left:83.33333%}.col-lg-offset-11{margin-left:91.66667%}.col-lg-normal{-webkit-order:initial;order:initial}.col-lg-first{-webkit-order:-999;order:-999}.col-lg-last{-webkit-order:999;order:999}}form{background:#1c2529;color:#9e9e9e;border:.0625rem solid #20292e;margin:.5rem;padding:0.75rem 0.5rem 1.125rem}fieldset{border:.0625rem solid #263238;border-radius:.125rem;margin:.125rem;padding:.5rem}legend{box-sizing:border-box;display:table;max-width:100%;white-space:normal;font-weight:700;font-size:.875rem;color:#9e9e9e;padding:0.125rem 0.25rem}label{padding:0.25rem 0.5rem}.input-group{display:inline-block}.input-group.fluid{display:-webkit-box;-webkit-box-pack:justify;display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center}.input-group.fluid>input{-webkit-box-flex:1;max-width:100%;-webkit-flex-grow:1;flex-grow:1;-webkit-flex-basis:0px;flex-basis:0px}@media screen and (max-width: 767px){.input-group.fluid{-webkit-box-orient:vertical;-webkit-align-items:stretch;align-items:stretch;-webkit-flex-direction:column;flex-direction:column}}.input-group.vertical{display:-webkit-box;-webkit-box-orient:vertical;-webkit-box-pack:justify;display:-webkit-flex;display:flex;-webkit-flex-direction:column;flex-direction:column;-webkit-align-items:stretch;align-items:stretch;-webkit-justify-content:center;justify-content:center}.input-group.vertical>input{-webkit-box-flex:1;max-width:100%;-webkit-flex-grow:1;flex-grow:1;-webkit-flex-basis:0px;flex-basis:0px}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}textarea{overflow:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px}[type="search"]::-webkit-search-cancel-button,[type="search"]::-webkit-search-decoration{-webkit-appearance:none}input:not([type]),[type="text"],[type="email"],[type="number"],[type="search"],[type="password"],[type="url"],[type="tel"],textarea,select{box-sizing:border-box;background:#39444a;color:#d0d0d0;border:.0625rem solid #263238;border-radius:.125rem;margin:.25rem;padding:0.5rem 0.75rem}input:not([type="button"]):not([type="submit"]):not([type="reset"]):hover,input:not([type="button"]):not([type="submit"]):not([type="reset"]):focus,textarea:hover,textarea:focus,select:hover,select:focus{border-color:#0288d1;box-shadow:none}input:not([type="button"]):not([type="submit"]):not([type="reset"]):invalid,input:not([type="button"]):not([type="submit"]):not([type="reset"]):focus:invalid,textarea:invalid,textarea:focus:invalid,select:invalid,select:focus:invalid{border-color:#d32f2f;box-shadow:none}input:not([type="button"]):not([type="submit"]):not([type="reset"])[readonly],textarea[readonly],select[readonly]{background:#263238;border-color:#20292e}select:not([multiple]):not([size]){padding-right:1.5rem;background:url('data:image/svg+xml, ') no-repeat right;background-color:#39444a;-webkit-appearance:none;-moz-appearance:none;appearance:none}select:not([multiple]):not([size])[readonly]{background-color:#263238}select{max-width:100%}option{overflow:hidden;text-overflow:ellipsis}::-webkit-input-placeholder{opacity:1;color:#757575}::-moz-placeholder{opacity:1;color:#757575}::-ms-placeholder{opacity:1;color:#757575}::placeholder{opacity:1;color:#757575}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button,html [type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button{overflow:visible;text-transform:none}button,[type="button"],[type="submit"],[type="reset"],a.button,label.button,.button,a[role="button"],label[role="button"],[role="button"]{display:inline-block;background:rgba(57,68,74,0.75);color:#d0d0d0;border:0;border-radius:.125rem;padding:0.5rem 0.75rem;margin:.5rem;text-decoration:none;transition:background 0.3s;cursor:pointer}button:hover,button:focus,[type="button"]:hover,[type="button"]:focus,[type="submit"]:hover,[type="submit"]:focus,[type="reset"]:hover,[type="reset"]:focus,a.button:hover,a.button:focus,label.button:hover,label.button:focus,.button:hover,.button:focus,a[role="button"]:hover,a[role="button"]:focus,label[role="button"]:hover,label[role="button"]:focus,[role="button"]:hover,[role="button"]:focus{background:#39444a;opacity:1}input:disabled,input[disabled],textarea:disabled,textarea[disabled],select:disabled,select[disabled],button:disabled,button[disabled],.button:disabled,.button[disabled],[role="button"]:disabled,[role="button"][disabled]{cursor:not-allowed;opacity:.75}input[type="file"]{border:0;height:1px;width:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%)}.button-group{display:-webkit-box;display:-webkit-flex;display:flex;border:.0625rem solid #263238;border-radius:.125rem;margin:.5rem}.button-group>button,.button-group [type="button"],.button-group>[type="submit"],.button-group>[type="reset"],.button-group>.button,.button-group>[role="button"]{margin:0;-webkit-box-flex:1;max-width:100%;-webkit-flex:1 1 auto;flex:1 1 auto;text-align:center;border:0;border-radius:0}.button-group>:not(:first-child){border-left:.0625rem solid #263238}@media screen and (max-width: 767px){.button-group{-webkit-box-orient:vertical;-webkit-flex-direction:column;flex-direction:column}.button-group>:not(:first-child){border:0;border-top:.0625rem solid #263238}}[type="checkbox"],[type="radio"]{height:1px;width:1px;margin:-1px;overflow:hidden;position:absolute;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%)}.input-group [type="checkbox"]+label,.input-group [type="radio"]+label{position:relative;display:inline-block;margin-left:1.25rem;cursor:pointer}.input-group [type="checkbox"]+label:before,.input-group [type="radio"]+label:before{display:inline-block;position:absolute;top:.375rem;left:0;width:1rem;height:1rem;content:'';border:.0625rem solid #1c2529;border-radius:.125rem;background:#39444a;color:#d0d0d0;margin-left:-1.25rem}.input-group [type="checkbox"]+label:hover:before,.input-group [type="checkbox"]+label:focus:before,.input-group [type="radio"]+label:hover:before,.input-group [type="radio"]+label:focus:before{border-color:#0288d1}.input-group [type="checkbox"]:focus+label:before,.input-group [type="radio"]:focus+label:before{border-color:#0288d1}.input-group [type="radio"]+label:before,.input-group [type="radio"]+label:after{border-radius:50%}.input-group [type="checkbox"][disabled]+label,.input-group [type="radio"][disabled]+label,.input-group [type="checkbox"]:disabled+label,.input-group [type="radio"]:disabled+label{cursor:not-allowed}.input-group [type="checkbox"][disabled]+label:before,.input-group [type="checkbox"][disabled]+label:after,.input-group [type="radio"][disabled]+label:before,.input-group [type="radio"][disabled]+label:after,.input-group [type="checkbox"]:disabled+label:before,.input-group [type="checkbox"]:disabled+label:after,.input-group [type="radio"]:disabled+label:before,.input-group [type="radio"]:disabled+label:after{opacity:.75}.input-group [type="checkbox"]:checked+label:after,.input-group [type="radio"]:checked+label:after{position:absolute;background:#d0d0d0;content:'';margin-left:-1.25rem;top:.625rem;left:.25rem;width:.625rem;height:.625rem}.input-group [type="checkbox"]+label.switch:before,.input-group [type="radio"]+label.switch:before{top:.5rem;width:1.75rem;height:.875rem;border:0;border-radius:.5rem;background:#324148;margin-left:-2.375rem}.input-group [type="checkbox"]+label.switch:after,.input-group [type="radio"]+label.switch:after{display:inline-block;content:'';position:absolute;left:0;width:1.25rem;height:1.25rem;background:#39444a;border-radius:100%;top:.3125rem;margin-left:-3rem;transition:left 0.3s}.input-group [type="checkbox"]:checked+label.switch:before,.input-group [type="radio"]:checked+label.switch:before{background:#39444a}.input-group [type="checkbox"]:checked+label.switch:after,.input-group [type="radio"]:checked+label.switch:after{left:1.75rem;width:1.25rem;height:1.25rem;top:.3125rem;margin-left:-3rem;background:#0277bd}button.primary,[type="button"].primary,[type="submit"].primary,[type="reset"].primary,.button.primary,[role="button"].primary{background:rgba(2,119,189,0.9);color:#fafafa}button.primary:hover,button.primary:focus,[type="button"].primary:hover,[type="button"].primary:focus,[type="submit"].primary:hover,[type="submit"].primary:focus,[type="reset"].primary:hover,[type="reset"].primary:focus,.button.primary:hover,.button.primary:focus,[role="button"].primary:hover,[role="button"].primary:focus{background:#0277bd}button.secondary,[type="button"].secondary,[type="submit"].secondary,[type="reset"].secondary,.button.secondary,[role="button"].secondary{background:rgba(198,40,40,0.9);color:#fafafa}button.secondary:hover,button.secondary:focus,[type="button"].secondary:hover,[type="button"].secondary:focus,[type="submit"].secondary:hover,[type="submit"].secondary:focus,[type="reset"].secondary:hover,[type="reset"].secondary:focus,.button.secondary:hover,.button.secondary:focus,[role="button"].secondary:hover,[role="button"].secondary:focus{background:#c62828}button.tertiary,[type="button"].tertiary,[type="submit"].tertiary,[type="reset"].tertiary,.button.tertiary,[role="button"].tertiary{background:rgba(95,145,51,0.9);color:#fafafa}button.tertiary:hover,button.tertiary:focus,[type="button"].tertiary:hover,[type="button"].tertiary:focus,[type="submit"].tertiary:hover,[type="submit"].tertiary:focus,[type="reset"].tertiary:hover,[type="reset"].tertiary:focus,.button.tertiary:hover,.button.tertiary:focus,[role="button"].tertiary:hover,[role="button"].tertiary:focus{background:#5f9133}button.inverse,[type="button"].inverse,[type="submit"].inverse,[type="reset"].inverse,.button.inverse,[role="button"].inverse{background:rgba(235,236,236,0.9);color:#0c0c0c}button.inverse:hover,button.inverse:focus,[type="button"].inverse:hover,[type="button"].inverse:focus,[type="submit"].inverse:hover,[type="submit"].inverse:focus,[type="reset"].inverse:hover,[type="reset"].inverse:focus,.button.inverse:hover,.button.inverse:focus,[role="button"].inverse:hover,[role="button"].inverse:focus{background:#ebecec}button.small,[type="button"].small,[type="submit"].small,[type="reset"].small,.button.small,[role="button"].small{border-radius:.0625rem;padding:0.25rem 0.375rem}button.large,[type="button"].large,[type="submit"].large,[type="reset"].large,.button.large,[role="button"].large{border-radius:.25rem;padding:0.75rem 1.125rem}header{display:block;height:2.75rem;background:#151c1f;color:#f5f5f5;padding:0.125rem 0.5rem;white-space:nowrap;overflow-x:auto;overflow-y:hidden}header .logo{color:#f5f5f5;font-size:1.75rem;line-height:1.3125em;margin:0.0625rem 0.375rem 0.0625rem 0.0625rem;transition:opacity 0.3s}header button,header [type="button"],header a.button,header label.button,header .button,header a[role="button"],header label[role="button"],header [role="button"]{background:#151c1f;color:#f5f5f5;vertical-align:top;margin:0.125rem 0}header button:hover,header button:focus,header [type="button"]:hover,header [type="button"]:focus,header a.button:hover,header a.button:focus,header label.button:hover,header label.button:focus,header .button:hover,header .button:focus,header a[role="button"]:hover,header a[role="button"]:focus,header label[role="button"]:hover,header label[role="button"]:focus,header [role="button"]:hover,header [role="button"]:focus{background:#192024}header .logo,header a.button,header a[role="button"]{text-decoration:none}header.row{box-sizing:content-box}nav{display:block;background:#37474f;border:.0625rem solid #324148;margin:.5rem;padding:0.75rem 1rem}nav a,nav a:visited{display:block;color:#3e79bd;text-decoration:none}nav .sublink-1{padding-left:1rem;position:relative}nav .sublink-1:before{position:absolute;left:.1875rem;top:-.0625rem;content:'';height:100%;border:.0625rem solid #616161;border-left:0}nav .sublink-2{padding-left:2rem;position:relative}nav .sublink-2:before{position:absolute;left:.1875rem;top:-.0625rem;content:'';height:100%;border:.0625rem solid #616161;border-left:0}footer{display:block;background:#192024;color:#f5f5f5;margin:1rem 0 0;padding:1.5rem 0.5rem 0.75rem;font-size:.875rem}footer a,footer a:visited{color:#0288d1}header.sticky,footer.sticky{position:-webkit-sticky;position:sticky;z-index:1101}header.sticky{top:0}footer.sticky{bottom:0}.drawer-toggle:before{position:relative;top:.4375rem;font-family:sans-serif;font-size:2.5rem;line-height:.125;content:'\2261'}.drawer{display:block;box-sizing:border-box;position:fixed;top:0;width:320px;height:100vh;overflow-y:auto;background:#37474f;border:.0625rem solid #324148;margin:0;z-index:1110}.drawer:not(.right){left:-320px;transition:left 0.3s}.drawer.right{right:-320px;transition:right 0.3s}.drawer .close{position:absolute;top:.75rem;right:.25rem;z-index:1111;padding:0}@media screen and (max-width: 320px){.drawer{width:100%}}@media screen and (min-width: 768px){.drawer:not(.persistent){position:static;height:100%;z-index:1100}.drawer:not(.persistent) .close{display:none}.drawer-toggle:not(.persistent){display:none}}:checked+.drawer:not(.right){left:0}:checked+.drawer.right{right:0}table{border-collapse:separate;border-spacing:0;border:.0625rem solid #1c2529;margin:0 auto}table caption{font-size:1.5rem;margin:.5rem}table tr{padding:.5rem}table th,table td{padding:.625rem;border-left:.0625rem solid #1c2529;border-top:.0625rem solid #1c2529}table td{background:#232e33}table thead th{border-top:0}table th{background:#20292e}table th:first-child,table td:first-child{border-left:0}@media screen and (max-width: 767px){table:not(.preset){border-collapse:collapse;border:0;width:100%}table:not(.preset) thead,table:not(.preset) th{border:0;height:1px;width:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%)}table:not(.preset) tr{display:block;border:.0625rem solid #1c2529;margin-bottom:.625rem}table:not(.preset) td{display:block;border:0;border-bottom:.0625rem solid #1c2529;text-align:right;min-height:1.5rem}table:not(.preset) td:before{content:attr(data-label);float:left;font-weight:700}table:not(.preset) td:last-child{border-bottom:0}}@media screen and (min-width: 768px){table.horizontal,table.scrollable{display:-webkit-box;-webkit-box-flex:0;-webkit-box-orient:horizontal;-webkit-box-direction:normal;display:-webkit-flex;display:flex;-webkit-flex:0 1 auto;flex:0 1 auto;-webkit-flex-flow:row wrap;flex-flow:row wrap;padding:.5rem}table.horizontal caption,table.scrollable caption{-webkit-box-flex:1;max-width:100%;-webkit-flex:0 0 100%;flex:0 0 100%}table.horizontal thead,table.horizontal tbody,table.scrollable thead,table.scrollable tbody{display:-webkit-box;-webkit-box-flex:0;-webkit-box-orient:horizontal;-webkit-box-direction:normal;display:-webkit-flex;display:flex}table.horizontal thead,table.scrollable thead{z-index:999}table.horizontal tr,table.scrollable tr{display:-webkit-box;display:-webkit-flex;display:flex}table.horizontal thead,table.horizontal tbody{-webkit-flex-flow:row nowrap;flex-flow:row nowrap}table.horizontal tbody{overflow:auto;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;-webkit-flex:1 0 0;flex:1 0 0}table.horizontal tr{-webkit-box-flex:1;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;flex-direction:column;-webkit-flex:1 0 auto;flex:1 0 auto}table.horizontal th,table.horizontal td{width:100%;border:.0625rem solid #1c2529}table.horizontal th:not(:first-child),table.horizontal td:not(:first-child){border-top:0}table.horizontal th{text-align:right}table.horizontal thead tr:first-child{padding-left:0}table.horizontal tbody tr:first-child>td{padding-left:1.25rem}table.scrollable{overflow:auto;max-height:400px;border:0;padding-top:0}table.scrollable thead,table.scrollable tbody{-webkit-box-flex:1;max-width:100%;-webkit-flex-flow:row wrap;flex-flow:row wrap;-webkit-flex:0 0 100%;flex:0 0 100%;border:.0625rem solid #1c2529}table.scrollable tbody{border-top:0;margin-top:-0.0625rem}table.scrollable tr{-webkit-box-flex:0;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-webkit-flex-flow:row wrap;flex-flow:row wrap;-webkit-flex:0 0 100%;flex:0 0 100%;padding:0}table.scrollable th,table.scrollable td{-webkit-box-flex:1;-webkit-flex:1 0 0%;flex:1 0 0%;overflow:hidden;text-overflow:ellipsis}table.scrollable thead{position:sticky;top:0}}@media screen and (max-width: 767px){table.horizontal.preset,table.scrollable.preset{display:-webkit-box;-webkit-box-flex:0;-webkit-box-orient:horizontal;-webkit-box-direction:normal;display:-webkit-flex;display:flex;-webkit-flex:0 1 auto;flex:0 1 auto;-webkit-flex-flow:row wrap;flex-flow:row wrap;padding:.5rem}table.horizontal.preset caption,table.scrollable.preset caption{-webkit-box-flex:1;max-width:100%;-webkit-flex:0 0 100%;flex:0 0 100%}table.horizontal.preset thead,table.horizontal.preset tbody,table.scrollable.preset thead,table.scrollable.preset tbody{display:-webkit-box;-webkit-box-flex:0;-webkit-box-orient:horizontal;-webkit-box-direction:normal;display:-webkit-flex;display:flex}table.horizontal.preset thead,table.scrollable.preset thead{z-index:999}table.horizontal.preset tr,table.scrollable.preset tr{display:-webkit-box;display:-webkit-flex;display:flex}table.horizontal.preset thead,table.horizontal.preset tbody{-webkit-flex-flow:row nowrap;flex-flow:row nowrap}table.horizontal.preset tbody{overflow:auto;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;-webkit-flex:1 0 0;flex:1 0 0}table.horizontal.preset tr{-webkit-box-flex:1;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;flex-direction:column;-webkit-flex:1 0 auto;flex:1 0 auto}table.horizontal.preset th,table.horizontal.preset td{width:100%;border:.0625rem solid #1c2529}table.horizontal.preset th:not(:first-child),table.horizontal.preset td:not(:first-child){border-top:0}table.horizontal.preset th{text-align:right}table.horizontal.preset thead tr:first-child{padding-left:0}table.horizontal.preset tbody tr:first-child>td{padding-left:1.25rem}table.scrollable.preset{overflow:auto;max-height:400px;border:0;padding-top:0}table.scrollable.preset thead,table.scrollable.preset tbody{-webkit-box-flex:1;max-width:100%;-webkit-flex-flow:row wrap;flex-flow:row wrap;-webkit-flex:0 0 100%;flex:0 0 100%;border:.0625rem solid #1c2529}table.scrollable.preset tbody{border-top:0;margin-top:-0.0625rem}table.scrollable.preset tr{-webkit-box-flex:0;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-webkit-flex-flow:row wrap;flex-flow:row wrap;-webkit-flex:0 0 100%;flex:0 0 100%;padding:0}table.scrollable.preset th,table.scrollable.preset td{-webkit-box-flex:1;-webkit-flex:1 0 0%;flex:1 0 0%;overflow:hidden;text-overflow:ellipsis}table.scrollable.preset thead{position:sticky;top:0}}table.striped tr:nth-of-type(2n)>td{background:#263238}@media screen and (max-width: 767px){table.striped:not(.preset) tr:nth-of-type(2n){background:#263238}}.card{display:-webkit-box;-webkit-box-orient:vertical;-webkit-box-pack:justify;-webkit-box-align:center;display:-webkit-flex;display:flex;-webkit-flex-direction:column;flex-direction:column;-webkit-justify-content:space-between;justify-content:space-between;-webkit-align-self:center;align-self:center;position:relative;width:100%;background:#232e33;border:.0625rem solid #616161;margin:.5rem;overflow:hidden}.card>.section{box-sizing:border-box;margin:0;border:0;border-radius:0;border-bottom:.0625rem solid #757575;padding:.5rem;width:100%}.card>.section.media{height:200px;padding:0;-o-object-fit:cover;object-fit:cover}.card>.section:last-child{border-bottom:0}@media screen and (min-width: 320px){.card{max-width:320px}}@media screen and (min-width: 480px){.card.large{max-width:480px}}@media screen and (min-width: 240px){.card.small{max-width:240px}}.card.fluid{max-width:100%;width:auto}.card.warning{background:#fff176;color:#232e33;border:.0625rem solid #d1c661}.card.warning>.section{border-bottom:.0625rem solid #d1c661}.card.warning>.section:last-child{border-bottom:0}.card.error{background:#b71c1c;color:#fafafa;border:.0625rem solid #a71a1a}.card.error>.section{border-bottom:.0625rem solid #a71a1a}.card.error>.section:last-child{border-bottom:0}.card>.section.dark{background:#1d262a}.card>.section.darker{background:#171e21}.card>.section.double-padded{padding:.75rem}.tabs{width:100%;opacity:1;display:-webkit-box;-webkit-box-pack:justify;display:-webkit-flex;display:flex;-webkit-justify-content:space-between;justify-content:space-between;-webkit-flex-wrap:wrap;flex-wrap:wrap}.tabs>label{-webkit-box-flex:1;-webkit-flex-grow:1;flex-grow:1;-webkit-order:1;order:1;display:inline-block;height:1.5rem;cursor:pointer;transition:background 0.3s;background:#1d262a;border:.0625rem solid #757575;padding:.75rem}.tabs>label:hover,.tabs>label:focus{background:rgba(29,38,42,0.8)}.tabs>[type="radio"],.tabs>[type="checkbox"]{display:none;visibility:hidden}.tabs>label+div{-webkit-flex-basis:auto;flex-basis:auto;-webkit-order:2;order:2;height:1px;width:1px;margin:-1px;overflow:hidden;position:absolute;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%);-webkit-transform:scaleY(0);transform:scaleY(0);-webkit-transform-origin:top;transform-origin:top;transition:-webkit-transform 0.3s, transform 0.3s}.tabs>label:not(:first-of-type){border-left:0}.tabs>:checked+label{background:#263238;border-bottom-color:#0277bd}.tabs>:checked+label:hover,.tabs>:checked+label:focus{background:rgba(38,50,56,0.8)}.tabs>:checked+label+div{box-sizing:border-box;position:relative;height:400px;width:100%;overflow:auto;margin:0;-webkit-transform:scaleY(1);transform:scaleY(1);border:.0625rem solid #757575;border-top:0;padding:.5rem;clip:auto;-webkit-clip-path:inset(0%);clip-path:inset(0%)}.tabs.stacked{-webkit-box-orient:vertical;-webkit-flex-direction:column;flex-direction:column}.tabs.stacked>label{-webkit-order:initial;order:initial}.tabs.stacked>:checked+label{border:.0625rem solid #757575}.tabs.stacked>label+div{-webkit-order:initial;order:initial;-webkit-transform-origin:top;transform-origin:top}.tabs.stacked>label:not(:first-of-type){border:.0625rem solid #757575;border-top:0}.tabs.stacked>:checked+label+div{height:auto}@media screen and (max-width: 767px){.tabs{-webkit-box-orient:vertical;-webkit-flex-direction:column;flex-direction:column}.tabs>label{-webkit-order:initial;order:initial}.tabs>:checked+label{border:.0625rem solid #757575}.tabs>label+div{-webkit-order:initial;order:initial}.tabs>label:not(:first-of-type){border:.0625rem solid #757575;border-top:0}}mark{background:#0277bd;color:#fafafa;font-size:.9375em;line-height:1em;border-radius:.125rem;padding:0.125em 0.25em}mark.inline-block{display:inline-block}.toast{position:fixed;background:#acacac;bottom:1.5rem;left:50%;transform:translate(-50%, -50%);color:#0c0c0c;border-radius:2rem;padding:0.75rem 1.5rem;z-index:1111}.tooltip{position:relative;display:inline-block}.tooltip:before,.tooltip:after{position:absolute;opacity:0;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%);transition:all 0.3s;z-index:1010;left:50%}.tooltip:not(.bottom):before,.tooltip:not(.bottom):after{bottom:75%}.tooltip.bottom:before,.tooltip.bottom:after{top:75%}.tooltip:hover:before,.tooltip:hover:after,.tooltip:focus:before,.tooltip:focus:after{opacity:1;clip:auto;-webkit-clip-path:inset(0%);clip-path:inset(0%)}.tooltip:before{content:'';background:transparent;border:.5rem solid transparent;left:50%;left:calc(50% - .5rem)}.tooltip:not(.bottom):before{border-top-color:#d0d0d0}.tooltip.bottom:before{border-bottom-color:#d0d0d0}.tooltip:after{content:attr(aria-label);background:#d0d0d0;border-radius:.125rem;color:#0c0c0c;padding:.5rem;white-space:nowrap;-webkit-transform:translateX(-50%);transform:translateX(-50%)}.tooltip:not(.bottom):after{margin-bottom:1rem}.tooltip.bottom:after{margin-top:1rem}.modal{position:fixed;top:0;left:0;display:none;width:100vw;height:100vh;background:rgba(0,0,0,0.45)}.modal .card{margin:0 auto;max-height:50vh;overflow:auto}.modal .card .close{position:absolute;top:.75rem;right:.25rem;padding:0}:checked+.modal{display:-webkit-box;-webkit-box-flex:0;display:-webkit-flex;display:flex;-webkit-flex:0 1 auto;flex:0 1 auto;z-index:1200}:checked+.modal .card .close{z-index:1211}mark.secondary{background:#e53935}mark.tertiary{background:#689f38}mark.tag{border-radius:200px;padding:0.25em 0.5em}mark.inline-block{font-size:1em;line-height:1.375em;padding:.375em}.toast.small{border-radius:1.5rem;padding:0.5rem 1rem}.toast.large{border-radius:3rem;padding:1.125rem 2.25rem}progress{display:block;vertical-align:baseline;-webkit-appearance:none;-moz-appearance:none;appearance:none;height:.625rem;width:90%;width:calc(100% - 1rem);margin:.5rem .5rem;border:0;border-radius:.125rem;background:#39444a;color:#0277bd}progress::-webkit-progress-value{background:#0277bd;border-top-left-radius:.125rem;border-bottom-left-radius:.125rem}progress::-webkit-progress-bar{background:#39444a}progress::-moz-progress-bar{background:#0277bd;border-top-left-radius:.125rem;border-bottom-left-radius:.125rem}progress[value="1000"]::-webkit-progress-value{border-radius:.125rem}progress[value="1000"]::-moz-progress-bar{border-radius:.125rem}@-webkit-keyframes spinner-donut-anim{0%{-webkit-transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg)}}@keyframes spinner-donut-anim{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.spinner-donut{display:inline-block;border:.25rem solid #39444a;border-left:.25rem solid #1565c0;border-radius:50%;width:1.25rem;height:1.25rem;-webkit-animation:spinner-donut-anim 1.2s linear infinite;animation:spinner-donut-anim 1.2s linear infinite}progress.inline{display:inline-block;vertical-align:middle;width:60%}progress.secondary{color:#e53935}progress.secondary::-webkit-progress-value{background:#e53935}progress.secondary::-moz-progress-bar{background:#e53935}progress.tertiary{color:#689f38}progress.tertiary::-webkit-progress-value{background:#689f38}progress.tertiary::-moz-progress-bar{background:#689f38}.spinner-donut.secondary{border:.25rem solid #39444a;border-left:.25rem solid #c62828}.spinner-donut.tertiary{border:.25rem solid #39444a;border-left:.25rem solid #2e7d32}.spinner-donut.large{border-width:.375rem;width:2rem;height:2rem}.hidden{display:none !important}.visually-hidden{position:absolute !important;width:1px !important;height:1px !important;margin:-1px !important;border:0 !important;padding:0 !important;clip:rect(0 0 0 0) !important;-webkit-clip-path:inset(100%) !important;clip-path:inset(100%) !important;overflow:hidden !important}ul.breadcrumbs{display:-webkit-box;display:-webkit-flex;display:flex;list-style:none;margin:.5rem;padding:0}ul.breadcrumbs li{-webkit-box-flex:1;max-width:100%;-webkit-flex-grow:1;flex-grow:1;-webkit-flex-basis:0;flex-basis:0;position:relative;text-align:center;background:#37474f;height:2rem;line-height:2rem;margin-right:1.125rem}ul.breadcrumbs li:before,ul.breadcrumbs li:after{content:"";position:absolute;top:0;width:0;height:0;border:0 solid #37474f;border-width:1rem 1rem}ul.breadcrumbs li:before{left:-1rem;border-left-color:transparent}ul.breadcrumbs li:after{left:100%;border-color:transparent;border-left-color:#37474f}ul.breadcrumbs li:first-child:before{border:0}ul.breadcrumbs li:last-child{margin-right:0}ul.breadcrumbs li:last-child:after{border:0}.close{display:inline-block;width:1.5rem;font-family:sans-serif;font-size:1.5rem;line-height:1;font-weight:700;border-radius:2rem;background:rgba(57,68,74,0);vertical-align:top;cursor:pointer;transition:background 0.3s}.close:hover,.close:focus{background:#39444a}.close:before{content:"\00D7";display:block;text-align:center}.bordered{border:1px solid rgba(0,0,0,0.25) !important}.rounded{border-radius:.125rem !important}.circular{border-radius:50% !important}.responsive-margin{margin:.25rem !important}@media screen and (min-width: 768px){.responsive-margin{margin:.375rem !important}}@media screen and (min-width: 1280px){.responsive-margin{margin:.5rem !important}}.responsive-padding{padding:0.125rem 0.25rem !important}@media screen and (min-width: 768px){.responsive-padding{padding:0.25rem 0.375rem !important}}@media screen and (min-width: 1280px){.responsive-padding{padding:0.375rem 0.5rem !important}}.shadowed{box-shadow:0 .25rem .25rem 0 rgba(0,0,0,0.125),0 .125rem .125rem -.125rem rgba(0,0,0,0.25) !important}@media screen and (max-width: 767px){.hidden-sm{display:none !important}}@media screen and (min-width: 768px) and (max-width: 1279px){.hidden-md{display:none !important}}@media screen and (min-width: 1280px){.hidden-lg{display:none !important}}@media screen and (max-width: 767px){.visually-hidden-sm{position:absolute !important;width:1px !important;height:1px !important;margin:-1px !important;border:0 !important;padding:0 !important;clip:rect(0 0 0 0) !important;-webkit-clip-path:inset(100%) !important;clip-path:inset(100%) !important;overflow:hidden !important}}@media screen and (min-width: 768px) and (max-width: 1279px){.visually-hidden-md{position:absolute !important;width:1px !important;height:1px !important;margin:-1px !important;border:0 !important;padding:0 !important;clip:rect(0 0 0 0) !important;-webkit-clip-path:inset(100%) !important;clip-path:inset(100%) !important;overflow:hidden !important}}@media screen and (min-width: 1280px){.visually-hidden-lg{position:absolute !important;width:1px !important;height:1px !important;margin:-1px !important;border:0 !important;padding:0 !important;clip:rect(0 0 0 0) !important;-webkit-clip-path:inset(100%) !important;clip-path:inset(100%) !important;overflow:hidden !important}} +:root{--fore-color:#fdfdfd;--secondary-fore-color:#f0f0f0;--back-color:#111;--secondary-back-color:#222;--blockquote-color:#f57c00;--pre-color:#1565c0;--border-color:#ddd;--secondary-border-color:#aaa;--heading-ratio:1.19;--universal-margin:.5rem;--universal-padding:.5rem;--universal-border-radius:.125rem;--a-link-color:#0277bd;--a-visited-color:#01579b}html{font-size:16px}a,b,del,em,i,ins,q,span,strong,u{font-size:1em}html,*{font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, sans-serif;line-height:1.5;-webkit-text-size-adjust:100%}*{font-size:1rem}body{margin:0;color:var(--fore-color);background:var(--back-color)}details{display:block}summary{display:list-item}abbr[title]{border-bottom:none;text-decoration:underline dotted}input{overflow:visible}img{max-width:100%;height:auto}h1,h2,h3,h4,h5,h6{line-height:1.2;margin:calc(1.5 * var(--universal-margin)) var(--universal-margin);font-weight:500}h1 small,h2 small,h3 small,h4 small,h5 small,h6 small{color:var(--secondary-fore-color);display:block;margin-top:-.25rem}h1{font-size:calc(1rem * var(--heading-ratio) * var(--heading-ratio) * var(--heading-ratio) * var(--heading-ratio))}h2{font-size:calc(1rem * var(--heading-ratio) * var(--heading-ratio) * var(--heading-ratio))}h3{font-size:calc(1rem * var(--heading-ratio) * var(--heading-ratio))}h4{font-size:calc(1rem * var(--heading-ratio))}h5{font-size:1rem}h6{font-size:calc(1rem / var(--heading-ratio))}p{margin:var(--universal-margin)}ol,ul{margin:var(--universal-margin);padding-left:calc(2 * var(--universal-margin))}b,strong{font-weight:700}hr{box-sizing:content-box;border:0;line-height:1.25em;margin:var(--universal-margin);height:.0625rem;background:linear-gradient(to right, transparent, var(--border-color) 20%, var(--border-color) 80%, transparent)}blockquote{display:block;position:relative;font-style:italic;color:var(--secondary-fore-color);margin:var(--universal-margin);padding:calc(3 * var(--universal-padding));border:.0625rem solid var(--secondary-border-color);border-left:.375rem solid var(--blockquote-color);border-radius:0 var(--universal-border-radius) var(--universal-border-radius) 0}blockquote:before{position:absolute;top:calc(0rem - var(--universal-padding));left:0;font-family:sans-serif;font-size:3rem;font-weight:700;content:"\201c";color:var(--blockquote-color)}blockquote[cite]:after{font-style:normal;font-size:.75em;font-weight:700;content:"\a— " attr(cite);white-space:pre}code,kbd,pre,samp{font-family:Menlo, Consolas, monospace;font-size:.85em}code{background:var(--secondary-back-color);border-radius:var(--universal-border-radius);padding:calc(var(--universal-padding) / 4) calc(var(--universal-padding) / 2)}kbd{background:var(--fore-color);color:var(--back-color);border-radius:var(--universal-border-radius);padding:calc(var(--universal-padding) / 4) calc(var(--universal-padding) / 2)}pre{overflow:auto;background:var(--secondary-back-color);padding:calc(1.5 * var(--universal-padding));margin:var(--universal-margin);border:.0625rem solid var(--secondary-border-color);border-left:.25rem solid var(--pre-color);border-radius:0 var(--universal-border-radius) var(--universal-border-radius) 0}sup,sub,code,kbd{line-height:0;position:relative;vertical-align:baseline}small,sup,sub,figcaption{font-size:.75em}sup{top:-.5em}sub{bottom:-.25em}figure{margin:var(--universal-margin)}figcaption{color:var(--secondary-fore-color)}a{text-decoration:none}a:link{color:var(--a-link-color)}a:visited{color:var(--a-visited-color)}a:hover,a:focus{text-decoration:underline}.container{margin:0 auto;padding:0 calc(1.5 * var(--universal-padding))}.row{box-sizing:border-box;display:flex;flex:0 1 auto;flex-flow:row wrap}.col-sm,[class^='col-sm-'],[class^='col-sm-offset-'],.row[class*='cols-sm-']>*{box-sizing:border-box;flex:0 0 auto;padding:0 calc(var(--universal-padding) / 2)}.col-sm,.row.cols-sm>*{max-width:100%;flex-grow:1;flex-basis:0}.col-sm-1,.row.cols-sm-1>*{max-width:8.33333%;flex-basis:8.33333%}.col-sm-offset-0{margin-left:0}.col-sm-2,.row.cols-sm-2>*{max-width:16.66667%;flex-basis:16.66667%}.col-sm-offset-1{margin-left:8.33333%}.col-sm-3,.row.cols-sm-3>*{max-width:25%;flex-basis:25%}.col-sm-offset-2{margin-left:16.66667%}.col-sm-4,.row.cols-sm-4>*{max-width:33.33333%;flex-basis:33.33333%}.col-sm-offset-3{margin-left:25%}.col-sm-5,.row.cols-sm-5>*{max-width:41.66667%;flex-basis:41.66667%}.col-sm-offset-4{margin-left:33.33333%}.col-sm-6,.row.cols-sm-6>*{max-width:50%;flex-basis:50%}.col-sm-offset-5{margin-left:41.66667%}.col-sm-7,.row.cols-sm-7>*{max-width:58.33333%;flex-basis:58.33333%}.col-sm-offset-6{margin-left:50%}.col-sm-8,.row.cols-sm-8>*{max-width:66.66667%;flex-basis:66.66667%}.col-sm-offset-7{margin-left:58.33333%}.col-sm-9,.row.cols-sm-9>*{max-width:75%;flex-basis:75%}.col-sm-offset-8{margin-left:66.66667%}.col-sm-10,.row.cols-sm-10>*{max-width:83.33333%;flex-basis:83.33333%}.col-sm-offset-9{margin-left:75%}.col-sm-11,.row.cols-sm-11>*{max-width:91.66667%;flex-basis:91.66667%}.col-sm-offset-10{margin-left:83.33333%}.col-sm-12,.row.cols-sm-12>*{max-width:100%;flex-basis:100%}.col-sm-offset-11{margin-left:91.66667%}.col-sm-normal{order:initial}.col-sm-first{order:-999}.col-sm-last{order:999}@media screen and (min-width: 768px){.col-md,[class^='col-md-'],[class^='col-md-offset-'],.row[class*='cols-md-']>*{box-sizing:border-box;flex:0 0 auto;padding:0 calc(var(--universal-padding) / 2)}.col-md,.row.cols-md>*{max-width:100%;flex-grow:1;flex-basis:0}.col-md-1,.row.cols-md-1>*{max-width:8.33333%;flex-basis:8.33333%}.col-md-offset-0{margin-left:0}.col-md-2,.row.cols-md-2>*{max-width:16.66667%;flex-basis:16.66667%}.col-md-offset-1{margin-left:8.33333%}.col-md-3,.row.cols-md-3>*{max-width:25%;flex-basis:25%}.col-md-offset-2{margin-left:16.66667%}.col-md-4,.row.cols-md-4>*{max-width:33.33333%;flex-basis:33.33333%}.col-md-offset-3{margin-left:25%}.col-md-5,.row.cols-md-5>*{max-width:41.66667%;flex-basis:41.66667%}.col-md-offset-4{margin-left:33.33333%}.col-md-6,.row.cols-md-6>*{max-width:50%;flex-basis:50%}.col-md-offset-5{margin-left:41.66667%}.col-md-7,.row.cols-md-7>*{max-width:58.33333%;flex-basis:58.33333%}.col-md-offset-6{margin-left:50%}.col-md-8,.row.cols-md-8>*{max-width:66.66667%;flex-basis:66.66667%}.col-md-offset-7{margin-left:58.33333%}.col-md-9,.row.cols-md-9>*{max-width:75%;flex-basis:75%}.col-md-offset-8{margin-left:66.66667%}.col-md-10,.row.cols-md-10>*{max-width:83.33333%;flex-basis:83.33333%}.col-md-offset-9{margin-left:75%}.col-md-11,.row.cols-md-11>*{max-width:91.66667%;flex-basis:91.66667%}.col-md-offset-10{margin-left:83.33333%}.col-md-12,.row.cols-md-12>*{max-width:100%;flex-basis:100%}.col-md-offset-11{margin-left:91.66667%}.col-md-normal{order:initial}.col-md-first{order:-999}.col-md-last{order:999}}@media screen and (min-width: 1280px){.col-lg,[class^='col-lg-'],[class^='col-lg-offset-'],.row[class*='cols-lg-']>*{box-sizing:border-box;flex:0 0 auto;padding:0 calc(var(--universal-padding) / 2)}.col-lg,.row.cols-lg>*{max-width:100%;flex-grow:1;flex-basis:0}.col-lg-1,.row.cols-lg-1>*{max-width:8.33333%;flex-basis:8.33333%}.col-lg-offset-0{margin-left:0}.col-lg-2,.row.cols-lg-2>*{max-width:16.66667%;flex-basis:16.66667%}.col-lg-offset-1{margin-left:8.33333%}.col-lg-3,.row.cols-lg-3>*{max-width:25%;flex-basis:25%}.col-lg-offset-2{margin-left:16.66667%}.col-lg-4,.row.cols-lg-4>*{max-width:33.33333%;flex-basis:33.33333%}.col-lg-offset-3{margin-left:25%}.col-lg-5,.row.cols-lg-5>*{max-width:41.66667%;flex-basis:41.66667%}.col-lg-offset-4{margin-left:33.33333%}.col-lg-6,.row.cols-lg-6>*{max-width:50%;flex-basis:50%}.col-lg-offset-5{margin-left:41.66667%}.col-lg-7,.row.cols-lg-7>*{max-width:58.33333%;flex-basis:58.33333%}.col-lg-offset-6{margin-left:50%}.col-lg-8,.row.cols-lg-8>*{max-width:66.66667%;flex-basis:66.66667%}.col-lg-offset-7{margin-left:58.33333%}.col-lg-9,.row.cols-lg-9>*{max-width:75%;flex-basis:75%}.col-lg-offset-8{margin-left:66.66667%}.col-lg-10,.row.cols-lg-10>*{max-width:83.33333%;flex-basis:83.33333%}.col-lg-offset-9{margin-left:75%}.col-lg-11,.row.cols-lg-11>*{max-width:91.66667%;flex-basis:91.66667%}.col-lg-offset-10{margin-left:83.33333%}.col-lg-12,.row.cols-lg-12>*{max-width:100%;flex-basis:100%}.col-lg-offset-11{margin-left:91.66667%}.col-lg-normal{order:initial}.col-lg-first{order:-999}.col-lg-last{order:999}}:root{--card-back-color:#111;--card-fore-color:#fdfdfd;--card-border-color:#aaa}.card{display:flex;flex-direction:column;justify-content:space-between;align-self:center;position:relative;width:100%;background:var(--card-back-color);color:var(--card-fore-color);border:.0625rem solid var(--card-border-color);border-radius:var(--universal-border-radius);margin:var(--universal-margin);overflow:hidden}@media screen and (min-width: 320px){.card{max-width:320px}}.card>.section{background:var(--card-back-color);color:var(--card-fore-color);box-sizing:border-box;margin:0;border:0;border-radius:0;border-bottom:.0625rem solid var(--card-border-color);padding:var(--universal-padding);width:100%}.card>.section.media{height:200px;padding:0;-o-object-fit:cover;object-fit:cover}.card>.section:last-child{border-bottom:0}@media screen and (min-width: 240px){.card.small{max-width:240px}}@media screen and (min-width: 480px){.card.large{max-width:480px}}.card.fluid{max-width:100%;width:auto}.card.warning{--card-back-color:#ffca28;--card-fore-color:#111;--card-border-color:#e8b825}.card.error{--card-back-color:#b71c1c;--card-fore-color:#f8f8f8;--card-border-color:#a71a1a}.card>.section.dark{--card-back-color:#e0e0e0;--card-fore-color:#111}.card>.section.double-padded{padding:calc(1.5 * var(--universal-padding))}:root{--form-back-color:#222;--form-fore-color:#fdfdfd;--form-border-color:#aaa;--input-back-color:#111;--input-fore-color:#fdfdfd;--input-border-color:#aaa;--input-focus-color:#0288d1;--input-invalid-color:#d32f2f;--button-back-color:#212121;--button-hover-back-color:#444;--button-fore-color:#e2e2e2;--button-border-color:transparent;--button-hover-border-color:transparent;--button-group-border-color:rgba(124,124,124,0.54)}form{background:var(--form-back-color);color:var(--form-fore-color);border:.0625rem solid var(--form-border-color);border-radius:var(--universal-border-radius);margin:var(--universal-margin);padding:calc(2 * var(--universal-padding)) var(--universal-padding)}fieldset{border:.0625rem solid var(--form-border-color);border-radius:var(--universal-border-radius);margin:calc(var(--universal-margin) / 4);padding:var(--universal-padding)}legend{box-sizing:border-box;display:table;max-width:100%;white-space:normal;font-weight:700;padding:calc(var(--universal-padding) / 2)}label{padding:calc(var(--universal-padding) / 2) var(--universal-padding)}.input-group{display:inline-block}.input-group.fluid{display:flex;align-items:center;justify-content:center}.input-group.fluid>input{max-width:100%;flex-grow:1;flex-basis:0px}@media screen and (max-width: 767px){.input-group.fluid{align-items:stretch;flex-direction:column}}.input-group.vertical{display:flex;align-items:stretch;flex-direction:column}.input-group.vertical>input{max-width:100%;flex-grow:1;flex-basis:0px}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px}[type="search"]::-webkit-search-cancel-button,[type="search"]::-webkit-search-decoration{-webkit-appearance:none}input:not([type]),[type="text"],[type="email"],[type="number"],[type="search"],[type="password"],[type="url"],[type="tel"],[type="checkbox"],[type="radio"],textarea,select{box-sizing:border-box;background:var(--input-back-color);color:var(--input-fore-color);border:.0625rem solid var(--input-border-color);border-radius:var(--universal-border-radius);margin:calc(var(--universal-margin) / 2);padding:var(--universal-padding) calc(1.5 * var(--universal-padding))}input:not([type="button"]):not([type="submit"]):not([type="reset"]):hover,input:not([type="button"]):not([type="submit"]):not([type="reset"]):focus,textarea:hover,textarea:focus,select:hover,select:focus{border-color:var(--input-focus-color);box-shadow:none}input:not([type="button"]):not([type="submit"]):not([type="reset"]):invalid,input:not([type="button"]):not([type="submit"]):not([type="reset"]):focus:invalid,textarea:invalid,textarea:focus:invalid,select:invalid,select:focus:invalid{border-color:var(--input-invalid-color);box-shadow:none}input:not([type="button"]):not([type="submit"]):not([type="reset"])[readonly],textarea[readonly],select[readonly]{background:var(--secondary-back-color)}select{max-width:100%}option{overflow:hidden;text-overflow:ellipsis}[type="checkbox"],[type="radio"]{-webkit-appearance:none;-moz-appearance:none;appearance:none;position:relative;height:calc(1rem + var(--universal-padding) / 2);width:calc(1rem + var(--universal-padding) / 2);vertical-align:text-bottom;padding:0;flex-basis:calc(1rem + var(--universal-padding) / 2) !important;flex-grow:0 !important}[type="checkbox"]:checked:before,[type="radio"]:checked:before{position:absolute}[type="checkbox"]:checked:before{content:'\2713';font-family:sans-serif;font-size:calc(1rem + var(--universal-padding) / 2);top:calc(0rem - var(--universal-padding));left:calc(var(--universal-padding) / 4)}[type="radio"]{border-radius:100%}[type="radio"]:checked:before{border-radius:100%;content:'';top:calc(.0625rem + var(--universal-padding) / 2);left:calc(.0625rem + var(--universal-padding) / 2);background:var(--input-fore-color);width:0.5rem;height:0.5rem}:placeholder-shown{color:var(--input-fore-color)}::-ms-placeholder{color:var(--input-fore-color);opacity:0.54}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button,html [type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button{overflow:visible;text-transform:none}button,[type="button"],[type="submit"],[type="reset"],a.button,label.button,.button,a[role="button"],label[role="button"],[role="button"]{display:inline-block;background:var(--button-back-color);color:var(--button-fore-color);border:.0625rem solid var(--button-border-color);border-radius:var(--universal-border-radius);padding:var(--universal-padding) calc(1.5 * var(--universal-padding));margin:var(--universal-margin);text-decoration:none;cursor:pointer;transition:background 0.3s}button:hover,button:focus,[type="button"]:hover,[type="button"]:focus,[type="submit"]:hover,[type="submit"]:focus,[type="reset"]:hover,[type="reset"]:focus,a.button:hover,a.button:focus,label.button:hover,label.button:focus,.button:hover,.button:focus,a[role="button"]:hover,a[role="button"]:focus,label[role="button"]:hover,label[role="button"]:focus,[role="button"]:hover,[role="button"]:focus{background:var(--button-hover-back-color);border-color:var(--button-hover-border-color)}input:disabled,input[disabled],textarea:disabled,textarea[disabled],select:disabled,select[disabled],button:disabled,button[disabled],.button:disabled,.button[disabled],[role="button"]:disabled,[role="button"][disabled]{cursor:not-allowed;opacity:.75}.button-group{display:flex;border:.0625rem solid var(--button-group-border-color);border-radius:var(--universal-border-radius);margin:var(--universal-margin)}.button-group>button,.button-group [type="button"],.button-group>[type="submit"],.button-group>[type="reset"],.button-group>.button,.button-group>[role="button"]{margin:0;max-width:100%;flex:1 1 auto;text-align:center;border:0;border-radius:0;box-shadow:none}.button-group>:not(:first-child){border-left:.0625rem solid var(--button-group-border-color)}@media screen and (max-width: 767px){.button-group{flex-direction:column}.button-group>:not(:first-child){border:0;border-top:.0625rem solid var(--button-group-border-color)}}button.primary,[type="button"].primary,[type="submit"].primary,[type="reset"].primary,.button.primary,[role="button"].primary{--button-back-color:#1976d2;--button-fore-color:#f8f8f8}button.primary:hover,button.primary:focus,[type="button"].primary:hover,[type="button"].primary:focus,[type="submit"].primary:hover,[type="submit"].primary:focus,[type="reset"].primary:hover,[type="reset"].primary:focus,.button.primary:hover,.button.primary:focus,[role="button"].primary:hover,[role="button"].primary:focus{--button-hover-back-color:#1565c0}button.secondary,[type="button"].secondary,[type="submit"].secondary,[type="reset"].secondary,.button.secondary,[role="button"].secondary{--button-back-color:#d32f2f;--button-fore-color:#f8f8f8}button.secondary:hover,button.secondary:focus,[type="button"].secondary:hover,[type="button"].secondary:focus,[type="submit"].secondary:hover,[type="submit"].secondary:focus,[type="reset"].secondary:hover,[type="reset"].secondary:focus,.button.secondary:hover,.button.secondary:focus,[role="button"].secondary:hover,[role="button"].secondary:focus{--button-hover-back-color:#c62828}button.tertiary,[type="button"].tertiary,[type="submit"].tertiary,[type="reset"].tertiary,.button.tertiary,[role="button"].tertiary{--button-back-color:#308732;--button-fore-color:#f8f8f8}button.tertiary:hover,button.tertiary:focus,[type="button"].tertiary:hover,[type="button"].tertiary:focus,[type="submit"].tertiary:hover,[type="submit"].tertiary:focus,[type="reset"].tertiary:hover,[type="reset"].tertiary:focus,.button.tertiary:hover,.button.tertiary:focus,[role="button"].tertiary:hover,[role="button"].tertiary:focus{--button-hover-back-color:#277529}button.inverse,[type="button"].inverse,[type="submit"].inverse,[type="reset"].inverse,.button.inverse,[role="button"].inverse{--button-back-color:#f8f8f8;--button-fore-color:#212121}button.inverse:hover,button.inverse:focus,[type="button"].inverse:hover,[type="button"].inverse:focus,[type="submit"].inverse:hover,[type="submit"].inverse:focus,[type="reset"].inverse:hover,[type="reset"].inverse:focus,.button.inverse:hover,.button.inverse:focus,[role="button"].inverse:hover,[role="button"].inverse:focus{--button-hover-back-color:#f0f0f0}button.small,[type="button"].small,[type="submit"].small,[type="reset"].small,.button.small,[role="button"].small{padding:calc(0.5 * var(--universal-padding)) calc(0.75 * var(--universal-padding));margin:var(--universal-margin)}button.large,[type="button"].large,[type="submit"].large,[type="reset"].large,.button.large,[role="button"].large{padding:calc(1.5 * var(--universal-padding)) calc(2 * var(--universal-padding));margin:var(--universal-margin)}:root{--header-back-color:#111;--header-hover-back-color:#222;--header-fore-color:#f0f0f0;--header-border-color:#aaa;--nav-back-color:#111;--nav-hover-back-color:#222;--nav-fore-color:#f0f0f0;--nav-border-color:#aaa;--nav-link-color:#0277bd;--footer-fore-color:#f0f0f0;--footer-back-color:#111;--footer-border-color:#aaa;--footer-link-color:#0277bd;--drawer-back-color:#111;--drawer-hover-back-color:#222;--drawer-border-color:#aaa;--drawer-close-color:#f0f0f0}header{height:3.1875rem;background:var(--header-back-color);color:var(--header-fore-color);border-bottom:.0625rem solid var(--header-border-color);padding:calc(var(--universal-padding) / 4) 0;white-space:nowrap;overflow-x:auto;overflow-y:hidden}header.row{box-sizing:content-box}header .logo{color:var(--header-fore-color);font-size:1.75rem;padding:var(--universal-padding) calc(2 * var(--universal-padding));text-decoration:none}header button,header [type="button"],header .button,header [role="button"]{box-sizing:border-box;position:relative;top:calc(0rem - var(--universal-padding) / 4);height:calc(3.1875rem + var(--universal-padding) / 2);background:var(--header-back-color);line-height:calc(3.1875rem - var(--universal-padding) * 1.5);text-align:center;color:var(--header-fore-color);border:0;border-radius:0;margin:0;text-transform:uppercase}header button:hover,header button:focus,header [type="button"]:hover,header [type="button"]:focus,header .button:hover,header .button:focus,header [role="button"]:hover,header [role="button"]:focus{background:var(--header-hover-back-color)}nav{background:var(--nav-back-color);color:var(--nav-fore-color);border:.0625rem solid var(--nav-border-color);border-radius:var(--universal-border-radius);margin:var(--universal-margin)}nav *{padding:var(--universal-padding) calc(1.5 * var(--universal-padding))}nav a,nav a:visited{display:block;color:var(--nav-link-color);border-radius:var(--universal-border-radius);transition:background 0.3s}nav a:hover,nav a:focus,nav a:visited:hover,nav a:visited:focus{text-decoration:none;background:var(--nav-hover-back-color)}nav .sublink-1{position:relative;margin-left:calc(2 * var(--universal-padding))}nav .sublink-1:before{position:absolute;left:calc(var(--universal-padding) - 1 * var(--universal-padding));top:-.0625rem;content:'';height:100%;border:.0625rem solid var(--nav-border-color);border-left:0}nav .sublink-2{position:relative;margin-left:calc(4 * var(--universal-padding))}nav .sublink-2:before{position:absolute;left:calc(var(--universal-padding) - 3 * var(--universal-padding));top:-.0625rem;content:'';height:100%;border:.0625rem solid var(--nav-border-color);border-left:0}footer{background:var(--footer-back-color);color:var(--footer-fore-color);border-top:.0625rem solid var(--footer-border-color);padding:calc(2 * var(--universal-padding)) var(--universal-padding);font-size:.875rem}footer a,footer a:visited{color:var(--footer-link-color)}header.sticky{position:-webkit-sticky;position:sticky;z-index:1101;top:0}footer.sticky{position:-webkit-sticky;position:sticky;z-index:1101;bottom:0}.drawer-toggle:before{display:inline-block;position:relative;vertical-align:bottom;content:'\00a0\2261\00a0';font-family:sans-serif;font-size:1.5em}@media screen and (min-width: 768px){.drawer-toggle:not(.persistent){display:none}}[type="checkbox"].drawer{height:1px;width:1px;margin:-1px;overflow:hidden;position:absolute;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%)}[type="checkbox"].drawer+*{display:block;box-sizing:border-box;position:fixed;top:0;width:320px;height:100vh;overflow-y:auto;background:var(--drawer-back-color);border:.0625rem solid var(--drawer-border-color);border-radius:0;margin:0;z-index:1110;right:-320px;transition:right 0.3s}[type="checkbox"].drawer+* .drawer-close{position:absolute;top:var(--universal-margin);right:var(--universal-margin);z-index:1111;width:2rem;height:2rem;border-radius:var(--universal-border-radius);padding:var(--universal-padding);margin:0;cursor:pointer;transition:background 0.3s}[type="checkbox"].drawer+* .drawer-close:before{display:block;content:'\00D7';color:var(--drawer-close-color);position:relative;font-family:sans-serif;font-size:2rem;line-height:1;text-align:center}[type="checkbox"].drawer+* .drawer-close:hover,[type="checkbox"].drawer+* .drawer-close:focus{background:var(--drawer-hover-back-color)}@media screen and (max-width: 320px){[type="checkbox"].drawer+*{width:100%}}[type="checkbox"].drawer:checked+*{right:0}@media screen and (min-width: 768px){[type="checkbox"].drawer:not(.persistent)+*{position:static;height:100%;z-index:1100}[type="checkbox"].drawer:not(.persistent)+* .drawer-close{display:none}}:root{--table-border-color:#ddd;--table-border-separator-color:#666;--table-head-back-color:#212121;--table-head-fore-color:#fdfdfd;--table-body-back-color:#111;--table-body-fore-color:#fdfdfd;--table-body-alt-back-color:#444}table{border-collapse:separate;border-spacing:0;margin:0;display:flex;flex:0 1 auto;flex-flow:row wrap;padding:var(--universal-padding);padding-top:0}table caption{font-size:1.5rem;margin:calc(2 * var(--universal-margin)) 0;max-width:100%;flex:0 0 100%}table thead,table tbody{display:flex;flex-flow:row wrap;border:.0625rem solid var(--table-border-color)}table thead{z-index:999;border-radius:var(--universal-border-radius) var(--universal-border-radius) 0 0;border-bottom:.0625rem solid var(--table-border-separator-color)}table tbody{border-top:0;margin-top:calc(0 - var(--universal-margin));border-radius:0 0 var(--universal-border-radius) var(--universal-border-radius)}table tr{display:flex;padding:0}table th,table td{padding:calc(2 * var(--universal-padding))}table th{text-align:left;background:var(--table-head-back-color);color:var(--table-head-fore-color)}table td{background:var(--table-body-back-color);color:var(--table-body-fore-color);border-top:.0625rem solid var(--table-border-color)}table:not(.horizontal){overflow:auto;max-height:400px}table:not(.horizontal) thead,table:not(.horizontal) tbody{max-width:100%;flex:0 0 100%}table:not(.horizontal) tr{flex-flow:row wrap;flex:0 0 100%}table:not(.horizontal) th,table:not(.horizontal) td{flex:1 0 0%;overflow:hidden;text-overflow:ellipsis}table:not(.horizontal) thead{position:sticky;top:0}table:not(.horizontal) tbody tr:first-child td{border-top:0}table.horizontal{border:0}table.horizontal thead,table.horizontal tbody{border:0;flex-flow:row nowrap}table.horizontal tbody{overflow:auto;justify-content:space-between;flex:1 0 0;margin-left:calc( 4 * var(--universal-margin));padding-bottom:calc(var(--universal-padding) / 4)}table.horizontal tr{flex-direction:column;flex:1 0 auto}table.horizontal th,table.horizontal td{width:100%;border:0;border-bottom:.0625rem solid var(--table-border-color)}table.horizontal th:not(:first-child),table.horizontal td:not(:first-child){border-top:0}table.horizontal th{text-align:right;border-left:.0625rem solid var(--table-border-color);border-right:.0625rem solid var(--table-border-separator-color)}table.horizontal thead tr:first-child{padding-left:0}table.horizontal th:first-child,table.horizontal td:first-child{border-top:.0625rem solid var(--table-border-color)}table.horizontal tbody tr:last-child td{border-right:.0625rem solid var(--table-border-color)}table.horizontal tbody tr:last-child td:first-child{border-top-right-radius:0.25rem}table.horizontal tbody tr:last-child td:last-child{border-bottom-right-radius:0.25rem}table.horizontal thead tr:first-child th:first-child{border-top-left-radius:0.25rem}table.horizontal thead tr:first-child th:last-child{border-bottom-left-radius:0.25rem}@media screen and (max-width: 767px){table,table.horizontal{border-collapse:collapse;border:0;width:100%;display:table}table thead,table th,table.horizontal thead,table.horizontal th{border:0;height:1px;width:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%)}table tbody,table.horizontal tbody{border:0;display:table-row-group}table tr,table.horizontal tr{display:block;border:.0625rem solid var(--table-border-color);border-radius:var(--universal-border-radius);background:#fafafa;padding:var(--universal-padding);margin:var(--universal-margin);margin-bottom:calc(2 * var(--universal-margin))}table th,table td,table.horizontal th,table.horizontal td{width:auto}table td,table.horizontal td{display:block;border:0;text-align:right}table td:before,table.horizontal td:before{content:attr(data-label);float:left;font-weight:600}table th:first-child,table td:first-child,table.horizontal th:first-child,table.horizontal td:first-child{border-top:0}table tbody tr:last-child td,table.horizontal tbody tr:last-child td{border-right:0}}:root{--table-body-alt-back-color:#444}table.striped tr:nth-of-type(2n)>td{background:var(--table-body-alt-back-color)}@media screen and (max-width: 768px){table.striped tr:nth-of-type(2n){background:var(--table-body-alt-back-color)}}:root{--table-body-hover-back-color:#5c819f}table.hoverable tr:hover,table.hoverable tr:hover>td,table.hoverable tr:focus,table.hoverable tr:focus>td{background:var(--table-body-hover-back-color)}@media screen and (max-width: 768px){table.hoverable tr:hover,table.hoverable tr:hover>td,table.hoverable tr:focus,table.hoverable tr:focus>td{background:var(--table-body-hover-back-color)}}:root{--mark-back-color:#0277bd;--mark-fore-color:#fafafa}mark{background:var(--mark-back-color);color:var(--mark-fore-color);font-size:.95em;line-height:1em;border-radius:var(--universal-border-radius);padding:calc(var(--universal-padding) / 4) calc(var(--universal-padding) / 2)}mark.inline-block{display:inline-block;font-size:1em;line-height:1.5;padding:calc(var(--universal-padding) / 2) var(--universal-padding)}:root{--toast-back-color:#424242;--toast-fore-color:#fafafa}.toast{position:fixed;bottom:calc(var(--universal-margin) * 3);left:50%;transform:translate(-50%, -50%);z-index:1111;color:var(--toast-fore-color);background:var(--toast-back-color);border-radius:calc(var(--universal-border-radius) * 16);padding:var(--universal-padding) calc(var(--universal-padding) * 3)}:root{--tooltip-back-color:#fafafa;--tooltip-fore-color:#212121}.tooltip{position:relative;display:inline-block}.tooltip:before,.tooltip:after{position:absolute;opacity:0;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%);transition:all 0.3s;z-index:1010;left:50%}.tooltip:not(.bottom):before,.tooltip:not(.bottom):after{bottom:75%}.tooltip.bottom:before,.tooltip.bottom:after{top:75%}.tooltip:hover:before,.tooltip:hover:after,.tooltip:focus:before,.tooltip:focus:after{opacity:1;clip:auto;-webkit-clip-path:inset(0%);clip-path:inset(0%)}.tooltip:before{content:'';background:transparent;border:var(--universal-margin) solid transparent;left:calc(50% - var(--universal-margin))}.tooltip:not(.bottom):before{border-top-color:#fafafa}.tooltip.bottom:before{border-bottom-color:#fafafa}.tooltip:after{content:attr(aria-label);color:var(--tooltip-fore-color);background:var(--tooltip-back-color);border-radius:var(--universal-border-radius);padding:var(--universal-padding);white-space:nowrap;transform:translateX(-50%)}.tooltip:not(.bottom):after{margin-bottom:calc(2 * var(--universal-margin))}.tooltip.bottom:after{margin-top:calc(2 * var(--universal-margin))}:root{--modal-overlay-color:rgba(0,0,0,0.45);--modal-close-color:#f0f0f0;--modal-close-hover-color:#222}[type="checkbox"].modal{height:1px;width:1px;margin:-1px;overflow:hidden;position:absolute;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%)}[type="checkbox"].modal+div{position:fixed;top:0;left:0;display:none;width:100vw;height:100vh;background:var(--modal-overlay-color)}[type="checkbox"].modal+div .card{margin:0 auto;max-height:50vh;overflow:auto}[type="checkbox"].modal+div .card .modal-close{position:absolute;top:0;right:0;width:1.75rem;height:1.75rem;border-radius:var(--universal-border-radius);padding:var(--universal-padding);margin:0;cursor:pointer;transition:background 0.3s}[type="checkbox"].modal+div .card .modal-close:before{display:block;content:'\00D7';color:var(--modal-close-color);position:relative;font-family:sans-serif;font-size:1.75rem;line-height:1;text-align:center}[type="checkbox"].modal+div .card .modal-close:hover,[type="checkbox"].modal+div .card .modal-close:focus{background:var(--modal-close-hover-color)}[type="checkbox"].modal:checked+div{display:flex;flex:0 1 auto;z-index:1200}[type="checkbox"].modal:checked+div .card .modal-close{z-index:1211}:root{--collapse-label-back-color:#111;--collapse-label-fore-color:#fafafa;--collapse-label-hover-back-color:#222;--collapse-selected-label-back-color:#444;--collapse-border-color:#aaa;--collapse-content-back-color:#212121;--collapse-selected-label-border-color:#0277bd}.collapse{width:calc(100% - 2 * var(--universal-margin));opacity:1;display:flex;flex-direction:column;margin:var(--universal-margin);border-radius:var(--universal-border-radius)}.collapse>[type="radio"],.collapse>[type="checkbox"]{height:1px;width:1px;margin:-1px;overflow:hidden;position:absolute;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%)}.collapse>label{flex-grow:1;display:inline-block;height:1.5rem;cursor:pointer;transition:background 0.3s;color:var(--collapse-label-fore-color);background:var(--collapse-label-back-color);border:.0625rem solid var(--collapse-border-color);padding:calc(1.5 * var(--universal-padding))}.collapse>label:hover,.collapse>label:focus{background:var(--collapse-label-hover-back-color)}.collapse>label+div{flex-basis:auto;height:1px;width:1px;margin:-1px;overflow:hidden;position:absolute;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%);transition:max-height 0.3s;max-height:1px}.collapse>:checked+label{background:var(--collapse-selected-label-back-color);border-bottom-color:var(--collapse-selected-label-border-color)}.collapse>:checked+label+div{box-sizing:border-box;position:relative;width:100%;height:auto;overflow:auto;margin:0;background:var(--collapse-content-back-color);border:.0625rem solid var(--collapse-border-color);border-top:0;padding:var(--universal-padding);clip:auto;-webkit-clip-path:inset(0%);clip-path:inset(0%);max-height:400px}.collapse>label:not(:first-of-type){border-top:0}.collapse>label:first-of-type{border-radius:var(--universal-border-radius) var(--universal-border-radius) 0 0}.collapse>label:last-of-type:not(:first-of-type){border-radius:0 0 var(--universal-border-radius) var(--universal-border-radius)}.collapse>label:last-of-type:first-of-type{border-radius:var(--universal-border-radius)}.collapse>:checked:last-of-type:not(:first-of-type)+label{border-radius:0}.collapse>:checked:last-of-type+label+div{border-radius:0 0 var(--universal-border-radius) var(--universal-border-radius)}mark.secondary{--mark-back-color:#d32f2f}mark.tertiary{--mark-back-color:#308732}mark.tag{padding:calc(var(--universal-padding)/2) var(--universal-padding);border-radius:1em}:root{--progress-back-color:#aaa;--progress-fore-color:#555}progress{display:block;vertical-align:baseline;-webkit-appearance:none;-moz-appearance:none;appearance:none;height:.75rem;width:calc(100% - 2 * var(--universal-margin));margin:var(--universal-margin);border:0;border-radius:calc(2 * var(--universal-border-radius));background:var(--progress-back-color);color:var(--progress-fore-color)}progress::-webkit-progress-value{background:var(--progress-fore-color);border-top-left-radius:calc(2 * var(--universal-border-radius));border-bottom-left-radius:calc(2 * var(--universal-border-radius))}progress::-webkit-progress-bar{background:var(#aaa)}progress::-moz-progress-bar{background:var(--progress-fore-color);border-top-left-radius:calc(2 * var(--universal-border-radius));border-bottom-left-radius:calc(2 * var(--universal-border-radius))}progress[value="1000"]::-webkit-progress-value{border-radius:calc(2 * var(--universal-border-radius))}progress[value="1000"]::-moz-progress-bar{border-radius:calc(2 * var(--universal-border-radius))}progress.inline{display:inline-block;vertical-align:middle;width:60%}:root{--spinner-back-color:#ddd;--spinner-fore-color:#555}@keyframes spinner-donut-anim{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.spinner{display:inline-block;margin:var(--universal-margin);border:.25rem solid var(--spinner-back-color);border-left:.25rem solid var(--spinner-fore-color);border-radius:50%;width:1.25rem;height:1.25rem;animation:spinner-donut-anim 1.2s linear infinite}progress.primary{--progress-fore-color:#1976d2}progress.secondary{--progress-fore-color:#d32f2f}progress.tertiary{--progress-fore-color:#308732}.spinner.primary{--spinner-fore-color:#1976d2}.spinner.secondary{--spinner-fore-color:#d32f2f}.spinner.tertiary{--spinner-fore-color:#308732}span[class^='icon-']{display:inline-block;height:1em;width:1em;vertical-align:-0.125em;background-size:contain;margin:0 calc(var(--universal-margin) / 4)}span[class^='icon-'].secondary{-webkit-filter:invert(25%);filter:invert(25%)}span[class^='icon-'].inverse{-webkit-filter:invert(100%);filter:invert(100%)}span.icon-alert{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fdfdfd' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12' y2='16'%3E%3C/line%3E%3C/svg%3E")}span.icon-bookmark{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fdfdfd' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z'%3E%3C/path%3E%3C/svg%3E")}span.icon-calendar{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fdfdfd' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E")}span.icon-credit{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fdfdfd' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='1' y='4' width='22' height='16' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='1' y1='10' x2='23' y2='10'%3E%3C/line%3E%3C/svg%3E")}span.icon-edit{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fdfdfd' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 14.66V20a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h5.34'%3E%3C/path%3E%3Cpolygon points='18 2 22 6 12 16 8 16 8 12 18 2'%3E%3C/polygon%3E%3C/svg%3E")}span.icon-link{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fdfdfd' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'%3E%3C/path%3E%3Cpolyline points='15 3 21 3 21 9'%3E%3C/polyline%3E%3Cline x1='10' y1='14' x2='21' y2='3'%3E%3C/line%3E%3C/svg%3E")}span.icon-help{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fdfdfd' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3'%3E%3C/path%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='17' x2='12' y2='17'%3E%3C/line%3E%3C/svg%3E")}span.icon-home{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fdfdfd' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'%3E%3C/path%3E%3Cpolyline points='9 22 9 12 15 12 15 22'%3E%3C/polyline%3E%3C/svg%3E")}span.icon-info{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fdfdfd' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='16' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='8' x2='12' y2='8'%3E%3C/line%3E%3C/svg%3E")}span.icon-lock{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fdfdfd' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2' ry='2'%3E%3C/rect%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'%3E%3C/path%3E%3C/svg%3E")}span.icon-mail{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fdfdfd' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z'%3E%3C/path%3E%3Cpolyline points='22,6 12,13 2,6'%3E%3C/polyline%3E%3C/svg%3E")}span.icon-location{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fdfdfd' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'%3E%3C/path%3E%3Ccircle cx='12' cy='10' r='3'%3E%3C/circle%3E%3C/svg%3E")}span.icon-phone{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fdfdfd' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'%3E%3C/path%3E%3C/svg%3E")}span.icon-rss{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fdfdfd' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 11a9 9 0 0 1 9 9'%3E%3C/path%3E%3Cpath d='M4 4a16 16 0 0 1 16 16'%3E%3C/path%3E%3Ccircle cx='5' cy='19' r='1'%3E%3C/circle%3E%3C/svg%3E")}span.icon-search{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fdfdfd' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E")}span.icon-settings{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fdfdfd' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'%3E%3C/circle%3E%3Cpath d='M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z'%3E%3C/path%3E%3C/svg%3E")}span.icon-share{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fdfdfd' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='18' cy='5' r='3'%3E%3C/circle%3E%3Ccircle cx='6' cy='12' r='3'%3E%3C/circle%3E%3Ccircle cx='18' cy='19' r='3'%3E%3C/circle%3E%3Cline x1='8.59' y1='13.51' x2='15.42' y2='17.49'%3E%3C/line%3E%3Cline x1='15.41' y1='6.51' x2='8.59' y2='10.49'%3E%3C/line%3E%3C/svg%3E")}span.icon-cart{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fdfdfd' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1'%3E%3C/circle%3E%3Ccircle cx='20' cy='21' r='1'%3E%3C/circle%3E%3Cpath d='M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6'%3E%3C/path%3E%3C/svg%3E")}span.icon-upload{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fdfdfd' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'%3E%3C/path%3E%3Cpolyline points='17 8 12 3 7 8'%3E%3C/polyline%3E%3Cline x1='12' y1='3' x2='12' y2='15'%3E%3C/line%3E%3C/svg%3E")}span.icon-user{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fdfdfd' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'%3E%3C/path%3E%3Ccircle cx='12' cy='7' r='4'%3E%3C/circle%3E%3C/svg%3E")}:root{--generic-border-color:rgba(0,0,0,0.3);--generic-box-shadow:0 .25rem .25rem 0 rgba(0,0,0,0.125),0 .125rem .125rem -.125rem rgba(0,0,0,0.125)}.hidden{display:none !important}.visually-hidden{position:absolute !important;width:1px !important;height:1px !important;margin:-1px !important;border:0 !important;padding:0 !important;clip:rect(0 0 0 0) !important;-webkit-clip-path:inset(100%) !important;clip-path:inset(100%) !important;overflow:hidden !important}.bordered{border:.0625rem solid var(--generic-border-color) !important}.rounded{border-radius:var(--universal-border-radius) !important}.circular{border-radius:50% !important}.shadowed{box-shadow:var(--generic-box-shadow) !important}.responsive-margin{margin:calc(var(--universal-margin) / 4) !important}@media screen and (min-width: 768px){.responsive-margin{margin:calc(var(--universal-margin) / 2) !important}}@media screen and (min-width: 1280px){.responsive-margin{margin:var(--universal-margin) !important}}.responsive-padding{padding:calc(var(--universal-padding) / 4) !important}@media screen and (min-width: 768px){.responsive-padding{padding:calc(var(--universal-padding) / 2) !important}}@media screen and (min-width: 1280px){.responsive-padding{padding:var(--universal-padding) !important}}@media screen and (max-width: 767px){.hidden-sm{display:none !important}}@media screen and (min-width: 768px) and (max-width: 1279px){.hidden-md{display:none !important}}@media screen and (min-width: 1280px){.hidden-lg{display:none !important}}@media screen and (max-width: 767px){.visually-hidden-sm{position:absolute !important;width:1px !important;height:1px !important;margin:-1px !important;border:0 !important;padding:0 !important;clip:rect(0 0 0 0) !important;-webkit-clip-path:inset(100%) !important;clip-path:inset(100%) !important;overflow:hidden !important}}@media screen and (min-width: 768px) and (max-width: 1279px){.visually-hidden-md{position:absolute !important;width:1px !important;height:1px !important;margin:-1px !important;border:0 !important;padding:0 !important;clip:rect(0 0 0 0) !important;-webkit-clip-path:inset(100%) !important;clip-path:inset(100%) !important;overflow:hidden !important}}@media screen and (min-width: 1280px){.visually-hidden-lg{position:absolute !important;width:1px !important;height:1px !important;margin:-1px !important;border:0 !important;padding:0 !important;clip:rect(0 0 0 0) !important;-webkit-clip-path:inset(100%) !important;clip-path:inset(100%) !important;overflow:hidden !important}} diff --git a/dist/mini-default.css b/dist/mini-default.css index a4daab3..4fa6e5a 100644 --- a/dist/mini-default.css +++ b/dist/mini-default.css @@ -3,7 +3,7 @@ Flavor name: Default (mini-default) Author: Angelos Chalaris (chalarangelo@gmail.com) Maintainers: Angelos Chalaris - mini.css version: v3.0.0-alpha.3 + mini.css version: v3.0.0 */ /* Browsers resets and base typography. diff --git a/dist/mini-nord.css b/dist/mini-nord.css index f27c9bc..9f0d7fb 100644 --- a/dist/mini-nord.css +++ b/dist/mini-nord.css @@ -1,2414 +1,2168 @@ -@charset "UTF-8"; +@charset "UTF-8"; /* Flavor name: Nord (mini-nord) Author: tphecca (https://github.com/tphecca) Maintainers: tphecca - mini.css version: v2.3.7 -*/ + mini.css version: v3.0.0 +*/ +/* + Browsers resets and base typography. +*/ +/* Core module CSS variable definitions */ +:root { + --fore-color: #2e3440; + --secondary-fore-color: #3b4252; + --back-color: #eceff4; + --secondary-back-color: #e5e9f0; + --blockquote-color: #d08770; + --pre-color: #b48ead; + --border-color: #d8dee9; + --secondary-border-color: #e5e9f0; + --heading-ratio: 1.19; + --universal-margin: 0.5rem; + --universal-padding: 0.5rem; + --universal-border-radius: 0.125rem; + --a-link-color: #88c0d0; + --a-visited-color: #5e81ac; +} + +html { + font-size: 16px; +} + +a, b, del, em, i, ins, q, span, strong, u { + font-size: 1em; +} + +html, * { + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, sans-serif; + line-height: 1.5; + -webkit-text-size-adjust: 100%; +} + +* { + font-size: 1rem; +} + +body { + margin: 0; + color: var(--fore-color); + background: var(--back-color); +} + +details { + display: block; +} + +summary { + display: list-item; +} + +abbr[title] { + border-bottom: none; + text-decoration: underline dotted; +} + +input { + overflow: visible; +} + +img { + max-width: 100%; + height: auto; +} + +h1, h2, h3, h4, h5, h6 { + line-height: 1.2; + margin: calc(1.5 * var(--universal-margin)) var(--universal-margin); + font-weight: 500; +} + +h1 small, h2 small, h3 small, h4 small, h5 small, h6 small { + color: var(--secondary-fore-color); + display: block; + margin-top: -0.25rem; +} + +h1 { + font-size: calc(1rem * var(--heading-ratio) * var(--heading-ratio) * var(--heading-ratio) * var(--heading-ratio)); +} + +h2 { + font-size: calc(1rem * var(--heading-ratio) * var(--heading-ratio) * var(--heading-ratio)); +} + +h3 { + font-size: calc(1rem * var(--heading-ratio) * var(--heading-ratio)); +} + +h4 { + font-size: calc(1rem * var(--heading-ratio)); +} + +h5 { + font-size: 1rem; +} + +h6 { + font-size: calc(1rem / var(--heading-ratio)); +} + +p { + margin: var(--universal-margin); +} + +ol, ul { + margin: var(--universal-margin); + padding-left: calc(2 * var(--universal-margin)); +} + +b, strong { + font-weight: 700; +} + +hr { + box-sizing: content-box; + border: 0; + line-height: 1.25em; + margin: var(--universal-margin); + height: 0.0625rem; + background: linear-gradient(to right, transparent, var(--border-color) 20%, var(--border-color) 80%, transparent); +} + +blockquote { + display: block; + position: relative; + font-style: italic; + color: var(--secondary-fore-color); + margin: var(--universal-margin); + padding: calc(3 * var(--universal-padding)); + border: 0.0625rem solid var(--secondary-border-color); + border-left: 0.375rem solid var(--blockquote-color); + border-radius: 0 var(--universal-border-radius) var(--universal-border-radius) 0; +} + +blockquote:before { + position: absolute; + top: calc(0rem - var(--universal-padding)); + left: 0; + font-family: sans-serif; + font-size: 3rem; + font-weight: 700; + content: "\201c"; + color: var(--blockquote-color); +} + +blockquote[cite]:after { + font-style: normal; + font-size: 0.75em; + font-weight: 700; + content: "\a— " attr(cite); + white-space: pre; +} + +code, kbd, pre, samp { + font-family: Menlo, Consolas, monospace; + font-size: 0.85em; +} + +code { + background: var(--secondary-back-color); + border-radius: var(--universal-border-radius); + padding: calc(var(--universal-padding) / 4) calc(var(--universal-padding) / 2); +} + +kbd { + background: var(--fore-color); + color: var(--back-color); + border-radius: var(--universal-border-radius); + padding: calc(var(--universal-padding) / 4) calc(var(--universal-padding) / 2); +} + +pre { + overflow: auto; + background: var(--secondary-back-color); + padding: calc(1.5 * var(--universal-padding)); + margin: var(--universal-margin); + border: 0.0625rem solid var(--secondary-border-color); + border-left: 0.25rem solid var(--pre-color); + border-radius: 0 var(--universal-border-radius) var(--universal-border-radius) 0; +} + +sup, sub, code, kbd { + line-height: 0; + position: relative; + vertical-align: baseline; +} + +small, sup, sub, figcaption { + font-size: 0.75em; +} + +sup { + top: -0.5em; +} + +sub { + bottom: -0.25em; +} + +figure { + margin: var(--universal-margin); +} + +figcaption { + color: var(--secondary-fore-color); +} + +a { + text-decoration: none; +} + +a:link { + color: var(--a-link-color); +} + +a:visited { + color: var(--a-visited-color); +} + +a:hover, a:focus { + text-decoration: underline; +} + +/* + Definitions for the grid system, cards and containers. +*/ +.container { + margin: 0 auto; + padding: 0 calc(1.5 * var(--universal-padding)); +} + +.row { + box-sizing: border-box; + display: flex; + flex: 0 1 auto; + flex-flow: row wrap; +} + +.col-sm, +[class^='col-sm-'], +[class^='col-sm-offset-'], +.row[class*='cols-sm-'] > * { + box-sizing: border-box; + flex: 0 0 auto; + padding: 0 calc(var(--universal-padding) / 2); +} + +.col-sm, +.row.cols-sm > * { + max-width: 100%; + flex-grow: 1; + flex-basis: 0; +} + +.col-sm-1, +.row.cols-sm-1 > * { + max-width: 8.33333%; + flex-basis: 8.33333%; +} + +.col-sm-offset-0 { + margin-left: 0; +} + +.col-sm-2, +.row.cols-sm-2 > * { + max-width: 16.66667%; + flex-basis: 16.66667%; +} + +.col-sm-offset-1 { + margin-left: 8.33333%; +} + +.col-sm-3, +.row.cols-sm-3 > * { + max-width: 25%; + flex-basis: 25%; +} + +.col-sm-offset-2 { + margin-left: 16.66667%; +} + +.col-sm-4, +.row.cols-sm-4 > * { + max-width: 33.33333%; + flex-basis: 33.33333%; +} + +.col-sm-offset-3 { + margin-left: 25%; +} + +.col-sm-5, +.row.cols-sm-5 > * { + max-width: 41.66667%; + flex-basis: 41.66667%; +} + +.col-sm-offset-4 { + margin-left: 33.33333%; +} + +.col-sm-6, +.row.cols-sm-6 > * { + max-width: 50%; + flex-basis: 50%; +} + +.col-sm-offset-5 { + margin-left: 41.66667%; +} + +.col-sm-7, +.row.cols-sm-7 > * { + max-width: 58.33333%; + flex-basis: 58.33333%; +} + +.col-sm-offset-6 { + margin-left: 50%; +} + +.col-sm-8, +.row.cols-sm-8 > * { + max-width: 66.66667%; + flex-basis: 66.66667%; +} + +.col-sm-offset-7 { + margin-left: 58.33333%; +} + +.col-sm-9, +.row.cols-sm-9 > * { + max-width: 75%; + flex-basis: 75%; +} + +.col-sm-offset-8 { + margin-left: 66.66667%; +} + +.col-sm-10, +.row.cols-sm-10 > * { + max-width: 83.33333%; + flex-basis: 83.33333%; +} + +.col-sm-offset-9 { + margin-left: 75%; +} + +.col-sm-11, +.row.cols-sm-11 > * { + max-width: 91.66667%; + flex-basis: 91.66667%; +} + +.col-sm-offset-10 { + margin-left: 83.33333%; +} + +.col-sm-12, +.row.cols-sm-12 > * { + max-width: 100%; + flex-basis: 100%; +} + +.col-sm-offset-11 { + margin-left: 91.66667%; +} + +.col-sm-normal { + order: initial; +} + +.col-sm-first { + order: -999; +} + +.col-sm-last { + order: 999; +} + +@media screen and (min-width: 768px) { + .col-md, + [class^='col-md-'], + [class^='col-md-offset-'], + .row[class*='cols-md-'] > * { + box-sizing: border-box; + flex: 0 0 auto; + padding: 0 calc(var(--universal-padding) / 2); + } + .col-md, + .row.cols-md > * { + max-width: 100%; + flex-grow: 1; + flex-basis: 0; + } + .col-md-1, + .row.cols-md-1 > * { + max-width: 8.33333%; + flex-basis: 8.33333%; + } + .col-md-offset-0 { + margin-left: 0; + } + .col-md-2, + .row.cols-md-2 > * { + max-width: 16.66667%; + flex-basis: 16.66667%; + } + .col-md-offset-1 { + margin-left: 8.33333%; + } + .col-md-3, + .row.cols-md-3 > * { + max-width: 25%; + flex-basis: 25%; + } + .col-md-offset-2 { + margin-left: 16.66667%; + } + .col-md-4, + .row.cols-md-4 > * { + max-width: 33.33333%; + flex-basis: 33.33333%; + } + .col-md-offset-3 { + margin-left: 25%; + } + .col-md-5, + .row.cols-md-5 > * { + max-width: 41.66667%; + flex-basis: 41.66667%; + } + .col-md-offset-4 { + margin-left: 33.33333%; + } + .col-md-6, + .row.cols-md-6 > * { + max-width: 50%; + flex-basis: 50%; + } + .col-md-offset-5 { + margin-left: 41.66667%; + } + .col-md-7, + .row.cols-md-7 > * { + max-width: 58.33333%; + flex-basis: 58.33333%; + } + .col-md-offset-6 { + margin-left: 50%; + } + .col-md-8, + .row.cols-md-8 > * { + max-width: 66.66667%; + flex-basis: 66.66667%; + } + .col-md-offset-7 { + margin-left: 58.33333%; + } + .col-md-9, + .row.cols-md-9 > * { + max-width: 75%; + flex-basis: 75%; + } + .col-md-offset-8 { + margin-left: 66.66667%; + } + .col-md-10, + .row.cols-md-10 > * { + max-width: 83.33333%; + flex-basis: 83.33333%; + } + .col-md-offset-9 { + margin-left: 75%; + } + .col-md-11, + .row.cols-md-11 > * { + max-width: 91.66667%; + flex-basis: 91.66667%; + } + .col-md-offset-10 { + margin-left: 83.33333%; + } + .col-md-12, + .row.cols-md-12 > * { + max-width: 100%; + flex-basis: 100%; + } + .col-md-offset-11 { + margin-left: 91.66667%; + } + .col-md-normal { + order: initial; + } + .col-md-first { + order: -999; + } + .col-md-last { + order: 999; + } +} + +@media screen and (min-width: 1280px) { + .col-lg, + [class^='col-lg-'], + [class^='col-lg-offset-'], + .row[class*='cols-lg-'] > * { + box-sizing: border-box; + flex: 0 0 auto; + padding: 0 calc(var(--universal-padding) / 2); + } + .col-lg, + .row.cols-lg > * { + max-width: 100%; + flex-grow: 1; + flex-basis: 0; + } + .col-lg-1, + .row.cols-lg-1 > * { + max-width: 8.33333%; + flex-basis: 8.33333%; + } + .col-lg-offset-0 { + margin-left: 0; + } + .col-lg-2, + .row.cols-lg-2 > * { + max-width: 16.66667%; + flex-basis: 16.66667%; + } + .col-lg-offset-1 { + margin-left: 8.33333%; + } + .col-lg-3, + .row.cols-lg-3 > * { + max-width: 25%; + flex-basis: 25%; + } + .col-lg-offset-2 { + margin-left: 16.66667%; + } + .col-lg-4, + .row.cols-lg-4 > * { + max-width: 33.33333%; + flex-basis: 33.33333%; + } + .col-lg-offset-3 { + margin-left: 25%; + } + .col-lg-5, + .row.cols-lg-5 > * { + max-width: 41.66667%; + flex-basis: 41.66667%; + } + .col-lg-offset-4 { + margin-left: 33.33333%; + } + .col-lg-6, + .row.cols-lg-6 > * { + max-width: 50%; + flex-basis: 50%; + } + .col-lg-offset-5 { + margin-left: 41.66667%; + } + .col-lg-7, + .row.cols-lg-7 > * { + max-width: 58.33333%; + flex-basis: 58.33333%; + } + .col-lg-offset-6 { + margin-left: 50%; + } + .col-lg-8, + .row.cols-lg-8 > * { + max-width: 66.66667%; + flex-basis: 66.66667%; + } + .col-lg-offset-7 { + margin-left: 58.33333%; + } + .col-lg-9, + .row.cols-lg-9 > * { + max-width: 75%; + flex-basis: 75%; + } + .col-lg-offset-8 { + margin-left: 66.66667%; + } + .col-lg-10, + .row.cols-lg-10 > * { + max-width: 83.33333%; + flex-basis: 83.33333%; + } + .col-lg-offset-9 { + margin-left: 75%; + } + .col-lg-11, + .row.cols-lg-11 > * { + max-width: 91.66667%; + flex-basis: 91.66667%; + } + .col-lg-offset-10 { + margin-left: 83.33333%; + } + .col-lg-12, + .row.cols-lg-12 > * { + max-width: 100%; + flex-basis: 100%; + } + .col-lg-offset-11 { + margin-left: 91.66667%; + } + .col-lg-normal { + order: initial; + } + .col-lg-first { + order: -999; + } + .col-lg-last { + order: 999; + } +} + +/* Card component CSS variable definitions */ +:root { + --card-back-color: #eceff4; + --card-fore-color: #2e3440; + --card-border-color: #e5e9f0; +} + +.card { + display: flex; + flex-direction: column; + justify-content: space-between; + align-self: center; + position: relative; + width: 100%; + background: var(--card-back-color); + color: var(--card-fore-color); + border: 0.0625rem solid var(--card-border-color); + border-radius: var(--universal-border-radius); + margin: var(--universal-margin); + overflow: hidden; +} + +@media screen and (min-width: 320px) { + .card { + max-width: 320px; + } +} + +.card > .section { + background: var(--card-back-color); + color: var(--card-fore-color); + box-sizing: border-box; + margin: 0; + border: 0; + border-radius: 0; + border-bottom: 0.0625rem solid var(--card-border-color); + padding: var(--universal-padding); + width: 100%; +} + +.card > .section.media { + height: 200px; + padding: 0; + -o-object-fit: cover; + object-fit: cover; +} + +.card > .section:last-child { + border-bottom: 0; +} + /* - Browsers resets and base typography. -*/ -html { - font-size: 16px; -} - -html, * { - font-family: -apple-system, BlinkMacSystemFont,"Segoe UI","Roboto", "Droid Sans","Helvetica Neue", Helvetica, Arial, sans-serif; - line-height: 1.5; - -webkit-text-size-adjust: 100%; -} - -* { - font-size: 1em; -} - -body { - margin: 0; - color: #2E3440; - background: #ECEFF4; -} - -article, aside, section, figcaption, figure, main, details, menu { - display: block; -} - -summary { - display: list-item; -} - -abbr[title] { - border-bottom: none; - text-decoration: underline; -} - -audio, video { - display: inline-block; -} - -svg:not(:root) { - overflow: hidden; -} - -input { - overflow: visible; -} - -img { - max-width: 100%; - height: auto; -} - -dfn { - font-style: italic; -} - -h1, h2, h3, h4, h5, h6 { - line-height: 1.2em; - margin: 12px 8px; - font-weight: 500; -} - -h1 small, h2 small, h3 small, h4 small, h5 small, h6 small { - color: #424242; - display: block; - margin-top: -4px; -} - -h1 { - font-size: 2em; -} - -h2 { - font-size: 1.5em; -} - -h3 { - font-size: 1.25em; -} - -h4 { - font-size: 1.1em; -} - -h5 { - font-size: 1em; -} - -h6 { - font-size: 0.85em; -} - -p { - margin: 1px 8px; -} - -ol, ul { - margin: 1px 8px 10px; - padding-left: 28px; -} - -b, strong { - font-weight: 700; -} - -hr { - box-sizing: content-box; - border: 0; - overflow: visible; - line-height: 1.25em; - margin: 8px; - height: 0.0625rem; - background: linear-gradient(to right, #ECEFF4, #D8DEE9, #ECEFF4); -} - -blockquote { - display: block; - position: relative; - font-style: italic; - background: #D8DEE9; - margin: 8px 10px; - padding: 6px 10px 24px; - border-left: 3px solid #616161; - border-radius: 0 2px 2px 0; - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.15); -} - -blockquote:after { - position: absolute; - font-style: normal; - font-size: 0.85em; - color: #616161; - left: 10px; - bottom: 0; - content: "— " attr(cite); -} - -code, kbd, pre, samp { - font-family: monospace, monospace; -} - -code { - border-radius: 2px; - background: #E5E9F0; - padding: 2px 4px; - box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(0, 0, 0, 0.15); -} - -pre { - overflow: auto; - border-radius: 0 2px 2px 0; - background: #E5E9F0; - padding: 12px; - margin: 8px 10px; - border-left: 3px solid #5E81AC; - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.15); -} - -kbd { - border-radius: 2px; - background: #2E3440; - color: #ECEFF4; - padding: 2px 4px; - box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(0, 0, 0, 0.15); -} - -small, sup, sub { - font-size: 75%; -} - -sup { - top: -8px; -} - -sub { - bottom: -4px; -} - -sup, sub { - line-height: 0; - position: relative; - vertical-align: baseline; -} - -a { - color: #88C0D0; - text-decoration: underline; - opacity: 1; - transition: opacity 0.3s; -} - -a:visited { - color: #5E81AC; -} - -a:hover, a:focus { - opacity: 0.75; -} - -figcaption { - font-size: 80%; - color: #424242; -} - + Custom elements for card elements. +*/ +@media screen and (min-width: 240px) { + .card.small { + max-width: 240px; + } +} + +@media screen and (min-width: 480px) { + .card.large { + max-width: 480px; + } +} + +.card.fluid { + max-width: 100%; + width: auto; +} + +.card.warning { + --card-back-color: #ebcb8b; + --card-border-color: #d08770; +} + +.card.error { + --card-back-color: #bf616a; + --card-border-color: #434c5e; +} + +.card > .section.dark { + --card-back-color: #d8dee9; +} + +.card > .section.double-padded { + padding: calc(1.5 * var(--universal-padding)); +} + +/* + Definitions for forms and input elements. +*/ +/* Input_control module CSS variable definitions */ +:root { + --form-back-color: #e5e9f0; + --form-fore-color: #2e3440; + --form-border-color: #e5e9f0; + --input-back-color: #eceff4; + --input-fore-color: #2e3440; + --input-border-color: #e5e9f0; + --input-focus-color: #88c0d0; + --input-invalid-color: #bf616a; + --button-back-color: #e5e9f0; + --button-hover-back-color: #d8dee9; + --button-fore-color: #2e3440; + --button-border-color: transparent; + --button-hover-border-color: transparent; + --button-group-border-color: rgba(124, 124, 124, 0.54); +} + +form { + background: var(--form-back-color); + color: var(--form-fore-color); + border: 0.0625rem solid var(--form-border-color); + border-radius: var(--universal-border-radius); + margin: var(--universal-margin); + padding: calc(2 * var(--universal-padding)) var(--universal-padding); +} + +fieldset { + border: 0.0625rem solid var(--form-border-color); + border-radius: var(--universal-border-radius); + margin: calc(var(--universal-margin) / 4); + padding: var(--universal-padding); +} + +legend { + box-sizing: border-box; + display: table; + max-width: 100%; + white-space: normal; + font-weight: 700; + padding: calc(var(--universal-padding) / 2); +} + +label { + padding: calc(var(--universal-padding) / 2) var(--universal-padding); +} + +.input-group { + display: inline-block; +} + +.input-group.fluid { + display: flex; + align-items: center; + justify-content: center; +} + +.input-group.fluid > input { + max-width: 100%; + flex-grow: 1; + flex-basis: 0px; +} + +@media screen and (max-width: 767px) { + .input-group.fluid { + align-items: stretch; + flex-direction: column; + } +} + +.input-group.vertical { + display: flex; + align-items: stretch; + flex-direction: column; +} + +.input-group.vertical > input { + max-width: 100%; + flex-grow: 1; + flex-basis: 0px; +} + +[type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { + height: auto; +} + +[type="search"] { + -webkit-appearance: textfield; + outline-offset: -2px; +} + +[type="search"]::-webkit-search-cancel-button, +[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; +} + +input:not([type]), [type="text"], [type="email"], [type="number"], [type="search"], +[type="password"], [type="url"], [type="tel"], [type="checkbox"], [type="radio"], textarea, select { + box-sizing: border-box; + background: var(--input-back-color); + color: var(--input-fore-color); + border: 0.0625rem solid var(--input-border-color); + border-radius: var(--universal-border-radius); + margin: calc(var(--universal-margin) / 2); + padding: var(--universal-padding) calc(1.5 * var(--universal-padding)); +} + +input:not([type="button"]):not([type="submit"]):not([type="reset"]):hover, input:not([type="button"]):not([type="submit"]):not([type="reset"]):focus, textarea:hover, textarea:focus, select:hover, select:focus { + border-color: var(--input-focus-color); + box-shadow: none; +} + +input:not([type="button"]):not([type="submit"]):not([type="reset"]):invalid, input:not([type="button"]):not([type="submit"]):not([type="reset"]):focus:invalid, textarea:invalid, textarea:focus:invalid, select:invalid, select:focus:invalid { + border-color: var(--input-invalid-color); + box-shadow: none; +} + +input:not([type="button"]):not([type="submit"]):not([type="reset"])[readonly], textarea[readonly], select[readonly] { + background: var(--secondary-back-color); +} + +select { + max-width: 100%; +} + +option { + overflow: hidden; + text-overflow: ellipsis; +} + +[type="checkbox"], [type="radio"] { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + position: relative; + height: calc(1rem + var(--universal-padding) / 2); + width: calc(1rem + var(--universal-padding) / 2); + vertical-align: text-bottom; + padding: 0; + flex-basis: calc(1rem + var(--universal-padding) / 2) !important; + flex-grow: 0 !important; +} + +[type="checkbox"]:checked:before, [type="radio"]:checked:before { + position: absolute; +} + +[type="checkbox"]:checked:before { + content: '\2713'; + font-family: sans-serif; + font-size: calc(1rem + var(--universal-padding) / 2); + top: calc(0rem - var(--universal-padding)); + left: calc(var(--universal-padding) / 4); +} + +[type="radio"] { + border-radius: 100%; +} + +[type="radio"]:checked:before { + border-radius: 100%; + content: ''; + top: calc(0.0625rem + var(--universal-padding) / 2); + left: calc(0.0625rem + var(--universal-padding) / 2); + background: var(--input-fore-color); + width: 0.5rem; + height: 0.5rem; +} + +:placeholder-shown { + color: var(--input-fore-color); +} + +::-ms-placeholder { + color: var(--input-fore-color); + opacity: 0.54; +} + +button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { + border-style: none; + padding: 0; +} + +button, html [type="button"], [type="reset"], [type="submit"] { + -webkit-appearance: button; +} + +button { + overflow: visible; + text-transform: none; +} + +button, [type="button"], [type="submit"], [type="reset"], +a.button, label.button, .button, +a[role="button"], label[role="button"], [role="button"] { + display: inline-block; + background: var(--button-back-color); + color: var(--button-fore-color); + border: 0.0625rem solid var(--button-border-color); + border-radius: var(--universal-border-radius); + padding: var(--universal-padding) calc(1.5 * var(--universal-padding)); + margin: var(--universal-margin); + text-decoration: none; + cursor: pointer; + transition: background 0.3s; +} + +button:hover, button:focus, [type="button"]:hover, [type="button"]:focus, [type="submit"]:hover, [type="submit"]:focus, [type="reset"]:hover, [type="reset"]:focus, +a.button:hover, +a.button:focus, label.button:hover, label.button:focus, .button:hover, .button:focus, +a[role="button"]:hover, +a[role="button"]:focus, label[role="button"]:hover, label[role="button"]:focus, [role="button"]:hover, [role="button"]:focus { + background: var(--button-hover-back-color); + border-color: var(--button-hover-border-color); +} + +input:disabled, input[disabled], textarea:disabled, textarea[disabled], select:disabled, select[disabled], button:disabled, button[disabled], .button:disabled, .button[disabled], [role="button"]:disabled, [role="button"][disabled] { + cursor: not-allowed; + opacity: 0.75; +} + +.button-group { + display: flex; + border: 0.0625rem solid var(--button-group-border-color); + border-radius: var(--universal-border-radius); + margin: var(--universal-margin); +} + +.button-group > button, .button-group [type="button"], .button-group > [type="submit"], .button-group > [type="reset"], +.button-group > .button, .button-group > [role="button"] { + margin: 0; + max-width: 100%; + flex: 1 1 auto; + text-align: center; + border: 0; + border-radius: 0; + box-shadow: none; +} + +.button-group > :not(:first-child) { + border-left: 0.0625rem solid var(--button-group-border-color); +} + +@media screen and (max-width: 767px) { + .button-group { + flex-direction: column; + } + .button-group > :not(:first-child) { + border: 0; + border-top: 0.0625rem solid var(--button-group-border-color); + } +} + /* - Definitions for the grid system. -*/ -.container { - margin: 0 auto; - padding: 0 10px; -} - -.row { - box-sizing: border-box; - display: -webkit-box; - -webkit-box-flex: 0; - -webkit-box-orient: horizontal; - -webkit-box-direction: normal; - display: -webkit-flex; - display: flex; - -webkit-flex: 0 1 auto; - flex: 0 1 auto; - -webkit-flex-flow: row wrap; - flex-flow: row wrap; -} - -.col-sm, -[class^='col-sm-'], -[class^='col-sm-offset-'], -.row[class*='cols-sm-'] > * { - box-sizing: border-box; - -webkit-box-flex: 0; - -webkit-flex: 0 0 auto; - flex: 0 0 auto; - padding: 0 4px; -} - -.col-sm, -.row.cols-sm > * { - -webkit-box-flex: 1; - max-width: 100%; - -webkit-flex-grow: 1; - flex-grow: 1; - -webkit-flex-basis: 0; - flex-basis: 0; -} - -.col-sm-1, -.row.cols-sm-1 > * { - max-width: 8.33333%; - -webkit-flex-basis: 8.33333%; - flex-basis: 8.33333%; -} - -.col-sm-2, -.row.cols-sm-2 > * { - max-width: 16.66667%; - -webkit-flex-basis: 16.66667%; - flex-basis: 16.66667%; -} - -.col-sm-3, -.row.cols-sm-3 > * { - max-width: 25%; - -webkit-flex-basis: 25%; - flex-basis: 25%; -} - -.col-sm-4, -.row.cols-sm-4 > * { - max-width: 33.33333%; - -webkit-flex-basis: 33.33333%; - flex-basis: 33.33333%; -} - -.col-sm-5, -.row.cols-sm-5 > * { - max-width: 41.66667%; - -webkit-flex-basis: 41.66667%; - flex-basis: 41.66667%; -} - -.col-sm-6, -.row.cols-sm-6 > * { - max-width: 50%; - -webkit-flex-basis: 50%; - flex-basis: 50%; -} - -.col-sm-7, -.row.cols-sm-7 > * { - max-width: 58.33333%; - -webkit-flex-basis: 58.33333%; - flex-basis: 58.33333%; -} - -.col-sm-8, -.row.cols-sm-8 > * { - max-width: 66.66667%; - -webkit-flex-basis: 66.66667%; - flex-basis: 66.66667%; -} - -.col-sm-9, -.row.cols-sm-9 > * { - max-width: 75%; - -webkit-flex-basis: 75%; - flex-basis: 75%; -} - -.col-sm-10, -.row.cols-sm-10 > * { - max-width: 83.33333%; - -webkit-flex-basis: 83.33333%; - flex-basis: 83.33333%; -} - -.col-sm-11, -.row.cols-sm-11 > * { - max-width: 91.66667%; - -webkit-flex-basis: 91.66667%; - flex-basis: 91.66667%; -} - -.col-sm-12, -.row.cols-sm-12 > * { - max-width: 100%; - -webkit-flex-basis: 100%; - flex-basis: 100%; -} - -.col-sm-offset-0 { - margin-left: 0; -} - -.col-sm-offset-1 { - margin-left: 8.33333%; -} - -.col-sm-offset-2 { - margin-left: 16.66667%; -} - -.col-sm-offset-3 { - margin-left: 25%; -} - -.col-sm-offset-4 { - margin-left: 33.33333%; -} - -.col-sm-offset-5 { - margin-left: 41.66667%; -} - -.col-sm-offset-6 { - margin-left: 50%; -} - -.col-sm-offset-7 { - margin-left: 58.33333%; -} - -.col-sm-offset-8 { - margin-left: 66.66667%; -} - -.col-sm-offset-9 { - margin-left: 75%; -} - -.col-sm-offset-10 { - margin-left: 83.33333%; -} - -.col-sm-offset-11 { - margin-left: 91.66667%; -} - -.col-sm-normal { - -webkit-order: initial; - order: initial; -} - -.col-sm-first { - -webkit-order: -999; - order: -999; -} - -.col-sm-last { - -webkit-order: 999; - order: 999; -} - -@media screen and (min-width: 768px) { - .col-md, - [class^='col-md-'], - [class^='col-md-offset-'], .row[class*='cols-md-'] > * { - box-sizing: border-box; - -webkit-box-flex: 0; - -webkit-flex: 0 0 auto; - flex: 0 0 auto; - padding: 0 4px; - } - .col-md, - .row.cols-md > * { - -webkit-box-flex: 1; - max-width: 100%; - -webkit-flex-grow: 1; - flex-grow: 1; - -webkit-flex-basis: 0; - flex-basis: 0; - } - .col-md-1, - .row.cols-md-1 > * { - max-width: 8.33333%; - -webkit-flex-basis: 8.33333%; - flex-basis: 8.33333%; - } - .col-md-2, - .row.cols-md-2 > * { - max-width: 16.66667%; - -webkit-flex-basis: 16.66667%; - flex-basis: 16.66667%; - } - .col-md-3, - .row.cols-md-3 > * { - max-width: 25%; - -webkit-flex-basis: 25%; - flex-basis: 25%; - } - .col-md-4, - .row.cols-md-4 > * { - max-width: 33.33333%; - -webkit-flex-basis: 33.33333%; - flex-basis: 33.33333%; - } - .col-md-5, - .row.cols-md-5 > * { - max-width: 41.66667%; - -webkit-flex-basis: 41.66667%; - flex-basis: 41.66667%; - } - .col-md-6, - .row.cols-md-6 > * { - max-width: 50%; - -webkit-flex-basis: 50%; - flex-basis: 50%; - } - .col-md-7, - .row.cols-md-7 > * { - max-width: 58.33333%; - -webkit-flex-basis: 58.33333%; - flex-basis: 58.33333%; - } - .col-md-8, - .row.cols-md-8 > * { - max-width: 66.66667%; - -webkit-flex-basis: 66.66667%; - flex-basis: 66.66667%; - } - .col-md-9, - .row.cols-md-9 > * { - max-width: 75%; - -webkit-flex-basis: 75%; - flex-basis: 75%; - } - .col-md-10, - .row.cols-md-10 > * { - max-width: 83.33333%; - -webkit-flex-basis: 83.33333%; - flex-basis: 83.33333%; - } - .col-md-11, - .row.cols-md-11 > * { - max-width: 91.66667%; - -webkit-flex-basis: 91.66667%; - flex-basis: 91.66667%; - } - .col-md-12, - .row.cols-md-12 > * { - max-width: 100%; - -webkit-flex-basis: 100%; - flex-basis: 100%; - } - .col-md-offset-0 { - margin-left: 0; - } - .col-md-offset-1 { - margin-left: 8.33333%; - } - .col-md-offset-2 { - margin-left: 16.66667%; - } - .col-md-offset-3 { - margin-left: 25%; - } - .col-md-offset-4 { - margin-left: 33.33333%; - } - .col-md-offset-5 { - margin-left: 41.66667%; - } - .col-md-offset-6 { - margin-left: 50%; - } - .col-md-offset-7 { - margin-left: 58.33333%; - } - .col-md-offset-8 { - margin-left: 66.66667%; - } - .col-md-offset-9 { - margin-left: 75%; - } - .col-md-offset-10 { - margin-left: 83.33333%; - } - .col-md-offset-11 { - margin-left: 91.66667%; - } - .col-md-normal { - -webkit-order: initial; - order: initial; - } - .col-md-first { - -webkit-order: -999; - order: -999; - } - .col-md-last { - -webkit-order: 999; - order: 999; - } -} - -@media screen and (min-width: 1280px) { - .col-lg, - [class^='col-lg-'], - [class^='col-lg-offset-'], - .row[class*='cols-lg-'] > * { - box-sizing: border-box; - -webkit-box-flex: 0; - -webkit-flex: 0 0 auto; - flex: 0 0 auto; - padding: 0 4px; - } - .col-lg, - .row.cols-lg > * { - -webkit-box-flex: 1; - max-width: 100%; - -webkit-flex-grow: 1; - flex-grow: 1; - -webkit-flex-basis: 0; - flex-basis: 0; - } - .col-lg-1, - .row.cols-lg-1 > * { - max-width: 8.33333%; - -webkit-flex-basis: 8.33333%; - flex-basis: 8.33333%; - } - .col-lg-2, - .row.cols-lg-2 > * { - max-width: 16.66667%; - -webkit-flex-basis: 16.66667%; - flex-basis: 16.66667%; - } - .col-lg-3, - .row.cols-lg-3 > * { - max-width: 25%; - -webkit-flex-basis: 25%; - flex-basis: 25%; - } - .col-lg-4, - .row.cols-lg-4 > * { - max-width: 33.33333%; - -webkit-flex-basis: 33.33333%; - flex-basis: 33.33333%; - } - .col-lg-5, - .row.cols-lg-5 > * { - max-width: 41.66667%; - -webkit-flex-basis: 41.66667%; - flex-basis: 41.66667%; - } - .col-lg-6, - .row.cols-lg-6 > * { - max-width: 50%; - -webkit-flex-basis: 50%; - flex-basis: 50%; - } - .col-lg-7, - .row.cols-lg-7 > * { - max-width: 58.33333%; - -webkit-flex-basis: 58.33333%; - flex-basis: 58.33333%; - } - .col-lg-8, - .row.cols-lg-8 > * { - max-width: 66.66667%; - -webkit-flex-basis: 66.66667%; - flex-basis: 66.66667%; - } - .col-lg-9, - .row.cols-lg-9 > * { - max-width: 75%; - -webkit-flex-basis: 75%; - flex-basis: 75%; - } - .col-lg-10, - .row.cols-lg-10 > * { - max-width: 83.33333%; - -webkit-flex-basis: 83.33333%; - flex-basis: 83.33333%; - } - .col-lg-11, - .row.cols-lg-11 > * { - max-width: 91.66667%; - -webkit-flex-basis: 91.66667%; - flex-basis: 91.66667%; - } - .col-lg-12, - .row.cols-lg-12 > * { - max-width: 100%; - -webkit-flex-basis: 100%; - flex-basis: 100%; - } - .col-lg-offset-0 { - margin-left: 0; - } - .col-lg-offset-1 { - margin-left: 8.33333%; - } - .col-lg-offset-2 { - margin-left: 16.66667%; - } - .col-lg-offset-3 { - margin-left: 25%; - } - .col-lg-offset-4 { - margin-left: 33.33333%; - } - .col-lg-offset-5 { - margin-left: 41.66667%; - } - .col-lg-offset-6 { - margin-left: 50%; - } - .col-lg-offset-7 { - margin-left: 58.33333%; - } - .col-lg-offset-8 { - margin-left: 66.66667%; - } - .col-lg-offset-9 { - margin-left: 75%; - } - .col-lg-offset-10 { - margin-left: 83.33333%; - } - .col-lg-offset-11 { - margin-left: 91.66667%; - } - .col-lg-normal { - -webkit-order: initial; - order: initial; - } - .col-lg-first { - -webkit-order: -999; - order: -999; - } - .col-lg-last { - -webkit-order: 999; - order: 999; - } -} - + Custom elements for forms and input elements. +*/ +button.primary, [type="button"].primary, [type="submit"].primary, [type="reset"].primary, .button.primary, [role="button"].primary { + --button-back-color: #5e81ac; + --button-fore-color: #eceff4; +} + +button.primary:hover, button.primary:focus, [type="button"].primary:hover, [type="button"].primary:focus, [type="submit"].primary:hover, [type="submit"].primary:focus, [type="reset"].primary:hover, [type="reset"].primary:focus, .button.primary:hover, .button.primary:focus, [role="button"].primary:hover, [role="button"].primary:focus { + --button-hover-back-color: #5e81ac; +} + +button.secondary, [type="button"].secondary, [type="submit"].secondary, [type="reset"].secondary, .button.secondary, [role="button"].secondary { + --button-back-color: #bf616a; + --button-fore-color: #eceff4; +} + +button.secondary:hover, button.secondary:focus, [type="button"].secondary:hover, [type="button"].secondary:focus, [type="submit"].secondary:hover, [type="submit"].secondary:focus, [type="reset"].secondary:hover, [type="reset"].secondary:focus, .button.secondary:hover, .button.secondary:focus, [role="button"].secondary:hover, [role="button"].secondary:focus { + --button-hover-back-color: #bf616a; +} + +button.tertiary, [type="button"].tertiary, [type="submit"].tertiary, [type="reset"].tertiary, .button.tertiary, [role="button"].tertiary { + --button-back-color: #a3be8c; + --button-fore-color: #434c5e; +} + +button.tertiary:hover, button.tertiary:focus, [type="button"].tertiary:hover, [type="button"].tertiary:focus, [type="submit"].tertiary:hover, [type="submit"].tertiary:focus, [type="reset"].tertiary:hover, [type="reset"].tertiary:focus, .button.tertiary:hover, .button.tertiary:focus, [role="button"].tertiary:hover, [role="button"].tertiary:focus { + --button-hover-back-color: #a3be8c; +} + +button.inverse, [type="button"].inverse, [type="submit"].inverse, [type="reset"].inverse, .button.inverse, [role="button"].inverse { + --button-back-color: #3b4252; + --button-fore-color: #eceff4; +} + +button.inverse:hover, button.inverse:focus, [type="button"].inverse:hover, [type="button"].inverse:focus, [type="submit"].inverse:hover, [type="submit"].inverse:focus, [type="reset"].inverse:hover, [type="reset"].inverse:focus, .button.inverse:hover, .button.inverse:focus, [role="button"].inverse:hover, [role="button"].inverse:focus { + --button-hover-back-color: #2e3440; +} + +button.small, [type="button"].small, [type="submit"].small, [type="reset"].small, .button.small, [role="button"].small { + padding: calc(0.5 * var(--universal-padding)) calc(0.75 * var(--universal-padding)); + margin: var(--universal-margin); +} + +button.large, [type="button"].large, [type="submit"].large, [type="reset"].large, .button.large, [role="button"].large { + padding: calc(1.5 * var(--universal-padding)) calc(2 * var(--universal-padding)); + margin: var(--universal-margin); +} + +/* + Definitions for navigation elements. +*/ +/* Navigation module CSS variable definitions */ +:root { + --header-back-color: #eceff4; + --header-hover-back-color: #e5e9f0; + --header-fore-color: #3b4252; + --header-border-color: #e5e9f0; + --nav-back-color: #eceff4; + --nav-hover-back-color: #e5e9f0; + --nav-fore-color: #3b4252; + --nav-border-color: #e5e9f0; + --nav-link-color: #88c0d0; + --footer-fore-color: #3b4252; + --footer-back-color: #eceff4; + --footer-border-color: #e5e9f0; + --footer-link-color: #88c0d0; + --drawer-back-color: #eceff4; + --drawer-hover-back-color: #e5e9f0; + --drawer-border-color: #e5e9f0; + --drawer-close-color: #3b4252; +} + +header { + height: 3.1875rem; + background: var(--header-back-color); + color: var(--header-fore-color); + border-bottom: 0.0625rem solid var(--header-border-color); + padding: calc(var(--universal-padding) / 4) 0; + white-space: nowrap; + overflow-x: auto; + overflow-y: hidden; +} + +header.row { + box-sizing: content-box; +} + +header .logo { + color: var(--header-fore-color); + font-size: 1.75rem; + padding: var(--universal-padding) calc(2 * var(--universal-padding)); + text-decoration: none; +} + +header button, header [type="button"], header .button, header [role="button"] { + box-sizing: border-box; + position: relative; + top: calc(0rem - var(--universal-padding) / 4); + height: calc(3.1875rem + var(--universal-padding) / 2); + background: var(--header-back-color); + line-height: calc(3.1875rem - var(--universal-padding) * 1.5); + text-align: center; + color: var(--header-fore-color); + border: 0; + border-radius: 0; + margin: 0; + text-transform: uppercase; +} + +header button:hover, header button:focus, header [type="button"]:hover, header [type="button"]:focus, header .button:hover, header .button:focus, header [role="button"]:hover, header [role="button"]:focus { + background: var(--header-hover-back-color); +} + +nav { + background: var(--nav-back-color); + color: var(--nav-fore-color); + border: 0.0625rem solid var(--nav-border-color); + border-radius: var(--universal-border-radius); + margin: var(--universal-margin); +} + +nav * { + padding: var(--universal-padding) calc(1.5 * var(--universal-padding)); +} + +nav a, nav a:visited { + display: block; + color: var(--nav-link-color); + border-radius: var(--universal-border-radius); + transition: background 0.3s; +} + +nav a:hover, nav a:focus, nav a:visited:hover, nav a:visited:focus { + text-decoration: none; + background: var(--nav-hover-back-color); +} + +nav .sublink-1 { + position: relative; + margin-left: calc(2 * var(--universal-padding)); +} + +nav .sublink-1:before { + position: absolute; + left: calc(var(--universal-padding) - 1 * var(--universal-padding)); + top: -0.0625rem; + content: ''; + height: 100%; + border: 0.0625rem solid var(--nav-border-color); + border-left: 0; +} + +nav .sublink-2 { + position: relative; + margin-left: calc(4 * var(--universal-padding)); +} + +nav .sublink-2:before { + position: absolute; + left: calc(var(--universal-padding) - 3 * var(--universal-padding)); + top: -0.0625rem; + content: ''; + height: 100%; + border: 0.0625rem solid var(--nav-border-color); + border-left: 0; +} + +footer { + background: var(--footer-back-color); + color: var(--footer-fore-color); + border-top: 0.0625rem solid var(--footer-border-color); + padding: calc(2 * var(--universal-padding)) var(--universal-padding); + font-size: 0.875rem; +} + +footer a, footer a:visited { + color: var(--footer-link-color); +} + +header.sticky { + position: -webkit-sticky; + position: sticky; + z-index: 1101; + top: 0; +} + +footer.sticky { + position: -webkit-sticky; + position: sticky; + z-index: 1101; + bottom: 0; +} + +.drawer-toggle:before { + display: inline-block; + position: relative; + vertical-align: bottom; + content: '\00a0\2261\00a0'; + font-family: sans-serif; + font-size: 1.5em; +} + +@media screen and (min-width: 768px) { + .drawer-toggle:not(.persistent) { + display: none; + } +} + +[type="checkbox"].drawer { + height: 1px; + width: 1px; + margin: -1px; + overflow: hidden; + position: absolute; + clip: rect(0 0 0 0); + -webkit-clip-path: inset(100%); + clip-path: inset(100%); +} + +[type="checkbox"].drawer + * { + display: block; + box-sizing: border-box; + position: fixed; + top: 0; + width: 320px; + height: 100vh; + overflow-y: auto; + background: var(--drawer-back-color); + border: 0.0625rem solid var(--drawer-border-color); + border-radius: 0; + margin: 0; + z-index: 1110; + right: -320px; + transition: right 0.3s; +} + +[type="checkbox"].drawer + * .drawer-close { + position: absolute; + top: var(--universal-margin); + right: var(--universal-margin); + z-index: 1111; + width: 2rem; + height: 2rem; + border-radius: var(--universal-border-radius); + padding: var(--universal-padding); + margin: 0; + cursor: pointer; + transition: background 0.3s; +} + +[type="checkbox"].drawer + * .drawer-close:before { + display: block; + content: '\00D7'; + color: var(--drawer-close-color); + position: relative; + font-family: sans-serif; + font-size: 2rem; + line-height: 1; + text-align: center; +} + +[type="checkbox"].drawer + * .drawer-close:hover, [type="checkbox"].drawer + * .drawer-close:focus { + background: var(--drawer-hover-back-color); +} + +@media screen and (max-width: 320px) { + [type="checkbox"].drawer + * { + width: 100%; + } +} + +[type="checkbox"].drawer:checked + * { + right: 0; +} + +@media screen and (min-width: 768px) { + [type="checkbox"].drawer:not(.persistent) + * { + position: static; + height: 100%; + z-index: 1100; + } + [type="checkbox"].drawer:not(.persistent) + * .drawer-close { + display: none; + } +} + +/* + Definitions for the responsive table component. +*/ +/* Table module CSS variable definitions. */ +:root { + --table-border-color: #d8dee9; + --table-border-separator-color: #434c5e; + --table-head-back-color: #e5e9f0; + --table-head-fore-color: #2e3440; + --table-body-back-color: #eceff4; + --table-body-fore-color: #2e3440; + --table-body-alt-back-color: #e5e9f0; +} + +table { + border-collapse: separate; + border-spacing: 0; + margin: 0; + display: flex; + flex: 0 1 auto; + flex-flow: row wrap; + padding: var(--universal-padding); + padding-top: 0; +} + +table caption { + font-size: 1.5rem; + margin: calc(2 * var(--universal-margin)) 0; + max-width: 100%; + flex: 0 0 100%; +} + +table thead, table tbody { + display: flex; + flex-flow: row wrap; + border: 0.0625rem solid var(--table-border-color); +} + +table thead { + z-index: 999; + border-radius: var(--universal-border-radius) var(--universal-border-radius) 0 0; + border-bottom: 0.0625rem solid var(--table-border-separator-color); +} + +table tbody { + border-top: 0; + margin-top: calc(0 - var(--universal-margin)); + border-radius: 0 0 var(--universal-border-radius) var(--universal-border-radius); +} + +table tr { + display: flex; + padding: 0; +} + +table th, table td { + padding: calc(2 * var(--universal-padding)); +} + +table th { + text-align: left; + background: var(--table-head-back-color); + color: var(--table-head-fore-color); +} + +table td { + background: var(--table-body-back-color); + color: var(--table-body-fore-color); + border-top: 0.0625rem solid var(--table-border-color); +} + +table:not(.horizontal) { + overflow: auto; + max-height: 400px; +} + +table:not(.horizontal) thead, table:not(.horizontal) tbody { + max-width: 100%; + flex: 0 0 100%; +} + +table:not(.horizontal) tr { + flex-flow: row wrap; + flex: 0 0 100%; +} + +table:not(.horizontal) th, table:not(.horizontal) td { + flex: 1 0 0%; + overflow: hidden; + text-overflow: ellipsis; +} + +table:not(.horizontal) thead { + position: sticky; + top: 0; +} + +table:not(.horizontal) tbody tr:first-child td { + border-top: 0; +} + +table.horizontal { + border: 0; +} + +table.horizontal thead, table.horizontal tbody { + border: 0; + flex-flow: row nowrap; +} + +table.horizontal tbody { + overflow: auto; + justify-content: space-between; + flex: 1 0 0; + margin-left: calc( 4 * var(--universal-margin)); + padding-bottom: calc(var(--universal-padding) / 4); +} + +table.horizontal tr { + flex-direction: column; + flex: 1 0 auto; +} + +table.horizontal th, table.horizontal td { + width: 100%; + border: 0; + border-bottom: 0.0625rem solid var(--table-border-color); +} + +table.horizontal th:not(:first-child), table.horizontal td:not(:first-child) { + border-top: 0; +} + +table.horizontal th { + text-align: right; + border-left: 0.0625rem solid var(--table-border-color); + border-right: 0.0625rem solid var(--table-border-separator-color); +} + +table.horizontal thead tr:first-child { + padding-left: 0; +} + +table.horizontal th:first-child, table.horizontal td:first-child { + border-top: 0.0625rem solid var(--table-border-color); +} + +table.horizontal tbody tr:last-child td { + border-right: 0.0625rem solid var(--table-border-color); +} + +table.horizontal tbody tr:last-child td:first-child { + border-top-right-radius: 0.25rem; +} + +table.horizontal tbody tr:last-child td:last-child { + border-bottom-right-radius: 0.25rem; +} + +table.horizontal thead tr:first-child th:first-child { + border-top-left-radius: 0.25rem; +} + +table.horizontal thead tr:first-child th:last-child { + border-bottom-left-radius: 0.25rem; +} + +@media screen and (max-width: 767px) { + table, table.horizontal { + border-collapse: collapse; + border: 0; + width: 100%; + display: table; + } + table thead, table th, table.horizontal thead, table.horizontal th { + border: 0; + height: 1px; + width: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + clip: rect(0 0 0 0); + -webkit-clip-path: inset(100%); + clip-path: inset(100%); + } + table tbody, table.horizontal tbody { + border: 0; + display: table-row-group; + } + table tr, table.horizontal tr { + display: block; + border: 0.0625rem solid var(--table-border-color); + border-radius: var(--universal-border-radius); + background: #fafafa; + padding: var(--universal-padding); + margin: var(--universal-margin); + margin-bottom: calc(2 * var(--universal-margin)); + } + table th, table td, table.horizontal th, table.horizontal td { + width: auto; + } + table td, table.horizontal td { + display: block; + border: 0; + text-align: right; + } + table td:before, table.horizontal td:before { + content: attr(data-label); + float: left; + font-weight: 600; + } + table th:first-child, table td:first-child, table.horizontal th:first-child, table.horizontal td:first-child { + border-top: 0; + } + table tbody tr:last-child td, table.horizontal tbody tr:last-child td { + border-right: 0; + } +} + +:root { + --table-body-alt-back-color: #e5e9f0; +} + +table.striped tr:nth-of-type(2n) > td { + background: var(--table-body-alt-back-color); +} + +@media screen and (max-width: 768px) { + table.striped tr:nth-of-type(2n) { + background: var(--table-body-alt-back-color); + } +} + +:root { + --table-body-hover-back-color: #88c0d0; +} + +table.hoverable tr:hover, table.hoverable tr:hover > td, table.hoverable tr:focus, table.hoverable tr:focus > td { + background: var(--table-body-hover-back-color); +} + +@media screen and (max-width: 768px) { + table.hoverable tr:hover, table.hoverable tr:hover > td, table.hoverable tr:focus, table.hoverable tr:focus > td { + background: var(--table-body-hover-back-color); + } +} + +/* + Definitions for contextual background elements, toasts and tooltips. +*/ +/* Contextual module CSS variable definitions */ +:root { + --mark-back-color: #5e81ac; + --mark-fore-color: #fafafa; +} + +mark { + background: var(--mark-back-color); + color: var(--mark-fore-color); + font-size: 0.95em; + line-height: 1em; + border-radius: var(--universal-border-radius); + padding: calc(var(--universal-padding) / 4) calc(var(--universal-padding) / 2); +} + +mark.inline-block { + display: inline-block; + font-size: 1em; + line-height: 1.5; + padding: calc(var(--universal-padding) / 2) var(--universal-padding); +} + +:root { + --toast-back-color: #2e3440; + --toast-fore-color: #eceff4; +} + +.toast { + position: fixed; + bottom: calc(var(--universal-margin) * 3); + left: 50%; + transform: translate(-50%, -50%); + z-index: 1111; + color: var(--toast-fore-color); + background: var(--toast-back-color); + border-radius: calc(var(--universal-border-radius) * 16); + padding: var(--universal-padding) calc(var(--universal-padding) * 3); +} + +:root { + --tooltip-back-color: #2e3440; + --tooltip-fore-color: #eceff4; +} + +.tooltip { + position: relative; + display: inline-block; +} + +.tooltip:before, .tooltip:after { + position: absolute; + opacity: 0; + clip: rect(0 0 0 0); + -webkit-clip-path: inset(100%); + clip-path: inset(100%); + transition: all 0.3s; + z-index: 1010; + left: 50%; +} + +.tooltip:not(.bottom):before, .tooltip:not(.bottom):after { + bottom: 75%; +} + +.tooltip.bottom:before, .tooltip.bottom:after { + top: 75%; +} + +.tooltip:hover:before, .tooltip:hover:after, .tooltip:focus:before, .tooltip:focus:after { + opacity: 1; + clip: auto; + -webkit-clip-path: inset(0%); + clip-path: inset(0%); +} + +.tooltip:before { + content: ''; + background: transparent; + border: var(--universal-margin) solid transparent; + left: calc(50% - var(--universal-margin)); +} + +.tooltip:not(.bottom):before { + border-top-color: #2e3440; +} + +.tooltip.bottom:before { + border-bottom-color: #2e3440; +} + +.tooltip:after { + content: attr(aria-label); + color: var(--tooltip-fore-color); + background: var(--tooltip-back-color); + border-radius: var(--universal-border-radius); + padding: var(--universal-padding); + white-space: nowrap; + transform: translateX(-50%); +} + +.tooltip:not(.bottom):after { + margin-bottom: calc(2 * var(--universal-margin)); +} + +.tooltip.bottom:after { + margin-top: calc(2 * var(--universal-margin)); +} + +:root { + --modal-overlay-color: rgba(0, 0, 0, 0.45); + --modal-close-color: #3b4252; + --modal-close-hover-color: #e5e9f0; +} + +[type="checkbox"].modal { + height: 1px; + width: 1px; + margin: -1px; + overflow: hidden; + position: absolute; + clip: rect(0 0 0 0); + -webkit-clip-path: inset(100%); + clip-path: inset(100%); +} + +[type="checkbox"].modal + div { + position: fixed; + top: 0; + left: 0; + display: none; + width: 100vw; + height: 100vh; + background: var(--modal-overlay-color); +} + +[type="checkbox"].modal + div .card { + margin: 0 auto; + max-height: 50vh; + overflow: auto; +} + +[type="checkbox"].modal + div .card .modal-close { + position: absolute; + top: 0; + right: 0; + width: 1.75rem; + height: 1.75rem; + border-radius: var(--universal-border-radius); + padding: var(--universal-padding); + margin: 0; + cursor: pointer; + transition: background 0.3s; +} + +[type="checkbox"].modal + div .card .modal-close:before { + display: block; + content: '\00D7'; + color: var(--modal-close-color); + position: relative; + font-family: sans-serif; + font-size: 1.75rem; + line-height: 1; + text-align: center; +} + +[type="checkbox"].modal + div .card .modal-close:hover, [type="checkbox"].modal + div .card .modal-close:focus { + background: var(--modal-close-hover-color); +} + +[type="checkbox"].modal:checked + div { + display: flex; + flex: 0 1 auto; + z-index: 1200; +} + +[type="checkbox"].modal:checked + div .card .modal-close { + z-index: 1211; +} + +:root { + --collapse-label-back-color: #e5e9f0; + --collapse-label-fore-color: #2e3440; + --collapse-label-hover-back-color: #e5e9f0; + --collapse-selected-label-back-color: #e5e9f0; + --collapse-border-color: #e5e9f0; + --collapse-content-back-color: #fafafa; + --collapse-selected-label-border-color: #88c0d0; +} + +.collapse { + width: calc(100% - 2 * var(--universal-margin)); + opacity: 1; + display: flex; + flex-direction: column; + margin: var(--universal-margin); + border-radius: var(--universal-border-radius); +} + +.collapse > [type="radio"], .collapse > [type="checkbox"] { + height: 1px; + width: 1px; + margin: -1px; + overflow: hidden; + position: absolute; + clip: rect(0 0 0 0); + -webkit-clip-path: inset(100%); + clip-path: inset(100%); +} + +.collapse > label { + flex-grow: 1; + display: inline-block; + height: 1.5rem; + cursor: pointer; + transition: background 0.3s; + color: var(--collapse-label-fore-color); + background: var(--collapse-label-back-color); + border: 0.0625rem solid var(--collapse-border-color); + padding: calc(1.5 * var(--universal-padding)); +} + +.collapse > label:hover, .collapse > label:focus { + background: var(--collapse-label-hover-back-color); +} + +.collapse > label + div { + flex-basis: auto; + height: 1px; + width: 1px; + margin: -1px; + overflow: hidden; + position: absolute; + clip: rect(0 0 0 0); + -webkit-clip-path: inset(100%); + clip-path: inset(100%); + transition: max-height 0.3s; + max-height: 1px; +} + +.collapse > :checked + label { + background: var(--collapse-selected-label-back-color); + border-bottom-color: var(--collapse-selected-label-border-color); +} + +.collapse > :checked + label + div { + box-sizing: border-box; + position: relative; + width: 100%; + height: auto; + overflow: auto; + margin: 0; + background: var(--collapse-content-back-color); + border: 0.0625rem solid var(--collapse-border-color); + border-top: 0; + padding: var(--universal-padding); + clip: auto; + -webkit-clip-path: inset(0%); + clip-path: inset(0%); + max-height: 400px; +} + +.collapse > label:not(:first-of-type) { + border-top: 0; +} + +.collapse > label:first-of-type { + border-radius: var(--universal-border-radius) var(--universal-border-radius) 0 0; +} + +.collapse > label:last-of-type:not(:first-of-type) { + border-radius: 0 0 var(--universal-border-radius) var(--universal-border-radius); +} + +.collapse > label:last-of-type:first-of-type { + border-radius: var(--universal-border-radius); +} + +.collapse > :checked:last-of-type:not(:first-of-type) + label { + border-radius: 0; +} + +.collapse > :checked:last-of-type + label + div { + border-radius: 0 0 var(--universal-border-radius) var(--universal-border-radius); +} + /* - Definitions for forms and input elements. -*/ -form { - border: 1px solid #D8DEE9; - margin: 8px; - padding: 12px 10px 18px; - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 2px 3px rgba(0, 0, 0, 0.15); -} - -fieldset { - border: 1px solid #D8DEE9; - border-radius: 2px; - margin: 2px; - padding: 6px 8px 8px; -} - -legend { - box-sizing: border-box; - display: table; - max-width: 100%; - white-space: normal; - font-weight: 700; - font-size: 0.925em; - padding: 2px 4px; -} - -label { - padding: 4px 8px; -} - -.input-group { - display: inline-block; -} - -.input-group.fluid { - display: -webkit-box; - -webkit-box-pack: justify; - display: -webkit-flex; - display: flex; - -webkit-align-items: center; - align-items: center; - -webkit-justify-content: center; - justify-content: center; -} - -.input-group.fluid > input { - -webkit-box-flex: 1; - max-width: 100%; - -webkit-flex-grow: 1; - flex-grow: 1; - -webkit-flex-basis: 0px; - flex-basis: 0px; -} - -@media screen and (max-width: 767px) { - .input-group.fluid { - -webkit-box-orient: vertical; - -webkit-align-items: stretch; - align-items: stretch; - -webkit-flex-direction: column; - flex-direction: column; - } -} - -.input-group.vertical { - display: -webkit-box; - -webkit-box-orient: vertical; - -webkit-box-pack: justify; - display: -webkit-flex; - display: flex; - -webkit-flex-direction: column; - flex-direction: column; - -webkit-align-items: stretch; - align-items: stretch; - -webkit-justify-content: center; - justify-content: center; -} - -.input-group.vertical > input { - -webkit-box-flex: 1; - max-width: 100%; - -webkit-flex-grow: 1; - flex-grow: 1; - -webkit-flex-basis: 0px; - flex-basis: 0px; -} - -[type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { - height: auto; -} - -textarea { - overflow: auto; -} - -[type="search"] { - -webkit-appearance: textfield; - outline-offset: -2px; -} - -[type="search"]::-webkit-search-cancel-button, -[type="search"]::-webkit-search-decoration { - -webkit-appearance: none; -} - -input:not([type]), [type="text"], [type="email"], [type="number"], [type="search"], -[type="password"], [type="url"], [type="tel"], textarea, select { - box-sizing: border-box; - background: #E5E9F0; - color: #2E3440; - border: 1px solid #D8DEE9; - border-radius: 1px; - margin: 2px; - padding: 8px 12px; -} - -input:not([type="button"]):not([type="submit"]):not([type="reset"]):hover, input:not([type="button"]):not([type="submit"]):not([type="reset"]):focus, textarea:hover, textarea:focus, select:hover, select:focus { - border-color: #81A1C1; - box-shadow: none; -} - -input:not([type="button"]):not([type="submit"]):not([type="reset"]):disabled, input:not([type="button"]):not([type="submit"]):not([type="reset"])[disabled], textarea:disabled, textarea[disabled], select:disabled, select[disabled] { - cursor: not-allowed; - opacity: 0.75; -} - -input:not([type="button"]):not([type="submit"]):not([type="reset"]):invalid, input:not([type="button"]):not([type="submit"]):not([type="reset"]):focus:invalid, textarea:invalid, textarea:focus:invalid, select:invalid, select:focus:invalid { - border-color: #BF616A; - box-shadow: none; -} - -input:not([type="button"]):not([type="submit"]):not([type="reset"])[readonly], textarea[readonly], select[readonly] { - background: #e0e0e0; - border-color: #bdbdbd; -} - -select:not([multiple]):not([size]) { - padding-right: 20px; - background: url('data:image/svg+xml, ') no-repeat right; - background-color: #E5E9F0; - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; -} - -select:not([multiple]):not([size])[readonly] { - background-color: #e0e0e0; -} - -select { - max-width: 100%; -} - -option { - overflow: hidden; - text-overflow: ellipsis; -} - -::-webkit-input-placeholder { - opacity: 1; - color: #616161; -} - -::-moz-placeholder { - opacity: 1; - color: #616161; -} - -::-ms-placeholder { - opacity: 1; - color: #616161; -} - -::placeholder { - opacity: 1; - color: #616161; -} - -button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { - border-style: none; - padding: 0; -} - -button, html [type="button"], [type="reset"], [type="submit"] { - -webkit-appearance: button; -} - -button { - overflow: visible; - text-transform: none; -} - -button, [type="button"], [type="submit"], [type="reset"], -a.button, label.button, .button, -a[role="button"], label[role="button"], [role="button"] { - display: inline-block; - background: rgba(216, 222, 233, 0.65); - color: #2E3440; - border: 0; - border-radius: 2px; - padding: 8px 12px; - margin: 8px; - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.15); - text-decoration: none; - transition: background 0.3s; - cursor: pointer; -} - -button:hover, button:focus, [type="button"]:hover, [type="button"]:focus, [type="submit"]:hover, [type="submit"]:focus, [type="reset"]:hover, [type="reset"]:focus, -a.button:hover, -a.button:focus, label.button:hover, label.button:focus, .button:hover, .button:focus, -a[role="button"]:hover, -a[role="button"]:focus, label[role="button"]:hover, label[role="button"]:focus, [role="button"]:hover, [role="button"]:focus { - background: rgba(216, 222, 233, 0.8); - opacity: 1; -} - -button:disabled, button[disabled], [type="button"]:disabled, [type="button"][disabled], [type="submit"]:disabled, [type="submit"][disabled], [type="reset"]:disabled, [type="reset"][disabled], -a.button:disabled, -a.button[disabled], label.button:disabled, label.button[disabled], .button:disabled, .button[disabled], -a[role="button"]:disabled, -a[role="button"][disabled], label[role="button"]:disabled, label[role="button"][disabled], [role="button"]:disabled, [role="button"][disabled] { - cursor: not-allowed; - opacity: 0.65; -} - -input[type="file"] { - border: 0; - height: 1px; - width: 1px; - margin: -1px; - overflow: hidden; - padding: 0; - position: absolute; - clip: rect(0 0 0 0); - -webkit-clip-path: inset(100%); - clip-path: inset(100%); -} - -.button-group { - display: -webkit-box; - display: -webkit-flex; - display: flex; - border: 1px solid #9e9e9e; - border-radius: 2px; - margin: 8px; - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 2px 3px rgba(0, 0, 0, 0.15); -} - -.button-group > button, .button-group [type="button"], .button-group > [type="submit"], .button-group > [type="reset"], -.button-group > .button, .button-group > [role="button"] { - margin: 0; - -webkit-box-flex: 1; - max-width: 100%; - -webkit-flex: 1 1 auto; - flex: 1 1 auto; - text-align: center; - border: 0; - border-radius: 0; - box-shadow: none; -} - -.button-group > :not(:first-child) { - border-left: 1px solid #9e9e9e; -} - -@media screen and (max-width: 767px) { - .button-group { - -webkit-box-orient: vertical; - -webkit-flex-direction: column; - flex-direction: column; - } - .button-group > :not(:first-child) { - border: 0; - border-top: 1px solid #9e9e9e; - } -} - -[type="checkbox"], [type="radio"] { - height: 1px; - width: 1px; - margin: -1px; - overflow: hidden; - position: absolute; - clip: rect(0 0 0 0); - -webkit-clip-path: inset(100%); - clip-path: inset(100%); -} - -.input-group [type="checkbox"] + label, .input-group [type="radio"] + label { - position: relative; - display: inline-block; - margin-left: 20px; - cursor: pointer; -} - -.input-group [type="checkbox"] + label:before, .input-group [type="radio"] + label:before { - display: inline-block; - position: absolute; - top: 6px; - left: 0; - width: 16px; - height: 16px; - content: ''; - border: 1px solid #D8DEE9; - border-radius: 1px; - background: #E5E9F0; - color: #2E3440; - margin-left: -20px; - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.15); -} - -.input-group [type="checkbox"] + label:hover:before, .input-group [type="checkbox"] + label:focus:before, .input-group [type="radio"] + label:hover:before, .input-group [type="radio"] + label:focus:before { - border-color: #81A1C1; -} - -.input-group [type="checkbox"]:focus + label:before, .input-group [type="radio"]:focus + label:before { - border-color: #81A1C1; -} - -.input-group [type="radio"] + label:before, .input-group [type="radio"] + label:after { - border-radius: 50%; -} - -.input-group [type="checkbox"][disabled] + label, .input-group [type="radio"][disabled] + label, -.input-group [type="checkbox"]:disabled + label, .input-group [type="radio"]:disabled + label { - cursor: not-allowed; -} - -.input-group [type="checkbox"][disabled] + label:before, .input-group [type="checkbox"][disabled] + label:after, .input-group [type="radio"][disabled] + label:before, .input-group [type="radio"][disabled] + label:after, -.input-group [type="checkbox"]:disabled + label:before, -.input-group [type="checkbox"]:disabled + label:after, .input-group [type="radio"]:disabled + label:before, .input-group [type="radio"]:disabled + label:after { - opacity: 0.75; -} - -.input-group [type="checkbox"]:checked + label:after, .input-group [type="radio"]:checked + label:after { - position: absolute; - background: #2E3440; - content: ''; - margin-left: -20px; - top: 10px; - left: 4px; - width: 10px; - height: 10px; -} - -.input-group [type="checkbox"] + label.switch:before, .input-group [type="radio"] + label.switch:before { - top: 8px; - width: 28px; - height: 14px; - border: 0; - border-radius: 8px; - background: #D8DEE9; - margin-left: -38px; - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.15); -} - -.input-group [type="checkbox"] + label.switch:after, .input-group [type="radio"] + label.switch:after { - display: inline-block; - content: ''; - position: absolute; - left: 0; - width: 20px; - height: 20px; - background: #ECEFF4; - border-radius: 100%; - top: 5px; - margin-left: -48px; - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.15); - transition: left 0.3s; -} - -.input-group [type="checkbox"]:checked + label.switch:after, .input-group [type="radio"]:checked + label.switch:after { - left: 28px; - width: 20px; - height: 20px; - top: 5px; - margin-left: -48px; - background: #5E81AC; -} - + Custom elements for contextual background elements, toasts and tooltips. +*/ +mark.secondary { + --mark-back-color: #bf616a; +} + +mark.tertiary { + --mark-back-color: #a3be8c; +} + +mark.tag { + padding: calc(var(--universal-padding)/2) var(--universal-padding); + border-radius: 1em; +} + +/* + Definitions for progress elements and spinners. +*/ +/* Progess module CSS variable definitions */ +:root { + --progress-back-color: #e5e9f0; + --progress-fore-color: #434c5e; +} + +progress { + display: block; + vertical-align: baseline; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + height: 0.75rem; + width: calc(100% - 2 * var(--universal-margin)); + margin: var(--universal-margin); + border: 0; + border-radius: calc(2 * var(--universal-border-radius)); + background: var(--progress-back-color); + color: var(--progress-fore-color); +} + +progress::-webkit-progress-value { + background: var(--progress-fore-color); + border-top-left-radius: calc(2 * var(--universal-border-radius)); + border-bottom-left-radius: calc(2 * var(--universal-border-radius)); +} + +progress::-webkit-progress-bar { + background: var(#e5e9f0); +} + +progress::-moz-progress-bar { + background: var(--progress-fore-color); + border-top-left-radius: calc(2 * var(--universal-border-radius)); + border-bottom-left-radius: calc(2 * var(--universal-border-radius)); +} + +progress[value="1000"]::-webkit-progress-value { + border-radius: calc(2 * var(--universal-border-radius)); +} + +progress[value="1000"]::-moz-progress-bar { + border-radius: calc(2 * var(--universal-border-radius)); +} + +progress.inline { + display: inline-block; + vertical-align: middle; + width: 60%; +} + +:root { + --spinner-back-color: #d8dee9; + --spinner-fore-color: #434c5e; +} + +@keyframes spinner-donut-anim { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(360deg); + } +} + +.spinner { + display: inline-block; + margin: var(--universal-margin); + border: 0.25rem solid var(--spinner-back-color); + border-left: 0.25rem solid var(--spinner-fore-color); + border-radius: 50%; + width: 1.25rem; + height: 1.25rem; + animation: spinner-donut-anim 1.2s linear infinite; +} + /* - Custom elements for forms and input elements. -*/ -button.primary, [type="button"].primary, [type="submit"].primary, -[type="reset"].primary, .button.primary, [role="button"].primary { - background: rgba(94, 129, 172, 0.9); - color: #ECEFF4; -} - -button.primary:hover, button.primary:focus, [type="button"].primary:hover, [type="button"].primary:focus, [type="submit"].primary:hover, [type="submit"].primary:focus, -[type="reset"].primary:hover, -[type="reset"].primary:focus, .button.primary:hover, .button.primary:focus, [role="button"].primary:hover, [role="button"].primary:focus { - background: #5e81ac; -} - -button.secondary, [type="button"].secondary, [type="submit"].secondary, -[type="reset"].secondary, .button.secondary, [role="button"].secondary { - background: rgba(191, 97, 106, 0.85); - color: #ECEFF4; -} - -button.secondary:hover, button.secondary:focus, [type="button"].secondary:hover, [type="button"].secondary:focus, [type="submit"].secondary:hover, [type="submit"].secondary:focus, -[type="reset"].secondary:hover, -[type="reset"].secondary:focus, .button.secondary:hover, .button.secondary:focus, [role="button"].secondary:hover, [role="button"].secondary:focus { - background: #bf616a; -} - -button.tertiary, [type="button"].tertiary, [type="submit"].tertiary, -[type="reset"].tertiary, .button.tertiary, [role="button"].tertiary { - background: rgba(163, 190, 140, 0.85); - color: #ECEFF4; -} - -button.tertiary:hover, button.tertiary:focus, [type="button"].tertiary:hover, [type="button"].tertiary:focus, [type="submit"].tertiary:hover, [type="submit"].tertiary:focus, -[type="reset"].tertiary:hover, -[type="reset"].tertiary:focus, .button.tertiary:hover, .button.tertiary:focus, [role="button"].tertiary:hover, [role="button"].tertiary:focus { - background: #a3be8c; -} - -button.inverse, [type="button"].inverse, [type="submit"].inverse, -[type="reset"].inverse, .button.inverse, [role="button"].inverse { - background: #2e3440; - color: #ECEFF4; -} - -button.inverse:hover, button.inverse:focus, [type="button"].inverse:hover, [type="button"].inverse:focus, [type="submit"].inverse:hover, [type="submit"].inverse:focus, -[type="reset"].inverse:hover, -[type="reset"].inverse:focus, .button.inverse:hover, .button.inverse:focus, [role="button"].inverse:hover, [role="button"].inverse:focus { - background: rgba(46, 52, 64, 0.9); -} - -button.small, [type="button"].small, [type="submit"].small, -[type="reset"].small, .button.small, [role="button"].small { - border-radius: 1px; - padding: 4px 6px; - margin: 6px 8px; -} - -button.large, [type="button"].large, [type="submit"].large, -[type="reset"].large, .button.large, [role="button"].large { - border-radius: 4px; - padding: 12px 18px; - margin: 10px 8px; -} - -/* - Definitions for navigation elements. -*/ -header { - display: block; - height: 44px; - background: #2E3440; - color: #ECEFF4; - padding: 2px 8px; - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.18), 0 2px 3px rgba(0, 0, 0, 0.26); - white-space: nowrap; - overflow-x: auto; - overflow-y: hidden; -} - -header .logo { - color: #ECEFF4; - font-size: 1.75em; - line-height: 1.2; - margin: 1px 6px 1px 1px; - padding: 3px 0 0; - transition: opacity 0.3s; -} - -header button, header [type="button"], -header a.button, header label.button, header .button, -header a[role="button"], header label[role="button"], header [role="button"] { - background: #2E3440; - color: #ECEFF4; - vertical-align: top; - margin: 2px 0 0; - box-shadow: none; -} - -header button:hover, header button:focus, header [type="button"]:hover, header [type="button"]:focus, -header a.button:hover, -header a.button:focus, header label.button:hover, header label.button:focus, header .button:hover, header .button:focus, -header a[role="button"]:hover, -header a[role="button"]:focus, header label[role="button"]:hover, header label[role="button"]:focus, header [role="button"]:hover, header [role="button"]:focus { - background: #37474f; -} - -header .logo, header a.button, header a[role="button"] { - text-decoration: none; -} - -header.row { - box-sizing: content-box; -} - -nav { - display: block; - border: 1px solid #D8DEE9; - margin: 2px; - padding: 8px 8px 16px 20px; - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 2px 3px rgba(0, 0, 0, 0.15); -} - -nav a, nav a:visited { - display: block; - color: #88C0D0; - text-decoration: none; -} - -nav .sublink-1 { - padding-left: 12px; - position: relative; -} - -nav .sublink-1:before { - position: absolute; - left: 3px; - top: -1px; - content: ''; - height: 100%; - border: 1px solid #81A1C1; - border-left: 0; -} - -nav .sublink-2 { - padding-left: 24px; - position: relative; -} - -nav .sublink-2:before { - position: absolute; - left: 3px; - top: -1px; - content: ''; - height: 100%; - border: 1px solid #81A1C1; - border-left: 0; -} - -footer { - display: block; - background: #434C5E; - color: #ECEFF4; - margin: 18px 0 0; - padding: 22px 10px 12px; - font-size: 85%; -} - -footer a, footer a:visited { - color: #88C0D0; -} - -header.sticky, footer.sticky { - position: -webkit-sticky; - position: sticky; - z-index: 1101; -} - -header.sticky { - top: 0; -} - -footer.sticky { - bottom: 0; -} - -.drawer-toggle:before { - position: relative; - top: 7px; - font-family: sans-serif; - font-size: 40px; - line-height: 0.125; - content: '\2261'; -} - -.drawer { - display: block; - box-sizing: border-box; - position: fixed; - top: 0; - width: 320px; - height: 100vh; - overflow-y: auto; - background: #ECEFF4; - border: 1px solid #D8DEE9; - margin: 0; - z-index: 1110; -} - -.drawer:not(.right) { - left: -320px; - transition: left 0.3s; -} - -.drawer.right { - right: -320px; - transition: right 0.3s; -} - -.drawer .close { - position: absolute; - top: 12px; - right: 4px; - z-index: 1111; - padding: 0; -} - -@media screen and (max-width: 320px) { - .drawer { - width: 100%; - } -} - -@media screen and (min-width: 768px) { - .drawer:not(.persistent) { - position: static; - height: 100%; - z-index: 1100; - } - .drawer:not(.persistent) .close { - display: none; - } - .drawer-toggle:not(.persistent) { - display: none; - } -} - -:checked + .drawer:not(.right) { - left: 0; -} - -:checked + .drawer.right { - right: 0; -} - -/* - Definitions for the responsive table component. -*/ -table { - border-collapse: separate; - border-spacing: 0; - border: 1px solid #D8DEE9; - margin: 0 auto; - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 2px 3px rgba(0, 0, 0, 0.15); -} - -table caption { - font-size: 1.5em; - margin: 6px 8px 12px; -} - -table tr { - padding: 8px; -} - -table th, table td { - padding: 10px; - border-left: 1px solid #D8DEE9; - border-top: 1px solid #D8DEE9; -} - -table td { - background: #ECEFF4; -} - -table thead th { - border-top: 0; -} - -table th { - background: #D8DEE9; -} - -table th:first-child, table td:first-child { - border-left: 0; -} - -@media screen and (max-width: 767px) { - table:not(.preset) { - border-collapse: collapse; - border: 0; - width: 100%; - box-shadow: none; - } - table:not(.preset) thead, table:not(.preset) th { - border: 0; - height: 1px; - width: 1px; - margin: -1px; - overflow: hidden; - padding: 0; - position: absolute; - clip: rect(0 0 0 0); - -webkit-clip-path: inset(100%); - clip-path: inset(100%); - } - table:not(.preset) tr { - display: block; - border: 1px solid #D8DEE9; - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 2px 3px rgba(0, 0, 0, 0.15); - margin-bottom: 10px; - } - table:not(.preset) td { - display: block; - border: 0; - border-bottom: 1px solid #D8DEE9; - text-align: right; - min-height: 1.5rem; - } - table:not(.preset) td:before { - content: attr(data-label); - float: left; - font-weight: 700; - } - table:not(.preset) td:last-child { - border-bottom: 0; - } -} - -@media screen and (min-width: 768px) { - table.horizontal, table.scrollable { - display: -webkit-box; - -webkit-box-flex: 0; - -webkit-box-orient: horizontal; - -webkit-box-direction: normal; - display: -webkit-flex; - display: flex; - -webkit-flex: 0 1 auto; - flex: 0 1 auto; - -webkit-flex-flow: row wrap; - flex-flow: row wrap; - padding: 8px; - } - table.horizontal caption, table.scrollable caption { - -webkit-box-flex: 1; - max-width: 100%; - -webkit-flex: 0 0 100%; - flex: 0 0 100%; - } - table.horizontal thead, table.horizontal tbody, table.scrollable thead, table.scrollable tbody { - display: -webkit-box; - -webkit-box-flex: 0; - -webkit-box-orient: horizontal; - -webkit-box-direction: normal; - display: -webkit-flex; - display: flex; - } - table.horizontal thead, table.scrollable thead { - z-index: 999; - } - table.horizontal tr, table.scrollable tr { - display: -webkit-box; - display: -webkit-flex; - display: flex; - } - table.horizontal thead, table.horizontal tbody { - -webkit-flex-flow: row nowrap; - flex-flow: row nowrap; - } - table.horizontal tbody { - overflow: auto; - -webkit-box-pack: justify; - -webkit-justify-content: space-between; - justify-content: space-between; - -webkit-flex: 1 0 0; - flex: 1 0 0; - } - table.horizontal tr { - -webkit-box-flex: 1; - -webkit-box-orient: vertical; - -webkit-box-direction: normal; - -webkit-flex-direction: column; - flex-direction: column; - -webkit-flex: 1 0 auto; - flex: 1 0 auto; - } - table.horizontal th, table.horizontal td { - width: 100%; - border: 1px solid #D8DEE9; - } - table.horizontal th:not(:first-child), table.horizontal td:not(:first-child) { - border-top: 0; - } - table.horizontal th { - text-align: right; - } - table.horizontal thead tr:first-child { - padding-left: 0; - } - table.horizontal tbody tr:first-child > td { - padding-left: 20px; - } - table.scrollable { - overflow: auto; - max-height: 400px; - border: 0; - padding-top: 0; - } - table.scrollable thead, table.scrollable tbody { - -webkit-box-flex: 1; - max-width: 100%; - -webkit-flex-flow: row wrap; - flex-flow: row wrap; - -webkit-flex: 0 0 100%; - flex: 0 0 100%; - border: 1px solid #D8DEE9; - } - table.scrollable tbody { - border-top: 0; - margin-top: -0.0625rem; - } - table.scrollable tr { - -webkit-box-flex: 0; - -webkit-box-orient: horizontal; - -webkit-box-direction: normal; - -webkit-flex-flow: row wrap; - flex-flow: row wrap; - -webkit-flex: 0 0 100%; - flex: 0 0 100%; - padding: 0; - } - table.scrollable th, table.scrollable td { - -webkit-box-flex: 1; - -webkit-flex: 1 0 0%; - flex: 1 0 0%; - overflow: hidden; - text-overflow: ellipsis; - } - table.scrollable thead { - position: sticky; - top: 0; - } -} - -@media screen and (max-width: 767px) { - table.horizontal.preset, table.scrollable.preset { - display: -webkit-box; - -webkit-box-flex: 0; - -webkit-box-orient: horizontal; - -webkit-box-direction: normal; - display: -webkit-flex; - display: flex; - -webkit-flex: 0 1 auto; - flex: 0 1 auto; - -webkit-flex-flow: row wrap; - flex-flow: row wrap; - padding: 8px; - } - table.horizontal.preset caption, table.scrollable.preset caption { - -webkit-box-flex: 1; - max-width: 100%; - -webkit-flex: 0 0 100%; - flex: 0 0 100%; - } - table.horizontal.preset thead, table.horizontal.preset tbody, table.scrollable.preset thead, table.scrollable.preset tbody { - display: -webkit-box; - -webkit-box-flex: 0; - -webkit-box-orient: horizontal; - -webkit-box-direction: normal; - display: -webkit-flex; - display: flex; - } - table.horizontal.preset thead, table.scrollable.preset thead { - z-index: 999; - } - table.horizontal.preset tr, table.scrollable.preset tr { - display: -webkit-box; - display: -webkit-flex; - display: flex; - } - table.horizontal.preset thead, table.horizontal.preset tbody { - -webkit-flex-flow: row nowrap; - flex-flow: row nowrap; - } - table.horizontal.preset tbody { - overflow: auto; - -webkit-box-pack: justify; - -webkit-justify-content: space-between; - justify-content: space-between; - -webkit-flex: 1 0 0; - flex: 1 0 0; - } - table.horizontal.preset tr { - -webkit-box-flex: 1; - -webkit-box-orient: vertical; - -webkit-box-direction: normal; - -webkit-flex-direction: column; - flex-direction: column; - -webkit-flex: 1 0 auto; - flex: 1 0 auto; - } - table.horizontal.preset th, table.horizontal.preset td { - width: 100%; - border: 1px solid #D8DEE9; - } - table.horizontal.preset th:not(:first-child), table.horizontal.preset td:not(:first-child) { - border-top: 0; - } - table.horizontal.preset th { - text-align: right; - } - table.horizontal.preset thead tr:first-child { - padding-left: 0; - } - table.horizontal.preset tbody tr:first-child > td { - padding-left: 20px; - } - table.scrollable.preset { - overflow: auto; - max-height: 400px; - border: 0; - padding-top: 0; - } - table.scrollable.preset thead, table.scrollable.preset tbody { - -webkit-box-flex: 1; - max-width: 100%; - -webkit-flex-flow: row wrap; - flex-flow: row wrap; - -webkit-flex: 0 0 100%; - flex: 0 0 100%; - border: 1px solid #D8DEE9; - } - table.scrollable.preset tbody { - border-top: 0; - margin-top: -0.0625rem; - } - table.scrollable.preset tr { - -webkit-box-flex: 0; - -webkit-box-orient: horizontal; - -webkit-box-direction: normal; - -webkit-flex-flow: row wrap; - flex-flow: row wrap; - -webkit-flex: 0 0 100%; - flex: 0 0 100%; - padding: 0; - } - table.scrollable.preset th, table.scrollable.preset td { - -webkit-box-flex: 1; - -webkit-flex: 1 0 0%; - flex: 1 0 0%; - overflow: hidden; - text-overflow: ellipsis; - } - table.scrollable.preset thead { - position: sticky; - top: 0; - } -} - -table.striped tr:nth-of-type(2n) > td { - background: #E5E9F0; -} - -@media screen and (max-width: 767px) { - table.striped:not(.preset) tr:nth-of-type(2n) { - background: #E5E9F0; - } -} - -/* - Definitions for cards and containers. -*/ -.card { - display: -webkit-box; - -webkit-box-orient: vertical; - -webkit-box-pack: justify; - -webkit-box-align: center; - display: -webkit-flex; - display: flex; - -webkit-flex-direction: column; - flex-direction: column; - -webkit-justify-content: space-between; - justify-content: space-between; - -webkit-align-self: center; - align-self: center; - position: relative; - width: 100%; - background: #ECEFF4; - border: 1px solid #D8DEE9; - margin: 2px 10px 20px; - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.18), 0 2px 3px rgba(0, 0, 0, 0.26); - overflow: hidden; -} - -.card > .section { - box-sizing: border-box; - margin: 0; - border: 0; - border-radius: 0; - border-bottom: 1px solid #E5E9F0; - padding: 6px 8px 6px; - width: 100%; -} - -.card > .section.media { - height: 200px; - padding: 0; - -o-object-fit: cover; - object-fit: cover; -} - -.card > .section:last-child { - border-bottom: 0; -} - -@media screen and (min-width: 320px) { - .card { - max-width: 320px; - } -} - -/* - Custom elements for cards and containers. -*/ -@media screen and (min-width: 480px) { - .card.large { - max-width: 480px; - } -} - -@media screen and (min-width: 240px) { - .card.small { - max-width: 240px; - } -} - -.card.fluid { - max-width: 100%; - width: auto; -} - -.card.warning { - background: #EBCB8B; - border: 1px solid #D08770; -} - -.card.warning > .section { - border-bottom: 1px solid #D08770; -} - -.card.warning > .section:last-child { - border-bottom: 0; -} - -.card.error { - background: #BF616A; - color: #ECEFF4; - border: 1px solid #BF616A; -} - -.card.error > .section { - border-bottom: 1px solid #BF616A; -} - -.card.error > .section:last-child { - border-bottom: 0; -} - -.card > .section.darker { - background: #D8DEE9; -} - -.card > .section.double-padded { - padding: 10px 12px 10px; -} - -/* - Definitions for tabs/horizontal accordions. -*/ -.tabs { - width: 100%; - opacity: 1; - display: -webkit-box; - -webkit-box-pack: justify; - display: -webkit-flex; - display: flex; - -webkit-justify-content: space-between; - justify-content: space-between; - -webkit-flex-wrap: wrap; - flex-wrap: wrap; - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.18), 0 2px 3px rgba(0, 0, 0, 0.26); -} - -.tabs > label { - -webkit-box-flex: 1; - -webkit-flex-grow: 1; - flex-grow: 1; - -webkit-order: 1; - order: 1; - display: inline-block; - height: 26px; - cursor: pointer; - transition: background 0.3s; - background: #D8DEE9; - border: 1px solid #9e9e9e; - padding: 8px 12px; -} - -.tabs > label:hover, .tabs > label:focus { - background: rgba(216, 222, 233, 0.8); -} - -.tabs > [type="radio"], .tabs > [type="checkbox"] { - display: none; - visibility: hidden; -} - -.tabs > label + div { - -webkit-flex-basis: auto; - flex-basis: auto; - -webkit-order: 2; - order: 2; - height: 1px; - width: 1px; - margin: -1px; - overflow: hidden; - position: absolute; - clip: rect(0 0 0 0); - -webkit-clip-path: inset(100%); - clip-path: inset(100%); - -webkit-transform: scaleY(0); - transform: scaleY(0); - -webkit-transform-origin: top; - transform-origin: top; - transition: -webkit-transform 0.3s, transform 0.3s; -} - -.tabs > label:not(:first-of-type) { - border-left: 0; -} - -.tabs > :checked + label { - background: #4C566A; - color: #ECEFF4; - border-bottom-color: #5E81AC; -} - -.tabs > :checked + label:hover, .tabs > :checked + label:focus { - background: rgba(76, 86, 106, 0.8); -} - -.tabs > :checked + label + div { - box-sizing: border-box; - position: relative; - height: 400px; - width: 100%; - overflow: auto; - margin: 0; - -webkit-transform: scaleY(1); - transform: scaleY(1); - border: 1px solid #9e9e9e; - border-top: 0; - padding: 8px; - clip: auto; - -webkit-clip-path: inset(0%); - clip-path: inset(0%); -} - -.tabs.stacked { - -webkit-box-orient: vertical; - -webkit-flex-direction: column; - flex-direction: column; -} - -.tabs.stacked > label { - -webkit-order: initial; - order: initial; -} - -.tabs.stacked > :checked + label { - border: 1px solid #9e9e9e; -} - -.tabs.stacked > label + div { - -webkit-order: initial; - order: initial; - -webkit-transform-origin: top; - transform-origin: top; -} - -.tabs.stacked > label:not(:first-of-type) { - border: 1px solid #9e9e9e; - border-top: 0; -} - -.tabs.stacked > :checked + label + div { - height: auto; -} - -@media screen and (max-width: 767px) { - .tabs { - -webkit-box-orient: vertical; - -webkit-flex-direction: column; - flex-direction: column; - } - .tabs > label { - -webkit-order: initial; - order: initial; - } - .tabs > :checked + label { - border: 1px solid #9e9e9e; - } - .tabs > label + div { - -webkit-order: initial; - order: initial; - } - .tabs > label:not(:first-of-type) { - border: 1px solid #9e9e9e; - border-top: 0; - } -} - -/* - Definitions for contextual background elements, toasts and tooltips. -*/ -mark { - background: #5E81AC; - color: #ECEFF4; - font-size: 95%; - line-height: 1; - border-radius: 2px; - padding: 2px 4px; - box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(0, 0, 0, 0.15); -} - -mark.inline-block { - display: inline-block; -} - -.toast { - position: fixed; - background: #424242; - bottom: 24px; - left: 50%; - transform: translate(-50%, -50%); - color: #ECEFF4; - border-radius: 32px; - padding: 12px 24px; - z-index: 1111; -} - -.tooltip { - position: relative; - display: inline-block; -} - -.tooltip:before, .tooltip:after { - position: absolute; - opacity: 0; - clip: rect(0 0 0 0); - -webkit-clip-path: inset(100%); - clip-path: inset(100%); - transition: all 0.3s; - z-index: 1010; - left: 50%; -} - -.tooltip:not(.bottom):before, .tooltip:not(.bottom):after { - bottom: 75%; -} - -.tooltip.bottom:before, .tooltip.bottom:after { - top: 75%; -} - -.tooltip:hover:before, .tooltip:hover:after, .tooltip:focus:before, .tooltip:focus:after { - opacity: 1; - clip: auto; - -webkit-clip-path: inset(0%); - clip-path: inset(0%); -} - -.tooltip:before { - content: ''; - background: transparent; - border: 6px solid transparent; - left: 50%; - left: calc(50% - 6px); -} - -.tooltip:not(.bottom):before { - border-top-color: #2E3440; -} - -.tooltip.bottom:before { - border-bottom-color: #2E3440; -} - -.tooltip:after { - content: attr(aria-label); - background: #2E3440; - border-radius: 2px; - color: #ECEFF4; - padding: 6px; - box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(0, 0, 0, 0.15); - white-space: nowrap; - -webkit-transform: translateX(-50%); - transform: translateX(-50%); -} - -.tooltip:not(.bottom):after { - margin-bottom: 12px; -} - -.tooltip.bottom:after { - margin-top: 12px; -} - -.modal { - position: fixed; - top: 0; - left: 0; - display: none; - width: 100vw; - height: 100vh; - background: rgba(0, 0, 0, 0.45); -} - -.modal .card { - margin: 0 auto; - max-height: 50vh; - overflow: auto; -} - -.modal .card .close { - position: absolute; - top: 12px; - right: 4px; - padding: 0; -} - -:checked + .modal { - display: -webkit-box; - -webkit-box-flex: 0; - display: -webkit-flex; - display: flex; - -webkit-flex: 0 1 auto; - flex: 0 1 auto; - z-index: 1200; -} - -:checked + .modal .card .close { - z-index: 1211; -} - -/* - Custom contextual background elements and alerts. -*/ -mark.secondary { - background: #BF616A; -} - -mark.tertiary { - background: #A3BE8C; -} - -mark.tag { - border-radius: 200px; - padding: 4px 8px; -} - -mark.inline-block { - font-size: 100%; - line-height: 1.35; - padding: 5px; -} - -.toast.small { - border-radius: 24px; - padding: 8px 16px; -} - -.toast.large { - border-radius: 48px; - padding: 18px 36px; -} - -/* - Definitions for progress elements and spinners. -*/ -progress { - display: block; - vertical-align: baseline; - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - height: 14px; - width: 90%; - width: calc(100% - 16px); - margin: 2px 8px; - border: 0; - border-radius: 1px; - box-shadow: 0 0.5px 1px rgba(0, 0, 0, 0.1), 0 0.5px 0.5px rgba(0, 0, 0, 0.15); - background: #D8DEE9; - color: #5E81AC; -} - -progress::-webkit-progress-value { - background: #5E81AC; - border-top-left-radius: 1px; - border-bottom-left-radius: 1px; -} - -progress::-webkit-progress-bar { - background: #D8DEE9; -} - -progress::-moz-progress-bar { - background: #5E81AC; - border-top-left-radius: 1px; - border-bottom-left-radius: 1px; -} - -progress[value="1000"]::-webkit-progress-value { - border-radius: 1px; -} - -progress[value="1000"]::-moz-progress-bar { - border-radius: 1px; -} - -@-webkit-keyframes spinner-donut-anim { - 0% { - -webkit-transform: rotate(0deg); - } - 100% { - -webkit-transform: rotate(360deg); - } -} - -@keyframes spinner-donut-anim { - 0% { - transform: rotate(0deg); - } - 100% { - transform: rotate(360deg); - } -} - -.spinner-donut { - display: inline-block; - border: 4px solid #D8DEE9; - border-left: 4px solid #5E81AC; - border-radius: 50%; - width: 20px; - height: 20px; - -webkit-animation: spinner-donut-anim 1.2s linear infinite; - animation: spinner-donut-anim 1.2s linear infinite; -} - -/* - Custom elements for progress elements and spinners. -*/ -progress.inline { - display: inline-block; - vertical-align: middle; - width: 60%; -} - -progress.secondary { - color: #BF616A; -} - -progress.secondary::-webkit-progress-value { - background: #BF616A; -} - -progress.secondary::-moz-progress-bar { - background: #BF616A; -} - -progress.tertiary { - color: #A3BE8C; -} - -progress.tertiary::-webkit-progress-value { - background: #A3BE8C; -} - -progress.tertiary::-moz-progress-bar { - background: #A3BE8C; -} - -.spinner-donut.secondary { - border: 4px solid #D8DEE9; - border-left: 4px solid #BF616A; -} - -.spinner-donut.tertiary { - border: 4px solid #D8DEE9; - border-left: 4px solid #A3BE8C; -} - -.spinner-donut.large { - border-width: 6px; - width: 32px; - height: 32px; -} - -/* - Definitions for utilities and helper classes. -*/ -.hidden { - display: none !important; -} - -.visually-hidden { - position: absolute !important; - width: 1px !important; - height: 1px !important; - margin: -1px !important; - border: 0 !important; - padding: 0 !important; - clip: rect(0 0 0 0) !important; - -webkit-clip-path: inset(100%) !important; - clip-path: inset(100%) !important; - overflow: hidden !important; -} - -ul.breadcrumbs { - display: -webkit-box; - display: -webkit-flex; - display: flex; - list-style: none; - margin: 10px 8px; - padding: 0; - border-radius: 4px; - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.15); -} - -ul.breadcrumbs li { - -webkit-box-flex: 1; - max-width: 100%; - -webkit-flex-grow: 1; - flex-grow: 1; - -webkit-flex-basis: 0; - flex-basis: 0; - position: relative; - text-align: center; - background: #D8DEE9; - height: 32px; - line-height: 32px; - margin-right: 18px; -} - -ul.breadcrumbs li:before, ul.breadcrumbs li:after { - content: ""; - position: absolute; - top: 0; - width: 0; - height: 0; - border: 0 solid #D8DEE9; - border-width: 16px 8px; -} - -ul.breadcrumbs li:before { - left: -16px; - border-left-color: transparent; -} - -ul.breadcrumbs li:after { - left: 100%; - border-color: transparent; - border-left-color: #D8DEE9; -} - -ul.breadcrumbs li:first-child:before { - border: 0; -} - -ul.breadcrumbs li:last-child { - margin-right: 0; -} - -ul.breadcrumbs li:last-child:after { - border: 0; -} - -.close { - display: inline-block; - width: 32px; - font-family: sans-serif; - font-size: 32px; - line-height: 1; - font-weight: 700; - border-radius: 2rem; - background: rgba(236, 239, 244, 0); - vertical-align: top; - cursor: pointer; - transition: background 0.3s; -} - -.close:hover, .close:focus { - background: #eceff4; -} - -.close:before { - content: "\00D7"; - display: block; - text-align: center; -} - -/* - Custom elements for utilities and helper classes. -*/ -.bordered { - border: 1px solid rgba(0, 0, 0, 0.25) !important; -} - -.rounded { - border-radius: 2px !important; -} - -.circular { - border-radius: 50% !important; -} - -.responsive-margin { - margin: 4px !important; -} - -@media screen and (min-width: 768px) { - .responsive-margin { - margin: 6px !important; - } -} - -@media screen and (min-width: 1280px) { - .responsive-margin { - margin: 8px !important; - } -} - -.responsive-padding { - padding: 2px 4px !important; -} - -@media screen and (min-width: 768px) { - .responsive-padding { - padding: 4px 6px !important; - } -} - -@media screen and (min-width: 1280px) { - .responsive-padding { - padding: 6px 8px !important; - } -} - -.shadow-none { - box-shadow: none !important; -} - -.shadow-small { - box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(0, 0, 0, 0.15) !important; -} - -.shadow-medium { - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.15) !important; -} - -.shadow-large { - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 2px 3px rgba(0, 0, 0, 0.15) !important; -} - -@media screen and (max-width: 767px) { - .hidden-sm { - display: none !important; - } -} - -@media screen and (min-width: 768px) and (max-width: 1279px) { - .hidden-md { - display: none !important; - } -} - -@media screen and (min-width: 1280px) { - .hidden-lg { - display: none !important; - } -} - -@media screen and (max-width: 767px) { - .visually-hidden-sm { - position: absolute !important; - width: 1px !important; - height: 1px !important; - margin: -1px !important; - border: 0 !important; - padding: 0 !important; - clip: rect(0 0 0 0) !important; - -webkit-clip-path: inset(100%) !important; - clip-path: inset(100%) !important; - overflow: hidden !important; - } -} - -@media screen and (min-width: 768px) and (max-width: 1279px) { - .visually-hidden-md { - position: absolute !important; - width: 1px !important; - height: 1px !important; - margin: -1px !important; - border: 0 !important; - padding: 0 !important; - clip: rect(0 0 0 0) !important; - -webkit-clip-path: inset(100%) !important; - clip-path: inset(100%) !important; - overflow: hidden !important; - } -} - -@media screen and (min-width: 1280px) { - .visually-hidden-lg { - position: absolute !important; - width: 1px !important; - height: 1px !important; - margin: -1px !important; - border: 0 !important; - padding: 0 !important; - clip: rect(0 0 0 0) !important; - -webkit-clip-path: inset(100%) !important; - clip-path: inset(100%) !important; - overflow: hidden !important; - } -} + Custom elements for progress bars and spinners. +*/ +progress.primary { + --progress-fore-color: #5e81ac; +} + +progress.secondary { + --progress-fore-color: #bf616a; +} + +progress.tertiary { + --progress-fore-color: #a3be8c; +} + +.spinner.primary { + --spinner-fore-color: #5e81ac; +} + +.spinner.secondary { + --spinner-fore-color: #bf616a; +} + +.spinner.tertiary { + --spinner-fore-color: #a3be8c; +} + +/* + Definitions for icons - powered by Feather (https://feathericons.com/). +*/ +span[class^='icon-'] { + display: inline-block; + height: 1em; + width: 1em; + vertical-align: -0.125em; + background-size: contain; + margin: 0 calc(var(--universal-margin) / 4); +} + +span[class^='icon-'].secondary { + -webkit-filter: invert(25%); + filter: invert(25%); +} + +span[class^='icon-'].inverse { + -webkit-filter: invert(100%); + filter: invert(100%); +} + +span.icon-alert { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%232e3440' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12' y2='16'%3E%3C/line%3E%3C/svg%3E"); +} + +span.icon-bookmark { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%232e3440' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z'%3E%3C/path%3E%3C/svg%3E"); +} + +span.icon-calendar { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%232e3440' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E"); +} + +span.icon-credit { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%232e3440' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='1' y='4' width='22' height='16' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='1' y1='10' x2='23' y2='10'%3E%3C/line%3E%3C/svg%3E"); +} + +span.icon-edit { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%232e3440' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 14.66V20a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h5.34'%3E%3C/path%3E%3Cpolygon points='18 2 22 6 12 16 8 16 8 12 18 2'%3E%3C/polygon%3E%3C/svg%3E"); +} + +span.icon-link { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%232e3440' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'%3E%3C/path%3E%3Cpolyline points='15 3 21 3 21 9'%3E%3C/polyline%3E%3Cline x1='10' y1='14' x2='21' y2='3'%3E%3C/line%3E%3C/svg%3E"); +} + +span.icon-help { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%232e3440' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3'%3E%3C/path%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='17' x2='12' y2='17'%3E%3C/line%3E%3C/svg%3E"); +} + +span.icon-home { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%232e3440' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'%3E%3C/path%3E%3Cpolyline points='9 22 9 12 15 12 15 22'%3E%3C/polyline%3E%3C/svg%3E"); +} + +span.icon-info { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%232e3440' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='16' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='8' x2='12' y2='8'%3E%3C/line%3E%3C/svg%3E"); +} + +span.icon-lock { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%232e3440' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2' ry='2'%3E%3C/rect%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'%3E%3C/path%3E%3C/svg%3E"); +} + +span.icon-mail { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%232e3440' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z'%3E%3C/path%3E%3Cpolyline points='22,6 12,13 2,6'%3E%3C/polyline%3E%3C/svg%3E"); +} + +span.icon-location { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%232e3440' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'%3E%3C/path%3E%3Ccircle cx='12' cy='10' r='3'%3E%3C/circle%3E%3C/svg%3E"); +} + +span.icon-phone { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%232e3440' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'%3E%3C/path%3E%3C/svg%3E"); +} + +span.icon-rss { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%232e3440' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 11a9 9 0 0 1 9 9'%3E%3C/path%3E%3Cpath d='M4 4a16 16 0 0 1 16 16'%3E%3C/path%3E%3Ccircle cx='5' cy='19' r='1'%3E%3C/circle%3E%3C/svg%3E"); +} + +span.icon-search { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%232e3440' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E"); +} + +span.icon-settings { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%232e3440' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'%3E%3C/circle%3E%3Cpath d='M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z'%3E%3C/path%3E%3C/svg%3E"); +} + +span.icon-share { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%232e3440' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='18' cy='5' r='3'%3E%3C/circle%3E%3Ccircle cx='6' cy='12' r='3'%3E%3C/circle%3E%3Ccircle cx='18' cy='19' r='3'%3E%3C/circle%3E%3Cline x1='8.59' y1='13.51' x2='15.42' y2='17.49'%3E%3C/line%3E%3Cline x1='15.41' y1='6.51' x2='8.59' y2='10.49'%3E%3C/line%3E%3C/svg%3E"); +} + +span.icon-cart { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%232e3440' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1'%3E%3C/circle%3E%3Ccircle cx='20' cy='21' r='1'%3E%3C/circle%3E%3Cpath d='M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6'%3E%3C/path%3E%3C/svg%3E"); +} + +span.icon-upload { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%232e3440' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'%3E%3C/path%3E%3Cpolyline points='17 8 12 3 7 8'%3E%3C/polyline%3E%3Cline x1='12' y1='3' x2='12' y2='15'%3E%3C/line%3E%3C/svg%3E"); +} + +span.icon-user { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%232e3440' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'%3E%3C/path%3E%3Ccircle cx='12' cy='7' r='4'%3E%3C/circle%3E%3C/svg%3E"); +} + +/* + Definitions for utilities and helper classes. +*/ +/* Utility module CSS variable definitions */ +:root { + --generic-border-color: rgba(0, 0, 0, 0.3); + --generic-box-shadow: 0 0.25rem 0.25rem 0 rgba(0, 0, 0, 0.125), 0 0.125rem 0.125rem -0.125rem rgba(0, 0, 0, 0.125); +} + +.hidden { + display: none !important; +} + +.visually-hidden { + position: absolute !important; + width: 1px !important; + height: 1px !important; + margin: -1px !important; + border: 0 !important; + padding: 0 !important; + clip: rect(0 0 0 0) !important; + -webkit-clip-path: inset(100%) !important; + clip-path: inset(100%) !important; + overflow: hidden !important; +} + +.bordered { + border: 0.0625rem solid var(--generic-border-color) !important; +} + +.rounded { + border-radius: var(--universal-border-radius) !important; +} + +.circular { + border-radius: 50% !important; +} + +.shadowed { + box-shadow: var(--generic-box-shadow) !important; +} + +.responsive-margin { + margin: calc(var(--universal-margin) / 4) !important; +} + +@media screen and (min-width: 768px) { + .responsive-margin { + margin: calc(var(--universal-margin) / 2) !important; + } +} + +@media screen and (min-width: 1280px) { + .responsive-margin { + margin: var(--universal-margin) !important; + } +} + +.responsive-padding { + padding: calc(var(--universal-padding) / 4) !important; +} + +@media screen and (min-width: 768px) { + .responsive-padding { + padding: calc(var(--universal-padding) / 2) !important; + } +} + +@media screen and (min-width: 1280px) { + .responsive-padding { + padding: var(--universal-padding) !important; + } +} + +@media screen and (max-width: 767px) { + .hidden-sm { + display: none !important; + } +} + +@media screen and (min-width: 768px) and (max-width: 1279px) { + .hidden-md { + display: none !important; + } +} + +@media screen and (min-width: 1280px) { + .hidden-lg { + display: none !important; + } +} + +@media screen and (max-width: 767px) { + .visually-hidden-sm { + position: absolute !important; + width: 1px !important; + height: 1px !important; + margin: -1px !important; + border: 0 !important; + padding: 0 !important; + clip: rect(0 0 0 0) !important; + -webkit-clip-path: inset(100%) !important; + clip-path: inset(100%) !important; + overflow: hidden !important; + } +} + +@media screen and (min-width: 768px) and (max-width: 1279px) { + .visually-hidden-md { + position: absolute !important; + width: 1px !important; + height: 1px !important; + margin: -1px !important; + border: 0 !important; + padding: 0 !important; + clip: rect(0 0 0 0) !important; + -webkit-clip-path: inset(100%) !important; + clip-path: inset(100%) !important; + overflow: hidden !important; + } +} + +@media screen and (min-width: 1280px) { + .visually-hidden-lg { + position: absolute !important; + width: 1px !important; + height: 1px !important; + margin: -1px !important; + border: 0 !important; + padding: 0 !important; + clip: rect(0 0 0 0) !important; + -webkit-clip-path: inset(100%) !important; + clip-path: inset(100%) !important; + overflow: hidden !important; + } +} diff --git a/dist/mini-nord.min.css b/dist/mini-nord.min.css index b6b0705..af09abb 100644 --- a/dist/mini-nord.min.css +++ b/dist/mini-nord.min.css @@ -1 +1 @@ -html{font-size:16px}html,*{font-family:-apple-system, BlinkMacSystemFont,"Segoe UI","Roboto", "Droid Sans","Helvetica Neue", Helvetica, Arial, sans-serif;line-height:1.5;-webkit-text-size-adjust:100%}*{font-size:1em}body{margin:0;color:#2E3440;background:#ECEFF4}article,aside,section,figcaption,figure,main,details,menu{display:block}summary{display:list-item}abbr[title]{border-bottom:none;text-decoration:underline}audio,video{display:inline-block}svg:not(:root){overflow:hidden}input{overflow:visible}img{max-width:100%;height:auto}dfn{font-style:italic}h1,h2,h3,h4,h5,h6{line-height:1.2em;margin:12px 8px;font-weight:500}h1 small,h2 small,h3 small,h4 small,h5 small,h6 small{color:#424242;display:block;margin-top:-4px}h1{font-size:2em}h2{font-size:1.5em}h3{font-size:1.25em}h4{font-size:1.1em}h5{font-size:1em}h6{font-size:.85em}p{margin:1px 8px}ol,ul{margin:1px 8px 10px;padding-left:28px}b,strong{font-weight:700}hr{box-sizing:content-box;border:0;overflow:visible;line-height:1.25em;margin:8px;height:.0625rem;background:linear-gradient(to right, #ECEFF4, #D8DEE9, #ECEFF4)}blockquote{display:block;position:relative;font-style:italic;background:#D8DEE9;margin:8px 10px;padding:6px 10px 24px;border-left:3px solid #616161;border-radius:0 2px 2px 0;box-shadow:0 1px 3px rgba(0,0,0,0.1),0 1px 2px rgba(0,0,0,0.15)}blockquote:after{position:absolute;font-style:normal;font-size:.85em;color:#616161;left:10px;bottom:0;content:"— " attr(cite)}code,kbd,pre,samp{font-family:monospace, monospace}code{border-radius:2px;background:#E5E9F0;padding:2px 4px;box-shadow:0 1px 2px rgba(0,0,0,0.1),0 1px 1px rgba(0,0,0,0.15)}pre{overflow:auto;border-radius:0 2px 2px 0;background:#E5E9F0;padding:12px;margin:8px 10px;border-left:3px solid #5E81AC;box-shadow:0 1px 3px rgba(0,0,0,0.1),0 1px 2px rgba(0,0,0,0.15)}kbd{border-radius:2px;background:#2E3440;color:#ECEFF4;padding:2px 4px;box-shadow:0 1px 2px rgba(0,0,0,0.1),0 1px 1px rgba(0,0,0,0.15)}small,sup,sub{font-size:75%}sup{top:-8px}sub{bottom:-4px}sup,sub{line-height:0;position:relative;vertical-align:baseline}a{color:#88C0D0;text-decoration:underline;opacity:1;transition:opacity 0.3s}a:visited{color:#5E81AC}a:hover,a:focus{opacity:0.75}figcaption{font-size:80%;color:#424242}.container{margin:0 auto;padding:0 10px}.row{box-sizing:border-box;display:-webkit-box;-webkit-box-flex:0;-webkit-box-orient:horizontal;-webkit-box-direction:normal;display:-webkit-flex;display:flex;-webkit-flex:0 1 auto;flex:0 1 auto;-webkit-flex-flow:row wrap;flex-flow:row wrap}.col-sm,[class^='col-sm-'],[class^='col-sm-offset-'],.row[class*='cols-sm-']>*{box-sizing:border-box;-webkit-box-flex:0;-webkit-flex:0 0 auto;flex:0 0 auto;padding:0 4px}.col-sm,.row.cols-sm>*{-webkit-box-flex:1;max-width:100%;-webkit-flex-grow:1;flex-grow:1;-webkit-flex-basis:0;flex-basis:0}.col-sm-1,.row.cols-sm-1>*{max-width:8.33333%;-webkit-flex-basis:8.33333%;flex-basis:8.33333%}.col-sm-2,.row.cols-sm-2>*{max-width:16.66667%;-webkit-flex-basis:16.66667%;flex-basis:16.66667%}.col-sm-3,.row.cols-sm-3>*{max-width:25%;-webkit-flex-basis:25%;flex-basis:25%}.col-sm-4,.row.cols-sm-4>*{max-width:33.33333%;-webkit-flex-basis:33.33333%;flex-basis:33.33333%}.col-sm-5,.row.cols-sm-5>*{max-width:41.66667%;-webkit-flex-basis:41.66667%;flex-basis:41.66667%}.col-sm-6,.row.cols-sm-6>*{max-width:50%;-webkit-flex-basis:50%;flex-basis:50%}.col-sm-7,.row.cols-sm-7>*{max-width:58.33333%;-webkit-flex-basis:58.33333%;flex-basis:58.33333%}.col-sm-8,.row.cols-sm-8>*{max-width:66.66667%;-webkit-flex-basis:66.66667%;flex-basis:66.66667%}.col-sm-9,.row.cols-sm-9>*{max-width:75%;-webkit-flex-basis:75%;flex-basis:75%}.col-sm-10,.row.cols-sm-10>*{max-width:83.33333%;-webkit-flex-basis:83.33333%;flex-basis:83.33333%}.col-sm-11,.row.cols-sm-11>*{max-width:91.66667%;-webkit-flex-basis:91.66667%;flex-basis:91.66667%}.col-sm-12,.row.cols-sm-12>*{max-width:100%;-webkit-flex-basis:100%;flex-basis:100%}.col-sm-offset-0{margin-left:0}.col-sm-offset-1{margin-left:8.33333%}.col-sm-offset-2{margin-left:16.66667%}.col-sm-offset-3{margin-left:25%}.col-sm-offset-4{margin-left:33.33333%}.col-sm-offset-5{margin-left:41.66667%}.col-sm-offset-6{margin-left:50%}.col-sm-offset-7{margin-left:58.33333%}.col-sm-offset-8{margin-left:66.66667%}.col-sm-offset-9{margin-left:75%}.col-sm-offset-10{margin-left:83.33333%}.col-sm-offset-11{margin-left:91.66667%}.col-sm-normal{-webkit-order:initial;order:initial}.col-sm-first{-webkit-order:-999;order:-999}.col-sm-last{-webkit-order:999;order:999}@media screen and (min-width: 768px){.col-md,[class^='col-md-'],[class^='col-md-offset-'],.row[class*='cols-md-']>*{box-sizing:border-box;-webkit-box-flex:0;-webkit-flex:0 0 auto;flex:0 0 auto;padding:0 4px}.col-md,.row.cols-md>*{-webkit-box-flex:1;max-width:100%;-webkit-flex-grow:1;flex-grow:1;-webkit-flex-basis:0;flex-basis:0}.col-md-1,.row.cols-md-1>*{max-width:8.33333%;-webkit-flex-basis:8.33333%;flex-basis:8.33333%}.col-md-2,.row.cols-md-2>*{max-width:16.66667%;-webkit-flex-basis:16.66667%;flex-basis:16.66667%}.col-md-3,.row.cols-md-3>*{max-width:25%;-webkit-flex-basis:25%;flex-basis:25%}.col-md-4,.row.cols-md-4>*{max-width:33.33333%;-webkit-flex-basis:33.33333%;flex-basis:33.33333%}.col-md-5,.row.cols-md-5>*{max-width:41.66667%;-webkit-flex-basis:41.66667%;flex-basis:41.66667%}.col-md-6,.row.cols-md-6>*{max-width:50%;-webkit-flex-basis:50%;flex-basis:50%}.col-md-7,.row.cols-md-7>*{max-width:58.33333%;-webkit-flex-basis:58.33333%;flex-basis:58.33333%}.col-md-8,.row.cols-md-8>*{max-width:66.66667%;-webkit-flex-basis:66.66667%;flex-basis:66.66667%}.col-md-9,.row.cols-md-9>*{max-width:75%;-webkit-flex-basis:75%;flex-basis:75%}.col-md-10,.row.cols-md-10>*{max-width:83.33333%;-webkit-flex-basis:83.33333%;flex-basis:83.33333%}.col-md-11,.row.cols-md-11>*{max-width:91.66667%;-webkit-flex-basis:91.66667%;flex-basis:91.66667%}.col-md-12,.row.cols-md-12>*{max-width:100%;-webkit-flex-basis:100%;flex-basis:100%}.col-md-offset-0{margin-left:0}.col-md-offset-1{margin-left:8.33333%}.col-md-offset-2{margin-left:16.66667%}.col-md-offset-3{margin-left:25%}.col-md-offset-4{margin-left:33.33333%}.col-md-offset-5{margin-left:41.66667%}.col-md-offset-6{margin-left:50%}.col-md-offset-7{margin-left:58.33333%}.col-md-offset-8{margin-left:66.66667%}.col-md-offset-9{margin-left:75%}.col-md-offset-10{margin-left:83.33333%}.col-md-offset-11{margin-left:91.66667%}.col-md-normal{-webkit-order:initial;order:initial}.col-md-first{-webkit-order:-999;order:-999}.col-md-last{-webkit-order:999;order:999}}@media screen and (min-width: 1280px){.col-lg,[class^='col-lg-'],[class^='col-lg-offset-'],.row[class*='cols-lg-']>*{box-sizing:border-box;-webkit-box-flex:0;-webkit-flex:0 0 auto;flex:0 0 auto;padding:0 4px}.col-lg,.row.cols-lg>*{-webkit-box-flex:1;max-width:100%;-webkit-flex-grow:1;flex-grow:1;-webkit-flex-basis:0;flex-basis:0}.col-lg-1,.row.cols-lg-1>*{max-width:8.33333%;-webkit-flex-basis:8.33333%;flex-basis:8.33333%}.col-lg-2,.row.cols-lg-2>*{max-width:16.66667%;-webkit-flex-basis:16.66667%;flex-basis:16.66667%}.col-lg-3,.row.cols-lg-3>*{max-width:25%;-webkit-flex-basis:25%;flex-basis:25%}.col-lg-4,.row.cols-lg-4>*{max-width:33.33333%;-webkit-flex-basis:33.33333%;flex-basis:33.33333%}.col-lg-5,.row.cols-lg-5>*{max-width:41.66667%;-webkit-flex-basis:41.66667%;flex-basis:41.66667%}.col-lg-6,.row.cols-lg-6>*{max-width:50%;-webkit-flex-basis:50%;flex-basis:50%}.col-lg-7,.row.cols-lg-7>*{max-width:58.33333%;-webkit-flex-basis:58.33333%;flex-basis:58.33333%}.col-lg-8,.row.cols-lg-8>*{max-width:66.66667%;-webkit-flex-basis:66.66667%;flex-basis:66.66667%}.col-lg-9,.row.cols-lg-9>*{max-width:75%;-webkit-flex-basis:75%;flex-basis:75%}.col-lg-10,.row.cols-lg-10>*{max-width:83.33333%;-webkit-flex-basis:83.33333%;flex-basis:83.33333%}.col-lg-11,.row.cols-lg-11>*{max-width:91.66667%;-webkit-flex-basis:91.66667%;flex-basis:91.66667%}.col-lg-12,.row.cols-lg-12>*{max-width:100%;-webkit-flex-basis:100%;flex-basis:100%}.col-lg-offset-0{margin-left:0}.col-lg-offset-1{margin-left:8.33333%}.col-lg-offset-2{margin-left:16.66667%}.col-lg-offset-3{margin-left:25%}.col-lg-offset-4{margin-left:33.33333%}.col-lg-offset-5{margin-left:41.66667%}.col-lg-offset-6{margin-left:50%}.col-lg-offset-7{margin-left:58.33333%}.col-lg-offset-8{margin-left:66.66667%}.col-lg-offset-9{margin-left:75%}.col-lg-offset-10{margin-left:83.33333%}.col-lg-offset-11{margin-left:91.66667%}.col-lg-normal{-webkit-order:initial;order:initial}.col-lg-first{-webkit-order:-999;order:-999}.col-lg-last{-webkit-order:999;order:999}}form{border:1px solid #D8DEE9;margin:8px;padding:12px 10px 18px;box-shadow:0 2px 4px rgba(0,0,0,0.1),0 2px 3px rgba(0,0,0,0.15)}fieldset{border:1px solid #D8DEE9;border-radius:2px;margin:2px;padding:6px 8px 8px}legend{box-sizing:border-box;display:table;max-width:100%;white-space:normal;font-weight:700;font-size:.925em;padding:2px 4px}label{padding:4px 8px}.input-group{display:inline-block}.input-group.fluid{display:-webkit-box;-webkit-box-pack:justify;display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center}.input-group.fluid>input{-webkit-box-flex:1;max-width:100%;-webkit-flex-grow:1;flex-grow:1;-webkit-flex-basis:0px;flex-basis:0px}@media screen and (max-width: 767px){.input-group.fluid{-webkit-box-orient:vertical;-webkit-align-items:stretch;align-items:stretch;-webkit-flex-direction:column;flex-direction:column}}.input-group.vertical{display:-webkit-box;-webkit-box-orient:vertical;-webkit-box-pack:justify;display:-webkit-flex;display:flex;-webkit-flex-direction:column;flex-direction:column;-webkit-align-items:stretch;align-items:stretch;-webkit-justify-content:center;justify-content:center}.input-group.vertical>input{-webkit-box-flex:1;max-width:100%;-webkit-flex-grow:1;flex-grow:1;-webkit-flex-basis:0px;flex-basis:0px}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}textarea{overflow:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px}[type="search"]::-webkit-search-cancel-button,[type="search"]::-webkit-search-decoration{-webkit-appearance:none}input:not([type]),[type="text"],[type="email"],[type="number"],[type="search"],[type="password"],[type="url"],[type="tel"],textarea,select{box-sizing:border-box;background:#E5E9F0;color:#2E3440;border:1px solid #D8DEE9;border-radius:1px;margin:2px;padding:8px 12px}input:not([type="button"]):not([type="submit"]):not([type="reset"]):hover,input:not([type="button"]):not([type="submit"]):not([type="reset"]):focus,textarea:hover,textarea:focus,select:hover,select:focus{border-color:#81A1C1;box-shadow:none}input:not([type="button"]):not([type="submit"]):not([type="reset"]):disabled,input:not([type="button"]):not([type="submit"]):not([type="reset"])[disabled],textarea:disabled,textarea[disabled],select:disabled,select[disabled]{cursor:not-allowed;opacity:.75}input:not([type="button"]):not([type="submit"]):not([type="reset"]):invalid,input:not([type="button"]):not([type="submit"]):not([type="reset"]):focus:invalid,textarea:invalid,textarea:focus:invalid,select:invalid,select:focus:invalid{border-color:#BF616A;box-shadow:none}input:not([type="button"]):not([type="submit"]):not([type="reset"])[readonly],textarea[readonly],select[readonly]{background:#e0e0e0;border-color:#bdbdbd}select:not([multiple]):not([size]){padding-right:20px;background:url('data:image/svg+xml, ') no-repeat right;background-color:#E5E9F0;-webkit-appearance:none;-moz-appearance:none;appearance:none}select:not([multiple]):not([size])[readonly]{background-color:#e0e0e0}select{max-width:100%}option{overflow:hidden;text-overflow:ellipsis}::-webkit-input-placeholder{opacity:1;color:#616161}::-moz-placeholder{opacity:1;color:#616161}::-ms-placeholder{opacity:1;color:#616161}::placeholder{opacity:1;color:#616161}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button,html [type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button{overflow:visible;text-transform:none}button,[type="button"],[type="submit"],[type="reset"],a.button,label.button,.button,a[role="button"],label[role="button"],[role="button"]{display:inline-block;background:rgba(216,222,233,0.65);color:#2E3440;border:0;border-radius:2px;padding:8px 12px;margin:8px;box-shadow:0 1px 3px rgba(0,0,0,0.1),0 1px 2px rgba(0,0,0,0.15);text-decoration:none;transition:background 0.3s;cursor:pointer}button:hover,button:focus,[type="button"]:hover,[type="button"]:focus,[type="submit"]:hover,[type="submit"]:focus,[type="reset"]:hover,[type="reset"]:focus,a.button:hover,a.button:focus,label.button:hover,label.button:focus,.button:hover,.button:focus,a[role="button"]:hover,a[role="button"]:focus,label[role="button"]:hover,label[role="button"]:focus,[role="button"]:hover,[role="button"]:focus{background:rgba(216,222,233,0.8);opacity:1}button:disabled,button[disabled],[type="button"]:disabled,[type="button"][disabled],[type="submit"]:disabled,[type="submit"][disabled],[type="reset"]:disabled,[type="reset"][disabled],a.button:disabled,a.button[disabled],label.button:disabled,label.button[disabled],.button:disabled,.button[disabled],a[role="button"]:disabled,a[role="button"][disabled],label[role="button"]:disabled,label[role="button"][disabled],[role="button"]:disabled,[role="button"][disabled]{cursor:not-allowed;opacity:.65}input[type="file"]{border:0;height:1px;width:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%)}.button-group{display:-webkit-box;display:-webkit-flex;display:flex;border:1px solid #9e9e9e;border-radius:2px;margin:8px;box-shadow:0 2px 4px rgba(0,0,0,0.1),0 2px 3px rgba(0,0,0,0.15)}.button-group>button,.button-group [type="button"],.button-group>[type="submit"],.button-group>[type="reset"],.button-group>.button,.button-group>[role="button"]{margin:0;-webkit-box-flex:1;max-width:100%;-webkit-flex:1 1 auto;flex:1 1 auto;text-align:center;border:0;border-radius:0;box-shadow:none}.button-group>:not(:first-child){border-left:1px solid #9e9e9e}@media screen and (max-width: 767px){.button-group{-webkit-box-orient:vertical;-webkit-flex-direction:column;flex-direction:column}.button-group>:not(:first-child){border:0;border-top:1px solid #9e9e9e}}[type="checkbox"],[type="radio"]{height:1px;width:1px;margin:-1px;overflow:hidden;position:absolute;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%)}.input-group [type="checkbox"]+label,.input-group [type="radio"]+label{position:relative;display:inline-block;margin-left:20px;cursor:pointer}.input-group [type="checkbox"]+label:before,.input-group [type="radio"]+label:before{display:inline-block;position:absolute;top:6px;left:0;width:16px;height:16px;content:'';border:1px solid #D8DEE9;border-radius:1px;background:#E5E9F0;color:#2E3440;margin-left:-20px;box-shadow:0 1px 3px rgba(0,0,0,0.1),0 1px 2px rgba(0,0,0,0.15)}.input-group [type="checkbox"]+label:hover:before,.input-group [type="checkbox"]+label:focus:before,.input-group [type="radio"]+label:hover:before,.input-group [type="radio"]+label:focus:before{border-color:#81A1C1}.input-group [type="checkbox"]:focus+label:before,.input-group [type="radio"]:focus+label:before{border-color:#81A1C1}.input-group [type="radio"]+label:before,.input-group [type="radio"]+label:after{border-radius:50%}.input-group [type="checkbox"][disabled]+label,.input-group [type="radio"][disabled]+label,.input-group [type="checkbox"]:disabled+label,.input-group [type="radio"]:disabled+label{cursor:not-allowed}.input-group [type="checkbox"][disabled]+label:before,.input-group [type="checkbox"][disabled]+label:after,.input-group [type="radio"][disabled]+label:before,.input-group [type="radio"][disabled]+label:after,.input-group [type="checkbox"]:disabled+label:before,.input-group [type="checkbox"]:disabled+label:after,.input-group [type="radio"]:disabled+label:before,.input-group [type="radio"]:disabled+label:after{opacity:.75}.input-group [type="checkbox"]:checked+label:after,.input-group [type="radio"]:checked+label:after{position:absolute;background:#2E3440;content:'';margin-left:-20px;top:10px;left:4px;width:10px;height:10px}.input-group [type="checkbox"]+label.switch:before,.input-group [type="radio"]+label.switch:before{top:8px;width:28px;height:14px;border:0;border-radius:8px;background:#D8DEE9;margin-left:-38px;box-shadow:0 1px 3px rgba(0,0,0,0.1),0 1px 2px rgba(0,0,0,0.15)}.input-group [type="checkbox"]+label.switch:after,.input-group [type="radio"]+label.switch:after{display:inline-block;content:'';position:absolute;left:0;width:20px;height:20px;background:#ECEFF4;border-radius:100%;top:5px;margin-left:-48px;box-shadow:0 1px 3px rgba(0,0,0,0.1),0 1px 2px rgba(0,0,0,0.15);transition:left 0.3s}.input-group [type="checkbox"]:checked+label.switch:after,.input-group [type="radio"]:checked+label.switch:after{left:28px;width:20px;height:20px;top:5px;margin-left:-48px;background:#5E81AC}button.primary,[type="button"].primary,[type="submit"].primary,[type="reset"].primary,.button.primary,[role="button"].primary{background:rgba(94,129,172,0.9);color:#ECEFF4}button.primary:hover,button.primary:focus,[type="button"].primary:hover,[type="button"].primary:focus,[type="submit"].primary:hover,[type="submit"].primary:focus,[type="reset"].primary:hover,[type="reset"].primary:focus,.button.primary:hover,.button.primary:focus,[role="button"].primary:hover,[role="button"].primary:focus{background:#5e81ac}button.secondary,[type="button"].secondary,[type="submit"].secondary,[type="reset"].secondary,.button.secondary,[role="button"].secondary{background:rgba(191,97,106,0.85);color:#ECEFF4}button.secondary:hover,button.secondary:focus,[type="button"].secondary:hover,[type="button"].secondary:focus,[type="submit"].secondary:hover,[type="submit"].secondary:focus,[type="reset"].secondary:hover,[type="reset"].secondary:focus,.button.secondary:hover,.button.secondary:focus,[role="button"].secondary:hover,[role="button"].secondary:focus{background:#bf616a}button.tertiary,[type="button"].tertiary,[type="submit"].tertiary,[type="reset"].tertiary,.button.tertiary,[role="button"].tertiary{background:rgba(163,190,140,0.85);color:#ECEFF4}button.tertiary:hover,button.tertiary:focus,[type="button"].tertiary:hover,[type="button"].tertiary:focus,[type="submit"].tertiary:hover,[type="submit"].tertiary:focus,[type="reset"].tertiary:hover,[type="reset"].tertiary:focus,.button.tertiary:hover,.button.tertiary:focus,[role="button"].tertiary:hover,[role="button"].tertiary:focus{background:#a3be8c}button.inverse,[type="button"].inverse,[type="submit"].inverse,[type="reset"].inverse,.button.inverse,[role="button"].inverse{background:#2e3440;color:#ECEFF4}button.inverse:hover,button.inverse:focus,[type="button"].inverse:hover,[type="button"].inverse:focus,[type="submit"].inverse:hover,[type="submit"].inverse:focus,[type="reset"].inverse:hover,[type="reset"].inverse:focus,.button.inverse:hover,.button.inverse:focus,[role="button"].inverse:hover,[role="button"].inverse:focus{background:rgba(46,52,64,0.9)}button.small,[type="button"].small,[type="submit"].small,[type="reset"].small,.button.small,[role="button"].small{border-radius:1px;padding:4px 6px;margin:6px 8px}button.large,[type="button"].large,[type="submit"].large,[type="reset"].large,.button.large,[role="button"].large{border-radius:4px;padding:12px 18px;margin:10px 8px}header{display:block;height:44px;background:#2E3440;color:#ECEFF4;padding:2px 8px;box-shadow:0 2px 4px rgba(0,0,0,0.18),0 2px 3px rgba(0,0,0,0.26);white-space:nowrap;overflow-x:auto;overflow-y:hidden}header .logo{color:#ECEFF4;font-size:1.75em;line-height:1.2;margin:1px 6px 1px 1px;padding:3px 0 0;transition:opacity 0.3s}header button,header [type="button"],header a.button,header label.button,header .button,header a[role="button"],header label[role="button"],header [role="button"]{background:#2E3440;color:#ECEFF4;vertical-align:top;margin:2px 0 0;box-shadow:none}header button:hover,header button:focus,header [type="button"]:hover,header [type="button"]:focus,header a.button:hover,header a.button:focus,header label.button:hover,header label.button:focus,header .button:hover,header .button:focus,header a[role="button"]:hover,header a[role="button"]:focus,header label[role="button"]:hover,header label[role="button"]:focus,header [role="button"]:hover,header [role="button"]:focus{background:#37474f}header .logo,header a.button,header a[role="button"]{text-decoration:none}header.row{box-sizing:content-box}nav{display:block;border:1px solid #D8DEE9;margin:2px;padding:8px 8px 16px 20px;box-shadow:0 2px 4px rgba(0,0,0,0.1),0 2px 3px rgba(0,0,0,0.15)}nav a,nav a:visited{display:block;color:#88C0D0;text-decoration:none}nav .sublink-1{padding-left:12px;position:relative}nav .sublink-1:before{position:absolute;left:3px;top:-1px;content:'';height:100%;border:1px solid #81A1C1;border-left:0}nav .sublink-2{padding-left:24px;position:relative}nav .sublink-2:before{position:absolute;left:3px;top:-1px;content:'';height:100%;border:1px solid #81A1C1;border-left:0}footer{display:block;background:#434C5E;color:#ECEFF4;margin:18px 0 0;padding:22px 10px 12px;font-size:85%}footer a,footer a:visited{color:#88C0D0}header.sticky,footer.sticky{position:-webkit-sticky;position:sticky;z-index:1101}header.sticky{top:0}footer.sticky{bottom:0}.drawer-toggle:before{position:relative;top:7px;font-family:sans-serif;font-size:40px;line-height:.125;content:'\2261'}.drawer{display:block;box-sizing:border-box;position:fixed;top:0;width:320px;height:100vh;overflow-y:auto;background:#ECEFF4;border:1px solid #D8DEE9;margin:0;z-index:1110}.drawer:not(.right){left:-320px;transition:left 0.3s}.drawer.right{right:-320px;transition:right 0.3s}.drawer .close{position:absolute;top:12px;right:4px;z-index:1111;padding:0}@media screen and (max-width: 320px){.drawer{width:100%}}@media screen and (min-width: 768px){.drawer:not(.persistent){position:static;height:100%;z-index:1100}.drawer:not(.persistent) .close{display:none}.drawer-toggle:not(.persistent){display:none}}:checked+.drawer:not(.right){left:0}:checked+.drawer.right{right:0}table{border-collapse:separate;border-spacing:0;border:1px solid #D8DEE9;margin:0 auto;box-shadow:0 2px 4px rgba(0,0,0,0.1),0 2px 3px rgba(0,0,0,0.15)}table caption{font-size:1.5em;margin:6px 8px 12px}table tr{padding:8px}table th,table td{padding:10px;border-left:1px solid #D8DEE9;border-top:1px solid #D8DEE9}table td{background:#ECEFF4}table thead th{border-top:0}table th{background:#D8DEE9}table th:first-child,table td:first-child{border-left:0}@media screen and (max-width: 767px){table:not(.preset){border-collapse:collapse;border:0;width:100%;box-shadow:none}table:not(.preset) thead,table:not(.preset) th{border:0;height:1px;width:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%)}table:not(.preset) tr{display:block;border:1px solid #D8DEE9;box-shadow:0 2px 4px rgba(0,0,0,0.1),0 2px 3px rgba(0,0,0,0.15);margin-bottom:10px}table:not(.preset) td{display:block;border:0;border-bottom:1px solid #D8DEE9;text-align:right;min-height:1.5rem}table:not(.preset) td:before{content:attr(data-label);float:left;font-weight:700}table:not(.preset) td:last-child{border-bottom:0}}@media screen and (min-width: 768px){table.horizontal,table.scrollable{display:-webkit-box;-webkit-box-flex:0;-webkit-box-orient:horizontal;-webkit-box-direction:normal;display:-webkit-flex;display:flex;-webkit-flex:0 1 auto;flex:0 1 auto;-webkit-flex-flow:row wrap;flex-flow:row wrap;padding:8px}table.horizontal caption,table.scrollable caption{-webkit-box-flex:1;max-width:100%;-webkit-flex:0 0 100%;flex:0 0 100%}table.horizontal thead,table.horizontal tbody,table.scrollable thead,table.scrollable tbody{display:-webkit-box;-webkit-box-flex:0;-webkit-box-orient:horizontal;-webkit-box-direction:normal;display:-webkit-flex;display:flex}table.horizontal thead,table.scrollable thead{z-index:999}table.horizontal tr,table.scrollable tr{display:-webkit-box;display:-webkit-flex;display:flex}table.horizontal thead,table.horizontal tbody{-webkit-flex-flow:row nowrap;flex-flow:row nowrap}table.horizontal tbody{overflow:auto;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;-webkit-flex:1 0 0;flex:1 0 0}table.horizontal tr{-webkit-box-flex:1;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;flex-direction:column;-webkit-flex:1 0 auto;flex:1 0 auto}table.horizontal th,table.horizontal td{width:100%;border:1px solid #D8DEE9}table.horizontal th:not(:first-child),table.horizontal td:not(:first-child){border-top:0}table.horizontal th{text-align:right}table.horizontal thead tr:first-child{padding-left:0}table.horizontal tbody tr:first-child>td{padding-left:20px}table.scrollable{overflow:auto;max-height:400px;border:0;padding-top:0}table.scrollable thead,table.scrollable tbody{-webkit-box-flex:1;max-width:100%;-webkit-flex-flow:row wrap;flex-flow:row wrap;-webkit-flex:0 0 100%;flex:0 0 100%;border:1px solid #D8DEE9}table.scrollable tbody{border-top:0;margin-top:-0.0625rem}table.scrollable tr{-webkit-box-flex:0;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-webkit-flex-flow:row wrap;flex-flow:row wrap;-webkit-flex:0 0 100%;flex:0 0 100%;padding:0}table.scrollable th,table.scrollable td{-webkit-box-flex:1;-webkit-flex:1 0 0%;flex:1 0 0%;overflow:hidden;text-overflow:ellipsis}table.scrollable thead{position:sticky;top:0}}@media screen and (max-width: 767px){table.horizontal.preset,table.scrollable.preset{display:-webkit-box;-webkit-box-flex:0;-webkit-box-orient:horizontal;-webkit-box-direction:normal;display:-webkit-flex;display:flex;-webkit-flex:0 1 auto;flex:0 1 auto;-webkit-flex-flow:row wrap;flex-flow:row wrap;padding:8px}table.horizontal.preset caption,table.scrollable.preset caption{-webkit-box-flex:1;max-width:100%;-webkit-flex:0 0 100%;flex:0 0 100%}table.horizontal.preset thead,table.horizontal.preset tbody,table.scrollable.preset thead,table.scrollable.preset tbody{display:-webkit-box;-webkit-box-flex:0;-webkit-box-orient:horizontal;-webkit-box-direction:normal;display:-webkit-flex;display:flex}table.horizontal.preset thead,table.scrollable.preset thead{z-index:999}table.horizontal.preset tr,table.scrollable.preset tr{display:-webkit-box;display:-webkit-flex;display:flex}table.horizontal.preset thead,table.horizontal.preset tbody{-webkit-flex-flow:row nowrap;flex-flow:row nowrap}table.horizontal.preset tbody{overflow:auto;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;-webkit-flex:1 0 0;flex:1 0 0}table.horizontal.preset tr{-webkit-box-flex:1;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;flex-direction:column;-webkit-flex:1 0 auto;flex:1 0 auto}table.horizontal.preset th,table.horizontal.preset td{width:100%;border:1px solid #D8DEE9}table.horizontal.preset th:not(:first-child),table.horizontal.preset td:not(:first-child){border-top:0}table.horizontal.preset th{text-align:right}table.horizontal.preset thead tr:first-child{padding-left:0}table.horizontal.preset tbody tr:first-child>td{padding-left:20px}table.scrollable.preset{overflow:auto;max-height:400px;border:0;padding-top:0}table.scrollable.preset thead,table.scrollable.preset tbody{-webkit-box-flex:1;max-width:100%;-webkit-flex-flow:row wrap;flex-flow:row wrap;-webkit-flex:0 0 100%;flex:0 0 100%;border:1px solid #D8DEE9}table.scrollable.preset tbody{border-top:0;margin-top:-0.0625rem}table.scrollable.preset tr{-webkit-box-flex:0;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-webkit-flex-flow:row wrap;flex-flow:row wrap;-webkit-flex:0 0 100%;flex:0 0 100%;padding:0}table.scrollable.preset th,table.scrollable.preset td{-webkit-box-flex:1;-webkit-flex:1 0 0%;flex:1 0 0%;overflow:hidden;text-overflow:ellipsis}table.scrollable.preset thead{position:sticky;top:0}}table.striped tr:nth-of-type(2n)>td{background:#E5E9F0}@media screen and (max-width: 767px){table.striped:not(.preset) tr:nth-of-type(2n){background:#E5E9F0}}.card{display:-webkit-box;-webkit-box-orient:vertical;-webkit-box-pack:justify;-webkit-box-align:center;display:-webkit-flex;display:flex;-webkit-flex-direction:column;flex-direction:column;-webkit-justify-content:space-between;justify-content:space-between;-webkit-align-self:center;align-self:center;position:relative;width:100%;background:#ECEFF4;border:1px solid #D8DEE9;margin:2px 10px 20px;box-shadow:0 2px 4px rgba(0,0,0,0.18),0 2px 3px rgba(0,0,0,0.26);overflow:hidden}.card>.section{box-sizing:border-box;margin:0;border:0;border-radius:0;border-bottom:1px solid #E5E9F0;padding:6px 8px 6px;width:100%}.card>.section.media{height:200px;padding:0;-o-object-fit:cover;object-fit:cover}.card>.section:last-child{border-bottom:0}@media screen and (min-width: 320px){.card{max-width:320px}}@media screen and (min-width: 480px){.card.large{max-width:480px}}@media screen and (min-width: 240px){.card.small{max-width:240px}}.card.fluid{max-width:100%;width:auto}.card.warning{background:#EBCB8B;border:1px solid #D08770}.card.warning>.section{border-bottom:1px solid #D08770}.card.warning>.section:last-child{border-bottom:0}.card.error{background:#BF616A;color:#ECEFF4;border:1px solid #BF616A}.card.error>.section{border-bottom:1px solid #BF616A}.card.error>.section:last-child{border-bottom:0}.card>.section.darker{background:#D8DEE9}.card>.section.double-padded{padding:10px 12px 10px}.tabs{width:100%;opacity:1;display:-webkit-box;-webkit-box-pack:justify;display:-webkit-flex;display:flex;-webkit-justify-content:space-between;justify-content:space-between;-webkit-flex-wrap:wrap;flex-wrap:wrap;box-shadow:0 2px 4px rgba(0,0,0,0.18),0 2px 3px rgba(0,0,0,0.26)}.tabs>label{-webkit-box-flex:1;-webkit-flex-grow:1;flex-grow:1;-webkit-order:1;order:1;display:inline-block;height:26px;cursor:pointer;transition:background 0.3s;background:#D8DEE9;border:1px solid #9e9e9e;padding:8px 12px}.tabs>label:hover,.tabs>label:focus{background:rgba(216,222,233,0.8)}.tabs>[type="radio"],.tabs>[type="checkbox"]{display:none;visibility:hidden}.tabs>label+div{-webkit-flex-basis:auto;flex-basis:auto;-webkit-order:2;order:2;height:1px;width:1px;margin:-1px;overflow:hidden;position:absolute;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%);-webkit-transform:scaleY(0);transform:scaleY(0);-webkit-transform-origin:top;transform-origin:top;transition:-webkit-transform 0.3s, transform 0.3s}.tabs>label:not(:first-of-type){border-left:0}.tabs>:checked+label{background:#4C566A;color:#ECEFF4;border-bottom-color:#5E81AC}.tabs>:checked+label:hover,.tabs>:checked+label:focus{background:rgba(76,86,106,0.8)}.tabs>:checked+label+div{box-sizing:border-box;position:relative;height:400px;width:100%;overflow:auto;margin:0;-webkit-transform:scaleY(1);transform:scaleY(1);border:1px solid #9e9e9e;border-top:0;padding:8px;clip:auto;-webkit-clip-path:inset(0%);clip-path:inset(0%)}.tabs.stacked{-webkit-box-orient:vertical;-webkit-flex-direction:column;flex-direction:column}.tabs.stacked>label{-webkit-order:initial;order:initial}.tabs.stacked>:checked+label{border:1px solid #9e9e9e}.tabs.stacked>label+div{-webkit-order:initial;order:initial;-webkit-transform-origin:top;transform-origin:top}.tabs.stacked>label:not(:first-of-type){border:1px solid #9e9e9e;border-top:0}.tabs.stacked>:checked+label+div{height:auto}@media screen and (max-width: 767px){.tabs{-webkit-box-orient:vertical;-webkit-flex-direction:column;flex-direction:column}.tabs>label{-webkit-order:initial;order:initial}.tabs>:checked+label{border:1px solid #9e9e9e}.tabs>label+div{-webkit-order:initial;order:initial}.tabs>label:not(:first-of-type){border:1px solid #9e9e9e;border-top:0}}mark{background:#5E81AC;color:#ECEFF4;font-size:95%;line-height:1;border-radius:2px;padding:2px 4px;box-shadow:0 1px 2px rgba(0,0,0,0.1),0 1px 1px rgba(0,0,0,0.15)}mark.inline-block{display:inline-block}.toast{position:fixed;background:#424242;bottom:24px;left:50%;transform:translate(-50%, -50%);color:#ECEFF4;border-radius:32px;padding:12px 24px;z-index:1111}.tooltip{position:relative;display:inline-block}.tooltip:before,.tooltip:after{position:absolute;opacity:0;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%);transition:all 0.3s;z-index:1010;left:50%}.tooltip:not(.bottom):before,.tooltip:not(.bottom):after{bottom:75%}.tooltip.bottom:before,.tooltip.bottom:after{top:75%}.tooltip:hover:before,.tooltip:hover:after,.tooltip:focus:before,.tooltip:focus:after{opacity:1;clip:auto;-webkit-clip-path:inset(0%);clip-path:inset(0%)}.tooltip:before{content:'';background:transparent;border:6px solid transparent;left:50%;left:calc(50% - 6px)}.tooltip:not(.bottom):before{border-top-color:#2E3440}.tooltip.bottom:before{border-bottom-color:#2E3440}.tooltip:after{content:attr(aria-label);background:#2E3440;border-radius:2px;color:#ECEFF4;padding:6px;box-shadow:0 1px 2px rgba(0,0,0,0.1),0 1px 1px rgba(0,0,0,0.15);white-space:nowrap;-webkit-transform:translateX(-50%);transform:translateX(-50%)}.tooltip:not(.bottom):after{margin-bottom:12px}.tooltip.bottom:after{margin-top:12px}.modal{position:fixed;top:0;left:0;display:none;width:100vw;height:100vh;background:rgba(0,0,0,0.45)}.modal .card{margin:0 auto;max-height:50vh;overflow:auto}.modal .card .close{position:absolute;top:12px;right:4px;padding:0}:checked+.modal{display:-webkit-box;-webkit-box-flex:0;display:-webkit-flex;display:flex;-webkit-flex:0 1 auto;flex:0 1 auto;z-index:1200}:checked+.modal .card .close{z-index:1211}mark.secondary{background:#BF616A}mark.tertiary{background:#A3BE8C}mark.tag{border-radius:200px;padding:4px 8px}mark.inline-block{font-size:100%;line-height:1.35;padding:5px}.toast.small{border-radius:24px;padding:8px 16px}.toast.large{border-radius:48px;padding:18px 36px}progress{display:block;vertical-align:baseline;-webkit-appearance:none;-moz-appearance:none;appearance:none;height:14px;width:90%;width:calc(100% - 16px);margin:2px 8px;border:0;border-radius:1px;box-shadow:0 0.5px 1px rgba(0,0,0,0.1),0 0.5px 0.5px rgba(0,0,0,0.15);background:#D8DEE9;color:#5E81AC}progress::-webkit-progress-value{background:#5E81AC;border-top-left-radius:1px;border-bottom-left-radius:1px}progress::-webkit-progress-bar{background:#D8DEE9}progress::-moz-progress-bar{background:#5E81AC;border-top-left-radius:1px;border-bottom-left-radius:1px}progress[value="1000"]::-webkit-progress-value{border-radius:1px}progress[value="1000"]::-moz-progress-bar{border-radius:1px}@-webkit-keyframes spinner-donut-anim{0%{-webkit-transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg)}}@keyframes spinner-donut-anim{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.spinner-donut{display:inline-block;border:4px solid #D8DEE9;border-left:4px solid #5E81AC;border-radius:50%;width:20px;height:20px;-webkit-animation:spinner-donut-anim 1.2s linear infinite;animation:spinner-donut-anim 1.2s linear infinite}progress.inline{display:inline-block;vertical-align:middle;width:60%}progress.secondary{color:#BF616A}progress.secondary::-webkit-progress-value{background:#BF616A}progress.secondary::-moz-progress-bar{background:#BF616A}progress.tertiary{color:#A3BE8C}progress.tertiary::-webkit-progress-value{background:#A3BE8C}progress.tertiary::-moz-progress-bar{background:#A3BE8C}.spinner-donut.secondary{border:4px solid #D8DEE9;border-left:4px solid #BF616A}.spinner-donut.tertiary{border:4px solid #D8DEE9;border-left:4px solid #A3BE8C}.spinner-donut.large{border-width:6px;width:32px;height:32px}.hidden{display:none !important}.visually-hidden{position:absolute !important;width:1px !important;height:1px !important;margin:-1px !important;border:0 !important;padding:0 !important;clip:rect(0 0 0 0) !important;-webkit-clip-path:inset(100%) !important;clip-path:inset(100%) !important;overflow:hidden !important}ul.breadcrumbs{display:-webkit-box;display:-webkit-flex;display:flex;list-style:none;margin:10px 8px;padding:0;border-radius:4px;box-shadow:0 1px 3px rgba(0,0,0,0.1),0 1px 2px rgba(0,0,0,0.15)}ul.breadcrumbs li{-webkit-box-flex:1;max-width:100%;-webkit-flex-grow:1;flex-grow:1;-webkit-flex-basis:0;flex-basis:0;position:relative;text-align:center;background:#D8DEE9;height:32px;line-height:32px;margin-right:18px}ul.breadcrumbs li:before,ul.breadcrumbs li:after{content:"";position:absolute;top:0;width:0;height:0;border:0 solid #D8DEE9;border-width:16px 8px}ul.breadcrumbs li:before{left:-16px;border-left-color:transparent}ul.breadcrumbs li:after{left:100%;border-color:transparent;border-left-color:#D8DEE9}ul.breadcrumbs li:first-child:before{border:0}ul.breadcrumbs li:last-child{margin-right:0}ul.breadcrumbs li:last-child:after{border:0}.close{display:inline-block;width:32px;font-family:sans-serif;font-size:32px;line-height:1;font-weight:700;border-radius:2rem;background:rgba(236,239,244,0);vertical-align:top;cursor:pointer;transition:background 0.3s}.close:hover,.close:focus{background:#eceff4}.close:before{content:"\00D7";display:block;text-align:center}.bordered{border:1px solid rgba(0,0,0,0.25) !important}.rounded{border-radius:2px !important}.circular{border-radius:50% !important}.responsive-margin{margin:4px !important}@media screen and (min-width: 768px){.responsive-margin{margin:6px !important}}@media screen and (min-width: 1280px){.responsive-margin{margin:8px !important}}.responsive-padding{padding:2px 4px !important}@media screen and (min-width: 768px){.responsive-padding{padding:4px 6px !important}}@media screen and (min-width: 1280px){.responsive-padding{padding:6px 8px !important}}.shadow-none{box-shadow:none !important}.shadow-small{box-shadow:0 1px 2px rgba(0,0,0,0.1),0 1px 1px rgba(0,0,0,0.15) !important}.shadow-medium{box-shadow:0 1px 3px rgba(0,0,0,0.1),0 1px 2px rgba(0,0,0,0.15) !important}.shadow-large{box-shadow:0 2px 4px rgba(0,0,0,0.1),0 2px 3px rgba(0,0,0,0.15) !important}@media screen and (max-width: 767px){.hidden-sm{display:none !important}}@media screen and (min-width: 768px) and (max-width: 1279px){.hidden-md{display:none !important}}@media screen and (min-width: 1280px){.hidden-lg{display:none !important}}@media screen and (max-width: 767px){.visually-hidden-sm{position:absolute !important;width:1px !important;height:1px !important;margin:-1px !important;border:0 !important;padding:0 !important;clip:rect(0 0 0 0) !important;-webkit-clip-path:inset(100%) !important;clip-path:inset(100%) !important;overflow:hidden !important}}@media screen and (min-width: 768px) and (max-width: 1279px){.visually-hidden-md{position:absolute !important;width:1px !important;height:1px !important;margin:-1px !important;border:0 !important;padding:0 !important;clip:rect(0 0 0 0) !important;-webkit-clip-path:inset(100%) !important;clip-path:inset(100%) !important;overflow:hidden !important}}@media screen and (min-width: 1280px){.visually-hidden-lg{position:absolute !important;width:1px !important;height:1px !important;margin:-1px !important;border:0 !important;padding:0 !important;clip:rect(0 0 0 0) !important;-webkit-clip-path:inset(100%) !important;clip-path:inset(100%) !important;overflow:hidden !important}} +:root{--fore-color:#2e3440;--secondary-fore-color:#3b4252;--back-color:#eceff4;--secondary-back-color:#e5e9f0;--blockquote-color:#d08770;--pre-color:#b48ead;--border-color:#d8dee9;--secondary-border-color:#e5e9f0;--heading-ratio:1.19;--universal-margin:.5rem;--universal-padding:.5rem;--universal-border-radius:.125rem;--a-link-color:#88c0d0;--a-visited-color:#5e81ac}html{font-size:16px}a,b,del,em,i,ins,q,span,strong,u{font-size:1em}html,*{font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, sans-serif;line-height:1.5;-webkit-text-size-adjust:100%}*{font-size:1rem}body{margin:0;color:var(--fore-color);background:var(--back-color)}details{display:block}summary{display:list-item}abbr[title]{border-bottom:none;text-decoration:underline dotted}input{overflow:visible}img{max-width:100%;height:auto}h1,h2,h3,h4,h5,h6{line-height:1.2;margin:calc(1.5 * var(--universal-margin)) var(--universal-margin);font-weight:500}h1 small,h2 small,h3 small,h4 small,h5 small,h6 small{color:var(--secondary-fore-color);display:block;margin-top:-.25rem}h1{font-size:calc(1rem * var(--heading-ratio) * var(--heading-ratio) * var(--heading-ratio) * var(--heading-ratio))}h2{font-size:calc(1rem * var(--heading-ratio) * var(--heading-ratio) * var(--heading-ratio))}h3{font-size:calc(1rem * var(--heading-ratio) * var(--heading-ratio))}h4{font-size:calc(1rem * var(--heading-ratio))}h5{font-size:1rem}h6{font-size:calc(1rem / var(--heading-ratio))}p{margin:var(--universal-margin)}ol,ul{margin:var(--universal-margin);padding-left:calc(2 * var(--universal-margin))}b,strong{font-weight:700}hr{box-sizing:content-box;border:0;line-height:1.25em;margin:var(--universal-margin);height:.0625rem;background:linear-gradient(to right, transparent, var(--border-color) 20%, var(--border-color) 80%, transparent)}blockquote{display:block;position:relative;font-style:italic;color:var(--secondary-fore-color);margin:var(--universal-margin);padding:calc(3 * var(--universal-padding));border:.0625rem solid var(--secondary-border-color);border-left:.375rem solid var(--blockquote-color);border-radius:0 var(--universal-border-radius) var(--universal-border-radius) 0}blockquote:before{position:absolute;top:calc(0rem - var(--universal-padding));left:0;font-family:sans-serif;font-size:3rem;font-weight:700;content:"\201c";color:var(--blockquote-color)}blockquote[cite]:after{font-style:normal;font-size:.75em;font-weight:700;content:"\a— " attr(cite);white-space:pre}code,kbd,pre,samp{font-family:Menlo, Consolas, monospace;font-size:.85em}code{background:var(--secondary-back-color);border-radius:var(--universal-border-radius);padding:calc(var(--universal-padding) / 4) calc(var(--universal-padding) / 2)}kbd{background:var(--fore-color);color:var(--back-color);border-radius:var(--universal-border-radius);padding:calc(var(--universal-padding) / 4) calc(var(--universal-padding) / 2)}pre{overflow:auto;background:var(--secondary-back-color);padding:calc(1.5 * var(--universal-padding));margin:var(--universal-margin);border:.0625rem solid var(--secondary-border-color);border-left:.25rem solid var(--pre-color);border-radius:0 var(--universal-border-radius) var(--universal-border-radius) 0}sup,sub,code,kbd{line-height:0;position:relative;vertical-align:baseline}small,sup,sub,figcaption{font-size:.75em}sup{top:-.5em}sub{bottom:-.25em}figure{margin:var(--universal-margin)}figcaption{color:var(--secondary-fore-color)}a{text-decoration:none}a:link{color:var(--a-link-color)}a:visited{color:var(--a-visited-color)}a:hover,a:focus{text-decoration:underline}.container{margin:0 auto;padding:0 calc(1.5 * var(--universal-padding))}.row{box-sizing:border-box;display:flex;flex:0 1 auto;flex-flow:row wrap}.col-sm,[class^='col-sm-'],[class^='col-sm-offset-'],.row[class*='cols-sm-']>*{box-sizing:border-box;flex:0 0 auto;padding:0 calc(var(--universal-padding) / 2)}.col-sm,.row.cols-sm>*{max-width:100%;flex-grow:1;flex-basis:0}.col-sm-1,.row.cols-sm-1>*{max-width:8.33333%;flex-basis:8.33333%}.col-sm-offset-0{margin-left:0}.col-sm-2,.row.cols-sm-2>*{max-width:16.66667%;flex-basis:16.66667%}.col-sm-offset-1{margin-left:8.33333%}.col-sm-3,.row.cols-sm-3>*{max-width:25%;flex-basis:25%}.col-sm-offset-2{margin-left:16.66667%}.col-sm-4,.row.cols-sm-4>*{max-width:33.33333%;flex-basis:33.33333%}.col-sm-offset-3{margin-left:25%}.col-sm-5,.row.cols-sm-5>*{max-width:41.66667%;flex-basis:41.66667%}.col-sm-offset-4{margin-left:33.33333%}.col-sm-6,.row.cols-sm-6>*{max-width:50%;flex-basis:50%}.col-sm-offset-5{margin-left:41.66667%}.col-sm-7,.row.cols-sm-7>*{max-width:58.33333%;flex-basis:58.33333%}.col-sm-offset-6{margin-left:50%}.col-sm-8,.row.cols-sm-8>*{max-width:66.66667%;flex-basis:66.66667%}.col-sm-offset-7{margin-left:58.33333%}.col-sm-9,.row.cols-sm-9>*{max-width:75%;flex-basis:75%}.col-sm-offset-8{margin-left:66.66667%}.col-sm-10,.row.cols-sm-10>*{max-width:83.33333%;flex-basis:83.33333%}.col-sm-offset-9{margin-left:75%}.col-sm-11,.row.cols-sm-11>*{max-width:91.66667%;flex-basis:91.66667%}.col-sm-offset-10{margin-left:83.33333%}.col-sm-12,.row.cols-sm-12>*{max-width:100%;flex-basis:100%}.col-sm-offset-11{margin-left:91.66667%}.col-sm-normal{order:initial}.col-sm-first{order:-999}.col-sm-last{order:999}@media screen and (min-width: 768px){.col-md,[class^='col-md-'],[class^='col-md-offset-'],.row[class*='cols-md-']>*{box-sizing:border-box;flex:0 0 auto;padding:0 calc(var(--universal-padding) / 2)}.col-md,.row.cols-md>*{max-width:100%;flex-grow:1;flex-basis:0}.col-md-1,.row.cols-md-1>*{max-width:8.33333%;flex-basis:8.33333%}.col-md-offset-0{margin-left:0}.col-md-2,.row.cols-md-2>*{max-width:16.66667%;flex-basis:16.66667%}.col-md-offset-1{margin-left:8.33333%}.col-md-3,.row.cols-md-3>*{max-width:25%;flex-basis:25%}.col-md-offset-2{margin-left:16.66667%}.col-md-4,.row.cols-md-4>*{max-width:33.33333%;flex-basis:33.33333%}.col-md-offset-3{margin-left:25%}.col-md-5,.row.cols-md-5>*{max-width:41.66667%;flex-basis:41.66667%}.col-md-offset-4{margin-left:33.33333%}.col-md-6,.row.cols-md-6>*{max-width:50%;flex-basis:50%}.col-md-offset-5{margin-left:41.66667%}.col-md-7,.row.cols-md-7>*{max-width:58.33333%;flex-basis:58.33333%}.col-md-offset-6{margin-left:50%}.col-md-8,.row.cols-md-8>*{max-width:66.66667%;flex-basis:66.66667%}.col-md-offset-7{margin-left:58.33333%}.col-md-9,.row.cols-md-9>*{max-width:75%;flex-basis:75%}.col-md-offset-8{margin-left:66.66667%}.col-md-10,.row.cols-md-10>*{max-width:83.33333%;flex-basis:83.33333%}.col-md-offset-9{margin-left:75%}.col-md-11,.row.cols-md-11>*{max-width:91.66667%;flex-basis:91.66667%}.col-md-offset-10{margin-left:83.33333%}.col-md-12,.row.cols-md-12>*{max-width:100%;flex-basis:100%}.col-md-offset-11{margin-left:91.66667%}.col-md-normal{order:initial}.col-md-first{order:-999}.col-md-last{order:999}}@media screen and (min-width: 1280px){.col-lg,[class^='col-lg-'],[class^='col-lg-offset-'],.row[class*='cols-lg-']>*{box-sizing:border-box;flex:0 0 auto;padding:0 calc(var(--universal-padding) / 2)}.col-lg,.row.cols-lg>*{max-width:100%;flex-grow:1;flex-basis:0}.col-lg-1,.row.cols-lg-1>*{max-width:8.33333%;flex-basis:8.33333%}.col-lg-offset-0{margin-left:0}.col-lg-2,.row.cols-lg-2>*{max-width:16.66667%;flex-basis:16.66667%}.col-lg-offset-1{margin-left:8.33333%}.col-lg-3,.row.cols-lg-3>*{max-width:25%;flex-basis:25%}.col-lg-offset-2{margin-left:16.66667%}.col-lg-4,.row.cols-lg-4>*{max-width:33.33333%;flex-basis:33.33333%}.col-lg-offset-3{margin-left:25%}.col-lg-5,.row.cols-lg-5>*{max-width:41.66667%;flex-basis:41.66667%}.col-lg-offset-4{margin-left:33.33333%}.col-lg-6,.row.cols-lg-6>*{max-width:50%;flex-basis:50%}.col-lg-offset-5{margin-left:41.66667%}.col-lg-7,.row.cols-lg-7>*{max-width:58.33333%;flex-basis:58.33333%}.col-lg-offset-6{margin-left:50%}.col-lg-8,.row.cols-lg-8>*{max-width:66.66667%;flex-basis:66.66667%}.col-lg-offset-7{margin-left:58.33333%}.col-lg-9,.row.cols-lg-9>*{max-width:75%;flex-basis:75%}.col-lg-offset-8{margin-left:66.66667%}.col-lg-10,.row.cols-lg-10>*{max-width:83.33333%;flex-basis:83.33333%}.col-lg-offset-9{margin-left:75%}.col-lg-11,.row.cols-lg-11>*{max-width:91.66667%;flex-basis:91.66667%}.col-lg-offset-10{margin-left:83.33333%}.col-lg-12,.row.cols-lg-12>*{max-width:100%;flex-basis:100%}.col-lg-offset-11{margin-left:91.66667%}.col-lg-normal{order:initial}.col-lg-first{order:-999}.col-lg-last{order:999}}:root{--card-back-color:#eceff4;--card-fore-color:#2e3440;--card-border-color:#e5e9f0}.card{display:flex;flex-direction:column;justify-content:space-between;align-self:center;position:relative;width:100%;background:var(--card-back-color);color:var(--card-fore-color);border:.0625rem solid var(--card-border-color);border-radius:var(--universal-border-radius);margin:var(--universal-margin);overflow:hidden}@media screen and (min-width: 320px){.card{max-width:320px}}.card>.section{background:var(--card-back-color);color:var(--card-fore-color);box-sizing:border-box;margin:0;border:0;border-radius:0;border-bottom:.0625rem solid var(--card-border-color);padding:var(--universal-padding);width:100%}.card>.section.media{height:200px;padding:0;-o-object-fit:cover;object-fit:cover}.card>.section:last-child{border-bottom:0}@media screen and (min-width: 240px){.card.small{max-width:240px}}@media screen and (min-width: 480px){.card.large{max-width:480px}}.card.fluid{max-width:100%;width:auto}.card.warning{--card-back-color:#ebcb8b;--card-border-color:#d08770}.card.error{--card-back-color:#bf616a;--card-border-color:#434c5e}.card>.section.dark{--card-back-color:#d8dee9}.card>.section.double-padded{padding:calc(1.5 * var(--universal-padding))}:root{--form-back-color:#e5e9f0;--form-fore-color:#2e3440;--form-border-color:#e5e9f0;--input-back-color:#eceff4;--input-fore-color:#2e3440;--input-border-color:#e5e9f0;--input-focus-color:#88c0d0;--input-invalid-color:#bf616a;--button-back-color:#e5e9f0;--button-hover-back-color:#d8dee9;--button-fore-color:#2e3440;--button-border-color:transparent;--button-hover-border-color:transparent;--button-group-border-color:rgba(124,124,124,0.54)}form{background:var(--form-back-color);color:var(--form-fore-color);border:.0625rem solid var(--form-border-color);border-radius:var(--universal-border-radius);margin:var(--universal-margin);padding:calc(2 * var(--universal-padding)) var(--universal-padding)}fieldset{border:.0625rem solid var(--form-border-color);border-radius:var(--universal-border-radius);margin:calc(var(--universal-margin) / 4);padding:var(--universal-padding)}legend{box-sizing:border-box;display:table;max-width:100%;white-space:normal;font-weight:700;padding:calc(var(--universal-padding) / 2)}label{padding:calc(var(--universal-padding) / 2) var(--universal-padding)}.input-group{display:inline-block}.input-group.fluid{display:flex;align-items:center;justify-content:center}.input-group.fluid>input{max-width:100%;flex-grow:1;flex-basis:0px}@media screen and (max-width: 767px){.input-group.fluid{align-items:stretch;flex-direction:column}}.input-group.vertical{display:flex;align-items:stretch;flex-direction:column}.input-group.vertical>input{max-width:100%;flex-grow:1;flex-basis:0px}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px}[type="search"]::-webkit-search-cancel-button,[type="search"]::-webkit-search-decoration{-webkit-appearance:none}input:not([type]),[type="text"],[type="email"],[type="number"],[type="search"],[type="password"],[type="url"],[type="tel"],[type="checkbox"],[type="radio"],textarea,select{box-sizing:border-box;background:var(--input-back-color);color:var(--input-fore-color);border:.0625rem solid var(--input-border-color);border-radius:var(--universal-border-radius);margin:calc(var(--universal-margin) / 2);padding:var(--universal-padding) calc(1.5 * var(--universal-padding))}input:not([type="button"]):not([type="submit"]):not([type="reset"]):hover,input:not([type="button"]):not([type="submit"]):not([type="reset"]):focus,textarea:hover,textarea:focus,select:hover,select:focus{border-color:var(--input-focus-color);box-shadow:none}input:not([type="button"]):not([type="submit"]):not([type="reset"]):invalid,input:not([type="button"]):not([type="submit"]):not([type="reset"]):focus:invalid,textarea:invalid,textarea:focus:invalid,select:invalid,select:focus:invalid{border-color:var(--input-invalid-color);box-shadow:none}input:not([type="button"]):not([type="submit"]):not([type="reset"])[readonly],textarea[readonly],select[readonly]{background:var(--secondary-back-color)}select{max-width:100%}option{overflow:hidden;text-overflow:ellipsis}[type="checkbox"],[type="radio"]{-webkit-appearance:none;-moz-appearance:none;appearance:none;position:relative;height:calc(1rem + var(--universal-padding) / 2);width:calc(1rem + var(--universal-padding) / 2);vertical-align:text-bottom;padding:0;flex-basis:calc(1rem + var(--universal-padding) / 2) !important;flex-grow:0 !important}[type="checkbox"]:checked:before,[type="radio"]:checked:before{position:absolute}[type="checkbox"]:checked:before{content:'\2713';font-family:sans-serif;font-size:calc(1rem + var(--universal-padding) / 2);top:calc(0rem - var(--universal-padding));left:calc(var(--universal-padding) / 4)}[type="radio"]{border-radius:100%}[type="radio"]:checked:before{border-radius:100%;content:'';top:calc(.0625rem + var(--universal-padding) / 2);left:calc(.0625rem + var(--universal-padding) / 2);background:var(--input-fore-color);width:0.5rem;height:0.5rem}:placeholder-shown{color:var(--input-fore-color)}::-ms-placeholder{color:var(--input-fore-color);opacity:0.54}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button,html [type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button{overflow:visible;text-transform:none}button,[type="button"],[type="submit"],[type="reset"],a.button,label.button,.button,a[role="button"],label[role="button"],[role="button"]{display:inline-block;background:var(--button-back-color);color:var(--button-fore-color);border:.0625rem solid var(--button-border-color);border-radius:var(--universal-border-radius);padding:var(--universal-padding) calc(1.5 * var(--universal-padding));margin:var(--universal-margin);text-decoration:none;cursor:pointer;transition:background 0.3s}button:hover,button:focus,[type="button"]:hover,[type="button"]:focus,[type="submit"]:hover,[type="submit"]:focus,[type="reset"]:hover,[type="reset"]:focus,a.button:hover,a.button:focus,label.button:hover,label.button:focus,.button:hover,.button:focus,a[role="button"]:hover,a[role="button"]:focus,label[role="button"]:hover,label[role="button"]:focus,[role="button"]:hover,[role="button"]:focus{background:var(--button-hover-back-color);border-color:var(--button-hover-border-color)}input:disabled,input[disabled],textarea:disabled,textarea[disabled],select:disabled,select[disabled],button:disabled,button[disabled],.button:disabled,.button[disabled],[role="button"]:disabled,[role="button"][disabled]{cursor:not-allowed;opacity:.75}.button-group{display:flex;border:.0625rem solid var(--button-group-border-color);border-radius:var(--universal-border-radius);margin:var(--universal-margin)}.button-group>button,.button-group [type="button"],.button-group>[type="submit"],.button-group>[type="reset"],.button-group>.button,.button-group>[role="button"]{margin:0;max-width:100%;flex:1 1 auto;text-align:center;border:0;border-radius:0;box-shadow:none}.button-group>:not(:first-child){border-left:.0625rem solid var(--button-group-border-color)}@media screen and (max-width: 767px){.button-group{flex-direction:column}.button-group>:not(:first-child){border:0;border-top:.0625rem solid var(--button-group-border-color)}}button.primary,[type="button"].primary,[type="submit"].primary,[type="reset"].primary,.button.primary,[role="button"].primary{--button-back-color:#5e81ac;--button-fore-color:#eceff4}button.primary:hover,button.primary:focus,[type="button"].primary:hover,[type="button"].primary:focus,[type="submit"].primary:hover,[type="submit"].primary:focus,[type="reset"].primary:hover,[type="reset"].primary:focus,.button.primary:hover,.button.primary:focus,[role="button"].primary:hover,[role="button"].primary:focus{--button-hover-back-color:#5e81ac}button.secondary,[type="button"].secondary,[type="submit"].secondary,[type="reset"].secondary,.button.secondary,[role="button"].secondary{--button-back-color:#bf616a;--button-fore-color:#eceff4}button.secondary:hover,button.secondary:focus,[type="button"].secondary:hover,[type="button"].secondary:focus,[type="submit"].secondary:hover,[type="submit"].secondary:focus,[type="reset"].secondary:hover,[type="reset"].secondary:focus,.button.secondary:hover,.button.secondary:focus,[role="button"].secondary:hover,[role="button"].secondary:focus{--button-hover-back-color:#bf616a}button.tertiary,[type="button"].tertiary,[type="submit"].tertiary,[type="reset"].tertiary,.button.tertiary,[role="button"].tertiary{--button-back-color:#a3be8c;--button-fore-color:#434c5e}button.tertiary:hover,button.tertiary:focus,[type="button"].tertiary:hover,[type="button"].tertiary:focus,[type="submit"].tertiary:hover,[type="submit"].tertiary:focus,[type="reset"].tertiary:hover,[type="reset"].tertiary:focus,.button.tertiary:hover,.button.tertiary:focus,[role="button"].tertiary:hover,[role="button"].tertiary:focus{--button-hover-back-color:#a3be8c}button.inverse,[type="button"].inverse,[type="submit"].inverse,[type="reset"].inverse,.button.inverse,[role="button"].inverse{--button-back-color:#3b4252;--button-fore-color:#eceff4}button.inverse:hover,button.inverse:focus,[type="button"].inverse:hover,[type="button"].inverse:focus,[type="submit"].inverse:hover,[type="submit"].inverse:focus,[type="reset"].inverse:hover,[type="reset"].inverse:focus,.button.inverse:hover,.button.inverse:focus,[role="button"].inverse:hover,[role="button"].inverse:focus{--button-hover-back-color:#2e3440}button.small,[type="button"].small,[type="submit"].small,[type="reset"].small,.button.small,[role="button"].small{padding:calc(0.5 * var(--universal-padding)) calc(0.75 * var(--universal-padding));margin:var(--universal-margin)}button.large,[type="button"].large,[type="submit"].large,[type="reset"].large,.button.large,[role="button"].large{padding:calc(1.5 * var(--universal-padding)) calc(2 * var(--universal-padding));margin:var(--universal-margin)}:root{--header-back-color:#eceff4;--header-hover-back-color:#e5e9f0;--header-fore-color:#3b4252;--header-border-color:#e5e9f0;--nav-back-color:#eceff4;--nav-hover-back-color:#e5e9f0;--nav-fore-color:#3b4252;--nav-border-color:#e5e9f0;--nav-link-color:#88c0d0;--footer-fore-color:#3b4252;--footer-back-color:#eceff4;--footer-border-color:#e5e9f0;--footer-link-color:#88c0d0;--drawer-back-color:#eceff4;--drawer-hover-back-color:#e5e9f0;--drawer-border-color:#e5e9f0;--drawer-close-color:#3b4252}header{height:3.1875rem;background:var(--header-back-color);color:var(--header-fore-color);border-bottom:.0625rem solid var(--header-border-color);padding:calc(var(--universal-padding) / 4) 0;white-space:nowrap;overflow-x:auto;overflow-y:hidden}header.row{box-sizing:content-box}header .logo{color:var(--header-fore-color);font-size:1.75rem;padding:var(--universal-padding) calc(2 * var(--universal-padding));text-decoration:none}header button,header [type="button"],header .button,header [role="button"]{box-sizing:border-box;position:relative;top:calc(0rem - var(--universal-padding) / 4);height:calc(3.1875rem + var(--universal-padding) / 2);background:var(--header-back-color);line-height:calc(3.1875rem - var(--universal-padding) * 1.5);text-align:center;color:var(--header-fore-color);border:0;border-radius:0;margin:0;text-transform:uppercase}header button:hover,header button:focus,header [type="button"]:hover,header [type="button"]:focus,header .button:hover,header .button:focus,header [role="button"]:hover,header [role="button"]:focus{background:var(--header-hover-back-color)}nav{background:var(--nav-back-color);color:var(--nav-fore-color);border:.0625rem solid var(--nav-border-color);border-radius:var(--universal-border-radius);margin:var(--universal-margin)}nav *{padding:var(--universal-padding) calc(1.5 * var(--universal-padding))}nav a,nav a:visited{display:block;color:var(--nav-link-color);border-radius:var(--universal-border-radius);transition:background 0.3s}nav a:hover,nav a:focus,nav a:visited:hover,nav a:visited:focus{text-decoration:none;background:var(--nav-hover-back-color)}nav .sublink-1{position:relative;margin-left:calc(2 * var(--universal-padding))}nav .sublink-1:before{position:absolute;left:calc(var(--universal-padding) - 1 * var(--universal-padding));top:-.0625rem;content:'';height:100%;border:.0625rem solid var(--nav-border-color);border-left:0}nav .sublink-2{position:relative;margin-left:calc(4 * var(--universal-padding))}nav .sublink-2:before{position:absolute;left:calc(var(--universal-padding) - 3 * var(--universal-padding));top:-.0625rem;content:'';height:100%;border:.0625rem solid var(--nav-border-color);border-left:0}footer{background:var(--footer-back-color);color:var(--footer-fore-color);border-top:.0625rem solid var(--footer-border-color);padding:calc(2 * var(--universal-padding)) var(--universal-padding);font-size:.875rem}footer a,footer a:visited{color:var(--footer-link-color)}header.sticky{position:-webkit-sticky;position:sticky;z-index:1101;top:0}footer.sticky{position:-webkit-sticky;position:sticky;z-index:1101;bottom:0}.drawer-toggle:before{display:inline-block;position:relative;vertical-align:bottom;content:'\00a0\2261\00a0';font-family:sans-serif;font-size:1.5em}@media screen and (min-width: 768px){.drawer-toggle:not(.persistent){display:none}}[type="checkbox"].drawer{height:1px;width:1px;margin:-1px;overflow:hidden;position:absolute;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%)}[type="checkbox"].drawer+*{display:block;box-sizing:border-box;position:fixed;top:0;width:320px;height:100vh;overflow-y:auto;background:var(--drawer-back-color);border:.0625rem solid var(--drawer-border-color);border-radius:0;margin:0;z-index:1110;right:-320px;transition:right 0.3s}[type="checkbox"].drawer+* .drawer-close{position:absolute;top:var(--universal-margin);right:var(--universal-margin);z-index:1111;width:2rem;height:2rem;border-radius:var(--universal-border-radius);padding:var(--universal-padding);margin:0;cursor:pointer;transition:background 0.3s}[type="checkbox"].drawer+* .drawer-close:before{display:block;content:'\00D7';color:var(--drawer-close-color);position:relative;font-family:sans-serif;font-size:2rem;line-height:1;text-align:center}[type="checkbox"].drawer+* .drawer-close:hover,[type="checkbox"].drawer+* .drawer-close:focus{background:var(--drawer-hover-back-color)}@media screen and (max-width: 320px){[type="checkbox"].drawer+*{width:100%}}[type="checkbox"].drawer:checked+*{right:0}@media screen and (min-width: 768px){[type="checkbox"].drawer:not(.persistent)+*{position:static;height:100%;z-index:1100}[type="checkbox"].drawer:not(.persistent)+* .drawer-close{display:none}}:root{--table-border-color:#d8dee9;--table-border-separator-color:#434c5e;--table-head-back-color:#e5e9f0;--table-head-fore-color:#2e3440;--table-body-back-color:#eceff4;--table-body-fore-color:#2e3440;--table-body-alt-back-color:#e5e9f0}table{border-collapse:separate;border-spacing:0;margin:0;display:flex;flex:0 1 auto;flex-flow:row wrap;padding:var(--universal-padding);padding-top:0}table caption{font-size:1.5rem;margin:calc(2 * var(--universal-margin)) 0;max-width:100%;flex:0 0 100%}table thead,table tbody{display:flex;flex-flow:row wrap;border:.0625rem solid var(--table-border-color)}table thead{z-index:999;border-radius:var(--universal-border-radius) var(--universal-border-radius) 0 0;border-bottom:.0625rem solid var(--table-border-separator-color)}table tbody{border-top:0;margin-top:calc(0 - var(--universal-margin));border-radius:0 0 var(--universal-border-radius) var(--universal-border-radius)}table tr{display:flex;padding:0}table th,table td{padding:calc(2 * var(--universal-padding))}table th{text-align:left;background:var(--table-head-back-color);color:var(--table-head-fore-color)}table td{background:var(--table-body-back-color);color:var(--table-body-fore-color);border-top:.0625rem solid var(--table-border-color)}table:not(.horizontal){overflow:auto;max-height:400px}table:not(.horizontal) thead,table:not(.horizontal) tbody{max-width:100%;flex:0 0 100%}table:not(.horizontal) tr{flex-flow:row wrap;flex:0 0 100%}table:not(.horizontal) th,table:not(.horizontal) td{flex:1 0 0%;overflow:hidden;text-overflow:ellipsis}table:not(.horizontal) thead{position:sticky;top:0}table:not(.horizontal) tbody tr:first-child td{border-top:0}table.horizontal{border:0}table.horizontal thead,table.horizontal tbody{border:0;flex-flow:row nowrap}table.horizontal tbody{overflow:auto;justify-content:space-between;flex:1 0 0;margin-left:calc( 4 * var(--universal-margin));padding-bottom:calc(var(--universal-padding) / 4)}table.horizontal tr{flex-direction:column;flex:1 0 auto}table.horizontal th,table.horizontal td{width:100%;border:0;border-bottom:.0625rem solid var(--table-border-color)}table.horizontal th:not(:first-child),table.horizontal td:not(:first-child){border-top:0}table.horizontal th{text-align:right;border-left:.0625rem solid var(--table-border-color);border-right:.0625rem solid var(--table-border-separator-color)}table.horizontal thead tr:first-child{padding-left:0}table.horizontal th:first-child,table.horizontal td:first-child{border-top:.0625rem solid var(--table-border-color)}table.horizontal tbody tr:last-child td{border-right:.0625rem solid var(--table-border-color)}table.horizontal tbody tr:last-child td:first-child{border-top-right-radius:0.25rem}table.horizontal tbody tr:last-child td:last-child{border-bottom-right-radius:0.25rem}table.horizontal thead tr:first-child th:first-child{border-top-left-radius:0.25rem}table.horizontal thead tr:first-child th:last-child{border-bottom-left-radius:0.25rem}@media screen and (max-width: 767px){table,table.horizontal{border-collapse:collapse;border:0;width:100%;display:table}table thead,table th,table.horizontal thead,table.horizontal th{border:0;height:1px;width:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%)}table tbody,table.horizontal tbody{border:0;display:table-row-group}table tr,table.horizontal tr{display:block;border:.0625rem solid var(--table-border-color);border-radius:var(--universal-border-radius);background:#fafafa;padding:var(--universal-padding);margin:var(--universal-margin);margin-bottom:calc(2 * var(--universal-margin))}table th,table td,table.horizontal th,table.horizontal td{width:auto}table td,table.horizontal td{display:block;border:0;text-align:right}table td:before,table.horizontal td:before{content:attr(data-label);float:left;font-weight:600}table th:first-child,table td:first-child,table.horizontal th:first-child,table.horizontal td:first-child{border-top:0}table tbody tr:last-child td,table.horizontal tbody tr:last-child td{border-right:0}}:root{--table-body-alt-back-color:#e5e9f0}table.striped tr:nth-of-type(2n)>td{background:var(--table-body-alt-back-color)}@media screen and (max-width: 768px){table.striped tr:nth-of-type(2n){background:var(--table-body-alt-back-color)}}:root{--table-body-hover-back-color:#88c0d0}table.hoverable tr:hover,table.hoverable tr:hover>td,table.hoverable tr:focus,table.hoverable tr:focus>td{background:var(--table-body-hover-back-color)}@media screen and (max-width: 768px){table.hoverable tr:hover,table.hoverable tr:hover>td,table.hoverable tr:focus,table.hoverable tr:focus>td{background:var(--table-body-hover-back-color)}}:root{--mark-back-color:#5e81ac;--mark-fore-color:#fafafa}mark{background:var(--mark-back-color);color:var(--mark-fore-color);font-size:.95em;line-height:1em;border-radius:var(--universal-border-radius);padding:calc(var(--universal-padding) / 4) calc(var(--universal-padding) / 2)}mark.inline-block{display:inline-block;font-size:1em;line-height:1.5;padding:calc(var(--universal-padding) / 2) var(--universal-padding)}:root{--toast-back-color:#2e3440;--toast-fore-color:#eceff4}.toast{position:fixed;bottom:calc(var(--universal-margin) * 3);left:50%;transform:translate(-50%, -50%);z-index:1111;color:var(--toast-fore-color);background:var(--toast-back-color);border-radius:calc(var(--universal-border-radius) * 16);padding:var(--universal-padding) calc(var(--universal-padding) * 3)}:root{--tooltip-back-color:#2e3440;--tooltip-fore-color:#eceff4}.tooltip{position:relative;display:inline-block}.tooltip:before,.tooltip:after{position:absolute;opacity:0;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%);transition:all 0.3s;z-index:1010;left:50%}.tooltip:not(.bottom):before,.tooltip:not(.bottom):after{bottom:75%}.tooltip.bottom:before,.tooltip.bottom:after{top:75%}.tooltip:hover:before,.tooltip:hover:after,.tooltip:focus:before,.tooltip:focus:after{opacity:1;clip:auto;-webkit-clip-path:inset(0%);clip-path:inset(0%)}.tooltip:before{content:'';background:transparent;border:var(--universal-margin) solid transparent;left:calc(50% - var(--universal-margin))}.tooltip:not(.bottom):before{border-top-color:#2e3440}.tooltip.bottom:before{border-bottom-color:#2e3440}.tooltip:after{content:attr(aria-label);color:var(--tooltip-fore-color);background:var(--tooltip-back-color);border-radius:var(--universal-border-radius);padding:var(--universal-padding);white-space:nowrap;transform:translateX(-50%)}.tooltip:not(.bottom):after{margin-bottom:calc(2 * var(--universal-margin))}.tooltip.bottom:after{margin-top:calc(2 * var(--universal-margin))}:root{--modal-overlay-color:rgba(0,0,0,0.45);--modal-close-color:#3b4252;--modal-close-hover-color:#e5e9f0}[type="checkbox"].modal{height:1px;width:1px;margin:-1px;overflow:hidden;position:absolute;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%)}[type="checkbox"].modal+div{position:fixed;top:0;left:0;display:none;width:100vw;height:100vh;background:var(--modal-overlay-color)}[type="checkbox"].modal+div .card{margin:0 auto;max-height:50vh;overflow:auto}[type="checkbox"].modal+div .card .modal-close{position:absolute;top:0;right:0;width:1.75rem;height:1.75rem;border-radius:var(--universal-border-radius);padding:var(--universal-padding);margin:0;cursor:pointer;transition:background 0.3s}[type="checkbox"].modal+div .card .modal-close:before{display:block;content:'\00D7';color:var(--modal-close-color);position:relative;font-family:sans-serif;font-size:1.75rem;line-height:1;text-align:center}[type="checkbox"].modal+div .card .modal-close:hover,[type="checkbox"].modal+div .card .modal-close:focus{background:var(--modal-close-hover-color)}[type="checkbox"].modal:checked+div{display:flex;flex:0 1 auto;z-index:1200}[type="checkbox"].modal:checked+div .card .modal-close{z-index:1211}:root{--collapse-label-back-color:#e5e9f0;--collapse-label-fore-color:#2e3440;--collapse-label-hover-back-color:#e5e9f0;--collapse-selected-label-back-color:#e5e9f0;--collapse-border-color:#e5e9f0;--collapse-content-back-color:#fafafa;--collapse-selected-label-border-color:#88c0d0}.collapse{width:calc(100% - 2 * var(--universal-margin));opacity:1;display:flex;flex-direction:column;margin:var(--universal-margin);border-radius:var(--universal-border-radius)}.collapse>[type="radio"],.collapse>[type="checkbox"]{height:1px;width:1px;margin:-1px;overflow:hidden;position:absolute;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%)}.collapse>label{flex-grow:1;display:inline-block;height:1.5rem;cursor:pointer;transition:background 0.3s;color:var(--collapse-label-fore-color);background:var(--collapse-label-back-color);border:.0625rem solid var(--collapse-border-color);padding:calc(1.5 * var(--universal-padding))}.collapse>label:hover,.collapse>label:focus{background:var(--collapse-label-hover-back-color)}.collapse>label+div{flex-basis:auto;height:1px;width:1px;margin:-1px;overflow:hidden;position:absolute;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%);transition:max-height 0.3s;max-height:1px}.collapse>:checked+label{background:var(--collapse-selected-label-back-color);border-bottom-color:var(--collapse-selected-label-border-color)}.collapse>:checked+label+div{box-sizing:border-box;position:relative;width:100%;height:auto;overflow:auto;margin:0;background:var(--collapse-content-back-color);border:.0625rem solid var(--collapse-border-color);border-top:0;padding:var(--universal-padding);clip:auto;-webkit-clip-path:inset(0%);clip-path:inset(0%);max-height:400px}.collapse>label:not(:first-of-type){border-top:0}.collapse>label:first-of-type{border-radius:var(--universal-border-radius) var(--universal-border-radius) 0 0}.collapse>label:last-of-type:not(:first-of-type){border-radius:0 0 var(--universal-border-radius) var(--universal-border-radius)}.collapse>label:last-of-type:first-of-type{border-radius:var(--universal-border-radius)}.collapse>:checked:last-of-type:not(:first-of-type)+label{border-radius:0}.collapse>:checked:last-of-type+label+div{border-radius:0 0 var(--universal-border-radius) var(--universal-border-radius)}mark.secondary{--mark-back-color:#bf616a}mark.tertiary{--mark-back-color:#a3be8c}mark.tag{padding:calc(var(--universal-padding)/2) var(--universal-padding);border-radius:1em}:root{--progress-back-color:#e5e9f0;--progress-fore-color:#434c5e}progress{display:block;vertical-align:baseline;-webkit-appearance:none;-moz-appearance:none;appearance:none;height:.75rem;width:calc(100% - 2 * var(--universal-margin));margin:var(--universal-margin);border:0;border-radius:calc(2 * var(--universal-border-radius));background:var(--progress-back-color);color:var(--progress-fore-color)}progress::-webkit-progress-value{background:var(--progress-fore-color);border-top-left-radius:calc(2 * var(--universal-border-radius));border-bottom-left-radius:calc(2 * var(--universal-border-radius))}progress::-webkit-progress-bar{background:var(#e5e9f0)}progress::-moz-progress-bar{background:var(--progress-fore-color);border-top-left-radius:calc(2 * var(--universal-border-radius));border-bottom-left-radius:calc(2 * var(--universal-border-radius))}progress[value="1000"]::-webkit-progress-value{border-radius:calc(2 * var(--universal-border-radius))}progress[value="1000"]::-moz-progress-bar{border-radius:calc(2 * var(--universal-border-radius))}progress.inline{display:inline-block;vertical-align:middle;width:60%}:root{--spinner-back-color:#d8dee9;--spinner-fore-color:#434c5e}@keyframes spinner-donut-anim{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.spinner{display:inline-block;margin:var(--universal-margin);border:.25rem solid var(--spinner-back-color);border-left:.25rem solid var(--spinner-fore-color);border-radius:50%;width:1.25rem;height:1.25rem;animation:spinner-donut-anim 1.2s linear infinite}progress.primary{--progress-fore-color:#5e81ac}progress.secondary{--progress-fore-color:#bf616a}progress.tertiary{--progress-fore-color:#a3be8c}.spinner.primary{--spinner-fore-color:#5e81ac}.spinner.secondary{--spinner-fore-color:#bf616a}.spinner.tertiary{--spinner-fore-color:#a3be8c}span[class^='icon-']{display:inline-block;height:1em;width:1em;vertical-align:-0.125em;background-size:contain;margin:0 calc(var(--universal-margin) / 4)}span[class^='icon-'].secondary{-webkit-filter:invert(25%);filter:invert(25%)}span[class^='icon-'].inverse{-webkit-filter:invert(100%);filter:invert(100%)}span.icon-alert{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%232e3440' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12' y2='16'%3E%3C/line%3E%3C/svg%3E")}span.icon-bookmark{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%232e3440' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z'%3E%3C/path%3E%3C/svg%3E")}span.icon-calendar{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%232e3440' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E")}span.icon-credit{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%232e3440' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='1' y='4' width='22' height='16' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='1' y1='10' x2='23' y2='10'%3E%3C/line%3E%3C/svg%3E")}span.icon-edit{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%232e3440' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 14.66V20a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h5.34'%3E%3C/path%3E%3Cpolygon points='18 2 22 6 12 16 8 16 8 12 18 2'%3E%3C/polygon%3E%3C/svg%3E")}span.icon-link{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%232e3440' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'%3E%3C/path%3E%3Cpolyline points='15 3 21 3 21 9'%3E%3C/polyline%3E%3Cline x1='10' y1='14' x2='21' y2='3'%3E%3C/line%3E%3C/svg%3E")}span.icon-help{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%232e3440' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3'%3E%3C/path%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='17' x2='12' y2='17'%3E%3C/line%3E%3C/svg%3E")}span.icon-home{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%232e3440' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'%3E%3C/path%3E%3Cpolyline points='9 22 9 12 15 12 15 22'%3E%3C/polyline%3E%3C/svg%3E")}span.icon-info{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%232e3440' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='16' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='8' x2='12' y2='8'%3E%3C/line%3E%3C/svg%3E")}span.icon-lock{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%232e3440' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2' ry='2'%3E%3C/rect%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'%3E%3C/path%3E%3C/svg%3E")}span.icon-mail{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%232e3440' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z'%3E%3C/path%3E%3Cpolyline points='22,6 12,13 2,6'%3E%3C/polyline%3E%3C/svg%3E")}span.icon-location{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%232e3440' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'%3E%3C/path%3E%3Ccircle cx='12' cy='10' r='3'%3E%3C/circle%3E%3C/svg%3E")}span.icon-phone{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%232e3440' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'%3E%3C/path%3E%3C/svg%3E")}span.icon-rss{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%232e3440' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 11a9 9 0 0 1 9 9'%3E%3C/path%3E%3Cpath d='M4 4a16 16 0 0 1 16 16'%3E%3C/path%3E%3Ccircle cx='5' cy='19' r='1'%3E%3C/circle%3E%3C/svg%3E")}span.icon-search{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%232e3440' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E")}span.icon-settings{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%232e3440' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'%3E%3C/circle%3E%3Cpath d='M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z'%3E%3C/path%3E%3C/svg%3E")}span.icon-share{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%232e3440' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='18' cy='5' r='3'%3E%3C/circle%3E%3Ccircle cx='6' cy='12' r='3'%3E%3C/circle%3E%3Ccircle cx='18' cy='19' r='3'%3E%3C/circle%3E%3Cline x1='8.59' y1='13.51' x2='15.42' y2='17.49'%3E%3C/line%3E%3Cline x1='15.41' y1='6.51' x2='8.59' y2='10.49'%3E%3C/line%3E%3C/svg%3E")}span.icon-cart{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%232e3440' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1'%3E%3C/circle%3E%3Ccircle cx='20' cy='21' r='1'%3E%3C/circle%3E%3Cpath d='M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6'%3E%3C/path%3E%3C/svg%3E")}span.icon-upload{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%232e3440' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'%3E%3C/path%3E%3Cpolyline points='17 8 12 3 7 8'%3E%3C/polyline%3E%3Cline x1='12' y1='3' x2='12' y2='15'%3E%3C/line%3E%3C/svg%3E")}span.icon-user{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%232e3440' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'%3E%3C/path%3E%3Ccircle cx='12' cy='7' r='4'%3E%3C/circle%3E%3C/svg%3E")}:root{--generic-border-color:rgba(0,0,0,0.3);--generic-box-shadow:0 .25rem .25rem 0 rgba(0,0,0,0.125),0 .125rem .125rem -.125rem rgba(0,0,0,0.125)}.hidden{display:none !important}.visually-hidden{position:absolute !important;width:1px !important;height:1px !important;margin:-1px !important;border:0 !important;padding:0 !important;clip:rect(0 0 0 0) !important;-webkit-clip-path:inset(100%) !important;clip-path:inset(100%) !important;overflow:hidden !important}.bordered{border:.0625rem solid var(--generic-border-color) !important}.rounded{border-radius:var(--universal-border-radius) !important}.circular{border-radius:50% !important}.shadowed{box-shadow:var(--generic-box-shadow) !important}.responsive-margin{margin:calc(var(--universal-margin) / 4) !important}@media screen and (min-width: 768px){.responsive-margin{margin:calc(var(--universal-margin) / 2) !important}}@media screen and (min-width: 1280px){.responsive-margin{margin:var(--universal-margin) !important}}.responsive-padding{padding:calc(var(--universal-padding) / 4) !important}@media screen and (min-width: 768px){.responsive-padding{padding:calc(var(--universal-padding) / 2) !important}}@media screen and (min-width: 1280px){.responsive-padding{padding:var(--universal-padding) !important}}@media screen and (max-width: 767px){.hidden-sm{display:none !important}}@media screen and (min-width: 768px) and (max-width: 1279px){.hidden-md{display:none !important}}@media screen and (min-width: 1280px){.hidden-lg{display:none !important}}@media screen and (max-width: 767px){.visually-hidden-sm{position:absolute !important;width:1px !important;height:1px !important;margin:-1px !important;border:0 !important;padding:0 !important;clip:rect(0 0 0 0) !important;-webkit-clip-path:inset(100%) !important;clip-path:inset(100%) !important;overflow:hidden !important}}@media screen and (min-width: 768px) and (max-width: 1279px){.visually-hidden-md{position:absolute !important;width:1px !important;height:1px !important;margin:-1px !important;border:0 !important;padding:0 !important;clip:rect(0 0 0 0) !important;-webkit-clip-path:inset(100%) !important;clip-path:inset(100%) !important;overflow:hidden !important}}@media screen and (min-width: 1280px){.visually-hidden-lg{position:absolute !important;width:1px !important;height:1px !important;margin:-1px !important;border:0 !important;padding:0 !important;clip:rect(0 0 0 0) !important;-webkit-clip-path:inset(100%) !important;clip-path:inset(100%) !important;overflow:hidden !important}} diff --git a/docs/build-docs.js b/docs/build-docs.js index 94c4612..2e6b8f3 100644 --- a/docs/build-docs.js +++ b/docs/build-docs.js @@ -251,3 +251,15 @@ fs.writeFile(custOutputPath, ${customizationEnd}`, function(err) { if(err) return console.log(err); console.log("Flavors file generated!"); } ); + +var miniSassFiles = ['_contextual_mixins', '_contextual', '_core', '_icon', '_input_control_mixins', '_input_control', '_layout_mixins', '_layout', '_navigation', '_progress_mixins', '_progress', '_table', '_utility']; + +miniSassFiles.forEach(f => fs.createReadStream(`./src/mini/${f}.scss`).pipe(fs.createWriteStream(`./docs/v3/mini/${f}.scss`))); + +var flavorFiles = ['mini-default', 'mini-dark', 'mini-nord']; + +flavorFiles.forEach(f => { + fs.createReadStream(`./src/flavors/${f}.scss`).pipe(fs.createWriteStream(`./docs/v3/flavors/${f}.scss`)); + fs.createReadStream(`./dist/${f}.css`).pipe(fs.createWriteStream(`./docs/v3/flavors/${f}.css`)); + fs.createReadStream(`./dist/${f}.min.css`).pipe(fs.createWriteStream(`./docs/v3/flavors/${f}.min.css`)); +}); diff --git a/docs/doc-fragments/premadeFlavors.js b/docs/doc-fragments/premadeFlavors.js index 7d427b4..c0656dd 100644 --- a/docs/doc-fragments/premadeFlavors.js +++ b/docs/doc-fragments/premadeFlavors.js @@ -4,9 +4,8 @@ module.exports = { title: 'Prebuilt flavors', content: `

mini.css comes with a few prebuild flavors out of the box, so you can get started without having to finetune every little aspect of your CSS framework:

` } diff --git a/docs/v3/DEVLOG.md b/docs/v3/DEVLOG.md index fa84baf..25f9c21 100644 --- a/docs/v3/DEVLOG.md +++ b/docs/v3/DEVLOG.md @@ -365,8 +365,6 @@ - Added `jszip`, `sass.js` and `file-saver` to `package.json`. - Used above tools and some code to finish up the `flavors` page generation process. -- *TODO* Add flavors. -- *TODO* Auto-compile SCSS to CSS when generating, copy all `src` to the `docs`. - *TODO* Rebase and release. ## 20180528 @@ -376,3 +374,4 @@ - Replied to issues on the repo. - Updated the flavor generation to show the progress. - Fixed documentation links. +- Updated generator, it now adds and updates the proper folders along with everything else. diff --git a/docs/v3/docs.html b/docs/v3/docs.html index 989e073..b9c8cbc 100644 --- a/docs/v3/docs.html +++ b/docs/v3/docs.html @@ -30,8 +30,8 @@

You can get started using mini.css in one of many ways. It is published on npm and yarn, so you can easily download it, using your preferred package manager:

npm install mini.css
yarn add mini.css

Alternatively, you can use either rawgit or cdnjs to import mini.css into your HTML page's <head> tag:

- 
<link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/v3.0.0-alpha.3/dist/mini-default.min.css">
- 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mini.css/v3.0.0-alpha.3/mini-default.min.css">
+ 
<link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/v3.0.0/dist/mini-default.min.css">
+ 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mini.css/v3.0.0/mini-default.min.css">

After adding mini.css to your project, remember to also add the following line inside your HTML page's <head> tag to utilize the viewport meta tag:

<meta name="viewport" content="width=device-width, initial-scale=1">

mini.css is crafted with long-term support in mind, so expect it to be compatible with all modern browsers, as well as their future versions. However, most legacy and proxy browsers, such as Internet Explorer, Opera Mini, IE Mobile and UC Browser are not officially supported, meaning certain features may not be displayed properly or behave exactly as expected.


@@ -1059,7 +1059,7 @@ el.forEach(e => e.innerHTML = '
' + '' + '' + diff --git a/docs/v3/flavors.html b/docs/v3/flavors.html index 1d91765..9516b76 100644 --- a/docs/v3/flavors.html +++ b/docs/v3/flavors.html @@ -29,10 +29,9 @@

Prebuilt flavors

mini.css comes with a few prebuild flavors out of the box, so you can get started without having to finetune every little aspect of your CSS framework:


Complementary tools

Building a custom flavor can be complex, even with the amount of streamlining we have provided. We have hand-picked the following tools to assist you in creating the perfect flavor for your needs:

@@ -1409,7 +1408,7 @@ flavorFile +='/*\n'; flavorFile +=' Flavor name: Custom (mini-custom)\n'; flavorFile +=' Generated online - https://minicss.org/flavors\n'; - flavorFile +=' mini.css version: v3.0.0-alpha.3\n'; + flavorFile +=' mini.css version: v3.0.0\n'; flavorFile +='*/\n'; flavorFile +='$base-root-font-size: '+flavorData.core.baseRootFontSize+'px; // Root font sizing for all elements (`px` only)\n'; flavorFile +='$base-line-height: '+flavorData.core.baseLineHeight+'; // Line height for most elements\n'; diff --git a/docs/v3/flavors/mini-dark.css b/docs/v3/flavors/mini-dark.css new file mode 100644 index 0000000..89cff06 --- /dev/null +++ b/docs/v3/flavors/mini-dark.css @@ -0,0 +1,2171 @@ +@charset "UTF-8"; +/* + Flavor name: Dark (mini-dark) + Author: Angelos Chalaris (chalarangelo@gmail.com) + Maintainers: Angelos Chalaris + mini.css version: v3.0.0 +*/ +/* + Browsers resets and base typography. +*/ +/* Core module CSS variable definitions */ +:root { + --fore-color: #fdfdfd; + --secondary-fore-color: #f0f0f0; + --back-color: #111; + --secondary-back-color: #222; + --blockquote-color: #f57c00; + --pre-color: #1565c0; + --border-color: #ddd; + --secondary-border-color: #aaa; + --heading-ratio: 1.19; + --universal-margin: 0.5rem; + --universal-padding: 0.5rem; + --universal-border-radius: 0.125rem; + --a-link-color: #0277bd; + --a-visited-color: #01579b; +} + +html { + font-size: 16px; +} + +a, b, del, em, i, ins, q, span, strong, u { + font-size: 1em; +} + +html, * { + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, sans-serif; + line-height: 1.5; + -webkit-text-size-adjust: 100%; +} + +* { + font-size: 1rem; +} + +body { + margin: 0; + color: var(--fore-color); + background: var(--back-color); +} + +details { + display: block; +} + +summary { + display: list-item; +} + +abbr[title] { + border-bottom: none; + text-decoration: underline dotted; +} + +input { + overflow: visible; +} + +img { + max-width: 100%; + height: auto; +} + +h1, h2, h3, h4, h5, h6 { + line-height: 1.2; + margin: calc(1.5 * var(--universal-margin)) var(--universal-margin); + font-weight: 500; +} + +h1 small, h2 small, h3 small, h4 small, h5 small, h6 small { + color: var(--secondary-fore-color); + display: block; + margin-top: -0.25rem; +} + +h1 { + font-size: calc(1rem * var(--heading-ratio) * var(--heading-ratio) * var(--heading-ratio) * var(--heading-ratio)); +} + +h2 { + font-size: calc(1rem * var(--heading-ratio) * var(--heading-ratio) * var(--heading-ratio)); +} + +h3 { + font-size: calc(1rem * var(--heading-ratio) * var(--heading-ratio)); +} + +h4 { + font-size: calc(1rem * var(--heading-ratio)); +} + +h5 { + font-size: 1rem; +} + +h6 { + font-size: calc(1rem / var(--heading-ratio)); +} + +p { + margin: var(--universal-margin); +} + +ol, ul { + margin: var(--universal-margin); + padding-left: calc(2 * var(--universal-margin)); +} + +b, strong { + font-weight: 700; +} + +hr { + box-sizing: content-box; + border: 0; + line-height: 1.25em; + margin: var(--universal-margin); + height: 0.0625rem; + background: linear-gradient(to right, transparent, var(--border-color) 20%, var(--border-color) 80%, transparent); +} + +blockquote { + display: block; + position: relative; + font-style: italic; + color: var(--secondary-fore-color); + margin: var(--universal-margin); + padding: calc(3 * var(--universal-padding)); + border: 0.0625rem solid var(--secondary-border-color); + border-left: 0.375rem solid var(--blockquote-color); + border-radius: 0 var(--universal-border-radius) var(--universal-border-radius) 0; +} + +blockquote:before { + position: absolute; + top: calc(0rem - var(--universal-padding)); + left: 0; + font-family: sans-serif; + font-size: 3rem; + font-weight: 700; + content: "\201c"; + color: var(--blockquote-color); +} + +blockquote[cite]:after { + font-style: normal; + font-size: 0.75em; + font-weight: 700; + content: "\a— " attr(cite); + white-space: pre; +} + +code, kbd, pre, samp { + font-family: Menlo, Consolas, monospace; + font-size: 0.85em; +} + +code { + background: var(--secondary-back-color); + border-radius: var(--universal-border-radius); + padding: calc(var(--universal-padding) / 4) calc(var(--universal-padding) / 2); +} + +kbd { + background: var(--fore-color); + color: var(--back-color); + border-radius: var(--universal-border-radius); + padding: calc(var(--universal-padding) / 4) calc(var(--universal-padding) / 2); +} + +pre { + overflow: auto; + background: var(--secondary-back-color); + padding: calc(1.5 * var(--universal-padding)); + margin: var(--universal-margin); + border: 0.0625rem solid var(--secondary-border-color); + border-left: 0.25rem solid var(--pre-color); + border-radius: 0 var(--universal-border-radius) var(--universal-border-radius) 0; +} + +sup, sub, code, kbd { + line-height: 0; + position: relative; + vertical-align: baseline; +} + +small, sup, sub, figcaption { + font-size: 0.75em; +} + +sup { + top: -0.5em; +} + +sub { + bottom: -0.25em; +} + +figure { + margin: var(--universal-margin); +} + +figcaption { + color: var(--secondary-fore-color); +} + +a { + text-decoration: none; +} + +a:link { + color: var(--a-link-color); +} + +a:visited { + color: var(--a-visited-color); +} + +a:hover, a:focus { + text-decoration: underline; +} + +/* + Definitions for the grid system, cards and containers. +*/ +.container { + margin: 0 auto; + padding: 0 calc(1.5 * var(--universal-padding)); +} + +.row { + box-sizing: border-box; + display: flex; + flex: 0 1 auto; + flex-flow: row wrap; +} + +.col-sm, +[class^='col-sm-'], +[class^='col-sm-offset-'], +.row[class*='cols-sm-'] > * { + box-sizing: border-box; + flex: 0 0 auto; + padding: 0 calc(var(--universal-padding) / 2); +} + +.col-sm, +.row.cols-sm > * { + max-width: 100%; + flex-grow: 1; + flex-basis: 0; +} + +.col-sm-1, +.row.cols-sm-1 > * { + max-width: 8.33333%; + flex-basis: 8.33333%; +} + +.col-sm-offset-0 { + margin-left: 0; +} + +.col-sm-2, +.row.cols-sm-2 > * { + max-width: 16.66667%; + flex-basis: 16.66667%; +} + +.col-sm-offset-1 { + margin-left: 8.33333%; +} + +.col-sm-3, +.row.cols-sm-3 > * { + max-width: 25%; + flex-basis: 25%; +} + +.col-sm-offset-2 { + margin-left: 16.66667%; +} + +.col-sm-4, +.row.cols-sm-4 > * { + max-width: 33.33333%; + flex-basis: 33.33333%; +} + +.col-sm-offset-3 { + margin-left: 25%; +} + +.col-sm-5, +.row.cols-sm-5 > * { + max-width: 41.66667%; + flex-basis: 41.66667%; +} + +.col-sm-offset-4 { + margin-left: 33.33333%; +} + +.col-sm-6, +.row.cols-sm-6 > * { + max-width: 50%; + flex-basis: 50%; +} + +.col-sm-offset-5 { + margin-left: 41.66667%; +} + +.col-sm-7, +.row.cols-sm-7 > * { + max-width: 58.33333%; + flex-basis: 58.33333%; +} + +.col-sm-offset-6 { + margin-left: 50%; +} + +.col-sm-8, +.row.cols-sm-8 > * { + max-width: 66.66667%; + flex-basis: 66.66667%; +} + +.col-sm-offset-7 { + margin-left: 58.33333%; +} + +.col-sm-9, +.row.cols-sm-9 > * { + max-width: 75%; + flex-basis: 75%; +} + +.col-sm-offset-8 { + margin-left: 66.66667%; +} + +.col-sm-10, +.row.cols-sm-10 > * { + max-width: 83.33333%; + flex-basis: 83.33333%; +} + +.col-sm-offset-9 { + margin-left: 75%; +} + +.col-sm-11, +.row.cols-sm-11 > * { + max-width: 91.66667%; + flex-basis: 91.66667%; +} + +.col-sm-offset-10 { + margin-left: 83.33333%; +} + +.col-sm-12, +.row.cols-sm-12 > * { + max-width: 100%; + flex-basis: 100%; +} + +.col-sm-offset-11 { + margin-left: 91.66667%; +} + +.col-sm-normal { + order: initial; +} + +.col-sm-first { + order: -999; +} + +.col-sm-last { + order: 999; +} + +@media screen and (min-width: 768px) { + .col-md, + [class^='col-md-'], + [class^='col-md-offset-'], + .row[class*='cols-md-'] > * { + box-sizing: border-box; + flex: 0 0 auto; + padding: 0 calc(var(--universal-padding) / 2); + } + .col-md, + .row.cols-md > * { + max-width: 100%; + flex-grow: 1; + flex-basis: 0; + } + .col-md-1, + .row.cols-md-1 > * { + max-width: 8.33333%; + flex-basis: 8.33333%; + } + .col-md-offset-0 { + margin-left: 0; + } + .col-md-2, + .row.cols-md-2 > * { + max-width: 16.66667%; + flex-basis: 16.66667%; + } + .col-md-offset-1 { + margin-left: 8.33333%; + } + .col-md-3, + .row.cols-md-3 > * { + max-width: 25%; + flex-basis: 25%; + } + .col-md-offset-2 { + margin-left: 16.66667%; + } + .col-md-4, + .row.cols-md-4 > * { + max-width: 33.33333%; + flex-basis: 33.33333%; + } + .col-md-offset-3 { + margin-left: 25%; + } + .col-md-5, + .row.cols-md-5 > * { + max-width: 41.66667%; + flex-basis: 41.66667%; + } + .col-md-offset-4 { + margin-left: 33.33333%; + } + .col-md-6, + .row.cols-md-6 > * { + max-width: 50%; + flex-basis: 50%; + } + .col-md-offset-5 { + margin-left: 41.66667%; + } + .col-md-7, + .row.cols-md-7 > * { + max-width: 58.33333%; + flex-basis: 58.33333%; + } + .col-md-offset-6 { + margin-left: 50%; + } + .col-md-8, + .row.cols-md-8 > * { + max-width: 66.66667%; + flex-basis: 66.66667%; + } + .col-md-offset-7 { + margin-left: 58.33333%; + } + .col-md-9, + .row.cols-md-9 > * { + max-width: 75%; + flex-basis: 75%; + } + .col-md-offset-8 { + margin-left: 66.66667%; + } + .col-md-10, + .row.cols-md-10 > * { + max-width: 83.33333%; + flex-basis: 83.33333%; + } + .col-md-offset-9 { + margin-left: 75%; + } + .col-md-11, + .row.cols-md-11 > * { + max-width: 91.66667%; + flex-basis: 91.66667%; + } + .col-md-offset-10 { + margin-left: 83.33333%; + } + .col-md-12, + .row.cols-md-12 > * { + max-width: 100%; + flex-basis: 100%; + } + .col-md-offset-11 { + margin-left: 91.66667%; + } + .col-md-normal { + order: initial; + } + .col-md-first { + order: -999; + } + .col-md-last { + order: 999; + } +} + +@media screen and (min-width: 1280px) { + .col-lg, + [class^='col-lg-'], + [class^='col-lg-offset-'], + .row[class*='cols-lg-'] > * { + box-sizing: border-box; + flex: 0 0 auto; + padding: 0 calc(var(--universal-padding) / 2); + } + .col-lg, + .row.cols-lg > * { + max-width: 100%; + flex-grow: 1; + flex-basis: 0; + } + .col-lg-1, + .row.cols-lg-1 > * { + max-width: 8.33333%; + flex-basis: 8.33333%; + } + .col-lg-offset-0 { + margin-left: 0; + } + .col-lg-2, + .row.cols-lg-2 > * { + max-width: 16.66667%; + flex-basis: 16.66667%; + } + .col-lg-offset-1 { + margin-left: 8.33333%; + } + .col-lg-3, + .row.cols-lg-3 > * { + max-width: 25%; + flex-basis: 25%; + } + .col-lg-offset-2 { + margin-left: 16.66667%; + } + .col-lg-4, + .row.cols-lg-4 > * { + max-width: 33.33333%; + flex-basis: 33.33333%; + } + .col-lg-offset-3 { + margin-left: 25%; + } + .col-lg-5, + .row.cols-lg-5 > * { + max-width: 41.66667%; + flex-basis: 41.66667%; + } + .col-lg-offset-4 { + margin-left: 33.33333%; + } + .col-lg-6, + .row.cols-lg-6 > * { + max-width: 50%; + flex-basis: 50%; + } + .col-lg-offset-5 { + margin-left: 41.66667%; + } + .col-lg-7, + .row.cols-lg-7 > * { + max-width: 58.33333%; + flex-basis: 58.33333%; + } + .col-lg-offset-6 { + margin-left: 50%; + } + .col-lg-8, + .row.cols-lg-8 > * { + max-width: 66.66667%; + flex-basis: 66.66667%; + } + .col-lg-offset-7 { + margin-left: 58.33333%; + } + .col-lg-9, + .row.cols-lg-9 > * { + max-width: 75%; + flex-basis: 75%; + } + .col-lg-offset-8 { + margin-left: 66.66667%; + } + .col-lg-10, + .row.cols-lg-10 > * { + max-width: 83.33333%; + flex-basis: 83.33333%; + } + .col-lg-offset-9 { + margin-left: 75%; + } + .col-lg-11, + .row.cols-lg-11 > * { + max-width: 91.66667%; + flex-basis: 91.66667%; + } + .col-lg-offset-10 { + margin-left: 83.33333%; + } + .col-lg-12, + .row.cols-lg-12 > * { + max-width: 100%; + flex-basis: 100%; + } + .col-lg-offset-11 { + margin-left: 91.66667%; + } + .col-lg-normal { + order: initial; + } + .col-lg-first { + order: -999; + } + .col-lg-last { + order: 999; + } +} + +/* Card component CSS variable definitions */ +:root { + --card-back-color: #111; + --card-fore-color: #fdfdfd; + --card-border-color: #aaa; +} + +.card { + display: flex; + flex-direction: column; + justify-content: space-between; + align-self: center; + position: relative; + width: 100%; + background: var(--card-back-color); + color: var(--card-fore-color); + border: 0.0625rem solid var(--card-border-color); + border-radius: var(--universal-border-radius); + margin: var(--universal-margin); + overflow: hidden; +} + +@media screen and (min-width: 320px) { + .card { + max-width: 320px; + } +} + +.card > .section { + background: var(--card-back-color); + color: var(--card-fore-color); + box-sizing: border-box; + margin: 0; + border: 0; + border-radius: 0; + border-bottom: 0.0625rem solid var(--card-border-color); + padding: var(--universal-padding); + width: 100%; +} + +.card > .section.media { + height: 200px; + padding: 0; + -o-object-fit: cover; + object-fit: cover; +} + +.card > .section:last-child { + border-bottom: 0; +} + +/* + Custom elements for card elements. +*/ +@media screen and (min-width: 240px) { + .card.small { + max-width: 240px; + } +} + +@media screen and (min-width: 480px) { + .card.large { + max-width: 480px; + } +} + +.card.fluid { + max-width: 100%; + width: auto; +} + +.card.warning { + --card-back-color: #ffca28; + --card-fore-color: #111; + --card-border-color: #e8b825; +} + +.card.error { + --card-back-color: #b71c1c; + --card-fore-color: #f8f8f8; + --card-border-color: #a71a1a; +} + +.card > .section.dark { + --card-back-color: #e0e0e0; + --card-fore-color: #111; +} + +.card > .section.double-padded { + padding: calc(1.5 * var(--universal-padding)); +} + +/* + Definitions for forms and input elements. +*/ +/* Input_control module CSS variable definitions */ +:root { + --form-back-color: #222; + --form-fore-color: #fdfdfd; + --form-border-color: #aaa; + --input-back-color: #111; + --input-fore-color: #fdfdfd; + --input-border-color: #aaa; + --input-focus-color: #0288d1; + --input-invalid-color: #d32f2f; + --button-back-color: #212121; + --button-hover-back-color: #444; + --button-fore-color: #e2e2e2; + --button-border-color: transparent; + --button-hover-border-color: transparent; + --button-group-border-color: rgba(124, 124, 124, 0.54); +} + +form { + background: var(--form-back-color); + color: var(--form-fore-color); + border: 0.0625rem solid var(--form-border-color); + border-radius: var(--universal-border-radius); + margin: var(--universal-margin); + padding: calc(2 * var(--universal-padding)) var(--universal-padding); +} + +fieldset { + border: 0.0625rem solid var(--form-border-color); + border-radius: var(--universal-border-radius); + margin: calc(var(--universal-margin) / 4); + padding: var(--universal-padding); +} + +legend { + box-sizing: border-box; + display: table; + max-width: 100%; + white-space: normal; + font-weight: 700; + padding: calc(var(--universal-padding) / 2); +} + +label { + padding: calc(var(--universal-padding) / 2) var(--universal-padding); +} + +.input-group { + display: inline-block; +} + +.input-group.fluid { + display: flex; + align-items: center; + justify-content: center; +} + +.input-group.fluid > input { + max-width: 100%; + flex-grow: 1; + flex-basis: 0px; +} + +@media screen and (max-width: 767px) { + .input-group.fluid { + align-items: stretch; + flex-direction: column; + } +} + +.input-group.vertical { + display: flex; + align-items: stretch; + flex-direction: column; +} + +.input-group.vertical > input { + max-width: 100%; + flex-grow: 1; + flex-basis: 0px; +} + +[type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { + height: auto; +} + +[type="search"] { + -webkit-appearance: textfield; + outline-offset: -2px; +} + +[type="search"]::-webkit-search-cancel-button, +[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; +} + +input:not([type]), [type="text"], [type="email"], [type="number"], [type="search"], +[type="password"], [type="url"], [type="tel"], [type="checkbox"], [type="radio"], textarea, select { + box-sizing: border-box; + background: var(--input-back-color); + color: var(--input-fore-color); + border: 0.0625rem solid var(--input-border-color); + border-radius: var(--universal-border-radius); + margin: calc(var(--universal-margin) / 2); + padding: var(--universal-padding) calc(1.5 * var(--universal-padding)); +} + +input:not([type="button"]):not([type="submit"]):not([type="reset"]):hover, input:not([type="button"]):not([type="submit"]):not([type="reset"]):focus, textarea:hover, textarea:focus, select:hover, select:focus { + border-color: var(--input-focus-color); + box-shadow: none; +} + +input:not([type="button"]):not([type="submit"]):not([type="reset"]):invalid, input:not([type="button"]):not([type="submit"]):not([type="reset"]):focus:invalid, textarea:invalid, textarea:focus:invalid, select:invalid, select:focus:invalid { + border-color: var(--input-invalid-color); + box-shadow: none; +} + +input:not([type="button"]):not([type="submit"]):not([type="reset"])[readonly], textarea[readonly], select[readonly] { + background: var(--secondary-back-color); +} + +select { + max-width: 100%; +} + +option { + overflow: hidden; + text-overflow: ellipsis; +} + +[type="checkbox"], [type="radio"] { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + position: relative; + height: calc(1rem + var(--universal-padding) / 2); + width: calc(1rem + var(--universal-padding) / 2); + vertical-align: text-bottom; + padding: 0; + flex-basis: calc(1rem + var(--universal-padding) / 2) !important; + flex-grow: 0 !important; +} + +[type="checkbox"]:checked:before, [type="radio"]:checked:before { + position: absolute; +} + +[type="checkbox"]:checked:before { + content: '\2713'; + font-family: sans-serif; + font-size: calc(1rem + var(--universal-padding) / 2); + top: calc(0rem - var(--universal-padding)); + left: calc(var(--universal-padding) / 4); +} + +[type="radio"] { + border-radius: 100%; +} + +[type="radio"]:checked:before { + border-radius: 100%; + content: ''; + top: calc(0.0625rem + var(--universal-padding) / 2); + left: calc(0.0625rem + var(--universal-padding) / 2); + background: var(--input-fore-color); + width: 0.5rem; + height: 0.5rem; +} + +:placeholder-shown { + color: var(--input-fore-color); +} + +::-ms-placeholder { + color: var(--input-fore-color); + opacity: 0.54; +} + +button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { + border-style: none; + padding: 0; +} + +button, html [type="button"], [type="reset"], [type="submit"] { + -webkit-appearance: button; +} + +button { + overflow: visible; + text-transform: none; +} + +button, [type="button"], [type="submit"], [type="reset"], +a.button, label.button, .button, +a[role="button"], label[role="button"], [role="button"] { + display: inline-block; + background: var(--button-back-color); + color: var(--button-fore-color); + border: 0.0625rem solid var(--button-border-color); + border-radius: var(--universal-border-radius); + padding: var(--universal-padding) calc(1.5 * var(--universal-padding)); + margin: var(--universal-margin); + text-decoration: none; + cursor: pointer; + transition: background 0.3s; +} + +button:hover, button:focus, [type="button"]:hover, [type="button"]:focus, [type="submit"]:hover, [type="submit"]:focus, [type="reset"]:hover, [type="reset"]:focus, +a.button:hover, +a.button:focus, label.button:hover, label.button:focus, .button:hover, .button:focus, +a[role="button"]:hover, +a[role="button"]:focus, label[role="button"]:hover, label[role="button"]:focus, [role="button"]:hover, [role="button"]:focus { + background: var(--button-hover-back-color); + border-color: var(--button-hover-border-color); +} + +input:disabled, input[disabled], textarea:disabled, textarea[disabled], select:disabled, select[disabled], button:disabled, button[disabled], .button:disabled, .button[disabled], [role="button"]:disabled, [role="button"][disabled] { + cursor: not-allowed; + opacity: 0.75; +} + +.button-group { + display: flex; + border: 0.0625rem solid var(--button-group-border-color); + border-radius: var(--universal-border-radius); + margin: var(--universal-margin); +} + +.button-group > button, .button-group [type="button"], .button-group > [type="submit"], .button-group > [type="reset"], +.button-group > .button, .button-group > [role="button"] { + margin: 0; + max-width: 100%; + flex: 1 1 auto; + text-align: center; + border: 0; + border-radius: 0; + box-shadow: none; +} + +.button-group > :not(:first-child) { + border-left: 0.0625rem solid var(--button-group-border-color); +} + +@media screen and (max-width: 767px) { + .button-group { + flex-direction: column; + } + .button-group > :not(:first-child) { + border: 0; + border-top: 0.0625rem solid var(--button-group-border-color); + } +} + +/* + Custom elements for forms and input elements. +*/ +button.primary, [type="button"].primary, [type="submit"].primary, [type="reset"].primary, .button.primary, [role="button"].primary { + --button-back-color: #1976d2; + --button-fore-color: #f8f8f8; +} + +button.primary:hover, button.primary:focus, [type="button"].primary:hover, [type="button"].primary:focus, [type="submit"].primary:hover, [type="submit"].primary:focus, [type="reset"].primary:hover, [type="reset"].primary:focus, .button.primary:hover, .button.primary:focus, [role="button"].primary:hover, [role="button"].primary:focus { + --button-hover-back-color: #1565c0; +} + +button.secondary, [type="button"].secondary, [type="submit"].secondary, [type="reset"].secondary, .button.secondary, [role="button"].secondary { + --button-back-color: #d32f2f; + --button-fore-color: #f8f8f8; +} + +button.secondary:hover, button.secondary:focus, [type="button"].secondary:hover, [type="button"].secondary:focus, [type="submit"].secondary:hover, [type="submit"].secondary:focus, [type="reset"].secondary:hover, [type="reset"].secondary:focus, .button.secondary:hover, .button.secondary:focus, [role="button"].secondary:hover, [role="button"].secondary:focus { + --button-hover-back-color: #c62828; +} + +button.tertiary, [type="button"].tertiary, [type="submit"].tertiary, [type="reset"].tertiary, .button.tertiary, [role="button"].tertiary { + --button-back-color: #308732; + --button-fore-color: #f8f8f8; +} + +button.tertiary:hover, button.tertiary:focus, [type="button"].tertiary:hover, [type="button"].tertiary:focus, [type="submit"].tertiary:hover, [type="submit"].tertiary:focus, [type="reset"].tertiary:hover, [type="reset"].tertiary:focus, .button.tertiary:hover, .button.tertiary:focus, [role="button"].tertiary:hover, [role="button"].tertiary:focus { + --button-hover-back-color: #277529; +} + +button.inverse, [type="button"].inverse, [type="submit"].inverse, [type="reset"].inverse, .button.inverse, [role="button"].inverse { + --button-back-color: #f8f8f8; + --button-fore-color: #212121; +} + +button.inverse:hover, button.inverse:focus, [type="button"].inverse:hover, [type="button"].inverse:focus, [type="submit"].inverse:hover, [type="submit"].inverse:focus, [type="reset"].inverse:hover, [type="reset"].inverse:focus, .button.inverse:hover, .button.inverse:focus, [role="button"].inverse:hover, [role="button"].inverse:focus { + --button-hover-back-color: #f0f0f0; +} + +button.small, [type="button"].small, [type="submit"].small, [type="reset"].small, .button.small, [role="button"].small { + padding: calc(0.5 * var(--universal-padding)) calc(0.75 * var(--universal-padding)); + margin: var(--universal-margin); +} + +button.large, [type="button"].large, [type="submit"].large, [type="reset"].large, .button.large, [role="button"].large { + padding: calc(1.5 * var(--universal-padding)) calc(2 * var(--universal-padding)); + margin: var(--universal-margin); +} + +/* + Definitions for navigation elements. +*/ +/* Navigation module CSS variable definitions */ +:root { + --header-back-color: #111; + --header-hover-back-color: #222; + --header-fore-color: #f0f0f0; + --header-border-color: #aaa; + --nav-back-color: #111; + --nav-hover-back-color: #222; + --nav-fore-color: #f0f0f0; + --nav-border-color: #aaa; + --nav-link-color: #0277bd; + --footer-fore-color: #f0f0f0; + --footer-back-color: #111; + --footer-border-color: #aaa; + --footer-link-color: #0277bd; + --drawer-back-color: #111; + --drawer-hover-back-color: #222; + --drawer-border-color: #aaa; + --drawer-close-color: #f0f0f0; +} + +header { + height: 3.1875rem; + background: var(--header-back-color); + color: var(--header-fore-color); + border-bottom: 0.0625rem solid var(--header-border-color); + padding: calc(var(--universal-padding) / 4) 0; + white-space: nowrap; + overflow-x: auto; + overflow-y: hidden; +} + +header.row { + box-sizing: content-box; +} + +header .logo { + color: var(--header-fore-color); + font-size: 1.75rem; + padding: var(--universal-padding) calc(2 * var(--universal-padding)); + text-decoration: none; +} + +header button, header [type="button"], header .button, header [role="button"] { + box-sizing: border-box; + position: relative; + top: calc(0rem - var(--universal-padding) / 4); + height: calc(3.1875rem + var(--universal-padding) / 2); + background: var(--header-back-color); + line-height: calc(3.1875rem - var(--universal-padding) * 1.5); + text-align: center; + color: var(--header-fore-color); + border: 0; + border-radius: 0; + margin: 0; + text-transform: uppercase; +} + +header button:hover, header button:focus, header [type="button"]:hover, header [type="button"]:focus, header .button:hover, header .button:focus, header [role="button"]:hover, header [role="button"]:focus { + background: var(--header-hover-back-color); +} + +nav { + background: var(--nav-back-color); + color: var(--nav-fore-color); + border: 0.0625rem solid var(--nav-border-color); + border-radius: var(--universal-border-radius); + margin: var(--universal-margin); +} + +nav * { + padding: var(--universal-padding) calc(1.5 * var(--universal-padding)); +} + +nav a, nav a:visited { + display: block; + color: var(--nav-link-color); + border-radius: var(--universal-border-radius); + transition: background 0.3s; +} + +nav a:hover, nav a:focus, nav a:visited:hover, nav a:visited:focus { + text-decoration: none; + background: var(--nav-hover-back-color); +} + +nav .sublink-1 { + position: relative; + margin-left: calc(2 * var(--universal-padding)); +} + +nav .sublink-1:before { + position: absolute; + left: calc(var(--universal-padding) - 1 * var(--universal-padding)); + top: -0.0625rem; + content: ''; + height: 100%; + border: 0.0625rem solid var(--nav-border-color); + border-left: 0; +} + +nav .sublink-2 { + position: relative; + margin-left: calc(4 * var(--universal-padding)); +} + +nav .sublink-2:before { + position: absolute; + left: calc(var(--universal-padding) - 3 * var(--universal-padding)); + top: -0.0625rem; + content: ''; + height: 100%; + border: 0.0625rem solid var(--nav-border-color); + border-left: 0; +} + +footer { + background: var(--footer-back-color); + color: var(--footer-fore-color); + border-top: 0.0625rem solid var(--footer-border-color); + padding: calc(2 * var(--universal-padding)) var(--universal-padding); + font-size: 0.875rem; +} + +footer a, footer a:visited { + color: var(--footer-link-color); +} + +header.sticky { + position: -webkit-sticky; + position: sticky; + z-index: 1101; + top: 0; +} + +footer.sticky { + position: -webkit-sticky; + position: sticky; + z-index: 1101; + bottom: 0; +} + +.drawer-toggle:before { + display: inline-block; + position: relative; + vertical-align: bottom; + content: '\00a0\2261\00a0'; + font-family: sans-serif; + font-size: 1.5em; +} + +@media screen and (min-width: 768px) { + .drawer-toggle:not(.persistent) { + display: none; + } +} + +[type="checkbox"].drawer { + height: 1px; + width: 1px; + margin: -1px; + overflow: hidden; + position: absolute; + clip: rect(0 0 0 0); + -webkit-clip-path: inset(100%); + clip-path: inset(100%); +} + +[type="checkbox"].drawer + * { + display: block; + box-sizing: border-box; + position: fixed; + top: 0; + width: 320px; + height: 100vh; + overflow-y: auto; + background: var(--drawer-back-color); + border: 0.0625rem solid var(--drawer-border-color); + border-radius: 0; + margin: 0; + z-index: 1110; + right: -320px; + transition: right 0.3s; +} + +[type="checkbox"].drawer + * .drawer-close { + position: absolute; + top: var(--universal-margin); + right: var(--universal-margin); + z-index: 1111; + width: 2rem; + height: 2rem; + border-radius: var(--universal-border-radius); + padding: var(--universal-padding); + margin: 0; + cursor: pointer; + transition: background 0.3s; +} + +[type="checkbox"].drawer + * .drawer-close:before { + display: block; + content: '\00D7'; + color: var(--drawer-close-color); + position: relative; + font-family: sans-serif; + font-size: 2rem; + line-height: 1; + text-align: center; +} + +[type="checkbox"].drawer + * .drawer-close:hover, [type="checkbox"].drawer + * .drawer-close:focus { + background: var(--drawer-hover-back-color); +} + +@media screen and (max-width: 320px) { + [type="checkbox"].drawer + * { + width: 100%; + } +} + +[type="checkbox"].drawer:checked + * { + right: 0; +} + +@media screen and (min-width: 768px) { + [type="checkbox"].drawer:not(.persistent) + * { + position: static; + height: 100%; + z-index: 1100; + } + [type="checkbox"].drawer:not(.persistent) + * .drawer-close { + display: none; + } +} + +/* + Definitions for the responsive table component. +*/ +/* Table module CSS variable definitions. */ +:root { + --table-border-color: #ddd; + --table-border-separator-color: #666; + --table-head-back-color: #212121; + --table-head-fore-color: #fdfdfd; + --table-body-back-color: #111; + --table-body-fore-color: #fdfdfd; + --table-body-alt-back-color: #444; +} + +table { + border-collapse: separate; + border-spacing: 0; + margin: 0; + display: flex; + flex: 0 1 auto; + flex-flow: row wrap; + padding: var(--universal-padding); + padding-top: 0; +} + +table caption { + font-size: 1.5rem; + margin: calc(2 * var(--universal-margin)) 0; + max-width: 100%; + flex: 0 0 100%; +} + +table thead, table tbody { + display: flex; + flex-flow: row wrap; + border: 0.0625rem solid var(--table-border-color); +} + +table thead { + z-index: 999; + border-radius: var(--universal-border-radius) var(--universal-border-radius) 0 0; + border-bottom: 0.0625rem solid var(--table-border-separator-color); +} + +table tbody { + border-top: 0; + margin-top: calc(0 - var(--universal-margin)); + border-radius: 0 0 var(--universal-border-radius) var(--universal-border-radius); +} + +table tr { + display: flex; + padding: 0; +} + +table th, table td { + padding: calc(2 * var(--universal-padding)); +} + +table th { + text-align: left; + background: var(--table-head-back-color); + color: var(--table-head-fore-color); +} + +table td { + background: var(--table-body-back-color); + color: var(--table-body-fore-color); + border-top: 0.0625rem solid var(--table-border-color); +} + +table:not(.horizontal) { + overflow: auto; + max-height: 400px; +} + +table:not(.horizontal) thead, table:not(.horizontal) tbody { + max-width: 100%; + flex: 0 0 100%; +} + +table:not(.horizontal) tr { + flex-flow: row wrap; + flex: 0 0 100%; +} + +table:not(.horizontal) th, table:not(.horizontal) td { + flex: 1 0 0%; + overflow: hidden; + text-overflow: ellipsis; +} + +table:not(.horizontal) thead { + position: sticky; + top: 0; +} + +table:not(.horizontal) tbody tr:first-child td { + border-top: 0; +} + +table.horizontal { + border: 0; +} + +table.horizontal thead, table.horizontal tbody { + border: 0; + flex-flow: row nowrap; +} + +table.horizontal tbody { + overflow: auto; + justify-content: space-between; + flex: 1 0 0; + margin-left: calc( 4 * var(--universal-margin)); + padding-bottom: calc(var(--universal-padding) / 4); +} + +table.horizontal tr { + flex-direction: column; + flex: 1 0 auto; +} + +table.horizontal th, table.horizontal td { + width: 100%; + border: 0; + border-bottom: 0.0625rem solid var(--table-border-color); +} + +table.horizontal th:not(:first-child), table.horizontal td:not(:first-child) { + border-top: 0; +} + +table.horizontal th { + text-align: right; + border-left: 0.0625rem solid var(--table-border-color); + border-right: 0.0625rem solid var(--table-border-separator-color); +} + +table.horizontal thead tr:first-child { + padding-left: 0; +} + +table.horizontal th:first-child, table.horizontal td:first-child { + border-top: 0.0625rem solid var(--table-border-color); +} + +table.horizontal tbody tr:last-child td { + border-right: 0.0625rem solid var(--table-border-color); +} + +table.horizontal tbody tr:last-child td:first-child { + border-top-right-radius: 0.25rem; +} + +table.horizontal tbody tr:last-child td:last-child { + border-bottom-right-radius: 0.25rem; +} + +table.horizontal thead tr:first-child th:first-child { + border-top-left-radius: 0.25rem; +} + +table.horizontal thead tr:first-child th:last-child { + border-bottom-left-radius: 0.25rem; +} + +@media screen and (max-width: 767px) { + table, table.horizontal { + border-collapse: collapse; + border: 0; + width: 100%; + display: table; + } + table thead, table th, table.horizontal thead, table.horizontal th { + border: 0; + height: 1px; + width: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + clip: rect(0 0 0 0); + -webkit-clip-path: inset(100%); + clip-path: inset(100%); + } + table tbody, table.horizontal tbody { + border: 0; + display: table-row-group; + } + table tr, table.horizontal tr { + display: block; + border: 0.0625rem solid var(--table-border-color); + border-radius: var(--universal-border-radius); + background: #fafafa; + padding: var(--universal-padding); + margin: var(--universal-margin); + margin-bottom: calc(2 * var(--universal-margin)); + } + table th, table td, table.horizontal th, table.horizontal td { + width: auto; + } + table td, table.horizontal td { + display: block; + border: 0; + text-align: right; + } + table td:before, table.horizontal td:before { + content: attr(data-label); + float: left; + font-weight: 600; + } + table th:first-child, table td:first-child, table.horizontal th:first-child, table.horizontal td:first-child { + border-top: 0; + } + table tbody tr:last-child td, table.horizontal tbody tr:last-child td { + border-right: 0; + } +} + +:root { + --table-body-alt-back-color: #444; +} + +table.striped tr:nth-of-type(2n) > td { + background: var(--table-body-alt-back-color); +} + +@media screen and (max-width: 768px) { + table.striped tr:nth-of-type(2n) { + background: var(--table-body-alt-back-color); + } +} + +:root { + --table-body-hover-back-color: #5c819f; +} + +table.hoverable tr:hover, table.hoverable tr:hover > td, table.hoverable tr:focus, table.hoverable tr:focus > td { + background: var(--table-body-hover-back-color); +} + +@media screen and (max-width: 768px) { + table.hoverable tr:hover, table.hoverable tr:hover > td, table.hoverable tr:focus, table.hoverable tr:focus > td { + background: var(--table-body-hover-back-color); + } +} + +/* + Definitions for contextual background elements, toasts and tooltips. +*/ +/* Contextual module CSS variable definitions */ +:root { + --mark-back-color: #0277bd; + --mark-fore-color: #fafafa; +} + +mark { + background: var(--mark-back-color); + color: var(--mark-fore-color); + font-size: 0.95em; + line-height: 1em; + border-radius: var(--universal-border-radius); + padding: calc(var(--universal-padding) / 4) calc(var(--universal-padding) / 2); +} + +mark.inline-block { + display: inline-block; + font-size: 1em; + line-height: 1.5; + padding: calc(var(--universal-padding) / 2) var(--universal-padding); +} + +:root { + --toast-back-color: #424242; + --toast-fore-color: #fafafa; +} + +.toast { + position: fixed; + bottom: calc(var(--universal-margin) * 3); + left: 50%; + transform: translate(-50%, -50%); + z-index: 1111; + color: var(--toast-fore-color); + background: var(--toast-back-color); + border-radius: calc(var(--universal-border-radius) * 16); + padding: var(--universal-padding) calc(var(--universal-padding) * 3); +} + +:root { + --tooltip-back-color: #fafafa; + --tooltip-fore-color: #212121; +} + +.tooltip { + position: relative; + display: inline-block; +} + +.tooltip:before, .tooltip:after { + position: absolute; + opacity: 0; + clip: rect(0 0 0 0); + -webkit-clip-path: inset(100%); + clip-path: inset(100%); + transition: all 0.3s; + z-index: 1010; + left: 50%; +} + +.tooltip:not(.bottom):before, .tooltip:not(.bottom):after { + bottom: 75%; +} + +.tooltip.bottom:before, .tooltip.bottom:after { + top: 75%; +} + +.tooltip:hover:before, .tooltip:hover:after, .tooltip:focus:before, .tooltip:focus:after { + opacity: 1; + clip: auto; + -webkit-clip-path: inset(0%); + clip-path: inset(0%); +} + +.tooltip:before { + content: ''; + background: transparent; + border: var(--universal-margin) solid transparent; + left: calc(50% - var(--universal-margin)); +} + +.tooltip:not(.bottom):before { + border-top-color: #fafafa; +} + +.tooltip.bottom:before { + border-bottom-color: #fafafa; +} + +.tooltip:after { + content: attr(aria-label); + color: var(--tooltip-fore-color); + background: var(--tooltip-back-color); + border-radius: var(--universal-border-radius); + padding: var(--universal-padding); + white-space: nowrap; + transform: translateX(-50%); +} + +.tooltip:not(.bottom):after { + margin-bottom: calc(2 * var(--universal-margin)); +} + +.tooltip.bottom:after { + margin-top: calc(2 * var(--universal-margin)); +} + +:root { + --modal-overlay-color: rgba(0, 0, 0, 0.45); + --modal-close-color: #f0f0f0; + --modal-close-hover-color: #222; +} + +[type="checkbox"].modal { + height: 1px; + width: 1px; + margin: -1px; + overflow: hidden; + position: absolute; + clip: rect(0 0 0 0); + -webkit-clip-path: inset(100%); + clip-path: inset(100%); +} + +[type="checkbox"].modal + div { + position: fixed; + top: 0; + left: 0; + display: none; + width: 100vw; + height: 100vh; + background: var(--modal-overlay-color); +} + +[type="checkbox"].modal + div .card { + margin: 0 auto; + max-height: 50vh; + overflow: auto; +} + +[type="checkbox"].modal + div .card .modal-close { + position: absolute; + top: 0; + right: 0; + width: 1.75rem; + height: 1.75rem; + border-radius: var(--universal-border-radius); + padding: var(--universal-padding); + margin: 0; + cursor: pointer; + transition: background 0.3s; +} + +[type="checkbox"].modal + div .card .modal-close:before { + display: block; + content: '\00D7'; + color: var(--modal-close-color); + position: relative; + font-family: sans-serif; + font-size: 1.75rem; + line-height: 1; + text-align: center; +} + +[type="checkbox"].modal + div .card .modal-close:hover, [type="checkbox"].modal + div .card .modal-close:focus { + background: var(--modal-close-hover-color); +} + +[type="checkbox"].modal:checked + div { + display: flex; + flex: 0 1 auto; + z-index: 1200; +} + +[type="checkbox"].modal:checked + div .card .modal-close { + z-index: 1211; +} + +:root { + --collapse-label-back-color: #111; + --collapse-label-fore-color: #fafafa; + --collapse-label-hover-back-color: #222; + --collapse-selected-label-back-color: #444; + --collapse-border-color: #aaa; + --collapse-content-back-color: #212121; + --collapse-selected-label-border-color: #0277bd; +} + +.collapse { + width: calc(100% - 2 * var(--universal-margin)); + opacity: 1; + display: flex; + flex-direction: column; + margin: var(--universal-margin); + border-radius: var(--universal-border-radius); +} + +.collapse > [type="radio"], .collapse > [type="checkbox"] { + height: 1px; + width: 1px; + margin: -1px; + overflow: hidden; + position: absolute; + clip: rect(0 0 0 0); + -webkit-clip-path: inset(100%); + clip-path: inset(100%); +} + +.collapse > label { + flex-grow: 1; + display: inline-block; + height: 1.5rem; + cursor: pointer; + transition: background 0.3s; + color: var(--collapse-label-fore-color); + background: var(--collapse-label-back-color); + border: 0.0625rem solid var(--collapse-border-color); + padding: calc(1.5 * var(--universal-padding)); +} + +.collapse > label:hover, .collapse > label:focus { + background: var(--collapse-label-hover-back-color); +} + +.collapse > label + div { + flex-basis: auto; + height: 1px; + width: 1px; + margin: -1px; + overflow: hidden; + position: absolute; + clip: rect(0 0 0 0); + -webkit-clip-path: inset(100%); + clip-path: inset(100%); + transition: max-height 0.3s; + max-height: 1px; +} + +.collapse > :checked + label { + background: var(--collapse-selected-label-back-color); + border-bottom-color: var(--collapse-selected-label-border-color); +} + +.collapse > :checked + label + div { + box-sizing: border-box; + position: relative; + width: 100%; + height: auto; + overflow: auto; + margin: 0; + background: var(--collapse-content-back-color); + border: 0.0625rem solid var(--collapse-border-color); + border-top: 0; + padding: var(--universal-padding); + clip: auto; + -webkit-clip-path: inset(0%); + clip-path: inset(0%); + max-height: 400px; +} + +.collapse > label:not(:first-of-type) { + border-top: 0; +} + +.collapse > label:first-of-type { + border-radius: var(--universal-border-radius) var(--universal-border-radius) 0 0; +} + +.collapse > label:last-of-type:not(:first-of-type) { + border-radius: 0 0 var(--universal-border-radius) var(--universal-border-radius); +} + +.collapse > label:last-of-type:first-of-type { + border-radius: var(--universal-border-radius); +} + +.collapse > :checked:last-of-type:not(:first-of-type) + label { + border-radius: 0; +} + +.collapse > :checked:last-of-type + label + div { + border-radius: 0 0 var(--universal-border-radius) var(--universal-border-radius); +} + +/* + Custom elements for contextual background elements, toasts and tooltips. +*/ +mark.secondary { + --mark-back-color: #d32f2f; +} + +mark.tertiary { + --mark-back-color: #308732; +} + +mark.tag { + padding: calc(var(--universal-padding)/2) var(--universal-padding); + border-radius: 1em; +} + +/* + Definitions for progress elements and spinners. +*/ +/* Progess module CSS variable definitions */ +:root { + --progress-back-color: #aaa; + --progress-fore-color: #555; +} + +progress { + display: block; + vertical-align: baseline; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + height: 0.75rem; + width: calc(100% - 2 * var(--universal-margin)); + margin: var(--universal-margin); + border: 0; + border-radius: calc(2 * var(--universal-border-radius)); + background: var(--progress-back-color); + color: var(--progress-fore-color); +} + +progress::-webkit-progress-value { + background: var(--progress-fore-color); + border-top-left-radius: calc(2 * var(--universal-border-radius)); + border-bottom-left-radius: calc(2 * var(--universal-border-radius)); +} + +progress::-webkit-progress-bar { + background: var(#aaa); +} + +progress::-moz-progress-bar { + background: var(--progress-fore-color); + border-top-left-radius: calc(2 * var(--universal-border-radius)); + border-bottom-left-radius: calc(2 * var(--universal-border-radius)); +} + +progress[value="1000"]::-webkit-progress-value { + border-radius: calc(2 * var(--universal-border-radius)); +} + +progress[value="1000"]::-moz-progress-bar { + border-radius: calc(2 * var(--universal-border-radius)); +} + +progress.inline { + display: inline-block; + vertical-align: middle; + width: 60%; +} + +:root { + --spinner-back-color: #ddd; + --spinner-fore-color: #555; +} + +@keyframes spinner-donut-anim { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(360deg); + } +} + +.spinner { + display: inline-block; + margin: var(--universal-margin); + border: 0.25rem solid var(--spinner-back-color); + border-left: 0.25rem solid var(--spinner-fore-color); + border-radius: 50%; + width: 1.25rem; + height: 1.25rem; + animation: spinner-donut-anim 1.2s linear infinite; +} + +/* + Custom elements for progress bars and spinners. +*/ +progress.primary { + --progress-fore-color: #1976d2; +} + +progress.secondary { + --progress-fore-color: #d32f2f; +} + +progress.tertiary { + --progress-fore-color: #308732; +} + +.spinner.primary { + --spinner-fore-color: #1976d2; +} + +.spinner.secondary { + --spinner-fore-color: #d32f2f; +} + +.spinner.tertiary { + --spinner-fore-color: #308732; +} + +/* + Definitions for icons - powered by Feather (https://feathericons.com/). +*/ +span[class^='icon-'] { + display: inline-block; + height: 1em; + width: 1em; + vertical-align: -0.125em; + background-size: contain; + margin: 0 calc(var(--universal-margin) / 4); +} + +span[class^='icon-'].secondary { + -webkit-filter: invert(25%); + filter: invert(25%); +} + +span[class^='icon-'].inverse { + -webkit-filter: invert(100%); + filter: invert(100%); +} + +span.icon-alert { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fdfdfd' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12' y2='16'%3E%3C/line%3E%3C/svg%3E"); +} + +span.icon-bookmark { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fdfdfd' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z'%3E%3C/path%3E%3C/svg%3E"); +} + +span.icon-calendar { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fdfdfd' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E"); +} + +span.icon-credit { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fdfdfd' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='1' y='4' width='22' height='16' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='1' y1='10' x2='23' y2='10'%3E%3C/line%3E%3C/svg%3E"); +} + +span.icon-edit { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fdfdfd' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 14.66V20a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h5.34'%3E%3C/path%3E%3Cpolygon points='18 2 22 6 12 16 8 16 8 12 18 2'%3E%3C/polygon%3E%3C/svg%3E"); +} + +span.icon-link { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fdfdfd' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'%3E%3C/path%3E%3Cpolyline points='15 3 21 3 21 9'%3E%3C/polyline%3E%3Cline x1='10' y1='14' x2='21' y2='3'%3E%3C/line%3E%3C/svg%3E"); +} + +span.icon-help { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fdfdfd' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3'%3E%3C/path%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='17' x2='12' y2='17'%3E%3C/line%3E%3C/svg%3E"); +} + +span.icon-home { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fdfdfd' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'%3E%3C/path%3E%3Cpolyline points='9 22 9 12 15 12 15 22'%3E%3C/polyline%3E%3C/svg%3E"); +} + +span.icon-info { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fdfdfd' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='16' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='8' x2='12' y2='8'%3E%3C/line%3E%3C/svg%3E"); +} + +span.icon-lock { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fdfdfd' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2' ry='2'%3E%3C/rect%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'%3E%3C/path%3E%3C/svg%3E"); +} + +span.icon-mail { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fdfdfd' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z'%3E%3C/path%3E%3Cpolyline points='22,6 12,13 2,6'%3E%3C/polyline%3E%3C/svg%3E"); +} + +span.icon-location { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fdfdfd' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'%3E%3C/path%3E%3Ccircle cx='12' cy='10' r='3'%3E%3C/circle%3E%3C/svg%3E"); +} + +span.icon-phone { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fdfdfd' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'%3E%3C/path%3E%3C/svg%3E"); +} + +span.icon-rss { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fdfdfd' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 11a9 9 0 0 1 9 9'%3E%3C/path%3E%3Cpath d='M4 4a16 16 0 0 1 16 16'%3E%3C/path%3E%3Ccircle cx='5' cy='19' r='1'%3E%3C/circle%3E%3C/svg%3E"); +} + +span.icon-search { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fdfdfd' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E"); +} + +span.icon-settings { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fdfdfd' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'%3E%3C/circle%3E%3Cpath d='M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z'%3E%3C/path%3E%3C/svg%3E"); +} + +span.icon-share { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fdfdfd' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='18' cy='5' r='3'%3E%3C/circle%3E%3Ccircle cx='6' cy='12' r='3'%3E%3C/circle%3E%3Ccircle cx='18' cy='19' r='3'%3E%3C/circle%3E%3Cline x1='8.59' y1='13.51' x2='15.42' y2='17.49'%3E%3C/line%3E%3Cline x1='15.41' y1='6.51' x2='8.59' y2='10.49'%3E%3C/line%3E%3C/svg%3E"); +} + +span.icon-cart { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fdfdfd' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1'%3E%3C/circle%3E%3Ccircle cx='20' cy='21' r='1'%3E%3C/circle%3E%3Cpath d='M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6'%3E%3C/path%3E%3C/svg%3E"); +} + +span.icon-upload { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fdfdfd' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'%3E%3C/path%3E%3Cpolyline points='17 8 12 3 7 8'%3E%3C/polyline%3E%3Cline x1='12' y1='3' x2='12' y2='15'%3E%3C/line%3E%3C/svg%3E"); +} + +span.icon-user { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fdfdfd' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'%3E%3C/path%3E%3Ccircle cx='12' cy='7' r='4'%3E%3C/circle%3E%3C/svg%3E"); +} + +/* + Definitions for utilities and helper classes. +*/ +/* Utility module CSS variable definitions */ +:root { + --generic-border-color: rgba(0, 0, 0, 0.3); + --generic-box-shadow: 0 0.25rem 0.25rem 0 rgba(0, 0, 0, 0.125), 0 0.125rem 0.125rem -0.125rem rgba(0, 0, 0, 0.125); +} + +.hidden { + display: none !important; +} + +.visually-hidden { + position: absolute !important; + width: 1px !important; + height: 1px !important; + margin: -1px !important; + border: 0 !important; + padding: 0 !important; + clip: rect(0 0 0 0) !important; + -webkit-clip-path: inset(100%) !important; + clip-path: inset(100%) !important; + overflow: hidden !important; +} + +.bordered { + border: 0.0625rem solid var(--generic-border-color) !important; +} + +.rounded { + border-radius: var(--universal-border-radius) !important; +} + +.circular { + border-radius: 50% !important; +} + +.shadowed { + box-shadow: var(--generic-box-shadow) !important; +} + +.responsive-margin { + margin: calc(var(--universal-margin) / 4) !important; +} + +@media screen and (min-width: 768px) { + .responsive-margin { + margin: calc(var(--universal-margin) / 2) !important; + } +} + +@media screen and (min-width: 1280px) { + .responsive-margin { + margin: var(--universal-margin) !important; + } +} + +.responsive-padding { + padding: calc(var(--universal-padding) / 4) !important; +} + +@media screen and (min-width: 768px) { + .responsive-padding { + padding: calc(var(--universal-padding) / 2) !important; + } +} + +@media screen and (min-width: 1280px) { + .responsive-padding { + padding: var(--universal-padding) !important; + } +} + +@media screen and (max-width: 767px) { + .hidden-sm { + display: none !important; + } +} + +@media screen and (min-width: 768px) and (max-width: 1279px) { + .hidden-md { + display: none !important; + } +} + +@media screen and (min-width: 1280px) { + .hidden-lg { + display: none !important; + } +} + +@media screen and (max-width: 767px) { + .visually-hidden-sm { + position: absolute !important; + width: 1px !important; + height: 1px !important; + margin: -1px !important; + border: 0 !important; + padding: 0 !important; + clip: rect(0 0 0 0) !important; + -webkit-clip-path: inset(100%) !important; + clip-path: inset(100%) !important; + overflow: hidden !important; + } +} + +@media screen and (min-width: 768px) and (max-width: 1279px) { + .visually-hidden-md { + position: absolute !important; + width: 1px !important; + height: 1px !important; + margin: -1px !important; + border: 0 !important; + padding: 0 !important; + clip: rect(0 0 0 0) !important; + -webkit-clip-path: inset(100%) !important; + clip-path: inset(100%) !important; + overflow: hidden !important; + } +} + +@media screen and (min-width: 1280px) { + .visually-hidden-lg { + position: absolute !important; + width: 1px !important; + height: 1px !important; + margin: -1px !important; + border: 0 !important; + padding: 0 !important; + clip: rect(0 0 0 0) !important; + -webkit-clip-path: inset(100%) !important; + clip-path: inset(100%) !important; + overflow: hidden !important; + } +} diff --git a/docs/v3/flavors/mini-dark.min.css b/docs/v3/flavors/mini-dark.min.css new file mode 100644 index 0000000..3877560 --- /dev/null +++ b/docs/v3/flavors/mini-dark.min.css @@ -0,0 +1 @@ +:root{--fore-color:#fdfdfd;--secondary-fore-color:#f0f0f0;--back-color:#111;--secondary-back-color:#222;--blockquote-color:#f57c00;--pre-color:#1565c0;--border-color:#ddd;--secondary-border-color:#aaa;--heading-ratio:1.19;--universal-margin:.5rem;--universal-padding:.5rem;--universal-border-radius:.125rem;--a-link-color:#0277bd;--a-visited-color:#01579b}html{font-size:16px}a,b,del,em,i,ins,q,span,strong,u{font-size:1em}html,*{font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, sans-serif;line-height:1.5;-webkit-text-size-adjust:100%}*{font-size:1rem}body{margin:0;color:var(--fore-color);background:var(--back-color)}details{display:block}summary{display:list-item}abbr[title]{border-bottom:none;text-decoration:underline dotted}input{overflow:visible}img{max-width:100%;height:auto}h1,h2,h3,h4,h5,h6{line-height:1.2;margin:calc(1.5 * var(--universal-margin)) var(--universal-margin);font-weight:500}h1 small,h2 small,h3 small,h4 small,h5 small,h6 small{color:var(--secondary-fore-color);display:block;margin-top:-.25rem}h1{font-size:calc(1rem * var(--heading-ratio) * var(--heading-ratio) * var(--heading-ratio) * var(--heading-ratio))}h2{font-size:calc(1rem * var(--heading-ratio) * var(--heading-ratio) * var(--heading-ratio))}h3{font-size:calc(1rem * var(--heading-ratio) * var(--heading-ratio))}h4{font-size:calc(1rem * var(--heading-ratio))}h5{font-size:1rem}h6{font-size:calc(1rem / var(--heading-ratio))}p{margin:var(--universal-margin)}ol,ul{margin:var(--universal-margin);padding-left:calc(2 * var(--universal-margin))}b,strong{font-weight:700}hr{box-sizing:content-box;border:0;line-height:1.25em;margin:var(--universal-margin);height:.0625rem;background:linear-gradient(to right, transparent, var(--border-color) 20%, var(--border-color) 80%, transparent)}blockquote{display:block;position:relative;font-style:italic;color:var(--secondary-fore-color);margin:var(--universal-margin);padding:calc(3 * var(--universal-padding));border:.0625rem solid var(--secondary-border-color);border-left:.375rem solid var(--blockquote-color);border-radius:0 var(--universal-border-radius) var(--universal-border-radius) 0}blockquote:before{position:absolute;top:calc(0rem - var(--universal-padding));left:0;font-family:sans-serif;font-size:3rem;font-weight:700;content:"\201c";color:var(--blockquote-color)}blockquote[cite]:after{font-style:normal;font-size:.75em;font-weight:700;content:"\a— " attr(cite);white-space:pre}code,kbd,pre,samp{font-family:Menlo, Consolas, monospace;font-size:.85em}code{background:var(--secondary-back-color);border-radius:var(--universal-border-radius);padding:calc(var(--universal-padding) / 4) calc(var(--universal-padding) / 2)}kbd{background:var(--fore-color);color:var(--back-color);border-radius:var(--universal-border-radius);padding:calc(var(--universal-padding) / 4) calc(var(--universal-padding) / 2)}pre{overflow:auto;background:var(--secondary-back-color);padding:calc(1.5 * var(--universal-padding));margin:var(--universal-margin);border:.0625rem solid var(--secondary-border-color);border-left:.25rem solid var(--pre-color);border-radius:0 var(--universal-border-radius) var(--universal-border-radius) 0}sup,sub,code,kbd{line-height:0;position:relative;vertical-align:baseline}small,sup,sub,figcaption{font-size:.75em}sup{top:-.5em}sub{bottom:-.25em}figure{margin:var(--universal-margin)}figcaption{color:var(--secondary-fore-color)}a{text-decoration:none}a:link{color:var(--a-link-color)}a:visited{color:var(--a-visited-color)}a:hover,a:focus{text-decoration:underline}.container{margin:0 auto;padding:0 calc(1.5 * var(--universal-padding))}.row{box-sizing:border-box;display:flex;flex:0 1 auto;flex-flow:row wrap}.col-sm,[class^='col-sm-'],[class^='col-sm-offset-'],.row[class*='cols-sm-']>*{box-sizing:border-box;flex:0 0 auto;padding:0 calc(var(--universal-padding) / 2)}.col-sm,.row.cols-sm>*{max-width:100%;flex-grow:1;flex-basis:0}.col-sm-1,.row.cols-sm-1>*{max-width:8.33333%;flex-basis:8.33333%}.col-sm-offset-0{margin-left:0}.col-sm-2,.row.cols-sm-2>*{max-width:16.66667%;flex-basis:16.66667%}.col-sm-offset-1{margin-left:8.33333%}.col-sm-3,.row.cols-sm-3>*{max-width:25%;flex-basis:25%}.col-sm-offset-2{margin-left:16.66667%}.col-sm-4,.row.cols-sm-4>*{max-width:33.33333%;flex-basis:33.33333%}.col-sm-offset-3{margin-left:25%}.col-sm-5,.row.cols-sm-5>*{max-width:41.66667%;flex-basis:41.66667%}.col-sm-offset-4{margin-left:33.33333%}.col-sm-6,.row.cols-sm-6>*{max-width:50%;flex-basis:50%}.col-sm-offset-5{margin-left:41.66667%}.col-sm-7,.row.cols-sm-7>*{max-width:58.33333%;flex-basis:58.33333%}.col-sm-offset-6{margin-left:50%}.col-sm-8,.row.cols-sm-8>*{max-width:66.66667%;flex-basis:66.66667%}.col-sm-offset-7{margin-left:58.33333%}.col-sm-9,.row.cols-sm-9>*{max-width:75%;flex-basis:75%}.col-sm-offset-8{margin-left:66.66667%}.col-sm-10,.row.cols-sm-10>*{max-width:83.33333%;flex-basis:83.33333%}.col-sm-offset-9{margin-left:75%}.col-sm-11,.row.cols-sm-11>*{max-width:91.66667%;flex-basis:91.66667%}.col-sm-offset-10{margin-left:83.33333%}.col-sm-12,.row.cols-sm-12>*{max-width:100%;flex-basis:100%}.col-sm-offset-11{margin-left:91.66667%}.col-sm-normal{order:initial}.col-sm-first{order:-999}.col-sm-last{order:999}@media screen and (min-width: 768px){.col-md,[class^='col-md-'],[class^='col-md-offset-'],.row[class*='cols-md-']>*{box-sizing:border-box;flex:0 0 auto;padding:0 calc(var(--universal-padding) / 2)}.col-md,.row.cols-md>*{max-width:100%;flex-grow:1;flex-basis:0}.col-md-1,.row.cols-md-1>*{max-width:8.33333%;flex-basis:8.33333%}.col-md-offset-0{margin-left:0}.col-md-2,.row.cols-md-2>*{max-width:16.66667%;flex-basis:16.66667%}.col-md-offset-1{margin-left:8.33333%}.col-md-3,.row.cols-md-3>*{max-width:25%;flex-basis:25%}.col-md-offset-2{margin-left:16.66667%}.col-md-4,.row.cols-md-4>*{max-width:33.33333%;flex-basis:33.33333%}.col-md-offset-3{margin-left:25%}.col-md-5,.row.cols-md-5>*{max-width:41.66667%;flex-basis:41.66667%}.col-md-offset-4{margin-left:33.33333%}.col-md-6,.row.cols-md-6>*{max-width:50%;flex-basis:50%}.col-md-offset-5{margin-left:41.66667%}.col-md-7,.row.cols-md-7>*{max-width:58.33333%;flex-basis:58.33333%}.col-md-offset-6{margin-left:50%}.col-md-8,.row.cols-md-8>*{max-width:66.66667%;flex-basis:66.66667%}.col-md-offset-7{margin-left:58.33333%}.col-md-9,.row.cols-md-9>*{max-width:75%;flex-basis:75%}.col-md-offset-8{margin-left:66.66667%}.col-md-10,.row.cols-md-10>*{max-width:83.33333%;flex-basis:83.33333%}.col-md-offset-9{margin-left:75%}.col-md-11,.row.cols-md-11>*{max-width:91.66667%;flex-basis:91.66667%}.col-md-offset-10{margin-left:83.33333%}.col-md-12,.row.cols-md-12>*{max-width:100%;flex-basis:100%}.col-md-offset-11{margin-left:91.66667%}.col-md-normal{order:initial}.col-md-first{order:-999}.col-md-last{order:999}}@media screen and (min-width: 1280px){.col-lg,[class^='col-lg-'],[class^='col-lg-offset-'],.row[class*='cols-lg-']>*{box-sizing:border-box;flex:0 0 auto;padding:0 calc(var(--universal-padding) / 2)}.col-lg,.row.cols-lg>*{max-width:100%;flex-grow:1;flex-basis:0}.col-lg-1,.row.cols-lg-1>*{max-width:8.33333%;flex-basis:8.33333%}.col-lg-offset-0{margin-left:0}.col-lg-2,.row.cols-lg-2>*{max-width:16.66667%;flex-basis:16.66667%}.col-lg-offset-1{margin-left:8.33333%}.col-lg-3,.row.cols-lg-3>*{max-width:25%;flex-basis:25%}.col-lg-offset-2{margin-left:16.66667%}.col-lg-4,.row.cols-lg-4>*{max-width:33.33333%;flex-basis:33.33333%}.col-lg-offset-3{margin-left:25%}.col-lg-5,.row.cols-lg-5>*{max-width:41.66667%;flex-basis:41.66667%}.col-lg-offset-4{margin-left:33.33333%}.col-lg-6,.row.cols-lg-6>*{max-width:50%;flex-basis:50%}.col-lg-offset-5{margin-left:41.66667%}.col-lg-7,.row.cols-lg-7>*{max-width:58.33333%;flex-basis:58.33333%}.col-lg-offset-6{margin-left:50%}.col-lg-8,.row.cols-lg-8>*{max-width:66.66667%;flex-basis:66.66667%}.col-lg-offset-7{margin-left:58.33333%}.col-lg-9,.row.cols-lg-9>*{max-width:75%;flex-basis:75%}.col-lg-offset-8{margin-left:66.66667%}.col-lg-10,.row.cols-lg-10>*{max-width:83.33333%;flex-basis:83.33333%}.col-lg-offset-9{margin-left:75%}.col-lg-11,.row.cols-lg-11>*{max-width:91.66667%;flex-basis:91.66667%}.col-lg-offset-10{margin-left:83.33333%}.col-lg-12,.row.cols-lg-12>*{max-width:100%;flex-basis:100%}.col-lg-offset-11{margin-left:91.66667%}.col-lg-normal{order:initial}.col-lg-first{order:-999}.col-lg-last{order:999}}:root{--card-back-color:#111;--card-fore-color:#fdfdfd;--card-border-color:#aaa}.card{display:flex;flex-direction:column;justify-content:space-between;align-self:center;position:relative;width:100%;background:var(--card-back-color);color:var(--card-fore-color);border:.0625rem solid var(--card-border-color);border-radius:var(--universal-border-radius);margin:var(--universal-margin);overflow:hidden}@media screen and (min-width: 320px){.card{max-width:320px}}.card>.section{background:var(--card-back-color);color:var(--card-fore-color);box-sizing:border-box;margin:0;border:0;border-radius:0;border-bottom:.0625rem solid var(--card-border-color);padding:var(--universal-padding);width:100%}.card>.section.media{height:200px;padding:0;-o-object-fit:cover;object-fit:cover}.card>.section:last-child{border-bottom:0}@media screen and (min-width: 240px){.card.small{max-width:240px}}@media screen and (min-width: 480px){.card.large{max-width:480px}}.card.fluid{max-width:100%;width:auto}.card.warning{--card-back-color:#ffca28;--card-fore-color:#111;--card-border-color:#e8b825}.card.error{--card-back-color:#b71c1c;--card-fore-color:#f8f8f8;--card-border-color:#a71a1a}.card>.section.dark{--card-back-color:#e0e0e0;--card-fore-color:#111}.card>.section.double-padded{padding:calc(1.5 * var(--universal-padding))}:root{--form-back-color:#222;--form-fore-color:#fdfdfd;--form-border-color:#aaa;--input-back-color:#111;--input-fore-color:#fdfdfd;--input-border-color:#aaa;--input-focus-color:#0288d1;--input-invalid-color:#d32f2f;--button-back-color:#212121;--button-hover-back-color:#444;--button-fore-color:#e2e2e2;--button-border-color:transparent;--button-hover-border-color:transparent;--button-group-border-color:rgba(124,124,124,0.54)}form{background:var(--form-back-color);color:var(--form-fore-color);border:.0625rem solid var(--form-border-color);border-radius:var(--universal-border-radius);margin:var(--universal-margin);padding:calc(2 * var(--universal-padding)) var(--universal-padding)}fieldset{border:.0625rem solid var(--form-border-color);border-radius:var(--universal-border-radius);margin:calc(var(--universal-margin) / 4);padding:var(--universal-padding)}legend{box-sizing:border-box;display:table;max-width:100%;white-space:normal;font-weight:700;padding:calc(var(--universal-padding) / 2)}label{padding:calc(var(--universal-padding) / 2) var(--universal-padding)}.input-group{display:inline-block}.input-group.fluid{display:flex;align-items:center;justify-content:center}.input-group.fluid>input{max-width:100%;flex-grow:1;flex-basis:0px}@media screen and (max-width: 767px){.input-group.fluid{align-items:stretch;flex-direction:column}}.input-group.vertical{display:flex;align-items:stretch;flex-direction:column}.input-group.vertical>input{max-width:100%;flex-grow:1;flex-basis:0px}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px}[type="search"]::-webkit-search-cancel-button,[type="search"]::-webkit-search-decoration{-webkit-appearance:none}input:not([type]),[type="text"],[type="email"],[type="number"],[type="search"],[type="password"],[type="url"],[type="tel"],[type="checkbox"],[type="radio"],textarea,select{box-sizing:border-box;background:var(--input-back-color);color:var(--input-fore-color);border:.0625rem solid var(--input-border-color);border-radius:var(--universal-border-radius);margin:calc(var(--universal-margin) / 2);padding:var(--universal-padding) calc(1.5 * var(--universal-padding))}input:not([type="button"]):not([type="submit"]):not([type="reset"]):hover,input:not([type="button"]):not([type="submit"]):not([type="reset"]):focus,textarea:hover,textarea:focus,select:hover,select:focus{border-color:var(--input-focus-color);box-shadow:none}input:not([type="button"]):not([type="submit"]):not([type="reset"]):invalid,input:not([type="button"]):not([type="submit"]):not([type="reset"]):focus:invalid,textarea:invalid,textarea:focus:invalid,select:invalid,select:focus:invalid{border-color:var(--input-invalid-color);box-shadow:none}input:not([type="button"]):not([type="submit"]):not([type="reset"])[readonly],textarea[readonly],select[readonly]{background:var(--secondary-back-color)}select{max-width:100%}option{overflow:hidden;text-overflow:ellipsis}[type="checkbox"],[type="radio"]{-webkit-appearance:none;-moz-appearance:none;appearance:none;position:relative;height:calc(1rem + var(--universal-padding) / 2);width:calc(1rem + var(--universal-padding) / 2);vertical-align:text-bottom;padding:0;flex-basis:calc(1rem + var(--universal-padding) / 2) !important;flex-grow:0 !important}[type="checkbox"]:checked:before,[type="radio"]:checked:before{position:absolute}[type="checkbox"]:checked:before{content:'\2713';font-family:sans-serif;font-size:calc(1rem + var(--universal-padding) / 2);top:calc(0rem - var(--universal-padding));left:calc(var(--universal-padding) / 4)}[type="radio"]{border-radius:100%}[type="radio"]:checked:before{border-radius:100%;content:'';top:calc(.0625rem + var(--universal-padding) / 2);left:calc(.0625rem + var(--universal-padding) / 2);background:var(--input-fore-color);width:0.5rem;height:0.5rem}:placeholder-shown{color:var(--input-fore-color)}::-ms-placeholder{color:var(--input-fore-color);opacity:0.54}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button,html [type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button{overflow:visible;text-transform:none}button,[type="button"],[type="submit"],[type="reset"],a.button,label.button,.button,a[role="button"],label[role="button"],[role="button"]{display:inline-block;background:var(--button-back-color);color:var(--button-fore-color);border:.0625rem solid var(--button-border-color);border-radius:var(--universal-border-radius);padding:var(--universal-padding) calc(1.5 * var(--universal-padding));margin:var(--universal-margin);text-decoration:none;cursor:pointer;transition:background 0.3s}button:hover,button:focus,[type="button"]:hover,[type="button"]:focus,[type="submit"]:hover,[type="submit"]:focus,[type="reset"]:hover,[type="reset"]:focus,a.button:hover,a.button:focus,label.button:hover,label.button:focus,.button:hover,.button:focus,a[role="button"]:hover,a[role="button"]:focus,label[role="button"]:hover,label[role="button"]:focus,[role="button"]:hover,[role="button"]:focus{background:var(--button-hover-back-color);border-color:var(--button-hover-border-color)}input:disabled,input[disabled],textarea:disabled,textarea[disabled],select:disabled,select[disabled],button:disabled,button[disabled],.button:disabled,.button[disabled],[role="button"]:disabled,[role="button"][disabled]{cursor:not-allowed;opacity:.75}.button-group{display:flex;border:.0625rem solid var(--button-group-border-color);border-radius:var(--universal-border-radius);margin:var(--universal-margin)}.button-group>button,.button-group [type="button"],.button-group>[type="submit"],.button-group>[type="reset"],.button-group>.button,.button-group>[role="button"]{margin:0;max-width:100%;flex:1 1 auto;text-align:center;border:0;border-radius:0;box-shadow:none}.button-group>:not(:first-child){border-left:.0625rem solid var(--button-group-border-color)}@media screen and (max-width: 767px){.button-group{flex-direction:column}.button-group>:not(:first-child){border:0;border-top:.0625rem solid var(--button-group-border-color)}}button.primary,[type="button"].primary,[type="submit"].primary,[type="reset"].primary,.button.primary,[role="button"].primary{--button-back-color:#1976d2;--button-fore-color:#f8f8f8}button.primary:hover,button.primary:focus,[type="button"].primary:hover,[type="button"].primary:focus,[type="submit"].primary:hover,[type="submit"].primary:focus,[type="reset"].primary:hover,[type="reset"].primary:focus,.button.primary:hover,.button.primary:focus,[role="button"].primary:hover,[role="button"].primary:focus{--button-hover-back-color:#1565c0}button.secondary,[type="button"].secondary,[type="submit"].secondary,[type="reset"].secondary,.button.secondary,[role="button"].secondary{--button-back-color:#d32f2f;--button-fore-color:#f8f8f8}button.secondary:hover,button.secondary:focus,[type="button"].secondary:hover,[type="button"].secondary:focus,[type="submit"].secondary:hover,[type="submit"].secondary:focus,[type="reset"].secondary:hover,[type="reset"].secondary:focus,.button.secondary:hover,.button.secondary:focus,[role="button"].secondary:hover,[role="button"].secondary:focus{--button-hover-back-color:#c62828}button.tertiary,[type="button"].tertiary,[type="submit"].tertiary,[type="reset"].tertiary,.button.tertiary,[role="button"].tertiary{--button-back-color:#308732;--button-fore-color:#f8f8f8}button.tertiary:hover,button.tertiary:focus,[type="button"].tertiary:hover,[type="button"].tertiary:focus,[type="submit"].tertiary:hover,[type="submit"].tertiary:focus,[type="reset"].tertiary:hover,[type="reset"].tertiary:focus,.button.tertiary:hover,.button.tertiary:focus,[role="button"].tertiary:hover,[role="button"].tertiary:focus{--button-hover-back-color:#277529}button.inverse,[type="button"].inverse,[type="submit"].inverse,[type="reset"].inverse,.button.inverse,[role="button"].inverse{--button-back-color:#f8f8f8;--button-fore-color:#212121}button.inverse:hover,button.inverse:focus,[type="button"].inverse:hover,[type="button"].inverse:focus,[type="submit"].inverse:hover,[type="submit"].inverse:focus,[type="reset"].inverse:hover,[type="reset"].inverse:focus,.button.inverse:hover,.button.inverse:focus,[role="button"].inverse:hover,[role="button"].inverse:focus{--button-hover-back-color:#f0f0f0}button.small,[type="button"].small,[type="submit"].small,[type="reset"].small,.button.small,[role="button"].small{padding:calc(0.5 * var(--universal-padding)) calc(0.75 * var(--universal-padding));margin:var(--universal-margin)}button.large,[type="button"].large,[type="submit"].large,[type="reset"].large,.button.large,[role="button"].large{padding:calc(1.5 * var(--universal-padding)) calc(2 * var(--universal-padding));margin:var(--universal-margin)}:root{--header-back-color:#111;--header-hover-back-color:#222;--header-fore-color:#f0f0f0;--header-border-color:#aaa;--nav-back-color:#111;--nav-hover-back-color:#222;--nav-fore-color:#f0f0f0;--nav-border-color:#aaa;--nav-link-color:#0277bd;--footer-fore-color:#f0f0f0;--footer-back-color:#111;--footer-border-color:#aaa;--footer-link-color:#0277bd;--drawer-back-color:#111;--drawer-hover-back-color:#222;--drawer-border-color:#aaa;--drawer-close-color:#f0f0f0}header{height:3.1875rem;background:var(--header-back-color);color:var(--header-fore-color);border-bottom:.0625rem solid var(--header-border-color);padding:calc(var(--universal-padding) / 4) 0;white-space:nowrap;overflow-x:auto;overflow-y:hidden}header.row{box-sizing:content-box}header .logo{color:var(--header-fore-color);font-size:1.75rem;padding:var(--universal-padding) calc(2 * var(--universal-padding));text-decoration:none}header button,header [type="button"],header .button,header [role="button"]{box-sizing:border-box;position:relative;top:calc(0rem - var(--universal-padding) / 4);height:calc(3.1875rem + var(--universal-padding) / 2);background:var(--header-back-color);line-height:calc(3.1875rem - var(--universal-padding) * 1.5);text-align:center;color:var(--header-fore-color);border:0;border-radius:0;margin:0;text-transform:uppercase}header button:hover,header button:focus,header [type="button"]:hover,header [type="button"]:focus,header .button:hover,header .button:focus,header [role="button"]:hover,header [role="button"]:focus{background:var(--header-hover-back-color)}nav{background:var(--nav-back-color);color:var(--nav-fore-color);border:.0625rem solid var(--nav-border-color);border-radius:var(--universal-border-radius);margin:var(--universal-margin)}nav *{padding:var(--universal-padding) calc(1.5 * var(--universal-padding))}nav a,nav a:visited{display:block;color:var(--nav-link-color);border-radius:var(--universal-border-radius);transition:background 0.3s}nav a:hover,nav a:focus,nav a:visited:hover,nav a:visited:focus{text-decoration:none;background:var(--nav-hover-back-color)}nav .sublink-1{position:relative;margin-left:calc(2 * var(--universal-padding))}nav .sublink-1:before{position:absolute;left:calc(var(--universal-padding) - 1 * var(--universal-padding));top:-.0625rem;content:'';height:100%;border:.0625rem solid var(--nav-border-color);border-left:0}nav .sublink-2{position:relative;margin-left:calc(4 * var(--universal-padding))}nav .sublink-2:before{position:absolute;left:calc(var(--universal-padding) - 3 * var(--universal-padding));top:-.0625rem;content:'';height:100%;border:.0625rem solid var(--nav-border-color);border-left:0}footer{background:var(--footer-back-color);color:var(--footer-fore-color);border-top:.0625rem solid var(--footer-border-color);padding:calc(2 * var(--universal-padding)) var(--universal-padding);font-size:.875rem}footer a,footer a:visited{color:var(--footer-link-color)}header.sticky{position:-webkit-sticky;position:sticky;z-index:1101;top:0}footer.sticky{position:-webkit-sticky;position:sticky;z-index:1101;bottom:0}.drawer-toggle:before{display:inline-block;position:relative;vertical-align:bottom;content:'\00a0\2261\00a0';font-family:sans-serif;font-size:1.5em}@media screen and (min-width: 768px){.drawer-toggle:not(.persistent){display:none}}[type="checkbox"].drawer{height:1px;width:1px;margin:-1px;overflow:hidden;position:absolute;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%)}[type="checkbox"].drawer+*{display:block;box-sizing:border-box;position:fixed;top:0;width:320px;height:100vh;overflow-y:auto;background:var(--drawer-back-color);border:.0625rem solid var(--drawer-border-color);border-radius:0;margin:0;z-index:1110;right:-320px;transition:right 0.3s}[type="checkbox"].drawer+* .drawer-close{position:absolute;top:var(--universal-margin);right:var(--universal-margin);z-index:1111;width:2rem;height:2rem;border-radius:var(--universal-border-radius);padding:var(--universal-padding);margin:0;cursor:pointer;transition:background 0.3s}[type="checkbox"].drawer+* .drawer-close:before{display:block;content:'\00D7';color:var(--drawer-close-color);position:relative;font-family:sans-serif;font-size:2rem;line-height:1;text-align:center}[type="checkbox"].drawer+* .drawer-close:hover,[type="checkbox"].drawer+* .drawer-close:focus{background:var(--drawer-hover-back-color)}@media screen and (max-width: 320px){[type="checkbox"].drawer+*{width:100%}}[type="checkbox"].drawer:checked+*{right:0}@media screen and (min-width: 768px){[type="checkbox"].drawer:not(.persistent)+*{position:static;height:100%;z-index:1100}[type="checkbox"].drawer:not(.persistent)+* .drawer-close{display:none}}:root{--table-border-color:#ddd;--table-border-separator-color:#666;--table-head-back-color:#212121;--table-head-fore-color:#fdfdfd;--table-body-back-color:#111;--table-body-fore-color:#fdfdfd;--table-body-alt-back-color:#444}table{border-collapse:separate;border-spacing:0;margin:0;display:flex;flex:0 1 auto;flex-flow:row wrap;padding:var(--universal-padding);padding-top:0}table caption{font-size:1.5rem;margin:calc(2 * var(--universal-margin)) 0;max-width:100%;flex:0 0 100%}table thead,table tbody{display:flex;flex-flow:row wrap;border:.0625rem solid var(--table-border-color)}table thead{z-index:999;border-radius:var(--universal-border-radius) var(--universal-border-radius) 0 0;border-bottom:.0625rem solid var(--table-border-separator-color)}table tbody{border-top:0;margin-top:calc(0 - var(--universal-margin));border-radius:0 0 var(--universal-border-radius) var(--universal-border-radius)}table tr{display:flex;padding:0}table th,table td{padding:calc(2 * var(--universal-padding))}table th{text-align:left;background:var(--table-head-back-color);color:var(--table-head-fore-color)}table td{background:var(--table-body-back-color);color:var(--table-body-fore-color);border-top:.0625rem solid var(--table-border-color)}table:not(.horizontal){overflow:auto;max-height:400px}table:not(.horizontal) thead,table:not(.horizontal) tbody{max-width:100%;flex:0 0 100%}table:not(.horizontal) tr{flex-flow:row wrap;flex:0 0 100%}table:not(.horizontal) th,table:not(.horizontal) td{flex:1 0 0%;overflow:hidden;text-overflow:ellipsis}table:not(.horizontal) thead{position:sticky;top:0}table:not(.horizontal) tbody tr:first-child td{border-top:0}table.horizontal{border:0}table.horizontal thead,table.horizontal tbody{border:0;flex-flow:row nowrap}table.horizontal tbody{overflow:auto;justify-content:space-between;flex:1 0 0;margin-left:calc( 4 * var(--universal-margin));padding-bottom:calc(var(--universal-padding) / 4)}table.horizontal tr{flex-direction:column;flex:1 0 auto}table.horizontal th,table.horizontal td{width:100%;border:0;border-bottom:.0625rem solid var(--table-border-color)}table.horizontal th:not(:first-child),table.horizontal td:not(:first-child){border-top:0}table.horizontal th{text-align:right;border-left:.0625rem solid var(--table-border-color);border-right:.0625rem solid var(--table-border-separator-color)}table.horizontal thead tr:first-child{padding-left:0}table.horizontal th:first-child,table.horizontal td:first-child{border-top:.0625rem solid var(--table-border-color)}table.horizontal tbody tr:last-child td{border-right:.0625rem solid var(--table-border-color)}table.horizontal tbody tr:last-child td:first-child{border-top-right-radius:0.25rem}table.horizontal tbody tr:last-child td:last-child{border-bottom-right-radius:0.25rem}table.horizontal thead tr:first-child th:first-child{border-top-left-radius:0.25rem}table.horizontal thead tr:first-child th:last-child{border-bottom-left-radius:0.25rem}@media screen and (max-width: 767px){table,table.horizontal{border-collapse:collapse;border:0;width:100%;display:table}table thead,table th,table.horizontal thead,table.horizontal th{border:0;height:1px;width:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%)}table tbody,table.horizontal tbody{border:0;display:table-row-group}table tr,table.horizontal tr{display:block;border:.0625rem solid var(--table-border-color);border-radius:var(--universal-border-radius);background:#fafafa;padding:var(--universal-padding);margin:var(--universal-margin);margin-bottom:calc(2 * var(--universal-margin))}table th,table td,table.horizontal th,table.horizontal td{width:auto}table td,table.horizontal td{display:block;border:0;text-align:right}table td:before,table.horizontal td:before{content:attr(data-label);float:left;font-weight:600}table th:first-child,table td:first-child,table.horizontal th:first-child,table.horizontal td:first-child{border-top:0}table tbody tr:last-child td,table.horizontal tbody tr:last-child td{border-right:0}}:root{--table-body-alt-back-color:#444}table.striped tr:nth-of-type(2n)>td{background:var(--table-body-alt-back-color)}@media screen and (max-width: 768px){table.striped tr:nth-of-type(2n){background:var(--table-body-alt-back-color)}}:root{--table-body-hover-back-color:#5c819f}table.hoverable tr:hover,table.hoverable tr:hover>td,table.hoverable tr:focus,table.hoverable tr:focus>td{background:var(--table-body-hover-back-color)}@media screen and (max-width: 768px){table.hoverable tr:hover,table.hoverable tr:hover>td,table.hoverable tr:focus,table.hoverable tr:focus>td{background:var(--table-body-hover-back-color)}}:root{--mark-back-color:#0277bd;--mark-fore-color:#fafafa}mark{background:var(--mark-back-color);color:var(--mark-fore-color);font-size:.95em;line-height:1em;border-radius:var(--universal-border-radius);padding:calc(var(--universal-padding) / 4) calc(var(--universal-padding) / 2)}mark.inline-block{display:inline-block;font-size:1em;line-height:1.5;padding:calc(var(--universal-padding) / 2) var(--universal-padding)}:root{--toast-back-color:#424242;--toast-fore-color:#fafafa}.toast{position:fixed;bottom:calc(var(--universal-margin) * 3);left:50%;transform:translate(-50%, -50%);z-index:1111;color:var(--toast-fore-color);background:var(--toast-back-color);border-radius:calc(var(--universal-border-radius) * 16);padding:var(--universal-padding) calc(var(--universal-padding) * 3)}:root{--tooltip-back-color:#fafafa;--tooltip-fore-color:#212121}.tooltip{position:relative;display:inline-block}.tooltip:before,.tooltip:after{position:absolute;opacity:0;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%);transition:all 0.3s;z-index:1010;left:50%}.tooltip:not(.bottom):before,.tooltip:not(.bottom):after{bottom:75%}.tooltip.bottom:before,.tooltip.bottom:after{top:75%}.tooltip:hover:before,.tooltip:hover:after,.tooltip:focus:before,.tooltip:focus:after{opacity:1;clip:auto;-webkit-clip-path:inset(0%);clip-path:inset(0%)}.tooltip:before{content:'';background:transparent;border:var(--universal-margin) solid transparent;left:calc(50% - var(--universal-margin))}.tooltip:not(.bottom):before{border-top-color:#fafafa}.tooltip.bottom:before{border-bottom-color:#fafafa}.tooltip:after{content:attr(aria-label);color:var(--tooltip-fore-color);background:var(--tooltip-back-color);border-radius:var(--universal-border-radius);padding:var(--universal-padding);white-space:nowrap;transform:translateX(-50%)}.tooltip:not(.bottom):after{margin-bottom:calc(2 * var(--universal-margin))}.tooltip.bottom:after{margin-top:calc(2 * var(--universal-margin))}:root{--modal-overlay-color:rgba(0,0,0,0.45);--modal-close-color:#f0f0f0;--modal-close-hover-color:#222}[type="checkbox"].modal{height:1px;width:1px;margin:-1px;overflow:hidden;position:absolute;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%)}[type="checkbox"].modal+div{position:fixed;top:0;left:0;display:none;width:100vw;height:100vh;background:var(--modal-overlay-color)}[type="checkbox"].modal+div .card{margin:0 auto;max-height:50vh;overflow:auto}[type="checkbox"].modal+div .card .modal-close{position:absolute;top:0;right:0;width:1.75rem;height:1.75rem;border-radius:var(--universal-border-radius);padding:var(--universal-padding);margin:0;cursor:pointer;transition:background 0.3s}[type="checkbox"].modal+div .card .modal-close:before{display:block;content:'\00D7';color:var(--modal-close-color);position:relative;font-family:sans-serif;font-size:1.75rem;line-height:1;text-align:center}[type="checkbox"].modal+div .card .modal-close:hover,[type="checkbox"].modal+div .card .modal-close:focus{background:var(--modal-close-hover-color)}[type="checkbox"].modal:checked+div{display:flex;flex:0 1 auto;z-index:1200}[type="checkbox"].modal:checked+div .card .modal-close{z-index:1211}:root{--collapse-label-back-color:#111;--collapse-label-fore-color:#fafafa;--collapse-label-hover-back-color:#222;--collapse-selected-label-back-color:#444;--collapse-border-color:#aaa;--collapse-content-back-color:#212121;--collapse-selected-label-border-color:#0277bd}.collapse{width:calc(100% - 2 * var(--universal-margin));opacity:1;display:flex;flex-direction:column;margin:var(--universal-margin);border-radius:var(--universal-border-radius)}.collapse>[type="radio"],.collapse>[type="checkbox"]{height:1px;width:1px;margin:-1px;overflow:hidden;position:absolute;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%)}.collapse>label{flex-grow:1;display:inline-block;height:1.5rem;cursor:pointer;transition:background 0.3s;color:var(--collapse-label-fore-color);background:var(--collapse-label-back-color);border:.0625rem solid var(--collapse-border-color);padding:calc(1.5 * var(--universal-padding))}.collapse>label:hover,.collapse>label:focus{background:var(--collapse-label-hover-back-color)}.collapse>label+div{flex-basis:auto;height:1px;width:1px;margin:-1px;overflow:hidden;position:absolute;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%);transition:max-height 0.3s;max-height:1px}.collapse>:checked+label{background:var(--collapse-selected-label-back-color);border-bottom-color:var(--collapse-selected-label-border-color)}.collapse>:checked+label+div{box-sizing:border-box;position:relative;width:100%;height:auto;overflow:auto;margin:0;background:var(--collapse-content-back-color);border:.0625rem solid var(--collapse-border-color);border-top:0;padding:var(--universal-padding);clip:auto;-webkit-clip-path:inset(0%);clip-path:inset(0%);max-height:400px}.collapse>label:not(:first-of-type){border-top:0}.collapse>label:first-of-type{border-radius:var(--universal-border-radius) var(--universal-border-radius) 0 0}.collapse>label:last-of-type:not(:first-of-type){border-radius:0 0 var(--universal-border-radius) var(--universal-border-radius)}.collapse>label:last-of-type:first-of-type{border-radius:var(--universal-border-radius)}.collapse>:checked:last-of-type:not(:first-of-type)+label{border-radius:0}.collapse>:checked:last-of-type+label+div{border-radius:0 0 var(--universal-border-radius) var(--universal-border-radius)}mark.secondary{--mark-back-color:#d32f2f}mark.tertiary{--mark-back-color:#308732}mark.tag{padding:calc(var(--universal-padding)/2) var(--universal-padding);border-radius:1em}:root{--progress-back-color:#aaa;--progress-fore-color:#555}progress{display:block;vertical-align:baseline;-webkit-appearance:none;-moz-appearance:none;appearance:none;height:.75rem;width:calc(100% - 2 * var(--universal-margin));margin:var(--universal-margin);border:0;border-radius:calc(2 * var(--universal-border-radius));background:var(--progress-back-color);color:var(--progress-fore-color)}progress::-webkit-progress-value{background:var(--progress-fore-color);border-top-left-radius:calc(2 * var(--universal-border-radius));border-bottom-left-radius:calc(2 * var(--universal-border-radius))}progress::-webkit-progress-bar{background:var(#aaa)}progress::-moz-progress-bar{background:var(--progress-fore-color);border-top-left-radius:calc(2 * var(--universal-border-radius));border-bottom-left-radius:calc(2 * var(--universal-border-radius))}progress[value="1000"]::-webkit-progress-value{border-radius:calc(2 * var(--universal-border-radius))}progress[value="1000"]::-moz-progress-bar{border-radius:calc(2 * var(--universal-border-radius))}progress.inline{display:inline-block;vertical-align:middle;width:60%}:root{--spinner-back-color:#ddd;--spinner-fore-color:#555}@keyframes spinner-donut-anim{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.spinner{display:inline-block;margin:var(--universal-margin);border:.25rem solid var(--spinner-back-color);border-left:.25rem solid var(--spinner-fore-color);border-radius:50%;width:1.25rem;height:1.25rem;animation:spinner-donut-anim 1.2s linear infinite}progress.primary{--progress-fore-color:#1976d2}progress.secondary{--progress-fore-color:#d32f2f}progress.tertiary{--progress-fore-color:#308732}.spinner.primary{--spinner-fore-color:#1976d2}.spinner.secondary{--spinner-fore-color:#d32f2f}.spinner.tertiary{--spinner-fore-color:#308732}span[class^='icon-']{display:inline-block;height:1em;width:1em;vertical-align:-0.125em;background-size:contain;margin:0 calc(var(--universal-margin) / 4)}span[class^='icon-'].secondary{-webkit-filter:invert(25%);filter:invert(25%)}span[class^='icon-'].inverse{-webkit-filter:invert(100%);filter:invert(100%)}span.icon-alert{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fdfdfd' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12' y2='16'%3E%3C/line%3E%3C/svg%3E")}span.icon-bookmark{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fdfdfd' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z'%3E%3C/path%3E%3C/svg%3E")}span.icon-calendar{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fdfdfd' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E")}span.icon-credit{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fdfdfd' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='1' y='4' width='22' height='16' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='1' y1='10' x2='23' y2='10'%3E%3C/line%3E%3C/svg%3E")}span.icon-edit{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fdfdfd' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 14.66V20a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h5.34'%3E%3C/path%3E%3Cpolygon points='18 2 22 6 12 16 8 16 8 12 18 2'%3E%3C/polygon%3E%3C/svg%3E")}span.icon-link{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fdfdfd' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'%3E%3C/path%3E%3Cpolyline points='15 3 21 3 21 9'%3E%3C/polyline%3E%3Cline x1='10' y1='14' x2='21' y2='3'%3E%3C/line%3E%3C/svg%3E")}span.icon-help{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fdfdfd' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3'%3E%3C/path%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='17' x2='12' y2='17'%3E%3C/line%3E%3C/svg%3E")}span.icon-home{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fdfdfd' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'%3E%3C/path%3E%3Cpolyline points='9 22 9 12 15 12 15 22'%3E%3C/polyline%3E%3C/svg%3E")}span.icon-info{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fdfdfd' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='16' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='8' x2='12' y2='8'%3E%3C/line%3E%3C/svg%3E")}span.icon-lock{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fdfdfd' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2' ry='2'%3E%3C/rect%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'%3E%3C/path%3E%3C/svg%3E")}span.icon-mail{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fdfdfd' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z'%3E%3C/path%3E%3Cpolyline points='22,6 12,13 2,6'%3E%3C/polyline%3E%3C/svg%3E")}span.icon-location{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fdfdfd' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'%3E%3C/path%3E%3Ccircle cx='12' cy='10' r='3'%3E%3C/circle%3E%3C/svg%3E")}span.icon-phone{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fdfdfd' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'%3E%3C/path%3E%3C/svg%3E")}span.icon-rss{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fdfdfd' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 11a9 9 0 0 1 9 9'%3E%3C/path%3E%3Cpath d='M4 4a16 16 0 0 1 16 16'%3E%3C/path%3E%3Ccircle cx='5' cy='19' r='1'%3E%3C/circle%3E%3C/svg%3E")}span.icon-search{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fdfdfd' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E")}span.icon-settings{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fdfdfd' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'%3E%3C/circle%3E%3Cpath d='M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z'%3E%3C/path%3E%3C/svg%3E")}span.icon-share{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fdfdfd' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='18' cy='5' r='3'%3E%3C/circle%3E%3Ccircle cx='6' cy='12' r='3'%3E%3C/circle%3E%3Ccircle cx='18' cy='19' r='3'%3E%3C/circle%3E%3Cline x1='8.59' y1='13.51' x2='15.42' y2='17.49'%3E%3C/line%3E%3Cline x1='15.41' y1='6.51' x2='8.59' y2='10.49'%3E%3C/line%3E%3C/svg%3E")}span.icon-cart{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fdfdfd' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1'%3E%3C/circle%3E%3Ccircle cx='20' cy='21' r='1'%3E%3C/circle%3E%3Cpath d='M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6'%3E%3C/path%3E%3C/svg%3E")}span.icon-upload{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fdfdfd' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'%3E%3C/path%3E%3Cpolyline points='17 8 12 3 7 8'%3E%3C/polyline%3E%3Cline x1='12' y1='3' x2='12' y2='15'%3E%3C/line%3E%3C/svg%3E")}span.icon-user{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fdfdfd' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'%3E%3C/path%3E%3Ccircle cx='12' cy='7' r='4'%3E%3C/circle%3E%3C/svg%3E")}:root{--generic-border-color:rgba(0,0,0,0.3);--generic-box-shadow:0 .25rem .25rem 0 rgba(0,0,0,0.125),0 .125rem .125rem -.125rem rgba(0,0,0,0.125)}.hidden{display:none !important}.visually-hidden{position:absolute !important;width:1px !important;height:1px !important;margin:-1px !important;border:0 !important;padding:0 !important;clip:rect(0 0 0 0) !important;-webkit-clip-path:inset(100%) !important;clip-path:inset(100%) !important;overflow:hidden !important}.bordered{border:.0625rem solid var(--generic-border-color) !important}.rounded{border-radius:var(--universal-border-radius) !important}.circular{border-radius:50% !important}.shadowed{box-shadow:var(--generic-box-shadow) !important}.responsive-margin{margin:calc(var(--universal-margin) / 4) !important}@media screen and (min-width: 768px){.responsive-margin{margin:calc(var(--universal-margin) / 2) !important}}@media screen and (min-width: 1280px){.responsive-margin{margin:var(--universal-margin) !important}}.responsive-padding{padding:calc(var(--universal-padding) / 4) !important}@media screen and (min-width: 768px){.responsive-padding{padding:calc(var(--universal-padding) / 2) !important}}@media screen and (min-width: 1280px){.responsive-padding{padding:var(--universal-padding) !important}}@media screen and (max-width: 767px){.hidden-sm{display:none !important}}@media screen and (min-width: 768px) and (max-width: 1279px){.hidden-md{display:none !important}}@media screen and (min-width: 1280px){.hidden-lg{display:none !important}}@media screen and (max-width: 767px){.visually-hidden-sm{position:absolute !important;width:1px !important;height:1px !important;margin:-1px !important;border:0 !important;padding:0 !important;clip:rect(0 0 0 0) !important;-webkit-clip-path:inset(100%) !important;clip-path:inset(100%) !important;overflow:hidden !important}}@media screen and (min-width: 768px) and (max-width: 1279px){.visually-hidden-md{position:absolute !important;width:1px !important;height:1px !important;margin:-1px !important;border:0 !important;padding:0 !important;clip:rect(0 0 0 0) !important;-webkit-clip-path:inset(100%) !important;clip-path:inset(100%) !important;overflow:hidden !important}}@media screen and (min-width: 1280px){.visually-hidden-lg{position:absolute !important;width:1px !important;height:1px !important;margin:-1px !important;border:0 !important;padding:0 !important;clip:rect(0 0 0 0) !important;-webkit-clip-path:inset(100%) !important;clip-path:inset(100%) !important;overflow:hidden !important}} diff --git a/docs/v3/flavors/mini-dark.scss b/docs/v3/flavors/mini-dark.scss new file mode 100644 index 0000000..78217fd --- /dev/null +++ b/docs/v3/flavors/mini-dark.scss @@ -0,0 +1,276 @@ +// This is a flavor file. Duplicate it and edit it to create your own flavor. Read instructions carefully. +// Single-line comments, starting with '//' will not be included in your final CSS file. Multiline comments, +// structured like the flavor description below, will be included in your final CSS file. +/* + Flavor name: Dark (mini-dark) + Author: Angelos Chalaris (chalarangelo@gmail.com) + Maintainers: Angelos Chalaris + mini.css version: v3.0.0 +*/ +$base-root-font-size: 16px; // Root font sizing for all elements (`px` only) +$base-line-height: 1.5; // Line height for most elements +$fore-color: #fdfdfd; // Text & foreground color +$secondary-fore-color: #f0f0f0; // Secondary text & foreground color +$back-color: #111; // Background color +$secondary-back-color: #222; // Secondary background color +$blockquote-color: #f57c00; //
sidebar and quotation color +$pre-color: #1565c0; // 
 sidebar color
+$border-color: #ddd; // Border color
+$secondary-border-color: #aaa; // Secondary border color
+$heading-line-height: 1.2; // Line height for headings
+$heading-ratio: 1.19; // Ratio for headings (strictly unitless)
+$subheading-font-size:0.75em; // Font sizing for  elements in headings
+$subheading-top-margin: -0.25rem; // Top margin of  elements in headings
+$heading-font-weight: 500; // Font weight for headings
+$horizontal-rule-line-height:  1.25em; // 
 line height
+$universal-margin: 0.5rem; // Universal margin for the most elements
+$universal-padding: 0.5rem; // Universal padding for the most elements
+$universal-border-radius: 0.125rem; // Universal border-radius for most elements
+$universal-box-shadow: none; // Universal box-shadow for most elements
+$small-element-font-size: 0.75em; // Font size for , , 
+$small-font-size: 0.75em; // Font sizing for  elements
+$blockquote-quotation-size: 3rem;   // Font size for the quotation of 

+$blockquote-cite-size: 0.75em; // Font size for the [cite] of 

+$code-font-size: 0.85em; // Font size for , 
+$sup-top: -0.5em; //  top
+$sub-bottom: -0.25em; //  bottom
+$a-link-color: #0277bd; // Color for :link
+$a-visited-color: #01579b; // Color for :visited
+$bold-font-weight: 700; // Font weight for  and 
+$mobile-breakpoint: 768px; // Breakpoint between small and medium screens (px)
+$large-screen-breakpoint: 1280px; // Breakpoint between medium and large screens (px)
+
+@import '../mini/core';
+
+$grid-column-count: 12; // Number of columns in the grid (integer value only).
+$grid-medium-breakpoint: $mobile-breakpoint; // Medium screen breakpoint for grid.
+$grid-large-breakpoint: $large-screen-breakpoint; // Large screen breakpoint for grid.
+$card-normal-width: 320px; // Width for normal cards.
+$card-section-media-height: 200px; // Height for cards' media sections.
+$card-fore-color: #fdfdfd; // Text color for the cards.
+$card-back-color: #111; // Background color for the cards.
+$card-border-color: #aaa; // Border color for the cards.
+
+@import '../mini/layout';
+
+/*
+	 Custom elements for card elements.
+*/
+$card-small-name: 'small'; // Class name for small cards.
+$card-small-width: 240px; // Width for small cards.
+@include make-card-alt-size ($card-small-name, $card-small-width);
+
+$card-large-name: 'large'; // Class name for large cards.
+$card-large-width: 480px; // Width for large cards.
+@include make-card-alt-size ($card-large-name, $card-large-width);
+
+$card-fluid-name: 'fluid'; // Class name for fluid cards.
+$card-fluid-width: 100%; // Width for fluid cards.
+@include make-card-alt-size ($card-fluid-name, $card-fluid-width);
+
+$card-warning-name: 'warning'; // Class name for card warnging color variant.
+$card-warning-back-color: #ffca28; // Background color for card warnging color variant.
+$card-warning-fore-color: #111; // Text color for card warnging color variant.
+$card-warning-border-color: #e8b825; // Border style for card warnging color variant.
+@include make-card-alt-color ($card-warning-name, $card-warning-back-color, $card-warning-fore-color, $card-warning-border-color);
+
+$card-error-name: 'error'; // Class name for card error color variant.
+$card-error-back-color: #b71c1c; // Background color for card error color variant.
+$card-error-fore-color: #f8f8f8; // Text color for card error color variant.
+$card-error-border-color: #a71a1a; // Border style for card error color variant.
+@include make-card-alt-color ($card-error-name, $card-error-back-color, $card-error-fore-color, $card-error-border-color);
+
+$card-section-dark-name: 'dark'; // Class name for card dark section variant.
+$card-section-dark-back-color: #e0e0e0; // Background color for card dark section variant.
+$card-section-dark-fore-color: #111; // Text color for card dark section variant.
+@include make-card-section-alt-color ($card-section-dark-name, $card-section-dark-back-color, $card-section-dark-fore-color);
+
+$card-section-double-padded-name: 'double-padded'; // Class name for card double-padded section variant.
+$card-section-double-padded-padding: calc(1.5 * var(#{$universal-padding-var}));  // Padding for card sectiondouble-padded section variant.
+@include make-card-section-alt-style ($card-section-double-padded-name, $card-section-double-padded-padding);
+
+$input-group-mobile-breakpoint: $mobile-breakpoint - 1px; // Breakpoint for fluid input group mobile view.
+$form-back-color: #222; // Background color for forms.
+$form-fore-color: #fdfdfd; // Text color for forms.
+$form-border-color: #aaa; // Border color for forms.
+$input-back-color: #111; // Background color for input elements.
+$input-fore-color: #fdfdfd; // Text color for input elements.
+$input-border-color: #aaa; // Border color for input elements.
+$input-focus-color: #0288d1; // Border color for focused input elements.
+$input-invalid-color: #d32f2f; // Border color for invalid input elements.
+$button-back-color: #212121; // Background color for buttons.
+$button-hover-back-color: #444; // Background color for buttons (hover).
+$button-fore-color: #e2e2e2; // Text color for buttons.
+$button-border-color: transparent; // Border color for buttons.
+$button-hover-border-color: transparent; // Border color for buttons (hover).
+$button-group-border-color: rgba(124,124,124,0.54); // Border color for button groups.
+
+@import '../mini/input_control';
+
+/*
+	 Custom elements for forms and input elements.
+*/
+$button-primary-name: 'primary'; // Class name for primary button color variant.
+$button-primary-back-color: #1976d2;// Background color for primary button color variant.
+$button-primary-hover-back-color: #1565c0;// Background color for primary button color variant (hover).
+$button-primary-fore-color: #f8f8f8;// Text color for primary button color variant.
+@include make-button-alt-color ($button-primary-name, $button-primary-back-color, $button-primary-hover-back-color, $button-primary-fore-color);
+
+$button-secondary-name: 'secondary'; // Class name for secondary button color variant.
+$button-secondary-back-color: #d32f2f;// Background color for secondary button color variant.
+$button-secondary-hover-back-color: #c62828;// Background color for secondary button color variant (hover).
+$button-secondary-fore-color: #f8f8f8;// Text color for secondary button color variant.
+@include make-button-alt-color ($button-secondary-name, $button-secondary-back-color, $button-secondary-hover-back-color, $button-secondary-fore-color);
+
+$button-tertiary-name: 'tertiary'; // Class name for tertiary button color variant.
+$button-tertiary-back-color: #308732;// Background color for tertiary button color variant.
+$button-tertiary-hover-back-color: #277529;// Background color for tertiary button color variant (hover).
+$button-tertiary-fore-color: #f8f8f8;// Text color for tertiary button color variant.
+@include make-button-alt-color ($button-tertiary-name, $button-tertiary-back-color, $button-tertiary-hover-back-color, $button-tertiary-fore-color);
+
+$button-inverse-name: 'inverse'; // Class name for inverse button color variant.
+$button-inverse-back-color: #f8f8f8;// Background color for inverse button color variant.
+$button-inverse-hover-back-color: #f0f0f0;// Background color for inverse button color variant (hover).
+$button-inverse-fore-color: #212121;// Text color for inverse button color variant.
+@include make-button-alt-color ($button-inverse-name, $button-inverse-back-color, $button-inverse-hover-back-color, $button-inverse-fore-color);
+
+$button-small-name: 'small'; // Class name, padding and margin for small button size variant.
+$button-small-padding: calc(0.5 * var(#{$universal-padding-var})) calc(0.75 * var(#{$universal-padding-var}));
+$button-small-margin:  var(#{$universal-margin-var});
+@include make-button-alt-size ($button-small-name, $button-small-padding, $button-small-margin);
+
+$button-large-name: 'large'; // Class name, padding and margin for large button size variant.
+$button-large-padding: calc(1.5 * var(#{$universal-padding-var})) calc(2 * var(#{$universal-padding-var}));
+$button-large-margin:  var(#{$universal-margin-var});
+@include make-button-alt-size ($button-large-name, $button-large-padding, $button-large-margin);
+
+$header-height: 3.1875rem; // Height of the header element.
+$header-back-color: #111; // Background color for the header element.
+$header-hover-back-color: #222; // Background color for the header element (hover).
+$header-fore-color: #f0f0f0; // Text color for the header element.
+$header-border-color: #aaa; // Border color for the header element.
+$nav-back-color: #111; // Background color for the nav element.
+$nav-hover-back-color: #222; // Background color for the nav element (hover).
+$nav-fore-color: #f0f0f0; // Text color for the nav element.
+$nav-border-color: #aaa; // Border color for the nav element.
+$nav-link-color: #0277bd; // Color for link in the nav element.
+$footer-fore-color: #f0f0f0; // Text color for the footer element.
+$footer-back-color: #111; // Background color for footer nav element.
+$footer-border-color: #aaa; // Border color for the footer element.
+$footer-link-color: #0277bd; // Color for link in the footer element.
+$drawer-back-color: #111; // Background color for the drawer component.
+$drawer-border-color: #aaa; // Border color for the drawer component.
+$drawer-hover-back-color: #222; // Background color for the drawer component's close (hover).
+$drawer-close-color: #f0f0f0; // Color of the close element for the drawer component.
+$header-logo-font-size: 1.75rem; // Font size for the header logo element.
+$nav-sublink-depth: 2; // Amount of subcategory classes to add.
+$footer-font-size: 0.875rem; // Font size for text in footer element.
+$drawer-toggle-font-size: 1.5em; // Font size for the drawer component's toggle. (prefer em units)
+$drawer-width: 320px; // Width of the drawer component.
+$drawer-close-size: 2rem; // Size of the close element for the drawer component.
+$drawer-mobile-breakpoint: $mobile-breakpoint; // Mobile breakpoint for the drawer component.
+
+@import '../mini/navigation';
+
+$table-mobile-breakpoint: $mobile-breakpoint; // Breakpoint for  mobile view.
+$table-max-height: 400px; // Maximum height of 
 elements (non-horizontal).
+$table-caption-font-size: 1.5rem; // Font size for 
 elements.
+$table-mobile-card-label: 'data-label'; // Attribute used to replace column headers in mobile view.
+$table-mobile-label-font-weight: 600; // Font weight for column header labels in mobile view.
+$table-border-color: #ddd; // Border color for  elements.
+$table-border-separator-color: #666; // Border color for the border between  and .
+$table-th-back-color:  #212121; // Background color for 
 elements.
+$table-th-fore-color: #fdfdfd; // Text color for  elements.
+$table-td-back-color: #111; // Background color for  elements.
+$table-td-fore-color: #fdfdfd; // Text color for  elements.
+$table-td-alt-back-color: #444; // Alternative background color for  elements in striped tables.
+$table-td-hover-back-color: #5c819f; // Hover background color for  elements in hoverable tables.
+
+@import '../mini/table';
+
+$mark-back-color: #0277bd; // Background color for 
+$mark-fore-color: #fafafa; // Text color for 
+$mark-font-size: 0.95em; // Font size for 
+$mark-line-height: 1em; // Line height for 
+$toast-back-color: #424242; // Background color for toast component
+$toast-fore-color: #fafafa; // Text color for toast component
+$tooltip-back-color: #fafafa; // Background color for tooltip component
+$tooltip-fore-color: #212121; // Text color for tooltip component
+$modal-overlay-color: rgba(0,0,0,0.45); // Overlay color for modal dialog component
+$modal-close-color: #f0f0f0; // Text color for the close button of the modal dialog component
+$modal-close-hover-back-color: #222; // Background color for the close button of the modal dialog component (on hover/focus)
+$modal-close-size: 1.75rem; // Font size for the close button of the modal dialog component
+$collapse-label-height: 1.5rem; // Height for the labels in the collapse component
+$collapse-content-max-height: 400px; // Max height for the content panes in the collapse component
+$collapse-label-back-color: #111; // Background color for labels in the collapse component
+$collapse-label-fore-color: #fafafa; // Text color for labels in the collapse component
+$collapse-label-hover-back-color: #222; // Background color for labels in the collapse component (hover)
+$collapse-selected-label-back-color: #444; // Background color for selected labels in the collapse component
+$collapse-border-color: #aaa; // Border color for collapse component
+$collapse-selected-label-border-color: #0277bd; // Border color for collapse component's selected labels
+$collapse-content-back-color: #212121; // Background color for collapse component's content panes
+
+@import '../mini/contextual';
+
+/*
+	 Custom elements for contextual background elements, toasts and tooltips.
+*/
+$mark-secondary-name: 'secondary'; // Class name for secondary  color variant.
+$mark-secondary-back-color: #d32f2f; // Background color for secondary  color variant.
+@include make-mark-alt-color ($mark-secondary-name, $mark-secondary-back-color);
+
+$mark-tertiary-name: 'tertiary';  // Class name for tertiary  color variant.
+$mark-tertiary-back-color: #308732; // Background color for tertiary  color variant.
+@include make-mark-alt-color ($mark-tertiary-name, $mark-tertiary-back-color);
+
+$mark-tag-name: 'tag'; // Class name, padding and border radius for tag  size variant.
+$mark-tag-padding: calc(var(#{$universal-padding-var})/2) var(#{$universal-padding-var});
+$mark-tag-border-radius: 1em;
+@include make-mark-alt-size ($mark-tag-name, $mark-tag-padding, $mark-tag-border-radius);
+
+$progress-back-color: #aaa; // Background color of .
+$progress-fore-color: #555; // Foreground color of .
+$progress-height: 0.75rem; // Height of .
+$progress-max-value: 1000; // Arithmetic max value of  - use integer values.
+$progress-inline-width: 60%; // Width of inline  elements.
+$spinner-donut-size: 1.25rem; // Size of the spinner donuts
+$spinner-donut-border-thickness: 0.25rem; // Border thickness for spinner donuts
+$spinner-donut-back-color: #ddd; // Background color for spinner donuts
+$spinner-donut-fore-color: #555; // Foreground color for spinner donuts
+
+@import '../mini/progress';
+
+/*
+	 Custom elements for progress bars and spinners.
+*/
+$progress-primary-name:         'primary';   // Class name for primary  color variant.
+$progress-primary-fore-color:   #1976d2;     // Foreground color for primary  color variant.
+@include make-progress-alt-color ($progress-primary-name, $progress-primary-fore-color);
+
+$progress-secondary-name:     'secondary';   // Class name for secondary  color variant.
+$progress-secondary-fore-color: #d32f2f;     // Foreground color for secondary  color variant.
+@include make-progress-alt-color ($progress-secondary-name, $progress-secondary-fore-color);
+
+$progress-tertiary-name:       'tertiary';   // Class name for tertiary  color variant.
+$progress-tertiary-fore-color:   #308732;    // Foreground color for tertiary  color variant.
+@include make-progress-alt-color ($progress-tertiary-name, $progress-tertiary-fore-color);
+
+$spinner-donut-primary-name:         'primary';   // Class name for primary spinner donut color variant.
+$spinner-donut-primary-fore-color:   #1976d2;     // Foreground color for primary spinner donut color variant.
+@include make-spinner-donut-alt-color ($spinner-donut-primary-name, $spinner-donut-primary-fore-color);
+
+$spinner-donut-secondary-name:     'secondary';   // Class name for secondary spinner donut color variant.
+$spinner-donut-secondary-fore-color: #d32f2f;     // Foreground color for secondary spinner donut color variant.
+@include make-spinner-donut-alt-color ($spinner-donut-secondary-name, $spinner-donut-secondary-fore-color);
+
+$spinner-donut-tertiary-name:       'tertiary';   // Class name for tertiary spinner donut color variant.
+$spinner-donut-tertiary-fore-color:   #308732;    // Foreground color for tertiary spinner donut color variant.
+@include make-spinner-donut-alt-color ($spinner-donut-tertiary-name, $spinner-donut-tertiary-fore-color);
+
+
+@import '../mini/icon';
+
+$box-shadow-generic: 0 4*$__1px 4*$__1px 0 rgba(0,0,0,0.125),  0 2*$__1px 2*$__1px -2*$__1px rgba(0,0,0,0.125);
+$border-generic-color: rgba(0,0,0,0.3); // Border color for bordered elements.
+
+@import '../mini/utility';
diff --git a/docs/v3/flavors/mini-default.css b/docs/v3/flavors/mini-default.css
new file mode 100644
index 0000000..4fa6e5a
--- /dev/null
+++ b/docs/v3/flavors/mini-default.css
@@ -0,0 +1,2169 @@
+@charset "UTF-8";
+/*
+  Flavor name: Default (mini-default)
+  Author: Angelos Chalaris (chalarangelo@gmail.com)
+  Maintainers: Angelos Chalaris
+  mini.css version: v3.0.0
+*/
+/*
+  Browsers resets and base typography.
+*/
+/* Core module CSS variable definitions */
+:root {
+  --fore-color: #111;
+  --secondary-fore-color: #444;
+  --back-color: #f8f8f8;
+  --secondary-back-color: #f0f0f0;
+  --blockquote-color: #f57c00;
+  --pre-color: #1565c0;
+  --border-color: #aaa;
+  --secondary-border-color: #ddd;
+  --heading-ratio: 1.19;
+  --universal-margin: 0.5rem;
+  --universal-padding: 0.5rem;
+  --universal-border-radius: 0.125rem;
+  --a-link-color: #0277bd;
+  --a-visited-color: #01579b;
+}
+
+html {
+  font-size: 16px;
+}
+
+a, b, del, em, i, ins, q, span, strong, u {
+  font-size: 1em;
+}
+
+html, * {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, sans-serif;
+  line-height: 1.5;
+  -webkit-text-size-adjust: 100%;
+}
+
+* {
+  font-size: 1rem;
+}
+
+body {
+  margin: 0;
+  color: var(--fore-color);
+  background: var(--back-color);
+}
+
+details {
+  display: block;
+}
+
+summary {
+  display: list-item;
+}
+
+abbr[title] {
+  border-bottom: none;
+  text-decoration: underline dotted;
+}
+
+input {
+  overflow: visible;
+}
+
+img {
+  max-width: 100%;
+  height: auto;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  line-height: 1.2;
+  margin: calc(1.5 * var(--universal-margin)) var(--universal-margin);
+  font-weight: 500;
+}
+
+h1 small, h2 small, h3 small, h4 small, h5 small, h6 small {
+  color: var(--secondary-fore-color);
+  display: block;
+  margin-top: -0.25rem;
+}
+
+h1 {
+  font-size: calc(1rem * var(--heading-ratio) * var(--heading-ratio) * var(--heading-ratio) * var(--heading-ratio));
+}
+
+h2 {
+  font-size: calc(1rem * var(--heading-ratio) * var(--heading-ratio) * var(--heading-ratio));
+}
+
+h3 {
+  font-size: calc(1rem * var(--heading-ratio) * var(--heading-ratio));
+}
+
+h4 {
+  font-size: calc(1rem * var(--heading-ratio));
+}
+
+h5 {
+  font-size: 1rem;
+}
+
+h6 {
+  font-size: calc(1rem / var(--heading-ratio));
+}
+
+p {
+  margin: var(--universal-margin);
+}
+
+ol, ul {
+  margin: var(--universal-margin);
+  padding-left: calc(2 * var(--universal-margin));
+}
+
+b, strong {
+  font-weight: 700;
+}
+
+hr {
+  box-sizing: content-box;
+  border: 0;
+  line-height: 1.25em;
+  margin: var(--universal-margin);
+  height: 0.0625rem;
+  background: linear-gradient(to right, transparent, var(--border-color) 20%, var(--border-color) 80%, transparent);
+}
+
+blockquote {
+  display: block;
+  position: relative;
+  font-style: italic;
+  color: var(--secondary-fore-color);
+  margin: var(--universal-margin);
+  padding: calc(3 * var(--universal-padding));
+  border: 0.0625rem solid var(--secondary-border-color);
+  border-left: 0.375rem solid var(--blockquote-color);
+  border-radius: 0 var(--universal-border-radius) var(--universal-border-radius) 0;
+}
+
+blockquote:before {
+  position: absolute;
+  top: calc(0rem - var(--universal-padding));
+  left: 0;
+  font-family: sans-serif;
+  font-size: 3rem;
+  font-weight: 700;
+  content: "\201c";
+  color: var(--blockquote-color);
+}
+
+blockquote[cite]:after {
+  font-style: normal;
+  font-size: 0.75em;
+  font-weight: 700;
+  content: "\a—  " attr(cite);
+  white-space: pre;
+}
+
+code, kbd, pre, samp {
+  font-family: Menlo, Consolas, monospace;
+  font-size: 0.85em;
+}
+
+code {
+  background: var(--secondary-back-color);
+  border-radius: var(--universal-border-radius);
+  padding: calc(var(--universal-padding) / 4) calc(var(--universal-padding) / 2);
+}
+
+kbd {
+  background: var(--fore-color);
+  color: var(--back-color);
+  border-radius: var(--universal-border-radius);
+  padding: calc(var(--universal-padding) / 4) calc(var(--universal-padding) / 2);
+}
+
+pre {
+  overflow: auto;
+  background: var(--secondary-back-color);
+  padding: calc(1.5 * var(--universal-padding));
+  margin: var(--universal-margin);
+  border: 0.0625rem solid var(--secondary-border-color);
+  border-left: 0.25rem solid var(--pre-color);
+  border-radius: 0 var(--universal-border-radius) var(--universal-border-radius) 0;
+}
+
+sup, sub, code, kbd {
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+small, sup, sub, figcaption {
+  font-size: 0.75em;
+}
+
+sup {
+  top: -0.5em;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+figure {
+  margin: var(--universal-margin);
+}
+
+figcaption {
+  color: var(--secondary-fore-color);
+}
+
+a {
+  text-decoration: none;
+}
+
+a:link {
+  color: var(--a-link-color);
+}
+
+a:visited {
+  color: var(--a-visited-color);
+}
+
+a:hover, a:focus {
+  text-decoration: underline;
+}
+
+/*
+  Definitions for the grid system, cards and containers.
+*/
+.container {
+  margin: 0 auto;
+  padding: 0 calc(1.5 * var(--universal-padding));
+}
+
+.row {
+  box-sizing: border-box;
+  display: flex;
+  flex: 0 1 auto;
+  flex-flow: row wrap;
+}
+
+.col-sm,
+[class^='col-sm-'],
+[class^='col-sm-offset-'],
+.row[class*='cols-sm-'] > * {
+  box-sizing: border-box;
+  flex: 0 0 auto;
+  padding: 0 calc(var(--universal-padding) / 2);
+}
+
+.col-sm,
+.row.cols-sm > * {
+  max-width: 100%;
+  flex-grow: 1;
+  flex-basis: 0;
+}
+
+.col-sm-1,
+.row.cols-sm-1 > * {
+  max-width: 8.33333%;
+  flex-basis: 8.33333%;
+}
+
+.col-sm-offset-0 {
+  margin-left: 0;
+}
+
+.col-sm-2,
+.row.cols-sm-2 > * {
+  max-width: 16.66667%;
+  flex-basis: 16.66667%;
+}
+
+.col-sm-offset-1 {
+  margin-left: 8.33333%;
+}
+
+.col-sm-3,
+.row.cols-sm-3 > * {
+  max-width: 25%;
+  flex-basis: 25%;
+}
+
+.col-sm-offset-2 {
+  margin-left: 16.66667%;
+}
+
+.col-sm-4,
+.row.cols-sm-4 > * {
+  max-width: 33.33333%;
+  flex-basis: 33.33333%;
+}
+
+.col-sm-offset-3 {
+  margin-left: 25%;
+}
+
+.col-sm-5,
+.row.cols-sm-5 > * {
+  max-width: 41.66667%;
+  flex-basis: 41.66667%;
+}
+
+.col-sm-offset-4 {
+  margin-left: 33.33333%;
+}
+
+.col-sm-6,
+.row.cols-sm-6 > * {
+  max-width: 50%;
+  flex-basis: 50%;
+}
+
+.col-sm-offset-5 {
+  margin-left: 41.66667%;
+}
+
+.col-sm-7,
+.row.cols-sm-7 > * {
+  max-width: 58.33333%;
+  flex-basis: 58.33333%;
+}
+
+.col-sm-offset-6 {
+  margin-left: 50%;
+}
+
+.col-sm-8,
+.row.cols-sm-8 > * {
+  max-width: 66.66667%;
+  flex-basis: 66.66667%;
+}
+
+.col-sm-offset-7 {
+  margin-left: 58.33333%;
+}
+
+.col-sm-9,
+.row.cols-sm-9 > * {
+  max-width: 75%;
+  flex-basis: 75%;
+}
+
+.col-sm-offset-8 {
+  margin-left: 66.66667%;
+}
+
+.col-sm-10,
+.row.cols-sm-10 > * {
+  max-width: 83.33333%;
+  flex-basis: 83.33333%;
+}
+
+.col-sm-offset-9 {
+  margin-left: 75%;
+}
+
+.col-sm-11,
+.row.cols-sm-11 > * {
+  max-width: 91.66667%;
+  flex-basis: 91.66667%;
+}
+
+.col-sm-offset-10 {
+  margin-left: 83.33333%;
+}
+
+.col-sm-12,
+.row.cols-sm-12 > * {
+  max-width: 100%;
+  flex-basis: 100%;
+}
+
+.col-sm-offset-11 {
+  margin-left: 91.66667%;
+}
+
+.col-sm-normal {
+  order: initial;
+}
+
+.col-sm-first {
+  order: -999;
+}
+
+.col-sm-last {
+  order: 999;
+}
+
+@media screen and (min-width: 768px) {
+  .col-md,
+  [class^='col-md-'],
+  [class^='col-md-offset-'],
+  .row[class*='cols-md-'] > * {
+    box-sizing: border-box;
+    flex: 0 0 auto;
+    padding: 0 calc(var(--universal-padding) / 2);
+  }
+  .col-md,
+  .row.cols-md > * {
+    max-width: 100%;
+    flex-grow: 1;
+    flex-basis: 0;
+  }
+  .col-md-1,
+  .row.cols-md-1 > * {
+    max-width: 8.33333%;
+    flex-basis: 8.33333%;
+  }
+  .col-md-offset-0 {
+    margin-left: 0;
+  }
+  .col-md-2,
+  .row.cols-md-2 > * {
+    max-width: 16.66667%;
+    flex-basis: 16.66667%;
+  }
+  .col-md-offset-1 {
+    margin-left: 8.33333%;
+  }
+  .col-md-3,
+  .row.cols-md-3 > * {
+    max-width: 25%;
+    flex-basis: 25%;
+  }
+  .col-md-offset-2 {
+    margin-left: 16.66667%;
+  }
+  .col-md-4,
+  .row.cols-md-4 > * {
+    max-width: 33.33333%;
+    flex-basis: 33.33333%;
+  }
+  .col-md-offset-3 {
+    margin-left: 25%;
+  }
+  .col-md-5,
+  .row.cols-md-5 > * {
+    max-width: 41.66667%;
+    flex-basis: 41.66667%;
+  }
+  .col-md-offset-4 {
+    margin-left: 33.33333%;
+  }
+  .col-md-6,
+  .row.cols-md-6 > * {
+    max-width: 50%;
+    flex-basis: 50%;
+  }
+  .col-md-offset-5 {
+    margin-left: 41.66667%;
+  }
+  .col-md-7,
+  .row.cols-md-7 > * {
+    max-width: 58.33333%;
+    flex-basis: 58.33333%;
+  }
+  .col-md-offset-6 {
+    margin-left: 50%;
+  }
+  .col-md-8,
+  .row.cols-md-8 > * {
+    max-width: 66.66667%;
+    flex-basis: 66.66667%;
+  }
+  .col-md-offset-7 {
+    margin-left: 58.33333%;
+  }
+  .col-md-9,
+  .row.cols-md-9 > * {
+    max-width: 75%;
+    flex-basis: 75%;
+  }
+  .col-md-offset-8 {
+    margin-left: 66.66667%;
+  }
+  .col-md-10,
+  .row.cols-md-10 > * {
+    max-width: 83.33333%;
+    flex-basis: 83.33333%;
+  }
+  .col-md-offset-9 {
+    margin-left: 75%;
+  }
+  .col-md-11,
+  .row.cols-md-11 > * {
+    max-width: 91.66667%;
+    flex-basis: 91.66667%;
+  }
+  .col-md-offset-10 {
+    margin-left: 83.33333%;
+  }
+  .col-md-12,
+  .row.cols-md-12 > * {
+    max-width: 100%;
+    flex-basis: 100%;
+  }
+  .col-md-offset-11 {
+    margin-left: 91.66667%;
+  }
+  .col-md-normal {
+    order: initial;
+  }
+  .col-md-first {
+    order: -999;
+  }
+  .col-md-last {
+    order: 999;
+  }
+}
+
+@media screen and (min-width: 1280px) {
+  .col-lg,
+  [class^='col-lg-'],
+  [class^='col-lg-offset-'],
+  .row[class*='cols-lg-'] > * {
+    box-sizing: border-box;
+    flex: 0 0 auto;
+    padding: 0 calc(var(--universal-padding) / 2);
+  }
+  .col-lg,
+  .row.cols-lg > * {
+    max-width: 100%;
+    flex-grow: 1;
+    flex-basis: 0;
+  }
+  .col-lg-1,
+  .row.cols-lg-1 > * {
+    max-width: 8.33333%;
+    flex-basis: 8.33333%;
+  }
+  .col-lg-offset-0 {
+    margin-left: 0;
+  }
+  .col-lg-2,
+  .row.cols-lg-2 > * {
+    max-width: 16.66667%;
+    flex-basis: 16.66667%;
+  }
+  .col-lg-offset-1 {
+    margin-left: 8.33333%;
+  }
+  .col-lg-3,
+  .row.cols-lg-3 > * {
+    max-width: 25%;
+    flex-basis: 25%;
+  }
+  .col-lg-offset-2 {
+    margin-left: 16.66667%;
+  }
+  .col-lg-4,
+  .row.cols-lg-4 > * {
+    max-width: 33.33333%;
+    flex-basis: 33.33333%;
+  }
+  .col-lg-offset-3 {
+    margin-left: 25%;
+  }
+  .col-lg-5,
+  .row.cols-lg-5 > * {
+    max-width: 41.66667%;
+    flex-basis: 41.66667%;
+  }
+  .col-lg-offset-4 {
+    margin-left: 33.33333%;
+  }
+  .col-lg-6,
+  .row.cols-lg-6 > * {
+    max-width: 50%;
+    flex-basis: 50%;
+  }
+  .col-lg-offset-5 {
+    margin-left: 41.66667%;
+  }
+  .col-lg-7,
+  .row.cols-lg-7 > * {
+    max-width: 58.33333%;
+    flex-basis: 58.33333%;
+  }
+  .col-lg-offset-6 {
+    margin-left: 50%;
+  }
+  .col-lg-8,
+  .row.cols-lg-8 > * {
+    max-width: 66.66667%;
+    flex-basis: 66.66667%;
+  }
+  .col-lg-offset-7 {
+    margin-left: 58.33333%;
+  }
+  .col-lg-9,
+  .row.cols-lg-9 > * {
+    max-width: 75%;
+    flex-basis: 75%;
+  }
+  .col-lg-offset-8 {
+    margin-left: 66.66667%;
+  }
+  .col-lg-10,
+  .row.cols-lg-10 > * {
+    max-width: 83.33333%;
+    flex-basis: 83.33333%;
+  }
+  .col-lg-offset-9 {
+    margin-left: 75%;
+  }
+  .col-lg-11,
+  .row.cols-lg-11 > * {
+    max-width: 91.66667%;
+    flex-basis: 91.66667%;
+  }
+  .col-lg-offset-10 {
+    margin-left: 83.33333%;
+  }
+  .col-lg-12,
+  .row.cols-lg-12 > * {
+    max-width: 100%;
+    flex-basis: 100%;
+  }
+  .col-lg-offset-11 {
+    margin-left: 91.66667%;
+  }
+  .col-lg-normal {
+    order: initial;
+  }
+  .col-lg-first {
+    order: -999;
+  }
+  .col-lg-last {
+    order: 999;
+  }
+}
+
+/* Card component CSS variable definitions */
+:root {
+  --card-back-color: #f8f8f8;
+  --card-fore-color: #111;
+  --card-border-color: #ddd;
+}
+
+.card {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-self: center;
+  position: relative;
+  width: 100%;
+  background: var(--card-back-color);
+  color: var(--card-fore-color);
+  border: 0.0625rem solid var(--card-border-color);
+  border-radius: var(--universal-border-radius);
+  margin: var(--universal-margin);
+  overflow: hidden;
+}
+
+@media screen and (min-width: 320px) {
+  .card {
+    max-width: 320px;
+  }
+}
+
+.card > .section {
+  background: var(--card-back-color);
+  color: var(--card-fore-color);
+  box-sizing: border-box;
+  margin: 0;
+  border: 0;
+  border-radius: 0;
+  border-bottom: 0.0625rem solid var(--card-border-color);
+  padding: var(--universal-padding);
+  width: 100%;
+}
+
+.card > .section.media {
+  height: 200px;
+  padding: 0;
+  -o-object-fit: cover;
+  object-fit: cover;
+}
+
+.card > .section:last-child {
+  border-bottom: 0;
+}
+
+/*
+  Custom elements for card elements.
+*/
+@media screen and (min-width: 240px) {
+  .card.small {
+    max-width: 240px;
+  }
+}
+
+@media screen and (min-width: 480px) {
+  .card.large {
+    max-width: 480px;
+  }
+}
+
+.card.fluid {
+  max-width: 100%;
+  width: auto;
+}
+
+.card.warning {
+  --card-back-color: #ffca28;
+  --card-border-color: #e8b825;
+}
+
+.card.error {
+  --card-back-color: #b71c1c;
+  --card-fore-color: #f8f8f8;
+  --card-border-color: #a71a1a;
+}
+
+.card > .section.dark {
+  --card-back-color: #e0e0e0;
+}
+
+.card > .section.double-padded {
+  padding: calc(1.5 * var(--universal-padding));
+}
+
+/*
+  Definitions for forms and input elements.
+*/
+/* Input_control module CSS variable definitions */
+:root {
+  --form-back-color: #f0f0f0;
+  --form-fore-color: #111;
+  --form-border-color: #ddd;
+  --input-back-color: #f8f8f8;
+  --input-fore-color: #111;
+  --input-border-color: #ddd;
+  --input-focus-color: #0288d1;
+  --input-invalid-color: #d32f2f;
+  --button-back-color: #e2e2e2;
+  --button-hover-back-color: #dcdcdc;
+  --button-fore-color: #212121;
+  --button-border-color: transparent;
+  --button-hover-border-color: transparent;
+  --button-group-border-color: rgba(124, 124, 124, 0.54);
+}
+
+form {
+  background: var(--form-back-color);
+  color: var(--form-fore-color);
+  border: 0.0625rem solid var(--form-border-color);
+  border-radius: var(--universal-border-radius);
+  margin: var(--universal-margin);
+  padding: calc(2 * var(--universal-padding)) var(--universal-padding);
+}
+
+fieldset {
+  border: 0.0625rem solid var(--form-border-color);
+  border-radius: var(--universal-border-radius);
+  margin: calc(var(--universal-margin) / 4);
+  padding: var(--universal-padding);
+}
+
+legend {
+  box-sizing: border-box;
+  display: table;
+  max-width: 100%;
+  white-space: normal;
+  font-weight: 700;
+  padding: calc(var(--universal-padding) / 2);
+}
+
+label {
+  padding: calc(var(--universal-padding) / 2) var(--universal-padding);
+}
+
+.input-group {
+  display: inline-block;
+}
+
+.input-group.fluid {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.input-group.fluid > input {
+  max-width: 100%;
+  flex-grow: 1;
+  flex-basis: 0px;
+}
+
+@media screen and (max-width: 767px) {
+  .input-group.fluid {
+    align-items: stretch;
+    flex-direction: column;
+  }
+}
+
+.input-group.vertical {
+  display: flex;
+  align-items: stretch;
+  flex-direction: column;
+}
+
+.input-group.vertical > input {
+  max-width: 100%;
+  flex-grow: 1;
+  flex-basis: 0px;
+}
+
+[type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button {
+  height: auto;
+}
+
+[type="search"] {
+  -webkit-appearance: textfield;
+  outline-offset: -2px;
+}
+
+[type="search"]::-webkit-search-cancel-button,
+[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+input:not([type]), [type="text"], [type="email"], [type="number"], [type="search"],
+[type="password"], [type="url"], [type="tel"], [type="checkbox"], [type="radio"], textarea, select {
+  box-sizing: border-box;
+  background: var(--input-back-color);
+  color: var(--input-fore-color);
+  border: 0.0625rem solid var(--input-border-color);
+  border-radius: var(--universal-border-radius);
+  margin: calc(var(--universal-margin) / 2);
+  padding: var(--universal-padding) calc(1.5 * var(--universal-padding));
+}
+
+input:not([type="button"]):not([type="submit"]):not([type="reset"]):hover, input:not([type="button"]):not([type="submit"]):not([type="reset"]):focus, textarea:hover, textarea:focus, select:hover, select:focus {
+  border-color: var(--input-focus-color);
+  box-shadow: none;
+}
+
+input:not([type="button"]):not([type="submit"]):not([type="reset"]):invalid, input:not([type="button"]):not([type="submit"]):not([type="reset"]):focus:invalid, textarea:invalid, textarea:focus:invalid, select:invalid, select:focus:invalid {
+  border-color: var(--input-invalid-color);
+  box-shadow: none;
+}
+
+input:not([type="button"]):not([type="submit"]):not([type="reset"])[readonly], textarea[readonly], select[readonly] {
+  background: var(--secondary-back-color);
+}
+
+select {
+  max-width: 100%;
+}
+
+option {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+[type="checkbox"], [type="radio"] {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  position: relative;
+  height: calc(1rem + var(--universal-padding) / 2);
+  width: calc(1rem + var(--universal-padding) / 2);
+  vertical-align: text-bottom;
+  padding: 0;
+  flex-basis: calc(1rem + var(--universal-padding) / 2) !important;
+  flex-grow: 0 !important;
+}
+
+[type="checkbox"]:checked:before, [type="radio"]:checked:before {
+  position: absolute;
+}
+
+[type="checkbox"]:checked:before {
+  content: '\2713';
+  font-family: sans-serif;
+  font-size: calc(1rem + var(--universal-padding) / 2);
+  top: calc(0rem - var(--universal-padding));
+  left: calc(var(--universal-padding) / 4);
+}
+
+[type="radio"] {
+  border-radius: 100%;
+}
+
+[type="radio"]:checked:before {
+  border-radius: 100%;
+  content: '';
+  top: calc(0.0625rem + var(--universal-padding) / 2);
+  left: calc(0.0625rem + var(--universal-padding) / 2);
+  background: var(--input-fore-color);
+  width: 0.5rem;
+  height: 0.5rem;
+}
+
+:placeholder-shown {
+  color: var(--input-fore-color);
+}
+
+::-ms-placeholder {
+  color: var(--input-fore-color);
+  opacity: 0.54;
+}
+
+button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+button, html [type="button"], [type="reset"], [type="submit"] {
+  -webkit-appearance: button;
+}
+
+button {
+  overflow: visible;
+  text-transform: none;
+}
+
+button, [type="button"], [type="submit"], [type="reset"],
+a.button, label.button, .button,
+a[role="button"], label[role="button"], [role="button"] {
+  display: inline-block;
+  background: var(--button-back-color);
+  color: var(--button-fore-color);
+  border: 0.0625rem solid var(--button-border-color);
+  border-radius: var(--universal-border-radius);
+  padding: var(--universal-padding) calc(1.5 * var(--universal-padding));
+  margin: var(--universal-margin);
+  text-decoration: none;
+  cursor: pointer;
+  transition: background 0.3s;
+}
+
+button:hover, button:focus, [type="button"]:hover, [type="button"]:focus, [type="submit"]:hover, [type="submit"]:focus, [type="reset"]:hover, [type="reset"]:focus,
+a.button:hover,
+a.button:focus, label.button:hover, label.button:focus, .button:hover, .button:focus,
+a[role="button"]:hover,
+a[role="button"]:focus, label[role="button"]:hover, label[role="button"]:focus, [role="button"]:hover, [role="button"]:focus {
+  background: var(--button-hover-back-color);
+  border-color: var(--button-hover-border-color);
+}
+
+input:disabled, input[disabled], textarea:disabled, textarea[disabled], select:disabled, select[disabled], button:disabled, button[disabled], .button:disabled, .button[disabled], [role="button"]:disabled, [role="button"][disabled] {
+  cursor: not-allowed;
+  opacity: 0.75;
+}
+
+.button-group {
+  display: flex;
+  border: 0.0625rem solid var(--button-group-border-color);
+  border-radius: var(--universal-border-radius);
+  margin: var(--universal-margin);
+}
+
+.button-group > button, .button-group [type="button"], .button-group > [type="submit"], .button-group > [type="reset"],
+.button-group > .button, .button-group > [role="button"] {
+  margin: 0;
+  max-width: 100%;
+  flex: 1 1 auto;
+  text-align: center;
+  border: 0;
+  border-radius: 0;
+  box-shadow: none;
+}
+
+.button-group > :not(:first-child) {
+  border-left: 0.0625rem solid var(--button-group-border-color);
+}
+
+@media screen and (max-width: 767px) {
+  .button-group {
+    flex-direction: column;
+  }
+  .button-group > :not(:first-child) {
+    border: 0;
+    border-top: 0.0625rem solid var(--button-group-border-color);
+  }
+}
+
+/*
+  Custom elements for forms and input elements.
+*/
+button.primary, [type="button"].primary, [type="submit"].primary, [type="reset"].primary, .button.primary, [role="button"].primary {
+  --button-back-color: #1976d2;
+  --button-fore-color: #f8f8f8;
+}
+
+button.primary:hover, button.primary:focus, [type="button"].primary:hover, [type="button"].primary:focus, [type="submit"].primary:hover, [type="submit"].primary:focus, [type="reset"].primary:hover, [type="reset"].primary:focus, .button.primary:hover, .button.primary:focus, [role="button"].primary:hover, [role="button"].primary:focus {
+  --button-hover-back-color: #1565c0;
+}
+
+button.secondary, [type="button"].secondary, [type="submit"].secondary, [type="reset"].secondary, .button.secondary, [role="button"].secondary {
+  --button-back-color: #d32f2f;
+  --button-fore-color: #f8f8f8;
+}
+
+button.secondary:hover, button.secondary:focus, [type="button"].secondary:hover, [type="button"].secondary:focus, [type="submit"].secondary:hover, [type="submit"].secondary:focus, [type="reset"].secondary:hover, [type="reset"].secondary:focus, .button.secondary:hover, .button.secondary:focus, [role="button"].secondary:hover, [role="button"].secondary:focus {
+  --button-hover-back-color: #c62828;
+}
+
+button.tertiary, [type="button"].tertiary, [type="submit"].tertiary, [type="reset"].tertiary, .button.tertiary, [role="button"].tertiary {
+  --button-back-color: #308732;
+  --button-fore-color: #f8f8f8;
+}
+
+button.tertiary:hover, button.tertiary:focus, [type="button"].tertiary:hover, [type="button"].tertiary:focus, [type="submit"].tertiary:hover, [type="submit"].tertiary:focus, [type="reset"].tertiary:hover, [type="reset"].tertiary:focus, .button.tertiary:hover, .button.tertiary:focus, [role="button"].tertiary:hover, [role="button"].tertiary:focus {
+  --button-hover-back-color: #277529;
+}
+
+button.inverse, [type="button"].inverse, [type="submit"].inverse, [type="reset"].inverse, .button.inverse, [role="button"].inverse {
+  --button-back-color: #212121;
+  --button-fore-color: #f8f8f8;
+}
+
+button.inverse:hover, button.inverse:focus, [type="button"].inverse:hover, [type="button"].inverse:focus, [type="submit"].inverse:hover, [type="submit"].inverse:focus, [type="reset"].inverse:hover, [type="reset"].inverse:focus, .button.inverse:hover, .button.inverse:focus, [role="button"].inverse:hover, [role="button"].inverse:focus {
+  --button-hover-back-color: #111;
+}
+
+button.small, [type="button"].small, [type="submit"].small, [type="reset"].small, .button.small, [role="button"].small {
+  padding: calc(0.5 * var(--universal-padding)) calc(0.75 * var(--universal-padding));
+  margin: var(--universal-margin);
+}
+
+button.large, [type="button"].large, [type="submit"].large, [type="reset"].large, .button.large, [role="button"].large {
+  padding: calc(1.5 * var(--universal-padding)) calc(2 * var(--universal-padding));
+  margin: var(--universal-margin);
+}
+
+/*
+  Definitions for navigation elements.
+*/
+/* Navigation module CSS variable definitions */
+:root {
+  --header-back-color: #f8f8f8;
+  --header-hover-back-color: #f0f0f0;
+  --header-fore-color: #444;
+  --header-border-color: #ddd;
+  --nav-back-color: #f8f8f8;
+  --nav-hover-back-color: #f0f0f0;
+  --nav-fore-color: #444;
+  --nav-border-color: #ddd;
+  --nav-link-color: #0277bd;
+  --footer-fore-color: #444;
+  --footer-back-color: #f8f8f8;
+  --footer-border-color: #ddd;
+  --footer-link-color: #0277bd;
+  --drawer-back-color: #f8f8f8;
+  --drawer-hover-back-color: #f0f0f0;
+  --drawer-border-color: #ddd;
+  --drawer-close-color: #444;
+}
+
+header {
+  height: 3.1875rem;
+  background: var(--header-back-color);
+  color: var(--header-fore-color);
+  border-bottom: 0.0625rem solid var(--header-border-color);
+  padding: calc(var(--universal-padding) / 4) 0;
+  white-space: nowrap;
+  overflow-x: auto;
+  overflow-y: hidden;
+}
+
+header.row {
+  box-sizing: content-box;
+}
+
+header .logo {
+  color: var(--header-fore-color);
+  font-size: 1.75rem;
+  padding: var(--universal-padding) calc(2 * var(--universal-padding));
+  text-decoration: none;
+}
+
+header button, header [type="button"], header .button, header [role="button"] {
+  box-sizing: border-box;
+  position: relative;
+  top: calc(0rem - var(--universal-padding) / 4);
+  height: calc(3.1875rem + var(--universal-padding) / 2);
+  background: var(--header-back-color);
+  line-height: calc(3.1875rem - var(--universal-padding) * 1.5);
+  text-align: center;
+  color: var(--header-fore-color);
+  border: 0;
+  border-radius: 0;
+  margin: 0;
+  text-transform: uppercase;
+}
+
+header button:hover, header button:focus, header [type="button"]:hover, header [type="button"]:focus, header .button:hover, header .button:focus, header [role="button"]:hover, header [role="button"]:focus {
+  background: var(--header-hover-back-color);
+}
+
+nav {
+  background: var(--nav-back-color);
+  color: var(--nav-fore-color);
+  border: 0.0625rem solid var(--nav-border-color);
+  border-radius: var(--universal-border-radius);
+  margin: var(--universal-margin);
+}
+
+nav * {
+  padding: var(--universal-padding) calc(1.5 * var(--universal-padding));
+}
+
+nav a, nav a:visited {
+  display: block;
+  color: var(--nav-link-color);
+  border-radius: var(--universal-border-radius);
+  transition: background 0.3s;
+}
+
+nav a:hover, nav a:focus, nav a:visited:hover, nav a:visited:focus {
+  text-decoration: none;
+  background: var(--nav-hover-back-color);
+}
+
+nav .sublink-1 {
+  position: relative;
+  margin-left: calc(2 * var(--universal-padding));
+}
+
+nav .sublink-1:before {
+  position: absolute;
+  left: calc(var(--universal-padding) - 1 * var(--universal-padding));
+  top: -0.0625rem;
+  content: '';
+  height: 100%;
+  border: 0.0625rem solid var(--nav-border-color);
+  border-left: 0;
+}
+
+nav .sublink-2 {
+  position: relative;
+  margin-left: calc(4 * var(--universal-padding));
+}
+
+nav .sublink-2:before {
+  position: absolute;
+  left: calc(var(--universal-padding) - 3 * var(--universal-padding));
+  top: -0.0625rem;
+  content: '';
+  height: 100%;
+  border: 0.0625rem solid var(--nav-border-color);
+  border-left: 0;
+}
+
+footer {
+  background: var(--footer-back-color);
+  color: var(--footer-fore-color);
+  border-top: 0.0625rem solid var(--footer-border-color);
+  padding: calc(2 * var(--universal-padding)) var(--universal-padding);
+  font-size: 0.875rem;
+}
+
+footer a, footer a:visited {
+  color: var(--footer-link-color);
+}
+
+header.sticky {
+  position: -webkit-sticky;
+  position: sticky;
+  z-index: 1101;
+  top: 0;
+}
+
+footer.sticky {
+  position: -webkit-sticky;
+  position: sticky;
+  z-index: 1101;
+  bottom: 0;
+}
+
+.drawer-toggle:before {
+  display: inline-block;
+  position: relative;
+  vertical-align: bottom;
+  content: '\00a0\2261\00a0';
+  font-family: sans-serif;
+  font-size: 1.5em;
+}
+
+@media screen and (min-width: 768px) {
+  .drawer-toggle:not(.persistent) {
+    display: none;
+  }
+}
+
+[type="checkbox"].drawer {
+  height: 1px;
+  width: 1px;
+  margin: -1px;
+  overflow: hidden;
+  position: absolute;
+  clip: rect(0 0 0 0);
+  -webkit-clip-path: inset(100%);
+  clip-path: inset(100%);
+}
+
+[type="checkbox"].drawer + * {
+  display: block;
+  box-sizing: border-box;
+  position: fixed;
+  top: 0;
+  width: 320px;
+  height: 100vh;
+  overflow-y: auto;
+  background: var(--drawer-back-color);
+  border: 0.0625rem solid var(--drawer-border-color);
+  border-radius: 0;
+  margin: 0;
+  z-index: 1110;
+  right: -320px;
+  transition: right 0.3s;
+}
+
+[type="checkbox"].drawer + * .drawer-close {
+  position: absolute;
+  top: var(--universal-margin);
+  right: var(--universal-margin);
+  z-index: 1111;
+  width: 2rem;
+  height: 2rem;
+  border-radius: var(--universal-border-radius);
+  padding: var(--universal-padding);
+  margin: 0;
+  cursor: pointer;
+  transition: background 0.3s;
+}
+
+[type="checkbox"].drawer + * .drawer-close:before {
+  display: block;
+  content: '\00D7';
+  color: var(--drawer-close-color);
+  position: relative;
+  font-family: sans-serif;
+  font-size: 2rem;
+  line-height: 1;
+  text-align: center;
+}
+
+[type="checkbox"].drawer + * .drawer-close:hover, [type="checkbox"].drawer + * .drawer-close:focus {
+  background: var(--drawer-hover-back-color);
+}
+
+@media screen and (max-width: 320px) {
+  [type="checkbox"].drawer + * {
+    width: 100%;
+  }
+}
+
+[type="checkbox"].drawer:checked + * {
+  right: 0;
+}
+
+@media screen and (min-width: 768px) {
+  [type="checkbox"].drawer:not(.persistent) + * {
+    position: static;
+    height: 100%;
+    z-index: 1100;
+  }
+  [type="checkbox"].drawer:not(.persistent) + * .drawer-close {
+    display: none;
+  }
+}
+
+/*
+  Definitions for the responsive table component.
+*/
+/* Table module CSS variable definitions. */
+:root {
+  --table-border-color: #aaa;
+  --table-border-separator-color: #666;
+  --table-head-back-color: #e6e6e6;
+  --table-head-fore-color: #111;
+  --table-body-back-color: #f8f8f8;
+  --table-body-fore-color: #111;
+  --table-body-alt-back-color: #eee;
+}
+
+table {
+  border-collapse: separate;
+  border-spacing: 0;
+  margin: 0;
+  display: flex;
+  flex: 0 1 auto;
+  flex-flow: row wrap;
+  padding: var(--universal-padding);
+  padding-top: 0;
+}
+
+table caption {
+  font-size: 1.5rem;
+  margin: calc(2 * var(--universal-margin)) 0;
+  max-width: 100%;
+  flex: 0 0 100%;
+}
+
+table thead, table tbody {
+  display: flex;
+  flex-flow: row wrap;
+  border: 0.0625rem solid var(--table-border-color);
+}
+
+table thead {
+  z-index: 999;
+  border-radius: var(--universal-border-radius) var(--universal-border-radius) 0 0;
+  border-bottom: 0.0625rem solid var(--table-border-separator-color);
+}
+
+table tbody {
+  border-top: 0;
+  margin-top: calc(0 - var(--universal-margin));
+  border-radius: 0 0 var(--universal-border-radius) var(--universal-border-radius);
+}
+
+table tr {
+  display: flex;
+  padding: 0;
+}
+
+table th, table td {
+  padding: calc(2 * var(--universal-padding));
+}
+
+table th {
+  text-align: left;
+  background: var(--table-head-back-color);
+  color: var(--table-head-fore-color);
+}
+
+table td {
+  background: var(--table-body-back-color);
+  color: var(--table-body-fore-color);
+  border-top: 0.0625rem solid var(--table-border-color);
+}
+
+table:not(.horizontal) {
+  overflow: auto;
+  max-height: 400px;
+}
+
+table:not(.horizontal) thead, table:not(.horizontal) tbody {
+  max-width: 100%;
+  flex: 0 0 100%;
+}
+
+table:not(.horizontal) tr {
+  flex-flow: row wrap;
+  flex: 0 0 100%;
+}
+
+table:not(.horizontal) th, table:not(.horizontal) td {
+  flex: 1 0 0%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+table:not(.horizontal) thead {
+  position: sticky;
+  top: 0;
+}
+
+table:not(.horizontal) tbody tr:first-child td {
+  border-top: 0;
+}
+
+table.horizontal {
+  border: 0;
+}
+
+table.horizontal thead, table.horizontal tbody {
+  border: 0;
+  flex-flow: row nowrap;
+}
+
+table.horizontal tbody {
+  overflow: auto;
+  justify-content: space-between;
+  flex: 1 0 0;
+  margin-left: calc( 4 * var(--universal-margin));
+  padding-bottom: calc(var(--universal-padding) / 4);
+}
+
+table.horizontal tr {
+  flex-direction: column;
+  flex: 1 0 auto;
+}
+
+table.horizontal th, table.horizontal td {
+  width: 100%;
+  border: 0;
+  border-bottom: 0.0625rem solid var(--table-border-color);
+}
+
+table.horizontal th:not(:first-child), table.horizontal td:not(:first-child) {
+  border-top: 0;
+}
+
+table.horizontal th {
+  text-align: right;
+  border-left: 0.0625rem solid var(--table-border-color);
+  border-right: 0.0625rem solid var(--table-border-separator-color);
+}
+
+table.horizontal thead tr:first-child {
+  padding-left: 0;
+}
+
+table.horizontal th:first-child, table.horizontal td:first-child {
+  border-top: 0.0625rem solid var(--table-border-color);
+}
+
+table.horizontal tbody tr:last-child td {
+  border-right: 0.0625rem solid var(--table-border-color);
+}
+
+table.horizontal tbody tr:last-child td:first-child {
+  border-top-right-radius: 0.25rem;
+}
+
+table.horizontal tbody tr:last-child td:last-child {
+  border-bottom-right-radius: 0.25rem;
+}
+
+table.horizontal thead tr:first-child th:first-child {
+  border-top-left-radius: 0.25rem;
+}
+
+table.horizontal thead tr:first-child th:last-child {
+  border-bottom-left-radius: 0.25rem;
+}
+
+@media screen and (max-width: 767px) {
+  table, table.horizontal {
+    border-collapse: collapse;
+    border: 0;
+    width: 100%;
+    display: table;
+  }
+  table thead, table th, table.horizontal thead, table.horizontal th {
+    border: 0;
+    height: 1px;
+    width: 1px;
+    margin: -1px;
+    overflow: hidden;
+    padding: 0;
+    position: absolute;
+    clip: rect(0 0 0 0);
+    -webkit-clip-path: inset(100%);
+    clip-path: inset(100%);
+  }
+  table tbody, table.horizontal tbody {
+    border: 0;
+    display: table-row-group;
+  }
+  table tr, table.horizontal tr {
+    display: block;
+    border: 0.0625rem solid var(--table-border-color);
+    border-radius: var(--universal-border-radius);
+    background: #fafafa;
+    padding: var(--universal-padding);
+    margin: var(--universal-margin);
+    margin-bottom: calc(2 * var(--universal-margin));
+  }
+  table th, table td, table.horizontal th, table.horizontal td {
+    width: auto;
+  }
+  table td, table.horizontal td {
+    display: block;
+    border: 0;
+    text-align: right;
+  }
+  table td:before, table.horizontal td:before {
+    content: attr(data-label);
+    float: left;
+    font-weight: 600;
+  }
+  table th:first-child, table td:first-child, table.horizontal th:first-child, table.horizontal td:first-child {
+    border-top: 0;
+  }
+  table tbody tr:last-child td, table.horizontal tbody tr:last-child td {
+    border-right: 0;
+  }
+}
+
+:root {
+  --table-body-alt-back-color: #eee;
+}
+
+table.striped tr:nth-of-type(2n) > td {
+  background: var(--table-body-alt-back-color);
+}
+
+@media screen and (max-width: 768px) {
+  table.striped tr:nth-of-type(2n) {
+    background: var(--table-body-alt-back-color);
+  }
+}
+
+:root {
+  --table-body-hover-back-color: #90caf9;
+}
+
+table.hoverable tr:hover, table.hoverable tr:hover > td, table.hoverable tr:focus, table.hoverable tr:focus > td {
+  background: var(--table-body-hover-back-color);
+}
+
+@media screen and (max-width: 768px) {
+  table.hoverable tr:hover, table.hoverable tr:hover > td, table.hoverable tr:focus, table.hoverable tr:focus > td {
+    background: var(--table-body-hover-back-color);
+  }
+}
+
+/*
+  Definitions for contextual background elements, toasts and tooltips.
+*/
+/* Contextual module CSS variable definitions */
+:root {
+  --mark-back-color: #0277bd;
+  --mark-fore-color: #fafafa;
+}
+
+mark {
+  background: var(--mark-back-color);
+  color: var(--mark-fore-color);
+  font-size: 0.95em;
+  line-height: 1em;
+  border-radius: var(--universal-border-radius);
+  padding: calc(var(--universal-padding) / 4) calc(var(--universal-padding) / 2);
+}
+
+mark.inline-block {
+  display: inline-block;
+  font-size: 1em;
+  line-height: 1.5;
+  padding: calc(var(--universal-padding) / 2) var(--universal-padding);
+}
+
+:root {
+  --toast-back-color: #424242;
+  --toast-fore-color: #fafafa;
+}
+
+.toast {
+  position: fixed;
+  bottom: calc(var(--universal-margin) * 3);
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 1111;
+  color: var(--toast-fore-color);
+  background: var(--toast-back-color);
+  border-radius: calc(var(--universal-border-radius) * 16);
+  padding: var(--universal-padding) calc(var(--universal-padding) * 3);
+}
+
+:root {
+  --tooltip-back-color: #212121;
+  --tooltip-fore-color: #fafafa;
+}
+
+.tooltip {
+  position: relative;
+  display: inline-block;
+}
+
+.tooltip:before, .tooltip:after {
+  position: absolute;
+  opacity: 0;
+  clip: rect(0 0 0 0);
+  -webkit-clip-path: inset(100%);
+  clip-path: inset(100%);
+  transition: all 0.3s;
+  z-index: 1010;
+  left: 50%;
+}
+
+.tooltip:not(.bottom):before, .tooltip:not(.bottom):after {
+  bottom: 75%;
+}
+
+.tooltip.bottom:before, .tooltip.bottom:after {
+  top: 75%;
+}
+
+.tooltip:hover:before, .tooltip:hover:after, .tooltip:focus:before, .tooltip:focus:after {
+  opacity: 1;
+  clip: auto;
+  -webkit-clip-path: inset(0%);
+  clip-path: inset(0%);
+}
+
+.tooltip:before {
+  content: '';
+  background: transparent;
+  border: var(--universal-margin) solid transparent;
+  left: calc(50% - var(--universal-margin));
+}
+
+.tooltip:not(.bottom):before {
+  border-top-color: #212121;
+}
+
+.tooltip.bottom:before {
+  border-bottom-color: #212121;
+}
+
+.tooltip:after {
+  content: attr(aria-label);
+  color: var(--tooltip-fore-color);
+  background: var(--tooltip-back-color);
+  border-radius: var(--universal-border-radius);
+  padding: var(--universal-padding);
+  white-space: nowrap;
+  transform: translateX(-50%);
+}
+
+.tooltip:not(.bottom):after {
+  margin-bottom: calc(2 * var(--universal-margin));
+}
+
+.tooltip.bottom:after {
+  margin-top: calc(2 * var(--universal-margin));
+}
+
+:root {
+  --modal-overlay-color: rgba(0, 0, 0, 0.45);
+  --modal-close-color: #444;
+  --modal-close-hover-color: #f0f0f0;
+}
+
+[type="checkbox"].modal {
+  height: 1px;
+  width: 1px;
+  margin: -1px;
+  overflow: hidden;
+  position: absolute;
+  clip: rect(0 0 0 0);
+  -webkit-clip-path: inset(100%);
+  clip-path: inset(100%);
+}
+
+[type="checkbox"].modal + div {
+  position: fixed;
+  top: 0;
+  left: 0;
+  display: none;
+  width: 100vw;
+  height: 100vh;
+  background: var(--modal-overlay-color);
+}
+
+[type="checkbox"].modal + div .card {
+  margin: 0 auto;
+  max-height: 50vh;
+  overflow: auto;
+}
+
+[type="checkbox"].modal + div .card .modal-close {
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 1.75rem;
+  height: 1.75rem;
+  border-radius: var(--universal-border-radius);
+  padding: var(--universal-padding);
+  margin: 0;
+  cursor: pointer;
+  transition: background 0.3s;
+}
+
+[type="checkbox"].modal + div .card .modal-close:before {
+  display: block;
+  content: '\00D7';
+  color: var(--modal-close-color);
+  position: relative;
+  font-family: sans-serif;
+  font-size: 1.75rem;
+  line-height: 1;
+  text-align: center;
+}
+
+[type="checkbox"].modal + div .card .modal-close:hover, [type="checkbox"].modal + div .card .modal-close:focus {
+  background: var(--modal-close-hover-color);
+}
+
+[type="checkbox"].modal:checked + div {
+  display: flex;
+  flex: 0 1 auto;
+  z-index: 1200;
+}
+
+[type="checkbox"].modal:checked + div .card .modal-close {
+  z-index: 1211;
+}
+
+:root {
+  --collapse-label-back-color: #e8e8e8;
+  --collapse-label-fore-color: #212121;
+  --collapse-label-hover-back-color: #f0f0f0;
+  --collapse-selected-label-back-color: #ececec;
+  --collapse-border-color: #ddd;
+  --collapse-content-back-color: #fafafa;
+  --collapse-selected-label-border-color: #0277bd;
+}
+
+.collapse {
+  width: calc(100% - 2 * var(--universal-margin));
+  opacity: 1;
+  display: flex;
+  flex-direction: column;
+  margin: var(--universal-margin);
+  border-radius: var(--universal-border-radius);
+}
+
+.collapse > [type="radio"], .collapse > [type="checkbox"] {
+  height: 1px;
+  width: 1px;
+  margin: -1px;
+  overflow: hidden;
+  position: absolute;
+  clip: rect(0 0 0 0);
+  -webkit-clip-path: inset(100%);
+  clip-path: inset(100%);
+}
+
+.collapse > label {
+  flex-grow: 1;
+  display: inline-block;
+  height: 1.5rem;
+  cursor: pointer;
+  transition: background 0.3s;
+  color: var(--collapse-label-fore-color);
+  background: var(--collapse-label-back-color);
+  border: 0.0625rem solid var(--collapse-border-color);
+  padding: calc(1.5 * var(--universal-padding));
+}
+
+.collapse > label:hover, .collapse > label:focus {
+  background: var(--collapse-label-hover-back-color);
+}
+
+.collapse > label + div {
+  flex-basis: auto;
+  height: 1px;
+  width: 1px;
+  margin: -1px;
+  overflow: hidden;
+  position: absolute;
+  clip: rect(0 0 0 0);
+  -webkit-clip-path: inset(100%);
+  clip-path: inset(100%);
+  transition: max-height 0.3s;
+  max-height: 1px;
+}
+
+.collapse > :checked + label {
+  background: var(--collapse-selected-label-back-color);
+  border-bottom-color: var(--collapse-selected-label-border-color);
+}
+
+.collapse > :checked + label + div {
+  box-sizing: border-box;
+  position: relative;
+  width: 100%;
+  height: auto;
+  overflow: auto;
+  margin: 0;
+  background: var(--collapse-content-back-color);
+  border: 0.0625rem solid var(--collapse-border-color);
+  border-top: 0;
+  padding: var(--universal-padding);
+  clip: auto;
+  -webkit-clip-path: inset(0%);
+  clip-path: inset(0%);
+  max-height: 400px;
+}
+
+.collapse > label:not(:first-of-type) {
+  border-top: 0;
+}
+
+.collapse > label:first-of-type {
+  border-radius: var(--universal-border-radius) var(--universal-border-radius) 0 0;
+}
+
+.collapse > label:last-of-type:not(:first-of-type) {
+  border-radius: 0 0 var(--universal-border-radius) var(--universal-border-radius);
+}
+
+.collapse > label:last-of-type:first-of-type {
+  border-radius: var(--universal-border-radius);
+}
+
+.collapse > :checked:last-of-type:not(:first-of-type) + label {
+  border-radius: 0;
+}
+
+.collapse > :checked:last-of-type + label + div {
+  border-radius: 0 0 var(--universal-border-radius) var(--universal-border-radius);
+}
+
+/*
+  Custom elements for contextual background elements, toasts and tooltips.
+*/
+mark.secondary {
+  --mark-back-color: #d32f2f;
+}
+
+mark.tertiary {
+  --mark-back-color: #308732;
+}
+
+mark.tag {
+  padding: calc(var(--universal-padding)/2) var(--universal-padding);
+  border-radius: 1em;
+}
+
+/*
+  Definitions for progress elements and spinners.
+*/
+/* Progess module CSS variable definitions */
+:root {
+  --progress-back-color: #ddd;
+  --progress-fore-color: #555;
+}
+
+progress {
+  display: block;
+  vertical-align: baseline;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  height: 0.75rem;
+  width: calc(100% - 2 * var(--universal-margin));
+  margin: var(--universal-margin);
+  border: 0;
+  border-radius: calc(2 * var(--universal-border-radius));
+  background: var(--progress-back-color);
+  color: var(--progress-fore-color);
+}
+
+progress::-webkit-progress-value {
+  background: var(--progress-fore-color);
+  border-top-left-radius: calc(2 * var(--universal-border-radius));
+  border-bottom-left-radius: calc(2 * var(--universal-border-radius));
+}
+
+progress::-webkit-progress-bar {
+  background: var(#ddd);
+}
+
+progress::-moz-progress-bar {
+  background: var(--progress-fore-color);
+  border-top-left-radius: calc(2 * var(--universal-border-radius));
+  border-bottom-left-radius: calc(2 * var(--universal-border-radius));
+}
+
+progress[value="1000"]::-webkit-progress-value {
+  border-radius: calc(2 * var(--universal-border-radius));
+}
+
+progress[value="1000"]::-moz-progress-bar {
+  border-radius: calc(2 * var(--universal-border-radius));
+}
+
+progress.inline {
+  display: inline-block;
+  vertical-align: middle;
+  width: 60%;
+}
+
+:root {
+  --spinner-back-color: #ddd;
+  --spinner-fore-color: #555;
+}
+
+@keyframes spinner-donut-anim {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+.spinner {
+  display: inline-block;
+  margin: var(--universal-margin);
+  border: 0.25rem solid var(--spinner-back-color);
+  border-left: 0.25rem solid var(--spinner-fore-color);
+  border-radius: 50%;
+  width: 1.25rem;
+  height: 1.25rem;
+  animation: spinner-donut-anim 1.2s linear infinite;
+}
+
+/*
+  Custom elements for progress bars and spinners.
+*/
+progress.primary {
+  --progress-fore-color: #1976d2;
+}
+
+progress.secondary {
+  --progress-fore-color: #d32f2f;
+}
+
+progress.tertiary {
+  --progress-fore-color: #308732;
+}
+
+.spinner.primary {
+  --spinner-fore-color: #1976d2;
+}
+
+.spinner.secondary {
+  --spinner-fore-color: #d32f2f;
+}
+
+.spinner.tertiary {
+  --spinner-fore-color: #308732;
+}
+
+/*
+  Definitions for icons - powered by Feather (https://feathericons.com/).
+*/
+span[class^='icon-'] {
+  display: inline-block;
+  height: 1em;
+  width: 1em;
+  vertical-align: -0.125em;
+  background-size: contain;
+  margin: 0 calc(var(--universal-margin) / 4);
+}
+
+span[class^='icon-'].secondary {
+  -webkit-filter: invert(25%);
+  filter: invert(25%);
+}
+
+span[class^='icon-'].inverse {
+  -webkit-filter: invert(100%);
+  filter: invert(100%);
+}
+
+span.icon-alert {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12' y2='16'%3E%3C/line%3E%3C/svg%3E");
+}
+
+span.icon-bookmark {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z'%3E%3C/path%3E%3C/svg%3E");
+}
+
+span.icon-calendar {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
+}
+
+span.icon-credit {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='1' y='4' width='22' height='16' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='1' y1='10' x2='23' y2='10'%3E%3C/line%3E%3C/svg%3E");
+}
+
+span.icon-edit {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 14.66V20a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h5.34'%3E%3C/path%3E%3Cpolygon points='18 2 22 6 12 16 8 16 8 12 18 2'%3E%3C/polygon%3E%3C/svg%3E");
+}
+
+span.icon-link {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'%3E%3C/path%3E%3Cpolyline points='15 3 21 3 21 9'%3E%3C/polyline%3E%3Cline x1='10' y1='14' x2='21' y2='3'%3E%3C/line%3E%3C/svg%3E");
+}
+
+span.icon-help {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3'%3E%3C/path%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='17' x2='12' y2='17'%3E%3C/line%3E%3C/svg%3E");
+}
+
+span.icon-home {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'%3E%3C/path%3E%3Cpolyline points='9 22 9 12 15 12 15 22'%3E%3C/polyline%3E%3C/svg%3E");
+}
+
+span.icon-info {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='16' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='8' x2='12' y2='8'%3E%3C/line%3E%3C/svg%3E");
+}
+
+span.icon-lock {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2' ry='2'%3E%3C/rect%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'%3E%3C/path%3E%3C/svg%3E");
+}
+
+span.icon-mail {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z'%3E%3C/path%3E%3Cpolyline points='22,6 12,13 2,6'%3E%3C/polyline%3E%3C/svg%3E");
+}
+
+span.icon-location {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'%3E%3C/path%3E%3Ccircle cx='12' cy='10' r='3'%3E%3C/circle%3E%3C/svg%3E");
+}
+
+span.icon-phone {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'%3E%3C/path%3E%3C/svg%3E");
+}
+
+span.icon-rss {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 11a9 9 0 0 1 9 9'%3E%3C/path%3E%3Cpath d='M4 4a16 16 0 0 1 16 16'%3E%3C/path%3E%3Ccircle cx='5' cy='19' r='1'%3E%3C/circle%3E%3C/svg%3E");
+}
+
+span.icon-search {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
+}
+
+span.icon-settings {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'%3E%3C/circle%3E%3Cpath d='M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z'%3E%3C/path%3E%3C/svg%3E");
+}
+
+span.icon-share {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='18' cy='5' r='3'%3E%3C/circle%3E%3Ccircle cx='6' cy='12' r='3'%3E%3C/circle%3E%3Ccircle cx='18' cy='19' r='3'%3E%3C/circle%3E%3Cline x1='8.59' y1='13.51' x2='15.42' y2='17.49'%3E%3C/line%3E%3Cline x1='15.41' y1='6.51' x2='8.59' y2='10.49'%3E%3C/line%3E%3C/svg%3E");
+}
+
+span.icon-cart {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1'%3E%3C/circle%3E%3Ccircle cx='20' cy='21' r='1'%3E%3C/circle%3E%3Cpath d='M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6'%3E%3C/path%3E%3C/svg%3E");
+}
+
+span.icon-upload {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'%3E%3C/path%3E%3Cpolyline points='17 8 12 3 7 8'%3E%3C/polyline%3E%3Cline x1='12' y1='3' x2='12' y2='15'%3E%3C/line%3E%3C/svg%3E");
+}
+
+span.icon-user {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'%3E%3C/path%3E%3Ccircle cx='12' cy='7' r='4'%3E%3C/circle%3E%3C/svg%3E");
+}
+
+/*
+  Definitions for utilities and helper classes.
+*/
+/* Utility module CSS variable definitions */
+:root {
+  --generic-border-color: rgba(0, 0, 0, 0.3);
+  --generic-box-shadow: 0 0.25rem 0.25rem 0 rgba(0, 0, 0, 0.125), 0 0.125rem 0.125rem -0.125rem rgba(0, 0, 0, 0.25);
+}
+
+.hidden {
+  display: none !important;
+}
+
+.visually-hidden {
+  position: absolute !important;
+  width: 1px !important;
+  height: 1px !important;
+  margin: -1px !important;
+  border: 0 !important;
+  padding: 0 !important;
+  clip: rect(0 0 0 0) !important;
+  -webkit-clip-path: inset(100%) !important;
+  clip-path: inset(100%) !important;
+  overflow: hidden !important;
+}
+
+.bordered {
+  border: 0.0625rem solid var(--generic-border-color) !important;
+}
+
+.rounded {
+  border-radius: var(--universal-border-radius) !important;
+}
+
+.circular {
+  border-radius: 50% !important;
+}
+
+.shadowed {
+  box-shadow: var(--generic-box-shadow) !important;
+}
+
+.responsive-margin {
+  margin: calc(var(--universal-margin) / 4) !important;
+}
+
+@media screen and (min-width: 768px) {
+  .responsive-margin {
+    margin: calc(var(--universal-margin) / 2) !important;
+  }
+}
+
+@media screen and (min-width: 1280px) {
+  .responsive-margin {
+    margin: var(--universal-margin) !important;
+  }
+}
+
+.responsive-padding {
+  padding: calc(var(--universal-padding) / 4) !important;
+}
+
+@media screen and (min-width: 768px) {
+  .responsive-padding {
+    padding: calc(var(--universal-padding) / 2) !important;
+  }
+}
+
+@media screen and (min-width: 1280px) {
+  .responsive-padding {
+    padding: var(--universal-padding) !important;
+  }
+}
+
+@media screen and (max-width: 767px) {
+  .hidden-sm {
+    display: none !important;
+  }
+}
+
+@media screen and (min-width: 768px) and (max-width: 1279px) {
+  .hidden-md {
+    display: none !important;
+  }
+}
+
+@media screen and (min-width: 1280px) {
+  .hidden-lg {
+    display: none !important;
+  }
+}
+
+@media screen and (max-width: 767px) {
+  .visually-hidden-sm {
+    position: absolute !important;
+    width: 1px !important;
+    height: 1px !important;
+    margin: -1px !important;
+    border: 0 !important;
+    padding: 0 !important;
+    clip: rect(0 0 0 0) !important;
+    -webkit-clip-path: inset(100%) !important;
+    clip-path: inset(100%) !important;
+    overflow: hidden !important;
+  }
+}
+
+@media screen and (min-width: 768px) and (max-width: 1279px) {
+  .visually-hidden-md {
+    position: absolute !important;
+    width: 1px !important;
+    height: 1px !important;
+    margin: -1px !important;
+    border: 0 !important;
+    padding: 0 !important;
+    clip: rect(0 0 0 0) !important;
+    -webkit-clip-path: inset(100%) !important;
+    clip-path: inset(100%) !important;
+    overflow: hidden !important;
+  }
+}
+
+@media screen and (min-width: 1280px) {
+  .visually-hidden-lg {
+    position: absolute !important;
+    width: 1px !important;
+    height: 1px !important;
+    margin: -1px !important;
+    border: 0 !important;
+    padding: 0 !important;
+    clip: rect(0 0 0 0) !important;
+    -webkit-clip-path: inset(100%) !important;
+    clip-path: inset(100%) !important;
+    overflow: hidden !important;
+  }
+}
diff --git a/docs/v3/flavors/mini-default.min.css b/docs/v3/flavors/mini-default.min.css
new file mode 100644
index 0000000..534d100
--- /dev/null
+++ b/docs/v3/flavors/mini-default.min.css
@@ -0,0 +1 @@
+:root{--fore-color:#111;--secondary-fore-color:#444;--back-color:#f8f8f8;--secondary-back-color:#f0f0f0;--blockquote-color:#f57c00;--pre-color:#1565c0;--border-color:#aaa;--secondary-border-color:#ddd;--heading-ratio:1.19;--universal-margin:.5rem;--universal-padding:.5rem;--universal-border-radius:.125rem;--a-link-color:#0277bd;--a-visited-color:#01579b}html{font-size:16px}a,b,del,em,i,ins,q,span,strong,u{font-size:1em}html,*{font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, sans-serif;line-height:1.5;-webkit-text-size-adjust:100%}*{font-size:1rem}body{margin:0;color:var(--fore-color);background:var(--back-color)}details{display:block}summary{display:list-item}abbr[title]{border-bottom:none;text-decoration:underline dotted}input{overflow:visible}img{max-width:100%;height:auto}h1,h2,h3,h4,h5,h6{line-height:1.2;margin:calc(1.5 * var(--universal-margin)) var(--universal-margin);font-weight:500}h1 small,h2 small,h3 small,h4 small,h5 small,h6 small{color:var(--secondary-fore-color);display:block;margin-top:-.25rem}h1{font-size:calc(1rem * var(--heading-ratio) * var(--heading-ratio) * var(--heading-ratio) * var(--heading-ratio))}h2{font-size:calc(1rem * var(--heading-ratio) * var(--heading-ratio) * var(--heading-ratio))}h3{font-size:calc(1rem * var(--heading-ratio) * var(--heading-ratio))}h4{font-size:calc(1rem * var(--heading-ratio))}h5{font-size:1rem}h6{font-size:calc(1rem / var(--heading-ratio))}p{margin:var(--universal-margin)}ol,ul{margin:var(--universal-margin);padding-left:calc(2 * var(--universal-margin))}b,strong{font-weight:700}hr{box-sizing:content-box;border:0;line-height:1.25em;margin:var(--universal-margin);height:.0625rem;background:linear-gradient(to right, transparent, var(--border-color) 20%, var(--border-color) 80%, transparent)}blockquote{display:block;position:relative;font-style:italic;color:var(--secondary-fore-color);margin:var(--universal-margin);padding:calc(3 * var(--universal-padding));border:.0625rem solid var(--secondary-border-color);border-left:.375rem solid var(--blockquote-color);border-radius:0 var(--universal-border-radius) var(--universal-border-radius) 0}blockquote:before{position:absolute;top:calc(0rem - var(--universal-padding));left:0;font-family:sans-serif;font-size:3rem;font-weight:700;content:"\201c";color:var(--blockquote-color)}blockquote[cite]:after{font-style:normal;font-size:.75em;font-weight:700;content:"\a—  " attr(cite);white-space:pre}code,kbd,pre,samp{font-family:Menlo, Consolas, monospace;font-size:.85em}code{background:var(--secondary-back-color);border-radius:var(--universal-border-radius);padding:calc(var(--universal-padding) / 4) calc(var(--universal-padding) / 2)}kbd{background:var(--fore-color);color:var(--back-color);border-radius:var(--universal-border-radius);padding:calc(var(--universal-padding) / 4) calc(var(--universal-padding) / 2)}pre{overflow:auto;background:var(--secondary-back-color);padding:calc(1.5 * var(--universal-padding));margin:var(--universal-margin);border:.0625rem solid var(--secondary-border-color);border-left:.25rem solid var(--pre-color);border-radius:0 var(--universal-border-radius) var(--universal-border-radius) 0}sup,sub,code,kbd{line-height:0;position:relative;vertical-align:baseline}small,sup,sub,figcaption{font-size:.75em}sup{top:-.5em}sub{bottom:-.25em}figure{margin:var(--universal-margin)}figcaption{color:var(--secondary-fore-color)}a{text-decoration:none}a:link{color:var(--a-link-color)}a:visited{color:var(--a-visited-color)}a:hover,a:focus{text-decoration:underline}.container{margin:0 auto;padding:0 calc(1.5 * var(--universal-padding))}.row{box-sizing:border-box;display:flex;flex:0 1 auto;flex-flow:row wrap}.col-sm,[class^='col-sm-'],[class^='col-sm-offset-'],.row[class*='cols-sm-']>*{box-sizing:border-box;flex:0 0 auto;padding:0 calc(var(--universal-padding) / 2)}.col-sm,.row.cols-sm>*{max-width:100%;flex-grow:1;flex-basis:0}.col-sm-1,.row.cols-sm-1>*{max-width:8.33333%;flex-basis:8.33333%}.col-sm-offset-0{margin-left:0}.col-sm-2,.row.cols-sm-2>*{max-width:16.66667%;flex-basis:16.66667%}.col-sm-offset-1{margin-left:8.33333%}.col-sm-3,.row.cols-sm-3>*{max-width:25%;flex-basis:25%}.col-sm-offset-2{margin-left:16.66667%}.col-sm-4,.row.cols-sm-4>*{max-width:33.33333%;flex-basis:33.33333%}.col-sm-offset-3{margin-left:25%}.col-sm-5,.row.cols-sm-5>*{max-width:41.66667%;flex-basis:41.66667%}.col-sm-offset-4{margin-left:33.33333%}.col-sm-6,.row.cols-sm-6>*{max-width:50%;flex-basis:50%}.col-sm-offset-5{margin-left:41.66667%}.col-sm-7,.row.cols-sm-7>*{max-width:58.33333%;flex-basis:58.33333%}.col-sm-offset-6{margin-left:50%}.col-sm-8,.row.cols-sm-8>*{max-width:66.66667%;flex-basis:66.66667%}.col-sm-offset-7{margin-left:58.33333%}.col-sm-9,.row.cols-sm-9>*{max-width:75%;flex-basis:75%}.col-sm-offset-8{margin-left:66.66667%}.col-sm-10,.row.cols-sm-10>*{max-width:83.33333%;flex-basis:83.33333%}.col-sm-offset-9{margin-left:75%}.col-sm-11,.row.cols-sm-11>*{max-width:91.66667%;flex-basis:91.66667%}.col-sm-offset-10{margin-left:83.33333%}.col-sm-12,.row.cols-sm-12>*{max-width:100%;flex-basis:100%}.col-sm-offset-11{margin-left:91.66667%}.col-sm-normal{order:initial}.col-sm-first{order:-999}.col-sm-last{order:999}@media screen and (min-width: 768px){.col-md,[class^='col-md-'],[class^='col-md-offset-'],.row[class*='cols-md-']>*{box-sizing:border-box;flex:0 0 auto;padding:0 calc(var(--universal-padding) / 2)}.col-md,.row.cols-md>*{max-width:100%;flex-grow:1;flex-basis:0}.col-md-1,.row.cols-md-1>*{max-width:8.33333%;flex-basis:8.33333%}.col-md-offset-0{margin-left:0}.col-md-2,.row.cols-md-2>*{max-width:16.66667%;flex-basis:16.66667%}.col-md-offset-1{margin-left:8.33333%}.col-md-3,.row.cols-md-3>*{max-width:25%;flex-basis:25%}.col-md-offset-2{margin-left:16.66667%}.col-md-4,.row.cols-md-4>*{max-width:33.33333%;flex-basis:33.33333%}.col-md-offset-3{margin-left:25%}.col-md-5,.row.cols-md-5>*{max-width:41.66667%;flex-basis:41.66667%}.col-md-offset-4{margin-left:33.33333%}.col-md-6,.row.cols-md-6>*{max-width:50%;flex-basis:50%}.col-md-offset-5{margin-left:41.66667%}.col-md-7,.row.cols-md-7>*{max-width:58.33333%;flex-basis:58.33333%}.col-md-offset-6{margin-left:50%}.col-md-8,.row.cols-md-8>*{max-width:66.66667%;flex-basis:66.66667%}.col-md-offset-7{margin-left:58.33333%}.col-md-9,.row.cols-md-9>*{max-width:75%;flex-basis:75%}.col-md-offset-8{margin-left:66.66667%}.col-md-10,.row.cols-md-10>*{max-width:83.33333%;flex-basis:83.33333%}.col-md-offset-9{margin-left:75%}.col-md-11,.row.cols-md-11>*{max-width:91.66667%;flex-basis:91.66667%}.col-md-offset-10{margin-left:83.33333%}.col-md-12,.row.cols-md-12>*{max-width:100%;flex-basis:100%}.col-md-offset-11{margin-left:91.66667%}.col-md-normal{order:initial}.col-md-first{order:-999}.col-md-last{order:999}}@media screen and (min-width: 1280px){.col-lg,[class^='col-lg-'],[class^='col-lg-offset-'],.row[class*='cols-lg-']>*{box-sizing:border-box;flex:0 0 auto;padding:0 calc(var(--universal-padding) / 2)}.col-lg,.row.cols-lg>*{max-width:100%;flex-grow:1;flex-basis:0}.col-lg-1,.row.cols-lg-1>*{max-width:8.33333%;flex-basis:8.33333%}.col-lg-offset-0{margin-left:0}.col-lg-2,.row.cols-lg-2>*{max-width:16.66667%;flex-basis:16.66667%}.col-lg-offset-1{margin-left:8.33333%}.col-lg-3,.row.cols-lg-3>*{max-width:25%;flex-basis:25%}.col-lg-offset-2{margin-left:16.66667%}.col-lg-4,.row.cols-lg-4>*{max-width:33.33333%;flex-basis:33.33333%}.col-lg-offset-3{margin-left:25%}.col-lg-5,.row.cols-lg-5>*{max-width:41.66667%;flex-basis:41.66667%}.col-lg-offset-4{margin-left:33.33333%}.col-lg-6,.row.cols-lg-6>*{max-width:50%;flex-basis:50%}.col-lg-offset-5{margin-left:41.66667%}.col-lg-7,.row.cols-lg-7>*{max-width:58.33333%;flex-basis:58.33333%}.col-lg-offset-6{margin-left:50%}.col-lg-8,.row.cols-lg-8>*{max-width:66.66667%;flex-basis:66.66667%}.col-lg-offset-7{margin-left:58.33333%}.col-lg-9,.row.cols-lg-9>*{max-width:75%;flex-basis:75%}.col-lg-offset-8{margin-left:66.66667%}.col-lg-10,.row.cols-lg-10>*{max-width:83.33333%;flex-basis:83.33333%}.col-lg-offset-9{margin-left:75%}.col-lg-11,.row.cols-lg-11>*{max-width:91.66667%;flex-basis:91.66667%}.col-lg-offset-10{margin-left:83.33333%}.col-lg-12,.row.cols-lg-12>*{max-width:100%;flex-basis:100%}.col-lg-offset-11{margin-left:91.66667%}.col-lg-normal{order:initial}.col-lg-first{order:-999}.col-lg-last{order:999}}:root{--card-back-color:#f8f8f8;--card-fore-color:#111;--card-border-color:#ddd}.card{display:flex;flex-direction:column;justify-content:space-between;align-self:center;position:relative;width:100%;background:var(--card-back-color);color:var(--card-fore-color);border:.0625rem solid var(--card-border-color);border-radius:var(--universal-border-radius);margin:var(--universal-margin);overflow:hidden}@media screen and (min-width: 320px){.card{max-width:320px}}.card>.section{background:var(--card-back-color);color:var(--card-fore-color);box-sizing:border-box;margin:0;border:0;border-radius:0;border-bottom:.0625rem solid var(--card-border-color);padding:var(--universal-padding);width:100%}.card>.section.media{height:200px;padding:0;-o-object-fit:cover;object-fit:cover}.card>.section:last-child{border-bottom:0}@media screen and (min-width: 240px){.card.small{max-width:240px}}@media screen and (min-width: 480px){.card.large{max-width:480px}}.card.fluid{max-width:100%;width:auto}.card.warning{--card-back-color:#ffca28;--card-border-color:#e8b825}.card.error{--card-back-color:#b71c1c;--card-fore-color:#f8f8f8;--card-border-color:#a71a1a}.card>.section.dark{--card-back-color:#e0e0e0}.card>.section.double-padded{padding:calc(1.5 * var(--universal-padding))}:root{--form-back-color:#f0f0f0;--form-fore-color:#111;--form-border-color:#ddd;--input-back-color:#f8f8f8;--input-fore-color:#111;--input-border-color:#ddd;--input-focus-color:#0288d1;--input-invalid-color:#d32f2f;--button-back-color:#e2e2e2;--button-hover-back-color:#dcdcdc;--button-fore-color:#212121;--button-border-color:transparent;--button-hover-border-color:transparent;--button-group-border-color:rgba(124,124,124,0.54)}form{background:var(--form-back-color);color:var(--form-fore-color);border:.0625rem solid var(--form-border-color);border-radius:var(--universal-border-radius);margin:var(--universal-margin);padding:calc(2 * var(--universal-padding)) var(--universal-padding)}fieldset{border:.0625rem solid var(--form-border-color);border-radius:var(--universal-border-radius);margin:calc(var(--universal-margin) / 4);padding:var(--universal-padding)}legend{box-sizing:border-box;display:table;max-width:100%;white-space:normal;font-weight:700;padding:calc(var(--universal-padding) / 2)}label{padding:calc(var(--universal-padding) / 2) var(--universal-padding)}.input-group{display:inline-block}.input-group.fluid{display:flex;align-items:center;justify-content:center}.input-group.fluid>input{max-width:100%;flex-grow:1;flex-basis:0px}@media screen and (max-width: 767px){.input-group.fluid{align-items:stretch;flex-direction:column}}.input-group.vertical{display:flex;align-items:stretch;flex-direction:column}.input-group.vertical>input{max-width:100%;flex-grow:1;flex-basis:0px}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px}[type="search"]::-webkit-search-cancel-button,[type="search"]::-webkit-search-decoration{-webkit-appearance:none}input:not([type]),[type="text"],[type="email"],[type="number"],[type="search"],[type="password"],[type="url"],[type="tel"],[type="checkbox"],[type="radio"],textarea,select{box-sizing:border-box;background:var(--input-back-color);color:var(--input-fore-color);border:.0625rem solid var(--input-border-color);border-radius:var(--universal-border-radius);margin:calc(var(--universal-margin) / 2);padding:var(--universal-padding) calc(1.5 * var(--universal-padding))}input:not([type="button"]):not([type="submit"]):not([type="reset"]):hover,input:not([type="button"]):not([type="submit"]):not([type="reset"]):focus,textarea:hover,textarea:focus,select:hover,select:focus{border-color:var(--input-focus-color);box-shadow:none}input:not([type="button"]):not([type="submit"]):not([type="reset"]):invalid,input:not([type="button"]):not([type="submit"]):not([type="reset"]):focus:invalid,textarea:invalid,textarea:focus:invalid,select:invalid,select:focus:invalid{border-color:var(--input-invalid-color);box-shadow:none}input:not([type="button"]):not([type="submit"]):not([type="reset"])[readonly],textarea[readonly],select[readonly]{background:var(--secondary-back-color)}select{max-width:100%}option{overflow:hidden;text-overflow:ellipsis}[type="checkbox"],[type="radio"]{-webkit-appearance:none;-moz-appearance:none;appearance:none;position:relative;height:calc(1rem + var(--universal-padding) / 2);width:calc(1rem + var(--universal-padding) / 2);vertical-align:text-bottom;padding:0;flex-basis:calc(1rem + var(--universal-padding) / 2) !important;flex-grow:0 !important}[type="checkbox"]:checked:before,[type="radio"]:checked:before{position:absolute}[type="checkbox"]:checked:before{content:'\2713';font-family:sans-serif;font-size:calc(1rem + var(--universal-padding) / 2);top:calc(0rem - var(--universal-padding));left:calc(var(--universal-padding) / 4)}[type="radio"]{border-radius:100%}[type="radio"]:checked:before{border-radius:100%;content:'';top:calc(.0625rem + var(--universal-padding) / 2);left:calc(.0625rem + var(--universal-padding) / 2);background:var(--input-fore-color);width:0.5rem;height:0.5rem}:placeholder-shown{color:var(--input-fore-color)}::-ms-placeholder{color:var(--input-fore-color);opacity:0.54}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button,html [type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button{overflow:visible;text-transform:none}button,[type="button"],[type="submit"],[type="reset"],a.button,label.button,.button,a[role="button"],label[role="button"],[role="button"]{display:inline-block;background:var(--button-back-color);color:var(--button-fore-color);border:.0625rem solid var(--button-border-color);border-radius:var(--universal-border-radius);padding:var(--universal-padding) calc(1.5 * var(--universal-padding));margin:var(--universal-margin);text-decoration:none;cursor:pointer;transition:background 0.3s}button:hover,button:focus,[type="button"]:hover,[type="button"]:focus,[type="submit"]:hover,[type="submit"]:focus,[type="reset"]:hover,[type="reset"]:focus,a.button:hover,a.button:focus,label.button:hover,label.button:focus,.button:hover,.button:focus,a[role="button"]:hover,a[role="button"]:focus,label[role="button"]:hover,label[role="button"]:focus,[role="button"]:hover,[role="button"]:focus{background:var(--button-hover-back-color);border-color:var(--button-hover-border-color)}input:disabled,input[disabled],textarea:disabled,textarea[disabled],select:disabled,select[disabled],button:disabled,button[disabled],.button:disabled,.button[disabled],[role="button"]:disabled,[role="button"][disabled]{cursor:not-allowed;opacity:.75}.button-group{display:flex;border:.0625rem solid var(--button-group-border-color);border-radius:var(--universal-border-radius);margin:var(--universal-margin)}.button-group>button,.button-group [type="button"],.button-group>[type="submit"],.button-group>[type="reset"],.button-group>.button,.button-group>[role="button"]{margin:0;max-width:100%;flex:1 1 auto;text-align:center;border:0;border-radius:0;box-shadow:none}.button-group>:not(:first-child){border-left:.0625rem solid var(--button-group-border-color)}@media screen and (max-width: 767px){.button-group{flex-direction:column}.button-group>:not(:first-child){border:0;border-top:.0625rem solid var(--button-group-border-color)}}button.primary,[type="button"].primary,[type="submit"].primary,[type="reset"].primary,.button.primary,[role="button"].primary{--button-back-color:#1976d2;--button-fore-color:#f8f8f8}button.primary:hover,button.primary:focus,[type="button"].primary:hover,[type="button"].primary:focus,[type="submit"].primary:hover,[type="submit"].primary:focus,[type="reset"].primary:hover,[type="reset"].primary:focus,.button.primary:hover,.button.primary:focus,[role="button"].primary:hover,[role="button"].primary:focus{--button-hover-back-color:#1565c0}button.secondary,[type="button"].secondary,[type="submit"].secondary,[type="reset"].secondary,.button.secondary,[role="button"].secondary{--button-back-color:#d32f2f;--button-fore-color:#f8f8f8}button.secondary:hover,button.secondary:focus,[type="button"].secondary:hover,[type="button"].secondary:focus,[type="submit"].secondary:hover,[type="submit"].secondary:focus,[type="reset"].secondary:hover,[type="reset"].secondary:focus,.button.secondary:hover,.button.secondary:focus,[role="button"].secondary:hover,[role="button"].secondary:focus{--button-hover-back-color:#c62828}button.tertiary,[type="button"].tertiary,[type="submit"].tertiary,[type="reset"].tertiary,.button.tertiary,[role="button"].tertiary{--button-back-color:#308732;--button-fore-color:#f8f8f8}button.tertiary:hover,button.tertiary:focus,[type="button"].tertiary:hover,[type="button"].tertiary:focus,[type="submit"].tertiary:hover,[type="submit"].tertiary:focus,[type="reset"].tertiary:hover,[type="reset"].tertiary:focus,.button.tertiary:hover,.button.tertiary:focus,[role="button"].tertiary:hover,[role="button"].tertiary:focus{--button-hover-back-color:#277529}button.inverse,[type="button"].inverse,[type="submit"].inverse,[type="reset"].inverse,.button.inverse,[role="button"].inverse{--button-back-color:#212121;--button-fore-color:#f8f8f8}button.inverse:hover,button.inverse:focus,[type="button"].inverse:hover,[type="button"].inverse:focus,[type="submit"].inverse:hover,[type="submit"].inverse:focus,[type="reset"].inverse:hover,[type="reset"].inverse:focus,.button.inverse:hover,.button.inverse:focus,[role="button"].inverse:hover,[role="button"].inverse:focus{--button-hover-back-color:#111}button.small,[type="button"].small,[type="submit"].small,[type="reset"].small,.button.small,[role="button"].small{padding:calc(0.5 * var(--universal-padding)) calc(0.75 * var(--universal-padding));margin:var(--universal-margin)}button.large,[type="button"].large,[type="submit"].large,[type="reset"].large,.button.large,[role="button"].large{padding:calc(1.5 * var(--universal-padding)) calc(2 * var(--universal-padding));margin:var(--universal-margin)}:root{--header-back-color:#f8f8f8;--header-hover-back-color:#f0f0f0;--header-fore-color:#444;--header-border-color:#ddd;--nav-back-color:#f8f8f8;--nav-hover-back-color:#f0f0f0;--nav-fore-color:#444;--nav-border-color:#ddd;--nav-link-color:#0277bd;--footer-fore-color:#444;--footer-back-color:#f8f8f8;--footer-border-color:#ddd;--footer-link-color:#0277bd;--drawer-back-color:#f8f8f8;--drawer-hover-back-color:#f0f0f0;--drawer-border-color:#ddd;--drawer-close-color:#444}header{height:3.1875rem;background:var(--header-back-color);color:var(--header-fore-color);border-bottom:.0625rem solid var(--header-border-color);padding:calc(var(--universal-padding) / 4) 0;white-space:nowrap;overflow-x:auto;overflow-y:hidden}header.row{box-sizing:content-box}header .logo{color:var(--header-fore-color);font-size:1.75rem;padding:var(--universal-padding) calc(2 * var(--universal-padding));text-decoration:none}header button,header [type="button"],header .button,header [role="button"]{box-sizing:border-box;position:relative;top:calc(0rem - var(--universal-padding) / 4);height:calc(3.1875rem + var(--universal-padding) / 2);background:var(--header-back-color);line-height:calc(3.1875rem - var(--universal-padding) * 1.5);text-align:center;color:var(--header-fore-color);border:0;border-radius:0;margin:0;text-transform:uppercase}header button:hover,header button:focus,header [type="button"]:hover,header [type="button"]:focus,header .button:hover,header .button:focus,header [role="button"]:hover,header [role="button"]:focus{background:var(--header-hover-back-color)}nav{background:var(--nav-back-color);color:var(--nav-fore-color);border:.0625rem solid var(--nav-border-color);border-radius:var(--universal-border-radius);margin:var(--universal-margin)}nav *{padding:var(--universal-padding) calc(1.5 * var(--universal-padding))}nav a,nav a:visited{display:block;color:var(--nav-link-color);border-radius:var(--universal-border-radius);transition:background 0.3s}nav a:hover,nav a:focus,nav a:visited:hover,nav a:visited:focus{text-decoration:none;background:var(--nav-hover-back-color)}nav .sublink-1{position:relative;margin-left:calc(2 * var(--universal-padding))}nav .sublink-1:before{position:absolute;left:calc(var(--universal-padding) - 1 * var(--universal-padding));top:-.0625rem;content:'';height:100%;border:.0625rem solid var(--nav-border-color);border-left:0}nav .sublink-2{position:relative;margin-left:calc(4 * var(--universal-padding))}nav .sublink-2:before{position:absolute;left:calc(var(--universal-padding) - 3 * var(--universal-padding));top:-.0625rem;content:'';height:100%;border:.0625rem solid var(--nav-border-color);border-left:0}footer{background:var(--footer-back-color);color:var(--footer-fore-color);border-top:.0625rem solid var(--footer-border-color);padding:calc(2 * var(--universal-padding)) var(--universal-padding);font-size:.875rem}footer a,footer a:visited{color:var(--footer-link-color)}header.sticky{position:-webkit-sticky;position:sticky;z-index:1101;top:0}footer.sticky{position:-webkit-sticky;position:sticky;z-index:1101;bottom:0}.drawer-toggle:before{display:inline-block;position:relative;vertical-align:bottom;content:'\00a0\2261\00a0';font-family:sans-serif;font-size:1.5em}@media screen and (min-width: 768px){.drawer-toggle:not(.persistent){display:none}}[type="checkbox"].drawer{height:1px;width:1px;margin:-1px;overflow:hidden;position:absolute;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%)}[type="checkbox"].drawer+*{display:block;box-sizing:border-box;position:fixed;top:0;width:320px;height:100vh;overflow-y:auto;background:var(--drawer-back-color);border:.0625rem solid var(--drawer-border-color);border-radius:0;margin:0;z-index:1110;right:-320px;transition:right 0.3s}[type="checkbox"].drawer+* .drawer-close{position:absolute;top:var(--universal-margin);right:var(--universal-margin);z-index:1111;width:2rem;height:2rem;border-radius:var(--universal-border-radius);padding:var(--universal-padding);margin:0;cursor:pointer;transition:background 0.3s}[type="checkbox"].drawer+* .drawer-close:before{display:block;content:'\00D7';color:var(--drawer-close-color);position:relative;font-family:sans-serif;font-size:2rem;line-height:1;text-align:center}[type="checkbox"].drawer+* .drawer-close:hover,[type="checkbox"].drawer+* .drawer-close:focus{background:var(--drawer-hover-back-color)}@media screen and (max-width: 320px){[type="checkbox"].drawer+*{width:100%}}[type="checkbox"].drawer:checked+*{right:0}@media screen and (min-width: 768px){[type="checkbox"].drawer:not(.persistent)+*{position:static;height:100%;z-index:1100}[type="checkbox"].drawer:not(.persistent)+* .drawer-close{display:none}}:root{--table-border-color:#aaa;--table-border-separator-color:#666;--table-head-back-color:#e6e6e6;--table-head-fore-color:#111;--table-body-back-color:#f8f8f8;--table-body-fore-color:#111;--table-body-alt-back-color:#eee}table{border-collapse:separate;border-spacing:0;margin:0;display:flex;flex:0 1 auto;flex-flow:row wrap;padding:var(--universal-padding);padding-top:0}table caption{font-size:1.5rem;margin:calc(2 * var(--universal-margin)) 0;max-width:100%;flex:0 0 100%}table thead,table tbody{display:flex;flex-flow:row wrap;border:.0625rem solid var(--table-border-color)}table thead{z-index:999;border-radius:var(--universal-border-radius) var(--universal-border-radius) 0 0;border-bottom:.0625rem solid var(--table-border-separator-color)}table tbody{border-top:0;margin-top:calc(0 - var(--universal-margin));border-radius:0 0 var(--universal-border-radius) var(--universal-border-radius)}table tr{display:flex;padding:0}table th,table td{padding:calc(2 * var(--universal-padding))}table th{text-align:left;background:var(--table-head-back-color);color:var(--table-head-fore-color)}table td{background:var(--table-body-back-color);color:var(--table-body-fore-color);border-top:.0625rem solid var(--table-border-color)}table:not(.horizontal){overflow:auto;max-height:400px}table:not(.horizontal) thead,table:not(.horizontal) tbody{max-width:100%;flex:0 0 100%}table:not(.horizontal) tr{flex-flow:row wrap;flex:0 0 100%}table:not(.horizontal) th,table:not(.horizontal) td{flex:1 0 0%;overflow:hidden;text-overflow:ellipsis}table:not(.horizontal) thead{position:sticky;top:0}table:not(.horizontal) tbody tr:first-child td{border-top:0}table.horizontal{border:0}table.horizontal thead,table.horizontal tbody{border:0;flex-flow:row nowrap}table.horizontal tbody{overflow:auto;justify-content:space-between;flex:1 0 0;margin-left:calc( 4 * var(--universal-margin));padding-bottom:calc(var(--universal-padding) / 4)}table.horizontal tr{flex-direction:column;flex:1 0 auto}table.horizontal th,table.horizontal td{width:100%;border:0;border-bottom:.0625rem solid var(--table-border-color)}table.horizontal th:not(:first-child),table.horizontal td:not(:first-child){border-top:0}table.horizontal th{text-align:right;border-left:.0625rem solid var(--table-border-color);border-right:.0625rem solid var(--table-border-separator-color)}table.horizontal thead tr:first-child{padding-left:0}table.horizontal th:first-child,table.horizontal td:first-child{border-top:.0625rem solid var(--table-border-color)}table.horizontal tbody tr:last-child td{border-right:.0625rem solid var(--table-border-color)}table.horizontal tbody tr:last-child td:first-child{border-top-right-radius:0.25rem}table.horizontal tbody tr:last-child td:last-child{border-bottom-right-radius:0.25rem}table.horizontal thead tr:first-child th:first-child{border-top-left-radius:0.25rem}table.horizontal thead tr:first-child th:last-child{border-bottom-left-radius:0.25rem}@media screen and (max-width: 767px){table,table.horizontal{border-collapse:collapse;border:0;width:100%;display:table}table thead,table th,table.horizontal thead,table.horizontal th{border:0;height:1px;width:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%)}table tbody,table.horizontal tbody{border:0;display:table-row-group}table tr,table.horizontal tr{display:block;border:.0625rem solid var(--table-border-color);border-radius:var(--universal-border-radius);background:#fafafa;padding:var(--universal-padding);margin:var(--universal-margin);margin-bottom:calc(2 * var(--universal-margin))}table th,table td,table.horizontal th,table.horizontal td{width:auto}table td,table.horizontal td{display:block;border:0;text-align:right}table td:before,table.horizontal td:before{content:attr(data-label);float:left;font-weight:600}table th:first-child,table td:first-child,table.horizontal th:first-child,table.horizontal td:first-child{border-top:0}table tbody tr:last-child td,table.horizontal tbody tr:last-child td{border-right:0}}:root{--table-body-alt-back-color:#eee}table.striped tr:nth-of-type(2n)>td{background:var(--table-body-alt-back-color)}@media screen and (max-width: 768px){table.striped tr:nth-of-type(2n){background:var(--table-body-alt-back-color)}}:root{--table-body-hover-back-color:#90caf9}table.hoverable tr:hover,table.hoverable tr:hover>td,table.hoverable tr:focus,table.hoverable tr:focus>td{background:var(--table-body-hover-back-color)}@media screen and (max-width: 768px){table.hoverable tr:hover,table.hoverable tr:hover>td,table.hoverable tr:focus,table.hoverable tr:focus>td{background:var(--table-body-hover-back-color)}}:root{--mark-back-color:#0277bd;--mark-fore-color:#fafafa}mark{background:var(--mark-back-color);color:var(--mark-fore-color);font-size:.95em;line-height:1em;border-radius:var(--universal-border-radius);padding:calc(var(--universal-padding) / 4) calc(var(--universal-padding) / 2)}mark.inline-block{display:inline-block;font-size:1em;line-height:1.5;padding:calc(var(--universal-padding) / 2) var(--universal-padding)}:root{--toast-back-color:#424242;--toast-fore-color:#fafafa}.toast{position:fixed;bottom:calc(var(--universal-margin) * 3);left:50%;transform:translate(-50%, -50%);z-index:1111;color:var(--toast-fore-color);background:var(--toast-back-color);border-radius:calc(var(--universal-border-radius) * 16);padding:var(--universal-padding) calc(var(--universal-padding) * 3)}:root{--tooltip-back-color:#212121;--tooltip-fore-color:#fafafa}.tooltip{position:relative;display:inline-block}.tooltip:before,.tooltip:after{position:absolute;opacity:0;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%);transition:all 0.3s;z-index:1010;left:50%}.tooltip:not(.bottom):before,.tooltip:not(.bottom):after{bottom:75%}.tooltip.bottom:before,.tooltip.bottom:after{top:75%}.tooltip:hover:before,.tooltip:hover:after,.tooltip:focus:before,.tooltip:focus:after{opacity:1;clip:auto;-webkit-clip-path:inset(0%);clip-path:inset(0%)}.tooltip:before{content:'';background:transparent;border:var(--universal-margin) solid transparent;left:calc(50% - var(--universal-margin))}.tooltip:not(.bottom):before{border-top-color:#212121}.tooltip.bottom:before{border-bottom-color:#212121}.tooltip:after{content:attr(aria-label);color:var(--tooltip-fore-color);background:var(--tooltip-back-color);border-radius:var(--universal-border-radius);padding:var(--universal-padding);white-space:nowrap;transform:translateX(-50%)}.tooltip:not(.bottom):after{margin-bottom:calc(2 * var(--universal-margin))}.tooltip.bottom:after{margin-top:calc(2 * var(--universal-margin))}:root{--modal-overlay-color:rgba(0,0,0,0.45);--modal-close-color:#444;--modal-close-hover-color:#f0f0f0}[type="checkbox"].modal{height:1px;width:1px;margin:-1px;overflow:hidden;position:absolute;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%)}[type="checkbox"].modal+div{position:fixed;top:0;left:0;display:none;width:100vw;height:100vh;background:var(--modal-overlay-color)}[type="checkbox"].modal+div .card{margin:0 auto;max-height:50vh;overflow:auto}[type="checkbox"].modal+div .card .modal-close{position:absolute;top:0;right:0;width:1.75rem;height:1.75rem;border-radius:var(--universal-border-radius);padding:var(--universal-padding);margin:0;cursor:pointer;transition:background 0.3s}[type="checkbox"].modal+div .card .modal-close:before{display:block;content:'\00D7';color:var(--modal-close-color);position:relative;font-family:sans-serif;font-size:1.75rem;line-height:1;text-align:center}[type="checkbox"].modal+div .card .modal-close:hover,[type="checkbox"].modal+div .card .modal-close:focus{background:var(--modal-close-hover-color)}[type="checkbox"].modal:checked+div{display:flex;flex:0 1 auto;z-index:1200}[type="checkbox"].modal:checked+div .card .modal-close{z-index:1211}:root{--collapse-label-back-color:#e8e8e8;--collapse-label-fore-color:#212121;--collapse-label-hover-back-color:#f0f0f0;--collapse-selected-label-back-color:#ececec;--collapse-border-color:#ddd;--collapse-content-back-color:#fafafa;--collapse-selected-label-border-color:#0277bd}.collapse{width:calc(100% - 2 * var(--universal-margin));opacity:1;display:flex;flex-direction:column;margin:var(--universal-margin);border-radius:var(--universal-border-radius)}.collapse>[type="radio"],.collapse>[type="checkbox"]{height:1px;width:1px;margin:-1px;overflow:hidden;position:absolute;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%)}.collapse>label{flex-grow:1;display:inline-block;height:1.5rem;cursor:pointer;transition:background 0.3s;color:var(--collapse-label-fore-color);background:var(--collapse-label-back-color);border:.0625rem solid var(--collapse-border-color);padding:calc(1.5 * var(--universal-padding))}.collapse>label:hover,.collapse>label:focus{background:var(--collapse-label-hover-back-color)}.collapse>label+div{flex-basis:auto;height:1px;width:1px;margin:-1px;overflow:hidden;position:absolute;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%);transition:max-height 0.3s;max-height:1px}.collapse>:checked+label{background:var(--collapse-selected-label-back-color);border-bottom-color:var(--collapse-selected-label-border-color)}.collapse>:checked+label+div{box-sizing:border-box;position:relative;width:100%;height:auto;overflow:auto;margin:0;background:var(--collapse-content-back-color);border:.0625rem solid var(--collapse-border-color);border-top:0;padding:var(--universal-padding);clip:auto;-webkit-clip-path:inset(0%);clip-path:inset(0%);max-height:400px}.collapse>label:not(:first-of-type){border-top:0}.collapse>label:first-of-type{border-radius:var(--universal-border-radius) var(--universal-border-radius) 0 0}.collapse>label:last-of-type:not(:first-of-type){border-radius:0 0 var(--universal-border-radius) var(--universal-border-radius)}.collapse>label:last-of-type:first-of-type{border-radius:var(--universal-border-radius)}.collapse>:checked:last-of-type:not(:first-of-type)+label{border-radius:0}.collapse>:checked:last-of-type+label+div{border-radius:0 0 var(--universal-border-radius) var(--universal-border-radius)}mark.secondary{--mark-back-color:#d32f2f}mark.tertiary{--mark-back-color:#308732}mark.tag{padding:calc(var(--universal-padding)/2) var(--universal-padding);border-radius:1em}:root{--progress-back-color:#ddd;--progress-fore-color:#555}progress{display:block;vertical-align:baseline;-webkit-appearance:none;-moz-appearance:none;appearance:none;height:.75rem;width:calc(100% - 2 * var(--universal-margin));margin:var(--universal-margin);border:0;border-radius:calc(2 * var(--universal-border-radius));background:var(--progress-back-color);color:var(--progress-fore-color)}progress::-webkit-progress-value{background:var(--progress-fore-color);border-top-left-radius:calc(2 * var(--universal-border-radius));border-bottom-left-radius:calc(2 * var(--universal-border-radius))}progress::-webkit-progress-bar{background:var(#ddd)}progress::-moz-progress-bar{background:var(--progress-fore-color);border-top-left-radius:calc(2 * var(--universal-border-radius));border-bottom-left-radius:calc(2 * var(--universal-border-radius))}progress[value="1000"]::-webkit-progress-value{border-radius:calc(2 * var(--universal-border-radius))}progress[value="1000"]::-moz-progress-bar{border-radius:calc(2 * var(--universal-border-radius))}progress.inline{display:inline-block;vertical-align:middle;width:60%}:root{--spinner-back-color:#ddd;--spinner-fore-color:#555}@keyframes spinner-donut-anim{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.spinner{display:inline-block;margin:var(--universal-margin);border:.25rem solid var(--spinner-back-color);border-left:.25rem solid var(--spinner-fore-color);border-radius:50%;width:1.25rem;height:1.25rem;animation:spinner-donut-anim 1.2s linear infinite}progress.primary{--progress-fore-color:#1976d2}progress.secondary{--progress-fore-color:#d32f2f}progress.tertiary{--progress-fore-color:#308732}.spinner.primary{--spinner-fore-color:#1976d2}.spinner.secondary{--spinner-fore-color:#d32f2f}.spinner.tertiary{--spinner-fore-color:#308732}span[class^='icon-']{display:inline-block;height:1em;width:1em;vertical-align:-0.125em;background-size:contain;margin:0 calc(var(--universal-margin) / 4)}span[class^='icon-'].secondary{-webkit-filter:invert(25%);filter:invert(25%)}span[class^='icon-'].inverse{-webkit-filter:invert(100%);filter:invert(100%)}span.icon-alert{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12' y2='16'%3E%3C/line%3E%3C/svg%3E")}span.icon-bookmark{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z'%3E%3C/path%3E%3C/svg%3E")}span.icon-calendar{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E")}span.icon-credit{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='1' y='4' width='22' height='16' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='1' y1='10' x2='23' y2='10'%3E%3C/line%3E%3C/svg%3E")}span.icon-edit{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 14.66V20a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h5.34'%3E%3C/path%3E%3Cpolygon points='18 2 22 6 12 16 8 16 8 12 18 2'%3E%3C/polygon%3E%3C/svg%3E")}span.icon-link{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'%3E%3C/path%3E%3Cpolyline points='15 3 21 3 21 9'%3E%3C/polyline%3E%3Cline x1='10' y1='14' x2='21' y2='3'%3E%3C/line%3E%3C/svg%3E")}span.icon-help{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3'%3E%3C/path%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='17' x2='12' y2='17'%3E%3C/line%3E%3C/svg%3E")}span.icon-home{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'%3E%3C/path%3E%3Cpolyline points='9 22 9 12 15 12 15 22'%3E%3C/polyline%3E%3C/svg%3E")}span.icon-info{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='16' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='8' x2='12' y2='8'%3E%3C/line%3E%3C/svg%3E")}span.icon-lock{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2' ry='2'%3E%3C/rect%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'%3E%3C/path%3E%3C/svg%3E")}span.icon-mail{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z'%3E%3C/path%3E%3Cpolyline points='22,6 12,13 2,6'%3E%3C/polyline%3E%3C/svg%3E")}span.icon-location{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'%3E%3C/path%3E%3Ccircle cx='12' cy='10' r='3'%3E%3C/circle%3E%3C/svg%3E")}span.icon-phone{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'%3E%3C/path%3E%3C/svg%3E")}span.icon-rss{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 11a9 9 0 0 1 9 9'%3E%3C/path%3E%3Cpath d='M4 4a16 16 0 0 1 16 16'%3E%3C/path%3E%3Ccircle cx='5' cy='19' r='1'%3E%3C/circle%3E%3C/svg%3E")}span.icon-search{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E")}span.icon-settings{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'%3E%3C/circle%3E%3Cpath d='M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z'%3E%3C/path%3E%3C/svg%3E")}span.icon-share{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='18' cy='5' r='3'%3E%3C/circle%3E%3Ccircle cx='6' cy='12' r='3'%3E%3C/circle%3E%3Ccircle cx='18' cy='19' r='3'%3E%3C/circle%3E%3Cline x1='8.59' y1='13.51' x2='15.42' y2='17.49'%3E%3C/line%3E%3Cline x1='15.41' y1='6.51' x2='8.59' y2='10.49'%3E%3C/line%3E%3C/svg%3E")}span.icon-cart{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1'%3E%3C/circle%3E%3Ccircle cx='20' cy='21' r='1'%3E%3C/circle%3E%3Cpath d='M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6'%3E%3C/path%3E%3C/svg%3E")}span.icon-upload{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'%3E%3C/path%3E%3Cpolyline points='17 8 12 3 7 8'%3E%3C/polyline%3E%3Cline x1='12' y1='3' x2='12' y2='15'%3E%3C/line%3E%3C/svg%3E")}span.icon-user{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'%3E%3C/path%3E%3Ccircle cx='12' cy='7' r='4'%3E%3C/circle%3E%3C/svg%3E")}:root{--generic-border-color:rgba(0,0,0,0.3);--generic-box-shadow:0 .25rem .25rem 0 rgba(0,0,0,0.125),0 .125rem .125rem -.125rem rgba(0,0,0,0.25)}.hidden{display:none !important}.visually-hidden{position:absolute !important;width:1px !important;height:1px !important;margin:-1px !important;border:0 !important;padding:0 !important;clip:rect(0 0 0 0) !important;-webkit-clip-path:inset(100%) !important;clip-path:inset(100%) !important;overflow:hidden !important}.bordered{border:.0625rem solid var(--generic-border-color) !important}.rounded{border-radius:var(--universal-border-radius) !important}.circular{border-radius:50% !important}.shadowed{box-shadow:var(--generic-box-shadow) !important}.responsive-margin{margin:calc(var(--universal-margin) / 4) !important}@media screen and (min-width: 768px){.responsive-margin{margin:calc(var(--universal-margin) / 2) !important}}@media screen and (min-width: 1280px){.responsive-margin{margin:var(--universal-margin) !important}}.responsive-padding{padding:calc(var(--universal-padding) / 4) !important}@media screen and (min-width: 768px){.responsive-padding{padding:calc(var(--universal-padding) / 2) !important}}@media screen and (min-width: 1280px){.responsive-padding{padding:var(--universal-padding) !important}}@media screen and (max-width: 767px){.hidden-sm{display:none !important}}@media screen and (min-width: 768px) and (max-width: 1279px){.hidden-md{display:none !important}}@media screen and (min-width: 1280px){.hidden-lg{display:none !important}}@media screen and (max-width: 767px){.visually-hidden-sm{position:absolute !important;width:1px !important;height:1px !important;margin:-1px !important;border:0 !important;padding:0 !important;clip:rect(0 0 0 0) !important;-webkit-clip-path:inset(100%) !important;clip-path:inset(100%) !important;overflow:hidden !important}}@media screen and (min-width: 768px) and (max-width: 1279px){.visually-hidden-md{position:absolute !important;width:1px !important;height:1px !important;margin:-1px !important;border:0 !important;padding:0 !important;clip:rect(0 0 0 0) !important;-webkit-clip-path:inset(100%) !important;clip-path:inset(100%) !important;overflow:hidden !important}}@media screen and (min-width: 1280px){.visually-hidden-lg{position:absolute !important;width:1px !important;height:1px !important;margin:-1px !important;border:0 !important;padding:0 !important;clip:rect(0 0 0 0) !important;-webkit-clip-path:inset(100%) !important;clip-path:inset(100%) !important;overflow:hidden !important}}
diff --git a/docs/v3/flavors/mini-default.scss b/docs/v3/flavors/mini-default.scss
new file mode 100644
index 0000000..b53bca0
--- /dev/null
+++ b/docs/v3/flavors/mini-default.scss
@@ -0,0 +1,138 @@
+//  This is a flavor file. Duplicate it and edit it to create your own flavor. Read instructions carefully.
+//  Single-line comments, starting with '//' will not be included in your final CSS file. Multiline comments,
+//  structured like the flavor description below, will be included in your final CSS file.
+/*
+  Flavor name: Default (mini-default)
+  Author: Angelos Chalaris (chalarangelo@gmail.com)
+  Maintainers: Angelos Chalaris
+  mini.css version: v3.0.0-alpha.3
+*/
+@import '../mini/core';
+@import '../mini/layout';
+
+/*
+  Custom elements for card elements.
+*/
+$card-small-name:              'small';            // Class name for small cards.
+$card-small-width:             240px;              // Width for small cards.
+@include make-card-alt-size ($card-small-name, $card-small-width);
+
+$card-large-name:              'large';            // Class name for large cards.
+$card-large-width:             480px;              // Width for large cards.
+@include make-card-alt-size ($card-large-name, $card-large-width);
+
+$card-fluid-name:              'fluid';            // Class name for fluid cards.
+$card-fluid-width:             100%;               // Width for fluid cards.
+@include make-card-alt-size ($card-fluid-name, $card-fluid-width);
+
+$card-warning-name:            'warning';          // Class name for card warnging color variant.
+$card-warning-back-color:      #ffca28;            // Background color for card warnging color variant.
+$card-warning-fore-color:      #111;               // Text color for card warnging color variant.
+$card-warning-border-color:    #e8b825;            // Border style for card warnging color variant.
+@include make-card-alt-color ($card-warning-name, $card-warning-back-color, $card-warning-fore-color, $card-warning-border-color);
+
+$card-error-name:              'error';            // Class name for card error color variant.
+$card-error-back-color:        #b71c1c;            // Background color for card error color variant.
+$card-error-fore-color:        #f8f8f8;            // Text color for card error color variant.
+$card-error-border-color:      #a71a1a;            // Border style for card error color variant.
+@include make-card-alt-color ($card-error-name, $card-error-back-color, $card-error-fore-color, $card-error-border-color);
+
+$card-section-dark-name:        'dark';            // Class name for card dark section variant.
+$card-section-dark-back-color:  #e0e0e0;           // Background color for card dark section variant.
+$card-section-dark-fore-color:  #111;              // Text color for card dark section variant.
+@include make-card-section-alt-color ($card-section-dark-name, $card-section-dark-back-color, $card-section-dark-fore-color);
+
+$card-section-double-padded-name:    'double-padded';   // Class name for card double-padded section variant.
+$card-section-double-padded-padding:  calc(1.5 * var(#{$universal-padding-var}));  // Padding for card sectiondouble-padded section variant.
+@include make-card-section-alt-style ($card-section-double-padded-name, $card-section-double-padded-padding);
+
+@import '../mini/input_control';
+
+/*
+  Custom elements for forms and input elements.
+*/
+$button-primary-name:            'primary';   // Class name for primary button color variant.
+$button-primary-back-color:      #1976d2;     // Background color for primary button color variant.
+$button-primary-hover-back-color:#1565c0;     // Background color for primary button color variant (hover).
+$button-primary-fore-color:      #f8f8f8;     // Text color for primary button color variant.
+@include make-button-alt-color ($button-primary-name, $button-primary-back-color, $button-primary-hover-back-color, $button-primary-fore-color);
+
+$button-secondary-name:            'secondary'; // Class name for secondary button color variant.
+$button-secondary-back-color:      #d32f2f;     // Background color for secondary button color variant.
+$button-secondary-hover-back-color:#c62828;     // Background color for secondary button color variant (hover).
+$button-secondary-fore-color:      #f8f8f8;     // Text color for secondary button color variant.
+@include make-button-alt-color ($button-secondary-name, $button-secondary-back-color, $button-secondary-hover-back-color, $button-secondary-fore-color);
+
+$button-tertiary-name:            'tertiary';  // Class name for tertiary button color variant.
+$button-tertiary-back-color:      #308732;     // Background color for tertiary button color variant.
+$button-tertiary-hover-back-color:#277529;     // Background color for tertiary button color variant (hover).
+$button-tertiary-fore-color:      #f8f8f8;     // Text color for tertiary button color variant.
+@include make-button-alt-color ($button-tertiary-name, $button-tertiary-back-color, $button-tertiary-hover-back-color, $button-tertiary-fore-color);
+
+$button-inverse-name:            'inverse';   // Class name for inverse button color variant.
+$button-inverse-back-color:      #212121;     // Background color for inverse button color variant.
+$button-inverse-hover-back-color:#111;        // Background color for inverse button color variant (hover).
+$button-inverse-fore-color:      #f8f8f8;     // Text color for inverse button color variant.
+@include make-button-alt-color ($button-inverse-name, $button-inverse-back-color, $button-inverse-hover-back-color, $button-inverse-fore-color);
+
+$button-small-name:    'small';              // Class name, padding and margin for small button size variant.
+$button-small-padding: calc(0.5 * var(#{$universal-padding-var})) calc(0.75 * var(#{$universal-padding-var}));
+$button-small-margin:  var(#{$universal-margin-var});
+@include make-button-alt-size ($button-small-name, $button-small-padding, $button-small-margin);
+
+$button-large-name:    'large';              // Class name, padding and margin for large button size variant.
+$button-large-padding: calc(1.5 * var(#{$universal-padding-var})) calc(2 * var(#{$universal-padding-var}));
+$button-large-margin:  var(#{$universal-margin-var});
+@include make-button-alt-size ($button-large-name, $button-large-padding, $button-large-margin);
+
+@import '../mini/navigation';
+@import '../mini/table';
+@import '../mini/contextual';
+
+/*
+  Custom elements for contextual background elements, toasts and tooltips.
+*/
+$mark-secondary-name:            'secondary'; // Class name for secondary  color variant.
+$mark-secondary-back-color:      #d32f2f;     // Background color for secondary  color variant.
+@include make-mark-alt-color ($mark-secondary-name, $mark-secondary-back-color);
+
+$mark-tertiary-name:            'tertiary';  // Class name for tertiary  color variant.
+$mark-tertiary-back-color:      #308732;     // Background color for tertiary  color variant.
+@include make-mark-alt-color ($mark-tertiary-name, $mark-tertiary-back-color);
+
+$mark-tag-name:                 'tag';       // Class name, padding and border radius for tag  size variant.
+$mark-tag-padding:      calc(var(#{$universal-padding-var})/2) var(#{$universal-padding-var});
+$mark-tag-border-radius:        1em;
+@include make-mark-alt-size ($mark-tag-name, $mark-tag-padding, $mark-tag-border-radius);
+
+@import '../mini/progress';
+
+/*
+  Custom elements for progress bars and spinners.
+*/
+$progress-primary-name:         'primary';   // Class name for primary  color variant.
+$progress-primary-fore-color:   #1976d2;     // Foreground color for primary  color variant.
+@include make-progress-alt-color ($progress-primary-name, $progress-primary-fore-color);
+
+$progress-secondary-name:     'secondary';   // Class name for secondary  color variant.
+$progress-secondary-fore-color: #d32f2f;     // Foreground color for secondary  color variant.
+@include make-progress-alt-color ($progress-secondary-name, $progress-secondary-fore-color);
+
+$progress-tertiary-name:       'tertiary';   // Class name for tertiary  color variant.
+$progress-tertiary-fore-color:   #308732;    // Foreground color for tertiary  color variant.
+@include make-progress-alt-color ($progress-tertiary-name, $progress-tertiary-fore-color);
+
+$spinner-donut-primary-name:         'primary';   // Class name for primary spinner donutcolor variant.
+$spinner-donut-primary-fore-color:   #1976d2;     // Foreground color for primary spinner donut color variant.
+@include make-spinner-donut-alt-color ($spinner-donut-primary-name, $spinner-donut-primary-fore-color);
+
+$spinner-donut-secondary-name:     'secondary';   // Class name for secondary spinner donut color variant.
+$spinner-donut-secondary-fore-color: #d32f2f;     // Foreground color for secondary spinner donut color variant.
+@include make-spinner-donut-alt-color ($spinner-donut-secondary-name, $spinner-donut-secondary-fore-color);
+
+$spinner-donut-tertiary-name:       'tertiary';   // Class name for tertiary spinner donut color variant.
+$spinner-donut-tertiary-fore-color:   #308732;    // Foreground color for tertiary spinner donut color variant.
+@include make-spinner-donut-alt-color ($spinner-donut-tertiary-name, $spinner-donut-tertiary-fore-color);
+
+@import '../mini/icon';
+@import '../mini/utility';
diff --git a/docs/v3/flavors/mini-nord.css b/docs/v3/flavors/mini-nord.css
new file mode 100644
index 0000000..9d8a025
--- /dev/null
+++ b/docs/v3/flavors/mini-nord.css
@@ -0,0 +1,2168 @@
+@charset "UTF-8";
+/*
+  Flavor name: Nord (mini-nord)
+  Author: tphecca (https://github.com/tphecca)
+  Maintainers: tphecca
+  mini.css version: v3.0.0
+*/
+/*
+  Browsers resets and base typography.
+*/
+/* Core module CSS variable definitions */
+:root {
+  --fore-color: #2e3440;
+  --secondary-fore-color: #3b4252;
+  --back-color: #eceff4;
+  --secondary-back-color: #e5e9f0;
+  --blockquote-color: #d08770;
+  --pre-color: #b48ead;
+  --border-color: #d8dee9;
+  --secondary-border-color: #e5e9f0;
+  --heading-ratio: 1.19;
+  --universal-margin: 0.5rem;
+  --universal-padding: 0.5rem;
+  --universal-border-radius: 0.125rem;
+  --a-link-color: #88c0d0;
+  --a-visited-color: #5e81ac;
+}
+
+html {
+  font-size: 16px;
+}
+
+a, b, del, em, i, ins, q, span, strong, u {
+  font-size: 1em;
+}
+
+html, * {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, sans-serif;
+  line-height: 1.5;
+  -webkit-text-size-adjust: 100%;
+}
+
+* {
+  font-size: 1rem;
+}
+
+body {
+  margin: 0;
+  color: var(--fore-color);
+  background: var(--back-color);
+}
+
+details {
+  display: block;
+}
+
+summary {
+  display: list-item;
+}
+
+abbr[title] {
+  border-bottom: none;
+  text-decoration: underline dotted;
+}
+
+input {
+  overflow: visible;
+}
+
+img {
+  max-width: 100%;
+  height: auto;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  line-height: 1.2;
+  margin: calc(1.5 * var(--universal-margin)) var(--universal-margin);
+  font-weight: 500;
+}
+
+h1 small, h2 small, h3 small, h4 small, h5 small, h6 small {
+  color: var(--secondary-fore-color);
+  display: block;
+  margin-top: -0.25rem;
+}
+
+h1 {
+  font-size: calc(1rem * var(--heading-ratio) * var(--heading-ratio) * var(--heading-ratio) * var(--heading-ratio));
+}
+
+h2 {
+  font-size: calc(1rem * var(--heading-ratio) * var(--heading-ratio) * var(--heading-ratio));
+}
+
+h3 {
+  font-size: calc(1rem * var(--heading-ratio) * var(--heading-ratio));
+}
+
+h4 {
+  font-size: calc(1rem * var(--heading-ratio));
+}
+
+h5 {
+  font-size: 1rem;
+}
+
+h6 {
+  font-size: calc(1rem / var(--heading-ratio));
+}
+
+p {
+  margin: var(--universal-margin);
+}
+
+ol, ul {
+  margin: var(--universal-margin);
+  padding-left: calc(2 * var(--universal-margin));
+}
+
+b, strong {
+  font-weight: 700;
+}
+
+hr {
+  box-sizing: content-box;
+  border: 0;
+  line-height: 1.25em;
+  margin: var(--universal-margin);
+  height: 0.0625rem;
+  background: linear-gradient(to right, transparent, var(--border-color) 20%, var(--border-color) 80%, transparent);
+}
+
+blockquote {
+  display: block;
+  position: relative;
+  font-style: italic;
+  color: var(--secondary-fore-color);
+  margin: var(--universal-margin);
+  padding: calc(3 * var(--universal-padding));
+  border: 0.0625rem solid var(--secondary-border-color);
+  border-left: 0.375rem solid var(--blockquote-color);
+  border-radius: 0 var(--universal-border-radius) var(--universal-border-radius) 0;
+}
+
+blockquote:before {
+  position: absolute;
+  top: calc(0rem - var(--universal-padding));
+  left: 0;
+  font-family: sans-serif;
+  font-size: 3rem;
+  font-weight: 700;
+  content: "\201c";
+  color: var(--blockquote-color);
+}
+
+blockquote[cite]:after {
+  font-style: normal;
+  font-size: 0.75em;
+  font-weight: 700;
+  content: "\a—  " attr(cite);
+  white-space: pre;
+}
+
+code, kbd, pre, samp {
+  font-family: Menlo, Consolas, monospace;
+  font-size: 0.85em;
+}
+
+code {
+  background: var(--secondary-back-color);
+  border-radius: var(--universal-border-radius);
+  padding: calc(var(--universal-padding) / 4) calc(var(--universal-padding) / 2);
+}
+
+kbd {
+  background: var(--fore-color);
+  color: var(--back-color);
+  border-radius: var(--universal-border-radius);
+  padding: calc(var(--universal-padding) / 4) calc(var(--universal-padding) / 2);
+}
+
+pre {
+  overflow: auto;
+  background: var(--secondary-back-color);
+  padding: calc(1.5 * var(--universal-padding));
+  margin: var(--universal-margin);
+  border: 0.0625rem solid var(--secondary-border-color);
+  border-left: 0.25rem solid var(--pre-color);
+  border-radius: 0 var(--universal-border-radius) var(--universal-border-radius) 0;
+}
+
+sup, sub, code, kbd {
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+small, sup, sub, figcaption {
+  font-size: 0.75em;
+}
+
+sup {
+  top: -0.5em;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+figure {
+  margin: var(--universal-margin);
+}
+
+figcaption {
+  color: var(--secondary-fore-color);
+}
+
+a {
+  text-decoration: none;
+}
+
+a:link {
+  color: var(--a-link-color);
+}
+
+a:visited {
+  color: var(--a-visited-color);
+}
+
+a:hover, a:focus {
+  text-decoration: underline;
+}
+
+/*
+  Definitions for the grid system, cards and containers.
+*/
+.container {
+  margin: 0 auto;
+  padding: 0 calc(1.5 * var(--universal-padding));
+}
+
+.row {
+  box-sizing: border-box;
+  display: flex;
+  flex: 0 1 auto;
+  flex-flow: row wrap;
+}
+
+.col-sm,
+[class^='col-sm-'],
+[class^='col-sm-offset-'],
+.row[class*='cols-sm-'] > * {
+  box-sizing: border-box;
+  flex: 0 0 auto;
+  padding: 0 calc(var(--universal-padding) / 2);
+}
+
+.col-sm,
+.row.cols-sm > * {
+  max-width: 100%;
+  flex-grow: 1;
+  flex-basis: 0;
+}
+
+.col-sm-1,
+.row.cols-sm-1 > * {
+  max-width: 8.33333%;
+  flex-basis: 8.33333%;
+}
+
+.col-sm-offset-0 {
+  margin-left: 0;
+}
+
+.col-sm-2,
+.row.cols-sm-2 > * {
+  max-width: 16.66667%;
+  flex-basis: 16.66667%;
+}
+
+.col-sm-offset-1 {
+  margin-left: 8.33333%;
+}
+
+.col-sm-3,
+.row.cols-sm-3 > * {
+  max-width: 25%;
+  flex-basis: 25%;
+}
+
+.col-sm-offset-2 {
+  margin-left: 16.66667%;
+}
+
+.col-sm-4,
+.row.cols-sm-4 > * {
+  max-width: 33.33333%;
+  flex-basis: 33.33333%;
+}
+
+.col-sm-offset-3 {
+  margin-left: 25%;
+}
+
+.col-sm-5,
+.row.cols-sm-5 > * {
+  max-width: 41.66667%;
+  flex-basis: 41.66667%;
+}
+
+.col-sm-offset-4 {
+  margin-left: 33.33333%;
+}
+
+.col-sm-6,
+.row.cols-sm-6 > * {
+  max-width: 50%;
+  flex-basis: 50%;
+}
+
+.col-sm-offset-5 {
+  margin-left: 41.66667%;
+}
+
+.col-sm-7,
+.row.cols-sm-7 > * {
+  max-width: 58.33333%;
+  flex-basis: 58.33333%;
+}
+
+.col-sm-offset-6 {
+  margin-left: 50%;
+}
+
+.col-sm-8,
+.row.cols-sm-8 > * {
+  max-width: 66.66667%;
+  flex-basis: 66.66667%;
+}
+
+.col-sm-offset-7 {
+  margin-left: 58.33333%;
+}
+
+.col-sm-9,
+.row.cols-sm-9 > * {
+  max-width: 75%;
+  flex-basis: 75%;
+}
+
+.col-sm-offset-8 {
+  margin-left: 66.66667%;
+}
+
+.col-sm-10,
+.row.cols-sm-10 > * {
+  max-width: 83.33333%;
+  flex-basis: 83.33333%;
+}
+
+.col-sm-offset-9 {
+  margin-left: 75%;
+}
+
+.col-sm-11,
+.row.cols-sm-11 > * {
+  max-width: 91.66667%;
+  flex-basis: 91.66667%;
+}
+
+.col-sm-offset-10 {
+  margin-left: 83.33333%;
+}
+
+.col-sm-12,
+.row.cols-sm-12 > * {
+  max-width: 100%;
+  flex-basis: 100%;
+}
+
+.col-sm-offset-11 {
+  margin-left: 91.66667%;
+}
+
+.col-sm-normal {
+  order: initial;
+}
+
+.col-sm-first {
+  order: -999;
+}
+
+.col-sm-last {
+  order: 999;
+}
+
+@media screen and (min-width: 768px) {
+  .col-md,
+  [class^='col-md-'],
+  [class^='col-md-offset-'],
+  .row[class*='cols-md-'] > * {
+    box-sizing: border-box;
+    flex: 0 0 auto;
+    padding: 0 calc(var(--universal-padding) / 2);
+  }
+  .col-md,
+  .row.cols-md > * {
+    max-width: 100%;
+    flex-grow: 1;
+    flex-basis: 0;
+  }
+  .col-md-1,
+  .row.cols-md-1 > * {
+    max-width: 8.33333%;
+    flex-basis: 8.33333%;
+  }
+  .col-md-offset-0 {
+    margin-left: 0;
+  }
+  .col-md-2,
+  .row.cols-md-2 > * {
+    max-width: 16.66667%;
+    flex-basis: 16.66667%;
+  }
+  .col-md-offset-1 {
+    margin-left: 8.33333%;
+  }
+  .col-md-3,
+  .row.cols-md-3 > * {
+    max-width: 25%;
+    flex-basis: 25%;
+  }
+  .col-md-offset-2 {
+    margin-left: 16.66667%;
+  }
+  .col-md-4,
+  .row.cols-md-4 > * {
+    max-width: 33.33333%;
+    flex-basis: 33.33333%;
+  }
+  .col-md-offset-3 {
+    margin-left: 25%;
+  }
+  .col-md-5,
+  .row.cols-md-5 > * {
+    max-width: 41.66667%;
+    flex-basis: 41.66667%;
+  }
+  .col-md-offset-4 {
+    margin-left: 33.33333%;
+  }
+  .col-md-6,
+  .row.cols-md-6 > * {
+    max-width: 50%;
+    flex-basis: 50%;
+  }
+  .col-md-offset-5 {
+    margin-left: 41.66667%;
+  }
+  .col-md-7,
+  .row.cols-md-7 > * {
+    max-width: 58.33333%;
+    flex-basis: 58.33333%;
+  }
+  .col-md-offset-6 {
+    margin-left: 50%;
+  }
+  .col-md-8,
+  .row.cols-md-8 > * {
+    max-width: 66.66667%;
+    flex-basis: 66.66667%;
+  }
+  .col-md-offset-7 {
+    margin-left: 58.33333%;
+  }
+  .col-md-9,
+  .row.cols-md-9 > * {
+    max-width: 75%;
+    flex-basis: 75%;
+  }
+  .col-md-offset-8 {
+    margin-left: 66.66667%;
+  }
+  .col-md-10,
+  .row.cols-md-10 > * {
+    max-width: 83.33333%;
+    flex-basis: 83.33333%;
+  }
+  .col-md-offset-9 {
+    margin-left: 75%;
+  }
+  .col-md-11,
+  .row.cols-md-11 > * {
+    max-width: 91.66667%;
+    flex-basis: 91.66667%;
+  }
+  .col-md-offset-10 {
+    margin-left: 83.33333%;
+  }
+  .col-md-12,
+  .row.cols-md-12 > * {
+    max-width: 100%;
+    flex-basis: 100%;
+  }
+  .col-md-offset-11 {
+    margin-left: 91.66667%;
+  }
+  .col-md-normal {
+    order: initial;
+  }
+  .col-md-first {
+    order: -999;
+  }
+  .col-md-last {
+    order: 999;
+  }
+}
+
+@media screen and (min-width: 1280px) {
+  .col-lg,
+  [class^='col-lg-'],
+  [class^='col-lg-offset-'],
+  .row[class*='cols-lg-'] > * {
+    box-sizing: border-box;
+    flex: 0 0 auto;
+    padding: 0 calc(var(--universal-padding) / 2);
+  }
+  .col-lg,
+  .row.cols-lg > * {
+    max-width: 100%;
+    flex-grow: 1;
+    flex-basis: 0;
+  }
+  .col-lg-1,
+  .row.cols-lg-1 > * {
+    max-width: 8.33333%;
+    flex-basis: 8.33333%;
+  }
+  .col-lg-offset-0 {
+    margin-left: 0;
+  }
+  .col-lg-2,
+  .row.cols-lg-2 > * {
+    max-width: 16.66667%;
+    flex-basis: 16.66667%;
+  }
+  .col-lg-offset-1 {
+    margin-left: 8.33333%;
+  }
+  .col-lg-3,
+  .row.cols-lg-3 > * {
+    max-width: 25%;
+    flex-basis: 25%;
+  }
+  .col-lg-offset-2 {
+    margin-left: 16.66667%;
+  }
+  .col-lg-4,
+  .row.cols-lg-4 > * {
+    max-width: 33.33333%;
+    flex-basis: 33.33333%;
+  }
+  .col-lg-offset-3 {
+    margin-left: 25%;
+  }
+  .col-lg-5,
+  .row.cols-lg-5 > * {
+    max-width: 41.66667%;
+    flex-basis: 41.66667%;
+  }
+  .col-lg-offset-4 {
+    margin-left: 33.33333%;
+  }
+  .col-lg-6,
+  .row.cols-lg-6 > * {
+    max-width: 50%;
+    flex-basis: 50%;
+  }
+  .col-lg-offset-5 {
+    margin-left: 41.66667%;
+  }
+  .col-lg-7,
+  .row.cols-lg-7 > * {
+    max-width: 58.33333%;
+    flex-basis: 58.33333%;
+  }
+  .col-lg-offset-6 {
+    margin-left: 50%;
+  }
+  .col-lg-8,
+  .row.cols-lg-8 > * {
+    max-width: 66.66667%;
+    flex-basis: 66.66667%;
+  }
+  .col-lg-offset-7 {
+    margin-left: 58.33333%;
+  }
+  .col-lg-9,
+  .row.cols-lg-9 > * {
+    max-width: 75%;
+    flex-basis: 75%;
+  }
+  .col-lg-offset-8 {
+    margin-left: 66.66667%;
+  }
+  .col-lg-10,
+  .row.cols-lg-10 > * {
+    max-width: 83.33333%;
+    flex-basis: 83.33333%;
+  }
+  .col-lg-offset-9 {
+    margin-left: 75%;
+  }
+  .col-lg-11,
+  .row.cols-lg-11 > * {
+    max-width: 91.66667%;
+    flex-basis: 91.66667%;
+  }
+  .col-lg-offset-10 {
+    margin-left: 83.33333%;
+  }
+  .col-lg-12,
+  .row.cols-lg-12 > * {
+    max-width: 100%;
+    flex-basis: 100%;
+  }
+  .col-lg-offset-11 {
+    margin-left: 91.66667%;
+  }
+  .col-lg-normal {
+    order: initial;
+  }
+  .col-lg-first {
+    order: -999;
+  }
+  .col-lg-last {
+    order: 999;
+  }
+}
+
+/* Card component CSS variable definitions */
+:root {
+  --card-back-color: #eceff4;
+  --card-fore-color: #2e3440;
+  --card-border-color: #e5e9f0;
+}
+
+.card {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-self: center;
+  position: relative;
+  width: 100%;
+  background: var(--card-back-color);
+  color: var(--card-fore-color);
+  border: 0.0625rem solid var(--card-border-color);
+  border-radius: var(--universal-border-radius);
+  margin: var(--universal-margin);
+  overflow: hidden;
+}
+
+@media screen and (min-width: 320px) {
+  .card {
+    max-width: 320px;
+  }
+}
+
+.card > .section {
+  background: var(--card-back-color);
+  color: var(--card-fore-color);
+  box-sizing: border-box;
+  margin: 0;
+  border: 0;
+  border-radius: 0;
+  border-bottom: 0.0625rem solid var(--card-border-color);
+  padding: var(--universal-padding);
+  width: 100%;
+}
+
+.card > .section.media {
+  height: 200px;
+  padding: 0;
+  -o-object-fit: cover;
+  object-fit: cover;
+}
+
+.card > .section:last-child {
+  border-bottom: 0;
+}
+
+/*
+	 Custom elements for card elements.
+*/
+@media screen and (min-width: 240px) {
+  .card.small {
+    max-width: 240px;
+  }
+}
+
+@media screen and (min-width: 480px) {
+  .card.large {
+    max-width: 480px;
+  }
+}
+
+.card.fluid {
+  max-width: 100%;
+  width: auto;
+}
+
+.card.warning {
+  --card-back-color: #ebcb8b;
+  --card-border-color: #d08770;
+}
+
+.card.error {
+  --card-back-color: #bf616a;
+  --card-border-color: #434c5e;
+}
+
+.card > .section.dark {
+  --card-back-color: #d8dee9;
+}
+
+.card > .section.double-padded {
+  padding: calc(1.5 * var(--universal-padding));
+}
+
+/*
+  Definitions for forms and input elements.
+*/
+/* Input_control module CSS variable definitions */
+:root {
+  --form-back-color: #e5e9f0;
+  --form-fore-color: #2e3440;
+  --form-border-color: #e5e9f0;
+  --input-back-color: #eceff4;
+  --input-fore-color: #2e3440;
+  --input-border-color: #e5e9f0;
+  --input-focus-color: #88c0d0;
+  --input-invalid-color: #bf616a;
+  --button-back-color: #e5e9f0;
+  --button-hover-back-color: #d8dee9;
+  --button-fore-color: #2e3440;
+  --button-border-color: transparent;
+  --button-hover-border-color: transparent;
+  --button-group-border-color: rgba(124, 124, 124, 0.54);
+}
+
+form {
+  background: var(--form-back-color);
+  color: var(--form-fore-color);
+  border: 0.0625rem solid var(--form-border-color);
+  border-radius: var(--universal-border-radius);
+  margin: var(--universal-margin);
+  padding: calc(2 * var(--universal-padding)) var(--universal-padding);
+}
+
+fieldset {
+  border: 0.0625rem solid var(--form-border-color);
+  border-radius: var(--universal-border-radius);
+  margin: calc(var(--universal-margin) / 4);
+  padding: var(--universal-padding);
+}
+
+legend {
+  box-sizing: border-box;
+  display: table;
+  max-width: 100%;
+  white-space: normal;
+  font-weight: 700;
+  padding: calc(var(--universal-padding) / 2);
+}
+
+label {
+  padding: calc(var(--universal-padding) / 2) var(--universal-padding);
+}
+
+.input-group {
+  display: inline-block;
+}
+
+.input-group.fluid {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.input-group.fluid > input {
+  max-width: 100%;
+  flex-grow: 1;
+  flex-basis: 0px;
+}
+
+@media screen and (max-width: 767px) {
+  .input-group.fluid {
+    align-items: stretch;
+    flex-direction: column;
+  }
+}
+
+.input-group.vertical {
+  display: flex;
+  align-items: stretch;
+  flex-direction: column;
+}
+
+.input-group.vertical > input {
+  max-width: 100%;
+  flex-grow: 1;
+  flex-basis: 0px;
+}
+
+[type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button {
+  height: auto;
+}
+
+[type="search"] {
+  -webkit-appearance: textfield;
+  outline-offset: -2px;
+}
+
+[type="search"]::-webkit-search-cancel-button,
+[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+input:not([type]), [type="text"], [type="email"], [type="number"], [type="search"],
+[type="password"], [type="url"], [type="tel"], [type="checkbox"], [type="radio"], textarea, select {
+  box-sizing: border-box;
+  background: var(--input-back-color);
+  color: var(--input-fore-color);
+  border: 0.0625rem solid var(--input-border-color);
+  border-radius: var(--universal-border-radius);
+  margin: calc(var(--universal-margin) / 2);
+  padding: var(--universal-padding) calc(1.5 * var(--universal-padding));
+}
+
+input:not([type="button"]):not([type="submit"]):not([type="reset"]):hover, input:not([type="button"]):not([type="submit"]):not([type="reset"]):focus, textarea:hover, textarea:focus, select:hover, select:focus {
+  border-color: var(--input-focus-color);
+  box-shadow: none;
+}
+
+input:not([type="button"]):not([type="submit"]):not([type="reset"]):invalid, input:not([type="button"]):not([type="submit"]):not([type="reset"]):focus:invalid, textarea:invalid, textarea:focus:invalid, select:invalid, select:focus:invalid {
+  border-color: var(--input-invalid-color);
+  box-shadow: none;
+}
+
+input:not([type="button"]):not([type="submit"]):not([type="reset"])[readonly], textarea[readonly], select[readonly] {
+  background: var(--secondary-back-color);
+}
+
+select {
+  max-width: 100%;
+}
+
+option {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+[type="checkbox"], [type="radio"] {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  position: relative;
+  height: calc(1rem + var(--universal-padding) / 2);
+  width: calc(1rem + var(--universal-padding) / 2);
+  vertical-align: text-bottom;
+  padding: 0;
+  flex-basis: calc(1rem + var(--universal-padding) / 2) !important;
+  flex-grow: 0 !important;
+}
+
+[type="checkbox"]:checked:before, [type="radio"]:checked:before {
+  position: absolute;
+}
+
+[type="checkbox"]:checked:before {
+  content: '\2713';
+  font-family: sans-serif;
+  font-size: calc(1rem + var(--universal-padding) / 2);
+  top: calc(0rem - var(--universal-padding));
+  left: calc(var(--universal-padding) / 4);
+}
+
+[type="radio"] {
+  border-radius: 100%;
+}
+
+[type="radio"]:checked:before {
+  border-radius: 100%;
+  content: '';
+  top: calc(0.0625rem + var(--universal-padding) / 2);
+  left: calc(0.0625rem + var(--universal-padding) / 2);
+  background: var(--input-fore-color);
+  width: 0.5rem;
+  height: 0.5rem;
+}
+
+:placeholder-shown {
+  color: var(--input-fore-color);
+}
+
+::-ms-placeholder {
+  color: var(--input-fore-color);
+  opacity: 0.54;
+}
+
+button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+button, html [type="button"], [type="reset"], [type="submit"] {
+  -webkit-appearance: button;
+}
+
+button {
+  overflow: visible;
+  text-transform: none;
+}
+
+button, [type="button"], [type="submit"], [type="reset"],
+a.button, label.button, .button,
+a[role="button"], label[role="button"], [role="button"] {
+  display: inline-block;
+  background: var(--button-back-color);
+  color: var(--button-fore-color);
+  border: 0.0625rem solid var(--button-border-color);
+  border-radius: var(--universal-border-radius);
+  padding: var(--universal-padding) calc(1.5 * var(--universal-padding));
+  margin: var(--universal-margin);
+  text-decoration: none;
+  cursor: pointer;
+  transition: background 0.3s;
+}
+
+button:hover, button:focus, [type="button"]:hover, [type="button"]:focus, [type="submit"]:hover, [type="submit"]:focus, [type="reset"]:hover, [type="reset"]:focus,
+a.button:hover,
+a.button:focus, label.button:hover, label.button:focus, .button:hover, .button:focus,
+a[role="button"]:hover,
+a[role="button"]:focus, label[role="button"]:hover, label[role="button"]:focus, [role="button"]:hover, [role="button"]:focus {
+  background: var(--button-hover-back-color);
+  border-color: var(--button-hover-border-color);
+}
+
+input:disabled, input[disabled], textarea:disabled, textarea[disabled], select:disabled, select[disabled], button:disabled, button[disabled], .button:disabled, .button[disabled], [role="button"]:disabled, [role="button"][disabled] {
+  cursor: not-allowed;
+  opacity: 0.75;
+}
+
+.button-group {
+  display: flex;
+  border: 0.0625rem solid var(--button-group-border-color);
+  border-radius: var(--universal-border-radius);
+  margin: var(--universal-margin);
+}
+
+.button-group > button, .button-group [type="button"], .button-group > [type="submit"], .button-group > [type="reset"],
+.button-group > .button, .button-group > [role="button"] {
+  margin: 0;
+  max-width: 100%;
+  flex: 1 1 auto;
+  text-align: center;
+  border: 0;
+  border-radius: 0;
+  box-shadow: none;
+}
+
+.button-group > :not(:first-child) {
+  border-left: 0.0625rem solid var(--button-group-border-color);
+}
+
+@media screen and (max-width: 767px) {
+  .button-group {
+    flex-direction: column;
+  }
+  .button-group > :not(:first-child) {
+    border: 0;
+    border-top: 0.0625rem solid var(--button-group-border-color);
+  }
+}
+
+/*
+	 Custom elements for forms and input elements.
+*/
+button.primary, [type="button"].primary, [type="submit"].primary, [type="reset"].primary, .button.primary, [role="button"].primary {
+  --button-back-color: #5e81ac;
+  --button-fore-color: #eceff4;
+}
+
+button.primary:hover, button.primary:focus, [type="button"].primary:hover, [type="button"].primary:focus, [type="submit"].primary:hover, [type="submit"].primary:focus, [type="reset"].primary:hover, [type="reset"].primary:focus, .button.primary:hover, .button.primary:focus, [role="button"].primary:hover, [role="button"].primary:focus {
+  --button-hover-back-color: #5e81ac;
+}
+
+button.secondary, [type="button"].secondary, [type="submit"].secondary, [type="reset"].secondary, .button.secondary, [role="button"].secondary {
+  --button-back-color: #bf616a;
+  --button-fore-color: #eceff4;
+}
+
+button.secondary:hover, button.secondary:focus, [type="button"].secondary:hover, [type="button"].secondary:focus, [type="submit"].secondary:hover, [type="submit"].secondary:focus, [type="reset"].secondary:hover, [type="reset"].secondary:focus, .button.secondary:hover, .button.secondary:focus, [role="button"].secondary:hover, [role="button"].secondary:focus {
+  --button-hover-back-color: #bf616a;
+}
+
+button.tertiary, [type="button"].tertiary, [type="submit"].tertiary, [type="reset"].tertiary, .button.tertiary, [role="button"].tertiary {
+  --button-back-color: #a3be8c;
+  --button-fore-color: #434c5e;
+}
+
+button.tertiary:hover, button.tertiary:focus, [type="button"].tertiary:hover, [type="button"].tertiary:focus, [type="submit"].tertiary:hover, [type="submit"].tertiary:focus, [type="reset"].tertiary:hover, [type="reset"].tertiary:focus, .button.tertiary:hover, .button.tertiary:focus, [role="button"].tertiary:hover, [role="button"].tertiary:focus {
+  --button-hover-back-color: #a3be8c;
+}
+
+button.inverse, [type="button"].inverse, [type="submit"].inverse, [type="reset"].inverse, .button.inverse, [role="button"].inverse {
+  --button-back-color: #3b4252;
+  --button-fore-color: #eceff4;
+}
+
+button.inverse:hover, button.inverse:focus, [type="button"].inverse:hover, [type="button"].inverse:focus, [type="submit"].inverse:hover, [type="submit"].inverse:focus, [type="reset"].inverse:hover, [type="reset"].inverse:focus, .button.inverse:hover, .button.inverse:focus, [role="button"].inverse:hover, [role="button"].inverse:focus {
+  --button-hover-back-color: #2e3440;
+}
+
+button.small, [type="button"].small, [type="submit"].small, [type="reset"].small, .button.small, [role="button"].small {
+  padding: calc(0.5 * var(--universal-padding)) calc(0.75 * var(--universal-padding));
+  margin: var(--universal-margin);
+}
+
+button.large, [type="button"].large, [type="submit"].large, [type="reset"].large, .button.large, [role="button"].large {
+  padding: calc(1.5 * var(--universal-padding)) calc(2 * var(--universal-padding));
+  margin: var(--universal-margin);
+}
+
+/*
+  Definitions for navigation elements.
+*/
+/* Navigation module CSS variable definitions */
+:root {
+  --header-back-color: #eceff4;
+  --header-hover-back-color: #e5e9f0;
+  --header-fore-color: #3b4252;
+  --header-border-color: #e5e9f0;
+  --nav-back-color: #eceff4;
+  --nav-hover-back-color: #e5e9f0;
+  --nav-fore-color: #3b4252;
+  --nav-border-color: #e5e9f0;
+  --nav-link-color: #88c0d0;
+  --footer-fore-color: #3b4252;
+  --footer-back-color: #eceff4;
+  --footer-border-color: #e5e9f0;
+  --footer-link-color: #88c0d0;
+  --drawer-back-color: #eceff4;
+  --drawer-hover-back-color: #e5e9f0;
+  --drawer-border-color: #e5e9f0;
+  --drawer-close-color: #3b4252;
+}
+
+header {
+  height: 3.1875rem;
+  background: var(--header-back-color);
+  color: var(--header-fore-color);
+  border-bottom: 0.0625rem solid var(--header-border-color);
+  padding: calc(var(--universal-padding) / 4) 0;
+  white-space: nowrap;
+  overflow-x: auto;
+  overflow-y: hidden;
+}
+
+header.row {
+  box-sizing: content-box;
+}
+
+header .logo {
+  color: var(--header-fore-color);
+  font-size: 1.75rem;
+  padding: var(--universal-padding) calc(2 * var(--universal-padding));
+  text-decoration: none;
+}
+
+header button, header [type="button"], header .button, header [role="button"] {
+  box-sizing: border-box;
+  position: relative;
+  top: calc(0rem - var(--universal-padding) / 4);
+  height: calc(3.1875rem + var(--universal-padding) / 2);
+  background: var(--header-back-color);
+  line-height: calc(3.1875rem - var(--universal-padding) * 1.5);
+  text-align: center;
+  color: var(--header-fore-color);
+  border: 0;
+  border-radius: 0;
+  margin: 0;
+  text-transform: uppercase;
+}
+
+header button:hover, header button:focus, header [type="button"]:hover, header [type="button"]:focus, header .button:hover, header .button:focus, header [role="button"]:hover, header [role="button"]:focus {
+  background: var(--header-hover-back-color);
+}
+
+nav {
+  background: var(--nav-back-color);
+  color: var(--nav-fore-color);
+  border: 0.0625rem solid var(--nav-border-color);
+  border-radius: var(--universal-border-radius);
+  margin: var(--universal-margin);
+}
+
+nav * {
+  padding: var(--universal-padding) calc(1.5 * var(--universal-padding));
+}
+
+nav a, nav a:visited {
+  display: block;
+  color: var(--nav-link-color);
+  border-radius: var(--universal-border-radius);
+  transition: background 0.3s;
+}
+
+nav a:hover, nav a:focus, nav a:visited:hover, nav a:visited:focus {
+  text-decoration: none;
+  background: var(--nav-hover-back-color);
+}
+
+nav .sublink-1 {
+  position: relative;
+  margin-left: calc(2 * var(--universal-padding));
+}
+
+nav .sublink-1:before {
+  position: absolute;
+  left: calc(var(--universal-padding) - 1 * var(--universal-padding));
+  top: -0.0625rem;
+  content: '';
+  height: 100%;
+  border: 0.0625rem solid var(--nav-border-color);
+  border-left: 0;
+}
+
+nav .sublink-2 {
+  position: relative;
+  margin-left: calc(4 * var(--universal-padding));
+}
+
+nav .sublink-2:before {
+  position: absolute;
+  left: calc(var(--universal-padding) - 3 * var(--universal-padding));
+  top: -0.0625rem;
+  content: '';
+  height: 100%;
+  border: 0.0625rem solid var(--nav-border-color);
+  border-left: 0;
+}
+
+footer {
+  background: var(--footer-back-color);
+  color: var(--footer-fore-color);
+  border-top: 0.0625rem solid var(--footer-border-color);
+  padding: calc(2 * var(--universal-padding)) var(--universal-padding);
+  font-size: 0.875rem;
+}
+
+footer a, footer a:visited {
+  color: var(--footer-link-color);
+}
+
+header.sticky {
+  position: -webkit-sticky;
+  position: sticky;
+  z-index: 1101;
+  top: 0;
+}
+
+footer.sticky {
+  position: -webkit-sticky;
+  position: sticky;
+  z-index: 1101;
+  bottom: 0;
+}
+
+.drawer-toggle:before {
+  display: inline-block;
+  position: relative;
+  vertical-align: bottom;
+  content: '\00a0\2261\00a0';
+  font-family: sans-serif;
+  font-size: 1.5em;
+}
+
+@media screen and (min-width: 768px) {
+  .drawer-toggle:not(.persistent) {
+    display: none;
+  }
+}
+
+[type="checkbox"].drawer {
+  height: 1px;
+  width: 1px;
+  margin: -1px;
+  overflow: hidden;
+  position: absolute;
+  clip: rect(0 0 0 0);
+  -webkit-clip-path: inset(100%);
+  clip-path: inset(100%);
+}
+
+[type="checkbox"].drawer + * {
+  display: block;
+  box-sizing: border-box;
+  position: fixed;
+  top: 0;
+  width: 320px;
+  height: 100vh;
+  overflow-y: auto;
+  background: var(--drawer-back-color);
+  border: 0.0625rem solid var(--drawer-border-color);
+  border-radius: 0;
+  margin: 0;
+  z-index: 1110;
+  right: -320px;
+  transition: right 0.3s;
+}
+
+[type="checkbox"].drawer + * .drawer-close {
+  position: absolute;
+  top: var(--universal-margin);
+  right: var(--universal-margin);
+  z-index: 1111;
+  width: 2rem;
+  height: 2rem;
+  border-radius: var(--universal-border-radius);
+  padding: var(--universal-padding);
+  margin: 0;
+  cursor: pointer;
+  transition: background 0.3s;
+}
+
+[type="checkbox"].drawer + * .drawer-close:before {
+  display: block;
+  content: '\00D7';
+  color: var(--drawer-close-color);
+  position: relative;
+  font-family: sans-serif;
+  font-size: 2rem;
+  line-height: 1;
+  text-align: center;
+}
+
+[type="checkbox"].drawer + * .drawer-close:hover, [type="checkbox"].drawer + * .drawer-close:focus {
+  background: var(--drawer-hover-back-color);
+}
+
+@media screen and (max-width: 320px) {
+  [type="checkbox"].drawer + * {
+    width: 100%;
+  }
+}
+
+[type="checkbox"].drawer:checked + * {
+  right: 0;
+}
+
+@media screen and (min-width: 768px) {
+  [type="checkbox"].drawer:not(.persistent) + * {
+    position: static;
+    height: 100%;
+    z-index: 1100;
+  }
+  [type="checkbox"].drawer:not(.persistent) + * .drawer-close {
+    display: none;
+  }
+}
+
+/*
+  Definitions for the responsive table component.
+*/
+/* Table module CSS variable definitions. */
+:root {
+  --table-border-color: #d8dee9;
+  --table-border-separator-color: #434c5e;
+  --table-head-back-color: #e5e9f0;
+  --table-head-fore-color: #2e3440;
+  --table-body-back-color: #eceff4;
+  --table-body-fore-color: #2e3440;
+  --table-body-alt-back-color: #e5e9f0;
+}
+
+table {
+  border-collapse: separate;
+  border-spacing: 0;
+  margin: 0;
+  display: flex;
+  flex: 0 1 auto;
+  flex-flow: row wrap;
+  padding: var(--universal-padding);
+  padding-top: 0;
+}
+
+table caption {
+  font-size: 1.5rem;
+  margin: calc(2 * var(--universal-margin)) 0;
+  max-width: 100%;
+  flex: 0 0 100%;
+}
+
+table thead, table tbody {
+  display: flex;
+  flex-flow: row wrap;
+  border: 0.0625rem solid var(--table-border-color);
+}
+
+table thead {
+  z-index: 999;
+  border-radius: var(--universal-border-radius) var(--universal-border-radius) 0 0;
+  border-bottom: 0.0625rem solid var(--table-border-separator-color);
+}
+
+table tbody {
+  border-top: 0;
+  margin-top: calc(0 - var(--universal-margin));
+  border-radius: 0 0 var(--universal-border-radius) var(--universal-border-radius);
+}
+
+table tr {
+  display: flex;
+  padding: 0;
+}
+
+table th, table td {
+  padding: calc(2 * var(--universal-padding));
+}
+
+table th {
+  text-align: left;
+  background: var(--table-head-back-color);
+  color: var(--table-head-fore-color);
+}
+
+table td {
+  background: var(--table-body-back-color);
+  color: var(--table-body-fore-color);
+  border-top: 0.0625rem solid var(--table-border-color);
+}
+
+table:not(.horizontal) {
+  overflow: auto;
+  max-height: 400px;
+}
+
+table:not(.horizontal) thead, table:not(.horizontal) tbody {
+  max-width: 100%;
+  flex: 0 0 100%;
+}
+
+table:not(.horizontal) tr {
+  flex-flow: row wrap;
+  flex: 0 0 100%;
+}
+
+table:not(.horizontal) th, table:not(.horizontal) td {
+  flex: 1 0 0%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+table:not(.horizontal) thead {
+  position: sticky;
+  top: 0;
+}
+
+table:not(.horizontal) tbody tr:first-child td {
+  border-top: 0;
+}
+
+table.horizontal {
+  border: 0;
+}
+
+table.horizontal thead, table.horizontal tbody {
+  border: 0;
+  flex-flow: row nowrap;
+}
+
+table.horizontal tbody {
+  overflow: auto;
+  justify-content: space-between;
+  flex: 1 0 0;
+  margin-left: calc( 4 * var(--universal-margin));
+  padding-bottom: calc(var(--universal-padding) / 4);
+}
+
+table.horizontal tr {
+  flex-direction: column;
+  flex: 1 0 auto;
+}
+
+table.horizontal th, table.horizontal td {
+  width: 100%;
+  border: 0;
+  border-bottom: 0.0625rem solid var(--table-border-color);
+}
+
+table.horizontal th:not(:first-child), table.horizontal td:not(:first-child) {
+  border-top: 0;
+}
+
+table.horizontal th {
+  text-align: right;
+  border-left: 0.0625rem solid var(--table-border-color);
+  border-right: 0.0625rem solid var(--table-border-separator-color);
+}
+
+table.horizontal thead tr:first-child {
+  padding-left: 0;
+}
+
+table.horizontal th:first-child, table.horizontal td:first-child {
+  border-top: 0.0625rem solid var(--table-border-color);
+}
+
+table.horizontal tbody tr:last-child td {
+  border-right: 0.0625rem solid var(--table-border-color);
+}
+
+table.horizontal tbody tr:last-child td:first-child {
+  border-top-right-radius: 0.25rem;
+}
+
+table.horizontal tbody tr:last-child td:last-child {
+  border-bottom-right-radius: 0.25rem;
+}
+
+table.horizontal thead tr:first-child th:first-child {
+  border-top-left-radius: 0.25rem;
+}
+
+table.horizontal thead tr:first-child th:last-child {
+  border-bottom-left-radius: 0.25rem;
+}
+
+@media screen and (max-width: 767px) {
+  table, table.horizontal {
+    border-collapse: collapse;
+    border: 0;
+    width: 100%;
+    display: table;
+  }
+  table thead, table th, table.horizontal thead, table.horizontal th {
+    border: 0;
+    height: 1px;
+    width: 1px;
+    margin: -1px;
+    overflow: hidden;
+    padding: 0;
+    position: absolute;
+    clip: rect(0 0 0 0);
+    -webkit-clip-path: inset(100%);
+    clip-path: inset(100%);
+  }
+  table tbody, table.horizontal tbody {
+    border: 0;
+    display: table-row-group;
+  }
+  table tr, table.horizontal tr {
+    display: block;
+    border: 0.0625rem solid var(--table-border-color);
+    border-radius: var(--universal-border-radius);
+    background: #fafafa;
+    padding: var(--universal-padding);
+    margin: var(--universal-margin);
+    margin-bottom: calc(2 * var(--universal-margin));
+  }
+  table th, table td, table.horizontal th, table.horizontal td {
+    width: auto;
+  }
+  table td, table.horizontal td {
+    display: block;
+    border: 0;
+    text-align: right;
+  }
+  table td:before, table.horizontal td:before {
+    content: attr(data-label);
+    float: left;
+    font-weight: 600;
+  }
+  table th:first-child, table td:first-child, table.horizontal th:first-child, table.horizontal td:first-child {
+    border-top: 0;
+  }
+  table tbody tr:last-child td, table.horizontal tbody tr:last-child td {
+    border-right: 0;
+  }
+}
+
+:root {
+  --table-body-alt-back-color: #e5e9f0;
+}
+
+table.striped tr:nth-of-type(2n) > td {
+  background: var(--table-body-alt-back-color);
+}
+
+@media screen and (max-width: 768px) {
+  table.striped tr:nth-of-type(2n) {
+    background: var(--table-body-alt-back-color);
+  }
+}
+
+:root {
+  --table-body-hover-back-color: #88c0d0;
+}
+
+table.hoverable tr:hover, table.hoverable tr:hover > td, table.hoverable tr:focus, table.hoverable tr:focus > td {
+  background: var(--table-body-hover-back-color);
+}
+
+@media screen and (max-width: 768px) {
+  table.hoverable tr:hover, table.hoverable tr:hover > td, table.hoverable tr:focus, table.hoverable tr:focus > td {
+    background: var(--table-body-hover-back-color);
+  }
+}
+
+/*
+  Definitions for contextual background elements, toasts and tooltips.
+*/
+/* Contextual module CSS variable definitions */
+:root {
+  --mark-back-color: #5e81ac;
+  --mark-fore-color: #fafafa;
+}
+
+mark {
+  background: var(--mark-back-color);
+  color: var(--mark-fore-color);
+  font-size: 0.95em;
+  line-height: 1em;
+  border-radius: var(--universal-border-radius);
+  padding: calc(var(--universal-padding) / 4) calc(var(--universal-padding) / 2);
+}
+
+mark.inline-block {
+  display: inline-block;
+  font-size: 1em;
+  line-height: 1.5;
+  padding: calc(var(--universal-padding) / 2) var(--universal-padding);
+}
+
+:root {
+  --toast-back-color: #2e3440;
+  --toast-fore-color: #eceff4;
+}
+
+.toast {
+  position: fixed;
+  bottom: calc(var(--universal-margin) * 3);
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 1111;
+  color: var(--toast-fore-color);
+  background: var(--toast-back-color);
+  border-radius: calc(var(--universal-border-radius) * 16);
+  padding: var(--universal-padding) calc(var(--universal-padding) * 3);
+}
+
+:root {
+  --tooltip-back-color: #2e3440;
+  --tooltip-fore-color: #eceff4;
+}
+
+.tooltip {
+  position: relative;
+  display: inline-block;
+}
+
+.tooltip:before, .tooltip:after {
+  position: absolute;
+  opacity: 0;
+  clip: rect(0 0 0 0);
+  -webkit-clip-path: inset(100%);
+  clip-path: inset(100%);
+  transition: all 0.3s;
+  z-index: 1010;
+  left: 50%;
+}
+
+.tooltip:not(.bottom):before, .tooltip:not(.bottom):after {
+  bottom: 75%;
+}
+
+.tooltip.bottom:before, .tooltip.bottom:after {
+  top: 75%;
+}
+
+.tooltip:hover:before, .tooltip:hover:after, .tooltip:focus:before, .tooltip:focus:after {
+  opacity: 1;
+  clip: auto;
+  -webkit-clip-path: inset(0%);
+  clip-path: inset(0%);
+}
+
+.tooltip:before {
+  content: '';
+  background: transparent;
+  border: var(--universal-margin) solid transparent;
+  left: calc(50% - var(--universal-margin));
+}
+
+.tooltip:not(.bottom):before {
+  border-top-color: #2e3440;
+}
+
+.tooltip.bottom:before {
+  border-bottom-color: #2e3440;
+}
+
+.tooltip:after {
+  content: attr(aria-label);
+  color: var(--tooltip-fore-color);
+  background: var(--tooltip-back-color);
+  border-radius: var(--universal-border-radius);
+  padding: var(--universal-padding);
+  white-space: nowrap;
+  transform: translateX(-50%);
+}
+
+.tooltip:not(.bottom):after {
+  margin-bottom: calc(2 * var(--universal-margin));
+}
+
+.tooltip.bottom:after {
+  margin-top: calc(2 * var(--universal-margin));
+}
+
+:root {
+  --modal-overlay-color: rgba(0, 0, 0, 0.45);
+  --modal-close-color: #3b4252;
+  --modal-close-hover-color: #e5e9f0;
+}
+
+[type="checkbox"].modal {
+  height: 1px;
+  width: 1px;
+  margin: -1px;
+  overflow: hidden;
+  position: absolute;
+  clip: rect(0 0 0 0);
+  -webkit-clip-path: inset(100%);
+  clip-path: inset(100%);
+}
+
+[type="checkbox"].modal + div {
+  position: fixed;
+  top: 0;
+  left: 0;
+  display: none;
+  width: 100vw;
+  height: 100vh;
+  background: var(--modal-overlay-color);
+}
+
+[type="checkbox"].modal + div .card {
+  margin: 0 auto;
+  max-height: 50vh;
+  overflow: auto;
+}
+
+[type="checkbox"].modal + div .card .modal-close {
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 1.75rem;
+  height: 1.75rem;
+  border-radius: var(--universal-border-radius);
+  padding: var(--universal-padding);
+  margin: 0;
+  cursor: pointer;
+  transition: background 0.3s;
+}
+
+[type="checkbox"].modal + div .card .modal-close:before {
+  display: block;
+  content: '\00D7';
+  color: var(--modal-close-color);
+  position: relative;
+  font-family: sans-serif;
+  font-size: 1.75rem;
+  line-height: 1;
+  text-align: center;
+}
+
+[type="checkbox"].modal + div .card .modal-close:hover, [type="checkbox"].modal + div .card .modal-close:focus {
+  background: var(--modal-close-hover-color);
+}
+
+[type="checkbox"].modal:checked + div {
+  display: flex;
+  flex: 0 1 auto;
+  z-index: 1200;
+}
+
+[type="checkbox"].modal:checked + div .card .modal-close {
+  z-index: 1211;
+}
+
+:root {
+  --collapse-label-back-color: #e5e9f0;
+  --collapse-label-fore-color: #2e3440;
+  --collapse-label-hover-back-color: #e5e9f0;
+  --collapse-selected-label-back-color: #e5e9f0;
+  --collapse-border-color: #e5e9f0;
+  --collapse-content-back-color: #fafafa;
+  --collapse-selected-label-border-color: #88c0d0;
+}
+
+.collapse {
+  width: calc(100% - 2 * var(--universal-margin));
+  opacity: 1;
+  display: flex;
+  flex-direction: column;
+  margin: var(--universal-margin);
+  border-radius: var(--universal-border-radius);
+}
+
+.collapse > [type="radio"], .collapse > [type="checkbox"] {
+  height: 1px;
+  width: 1px;
+  margin: -1px;
+  overflow: hidden;
+  position: absolute;
+  clip: rect(0 0 0 0);
+  -webkit-clip-path: inset(100%);
+  clip-path: inset(100%);
+}
+
+.collapse > label {
+  flex-grow: 1;
+  display: inline-block;
+  height: 1.5rem;
+  cursor: pointer;
+  transition: background 0.3s;
+  color: var(--collapse-label-fore-color);
+  background: var(--collapse-label-back-color);
+  border: 0.0625rem solid var(--collapse-border-color);
+  padding: calc(1.5 * var(--universal-padding));
+}
+
+.collapse > label:hover, .collapse > label:focus {
+  background: var(--collapse-label-hover-back-color);
+}
+
+.collapse > label + div {
+  flex-basis: auto;
+  height: 1px;
+  width: 1px;
+  margin: -1px;
+  overflow: hidden;
+  position: absolute;
+  clip: rect(0 0 0 0);
+  -webkit-clip-path: inset(100%);
+  clip-path: inset(100%);
+  transition: max-height 0.3s;
+  max-height: 1px;
+}
+
+.collapse > :checked + label {
+  background: var(--collapse-selected-label-back-color);
+  border-bottom-color: var(--collapse-selected-label-border-color);
+}
+
+.collapse > :checked + label + div {
+  box-sizing: border-box;
+  position: relative;
+  width: 100%;
+  height: auto;
+  overflow: auto;
+  margin: 0;
+  background: var(--collapse-content-back-color);
+  border: 0.0625rem solid var(--collapse-border-color);
+  border-top: 0;
+  padding: var(--universal-padding);
+  clip: auto;
+  -webkit-clip-path: inset(0%);
+  clip-path: inset(0%);
+  max-height: 400px;
+}
+
+.collapse > label:not(:first-of-type) {
+  border-top: 0;
+}
+
+.collapse > label:first-of-type {
+  border-radius: var(--universal-border-radius) var(--universal-border-radius) 0 0;
+}
+
+.collapse > label:last-of-type:not(:first-of-type) {
+  border-radius: 0 0 var(--universal-border-radius) var(--universal-border-radius);
+}
+
+.collapse > label:last-of-type:first-of-type {
+  border-radius: var(--universal-border-radius);
+}
+
+.collapse > :checked:last-of-type:not(:first-of-type) + label {
+  border-radius: 0;
+}
+
+.collapse > :checked:last-of-type + label + div {
+  border-radius: 0 0 var(--universal-border-radius) var(--universal-border-radius);
+}
+
+/*
+	 Custom elements for contextual background elements, toasts and tooltips.
+*/
+mark.secondary {
+  --mark-back-color: #bf616a;
+}
+
+mark.tertiary {
+  --mark-back-color: #a3be8c;
+}
+
+mark.tag {
+  padding: calc(var(--universal-padding)/2) var(--universal-padding);
+  border-radius: 1em;
+}
+
+/*
+  Definitions for progress elements and spinners.
+*/
+/* Progess module CSS variable definitions */
+:root {
+  --progress-back-color: #e5e9f0;
+  --progress-fore-color: #434c5e;
+}
+
+progress {
+  display: block;
+  vertical-align: baseline;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  height: 0.75rem;
+  width: calc(100% - 2 * var(--universal-margin));
+  margin: var(--universal-margin);
+  border: 0;
+  border-radius: calc(2 * var(--universal-border-radius));
+  background: var(--progress-back-color);
+  color: var(--progress-fore-color);
+}
+
+progress::-webkit-progress-value {
+  background: var(--progress-fore-color);
+  border-top-left-radius: calc(2 * var(--universal-border-radius));
+  border-bottom-left-radius: calc(2 * var(--universal-border-radius));
+}
+
+progress::-webkit-progress-bar {
+  background: var(#e5e9f0);
+}
+
+progress::-moz-progress-bar {
+  background: var(--progress-fore-color);
+  border-top-left-radius: calc(2 * var(--universal-border-radius));
+  border-bottom-left-radius: calc(2 * var(--universal-border-radius));
+}
+
+progress[value="1000"]::-webkit-progress-value {
+  border-radius: calc(2 * var(--universal-border-radius));
+}
+
+progress[value="1000"]::-moz-progress-bar {
+  border-radius: calc(2 * var(--universal-border-radius));
+}
+
+progress.inline {
+  display: inline-block;
+  vertical-align: middle;
+  width: 60%;
+}
+
+:root {
+  --spinner-back-color: #d8dee9;
+  --spinner-fore-color: #434c5e;
+}
+
+@keyframes spinner-donut-anim {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+.spinner {
+  display: inline-block;
+  margin: var(--universal-margin);
+  border: 0.25rem solid var(--spinner-back-color);
+  border-left: 0.25rem solid var(--spinner-fore-color);
+  border-radius: 50%;
+  width: 1.25rem;
+  height: 1.25rem;
+  animation: spinner-donut-anim 1.2s linear infinite;
+}
+
+/*
+	 Custom elements for progress bars and spinners.
+*/
+progress.primary {
+  --progress-fore-color: #5e81ac;
+}
+
+progress.secondary {
+  --progress-fore-color: #bf616a;
+}
+
+progress.tertiary {
+  --progress-fore-color: #a3be8c;
+}
+
+.spinner.primary {
+  --spinner-fore-color: #5e81ac;
+}
+
+.spinner.secondary {
+  --spinner-fore-color: #bf616a;
+}
+
+.spinner.tertiary {
+  --spinner-fore-color: #a3be8c;
+}
+
+/*
+  Definitions for icons - powered by Feather (https://feathericons.com/).
+*/
+span[class^='icon-'] {
+  display: inline-block;
+  height: 1em;
+  width: 1em;
+  vertical-align: -0.125em;
+  background-size: contain;
+  margin: 0 calc(var(--universal-margin) / 4);
+}
+
+span[class^='icon-'].secondary {
+  -webkit-filter: invert(25%);
+  filter: invert(25%);
+}
+
+span[class^='icon-'].inverse {
+  -webkit-filter: invert(100%);
+  filter: invert(100%);
+}
+
+span.icon-alert {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%232e3440' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12' y2='16'%3E%3C/line%3E%3C/svg%3E");
+}
+
+span.icon-bookmark {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%232e3440' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z'%3E%3C/path%3E%3C/svg%3E");
+}
+
+span.icon-calendar {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%232e3440' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
+}
+
+span.icon-credit {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%232e3440' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='1' y='4' width='22' height='16' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='1' y1='10' x2='23' y2='10'%3E%3C/line%3E%3C/svg%3E");
+}
+
+span.icon-edit {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%232e3440' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 14.66V20a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h5.34'%3E%3C/path%3E%3Cpolygon points='18 2 22 6 12 16 8 16 8 12 18 2'%3E%3C/polygon%3E%3C/svg%3E");
+}
+
+span.icon-link {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%232e3440' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'%3E%3C/path%3E%3Cpolyline points='15 3 21 3 21 9'%3E%3C/polyline%3E%3Cline x1='10' y1='14' x2='21' y2='3'%3E%3C/line%3E%3C/svg%3E");
+}
+
+span.icon-help {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%232e3440' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3'%3E%3C/path%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='17' x2='12' y2='17'%3E%3C/line%3E%3C/svg%3E");
+}
+
+span.icon-home {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%232e3440' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'%3E%3C/path%3E%3Cpolyline points='9 22 9 12 15 12 15 22'%3E%3C/polyline%3E%3C/svg%3E");
+}
+
+span.icon-info {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%232e3440' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='16' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='8' x2='12' y2='8'%3E%3C/line%3E%3C/svg%3E");
+}
+
+span.icon-lock {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%232e3440' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2' ry='2'%3E%3C/rect%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'%3E%3C/path%3E%3C/svg%3E");
+}
+
+span.icon-mail {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%232e3440' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z'%3E%3C/path%3E%3Cpolyline points='22,6 12,13 2,6'%3E%3C/polyline%3E%3C/svg%3E");
+}
+
+span.icon-location {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%232e3440' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'%3E%3C/path%3E%3Ccircle cx='12' cy='10' r='3'%3E%3C/circle%3E%3C/svg%3E");
+}
+
+span.icon-phone {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%232e3440' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'%3E%3C/path%3E%3C/svg%3E");
+}
+
+span.icon-rss {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%232e3440' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 11a9 9 0 0 1 9 9'%3E%3C/path%3E%3Cpath d='M4 4a16 16 0 0 1 16 16'%3E%3C/path%3E%3Ccircle cx='5' cy='19' r='1'%3E%3C/circle%3E%3C/svg%3E");
+}
+
+span.icon-search {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%232e3440' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
+}
+
+span.icon-settings {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%232e3440' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'%3E%3C/circle%3E%3Cpath d='M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z'%3E%3C/path%3E%3C/svg%3E");
+}
+
+span.icon-share {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%232e3440' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='18' cy='5' r='3'%3E%3C/circle%3E%3Ccircle cx='6' cy='12' r='3'%3E%3C/circle%3E%3Ccircle cx='18' cy='19' r='3'%3E%3C/circle%3E%3Cline x1='8.59' y1='13.51' x2='15.42' y2='17.49'%3E%3C/line%3E%3Cline x1='15.41' y1='6.51' x2='8.59' y2='10.49'%3E%3C/line%3E%3C/svg%3E");
+}
+
+span.icon-cart {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%232e3440' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1'%3E%3C/circle%3E%3Ccircle cx='20' cy='21' r='1'%3E%3C/circle%3E%3Cpath d='M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6'%3E%3C/path%3E%3C/svg%3E");
+}
+
+span.icon-upload {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%232e3440' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'%3E%3C/path%3E%3Cpolyline points='17 8 12 3 7 8'%3E%3C/polyline%3E%3Cline x1='12' y1='3' x2='12' y2='15'%3E%3C/line%3E%3C/svg%3E");
+}
+
+span.icon-user {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%232e3440' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'%3E%3C/path%3E%3Ccircle cx='12' cy='7' r='4'%3E%3C/circle%3E%3C/svg%3E");
+}
+
+/*
+  Definitions for utilities and helper classes.
+*/
+/* Utility module CSS variable definitions */
+:root {
+  --generic-border-color: rgba(0, 0, 0, 0.3);
+  --generic-box-shadow: 0 0.25rem 0.25rem 0 rgba(0, 0, 0, 0.125), 0 0.125rem 0.125rem -0.125rem rgba(0, 0, 0, 0.125);
+}
+
+.hidden {
+  display: none !important;
+}
+
+.visually-hidden {
+  position: absolute !important;
+  width: 1px !important;
+  height: 1px !important;
+  margin: -1px !important;
+  border: 0 !important;
+  padding: 0 !important;
+  clip: rect(0 0 0 0) !important;
+  -webkit-clip-path: inset(100%) !important;
+  clip-path: inset(100%) !important;
+  overflow: hidden !important;
+}
+
+.bordered {
+  border: 0.0625rem solid var(--generic-border-color) !important;
+}
+
+.rounded {
+  border-radius: var(--universal-border-radius) !important;
+}
+
+.circular {
+  border-radius: 50% !important;
+}
+
+.shadowed {
+  box-shadow: var(--generic-box-shadow) !important;
+}
+
+.responsive-margin {
+  margin: calc(var(--universal-margin) / 4) !important;
+}
+
+@media screen and (min-width: 768px) {
+  .responsive-margin {
+    margin: calc(var(--universal-margin) / 2) !important;
+  }
+}
+
+@media screen and (min-width: 1280px) {
+  .responsive-margin {
+    margin: var(--universal-margin) !important;
+  }
+}
+
+.responsive-padding {
+  padding: calc(var(--universal-padding) / 4) !important;
+}
+
+@media screen and (min-width: 768px) {
+  .responsive-padding {
+    padding: calc(var(--universal-padding) / 2) !important;
+  }
+}
+
+@media screen and (min-width: 1280px) {
+  .responsive-padding {
+    padding: var(--universal-padding) !important;
+  }
+}
+
+@media screen and (max-width: 767px) {
+  .hidden-sm {
+    display: none !important;
+  }
+}
+
+@media screen and (min-width: 768px) and (max-width: 1279px) {
+  .hidden-md {
+    display: none !important;
+  }
+}
+
+@media screen and (min-width: 1280px) {
+  .hidden-lg {
+    display: none !important;
+  }
+}
+
+@media screen and (max-width: 767px) {
+  .visually-hidden-sm {
+    position: absolute !important;
+    width: 1px !important;
+    height: 1px !important;
+    margin: -1px !important;
+    border: 0 !important;
+    padding: 0 !important;
+    clip: rect(0 0 0 0) !important;
+    -webkit-clip-path: inset(100%) !important;
+    clip-path: inset(100%) !important;
+    overflow: hidden !important;
+  }
+}
+
+@media screen and (min-width: 768px) and (max-width: 1279px) {
+  .visually-hidden-md {
+    position: absolute !important;
+    width: 1px !important;
+    height: 1px !important;
+    margin: -1px !important;
+    border: 0 !important;
+    padding: 0 !important;
+    clip: rect(0 0 0 0) !important;
+    -webkit-clip-path: inset(100%) !important;
+    clip-path: inset(100%) !important;
+    overflow: hidden !important;
+  }
+}
+
+@media screen and (min-width: 1280px) {
+  .visually-hidden-lg {
+    position: absolute !important;
+    width: 1px !important;
+    height: 1px !important;
+    margin: -1px !important;
+    border: 0 !important;
+    padding: 0 !important;
+    clip: rect(0 0 0 0) !important;
+    -webkit-clip-path: inset(100%) !important;
+    clip-path: inset(100%) !important;
+    overflow: hidden !important;
+  }
+}
diff --git a/docs/v3/flavors/mini-nord.min.css b/docs/v3/flavors/mini-nord.min.css
new file mode 100644
index 0000000..af09abb
--- /dev/null
+++ b/docs/v3/flavors/mini-nord.min.css
@@ -0,0 +1 @@
+:root{--fore-color:#2e3440;--secondary-fore-color:#3b4252;--back-color:#eceff4;--secondary-back-color:#e5e9f0;--blockquote-color:#d08770;--pre-color:#b48ead;--border-color:#d8dee9;--secondary-border-color:#e5e9f0;--heading-ratio:1.19;--universal-margin:.5rem;--universal-padding:.5rem;--universal-border-radius:.125rem;--a-link-color:#88c0d0;--a-visited-color:#5e81ac}html{font-size:16px}a,b,del,em,i,ins,q,span,strong,u{font-size:1em}html,*{font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, sans-serif;line-height:1.5;-webkit-text-size-adjust:100%}*{font-size:1rem}body{margin:0;color:var(--fore-color);background:var(--back-color)}details{display:block}summary{display:list-item}abbr[title]{border-bottom:none;text-decoration:underline dotted}input{overflow:visible}img{max-width:100%;height:auto}h1,h2,h3,h4,h5,h6{line-height:1.2;margin:calc(1.5 * var(--universal-margin)) var(--universal-margin);font-weight:500}h1 small,h2 small,h3 small,h4 small,h5 small,h6 small{color:var(--secondary-fore-color);display:block;margin-top:-.25rem}h1{font-size:calc(1rem * var(--heading-ratio) * var(--heading-ratio) * var(--heading-ratio) * var(--heading-ratio))}h2{font-size:calc(1rem * var(--heading-ratio) * var(--heading-ratio) * var(--heading-ratio))}h3{font-size:calc(1rem * var(--heading-ratio) * var(--heading-ratio))}h4{font-size:calc(1rem * var(--heading-ratio))}h5{font-size:1rem}h6{font-size:calc(1rem / var(--heading-ratio))}p{margin:var(--universal-margin)}ol,ul{margin:var(--universal-margin);padding-left:calc(2 * var(--universal-margin))}b,strong{font-weight:700}hr{box-sizing:content-box;border:0;line-height:1.25em;margin:var(--universal-margin);height:.0625rem;background:linear-gradient(to right, transparent, var(--border-color) 20%, var(--border-color) 80%, transparent)}blockquote{display:block;position:relative;font-style:italic;color:var(--secondary-fore-color);margin:var(--universal-margin);padding:calc(3 * var(--universal-padding));border:.0625rem solid var(--secondary-border-color);border-left:.375rem solid var(--blockquote-color);border-radius:0 var(--universal-border-radius) var(--universal-border-radius) 0}blockquote:before{position:absolute;top:calc(0rem - var(--universal-padding));left:0;font-family:sans-serif;font-size:3rem;font-weight:700;content:"\201c";color:var(--blockquote-color)}blockquote[cite]:after{font-style:normal;font-size:.75em;font-weight:700;content:"\a—  " attr(cite);white-space:pre}code,kbd,pre,samp{font-family:Menlo, Consolas, monospace;font-size:.85em}code{background:var(--secondary-back-color);border-radius:var(--universal-border-radius);padding:calc(var(--universal-padding) / 4) calc(var(--universal-padding) / 2)}kbd{background:var(--fore-color);color:var(--back-color);border-radius:var(--universal-border-radius);padding:calc(var(--universal-padding) / 4) calc(var(--universal-padding) / 2)}pre{overflow:auto;background:var(--secondary-back-color);padding:calc(1.5 * var(--universal-padding));margin:var(--universal-margin);border:.0625rem solid var(--secondary-border-color);border-left:.25rem solid var(--pre-color);border-radius:0 var(--universal-border-radius) var(--universal-border-radius) 0}sup,sub,code,kbd{line-height:0;position:relative;vertical-align:baseline}small,sup,sub,figcaption{font-size:.75em}sup{top:-.5em}sub{bottom:-.25em}figure{margin:var(--universal-margin)}figcaption{color:var(--secondary-fore-color)}a{text-decoration:none}a:link{color:var(--a-link-color)}a:visited{color:var(--a-visited-color)}a:hover,a:focus{text-decoration:underline}.container{margin:0 auto;padding:0 calc(1.5 * var(--universal-padding))}.row{box-sizing:border-box;display:flex;flex:0 1 auto;flex-flow:row wrap}.col-sm,[class^='col-sm-'],[class^='col-sm-offset-'],.row[class*='cols-sm-']>*{box-sizing:border-box;flex:0 0 auto;padding:0 calc(var(--universal-padding) / 2)}.col-sm,.row.cols-sm>*{max-width:100%;flex-grow:1;flex-basis:0}.col-sm-1,.row.cols-sm-1>*{max-width:8.33333%;flex-basis:8.33333%}.col-sm-offset-0{margin-left:0}.col-sm-2,.row.cols-sm-2>*{max-width:16.66667%;flex-basis:16.66667%}.col-sm-offset-1{margin-left:8.33333%}.col-sm-3,.row.cols-sm-3>*{max-width:25%;flex-basis:25%}.col-sm-offset-2{margin-left:16.66667%}.col-sm-4,.row.cols-sm-4>*{max-width:33.33333%;flex-basis:33.33333%}.col-sm-offset-3{margin-left:25%}.col-sm-5,.row.cols-sm-5>*{max-width:41.66667%;flex-basis:41.66667%}.col-sm-offset-4{margin-left:33.33333%}.col-sm-6,.row.cols-sm-6>*{max-width:50%;flex-basis:50%}.col-sm-offset-5{margin-left:41.66667%}.col-sm-7,.row.cols-sm-7>*{max-width:58.33333%;flex-basis:58.33333%}.col-sm-offset-6{margin-left:50%}.col-sm-8,.row.cols-sm-8>*{max-width:66.66667%;flex-basis:66.66667%}.col-sm-offset-7{margin-left:58.33333%}.col-sm-9,.row.cols-sm-9>*{max-width:75%;flex-basis:75%}.col-sm-offset-8{margin-left:66.66667%}.col-sm-10,.row.cols-sm-10>*{max-width:83.33333%;flex-basis:83.33333%}.col-sm-offset-9{margin-left:75%}.col-sm-11,.row.cols-sm-11>*{max-width:91.66667%;flex-basis:91.66667%}.col-sm-offset-10{margin-left:83.33333%}.col-sm-12,.row.cols-sm-12>*{max-width:100%;flex-basis:100%}.col-sm-offset-11{margin-left:91.66667%}.col-sm-normal{order:initial}.col-sm-first{order:-999}.col-sm-last{order:999}@media screen and (min-width: 768px){.col-md,[class^='col-md-'],[class^='col-md-offset-'],.row[class*='cols-md-']>*{box-sizing:border-box;flex:0 0 auto;padding:0 calc(var(--universal-padding) / 2)}.col-md,.row.cols-md>*{max-width:100%;flex-grow:1;flex-basis:0}.col-md-1,.row.cols-md-1>*{max-width:8.33333%;flex-basis:8.33333%}.col-md-offset-0{margin-left:0}.col-md-2,.row.cols-md-2>*{max-width:16.66667%;flex-basis:16.66667%}.col-md-offset-1{margin-left:8.33333%}.col-md-3,.row.cols-md-3>*{max-width:25%;flex-basis:25%}.col-md-offset-2{margin-left:16.66667%}.col-md-4,.row.cols-md-4>*{max-width:33.33333%;flex-basis:33.33333%}.col-md-offset-3{margin-left:25%}.col-md-5,.row.cols-md-5>*{max-width:41.66667%;flex-basis:41.66667%}.col-md-offset-4{margin-left:33.33333%}.col-md-6,.row.cols-md-6>*{max-width:50%;flex-basis:50%}.col-md-offset-5{margin-left:41.66667%}.col-md-7,.row.cols-md-7>*{max-width:58.33333%;flex-basis:58.33333%}.col-md-offset-6{margin-left:50%}.col-md-8,.row.cols-md-8>*{max-width:66.66667%;flex-basis:66.66667%}.col-md-offset-7{margin-left:58.33333%}.col-md-9,.row.cols-md-9>*{max-width:75%;flex-basis:75%}.col-md-offset-8{margin-left:66.66667%}.col-md-10,.row.cols-md-10>*{max-width:83.33333%;flex-basis:83.33333%}.col-md-offset-9{margin-left:75%}.col-md-11,.row.cols-md-11>*{max-width:91.66667%;flex-basis:91.66667%}.col-md-offset-10{margin-left:83.33333%}.col-md-12,.row.cols-md-12>*{max-width:100%;flex-basis:100%}.col-md-offset-11{margin-left:91.66667%}.col-md-normal{order:initial}.col-md-first{order:-999}.col-md-last{order:999}}@media screen and (min-width: 1280px){.col-lg,[class^='col-lg-'],[class^='col-lg-offset-'],.row[class*='cols-lg-']>*{box-sizing:border-box;flex:0 0 auto;padding:0 calc(var(--universal-padding) / 2)}.col-lg,.row.cols-lg>*{max-width:100%;flex-grow:1;flex-basis:0}.col-lg-1,.row.cols-lg-1>*{max-width:8.33333%;flex-basis:8.33333%}.col-lg-offset-0{margin-left:0}.col-lg-2,.row.cols-lg-2>*{max-width:16.66667%;flex-basis:16.66667%}.col-lg-offset-1{margin-left:8.33333%}.col-lg-3,.row.cols-lg-3>*{max-width:25%;flex-basis:25%}.col-lg-offset-2{margin-left:16.66667%}.col-lg-4,.row.cols-lg-4>*{max-width:33.33333%;flex-basis:33.33333%}.col-lg-offset-3{margin-left:25%}.col-lg-5,.row.cols-lg-5>*{max-width:41.66667%;flex-basis:41.66667%}.col-lg-offset-4{margin-left:33.33333%}.col-lg-6,.row.cols-lg-6>*{max-width:50%;flex-basis:50%}.col-lg-offset-5{margin-left:41.66667%}.col-lg-7,.row.cols-lg-7>*{max-width:58.33333%;flex-basis:58.33333%}.col-lg-offset-6{margin-left:50%}.col-lg-8,.row.cols-lg-8>*{max-width:66.66667%;flex-basis:66.66667%}.col-lg-offset-7{margin-left:58.33333%}.col-lg-9,.row.cols-lg-9>*{max-width:75%;flex-basis:75%}.col-lg-offset-8{margin-left:66.66667%}.col-lg-10,.row.cols-lg-10>*{max-width:83.33333%;flex-basis:83.33333%}.col-lg-offset-9{margin-left:75%}.col-lg-11,.row.cols-lg-11>*{max-width:91.66667%;flex-basis:91.66667%}.col-lg-offset-10{margin-left:83.33333%}.col-lg-12,.row.cols-lg-12>*{max-width:100%;flex-basis:100%}.col-lg-offset-11{margin-left:91.66667%}.col-lg-normal{order:initial}.col-lg-first{order:-999}.col-lg-last{order:999}}:root{--card-back-color:#eceff4;--card-fore-color:#2e3440;--card-border-color:#e5e9f0}.card{display:flex;flex-direction:column;justify-content:space-between;align-self:center;position:relative;width:100%;background:var(--card-back-color);color:var(--card-fore-color);border:.0625rem solid var(--card-border-color);border-radius:var(--universal-border-radius);margin:var(--universal-margin);overflow:hidden}@media screen and (min-width: 320px){.card{max-width:320px}}.card>.section{background:var(--card-back-color);color:var(--card-fore-color);box-sizing:border-box;margin:0;border:0;border-radius:0;border-bottom:.0625rem solid var(--card-border-color);padding:var(--universal-padding);width:100%}.card>.section.media{height:200px;padding:0;-o-object-fit:cover;object-fit:cover}.card>.section:last-child{border-bottom:0}@media screen and (min-width: 240px){.card.small{max-width:240px}}@media screen and (min-width: 480px){.card.large{max-width:480px}}.card.fluid{max-width:100%;width:auto}.card.warning{--card-back-color:#ebcb8b;--card-border-color:#d08770}.card.error{--card-back-color:#bf616a;--card-border-color:#434c5e}.card>.section.dark{--card-back-color:#d8dee9}.card>.section.double-padded{padding:calc(1.5 * var(--universal-padding))}:root{--form-back-color:#e5e9f0;--form-fore-color:#2e3440;--form-border-color:#e5e9f0;--input-back-color:#eceff4;--input-fore-color:#2e3440;--input-border-color:#e5e9f0;--input-focus-color:#88c0d0;--input-invalid-color:#bf616a;--button-back-color:#e5e9f0;--button-hover-back-color:#d8dee9;--button-fore-color:#2e3440;--button-border-color:transparent;--button-hover-border-color:transparent;--button-group-border-color:rgba(124,124,124,0.54)}form{background:var(--form-back-color);color:var(--form-fore-color);border:.0625rem solid var(--form-border-color);border-radius:var(--universal-border-radius);margin:var(--universal-margin);padding:calc(2 * var(--universal-padding)) var(--universal-padding)}fieldset{border:.0625rem solid var(--form-border-color);border-radius:var(--universal-border-radius);margin:calc(var(--universal-margin) / 4);padding:var(--universal-padding)}legend{box-sizing:border-box;display:table;max-width:100%;white-space:normal;font-weight:700;padding:calc(var(--universal-padding) / 2)}label{padding:calc(var(--universal-padding) / 2) var(--universal-padding)}.input-group{display:inline-block}.input-group.fluid{display:flex;align-items:center;justify-content:center}.input-group.fluid>input{max-width:100%;flex-grow:1;flex-basis:0px}@media screen and (max-width: 767px){.input-group.fluid{align-items:stretch;flex-direction:column}}.input-group.vertical{display:flex;align-items:stretch;flex-direction:column}.input-group.vertical>input{max-width:100%;flex-grow:1;flex-basis:0px}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px}[type="search"]::-webkit-search-cancel-button,[type="search"]::-webkit-search-decoration{-webkit-appearance:none}input:not([type]),[type="text"],[type="email"],[type="number"],[type="search"],[type="password"],[type="url"],[type="tel"],[type="checkbox"],[type="radio"],textarea,select{box-sizing:border-box;background:var(--input-back-color);color:var(--input-fore-color);border:.0625rem solid var(--input-border-color);border-radius:var(--universal-border-radius);margin:calc(var(--universal-margin) / 2);padding:var(--universal-padding) calc(1.5 * var(--universal-padding))}input:not([type="button"]):not([type="submit"]):not([type="reset"]):hover,input:not([type="button"]):not([type="submit"]):not([type="reset"]):focus,textarea:hover,textarea:focus,select:hover,select:focus{border-color:var(--input-focus-color);box-shadow:none}input:not([type="button"]):not([type="submit"]):not([type="reset"]):invalid,input:not([type="button"]):not([type="submit"]):not([type="reset"]):focus:invalid,textarea:invalid,textarea:focus:invalid,select:invalid,select:focus:invalid{border-color:var(--input-invalid-color);box-shadow:none}input:not([type="button"]):not([type="submit"]):not([type="reset"])[readonly],textarea[readonly],select[readonly]{background:var(--secondary-back-color)}select{max-width:100%}option{overflow:hidden;text-overflow:ellipsis}[type="checkbox"],[type="radio"]{-webkit-appearance:none;-moz-appearance:none;appearance:none;position:relative;height:calc(1rem + var(--universal-padding) / 2);width:calc(1rem + var(--universal-padding) / 2);vertical-align:text-bottom;padding:0;flex-basis:calc(1rem + var(--universal-padding) / 2) !important;flex-grow:0 !important}[type="checkbox"]:checked:before,[type="radio"]:checked:before{position:absolute}[type="checkbox"]:checked:before{content:'\2713';font-family:sans-serif;font-size:calc(1rem + var(--universal-padding) / 2);top:calc(0rem - var(--universal-padding));left:calc(var(--universal-padding) / 4)}[type="radio"]{border-radius:100%}[type="radio"]:checked:before{border-radius:100%;content:'';top:calc(.0625rem + var(--universal-padding) / 2);left:calc(.0625rem + var(--universal-padding) / 2);background:var(--input-fore-color);width:0.5rem;height:0.5rem}:placeholder-shown{color:var(--input-fore-color)}::-ms-placeholder{color:var(--input-fore-color);opacity:0.54}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button,html [type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button{overflow:visible;text-transform:none}button,[type="button"],[type="submit"],[type="reset"],a.button,label.button,.button,a[role="button"],label[role="button"],[role="button"]{display:inline-block;background:var(--button-back-color);color:var(--button-fore-color);border:.0625rem solid var(--button-border-color);border-radius:var(--universal-border-radius);padding:var(--universal-padding) calc(1.5 * var(--universal-padding));margin:var(--universal-margin);text-decoration:none;cursor:pointer;transition:background 0.3s}button:hover,button:focus,[type="button"]:hover,[type="button"]:focus,[type="submit"]:hover,[type="submit"]:focus,[type="reset"]:hover,[type="reset"]:focus,a.button:hover,a.button:focus,label.button:hover,label.button:focus,.button:hover,.button:focus,a[role="button"]:hover,a[role="button"]:focus,label[role="button"]:hover,label[role="button"]:focus,[role="button"]:hover,[role="button"]:focus{background:var(--button-hover-back-color);border-color:var(--button-hover-border-color)}input:disabled,input[disabled],textarea:disabled,textarea[disabled],select:disabled,select[disabled],button:disabled,button[disabled],.button:disabled,.button[disabled],[role="button"]:disabled,[role="button"][disabled]{cursor:not-allowed;opacity:.75}.button-group{display:flex;border:.0625rem solid var(--button-group-border-color);border-radius:var(--universal-border-radius);margin:var(--universal-margin)}.button-group>button,.button-group [type="button"],.button-group>[type="submit"],.button-group>[type="reset"],.button-group>.button,.button-group>[role="button"]{margin:0;max-width:100%;flex:1 1 auto;text-align:center;border:0;border-radius:0;box-shadow:none}.button-group>:not(:first-child){border-left:.0625rem solid var(--button-group-border-color)}@media screen and (max-width: 767px){.button-group{flex-direction:column}.button-group>:not(:first-child){border:0;border-top:.0625rem solid var(--button-group-border-color)}}button.primary,[type="button"].primary,[type="submit"].primary,[type="reset"].primary,.button.primary,[role="button"].primary{--button-back-color:#5e81ac;--button-fore-color:#eceff4}button.primary:hover,button.primary:focus,[type="button"].primary:hover,[type="button"].primary:focus,[type="submit"].primary:hover,[type="submit"].primary:focus,[type="reset"].primary:hover,[type="reset"].primary:focus,.button.primary:hover,.button.primary:focus,[role="button"].primary:hover,[role="button"].primary:focus{--button-hover-back-color:#5e81ac}button.secondary,[type="button"].secondary,[type="submit"].secondary,[type="reset"].secondary,.button.secondary,[role="button"].secondary{--button-back-color:#bf616a;--button-fore-color:#eceff4}button.secondary:hover,button.secondary:focus,[type="button"].secondary:hover,[type="button"].secondary:focus,[type="submit"].secondary:hover,[type="submit"].secondary:focus,[type="reset"].secondary:hover,[type="reset"].secondary:focus,.button.secondary:hover,.button.secondary:focus,[role="button"].secondary:hover,[role="button"].secondary:focus{--button-hover-back-color:#bf616a}button.tertiary,[type="button"].tertiary,[type="submit"].tertiary,[type="reset"].tertiary,.button.tertiary,[role="button"].tertiary{--button-back-color:#a3be8c;--button-fore-color:#434c5e}button.tertiary:hover,button.tertiary:focus,[type="button"].tertiary:hover,[type="button"].tertiary:focus,[type="submit"].tertiary:hover,[type="submit"].tertiary:focus,[type="reset"].tertiary:hover,[type="reset"].tertiary:focus,.button.tertiary:hover,.button.tertiary:focus,[role="button"].tertiary:hover,[role="button"].tertiary:focus{--button-hover-back-color:#a3be8c}button.inverse,[type="button"].inverse,[type="submit"].inverse,[type="reset"].inverse,.button.inverse,[role="button"].inverse{--button-back-color:#3b4252;--button-fore-color:#eceff4}button.inverse:hover,button.inverse:focus,[type="button"].inverse:hover,[type="button"].inverse:focus,[type="submit"].inverse:hover,[type="submit"].inverse:focus,[type="reset"].inverse:hover,[type="reset"].inverse:focus,.button.inverse:hover,.button.inverse:focus,[role="button"].inverse:hover,[role="button"].inverse:focus{--button-hover-back-color:#2e3440}button.small,[type="button"].small,[type="submit"].small,[type="reset"].small,.button.small,[role="button"].small{padding:calc(0.5 * var(--universal-padding)) calc(0.75 * var(--universal-padding));margin:var(--universal-margin)}button.large,[type="button"].large,[type="submit"].large,[type="reset"].large,.button.large,[role="button"].large{padding:calc(1.5 * var(--universal-padding)) calc(2 * var(--universal-padding));margin:var(--universal-margin)}:root{--header-back-color:#eceff4;--header-hover-back-color:#e5e9f0;--header-fore-color:#3b4252;--header-border-color:#e5e9f0;--nav-back-color:#eceff4;--nav-hover-back-color:#e5e9f0;--nav-fore-color:#3b4252;--nav-border-color:#e5e9f0;--nav-link-color:#88c0d0;--footer-fore-color:#3b4252;--footer-back-color:#eceff4;--footer-border-color:#e5e9f0;--footer-link-color:#88c0d0;--drawer-back-color:#eceff4;--drawer-hover-back-color:#e5e9f0;--drawer-border-color:#e5e9f0;--drawer-close-color:#3b4252}header{height:3.1875rem;background:var(--header-back-color);color:var(--header-fore-color);border-bottom:.0625rem solid var(--header-border-color);padding:calc(var(--universal-padding) / 4) 0;white-space:nowrap;overflow-x:auto;overflow-y:hidden}header.row{box-sizing:content-box}header .logo{color:var(--header-fore-color);font-size:1.75rem;padding:var(--universal-padding) calc(2 * var(--universal-padding));text-decoration:none}header button,header [type="button"],header .button,header [role="button"]{box-sizing:border-box;position:relative;top:calc(0rem - var(--universal-padding) / 4);height:calc(3.1875rem + var(--universal-padding) / 2);background:var(--header-back-color);line-height:calc(3.1875rem - var(--universal-padding) * 1.5);text-align:center;color:var(--header-fore-color);border:0;border-radius:0;margin:0;text-transform:uppercase}header button:hover,header button:focus,header [type="button"]:hover,header [type="button"]:focus,header .button:hover,header .button:focus,header [role="button"]:hover,header [role="button"]:focus{background:var(--header-hover-back-color)}nav{background:var(--nav-back-color);color:var(--nav-fore-color);border:.0625rem solid var(--nav-border-color);border-radius:var(--universal-border-radius);margin:var(--universal-margin)}nav *{padding:var(--universal-padding) calc(1.5 * var(--universal-padding))}nav a,nav a:visited{display:block;color:var(--nav-link-color);border-radius:var(--universal-border-radius);transition:background 0.3s}nav a:hover,nav a:focus,nav a:visited:hover,nav a:visited:focus{text-decoration:none;background:var(--nav-hover-back-color)}nav .sublink-1{position:relative;margin-left:calc(2 * var(--universal-padding))}nav .sublink-1:before{position:absolute;left:calc(var(--universal-padding) - 1 * var(--universal-padding));top:-.0625rem;content:'';height:100%;border:.0625rem solid var(--nav-border-color);border-left:0}nav .sublink-2{position:relative;margin-left:calc(4 * var(--universal-padding))}nav .sublink-2:before{position:absolute;left:calc(var(--universal-padding) - 3 * var(--universal-padding));top:-.0625rem;content:'';height:100%;border:.0625rem solid var(--nav-border-color);border-left:0}footer{background:var(--footer-back-color);color:var(--footer-fore-color);border-top:.0625rem solid var(--footer-border-color);padding:calc(2 * var(--universal-padding)) var(--universal-padding);font-size:.875rem}footer a,footer a:visited{color:var(--footer-link-color)}header.sticky{position:-webkit-sticky;position:sticky;z-index:1101;top:0}footer.sticky{position:-webkit-sticky;position:sticky;z-index:1101;bottom:0}.drawer-toggle:before{display:inline-block;position:relative;vertical-align:bottom;content:'\00a0\2261\00a0';font-family:sans-serif;font-size:1.5em}@media screen and (min-width: 768px){.drawer-toggle:not(.persistent){display:none}}[type="checkbox"].drawer{height:1px;width:1px;margin:-1px;overflow:hidden;position:absolute;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%)}[type="checkbox"].drawer+*{display:block;box-sizing:border-box;position:fixed;top:0;width:320px;height:100vh;overflow-y:auto;background:var(--drawer-back-color);border:.0625rem solid var(--drawer-border-color);border-radius:0;margin:0;z-index:1110;right:-320px;transition:right 0.3s}[type="checkbox"].drawer+* .drawer-close{position:absolute;top:var(--universal-margin);right:var(--universal-margin);z-index:1111;width:2rem;height:2rem;border-radius:var(--universal-border-radius);padding:var(--universal-padding);margin:0;cursor:pointer;transition:background 0.3s}[type="checkbox"].drawer+* .drawer-close:before{display:block;content:'\00D7';color:var(--drawer-close-color);position:relative;font-family:sans-serif;font-size:2rem;line-height:1;text-align:center}[type="checkbox"].drawer+* .drawer-close:hover,[type="checkbox"].drawer+* .drawer-close:focus{background:var(--drawer-hover-back-color)}@media screen and (max-width: 320px){[type="checkbox"].drawer+*{width:100%}}[type="checkbox"].drawer:checked+*{right:0}@media screen and (min-width: 768px){[type="checkbox"].drawer:not(.persistent)+*{position:static;height:100%;z-index:1100}[type="checkbox"].drawer:not(.persistent)+* .drawer-close{display:none}}:root{--table-border-color:#d8dee9;--table-border-separator-color:#434c5e;--table-head-back-color:#e5e9f0;--table-head-fore-color:#2e3440;--table-body-back-color:#eceff4;--table-body-fore-color:#2e3440;--table-body-alt-back-color:#e5e9f0}table{border-collapse:separate;border-spacing:0;margin:0;display:flex;flex:0 1 auto;flex-flow:row wrap;padding:var(--universal-padding);padding-top:0}table caption{font-size:1.5rem;margin:calc(2 * var(--universal-margin)) 0;max-width:100%;flex:0 0 100%}table thead,table tbody{display:flex;flex-flow:row wrap;border:.0625rem solid var(--table-border-color)}table thead{z-index:999;border-radius:var(--universal-border-radius) var(--universal-border-radius) 0 0;border-bottom:.0625rem solid var(--table-border-separator-color)}table tbody{border-top:0;margin-top:calc(0 - var(--universal-margin));border-radius:0 0 var(--universal-border-radius) var(--universal-border-radius)}table tr{display:flex;padding:0}table th,table td{padding:calc(2 * var(--universal-padding))}table th{text-align:left;background:var(--table-head-back-color);color:var(--table-head-fore-color)}table td{background:var(--table-body-back-color);color:var(--table-body-fore-color);border-top:.0625rem solid var(--table-border-color)}table:not(.horizontal){overflow:auto;max-height:400px}table:not(.horizontal) thead,table:not(.horizontal) tbody{max-width:100%;flex:0 0 100%}table:not(.horizontal) tr{flex-flow:row wrap;flex:0 0 100%}table:not(.horizontal) th,table:not(.horizontal) td{flex:1 0 0%;overflow:hidden;text-overflow:ellipsis}table:not(.horizontal) thead{position:sticky;top:0}table:not(.horizontal) tbody tr:first-child td{border-top:0}table.horizontal{border:0}table.horizontal thead,table.horizontal tbody{border:0;flex-flow:row nowrap}table.horizontal tbody{overflow:auto;justify-content:space-between;flex:1 0 0;margin-left:calc( 4 * var(--universal-margin));padding-bottom:calc(var(--universal-padding) / 4)}table.horizontal tr{flex-direction:column;flex:1 0 auto}table.horizontal th,table.horizontal td{width:100%;border:0;border-bottom:.0625rem solid var(--table-border-color)}table.horizontal th:not(:first-child),table.horizontal td:not(:first-child){border-top:0}table.horizontal th{text-align:right;border-left:.0625rem solid var(--table-border-color);border-right:.0625rem solid var(--table-border-separator-color)}table.horizontal thead tr:first-child{padding-left:0}table.horizontal th:first-child,table.horizontal td:first-child{border-top:.0625rem solid var(--table-border-color)}table.horizontal tbody tr:last-child td{border-right:.0625rem solid var(--table-border-color)}table.horizontal tbody tr:last-child td:first-child{border-top-right-radius:0.25rem}table.horizontal tbody tr:last-child td:last-child{border-bottom-right-radius:0.25rem}table.horizontal thead tr:first-child th:first-child{border-top-left-radius:0.25rem}table.horizontal thead tr:first-child th:last-child{border-bottom-left-radius:0.25rem}@media screen and (max-width: 767px){table,table.horizontal{border-collapse:collapse;border:0;width:100%;display:table}table thead,table th,table.horizontal thead,table.horizontal th{border:0;height:1px;width:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%)}table tbody,table.horizontal tbody{border:0;display:table-row-group}table tr,table.horizontal tr{display:block;border:.0625rem solid var(--table-border-color);border-radius:var(--universal-border-radius);background:#fafafa;padding:var(--universal-padding);margin:var(--universal-margin);margin-bottom:calc(2 * var(--universal-margin))}table th,table td,table.horizontal th,table.horizontal td{width:auto}table td,table.horizontal td{display:block;border:0;text-align:right}table td:before,table.horizontal td:before{content:attr(data-label);float:left;font-weight:600}table th:first-child,table td:first-child,table.horizontal th:first-child,table.horizontal td:first-child{border-top:0}table tbody tr:last-child td,table.horizontal tbody tr:last-child td{border-right:0}}:root{--table-body-alt-back-color:#e5e9f0}table.striped tr:nth-of-type(2n)>td{background:var(--table-body-alt-back-color)}@media screen and (max-width: 768px){table.striped tr:nth-of-type(2n){background:var(--table-body-alt-back-color)}}:root{--table-body-hover-back-color:#88c0d0}table.hoverable tr:hover,table.hoverable tr:hover>td,table.hoverable tr:focus,table.hoverable tr:focus>td{background:var(--table-body-hover-back-color)}@media screen and (max-width: 768px){table.hoverable tr:hover,table.hoverable tr:hover>td,table.hoverable tr:focus,table.hoverable tr:focus>td{background:var(--table-body-hover-back-color)}}:root{--mark-back-color:#5e81ac;--mark-fore-color:#fafafa}mark{background:var(--mark-back-color);color:var(--mark-fore-color);font-size:.95em;line-height:1em;border-radius:var(--universal-border-radius);padding:calc(var(--universal-padding) / 4) calc(var(--universal-padding) / 2)}mark.inline-block{display:inline-block;font-size:1em;line-height:1.5;padding:calc(var(--universal-padding) / 2) var(--universal-padding)}:root{--toast-back-color:#2e3440;--toast-fore-color:#eceff4}.toast{position:fixed;bottom:calc(var(--universal-margin) * 3);left:50%;transform:translate(-50%, -50%);z-index:1111;color:var(--toast-fore-color);background:var(--toast-back-color);border-radius:calc(var(--universal-border-radius) * 16);padding:var(--universal-padding) calc(var(--universal-padding) * 3)}:root{--tooltip-back-color:#2e3440;--tooltip-fore-color:#eceff4}.tooltip{position:relative;display:inline-block}.tooltip:before,.tooltip:after{position:absolute;opacity:0;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%);transition:all 0.3s;z-index:1010;left:50%}.tooltip:not(.bottom):before,.tooltip:not(.bottom):after{bottom:75%}.tooltip.bottom:before,.tooltip.bottom:after{top:75%}.tooltip:hover:before,.tooltip:hover:after,.tooltip:focus:before,.tooltip:focus:after{opacity:1;clip:auto;-webkit-clip-path:inset(0%);clip-path:inset(0%)}.tooltip:before{content:'';background:transparent;border:var(--universal-margin) solid transparent;left:calc(50% - var(--universal-margin))}.tooltip:not(.bottom):before{border-top-color:#2e3440}.tooltip.bottom:before{border-bottom-color:#2e3440}.tooltip:after{content:attr(aria-label);color:var(--tooltip-fore-color);background:var(--tooltip-back-color);border-radius:var(--universal-border-radius);padding:var(--universal-padding);white-space:nowrap;transform:translateX(-50%)}.tooltip:not(.bottom):after{margin-bottom:calc(2 * var(--universal-margin))}.tooltip.bottom:after{margin-top:calc(2 * var(--universal-margin))}:root{--modal-overlay-color:rgba(0,0,0,0.45);--modal-close-color:#3b4252;--modal-close-hover-color:#e5e9f0}[type="checkbox"].modal{height:1px;width:1px;margin:-1px;overflow:hidden;position:absolute;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%)}[type="checkbox"].modal+div{position:fixed;top:0;left:0;display:none;width:100vw;height:100vh;background:var(--modal-overlay-color)}[type="checkbox"].modal+div .card{margin:0 auto;max-height:50vh;overflow:auto}[type="checkbox"].modal+div .card .modal-close{position:absolute;top:0;right:0;width:1.75rem;height:1.75rem;border-radius:var(--universal-border-radius);padding:var(--universal-padding);margin:0;cursor:pointer;transition:background 0.3s}[type="checkbox"].modal+div .card .modal-close:before{display:block;content:'\00D7';color:var(--modal-close-color);position:relative;font-family:sans-serif;font-size:1.75rem;line-height:1;text-align:center}[type="checkbox"].modal+div .card .modal-close:hover,[type="checkbox"].modal+div .card .modal-close:focus{background:var(--modal-close-hover-color)}[type="checkbox"].modal:checked+div{display:flex;flex:0 1 auto;z-index:1200}[type="checkbox"].modal:checked+div .card .modal-close{z-index:1211}:root{--collapse-label-back-color:#e5e9f0;--collapse-label-fore-color:#2e3440;--collapse-label-hover-back-color:#e5e9f0;--collapse-selected-label-back-color:#e5e9f0;--collapse-border-color:#e5e9f0;--collapse-content-back-color:#fafafa;--collapse-selected-label-border-color:#88c0d0}.collapse{width:calc(100% - 2 * var(--universal-margin));opacity:1;display:flex;flex-direction:column;margin:var(--universal-margin);border-radius:var(--universal-border-radius)}.collapse>[type="radio"],.collapse>[type="checkbox"]{height:1px;width:1px;margin:-1px;overflow:hidden;position:absolute;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%)}.collapse>label{flex-grow:1;display:inline-block;height:1.5rem;cursor:pointer;transition:background 0.3s;color:var(--collapse-label-fore-color);background:var(--collapse-label-back-color);border:.0625rem solid var(--collapse-border-color);padding:calc(1.5 * var(--universal-padding))}.collapse>label:hover,.collapse>label:focus{background:var(--collapse-label-hover-back-color)}.collapse>label+div{flex-basis:auto;height:1px;width:1px;margin:-1px;overflow:hidden;position:absolute;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%);transition:max-height 0.3s;max-height:1px}.collapse>:checked+label{background:var(--collapse-selected-label-back-color);border-bottom-color:var(--collapse-selected-label-border-color)}.collapse>:checked+label+div{box-sizing:border-box;position:relative;width:100%;height:auto;overflow:auto;margin:0;background:var(--collapse-content-back-color);border:.0625rem solid var(--collapse-border-color);border-top:0;padding:var(--universal-padding);clip:auto;-webkit-clip-path:inset(0%);clip-path:inset(0%);max-height:400px}.collapse>label:not(:first-of-type){border-top:0}.collapse>label:first-of-type{border-radius:var(--universal-border-radius) var(--universal-border-radius) 0 0}.collapse>label:last-of-type:not(:first-of-type){border-radius:0 0 var(--universal-border-radius) var(--universal-border-radius)}.collapse>label:last-of-type:first-of-type{border-radius:var(--universal-border-radius)}.collapse>:checked:last-of-type:not(:first-of-type)+label{border-radius:0}.collapse>:checked:last-of-type+label+div{border-radius:0 0 var(--universal-border-radius) var(--universal-border-radius)}mark.secondary{--mark-back-color:#bf616a}mark.tertiary{--mark-back-color:#a3be8c}mark.tag{padding:calc(var(--universal-padding)/2) var(--universal-padding);border-radius:1em}:root{--progress-back-color:#e5e9f0;--progress-fore-color:#434c5e}progress{display:block;vertical-align:baseline;-webkit-appearance:none;-moz-appearance:none;appearance:none;height:.75rem;width:calc(100% - 2 * var(--universal-margin));margin:var(--universal-margin);border:0;border-radius:calc(2 * var(--universal-border-radius));background:var(--progress-back-color);color:var(--progress-fore-color)}progress::-webkit-progress-value{background:var(--progress-fore-color);border-top-left-radius:calc(2 * var(--universal-border-radius));border-bottom-left-radius:calc(2 * var(--universal-border-radius))}progress::-webkit-progress-bar{background:var(#e5e9f0)}progress::-moz-progress-bar{background:var(--progress-fore-color);border-top-left-radius:calc(2 * var(--universal-border-radius));border-bottom-left-radius:calc(2 * var(--universal-border-radius))}progress[value="1000"]::-webkit-progress-value{border-radius:calc(2 * var(--universal-border-radius))}progress[value="1000"]::-moz-progress-bar{border-radius:calc(2 * var(--universal-border-radius))}progress.inline{display:inline-block;vertical-align:middle;width:60%}:root{--spinner-back-color:#d8dee9;--spinner-fore-color:#434c5e}@keyframes spinner-donut-anim{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.spinner{display:inline-block;margin:var(--universal-margin);border:.25rem solid var(--spinner-back-color);border-left:.25rem solid var(--spinner-fore-color);border-radius:50%;width:1.25rem;height:1.25rem;animation:spinner-donut-anim 1.2s linear infinite}progress.primary{--progress-fore-color:#5e81ac}progress.secondary{--progress-fore-color:#bf616a}progress.tertiary{--progress-fore-color:#a3be8c}.spinner.primary{--spinner-fore-color:#5e81ac}.spinner.secondary{--spinner-fore-color:#bf616a}.spinner.tertiary{--spinner-fore-color:#a3be8c}span[class^='icon-']{display:inline-block;height:1em;width:1em;vertical-align:-0.125em;background-size:contain;margin:0 calc(var(--universal-margin) / 4)}span[class^='icon-'].secondary{-webkit-filter:invert(25%);filter:invert(25%)}span[class^='icon-'].inverse{-webkit-filter:invert(100%);filter:invert(100%)}span.icon-alert{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%232e3440' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12' y2='16'%3E%3C/line%3E%3C/svg%3E")}span.icon-bookmark{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%232e3440' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z'%3E%3C/path%3E%3C/svg%3E")}span.icon-calendar{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%232e3440' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E")}span.icon-credit{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%232e3440' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='1' y='4' width='22' height='16' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='1' y1='10' x2='23' y2='10'%3E%3C/line%3E%3C/svg%3E")}span.icon-edit{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%232e3440' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 14.66V20a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h5.34'%3E%3C/path%3E%3Cpolygon points='18 2 22 6 12 16 8 16 8 12 18 2'%3E%3C/polygon%3E%3C/svg%3E")}span.icon-link{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%232e3440' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'%3E%3C/path%3E%3Cpolyline points='15 3 21 3 21 9'%3E%3C/polyline%3E%3Cline x1='10' y1='14' x2='21' y2='3'%3E%3C/line%3E%3C/svg%3E")}span.icon-help{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%232e3440' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3'%3E%3C/path%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='17' x2='12' y2='17'%3E%3C/line%3E%3C/svg%3E")}span.icon-home{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%232e3440' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'%3E%3C/path%3E%3Cpolyline points='9 22 9 12 15 12 15 22'%3E%3C/polyline%3E%3C/svg%3E")}span.icon-info{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%232e3440' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='16' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='8' x2='12' y2='8'%3E%3C/line%3E%3C/svg%3E")}span.icon-lock{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%232e3440' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2' ry='2'%3E%3C/rect%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'%3E%3C/path%3E%3C/svg%3E")}span.icon-mail{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%232e3440' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z'%3E%3C/path%3E%3Cpolyline points='22,6 12,13 2,6'%3E%3C/polyline%3E%3C/svg%3E")}span.icon-location{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%232e3440' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'%3E%3C/path%3E%3Ccircle cx='12' cy='10' r='3'%3E%3C/circle%3E%3C/svg%3E")}span.icon-phone{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%232e3440' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'%3E%3C/path%3E%3C/svg%3E")}span.icon-rss{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%232e3440' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 11a9 9 0 0 1 9 9'%3E%3C/path%3E%3Cpath d='M4 4a16 16 0 0 1 16 16'%3E%3C/path%3E%3Ccircle cx='5' cy='19' r='1'%3E%3C/circle%3E%3C/svg%3E")}span.icon-search{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%232e3440' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E")}span.icon-settings{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%232e3440' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'%3E%3C/circle%3E%3Cpath d='M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z'%3E%3C/path%3E%3C/svg%3E")}span.icon-share{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%232e3440' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='18' cy='5' r='3'%3E%3C/circle%3E%3Ccircle cx='6' cy='12' r='3'%3E%3C/circle%3E%3Ccircle cx='18' cy='19' r='3'%3E%3C/circle%3E%3Cline x1='8.59' y1='13.51' x2='15.42' y2='17.49'%3E%3C/line%3E%3Cline x1='15.41' y1='6.51' x2='8.59' y2='10.49'%3E%3C/line%3E%3C/svg%3E")}span.icon-cart{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%232e3440' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1'%3E%3C/circle%3E%3Ccircle cx='20' cy='21' r='1'%3E%3C/circle%3E%3Cpath d='M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6'%3E%3C/path%3E%3C/svg%3E")}span.icon-upload{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%232e3440' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'%3E%3C/path%3E%3Cpolyline points='17 8 12 3 7 8'%3E%3C/polyline%3E%3Cline x1='12' y1='3' x2='12' y2='15'%3E%3C/line%3E%3C/svg%3E")}span.icon-user{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%232e3440' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'%3E%3C/path%3E%3Ccircle cx='12' cy='7' r='4'%3E%3C/circle%3E%3C/svg%3E")}:root{--generic-border-color:rgba(0,0,0,0.3);--generic-box-shadow:0 .25rem .25rem 0 rgba(0,0,0,0.125),0 .125rem .125rem -.125rem rgba(0,0,0,0.125)}.hidden{display:none !important}.visually-hidden{position:absolute !important;width:1px !important;height:1px !important;margin:-1px !important;border:0 !important;padding:0 !important;clip:rect(0 0 0 0) !important;-webkit-clip-path:inset(100%) !important;clip-path:inset(100%) !important;overflow:hidden !important}.bordered{border:.0625rem solid var(--generic-border-color) !important}.rounded{border-radius:var(--universal-border-radius) !important}.circular{border-radius:50% !important}.shadowed{box-shadow:var(--generic-box-shadow) !important}.responsive-margin{margin:calc(var(--universal-margin) / 4) !important}@media screen and (min-width: 768px){.responsive-margin{margin:calc(var(--universal-margin) / 2) !important}}@media screen and (min-width: 1280px){.responsive-margin{margin:var(--universal-margin) !important}}.responsive-padding{padding:calc(var(--universal-padding) / 4) !important}@media screen and (min-width: 768px){.responsive-padding{padding:calc(var(--universal-padding) / 2) !important}}@media screen and (min-width: 1280px){.responsive-padding{padding:var(--universal-padding) !important}}@media screen and (max-width: 767px){.hidden-sm{display:none !important}}@media screen and (min-width: 768px) and (max-width: 1279px){.hidden-md{display:none !important}}@media screen and (min-width: 1280px){.hidden-lg{display:none !important}}@media screen and (max-width: 767px){.visually-hidden-sm{position:absolute !important;width:1px !important;height:1px !important;margin:-1px !important;border:0 !important;padding:0 !important;clip:rect(0 0 0 0) !important;-webkit-clip-path:inset(100%) !important;clip-path:inset(100%) !important;overflow:hidden !important}}@media screen and (min-width: 768px) and (max-width: 1279px){.visually-hidden-md{position:absolute !important;width:1px !important;height:1px !important;margin:-1px !important;border:0 !important;padding:0 !important;clip:rect(0 0 0 0) !important;-webkit-clip-path:inset(100%) !important;clip-path:inset(100%) !important;overflow:hidden !important}}@media screen and (min-width: 1280px){.visually-hidden-lg{position:absolute !important;width:1px !important;height:1px !important;margin:-1px !important;border:0 !important;padding:0 !important;clip:rect(0 0 0 0) !important;-webkit-clip-path:inset(100%) !important;clip-path:inset(100%) !important;overflow:hidden !important}}
diff --git a/docs/v3/flavors/mini-nord.scss b/docs/v3/flavors/mini-nord.scss
new file mode 100644
index 0000000..3019ba8
--- /dev/null
+++ b/docs/v3/flavors/mini-nord.scss
@@ -0,0 +1,277 @@
+//  This is a flavor file. Duplicate it and edit it to create your own flavor. Read instructions carefully.
+//  Single-line comments, starting with '//' will not be included in your final CSS file. Multiline comments,
+//  structured like the flavor description below, will be included in your final CSS file.
+/*
+  Flavor name: Nord (mini-nord)
+  Author: tphecca (https://github.com/tphecca)
+  Maintainers: tphecca
+  mini.css version: v3.0.0
+*/
+//  This flavor is based on the Nord color palette: https://github.com/arcticicestudio/nord
+$base-root-font-size: 16px; // Root font sizing for all elements (`px` only)
+$base-line-height: 1.5; // Line height for most elements
+$fore-color: #2e3440; // Text & foreground color
+$secondary-fore-color: #3b4252; // Secondary text & foreground color
+$back-color: #eceff4; // Background color
+$secondary-back-color: #e5e9f0; // Secondary background color
+$blockquote-color: #d08770; // 
 sidebar and quotation color
+$pre-color: #b48ead; // 
 sidebar color
+$border-color: #d8dee9; // Border color
+$secondary-border-color: #e5e9f0; // Secondary border color
+$heading-line-height: 1.2; // Line height for headings
+$heading-ratio: 1.19; // Ratio for headings (strictly unitless)
+$subheading-font-size:0.75em; // Font sizing for  elements in headings
+$subheading-top-margin: -0.25rem; // Top margin of  elements in headings
+$heading-font-weight: 500; // Font weight for headings
+$horizontal-rule-line-height:  1.25em; // 
 line height
+$universal-margin: 0.5rem; // Universal margin for the most elements
+$universal-padding: 0.5rem; // Universal padding for the most elements
+$universal-border-radius: 0.125rem; // Universal border-radius for most elements
+$universal-box-shadow: none; // Universal box-shadow for most elements
+$small-element-font-size: 0.75em; // Font size for , , 
+$small-font-size: 0.75em; // Font sizing for  elements
+$blockquote-quotation-size: 3rem;   // Font size for the quotation of 

+$blockquote-cite-size: 0.75em; // Font size for the [cite] of 

+$code-font-size: 0.85em; // Font size for , 
+$sup-top: -0.5em; //  top
+$sub-bottom: -0.25em; //  bottom
+$a-link-color: #88c0d0; // Color for :link
+$a-visited-color: #5e81ac; // Color for :visited
+$bold-font-weight: 700; // Font weight for  and 
+$mobile-breakpoint: 768px; // Breakpoint between small and medium screens (px)
+$large-screen-breakpoint: 1280px; // Breakpoint between medium and large screens (px)
+
+@import '../mini/core';
+
+$grid-column-count: 12; // Number of columns in the grid (integer value only).
+$grid-medium-breakpoint: $mobile-breakpoint; // Medium screen breakpoint for grid.
+$grid-large-breakpoint: $large-screen-breakpoint; // Large screen breakpoint for grid.
+$card-normal-width: 320px; // Width for normal cards.
+$card-section-media-height: 200px; // Height for cards' media sections.
+$card-fore-color: #2e3440; // Text color for the cards.
+$card-back-color: #eceff4; // Background color for the cards.
+$card-border-color: #e5e9f0; // Border color for the cards.
+
+@import '../mini/layout';
+
+/*
+	 Custom elements for card elements.
+*/
+$card-small-name: 'small'; // Class name for small cards.
+$card-small-width: 240px; // Width for small cards.
+@include make-card-alt-size ($card-small-name, $card-small-width);
+
+$card-large-name: 'large'; // Class name for large cards.
+$card-large-width: 480px; // Width for large cards.
+@include make-card-alt-size ($card-large-name, $card-large-width);
+
+$card-fluid-name: 'fluid'; // Class name for fluid cards.
+$card-fluid-width: 100%; // Width for fluid cards.
+@include make-card-alt-size ($card-fluid-name, $card-fluid-width);
+
+$card-warning-name: 'warning'; // Class name for card warnging color variant.
+$card-warning-back-color: #ebcb8b; // Background color for card warnging color variant.
+$card-warning-fore-color: #2e3440; // Text color for card warnging color variant.
+$card-warning-border-color: #d08770; // Border style for card warnging color variant.
+@include make-card-alt-color ($card-warning-name, $card-warning-back-color, $card-warning-fore-color, $card-warning-border-color);
+
+$card-error-name: 'error'; // Class name for card error color variant.
+$card-error-back-color: #bf616a; // Background color for card error color variant.
+$card-error-fore-color: #2e3440; // Text color for card error color variant.
+$card-error-border-color: #434c5e; // Border style for card error color variant.
+@include make-card-alt-color ($card-error-name, $card-error-back-color, $card-error-fore-color, $card-error-border-color);
+
+$card-section-dark-name: 'dark'; // Class name for card dark section variant.
+$card-section-dark-back-color: #d8dee9; // Background color for card dark section variant.
+$card-section-dark-fore-color: #2e3440; // Text color for card dark section variant.
+@include make-card-section-alt-color ($card-section-dark-name, $card-section-dark-back-color, $card-section-dark-fore-color);
+
+$card-section-double-padded-name: 'double-padded'; // Class name for card double-padded section variant.
+$card-section-double-padded-padding: calc(1.5 * var(#{$universal-padding-var}));  // Padding for card sectiondouble-padded section variant.
+@include make-card-section-alt-style ($card-section-double-padded-name, $card-section-double-padded-padding);
+
+$input-group-mobile-breakpoint: $mobile-breakpoint - 1px; // Breakpoint for fluid input group mobile view.
+$form-back-color: #e5e9f0; // Background color for forms.
+$form-fore-color: #2e3440; // Text color for forms.
+$form-border-color: #e5e9f0; // Border color for forms.
+$input-back-color: #eceff4; // Background color for input elements.
+$input-fore-color: #2e3440; // Text color for input elements.
+$input-border-color: #e5e9f0; // Border color for input elements.
+$input-focus-color: #88c0d0; // Border color for focused input elements.
+$input-invalid-color: #bf616a; // Border color for invalid input elements.
+$button-back-color: #e5e9f0; // Background color for buttons.
+$button-hover-back-color: #d8dee9; // Background color for buttons (hover).
+$button-fore-color: #2e3440; // Text color for buttons.
+$button-border-color: transparent; // Border color for buttons.
+$button-hover-border-color: transparent; // Border color for buttons (hover).
+$button-group-border-color: rgba(124,124,124,0.54); // Border color for button groups.
+
+@import '../mini/input_control';
+
+/*
+	 Custom elements for forms and input elements.
+*/
+$button-primary-name: 'primary'; // Class name for primary button color variant.
+$button-primary-back-color: #5e81ac;// Background color for primary button color variant.
+$button-primary-hover-back-color: #5e81ac;// Background color for primary button color variant (hover).
+$button-primary-fore-color: #eceff4;// Text color for primary button color variant.
+@include make-button-alt-color ($button-primary-name, $button-primary-back-color, $button-primary-hover-back-color, $button-primary-fore-color);
+
+$button-secondary-name: 'secondary'; // Class name for secondary button color variant.
+$button-secondary-back-color: #bf616a;// Background color for secondary button color variant.
+$button-secondary-hover-back-color: #bf616a;// Background color for secondary button color variant (hover).
+$button-secondary-fore-color: #eceff4;// Text color for secondary button color variant.
+@include make-button-alt-color ($button-secondary-name, $button-secondary-back-color, $button-secondary-hover-back-color, $button-secondary-fore-color);
+
+$button-tertiary-name: 'tertiary'; // Class name for tertiary button color variant.
+$button-tertiary-back-color: #a3be8c;// Background color for tertiary button color variant.
+$button-tertiary-hover-back-color: #a3be8c;// Background color for tertiary button color variant (hover).
+$button-tertiary-fore-color: #434c5e;// Text color for tertiary button color variant.
+@include make-button-alt-color ($button-tertiary-name, $button-tertiary-back-color, $button-tertiary-hover-back-color, $button-tertiary-fore-color);
+
+$button-inverse-name: 'inverse'; // Class name for inverse button color variant.
+$button-inverse-back-color: #3b4252;// Background color for inverse button color variant.
+$button-inverse-hover-back-color: #2e3440;// Background color for inverse button color variant (hover).
+$button-inverse-fore-color: #eceff4;// Text color for inverse button color variant.
+@include make-button-alt-color ($button-inverse-name, $button-inverse-back-color, $button-inverse-hover-back-color, $button-inverse-fore-color);
+
+$button-small-name: 'small'; // Class name, padding and margin for small button size variant.
+$button-small-padding: calc(0.5 * var(#{$universal-padding-var})) calc(0.75 * var(#{$universal-padding-var}));
+$button-small-margin:  var(#{$universal-margin-var});
+@include make-button-alt-size ($button-small-name, $button-small-padding, $button-small-margin);
+
+$button-large-name: 'large'; // Class name, padding and margin for large button size variant.
+$button-large-padding: calc(1.5 * var(#{$universal-padding-var})) calc(2 * var(#{$universal-padding-var}));
+$button-large-margin:  var(#{$universal-margin-var});
+@include make-button-alt-size ($button-large-name, $button-large-padding, $button-large-margin);
+
+$header-height: 3.1875rem; // Height of the header element.
+$header-back-color: #eceff4; // Background color for the header element.
+$header-hover-back-color: #e5e9f0; // Background color for the header element (hover).
+$header-fore-color: #3b4252; // Text color for the header element.
+$header-border-color: #e5e9f0; // Border color for the header element.
+$nav-back-color: #eceff4; // Background color for the nav element.
+$nav-hover-back-color: #e5e9f0; // Background color for the nav element (hover).
+$nav-fore-color: #3b4252; // Text color for the nav element.
+$nav-border-color: #e5e9f0; // Border color for the nav element.
+$nav-link-color: #88c0d0; // Color for link in the nav element.
+$footer-fore-color: #3b4252; // Text color for the footer element.
+$footer-back-color: #eceff4; // Background color for footer nav element.
+$footer-border-color: #e5e9f0; // Border color for the footer element.
+$footer-link-color: #88c0d0; // Color for link in the footer element.
+$drawer-back-color: #eceff4; // Background color for the drawer component.
+$drawer-border-color: #e5e9f0; // Border color for the drawer component.
+$drawer-hover-back-color: #e5e9f0; // Background color for the drawer component's close (hover).
+$drawer-close-color: #3b4252; // Color of the close element for the drawer component.
+$header-logo-font-size: 1.75rem; // Font size for the header logo element.
+$nav-sublink-depth: 2; // Amount of subcategory classes to add.
+$footer-font-size: 0.875rem; // Font size for text in footer element.
+$drawer-toggle-font-size: 1.5em; // Font size for the drawer component's toggle. (prefer em units)
+$drawer-width: 320px; // Width of the drawer component.
+$drawer-close-size: 2rem; // Size of the close element for the drawer component.
+$drawer-mobile-breakpoint: $mobile-breakpoint; // Mobile breakpoint for the drawer component.
+
+@import '../mini/navigation';
+
+$table-mobile-breakpoint: $mobile-breakpoint; // Breakpoint for  mobile view.
+$table-max-height: 400px; // Maximum height of 
 elements (non-horizontal).
+$table-caption-font-size: 1.5rem; // Font size for 
 elements.
+$table-mobile-card-label: 'data-label'; // Attribute used to replace column headers in mobile view.
+$table-mobile-label-font-weight: 600; // Font weight for column header labels in mobile view.
+$table-border-color: #d8dee9; // Border color for  elements.
+$table-border-separator-color: #434c5e; // Border color for the border between  and .
+$table-th-back-color:  #e5e9f0; // Background color for 
 elements.
+$table-th-fore-color: #2e3440; // Text color for  elements.
+$table-td-back-color: #eceff4; // Background color for  elements.
+$table-td-fore-color: #2e3440; // Text color for  elements.
+$table-td-alt-back-color: #e5e9f0; // Alternative background color for  elements in striped tables.
+$table-td-hover-back-color: #88c0d0; // Hover background color for  elements in hoverable tables.
+
+@import '../mini/table';
+
+$mark-back-color: #5e81ac; // Background color for 
+$mark-fore-color: #fafafa; // Text color for 
+$mark-font-size: 0.95em; // Font size for 
+$mark-line-height: 1em; // Line height for 
+$toast-back-color: #2e3440; // Background color for toast component
+$toast-fore-color: #eceff4; // Text color for toast component
+$tooltip-back-color: #2e3440; // Background color for tooltip component
+$tooltip-fore-color: #eceff4; // Text color for tooltip component
+$modal-overlay-color: rgba(0,0,0,0.45); // Overlay color for modal dialog component
+$modal-close-color: #3b4252; // Text color for the close button of the modal dialog component
+$modal-close-hover-back-color: #e5e9f0; // Background color for the close button of the modal dialog component (on hover/focus)
+$modal-close-size: 1.75rem; // Font size for the close button of the modal dialog component
+$collapse-label-height: 1.5rem; // Height for the labels in the collapse component
+$collapse-content-max-height: 400px; // Max height for the content panes in the collapse component
+$collapse-label-back-color: #e5e9f0; // Background color for labels in the collapse component
+$collapse-label-fore-color: #2e3440; // Text color for labels in the collapse component
+$collapse-label-hover-back-color: #e5e9f0; // Background color for labels in the collapse component (hover)
+$collapse-selected-label-back-color: #e5e9f0; // Background color for selected labels in the collapse component
+$collapse-border-color: #e5e9f0; // Border color for collapse component
+$collapse-selected-label-border-color: #88c0d0; // Border color for collapse component's selected labels
+$collapse-content-back-color: #fafafa; // Background color for collapse component's content panes
+
+@import '../mini/contextual';
+
+/*
+	 Custom elements for contextual background elements, toasts and tooltips.
+*/
+$mark-secondary-name: 'secondary'; // Class name for secondary  color variant.
+$mark-secondary-back-color: #bf616a; // Background color for secondary  color variant.
+@include make-mark-alt-color ($mark-secondary-name, $mark-secondary-back-color);
+
+$mark-tertiary-name: 'tertiary';  // Class name for tertiary  color variant.
+$mark-tertiary-back-color: #a3be8c; // Background color for tertiary  color variant.
+@include make-mark-alt-color ($mark-tertiary-name, $mark-tertiary-back-color);
+
+$mark-tag-name: 'tag'; // Class name, padding and border radius for tag  size variant.
+$mark-tag-padding: calc(var(#{$universal-padding-var})/2) var(#{$universal-padding-var});
+$mark-tag-border-radius: 1em;
+@include make-mark-alt-size ($mark-tag-name, $mark-tag-padding, $mark-tag-border-radius);
+
+$progress-back-color: #e5e9f0; // Background color of .
+$progress-fore-color: #434c5e; // Foreground color of .
+$progress-height: 0.75rem; // Height of .
+$progress-max-value: 1000; // Arithmetic max value of  - use integer values.
+$progress-inline-width: 60%; // Width of inline  elements.
+$spinner-donut-size: 1.25rem; // Size of the spinner donuts
+$spinner-donut-border-thickness: 0.25rem; // Border thickness for spinner donuts
+$spinner-donut-back-color: #d8dee9; // Background color for spinner donuts
+$spinner-donut-fore-color: #434c5e; // Foreground color for spinner donuts
+
+@import '../mini/progress';
+
+/*
+	 Custom elements for progress bars and spinners.
+*/
+$progress-primary-name:         'primary';   // Class name for primary  color variant.
+$progress-primary-fore-color:   #5e81ac;     // Foreground color for primary  color variant.
+@include make-progress-alt-color ($progress-primary-name, $progress-primary-fore-color);
+
+$progress-secondary-name:     'secondary';   // Class name for secondary  color variant.
+$progress-secondary-fore-color: #bf616a;     // Foreground color for secondary  color variant.
+@include make-progress-alt-color ($progress-secondary-name, $progress-secondary-fore-color);
+
+$progress-tertiary-name:       'tertiary';   // Class name for tertiary  color variant.
+$progress-tertiary-fore-color:   #a3be8c;    // Foreground color for tertiary  color variant.
+@include make-progress-alt-color ($progress-tertiary-name, $progress-tertiary-fore-color);
+
+$spinner-donut-primary-name:         'primary';   // Class name for primary spinner donut color variant.
+$spinner-donut-primary-fore-color:   #5e81ac;     // Foreground color for primary spinner donut color variant.
+@include make-spinner-donut-alt-color ($spinner-donut-primary-name, $spinner-donut-primary-fore-color);
+
+$spinner-donut-secondary-name:     'secondary';   // Class name for secondary spinner donut color variant.
+$spinner-donut-secondary-fore-color: #bf616a;     // Foreground color for secondary spinner donut color variant.
+@include make-spinner-donut-alt-color ($spinner-donut-secondary-name, $spinner-donut-secondary-fore-color);
+
+$spinner-donut-tertiary-name:       'tertiary';   // Class name for tertiary spinner donut color variant.
+$spinner-donut-tertiary-fore-color:   #a3be8c;    // Foreground color for tertiary spinner donut color variant.
+@include make-spinner-donut-alt-color ($spinner-donut-tertiary-name, $spinner-donut-tertiary-fore-color);
+
+
+@import '../mini/icon';
+
+$box-shadow-generic: 0 4*$__1px 4*$__1px 0 rgba(0,0,0,0.125),  0 2*$__1px 2*$__1px -2*$__1px rgba(0,0,0,0.125);
+$border-generic-color: rgba(0,0,0,0.3); // Border color for bordered elements.
+
+@import '../mini/utility';
diff --git a/docs/v3/index.html b/docs/v3/index.html
index c12c5e8..5d20758 100644
--- a/docs/v3/index.html
+++ b/docs/v3/index.html
@@ -19,7 +19,7 @@
     

     
mini.css

     
minimal, responsive, style-agnostic 
CSS framework

-    
v3.0.0-alpha.3

+    
v3.0.0

     Get started
   
   

diff --git a/docs/v3/mini.zip b/docs/v3/mini.zip
deleted file mode 100644
index 230230229bb8e0f4c24a37d5a7b2e1e2530078a2..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 25971
zcmZsiQ?Mw_maUifvTa*?*|u%lwr$(CZQHhO+w1;)x^Krh5nT^el@*zhQ8Dvjj5)t4
zCkYG!3GiQ+oN9;Ezh3_52Kvv_+T6yRPVS#6$o~w$0n)7brF^5Ruo<8M04TTs08sw_
z6kS7G8z*BoCue;tT1P`i$8HU4Tda13AKboQf3#io1j})%TyOJYQrB*%2&xSo{}MpR
zB7OmLipV<)3ToAqtiIoF!5fG7o=%5=L?BT@(;R|OIMWaouT4ektcr?4wG?V_CFeS5ji_MuIA06
z5s+rI+ZQX#-9q;UE>ZC+T3zCcp{lclz-zZdirFd=G*Rj5TojOskxj2!i~)<)^m6n3
zuOQkt)cF?Un8P76wi5{l;U-vzuYuqap_G0zwRWSRk^FvYC3fuOLj8?L*y>H`={+qnBO=I
zr*QH(h!_|bogWQL@0TLd;o-1?BtFnbL))^a<4C&~m)mQG)dqdf6?<6Sd>-9Tr`KWV
z#7&L$FN%-Z0==kay9b9B5r)c7+FpwoF@p#Xg5hB*u8KEsuetP%@!t1K-J>)qiD+ge
z=DZxOb+LI!{E+W#m_(&2e3L8Ms67+5^j^lW9#}KmmU24_n331h^w^WDq>_kxo8}}G
zySZj6!;4Nk_eUflZ={!+XNX+*lnh|d=R*=%5b+N?LswS^$A39mg5UW29S_3Iod
zk~htE{J=qu+j>_AkONXt5OqzkRxC7B=^)(>
zuE7~*cV|9IuoEE$c8s)nnnwXZJk|;|C4T0@pTxSMw|P7ea^KKiTh8ao4oYj66)xr?
z`3T08E@Uy?DgmsFDJ{Ji(KBogDeu05*S&J~N7u8rk7D~CqffTh3mCPlc>X#Ylr!ob
zv($>NG){1#p&uA5Nkn&db6hxXI@vD#m~%~1E=LF|nCXIfMH4XyxOLU-#N)Z4P+)J&2C|H%tZjKw*6Emy6jDCCRdRYrHX+
ze92BY9E@jzFX|ind!eaP&Q#gOM4rqh5(`MomHjyVA!(6|wb*&2smPg8O!dY~8v*YA
zfk3feWK3pGvy7@zd`u)OxoFH@yoem(5!GRt{Mq_VYRUo~<5>(=!Kd~3sSld{P-LUM
zAZ1&H@XjWuIBa-n#2{!q{GDOUW(@|1c@wpQ4MwWG9oYU0-@=A~^DXXUeLSM*8MZfX
zMKeP~KyascPi1c^=nQ+5F=Hi<3H(He;aM-=L9N0kh$ksYC`QIWrA;HSid~BYH$1p@
z@A`uYNQCq}qJ;^^xBgK>UA9)Yn1x%NYnq2dUPUi!-O^@gp|6kiF7ghhCM*iv<%**!>JCRO>ahKj-MNGw;rzgQmR@(_mbGlLSN9^)+pi;V7ugrrot
z3uXZ=cC7?wO9bRQ$yJ%D-D>8L+#G^6U?Du3pwV7q{F4ks(SIb$1|Bz~$g@6Lj6%Qy
z!8W5V6FxPy{Gx7B2|PkJ7Ll&>GQghogL)C_DNsQ-9pyl023j-%pvz@``);M~JS8Kp
z`b%n}F8g$uY+89eAp2ttYNizV^6R5gt@B&SN=vh3!IKxx6#4PGIvBR$f66@Z879Vd@`#p
zV^y^Q$q>eo=V!k0~>k$_$>5k7H4sM
zO1Fl3pnGPdST^!+qsKZY(sxdPJgz>x0y;Z3#YCoBbwjqS%rHLvQCsn3&R=`4kog$j
znxXvgRP2n1-f5z=B_99oF}KPBtG;YGL&Xn6f}5EWO0x2J+Sm=(7Qi?90ofmEvZ4(u
zbPOSdt*tt~t?G@xWxJ=WkY9^#uInFde4a-lgyJS(cWm{W&v}A8BPwfiR*oT?clfx!u
z4WW##5l}D~?@*a<*UjL_E;v9xjM_PA>;P*5!JVeN-{>-YYzA4BpVE5%D`z!nC!xT4
zz;xL*F_sUAqB}&Jv*D?bdtZ}KL<9S@(E+yM#BrM@K>xRbEL%rL31`3QjLY)n0Xaf)
z$`F6&86-kdh@a3M$$13;|=#=cl
zSiVpnp;-p1Auf~j0bsQ==TT-gznYXMMv-y?3S&zTy)(K(TuI56S#^?!`|=C7HH?t3
zOCdNL9oX~dXTWN4IH%=g)zu%8PVG>*vTMa-pGs?{*##>n&T5G-VH*RU>
zULf%OiAV?NN&MF(!{rLwQO-q)b7qph6b?_1=5i7pZE$O#p3$*cmyGqSt1xV#!&Z=(=1{cJHA<--*FbDqD0z3%4BRiK~~3Ev+^8r7wop4%BAc
zb2rh|DbvdKlcX0*bL)uEcGZMRY%t8<{^6$_#2WI)d`3LD-m7E83NHs1a9k_f$77bt~(tht--3pX0onO
zk%nM2if>#{Ewj@rvwe^)2S{96FSJ0e7FQx^s1cfnQ&eROI|3y)yHw?k@EOMmq9Sgw
zCXLF_urIrpQj=BdL(1NCEmtIP37IkZ?02FP`}ev$Y8ljgMJF?fE_unM@^nRQ?>rQ^iFSn2|+g2C|Pytf1RZWQ=z_}jQeC8p1~(Htgv|64>n6dI)YYgF62IY2+rCz@r<;sA*XLx_c_n<>*_;g9%w?X?fo~g4kZ~3eUp-xmj
zIdlx^M0|m}Fy5qS9aO8Hx2S=I#jL}3aq+iw_~+&XtZ!04E2WD(e~%=Uq>efyE*blX
z0j)9M`0;q>WaQ@OWaMPzho{T;^Bxr5`OY!D){
zz?dE-14hy~o)^#)2Jdw39{*HnmBcZ`5+2AeO1OU*V0fZc$Szvn0@C4Pj)2r|a9BBjPC6Cp29c5;U3E{?#MVRggeYma#?V
z?#TNxh|Ars_ii~@9n@g}-4%{`ttxeNMUptKZ^(-${sdG?L68BYF8ouZe2PF;gKz>Z
zSsl*YxtkoVjX=J@G19V8e?7(SK6ZyODfVJ`wr*B
zm7klhpuyY_q#c38y5N;t?1$6xcKqBex6y>$(4<~}gnELy9Y7(E#;D;AB`K%`K6uFP
z13qFoIX1ap^}X9w@(p)y!d)8u8#FNJph!KD$~aN{aFrSu&QkT@pdj5!`aVEABD0X>
zJ4qH#Auo=ekasvXmGEVswY2C{DcnK?>dXFslF(_ds(_1gD>FAoj0kSqDa|Cs2FnQn
zmC{VUs1zxoWuK#{Ym9hI4z4iIU00nP7J)Fr;{b5;F#2Q0Ve!Eo#dPpS#NivNX9(?5
zRwMd$JD&PscVK6*a9B*AkqnY#k3B8hUN1b%!j2ri&#og#%SY;QUU%JROl-S2#8k#_@*c-aR#%8o2t#
zG+beK;Q-a|pFw?=e8DmH+v9pv4%5HatnHjm)AoO^HWned4o&tepn;gH=}Uj9+VC&?b9Pu8L8pMGNK8=7GAOz$D2R+G2xp4?6?6
z;bfIdJYo=t8rCVq$s>;7hy{~Tl{aY8&=+skDTJpZ6~#8wToTO^K{RQ2&Na3daBQ*5
z^_A-NkJn@pWQcpG`EeJ*K{2|$Zd3>QG^Ae8eUa%RJ~2DFPw
zFga`qZeT{o#`uEU`j@va4<9VAW4H_p4-6y;j-X~`JQ7Qe@k_pq)w&^&xY2~G6??Iy
z7sL*YJBg12Y*!!UW~Wf|)#Z4!0#|l7a7|LI=|CSn$+w{|U03aP7ppaUO4eJvDx+J+
zxf|zgb0X9F_NX`y<<_#b)DTv>nHxqL9QS*Z-}I{%uxU%{f(Y4@Yn|9^-(FTr)<^Wx
zF4OuA>MB+N*hT-e`=eP^KYIyN{MV^#}j`&akeo|pt4!S1PM~k-yr94tnj6)fZ%BECIG5c*#&c!xE5RlQq9@9+0cv276=Ri%imZ<6E8C
zf3pje0a@}R>K13;fQ1)gGB7zjmhwBxPuJ8eA#s^)%D-Oe?xO|`olXN}hf#2ePZCJX
z%Y!Q^$nqW@G0Bxc-EGw1RuD?7P@yod+Stq$CIA*k2L?P4Ld*h%&QWg}p?$x|&4(V;
z8CS!nn0}M~`P~WKcLA-tj^)~O@uClS9Uq0ft^n3oxhX^5GVv`e`FgNz8tjkKnSOYsy{=V_Koq`a?i&>e+7O_v!0
zb^3?$fK>Jhg8W0KMvnlEsi(_x&mg_9_m|+kITp~Y
zEL@E(NSlmADI%OqGds*YC)Eyt{U64`=g_ELfl$K5v~e0sHt1DW7GM#JhYe41#+tX}
z(Gp8zR>m_`wdFn`nD--aTSg26*D{_P)>qJHhb^q_=Fl5dA{z`$Z)Q@9w#s0;X7w}F
zkAb(eDeLd!t!wLkcs?X;`@9#eu)*S^1i&aN`XG6L(?}rpQ^u
z-j!AiaJMobrc(0Fi}yP4zPH5<6WbxBt2?P{bZ0Yg#f$YNCdd6x#VO|LnP$XeEl}NrVZM2HX7;A7fbGBq7VTwFzH!8P5rXuu2ra5x-L?Ow;
z^uZhSFkXs4OI359dAgyd0ANL8S7>;#xE=B|fSF%u+f*n$Xx!4RCDRzI_@p4p8S9i|
zLe9W2g4%FL)d8r8o;FIOV6_1tbl}#|@f1qxRFaWAo=fh8R=6a5K@3+`gx<%^D
zr4u-C(_t=-82m$XVMPwl^dHw;R+(RxIOcEvkY32hUk=9vN+GW?RH0?S-;mLLzViNp
z-od9O4a3%Bq3Fz@pmsZ??ZGVf_*mP_Y5Egnh2F=doT-wbwzn9+(r$RS+Al)i>8`E<
zU*t}rr49WDat*QtnDwI@j%xKuSw{@QPv-iZH{ICin;)qKK1L20ax2fEGjkWpKt`0NFNU
zeuq~en7QBZR|ZaBk0M!*{myFTsnElN{o_i^h3*v!QXmzxl8Itx5S!f|N)?o6OfW%T{LI=|tqneeOQXn$r+`*7e}Qz-{)
z2y>lre%S;MrME~CYxHfi^m7b&>qa@6pt28IT<(~&K4zv39NDlyhf)IgQp2cKWJY46
zSi5xX3w|xLXoOmy758Cyg+jNDRaH^bU7^lUyYNhDaLLR_(72O~<+Ig6`PNMrtsQ>5
zoKqQ%q2)j2`Cst$Z*X93~S1Co#Glf)gzEMC`S><9bO16!t!W!ItjVzCeHEZE1f##3z=##8ygU_>Lfjt;~z
z!MNfz?AadLYwIw{F`LQ2+Ij)97gR(W?CY}e~9Oj9IGPJUt58P7GIE%KhD{P}LqHPtAt?6LV&vWc8)+`4^
zA4GRYg6s>ZvMuYtnii`kkJ^^n(W!_|;l!|xyfn-&mD8=mg>69MNM!S=KKQ
zp4m};jA%<~9v!*`Ibwn$cu?00Cf?d4j#^Jlpxg5tGuH2tjGuPtQC3FbQ|1h4uN+^5yeMO2MU|j56~X*zg5SO=6yv*#=RY3>Pbg>jftZU
zfw=E&!py+{2_1$j(e{%U$#bM83Fgd5Z&dHwvTSVb=O@u6%@K+3LB7M)NR4S(93BnO
zkKeBg^&-RQcVAXk;SZESZElOO5ft;PM`%BUjJ%DPp$IYwmdiaoHHWdKhJI
zTuXnOA>A4xYHaF|dt(wACPEoVQcI`2$>afCnyWUmtz<#qocL)hRq--Qn!{Xe7yw5a
z`CJtLC^KF+eOY?Lj)eP%x=yh??Uz}3JJi;`P)1{|gqik(Oxru`UR_QT%F6h92EKEk
zLx$+oXLa>vlbqgO$+|(frK1uB(&^cMcW6{kC0m=k7mZR+9!!NiWybeo3$`b9>5R-@
zj9$4IshQcF0F>^Z5fc%i1eaj@#Us!@U~8WxMkz5)U72n4x4WF3wxP;-wH*|I@yDU3UZp85l}N^MUxCLCmO8kLnoxNi!0
z_1#^xvYOh?Y{L2MID|DiA2WVVZEFPgT1CzRSCx+t9ojDa5kXoYqdgDwJO_hDxAP{a
zA1GO}K=kvjwi*J2)h}G}8JTR6#|
zaFq(qCL5gDM5+i(8QRka)C_JRAwgHpx5nXU!pc+@E!~$9WG>aO+GpB1%obrR`xeD`
zGMjP9F-h~oS$w2bCn7@X>afdr4bt||fOM7KT%Xx^q;AjL+c1mKP63rA=IUm=^JB=v
zg)9tThpU*>^$iM!z>U03IFoleA(4nTkKIOdWAE1E!nP2
zB@*p~>fGET<2et6`z9&=TLtc;0rCi6dKw)*zDFvfb>6kPbkL*3i}
z^0qr8uhGTou`+B;wM%lT-9HmNcFTtT;5#?wwd+?-1Q=dyDD3jov0SOO)NNt5WMtcu
zDo0aDbinC*a=-2>f+jO8LhzxJe2fFfotiG8i+r3rAolqaE43Dt{aEmoWzg+%^No<+
z@r?Uz=Ft9gP#^Mgjg-Y{ZBHI1%k@?2;+L$B5(iwzQMHl$OcVcnT~qYi^|IyFZO2r?
zM5=p`!K1k`{V|Sgsdtg-t&3wk*!NV|#Zt{v+VOy|$#vj-=cq!v^sC><;wUBIFMYjY
zL&^NmGCiq57w2p{WrH6J{b08!Sm4=YuN!MYSc;}b-3=*f3(
z8L2UCaUJC)30~W>n3xGyFfIW{;_(#CY*V6eB1mWLdK=oz*4m}~Dh>Bd6I1ouDnwSb
z9)davS_CO}EE==ybpd*~QJV?=3pT!MrCtp$eQ1K@98oF8=*7f|#ce0Ln
zhNz|5Ot*)p1(2@8wYtTn+}hgob8pz@d;WX=XIT|2iWUOOuDHC!JCqGA@PwO9@}&%>
zrbi5Z=CO+X{4qvb9VX{nBrjj-&D%5hP>lp3xdyU
z)Gx3>sp%)>2leT~Sg;-`5);dg}vGa@C1f(+??hK3?Y9%11Ol%{z^9yLKB86!=4p?9rAQdNZ}X9d9i0O(qx
z(#J5bl=`d|VMl)Os84JDWWq6j0gZd6;*jsL$|f_$lq2EE#vwqBIFXhq;Y(eB&;36+
z##J4}x2gp+3Mhbl6~w~z
z0)d%2zL@duPctSs(Ub;m+2cl9^CV8B1tk==EG|Wji>kUGz-#0(okv0FVjF_vODf@vY2_>uIl#m44*GLX&x%-=D_g#&*g3uaCqA%cH1w^(`SWcIQ;2vx5zW3Z?
zy$$_x=lTXw=s~&iBSy^(G)|h75lC{geV>(C;N}h`z`#?aVf!nwH14MGj_5xRxOivr
zn1X`Cp!K=D1{y-Iuy^5DssJ7BRe=Od{Cv`i-+ZWP*;nkyV12fXVP{X@V)i|8ktDER
zlSLLJmX%B`(3nfE#A)2dWc#Ab_(n0dd#dERI@T%I9jd(7b(w#EM>66eSA8Z1ZY%4aIgZAmZ%LmqCL$ii|Bykl|R{>@ozbgwn`
zT+sjP<*&C?QJv}3;W8d@t8%`ZUMvfzmhZ5I6%c-7(t2PCZGmE?n1{=_t(;_-?
zsX5m!8AD}Pw^tF$>ZSB)Ci<8h-rl*|{RIcDAJDs)qN>A@HX3t9qBCt3P#x-VV2TOZ
zebx;p>Wvz4@9XQiPMaQ}6EaHDiY)-0lL@G3+13kSD_KNP1RW;2j6Tg4^k89xl368T
ztv0zVXXjh#oS>VC#v()zVDMaj|NOoc2PZ5#%-mH0a`Ow2L>C&Qk?RX1+1PMCw3w3!
zE}M6Cl0iJnd48W^x4}hlTr)1%NqEcNh?wl7z&9GHhdp&HzHRP-73fwhzEW-rc%Q^_
zXa#S%GR?fX_eT}(K`9(6C;O2l)!{3sFiX97mwDybB2v4lErWc|j_Fp9edF7!GSXqA
zfd<(zyk@5A*>6291sc76dJfX?8`Cj&wA4zb*h?r;VpKj^uh%oymB#Fe{r(IkyA=T~
zi>(w<>GniPrWmNV_BAb}B-53A1F8Qab>61aE4i{hfoQ%5+`vEn8dQGDBfhDKC5g~Y
zHziAmIXVa3V|!^_co(&3k96p6r;}8j*{UiewPo-!WoC5qlx;YSAN3y_0P>r-%$Cp><TB;4<_2a8Sg3DiomEC
zVDX5-Q80z$O5*fjK?RSp!UU{fVX;qA#Xfu_2U5+h#Me|)N~Kpl8Jg4=ayQRhr~gSL
zS@9^EtOVxh^KpFR(f)dlSND~bZrQBvd(K6q_bH_`Y_g&osxG=ZY>uf8LHTsE`p4ui
zu2xQ4bcJ?G*F7dl6`WP(L$_&UGQ#t^0Mur%<0@Boz(MDEVq{%UE7VrVohcOOrcYXp
z{;OHao&BNr*^}2g417m>0GqP0lFdQQ%@wyzvwhWy-F>)5XzR~7(2^c(CWPni5J|nN
zh1$6s_$*@7nFY605`BvBG6>E=K-JSCwFYsM9>Y^z!5(wb%+C2vXN^%IJmc)o8Tio_
zrVI&_dBCIU%WL7zDRy9?2@W{
z2Ok3l8W7xB4fbesBNX)9uK@{qF>h8VT}nJQB276-=YBzRY+K&WD9J2YxC9R)SyYon
z6Z);6!b4O$+#T_ckAYHnb~OHze78&kM0P1}X3%
zM@|1ZA|e2?)XV@RcHEZr;6*F6=r6Y~^Y6h}2tajXR!W!OhRVDIKLVlq%}arZFI1`D
zF_{IFQ^+g%IP6MHwVwOq-1Wg^qMWb`e?q62M^nF{hOOdLjYw?3JI+pe*EicY8rc#&^
zTkspK1c+{EJ3-+U=!$X?t$Gt<+;Fv}LHxMvyPk&|gk&UeNKof;#6KtU06|Z&6Z?m#
z-Zpo5P|MBvGJi_4m_qA7drfW%*>iuK%3@;ILIQh&uZ?JJq}78q(3Hu77|YDnshxc0
zi%d*eh;*JCgNIVMHOV_HD2OqtnYd+HBVp=yDd5xOFIbgH?Q0(pCpukkM>nf%MB6PU
z26DsbT=0*aSXkh@sc+}tJ`K5DO*xieSheiA#uzoNtFTlIs$tgV_f+mjZ=LN{+huu4
zg8t;IAf(Ka^62!Zb@98;Js83U4HS;3n|`IMM2g&UBe{|e&fAohQ;;}IKs2@Vips*>
z4xB39nhNFaNju9l0dM`Gh=>QrBr|))bjh9-KFHGd9xItt;PF^Be)l=FUcGGy_Lxcz
zd1=`n>sK#72{Yq=g2?7JUa~QdOz4M%r|6YK({vR~M17%x&R()E>`@aOw^`Rtcw#%AQ&wzJNm4fK&^{dVH_QEgEYW
zQI2WBMz1uSRL+r-vE6;L?wqdA=CW&I)eXGHW3F21-JTbVbMK&%F#%`^s}xzxoM}Rq
z*3K8clf$L#UDz4)3;3T72km1n3j_!Nfb5?HGv5F0aQ*{{QI?iHq=)Y&y2mro9}Y-L
z@}wjl0u1MDU54B;TF{Wbns9;dRQ~zwm|112hdAz|I81l9%`vq)eL>9`s$rljM-~|e
zl1Ntu{aKKEaHYi`%!0CML&i)KSj!s#<&pq33AARgE36-zouyXq=y!surOQg7b*gy2
z93bIR8W965r=}joQp|!_T$0ej_NmblnSw-uQZWFUZCU6CO7E;N?{5l`Fa&d_D(ZLg
zilkVKDBfH{k>2ayuq2_1Z)Sj{ZiL2q54ljnZF8x^g3Fa2i8;sEou<%GQ7|s^z_ED_
z?#>zzaBW`9d&SP(H64gn^AL*o+Z8prbGy
z7jccr4fs<~+-wuG-}ccp)D>;|;Xw9w?jIsDgbmrk>2mnE=g?KPuer6w{UrjSqz1kZ
zh2QD0ER?>FdscAq-To8?&KPF96qWbZQ~km{O`gSQJrQArd)C=Jw~V?%%?A=BFiy6}
zsglpuE&;^ysDx)D^Hpg{FZuNEKI>1u3-x518mrND!C@w7s#JBm-P{T^0dQ>V=GD~Z
zc0>eM^5*LG=1xm`YV~cgsE;o;=5e?w>*NogQ|STke;%OUV`5$_Z~y>7A^-q{|2;rf
z`tG*QPXDS;Y^z_|9~PZTDw|X)vuy<Ln8QZ
zR3wnK!Z#2q^euo7P}8J~x#!=|(%Ib5(cRqcljUNoL{LQ|NcN}Fk-XCoXB87_
z`;ikML>fal!V^`S&A^dw7B;6L=BSfx~_`1_a@YGSZ4o?$v`fw`{)zOGP?K{dg+v~tQAoyxSXo5(m0$+;s{Ri9P-)wOqJm=k_t^m#F<`d$LHE8nxfRqBC;B|D{hi2KxX;aPW1
zdcoW3wsYL^i%TY@*n70uOJ*bLAPWVA%os5%(1RIW>#cHu{TxC-g0lbRkZ~dV0$lM!}B5
zps}F2NHuZ1hE((^CPNmel4=ifusr^Uk?+c;zSy>DC`5f(Bvv`@;20w3$%
zd1_BN^ZecJLFzpCC
z5ScOO?v~I_g0sUFlb5^IEm;52SRS`WFrN}3`h5!HV7HXQUP76c6v=!mFbDy82Mj=W
zz{O^(Y(g?Xv$#uTN*?`zF{8LWdBO#a;QMVfP+1R^@6!liXwhyS@eo&t)GTBL>!&PX
z1P)&hj*eqCm>rG^J-3w#iUC>N4j?YKSV1UuLOrB1lE{W;7J})8pR08gIeTnT)|{&l
zxy%9_VC_Gj=(s_}Y<~OiMFJ1>ToHj{$@eHyXypZFgHn;yRQu|`FsifNHXG8NH<{0N
zYMGtXE(NipjrEh~(waZ5gg33YJf4OI!x@VyO7qX*BE(8DA+pZPHKJ#53l1Gls-LyM|Au)
zkaUXMplWio+qSFoeQKM(PBZ(>wfgr4p)fR!bga+&Tvq47JIq0@E1N!(f@}9n9H#p9
z0L)T$A(Z`W+Hhf&+CoF)kGIonDb1{Jg^#(A>%p_<=HmGeoE69Bw!4kkJ8wEUH?22J
zqZbid${8-l-M;?JYNA&)F_Ql5Wl`|2wq1gLU(%#T3_8}TI(>P{$h-b70>aGx!r4FL
zg$Eu+WHur?&k1rlXegnJFuBs;(>8#Ry0z=0G^z=-+N)Fe4wSn$2%h=MgKpk7?n4*(
zD!Kpkc;FVavu@nl?HZn$v09>Q@8%A+JEoL3tIj^n_{L+PTl|I@UL9IE~M%w^N
ziNtIp+b`2Edl>GLa3G{`(PnPTTW;BVM*l_WueeOL+nk>tt>nx(
zD$c!0%~-(bkPcdJ-{g@HxqW{;_fq+JGr&mY}u?`
zFUOd4*M)ETEtR!Y7yWrcTBb)ZZybGT;&4?4a+e~j9o#J1w(c%k?Bvp>nSMsBhAymK
zg7KP!?7*yx5HF8CU{2YZ4BENA7*I;JuYQqH?r#n;rFCAEcqq%%kKH&)
z9G-K&T$tgM_Y9Fr5KJMJ`Z4ZmvN=b1@SG(cZ}n$mqv`^SZ@)#Jocvg=6xR8)-X|J<
z;>u1#Fy%tHOE|BgeO5Hc(P`E7OX&jUDa$EoNjOm5l3+9>B9*^P5q#mq+
zD^-*1rYQhf#Aa7BUmHVRePaY1Gjl*?e21{#VtW
z_XW>`y)soD%km&KlPI%zvm#VH9Ocz}V;$*m{Wg?+c7j22X17Ep*{O}IVd>hi90Kq6
z@5q$*PI&%F`-J#O#cA%htROeDHaD^nKg%ylI=wf=x!jMDtjgy)Yx`y=F#T(x(D9u}
z+JzRW79>W$?0JKBFrlhrXi3&DT1tvS@cXYc=8
zn*6({9Zv3#*`S9HxfSagtZG5wCtT+Yi&)Ir(7e@7ltPUh(pi^*5_W$jb%}!ctG*_D
z0Xoc>c$@q8kxEwfF8j*87+)fMtVHgiiqeiSzld|
z&BW;mL+~-M;>=v6&=t9SDF50xAW$G&BQZq|m<}maq8TeOQ6*A~gHv1ja-I3v>j1P_
zYuSmrC1{QfKtY$WWlKn|FCpU@`R<<$U2~XGw5b+}q2cL+(q+&Bnxh+NzBD&VzEz$H
zU`fk>%rhXwSK;lCM!;{0zJ2!8VA7x8|Km!_gcUoGh-0a3=As{9SdMq)Vy!nTqf*su
zQFk0_Tx;5z5*zxcwM8w@4OieLm<`oIke!Fd88r){T|;)JAQ0I6eGka@_YIdZd`Ed)q!Fa~@
zb^?^*WFd@&Q&*(xKxP>dpNf5`x;tK>f25uDDAEwsu=;zJT>~6=1DmU9`>5Zc-_5z~
zNq21D5E%jWy8HcaNV|r5qf|}zk9*NSWg~9ZfA3_r(RVR7)ps)gA8uz`^Pf&;R>U8j
zykC9HSHj8XiG)m+;HW%lERb)zR8Fm$HsFoCV+)G#v43?k8w>t^huC%!r*>*^y1wok
z;kS&Xn~v?eZex7VreKDJiMEtspk5+ID^`*
zIfzSQSDyMMAqzQ=nS)UvywNeJSYi`leTAy@rOMqnP|EjcDJIM_s4KQ;s5-{w){-^e
z>i8%wz<9;aldK;vM`Qj$er+sB1V@x-)EtM^l0d~v1f6wf4{bbleINr-wBse*t~lx>
z1QxD-*^KNuX{Grp|FXXiB^qo8!sbMbi_@_3Yeb{dX-cIf`3l@o7F5lCQ21$}nrWbp
zc`q#B439wFFX!{-c-kt38iLUObMDGkRjCVcOZ8g+5nZ*qO5JCejO9P2j$r2E@%><&
zA;95c4PFS874E?=(pS=ZVdC!
zA688rkhR=`Fx)L!7bAifu|C4nfDYA}F@-}Fsn~P#W~|eivy#9zDAxrLkKrEON9`Q-)`~X&JdZ_fA$YdJO^a$Kdz^Yo&@Yd`m&yh(G)IDE!C)@O1mlUg
zCz#a`rF-jA6hLSuVi5Z(vB6K%icziVLsO1$6F!yaf|c&4<*G0@Qu+GfQ9(nJ3&w@Q
zLKZ7M%8VK8$`%-;bl*keqkwHV
z{!mBrod*z>y1^~=C@goZ9EPOSlq9b$2NfkpxA$w;&Ca=x--5He{L5E&ux_h|la}ZV
z*`ar~IuLId3hRWLJG)JcW*;?b35m$tOqhI2L@A{BL#NFQ22r0)3
z)r{riOh4UooRNP3UZ@5|6l~3b5K}AnxEx4*&~JDuZp0z08lYLE>?>`~uw{PQF#TIqLA9(lfE!E?
z=R6>*Us6oO+-_y(CYS!APoXo`oBKrXWT
ze1RW+K#qs9DHHhr>N?A)xR&MZ<2JYx+}&M+6KrsI3+_&E2n2Ts8rUIgVWIs%+gJr=Md2x4jO&n}z9nL1Fm;
z7}>VW{GzVhgpoE}L0ze=w32-;hLOiLd-WhlOKbANK$u49o)lxxih6nd>*Fp`FuHzo
zr?SC%*8E|FEn?Uz)S
zWdpnSn}!W34EdG_=F^sHS0DZ8*II%ZbuD--QG%w)G;a}3O2UI7$&x0uNB{E0h-t^a&7U`wdSIof
zORu%D7|9#wI&y+DQh{zCxmqVO&PyXCLcqv>v^D}7~s<;+z{o$eeu5P@kVl+dnlPNa5ArI#KJ?D_3f}$7$m2czx
zpF(ZK!KBO^ZqHqDYx~m5;Kp6R-2}SsrEehymBUtN%x-}kV72vbS#PMgrnak_7>i>p
z7$eeB()eqeJJ^rySi$Y)bWh4FvPwoTdSZ%=I)cK`oK#z_)G2Uujujz~nxvTc5biVt
z?CcxL=YJ&~TRPADd|Gx)n-Vf40M8pl>m2G7qmk+Rh{KCI+9h0FTC|zkGGjLzYqd&(
zLv16hK$kQMr5TNplB-{7_BVmPhMh+Ce
zx*Y`Vy+3{ZEeyPfUS7`4K29C>xhS@y9EN~mjLrRmKf*2%C7W(%H<~AP%B7%fabUDG
z(V14zQrLUdjF61&O^5bt>^8(0fp>wj#|TQ67X+nj*zW
zWcNb^&yJy9^pIFCNCJ~0e;b=IPWStX=dhQ_-m1qr`3)sJfb3okYXBbN}~~Qjzf=XlHN}
zvN7ESXPi0$oE|XrNPBa@J^rDk;6n;8-Vb(P_Hhfw78Z@=#-mE5*dnTnJ1{RCdllQ0
z2jLWA4E+eKqh@g+4+0Clt!py5h~K$?zHWq)LtLUP9iYNgtC@AmKO5qV*Z){=y1j#0
zTME4A~ce#YKz$h^4np
z(^v!NS;A$mux=fh9FJiqsPzn-Eac6rT-dnDT9OA|*a+9jz3Fet!Xe#^0MxaeA<*vc
zA(_aX3q!D{7kg{N@SSmUzs_x2hA&aI1bD%mnlIh~-yEtnGGDfd6@!n97-
z)oPU9Tco=hLR-=HS@t*?6NaT(=jG8CpHUYQ9ta;yCY^0}=JB=e*778ocdEyn%XmRz
zwI!c+iu;|DCF7K}VF{Lj9&KQ-ZsgK7xO_j5okS=xJN;n+EnzvMo*7Z=Oxg-;D=E*j
zQndT*0om?E)IheZkbe2#H#GNB|0g=Hc~JrwTsA<}CT>+H}{C4%ZKQ3aJ(
zsUt`s-sZ-T%!4~-xDa|p@+-`OdYIx}V~lpW^gF
zZW-AT$IInGfhrZJ5iob`ew=toL5O-SjQHqEp%+3yLhlX5oEo`dz|T^XNNvB#nzhA+
zB*~^1b?uk|PCnsQ1!M+rwG_3OlTjs4&g0NJ)Cn8GTn
zc>J-I`(Ym5n;9qS_j)=0)ub=(*GXTsdk*~YEk}%I^G&E$P@oM@r@gFB%A?NiFRPx>
znXv`T_mcShpqvQ}C4|4k*US}5agS~PTu(Q27MQR;6>su0xy(+j$OjZ={t+yE!&zRKdtNVtjo@t!XGR!eGcQ0)L`B@;M5+7%0hJAo$}Ierz@a
z=7yUrVLmh^X2%)+>B3IU_!4L*dpgSq8=7{P@;h}Y<~U{QOzL5(X*d`;L3*4mx?aUZW$@d|<;yz!#s1a>?dJu3g(Ut#hByE>QlvL|AtK`vBzQpCkxgW`dP-XSK%kJ
zdaNtAX_Wf5Wax$L2sUHbh8=RK3wqN9>IzwDl#T?3XCRW_}2M5jt}a0a9pHF+T|(m9p%&0FbJ5egBVUmzn#>nKVQ*$N$w+W~E6t}uTkfXqO7i}^
zK)`rl$Sks&_{#_nKFY4O#aC&qbFG|=m%A#qeg7~}Gk1uxG<^!)XIzF)5mL+rs|2Hb
zpv6$GYnaXVg8v{PFMoR?%*MAprZ&>U$Wf0s0axpzDFSXQiJe`Hd{D4Z
zJ7I*UZ+yH9GGkPO(HEh`ypuY0aq9HlX}2u0RG2ccON(~dqs%qkdh2wCHJMKf{cH&U
zPT67N4o`zvVDDTB8~2Ug#XXYt32C{Tk7>Zc?!l_#N@A1yhojL4!?cI+G)9iPdB9tR
z7}lc+9)|LjO`VIgAnw5a0=ay(0%1Bko2i+sO3$?o
z)$uwg8v(n79X};S<;&x;S>ExwKHTv&tK}M_wvOv_L@Ry-y@*9_%ln1PO`R*icxKB~
zKR)~c=5pQA!1UfNv#(tu3Twa&W>uz~Qb>m4k6aciAJqMTQMWTn?JR#Q2t~6r$jD&W
z^z?AA)^sFZ{SHsNP8w~fvVa48+TRVc#bfPuj{WYWCLyK^JJl35^n?}J%Q`2X4!Vd@
zeZxdHkBtf-3sf}#1rHx|hwGaaVLxUb<_>{bgM_KrHN8K_SPSduE8nO36y{JMAaDL_
zjD793Oi&uK`O1XcN_v76Ryd(bvYH|M(PO(w@djkU7+lpq!m2=6_~weIqOZ%vSK8R!
z)bu^)+6HPn#4;crHIk3o!E*}QBOe}BhB_zIfx-_a5F8GEH4Y#TZPg{1(8HGwWRvsk
zYAzym60Im|_wk`w(|
zaBfcB+4>0Ia{Je~9lXU!VG77qtG?u3es*)*W^j*awp2YaN^{MoG-V{G{Cly=Yt2RE~dkFdXAibjO%rL&D*_w)H@5a&b49!!A-g4AD#j#S<`mj{i1>P5HVRd
z@v>}|{^I?1Kz_N=_09Gk5Zr5)E%U7j{-+}}6L?6nGz<&6k!nyV_TwsUDE-jMHhuH`rW6bL2Zo2bgNB|IpUU^9i#Us?@LU=a9%-&b-r;-xp1Y?IZyTNR
zK6}sQ^_d~7`*zrsr5R;DZmaiN&|AsKb_?mxezSIhJQsV4p_pd^0YUz!-<%8#tzODl
z=sC`Fp!!^ecXYcoM#o6~qZbn61jh;DJ@=y4@`zfq)_t
zfrcce7KFuCndo0N_*Bm5__lgDdqW+w4w?yZ(*vM1G{E&x3Smonme2h_B!ZbA(fI2-PtFhJ_ufG2!9m{rnC9kuK4lycr4P9gyELskkd;
zRT9`KuTSsxKlCP*4v}MYB(e)#sYn6@pl@#aFQO(9+q=m`QqveSZ(#TzOkfjkkI=u-
zvoReD4o-E6w-}3UFG>aMj?V9}h2P`Oja|G)KtPI5{@5@T5mx<9)kL-<{%eotPdI4>
z^0pLXLlT2?fVuGq!=rATvsw!BWmqP-4)&Lf^{luN~svlte
z3s=RCLwATaHGC^NKzoBKfi}^0>SHC6fg)?BSdXnmrI79ZtOcX4TmiGv8&s2UN+@(0
z?V0LQNEH&dZ*w~ND8f|OAfW{4ZCGGl{pM!kG|Hs9n#4JKdwW7ZSia#RtE0A)=OX{i
z)o7skzI7o^2C3u-5(Y>dgra_88lpg|$!CU%$4
z>mJr(s40mq;E)(|8~{?^kMT3LyEVmmZl
zd?_Z@ieW~;#%RS|D?kFobNx#1tOe|75K1oOVkXY35P
z;);(Z1#^MbBG$G^fXz-K?~31qsl@9a!qnhkNQOv
z%e)kIge->jUN9B-fZD8F`;
z^N3u7`}%h#OA{AUckSzn+WRMg&W(23n2|$Y?KQ5W={i20bKRSFEe7_E1}>geD?*E6
z*VHncY18L@q5vw*R}4L9ds$-E=oI0p$T(Te?HR9ruZGK`ah97jtC{_-_nF0BaA}ly
zXb>1Nz-Wm1p6E^XPegJJ21ir+%bt4igf|UhtDuu>+wJL%wIP*12NGM#scyKuTa($|
zgAHiTQRydu*)ei^ToHtBNztgNVViIt4`Gz>zk-`MNjiSJIt7!8-1hh|d+d?|VZEBw^A<;(
ztxmeYG>Lp`!^2mCSL4uWS(RJ~R?EtuYWe7Ds%gagByBe+Otp`6GOMUh8AOhl8?`em
zGj*d`s@)8inVaPx(8G(W)0!ihVZyJe_>@1>Gwf1kX?+mAvh1nGLrcUE+5+CPDEL=(
zD@ELX)mb-(V}}({_GG>BQtt1$r{eaUrsWfmg1Cyt{c$dd>)d77CZJ&v5WRj59+baW
zDRHKA52`$EzDG^EqG?;?$}JYv*?d<|>d#v>mFzY!f8g+NVNm%NDu&x^HVn0S!I#6n
zCfS_L{j{ZMYf-}?JAUkUZgcq_VMu%q
zmpoc$cV%ndUg>At5OAlYk{hfd0f=vma~(yLUD-Spu=y}O3VH%s38TvWKp{N-K3!B~
zomTZ91@CJRsZW~8S_w39z#8B-=l$Z*rL^k@)xZuat^CL1nLfccgM>t>2=`XkY&
z79H2VJLIWW1WsSDuGiIKwsc6&fk}ebr$Vx!rNJnCI^1d
z2Y_~aib3M2Fr>>Ft4e@9L9RWTWeL0^!kcCTRsCWG(ItBc6G8
zWCPgZd!mI-HcGWv)((Bo66ob!zlUe(s@dy$wDv#J{pq|^r?`sceP71h=dS+Ye2fIo
zvmU!0m4&3OTn|0Qzao}J`nsKDjk6cRrj4D?>Gv++kWh0HX*KL|rlAZFbJ$&x4Vvb`
zV!=ogjE%=OJCbf?O9nS#Y4wibL=PEyku&Tz=11PAK7TKha$JN%KTVXjM9MvuMW$)V
zx1Yve}5QyM|mpzKT3tQ?8LIel#)`e{x6c
z5`loA{xjurb~3jzcXI!`G{TEFBKomYpV|sKVa<40l?q0F-~S*FzmnktPLO}1S!$sT
zQC^SG>Z5=n8TkoGh!nm)lC!@m@hJDQD+3ST=0@)hEJ#Nt!iZhSS-8I}P*CMp;C%>{
zuLise6*V%b0vNTJle>q5{nM|#+djOSD1aJH=y!6+1rAr(7?i4{`~0DfuK$-Nl+FYT
zB4T)Xf5rHOh07c8d<>b`0zv4{ID0xE^W~^6prwweq^MR3K`@bTpx+zf_ag3c_@WY2
z<84R+8_lbAx^H&bA3;ktt^nz`a&?%6c@oxft=|mM8%j6)18M{6eq#1%Uy{mX(>(10
z$kTH8Tk8!rgIKlvsaB9
z!c1RXtT}=I=Ag1654{?c95Ve(NdTdIv~YEAv6<;qkZxU&V;LLr&y*;RccF&bd0i<)
z*G&WVszEFLgiDwo+FF;U6@A4as<5&!yfMj!4lvC>sZHCeF@kG!a`nwlp-4Ba;mS}8
z1UW9)dH54>W-`dniUYoS+$}XIHB@B$VD$?u1_bAq9zoU4v6-=^G&8f|Wvxc7#grYI
z3L{G}vv2)uoNhAxy{UjMaV4v7QBFRe)hc^2%+)dPkH<6HzbjvK3zCwsQ$AGT`n`gM
zlFT|ZPBnxFaK4v*PCJI>@Uw6-LpXh(Ozrv_g-_6bl}G3oT?lW^$y>9icY)MkD5ck^
zow(7P%u9SHK{Xkjgot8CzSV_%l=C6HpEF81KR*f%xAK>of3Vm2ZCD#)HzJ22=)Lp?yqnm>pzAwE(P{xMws^MFvML6znba(v2|
zDb1CXNct(?9i1?IbfWBp?A|E|;J!>6;q95lr=U^_bE>|#072FY^9dqS5E`U9fJO%K
zVk5YqdAJr>*K8v&cm(_Ej_F}TYD
zu)!Mh-4zp{xIm(~7+m+m=`S}&5LXY%ootF!@wqNV?`|55jYL#ijVPt;P^!_`XtrqO
zAL(RbR#3{`uCc6S?=P;#+lwo3cW9RB(#x2?ElN|lrC3E!ffz|hS{7wi=cE*HXQru&
z!^9wU2XwLo80r2#%bL@LKXF{{kkK!KSEoy5l|9`v7hOaDP;N(IXGM1&*Q(L>=9m8R
z>2+7?u#oAGjPESs{9b)H8E?z907&AO_maWU9=xQVMI8qR+=J*l$=!_FFpsWtktVf=
zE6lg3m7*iQ!rFK-bJIa2gcz68vjm&6pa$F_XBjYXAkb=6f030*n)sPgtG*i+vml_@
z=W&!f2P3=g7?^vpsKLz@@#AD5)%)wW^Nak^4X6dzh3(%q-Yda5>&wZoJ=WdCW@^n1
z(9pzhxtORb#K9Mate97V6TtL1$-WQW7%-n1kjLl8{gf7$RqroP&)`jb*iMDR4-RI?
zdo$X<)s+=uXGejT0SCSLHEZyPB}W<${_RMx5n8q@XjFmwsuF&7Vw57@VbX<`^BrMv
zx7690;{LwpGRqwp&co9}7Zi*TiS{rm3!
zgZZ-n=xfZUr-+^ByMKjw?QnTb!_k#|rZE6Po{f9a*R=mGZuy$_2Jt_%|5xhrH6Z*(
ztzYP99F)-q@)_`=uK|A@n($|Fpw|FioEN}9rGj1qXa#}K7JPbudj`DdzX5-yz`q96
zll%ktuY~y5B&qSgpH+z}@-yj0|4sTc73DSQGvoi4^uIdCl3425w50@$XW)ze8~A7H
z!fW6x^9%4*BExH&v~K^li6!mLGvY=6jrcPJ@ioGU=TF4{GA6?IZ)5b&37<(X`kM6L
zF=wwy2T$i|{QX}4D+2AcK{WTDw%$FxZ|1I~&zKi|jrr?+`*RQIHKs@M1@p&_&}+yj
zK>E33U^pqBAusxG$e&Ko*AObXe?$J)b1QHA`?(qUQ9ZL>^xv#M9e1x;EAlU_|G4p9
zTeHmaw>2fXG|z+=eNFi9dFpF|lI9EH^{n+ZBV&! sidebar and quotation color
+$pre-color: #1565c0; // 
 sidebar color
+$border-color: #ddd; // Border color
+$secondary-border-color: #aaa; // Secondary border color
+$heading-line-height: 1.2; // Line height for headings
+$heading-ratio: 1.19; // Ratio for headings (strictly unitless)
+$subheading-font-size:0.75em; // Font sizing for  elements in headings
+$subheading-top-margin: -0.25rem; // Top margin of  elements in headings
+$heading-font-weight: 500; // Font weight for headings
+$horizontal-rule-line-height:  1.25em; // 
 line height
+$universal-margin: 0.5rem; // Universal margin for the most elements
+$universal-padding: 0.5rem; // Universal padding for the most elements
+$universal-border-radius: 0.125rem; // Universal border-radius for most elements
+$universal-box-shadow: none; // Universal box-shadow for most elements
+$small-element-font-size: 0.75em; // Font size for , , 
+$small-font-size: 0.75em; // Font sizing for  elements
+$blockquote-quotation-size: 3rem;   // Font size for the quotation of 

+$blockquote-cite-size: 0.75em; // Font size for the [cite] of 

+$code-font-size: 0.85em; // Font size for , 
+$sup-top: -0.5em; //  top
+$sub-bottom: -0.25em; //  bottom
+$a-link-color: #0277bd; // Color for :link
+$a-visited-color: #01579b; // Color for :visited
+$bold-font-weight: 700; // Font weight for  and 
+$mobile-breakpoint: 768px; // Breakpoint between small and medium screens (px)
+$large-screen-breakpoint: 1280px; // Breakpoint between medium and large screens (px)
+
+@import '../mini/core';
+
+$grid-column-count: 12; // Number of columns in the grid (integer value only).
+$grid-medium-breakpoint: $mobile-breakpoint; // Medium screen breakpoint for grid.
+$grid-large-breakpoint: $large-screen-breakpoint; // Large screen breakpoint for grid.
+$card-normal-width: 320px; // Width for normal cards.
+$card-section-media-height: 200px; // Height for cards' media sections.
+$card-fore-color: #fdfdfd; // Text color for the cards.
+$card-back-color: #111; // Background color for the cards.
+$card-border-color: #aaa; // Border color for the cards.
+
+@import '../mini/layout';
+
+/*
+	 Custom elements for card elements.
+*/
+$card-small-name: 'small'; // Class name for small cards.
+$card-small-width: 240px; // Width for small cards.
+@include make-card-alt-size ($card-small-name, $card-small-width);
+
+$card-large-name: 'large'; // Class name for large cards.
+$card-large-width: 480px; // Width for large cards.
+@include make-card-alt-size ($card-large-name, $card-large-width);
+
+$card-fluid-name: 'fluid'; // Class name for fluid cards.
+$card-fluid-width: 100%; // Width for fluid cards.
+@include make-card-alt-size ($card-fluid-name, $card-fluid-width);
+
+$card-warning-name: 'warning'; // Class name for card warnging color variant.
+$card-warning-back-color: #ffca28; // Background color for card warnging color variant.
+$card-warning-fore-color: #111; // Text color for card warnging color variant.
+$card-warning-border-color: #e8b825; // Border style for card warnging color variant.
+@include make-card-alt-color ($card-warning-name, $card-warning-back-color, $card-warning-fore-color, $card-warning-border-color);
+
+$card-error-name: 'error'; // Class name for card error color variant.
+$card-error-back-color: #b71c1c; // Background color for card error color variant.
+$card-error-fore-color: #f8f8f8; // Text color for card error color variant.
+$card-error-border-color: #a71a1a; // Border style for card error color variant.
+@include make-card-alt-color ($card-error-name, $card-error-back-color, $card-error-fore-color, $card-error-border-color);
+
+$card-section-dark-name: 'dark'; // Class name for card dark section variant.
+$card-section-dark-back-color: #e0e0e0; // Background color for card dark section variant.
+$card-section-dark-fore-color: #111; // Text color for card dark section variant.
+@include make-card-section-alt-color ($card-section-dark-name, $card-section-dark-back-color, $card-section-dark-fore-color);
+
+$card-section-double-padded-name: 'double-padded'; // Class name for card double-padded section variant.
+$card-section-double-padded-padding: calc(1.5 * var(#{$universal-padding-var}));  // Padding for card sectiondouble-padded section variant.
+@include make-card-section-alt-style ($card-section-double-padded-name, $card-section-double-padded-padding);
+
+$input-group-mobile-breakpoint: $mobile-breakpoint - 1px; // Breakpoint for fluid input group mobile view.
+$form-back-color: #222; // Background color for forms.
+$form-fore-color: #fdfdfd; // Text color for forms.
+$form-border-color: #aaa; // Border color for forms.
+$input-back-color: #111; // Background color for input elements.
+$input-fore-color: #fdfdfd; // Text color for input elements.
+$input-border-color: #aaa; // Border color for input elements.
+$input-focus-color: #0288d1; // Border color for focused input elements.
+$input-invalid-color: #d32f2f; // Border color for invalid input elements.
+$button-back-color: #212121; // Background color for buttons.
+$button-hover-back-color: #444; // Background color for buttons (hover).
+$button-fore-color: #e2e2e2; // Text color for buttons.
+$button-border-color: transparent; // Border color for buttons.
+$button-hover-border-color: transparent; // Border color for buttons (hover).
+$button-group-border-color: rgba(124,124,124,0.54); // Border color for button groups.
+
+@import '../mini/input_control';
+
+/*
+	 Custom elements for forms and input elements.
+*/
+$button-primary-name: 'primary'; // Class name for primary button color variant.
+$button-primary-back-color: #1976d2;// Background color for primary button color variant.
+$button-primary-hover-back-color: #1565c0;// Background color for primary button color variant (hover).
+$button-primary-fore-color: #f8f8f8;// Text color for primary button color variant.
+@include make-button-alt-color ($button-primary-name, $button-primary-back-color, $button-primary-hover-back-color, $button-primary-fore-color);
+
+$button-secondary-name: 'secondary'; // Class name for secondary button color variant.
+$button-secondary-back-color: #d32f2f;// Background color for secondary button color variant.
+$button-secondary-hover-back-color: #c62828;// Background color for secondary button color variant (hover).
+$button-secondary-fore-color: #f8f8f8;// Text color for secondary button color variant.
+@include make-button-alt-color ($button-secondary-name, $button-secondary-back-color, $button-secondary-hover-back-color, $button-secondary-fore-color);
+
+$button-tertiary-name: 'tertiary'; // Class name for tertiary button color variant.
+$button-tertiary-back-color: #308732;// Background color for tertiary button color variant.
+$button-tertiary-hover-back-color: #277529;// Background color for tertiary button color variant (hover).
+$button-tertiary-fore-color: #f8f8f8;// Text color for tertiary button color variant.
+@include make-button-alt-color ($button-tertiary-name, $button-tertiary-back-color, $button-tertiary-hover-back-color, $button-tertiary-fore-color);
+
+$button-inverse-name: 'inverse'; // Class name for inverse button color variant.
+$button-inverse-back-color: #f8f8f8;// Background color for inverse button color variant.
+$button-inverse-hover-back-color: #f0f0f0;// Background color for inverse button color variant (hover).
+$button-inverse-fore-color: #212121;// Text color for inverse button color variant.
+@include make-button-alt-color ($button-inverse-name, $button-inverse-back-color, $button-inverse-hover-back-color, $button-inverse-fore-color);
+
+$button-small-name: 'small'; // Class name, padding and margin for small button size variant.
+$button-small-padding: calc(0.5 * var(#{$universal-padding-var})) calc(0.75 * var(#{$universal-padding-var}));
+$button-small-margin:  var(#{$universal-margin-var});
+@include make-button-alt-size ($button-small-name, $button-small-padding, $button-small-margin);
+
+$button-large-name: 'large'; // Class name, padding and margin for large button size variant.
+$button-large-padding: calc(1.5 * var(#{$universal-padding-var})) calc(2 * var(#{$universal-padding-var}));
+$button-large-margin:  var(#{$universal-margin-var});
+@include make-button-alt-size ($button-large-name, $button-large-padding, $button-large-margin);
+
+$header-height: 3.1875rem; // Height of the header element.
+$header-back-color: #111; // Background color for the header element.
+$header-hover-back-color: #222; // Background color for the header element (hover).
+$header-fore-color: #f0f0f0; // Text color for the header element.
+$header-border-color: #aaa; // Border color for the header element.
+$nav-back-color: #111; // Background color for the nav element.
+$nav-hover-back-color: #222; // Background color for the nav element (hover).
+$nav-fore-color: #f0f0f0; // Text color for the nav element.
+$nav-border-color: #aaa; // Border color for the nav element.
+$nav-link-color: #0277bd; // Color for link in the nav element.
+$footer-fore-color: #f0f0f0; // Text color for the footer element.
+$footer-back-color: #111; // Background color for footer nav element.
+$footer-border-color: #aaa; // Border color for the footer element.
+$footer-link-color: #0277bd; // Color for link in the footer element.
+$drawer-back-color: #111; // Background color for the drawer component.
+$drawer-border-color: #aaa; // Border color for the drawer component.
+$drawer-hover-back-color: #222; // Background color for the drawer component's close (hover).
+$drawer-close-color: #f0f0f0; // Color of the close element for the drawer component.
+$header-logo-font-size: 1.75rem; // Font size for the header logo element.
+$nav-sublink-depth: 2; // Amount of subcategory classes to add.
+$footer-font-size: 0.875rem; // Font size for text in footer element.
+$drawer-toggle-font-size: 1.5em; // Font size for the drawer component's toggle. (prefer em units)
+$drawer-width: 320px; // Width of the drawer component.
+$drawer-close-size: 2rem; // Size of the close element for the drawer component.
+$drawer-mobile-breakpoint: $mobile-breakpoint; // Mobile breakpoint for the drawer component.
+
+@import '../mini/navigation';
+
+$table-mobile-breakpoint: $mobile-breakpoint; // Breakpoint for  mobile view.
+$table-max-height: 400px; // Maximum height of 
 elements (non-horizontal).
+$table-caption-font-size: 1.5rem; // Font size for 
 elements.
+$table-mobile-card-label: 'data-label'; // Attribute used to replace column headers in mobile view.
+$table-mobile-label-font-weight: 600; // Font weight for column header labels in mobile view.
+$table-border-color: #ddd; // Border color for  elements.
+$table-border-separator-color: #666; // Border color for the border between  and .
+$table-th-back-color:  #212121; // Background color for 
 elements.
+$table-th-fore-color: #fdfdfd; // Text color for  elements.
+$table-td-back-color: #111; // Background color for  elements.
+$table-td-fore-color: #fdfdfd; // Text color for  elements.
+$table-td-alt-back-color: #444; // Alternative background color for  elements in striped tables.
+$table-td-hover-back-color: #5c819f; // Hover background color for  elements in hoverable tables.
+
+@import '../mini/table';
+
+$mark-back-color: #0277bd; // Background color for 
+$mark-fore-color: #fafafa; // Text color for 
+$mark-font-size: 0.95em; // Font size for 
+$mark-line-height: 1em; // Line height for 
+$toast-back-color: #424242; // Background color for toast component
+$toast-fore-color: #fafafa; // Text color for toast component
+$tooltip-back-color: #fafafa; // Background color for tooltip component
+$tooltip-fore-color: #212121; // Text color for tooltip component
+$modal-overlay-color: rgba(0,0,0,0.45); // Overlay color for modal dialog component
+$modal-close-color: #f0f0f0; // Text color for the close button of the modal dialog component
+$modal-close-hover-back-color: #222; // Background color for the close button of the modal dialog component (on hover/focus)
+$modal-close-size: 1.75rem; // Font size for the close button of the modal dialog component
+$collapse-label-height: 1.5rem; // Height for the labels in the collapse component
+$collapse-content-max-height: 400px; // Max height for the content panes in the collapse component
+$collapse-label-back-color: #111; // Background color for labels in the collapse component
+$collapse-label-fore-color: #fafafa; // Text color for labels in the collapse component
+$collapse-label-hover-back-color: #222; // Background color for labels in the collapse component (hover)
+$collapse-selected-label-back-color: #444; // Background color for selected labels in the collapse component
+$collapse-border-color: #aaa; // Border color for collapse component
+$collapse-selected-label-border-color: #0277bd; // Border color for collapse component's selected labels
+$collapse-content-back-color: #212121; // Background color for collapse component's content panes
+
+@import '../mini/contextual';
+
+/*
+	 Custom elements for contextual background elements, toasts and tooltips.
+*/
+$mark-secondary-name: 'secondary'; // Class name for secondary  color variant.
+$mark-secondary-back-color: #d32f2f; // Background color for secondary  color variant.
+@include make-mark-alt-color ($mark-secondary-name, $mark-secondary-back-color);
+
+$mark-tertiary-name: 'tertiary';  // Class name for tertiary  color variant.
+$mark-tertiary-back-color: #308732; // Background color for tertiary  color variant.
+@include make-mark-alt-color ($mark-tertiary-name, $mark-tertiary-back-color);
+
+$mark-tag-name: 'tag'; // Class name, padding and border radius for tag  size variant.
+$mark-tag-padding: calc(var(#{$universal-padding-var})/2) var(#{$universal-padding-var});
+$mark-tag-border-radius: 1em;
+@include make-mark-alt-size ($mark-tag-name, $mark-tag-padding, $mark-tag-border-radius);
+
+$progress-back-color: #aaa; // Background color of .
+$progress-fore-color: #555; // Foreground color of .
+$progress-height: 0.75rem; // Height of .
+$progress-max-value: 1000; // Arithmetic max value of  - use integer values.
+$progress-inline-width: 60%; // Width of inline  elements.
+$spinner-donut-size: 1.25rem; // Size of the spinner donuts
+$spinner-donut-border-thickness: 0.25rem; // Border thickness for spinner donuts
+$spinner-donut-back-color: #ddd; // Background color for spinner donuts
+$spinner-donut-fore-color: #555; // Foreground color for spinner donuts
+
+@import '../mini/progress';
+
+/*
+	 Custom elements for progress bars and spinners.
+*/
+$progress-primary-name:         'primary';   // Class name for primary  color variant.
+$progress-primary-fore-color:   #1976d2;     // Foreground color for primary  color variant.
+@include make-progress-alt-color ($progress-primary-name, $progress-primary-fore-color);
+
+$progress-secondary-name:     'secondary';   // Class name for secondary  color variant.
+$progress-secondary-fore-color: #d32f2f;     // Foreground color for secondary  color variant.
+@include make-progress-alt-color ($progress-secondary-name, $progress-secondary-fore-color);
+
+$progress-tertiary-name:       'tertiary';   // Class name for tertiary  color variant.
+$progress-tertiary-fore-color:   #308732;    // Foreground color for tertiary  color variant.
+@include make-progress-alt-color ($progress-tertiary-name, $progress-tertiary-fore-color);
+
+$spinner-donut-primary-name:         'primary';   // Class name for primary spinner donut color variant.
+$spinner-donut-primary-fore-color:   #1976d2;     // Foreground color for primary spinner donut color variant.
+@include make-spinner-donut-alt-color ($spinner-donut-primary-name, $spinner-donut-primary-fore-color);
+
+$spinner-donut-secondary-name:     'secondary';   // Class name for secondary spinner donut color variant.
+$spinner-donut-secondary-fore-color: #d32f2f;     // Foreground color for secondary spinner donut color variant.
+@include make-spinner-donut-alt-color ($spinner-donut-secondary-name, $spinner-donut-secondary-fore-color);
+
+$spinner-donut-tertiary-name:       'tertiary';   // Class name for tertiary spinner donut color variant.
+$spinner-donut-tertiary-fore-color:   #308732;    // Foreground color for tertiary spinner donut color variant.
+@include make-spinner-donut-alt-color ($spinner-donut-tertiary-name, $spinner-donut-tertiary-fore-color);
+
+
+@import '../mini/icon';
+
+$box-shadow-generic: 0 4*$__1px 4*$__1px 0 rgba(0,0,0,0.125),  0 2*$__1px 2*$__1px -2*$__1px rgba(0,0,0,0.125);
+$border-generic-color: rgba(0,0,0,0.3); // Border color for bordered elements.
+
+@import '../mini/utility';
diff --git a/src/flavors/mini-nord.scss b/src/flavors/mini-nord.scss
new file mode 100644
index 0000000..3019ba8
--- /dev/null
+++ b/src/flavors/mini-nord.scss
@@ -0,0 +1,277 @@
+//  This is a flavor file. Duplicate it and edit it to create your own flavor. Read instructions carefully.
+//  Single-line comments, starting with '//' will not be included in your final CSS file. Multiline comments,
+//  structured like the flavor description below, will be included in your final CSS file.
+/*
+  Flavor name: Nord (mini-nord)
+  Author: tphecca (https://github.com/tphecca)
+  Maintainers: tphecca
+  mini.css version: v3.0.0
+*/
+//  This flavor is based on the Nord color palette: https://github.com/arcticicestudio/nord
+$base-root-font-size: 16px; // Root font sizing for all elements (`px` only)
+$base-line-height: 1.5; // Line height for most elements
+$fore-color: #2e3440; // Text & foreground color
+$secondary-fore-color: #3b4252; // Secondary text & foreground color
+$back-color: #eceff4; // Background color
+$secondary-back-color: #e5e9f0; // Secondary background color
+$blockquote-color: #d08770; // 
 sidebar and quotation color
+$pre-color: #b48ead; // 
 sidebar color
+$border-color: #d8dee9; // Border color
+$secondary-border-color: #e5e9f0; // Secondary border color
+$heading-line-height: 1.2; // Line height for headings
+$heading-ratio: 1.19; // Ratio for headings (strictly unitless)
+$subheading-font-size:0.75em; // Font sizing for  elements in headings
+$subheading-top-margin: -0.25rem; // Top margin of  elements in headings
+$heading-font-weight: 500; // Font weight for headings
+$horizontal-rule-line-height:  1.25em; // 
 line height
+$universal-margin: 0.5rem; // Universal margin for the most elements
+$universal-padding: 0.5rem; // Universal padding for the most elements
+$universal-border-radius: 0.125rem; // Universal border-radius for most elements
+$universal-box-shadow: none; // Universal box-shadow for most elements
+$small-element-font-size: 0.75em; // Font size for , , 
+$small-font-size: 0.75em; // Font sizing for  elements
+$blockquote-quotation-size: 3rem;   // Font size for the quotation of 

+$blockquote-cite-size: 0.75em; // Font size for the [cite] of 

+$code-font-size: 0.85em; // Font size for , 
+$sup-top: -0.5em; //  top
+$sub-bottom: -0.25em; //  bottom
+$a-link-color: #88c0d0; // Color for :link
+$a-visited-color: #5e81ac; // Color for :visited
+$bold-font-weight: 700; // Font weight for  and 
+$mobile-breakpoint: 768px; // Breakpoint between small and medium screens (px)
+$large-screen-breakpoint: 1280px; // Breakpoint between medium and large screens (px)
+
+@import '../mini/core';
+
+$grid-column-count: 12; // Number of columns in the grid (integer value only).
+$grid-medium-breakpoint: $mobile-breakpoint; // Medium screen breakpoint for grid.
+$grid-large-breakpoint: $large-screen-breakpoint; // Large screen breakpoint for grid.
+$card-normal-width: 320px; // Width for normal cards.
+$card-section-media-height: 200px; // Height for cards' media sections.
+$card-fore-color: #2e3440; // Text color for the cards.
+$card-back-color: #eceff4; // Background color for the cards.
+$card-border-color: #e5e9f0; // Border color for the cards.
+
+@import '../mini/layout';
+
+/*
+	 Custom elements for card elements.
+*/
+$card-small-name: 'small'; // Class name for small cards.
+$card-small-width: 240px; // Width for small cards.
+@include make-card-alt-size ($card-small-name, $card-small-width);
+
+$card-large-name: 'large'; // Class name for large cards.
+$card-large-width: 480px; // Width for large cards.
+@include make-card-alt-size ($card-large-name, $card-large-width);
+
+$card-fluid-name: 'fluid'; // Class name for fluid cards.
+$card-fluid-width: 100%; // Width for fluid cards.
+@include make-card-alt-size ($card-fluid-name, $card-fluid-width);
+
+$card-warning-name: 'warning'; // Class name for card warnging color variant.
+$card-warning-back-color: #ebcb8b; // Background color for card warnging color variant.
+$card-warning-fore-color: #2e3440; // Text color for card warnging color variant.
+$card-warning-border-color: #d08770; // Border style for card warnging color variant.
+@include make-card-alt-color ($card-warning-name, $card-warning-back-color, $card-warning-fore-color, $card-warning-border-color);
+
+$card-error-name: 'error'; // Class name for card error color variant.
+$card-error-back-color: #bf616a; // Background color for card error color variant.
+$card-error-fore-color: #2e3440; // Text color for card error color variant.
+$card-error-border-color: #434c5e; // Border style for card error color variant.
+@include make-card-alt-color ($card-error-name, $card-error-back-color, $card-error-fore-color, $card-error-border-color);
+
+$card-section-dark-name: 'dark'; // Class name for card dark section variant.
+$card-section-dark-back-color: #d8dee9; // Background color for card dark section variant.
+$card-section-dark-fore-color: #2e3440; // Text color for card dark section variant.
+@include make-card-section-alt-color ($card-section-dark-name, $card-section-dark-back-color, $card-section-dark-fore-color);
+
+$card-section-double-padded-name: 'double-padded'; // Class name for card double-padded section variant.
+$card-section-double-padded-padding: calc(1.5 * var(#{$universal-padding-var}));  // Padding for card sectiondouble-padded section variant.
+@include make-card-section-alt-style ($card-section-double-padded-name, $card-section-double-padded-padding);
+
+$input-group-mobile-breakpoint: $mobile-breakpoint - 1px; // Breakpoint for fluid input group mobile view.
+$form-back-color: #e5e9f0; // Background color for forms.
+$form-fore-color: #2e3440; // Text color for forms.
+$form-border-color: #e5e9f0; // Border color for forms.
+$input-back-color: #eceff4; // Background color for input elements.
+$input-fore-color: #2e3440; // Text color for input elements.
+$input-border-color: #e5e9f0; // Border color for input elements.
+$input-focus-color: #88c0d0; // Border color for focused input elements.
+$input-invalid-color: #bf616a; // Border color for invalid input elements.
+$button-back-color: #e5e9f0; // Background color for buttons.
+$button-hover-back-color: #d8dee9; // Background color for buttons (hover).
+$button-fore-color: #2e3440; // Text color for buttons.
+$button-border-color: transparent; // Border color for buttons.
+$button-hover-border-color: transparent; // Border color for buttons (hover).
+$button-group-border-color: rgba(124,124,124,0.54); // Border color for button groups.
+
+@import '../mini/input_control';
+
+/*
+	 Custom elements for forms and input elements.
+*/
+$button-primary-name: 'primary'; // Class name for primary button color variant.
+$button-primary-back-color: #5e81ac;// Background color for primary button color variant.
+$button-primary-hover-back-color: #5e81ac;// Background color for primary button color variant (hover).
+$button-primary-fore-color: #eceff4;// Text color for primary button color variant.
+@include make-button-alt-color ($button-primary-name, $button-primary-back-color, $button-primary-hover-back-color, $button-primary-fore-color);
+
+$button-secondary-name: 'secondary'; // Class name for secondary button color variant.
+$button-secondary-back-color: #bf616a;// Background color for secondary button color variant.
+$button-secondary-hover-back-color: #bf616a;// Background color for secondary button color variant (hover).
+$button-secondary-fore-color: #eceff4;// Text color for secondary button color variant.
+@include make-button-alt-color ($button-secondary-name, $button-secondary-back-color, $button-secondary-hover-back-color, $button-secondary-fore-color);
+
+$button-tertiary-name: 'tertiary'; // Class name for tertiary button color variant.
+$button-tertiary-back-color: #a3be8c;// Background color for tertiary button color variant.
+$button-tertiary-hover-back-color: #a3be8c;// Background color for tertiary button color variant (hover).
+$button-tertiary-fore-color: #434c5e;// Text color for tertiary button color variant.
+@include make-button-alt-color ($button-tertiary-name, $button-tertiary-back-color, $button-tertiary-hover-back-color, $button-tertiary-fore-color);
+
+$button-inverse-name: 'inverse'; // Class name for inverse button color variant.
+$button-inverse-back-color: #3b4252;// Background color for inverse button color variant.
+$button-inverse-hover-back-color: #2e3440;// Background color for inverse button color variant (hover).
+$button-inverse-fore-color: #eceff4;// Text color for inverse button color variant.
+@include make-button-alt-color ($button-inverse-name, $button-inverse-back-color, $button-inverse-hover-back-color, $button-inverse-fore-color);
+
+$button-small-name: 'small'; // Class name, padding and margin for small button size variant.
+$button-small-padding: calc(0.5 * var(#{$universal-padding-var})) calc(0.75 * var(#{$universal-padding-var}));
+$button-small-margin:  var(#{$universal-margin-var});
+@include make-button-alt-size ($button-small-name, $button-small-padding, $button-small-margin);
+
+$button-large-name: 'large'; // Class name, padding and margin for large button size variant.
+$button-large-padding: calc(1.5 * var(#{$universal-padding-var})) calc(2 * var(#{$universal-padding-var}));
+$button-large-margin:  var(#{$universal-margin-var});
+@include make-button-alt-size ($button-large-name, $button-large-padding, $button-large-margin);
+
+$header-height: 3.1875rem; // Height of the header element.
+$header-back-color: #eceff4; // Background color for the header element.
+$header-hover-back-color: #e5e9f0; // Background color for the header element (hover).
+$header-fore-color: #3b4252; // Text color for the header element.
+$header-border-color: #e5e9f0; // Border color for the header element.
+$nav-back-color: #eceff4; // Background color for the nav element.
+$nav-hover-back-color: #e5e9f0; // Background color for the nav element (hover).
+$nav-fore-color: #3b4252; // Text color for the nav element.
+$nav-border-color: #e5e9f0; // Border color for the nav element.
+$nav-link-color: #88c0d0; // Color for link in the nav element.
+$footer-fore-color: #3b4252; // Text color for the footer element.
+$footer-back-color: #eceff4; // Background color for footer nav element.
+$footer-border-color: #e5e9f0; // Border color for the footer element.
+$footer-link-color: #88c0d0; // Color for link in the footer element.
+$drawer-back-color: #eceff4; // Background color for the drawer component.
+$drawer-border-color: #e5e9f0; // Border color for the drawer component.
+$drawer-hover-back-color: #e5e9f0; // Background color for the drawer component's close (hover).
+$drawer-close-color: #3b4252; // Color of the close element for the drawer component.
+$header-logo-font-size: 1.75rem; // Font size for the header logo element.
+$nav-sublink-depth: 2; // Amount of subcategory classes to add.
+$footer-font-size: 0.875rem; // Font size for text in footer element.
+$drawer-toggle-font-size: 1.5em; // Font size for the drawer component's toggle. (prefer em units)
+$drawer-width: 320px; // Width of the drawer component.
+$drawer-close-size: 2rem; // Size of the close element for the drawer component.
+$drawer-mobile-breakpoint: $mobile-breakpoint; // Mobile breakpoint for the drawer component.
+
+@import '../mini/navigation';
+
+$table-mobile-breakpoint: $mobile-breakpoint; // Breakpoint for  mobile view.
+$table-max-height: 400px; // Maximum height of 
 elements (non-horizontal).
+$table-caption-font-size: 1.5rem; // Font size for 
 elements.
+$table-mobile-card-label: 'data-label'; // Attribute used to replace column headers in mobile view.
+$table-mobile-label-font-weight: 600; // Font weight for column header labels in mobile view.
+$table-border-color: #d8dee9; // Border color for  elements.
+$table-border-separator-color: #434c5e; // Border color for the border between  and .
+$table-th-back-color:  #e5e9f0; // Background color for 
 elements.
+$table-th-fore-color: #2e3440; // Text color for  elements.
+$table-td-back-color: #eceff4; // Background color for  elements.
+$table-td-fore-color: #2e3440; // Text color for  elements.
+$table-td-alt-back-color: #e5e9f0; // Alternative background color for  elements in striped tables.
+$table-td-hover-back-color: #88c0d0; // Hover background color for  elements in hoverable tables.
+
+@import '../mini/table';
+
+$mark-back-color: #5e81ac; // Background color for 
+$mark-fore-color: #fafafa; // Text color for 
+$mark-font-size: 0.95em; // Font size for 
+$mark-line-height: 1em; // Line height for 
+$toast-back-color: #2e3440; // Background color for toast component
+$toast-fore-color: #eceff4; // Text color for toast component
+$tooltip-back-color: #2e3440; // Background color for tooltip component
+$tooltip-fore-color: #eceff4; // Text color for tooltip component
+$modal-overlay-color: rgba(0,0,0,0.45); // Overlay color for modal dialog component
+$modal-close-color: #3b4252; // Text color for the close button of the modal dialog component
+$modal-close-hover-back-color: #e5e9f0; // Background color for the close button of the modal dialog component (on hover/focus)
+$modal-close-size: 1.75rem; // Font size for the close button of the modal dialog component
+$collapse-label-height: 1.5rem; // Height for the labels in the collapse component
+$collapse-content-max-height: 400px; // Max height for the content panes in the collapse component
+$collapse-label-back-color: #e5e9f0; // Background color for labels in the collapse component
+$collapse-label-fore-color: #2e3440; // Text color for labels in the collapse component
+$collapse-label-hover-back-color: #e5e9f0; // Background color for labels in the collapse component (hover)
+$collapse-selected-label-back-color: #e5e9f0; // Background color for selected labels in the collapse component
+$collapse-border-color: #e5e9f0; // Border color for collapse component
+$collapse-selected-label-border-color: #88c0d0; // Border color for collapse component's selected labels
+$collapse-content-back-color: #fafafa; // Background color for collapse component's content panes
+
+@import '../mini/contextual';
+
+/*
+	 Custom elements for contextual background elements, toasts and tooltips.
+*/
+$mark-secondary-name: 'secondary'; // Class name for secondary  color variant.
+$mark-secondary-back-color: #bf616a; // Background color for secondary  color variant.
+@include make-mark-alt-color ($mark-secondary-name, $mark-secondary-back-color);
+
+$mark-tertiary-name: 'tertiary';  // Class name for tertiary  color variant.
+$mark-tertiary-back-color: #a3be8c; // Background color for tertiary  color variant.
+@include make-mark-alt-color ($mark-tertiary-name, $mark-tertiary-back-color);
+
+$mark-tag-name: 'tag'; // Class name, padding and border radius for tag  size variant.
+$mark-tag-padding: calc(var(#{$universal-padding-var})/2) var(#{$universal-padding-var});
+$mark-tag-border-radius: 1em;
+@include make-mark-alt-size ($mark-tag-name, $mark-tag-padding, $mark-tag-border-radius);
+
+$progress-back-color: #e5e9f0; // Background color of .
+$progress-fore-color: #434c5e; // Foreground color of .
+$progress-height: 0.75rem; // Height of .
+$progress-max-value: 1000; // Arithmetic max value of  - use integer values.
+$progress-inline-width: 60%; // Width of inline  elements.
+$spinner-donut-size: 1.25rem; // Size of the spinner donuts
+$spinner-donut-border-thickness: 0.25rem; // Border thickness for spinner donuts
+$spinner-donut-back-color: #d8dee9; // Background color for spinner donuts
+$spinner-donut-fore-color: #434c5e; // Foreground color for spinner donuts
+
+@import '../mini/progress';
+
+/*
+	 Custom elements for progress bars and spinners.
+*/
+$progress-primary-name:         'primary';   // Class name for primary  color variant.
+$progress-primary-fore-color:   #5e81ac;     // Foreground color for primary  color variant.
+@include make-progress-alt-color ($progress-primary-name, $progress-primary-fore-color);
+
+$progress-secondary-name:     'secondary';   // Class name for secondary  color variant.
+$progress-secondary-fore-color: #bf616a;     // Foreground color for secondary  color variant.
+@include make-progress-alt-color ($progress-secondary-name, $progress-secondary-fore-color);
+
+$progress-tertiary-name:       'tertiary';   // Class name for tertiary  color variant.
+$progress-tertiary-fore-color:   #a3be8c;    // Foreground color for tertiary  color variant.
+@include make-progress-alt-color ($progress-tertiary-name, $progress-tertiary-fore-color);
+
+$spinner-donut-primary-name:         'primary';   // Class name for primary spinner donut color variant.
+$spinner-donut-primary-fore-color:   #5e81ac;     // Foreground color for primary spinner donut color variant.
+@include make-spinner-donut-alt-color ($spinner-donut-primary-name, $spinner-donut-primary-fore-color);
+
+$spinner-donut-secondary-name:     'secondary';   // Class name for secondary spinner donut color variant.
+$spinner-donut-secondary-fore-color: #bf616a;     // Foreground color for secondary spinner donut color variant.
+@include make-spinner-donut-alt-color ($spinner-donut-secondary-name, $spinner-donut-secondary-fore-color);
+
+$spinner-donut-tertiary-name:       'tertiary';   // Class name for tertiary spinner donut color variant.
+$spinner-donut-tertiary-fore-color:   #a3be8c;    // Foreground color for tertiary spinner donut color variant.
+@include make-spinner-donut-alt-color ($spinner-donut-tertiary-name, $spinner-donut-tertiary-fore-color);
+
+
+@import '../mini/icon';
+
+$box-shadow-generic: 0 4*$__1px 4*$__1px 0 rgba(0,0,0,0.125),  0 2*$__1px 2*$__1px -2*$__1px rgba(0,0,0,0.125);
+$border-generic-color: rgba(0,0,0,0.3); // Border color for bordered elements.
+
+@import '../mini/utility';