bullframe.css
Version:
Bullframe CSS is a lightweight Sass (SCSS) framework for building fast, responsive, and accessible UIs — semantic, themeable, and classless-friendly, with solid cross-browser support.
1 lines • 53.6 kB
Source Map (JSON)
{"version":3,"sources":["<no source>","file:///C:/Users/marco/code/github/public/bullframe.css/src/scss/utilities/_utility-grid-system.scss","file:///C:/Users/marco/code/github/public/bullframe.css/src/scss/variables/_variables-spacing.scss","../../src/scss/bullframe-utilities.scss","file:///C:/Users/marco/code/github/public/bullframe.css/src/scss/utilities/_utility-layout.scss","file:///C:/Users/marco/code/github/public/bullframe.css/src/scss/utilities/_utility-z-index.scss","file:///C:/Users/marco/code/github/public/bullframe.css/src/scss/utilities/_utility-spacing.scss","file:///C:/Users/marco/code/github/public/bullframe.css/src/scss/utilities/_utility-texts.scss","file:///C:/Users/marco/code/github/public/bullframe.css/src/scss/utilities/_utility-buttons.scss","file:///C:/Users/marco/code/github/public/bullframe.css/src/scss/variables/_variables-colors.scss","file:///C:/Users/marco/code/github/public/bullframe.css/src/scss/utilities/_utility-form-states.scss","file:///C:/Users/marco/code/github/public/bullframe.css/src/scss/utilities/_utility-lists.scss","file:///C:/Users/marco/code/github/public/bullframe.css/src/scss/utilities/_utility-embeds.scss","file:///C:/Users/marco/code/github/public/bullframe.css/src/scss/utilities/_utility-tables.scss","file:///C:/Users/marco/code/github/public/bullframe.css/src/scss/utilities/_utility-print.scss","file:///C:/Users/marco/code/github/public/bullframe.css/src/scss/utilities/_utility-reduced-motion.scss"],"names":[],"mappings":"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;AFuUF;;AEpUA;EACE,WAAA;AFuUF;;AEpUA;EACE,WAAA;AFuUF;;AEpUA;EACE,WAAA;AFuUF;;AEpUA;EACE,WAAA;AFuUF;;AEpUA;EACE,WAAA;AFuUF;;AEpUA;EACE,WAAA;AFuUF;;AEpUA;EACE,WAAA;AFuUF;;AEpUA;EACE,WAAA;AFuUF;;AEpUA;EACE,WAAA;AFuUF;;AEpUA;EACE,YAAA;AFuUF;;AEpUA;EACE,YAAA;AFuUF;;AEpUA;EACE,YAAA;AFuUF;;AG7YA;EACE,oBAAA;AHgZF;;AG7YA;EACE,wBAAA;AHgZF;;AG7YA;EACE,2BAAA;AHgZF;;AG7YA;EACE,yBAAA;AHgZF;;AG7YA;EACE,0BAAA;AHgZF;;AG7YA;EACE,gCAAA;AHgZF;;AG7YA;EACE,8BAAA;AHgZF;;AG7YA;EACE,8BAAA;AHgZF;;AG7YA;EACE,8BAAA;AHgZF;;AG7YA;EACE,6BAAA;AHgZF;;AG7YA;EACE,2BAAA;AHgZF;;AG7YA;EACE,2BAAA;AHgZF;;AG7YA;EACE,2BAAA;AHgZF;;AG7YA;EACE,gCAAA;AHgZF;;AG7YA;EACE,8BAAA;AHgZF;;AG7YA;EACE,8BAAA;AHgZF;;AG7YA;EACE,8BAAA;AHgZF;;AG3YA;EACE,qBAAA;AH8YF;;AG3YA;EACE,yBAAA;AH8YF;;AG3YA;EACE,4BAAA;AH8YF;;AG3YA;EACE,0BAAA;AH8YF;;AG3YA;EACE,2BAAA;AH8YF;;AG3YA;EACE,iCAAA;AH8YF;;AG3YA;EACE,+BAAA;AH8YF;;AG3YA;EACE,+BAAA;AH8YF;;AG3YA;EACE,+BAAA;AH8YF;;AG3YA;EACE,8BAAA;AH8YF;;AG3YA;EACE,4BAAA;AH8YF;;AG3YA;EACE,4BAAA;AH8YF;;AG3YA;EACE,4BAAA;AH8YF;;AG3YA;EACE,iCAAA;AH8YF;;AG3YA;EACE,+BAAA;AH8YF;;AG3YA;EACE,+BAAA;AH8YF;;AG3YA;EACE,+BAAA;AH8YF;;AI1hBA;EACE,oCAAA;AJ6hBF;;AI1hBA;EACE,+BAAA;AJ6hBF;;AI1hBA;EACE,2BAAA;AJ6hBF;;AI1hBA;EACE,6BAAA;AJ6h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","file":"bullframe-utilities.css","sourcesContent":[null,"@use '../variables/variables-spacing' as bf-v-space;\n@use '../variables/variables-breakpoints' as bf-v-bp;\n\n.bf-container,\n.bf-container--fluid {\n box-sizing: border-box;\n display: block;\n margin-right: auto;\n margin-left: auto;\n padding-left: bf-v-space.$bf-spacing-grid-gutter-rem;\n padding-right: bf-v-space.$bf-spacing-grid-gutter-rem;\n}\n\n.bf-container {\n max-width: 114rem;\n}\n\n.bf-row {\n display: flex;\n flex-wrap: wrap;\n margin-left: calc(-1 * bf-v-space.$bf-spacing-grid-gutter-rem);\n margin-right: calc(-1 * bf-v-space.$bf-spacing-grid-gutter-rem);\n}\n\n[class^='bf-col-'] {\n position: relative;\n min-height: 1px;\n padding-left: bf-v-space.$bf-spacing-grid-gutter-rem;\n padding-right: bf-v-space.$bf-spacing-grid-gutter-rem;\n flex-grow: 0;\n flex-shrink: 0;\n}\n\n.bf-no-gutters {\n margin-right: 0;\n margin-left: 0;\n > [class^='bf-col'] {\n padding-right: 0;\n padding-left: 0;\n }\n}\n\n// Column widths\n.bf-col-12 {\n flex-basis: 100%;\n max-width: 100%;\n}\n.bf-col-11 {\n flex-basis: 91.6667%;\n max-width: 91.6667%;\n}\n.bf-col-10 {\n flex-basis: 83.3333%;\n max-width: 83.3333%;\n}\n.bf-col-9 {\n flex-basis: 75%;\n max-width: 75%;\n}\n.bf-col-8 {\n flex-basis: 66.6667%;\n max-width: 66.6667%;\n}\n.bf-col-7 {\n flex-basis: 58.3333%;\n max-width: 58.3333%;\n}\n.bf-col-6 {\n flex-basis: 50%;\n max-width: 50%;\n}\n.bf-col-5 {\n flex-basis: 41.6667%;\n max-width: 41.6667%;\n}\n.bf-col-4 {\n flex-basis: 33.3333%;\n max-width: 33.3333%;\n}\n.bf-col-3 {\n flex-basis: 25%;\n max-width: 25%;\n}\n.bf-col-2 {\n flex-basis: 16.6667%;\n max-width: 16.6667%;\n}\n.bf-col-1 {\n flex-basis: 8.3333%;\n max-width: 8.3333%;\n}\n\n// Responsive breakpoints: stack columns\n@media (max-width: 575px) {\n .bf-container--break-xs .bf-row {\n margin-left: 0;\n margin-right: 0;\n }\n .bf-container--break-xs [class^='bf-col'] {\n flex-basis: 100%;\n max-width: 100%;\n margin-left: 0;\n padding-left: 0;\n padding-right: 0;\n }\n}\n\n@media (max-width: 767px) {\n .bf-container--break-md .bf-row {\n margin-left: 0;\n margin-right: 0;\n }\n .bf-container--break-md [class^='bf-col'] {\n flex-basis: 100%;\n max-width: 100%;\n margin-left: 0;\n padding-left: 0;\n padding-right: 0;\n }\n}\n\n@media (max-width: 991px) {\n .bf-container--break-lg .bf-row {\n margin-left: 0;\n margin-right: 0;\n }\n .bf-container--break-lg [class^='bf-col'] {\n flex-basis: 100%;\n max-width: 100%;\n margin-left: 0;\n padding-left: 0;\n padding-right: 0;\n }\n}\n\n// Table fix (not needed for flexbox, but kept for compatibility with Bullframe v4.x)\ntable td[class^='bf-col'],\ntable th[class^='bf-col'] {\n position: static;\n}\n","// customise this spacing selection as needed\n\n// the REM unit is the default,\n// preceded by the PX unit as fallback for old browsers (IE)\n// https://caniuse.com/#search=rem\n//\n// e.g.\n// html { font-size: 62.5%; }\n// body { font-size: 16px; }\n// h1 { font-size: 30px; font-size: 3rem; }\n\n$bf-spacing-sm-px: 2.5px;\n$bf-spacing-md-px: 5px;\n$bf-spacing-lg-px: 10px;\n$bf-spacing-xl-px: 20px;\n$bf-spacing-xxl-px: 30px;\n$bf-spacing-sm-rem: 0.25rem;\n$bf-spacing-md-rem: 0.5rem;\n$bf-spacing-lg-rem: 1rem;\n$bf-spacing-xl-rem: 2rem;\n$bf-spacing-xxl-rem: 3rem;\n\n// ! grid system only\n$bf-spacing-grid-gutter-rem: 1.5rem;\n",".bf-container,\n.bf-container--fluid {\n box-sizing: border-box;\n display: block;\n margin-right: auto;\n margin-left: auto;\n padding-left: 1.5rem;\n padding-right: 1.5rem;\n}\n\n.bf-container {\n max-width: 114rem;\n}\n\n.bf-row {\n display: flex;\n flex-wrap: wrap;\n margin-left: -1.5rem;\n margin-right: -1.5rem;\n}\n\n[class^=bf-col-] {\n position: relative;\n min-height: 1px;\n padding-left: 1.5rem;\n padding-right: 1.5rem;\n flex-grow: 0;\n flex-shrink: 0;\n}\n\n.bf-no-gutters {\n margin-right: 0;\n margin-left: 0;\n}\n.bf-no-gutters > [class^=bf-col] {\n padding-right: 0;\n padding-left: 0;\n}\n\n.bf-col-12 {\n flex-basis: 100%;\n max-width: 100%;\n}\n\n.bf-col-11 {\n flex-basis: 91.6667%;\n max-width: 91.6667%;\n}\n\n.bf-col-10 {\n flex-basis: 83.3333%;\n max-width: 83.3333%;\n}\n\n.bf-col-9 {\n flex-basis: 75%;\n max-width: 75%;\n}\n\n.bf-col-8 {\n flex-basis: 66.6667%;\n max-width: 66.6667%;\n}\n\n.bf-col-7 {\n flex-basis: 58.3333%;\n max-width: 58.3333%;\n}\n\n.bf-col-6 {\n flex-basis: 50%;\n max-width: 50%;\n}\n\n.bf-col-5 {\n flex-basis: 41.6667%;\n max-width: 41.6667%;\n}\n\n.bf-col-4 {\n flex-basis: 33.3333%;\n max-width: 33.3333%;\n}\n\n.bf-col-3 {\n flex-basis: 25%;\n max-width: 25%;\n}\n\n.bf-col-2 {\n flex-basis: 16.6667%;\n max-width: 16.6667%;\n}\n\n.bf-col-1 {\n flex-basis: 8.3333%;\n max-width: 8.3333%;\n}\n\n@media (max-width: 575px) {\n .bf-container--break-xs .bf-row {\n margin-left: 0;\n margin-right: 0;\n }\n .bf-container--break-xs [class^=bf-col] {\n flex-basis: 100%;\n max-width: 100%;\n margin-left: 0;\n padding-left: 0;\n padding-right: 0;\n }\n}\n@media (max-width: 767px) {\n .bf-container--break-md .bf-row {\n margin-left: 0;\n margin-right: 0;\n }\n .bf-container--break-md [class^=bf-col] {\n flex-basis: 100%;\n max-width: 100%;\n margin-left: 0;\n padding-left: 0;\n padding-right: 0;\n }\n}\n@media (max-width: 991px) {\n .bf-container--break-lg .bf-row {\n margin-left: 0;\n margin-right: 0;\n }\n .bf-container--break-lg [class^=bf-col] {\n flex-basis: 100%;\n max-width: 100%;\n margin-left: 0;\n padding-left: 0;\n padding-right: 0;\n }\n}\ntable td[class^=bf-col],\ntable th[class^=bf-col] {\n position: static;\n}\n\n.bf-clearfix::before,\n.bf-clearfix::after {\n content: \" \";\n display: table;\n}\n\n.bf-clearfix::after {\n clear: both;\n}\n\n.bf-hide {\n display: none !important;\n}\n\n.bf-hidden {\n display: none !important;\n visibility: hidden !important;\n}\n\n.bf-text-hide {\n /* stylelint-disable-next-line */\n font: 0/0 a !important;\n color: transparent !important;\n text-shadow: none !important;\n background-color: transparent !important;\n border: 0 !important;\n margin: 0 !important;\n padding: 0 !important;\n}\n\n/*\n// taken from https://github.com/h5bp/html5-boilerplate/blob/v7.3.0/dist/css/main.css\n//\n* Hide only visually, but have it available for screen readers:\n* https://snook.ca/archives/html_and_css/hiding-content-for-accessibility\n*\n* 1. For long content, line feeds are not interpreted as spaces and small width\n* causes content to wrap 1 word per line:\n* https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe\n*/\n.bf-sr-only {\n border: 0 !important;\n clip: rect(0, 0, 0, 0) !important;\n height: 1px !important;\n margin: -1px !important;\n overflow: hidden !important;\n padding: 0 !important;\n position: absolute !important;\n white-space: nowrap !important;\n width: 1px !important;\n}\n\n/*\n// taken from https://github.com/h5bp/html5-boilerplate/blob/v7.3.0/dist/css/main.css\n//\n* Extends the .sr-only class to allow the element\n* to be focusable when navigated to via the keyboard:\n* https://www.drupal.org/node/897638\n*/\n.bf-sr-only.focusable:active,\n.bf-sr-only.focusable:focus {\n clip: auto !important;\n height: auto !important;\n margin: 0 !important;\n overflow: visible !important;\n position: static !important;\n white-space: inherit !important;\n width: auto !important;\n}\n\n.bf-invisible {\n visibility: hidden !important;\n}\n\n.bf-visible {\n visibility: visible !important;\n}\n\n.bf-display-block {\n display: block !important;\n}\n\n.bf-display-block-center {\n display: block !important;\n margin-left: auto !important;\n margin-right: auto !important;\n text-align: center !important;\n}\n\n.bf-display-inline {\n display: inline !important;\n}\n\n.bf-display-inline-block {\n display: inline-block !important;\n}\n\n.bf-display-flex {\n display: flex !important;\n}\n\n.bf-display-inline-flex {\n display: inline-flex !important;\n}\n\n.bf-display-flex--justify-start {\n justify-content: flex-start !important;\n}\n\n.bf-display-flex--justify-end {\n justify-content: flex-end !important;\n}\n\n.bf-display-flex--justify-center {\n justify-content: center !important;\n}\n\n.bf-display-flex--wrap {\n flex-wrap: wrap !important;\n}\n\n.bf-display-flex--nowrap {\n flex-wrap: nowrap !important;\n}\n\n.bf-float-left {\n float: left !important;\n}\n\n.bf-float-right {\n float: right !important;\n}\n\n.bf-position-fixed {\n position: fixed !important;\n}\n\n.bf-position-sticky {\n position: sticky !important;\n top: 0 !important;\n}\n\n.bf-align-center-unknown {\n position: relative !important;\n}\n\n.bf-align-center-unknown--item {\n position: absolute !important;\n top: 50% !important;\n left: 50% !important;\n transform: translate(-50%, -50%) !important;\n}\n\n.bf-align-center-flex {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.bf-width-25 {\n width: 25% !important;\n}\n\n.bf-width-33 {\n width: 33.3333% !important;\n}\n\n.bf-width-50 {\n width: 50% !important;\n}\n\n.bf-width-75 {\n width: 75% !important;\n}\n\n.bf-width-100 {\n width: 100% !important;\n}\n\n.bf-width-auto {\n width: auto !important;\n}\n\n.bf-z-index-1 {\n z-index: 1;\n}\n\n.bf-z-index-2 {\n z-index: 2;\n}\n\n.bf-z-index-3 {\n z-index: 3;\n}\n\n.bf-z-index-4 {\n z-index: 4;\n}\n\n.bf-z-index-5 {\n z-index: 5;\n}\n\n.bf-z-index-6 {\n z-index: 6;\n}\n\n.bf-z-index-7 {\n z-index: 7;\n}\n\n.bf-z-index-8 {\n z-index: 8;\n}\n\n.bf-z-index-9 {\n z-index: 9;\n}\n\n.bf-z-index-10 {\n z-index: 10;\n}\n\n.bf-z-index-20 {\n z-index: 20;\n}\n\n.bf-z-index-30 {\n z-index: 30;\n}\n\n.bf-z-index-40 {\n z-index: 40;\n}\n\n.bf-z-index-50 {\n z-index: 50;\n}\n\n.bf-z-index-60 {\n z-index: 60;\n}\n\n.bf-z-index-70 {\n z-index: 70;\n}\n\n.bf-z-index-80 {\n z-index: 80;\n}\n\n.bf-z-index-90 {\n z-index: 90;\n}\n\n.bf-z-index-100 {\n z-index: 100;\n}\n\n.bf-z-index-200 {\n z-index: 200;\n}\n\n.bf-z-index-300 {\n z-index: 200;\n}\n\n.bf-m-0 {\n margin: 0 !important;\n}\n\n.bf-m-t-0 {\n margin-top: 0 !important;\n}\n\n.bf-m-b-0 {\n margin-bottom: 0 !important;\n}\n\n.bf-m-l-0 {\n margin-left: 0 !important;\n}\n\n.bf-m-r-0 {\n margin-right: 0 !important;\n}\n\n.bf-m-1 {\n margin-bottom: 0.5rem !important;\n}\n\n.bf-m-2 {\n margin-bottom: 1rem !important;\n}\n\n.bf-m-3 {\n margin-bottom: 2rem !important;\n}\n\n.bf-m-4 {\n margin-bottom: 3rem !important;\n}\n\n.bf-m-t-1 {\n margin-top: 0.5rem !important;\n}\n\n.bf-m-t-2 {\n margin-top: 1rem !important;\n}\n\n.bf-m-t-3 {\n margin-top: 2rem !important;\n}\n\n.bf-m-t-4 {\n margin-top: 3rem !important;\n}\n\n.bf-m-b-1 {\n margin-bottom: 0.5rem !important;\n}\n\n.bf-m-b-2 {\n margin-bottom: 1rem !important;\n}\n\n.bf-m-b-3 {\n margin-bottom: 2rem !important;\n}\n\n.bf-m-b-4 {\n margin-bottom: 3rem !important;\n}\n\n.bf-p-0 {\n padding: 0 !important;\n}\n\n.bf-p-t-0 {\n padding-top: 0 !important;\n}\n\n.bf-p-b-0 {\n padding-bottom: 0 !important;\n}\n\n.bf-p-l-0 {\n padding-left: 0 !important;\n}\n\n.bf-p-r-0 {\n padding-right: 0 !important;\n}\n\n.bf-p-1 {\n padding-bottom: 0.5rem !important;\n}\n\n.bf-p-2 {\n padding-bottom: 1rem !important;\n}\n\n.bf-p-3 {\n padding-bottom: 2rem !important;\n}\n\n.bf-p-4 {\n padding-bottom: 3rem !important;\n}\n\n.bf-p-t-1 {\n padding-top: 0.5rem !important;\n}\n\n.bf-p-t-2 {\n padding-top: 1rem !important;\n}\n\n.bf-p-t-3 {\n padding-top: 2rem !important;\n}\n\n.bf-p-t-4 {\n padding-top: 3rem !important;\n}\n\n.bf-p-b-1 {\n padding-bottom: 0.5rem !important;\n}\n\n.bf-p-b-2 {\n padding-bottom: 1rem !important;\n}\n\n.bf-p-b-3 {\n padding-bottom: 2rem !important;\n}\n\n.bf-p-b-4 {\n padding-bottom: 3rem !important;\n}\n\n.bf-t-transform-uppercase {\n text-transform: uppercase !important;\n}\n\n.bf-t-transform-none {\n text-transform: none !important;\n}\n\n.bf-t-left {\n text-align: left !important;\n}\n\n.bf-t-center {\n text-align: center !important;\n}\n\n.bf-t-right {\n text-align: right !important;\n}\n\n.bf-t-shadow {\n text-shadow: 0 0 2px #222 !important;\n text-shadow: 0 0 0.2rem #222 !important;\n}\n\n.bf-t-italic {\n font-style: italic !important;\n}\n\n.bf-t-style-normal {\n font-style: normal !important;\n}\n\n.bf-t-weight-300 {\n font-weight: 300 !important;\n}\n\n.bf-t-weight-400 {\n font-weight: 400 !important;\n}\n\n.bf-t-weight-500 {\n font-weight: 500 !important;\n}\n\n.bf-t-weight-600 {\n font-weight: 600 !important;\n}\n\n.bf-t-weight-700 {\n font-weight: 700 !important;\n}\n\n.bf-t-weight-800 {\n font-weight: 800 !important;\n}\n\n.bf-text-break {\n word-wrap: break-word !important;\n}\n\n.bf-t-truncate {\n max-width: 100% !important;\n overflow: hidden !important;\n text-overflow: ellipsis !important;\n white-space: nowrap !important;\n word-wrap: normal !important;\n}\n\n.bf-t-truncate--multiline-2 {\n overflow: hidden !important;\n text-overflow: ellipsis !important;\n display: -webkit-box !important;\n line-clamp: 2 !important;\n -webkit-line-clamp: 2 !important;\n -webkit-box-orient: vertical !important;\n}\n\n.bf-t-truncate--multiline-3 {\n overflow: hidden !important;\n text-overflow: ellipsis !important;\n display: -webkit-box !important;\n line-clamp: 3 !important;\n -webkit-line-clamp: 3 !important;\n -webkit-box-orient: vertical !important;\n}\n\n.bf-no-select {\n user-select: none !important;\n -webkit-touch-callout: none !important;\n}\n\n.bf-font-sans-serif {\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen-Sans, Ubuntu, Cantarell, \"Helvetica Neue\", Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\" !important;\n}\n\n.bf-font-serif {\n font-family: Georgia, Times, \"Times New Roman\", serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\" !important;\n}\n\n.bf-font-monospace {\n 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;\n}\n\n.bf-h1,\n.bf-h2,\n.bf-h3,\n.bf-h4,\n.bf-h5,\n.bf-h6 {\n font-weight: 600 !important;\n margin-top: 0 !important;\n line-height: 1.2 !important;\n margin-bottom: 10px !important;\n margin-bottom: 1rem !important;\n}\n\n.bf-h1 {\n font-size: 36px !important;\n font-size: 3.6rem !important;\n}\n\n.bf-h2 {\n font-size: 30px !important;\n font-size: 3rem !important;\n}\n\n.bf-h3 {\n font-size: 24px !important;\n font-size: 2.4rem !important;\n}\n\n.bf-h4 {\n font-size: 20px !important;\n font-size: 2rem !important;\n}\n\n.bf-h5,\n.bf-h6 {\n font-size: 16px !important;\n font-size: 1.6rem !important;\n}\n\np.bf-lead {\n font-size: 120% !important;\n}\n\nbody.bf-responsive-typography {\n --body-rt-font-size-flex: calc(1.5rem + 3 * ((100vw - 320px) / 680));\n --body-rt-font-size-max: 1.8rem;\n}\n\n@media (min-width: 320px) {\n body.bf-responsive-typography {\n font-size: var(--body-rt-font-size-flex);\n }\n}\n@media (min-width: 1000px) {\n body.bf-responsive-typography {\n font-size: var(--body-rt-font-size-max);\n }\n}\n.bf-btn {\n display: inline-block;\n cursor: pointer;\n color: #222;\n padding: 0.6666666667rem 1.3333333333rem;\n line-height: normal;\n text-align: center;\n margin: 0;\n background-clip: padding-box;\n vertical-align: baseline;\n overflow: visible;\n -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n user-select: none;\n border-radius: 0.25rem;\n border: 0;\n background-image: none;\n background-color: #ccc;\n transition: all 0.2s;\n}\n.bf-btn:hover, .bf-btn:active, .bf-btn:focus {\n text-decoration: none;\n color: #222;\n background: rgb(178.5, 178.5, 178.5);\n}\n.bf-btn:active, .bf-btn:focus {\n box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.15);\n}\n.bf-btn:focus {\n outline: 0;\n}\n.bf-btn.bf-btn--primary {\n color: #fff;\n background: #007bff;\n}\n.bf-btn.bf-btn--primary:hover, .bf-btn.bf-btn--primary:active, .bf-btn.bf-btn--primary:focus {\n color: #fff;\n background: rgb(0, 98.4, 204);\n}\n.bf-btn.bf-btn--primary:active, .bf-btn.bf-btn--primary:focus {\n box-shadow: 0 0 0 3px rgba(0, 86, 179, 0.25);\n}\n\nfieldset[disabled] .bf-btn,\n.bf-btn[disabled],\n.bf-btn:disabled,\n.bf-btn[aria-disabled=true] {\n cursor: default !important;\n cursor: not-allowed !important;\n pointer-events: none !important;\n user-select: none !important;\n box-shadow: none !important;\n opacity: 0.5 !important;\n background-color: #ccc;\n}\n\n.bf-focused {\n transition: border 0.2s, background-color 0.2s, box-shadow 0.2s !important;\n border-color: #007bff !important;\n box-shadow: 0 0 0 3px rgba(0, 86, 179, 0.25) !important;\n}\n\n.bf-disabled,\n.bf-disabled:hover,\n.bf-disabled:active,\n.bf-disabled:focus,\n.bf-disabled::after,\n.bf-disabled::before,\n.bf-disabled:invalid,\n.bf-disabled:checked {\n cursor: default !important;\n cursor: not-allowed !important;\n pointer-events: none !important;\n user-select: none !important;\n box-shadow: none !important;\n opacity: 0.5 !important;\n background-color: #fff;\n border-color: #999;\n}\n\nlabel.bf-disabled {\n background-color: transparent;\n border-color: transparent;\n}\n\nbutton.bf-disabled,\n[type=button].bf-disabled,\n[type=reset].bf-disabled,\n[type=submit].bf-disabled,\n.bf-btn.bf-disabled {\n cursor: default;\n cursor: not-allowed;\n pointer-events: none;\n user-select: none;\n box-shadow: none;\n opacity: 0.5;\n color: #222;\n background: #ccc;\n}\nbutton.bf-disabled:hover, button.bf-disabled:active, button.bf-disabled:focus,\n[type=button].bf-disabled:hover,\n[type=button].bf-disabled:active,\n[type=button].bf-disabled:focus,\n[type=reset].bf-disabled:hover,\n[type=reset].bf-disabled:active,\n[type=reset].bf-disabled:focus,\n[type=submit].bf-disabled:hover,\n[type=submit].bf-disabled:active,\n[type=submit].bf-disabled:focus,\n.bf-btn.bf-disabled:hover,\n.bf-btn.bf-disabled:active,\n.bf-btn.bf-disabled:focus {\n box-shadow: none;\n color: #222;\n background: #ccc;\n}\n\n.bf-btn--primary.bf-disabled {\n cursor: default;\n cursor: not-allowed;\n pointer-events: none;\n user-select: none;\n box-shadow: none;\n opacity: 0.5;\n color: #fff;\n background: #007bff;\n}\n.bf-btn--primary.bf-disabled:hover, .bf-btn--primary.bf-disabled:active, .bf-btn--primary.bf-disabled:focus {\n box-shadow: none;\n color: #fff;\n background: #007bff;\n}\n\n.bf-invalid,\n.bf-invalid:focus {\n color: #f00 !important;\n border-color: #f00 !important;\n box-shadow: 0 0 0 3px rgba(255, 0, 0, 0.25) !important;\n}\n\n.bf-list-unstyled,\nmenu ul.bf-list-unstyled,\nmenu ol.bf-list-unstyled,\nul.bf-list-unstyled ul,\nul.bf-list-unstyled ol,\nol.bf-list-unstyled ol,\nol.bf-list-unstyled ul,\ndd.bf-list-unstyled {\n margin: 0;\n padding: 0;\n list-style: none;\n}\n\ndt {\n font-weight: 700;\n}\n\n.bf-embed-responsive {\n position: relative;\n display: block;\n width: 100%;\n padding: 0;\n overflow: hidden;\n}\n.bf-embed-responsive::before {\n display: block;\n content: \"\";\n padding-top: 56.25%;\n}\n.bf-embed-responsive .bf-embed-responsive--4-3::before {\n padding-top: 75%;\n}\n.bf-embed-responsive .bf-embed-responsive--item, .bf-embed-responsive iframe, .bf-embed-responsive embed, .bf-embed-responsive object, .bf-embed-responsive video {\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n width: 100%;\n height: 100%;\n border: 0;\n}\n\n.bf-table th,\n.bf-table td {\n padding: 1rem;\n border-bottom: 1px solid #999;\n margin-bottom: 0.5rem;\n}\n\n.bf-table-responsive {\n overflow: auto hidden;\n -ms-overflow-style: scrollbar;\n}\n\n.bf-table-responsive table {\n width: 100%;\n margin-bottom: 0.5rem;\n}\n\n.bf-table-responsive.scrollbar {\n -webkit-overflow-scrolling: auto;\n}\n\n.bf-table--zebra tbody tr:nth-child(odd),\n.bf-table-responsive--zebra tbody tr:nth-child(odd) {\n background-color: #e9e9e9;\n}\n\n/* main.css 3.0.0 | MIT License | https://github.com/h5bp/main.css#readme */\n/* ==========================================================================\n Print styles.\n Inlined to avoid the additional HTTP request:\n https://www.phpied.com/delay-loading-your-print-css/\n ========================================================================== */\n@media print {\n *,\n *::before,\n *::after {\n background: #fff !important;\n color: #000 !important;\n /* Black prints faster */\n box-shadow: none !important;\n text-shadow: none !important;\n }\n a,\n a:visited {\n text-decoration: underline;\n }\n a[href]::after {\n content: \" (\" attr(href) \")\";\n }\n abbr[title]::after {\n content: \" (\" attr(title) \")\";\n }\n /*\n * Don't show links that are fragment identifiers,\n * or use the `javascript:` pseudo protocol\n */\n a[href^=\"#\"]::after,\n a[href^=\"javascript:\"]::after {\n content: \"\";\n }\n pre {\n white-space: pre-wrap !important;\n }\n pre,\n blockquote {\n border: 1px solid #999;\n page-break-inside: avoid;\n }\n tr,\n img {\n page-break-inside: avoid;\n }\n p,\n h2,\n h3 {\n orphans: 3;\n widows: 3;\n }\n h2,\n h3 {\n page-break-after: avoid;\n }\n}\n@media print {\n body,\n .bf-container {\n min-width: 992px !important;\n }\n .bf-table-responsive {\n overflow: auto;\n }\n .bf-table-responsive table {\n width: auto;\n }\n .bf-table-responsive table,\n .bf-table {\n border-collapse: collapse !important;\n }\n}\n@media (prefers-reduced-motion: reduce) {\n .bf-reduced-motion,\n .bf-reduced-motion::before,\n .bf-reduced-motion::after,\n .bf-reduced-motion *,\n .bf-reduced-motion *::before,\n .bf-reduced-motion *::after {\n animation-delay: -1ms !important;\n animation-duration: 1ms !important;\n animation-iteration-count: 1 !important;\n background-attachment: initial !important;\n scroll-behavior: auto !important;\n transition-delay: 0s !important;\n transition-duration: 0s !important;\n }\n}","// micro-clearfix\n// http://nicolasgallagher.com/micro-clearfix-hack/\n.bf-clearfix::before,\n.bf-clearfix::after {\n content: \" \";\n display: table;\n}\n\n.bf-clearfix::after {\n clear: both;\n}\n\n.bf-hide {\n display: none !important;\n}\n\n// assistive text for screen reader only (e.g. form labels)\n.bf-hidden {\n display: none !important;\n visibility: hidden !important;\n}\n\n.bf-text-hide {\n /* stylelint-disable-next-line */\n font: 0/0 a !important;\n color: transparent !important;\n text-shadow: none !important;\n background-color: transparent !important;\n border: 0 !important;\n margin: 0 !important;\n padding: 0 !important;\n}\n\n/*\n// taken from https://github.com/h5bp/html5-boilerplate/blob/v7.3.0/dist/css/main.css\n//\n* Hide only visually, but have it available for screen readers:\n* https://snook.ca/archives/html_and_css/hiding-content-for-accessibility\n*\n* 1. For long content, line feeds are not interpreted as spaces and small width\n* causes content to wrap 1 word per line:\n* https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe\n*/\n.bf-sr-only {\n border: 0 !important;\n clip: rect(0, 0, 0, 0) !important;\n height: 1px !important;\n margin: -1px !important;\n overflow: hidden !important;\n padding: 0 !important;\n position: absolute !important;\n white-space: nowrap !important;\n width: 1px !important;\n}\n\n/*\n// taken from https://github.com/h5bp/html5-boilerplate/blob/v7.3.0/dist/css/main.css\n//\n* Extends the .sr-only class to allow the element\n* to be focusable when navigated to via the keyboard:\n* https://www.drupal.org/node/897638\n*/\n.bf-sr-only.focusable:active,\n.bf-sr-only.focusable:focus {\n clip: auto !important;\n height: auto !important;\n margin: 0 !important;\n overflow: visible !important;\n position: static !important;\n white-space: inherit !important;\n width: auto !important;\n}\n\n.bf-invisible {\n visibility: hidden !important;\n}\n\n.bf-visible {\n visibility: visible !important;\n}\n\n.bf-display-block {\n display: block !important;\n}\n\n.bf-display-block-center {\n display: block !important;\n margin-left: auto !important;\n margin-right: auto !important;\n text-align: center !important;\n}\n\n.bf-display-inline {\n display: inline !important;\n}\n\n.bf-display-inline-block {\n display: inline-block !important;\n}\n\n.bf-display-flex {\n display: flex !important;\n}\n\n.bf-display-inline-flex {\n display: inline-flex !important;\n}\n\n.bf-display-flex--justify-start {\n justify-content: flex-start !important;\n}\n\n.bf-display-flex--justify-end {\n justify-content: flex-end !important;\n}\n\n.bf-display-flex--justify-center {\n justify-content: center !important;\n}\n\n.bf-display-flex--wrap {\n flex-wrap: wrap !important;\n}\n\n.bf-display-flex--nowrap {\n flex-wrap: nowrap !important;\n}\n\n.bf-float-left {\n float: left !important;\n}\n\n.bf-float-right {\n float: right !important;\n}\n.bf-position-fixed {\n position: fixed !important;\n}\n\n.bf-position-sticky {\n position: sticky !important;\n top: 0 !important;\n}\n\n// https://css-tricks.com/centering-css-complete-guide\n.bf-align-center-unknown {\n position: relative !important;\n}\n\n.bf-align-center-unknown--item {\n position: absolute !important;\n top: 50% !important;\n left: 50% !important;\n transform: translate(-50%, -50%) !important;\n}\n\n// align items horizontally and vertically\n// https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container\n.bf-align-center-flex {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.bf-width-25 {\n width: 25% !important;\n}\n\n.bf-width-33 {\n width: 33.3333% !important;\n}\n\n.bf-width-50 {\n width: 50% !important;\n}\n\n.bf-width-75 {\n width: 75% !important;\n}\n\n.bf-width-100 {\n width: 100% !important;\n}\n\n.bf-width-auto {\n width: auto !important;\n}\n",".bf-z-index-1 {\n z-index: 1;\n}\n\n.bf-z-index-2 {\n z-index: 2;\n}\n\n.bf-z-index-3 {\n z-index: 3;\n}\n\n.bf-z-index-4 {\n z-index: 4;\n}\n\n.bf-z-index-5 {\n z-index: 5;\n}\n\n.bf-z-index-6 {\n z-index: 6;\n}\n\n.bf-z-index-7 {\n z-index: 7;\n}\n\n.bf-z-index-8 {\n z-index: 8;\n}\n\n.bf-z-index-9 {\n z-index: 9;\n}\n\n.bf-z-index-10 {\n z-index: 10;\n}\n\n.bf-z-index-20 {\n z-index: 20;\n}\n\n.bf-z-index-30 {\n z-index: 30;\n}\n\n.bf-z-index-40 {\n z-index: 40;\n}\n\n.bf-z-index-50 {\n z-index: 50;\n}\n\n.bf-z-index-60 {\n z-index: 60;\n}\n\n.bf-z-index-70 {\n z-index: 70;\n}\n\n.bf-z-index-80 {\n z-index: 80;\n}\n\n.bf-z-index-90 {\n z-index: 90;\n}\n\n.bf-z-index-100 {\n z-index: 100;\n}\n\n.bf-z-index-200 {\n z-index: 200;\n}\n\n.bf-z-index-300 {\n z-index: 200;\n}\n","@use '../variables/variables-colors' as bf-v-color;\n@use '../variables/variables-texts' as bf-v-text;\n@use '../variables/variables-spacing' as bf-v-space;\n@use '../variables/variables-breakpoints' as bf-v-bp;\n@use 'sass:color';\n\n// this is something similar to Bootstrap's spacing utility\n// https://getbootstrap.com/docs/4.4/utilities/spacing/\n\n// margins and paddings classes\n\n.bf-m-0 {\n margin: 0 !important;\n}\n\n.bf-m-t-0 {\n margin-top: 0 !important;\n}\n\n.bf-m-b-0 {\n margin-bottom: 0 !important;\n}\n\n.bf-m-l-0 {\n margin-left: 0 !important;\n}\n\n.bf-m-r-0 {\n margin-right: 0 !important;\n}\n\n.bf-m-1 {\n margin-bottom: bf-v-space.$bf-spacing-md-rem !important;\n}\n\n.bf-m-2 {\n margin-bottom: bf-v-space.$bf-spacing-lg-rem !important;\n}\n\n.bf-m-3 {\n margin-bottom: bf-v-space.$bf-spacing-xl-rem !important;\n}\n\n.bf-m-4 {\n margin-bottom: bf-v-space.$bf-spacing-xxl-rem !important;\n}\n\n.bf-m-t-1 {\n margin-top: bf-v-space.$bf-spacing-md-rem !important;\n}\n\n.bf-m-t-2 {\n margin-top: bf-v-space.$bf-spacing-lg-rem !important;\n}\n\n.bf-m-t-3 {\n margin-top: bf-v-space.$bf-spacing-xl-rem !important;\n}\n\n.bf-m-t-4 {\n margin-top: bf-v-space.$bf-spacing-xxl-rem !important;\n}\n\n.bf-m-b-1 {\n margin-bottom: bf-v-space.$bf-spacing-md-rem !important;\n}\n\n.bf-m-b-2 {\n margin-bottom: bf-v-space.$bf-spacing-lg-rem !important;\n}\n\n.bf-m-b-3 {\n margin-bottom: bf-v-space.$bf-spacing-xl-rem !important;\n}\n\n.bf-m-b-4 {\n margin-bottom: bf-v-space.$bf-spacing-xxl-rem !important;\n}\n\n// paddings\n\n.bf-p-0 {\n padding: 0 !important;\n}\n\n.bf-p-t-0 {\n padding-top: 0 !important;\n}\n\n.bf-p-b-0 {\n padding-bottom: 0 !important;\n}\n\n.bf-p-l-0 {\n padding-left: 0 !important;\n}\n\n.bf-p-r-0 {\n padding-right: 0 !important;\n}\n\n.bf-p-1 {\n padding-bottom: bf-v-space.$bf-spacing-md-rem !important;\n}\n\n.bf-p-2 {\n padding-bottom: bf-v-space.$bf-spacing-lg-rem !important;\n}\n\n.bf-p-3 {\n padding-bottom: bf-v-space.$bf-spacing-xl-rem !important;\n}\n\n.bf-p-4 {\n padding-bottom: bf-v-space.$bf-spacing-xxl-rem !important;\n}\n\n.bf-p-t-1 {\n padding-top: bf-v-space.$bf-spacing-md-rem !important;\n}\n\n.bf-p-t-2 {\n padding-top: bf-v-space.$bf-spacing-lg-rem !important;\n}\n\n.bf-p-t-3 {\n padding-top: bf-v-space.$bf-spacing-xl-rem !important;\n}\n\n.bf-p-t-4 {\n padding-top: bf-v-space.$bf-spacing-xxl-rem !important;\n}\n\n.bf-p-b-1 {\n padding-bottom: bf-v-space.$bf-spacing-md-rem !important;\n}\n\n.bf-p-b-2 {\n padding-bottom: bf-v-space.$bf-spacing-lg-rem !important;\n}\n\n.bf-p-b-3 {\n padding-bottom: bf-v-space.$bf-spacing-xl-rem !important;\n}\n\n.bf-p-b-4 {\n padding-bottom: bf-v-space.$bf-spacing-xxl-rem !important;\n}\n","@use '../variables/variables-colors' as bf-v-color;\n@use '../variables/variables-texts' as bf-v-text;\n@use '../variables/variables-spacing' as bf-v-space;\n@use '../variables/variables-breakpoints' as bf-v-bp;\n@use 'sass:color';\n\n.bf-t-transform-uppercase {\n text-transform: uppercase !important;\n}\n\n.bf-t-transform-none {\n text-transform: none !important;\n}\n\n.bf-t-left {\n text-align: left !important;\n}\n\n.bf-t-center {\n text-align: center !important;\n}\n\n.bf-t-right {\n text-align: right !important;\n}\n\n.bf-t-shadow {\n text-shadow: 0 0 2px bf-v-color.$bf-dark !important;\n text-shadow: 0 0 0.2rem bf-v-color.$bf-dark !important;\n}\n\n.bf-t-italic {\n font-style: italic !important;\n}\n\n// useful to 'reset' <i> inherited style\n.bf-t-style-normal {\n font-style: normal !important;\n}\n\n// useful to 'reset' <b> inherited style\n.bf-t-weight-300 {\n font-weight: 300 !important;\n}\n\n.bf-t-weight-400 {\n font-weight: 400 !important;\n}\n\n.bf-t-weight-500 {\n font-weight: 500 !important;\n}\n\n.bf-t-weight-600 {\n font-weight: 600 !important;\n}\n\n.bf-t-weight-700 {\n font-weight: 700 !important;\n}\n\n.bf-t-weight-800 {\n font-weight: 800 !important;\n}\n\n.bf-text-break {\n word-wrap: break-word !important;\n}\n\n.bf-t-truncate {\n max-width: 100% !important;\n overflow: hidden !important;\n text-overflow: ellipsis !important;\n white-space: nowrap !important;\n word-wrap: normal !important;\n}\n\n.bf-t-truncate--multiline-2 {\n overflow: hidden !important;\n text-overflow: ellipsis !important;\n display: -webkit-box !important;\n line-clamp: 2 !important;\n -webkit-line-clamp: 2 !important;\n -webkit-box-orient: vertical !important;\n}\n\n.bf-t-truncate--multiline-3 {\n overflow: hidden !important;\n text-overflow: ellipsis !important;\n display: -webkit-box !important;\n line-clamp: 3 !important;\n -webkit-line-clamp: 3 !important;\n -webkit-box-orient: vertical !important;\n}\n\n.bf-no-select {\n user-select: none !important;\n\n // this is a not standard CSS property, so it's for webkit only\n // https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-touch-callout\n // useful on iOS\n // https://css-tricks.com/force-selection-text-block/#article-header-id-7\n // https://ishadeed.com/article/selection-in-css scroll down to\n // 'selection on mobile' section\n -webkit-touch-callout: none !important;\n}\n\n.bf-font-sans-serif {\n font-family:\n /* Safari for OS X and iOS (San Francisco) */\n -apple-system,\n /* Chrome < 56 for OS X (San Francisco) */ BlinkMacSystemFont,\n /* Windows */ 'Segoe UI',\n /* Android */ Roboto,\n /* Linux with KDE */ Oxygen-Sans,\n /* Ubuntu (all variants) */ Ubuntu,\n /* Linux with GNOME Shell */ Cantarell,\n /* macOS 1.10 and below */ 'Helvetica Neue',\n Helvetica,\n /* Basic web fallback */ Arial,\n sans-serif,\n /* emoji fonts */ 'Apple Color Emoji',\n 'Segoe UI Emoji',\n 'Segoe UI Symbol',\n 'Noto Color Emoji' !important;\n}\n\n.bf-font-serif {\n font-family:\n Georgia,\n Times,\n 'Times New Roman',\n serif,\n /* emoji fonts */ 'Apple Color Emoji',\n 'Segoe UI Emoji',\n 'Segoe UI Symbol',\n 'Noto Color Emoji' !important;\n}\n\n.bf-font-monospace {\n font-family:\n /* macOS 1.10+ */\n Menlo,\n Consolas,\n 'Roboto Mono',\n 'Ubuntu Monospace',\n 'Noto Mono',\n 'Oxygen Mono',\n 'Liberation Mono',\n monospace,\n 'Apple Color Emoji',\n 'Segoe UI Emoji',\n 'Segoe UI Symbol',\n 'Noto Color Emoji' !important;\n}\n\n.bf-h1,\n.bf-h2,\n.bf-h3,\n.bf-h4,\n.bf-h5,\n.bf-h6 { // fallback\n font-weight: 600 !important;\n margin-top: 0 !important;\n line-height: 1.2 !important;\n margin-bottom: bf-v-space.$bf-spacing-lg-px !important;\n margin-bottom: bf-v-space.$bf-spacing-lg-rem !important;\n}\n\n.bf-h1 {\n font-size: 36px !important;\n font-size: 3.6rem !important;\n}\n\n.bf-h2 {\n font-size: 30px !important;\n font-size: 3rem !important;\n}\n\n.bf-h3 {\n font-size: 24px !important;\n font-size: 2.4rem !important;\n}\n\n.bf-h4 {\n font-size: 20px !important;\n font-size: 2rem !important;\n}\n\n.bf-h5,\n.bf-h6 {\n font-size: 16px !important;\n font-size: 1.6rem !important;\n}\n\np.bf-lead {\n font-size: 120% !important;\n}\n\n// responsive typography\n// https://codepen.io/marcop135/pen/eYmPmJm\n// https://css-tricks.com/snippets/css/fluid-typography/\n//\n// old browsers that don't support CSS variables ignore what follows\n// (mostly IE and Opera Mini)\n// in this way, old browsers will ignore 'calc' property too, avoiding issues\n// https://caniuse.com/#feat=calc\n// https://caniuse.com/#feat=css-variables\n// https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties\nbody.bf-responsive-typography {\n --body-rt-font-size-flex: calc(1.5rem + 3 * ((100vw - 320px) / 680));\n --body-rt-font-size-max: 1.8rem;\n}\n\n@media (min-width: 320px) {\n body.bf-responsive-typography {\n font-size: var(--body-rt-font-size-flex);\n }\n}\n\n@media (min-width: 1000px) {\n body.bf-responsive-typography {\n font-size: var(--body-rt-font-size-max);\n }\n}\n","@use '../variables/variables-colors' as bf-v-color;\n@use '../variables/variables-texts' as bf-v-text;\n@use '../variables/variables-spacing' as bf-v-space;\n@use '../variables/variables-breakpoints' as bf-v-bp;\n@use 'sass:color';\n\n.bf-btn {\n display: inline-block;\n cursor: pointer;\n color: bf-v-color.$bf-dark;\n padding: calc(bf-v-space.$bf-spacing-xl-rem / 3) (calc(bf-v-space.$bf-spacing-xl-rem / 3) * 2); // 8px 16px\n line-height: normal;\n text-align: center;\n margin: 0;\n background-clip: padding-box;\n vertical-align: baseline;\n overflow: visible;\n -webkit-tap-highlight-color: rgb(0 0 0 / 0%);\n user-select: none;\n border-radius: bf-v-space.$bf-spacing-sm-rem;\n\n border: 0;\n background-image: none; // FF mobile\n background-color: bf-v-color.$bf-gray-light;\n transition: all 0.2s;\n\n &:hover,\n &:active,\n &:focus {\n text-decoration: none;\n color: bf-v-color.$bf-dark;\n background: color.adjust(bf-v-color.$bf-gray-light, $lightness: -10%);\n }\n\n &:active,\n &:focus {\n box-shadow: 0 0 0 3px rgb(0 0 0 / 15%);\n }\n\n &:focus {\n outline: 0;\n }\n\n &.bf-btn--primary {\n color: bf-v-color.$bf-white;\n background: bf-v-color.$bf-blue;\n\n &:hover,\n &:active,\n &:focus {\n color: bf-v-color.$bf-white;\n background: color.adjust(bf-v-color.$bf-blue, $lightness: -10%);\n }\n\n &:active,\n &:focus {\n box-shadow: 0 0 0 3px rgb(0 86 179 / 25%);\n }\n }\n}\n\nfieldset[disabled] .bf-btn,\n.bf-btn[disabled],\n.bf-btn:disabled,\n.bf-btn[aria-disabled='true'] {\n cursor: default !important; // fallback\n cursor: not-allowed !important;\n pointer-events: none !important;\n user-select: none !important;\n box-shadow: none !important;\n opacity: 0.5 !important;\n background-color: bf-v-color.$bf-gray-light;\n}\n","@use 'sass:color';\n\n// TIP: make colors lighter/darker with Sass\n// https://sass-lang.com/documentation/modules/color/\n// e.g., lighter: \"color: color.adjust($gray, $lightness: 15%);\"\n// e.g., darker: \"color: color.adjust($gray, $lightness: -15%);\"\n\n// customise/enlarge this small selection as needed\n\n// hex to rgba online converter http://www.hex2rgba.devoth.com/\n\n// backgrounds, texts and borders\n$bf-white: #fff; // rgba(255,255,255,1)\n$bf-light: #f0f0f0; // rgba(240,240,240,1)\n$bf-gray-light-extra: #e9e9e9; // rgba(233,233,233,1)\n$bf-gray-light: #ccc; // rgba(204,204,204,1)\n$bf-gray: #999; // rgba(153,153,153,1)\n$bf-gray-dark: #666; // rgba(102,102,102,1)\n$bf-gray-dark-extra: #333; // rgba(51,51,51,1)\n$bf-dark: #222; // rgba(34,34,34,1)\n$bf-dark-extra: #111; // rgba(17,17,17,1)\n$bf-black: #000; // rgba(0,0,0,1)\n\n// <mark> and <ins>\n$bf-yellow-light: #ff9; // rgba(255,255,153,1)\n$bf-yellow: #ff0; // rgba(255,255,0,1)\n\n// anchors and accent\n$bf-blue: #007bff; // rgba(0,123,255,1)\n$bf-blue-light: #0056b3; // rgba(0,86,179,1)\n$bf-blue-light-extra: #bed8fe; // rgba(190, 216, 254, 1)\n\n// invalid forms\n$bf-red: #f00; // rgba(255,0,0,1)\n","@use '../variables/variables-colors' as bf-v-color;\n@use '../variables/variables-texts' as bf-v-text;\n@use '../variables/variables-spacing' as bf-v-space;\n@use '../variables/variables-breakpoints' as bf-v-bp;\n@use 'sass:color';\n\n.bf-focused {\n transition:\n border 0.2s,\n background-color 0.2s,\n box-shadow 0.2s !important;\n border-color: bf-v-color.$bf-blue !important;\n box-shadow: 0 0 0 3px rgb(0 86 179 / 25%) !important;\n}\n\n.bf-disabled,\n.bf-disabled:hover,\n.bf-disabled:active,\n.bf-disabled:focus,\n.bf-disabled::after,\n.bf-disabled::before,\n.bf-disabled:invalid,\n.bf-disabled:checked {\n cursor: default !important; // IE8-10 fallback\n cursor: not-allowed !important;\n pointer-events: none !important;\n user-select: none !important;\n box-shadow: none !important;\n opacity: 0.5 !important;\n\n background-color: bf-v-color.$bf-white;\n border-color: bf-v-color.$bf-gray;\n}\n\nlabel.bf-disabled {\n background-color: transparent;\n border-color: transparent;\n}\n\nbutton.bf-disabled,\n[type='button'].bf-disabled,\n[type='reset'].bf-disabled,\n[type='submit'].bf-disabled,\n.bf-btn.bf-disabled {\n cursor: default;\n cursor: not-allowed;\n pointer-events: none;\n user-select: none;\n box-shadow: none;\n opacity: 0.5;\n\n color: bf-v-color.$bf-dark;\n background: bf-v-color.$bf-gray-light;\n\n &:hover,\n &:active,\n &:focus {\n box-shadow: none;\n color: bf-v-color.$bf-dark;\n background: bf-v-color.$bf-gray-light;\n }\n}\n\n.bf-btn--primary.bf-disabled {\n cursor: default;\n cursor: not-allowed;\n pointer-events: none;\n user-select: none;\n box-shadow: none;\n opacity: 0.5;\n\n color: bf-v-color.$bf-white;\n background: bf-v-color.$bf-blue;\n\n &:hover,\n &:active,\n &:focus {\n box-shadow: none;\n color: bf-v-color.$bf-white;\n background: bf-v-color.$bf-blue;\n }\n}\n\n.bf-invalid,\n.bf-invalid:focus {\n color: bf-v-color.$bf-red !important;\n border-color: bf-v-color.$bf-red !important;\n box-shadow: 0 0 0 3px rgb(255 0 0 / 25%) !important;\n}\n","// this is useful for navbars\n.bf-list-unstyled,\nmenu ul.bf-list-unstyled,\nmenu ol.bf-list-unstyled,\nul.bf-list-unstyled ul,\nul.bf-list-unstyled ol,\nol.bf-list-unstyled ol,\nol.bf-list-unstyled ul,\ndd.bf-list-unstyled {\n margin: 0;\n padding: 0;\n list-style: none;\n}\n\ndt {\n font-weight: 700;\n}\n","// taken from https://getbootstrap.com/docs/4.4/utilities/embed/\n// but lightened a bit\n\n.bf-embed-responsive {\n position: relative;\n display: block;\n width: 100%;\n padding: 0;\n overflow: hidden;\n\n &::before {\n display: block;\n content: \"\";\n padding-top: 56.25%; // 16:9 by default\n }\n\n .bf-embed-responsive--4-3::before {\n padding-top: 75%;\n }\n\n & .bf-embed-responsive--item,\n & iframe,\n & embed,\n & object,\n & video {\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n width: 100%;\n height: 100%;\n border: 0;\n }\n}\n","@use '../variables/variables-colors' as bf-v-color;\n@use '../variables/variables-texts' as bf-v-text;\n@use '../variables/variables-spacing' as bf-v-space;\n@use '../variables/variables-breakpoints' as bf-v-bp;\n@use 'sass:color';\n\n.bf-table th,\n.bf-table td {\n padding: bf-v-space.$bf-spacing-lg-rem;\n border-bottom: 1px solid bf-v-color.$bf-gray;\n margin-bottom: bf-v-space.$bf-spacing-md-rem;\n}\n\n// responsive tables\n.bf-table-responsive {\n overflow: auto hidden;\n -ms-overflow-style: scrollbar;\n}\n\n.bf-table-responsive table {\n width: