bullframe.css 4.2.2 → 5.0.1

package/dist/css/bullframe-system-default.css

@@ -1,5 +1,5 @@
-/*! bullframe.css v4.2.2 | MIT License | https://github.com/marcop135/bullframe.css */
-/*! custom build: bullframe-system-default */
+/*! Bullframe CSS v5.0.0 | MIT License | https://github.com/marcop135/bullframe.css */
+@charset "UTF-8";
 *,
 *::before,
 *::after {
@@ -43,7 +43,6 @@ html {
 
 body {
   margin: 0;
-  font-size: 16px;
   font-size: 1.6rem;
   line-height: 1.5;
   font-weight: 400;
@@ -61,12 +60,10 @@ h4,
 h5,
 h6 {
   margin-top: 0;
-  font-weight: 700;
   font-weight: 600;
   font-family: inherit;
   color: inherit;
   line-height: 1.25;
-  margin-bottom: 10px;
   margin-bottom: 1rem;
 }
 
@@ -97,7 +94,6 @@ h6 {
 }
 
 blockquote {
-  margin: 0 0 20px 0;
   margin-bottom: 2rem;
   padding-left: 0;
   font-style: italic;
@@ -112,7 +108,7 @@ blockquote small {
   display: block;
 }
 
-blockquote small:before {
+blockquote small::before {
   content: "— ";
 }
 
@@ -121,14 +117,14 @@ q {
 }
 
 pre {
-  margin: 0 0 20px 0;
   margin: 0 0 2rem 0;
   display: block;
   overflow: auto;
   word-break: break-all;
   word-wrap: break-word;
   white-space: pre;
-  hyphens: none;
+  -webkit-hyphens: none;
+          hyphens: none;
   -ms-overflow-style: auto;
 }
 
@@ -136,7 +132,7 @@ pre,
 code,
 kbd,
 samp {
-  font-family: "Menlo", "Consolas", "Roboto Mono", "Ubuntu Monospace", "Noto Mono", "Oxygen Mono", "Liberation Mono", monospace, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  font-family: Menlo, Consolas, "Roboto Mono", "Ubuntu Monospace", "Noto Mono", "Oxygen Mono", "Liberation Mono", monospace, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
   font-size: 0.875em;
 }
 
@@ -155,7 +151,6 @@ pre code {
 }
 
 p {
-  margin: 0 0 20px 0;
   margin: 0 0 2rem 0;
 }
 
@@ -184,9 +179,9 @@ strong {
   font-weight: inherit;
 }
 
-/* stylelint-disable-next-line */
 b,
 strong {
+  /* stylelint-disable-next-line */
   font-weight: bolder;
 }
 
@@ -216,6 +211,10 @@ small {
   font-size: 80%;
 }
 
+p:has(small) {
+  line-height: 1.25;
+}
+
 hr {
   box-sizing: content-box;
   display: block;
@@ -223,24 +222,11 @@ hr {
   border-style: solid;
   border-width: 1px 0 0;
   color: inherit;
-  margin: 20px 0;
   margin: 2rem 0;
   padding: 0;
   overflow: visible;
 }
 
-address {
-  font-style: normal;
-  margin-bottom: 10px;
-  margin-bottom: 1rem;
-  line-height: inherit;
-}
-
-summary {
-  display: list-item;
-  cursor: pointer;
-}
-
 a {
   color: #007bff;
   text-decoration: none;
@@ -251,20 +237,18 @@ a:hover, a:focus {
   color: #0056b3;
 }
 
-a:not([href]):not([tabindex]) {
+a:not([href], [tabindex]) {
   color: inherit;
   text-decoration: none;
 }
 
-a:not([href]):not([tabindex]):hover,
-a:not([href]):not([tabindex]):focus,
-a:not([href]):not([class]),
-a:not([href]):not([class]):hover {
+a:not([href], [class]),
+a:not([href], [class]):hover {
   color: inherit;
   text-decoration: none;
 }
 
-a:not([href]):not([tabindex]):focus {
+a:not([href], [tabindex]):focus {
   outline: 0;
 }
 
@@ -313,7 +297,6 @@ menu,
 ol,
 ul,
 dl {
-  margin: 0 0 20px 0;
   margin: 0 0 2rem 0;
   padding: 0;
 }
@@ -330,7 +313,6 @@ dd {
 
 ul,
 ol {
-  margin-left: 20px;
   margin-left: 2rem;
 }
 
@@ -349,7 +331,7 @@ dd {
   margin-left: 0;
 }
 
-nav li:before {
+nav li::before {
   content: "​";
   position: absolute;
 }
@@ -450,6 +432,128 @@ iframe {
   border-style: none;
 }
 
+address {
+  font-style: normal;
+  margin-bottom: 10px;
+  margin-bottom: 1rem;
+  line-height: inherit;
+}
+
+details > summary:first-of-type {
+  display: list-item;
+}
+
+summary {
+  cursor: pointer;
+  font-weight: 700;
+  word-break: break-all;
+}
+
+dialog {
+  background-color: #fff;
+  color: #222;
+  border: none;
+  border-radius: 0.25rem;
+  padding: 20px;
+  padding: 2rem;
+  height: -moz-fit-content;
+  height: fit-content;
+  min-width: 25rem;
+  max-width: calc(100vw - 3rem);
+}
+@media (min-width: 768px) {
+  dialog {
+    max-width: 50rem;
+  }
+}
+
+dialog[open] {
+  display: block !important;
+}
+
+dialog::backdrop {
+  background: rgba(0, 0, 0, 0.4);
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  :root {
+    scroll-behavior: smooth;
+  }
+}
+table {
+  caption-side: bottom;
+  max-width: 100%;
+  border-collapse: collapse;
+  border-color: currentcolor;
+  text-indent: 0;
+}
+
+thead,
+tbody,
+tfoot,
+tr,
+td,
+th {
+  border-color: inherit;
+  border-style: solid;
+  border-width: 0;
+}
+
+thead th {
+  vertical-align: bottom;
+}
+
+th,
+td {
+  vertical-align: top;
+}
+
+th {
+  text-align: inherit;
+  text-align: -webkit-match-parent;
+  font-weight: 700;
+}
+
+caption {
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  color: #999;
+  text-align: left;
+  caption-side: bottom;
+  line-height: 1.375;
+  font-size: 90%;
+}
+
+/* Accessibility
+ * ========================================================================== */
+/**
+ * Change the cursor on busy elements in all browsers (opinionated).
+ */
+:where([aria-busy=true i]) {
+  cursor: progress;
+}
+
+/*
+ * Change the cursor on disabled, not-editable, or otherwise
+ * inoperable elements in all browsers (opinionated).
+ */
+:where([aria-disabled=true i], [disabled]) {
+  cursor: not-allowed;
+}
+
+/*
+ * Change the display on visually hidden accessible elements
+ * in all browsers (opinionated).
+ */
+:where([aria-hidden=false i][hidden]) {
+  display: initial;
+}
+
+:where([aria-hidden=false i][hidden]:not(:focus)) {
+  clip: rect(0, 0, 0, 0);
+  position: absolute;
+}
+
 html input,
 button,
 select,
@@ -558,8 +662,7 @@ label textarea {
   font-size: 110%;
 }
 
-[type=number]::-webkit-outer-spin-button,
-[type=number]::-webkit-inner-spin-button {
+::-webkit-inner-spin-button {
   height: auto;
 }
 
@@ -578,7 +681,6 @@ label textarea {
 }
 
 [type=search] {
-  outline-offset: -2.5px;
   outline-offset: -0.25rem;
 }
 
@@ -595,7 +697,11 @@ select {
   word-wrap: normal;
 }
 
-[list]:not([type=date]):not([type=datetime-local]):not([type=month]):not([type=week]):not([type=time])::-webkit-calendar-picker-indicator {
+[list]:not([type=date],
+[type=datetime-local],
+[type=month],
+[type=week],
+[type=time])::-webkit-calendar-picker-indicator {
   display: none !important;
 }
 
@@ -603,7 +709,6 @@ optgroup {
   font-family: inherit;
   font-size: inherit;
   font-style: inherit;
-  font-weight: 700;
   font-weight: 600;
 }
 
@@ -628,18 +733,20 @@ html [type=button],
 input[list],
 textarea {
   -webkit-appearance: none;
+          appearance: none;
 }
 
-::-webkit-file-upload-button {
-  -webkit-appearance: button;
+::file-selector-button {
   font: inherit;
+  -webkit-appearance: auto;
+     -moz-appearance: auto;
+          appearance: auto;
 }
 
 button,
 input,
 select,
 textarea {
-  border-radius: 2.5px;
   border-radius: 0.25rem;
 }
 
@@ -648,7 +755,6 @@ textarea {
 }
 
 [type=checkbox] {
-  border-radius: 5px;
   border-radius: 0.5rem;
 }
 
@@ -658,7 +764,7 @@ textarea {
   background-color: #fff;
 }
 
-[type=range] {
+[type=range i] {
   background-color: transparent;
 }
 
@@ -716,14 +822,10 @@ button:hover, button:active, button:focus,
   color: #222;
 }
 
-button,
-select,
-input[type=submit],
-input[type=button],
-[type=checkbox],
-[type=range],
-[type=radio],
-[role=button] {
+button:not(:disabled),
+[type=button]:not(:disabled),
+[type=reset]:not(:disabled),
+[type=submit]:not(:disabled) {
   cursor: pointer;
 }
 
@@ -736,6 +838,13 @@ textarea::placeholder {
   color: #666;
 }
 
+/*
+Use the modern Firefox focus style for all focusable elements.
+*/
+:-moz-focusring {
+  outline: auto;
+}
+
 :-moz-ui-invalid {
   box-shadow: none;
 }
@@ -756,7 +865,7 @@ input[list],
 select,
 textarea {
   background-color: #fff;
-  border: 1px solid #999;
+  border: 1px solid/#999;
   padding: 5px 7.5px;
   padding: 0.5rem 0.75rem;
 }
@@ -835,32 +944,32 @@ button:active, button:focus,
 
 fieldset[disabled] button,
 fieldset[disabled] input,
-fieldset[disabled] input:after,
-fieldset[disabled] input:before,
+fieldset[disabled] input::after,
+fieldset[disabled] input::before,
 fieldset[disabled] input:checked,
 fieldset[disabled] select,
 fieldset[disabled] textarea,
 fieldset[disabled] label,
 button[disabled],
 input[disabled],
-input[disabled]:after,
-input[disabled]:before,
+input[disabled]::after,
+input[disabled]::before,
 input[disabled]:checked,
 select[disabled],
 textarea[disabled],
 label[disabled],
 button:disabled,
 input:disabled,
-input:disabled:after,
-input:disabled:before,
+input:disabled::after,
+input:disabled::before,
 input:disabled:checked,
 select:disabled,
 textarea:disabled,
 label:disabled,
 button[aria-disabled=true],
 input[aria-disabled=true],
-input[aria-disabled=true]:after,
-input[aria-disabled=true]:before,
+input[aria-disabled=true]::after,
+input[aria-disabled=true]::before,
 input[aria-disabled=true]:checked,
 select[aria-disabled=true],
 textarea[aria-disabled=true],
@@ -875,7 +984,7 @@ label[aria-disabled=true] {
   opacity: 0.5 !important;
 }
 
-select:not([size]):not([multiple]) {
+select:not([size], [multiple]) {
   -webkit-appearance: none;
      -moz-appearance: none;
           appearance: none;
@@ -888,8 +997,8 @@ select::-ms-expand {
   display: none;
 }
 
-*[dir=rtl] select:not([size]):not([multiple]),
-select[dir=rtl]:not([size]):not([multiple]) {
+*[dir=rtl] select:not([size], [multiple]),
+select[dir=rtl]:not([size], [multiple]) {
   background-position: left 0.85rem top 50%;
   padding-right: 7.5px;
   padding-right: 0.75rem;
@@ -897,293 +1006,246 @@ select[dir=rtl]:not([size]):not([multiple]) {
   padding-left: 2rem;
 }
 
-@supports ((-webkit-appearance: none) or (-moz-appearance: none) or (appearance: none)) {
-  [type=checkbox],
-  [type=radio] {
-    -webkit-appearance: none;
-       -moz-appearance: none;
-            appearance: none;
-    height: 1.8rem;
-    width: 1.8rem;
-    vertical-align: top;
-    position: relative;
-    border: 1px solid #999;
-  }
-  [type=checkbox] + label,
-  [type=radio] + label {
-    line-height: 1.8rem;
-    vertical-align: top;
-    margin-left: 5px;
-    margin-left: 0.5rem;
-  }
-  *[dir=rtl] [type=checkbox] + label, [type=checkbox][dir=rtl] + label,
-  *[dir=rtl] [type=radio] + label,
-  [type=radio][dir=rtl] + label {
-    margin-left: 0;
-    margin-right: 5px;
-    margin-right: 0.5rem;
-  }
-  [type=checkbox]:after,
-  [type=radio]:after {
-    content: "";
-    display: block;
-    position: absolute;
-  }
-  [type=checkbox]:checked,
-  [type=radio]:checked {
-    background-color: #007bff;
-    border-color: #000;
-  }
-  [type=radio]:after {
-    width: 1.8rem;
-    height: 1.8rem;
-    left: -0.05rem;
-    top: -0.05rem;
-    border-radius: 50%;
-    background: #fff;
-    transform: scale(0.35);
-  }
-  [type=checkbox]:after {
-    width: 0.6rem;
-    height: 0.8rem;
-    border: 2px solid #fff;
-    border-top: 0;
-    border-left: 0;
-    left: 35%;
-    top: 20%;
-    transform: rotate(43deg);
-  }
+[type=checkbox],
+[type=radio] {
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  height: 1.8rem;
+  width: 1.8rem;
+  vertical-align: top;
+  position: relative;
+  border: 1px solid/#999;
 }
-@supports ((-webkit-appearance: none) or (-moz-appearance: none) or (appearance: none)) {
-  [type=range] {
-    -webkit-appearance: none;
-       -moz-appearance: none;
-            appearance: none;
-    width: 100%;
-    height: 1.4rem;
-  }
-  [type=range]::-webkit-slider-thumb {
-    border: 0;
-    -webkit-appearance: none;
-            appearance: none;
-    width: 1.5rem;
-    height: 1.5rem;
-    margin-top: -0.25rem;
-    background-color: #007bff;
-    border-radius: 1.5rem;
-    -webkit-transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
-    transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
-  }
-  [type=range]::-webkit-slider-thumb:active {
-    background-color: #007bff;
-  }
-  [type=range]::-moz-range-thumb {
-    border: 0;
-    -moz-appearance: none;
-         appearance: none;
-    width: 1.5rem;
-    height: 1.5rem;
-    background-color: #007bff;
-    border-radius: 1.5rem;
-    -moz-transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
-    transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
-  }
-  [type=range]::-moz-range-thumb:active {
-    background-color: #007bff;
-  }
-  [type=range]::-webkit-slider-runnable-track {
-    color: transparent;
-    border-color: transparent;
-    width: 100%;
-    height: 0.65rem;
-    cursor: pointer;
-    background-color: #e9e9e9;
-  }
-  [type=range]::-moz-range-track {
-    color: transparent;
-    border-color: transparent;
-    width: 100%;
-    height: 0.65rem;
-    cursor: pointer;
-    background-color: #e9e9e9;
-  }
-  [type=range]:focus {
-    outline: none;
-  }
-  [type=range]:focus::-webkit-slider-thumb {
-    box-shadow: 0 0 0 0.1rem #fff, 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
-  }
-  [type=range]:focus::-moz-slider-thumb {
-    box-shadow: 0 0 0 0.1rem #fff, 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
-  }
-  [type=range]::-moz-focus-outer {
-    border: 0;
-  }
-  [type=range]:focus::-moz-range-thumb {
-    box-shadow: 0 0 0 0.1rem #fff, 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
-  }
-  [type=range]:disabled {
-    pointer-events: none;
-  }
-  [type=range]:disabled::-webkit-slider-thumb {
-    background-color: #ccc;
-  }
-  [type=range]:disabled::-moz-slider-thumb {
-    background-color: #ccc;
-  }
+[type=checkbox] + label,
+[type=radio] + label {
+  line-height: 1.8rem;
+  vertical-align: top;
+  margin-left: 5px;
+  margin-left: 0.5rem;
 }
-table {
-  max-width: 100%;
-  border-collapse: collapse;
-  border-color: currentcolor;
-  text-indent: 0;
+*[dir=rtl] [type=checkbox] + label, [type=checkbox][dir=rtl] + label,
+*[dir=rtl] [type=radio] + label,
+[type=radio][dir=rtl] + label {
+  margin-left: 0;
+  margin-right: 5px;
+  margin-right: 0.5rem;
+}
+[type=checkbox]::after,
+[type=radio]::after {
+  content: "";
+  display: block;
+  position: absolute;
+}
+[type=checkbox]:checked,
+[type=radio]:checked {
+  background-color: #007bff;
+  border-color: #000;
 }
 
-thead,
-tbody,
-tfoot,
-tr,
-td,
-th {
-  border-color: inherit;
-  border-style: solid;
-  border-width: 0;
+[type=radio]::after {
+  width: 1.8rem;
+  height: 1.8rem;
+  left: -0.05rem;
+  top: -0.05rem;
+  border-radius: 50%;
+  background: #fff;
+  transform: scale(0.35);
 }
 
-thead th {
-  vertical-align: bottom;
+[type=checkbox]::after {
+  width: 0.6rem;
+  height: 0.8rem;
+  border: 2px solid/#fff;
+  border-top: 0;
+  border-left: 0;
+  left: 35%;
+  top: 20%;
+  transform: rotate(43deg);
 }
 
-th,
-td {
-  vertical-align: top;
+[type=range] {
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  width: 100%;
+  height: 1.4rem;
 }
 
-th {
-  text-align: inherit;
-  font-weight: 700;
+[type=range]::-webkit-slider-thumb {
+  border: 0;
+  -webkit-appearance: none;
+          appearance: none;
+  width: 1.5rem;
+  height: 1.5rem;
+  margin-top: -0.25rem;
+  background-color: #007bff;
+  border-radius: 1.5rem;
+  -webkit-transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+  transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+}
+[type=range]::-webkit-slider-thumb:active {
+  background-color: #007bff;
 }
 
-caption {
-  padding-top: 5px;
-  padding-top: 0.5rem;
-  padding-bottom: 5px;
-  padding-bottom: 0.5rem;
-  color: #999;
-  text-align: left;
-  caption-side: bottom;
-  line-height: 1.375;
-  font-size: 90%;
+[type=range]::-moz-range-thumb {
+  border: 0;
+  -moz-appearance: none;
+       appearance: none;
+  width: 1.5rem;
+  height: 1.5rem;
+  background-color: #007bff;
+  border-radius: 1.5rem;
+  -moz-transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+  transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+}
+[type=range]::-moz-range-thumb:active {
+  background-color: #007bff;
+}
+
+[type=range]::-webkit-slider-runnable-track {
+  color: transparent;
+  border-color: transparent;
+  width: 100%;
+  height: 0.65rem;
+  cursor: pointer;
+  background-color: #e9e9e9;
+}
+
+[type=range]::-moz-range-track {
+  color: transparent;
+  border-color: transparent;
+  width: 100%;
+  height: 0.65rem;
+  cursor: pointer;
+  background-color: #e9e9e9;
+}
+
+[type=range]:focus {
+  outline: none;
+}
+[type=range]:focus::-webkit-slider-thumb {
+  box-shadow: 0 0 0 0.1rem/#fff, 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
+}
+[type=range]:focus::-moz-slider-thumb {
+  box-shadow: 0 0 0 0.1rem/#fff, 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
+}
+
+[type=range]::-moz-focus-outer {
+  border: 0;
+}
+
+[type=range]:focus::-moz-range-thumb {
+  box-shadow: 0 0 0 0.1rem/#fff, 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
+}
+
+[type=range]:disabled {
+  pointer-events: none;
+}
+[type=range]:disabled::-webkit-slider-thumb {
+  background-color: #ccc;
+}
+[type=range]:disabled::-moz-slider-thumb {
+  background-color: #ccc;
 }
 
 .bf-container,
 .bf-container--fluid {
-  box-sizing: content-box;
+  box-sizing: border-box;
   display: block;
   margin-right: auto;
   margin-left: auto;
-  padding-left: 15px;
   padding-left: 1.5rem;
-  padding-right: 15px;
   padding-right: 1.5rem;
 }
-.bf-container:before, .bf-container:after,
-.bf-container--fluid:before,
-.bf-container--fluid:after {
-  display: table;
-  content: " ";
-}
-.bf-container:after,
-.bf-container--fluid:after {
-  clear: both;
-}
 
 .bf-container {
-  max-width: 1140px;
   max-width: 114rem;
 }
 
 .bf-row {
-  display: block;
-  margin-left: -15px;
+  display: flex;
+  flex-wrap: wrap;
   margin-left: -1.5rem;
-  margin-right: -15px;
   margin-right: -1.5rem;
 }
-.bf-row:before, .bf-row:after {
-  content: " ";
-  display: table;
-}
-.bf-row:after {
-  clear: both;
-}
 
 [class^=bf-col-] {
-  float: left;
   position: relative;
   min-height: 1px;
-  padding-left: 15px;
   padding-left: 1.5rem;
-  padding-right: 15px;
   padding-right: 1.5rem;
+  flex-grow: 0;
+  flex-shrink: 0;
 }
 
 .bf-no-gutters {
   margin-right: 0;
   margin-left: 0;
 }
-
 .bf-no-gutters > [class^=bf-col] {
   padding-right: 0;
   padding-left: 0;
 }
 
 .bf-col-12 {
-  width: 100%;
+  flex-basis: 100%;
+  max-width: 100%;
 }
 
 .bf-col-11 {
-  width: 91.6666666667%;
+  flex-basis: 91.6667%;
+  max-width: 91.6667%;
 }
 
 .bf-col-10 {
-  width: 83.3333333333%;
+  flex-basis: 83.3333%;
+  max-width: 83.3333%;
 }
 
 .bf-col-9 {
-  width: 75%;
+  flex-basis: 75%;
+  max-width: 75%;
 }
 
 .bf-col-8 {
-  width: 66.6666666667%;
+  flex-basis: 66.6667%;
+  max-width: 66.6667%;
 }
 
 .bf-col-7 {
-  width: 58.3333333333%;
+  flex-basis: 58.3333%;
+  max-width: 58.3333%;
 }
 
 .bf-col-6 {
-  width: 50%;
+  flex-basis: 50%;
+  max-width: 50%;
 }
 
 .bf-col-5 {
-  width: 41.6666666667%;
+  flex-basis: 41.6667%;
+  max-width: 41.6667%;
 }
 
 .bf-col-4 {
-  width: 33.3333333333%;
+  flex-basis: 33.3333%;
+  max-width: 33.3333%;
 }
 
 .bf-col-3 {
-  width: 25%;
+  flex-basis: 25%;
+  max-width: 25%;
 }
 
 .bf-col-2 {
-  width: 16.6666666667%;
+  flex-basis: 16.6667%;
+  max-width: 16.6667%;
 }
 
 .bf-col-1 {
-  width: 8.3333%;
+  flex-basis: 8.3333%;
+  max-width: 8.3333%;
 }
 
 @media (max-width: 575px) {
@@ -1192,8 +1254,8 @@ caption {
     margin-right: 0;
   }
   .bf-container--break-xs [class^=bf-col] {
-    width: 100%;
-    float: none;
+    flex-basis: 100%;
+    max-width: 100%;
     margin-left: 0;
     padding-left: 0;
     padding-right: 0;
@@ -1205,8 +1267,8 @@ caption {
     margin-right: 0;
   }
   .bf-container--break-md [class^=bf-col] {
-    width: 100%;
-    float: none;
+    flex-basis: 100%;
+    max-width: 100%;
     margin-left: 0;
     padding-left: 0;
     padding-right: 0;
@@ -1218,8 +1280,8 @@ caption {
     margin-right: 0;
   }
   .bf-container--break-lg [class^=bf-col] {
-    width: 100%;
-    float: none;
+    flex-basis: 100%;
+    max-width: 100%;
     margin-left: 0;
     padding-left: 0;
     padding-right: 0;
@@ -1230,13 +1292,13 @@ table th[class^=bf-col] {
   position: static;
 }
 
-.bf-clearfix:before,
-.bf-clearfix:after {
+.bf-clearfix::before,
+.bf-clearfix::after {
   content: " ";
   display: table;
 }
 
-.bf-clearfix:after {
+.bf-clearfix::after {
   clear: both;
 }
 
@@ -1262,7 +1324,7 @@ table th[class^=bf-col] {
 
 /*
 // taken from https://github.com/h5bp/html5-boilerplate/blob/v7.3.0/dist/css/main.css
-// 
+//
 * Hide only visually, but have it available for screen readers:
 * https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
 *
@@ -1284,7 +1346,7 @@ table th[class^=bf-col] {
 
 /*
 // taken from https://github.com/h5bp/html5-boilerplate/blob/v7.3.0/dist/css/main.css
-// 
+//
 * Extends the .sr-only class to allow the element
 * to be focusable when navigated to via the keyboard:
 * https://www.drupal.org/node/897638
@@ -1394,7 +1456,7 @@ table th[class^=bf-col] {
 }
 
 .bf-width-33 {
-  width: 33.3333333333% !important;
+  width: 33.3333% !important;
 }
 
 .bf-width-50 {
@@ -1518,42 +1580,50 @@ table th[class^=bf-col] {
 }
 
 .bf-m-1 {
-  margin-bottom: 5px !important;
   margin-bottom: 0.5rem !important;
 }
 
 .bf-m-2 {
-  margin-bottom: 10px !important;
   margin-bottom: 1rem !important;
 }
 
 .bf-m-3 {
-  margin-bottom: 20px !important;
   margin-bottom: 2rem !important;
 }
 
 .bf-m-4 {
-  margin-bottom: 30px !important;
   margin-bottom: 3rem !important;
 }
 
+.bf-m-t-1 {
+  margin-top: 0.5rem !important;
+}
+
+.bf-m-t-2 {
+  margin-top: 1rem !important;
+}
+
+.bf-m-t-3 {
+  margin-top: 2rem !important;
+}
+
+.bf-m-t-4 {
+  margin-top: 3rem !important;
+}
+
 .bf-m-b-1 {
-  margin-bottom: 5px !important;
   margin-bottom: 0.5rem !important;
 }
 
 .bf-m-b-2 {
-  margin-bottom: 10px !important;
   margin-bottom: 1rem !important;
 }
 
 .bf-m-b-3 {
-  margin-bottom: 20px !important;
   margin-bottom: 2rem !important;
 }
 
 .bf-m-b-4 {
-  margin-bottom: 30px !important;
   margin-bottom: 3rem !important;
 }
 
@@ -1578,62 +1648,50 @@ table th[class^=bf-col] {
 }
 
 .bf-p-1 {
-  padding-bottom: 5px !important;
   padding-bottom: 0.5rem !important;
 }
 
 .bf-p-2 {
-  padding-bottom: 10px !important;
   padding-bottom: 1rem !important;
 }
 
 .bf-p-3 {
-  padding-bottom: 20px !important;
   padding-bottom: 2rem !important;
 }
 
 .bf-p-4 {
-  padding-bottom: 30px !important;
   padding-bottom: 3rem !important;
 }
 
 .bf-p-t-1 {
-  padding-top: 5px !important;
   padding-top: 0.5rem !important;
 }
 
 .bf-p-t-2 {
-  padding-top: 10px !important;
   padding-top: 1rem !important;
 }
 
 .bf-p-t-3 {
-  padding-top: 20px !important;
   padding-top: 2rem !important;
 }
 
 .bf-p-t-4 {
-  padding-top: 30px !important;
   padding-top: 3rem !important;
 }
 
 .bf-p-b-1 {
-  padding-bottom: 5px !important;
   padding-bottom: 0.5rem !important;
 }
 
 .bf-p-b-2 {
-  padding-bottom: 10px !important;
   padding-bottom: 1rem !important;
 }
 
 .bf-p-b-3 {
-  padding-bottom: 20px !important;
   padding-bottom: 2rem !important;
 }
 
 .bf-p-b-4 {
-  padding-bottom: 30px !important;
   padding-bottom: 3rem !important;
 }
 
@@ -1710,6 +1768,7 @@ table th[class^=bf-col] {
   overflow: hidden !important;
   text-overflow: ellipsis !important;
   display: -webkit-box !important;
+  line-clamp: 2 !important;
   -webkit-line-clamp: 2 !important;
   -webkit-box-orient: vertical !important;
 }
@@ -1718,6 +1777,7 @@ table th[class^=bf-col] {
   overflow: hidden !important;
   text-overflow: ellipsis !important;
   display: -webkit-box !important;
+  line-clamp: 3 !important;
   -webkit-line-clamp: 3 !important;
   -webkit-box-orient: vertical !important;
 }
@@ -1738,7 +1798,7 @@ table th[class^=bf-col] {
 }
 
 .bf-font-monospace {
-  font-family: "Menlo", "Consolas", "Roboto Mono", "Ubuntu Monospace", "Noto Mono", "Oxygen Mono", "Liberation Mono", monospace, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !important;
+  font-family: Menlo, Consolas, "Roboto Mono", "Ubuntu Monospace", "Noto Mono", "Oxygen Mono", "Liberation Mono", monospace, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !important;
 }
 
 .bf-h1,
@@ -1747,7 +1807,6 @@ table th[class^=bf-col] {
 .bf-h4,
 .bf-h5,
 .bf-h6 {
-  font-weight: 700 !important;
   font-weight: 600 !important;
   margin-top: 0 !important;
   line-height: 1.2 !important;
@@ -1786,8 +1845,8 @@ p.bf-lead {
 }
 
 body.bf-responsive-typography {
-  --body-rt-font-size-flex: calc(1.6rem + 3 * ((100vw - 320px) / 680));
-  --body-rt-font-size-max: 1.9rem;
+  --body-rt-font-size-flex: calc(1.5rem + 3 * ((100vw - 320px) / 680));
+  --body-rt-font-size-max: 1.8rem;
 }
 
 @media (min-width: 320px) {
@@ -1804,7 +1863,6 @@ body.bf-responsive-typography {
   display: inline-block;
   cursor: pointer;
   color: #222;
-  padding: 6.6666666667px 13.3333333333px;
   padding: 0.6666666667rem 1.3333333333rem;
   line-height: normal;
   text-align: center;
@@ -1816,7 +1874,6 @@ body.bf-responsive-typography {
   -webkit-user-select: none;
      -moz-user-select: none;
           user-select: none;
-  border-radius: 2.5px;
   border-radius: 0.25rem;
   border: 0;
   background-image: none;
@@ -1858,6 +1915,7 @@ fieldset[disabled] .bf-btn,
           user-select: none !important;
   box-shadow: none !important;
   opacity: 0.5 !important;
+  background-color: #ccc;
 }
 
 .bf-focused {
@@ -1870,8 +1928,8 @@ fieldset[disabled] .bf-btn,
 .bf-disabled:hover,
 .bf-disabled:active,
 .bf-disabled:focus,
-.bf-disabled:after,
-.bf-disabled:before,
+.bf-disabled::after,
+.bf-disabled::before,
 .bf-disabled:invalid,
 .bf-disabled:checked {
   cursor: default !important;
@@ -1945,8 +2003,8 @@ button.bf-disabled:hover, button.bf-disabled:active, button.bf-disabled:focus,
 
 .bf-invalid,
 .bf-invalid:focus {
-  color: #ff0000 !important;
-  border-color: #ff0000 !important;
+  color: #f00 !important;
+  border-color: #f00 !important;
   box-shadow: 0 0 0 3px rgba(255, 0, 0, 0.25) !important;
 }
 
@@ -1994,22 +2052,18 @@ dt {
 
 .bf-table th,
 .bf-table td {
-  padding: 10px;
   padding: 1rem;
   border-bottom: 1px solid #999;
-  margin-bottom: 5px;
   margin-bottom: 0.5rem;
 }
 
 .bf-table-responsive {
-  overflow-x: auto;
-  overflow-y: hidden;
+  overflow: auto hidden;
   -ms-overflow-style: scrollbar;
 }
 
 .bf-table-responsive table {
   width: 100%;
-  margin-bottom: 5px;
   margin-bottom: 0.5rem;
 }
 
@@ -2111,59 +2165,7 @@ dt {
     transition-duration: 0s !important;
   }
 }
-/**
- * Change the cursor on busy elements in all browsers (opinionated).
- */
-[aria-busy=true] {
-  cursor: progress;
-}
-
-/*
- * Change the cursor on control elements in all browsers (opinionated).
- */
-[aria-controls] {
-  cursor: pointer;
-}
-
-/*
- * Change the cursor on disabled, not-editable, or otherwise
- * inoperable elements in all browsers (opinionated).
- */
-[aria-disabled=true],
-[disabled] {
-  cursor: not-allowed;
-}
-
-/*
- * Change the display on visually hidden accessible elements
- * in all browsers (opinionated).
- */
-[aria-hidden=false][hidden] {
-  display: initial;
-}
-
-[aria-hidden=false][hidden]:not(:focus) {
-  clip: rect(0, 0, 0, 0);
-  position: absolute;
-}
-
 @media (prefers-color-scheme: dark) {
-  html {
-    scrollbar-color: rgb(89.25, 89.25, 89.25) #111;
-  }
-  ::-webkit-scrollbar {
-    width: 1.5rem;
-    height: 1.5rem;
-  }
-  ::-webkit-scrollbar-track {
-    background-color: #111;
-  }
-  ::-webkit-scrollbar-thumb {
-    background-color: rgb(89.25, 89.25, 89.25);
-  }
-  ::-webkit-scrollbar-thumb:hover {
-    background-color: rgb(127.5, 127.5, 127.5);
-  }
   html {
     color: #f0f0f0;
   }
@@ -2180,7 +2182,7 @@ dt {
     background-color: #cccc00;
   }
   ins {
-    background-color: rgb(178.5, 178.5, 0);
+    background-color: hsl(60, 100%, 125%);
   }
   [type=email],
   [type=number],
@@ -2197,7 +2199,7 @@ dt {
   [type=range],
   input[list],
   select,
-  select:not([size]):not([multiple]),
+  select:not([size], [multiple]),
   textarea {
     background-color: #111;
     border-color: #000;
@@ -2232,8 +2234,8 @@ dt {
   input[list]:focus,
   select:active,
   select:focus,
-  select:not([size]):not([multiple]):active,
-  select:not([size]):not([multiple]):focus,
+  select:not([size], [multiple]):active,
+  select:not([size], [multiple]):focus,
   textarea:active,
   textarea:focus {
     background-color: #111;
@@ -2266,8 +2268,8 @@ dt {
   input[list]:focus,
   select:active,
   select:focus,
-  select:not([size]):not([multiple]):active,
-  select:not([size]):not([multiple]):focus,
+  select:not([size], [multiple]):active,
+  select:not([size], [multiple]):focus,
   textarea:active,
   textarea:focus {
     box-shadow: 0 0 0 3px rgba(3, 102, 214, 0.5);
@@ -2281,31 +2283,30 @@ dt {
     color: rgb(255, 38.25, 38.25) !important;
     border-color: rgb(255, 38.25, 38.25) !important;
   }
-  select:not([size]):not([multiple]) {
+  select:not([size], [multiple]) {
     background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23f0f0f0' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e");
   }
+  /* stylelint-disable-next-line */
 }
 @media screen and (prefers-color-scheme: dark) and (min-width: 0\0 ) and (min-resolution: 0.001dpcm) {
-  select:not([size]):not([multiple]),
-  *[dir=rtl] select:not([size]):not([multiple]),
-  select[dir=rtl]:not([size]):not([multiple]) {
+  select:not([size], [multiple]),
+  *[dir=rtl] select:not([size], [multiple]),
+  select[dir=rtl]:not([size], [multiple]) {
     background-image: none;
   }
 }
 @media (prefers-color-scheme: dark) {
-  @supports ((-webkit-appearance: none) or (-moz-appearance: none) or (appearance: none)) {
-    [type=range] {
-      background-color: transparent;
-    }
-    [type=range]:focus {
-      background-color: transparent;
-    }
-    [type=range]::-webkit-slider-runnable-track {
-      background-color: #111;
-    }
-    [type=range]::-moz-range-track {
-      background-color: #111;
-    }
+  [type=range] {
+    background-color: transparent;
+  }
+  [type=range]:focus {
+    background-color: transparent;
+  }
+  [type=range]::-webkit-slider-runnable-track {
+    background-color: #111;
+  }
+  [type=range]::-moz-range-track {
+    background-color: #111;
   }
   input::-moz-placeholder, textarea::-moz-placeholder {
     color: #999;
@@ -2418,4 +2419,8 @@ dt {
   .bf-table-responsive--zebra tbody tr:nth-child(odd) {
     background-color: #333;
   }
+  dialog {
+    color: #f0f0f0;
+    background-color: rgb(36.125, 36.125, 36.125);
+  }
 }