Changeset 35e1834


Ignore:
Timestamp:
Mar 24, 2021, 4:51:17 PM (4 years ago)
Author:
Mikhail Kirillov <w96k@…>
Branches:
master
Children:
cf4ca54
Parents:
a64dd1d
Message:

Change blog design

Files:
6 edited

Legend:

Unmodified
Added
Removed

  • .emacs

    ra64dd1d r35e1834  
    1717          " allowfullscreen>%s</iframe>"))
    1818
     19(defvar youtube-iframe-format
     20  ;; You may want to change your width and height.
     21  (concat "<iframe id=\"ivplayer\" type=\"text/html\""
     22          "src=\"https://invidiou.site/embed/%s\""
     23          " frameborder=\"0\""
     24          " allowfullscreen>%s</iframe>"))
     25
    1926(defvar local-video-format
    2027  ;; You may want to change your width and height.
    … …  
    3138   (cl-case backend
    3239     (html (format peertube-iframe-format
     40                   path (or desc "")))
     41     (latex (format "\href{%s}{%s}"
     42                    path (or desc "video"))))))
     43
     44(org-add-link-type
     45 "youtube"
     46 (lambda (handle)
     47   (browse-url
     48    (concat "https://invidiou.site/embed/"
     49            handle)))
     50 (lambda (path desc backend)
     51   (cl-case backend
     52     (html (format youtube-iframe-format
    3353                   path (or desc "")))
    3454     (latex (format "\href{%s}{%s}"
    … …  
    5474        ("blog-styles"
    5575         :base-directory ,(concat current-folder "public")
    56          :base-extension "jpg\\|gif\\|svg\\|png\\|ico\\|css\\|txt\\|pdf\\|webm\\|mp4"
     76         :base-extension "jpg\\|webp\\|gif\\|svg\\|png\\|ico\\|css\\|txt\\|pdf\\|webm\\|mp4\\|mov"
    5777         :publishing-directory ,(concat current-folder "dist/public")
    5878         :recursive t
    … …  
    7696         :html-preamble "
    7797<header class=\"navbar\">
    78 <a href=\"/\" class=\"logo\">@w96k</a>
    79 <a class=\"button\" href=\"/about.html\">Обо мне</a>
     98<a href=\"/\" class=\"button logo\">~w96k</a>
     99<a class=\"button\" href=\"/about.html\">whoami</a>
    80100</header>"
    81101
    … …  
    116136  <div align=\"center\">
    117137    <small>
    118       <p>Содержимое доступно по лицензии
     138      <p>Содержимое доступно по лицензии 
    119139        <a href=\"https://creativecommons.org/licenses/by-sa/4.0/deed.ru\">
    120           Creative Commons «Attribution-ShareAlike» («Атрибуция — На тех же условиях») 4.0 Всемирная (CC BY-SA 4.0)
     140          Creative Commons «Attribution-ShareAlike» 4.0 Всемирная (CC BY-SA 4.0)
    121141        </a>
    122142      </p>
    123       <p>Исходный код доступен по лицензии GNU General Public License Version 3</p>
     143      <p>Исходный код доступен по лицензии
     144        <a href=\"https://www.gnu.org/licenses/gpl-3.0.ru.html\">
     145          GNU General Public License Version 3
     146        </a>
     147      </p>
    124148      <p><a href=\"/legal.html\">Подробнее о правах</a></p>
    125149    </small>

  • content/about.org

    ra64dd1d r35e1834  
    11#+Title: Обо мне: Кириллов Михаил
     2#+OPTIONS: toc:nil
    23
    34#+BEGIN_EXPORT html
    … …  
    78  <img src="/public/images/w96k.png" class="shadowed rounded" style="max-width: 180px; width: 100%;">
    89  <div>
    9   <a href="http://fsf.org/">
    10     <img src="/public/images/fsf.png" class="shadowed rounded">
    11   </a>
    12   </div>
    13   <div>
    14 
    15    
     10    <a href="http://fsf.org/">
     11      <img src="/public/images/fsf.png" class="shadowed rounded">
     12    </a>
    1613  </div>
    1714</div>
    … …  
    2623  <p>Разработчик. Люблю функциональное
    2724программирование, LISP и движение за свободное программное
    28 обеспечение.</p>
     25обеспечение. Я использую исключительно свободное программное обеспечение
     26и являюсь давним пользователем свободной ОС
     27<a href="http://guix.gnu.org">GNU Guix</a> и свободного текстового
     28редактора <a href="https://www.gnu.org/software/emacs/">GNU Emacs</a>.
     29  </p>
    2930
    3031<div class="row">
    … …  
    9798<td>
    9899<figure>
    99   <img src="/public/images/ocaml.png">
    100 </figure>
    101 </td>
    102 <td>
    103 <figure>
    104100  <img src="/public/images/python.png">
    105101</figure>

  • content/index.org

    ra64dd1d r35e1834  
    5050  финансируют мою работу над статьями и проектами.
    5151  #+BEGIN_EXPORT html
    52   <a href="https://liberapay.com/w96k/donate"><button>Donate</button></a>
     52  <a class="button" href="https://liberapay.com/w96k/donate">Donate</a>
    5353  #+END_EXPORT
    5454

  • content/sitemap.org

    ra64dd1d r35e1834  
    88- [[file:emacs.org][Конфигурация Emacs]]
    99- [[file:cv.org][Curriculum Vitae]]
     10- [[file:saharovo-short.org][Незаконное задержание и арест в Сахарово]]
    1011- posts
    1112  - [[file:posts/libreboot-x200t.org][Libreboot X200T]]

  • public/css/custom.css

    ra64dd1d r35e1834  
    55article,
    66#footnotes {
    7     max-width: calc(80ch + 4em);
     7    max-width: calc(70ch + 4em);
    88    border-radius: 0.1em;
    99    margin: var(--universal-padding);
    … …  
    1212    box-shadow: 0 1px 3px rgba(0,0,0,.1);
    1313    position: relative;
     14    border-radius: var(--universal-border-radius);
     15}
     16
     17article p {
     18  word-break: break-word;
     19  hyphens: auto;
     20  text-align: justify;
    1421}
    1522
    … …  
    2431
    2532.navbar {
    26     background: #fefefe;
    2733    border: 0;
    2834}
    … …  
    6470
    6571#preamble {
    66     max-width: calc(80ch + 6em);
     72    max-width: calc(70ch + 6em);
    6773    margin: var(--universal-margin);
    68     box-shadow: 0 1px 3px rgba(0,0,0,.1);
    6974}
    7075
    7176#postamble {
    7277    margin: var(--universal-margin);
    73     max-width: calc(80ch + 6em);
    74 }
    75 
    76 #meta {
     78    max-width: calc(70ch + 6em);
     79}
     80
     81#meta p {
    7782    text-align: right;
    7883}
    7984
    80 #copyright {
     85#copyright p {
    8186    text-align: center;
    8287}
    … …  
    105110    font-size: 12pt;
    106111    position: fixed;
    107     left: 95ch;
    108     top: calc(var(--universal-margin) + 0.5em);
     112    left: 85ch;
     113    top: calc(var(--universal-margin) + 3.9rem);
    109114    background: #fefefe;
    110115    line-height: 12pt;
    111116    box-shadow: 0 1px 3px rgba(0,0,0,.1);
    112117    border: none;
    113     max-height: calc(100% - 2 * (var(--universal-margin) + 0.5em) - 9.6em);
     118    max-height: calc(100% - 2 * (var(--universal-margin) + 0.5em) - 9em);
    114119    overflow: auto;
     120    max-width: 30ch;
     121    border-radius: var(--universal-border-radius);
    115122}
    116123
    … …  
    121128#table-of-contents h2 {
    122129    font-size: 13pt;
     130    margin: var(--universal-margin);
     131    margin-top: calc(2 * var(--universal-margin));
    123132    border: 0;
    124133    font-weight: 400;
    … …  
    142151    display: block;
    143152    text-align: left;
    144     max-width: 38ch;
     153    max-width: 35ch;
    145154}
    146155
    … …  
    150159
    151160.licenses {
    152     margin-top: 0.75em !important;
     161    text-align: left;
     162    margin-top: 0.3em !important;
    153163}
    154164
    … …  
    178188
    179189.abstract {
    180     font-style: italic;
    181190    background: var(--nav-hover-back-color);
    182191    border-radius: 0.05em;
     192    margin: 0 -1em;
     193    padding: 0.25em 1em;
    183194}
    184195
    … …  
    222233.org-webring .org-webring-article-title {
    223234    font-size: 0.8rem;
    224     margin: 1em;
    225235    font-weight: bold;
    226236}
    … …  
    266276.org-webring .org-webring-article-summary {
    267277    font-size: 0.8rem;
    268     margin: 0 1em 1em 1em;
    269278    flex: 1 1 0;
    270279}
    … …  
    316325}
    317326
     327.org-webring > h4 {
     328    display: none;
     329}
     330
    318331video {
    319332    max-width: 100%;
    320 }
     333    max-height: 40em;
     334    display: block;
     335    margin: 0 auto;
     336}

  • public/css/mini.css

    ra64dd1d r35e1834  
    1111/* Core module CSS variable definitions */
    1212:root {
    13   --fore-color: #111;
    14   --secondary-fore-color: #444;
    15   --back-color: #f8f8f8;
    16   --secondary-back-color: #f0f0f0;
    17   --blockquote-color: #f57c00;
    18   --pre-color: #1565c0;
    19   --border-color: #aaa;
    20   --secondary-border-color: #ddd;
    21   --heading-ratio: 1.19;
    22   --universal-margin: 0.5rem;
    23   --universal-padding: 0.5rem;
    24   --universal-border-radius: 0.125rem;
    25   --a-link-color: #0277bd;
    26   --a-visited-color: #01579b;
     13    --fore-color: #111;
     14    --secondary-fore-color: #444;
     15    --back-color: #f8f8f8;
     16    --secondary-back-color: #f0f0f0;
     17    --blockquote-color: #f57c00;
     18    --pre-color: #1565c0;
     19    --border-color: #aaa;
     20    --secondary-border-color: #ddd;
     21    --heading-ratio: 1.125;
     22    --universal-margin: 0.5rem;
     23    --universal-padding: 0.5rem;
     24    --universal-border-radius: 0.2rem;
     25    --a-link-color: #0277bd;
     26    --a-visited-color: #01579b;
    2727}
    2828
    2929html {
    30   font-size: 16px;
     30    font-size: 16px;
    3131}
    3232
    3333a, b, del, em, i, ins, q, span, strong, u {
    34   font-size: 1em;
     34    font-size: 1em;
    3535}
    3636
    3737html, * {
    38   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, sans-serif;
    39   line-height: 1.5;
    40   -webkit-text-size-adjust: 100%;
     38    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, sans-serif;
     39    line-height: 1.25;
     40    -webkit-text-size-adjust: 100%;
    4141}
    4242
    4343* {
    44   font-size: 1rem;
     44    font-size: 1rem;
    4545}
    4646
    4747body {
    48   margin: 0;
    49   color: var(--fore-color);
    50   background: var(--back-color);
     48    margin: 0;
     49    color: var(--fore-color);
     50    background: var(--back-color);
    5151}
    5252
    5353details {
    54   display: block;
     54    display: block;
    5555}
    5656
    5757summary {
    58   display: list-item;
     58    display: list-item;
    5959}
    6060
    6161abbr[title] {
    62   border-bottom: none;
    63   text-decoration: underline dotted;
     62    border-bottom: none;
     63    text-decoration: underline dotted;
    6464}
    6565
    6666input {
    67   overflow: visible;
     67    overflow: visible;
    6868}
    6969
    7070img {
    71   max-width: 100%;
    72   height: auto;
     71    max-width: 100%;
     72    height: auto;
    7373}
    7474
    7575h1, h2, h3, h4, h5, h6 {
    76   line-height: 1.2;
    77   margin: calc(1.5 * var(--universal-margin)) var(--universal-margin);
    78   font-weight: 500;
     76    margin: var(--universal-margin);
     77    font-weight: 500;
     78    padding: 0.65em 0 0.35em 0;
     79}
     80
     81h3, h4, h5, h6 {
     82    border-bottom: 1px solid #cccccc;
    7983}
    8084
    8185h1 small, h2 small, h3 small, h4 small, h5 small, h6 small {
    82   color: var(--secondary-fore-color);
    83   display: block;
    84   margin-top: -0.25rem;
     86    color: var(--secondary-fore-color);
     87    display: block;
     88    margin-top: -0.25rem;
    8589}
    8690
    8791h1 {
    88   font-size: calc(1rem * var(--heading-ratio) * var(--heading-ratio) * var(--heading-ratio) * var(--heading-ratio));
     92    font-size: calc(1rem * var(--heading-ratio) * var(--heading-ratio) * var(--heading-ratio) * var(--heading-ratio));
    8993}
    9094
    9195h2 {
    92   font-size: calc(1rem * var(--heading-ratio) * var(--heading-ratio) * var(--heading-ratio));
     96    font-size: calc(1rem * var(--heading-ratio) * var(--heading-ratio) * var(--heading-ratio));
    9397}
    9498
    9599h3 {
    96   font-size: calc(1rem * var(--heading-ratio) * var(--heading-ratio));
     100    font-size: calc(1rem * var(--heading-ratio) * var(--heading-ratio));
    97101}
    98102
    99103h4 {
    100   font-size: calc(1rem * var(--heading-ratio));
     104    font-size: calc(1rem * var(--heading-ratio));
    101105}
    102106
    103107h5 {
    104   font-size: 1rem;
     108    font-size: 1rem;
    105109}
    106110
    107111h6 {
    108   font-size: calc(1rem / var(--heading-ratio));
    109 }
    110 
    111 p {
    112   margin: var(--universal-margin);
     112    font-size: calc(1rem / var(--heading-ratio));
     113}
     114
     115p { 
     116    margin: var(--universal-margin);
    113117}
    114118
    115119ol, ul {
    116   margin: var(--universal-margin);
    117   padding-left: calc(2 * var(--universal-margin));
     120    margin: var(--universal-margin);
     121    padding-left: calc(2 * var(--universal-margin));
    118122}
    119123
    120124b, strong {
    121   font-weight: 700;
     125    font-weight: 700;
    122126}
    123127
    124128hr {
    125   box-sizing: content-box;
    126   border: 0;
    127   line-height: 1.25em;
    128   margin: var(--universal-margin);
    129   height: 0.0625rem;
    130   background: linear-gradient(to right, transparent, var(--border-color) 20%, var(--border-color) 80%, transparent);
     129    box-sizing: content-box;
     130    border: 0;
     131    line-height: 1.25em;
     132    margin: var(--universal-margin);
     133    height: 0.0625rem;
     134    background: linear-gradient(to right, transparent, var(--border-color) 20%, var(--border-color) 80%, transparent);
    131135}
    132136
    133137blockquote {
    134   display: block;
    135   position: relative;
    136   font-style: italic;
    137   color: var(--secondary-fore-color);
    138   margin: var(--universal-margin);
    139   padding: calc(3 * var(--universal-padding));
    140   border: 0.0625rem solid var(--secondary-border-color);
    141   border-left: 0.375rem solid var(--blockquote-color);
    142   border-radius: 0 var(--universal-border-radius) var(--universal-border-radius) 0;
     138    display: block;
     139    position: relative;
     140    font-style: italic;
     141    color: var(--secondary-fore-color);
     142    margin: calc(1.5 * var(--universal-margin)) var(--universal-margin);
     143    padding: calc(3 * var(--universal-padding));
     144    border: 0.0625rem solid var(--secondary-border-color);
     145    border-left: 0.375rem solid var(--blockquote-color);
     146    border-radius: 0 var(--universal-border-radius) var(--universal-border-radius) 0;
    143147}
    144148
    145149blockquote:before {
    146   position: absolute;
    147   top: calc(0rem - var(--universal-padding));
    148   left: 0;
    149   font-family: sans-serif;
    150   font-size: 3rem;
    151   font-weight: 700;
    152   content: "\201c";
    153   color: var(--blockquote-color);
     150    position: absolute;
     151    top: calc(0rem - var(--universal-padding));
     152    left: 0;
     153    font-family: sans-serif;
     154    font-size: 3rem;
     155    font-weight: 700;
     156    content: "\201c";
     157    color: var(--blockquote-color);
    154158}
    155159
    156160blockquote[cite]:after {
    157   font-style: normal;
    158   font-size: 0.75em;
    159   font-weight: 700;
    160   content: "\a—  " attr(cite);
    161   white-space: pre;
     161    font-style: normal;
     162    font-size: 0.75em;
     163    font-weight: 700;
     164    content: "\a—  " attr(cite);
     165    white-space: pre;
    162166}
    163167
    164168code, kbd, pre, samp {
    165   font-family: Menlo, Consolas, monospace;
    166   font-size: 0.85em;
     169    font-family: Menlo, Consolas, monospace;
     170    font-size: 0.85em;
    167171}
    168172
    169173code {
    170   background: var(--secondary-back-color);
    171   border-radius: var(--universal-border-radius);
    172   padding: calc(var(--universal-padding) / 4) calc(var(--universal-padding) / 2);
     174    background: var(--secondary-back-color);
     175    border-radius: var(--universal-border-radius);
     176    padding: calc(var(--universal-padding) / 4) calc(var(--universal-padding) / 2);
    173177}
    174178
    175179kbd {
    176   background: var(--fore-color);
    177   color: var(--back-color);
    178   border-radius: var(--universal-border-radius);
    179   padding: calc(var(--universal-padding) / 4) calc(var(--universal-padding) / 2);
     180    background: var(--fore-color);
     181    color: var(--back-color);
     182    border-radius: var(--universal-border-radius);
     183    padding: calc(var(--universal-padding) / 4) calc(var(--universal-padding) / 2);
    180184}
    181185
    182186pre {
    183   overflow: auto;
    184   background: var(--secondary-back-color);
    185   padding: calc(1.5 * var(--universal-padding));
    186   margin: var(--universal-margin);
    187   border: 0.0625rem solid var(--secondary-border-color);
    188   border-left: 0.25rem solid var(--pre-color);
    189   border-radius: 0 var(--universal-border-radius) var(--universal-border-radius) 0;
     187    overflow: auto;
     188    background: var(--secondary-back-color);
     189    padding: calc(1.5 * var(--universal-padding));
     190    margin: var(--universal-margin);
     191    border: 0.0625rem solid var(--secondary-border-color);
     192    border-left: 0.25rem solid var(--pre-color);
     193    border-radius: 0 var(--universal-border-radius) var(--universal-border-radius) 0;
    190194}
    191195
    192196sup, sub, code, kbd {
    193   line-height: 0;
    194   position: relative;
    195   vertical-align: baseline;
     197    line-height: 0;
     198    position: relative;
     199    vertical-align: baseline;
    196200}
    197201
    198202small, sup, sub, figcaption {
    199   font-size: 0.75em;
     203    font-size: 0.75em;
    200204}
    201205
    202206sup {
    203   top: -0.5em;
     207    top: -0.5em;
    204208}
    205209
    206210sub {
    207   bottom: -0.25em;
     211    bottom: -0.25em;
    208212}
    209213
    210214figure {
    211   margin: var(--universal-margin);
     215    margin: var(--universal-margin);
    212216}
    213217
    214218figcaption {
    215   color: var(--secondary-fore-color);
     219    color: var(--secondary-fore-color);
    216220}
    217221
    218222a {
    219   text-decoration: none;
     223    text-decoration: none;
     224}
     225
     226article a:hover {
     227    text-decoration: underline;
     228    text-underline-offset: 0.2em;
     229    text-decoration-thickness: 2px;
    220230}
    221231
    222232a:link {
    223   color: var(--a-link-color);
     233    color: var(--a-link-color);
    224234}
    225235
    226236a:visited {
    227   color: var(--a-visited-color);
     237    color: var(--a-visited-color);
    228238}
    229239
    230240a:hover, a:focus {
    231   text-decoration: underline;
     241    text-decoration: underline;
    232242}
    233243
    … …  
    236246*/
    237247.container {
    238   margin: 0 auto;
    239   padding: 0 calc(1.5 * var(--universal-padding));
     248    margin: 0 auto;
     249    padding: 0 calc(1.5 * var(--universal-padding));
    240250}
    241251
    242252.row {
    243   box-sizing: border-box;
    244   display: flex;
    245   flex: 0 1 auto;
    246   flex-flow: row wrap;
     253    box-sizing: border-box;
     254    display: flex;
     255    flex: 0 1 auto;
     256    flex-flow: row wrap;
    247257}
    248258
    … …  
    251261[class^='col-sm-offset-'],
    252262.row[class*='cols-sm-'] > * {
    253   box-sizing: border-box;
    254   flex: 0 0 auto;
    255   padding: 0 calc(var(--universal-padding) / 2);
    256 }
    257 
    258 .col-sm,
    259 .row.cols-sm > * {
    260   max-width: 100%;
    261   flex-grow: 1;
    262   flex-basis: 0;
    263 }
    264 
    265 .col-sm-1,
    266 .row.cols-sm-1 > * {
    267   max-width: 8.33333%;
    268   flex-basis: 8.33333%;
    269 }
    270 
    271 .col-sm-offset-0 {
    272   margin-left: 0;
    273 }
    274 
    275 .col-sm-2,
    276 .row.cols-sm-2 > * {
    277   max-width: 16.66667%;
    278   flex-basis: 16.66667%;
    279 }
    280 
    281 .col-sm-offset-1 {
    282   margin-left: 8.33333%;
    283 }
    284 
    285 .col-sm-3,
    286 .row.cols-sm-3 > * {
    287   max-width: 25%;
    288   flex-basis: 25%;
    289 }
    290 
    291 .col-sm-offset-2 {
    292   margin-left: 16.66667%;
    293 }
    294 
    295 .col-sm-4,
    296 .row.cols-sm-4 > * {
    297   max-width: 33.33333%;
    298   flex-basis: 33.33333%;
    299 }
    300 
    301 .col-sm-offset-3 {
    302   margin-left: 25%;
    303 }
    304 
    305 .col-sm-5,
    306 .row.cols-sm-5 > * {
    307   max-width: 41.66667%;
    308   flex-basis: 41.66667%;
    309 }
    310 
    311 .col-sm-offset-4 {
    312   margin-left: 33.33333%;
    313 }
    314 
    315 .col-sm-6,
    316 .row.cols-sm-6 > * {
    317   max-width: 50%;
    318   flex-basis: 50%;
    319 }
    320 
    321 .col-sm-offset-5 {
    322   margin-left: 41.66667%;
    323 }
    324 
    325 .col-sm-7,
    326 .row.cols-sm-7 > * {
    327   max-width: 58.33333%;
    328   flex-basis: 58.33333%;
    329 }
    330 
    331 .col-sm-offset-6 {
    332   margin-left: 50%;
    333 }
    334 
    335 .col-sm-8,
    336 .row.cols-sm-8 > * {
    337   max-width: 66.66667%;
    338   flex-basis: 66.66667%;
    339 }
    340 
    341 .col-sm-offset-7 {
    342   margin-left: 58.33333%;
    343 }
    344 
    345 .col-sm-9,
    346 .row.cols-sm-9 > * {
    347   max-width: 75%;
    348   flex-basis: 75%;
    349 }
    350 
    351 .col-sm-offset-8 {
    352   margin-left: 66.66667%;
    353 }
    354 
    355 .col-sm-10,
    356 .row.cols-sm-10 > * {
    357   max-width: 83.33333%;
    358   flex-basis: 83.33333%;
    359 }
    360 
    361 .col-sm-offset-9 {
    362   margin-left: 75%;
    363 }
    364 
    365 .col-sm-11,
    366 .row.cols-sm-11 > * {
    367   max-width: 91.66667%;
    368   flex-basis: 91.66667%;
    369 }
    370 
    371 .col-sm-offset-10 {
    372   margin-left: 83.33333%;
    373 }
    374 
    375 .col-sm-12,
    376 .row.cols-sm-12 > * {
    377   max-width: 100%;
    378   flex-basis: 100%;
    379 }
    380 
    381 .col-sm-offset-11 {
    382   margin-left: 91.66667%;
    383 }
    384 
    385 .col-sm-normal {
    386   order: initial;
    387 }
    388 
    389 .col-sm-first {
    390   order: -999;
    391 }
    392 
    393 .col-sm-last {
    394   order: 999;
    395 }
    396 
    397 @media screen and (min-width: 768px) {
    398   .col-md,
    399   [class^='col-md-'],
    400   [class^='col-md-offset-'],
    401   .row[class*='cols-md-'] > * {
    402263    box-sizing: border-box;
    403264    flex: 0 0 auto;
    404265    padding: 0 calc(var(--universal-padding) / 2);
    405   }
    406   .col-md,
    407   .row.cols-md > * {
     266}
     267
     268.col-sm,
     269.row.cols-sm > * {
    408270    max-width: 100%;
    409271    flex-grow: 1;
    410272    flex-basis: 0;
    411   }
    412   .col-md-1,
    413   .row.cols-md-1 > * {
     273}
     274
     275.col-sm-1,
     276.row.cols-sm-1 > * {
    414277    max-width: 8.33333%;
    415278    flex-basis: 8.33333%;
    416   }
    417   .col-md-offset-0 {
     279}
     280
     281.col-sm-offset-0 {
    418282    margin-left: 0;
    419   }
    420   .col-md-2,
    421   .row.cols-md-2 > * {
     283}
     284
     285.col-sm-2,
     286.row.cols-sm-2 > * {
    422287    max-width: 16.66667%;
    423288    flex-basis: 16.66667%;
    424   }
    425   .col-md-offset-1 {
     289}
     290
     291.col-sm-offset-1 {
    426292    margin-left: 8.33333%;
    427   }
    428   .col-md-3,
    429   .row.cols-md-3 > * {
     293}
     294
     295.col-sm-3,
     296.row.cols-sm-3 > * {
    430297    max-width: 25%;
    431298    flex-basis: 25%;
    432   }
    433   .col-md-offset-2 {
     299}
     300
     301.col-sm-offset-2 {
    434302    margin-left: 16.66667%;
    435   }
    436   .col-md-4,
    437   .row.cols-md-4 > * {
     303}
     304
     305.col-sm-4,
     306.row.cols-sm-4 > * {
    438307    max-width: 33.33333%;
    439308    flex-basis: 33.33333%;
    440   }
    441   .col-md-offset-3 {
     309}
     310
     311.col-sm-offset-3 {
    442312    margin-left: 25%;
    443   }
    444   .col-md-5,
    445   .row.cols-md-5 > * {
     313}
     314
     315.col-sm-5,
     316.row.cols-sm-5 > * {
    446317    max-width: 41.66667%;
    447318    flex-basis: 41.66667%;
    448   }
    449   .col-md-offset-4 {
     319}
     320
     321.col-sm-offset-4 {
    450322    margin-left: 33.33333%;
    451   }
    452   .col-md-6,
    453   .row.cols-md-6 > * {
     323}
     324
     325.col-sm-6,
     326.row.cols-sm-6 > * {
    454327    max-width: 50%;
    455328    flex-basis: 50%;
    456   }
    457   .col-md-offset-5 {
     329}
     330
     331.col-sm-offset-5 {
    458332    margin-left: 41.66667%;
    459   }
    460   .col-md-7,
    461   .row.cols-md-7 > * {
     333}
     334
     335.col-sm-7,
     336.row.cols-sm-7 > * {
    462337    max-width: 58.33333%;
    463338    flex-basis: 58.33333%;
    464   }
    465   .col-md-offset-6 {
     339}
     340
     341.col-sm-offset-6 {
    466342    margin-left: 50%;
    467   }
    468   .col-md-8,
    469   .row.cols-md-8 > * {
     343}
     344
     345.col-sm-8,
     346.row.cols-sm-8 > * {
    470347    max-width: 66.66667%;
    471348    flex-basis: 66.66667%;
    472   }
    473   .col-md-offset-7 {
     349}
     350
     351.col-sm-offset-7 {
    474352    margin-left: 58.33333%;
    475   }
    476   .col-md-9,
    477   .row.cols-md-9 > * {
     353}
     354
     355.col-sm-9,
     356.row.cols-sm-9 > * {
    478357    max-width: 75%;
    479358    flex-basis: 75%;
    480   }
    481   .col-md-offset-8 {
     359}
     360
     361.col-sm-offset-8 {
    482362    margin-left: 66.66667%;
    483   }
    484   .col-md-10,
    485   .row.cols-md-10 > * {
     363}
     364
     365.col-sm-10,
     366.row.cols-sm-10 > * {
    486367    max-width: 83.33333%;
    487368    flex-basis: 83.33333%;
    488   }
    489   .col-md-offset-9 {
     369}
     370
     371.col-sm-offset-9 {
    490372    margin-left: 75%;
    491   }
    492   .col-md-11,
    493   .row.cols-md-11 > * {
     373}
     374
     375.col-sm-11,
     376.row.cols-sm-11 > * {
    494377    max-width: 91.66667%;
    495378    flex-basis: 91.66667%;
    496   }
    497   .col-md-offset-10 {
     379}
     380
     381.col-sm-offset-10 {
    498382    margin-left: 83.33333%;
    499   }
    500   .col-md-12,
    501   .row.cols-md-12 > * {
     383}
     384
     385.col-sm-12,
     386.row.cols-sm-12 > * {
    502387    max-width: 100%;
    503388    flex-basis: 100%;
    504   }
    505   .col-md-offset-11 {
     389}
     390
     391.col-sm-offset-11 {
    506392    margin-left: 91.66667%;
    507   }
    508   .col-md-normal {
     393}
     394
     395.col-sm-normal {
    509396    order: initial;
    510   }
    511   .col-md-first {
     397}
     398
     399.col-sm-first {
    512400    order: -999;
    513   }
    514   .col-md-last {
     401}
     402
     403.col-sm-last {
    515404    order: 999;
    516   }
     405}
     406
     407@media screen and (min-width: 768px) {
     408    .col-md,
     409    [class^='col-md-'],
     410    [class^='col-md-offset-'],
     411    .row[class*='cols-md-'] > * {
     412        box-sizing: border-box;
     413        flex: 0 0 auto;
     414        padding: 0 calc(var(--universal-padding) / 2);
     415    }
     416    .col-md,
     417    .row.cols-md > * {
     418        max-width: 100%;
     419        flex-grow: 1;
     420        flex-basis: 0;
     421    }
     422    .col-md-1,
     423    .row.cols-md-1 > * {
     424        max-width: 8.33333%;
     425        flex-basis: 8.33333%;
     426    }
     427    .col-md-offset-0 {
     428        margin-left: 0;
     429    }
     430    .col-md-2,
     431    .row.cols-md-2 > * {
     432        max-width: 16.66667%;
     433        flex-basis: 16.66667%;
     434    }
     435    .col-md-offset-1 {
     436        margin-left: 8.33333%;
     437    }
     438    .col-md-3,
     439    .row.cols-md-3 > * {
     440        max-width: 25%;
     441        flex-basis: 25%;
     442    }
     443    .col-md-offset-2 {
     444        margin-left: 16.66667%;
     445    }
     446    .col-md-4,
     447    .row.cols-md-4 > * {
     448        max-width: 33.33333%;
     449        flex-basis: 33.33333%;
     450    }
     451    .col-md-offset-3 {
     452        margin-left: 25%;
     453    }
     454    .col-md-5,
     455    .row.cols-md-5 > * {
     456        max-width: 41.66667%;
     457        flex-basis: 41.66667%;
     458    }
     459    .col-md-offset-4 {
     460        margin-left: 33.33333%;
     461    }
     462    .col-md-6,
     463    .row.cols-md-6 > * {
     464        max-width: 50%;
     465        flex-basis: 50%;
     466    }
     467    .col-md-offset-5 {
     468        margin-left: 41.66667%;
     469    }
     470    .col-md-7,
     471    .row.cols-md-7 > * {
     472        max-width: 58.33333%;
     473        flex-basis: 58.33333%;
     474    }
     475    .col-md-offset-6 {
     476        margin-left: 50%;
     477    }
     478    .col-md-8,
     479    .row.cols-md-8 > * {
     480        max-width: 66.66667%;
     481        flex-basis: 66.66667%;
     482    }
     483    .col-md-offset-7 {
     484        margin-left: 58.33333%;
     485    }
     486    .col-md-9,
     487    .row.cols-md-9 > * {
     488        max-width: 75%;
     489        flex-basis: 75%;
     490    }
     491    .col-md-offset-8 {
     492        margin-left: 66.66667%;
     493    }
     494    .col-md-10,
     495    .row.cols-md-10 > * {
     496        max-width: 83.33333%;
     497        flex-basis: 83.33333%;
     498    }
     499    .col-md-offset-9 {
     500        margin-left: 75%;
     501    }
     502    .col-md-11,
     503    .row.cols-md-11 > * {
     504        max-width: 91.66667%;
     505        flex-basis: 91.66667%;
     506    }
     507    .col-md-offset-10 {
     508        margin-left: 83.33333%;
     509    }
     510    .col-md-12,
     511    .row.cols-md-12 > * {
     512        max-width: 100%;
     513        flex-basis: 100%;
     514    }
     515    .col-md-offset-11 {
     516        margin-left: 91.66667%;
     517    }
     518    .col-md-normal {
     519        order: initial;
     520    }
     521    .col-md-first {
     522        order: -999;
     523    }
     524    .col-md-last {
     525        order: 999;
     526    }
    517527}
    518528
    519529@media screen and (min-width: 1280px) {
    520   .col-lg,
    521   [class^='col-lg-'],
    522   [class^='col-lg-offset-'],
    523   .row[class*='cols-lg-'] > * {
    524     box-sizing: border-box;
    525     flex: 0 0 auto;
    526     padding: 0 calc(var(--universal-padding) / 2);
    527   }
    528   .col-lg,
    529   .row.cols-lg > * {
    530     max-width: 100%;
    531     flex-grow: 1;
    532     flex-basis: 0;
    533   }
    534   .col-lg-1,
    535   .row.cols-lg-1 > * {
    536     max-width: 8.33333%;
    537     flex-basis: 8.33333%;
    538   }
    539   .col-lg-offset-0 {
    540     margin-left: 0;
    541   }
    542   .col-lg-2,
    543   .row.cols-lg-2 > * {
    544     max-width: 16.66667%;
    545     flex-basis: 16.66667%;
    546   }
    547   .col-lg-offset-1 {
    548     margin-left: 8.33333%;
    549   }
    550   .col-lg-3,
    551   .row.cols-lg-3 > * {
    552     max-width: 25%;
    553     flex-basis: 25%;
    554   }
    555   .col-lg-offset-2 {
    556     margin-left: 16.66667%;
    557   }
    558   .col-lg-4,
    559   .row.cols-lg-4 > * {
    560     max-width: 33.33333%;
    561     flex-basis: 33.33333%;
    562   }
    563   .col-lg-offset-3 {
    564     margin-left: 25%;
    565   }
    566   .col-lg-5,
    567   .row.cols-lg-5 > * {
    568     max-width: 41.66667%;
    569     flex-basis: 41.66667%;
    570   }
    571   .col-lg-offset-4 {
    572     margin-left: 33.33333%;
    573   }
    574   .col-lg-6,
    575   .row.cols-lg-6 > * {
    576     max-width: 50%;
    577     flex-basis: 50%;
    578   }
    579   .col-lg-offset-5 {
    580     margin-left: 41.66667%;
    581   }
    582   .col-lg-7,
    583   .row.cols-lg-7 > * {
    584     max-width: 58.33333%;
    585     flex-basis: 58.33333%;
    586   }
    587   .col-lg-offset-6 {
    588     margin-left: 50%;
    589   }
    590   .col-lg-8,
    591   .row.cols-lg-8 > * {
    592     max-width: 66.66667%;
    593     flex-basis: 66.66667%;
    594   }
    595   .col-lg-offset-7 {
    596     margin-left: 58.33333%;
    597   }
    598   .col-lg-9,
    599   .row.cols-lg-9 > * {
    600     max-width: 75%;
    601     flex-basis: 75%;
    602   }
    603   .col-lg-offset-8 {
    604     margin-left: 66.66667%;
    605   }
    606   .col-lg-10,
    607   .row.cols-lg-10 > * {
    608     max-width: 83.33333%;
    609     flex-basis: 83.33333%;
    610   }
    611   .col-lg-offset-9 {
    612     margin-left: 75%;
    613   }
    614   .col-lg-11,
    615   .row.cols-lg-11 > * {
    616     max-width: 91.66667%;
    617     flex-basis: 91.66667%;
    618   }
    619   .col-lg-offset-10 {
    620     margin-left: 83.33333%;
    621   }
    622   .col-lg-12,
    623   .row.cols-lg-12 > * {
    624     max-width: 100%;
    625     flex-basis: 100%;
    626   }
    627   .col-lg-offset-11 {
    628     margin-left: 91.66667%;
    629   }
    630   .col-lg-normal {
    631     order: initial;
    632   }
    633   .col-lg-first {
    634     order: -999;
    635   }
    636   .col-lg-last {
    637     order: 999;
    638   }
     530    .col-lg,
     531    [class^='col-lg-'],
     532    [class^='col-lg-offset-'],
     533    .row[class*='cols-lg-'] > * {
     534        box-sizing: border-box;
     535        flex: 0 0 auto;
     536        padding: 0 calc(var(--universal-padding) / 2);
     537    }
     538    .col-lg,
     539    .row.cols-lg > * {
     540        max-width: 100%;
     541        flex-grow: 1;
     542        flex-basis: 0;
     543    }
     544    .col-lg-1,
     545    .row.cols-lg-1 > * {
     546        max-width: 8.33333%;
     547        flex-basis: 8.33333%;
     548    }
     549    .col-lg-offset-0 {
     550        margin-left: 0;
     551    }
     552    .col-lg-2,
     553    .row.cols-lg-2 > * {
     554        max-width: 16.66667%;
     555        flex-basis: 16.66667%;
     556    }
     557    .col-lg-offset-1 {
     558        margin-left: 8.33333%;
     559    }
     560    .col-lg-3,
     561    .row.cols-lg-3 > * {
     562        max-width: 25%;
     563        flex-basis: 25%;
     564    }
     565    .col-lg-offset-2 {
     566        margin-left: 16.66667%;
     567    }
     568    .col-lg-4,
     569    .row.cols-lg-4 > * {
     570        max-width: 33.33333%;
     571        flex-basis: 33.33333%;
     572    }
     573    .col-lg-offset-3 {
     574        margin-left: 25%;
     575    }
     576    .col-lg-5,
     577    .row.cols-lg-5 > * {
     578        max-width: 41.66667%;
     579        flex-basis: 41.66667%;
     580    }
     581    .col-lg-offset-4 {
     582        margin-left: 33.33333%;
     583    }
     584    .col-lg-6,
     585    .row.cols-lg-6 > * {
     586        max-width: 50%;
     587        flex-basis: 50%;
     588    }
     589    .col-lg-offset-5 {
     590        margin-left: 41.66667%;
     591    }
     592    .col-lg-7,
     593    .row.cols-lg-7 > * {
     594        max-width: 58.33333%;
     595        flex-basis: 58.33333%;
     596    }
     597    .col-lg-offset-6 {
     598        margin-left: 50%;
     599    }
     600    .col-lg-8,
     601    .row.cols-lg-8 > * {
     602        max-width: 66.66667%;
     603        flex-basis: 66.66667%;
     604    }
     605    .col-lg-offset-7 {
     606        margin-left: 58.33333%;
     607    }
     608    .col-lg-9,
     609    .row.cols-lg-9 > * {
     610        max-width: 75%;
     611        flex-basis: 75%;
     612    }
     613    .col-lg-offset-8 {
     614        margin-left: 66.66667%;
     615    }
     616    .col-lg-10,
     617    .row.cols-lg-10 > * {
     618        max-width: 83.33333%;
     619        flex-basis: 83.33333%;
     620    }
     621    .col-lg-offset-9 {
     622        margin-left: 75%;
     623    }
     624    .col-lg-11,
     625    .row.cols-lg-11 > * {
     626        max-width: 91.66667%;
     627        flex-basis: 91.66667%;
     628    }
     629    .col-lg-offset-10 {
     630        margin-left: 83.33333%;
     631    }
     632    .col-lg-12,
     633    .row.cols-lg-12 > * {
     634        max-width: 100%;
     635        flex-basis: 100%;
     636    }
     637    .col-lg-offset-11 {
     638        margin-left: 91.66667%;
     639    }
     640    .col-lg-normal {
     641        order: initial;
     642    }
     643    .col-lg-first {
     644        order: -999;
     645    }
     646    .col-lg-last {
     647        order: 999;
     648    }
    639649}
    640650
    641651/* Card component CSS variable definitions */
    642652:root {
    643   --card-back-color: #f8f8f8;
    644   --card-fore-color: #111;
    645   --card-border-color: #ddd;
     653    --card-back-color: #f8f8f8;
     654    --card-fore-color: #111;
     655    --card-border-color: #ddd;
    646656}
    647657
    648658.card {
    649   display: flex;
    650   flex-direction: column;
    651   justify-content: space-between;
    652   align-self: center;
    653   position: relative;
    654   width: 100%;
    655   background: var(--card-back-color);
    656   color: var(--card-fore-color);
    657   border: 0.0625rem solid var(--card-border-color);
    658   border-radius: var(--universal-border-radius);
    659   margin: var(--universal-margin);
    660   overflow: hidden;
     659    display: flex;
     660    flex-direction: column;
     661    justify-content: space-between;
     662    align-self: center;
     663    position: relative;
     664    width: 100%;
     665    background: var(--card-back-color);
     666    color: var(--card-fore-color);
     667    border: 0.0625rem solid var(--card-border-color);
     668    border-radius: var(--universal-border-radius);
     669    margin: var(--universal-margin);
     670    overflow: hidden;
    661671}
    662672
    663673@media screen and (min-width: 320px) {
    664   .card {
    665     max-width: 320px;
    666   }
     674    .card {
     675        max-width: 320px;
     676    }
    667677}
    668678
    669679.card > .section {
    670   background: var(--card-back-color);
    671   color: var(--card-fore-color);
    672   box-sizing: border-box;
    673   margin: 0;
    674   border: 0;
    675   border-radius: 0;
    676   border-bottom: 0.0625rem solid var(--card-border-color);
    677   padding: var(--universal-padding);
    678   width: 100%;
     680    background: var(--card-back-color);
     681    color: var(--card-fore-color);
     682    box-sizing: border-box;
     683    margin: 0;
     684    border: 0;
     685    border-radius: 0;
     686    border-bottom: 0.0625rem solid var(--card-border-color);
     687    padding: var(--universal-padding);
     688    width: 100%;
    679689}
    680690
    681691.card > .section.media {
    682   height: 200px;
    683   padding: 0;
    684   -o-object-fit: cover;
    685   object-fit: cover;
     692    height: 200px;
     693    padding: 0;
     694    -o-object-fit: cover;
     695    object-fit: cover;
    686696}
    687697
    688698.card > .section:last-child {
    689   border-bottom: 0;
     699    border-bottom: 0;
    690700}
    691701
    … …  
    694704*/
    695705@media screen and (min-width: 240px) {
    696   .card.small {
    697     max-width: 240px;
    698   }
     706    .card.small {
     707        max-width: 240px;
     708    }
    699709}
    700710
    701711@media screen and (min-width: 480px) {
    702   .card.large {
    703     max-width: 480px;
    704   }
     712    .card.large {
     713        max-width: 480px;
     714    }
    705715}
    706716
    707717.card.fluid {
    708   max-width: 100%;
    709   width: auto;
     718    max-width: 100%;
     719    width: auto;
    710720}
    711721
    712722.card.warning {
    713   --card-back-color: #ffca28;
    714   --card-border-color: #e8b825;
     723    --card-back-color: #ffca28;
     724    --card-border-color: #e8b825;
    715725}
    716726
    717727.card.error {
    718   --card-back-color: #b71c1c;
    719   --card-fore-color: #f8f8f8;
    720   --card-border-color: #a71a1a;
     728    --card-back-color: #b71c1c;
     729    --card-fore-color: #f8f8f8;
     730    --card-border-color: #a71a1a;
    721731}
    722732
    723733.card > .section.dark {
    724   --card-back-color: #e0e0e0;
     734    --card-back-color: #e0e0e0;
    725735}
    726736
    727737.card > .section.double-padded {
    728   padding: calc(1.5 * var(--universal-padding));
     738    padding: calc(1.5 * var(--universal-padding));
    729739}
    730740
    … …  
    734744/* Input_control module CSS variable definitions */
    735745:root {
    736   --form-back-color: #f0f0f0;
    737   --form-fore-color: #111;
    738   --form-border-color: #ddd;
    739   --input-back-color: #f8f8f8;
    740   --input-fore-color: #111;
    741   --input-border-color: #ddd;
    742   --input-focus-color: #0288d1;
    743   --input-invalid-color: #d32f2f;
    744   --button-back-color: #e2e2e2;
    745   --button-hover-back-color: #dcdcdc;
    746   --button-fore-color: #212121;
    747   --button-border-color: transparent;
    748   --button-hover-border-color: transparent;
    749   --button-group-border-color: rgba(124, 124, 124, 0.54);
     746    --form-back-color: #f0f0f0;
     747    --form-fore-color: #111;
     748    --form-border-color: #ddd;
     749    --input-back-color: #f8f8f8;
     750    --input-fore-color: #111;
     751    --input-border-color: #ddd;
     752    --input-focus-color: #0288d1;
     753    --input-invalid-color: #d32f2f;
     754    --button-back-color: #e2e2e2;
     755    --button-hover-back-color: #dcdcdc;
     756    --button-fore-color: #212121;
     757    --button-border-color: transparent;
     758    --button-hover-border-color: transparent;
     759    --button-group-border-color: rgba(124, 124, 124, 0.54);
    750760}
    751761
    752762form {
    753   background: var(--form-back-color);
    754   color: var(--form-fore-color);
    755   border: 0.0625rem solid var(--form-border-color);
    756   border-radius: var(--universal-border-radius);
    757   margin: var(--universal-margin);
    758   padding: calc(2 * var(--universal-padding)) var(--universal-padding);
     763    background: var(--form-back-color);
     764    color: var(--form-fore-color);
     765    border: 0.0625rem solid var(--form-border-color);
     766    border-radius: var(--universal-border-radius);
     767    margin: var(--universal-margin);
     768    padding: calc(2 * var(--universal-padding)) var(--universal-padding);
    759769}
    760770
    761771fieldset {
    762   border: 0.0625rem solid var(--form-border-color);
    763   border-radius: var(--universal-border-radius);
    764   margin: calc(var(--universal-margin) / 4);
    765   padding: var(--universal-padding);
     772    border: 0.0625rem solid var(--form-border-color);
     773    border-radius: var(--universal-border-radius);
     774    margin: calc(var(--universal-margin) / 4);
     775    padding: var(--universal-padding);
    766776}
    767777
    768778legend {
    769   box-sizing: border-box;
    770   display: table;
    771   max-width: 100%;
    772   white-space: normal;
    773   font-weight: 700;
    774   padding: calc(var(--universal-padding) / 2);
     779    box-sizing: border-box;
     780    display: table;
     781    max-width: 100%;
     782    white-space: normal;
     783    font-weight: 700;
     784    padding: calc(var(--universal-padding) / 2);
    775785}
    776786
    777787label {
    778   padding: calc(var(--universal-padding) / 2) var(--universal-padding);
     788    padding: calc(var(--universal-padding) / 2) var(--universal-padding);
    779789}
    780790
    781791.input-group {
    782   display: inline-block;
     792    display: inline-block;
    783793}
    784794
    785795.input-group.fluid {
    786   display: flex;
    787   align-items: center;
    788   justify-content: center;
     796    display: flex;
     797    align-items: center;
     798    justify-content: center;
    789799}
    790800
    791801.input-group.fluid > input {
    792   max-width: 100%;
    793   flex-grow: 1;
    794   flex-basis: 0px;
     802    max-width: 100%;
     803    flex-grow: 1;
     804    flex-basis: 0px;
    795805}
    796806
    797807@media screen and (max-width: 767px) {
    798   .input-group.fluid {
     808    .input-group.fluid {
     809        align-items: stretch;
     810        flex-direction: column;
     811    }
     812}
     813
     814.input-group.vertical {
     815    display: flex;
    799816    align-items: stretch;
    800817    flex-direction: column;
    801   }
    802 }
    803 
    804 .input-group.vertical {
    805   display: flex;
    806   align-items: stretch;
    807   flex-direction: column;
    808818}
    809819
    810820.input-group.vertical > input {
    811   max-width: 100%;
    812   flex-grow: 1;
    813   flex-basis: 0px;
     821    max-width: 100%;
     822    flex-grow: 1;
     823    flex-basis: 0px;
    814824}
    815825
    816826[type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button {
    817   height: auto;
     827    height: auto;
    818828}
    819829
    820830[type="search"] {
    821   -webkit-appearance: textfield;
    822   outline-offset: -2px;
     831    -webkit-appearance: textfield;
     832    outline-offset: -2px;
    823833}
    824834
    825835[type="search"]::-webkit-search-cancel-button,
    826836[type="search"]::-webkit-search-decoration {
    827   -webkit-appearance: none;
     837    -webkit-appearance: none;
    828838}
    829839
    830840input:not([type]), [type="text"], [type="email"], [type="number"], [type="search"],
    831841[type="password"], [type="url"], [type="tel"], [type="checkbox"], [type="radio"], textarea, select {
    832   box-sizing: border-box;
    833   background: var(--input-back-color);
    834   color: var(--input-fore-color);
    835   border: 0.0625rem solid var(--input-border-color);
    836   border-radius: var(--universal-border-radius);
    837   margin: calc(var(--universal-margin) / 2);
    838   padding: var(--universal-padding) calc(1.5 * var(--universal-padding));
     842    box-sizing: border-box;
     843    background: var(--input-back-color);
     844    color: var(--input-fore-color);
     845    border: 0.0625rem solid var(--input-border-color);
     846    border-radius: var(--universal-border-radius);
     847    margin: calc(var(--universal-margin) / 2);
     848    padding: var(--universal-padding) calc(1.5 * var(--universal-padding));
    839849}
    840850
    841851input: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 {
    842   border-color: var(--input-focus-color);
    843   box-shadow: none;
     852    border-color: var(--input-focus-color);
     853    box-shadow: none;
    844854}
    845855
    846856input: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 {
    847   border-color: var(--input-invalid-color);
    848   box-shadow: none;
     857    border-color: var(--input-invalid-color);
     858    box-shadow: none;
    849859}
    850860
    851861input:not([type="button"]):not([type="submit"]):not([type="reset"])[readonly], textarea[readonly], select[readonly] {
    852   background: var(--secondary-back-color);
     862    background: var(--secondary-back-color);
    853863}
    854864
    855865select {
    856   max-width: 100%;
     866    max-width: 100%;
    857867}
    858868
    859869option {
    860   overflow: hidden;
    861   text-overflow: ellipsis;
     870    overflow: hidden;
     871    text-overflow: ellipsis;
    862872}
    863873
    864874[type="checkbox"], [type="radio"] {
    865   -webkit-appearance: none;
    866   -moz-appearance: none;
    867   appearance: none;
    868   position: relative;
    869   height: calc(1rem + var(--universal-padding) / 2);
    870   width: calc(1rem + var(--universal-padding) / 2);
    871   vertical-align: text-bottom;
    872   padding: 0;
    873   flex-basis: calc(1rem + var(--universal-padding) / 2) !important;
    874   flex-grow: 0 !important;
     875    -webkit-appearance: none;
     876    -moz-appearance: none;
     877    appearance: none;
     878    position: relative;
     879    height: calc(1rem + var(--universal-padding) / 2);
     880    width: calc(1rem + var(--universal-padding) / 2);
     881    vertical-align: text-bottom;
     882    padding: 0;
     883    flex-basis: calc(1rem + var(--universal-padding) / 2) !important;
     884    flex-grow: 0 !important;
    875885}
    876886
    877887[type="checkbox"]:checked:before, [type="radio"]:checked:before {
    878   position: absolute;
     888    position: absolute;
    879889}
    880890
    881891[type="checkbox"]:checked:before {
    882   content: '\2713';
    883   font-family: sans-serif;
    884   font-size: calc(1rem + var(--universal-padding) / 2);
    885   top: calc(0rem - var(--universal-padding));
    886   left: calc(var(--universal-padding) / 4);
     892    content: '\2713';
     893    font-family: sans-serif;
     894    font-size: calc(1rem + var(--universal-padding) / 2);
     895    top: calc(0rem - var(--universal-padding));
     896    left: calc(var(--universal-padding) / 4);
    887897}
    888898
    889899[type="radio"] {
    890   border-radius: 100%;
     900    border-radius: 100%;
    891901}
    892902
    893903[type="radio"]:checked:before {
    894   border-radius: 100%;
    895   content: '';
    896   top: calc(0.0625rem + var(--universal-padding) / 2);
    897   left: calc(0.0625rem + var(--universal-padding) / 2);
    898   background: var(--input-fore-color);
    899   width: 0.5rem;
    900   height: 0.5rem;
     904    border-radius: 100%;
     905    content: '';
     906    top: calc(0.0625rem + var(--universal-padding) / 2);
     907    left: calc(0.0625rem + var(--universal-padding) / 2);
     908    background: var(--input-fore-color);
     909    width: 0.5rem;
     910    height: 0.5rem;
    901911}
    902912
    903913:placeholder-shown {
    904   color: var(--input-fore-color);
     914    color: var(--input-fore-color);
    905915}
    906916
    907917::-ms-placeholder {
    908   color: var(--input-fore-color);
    909   opacity: 0.54;
     918    color: var(--input-fore-color);
     919    opacity: 0.54;
    910920}
    911921
    912922button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner {
    913   border-style: none;
    914   padding: 0;
     923    border-style: none;
     924    padding: 0;
    915925}
    916926
    917927button, html [type="button"], [type="reset"], [type="submit"] {
    918   -webkit-appearance: button;
     928    -webkit-appearance: button;
    919929}
    920930
    921931button {
    922   overflow: visible;
    923   text-transform: none;
     932    overflow: visible;
     933    text-transform: none;
    924934}
    925935
    … …  
    927937a.button, label.button, .button,
    928938a[role="button"], label[role="button"], [role="button"] {
    929   display: inline-block;
    930   background: var(--button-back-color);
    931   color: var(--button-fore-color);
    932   border: 0.0625rem solid var(--button-border-color);
    933   border-radius: var(--universal-border-radius);
    934   padding: var(--universal-padding) calc(1.5 * var(--universal-padding));
    935   margin: var(--universal-margin);
    936   text-decoration: none;
    937   cursor: pointer;
    938   transition: background 0.3s;
     939    display: inline-block;
     940    background: var(--button-back-color);
     941    color: var(--button-fore-color);
     942    border: 0.0625rem solid var(--button-border-color);
     943    border-radius: var(--universal-border-radius);
     944    padding: var(--universal-padding) calc(1.5 * var(--universal-padding));
     945    margin: var(--universal-margin);
     946    text-decoration: none;
     947    cursor: pointer;
     948    transition: background 0.3s;
    939949}
    940950
    … …  
    944954a[role="button"]:hover,
    945955a[role="button"]:focus, label[role="button"]:hover, label[role="button"]:focus, [role="button"]:hover, [role="button"]:focus {
    946   background: var(--button-hover-back-color);
    947   border-color: var(--button-hover-border-color);
     956    background: var(--button-hover-back-color);
     957    border-color: var(--button-hover-border-color);
    948958}
    949959
    950960input: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] {
    951   cursor: not-allowed;
    952   opacity: 0.75;
     961    cursor: not-allowed;
     962    opacity: 0.75;
    953963}
    954964
    955965.button-group {
    956   display: flex;
    957   border: 0.0625rem solid var(--button-group-border-color);
    958   border-radius: var(--universal-border-radius);
    959   margin: var(--universal-margin);
     966    display: flex;
     967    border: 0.0625rem solid var(--button-group-border-color);
     968    border-radius: var(--universal-border-radius);
     969    margin: var(--universal-margin);
    960970}
    961971
    962972.button-group > button, .button-group [type="button"], .button-group > [type="submit"], .button-group > [type="reset"],
    963973.button-group > .button, .button-group > [role="button"] {
    964   margin: 0;
    965   max-width: 100%;
    966   flex: 1 1 auto;
    967   text-align: center;
    968   border: 0;
    969   border-radius: 0;
    970   box-shadow: none;
     974    margin: 0;
     975    max-width: 100%;
     976    flex: 1 1 auto;
     977    text-align: center;
     978    border: 0;
     979    border-radius: 0;
     980    box-shadow: none;
    971981}
    972982
    973983.button-group > :not(:first-child) {
    974   border-left: 0.0625rem solid var(--button-group-border-color);
     984    border-left: 0.0625rem solid var(--button-group-border-color);
    975985}
    976986
    977987@media screen and (max-width: 767px) {
    978   .button-group {
    979     flex-direction: column;
    980   }
    981   .button-group > :not(:first-child) {
    982     border: 0;
    983     border-top: 0.0625rem solid var(--button-group-border-color);
    984   }
     988    .button-group {
     989        flex-direction: column;
     990    }
     991    .button-group > :not(:first-child) {
     992        border: 0;
     993        border-top: 0.0625rem solid var(--button-group-border-color);
     994    }
    985995}
    986996
    … …  
    989999*/
    9901000button.primary, [type="button"].primary, [type="submit"].primary, [type="reset"].primary, .button.primary, [role="button"].primary {
    991   --button-back-color: #1976d2;
    992   --button-fore-color: #f8f8f8;
     1001    --button-back-color: #1976d2;
     1002    --button-fore-color: #f8f8f8;
    9931003}
    9941004
    9951005button.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 {
    996   --button-hover-back-color: #1565c0;
     1006    --button-hover-back-color: #1565c0;
    9971007}
    9981008
    9991009button.secondary, [type="button"].secondary, [type="submit"].secondary, [type="reset"].secondary, .button.secondary, [role="button"].secondary {
    1000   --button-back-color: #d32f2f;
    1001   --button-fore-color: #f8f8f8;
     1010    --button-back-color: #d32f2f;
     1011    --button-fore-color: #f8f8f8;
    10021012}
    10031013
    10041014button.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 {
    1005   --button-hover-back-color: #c62828;
     1015    --button-hover-back-color: #c62828;
    10061016}
    10071017
    10081018button.tertiary, [type="button"].tertiary, [type="submit"].tertiary, [type="reset"].tertiary, .button.tertiary, [role="button"].tertiary {
    1009   --button-back-color: #308732;
    1010   --button-fore-color: #f8f8f8;
     1019    --button-back-color: #308732;
     1020    --button-fore-color: #f8f8f8;
    10111021}
    10121022
    10131023button.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 {
    1014   --button-hover-back-color: #277529;
     1024    --button-hover-back-color: #277529;
    10151025}
    10161026
    10171027button.inverse, [type="button"].inverse, [type="submit"].inverse, [type="reset"].inverse, .button.inverse, [role="button"].inverse {
    1018   --button-back-color: #212121;
    1019   --button-fore-color: #f8f8f8;
     1028    --button-back-color: #212121;
     1029    --button-fore-color: #f8f8f8;
    10201030}
    10211031
    10221032button.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 {
    1023   --button-hover-back-color: #111;
     1033    --button-hover-back-color: #111;
    10241034}
    10251035
    10261036button.small, [type="button"].small, [type="submit"].small, [type="reset"].small, .button.small, [role="button"].small {
    1027   padding: calc(0.5 * var(--universal-padding)) calc(0.75 * var(--universal-padding));
    1028   margin: var(--universal-margin);
     1037    padding: calc(0.5 * var(--universal-padding)) calc(0.75 * var(--universal-padding));
     1038    margin: var(--universal-margin);
    10291039}
    10301040
    10311041button.large, [type="button"].large, [type="submit"].large, [type="reset"].large, .button.large, [role="button"].large {
    1032   padding: calc(1.5 * var(--universal-padding)) calc(2 * var(--universal-padding));
    1033   margin: var(--universal-margin);
     1042    padding: calc(1.5 * var(--universal-padding)) calc(2 * var(--universal-padding));
     1043    margin: var(--universal-margin);
    10341044}
    10351045
    … …  
    10391049/* Navigation module CSS variable definitions */
    10401050:root {
    1041   --header-back-color: #f8f8f8;
    1042   --header-hover-back-color: #f0f0f0;
    1043   --header-fore-color: #444;
    1044   --header-border-color: #ddd;
    1045   --nav-back-color: #f8f8f8;
    1046   --nav-hover-back-color: #f0f0f0;
    1047   --nav-fore-color: #444;
    1048   --nav-border-color: #ddd;
    1049   --nav-link-color: #0277bd;
    1050   --footer-fore-color: #444;
    1051   --footer-back-color: #f8f8f8;
    1052   --footer-border-color: #ddd;
    1053   --footer-link-color: #0277bd;
    1054   --drawer-back-color: #f8f8f8;
    1055   --drawer-hover-back-color: #f0f0f0;
    1056   --drawer-border-color: #ddd;
    1057   --drawer-close-color: #444;
     1051    --header-back-color: #f8f8f8;
     1052    --header-hover-back-color: #f0f0f0;
     1053    --header-fore-color: #444;
     1054    --header-border-color: #ddd;
     1055    --nav-back-color: #f8f8f8;
     1056    --nav-hover-back-color: #f0f0f0;
     1057    --nav-fore-color: #444;
     1058    --nav-border-color: #ddd;
     1059    --nav-link-color: #0277bd;
     1060    --footer-fore-color: #444;
     1061    --footer-back-color: #f8f8f8;
     1062    --footer-border-color: #ddd;
     1063    --footer-link-color: #0277bd;
     1064    --drawer-back-color: #f8f8f8;
     1065    --drawer-hover-back-color: #f0f0f0;
     1066    --drawer-border-color: #ddd;
     1067    --drawer-close-color: #444;
    10581068}
    10591069
    10601070header {
    1061   height: 3.1875rem;
    1062   background: var(--header-back-color);
    1063   color: var(--header-fore-color);
    1064   border-bottom: 0.0625rem solid var(--header-border-color);
    1065   padding: calc(var(--universal-padding) / 4) 0;
    1066   white-space: nowrap;
    1067   overflow-x: auto;
    1068   overflow-y: hidden;
     1071    background: var(--header-back-color);
     1072    color: var(--header-fore-color);
     1073    border-bottom: 0.0625rem solid var(--header-border-color);
     1074    padding: calc(var(--universal-padding) / 4) 0;
     1075    white-space: nowrap;
     1076    overflow-x: auto;
     1077    overflow-y: hidden;
    10691078}
    10701079
    10711080header.row {
    1072   box-sizing: content-box;
     1081    box-sizing: content-box;
    10731082}
    10741083
    10751084header .logo {
    1076   color: var(--header-fore-color);
    1077   font-size: 1.75rem;
    1078   padding: var(--universal-padding) calc(2 * var(--universal-padding));
    1079   text-decoration: none;
     1085    color: var(--header-fore-color);
     1086    padding: var(--universal-padding) calc(2 * var(--universal-padding));
     1087    font-weight: 900;
     1088    box-shadow: 0 2px 3px rgba(0,0,0,.1);
    10801089}
    10811090
    10821091header button, header [type="button"], header .button, header [role="button"] {
    1083   box-sizing: border-box;
    1084   position: relative;
    1085   top: calc(0rem - var(--universal-padding) / 4);
    1086   height: calc(3.1875rem + var(--universal-padding) / 2);
    1087   background: var(--header-back-color);
    1088   line-height: calc(3.1875rem - var(--universal-padding) * 1.5);
    1089   text-align: center;
    1090   color: var(--header-fore-color);
    1091   border: 0;
    1092   border-radius: 0;
    1093   margin: 0;
    1094   text-transform: uppercase;
    1095 }
    1096 
    1097 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 {
    1098   background: var(--header-hover-back-color);
     1092    font-size: 1.25rem;
     1093    margin: 0;
     1094    margin-right: 0.25em;
     1095    border-radius: var(--universal-border-radius);
     1096    box-shadow: 0 2px 3px rgba(0,0,0,.1);
     1097}
     1098
     1099header 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, header .logo:hover {
     1100    background: var(--header-hover-back-color);
     1101    text-decoration: underline;
     1102    text-underline-offset: 0.2em;
     1103    text-decoration-thickness: 2px;
    10991104}
    11001105
    11011106nav {
    1102   background: var(--nav-back-color);
    1103   color: var(--nav-fore-color);
    1104   border: 0.0625rem solid var(--nav-border-color);
    1105   border-radius: var(--universal-border-radius);
    1106   margin: var(--universal-margin);
     1107    background: var(--nav-back-color);
     1108    color: var(--nav-fore-color);
     1109    border: 0.0625rem solid var(--nav-border-color);
     1110    border-radius: var(--universal-border-radius);
     1111    margin: var(--universal-margin);
    11071112}
    11081113
    11091114nav * {
    1110   padding: var(--universal-padding) calc(1.5 * var(--universal-padding));
     1115    padding: var(--universal-padding) calc(1.5 * var(--universal-padding));
    11111116}
    11121117
    11131118nav a, nav a:visited {
    1114   display: block;
    1115   color: var(--nav-link-color);
    1116   border-radius: var(--universal-border-radius);
    1117   transition: background 0.3s;
     1119    display: block;
     1120    color: var(--nav-link-color);
     1121    border-radius: var(--universal-border-radius);
     1122    transition: background 0.3s;
    11181123}
    11191124
    11201125nav a:hover, nav a:focus, nav a:visited:hover, nav a:visited:focus {
    1121   text-decoration: none;
    1122   background: var(--nav-hover-back-color);
     1126    text-decoration: none;
     1127    background: var(--nav-hover-back-color);
    11231128}
    11241129
    11251130nav .sublink-1 {
    1126   position: relative;
    1127   margin-left: calc(2 * var(--universal-padding));
     1131    position: relative;
     1132    margin-left: calc(2 * var(--universal-padding));
    11281133}
    11291134
    11301135nav .sublink-1:before {
    1131   position: absolute;
    1132   left: calc(var(--universal-padding) - 1 * var(--universal-padding));
    1133   top: -0.0625rem;
    1134   content: '';
    1135   height: 100%;
    1136   border: 0.0625rem solid var(--nav-border-color);
    1137   border-left: 0;
     1136    position: absolute;
     1137    left: calc(var(--universal-padding) - 1 * var(--universal-padding));
     1138    top: -0.0625rem;
     1139    content: '';
     1140    height: 100%;
     1141    border: 0.0625rem solid var(--nav-border-color);
     1142    border-left: 0;
    11381143}
    11391144
    11401145nav .sublink-2 {
    1141   position: relative;
    1142   margin-left: calc(4 * var(--universal-padding));
     1146    position: relative;
     1147    margin-left: calc(4 * var(--universal-padding));
    11431148}
    11441149
    11451150nav .sublink-2:before {
    1146   position: absolute;
    1147   left: calc(var(--universal-padding) - 3 * var(--universal-padding));
    1148   top: -0.0625rem;
    1149   content: '';
    1150   height: 100%;
    1151   border: 0.0625rem solid var(--nav-border-color);
    1152   border-left: 0;
     1151    position: absolute;
     1152    left: calc(var(--universal-padding) - 3 * var(--universal-padding));
     1153    top: -0.0625rem;
     1154    content: '';
     1155    height: 100%;
     1156    border: 0.0625rem solid var(--nav-border-color);
     1157    border-left: 0;
    11531158}
    11541159
    11551160footer {
    1156   background: var(--footer-back-color);
    1157   color: var(--footer-fore-color);
    1158   border-top: 0.0625rem solid var(--footer-border-color);
    1159   padding: calc(2 * var(--universal-padding)) var(--universal-padding);
    1160   font-size: 0.875rem;
     1161    background: var(--footer-back-color);
     1162    color: var(--footer-fore-color);
     1163    border-top: 0.0625rem solid var(--footer-border-color);
     1164    padding: calc(2 * var(--universal-padding)) var(--universal-padding);
     1165    font-size: 0.875rem;
    11611166}
    11621167
    11631168footer a, footer a:visited {
    1164   color: var(--footer-link-color);
     1169    color: var(--footer-link-color);
    11651170}
    11661171
    11671172header.sticky {
    1168   position: -webkit-sticky;
    1169   position: sticky;
    1170   z-index: 1101;
    1171   top: 0;
     1173    position: -webkit-sticky;
     1174    position: sticky;
     1175    z-index: 1101;
     1176    top: 0;
    11721177}
    11731178
    11741179footer.sticky {
    1175   position: -webkit-sticky;
    1176   position: sticky;
    1177   z-index: 1101;
    1178   bottom: 0;
     1180    position: -webkit-sticky;
     1181    position: sticky;
     1182    z-index: 1101;
     1183    bottom: 0;
    11791184}
    11801185
    11811186.drawer-toggle:before {
    1182   display: inline-block;
    1183   position: relative;
    1184   vertical-align: bottom;
    1185   content: '\00a0\2261\00a0';
    1186   font-family: sans-serif;
    1187   font-size: 1.5em;
     1187    display: inline-block;
     1188    position: relative;
     1189    vertical-align: bottom;
     1190    content: '\00a0\2261\00a0';
     1191    font-family: sans-serif;
     1192    font-size: 1.5em;
    11881193}
    11891194
    11901195@media screen and (min-width: 768px) {
    1191   .drawer-toggle:not(.persistent) {
    1192     display: none;
    1193   }
     1196    .drawer-toggle:not(.persistent) {
     1197        display: none;
     1198    }
    11941199}
    11951200
    11961201[type="checkbox"].drawer {
    1197   height: 1px;
    1198   width: 1px;
    1199   margin: -1px;
    1200   overflow: hidden;
    1201   position: absolute;
    1202   clip: rect(0 0 0 0);
    1203   -webkit-clip-path: inset(100%);
    1204   clip-path: inset(100%);
     1202    height: 1px;
     1203    width: 1px;
     1204    margin: -1px;
     1205    overflow: hidden;
     1206    position: absolute;
     1207    clip: rect(0 0 0 0);
     1208    -webkit-clip-path: inset(100%);
     1209    clip-path: inset(100%);
    12051210}
    12061211
    12071212[type="checkbox"].drawer + * {
    1208   display: block;
    1209   box-sizing: border-box;
    1210   position: fixed;
    1211   top: 0;
    1212   width: 320px;
    1213   height: 100vh;
    1214   overflow-y: auto;
    1215   background: var(--drawer-back-color);
    1216   border: 0.0625rem solid var(--drawer-border-color);
    1217   border-radius: 0;
    1218   margin: 0;
    1219   z-index: 1110;
    1220   right: -320px;
    1221   transition: right 0.3s;
     1213    display: block;
     1214    box-sizing: border-box;
     1215    position: fixed;
     1216    top: 0;
     1217    width: 320px;
     1218    height: 100vh;
     1219    overflow-y: auto;
     1220    background: var(--drawer-back-color);
     1221    border: 0.0625rem solid var(--drawer-border-color);
     1222    border-radius: 0;
     1223    margin: 0;
     1224    z-index: 1110;
     1225    right: -320px;
     1226    transition: right 0.3s;
    12221227}
    12231228
    12241229[type="checkbox"].drawer + * .drawer-close {
    1225   position: absolute;
    1226   top: var(--universal-margin);
    1227   right: var(--universal-margin);
    1228   z-index: 1111;
    1229   width: 2rem;
    1230   height: 2rem;
    1231   border-radius: var(--universal-border-radius);
    1232   padding: var(--universal-padding);
    1233   margin: 0;
    1234   cursor: pointer;
    1235   transition: background 0.3s;
     1230    position: absolute;
     1231    top: var(--universal-margin);
     1232    right: var(--universal-margin);
     1233    z-index: 1111;
     1234    width: 2rem;
     1235    height: 2rem;
     1236    border-radius: var(--universal-border-radius);
     1237    padding: var(--universal-padding);
     1238    margin: 0;
     1239    cursor: pointer;
     1240    transition: background 0.3s;
    12361241}
    12371242
    12381243[type="checkbox"].drawer + * .drawer-close:before {
    1239   display: block;
    1240   content: '\00D7';
    1241   color: var(--drawer-close-color);
    1242   position: relative;
    1243   font-family: sans-serif;
    1244   font-size: 2rem;
    1245   line-height: 1;
    1246   text-align: center;
     1244    display: block;
     1245    content: '\00D7';
     1246    color: var(--drawer-close-color);
     1247    position: relative;
     1248    font-family: sans-serif;
     1249    font-size: 2rem;
     1250    line-height: 1;
     1251    text-align: center;
    12471252}
    12481253
    12491254[type="checkbox"].drawer + * .drawer-close:hover, [type="checkbox"].drawer + * .drawer-close:focus {
    1250   background: var(--drawer-hover-back-color);
     1255    background: var(--drawer-hover-back-color);
    12511256}
    12521257
    12531258@media screen and (max-width: 320px) {
    1254   [type="checkbox"].drawer + * {
    1255     width: 100%;
    1256   }
     1259    [type="checkbox"].drawer + * {
     1260        width: 100%;
     1261    }
    12571262}
    12581263
    12591264[type="checkbox"].drawer:checked + * {
    1260   right: 0;
     1265    right: 0;
    12611266}
    12621267
    12631268@media screen and (min-width: 768px) {
    1264   [type="checkbox"].drawer:not(.persistent) + * {
    1265     position: static;
    1266     height: 100%;
    1267     z-index: 1100;
    1268   }
    1269   [type="checkbox"].drawer:not(.persistent) + * .drawer-close {
    1270     display: none;
    1271   }
     1269    [type="checkbox"].drawer:not(.persistent) + * {
     1270        position: static;
     1271        height: 100%;
     1272        z-index: 1100;
     1273    }
     1274    [type="checkbox"].drawer:not(.persistent) + * .drawer-close {
     1275        display: none;
     1276    }
    12721277}
    12731278
    … …  
    12771282/* Table module CSS variable definitions. */
    12781283:root {
    1279   --table-border-color: #aaa;
    1280   --table-border-separator-color: #666;
    1281   --table-head-back-color: #e6e6e6;
    1282   --table-head-fore-color: #111;
    1283   --table-body-back-color: #f8f8f8;
    1284   --table-body-fore-color: #111;
    1285   --table-body-alt-back-color: #eee;
     1284    --table-border-color: #aaa;
     1285    --table-border-separator-color: #666;
     1286    --table-head-back-color: #e6e6e6;
     1287    --table-head-fore-color: #111;
     1288    --table-body-back-color: #f8f8f8;
     1289    --table-body-fore-color: #111;
     1290    --table-body-alt-back-color: #eee;
    12861291}
    12871292
    12881293table {
    1289   border-collapse: separate;
    1290   border-spacing: 0;
    1291   margin: 0;
    1292   display: flex;
    1293   flex: 0 1 auto;
    1294   flex-flow: row wrap;
    1295   padding: var(--universal-padding);
    1296   padding-top: 0;
     1294    border-collapse: separate;
     1295    border-spacing: 0;
     1296    margin: 0;
     1297    display: flex;
     1298    flex: 0 1 auto;
     1299    flex-flow: row wrap;
     1300    padding: var(--universal-padding);
     1301    padding-top: 0;
    12971302}
    12981303
    12991304table caption {
    1300   font-size: 1.5rem;
    1301   margin: calc(2 * var(--universal-margin)) 0;
    1302   max-width: 100%;
    1303   flex: 0 0 100%;
     1305    font-size: 1.5rem;
     1306    margin: calc(2 * var(--universal-margin)) 0;
     1307    max-width: 100%;
     1308    flex: 0 0 100%;
    13041309}
    13051310
    13061311table thead, table tbody {
    1307   display: flex;
    1308   flex-flow: row wrap;
    1309   border: 0.0625rem solid var(--table-border-color);
     1312    display: flex;
     1313    flex-flow: row wrap;
     1314    border: 0.0625rem solid var(--table-border-color);
    13101315}
    13111316
    13121317table thead {
    1313   z-index: 999;
    1314   border-radius: var(--universal-border-radius) var(--universal-border-radius) 0 0;
    1315   border-bottom: 0.0625rem solid var(--table-border-separator-color);
     1318    z-index: 999;
     1319    border-radius: var(--universal-border-radius) var(--universal-border-radius) 0 0;
     1320    border-bottom: 0.0625rem solid var(--table-border-separator-color);
    13161321}
    13171322
    13181323table tbody {
    1319   border-top: 0;
    1320   margin-top: calc(0 - var(--universal-margin));
    1321   border-radius: 0 0 var(--universal-border-radius) var(--universal-border-radius);
     1324    border-top: 0;
     1325    margin-top: calc(0 - var(--universal-margin));
     1326    border-radius: 0 0 var(--universal-border-radius) var(--universal-border-radius);
    13221327}
    13231328
    13241329table tr {
    1325   display: flex;
    1326   padding: 0;
     1330    display: flex;
     1331    padding: 0;
    13271332}
    13281333
    13291334table th, table td {
    1330   padding: calc(2 * var(--universal-padding));
     1335    padding: calc(2 * var(--universal-padding));
    13311336}
    13321337
    13331338table th {
    1334   text-align: left;
    1335   background: var(--table-head-back-color);
    1336   color: var(--table-head-fore-color);
     1339    text-align: left;
     1340    background: var(--table-head-back-color);
     1341    color: var(--table-head-fore-color);
    13371342}
    13381343
    13391344table td {
    1340   background: var(--table-body-back-color);
    1341   color: var(--table-body-fore-color);
    1342   border-top: 0.0625rem solid var(--table-border-color);
     1345    background: var(--table-body-back-color);
     1346    color: var(--table-body-fore-color);
     1347    border-top: 0.0625rem solid var(--table-border-color);
    13431348}
    13441349
    13451350table:not(.horizontal) {
    1346   overflow: auto;
    1347   max-height: 400px;
     1351    overflow: auto;
     1352    max-height: 400px;
    13481353}
    13491354
    13501355table:not(.horizontal) thead, table:not(.horizontal) tbody {
    1351   max-width: 100%;
    1352   flex: 0 0 100%;
     1356    max-width: 100%;
     1357    flex: 0 0 100%;
    13531358}
    13541359
    13551360table:not(.horizontal) tr {
    1356   flex-flow: row wrap;
    1357   flex: 0 0 100%;
     1361    flex-flow: row wrap;
     1362    flex: 0 0 100%;
    13581363}
    13591364
    13601365table:not(.horizontal) th, table:not(.horizontal) td {
    1361   flex: 1 0 0%;
    1362   overflow: hidden;
    1363   text-overflow: ellipsis;
     1366    flex: 1 0 0%;
     1367    overflow: hidden;
     1368    text-overflow: ellipsis;
    13641369}
    13651370
    13661371table:not(.horizontal) thead {
    1367   position: sticky;
    1368   top: 0;
     1372    position: sticky;
     1373    top: 0;
    13691374}
    13701375
    13711376table:not(.horizontal) tbody tr:first-child td {
    1372   /* border-top: 0; */
     1377    /* border-top: 0; */
    13731378}
    13741379
    13751380table.horizontal {
    1376   border: 0;
     1381    border: 0;
    13771382}
    13781383
    13791384table.horizontal thead, table.horizontal tbody {
    1380   border: 0;
    1381   flex: .2 0 0;
    1382   flex-flow: row nowrap;
     1385    border: 0;
     1386    flex: .2 0 0;
     1387    flex-flow: row nowrap;
    13831388}
    13841389
    13851390table.horizontal tbody {
    1386   overflow: auto;
    1387   justify-content: space-between;
    1388   flex: .8 0 0;
    1389   margin-left: 0;
    1390   padding-bottom: calc(var(--universal-padding) / 4);
     1391    overflow: auto;
     1392    justify-content: space-between;
     1393    flex: .8 0 0;
     1394    margin-left: 0;
     1395    padding-bottom: calc(var(--universal-padding) / 4);
    13911396}
    13921397
    13931398table.horizontal tr {
    1394   flex-direction: column;
    1395   flex: 1 0 auto;
     1399    flex-direction: column;
     1400    flex: 1 0 auto;
    13961401}
    13971402
    13981403table.horizontal th, table.horizontal td {
    1399   width: auto;
    1400   border: 0;
    1401   border-bottom: 0.0625rem solid var(--table-border-color);
     1404    width: auto;
     1405    border: 0;
     1406    border-bottom: 0.0625rem solid var(--table-border-color);
    14021407}
    14031408
    14041409table.horizontal th:not(:first-child), table.horizontal td:not(:first-child) {
    1405   border-top: 0;
     1410    border-top: 0;
    14061411}
    14071412
    14081413table.horizontal th {
    1409   text-align: right;
    1410   border-left: 0.0625rem solid var(--table-border-color);
    1411   border-right: 0.0625rem solid var(--table-border-separator-color);
     1414    text-align: right;
     1415    border-left: 0.0625rem solid var(--table-border-color);
     1416    border-right: 0.0625rem solid var(--table-border-separator-color);
    14121417}
    14131418
    14141419table.horizontal thead tr:first-child {
    1415   padding-left: 0;
     1420    padding-left: 0;
    14161421}
    14171422
    14181423table.horizontal th:first-child, table.horizontal td:first-child {
    1419   border-top: 0.0625rem solid var(--table-border-color);
     1424    border-top: 0.0625rem solid var(--table-border-color);
    14201425}
    14211426
    14221427table.horizontal tbody tr:last-child td {
    1423   border-right: 0.0625rem solid var(--table-border-color);
     1428    border-right: 0.0625rem solid var(--table-border-color);
    14241429}
    14251430
    14261431table.horizontal tbody tr:last-child td:first-child {
    1427   border-top-right-radius: 0.25rem;
     1432    border-top-right-radius: 0.25rem;
    14281433}
    14291434
    14301435table.horizontal tbody tr:last-child td:last-child {
    1431   border-bottom-right-radius: 0.25rem;
     1436    border-bottom-right-radius: 0.25rem;
    14321437}
    14331438
    14341439table.horizontal thead tr:first-child th:first-child {
    1435   border-top-left-radius: 0.25rem;
     1440    border-top-left-radius: 0.25rem;
    14361441}
    14371442
    14381443table.horizontal thead tr:first-child th:last-child {
    1439   border-bottom-left-radius: 0.25rem;
     1444    border-bottom-left-radius: 0.25rem;
    14401445}
    14411446
    14421447@media screen and (max-width: 767px) {
    1443   table, table.horizontal {
    1444     border-collapse: collapse;
    1445     border: 0;
    1446     width: 100%;
    1447     display: table;
    1448   }
    1449   table thead, table th, table.horizontal thead, table.horizontal th {
    1450     border: 0;
    1451     height: 1px;
    1452     width: 1px;
    1453     margin: -1px;
    1454     overflow: hidden;
    1455     padding: 0;
    1456     position: absolute;
    1457     clip: rect(0 0 0 0);
    1458     -webkit-clip-path: inset(100%);
    1459     clip-path: inset(100%);
    1460   }
    1461   table tbody, table.horizontal tbody {
    1462     border: 0;
    1463     display: table-row-group;
    1464   }
    1465   table tr, table.horizontal tr {
    1466     display: block;
    1467     border: 0.0625rem solid var(--table-border-color);
    1468     border-radius: var(--universal-border-radius);
    1469     background: #fafafa;
    1470     padding: var(--universal-padding);
    1471     margin: var(--universal-margin);
    1472     margin-bottom: calc(2 * var(--universal-margin));
    1473   }
    1474   table th, table td, table.horizontal th, table.horizontal td {
    1475     width: auto;
    1476   }
    1477   table td, table.horizontal td {
    1478     display: block;
    1479     border: 0;
    1480     text-align: right;
    1481   }
    1482   table td:before, table.horizontal td:before {
    1483     content: attr(data-label);
    1484     float: left;
    1485     font-weight: 600;
    1486   }
    1487   table th:first-child, table td:first-child, table.horizontal th:first-child, table.horizontal td:first-child {
    1488     border-top: 0;
    1489   }
    1490   table tbody tr:last-child td, table.horizontal tbody tr:last-child td {
    1491     border-right: 0;
    1492   }
     1448    table, table.horizontal {
     1449        border-collapse: collapse;
     1450        border: 0;
     1451        width: 100%;
     1452        display: table;
     1453    }
     1454    table thead, table th, table.horizontal thead, table.horizontal th {
     1455        border: 0;
     1456        height: 1px;
     1457        width: 1px;
     1458        margin: -1px;
     1459        overflow: hidden;
     1460        padding: 0;
     1461        position: absolute;
     1462        clip: rect(0 0 0 0);
     1463        -webkit-clip-path: inset(100%);
     1464        clip-path: inset(100%);
     1465    }
     1466    table tbody, table.horizontal tbody {
     1467        border: 0;
     1468        display: table-row-group;
     1469    }
     1470    table tr, table.horizontal tr {
     1471        display: block;
     1472        border: 0.0625rem solid var(--table-border-color);
     1473        border-radius: var(--universal-border-radius);
     1474        background: #fafafa;
     1475        padding: var(--universal-padding);
     1476        margin: var(--universal-margin);
     1477        margin-bottom: calc(2 * var(--universal-margin));
     1478    }
     1479    table th, table td, table.horizontal th, table.horizontal td {
     1480        width: auto;
     1481    }
     1482    table td, table.horizontal td {
     1483        display: block;
     1484        border: 0;
     1485        text-align: right;
     1486    }
     1487    table td:before, table.horizontal td:before {
     1488        content: attr(data-label);
     1489        float: left;
     1490        font-weight: 600;
     1491    }
     1492    table th:first-child, table td:first-child, table.horizontal th:first-child, table.horizontal td:first-child {
     1493        border-top: 0;
     1494    }
     1495    table tbody tr:last-child td, table.horizontal tbody tr:last-child td {
     1496        border-right: 0;
     1497    }
    14931498}
    14941499
    14951500:root {
    1496   --table-body-alt-back-color: #eee;
     1501    --table-body-alt-back-color: #eee;
    14971502}
    14981503
    14991504table.striped tr:nth-of-type(2n) > td {
    1500   background: var(--table-body-alt-back-color);
     1505    background: var(--table-body-alt-back-color);
    15011506}
    15021507
    15031508@media screen and (max-width: 768px) {
    1504   table.striped tr:nth-of-type(2n) {
    1505     background: var(--table-body-alt-back-color);
    1506   }
     1509    table.striped tr:nth-of-type(2n) {
     1510        background: var(--table-body-alt-back-color);
     1511    }
    15071512}
    15081513
    15091514:root {
    1510   --table-body-hover-back-color: #90caf9;
     1515    --table-body-hover-back-color: #90caf9;
    15111516}
    15121517
    15131518table.hoverable tr:hover, table.hoverable tr:hover > td, table.hoverable tr:focus, table.hoverable tr:focus > td {
    1514   background: var(--table-body-hover-back-color);
     1519    background: var(--table-body-hover-back-color);
    15151520}
    15161521
    15171522@media screen and (max-width: 768px) {
    1518   table.hoverable tr:hover, table.hoverable tr:hover > td, table.hoverable tr:focus, table.hoverable tr:focus > td {
    1519     background: var(--table-body-hover-back-color);
    1520   }
     1523    table.hoverable tr:hover, table.hoverable tr:hover > td, table.hoverable tr:focus, table.hoverable tr:focus > td {
     1524        background: var(--table-body-hover-back-color);
     1525    }
    15211526}
    15221527
    … …  
    15261531/* Contextual module CSS variable definitions */
    15271532:root {
    1528   --mark-back-color: #0277bd;
    1529   --mark-fore-color: #fafafa;
     1533    --mark-back-color: #0277bd;
     1534    --mark-fore-color: #fafafa;
    15301535}
    15311536
    15321537mark {
    1533   background: var(--mark-back-color);
    1534   color: var(--mark-fore-color);
    1535   font-size: 0.95em;
    1536   line-height: 1em;
    1537   border-radius: var(--universal-border-radius);
    1538   padding: calc(var(--universal-padding) / 4) calc(var(--universal-padding) / 2);
     1538    background: var(--mark-back-color);
     1539    color: var(--mark-fore-color);
     1540    font-size: 0.95em;
     1541    line-height: 1em;
     1542    border-radius: var(--universal-border-radius);
     1543    padding: calc(var(--universal-padding) / 4) calc(var(--universal-padding) / 2);
    15391544}
    15401545
    15411546mark.inline-block {
    1542   display: inline-block;
    1543   font-size: 1em;
    1544   line-height: 1.5;
    1545   padding: calc(var(--universal-padding) / 2) var(--universal-padding);
     1547    display: inline-block;
     1548    font-size: 1em;
     1549    line-height: 1.5;
     1550    padding: calc(var(--universal-padding) / 2) var(--universal-padding);
    15461551}
    15471552
    15481553:root {
    1549   --toast-back-color: #424242;
    1550   --toast-fore-color: #fafafa;
     1554    --toast-back-color: #424242;
     1555    --toast-fore-color: #fafafa;
    15511556}
    15521557
    15531558.toast {
    1554   position: fixed;
    1555   bottom: calc(var(--universal-margin) * 3);
    1556   left: 50%;
    1557   transform: translate(-50%, -50%);
    1558   z-index: 1111;
    1559   color: var(--toast-fore-color);
    1560   background: var(--toast-back-color);
    1561   border-radius: calc(var(--universal-border-radius) * 16);
    1562   padding: var(--universal-padding) calc(var(--universal-padding) * 3);
     1559    position: fixed;
     1560    bottom: calc(var(--universal-margin) * 3);
     1561    left: 50%;
     1562    transform: translate(-50%, -50%);
     1563    z-index: 1111;
     1564    color: var(--toast-fore-color);
     1565    background: var(--toast-back-color);
     1566    border-radius: calc(var(--universal-border-radius) * 16);
     1567    padding: var(--universal-padding) calc(var(--universal-padding) * 3);
    15631568}
    15641569
    15651570:root {
    1566   --tooltip-back-color: #212121;
    1567   --tooltip-fore-color: #fafafa;
     1571    --tooltip-back-color: #212121;
     1572    --tooltip-fore-color: #fafafa;
    15681573}
    15691574
    15701575.tooltip {
    1571   position: relative;
    1572   display: inline-block;
     1576    position: relative;
     1577    display: inline-block;
    15731578}
    15741579
    15751580.tooltip:before, .tooltip:after {
    1576   position: absolute;
    1577   opacity: 0;
    1578   clip: rect(0 0 0 0);
    1579   -webkit-clip-path: inset(100%);
    1580   clip-path: inset(100%);
    1581   transition: all 0.3s;
    1582   z-index: 1010;
    1583   left: 50%;
     1581    position: absolute;
     1582    opacity: 0;
     1583    clip: rect(0 0 0 0);
     1584    -webkit-clip-path: inset(100%);
     1585    clip-path: inset(100%);
     1586    transition: all 0.3s;
     1587    z-index: 1010;
     1588    left: 50%;
    15841589}
    15851590
    15861591.tooltip:not(.bottom):before, .tooltip:not(.bottom):after {
    1587   bottom: 75%;
     1592    bottom: 75%;
    15881593}
    15891594
    15901595.tooltip.bottom:before, .tooltip.bottom:after {
    1591   top: 75%;
     1596    top: 75%;
    15921597}
    15931598
    15941599.tooltip:hover:before, .tooltip:hover:after, .tooltip:focus:before, .tooltip:focus:after {
    1595   opacity: 1;
    1596   clip: auto;
    1597   -webkit-clip-path: inset(0%);
    1598   clip-path: inset(0%);
     1600    opacity: 1;
     1601    clip: auto;
     1602    -webkit-clip-path: inset(0%);
     1603    clip-path: inset(0%);
    15991604}
    16001605
    16011606.tooltip:before {
    1602   content: '';
    1603   background: transparent;
    1604   border: var(--universal-margin) solid transparent;
    1605   left: calc(50% - var(--universal-margin));
     1607    content: '';
     1608    background: transparent;
     1609    border: var(--universal-margin) solid transparent;
     1610    left: calc(50% - var(--universal-margin));
    16061611}
    16071612
    16081613.tooltip:not(.bottom):before {
    1609   border-top-color: #212121;
     1614    border-top-color: #212121;
    16101615}
    16111616
    16121617.tooltip.bottom:before {
    1613   border-bottom-color: #212121;
     1618    border-bottom-color: #212121;
    16141619}
    16151620
    16161621.tooltip:after {
    1617   content: attr(aria-label);
    1618   color: var(--tooltip-fore-color);
    1619   background: var(--tooltip-back-color);
    1620   border-radius: var(--universal-border-radius);
    1621   padding: var(--universal-padding);
    1622   white-space: nowrap;
    1623   transform: translateX(-50%);
     1622    content: attr(aria-label);
     1623    color: var(--tooltip-fore-color);
     1624    background: var(--tooltip-back-color);
     1625    border-radius: var(--universal-border-radius);
     1626    padding: var(--universal-padding);
     1627    white-space: nowrap;
     1628    transform: translateX(-50%);
    16241629}
    16251630
    16261631.tooltip:not(.bottom):after {
    1627   margin-bottom: calc(2 * var(--universal-margin));
     1632    margin-bottom: calc(2 * var(--universal-margin));
    16281633}
    16291634
    16301635.tooltip.bottom:after {
    1631   margin-top: calc(2 * var(--universal-margin));
     1636    margin-top: calc(2 * var(--universal-margin));
    16321637}
    16331638
    16341639:root {
    1635   --modal-overlay-color: rgba(0, 0, 0, 0.45);
    1636   --modal-close-color: #444;
    1637   --modal-close-hover-color: #f0f0f0;
     1640    --modal-overlay-color: rgba(0, 0, 0, 0.45);
     1641    --modal-close-color: #444;
     1642    --modal-close-hover-color: #f0f0f0;
    16381643}
    16391644
    16401645[type="checkbox"].modal {
    1641   height: 1px;
    1642   width: 1px;
    1643   margin: -1px;
    1644   overflow: hidden;
    1645   position: absolute;
    1646   clip: rect(0 0 0 0);
    1647   -webkit-clip-path: inset(100%);
    1648   clip-path: inset(100%);
     1646    height: 1px;
     1647    width: 1px;
     1648    margin: -1px;
     1649    overflow: hidden;
     1650    position: absolute;
     1651    clip: rect(0 0 0 0);
     1652    -webkit-clip-path: inset(100%);
     1653    clip-path: inset(100%);
    16491654}
    16501655
    16511656[type="checkbox"].modal + div {
    1652   position: fixed;
    1653   top: 0;
    1654   left: 0;
    1655   display: none;
    1656   width: 100vw;
    1657   height: 100vh;
    1658   background: var(--modal-overlay-color);
     1657    position: fixed;
     1658    top: 0;
     1659    left: 0;
     1660    display: none;
     1661    width: 100vw;
     1662    height: 100vh;
     1663    background: var(--modal-overlay-color);
    16591664}
    16601665
    16611666[type="checkbox"].modal + div .card {
    1662   margin: 0 auto;
    1663   max-height: 50vh;
    1664   overflow: auto;
     1667    margin: 0 auto;
     1668    max-height: 50vh;
     1669    overflow: auto;
    16651670}
    16661671
    16671672[type="checkbox"].modal + div .card .modal-close {
    1668   position: absolute;
    1669   top: 0;
    1670   right: 0;
    1671   width: 1.75rem;
    1672   height: 1.75rem;
    1673   border-radius: var(--universal-border-radius);
    1674   padding: var(--universal-padding);
    1675   margin: 0;
    1676   cursor: pointer;
    1677   transition: background 0.3s;
     1673    position: absolute;
     1674    top: 0;
     1675    right: 0;
     1676    width: 1.75rem;
     1677    height: 1.75rem;
     1678    border-radius: var(--universal-border-radius);
     1679    padding: var(--universal-padding);
     1680    margin: 0;
     1681    cursor: pointer;
     1682    transition: background 0.3s;
    16781683}
    16791684
    16801685[type="checkbox"].modal + div .card .modal-close:before {
    1681   display: block;
    1682   content: '\00D7';
    1683   color: var(--modal-close-color);
    1684   position: relative;
    1685   font-family: sans-serif;
    1686   font-size: 1.75rem;
    1687   line-height: 1;
    1688   text-align: center;
     1686    display: block;
     1687    content: '\00D7';
     1688    color: var(--modal-close-color);
     1689    position: relative;
     1690    font-family: sans-serif;
     1691    font-size: 1.75rem;
     1692    line-height: 1;
     1693    text-align: center;
    16891694}
    16901695
    16911696[type="checkbox"].modal + div .card .modal-close:hover, [type="checkbox"].modal + div .card .modal-close:focus {
    1692   background: var(--modal-close-hover-color);
     1697    background: var(--modal-close-hover-color);
    16931698}
    16941699
    16951700[type="checkbox"].modal:checked + div {
    1696   display: flex;
    1697   flex: 0 1 auto;
    1698   z-index: 1200;
     1701    display: flex;
     1702    flex: 0 1 auto;
     1703    z-index: 1200;
    16991704}
    17001705
    17011706[type="checkbox"].modal:checked + div .card .modal-close {
    1702   z-index: 1211;
     1707    z-index: 1211;
    17031708}
    17041709
    17051710:root {
    1706   --collapse-label-back-color: #e8e8e8;
    1707   --collapse-label-fore-color: #212121;
    1708   --collapse-label-hover-back-color: #f0f0f0;
    1709   --collapse-selected-label-back-color: #ececec;
    1710   --collapse-border-color: #ddd;
    1711   --collapse-content-back-color: #fafafa;
    1712   --collapse-selected-label-border-color: #0277bd;
     1711    --collapse-label-back-color: #e8e8e8;
     1712    --collapse-label-fore-color: #212121;
     1713    --collapse-label-hover-back-color: #f0f0f0;
     1714    --collapse-selected-label-back-color: #ececec;
     1715    --collapse-border-color: #ddd;
     1716    --collapse-content-back-color: #fafafa;
     1717    --collapse-selected-label-border-color: #0277bd;
    17131718}
    17141719
    17151720.collapse {
    1716   width: calc(100% - 2 * var(--universal-margin));
    1717   opacity: 1;
    1718   display: flex;
    1719   flex-direction: column;
    1720   margin: var(--universal-margin);
    1721   border-radius: var(--universal-border-radius);
     1721    width: calc(100% - 2 * var(--universal-margin));
     1722    opacity: 1;
     1723    display: flex;
     1724    flex-direction: column;
     1725    margin: var(--universal-margin);
     1726    border-radius: var(--universal-border-radius);
    17221727}
    17231728
    17241729.collapse > [type="radio"], .collapse > [type="checkbox"] {
    1725   height: 1px;
    1726   width: 1px;
    1727   margin: -1px;
    1728   overflow: hidden;
    1729   position: absolute;
    1730   clip: rect(0 0 0 0);
    1731   -webkit-clip-path: inset(100%);
    1732   clip-path: inset(100%);
     1730    height: 1px;
     1731    width: 1px;
     1732    margin: -1px;
     1733    overflow: hidden;
     1734    position: absolute;
     1735    clip: rect(0 0 0 0);
     1736    -webkit-clip-path: inset(100%);
     1737    clip-path: inset(100%);
    17331738}
    17341739
    17351740.collapse > label {
    1736   flex-grow: 1;
    1737   display: inline-block;
    1738   height: 1.5rem;
    1739   cursor: pointer;
    1740   transition: background 0.3s;
    1741   color: var(--collapse-label-fore-color);
    1742   background: var(--collapse-label-back-color);
    1743   border: 0.0625rem solid var(--collapse-border-color);
    1744   padding: calc(1.5 * var(--universal-padding));
     1741    flex-grow: 1;
     1742    display: inline-block;
     1743    height: 1.5rem;
     1744    cursor: pointer;
     1745    transition: background 0.3s;
     1746    color: var(--collapse-label-fore-color);
     1747    background: var(--collapse-label-back-color);
     1748    border: 0.0625rem solid var(--collapse-border-color);
     1749    padding: calc(1.5 * var(--universal-padding));
    17451750}
    17461751
    17471752.collapse > label:hover, .collapse > label:focus {
    1748   background: var(--collapse-label-hover-back-color);
     1753    background: var(--collapse-label-hover-back-color);
    17491754}
    17501755
    17511756.collapse > label + div {
    1752   flex-basis: auto;
    1753   height: 1px;
    1754   width: 1px;
    1755   margin: -1px;
    1756   overflow: hidden;
    1757   position: absolute;
    1758   clip: rect(0 0 0 0);
    1759   -webkit-clip-path: inset(100%);
    1760   clip-path: inset(100%);
    1761   transition: max-height 0.3s;
    1762   max-height: 1px;
     1757    flex-basis: auto;
     1758    height: 1px;
     1759    width: 1px;
     1760    margin: -1px;
     1761    overflow: hidden;
     1762    position: absolute;
     1763    clip: rect(0 0 0 0);
     1764    -webkit-clip-path: inset(100%);
     1765    clip-path: inset(100%);
     1766    transition: max-height 0.3s;
     1767    max-height: 1px;
    17631768}
    17641769
    17651770.collapse > :checked + label {
    1766   background: var(--collapse-selected-label-back-color);
    1767   border-bottom-color: var(--collapse-selected-label-border-color);
     1771    background: var(--collapse-selected-label-back-color);
     1772    border-bottom-color: var(--collapse-selected-label-border-color);
    17681773}
    17691774
    17701775.collapse > :checked + label + div {
    1771   box-sizing: border-box;
    1772   position: relative;
    1773   width: 100%;
    1774   height: auto;
    1775   overflow: auto;
    1776   margin: 0;
    1777   background: var(--collapse-content-back-color);
    1778   border: 0.0625rem solid var(--collapse-border-color);
    1779   border-top: 0;
    1780   padding: var(--universal-padding);
    1781   clip: auto;
    1782   -webkit-clip-path: inset(0%);
    1783   clip-path: inset(0%);
    1784   max-height: 400px;
     1776    box-sizing: border-box;
     1777    position: relative;
     1778    width: 100%;
     1779    height: auto;
     1780    overflow: auto;
     1781    margin: 0;
     1782    background: var(--collapse-content-back-color);
     1783    border: 0.0625rem solid var(--collapse-border-color);
     1784    border-top: 0;
     1785    padding: var(--universal-padding);
     1786    clip: auto;
     1787    -webkit-clip-path: inset(0%);
     1788    clip-path: inset(0%);
     1789    max-height: 400px;
    17851790}
    17861791
    17871792.collapse > label:not(:first-of-type) {
    1788   border-top: 0;
     1793    border-top: 0;
    17891794}
    17901795
    17911796.collapse > label:first-of-type {
    1792   border-radius: var(--universal-border-radius) var(--universal-border-radius) 0 0;
     1797    border-radius: var(--universal-border-radius) var(--universal-border-radius) 0 0;
    17931798}
    17941799
    17951800.collapse > label:last-of-type:not(:first-of-type) {
    1796   border-radius: 0 0 var(--universal-border-radius) var(--universal-border-radius);
     1801    border-radius: 0 0 var(--universal-border-radius) var(--universal-border-radius);
    17971802}
    17981803
    17991804.collapse > label:last-of-type:first-of-type {
    1800   border-radius: var(--universal-border-radius);
     1805    border-radius: var(--universal-border-radius);
    18011806}
    18021807
    18031808.collapse > :checked:last-of-type:not(:first-of-type) + label {
    1804   border-radius: 0;
     1809    border-radius: 0;
    18051810}
    18061811
    18071812.collapse > :checked:last-of-type + label + div {
    1808   border-radius: 0 0 var(--universal-border-radius) var(--universal-border-radius);
     1813    border-radius: 0 0 var(--universal-border-radius) var(--universal-border-radius);
    18091814}
    18101815
    … …  
    18131818*/
    18141819mark.secondary {
    1815   --mark-back-color: #d32f2f;
     1820    --mark-back-color: #d32f2f;
    18161821}
    18171822
    18181823mark.tertiary {
    1819   --mark-back-color: #308732;
     1824    --mark-back-color: #308732;
    18201825}
    18211826
    18221827mark.tag {
    1823   padding: calc(var(--universal-padding)/2) var(--universal-padding);
    1824   border-radius: 1em;
     1828    padding: calc(var(--universal-padding)/2) var(--universal-padding);
     1829    border-radius: 1em;
    18251830}
    18261831
    … …  
    18301835/* Progess module CSS variable definitions */
    18311836:root {
    1832   --progress-back-color: #ddd;
    1833   --progress-fore-color: #555;
     1837    --progress-back-color: #ddd;
     1838    --progress-fore-color: #555;
    18341839}
    18351840
    18361841progress {
    1837   display: block;
    1838   vertical-align: baseline;
    1839   -webkit-appearance: none;
    1840   -moz-appearance: none;
    1841   appearance: none;
    1842   height: 0.75rem;
    1843   width: calc(100% - 2 * var(--universal-margin));
    1844   margin: var(--universal-margin);
    1845   border: 0;
    1846   border-radius: calc(2 * var(--universal-border-radius));
    1847   background: var(--progress-back-color);
    1848   color: var(--progress-fore-color);
     1842    display: block;
     1843    vertical-align: baseline;
     1844    -webkit-appearance: none;
     1845    -moz-appearance: none;
     1846    appearance: none;
     1847    height: 0.75rem;
     1848    width: calc(100% - 2 * var(--universal-margin));
     1849    margin: var(--universal-margin);
     1850    border: 0;
     1851    border-radius: calc(2 * var(--universal-border-radius));
     1852    background: var(--progress-back-color);
     1853    color: var(--progress-fore-color);
    18491854}
    18501855
    18511856progress::-webkit-progress-value {
    1852   background: var(--progress-fore-color);
    1853   border-top-left-radius: calc(2 * var(--universal-border-radius));
    1854   border-bottom-left-radius: calc(2 * var(--universal-border-radius));
     1857    background: var(--progress-fore-color);
     1858    border-top-left-radius: calc(2 * var(--universal-border-radius));
     1859    border-bottom-left-radius: calc(2 * var(--universal-border-radius));
    18551860}
    18561861
    18571862progress::-webkit-progress-bar {
    1858   background: var(--progress-back-color);
     1863    background: var(--progress-back-color);
    18591864}
    18601865
    18611866progress::-moz-progress-bar {
    1862   background: var(--progress-fore-color);
    1863   border-top-left-radius: calc(2 * var(--universal-border-radius));
    1864   border-bottom-left-radius: calc(2 * var(--universal-border-radius));
     1867    background: var(--progress-fore-color);
     1868    border-top-left-radius: calc(2 * var(--universal-border-radius));
     1869    border-bottom-left-radius: calc(2 * var(--universal-border-radius));
    18651870}
    18661871
    18671872progress[value="1000"]::-webkit-progress-value {
    1868   border-radius: calc(2 * var(--universal-border-radius));
     1873    border-radius: calc(2 * var(--universal-border-radius));
    18691874}
    18701875
    18711876progress[value="1000"]::-moz-progress-bar {
    1872   border-radius: calc(2 * var(--universal-border-radius));
     1877    border-radius: calc(2 * var(--universal-border-radius));
    18731878}
    18741879
    18751880progress.inline {
    1876   display: inline-block;
    1877   vertical-align: middle;
    1878   width: 60%;
     1881    display: inline-block;
     1882    vertical-align: middle;
     1883    width: 60%;
    18791884}
    18801885
    18811886:root {
    1882   --spinner-back-color: #ddd;
    1883   --spinner-fore-color: #555;
     1887    --spinner-back-color: #ddd;
     1888    --spinner-fore-color: #555;
    18841889}
    18851890
    18861891@keyframes spinner-donut-anim {
    1887   0% {
    1888     transform: rotate(0deg);
    1889   }
    1890   100% {
    1891     transform: rotate(360deg);
    1892   }
     1892    0% {
     1893        transform: rotate(0deg);
     1894    }
     1895    100% {
     1896        transform: rotate(360deg);
     1897    }
    18931898}
    18941899
    18951900.spinner {
    1896   display: inline-block;
    1897   margin: var(--universal-margin);
    1898   border: 0.25rem solid var(--spinner-back-color);
    1899   border-left: 0.25rem solid var(--spinner-fore-color);
    1900   border-radius: 50%;
    1901   width: 1.25rem;
    1902   height: 1.25rem;
    1903   animation: spinner-donut-anim 1.2s linear infinite;
     1901    display: inline-block;
     1902    margin: var(--universal-margin);
     1903    border: 0.25rem solid var(--spinner-back-color);
     1904    border-left: 0.25rem solid var(--spinner-fore-color);
     1905    border-radius: 50%;
     1906    width: 1.25rem;
     1907    height: 1.25rem;
     1908    animation: spinner-donut-anim 1.2s linear infinite;
    19041909}
    19051910
    … …  
    19081913*/
    19091914progress.primary {
    1910   --progress-fore-color: #1976d2;
     1915    --progress-fore-color: #1976d2;
    19111916}
    19121917
    19131918progress.secondary {
    1914   --progress-fore-color: #d32f2f;
     1919    --progress-fore-color: #d32f2f;
    19151920}
    19161921
    19171922progress.tertiary {
    1918   --progress-fore-color: #308732;
     1923    --progress-fore-color: #308732;
    19191924}
    19201925
    19211926.spinner.primary {
    1922   --spinner-fore-color: #1976d2;
     1927    --spinner-fore-color: #1976d2;
    19231928}
    19241929
    19251930.spinner.secondary {
    1926   --spinner-fore-color: #d32f2f;
     1931    --spinner-fore-color: #d32f2f;
    19271932}
    19281933
    19291934.spinner.tertiary {
    1930   --spinner-fore-color: #308732;
     1935    --spinner-fore-color: #308732;
    19311936}
    19321937
    … …  
    19351940*/
    19361941span[class^='icon-'] {
    1937   display: inline-block;
    1938   height: 1em;
    1939   width: 1em;
    1940   vertical-align: -0.125em;
    1941   background-size: contain;
    1942   margin: 0 calc(var(--universal-margin) / 4);
     1942    display: inline-block;
     1943    height: 1em;
     1944    width: 1em;
     1945    vertical-align: -0.125em;
     1946    background-size: contain;
     1947    margin: 0 calc(var(--universal-margin) / 4);
    19431948}
    19441949
    19451950span[class^='icon-'].secondary {
    1946   -webkit-filter: invert(25%);
    1947   filter: invert(25%);
     1951    -webkit-filter: invert(25%);
     1952    filter: invert(25%);
    19481953}
    19491954
    19501955span[class^='icon-'].inverse {
    1951   -webkit-filter: invert(100%);
    1952   filter: invert(100%);
     1956    -webkit-filter: invert(100%);
     1957    filter: invert(100%);
    19531958}
    19541959
    19551960span.icon-alert {
    1956   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");
     1961    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");
    19571962}
    19581963
    19591964span.icon-bookmark {
    1960   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");
     1965    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");
    19611966}
    19621967
    19631968span.icon-calendar {
    1964   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");
     1969    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");
    19651970}
    19661971
    19671972span.icon-credit {
    1968   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");
     1973    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");
    19691974}
    19701975
    19711976span.icon-edit {
    1972   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");
     1977    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");
    19731978}
    19741979
    19751980span.icon-link {
    1976   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");
     1981    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");
    19771982}
    19781983
    19791984span.icon-help {
    1980   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");
     1985    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");
    19811986}
    19821987
    19831988span.icon-home {
    1984   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");
     1989    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");
    19851990}
    19861991
    19871992span.icon-info {
    1988   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");
     1993    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");
    19891994}
    19901995
    19911996span.icon-lock {
    1992   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");
     1997    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");
    19931998}
    19941999
    19952000span.icon-mail {
    1996   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");
     2001    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");
    19972002}
    19982003
    19992004span.icon-location {
    2000   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");
     2005    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");
    20012006}
    20022007
    20032008span.icon-phone {
    2004   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");
     2009    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");
    20052010}
    20062011
    20072012span.icon-rss {
    2008   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");
     2013    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");
    20092014}
    20102015
    20112016span.icon-search {
    2012   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");
     2017    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");
    20132018}
    20142019
    20152020span.icon-settings {
    2016   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");
     2021    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");
    20172022}
    20182023
    20192024span.icon-share {
    2020   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");
     2025    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");
    20212026}
    20222027
    20232028span.icon-cart {
    2024   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");
     2029    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");
    20252030}
    20262031
    20272032span.icon-upload {
    2028   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");
     2033    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");
    20292034}
    20302035
    20312036span.icon-user {
    2032   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");
     2037    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");
    20332038}
    20342039
    … …  
    20382043/* Utility module CSS variable definitions */
    20392044:root {
    2040   --generic-border-color: rgba(0, 0, 0, 0.3);
    2041   --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);
     2045    --generic-border-color: rgba(0, 0, 0, 0.3);
     2046    --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);
    20422047}
    20432048
    20442049.hidden {
    2045   display: none !important;
     2050    display: none !important;
    20462051}
    20472052
    20482053.visually-hidden {
    2049   position: absolute !important;
    2050   width: 1px !important;
    2051   height: 1px !important;
    2052   margin: -1px !important;
    2053   border: 0 !important;
    2054   padding: 0 !important;
    2055   clip: rect(0 0 0 0) !important;
    2056   -webkit-clip-path: inset(100%) !important;
    2057   clip-path: inset(100%) !important;
    2058   overflow: hidden !important;
    2059 }
    2060 
    2061 .bordered {
    2062   border: 0.0625rem solid var(--generic-border-color) !important;
    2063 }
    2064 
    2065 .rounded {
    2066   border-radius: var(--universal-border-radius) !important;
    2067 }
    2068 
    2069 .circular {
    2070   border-radius: 50% !important;
    2071 }
    2072 
    2073 .shadowed {
    2074   box-shadow: var(--generic-box-shadow) !important;
    2075 }
    2076 
    2077 .responsive-margin {
    2078   margin: calc(var(--universal-margin) / 4) !important;
    2079 }
    2080 
    2081 @media screen and (min-width: 768px) {
    2082   .responsive-margin {
    2083     margin: calc(var(--universal-margin) / 2) !important;
    2084   }
    2085 }
    2086 
    2087 @media screen and (min-width: 1280px) {
    2088   .responsive-margin {
    2089     margin: var(--universal-margin) !important;
    2090   }
    2091 }
    2092 
    2093 .responsive-padding {
    2094   padding: calc(var(--universal-padding) / 4) !important;
    2095 }
    2096 
    2097 @media screen and (min-width: 768px) {
    2098   .responsive-padding {
    2099     padding: calc(var(--universal-padding) / 2) !important;
    2100   }
    2101 }
    2102 
    2103 @media screen and (min-width: 1280px) {
    2104   .responsive-padding {
    2105     padding: var(--universal-padding) !important;
    2106   }
    2107 }
    2108 
    2109 @media screen and (max-width: 767px) {
    2110   .hidden-sm {
    2111     display: none !important;
    2112   }
    2113 }
    2114 
    2115 @media screen and (min-width: 768px) and (max-width: 1279px) {
    2116   .hidden-md {
    2117     display: none !important;
    2118   }
    2119 }
    2120 
    2121 @media screen and (min-width: 1280px) {
    2122   .hidden-lg {
    2123     display: none !important;
    2124   }
    2125 }
    2126 
    2127 @media screen and (max-width: 767px) {
    2128   .visually-hidden-sm {
    21292054    position: absolute !important;
    21302055    width: 1px !important;
    … …  
    21372062    clip-path: inset(100%) !important;
    21382063    overflow: hidden !important;
    2139   }
     2064}
     2065
     2066.bordered {
     2067    border: 0.0625rem solid var(--generic-border-color) !important;
     2068}
     2069
     2070.rounded {
     2071    border-radius: var(--universal-border-radius) !important;
     2072}
     2073
     2074.circular {
     2075    border-radius: 50% !important;
     2076}
     2077
     2078.shadowed {
     2079    box-shadow: var(--generic-box-shadow) !important;
     2080}
     2081
     2082.responsive-margin {
     2083    margin: calc(var(--universal-margin) / 4) !important;
     2084}
     2085
     2086@media screen and (min-width: 768px) {
     2087    .responsive-margin {
     2088        margin: calc(var(--universal-margin) / 2) !important;
     2089    }
     2090}
     2091
     2092@media screen and (min-width: 1280px) {
     2093    .responsive-margin {
     2094        margin: var(--universal-margin) !important;
     2095    }
     2096}
     2097
     2098.responsive-padding {
     2099    padding: calc(var(--universal-padding) / 4) !important;
     2100}
     2101
     2102@media screen and (min-width: 768px) {
     2103    .responsive-padding {
     2104        padding: calc(var(--universal-padding) / 2) !important;
     2105    }
     2106}
     2107
     2108@media screen and (min-width: 1280px) {
     2109    .responsive-padding {
     2110        padding: var(--universal-padding) !important;
     2111    }
     2112}
     2113
     2114@media screen and (max-width: 767px) {
     2115    .hidden-sm {
     2116        display: none !important;
     2117    }
    21402118}
    21412119
    21422120@media screen and (min-width: 768px) and (max-width: 1279px) {
    2143   .visually-hidden-md {
    2144     position: absolute !important;
    2145     width: 1px !important;
    2146     height: 1px !important;
    2147     margin: -1px !important;
    2148     border: 0 !important;
    2149     padding: 0 !important;
    2150     clip: rect(0 0 0 0) !important;
    2151     -webkit-clip-path: inset(100%) !important;
    2152     clip-path: inset(100%) !important;
    2153     overflow: hidden !important;
    2154   }
     2121    .hidden-md {
     2122        display: none !important;
     2123    }
    21552124}
    21562125
    21572126@media screen and (min-width: 1280px) {
    2158   .visually-hidden-lg {
    2159     position: absolute !important;
    2160     width: 1px !important;
    2161     height: 1px !important;
    2162     margin: -1px !important;
    2163     border: 0 !important;
    2164     padding: 0 !important;
    2165     clip: rect(0 0 0 0) !important;
    2166     -webkit-clip-path: inset(100%) !important;
    2167     clip-path: inset(100%) !important;
    2168     overflow: hidden !important;
    2169   }
    2170 }
     2127    .hidden-lg {
     2128        display: none !important;
     2129    }
     2130}
     2131
     2132@media screen and (max-width: 767px) {
     2133    .visually-hidden-sm {
     2134        position: absolute !important;
     2135        width: 1px !important;
     2136        height: 1px !important;
     2137        margin: -1px !important;
     2138        border: 0 !important;
     2139        padding: 0 !important;
     2140        clip: rect(0 0 0 0) !important;
     2141        -webkit-clip-path: inset(100%) !important;
     2142        clip-path: inset(100%) !important;
     2143        overflow: hidden !important;
     2144    }
     2145}
     2146
     2147@media screen and (min-width: 768px) and (max-width: 1279px) {
     2148    .visually-hidden-md {
     2149        position: absolute !important;
     2150        width: 1px !important;
     2151        height: 1px !important;
     2152        margin: -1px !important;
     2153        border: 0 !important;
     2154        padding: 0 !important;
     2155        clip: rect(0 0 0 0) !important;
     2156        -webkit-clip-path: inset(100%) !important;
     2157        clip-path: inset(100%) !important;
     2158        overflow: hidden !important;
     2159    }
     2160}
     2161
     2162@media screen and (min-width: 1280px) {
     2163    .visually-hidden-lg {
     2164        position: absolute !important;
     2165        width: 1px !important;
     2166        height: 1px !important;
     2167        margin: -1px !important;
     2168        border: 0 !important;
     2169        padding: 0 !important;
     2170        clip: rect(0 0 0 0) !important;
     2171        -webkit-clip-path: inset(100%) !important;
     2172        clip-path: inset(100%) !important;
     2173        overflow: hidden !important;
     2174    }
     2175}
Note: See TracChangeset for help on using the changeset viewer.