![](\"img/r1.jpg\"\nstyle=\"width:3.16212in;height:0.41357in\")
![](\"img/r2.jpg\"\nstyle=\"width:3.09706in;height:0.40371in\")
![](\"img/r3.jpg\"\nstyle=\"width:3.17757in;height:0.41433in\")
output rather than wrapping, since
+// multi-column tabular output (very common for R & Python) is
+// unreadable when wrapped.
+code {
+ white-space: pre;
+}
+@media print {
+ code {
+ white-space: pre-wrap;
+ }
+}
+pre > code {
+ display: block;
+}
+
+pre > code.sourceCode {
+ white-space: $code-white-space;
+}
+
+pre > code.sourceCode > span > a:first-child::before {
+ text-decoration: none;
+}
+
+pre.code-overflow-wrap > code.sourceCode {
+ white-space: pre-wrap;
+}
+
+pre.code-overflow-scroll > code.sourceCode {
+ white-space: pre;
+}
+
+// code linking (pkgdown style)
+code a:any-link {
+ color: inherit;
+ text-decoration: none;
+}
+code a:hover {
+ color: inherit;
+ text-decoration: underline;
+}
+
+// task lists
+ul.task-list {
+ padding-left: 1em;
+}
+
+// tippy
+
+[data-tippy-root] {
+ display: inline-block;
+}
+
+.tippy-content .footnote-back {
+ display: none;
+}
+
+.footnote-back {
+ margin-left: 0.2em;
+}
+
+.tippy-content {
+ overflow-x: auto;
+}
+
+// embedded source code
+.quarto-embedded-source-code {
+ display: none;
+}
+
+// unresolved crossrefs
+.quarto-unresolved-ref {
+ font-weight: 600;
+}
+
+// html cover image injection
+.quarto-cover-image {
+ max-width: 35%;
+ float: right;
+ margin-left: 30px;
+}
+
+// provide margin below jupyter widgets
+.cell-output-display .widget-subarea {
+ margin-bottom: 1em;
+}
+
+// fix for selectize inputs getting their contents clipped
+// this also works for knitr sql cells (see github issue #3497)
+.cell-output-display:not(.no-overflow-x),
+.knitsql-table:not(.no-overflow-x) {
+ overflow-x: auto;
+}
+
+.panel-input {
+ margin-bottom: 1em;
+}
+
+.panel-input > div,
+.panel-input > div > div {
+ display: inline-block;
+ vertical-align: top;
+ padding-right: 12px;
+}
+
+.panel-input > p:last-child {
+ margin-bottom: 0;
+}
+
+.layout-sidebar {
+ margin-bottom: 1em;
+}
+
+.layout-sidebar .tab-content {
+ border: none;
+}
+
+.tab-content > .page-columns.active {
+ display: grid;
+}
+
+// default styling for .code-preview=".." iframes
+div.sourceCode > iframe {
+ width: 100%;
+ height: 300px;
+
+ // this negative-margin hack works around the rendering issue with
+ // iframes and parent elements with rounded corners if the border
+ // radius for (eg) div.sourceCode is changed, this is likely going
+ // to need changing as well.
+ @if variable-exists(code-preview-margin-bottom) {
+ margin-bottom: $code-preview-margin-bottom;
+ } @else {
+ margin-bottom: -0.5em;
+ }
+ @if variable-exists(code-preview-border-color) {
+ border: $code-preview-border-color;
+ }
+}
+
+// link styling
+a {
+ text-underline-offset: 3px;
+}
+
+/* Callout styling */
+
+.callout pre.sourceCode {
+ padding-left: 0;
+}
+
+// ansi escaping
+div.ansi-escaped-output {
+ font-family: monospace;
+ display: block;
+}
+
+/*!
+*
+* ansi colors from IPython notebook's
+*
+* we also add `bright-[color]-` synonyms for the `-[color]-intense` classes since
+* that seems to be what ansi_up emits
+*
+*/
+/* CSS font colors for translated ANSI escape sequences */
+/* The color values are a mix of
+ http://www.xcolors.net/dl/baskerville-ivorylight and
+ http://www.xcolors.net/dl/euphrasia */
+.ansi-black-fg {
+ color: #3e424d;
+}
+.ansi-black-bg {
+ background-color: #3e424d;
+}
+.ansi-black-intense-black,
+.ansi-bright-black-fg {
+ color: #282c36;
+}
+.ansi-black-intense-black,
+.ansi-bright-black-bg {
+ background-color: #282c36;
+}
+.ansi-red-fg {
+ color: #e75c58;
+}
+.ansi-red-bg {
+ background-color: #e75c58;
+}
+.ansi-red-intense-red,
+.ansi-bright-red-fg {
+ color: #b22b31;
+}
+.ansi-red-intense-red,
+.ansi-bright-red-bg {
+ background-color: #b22b31;
+}
+.ansi-green-fg {
+ color: #00a250;
+}
+.ansi-green-bg {
+ background-color: #00a250;
+}
+.ansi-green-intense-green,
+.ansi-bright-green-fg {
+ color: #007427;
+}
+.ansi-green-intense-green,
+.ansi-bright-green-bg {
+ background-color: #007427;
+}
+.ansi-yellow-fg {
+ color: #ddb62b;
+}
+.ansi-yellow-bg {
+ background-color: #ddb62b;
+}
+.ansi-yellow-intense-yellow,
+.ansi-bright-yellow-fg {
+ color: #b27d12;
+}
+.ansi-yellow-intense-yellow,
+.ansi-bright-yellow-bg {
+ background-color: #b27d12;
+}
+.ansi-blue-fg {
+ color: #208ffb;
+}
+.ansi-blue-bg {
+ background-color: #208ffb;
+}
+.ansi-blue-intense-blue,
+.ansi-bright-blue-fg {
+ color: #0065ca;
+}
+.ansi-blue-intense-blue,
+.ansi-bright-blue-bg {
+ background-color: #0065ca;
+}
+.ansi-magenta-fg {
+ color: #d160c4;
+}
+.ansi-magenta-bg {
+ background-color: #d160c4;
+}
+.ansi-magenta-intense-magenta,
+.ansi-bright-magenta-fg {
+ color: #a03196;
+}
+.ansi-magenta-intense-magenta,
+.ansi-bright-magenta-bg {
+ background-color: #a03196;
+}
+.ansi-cyan-fg {
+ color: #60c6c8;
+}
+.ansi-cyan-bg {
+ background-color: #60c6c8;
+}
+.ansi-cyan-intense-cyan,
+.ansi-bright-cyan-fg {
+ color: #258f8f;
+}
+.ansi-cyan-intense-cyan,
+.ansi-bright-cyan-bg {
+ background-color: #258f8f;
+}
+.ansi-white-fg {
+ color: #c5c1b4;
+}
+.ansi-white-bg {
+ background-color: #c5c1b4;
+}
+.ansi-white-intense-white,
+.ansi-bright-white-fg {
+ color: #a1a6b2;
+}
+.ansi-white-intense-white,
+.ansi-bright-white-bg {
+ background-color: #a1a6b2;
+}
+.ansi-default-inverse-fg {
+ color: #ffffff;
+}
+.ansi-default-inverse-bg {
+ background-color: #000000;
+}
+.ansi-bold {
+ font-weight: bold;
+}
+.ansi-underline {
+ text-decoration: underline;
+}
+
+:root {
+ --quarto-body-bg: #{$body-bg};
+ --quarto-body-color: #{$body-color};
+ --quarto-text-muted: #{$text-muted};
+ --quarto-border-color: #{$table-border-color};
+ --quarto-border-width: #{$border-width};
+ @if not variable-exists(enable-rounded) or $enable-rounded == true {
+ --quarto-border-radius: #{$border-radius};
+ }
+}
+
+/* rules to support GT table styling */
+table.gt_table {
+ color: var(--quarto-body-color);
+ font-size: 1em;
+ width: 100%; // to match other table styling
+ background-color: transparent;
+ border-top-width: inherit;
+ border-bottom-width: inherit;
+ border-color: var(--quarto-border-color);
+}
+
+table.gt_table th.gt_column_spanner_outer {
+ color: var(--quarto-body-color);
+ background-color: transparent;
+ border-top-width: inherit;
+ border-bottom-width: inherit;
+ border-color: var(--quarto-border-color);
+}
+
+table.gt_table th.gt_col_heading {
+ color: var(--quarto-body-color);
+ font-weight: bold;
+ background-color: transparent;
+}
+
+table.gt_table thead.gt_col_headings {
+ border-bottom: 1px solid currentColor;
+ border-top-width: inherit;
+ border-top-color: var(--quarto-border-color);
+}
+
+table.gt_table thead.gt_col_headings:not(:first-child) {
+ border-top-width: 1px;
+ border-top-color: var(--quarto-border-color);
+}
+
+table.gt_table td.gt_row {
+ border-bottom-width: 1px;
+ border-bottom-color: var(--quarto-border-color);
+ border-top-width: 0px;
+}
+
+table.gt_table tbody.gt_table_body {
+ border-top-width: 1px;
+ border-bottom-width: 1px;
+ border-bottom-color: var(--quarto-border-color);
+ border-top-color: currentColor;
+}
+
+/* restore previous pandoc columns behavior
+ (too many reports of slide layout breaking)
+ see https://github.com/jgm/pandoc/pull/8237
+*/
+div.columns {
+ display: initial;
+ gap: initial;
+}
+div.column {
+ display: inline-block;
+ overflow-x: initial;
+ vertical-align: top;
+ width: 50%;
+}
+
+// Code Annotation LayoutBoot
+.code-annotation-tip-content {
+ word-wrap: break-word;
+}
+
+.code-annotation-container-hidden {
+ display: none !important;
+}
+
+dl.code-annotation-container-grid {
+ display: grid;
+ grid-template-columns: min-content auto;
+ dt {
+ grid-column: 1;
+ }
+ dd {
+ grid-column: 2;
+ }
+}
+
+pre.sourceCode.code-annotation-code {
+ padding-right: 0;
+}
+
+code.sourceCode .code-annotation-anchor {
+ z-index: 100;
+ position: relative;
+ float: right;
+ background-color: transparent;
+}
+
+// Add a bit of margin to the right of a checkbox
+// https://github.com/quarto-dev/quarto-cli/issues/6627
+input[type="checkbox"] {
+ margin-right: 0.5ch;
+}
+
+// Mermaid Theming
+// if none come from theme, we need these
+$body-color: #222 !default;
+$body-bg: #fff !default;
+$primary: #468 !default;
+$secondary: #999 !default;
+$font-family-sans-serif: sans-serif !default;
+$font-weight-base: 400 !default;
+
+/* SCSS variables
+
+ These are documented in quarto-cli/quarto-web:docs/authoring/_mermaid-theming.qmd
+
+ Make sure to update the docs if you change these.
+*/
+$mermaid-bg-color: $body-bg !default;
+$mermaid-edge-color: $secondary !default;
+$mermaid-node-fg-color: $body-color !default;
+$mermaid-fg-color: $body-color !default;
+$mermaid-fg-color--lighter: lighten($body-color, 10%) !default;
+$mermaid-fg-color--lightest: lighten($body-color, 20%) !default;
+$mermaid-font-family: $font-family-sans-serif !default;
+$mermaid-font-weight: $font-weight-base !default;
+$mermaid-label-bg-color: $body-bg !default;
+$mermaid-label-fg-color: $primary !default;
+$mermaid-node-bg-color: rgba($primary, 0.1) !default;
+$mermaid-node-fg-color: $primary !default;
+
+/* CSS variables */
+:root {
+ --mermaid-bg-color: #{$mermaid-bg-color};
+ --mermaid-edge-color: #{$mermaid-edge-color};
+ --mermaid-node-fg-color: #{$mermaid-node-fg-color};
+ --mermaid-fg-color: #{$mermaid-fg-color};
+ --mermaid-fg-color--lighter: #{$mermaid-fg-color--lighter};
+ --mermaid-fg-color--lightest: #{$mermaid-fg-color--lightest};
+ --mermaid-font-family: #{$mermaid-font-family};
+ --mermaid-label-bg-color: #{$mermaid-label-bg-color};
+ --mermaid-label-fg-color: #{$mermaid-label-fg-color};
+ --mermaid-node-bg-color: #{$mermaid-node-bg-color};
+ --mermaid-node-fg-color: #{$mermaid-node-fg-color};
+}
+
+@media print {
+ :root {
+ font-size: 11pt;
+ }
+ #quarto-sidebar,
+ #TOC,
+ .nav-page {
+ display: none;
+ }
+ .page-columns .content {
+ grid-column-start: page-start;
+ }
+ .fixed-top {
+ position: relative;
+ }
+ .panel-caption,
+ .figure-caption,
+ figcaption {
+ color: #666;
+ }
+}
+
+.code-copy-button {
+ position: absolute;
+ top: 0;
+ right: 0;
+ border: 0;
+ margin-top: 5px;
+ margin-right: 5px;
+ background-color: transparent;
+ z-index: 3;
+}
+
+.code-copy-button:focus {
+ outline: none;
+}
+
+.code-copy-button-tooltip {
+ font-size: 0.75em;
+}
+
+#{$code-copy-selector} .code-copy-button > .bi::before {
+ display: inline-block;
+ height: 1rem;
+ width: 1rem;
+ content: "";
+ vertical-align: -0.125em;
+ @if variable-exists(btn-code-copy-color) {
+ background-image: url('data:image/svg+xml,');
+ } @else {
+ background-image: url('data:image/svg+xml,');
+ }
+ background-repeat: no-repeat;
+ background-size: 1rem 1rem;
+}
+
+#{$code-copy-selector} .code-copy-button-checked > .bi::before {
+ @if variable-exists(btn-code-copy-color) {
+ background-image: url('data:image/svg+xml,');
+ } @else {
+ background-image: url('data:image/svg+xml,');
+ }
+}
+
+@if variable-exists(btn-code-copy-color-active) {
+ #{$code-copy-selector} .code-copy-button:hover > .bi::before {
+ background-image: url('data:image/svg+xml,');
+ }
+ #{$code-copy-selector} .code-copy-button-checked:hover > .bi::before {
+ background-image: url('data:image/svg+xml,');
+ }
+}
+
+main {
+ ol ol,
+ ul ul,
+ ol ul,
+ ul ol {
+ margin-bottom: 1em;
+ }
+}
+
+// the scss mode for vs code doesn't like the fancy :has(> p) selector, but
+// it's valid: https://developer.mozilla.org/en-US/docs/Web/CSS/:has
+ul > li:not(:has(> p)) > ul,
+ol > li:not(:has(> p)) > ul,
+ul > li:not(:has(> p)) > ol,
+ol > li:not(:has(> p)) > ol {
+ margin-bottom: 0;
+}
+
+ul > li:not(:has(> p)) > ul > li:has(> p),
+ol > li:not(:has(> p)) > ul > li:has(> p),
+ul > li:not(:has(> p)) > ol > li:has(> p),
+ol > li:not(:has(> p)) > ol > li:has(> p) {
+ margin-top: 1rem;
+}
+
+// Grid layout
+body {
+ margin: 0;
+}
+
+// If we're applying display: grid, we're losing our display: border-box
+// behavior, so we need to reset bottom margin for title block
+main.page-columns > header > h1.title {
+ margin-bottom: 0;
+}
+
+@include media-breakpoint-up(lg) {
+ body {
+ .page-columns {
+ @include page-columns-default-wide();
+ }
+ }
+
+ body.fullcontent:not(.floating):not(.docked) {
+ .page-columns {
+ @include page-columns-fullcontent-wide();
+ }
+ }
+
+ body.slimcontent:not(.floating):not(.docked) {
+ .page-columns {
+ @include page-columns-slimcontent-wide();
+ }
+ }
+
+ body.listing:not(.floating):not(.docked) {
+ .page-columns {
+ @include page-columns-listing-wide();
+ }
+ }
+
+ body:not(.floating):not(.docked) {
+ .page-columns.toc-left {
+ @include page-columns-tocleft-wide();
+ .page-columns {
+ @include page-columns-tocleft-wide();
+ }
+ }
+ }
+
+ body.floating {
+ .page-columns {
+ @include page-columns-float-wide();
+ }
+ }
+
+ body.docked {
+ .page-columns {
+ @include page-columns-docked-wide();
+ }
+ }
+
+ body.docked.fullcontent {
+ .page-columns {
+ @include page-columns-docked-fullcontent-wide();
+ }
+ }
+
+ body.floating.fullcontent {
+ .page-columns {
+ @include page-columns-float-fullcontent-wide();
+ }
+ }
+
+ body.docked.slimcontent {
+ .page-columns {
+ @include page-columns-docked-slimcontent-wide();
+ }
+ }
+
+ body.docked.listing {
+ .page-columns {
+ @include page-columns-docked-listing-wide();
+ }
+ }
+
+ body.floating.slimcontent {
+ .page-columns {
+ @include page-columns-float-slimcontent-wide();
+ }
+ }
+
+ body.floating.listing {
+ .page-columns {
+ @include page-columns-float-listing-wide();
+ }
+ }
+}
+
+@include media-breakpoint-down(lg) {
+ body {
+ .page-columns {
+ @include page-columns-default-mid();
+ }
+ }
+
+ body.fullcontent:not(.floating):not(.docked) {
+ .page-columns {
+ @include page-columns-fullcontent-mid();
+ }
+ }
+
+ body.slimcontent:not(.floating):not(.docked) {
+ .page-columns {
+ @include page-columns-slimcontent-mid();
+ }
+ }
+
+ body.listing:not(.floating):not(.docked) {
+ .page-columns {
+ @include page-columns-listing-mid();
+ }
+ }
+
+ body:not(.floating):not(.docked) {
+ .page-columns.toc-left {
+ @include page-columns-tocleft-mid();
+ .page-columns {
+ @include page-columns-tocleft-mid();
+ }
+ }
+ }
+
+ body.floating {
+ .page-columns {
+ @include page-columns-float-mid();
+ }
+ }
+
+ body.docked {
+ .page-columns {
+ @include page-columns-docked-mid();
+ }
+ }
+
+ body.docked.fullcontent {
+ .page-columns {
+ @include page-columns-docked-fullcontent-mid();
+ }
+ }
+
+ body.floating.fullcontent {
+ .page-columns {
+ @include page-columns-float-fullcontent-mid();
+ }
+ }
+
+ body.docked.slimcontent {
+ .page-columns {
+ @include page-columns-docked-slimcontent-mid();
+ }
+ }
+
+ body.docked.listing {
+ .page-columns {
+ @include page-columns-docked-listing-mid();
+ }
+ }
+
+ body.floating.slimcontent {
+ .page-columns {
+ @include page-columns-float-slimcontent-mid();
+ }
+ }
+
+ body.floating.listing {
+ .page-columns {
+ @include page-columns-float-listing-mid();
+ }
+ }
+}
+
+@include media-breakpoint-down(md) {
+ body,
+ body.fullcontent:not(.floating):not(.docked),
+ body.slimcontent:not(.floating):not(.docked),
+ body.docked,
+ body.docked.slimcontent,
+ body.docked.fullcontent,
+ body.floating,
+ body.floating.slimcontent,
+ body.floating.fullcontent {
+ .page-columns {
+ @include page-columns();
+ @include grid-template-columns-narrow();
+ }
+ }
+
+ body:not(.floating):not(.docked) {
+ .page-columns.toc-left {
+ @include page-columns();
+ @include grid-template-columns-narrow();
+ .page-columns {
+ @include page-columns();
+ @include grid-template-columns-narrow();
+ }
+ }
+ }
+
+ nav[role="doc-toc"] {
+ display: none;
+ }
+}
+
+// Positions a header, body, and footer in rows
+body,
+.page-row-navigation {
+ grid-template-rows: [page-top] max-content [contents-top] max-content [contents-bottom] max-content [page-bottom];
+}
+
+// Positions contents followed by a region below the content
+// (used for pagination controls)
+.page-rows-contents {
+ grid-template-rows:
+ [content-top] minmax(max-content, 1fr) [content-bottom] minmax(
+ 60px,
+ max-content
+ )
+ [page-bottom];
+}
+
+.page-full {
+ grid-column: screen-start / screen-end !important;
+}
+
+.page-columns > * {
+ grid-column: body-content-start / body-content-end;
+}
+
+.page-columns.column-page > * {
+ grid-column: page-start / page-end;
+}
+.page-columns.column-page-left .page-columns.page-full > *,
+.page-columns.column-page-left > * {
+ grid-column: page-start / body-content-end;
+}
+
+.page-columns.column-page-right .page-columns.page-full > *,
+.page-columns.column-page-right > * {
+ grid-column: body-content-start / page-end;
+}
+
+// Automatically creates new rows
+.page-rows {
+ grid-auto-rows: auto;
+}
+
+.header {
+ grid-column: screen-start / screen-end;
+ grid-row: page-top / contents-top;
+}
+
+#quarto-content {
+ padding: 0;
+ grid-column: screen-start / screen-end;
+ grid-row: contents-top / contents-bottom;
+}
+
+body.floating {
+ .sidebar.sidebar-navigation {
+ grid-column: page-start / body-start;
+ grid-row: content-top / page-bottom;
+ }
+}
+
+body.docked {
+ .sidebar.sidebar-navigation {
+ grid-column: screen-start / body-start;
+ grid-row: content-top / page-bottom;
+ }
+}
+
+.sidebar.toc-left {
+ grid-column: page-start / body-start;
+ grid-row: content-top / page-bottom;
+}
+
+.sidebar.margin-sidebar {
+ grid-column: body-end / page-end;
+ grid-row: content-top / page-bottom;
+}
+
+.page-columns .content {
+ grid-column: body-content-start / body-content-end;
+ grid-row: content-top / content-bottom;
+ align-content: flex-start;
+}
+
+.page-columns .page-navigation {
+ grid-column: body-content-start / body-content-end;
+ grid-row: content-bottom / page-bottom;
+}
+
+.page-columns .footer {
+ grid-column: screen-start / screen-end;
+ grid-row: contents-bottom / page-bottom;
+}
+
+.page-columns .column-body {
+ grid-column: body-content-start / body-content-end;
+}
+
+.page-columns .column-body-fullbleed {
+ grid-column: body-start / body-end;
+}
+
+.page-columns .column-body-outset {
+ grid-column: body-start-outset / body-end-outset;
+ z-index: $zindex-pagelayout;
+ opacity: 0.999;
+ @include column-spanning-element();
+}
+
+.page-columns .column-body-outset-left {
+ grid-column: body-start-outset / body-content-end;
+ z-index: $zindex-pagelayout;
+ opacity: 0.999;
+ @include column-spanning-element();
+}
+
+.page-columns .column-body-outset-right {
+ grid-column: body-content-start / body-end-outset;
+ z-index: $zindex-pagelayout;
+ opacity: 0.999;
+ @include column-spanning-element();
+}
+
+.page-columns .column-page {
+ grid-column: page-start / page-end;
+ z-index: $zindex-pagelayout;
+ opacity: 0.999;
+ @include column-spanning-element();
+}
+
+.page-columns .column-page-inset {
+ grid-column: page-start-inset / page-end-inset;
+ z-index: $zindex-pagelayout;
+ opacity: 0.999;
+ @include column-spanning-element();
+}
+
+.page-columns .column-page-inset-left {
+ grid-column: page-start-inset / body-content-end;
+ z-index: $zindex-pagelayout;
+ opacity: 0.999;
+ @include column-spanning-element();
+}
+
+.page-columns .column-page-inset-right {
+ grid-column: body-content-start / page-end-inset;
+ z-index: $zindex-pagelayout;
+ opacity: 0.999;
+ figcaption {
+ @include column-spanning-element();
+ }
+}
+
+.page-columns .column-page-left {
+ grid-column: page-start / body-content-end;
+ z-index: $zindex-pagelayout;
+ opacity: 0.999;
+ @include column-spanning-element();
+}
+
+.page-columns .column-page-right {
+ grid-column: body-content-start / page-end;
+ z-index: $zindex-pagelayout;
+ opacity: 0.999;
+ figcaption {
+ @include column-spanning-element();
+ }
+}
+
+#quarto-content.page-columns {
+ #quarto-margin-sidebar,
+ #quarto-sidebar {
+ z-index: 1;
+ }
+
+ @include media-breakpoint-down(lg) {
+ #quarto-margin-sidebar.collapse,
+ #quarto-sidebar.collapse,
+ #quarto-margin-sidebar.collapsing,
+ #quarto-sidebar.collapsing {
+ z-index: $zindex-modal;
+ }
+ }
+
+ main.column-page,
+ main.column-page-right,
+ main.column-page-left {
+ z-index: 0;
+ }
+}
+
+.page-columns .column-screen-inset {
+ grid-column: screen-start-inset / screen-end-inset;
+ z-index: $zindex-pagelayout;
+ opacity: 0.999;
+ @include column-spanning-element();
+}
+
+.page-columns .column-screen-inset-left {
+ grid-column: screen-start-inset / body-content-end;
+ z-index: $zindex-pagelayout;
+ opacity: 0.999;
+ @include column-spanning-element();
+}
+
+.page-columns .column-screen-inset-right {
+ grid-column: body-content-start / screen-end-inset;
+ z-index: $zindex-pagelayout;
+ opacity: 0.999;
+ @include column-spanning-element();
+}
+
+.page-columns .column-screen {
+ grid-column: screen-start / screen-end;
+ z-index: $zindex-pagelayout;
+ opacity: 0.999;
+ @include column-spanning-element();
+}
+
+.page-columns .column-screen-left {
+ grid-column: screen-start / body-content-end;
+ z-index: $zindex-pagelayout;
+ opacity: 0.999;
+ @include column-spanning-element();
+}
+
+.page-columns .column-screen-right {
+ grid-column: body-content-start / screen-end;
+ z-index: $zindex-pagelayout;
+ opacity: 0.999;
+ @include column-spanning-element();
+}
+
+.page-columns .column-screen-inset-shaded {
+ grid-column: screen-start / screen-end;
+ padding: 1em;
+ background: $light;
+ z-index: $zindex-pagelayout;
+ opacity: 0.999;
+ margin-bottom: 1em;
+}
+
+.zindex-content {
+ z-index: $zindex-pagelayout;
+ opacity: 0.999;
+}
+
+.zindex-modal {
+ z-index: $zindex-modal;
+ opacity: 0.999;
+}
+
+.zindex-over-content {
+ z-index: #{$zindex-dropdown - 1};
+ opacity: 0.999;
+}
+
+img.img-fluid.column-screen,
+img.img-fluid.column-screen-inset-shaded,
+img.img-fluid.column-screen-inset,
+img.img-fluid.column-screen-inset-left,
+img.img-fluid.column-screen-inset-right,
+img.img-fluid.column-screen-left,
+img.img-fluid.column-screen-right {
+ width: 100%;
+}
+
+@include media-breakpoint-up(lg) {
+ .margin-caption,
+ div.aside,
+ aside:not(.footnotes):not(.sidebar),
+ .column-margin {
+ grid-column: body-end / page-end !important;
+ z-index: $zindex-pagelayout;
+ }
+
+ .column-sidebar {
+ grid-column: page-start / body-start !important;
+ z-index: $zindex-pagelayout;
+ }
+
+ .column-leftmargin {
+ grid-column: screen-start-inset / body-start !important;
+ z-index: $zindex-pagelayout;
+ }
+
+ .no-row-height {
+ height: 1em;
+ overflow: visible;
+ }
+}
+
+@include media-breakpoint-down(lg) {
+ .margin-caption,
+ div.aside,
+ aside:not(.footnotes):not(.sidebar),
+ .column-margin {
+ grid-column: body-end / page-end !important;
+ z-index: $zindex-pagelayout;
+ }
+
+ .no-row-height {
+ height: 1em;
+ overflow: visible;
+ }
+
+ .page-columns.page-full {
+ overflow: visible;
+ }
+
+ .page-columns.toc-left {
+ .margin-caption,
+ div.aside,
+ aside:not(.footnotes):not(.sidebar),
+ .column-margin {
+ grid-column: body-content-start / body-content-end !important;
+ z-index: $zindex-pagelayout;
+ opacity: 0.999;
+ }
+ .no-row-height {
+ height: initial;
+ overflow: initial;
+ }
+ }
+}
+
+@include media-breakpoint-down(md) {
+ .margin-caption,
+ div.aside,
+ aside:not(.footnotes):not(.sidebar),
+ .column-margin {
+ grid-column: body-content-start / body-content-end !important;
+ z-index: $zindex-pagelayout;
+ opacity: 0.999;
+ }
+ .no-row-height {
+ height: initial;
+ overflow: initial;
+ }
+
+ #quarto-margin-sidebar {
+ display: none;
+ }
+
+ #quarto-sidebar-toc-left {
+ display: none;
+ }
+
+ .hidden-sm {
+ display: none;
+ }
+}
+
+// Panel Grid (custom grid for our panel system)
+.panel-grid {
+ display: grid;
+ grid-template-rows: repeat(1, 1fr);
+ grid-template-columns: repeat(24, 1fr);
+ gap: 1em;
+ @include make-cssgrid(24);
+}
+
+// Rest of rules
+body {
+ @if variable-exists(margin-top) {
+ margin-top: $margin-top;
+ }
+ @if variable-exists(margin-bottom) {
+ margin-bottom: $margin-bottom;
+ }
+ @if variable-exists(margin-left) {
+ margin-left: $margin-left;
+ }
+ @if variable-exists(margin-right) {
+ margin-right: $margin-right;
+ }
+}
+
+main {
+ margin-top: 1em;
+ margin-bottom: 1em;
+}
+
+h1,
+h2 {
+ color: if(
+ $headings-color != null,
+ $headings-color,
+ theme-dim($body-color, 8%)
+ );
+ margin-top: 2rem;
+ margin-bottom: 1rem;
+ font-weight: $h1h2h3-font-weight;
+}
+
+h1.title {
+ margin-top: 0;
+}
+
+main.content > section:first-of-type > h2:first-child {
+ margin-top: 0;
+}
+
+h2 {
+ border-bottom: 1px solid $table-border-color;
+ padding-bottom: 0.5rem;
+}
+
+h3 {
+ font-weight: $h1h2h3-font-weight;
+}
+
+h3,
+h4 {
+ opacity: 0.9;
+ margin-top: 1.5rem;
+}
+
+h5,
+h6 {
+ opacity: 0.9;
+}
+
+.header-section-number {
+ @include body-secondary;
+}
+
+.nav-link.active .header-section-number {
+ color: inherit;
+}
+
+mark {
+ padding: 0em;
+}
+
+// The 1.4 figcaption classes are
+//
+// quarto-float-caption or quarto-subfloat-caption, depending
+// on whether it's a main or subfloat caption.
+//
+// In addition, the name of the float is added as a class
+// as well ("figure", "table", etc, including custom
+// float types like a hypothetical "diagram")
+//
+// this way, custom float types can be both supported and
+// offered good defaults.
+//
+// FIXME right now we're classing all of figcaption,
+// but we should clean this up.
+.panel-caption,
+.figure-caption,
+.subfigure-caption,
+.table-caption,
+figcaption,
+caption {
+ font-size: 0.9rem;
+ @include body-secondary;
+}
+
+// as of 1.4, tables emitted by quarto shouldn't have caption
+// elements, but we keep this here in case some strange rawhtml
+// table sneaks through.
+.quarto-layout-cell[data-ref-parent] caption {
+ @include body-secondary;
+}
+
+.column-margin figcaption,
+.margin-caption,
+div.aside,
+aside,
+.column-margin {
+ @include body-secondary;
+ font-size: 0.825rem;
+}
+
+.panel-caption.margin-caption {
+ text-align: inherit;
+}
+
+.column-margin.column-container p {
+ margin-bottom: 0;
+}
+
+.column-margin.column-container > *:not(.collapse):first-child {
+ padding-bottom: 0.5em;
+ display: block;
+}
+
+.column-margin.column-container > *:not(.collapse):not(:first-child) {
+ padding-top: 0.5em;
+ padding-bottom: 0.5em;
+ display: block;
+}
+
+.column-margin.column-container > *.collapse:not(.show) {
+ display: none;
+}
+
+@include media-breakpoint-up(md) {
+ .column-margin.column-container .callout-margin-content:first-child {
+ margin-top: 4.5em;
+ }
+ .column-margin.column-container .callout-margin-content-simple:first-child {
+ margin-top: 3.5em;
+ }
+}
+
+.margin-caption > * {
+ padding-top: 0.5em;
+ padding-bottom: 0.5em;
+}
+
+// Caption and footnotes
+
+// sort out font size
+$code-block-font-size: $small-font-size !default;
+
+// sort out border color
+$code-block-border-left-color: $table-border-color !default;
+@if type_of($code-block-border-left) == color {
+ $code-block-border-left-color: $code-block-border-left;
+}
+
+// sort out background color
+$code-block-bg-color: quarto-color.adjust(
+ $progress-bg,
+ $alpha: $code-block-bg-alpha
+) !default;
+@if type_of($code-block-bg) == color {
+ $code-block-bg-color: $code-block-bg;
+}
+
+// stack layout panels on mobile devices
+@include media-breakpoint-down(md) {
+ .quarto-layout-row {
+ flex-direction: column;
+ }
+}
+
+.nav-tabs .nav-item {
+ margin-top: 1px;
+ cursor: pointer;
+}
+
+.tab-content {
+ margin-top: 0px;
+ border-left: $nav-tabs-border-color $nav-tabs-border-width solid;
+ border-right: $nav-tabs-border-color $nav-tabs-border-width solid;
+ border-bottom: $nav-tabs-border-color $nav-tabs-border-width solid;
+ margin-left: 0;
+ padding: 1em;
+ margin-bottom: 1em;
+}
+
+@include media-breakpoint-down(md) {
+ .layout-sidebar {
+ margin-left: 0;
+ margin-right: 0;
+ }
+}
+
+.panel-sidebar,
+.panel-sidebar .form-control,
+.panel-input,
+.panel-input .form-control,
+.selectize-dropdown {
+ font-size: 0.9rem;
+}
+
+.panel-sidebar .form-control,
+.panel-input .form-control {
+ padding-top: 0.1rem;
+}
+
+.tab-pane div.sourceCode {
+ margin-top: 0px;
+}
+
+.tab-pane > p {
+ padding-top: 0;
+}
+
+.tab-pane > p:nth-child(1) {
+ padding-top: 0;
+}
+
+.tab-pane > p:last-child {
+ margin-bottom: 0;
+}
+
+.tab-pane > pre:last-child {
+ margin-bottom: 0;
+}
+
+.tab-content > .tab-pane:not(.active) {
+ display: none !important;
+}
+
+div.sourceCode {
+ // Clear code background if is not specified
+ @if $code-block-bg {
+ background-color: $code-block-bg-color;
+ border: 1px solid $code-block-bg-color;
+ @if $enable-rounded {
+ border-radius: $border-radius;
+ }
+ } @else {
+ background-color: $body-bg !important;
+ border: none;
+ padding: 0;
+ }
+
+ @if variable-exists(code-block-color) {
+ color: $code-block-color;
+ }
+}
+
+@if variable-exists(code-block-color) {
+ div.sourceCode pre.sourceCode {
+ color: $code-block-color;
+ }
+}
+
+pre.sourceCode {
+ background-color: transparent;
+}
+
+pre.sourceCode {
+ // Border
+ @if $code-block-border-left {
+ border-left: $code-block-border-left-size;
+ border-left-style: $code-block-border-left-style;
+ border-left-color: $code-block-border-left-color;
+ padding-left: $code-block-padding-left;
+ border-right: none;
+ border-top: none;
+ border-bottom: none;
+ } @else {
+ border: none;
+ }
+ font-size: $code-block-font-size;
+ overflow: visible !important;
+ @if $code-block-bg {
+ padding: $code-block-bg-padding;
+ }
+}
+
+pre.sourceCode > code.sourceCode {
+ @if not $code-block-bg {
+ padding: 0;
+ }
+}
+
+div.sourceCode {
+ overflow-y: hidden;
+}
+
+.callout div.sourceCode {
+ margin-left: initial;
+}
+
+// improve treatment of blockquotes
+.blockquote {
+ font-size: inherit;
+ padding-left: 1rem;
+ padding-right: 1.5rem;
+ @include body-secondary;
+}
+
+.blockquote {
+ h1:first-child,
+ h2:first-child,
+ h3:first-child,
+ h4:first-child,
+ h5:first-child {
+ margin-top: 0;
+ }
+}
+
+pre {
+ background-color: initial;
+ padding: initial;
+ border: initial;
+}
+
+// Maps the pandoc 'monobackgroundcolor' to bootstrap
+// Note this only targets code outside of sourceCode blocks
+@if variable-exists(mono-background-color) {
+ p code:not(.sourceCode),
+ li code:not(.sourceCode),
+ kbd,
+ pre:not(.sourceCode),
+ samp {
+ background-color: $mono-background-color;
+ padding: 0.2em;
+ }
+}
+
+p pre code:not(.sourceCode),
+li pre code:not(.sourceCode),
+pre code:not(.sourceCode) {
+ background-color: initial;
+}
+
+// Default padding if background is set
+p code:not(.sourceCode),
+li code:not(.sourceCode),
+td code:not(.sourceCode) {
+ @if variable-exists(mono-background-color) {
+ background-color: $mono-background-color;
+ } @else if variable-exists(code-bg) {
+ background-color: $code-bg;
+ }
+
+ @if variable-exists(code-padding) {
+ padding: $code-padding;
+ } @else if variable-exists(code-bg) {
+ padding: 0.2em;
+ } @else if variable-exists(mono-background-color) {
+ padding: 0.2em;
+ }
+}
+
+nav p code:not(.sourceCode),
+nav li code:not(.sourceCode),
+nav td code:not(.sourceCode) {
+ background-color: transparent;
+ padding: 0;
+}
+
+td code:not(.sourceCode) {
+ white-space: pre-wrap;
+}
+
+#quarto-embedded-source-code-modal > .modal-dialog {
+ max-width: 1000px;
+ padding-left: 1.75rem;
+ padding-right: 1.75rem;
+}
+
+#quarto-embedded-source-code-modal
+ > .modal-dialog
+ > .modal-content
+ > .modal-body {
+ padding: 0;
+}
+
+#quarto-embedded-source-code-modal
+ > .modal-dialog
+ > .modal-content
+ > .modal-body
+ div.sourceCode {
+ margin: 0;
+ padding: 0.2rem 0.2rem;
+ border-radius: 0px;
+ border: none;
+}
+
+#quarto-embedded-source-code-modal
+ > .modal-dialog
+ > .modal-content
+ > .modal-header {
+ padding: 0.7rem;
+}
+
+.code-tools-button {
+ font-size: 1rem;
+ padding: 0.15rem 0.15rem;
+ margin-left: 5px;
+ color: $text-muted;
+ background-color: transparent;
+ transition: initial;
+ cursor: pointer;
+}
+
+.code-tools-button > .bi::before {
+ display: inline-block;
+ height: 1rem;
+ width: 1rem;
+ content: "";
+ vertical-align: -0.125em;
+ background-image: url('data:image/svg+xml,');
+ background-repeat: no-repeat;
+ background-size: 1rem 1rem;
+}
+
+.code-tools-button:hover > .bi::before {
+ background-image: url('data:image/svg+xml,');
+}
+
+#quarto-embedded-source-code-modal .code-copy-button > .bi::before {
+ background-image: url('data:image/svg+xml,');
+}
+
+#quarto-embedded-source-code-modal .code-copy-button-checked > .bi::before {
+ background-image: url('data:image/svg+xml,');
+}
+
+/* table of contents */
+.sidebar {
+ will-change: top;
+ transition: top 200ms linear;
+ position: sticky;
+ overflow-y: auto;
+ padding-top: 1.2em;
+ max-height: 100vh;
+}
+
+.sidebar.toc-left,
+.sidebar.margin-sidebar {
+ top: 0px;
+ padding-top: 1em;
+}
+
+.sidebar.quarto-banner-title-block-sidebar {
+ & > * {
+ padding-top: 1.65em;
+ }
+}
+
+figure .quarto-notebook-link {
+ margin-top: 0.5em;
+}
+
+.quarto-notebook-link {
+ font-size: 0.75em;
+ color: $text-muted;
+ margin-bottom: 1em;
+ text-decoration: none;
+ display: block;
+}
+
+.quarto-notebook-link:hover {
+ text-decoration: underline;
+ color: $link-color;
+}
+
+.quarto-notebook-link::before {
+ display: inline-block;
+ height: 0.75rem;
+ width: 0.75rem;
+ margin-bottom: 0em;
+ margin-right: 0.25em;
+ content: "";
+ vertical-align: -0.125em;
+
+ @if variable-exists(text-muted) {
+ background-image: url('data:image/svg+xml,');
+ } @else {
+ background-image: url('data:image/svg+xml,');
+ }
+ background-repeat: no-repeat;
+ background-size: 0.75rem 0.75rem;
+}
+
+.toc-actions i.bi,
+.quarto-code-links i.bi,
+.quarto-other-links i.bi,
+.quarto-alternate-notebooks i.bi,
+.quarto-alternate-formats i.bi {
+ margin-right: 0.4em;
+ font-size: $toc-tools-font-size;
+}
+
+.quarto-other-links-text-target {
+ .quarto-code-links i.bi,
+ .quarto-other-links i.bi {
+ margin-right: 0.2em;
+ }
+}
+
+.quarto-other-formats-text-target .quarto-alternate-formats i.bi {
+ margin-right: 0.1em;
+}
+
+.toc-actions i.bi.empty,
+.quarto-code-links i.bi.empty,
+.quarto-other-links i.bi.empty,
+.quarto-alternate-notebooks i.bi.empty,
+.quarto-alternate-formats i.bi.empty {
+ padding-left: 1em;
+}
+
+.quarto-notebook {
+ h2 {
+ border-bottom: none;
+ }
+ .cell-container {
+ display: flex;
+ .cell {
+ flex-grow: 4;
+ }
+ .cell-decorator {
+ padding-top: 1.5em;
+ padding-right: 1em;
+ text-align: right;
+ }
+
+ &.code-fold .cell-decorator {
+ padding-top: 3em;
+ }
+ }
+ .cell-code code {
+ white-space: pre-wrap;
+ }
+
+ .cell .cell-output-stderr pre code,
+ .cell .cell-output-stdout pre code {
+ white-space: pre-wrap;
+ overflow-wrap: anywhere;
+ }
+}
+
+.toc-actions,
+.quarto-alternate-formats,
+.quarto-other-links,
+.quarto-code-links,
+.quarto-alternate-notebooks {
+ padding-left: 0em;
+}
+.sidebar .toc-actions a,
+.sidebar .quarto-alternate-formats a,
+.sidebar .quarto-other-links a,
+.sidebar .quarto-code-links a,
+.sidebar .quarto-alternate-notebooks a,
+.sidebar nav[role="doc-toc"] a {
+ text-decoration: none;
+}
+
+.sidebar .toc-actions a:hover,
+.sidebar .quarto-other-links a:hover,
+.sidebar .quarto-code-links a:hover,
+.sidebar .quarto-alternate-formats a:hover,
+.sidebar .quarto-alternate-notebooks a:hover {
+ color: $link-color;
+}
+
+.sidebar .toc-actions h2,
+.sidebar .quarto-code-links h2,
+.sidebar .quarto-other-links h2,
+.sidebar .quarto-alternate-notebooks h2,
+.sidebar .quarto-alternate-formats h2,
+.sidebar nav[role="doc-toc"] > h2 {
+ font-weight: 500;
+ margin-bottom: 0.2rem;
+ margin-top: 0.3rem;
+ font-family: inherit;
+ border-bottom: 0;
+ padding-bottom: 0;
+ padding-top: 0px;
+}
+
+.sidebar .toc-actions > h2,
+.sidebar .quarto-code-links > h2,
+.sidebar .quarto-other-links > h2,
+.sidebar .quarto-alternate-notebooks > h2,
+.sidebar .quarto-alternate-formats > h2 {
+ font-size: $toc-tools-font-size;
+}
+
+.sidebar nav[role="doc-toc"] > h2 {
+ font-size: $toc-font-size;
+}
+
+.sidebar nav[role="doc-toc"] > ul a {
+ border-left: 1px solid $toc-inactive-border;
+ padding-left: 0.6rem;
+}
+
+.sidebar .toc-actions h2 > ul a,
+.sidebar .quarto-code-links h2 > ul a,
+.sidebar .quarto-other-links h2 > ul a,
+.sidebar .quarto-alternate-notebooks h2 > ul a,
+.sidebar .quarto-alternate-formats h2 > ul a {
+ border-left: none;
+ padding-left: 0.6rem;
+}
+
+.sidebar .toc-actions ul a:empty,
+.sidebar .quarto-code-links ul a:empty,
+.sidebar .quarto-other-links ul a:empty,
+.sidebar .quarto-alternate-notebooks ul a:empty,
+.sidebar .quarto-alternate-formats ul a:empty,
+.sidebar nav[role="doc-toc"] > ul a:empty {
+ display: none;
+}
+
+.sidebar .toc-actions ul,
+.sidebar .quarto-code-links ul,
+.sidebar .quarto-other-links ul,
+.sidebar .quarto-alternate-notebooks ul,
+.sidebar .quarto-alternate-formats ul {
+ padding-left: 0;
+ list-style: none;
+}
+
+.sidebar nav[role="doc-toc"] ul {
+ list-style: none;
+ padding-left: 0;
+ list-style: none;
+}
+
+.sidebar nav[role="doc-toc"] > ul {
+ margin-left: 0.45em;
+}
+
+.quarto-margin-sidebar nav[role="doc-toc"] {
+ padding-left: 0.5em;
+}
+
+.sidebar .toc-actions > ul,
+.sidebar .quarto-code-links > ul,
+.sidebar .quarto-other-links > ul,
+.sidebar .quarto-alternate-notebooks > ul,
+.sidebar .quarto-alternate-formats > ul {
+ font-size: $toc-tools-font-size;
+}
+
+.sidebar nav[role="doc-toc"] > ul {
+ font-size: $toc-font-size;
+}
+
+.sidebar .toc-actions ul li a,
+.sidebar .quarto-code-links ul li a,
+.sidebar .quarto-other-links ul li a,
+.sidebar .quarto-alternate-notebooks ul li a,
+.sidebar .quarto-alternate-formats ul li a,
+.sidebar nav[role="doc-toc"] > ul li a {
+ line-height: 1.1rem;
+ padding-bottom: 0.2rem;
+ padding-top: 0.2rem;
+ color: inherit;
+}
+
+$toc-indent-depth: 5;
+$indent: 1.2em;
+@for $i from 1 through $toc-indent-depth {
+ $selector-depth: repeat-chars(" ul > li >", $i);
+
+ .sidebar nav[role="doc-toc"] ul > li > #{$selector-depth} a {
+ padding-left: #{$indent * $i};
+ }
+}
+
+.sidebar nav[role="doc-toc"] ul > li > a.active,
+.sidebar nav[role="doc-toc"] ul > li > ul > li > a.active {
+ border-left: 1px solid $toc-active-border;
+ color: $toc-color !important;
+}
+
+.sidebar nav[role="doc-toc"] ul > li > a:hover,
+.sidebar nav[role="doc-toc"] ul > li > ul > li > a:hover {
+ color: $toc-color !important;
+}
+
+// tweaking default keyboard settings
+kbd,
+.kbd {
+ color: $body-color;
+ @if (quarto-color.blackness($body-bg) > $code-block-theme-dark-threshhold) {
+ background-color: shift-color($gray-100, 70%);
+ } @else {
+ background-color: $gray-100;
+ }
+ border: 1px solid;
+ border-radius: 5px;
+ border-color: $table-border-color;
+}
+
+// tweak pandoc default hanging indent
+.quarto-appendix-contents div.hanging-indent {
+ margin-left: 0em;
+}
+
+.quarto-appendix-contents div.hanging-indent div.csl-entry {
+ margin-left: 1em;
+ text-indent: -1em;
+}
+
+// footnotes/citations
+.citation a,
+.footnote-ref {
+ text-decoration: none;
+}
+.footnotes ol {
+ padding-left: 1em;
+}
+.tippy-content > * {
+ margin-bottom: 0.7em;
+}
+.tippy-content > *:last-child {
+ margin-bottom: 0;
+}
+
+@if $code-block-border-left {
+ // Align source code and callout text (not border) with main body text when there is room
+ @include media-breakpoint-up(lg) {
+ // Cards with header
+ .callout:not(.no-icon) {
+ margin-left: add(add(-0.4em, -$callout-border-width), -1px);
+ }
+
+ .callout {
+ margin-left: add(-0.4em, -$callout-border-width);
+ }
+
+ div.sourceCode {
+ margin-left: add(
+ add(-$code-block-padding-left, -$code-block-border-left-size),
+ 2px
+ );
+ }
+ }
+}
+
+// Callouts
+
+.callout {
+ margin-top: $callout-margin-top;
+ margin-bottom: $callout-margin-bottom;
+ border-radius: $border-radius;
+ overflow-wrap: break-word;
+}
+
+.callout .callout-title-container {
+ overflow-wrap: anywhere;
+}
+
+.callout.callout-style-simple {
+ padding: 0.4em 0.7em;
+ border-left: $callout-border-width solid;
+ border-right: 1px solid $table-border-color;
+ border-top: 1px solid $table-border-color;
+ border-bottom: 1px solid $table-border-color;
+}
+
+.callout.callout-style-default {
+ border-left: $callout-border-width solid;
+ border-right: 1px solid $table-border-color;
+ border-top: 1px solid $table-border-color;
+ border-bottom: 1px solid $table-border-color;
+}
+
+.callout .callout-body-container {
+ flex-grow: 1;
+}
+
+.callout.callout-style-simple .callout-body {
+ font-size: 0.9rem;
+ font-weight: 400;
+}
+
+.callout.callout-style-default .callout-body {
+ font-size: 0.9rem;
+ font-weight: 400;
+}
+
+.callout:not(.no-icon).callout-titled.callout-style-simple .callout-body {
+ padding-left: 1.6em;
+}
+
+.callout.callout-titled > .callout-header {
+ padding-top: 0.2em;
+ margin-bottom: -0.2em;
+}
+
+.callout.callout-style-simple > div.callout-header {
+ border-bottom: none;
+ font-size: 0.9rem;
+ font-weight: 600;
+ opacity: 75%;
+}
+
+.callout.callout-style-default > div.callout-header {
+ border-bottom: none;
+ font-weight: 600;
+ opacity: 85%;
+ font-size: 0.9rem;
+ padding-left: 0.5em;
+ padding-right: 0.5em;
+}
+
+.callout.callout-style-default .callout-body {
+ padding-left: 0.5em;
+ padding-right: 0.5em;
+}
+
+.callout.callout-style-default .callout-body > :first-child {
+ padding-top: 0.5rem;
+ margin-top: 0;
+}
+
+.callout > div.callout-header[data-bs-toggle="collapse"] {
+ cursor: pointer;
+}
+
+.callout.callout-style-default .callout-header[aria-expanded="false"],
+.callout.callout-style-default .callout-header[aria-expanded="true"] {
+ padding-top: 0px;
+ margin-bottom: 0px;
+ align-items: center;
+}
+
+.callout.callout-titled .callout-body > :last-child:not(.sourceCode),
+.callout.callout-titled .callout-body > div > :last-child:not(.sourceCode) {
+ padding-bottom: 0.5rem;
+ margin-bottom: 0;
+}
+
+.callout:not(.callout-titled) .callout-body > :first-child,
+.callout:not(.callout-titled) .callout-body > div > :first-child {
+ margin-top: 0.25rem;
+}
+
+.callout:not(.callout-titled) .callout-body > :last-child,
+.callout:not(.callout-titled) .callout-body > div > :last-child {
+ margin-bottom: 0.2rem;
+}
+
+$code-block-border-left-color: $table-border-color !default;
+
+.callout.callout-style-simple .callout-icon::before,
+.callout.callout-style-simple .callout-toggle::before {
+ height: 1rem;
+ width: 1rem;
+ display: inline-block;
+ content: "";
+ background-repeat: no-repeat;
+ background-size: 1rem 1rem;
+}
+
+.callout.callout-style-default .callout-icon::before,
+.callout.callout-style-default .callout-toggle::before {
+ height: 0.9rem;
+ width: 0.9rem;
+ display: inline-block;
+ content: "";
+ background-repeat: no-repeat;
+ background-size: 0.9rem 0.9rem;
+}
+
+.callout.callout-style-default .callout-toggle::before {
+ margin-top: 5px;
+}
+
+.callout .callout-btn-toggle .callout-toggle::before {
+ transition: transform 0.2s linear;
+}
+
+.callout .callout-header[aria-expanded="false"] .callout-toggle::before {
+ transform: rotate(-90deg);
+}
+
+.callout .callout-header[aria-expanded="true"] .callout-toggle::before {
+ transform: none;
+}
+
+.callout.callout-style-simple:not(.no-icon) div.callout-icon-container {
+ padding-top: 0.2em;
+ padding-right: 0.55em;
+}
+
+.callout.callout-style-default:not(.no-icon) div.callout-icon-container {
+ padding-top: 0.1em;
+ padding-right: 0.35em;
+}
+
+.callout.callout-style-default:not(.no-icon) div.callout-title-container {
+ margin-top: -1px;
+}
+
+.callout.callout-style-default.callout-caution:not(.no-icon)
+ div.callout-icon-container {
+ padding-top: 0.3em;
+ padding-right: 0.35em;
+}
+
+.callout > .callout-body > .callout-icon-container > .no-icon,
+.callout > .callout-header > .callout-icon-container > .no-icon {
+ display: none;
+}
+
+// Default values for callout colors
+$callout-color-note: $blue !default;
+$callout-color-tip: $green !default;
+$callout-color-important: $red !default;
+$callout-color-caution: $orange !default;
+$callout-color-warning: $yellow !default;
+
+// Generate per callout type css to customize their appearance
+// Define the callouts for which we should define styles
+$callouts: (
+ // NOTE
+ "note":
+ (
+ "color": $callout-color-note,
+ "icon":
+ '',
+ ),
+ // TIP
+ "tip":
+ (
+ "color": $callout-color-tip,
+ "icon":
+ '',
+ ),
+ // WARNING
+ "warning":
+ (
+ "color": $callout-color-warning,
+ "icon":
+ '',
+ ),
+ // CAUTION
+ "caution":
+ (
+ "color": $callout-color-caution,
+ "icon":
+ '',
+ ),
+ // IMPORTANT
+ "important":
+ (
+ "color": $callout-color-important,
+ "icon":
+ '',
+ )
+);
+
+div.callout.callout {
+ border-left-color: $text-muted;
+}
+
+div.callout.callout-style-default > .callout-header {
+ background-color: $text-muted;
+}
+
+@each $name, $info in $callouts {
+ div.callout-#{$name}.callout {
+ border-left-color: shift-color(
+ quarto-map.get($info, "color"),
+ $callout-border-scale
+ );
+ }
+
+ div.callout-#{$name}.callout-style-default > .callout-header {
+ @if (quarto-color.blackness($body-bg) > $code-block-theme-dark-threshhold) {
+ background-color: shift-color(quarto-map.get($info, "color"), 70%);
+ } @else {
+ background-color: shift-color(quarto-map.get($info, "color"), -90%);
+ }
+ }
+
+ $shifted-color: #{shift-color(
+ quarto-map.get($info, "color"),
+ $callout-icon-scale
+ )};
+ $shifted-color-svg: str-replace($shifted-color, "#", "%23");
+
+ div.callout-#{$name}:not(.callout-titled) .callout-icon::before {
+ background-image: #{"url('data:image/svg+xml," +
+ str-replace(
+ quarto-map.get($info, "icon"),
+ 'fill="currentColor"',
+ 'style="fill: #{$shifted-color-svg}"'
+ ) +
+ "');"};
+ }
+
+ div.callout-#{$name}.callout-titled .callout-icon::before {
+ background-image: #{"url('data:image/svg+xml," +
+ str-replace(
+ quarto-map.get($info, "icon"),
+ 'fill="currentColor"',
+ 'style="fill: #{$shifted-color-svg}"'
+ ) +
+ "');"};
+ }
+
+ div.callout-#{$name} .callout-toggle::before {
+ background-image: url('data:image/svg+xml,');
+ }
+}
+
+.quarto-toggle-container {
+ display: flex;
+ align-items: center;
+}
+
+// dark mode
+.quarto-reader-toggle .bi::before,
+.quarto-color-scheme-toggle .bi::before {
+ display: inline-block;
+ height: 1rem;
+ width: 1rem;
+ content: "";
+ background-repeat: no-repeat;
+ background-size: 1rem 1rem;
+}
+
+.sidebar-navigation {
+ padding-left: 20px;
+}
+
+.navbar {
+ background-color: $navbar-bg;
+ color: $navbar-fg;
+}
+
+.navbar .quarto-color-scheme-toggle:not(.alternate) .bi::before {
+ background-image: url('data:image/svg+xml,');
+}
+
+.navbar .quarto-color-scheme-toggle.alternate .bi::before {
+ background-image: url('data:image/svg+xml,');
+}
+
+.sidebar-navigation .quarto-color-scheme-toggle:not(.alternate) .bi::before {
+ background-image: url('data:image/svg+xml,');
+}
+
+.sidebar-navigation .quarto-color-scheme-toggle.alternate .bi::before {
+ background-image: url('data:image/svg+xml,');
+}
+
+// sidebar handling
+.quarto-sidebar-toggle {
+ border-color: $border-color;
+ border-bottom-left-radius: $border-radius;
+ border-bottom-right-radius: $border-radius;
+ border-style: solid;
+ border-width: 1px;
+ overflow: hidden;
+ border-top-width: 0px;
+ padding-top: 0px !important;
+}
+
+.quarto-sidebar-toggle-title {
+ cursor: pointer;
+ padding-bottom: 2px;
+ margin-left: 0.25em;
+ text-align: center;
+ font-weight: 400;
+ font-size: 0.775em;
+}
+
+#quarto-content {
+ .quarto-sidebar-toggle {
+ background: theme-dim($body-bg, 2%);
+ }
+
+ .quarto-sidebar-toggle-title {
+ color: $body-color;
+ }
+}
+
+.quarto-sidebar-toggle-icon {
+ color: $border-color;
+ margin-right: 0.5em;
+ float: right;
+ transition: transform 0.2s ease;
+}
+
+.quarto-sidebar-toggle-icon::before {
+ padding-top: 5px;
+}
+
+.quarto-sidebar-toggle.expanded .quarto-sidebar-toggle-icon {
+ transform: rotate(-180deg);
+}
+
+.quarto-sidebar-toggle.expanded .quarto-sidebar-toggle-title {
+ border-bottom: solid $border-color 1px;
+}
+
+.quarto-sidebar-toggle-contents {
+ background-color: $body-bg;
+ padding-right: 10px;
+ padding-left: 10px;
+ margin-top: 0px !important;
+ transition: max-height 0.5s ease;
+}
+
+.quarto-sidebar-toggle.expanded .quarto-sidebar-toggle-contents {
+ padding-top: 1em;
+ padding-bottom: 10px;
+}
+
+.sidebar-menu-container {
+ @include media-breakpoint-down(md) {
+ padding-bottom: 5em;
+ }
+}
+
+.quarto-sidebar-toggle:not(.expanded) .quarto-sidebar-toggle-contents {
+ padding-top: 0px !important;
+ padding-bottom: 0px;
+}
+
+nav[role="doc-toc"] {
+ z-index: $zindex-sticky;
+}
+
+#quarto-sidebar > *,
+nav[role="doc-toc"] > * {
+ transition: opacity 0.1s ease, border 0.1s ease;
+}
+
+#quarto-sidebar.slow > *,
+nav[role="doc-toc"].slow > * {
+ transition: opacity 0.4s ease, border 0.4s ease;
+}
+
+.quarto-color-scheme-toggle:not(.alternate).top-right .bi::before {
+ background-image: url('data:image/svg+xml,');
+}
+
+.quarto-color-scheme-toggle.alternate.top-right .bi::before {
+ background-image: url('data:image/svg+xml,');
+}
+
+// Quarto Appendix Treatment
+#quarto-appendix.default {
+ border-top: 1px solid $border-color;
+}
+
+#quarto-appendix.default {
+ background-color: $body-bg;
+ padding-top: 1.5em;
+ margin-top: 2em;
+ z-index: $zindex-pagelayout;
+
+ .quarto-appendix-heading {
+ margin-top: 0;
+ line-height: 1.4em;
+ font-weight: 600;
+ opacity: 0.9;
+ border-bottom: none;
+ margin-bottom: 0;
+ }
+
+ // Remove botoom margin from specific elements
+ .footnotes ol,
+ .footnotes ol li > p:last-of-type,
+ .quarto-appendix-contents > p:last-of-type {
+ margin-bottom: 0;
+ }
+
+ .footnotes ol {
+ margin-left: 0.5em;
+ }
+
+ .quarto-appendix-secondary-label {
+ margin-bottom: 0.4em;
+ }
+
+ .quarto-appendix-bibtex {
+ font-size: 0.7em;
+ padding: 1em;
+ border: solid 1px $border-color;
+ margin-bottom: 1em;
+ code.sourceCode {
+ white-space: pre-wrap;
+ }
+ }
+
+ .quarto-appendix-citeas {
+ font-size: 0.9em;
+ padding: 1em;
+ border: solid 1px $border-color;
+ margin-bottom: 1em;
+ }
+
+ .quarto-appendix-heading {
+ font-size: 1em !important;
+ }
+
+ *[role="doc-endnotes"] > ol,
+ .quarto-appendix-contents > *:not(h2) {
+ font-size: 0.9em;
+ }
+
+ section {
+ padding-bottom: 1.5em;
+ *[role="doc-endnotes"],
+ > *:not(a) {
+ opacity: 0.9;
+ word-wrap: break-word;
+ }
+ }
+}
+
+.btn.btn-quarto,
+div.cell-output-display .btn-quarto {
+ @include button-variant(
+ $btn-bg,
+ $btn-bg,
+ $btn-fg,
+ //if($btn-bg == $color-contrast-light, shade-color($btn-bg, $btn-hover-bg-shade-amount), tint-color($btn-bg, $btn-hover-bg-tint-amount)),
+ //if($btn-bg == $color-contrast-light, shade-color($btn-bg, $btn-hover-border-shade-amount), tint-color($btn-bg, $btn-hover-border-tint-amount)),
+ $hover-color: $btn-fg
+ );
+}
+
+// Quarto title block treatment
+nav.quarto-secondary-nav.color-navbar {
+ @if variable-exists(navbar-bg) {
+ background-color: $navbar-bg;
+ }
+
+ @if (variable-exists(navbar-fg)) {
+ color: $navbar-fg;
+ }
+}
+nav.quarto-secondary-nav.color-navbar h1,
+nav.quarto-secondary-nav.color-navbar .quarto-btn-toggle {
+ @if (variable-exists(navbar-fg)) {
+ color: $navbar-fg;
+ }
+}
+
+body.nav-sidebar {
+ @include media-breakpoint-down(lg) {
+ .quarto-title-banner {
+ margin-bottom: 0;
+ padding-bottom: 1em;
+ }
+ #title-block-header {
+ margin-block-end: 0;
+ }
+ }
+}
+
+p.subtitle {
+ margin-top: 0.25em;
+ margin-bottom: 0.5em;
+}
+
+// downlit links
+code a:any-link {
+ color: inherit;
+ text-decoration-color: $gray-600;
+}
+
+// This is a sentinel value that renderers can use to determine
+// whether the theme is dark or light
+@if (quarto-color.blackness($body-bg) > $code-block-theme-dark-threshhold) {
+ /*! dark */
+} @else {
+ /*! light */
+}
+
+// observable UI element tweaks to support light-mode vs dark-mode
+div.observablehq table thead tr th {
+ background-color: var(--bs-body-bg);
+}
+
+input,
+button,
+select,
+optgroup,
+textarea {
+ background-color: var(--bs-body-bg);
+}
+
+// Code Annotation
+
+.code-annotated .code-copy-button {
+ margin-right: 1.25em;
+ margin-top: 0;
+ padding-bottom: 0;
+ padding-top: 3px;
+}
+
+.code-annotation-gutter-bg {
+ background-color: $body-bg;
+}
+
+.code-annotation-gutter {
+ background-color: $code-block-bg-color;
+}
+
+.code-annotation-gutter,
+.code-annotation-gutter-bg {
+ height: 100%;
+ width: calc(20px + 0.5em);
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+dl.code-annotation-container-grid {
+ dt {
+ margin-right: 1em;
+ margin-top: 0.25rem;
+ }
+}
+
+dl.code-annotation-container-grid {
+ dt {
+ font-family: $font-family-code;
+ color: theme-dim($body-color, 10%);
+ border: solid theme-dim($body-color, 10%) 1px;
+ border-radius: 50%;
+ height: 22px;
+ width: 22px;
+ line-height: 22px;
+ font-size: 11px;
+
+ text-align: center;
+ vertical-align: middle;
+
+ text-decoration: none;
+ }
+
+ dt[data-target-cell] {
+ cursor: pointer;
+ }
+
+ dt[data-target-cell].code-annotation-active {
+ color: $body-bg;
+ border: solid #aaaaaa 1px;
+ background-color: #aaaaaa;
+ }
+}
+
+pre.code-annotation-code {
+ padding-top: 0;
+ padding-bottom: 0;
+ code {
+ z-index: 3;
+ }
+}
+
+#code-annotation-line-highlight-gutter {
+ width: 100%;
+ border-top: solid $code-annotation-higlight-color 1px;
+ border-bottom: solid $code-annotation-higlight-color 1px;
+ z-index: 2;
+ background-color: $code-annotation-higlight-bg;
+}
+
+#code-annotation-line-highlight {
+ margin-left: -4em;
+ width: calc(100% + 4em);
+ border-top: solid $code-annotation-higlight-color 1px;
+ border-bottom: solid $code-annotation-higlight-color 1px;
+ z-index: 2;
+ background-color: $code-annotation-higlight-bg;
+}
+
+code.sourceCode .code-annotation-anchor.code-annotation-active {
+ background-color: var(--quarto-hl-normal-color, #aaaaaa);
+ border: solid var(--quarto-hl-normal-color, #aaaaaa) 1px;
+ color: rgb(
+ red($code-block-bg-color),
+ green($code-block-bg-color),
+ blue($code-block-bg-color)
+ );
+ font-weight: bolder;
+}
+
+code.sourceCode .code-annotation-anchor {
+ font-family: $font-family-code;
+ color: var(--quarto-hl-co-color);
+ border: solid var(--quarto-hl-co-color) 1px;
+ border-radius: 50%;
+ height: 18px;
+ width: 18px;
+ font-size: 9px;
+ margin-top: 2px;
+}
+
+code.sourceCode button.code-annotation-anchor {
+ padding: 2px;
+ user-select: none;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ -o-user-select: none;
+}
+
+code.sourceCode a.code-annotation-anchor {
+ line-height: 18px;
+ text-align: center;
+ vertical-align: middle;
+ cursor: default;
+ text-decoration: none;
+}
+
+// change .column-screen-* to behave like .column-page (which hugs the body margins)
+// cf https://github.com/quarto-dev/quarto-cli/issues/1824#issuecomment-1216018434
+@media print {
+ .page-columns .column-screen-inset {
+ grid-column: page-start-inset / page-end-inset;
+ z-index: $zindex-pagelayout;
+ opacity: 0.999;
+ @include column-spanning-element();
+ }
+
+ .page-columns .column-screen-inset-left {
+ grid-column: page-start-inset / body-content-end;
+ z-index: $zindex-pagelayout;
+ opacity: 0.999;
+ @include column-spanning-element();
+ }
+
+ .page-columns .column-screen-inset-right {
+ grid-column: body-content-start / page-end-inset;
+ z-index: $zindex-pagelayout;
+ opacity: 0.999;
+ @include column-spanning-element();
+ }
+
+ .page-columns .column-screen {
+ grid-column: page-start / page-end;
+ z-index: $zindex-pagelayout;
+ opacity: 0.999;
+ @include column-spanning-element();
+ }
+
+ .page-columns .column-screen-left {
+ grid-column: page-start / body-content-end;
+ z-index: $zindex-pagelayout;
+ opacity: 0.999;
+ @include column-spanning-element();
+ }
+
+ .page-columns .column-screen-right {
+ grid-column: body-content-start / page-end;
+ z-index: $zindex-pagelayout;
+ opacity: 0.999;
+ @include column-spanning-element();
+ }
+
+ .page-columns .column-screen-inset-shaded {
+ grid-column: page-start-inset / page-end-inset;
+ padding: 1em;
+ background: $light;
+ z-index: $zindex-pagelayout;
+ opacity: 0.999;
+ margin-bottom: 1em;
+ }
+}
+
+.quarto-video {
+ margin-bottom: 1em;
+}
+
+.table {
+ // Tables get a light top and bottom border (whether or not they have a head
+ // and independent of caption position)
+ border-top: $table-border-width solid $table-group-separator-color-lighter;
+ border-bottom: $table-border-width solid $table-group-separator-color-lighter;
+
+ // The heading gets a heavier line to differentiate it
+ > thead {
+ border-top-width: 0;
+ border-bottom: 1px solid $table-group-separator-color;
+ }
+
+ // Allow breaking inside tables
+ a {
+ word-break: break-word;
+ }
+
+ // This disables new styling taken from boostrap that overrides
+ // table level styling
+ // See https://github.com/quarto-dev/quarto-cli/issues/7566
+ > :not(caption) > * > * {
+ background-color: unset;
+ color: unset;
+ }
+}
+
+// Special Cross Talk Handling
+#quarto-document-content {
+ .crosstalk-input .checkbox input[type="checkbox"],
+ .crosstalk-input .checkbox-inline input[type="checkbox"] {
+ position: unset;
+ margin-top: unset;
+ margin-left: unset;
+ }
+
+ .row {
+ margin-left: unset;
+ margin-right: unset;
+ }
+}
+
+.quarto-xref {
+ white-space: nowrap;
+}
+
+#quarto-draft-alert {
+ margin-top: 0px;
+ margin-bottom: 0px;
+ padding: 0.3em;
+ text-align: center;
+ font-size: 0.9em;
+
+ i {
+ margin-right: 0.3em;
+ }
+}
+
+#quarto-back-to-top {
+ z-index: 1000;
+}
+
+// override _reboot.scss
+
+// code blocks
+pre {
+ font-family: $font-family-monospace-block;
+ // I'm really not confident that this is correct
+ @include font-size($code-block-font-size);
+ font-weight: $font-weight-monospace-block;
+
+ // adding these inherit overrides here
+ // is what `_reboot.scss` does.
+ // we mirror it here for consistency
+ //
+ // Account for some code outputs that place code tags in pre tags
+ code {
+ font-family: inherit;
+ @include font-size(inherit);
+ font-weight: inherit;
+ }
+}
+
+// code inlines
+code {
+ font-family: $font-family-monospace-inline;
+ @include font-size($code-inline-font-size);
+ font-weight: $font-weight-monospace-inline;
+}
+
+// link styling
+a {
+ background-color: $link-color-bg;
+ font-weight: $link-weight;
+ text-decoration: $link-decoration;
+}
+
+
+ $font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default;
+ /*! quarto-variables-start */
+ :root {
+ --quarto-font-monospace: #{inspect($font-family-monospace)};
+ }
+ /*! quarto-variables-end */
+
+a.external:after {
+ content: "";
+ @if variable-exists(link-color) {
+ background-image: url('data:image/svg+xml,');
+ } @else {
+ background-image: url('data:image/svg+xml,');
+ }
+ background-size: contain;
+ background-repeat: no-repeat;
+ background-position: center center;
+ margin-left: 0.2em;
+ padding-right: 0.75em;
+}
+
+div.sourceCode code a.external:after {
+ content: none;
+}
+
+a.external:after:hover {
+ cursor: pointer;
+}
+
+.quarto-ext-icon {
+ display: inline-block;
+ font-size: 0.75em;
+ padding-left: 0.3em;
+}
+
+.code-with-filename .code-with-filename-file {
+ margin-bottom: 0;
+ padding-bottom: 2px;
+ padding-top: 2px;
+ padding-left: 0.7em;
+ border: var(--quarto-border-width) solid var(--quarto-border-color);
+ border-radius: var(--quarto-border-radius);
+ border-bottom: 0;
+ border-bottom-left-radius: 0%;
+ border-bottom-right-radius: 0%;
+}
+
+.code-with-filename div.sourceCode,
+.reveal .code-with-filename div.sourceCode {
+ margin-top: 0;
+ border-top-left-radius: 0%;
+ border-top-right-radius: 0%;
+}
+
+.code-with-filename .code-with-filename-file pre {
+ margin-bottom: 0;
+}
+
+.code-with-filename .code-with-filename-file {
+ background-color: rgba(219, 219, 219, 0.8);
+}
+
+.quarto-dark .code-with-filename .code-with-filename-file {
+ background-color: #555;
+}
+
+.code-with-filename .code-with-filename-file strong {
+ font-weight: 400;
+}
+
+
+// quarto-scss-analysis-annotation { "origin": "'rules' section from user-defined SCSS" }
+
+
+/* Title Banner */
+.quarto-title-banner {
+ margin-bottom: 1em;
+
+ color: bannerColor();
+ background: bannerBg();
+ @if $title-banner-image {
+ background-image: $title-banner-image;
+ background-size: cover;
+ }
+ a {
+ color: bannerColor();
+ }
+
+ h1,
+ h2 {
+ color: bannerColor();
+ }
+
+ .code-tools-button {
+ color: bannerDim();
+ }
+ .code-tools-button:hover {
+ color: bannerColor();
+ }
+
+ .code-tools-button > .bi::before {
+ background-image: url('data:image/svg+xml,');
+ }
+
+ .code-tools-button:hover > .bi::before {
+ background-image: url('data:image/svg+xml,');
+ }
+
+ .quarto-title .title {
+ font-weight: 600;
+ }
+
+ .quarto-categories {
+ margin-top: 0.75em;
+ }
+
+ @include media-breakpoint-up(lg) {
+ padding-top: 2.5em;
+ padding-bottom: 2.5em;
+ }
+
+ @include media-breakpoint-down(lg) {
+ padding-top: 1em;
+ padding-bottom: 1em;
+ }
+}
+@include media-breakpoint-down(md) {
+ body.hypothesis-enabled {
+ #title-block-header > * {
+ padding-right: 20px;
+ }
+ }
+}
+
+main.quarto-banner-title-block > section:first-child > h2,
+main.quarto-banner-title-block > section:first-child > h3,
+main.quarto-banner-title-block > section:first-child > h4 {
+ margin-top: 0;
+}
+
+.quarto-title {
+ .quarto-categories {
+ display: flex;
+ flex-wrap: wrap;
+ row-gap: 0.5em;
+ column-gap: 0.4em;
+ padding-bottom: 0.5em;
+ margin-top: 0.75em;
+
+ .quarto-category {
+ padding: 0.25em 0.75em;
+ font-size: 0.65em;
+ text-transform: uppercase;
+ border: solid 1px;
+ border-radius: $border-radius;
+ opacity: 0.6;
+
+ a {
+ color: inherit;
+ }
+ }
+ }
+}
+
+/* Manuscript customization */
+.quarto-title-meta-container {
+ display: grid;
+ grid-template-columns: 1fr auto;
+}
+
+.quarto-title-meta-column-end {
+ display: flex;
+ flex-direction: column;
+ padding-left: 1em;
+}
+
+.quarto-title-meta-column-end a .bi {
+ margin-right: 0.3em;
+}
+
+/* Title Default */
+#title-block-header.quarto-title-block.default {
+ .quarto-title-meta {
+ display: grid;
+ // See https://github.com/quarto-dev/quarto-cli/issues/9539
+ grid-template-columns: repeat(2, 1fr);
+ grid-column-gap: 1em;
+ }
+
+ .quarto-title {
+ .title {
+ margin-bottom: 0;
+ }
+ }
+
+ .quarto-title-author-orcid {
+ img {
+ margin-top: -0.2em;
+ height: 0.8em;
+ width: 0.8em;
+ }
+ }
+
+ .quarto-title-author-email {
+ opacity: 0.7;
+ }
+
+ .quarto-description {
+ p:last-of-type {
+ margin-bottom: 0;
+ }
+ }
+
+ .quarto-title-meta-contents p,
+ .quarto-title-authors p,
+ .quarto-title-affiliations p {
+ margin-bottom: 0.1em;
+ }
+
+ .quarto-title-meta-heading {
+ text-transform: uppercase;
+ margin-top: 1em;
+ font-size: 0.8em;
+ opacity: 0.8;
+ font-weight: 400;
+ }
+
+ .quarto-title-meta-contents {
+ font-size: 0.9em;
+ p.affiliation:last-of-type {
+ margin-bottom: 0.1em;
+ }
+ }
+
+ p.affiliation {
+ margin-bottom: 0.1em;
+ }
+
+ .keywords,
+ .description,
+ .abstract {
+ margin-top: 0;
+
+ & > p {
+ font-size: 0.9em;
+ }
+ & > p:last-of-type {
+ margin-bottom: 0;
+ }
+
+ .block-title {
+ margin-top: 1em;
+ text-transform: uppercase;
+ font-size: 0.8em;
+ opacity: 0.8;
+ font-weight: 400;
+ }
+ }
+
+ .quarto-title-meta-author {
+ display: grid;
+ grid-template-columns: minmax(max-content, 1fr) 1fr;
+ grid-column-gap: 1em;
+ }
+}
+
+.quarto-title-tools-only {
+ display: flex;
+ justify-content: right;
+}
+
+
+
+// Variables
+
+$web-font-path: "https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&display=swap" !default;
+@if $web-font-path {
+ @import url($web-font-path);
+}
+
+// Buttons
+
+.btn {
+ @each $color, $value in $theme-colors {
+ &-#{$color} {
+ @if $enable-gradients {
+ background: $value linear-gradient(180deg, mix($white, $value, 15%), $value) repeat-x;
+ } @else {
+ background-color: $value;
+ }
+ }
+ }
+}
+
+// Typography
+
+.dropdown-menu {
+ font-size: $font-size-sm;
+}
+
+.dropdown-header {
+ font-size: $font-size-sm;
+}
+
+.blockquote-footer {
+ color: $body-color;
+}
+
+// Tables
+
+.table {
+ font-size: $font-size-sm;
+
+ .thead-dark th {
+ color: $white;
+ }
+
+ a:not(.btn) {
+ color: $white;
+ text-decoration: underline;
+ }
+
+ .dropdown-menu a {
+ text-decoration: none;
+ }
+
+ .text-muted {
+ color: $text-muted;
+ }
+}
+
+// Forms
+
+label,
+.radio label,
+.checkbox label,
+.help-block {
+ font-size: $font-size-sm;
+}
+
+.form-floating {
+ > label,
+ > .form-control:focus ~ label,
+ > .form-control:not(:placeholder-shown) ~ label {
+ color: $input-placeholder-color;
+ }
+}
+
+// Navs
+
+.nav-tabs,
+.nav-pills {
+ .nav-link,
+ .nav-link:hover {
+ color: $body-color;
+ }
+
+ .nav-link.disabled {
+ color: $nav-link-disabled-color;
+ }
+}
+
+.page-link:hover,
+.page-link:focus {
+ color: $white;
+ text-decoration: none;
+}
+
+// Indicators
+
+.alert {
+ color: $white;
+ border: none;
+
+ a,
+ .alert-link {
+ color: $white;
+ text-decoration: underline;
+ }
+
+ @each $color, $value in $theme-colors {
+ &-#{$color} {
+ @if $enable-gradients {
+ background: $value linear-gradient(180deg, mix($white, $value, 15%), $value) repeat-x;
+ } @else {
+ background-color: $value;
+ }
+ }
+ }
+}
+
+.badge {
+ &-warning,
+ &-info {
+ color: $white;
+ }
+}
+
+.tooltip {
+ --bs-tooltip-bg: var(--bs-tertiary-bg);
+ --bs-tooltip-color: var(--bs-emphasis-color);
+}
+
+// Popovers
+
+.popover-header {
+ border-top-left-radius: 0;
+ border-top-right-radius: 0;
+}
+
+// Containers
+
+.modal {
+ &-header,
+ &-footer {
+ background-color: $table-hover-bg;
+ }
+}
+
+
+// quarto-scss-analysis-annotation { "origin": null }
+
+
+/* TODO: Provide custom CSS rules */
+
+main p, main li {
+ text-align: left;
+ hyphens: auto;
+ -webkit-hyphens: auto;
+ font-kerning: auto;
+}
+.verso, .exemplo
+{
+ display: block;
+ margin: 15px auto;
+ width: 300px;
+}
+
+#como-citar-bibtex, #como-citar-atribuicao {
+
+ border: 1px solid #dedede;
+ border-radius: 2px;
+ padding: 10px;
+ margin-bottom: 1rem;
+
+}
+
+#como-citar-atribuicao p {
+ text-indent: -20px;
+ margin-left: 20px;
+}
+
+#como-citar p {
+ margin-bottom: 5px;
+}
+
+.verso {
+ text-indent: -15px;
+}
+
+main li {
+ margin-bottom: 15px;
+}
+
+h1{
+ margin-bottom: 18px !important;
+ text-align: center;
+}
+
+h2#toc-title {
+ box-shadow:none;
+}
+
+h1, h2 {
+
+ margin-top: 50px;
+
+}
+
+#TOC .small_h2{
+ font-size: inherit;
+}
+
+
+ #TOC a {
+ word-break: normal;
+ }
+
+.subtitle {
+ text-align: center;
+}
+
+div.autores{
+ margin-bottom: 30px;
+ margin-top: -15px;
+ font-size: 0.8em;
+ }
+
+div.autores p {
+ text-align: right;
+}
+
+#direitos-autorais p {
+ text-align: center;
+}
+
+blockquote{
+ text-align: left;
+ hyphens: auto;
+ font-kerning: auto;
+ margin-top: 30px;
+}
+
+ blockquote+p span div {
+ text-align: left;
+ font-weight: normal;
+ font-size: unset;
+ }
+ .references div{
+ text-indent: -20px;
+ margin-left: 20px;
+ text-align: justify;
+ }
+
+ .citation div {
+ text-align: justify;
+ }
+
+
+.figure-caption {
+ text-align: center;
+}
+
+.contador-figura{
+ font-weight: bold;
+ font-variant: small-caps;
+}
+
+mjx-container {
+ overflow-x: auto;
+ overflow-y: hidden;
+}
+
+
+
+
+
+ @media (max-width: 991.98px){
+ body .page-columns, body.fullcontent:not(.floating):not(.docked) .page-columns, body.slimcontent:not(.floating):not(.docked) .page-columns, body.docked .page-columns, body.docked.slimcontent .page-columns, body.docked.fullcontent .page-columns, body.floating .page-columns, body.floating.slimcontent .page-columns, body.floating.fullcontent .page-columns {
+ display: grid;
+ gap: 0;
+ grid-template-columns: [screen-start] 1.5em [screen-start-inset page-start page-start-inset body-start-outset body-start body-content-start] minmax(0px, 1fr) [body-content-end body-end body-end-outset page-end-inset page-end screen-end-inset] 1.5em [screen-end];
+ }
+
+ #quarto-margin-sidebar {
+ display: none;
+ }
+
+ #quarto-content {
+ max-width: 768px;
+ margin: auto;
+
+}
+ }
+
+main p, main li {
+ text-align: justify;
+ hyphens: auto;
+ font-kerning: auto;
+}
+
+main li {
+ margin-bottom: 15px;
+}
+
+h1{
+ margin-bottom: 18px !important;
+ text-align: center;
+}
+
+h2 {
+ box-shadow: inset 0 -.4em 0 #00C0FF;
+ display: table;
+ padding-bottom: 0.1em;
+}
+
+h2#toc-title {
+ box-shadow:none;
+}
+
+#TOC .small_h2{
+ font-size: inherit;
+}
+
+h3 {
+ text-align: left;
+ text-decoration: underline;
+ font-weight: bold;
+ font-variant: small-caps;
+}
+
+h4 {
+ text-align: center;
+ color: #999;
+ font-weight: bold;
+ font-variant: small-caps;
+}
+
+ #TOC a {
+ word-break: normal;
+ }
+
+.subtitle {
+ text-align: center;
+}
+
+div.autores{
+ margin-bottom: 30px;
+ margin-top: -15px;
+ font-size: 0.8em;
+ }
+
+div.autores p {
+ text-align: right;
+}
+
+blockquote{
+ text-align: justify;
+ hyphens: auto;
+ font-kerning: auto;
+ margin-top: 30px;
+}
+
+ blockquote+p span div {
+ text-align: left;
+ font-weight: normal;
+ font-size: unset;
+ }
+ .references div{
+ text-indent: -20px;
+ margin-left: 20px;
+ text-align: justify;
+ }
+
+ .citation div {
+ text-align: justify;
+ }
+ .assinatura{
+ width: 100%;
+ text-align: right;
+ }
+
+ .assinatura div{
+ margin-bottom: 0;
+ max-width: 280px;
+ text-align: center;
+ display: inline-block;
+ font-size: 0.95rem;
+ }
+
+ .assinatura div p:first-child {
+ margin-bottom: 0;
+ }
+
+ .assinatura div p {
+ text-align: center;
+ }
+
+
+.figure-caption {
+ text-align: center;
+}
+
+.contador-figura{
+ font-weight: bold;
+ font-variant: small-caps;
+}
+
+p:has(.btn_book){
+ text-align: center;
+ padding: 15px 3px;
+ box-sizing: border-box;
+}
+
+.btn_book{
+ padding: 7px 15px;
+ background-color: #00C0FF;
+ text-align: center;
+ cursor: pointer;
+ text-decoration: none;
+ color: #fff;
+ font-weight: bold;
+ border-radius: 5px;
+}
+
+.btn_book:hover{
+ background-color: #4ad0fd;
+ color: #fff;
+}
+
+mjx-container {
+ overflow-x: auto;
+}
+
+td mjx-container {
+ max-width: 350px;
+}
+
+@media (max-width:1305px){
+
+
+ td mjx-container {
+ max-width: 300px;
+ }
+
+
+}
+
+@media (max-width:1290px){
+
+
+ td mjx-container {
+ max-width: 270px;
+ }
+
+
+}
+
+@media (max-width:1260px){
+
+
+ td mjx-container {
+ max-width: 220px;
+ }
+
+
+}
+
+@media (max-width:1170px){
+
+
+ td mjx-container {
+ max-width: 180px;
+ }
+
+
+}
+
+@media (max-width:745px){
+
+
+ td mjx-container {
+ max-width: 200px;
+ }
+
+
+}
+
+@media (max-width:615px){
+
+
+ td mjx-container {
+ max-width: 120px;
+ }
+
+
+}
+
+
+
+ @media (max-width: 991.98px){
+ body .page-columns, body.fullcontent:not(.floating):not(.docked) .page-columns, body.slimcontent:not(.floating):not(.docked) .page-columns, body.docked .page-columns, body.docked.slimcontent .page-columns, body.docked.fullcontent .page-columns, body.floating .page-columns, body.floating.slimcontent .page-columns, body.floating.fullcontent .page-columns {
+ display: grid;
+ gap: 0;
+ grid-template-columns: [screen-start] 1.5em [screen-start-inset page-start page-start-inset body-start-outset body-start body-content-start] minmax(0px, 1fr) [body-content-end body-end body-end-outset page-end-inset page-end screen-end-inset] 1.5em [screen-end];
+ }
+
+ #quarto-margin-sidebar {
+ display: none;
+ }
+
+ #quarto-content {
+ max-width: 768px;
+ margin: auto;
+
+}
+ }
+
+
+ .bloco-imagem div {
+ margin-bottom: 0px;
+ }
+
+ .bloco-imagem p {
+ text-align: center;
+ }
+
+ .figure p {
+ margin-bottom: 0px;
+ }
+
+ .small_h2 {
+ font-size: 1.5rem;
+}
+
+:root {
+ --cinza_claro: #C4C4C4;
+ --cinza_extra_claro: #EBEBEB;
+ --cinza_extra_extra_claro: #F7F7F7;
+}
+
+#tbl-algebrica tr td:nth-child(2) {
+ background-color: #4ad0fd;
+}
+
+#tbl-algebrica thead {
+ background-color: #dddddd;
+}
+
+#tbl-quadro1 {
+ border-collapse: collapse;
+ text-align: left;
+ margin-bottom: 10px;
+}
+
+#tbl-quadro4, #tbl-quadro5, #tbl-quadro7{
+ border-collapse: collapse;
+}
+
+#tbl-quadro4 th, #tbl-quadro5 th, #tbl-quadro7 th, #tbl-quadro4 td, #tbl-quadro5 td, #tbl-quadro7 td {
+ border: 1px solid #aaa;
+}
+
+#tbl-quadro1 p {
+ text-align: left;
+}
+
+#tbl-quadro1 #tbl-quadro1 th, #tbl-quadro1 thead {
+ background-color: var(--cinza_claro);
+ text-align: center;
+ vertical-align: middle;
+}
+
+#tbl-quadro1 tr td:first-child {
+ text-align: center;
+}
+
+#tbl-quadro1 tr td:only-child {
+ text-align: left;
+}
+
+#tbl-quadro1 td, #tbl-quadro1 th {
+ border: 1px solid #aaa;
+}
+
+#tbl-quadro1 + p {
+ text-align: center;
+ margin-bottom: 1.5rem;
+}
+
+.quadro2 td {
+ text-align: center !important;
+}
+
+.config1 {
+ background-color: var(--cinza_claro);
+}
+
+.config1 td {
+ text-align: center;
+ vertical-align: middle;
+}
+
+.config2 {
+ background-color: var(--cinza_extra_claro);
+ text-align: justify;
+ vertical-align: middle;
+}
+
+.config3 {
+ background-color: var(--cinza_extra_extra_claro);
+ text-align: center;
+ vertical-align: middle;
+}
+
+.tab {
+ vertical-align: middle;
+ margin-bottom: 50px;
+}
+
+.tab img {
+ min-width: 30px;
+ max-height: 70px;
+ height: auto;
+}
+
+.tab td {
+ height: 85px;
+}
+
+.nobreak a{
+ word-break: keep-all;
+}
+
+.break a {
+ word-break: break-all;
+}
+
+#referências a, .tippy-content a {
+ word-break: break-all;
+}
+
+@media (max-width:445px){
+ .grid{display: block;}
+}
+
+
+
+// quarto-scss-analysis-annotation { "origin": null }
\ No newline at end of file
diff --git a/_variables.yml b/_variables.yml
new file mode 100755
index 0000000..4f4f616
--- /dev/null
+++ b/_variables.yml
@@ -0,0 +1,3 @@
+e-mail: "[editora@livro.online](mailto:editora@livro.online)"
+
+whatsapp: "[+55 (45) 9 3505-0721](https://api.whatsapp.com/send?phone=5545935050721)"
\ No newline at end of file
diff --git a/apresentacao.qmd b/apresentacao.qmd
new file mode 100755
index 0000000..b34f442
--- /dev/null
+++ b/apresentacao.qmd
@@ -0,0 +1,68 @@
+# Apresentação {.unnumbered}
+
+O livro, ora apresentado, reúne parte das atividades
+desenvolvidas^[1](#footnote-2){#footnote-ref-2}^ no Programa
+Institucional de Bolsas de Iniciação à Docência (Pibid) --- na
+Universidade Estadual do Oeste do Paraná (Unioeste) --- pelos
+acadêmicos, professoras supervisoras e professora coordenadora e
+colaboradores de área dos cursos de Licenciatura em Matemática dos
+*campi* de Cascavel e Foz do Iguaçu, todos eles atuantes no subprojeto
+Interdisciplinar Matemática/Química.
+
+É importante destacar que a atuação desse grupo de integrantes do Pibid
+ocorreu entre outubro de 2020 a março de 2022. No ano de 2020, a
+pandemia da COVID-19 afetou, sobremaneira, os países e, no Brasil, a
+situação não foi diferente. Assim, para a ocorrência das ações propostas
+no Pibid, diversas adaptações foram necessárias, inclusive pela
+impossibilidade da ida presencial às escolas da Educação Básica e à
+própria Unioeste, que manteve as atividades de ensino, de forma remota,
+síncrona e assíncrona, com a utilização das plataformas digitais de
+ensino.
+
+Em ambos os cursos supracitados, semanalmente, foram realizadas
+reuniões, por meio das plataformas *Google Meet* e *Microsoft Teams*,
+entre os coordenadores de área do subprojeto, as professoras
+supervisoras (no caso, duas professores de Matemática) das escolas da
+Educação Básica e vinte acadêmicos dos cursos de Licenciatura em
+Matemática: 16 bolsistas e 4 voluntários. Embora parte das ações
+desenvolvidas no referido subprojeto tenham sido realizadas
+conjuntamente, as atividades elaboradas e apresentadas no presente livro
+estão divididas por grupo, a saber: a) Parte 1, referente ao material
+proposto pelo grupo do curso de Licenciatura em Matemática do *campus*
+de Cascavel e; b) Parte 2, referente ao material proposto pelo grupo do
+curso de Licenciatura em Matemática do *campus* de Foz do Iguaçu.
+
+A Parte 1 está composta por 4 propostas didáticas para o ensino de
+Matemática, versando sobre os conceitos de números inteiros, equação,
+linguagem algébrica e trigonometria. Há que se destacar que os
+participantes (coordenadoras de área, professora supervisora e
+acadêmicos) dividiram-se em 4 subgrupos para a elaboração de cada
+proposta didática.
+
+Já a Parte 2 é composta por 3 propostas de jogos, nos formatos
+presencial e *on-line*, visando o ensino do conceito de fração para o
+nono ano do Ensino Fundamental. Embora também subdivididos em 3
+subgrupos para a elaboração inicial de cada jogo, a finalização deles se
+deu colaborativamente. Isso ocorreu tendo em vista desenvolver as ações
+a partir da metodologia da *Lesson Study* e que tem como uma de suas
+principais características o trabalho colaborativo.
+
+Destacamos que as propostas didáticas criadas e/ou recriadas pelos
+grupos têm como objetivo propor ao professor da Educação Básica
+possibilidades de se trabalhar a Matemática de forma dinâmica e
+criativa. No entanto, cabe ao professor verificar as possibilidades que
+melhor atenda seu objetivo e, caso necessário, realizar as adaptações
+necessárias.
+
+Coordenadora e colaboradores de área do subprojeto de Matemática
+Cascavel e Foz do Iguaçu do Pibid/Unioeste
+
+## Notas
+
+1. ::: {#footnote-2}
+ Com a finalidade de manter o acesso aos jogos *online*, a Editora
+ Moan refez os jogos, mantendo a maior parte das diretrizes propostas
+ pelos autores, pois os jogos estavam em plataformas que a editora
+ não tem controle e, assim, não poderia garantir o acesso.
+ [↑](#footnote-ref-2)
+ :::
\ No newline at end of file
diff --git a/atividades-ludicas-para-o-ensino-da-linguagem-algebrica.qmd b/atividades-ludicas-para-o-ensino-da-linguagem-algebrica.qmd
new file mode 100755
index 0000000..3914a68
--- /dev/null
+++ b/atividades-ludicas-para-o-ensino-da-linguagem-algebrica.qmd
@@ -0,0 +1,572 @@
+---
+format:
+ moan-livro-html:
+ css: css/jogovel.css
+
+include-after-body:
+ text: |
+
+
+
+
+---
+
+# Atividades lúdicas
para o ensino da
linguagem algébrica
+
+::: autores
+Eliza Bruna Dalla Corte Andreolla^[1](#footnote-14){#footnote-ref-14}^
+Fernanda Guerra^[2](#footnote-15){#footnote-ref-15}^
+Thais de Souza^[3](#footnote-16){#footnote-ref-16}^
+Adriana Schawabe Reis Lepreda^[4](#footnote-17){#footnote-ref-17}^
+:::
+
+## Objetivo geral
+
+Propor atividades que auxiliem, principalmente professores do sétimo ano
+do Ensino Fundamental, no ensino e na aprendizagem da linguagem
+algébrica.
+
+## Introdução
+
+O ensino da linguagem algébrica tem sido um grande desafio a ser
+trabalhado no sétimo ano do Ensino Fundamental. E, como afirma Pereira
+[-@pereira_2017], esse assunto é muitas vezes apresentado aos estudantes de forma
+descontextualizada e por meio de exercícios de fixação mecânicos, o que
+causa barreiras e dificulta ainda mais o ensino e a aprendizagem desse
+conteúdo, contribuindo para a aversão à matemática. Com objetivo de
+auxiliar a apresentação desse tema de forma clara e dinâmica aos alunos
+do sétimo ano, este trabalho apresenta atividades que introduzem o uso
+da linguagem algébrica, de forma lúdica, buscando atingir o interesse
+dos alunos pelo assunto, favorecendo então, a aprendizagem de fato.
+
+## Atividade 1:
uso de cartões coloridos
+
+### Objetivo
+
+Introduzir a linguagem algébrica e as operações de adição e subtração de
+polinômios de forma pictórica.
+
+### Material
+
+- Papel cartão ou cartolina de duas cores diferentes;
+- Tesoura;
+- Caneta.
+
+### Preparação
+
+No papel cartão, desenhe e recorte em duas cores, grupos de figuras com,
+pelo menos, três formatos diferentes. O objetivo é que cada figura
+simbolize uma incógnita e as cores representem valores positivos e
+negativos.
+
+### Procedimento
+
+#### Primeira parte
+
+Exponha para os alunos certa quantidade de figuras de mesma cor, mas com
+formatos diferentes. Peça para que escrevam a quantidade de cada formato
+de figura observada. Repita o procedimento quantas vezes achar
+necessário. As Figuras [-@fig-31] e [-@fig-32] exemplificam duas situações possíveis. A
+resposta esperada para a situação representada pela Figura [-@fig-31] é 4
+estrelas e 4 corações. Para a situação representada pela Figura [-@fig-32] a
+resposta esperada é 3 losangos e 7 corações.
+
+:::: {.grid}
+
+::: {.g-col-6}
+{#fig-31 fig-alt="Corações e estrelas de cartolima ma cor
+verde." loading="lazy" style="width:230px; height: auto;"}
+:::
+
+::: {.g-col-6}
+{#fig-32 fig-alt="Corações e losangos de cartolina na cor
+verde." loading="lazy" style="width:230px; height: auto;"}
+:::
+
+::::
+
+Estimule os alunos a trocar os nomes das figuras (corações, losangos e
+estrelas) por uma notação mais "rápida" e simples, utilizando, por
+exemplo, a inicial da palavra de cada figura. Assim, as respostas para
+as situações representadas pelas Figuras [-@fig-31] e [-@fig-32] seriam, 4E e 4C, e 3L e
+7C, respectivamente.
+
+Após a substituição dos nomes das figuras por letras, é natural trocar o
+conectivo "e" pelo sinal de adição, já que em outras palavras, está
+havendo uma soma. Nas Figuras [-@fig-31] e [-@fig-32], temos, nessa ordem, 4 estrelas e 5
+corações e 3 losangos e 7 corações, que seriam denotados como 4E + 4C e
+3L + 7C, respectivamente. Nesse instante, é conveniente dizer aos
+estudantes que não é possível somar figuras diferentes, podendo usar
+como justificativa o fato de possuírem formatos diferentes. Portanto,
+usando esse mesmo raciocínio na nova notação, ressalta-se que não devem
+ser somadas ou subtraídas letras (incógnitas) diferentes.
+
+#### Segunda parte
+
+Nesse momento, a proposta é trabalhar com formatos de figuras em duas
+cores diferentes^[5](#footnote-18){#footnote-ref-18}^, uma cor
+representando valores positivos e outra cor representando valores
+negativos. Por exemplo, trabalhar com figuras na cor verde e na cor
+vermelha^[6](#footnote-19){#footnote-ref-19}^. As figuras de cor verde
+representarão valores positivos e carregarão o sinal +, as de cor
+vermelha representarão valores negativos e carregarão o sinal -.
+
+Nessa etapa da atividade, o objetivo é levar o aluno a compreender a
+adição algébrica. Antes de trabalhar com a linguagem matemática, porém,
+sugere-se mostrar aos alunos que, por exemplo, cada figura vermelha
+"anula" uma figura verde, desde que sejam de mesmo formato.
+Primeiramente, apresente grupos de figuras e deixe que os alunos
+"descubram o resultado" sozinhos. Deixe-os livres para registrar, ou
+não, a quantidade de figuras. Repita o processo até perceber que os
+alunos o compreenderam.
+
+Posteriormente, comece a utilizar a notação matemática. Apresente
+novamente aos alunos um ou mais grupos de figuras. Peça para anotarem as
+quantidades de cada figura, respeitando os valores positivos e
+negativos.
+
+:::: {.grid}
+
+::: {.g-col-6}
+{#fig-33 fig-alt="Corações e losangos de cartolina, sendo alguns na cor verde e outros
+na cor vermelha." loading="lazy"}
+:::
+
+::: {.g-col-6}
+{#fig-34 fig-alt="Corações e losangos de cartolina, sendo alguns na cor verde e outros
+na cor vermelha." loading="lazy"}
+:::
+
+::::
+
+Nas Figuras [-@fig-33] e [-@fig-34] são apresentados exemplos dessa situação. Na [@fig-33]
+há 5 corações verdes, 4 corações vermelhos, 1 losango verde e 3 losangos
+vermelhos. Usando pensamento análogo à primeira parte da atividade,
+denota-se a quantidade de figuras da seguinte maneira: (+5C) + (-4C) +
+(+1L) + (-3L). É natural que, nesse momento, os alunos encontrem um
+pouco de dificuldades com a representação matemática, por isso, é
+importante repetir o processo da notação e deixar claro o porquê do uso
+dos parênteses, para que isso não se torne um obstáculo futuramente.
+
+Após a representação da situação em linguagem algébrica, manuseando as
+figuras e relembrando a atividade anterior, na qual figuras iguais e de
+cores diferentes se anulam, deve ser mostrado aos alunos que duas
+figuras de mesmo formato, mesmo que de cores diferentes, podem e devem
+ser somadas. Dessa forma, realizando a soma, obtém-se em linguagem
+algébrica um total de 1C para os corações, já que + 5C + (- 4C) = 1C, e
+para os losangos -2L, pois + 1L + (- 3L) = - 2L. Os losangos e corações
+ainda pertencem ao mesmo grupo, então devemos somá-los, tem-se 1C + (-
+2L) = 1C -- 2L.
+
+Repetindo o mesmo processo com a [@fig-34] (4 corações positivos e 5
+corações negativos, 1 losango positivo e 3 losangos negativos), tem-se +
+4C + (- 5C) + 1L + (- 3L) = -1C -2L.
+
+#### Terceira parte
+
+A partir deste ponto, pode-se começar a estipular um "valor" para cada
+formato de figura, colocando uma certa quantidade de pontos em cada uma
+delas, como na @fig-35.
+
+{#fig-35 fig-alt="Losangos verdes de cartolina com quatro pontos
+dentro" loading="lazy"}
+
+Agora, não será mais contado apenas a quantidade de figuras existentes,
+e sim a quantidade de pontos que há nesse conjunto de figuras. Iniciando
+pela quantidade de losangos que aparece na @fig-35, tem-se 9 losangos
+ou 9L. Observe que 1 losango possui 4 pontos. Como são 9 losangos e em
+cada um há 4 pontos, é possível calcular a quantidade total de pontos do
+conjunto dessa figura, multiplicando a quantidade total de losangos pela
+quantidade de pontos que cada losango possui, logo 9 x 4 = 36, ou seja,
+juntando todos os losangos será obtido um total de 36 pontos.
+
+{#fig-36 fig-alt="Losangos e estrelas verdes de cartolina com pontos dentro. Os losangos têm um ponto e as estrelas, dois" loading="lazy"}
+
+Pode-se realizar o mesmo exercício com mais de um formato de figura. Na @fig-36, tem-se 4 estrelas e 4 losangos, ou seja, 4E + 4L. Observando a quantidade de pontos de cada figura (1 losango vale 2 pontos, 1 estrela,
+1 ponto, algebricamente: L = 2 e E = 1), pode-se calcular o valor total
+do conjunto:
+
+4E = 4 x 1 = 4 e 4L = 4 x 2 = 8
+
+4E + 4L = 4 + 8 = 12
+
+Portanto, 12 será a quantidade total de pontos na [@fig-36].
+
+A mesma atividade pode ser realizada utilizando valores negativos como,
+por exemplo, na [@fig-37]{.nobreak}:
+
+{#fig-37 fig-alt="Corações e losangos de cartolina com pontos dentro. Cada coração
+possui quatro pontos dentros, já os losangos, 3 pontos cada. Existem
+losangos verdes e também vermelhos, assim como, os corações também podem
+ser verde ou vermelhos." loading="lazy"}
+
+O processo de resolução é análogo ao anterior, envolvendo todas as
+discussões apresentadas no decorrer das três etapas da atividade.
+
+## Atividade 2:
jogo do alvo
+
+A atividade foi inspirada na proposta de Sirlei Miguel [-@miguel_2014] em seu
+caderno desenvolvido no Programa de Desenvolvimento Educacional (PDE),
+um programa promovido pela Secretaria de Estado da Educação do estado do
+Paraná.
+
+### Objetivo
+
+Trabalhar as operações de adição e subtração com os números inteiros.
+
+### Material
+
+- Cartolina branca;
+- Compasso;
+- Tinta ou lápis de cor;
+- Lápis de escrever ou caneta;
+- Feijão.
+
+### Preparação
+
+Para confeccionar o alvo, que será no formato circular, pegue uma
+cartolina branca e desenhe 5 circunferências concêntricas, sendo a maior
+com raio de 15 cm. Cada faixa formada pela delimitação das
+circunferências, ficará com 3 cm de largura. Pinte cada uma delas com
+cores distintas, a sua escolha^[7](#footnote-20){#footnote-ref-20}^.
+Usaremos, como exemplo, as cores: vermelho, rosa, amarelo, azul-claro e
+azul-escuro^[8](#footnote-21){#footnote-ref-21}^, como ilustrado na
+[@fig-38]{.nobreak}. Depois de pintado, recorte o alvo sobre a circunferência
+maior.
+
+{#fig-38 fig-alt="Círculo colorido com as cores variando da fronteira até o centro:
+vermelho, rosa, amarelo, azul claro e azul escuro. Não é um
+degradê." loading="lazy"}
+
+Para construir a borda lateral do alvo (que ficará como uma caixa
+circular), desenhe em uma cartolina branca um retângulo de 94 cm de
+comprimento e 4 cm de largura. Em uma das arestas menores, acrescente um
+retângulo de 4 cm por 2 cm (usado para colar uma aresta a outra) e, em
+uma das arestas maiores, acrescente um retângulo de 94 cm por 1 cm
+(usado para colar a borda no alvo), como no molde da [@fig-39]{.nobreak}. Cole a
+faixa lateral no alvo.
+
+{#fig-39 fig-alt="Molde com marcações de medidas e indicações de onde cortar e dobrar." loading="lazy"}
+
+Uma sugestão, para facilitar o processo da construção do alvo, é
+utilizar a tampa de uma embalagem de pizza. Ao final, ele deverá ficar
+como no exemplo, ilustrado na @fig-310.
+
+{#fig-310 fig-alt="Círculo colorido com as cores variando da fronteira até o centro:
+vermelho, rosa, amarelo, azul claro e azul escuro. Não é um
+degradê" loading="lazy"}
+
+### Como jogar
+
+Os jogadores ou a pessoa que estiver aplicando o jogo, deverão estipular
+um valor correspondente a cada faixa colorida, por exemplo, 5 pontos
+para cada feijão que cair sobre a faixa azul-escuro, 1 ponto para a
+azul-claro, 4 pontos na faixa amarela, 3 para a rosa e 2 pontos para a
+faixa vermelha. Cada jogador, na sua vez, joga no alvo 15 feijões. Em
+seguida, deve contar quantos feijões caíram em cada uma das faixas do
+alvo e registrar em uma tabela a quantidade de feijões e os pontos
+correspondentes. Os jogadores podem jogar quantas rodadas quiserem ou
+determinarem entre si, de modo que todos joguem a mesma quantidade,
+sempre fazendo as respectivas anotações.
+
+Para facilitar as anotações, é conveniente induzir os alunos para que
+escolham uma única letra ou símbolo para representar cada faixa. É
+importante que as anotações estejam organizadas de modo a auxiliar os
+cálculos ao final da brincadeira. Pode ser construído um quadro para tal
+finalidade.
+
+Por exemplo, se na primeira rodada um aluno acertar 2 feijões na faixa
+azul-escuro, 3 na faixa azul-claro, 5 na faixa amarela, 1 na faixa rosa
+e 4 na faixa vermelha, e usar E para azul-escuro, C para azul-claro, A
+para amarelo, R para rosa e V para vermelho, pode anotar da seguinte
+forma:
+
+| Rodada | Soma dos feijões |
+|:-------:|:------------------:|
+| Primeira | 2E + 3C + 5A + 1R + 4V|
+| Segunda | |
+| Terceira | |
+| Quarta | |
+| Quinta | |
+| Sexta | |
+| Sétima | |
+
+: Expressões de cada rodada {#tbl-expressoes}
+
+Ao final das rodadas, cada jogador calcula seu total de pontos. Vence
+quem tiver maior pontuação.
+
+:::{.callout-tip}
+Quando for conveniente, atribua valores negativos para algumas faixas,
+para introduzir a adição e a subtração com números inteiros.
+:::
+
+## Atividade 3:
jogo de memória
+
+Esse jogo foi baseado na proposta de Beatriz Rechia da Silva [-@silva_2012] em
+seu caderno desenvolvido no Programa de Desenvolvimento Educacional
+(PDE), um programa promovido pela Secretaria de Estado da Educação do
+estado do Paraná.
+
+### Objetivo
+
+Explorar e relacionar a linguagem algébrica com a linguagem corrente por
+meio de um jogo.
+
+### Material
+
+Dois grupos distintos de cartelas, variando a forma de apresentar as
+expressões algébricas. Em um grupo, as expressões devem ser escritas por
+extenso e, no outro, deve-se usar a linguagem algébrica:
+
+| Escrito por Extenso | Linguagem Algébrica |
+|:--------------------:|:--------------------:|
+| O dobro de um número | $2x$ |
+| A diferença entre dois números | $a - b$ |
+| Metade de um número | $x/2$ |
+| A diferença entre um número e 2 | $z - 2$ |
+| A soma de dois números diferentes | $g + y$ |
+| A quinta parte de um número | $x/5$ |
+| Um número mais 1 | $x + 1$ |
+| Um número mais ele mesmo | $x + x = 2x$ |
+| O triplo de um número | $3x$ |
+| Um número menos ele mesmo | $x - x = 0$ |
+| Um número somado com o dobro de outro número | $c + 2d$ |
+| Um número multiplicado por ele mesmo três vezes | $x \cdot x \cdot x= x^3$ |
+| A soma de três números consecutivos | $x + (x + 1) + (x + 2)$ |
+
+: Linguagem corrente e linguagem algébrica {#tbl-algebrica}
+
+Devido a pandemia da COVID-19, pensou-se em atividades que pudessem ser
+desenvolvidas de maneira remota, assim, foi desenvolvido uma versão
+*online* desse jogo. Ele encontra-se disponível em:
+
+[]{#jogo_memoria}
+
+### Acesso à atividade
+
+::: {.content-visible when-format="html"}
+[Acessar](https://puzzel.org/pt/memory/play?p=-MekRbcdmNkkpY9jp_7c){.btn_book target="blank"}
+:::
+
+::: {.content-visible when-format="pdf"}
+
+:::
+
+Caso não esteja disponível, acesse a adaptação feita pela editora com base nas informações e nas questões apresentadas nesta proposta didática:
+
+::: {.content-visible when-format="html"}
+
+```{=html}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Jogado da Memória
+
+
+
+
+
+
+
+ Jogo da Memória
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Para efetuar a compra de uma tv no valor de R$ 1420,00, José recebeu um desconto de R$ 426,00 no pagamento à vista. Qual a fração que representa a porcentagem de desconto?
+ Para efetuar a compra de uma tv no valor de R$ 1420,00, José recebeu um desconto de R$ 426,00 no pagamento à vista. Qual a fração que representa a porcentagem de desconto?
+ Para efetuar a compra de uma tv no valor de R$ 1420,00, José recebeu um desconto de R$ 426,00 no pagamento à vista. Qual a fração que representa a porcentagem de desconto?
+ Para efetuar a compra de uma tv no valor de R$ 1420,00, José recebeu um desconto de R$ 426,00 no pagamento à vista. Qual a fração que representa a porcentagem de desconto?
+ Para efetuar a compra de uma tv no valor de R$ 1420,00, José recebeu um desconto de R$ 426,00 no pagamento à vista. Qual a fração que representa a porcentagem de desconto?
+ Para efetuar a compra de uma tv no valor de R$ 1420,00, José recebeu um desconto de R$ 426,00 no pagamento à vista. Qual a fração que representa a porcentagem de desconto?
+ Para efetuar a compra de uma tv no valor de R$ 1420,00, José recebeu um desconto de R$ 426,00 no pagamento à vista. Qual a fração que representa a porcentagem de desconto?
+ Para efetuar a compra de uma tv no valor de R$ 1420,00, José recebeu um desconto de R$ 426,00 no pagamento à vista. Qual a fração que representa a porcentagem de desconto?
+ Para efetuar a compra de uma tv no valor de R$ 1420,00, José recebeu um desconto de R$ 426,00 no pagamento à vista. Qual a fração que representa a porcentagem de desconto?
+ Para efetuar a compra de uma tv no valor de R$ 1420,00, José recebeu um desconto de R$ 426,00 no pagamento à vista. Qual a fração que representa a porcentagem de desconto?
+ Para efetuar a compra de uma tv no valor de R$ 1420,00, José recebeu um desconto de R$ 426,00 no pagamento à vista. Qual a fração que representa a porcentagem de desconto?
+ Para efetuar a compra de uma tv no valor de R$ 1420,00, José recebeu um desconto de R$ 426,00 no pagamento à vista. Qual a fração que representa a porcentagem de desconto?
+ Para efetuar a compra de uma tv no valor de R$ 1420,00, José recebeu um desconto de R$ 426,00 no pagamento à vista. Qual a fração que representa a porcentagem de desconto?
+ Para efetuar a compra de uma tv no valor de R$ 1420,00, José recebeu um desconto de R$ 426,00 no pagamento à vista. Qual a fração que representa a porcentagem de desconto?
+ Para efetuar a compra de uma tv no valor de R$ 1420,00, José recebeu um desconto de R$ 426,00 no pagamento à vista. Qual a fração que representa a porcentagem de desconto?
+ Para efetuar a compra de uma tv no valor de R$ 1420,00, José recebeu um desconto de R$ 426,00 no pagamento à vista. Qual a fração que representa a porcentagem de desconto?
+ Para efetuar a compra de uma tv no valor de R$ 1420,00, José recebeu um desconto de R$ 426,00 no pagamento à vista. Qual a fração que representa a porcentagem de desconto?
+ Para efetuar a compra de uma tv no valor de R$ 1420,00, José recebeu um desconto de R$ 426,00 no pagamento à vista. Qual a fração que representa a porcentagem de desconto?
+ Para efetuar a compra de uma tv no valor de R$ 1420,00, José recebeu um desconto de R$ 426,00 no pagamento à vista. Qual a fração que representa a porcentagem de desconto?
+ Para efetuar a compra de uma tv no valor de R$ 1420,00, José recebeu um desconto de R$ 426,00 no pagamento à vista. Qual a fração que representa a porcentagem de desconto?
+ Para efetuar a compra de uma tv no valor de R$ 1420,00, José recebeu um desconto de R$ 426,00 no pagamento à vista. Qual a fração que representa a porcentagem de desconto?
+ Para efetuar a compra de uma tv no valor de R$ 1420,00, José recebeu um desconto de R$ 426,00 no pagamento à vista. Qual a fração que representa a porcentagem de desconto?
+ Para efetuar a compra de uma tv no valor de R$ 1420,00, José recebeu um desconto de R$ 426,00 no pagamento à vista. Qual a fração que representa a porcentagem de desconto?
+ Para efetuar a compra de uma tv no valor de R$ 1420,00, José recebeu um desconto de R$ 426,00 no pagamento à vista. Qual a fração que representa a porcentagem de desconto?
+ Para efetuar a compra de uma tv no valor de R$ 1420,00, José recebeu um desconto de R$ 426,00 no pagamento à vista. Qual a fração que representa a porcentagem de desconto?
+ Para efetuar a compra de uma tv no valor de R$ 1420,00, José recebeu um desconto de R$ 426,00 no pagamento à vista. Qual a fração que representa a porcentagem de desconto?
+
+
+
+
+
+
+
+```
+
+:::
+
+### Como jogar
+
+Divida a sala em grupos de 2 a 3 alunos; cada jogador, na sua vez,
+desvira dois cartões, um azul^[9](#footnote-22){#footnote-ref-22}^ e um
+branco. Se o cartão azul traduzir o que está escrito no cartão branco o
+jogador fica com os dois cartões. Se o cartão azul não traduzir o que
+está escrito no cartão branco, ambos devem ser virados, permanecendo nos
+mesmos lugares em que estavam antes, de forma similar a um jogo de
+memória.
+
+Ao terminar os cartões, cada jogador conta seus pontos de acordo com os
+números de cartões que acumulou.
+
+## Considerações finais
+
+A matemática possui particularidades na sua linguagem, sendo até mesmo
+considerada como uma disciplina alfabetizadora. A linguagem algébrica
+exige um acentuado grau de abstração por parte dos alunos que,
+comumente, apresentam dificuldades. É um conteúdo a ser trabalhado com
+os alunos de sétimo ano do Ensino Fundamental e que tem se apresentado
+como um grande desafio, pois muitas vezes é desenvolvido de forma
+descontextualizada e mecânica, criando nos alunos uma aversão pela
+matemática [@pereira_2017].
+
+Desenvolver o pensamento algébrico é algo que pode ser iniciado desde a
+Educação Infantil, para que, à medida que o aluno avance na
+escolarização, seu pensamento seja potencializado para desenvolver uma
+linguagem algébrica mais apropriada [@pereira_2017].
+
+Neste trabalho, apresentamos três sugestões de atividades que podem ser
+desenvolvidas em sala de aula. Os materiais podem ser confeccionados
+pelos próprios alunos. Por meio destes jogos é possível introduzir a
+linguagem algébrica, apresentar as operações de adição e subtração de
+polinômios, adição e subtração com os números inteiros e relacionar a
+linguagem algébrica com a linguagem corrente.
+
+É importante ressaltar que os jogos não devem ser utilizados como única
+forma de trabalhar a linguagem algébrica, mas são ótimos auxiliares para
+a apresentação ou mesmo a fixação dos conteúdos. Além disso, eles
+contribuem para aumentar o interesse dos alunos pelo conteúdo,
+favorecendo a aprendizagem.
+
+## Notas
+
+1. ::: {#footnote-14}
+ Acadêmica do curso de Matemática Unioeste/Cascavel. Bolsista do
+ Programa Institucional de Bolsas de Iniciação à Docência (Pibid).
+ E-mail:elizadcorte@outlook.com [↑](#footnote-ref-14)
+ :::
+
+2. ::: {#footnote-15}
+ Acadêmica do curso de Matemática Unioeste/Cascavel. Bolsista do
+ Programa Institucional de Bolsas de Iniciação à Docência (Pibid).
+ E-mail: nandaguerra_22@hotmail.com [↑](#footnote-ref-15)
+ :::
+
+3. ::: {#footnote-16}
+ Acadêmica do curso de Matemática Unioeste/Cascavel. Bolsista do
+ Programa Institucional de Bolsas de Iniciação à Docência (Pibid).
+ E-mail: thaissouza38@hotmail.com [↑](#footnote-ref-16)
+ :::
+
+4. ::: {#footnote-17}
+ Professora Supervisora do subprojeto Interdisciplinar
+ Matemática/Química, do Programa Institucional de Bolsas de Iniciação
+ à Docência (Pibid), da Unioeste. E-mail: adrilepreda@gmail.com
+ [↑](#footnote-ref-17)
+ :::
+
+5. ::: {#footnote-18}
+ Procure usar um aplicativo ou um site de simulação de cores para
+ daltônicos. A ideia é evitar que alguém não consiga distinguir uma
+ cor da outra. [↑](#footnote-ref-18)
+ :::
+
+6. ::: {#footnote-19}
+ Essas cores, nas tonalidades usadas, funcionam para daltônicos. Se o
+ leitor quiser alterá-las, lembre-se de usar *websites* ou *app* que
+ simulem os diferentes tipos de daltonismo, de forma a não usar cores
+ que não são distinguidas por daltônicos. [↑](#footnote-ref-19)
+ :::
+
+7. ::: {#footnote-20}
+ Procure usar um aplicativo ou um site de simulação de cores para
+ daltônicos. A ideia é evitar que alguém não consiga distinguir uma
+ cor da outra. [↑](#footnote-ref-20)
+ :::
+
+8. ::: {#footnote-21}
+ Essas cores, nas tonalidades usadas, funcionam para daltônicos. Se o
+ leitor quiser alterá-las, lembre-se de usar *websites* ou *app* que
+ simulem os diferentes tipos de daltonismo, de forma a não usar cores
+ que não são distinguidas por daltônicos. [↑](#footnote-ref-21)
+ :::
+
+9. ::: {#footnote-22}
+ Nesse nosso exemplo é azul, no entanto, a cor pode ser qualquer uma.
+ Mas lembre-se de usar simuladores para daltonismo, a fim de que a
+ escolha das cores não inviabilize o jogo para os daltônicos.
+ [↑](#footnote-ref-22)
+ :::
+
+## Referências
\ No newline at end of file
diff --git a/contextualizando-propostas-didaticas-_pibid-matematica-cascavel.qmd b/contextualizando-propostas-didaticas-_pibid-matematica-cascavel.qmd
new file mode 100755
index 0000000..a2465e9
--- /dev/null
+++ b/contextualizando-propostas-didaticas-_pibid-matematica-cascavel.qmd
@@ -0,0 +1,154 @@
+# Contextualizando as
propostas didáticas do
Pibid/Matemática/Cascavel {.unnumbered}
+
+::: autores
+Dulcyene Maria Ribeiro
+Arleni Elise Sella Langer
+Fabiana Magda Garcia Papani^[1](#footnote-3){#footnote-ref-3}^
+:::
+
+As propostas didáticas apresentadas nesta parte 1, são frutos das ações
+dos alunos de iniciação à docência, da professora supervisora e das
+professoras colaboradoras, vinculadas ao Programa Institucional de
+Bolsas de Iniciação à Docência (Pibid), do curso de Matemática, do
+*campus* de Cascavel, da Universidade Estadual do Oeste do Paraná
+(Unioeste). Embora divididas em quatro propostas assinadas por grupos
+distintos, são produções discutidas e elaboradas em conjunto nos
+encontros semanais, portanto é um trabalho colaborativo e compartilhado.
+
+Essas produções são dissertações a respeito de como materiais
+manipulativos ou jogos podem contribuir para o processo de
+ensino-aprendizagem de conteúdos matemáticos. A escolha por essa
+temática deve-se ao fato de concordarmos com diversos autores em suas
+sustentações de que a aprendizagem também se dá por meio dos órgãos dos
+sentidos, como argumentado por Dienes, por exemplo:
+
+> As impressões sensoriais que agem sobre nossos órgãos sensoriais
+> durante nossa existência são muito numerosas e variadas. Devemos
+> selecionar tais impressões de algum modo que possamos nos encontrar
+> nesse ambiente de fenômenos extremamente complexo [@dienes_logica_1974, p. 13].
+
+Também para Lorenzato:
+
+> A experiência tem mostrado que o Material Didático (MD) facilita a
+> aprendizagem, qualquer que seja o assunto, curso ou idade, o que
+> conflita com a crendice de que MD só deve ser utilizado com crianças [@lorenzato_o_2006, p. 30].
+
+Cabe destacar que embora seja consenso que o uso de materiais
+manipulativos contribua para a aprendizagem, corroboramos com Lorenzato,
+ao afirmar que:
+
+> \[\...\] o apelo ao tátil e visual deve manter-se forte, mas os
+> materiais devem visar mais diretamente à ampliação de conceitos, à
+> descoberta de propriedades, à percepção da necessidade do emprego de
+> termos ou símbolos, à compreensão de algoritmos, enfim, aos objetivos
+> matemáticos [@lorenzato_o_2006, p. 9].
+
+Percebe-se, pela citação mencionada acima, que não basta apenas haver um
+espaço físico, a disponibilidade de materiais e até a boa vontade de um
+docente ou estagiário. Há outras condições necessárias, especialmente
+envolvendo o planejamento e a fundamentação teórica adequada, sem os
+quais um trabalho com materiais, apesar de interessante, pode não
+produzir os efeitos esperados quanto à aprendizagem significativa.
+Refletir e discutir a respeito dessa problemática justifica empreender
+esse trabalho coletivo. Lorenzato coloca ainda que:
+
+> Convém termos sempre em mente que a realização em si de atividades
+> manipulativas ou visuais não garante a aprendizagem. Para que esta
+> efetivamente aconteça, faz-se necessária também a atividade mental,
+> por parte do aluno [@lorenzato_o_2006, p. 21].
+
+Assim como asseveramos para os materiais manipulativos em geral, o uso
+de jogos requer o mesmo cuidado. Mota (2009), em sua pesquisa
+desenvolvida em Portugal, menciona que há um número reduzido de
+professores que utiliza jogos no processo de ensino-aprendizagem, a
+autora sustenta que:
+
+> Entre os que fazem uso deste recurso, alguns não exploram devidamente
+> as potencialidades pedagógicas do jogo, esquecendo que são estas que
+> contribuem muito para a aprendizagem dos conceitos matemáticos [@mota_jogos_2009, p. 6].
+
+Para Borin [-@borin_jogos_2004], jogos podem contribuir como motivadores no processo
+de ensino-aprendizagem, atuando também como facilitadores no
+"desenvolvimento da linguagem, criatividade e raciocínio dedutivo,
+exigidos na escolha de uma jogada e na argumentação necessária durante a
+troca de informações" [@borin_jogos_2004, p. 8].
+
+Considerando que as atividades do subprojeto aconteceram praticamente
+todas no formato remoto, sejam as reuniões semanais com o grupo, sejam
+as ações na escola, a produção desses materiais foi mais uma das ações
+que foi realizada quase totalmente à distância. A produção se mostrou
+determinante para que os acadêmicos bolsistas e voluntários assumissem a
+preparação de atividades, visando a utilização em sala de aula, já que
+em um primeiro momento pensávamos que tais atividades pudessem ser
+usadas nas aulas que aconteciam de modo remoto. Depois, com o passar do
+tempo, percebemos que tal ação não seria possível, já que as aulas na
+escola passaram a ser presenciais, mas os alunos de iniciação à
+docência, porém, não tinham permissão para frequentá-las.
+
+Mesmo remotamente, cada grupo que acompanhava a professora supervisora
+em dias e turmas diferentes, elegeu conteúdos que naquele momento eram
+abordados na turma em que atuavam. Como dito anteriormente, as propostas
+apresentadas focam no uso de materiais manipulativos e jogos, sendo
+abordadas de diferentes formas e destacando diferentes conteúdos
+matemáticos. O objetivo da proposta 1 consistiu em promover a
+compreensão das operações de adição e subtração de números inteiros, por
+meio de jogos. A proposta 2 apresenta o uso do jogo para trabalhar com
+equações. Atividades que auxiliam no ensino-aprendizagem da linguagem
+algébrica foram abordadas na proposta 3. A proposta didática 4 sugere a
+construção de um astrolábio caseiro e a utilização de tal instrumento na
+simulação do trabalho de agrimensores, geógrafos e/ou astrônomos para
+ensinar trigonometria. Ela propõe ainda a inserção do uso de planilhas
+eletrônicas como ferramenta de ensino, em particular no ensino da
+trigonometria, conteúdo predominantemente abordado.
+
+A ideia foi preparar atividades que pudessem ser executadas em ambos os
+formatos de aulas: presencial ou remoto. Nesse sentido, cabe recordar a
+visão de Reys [1971, *apud* @nacarato_eu_2005, p. 3] quando afirma que objetos concretos são:
+"objetos ou coisas que o estudante é capaz de sentir, tocar, manipular e
+movimentar. Podem ser objetos reais que têm aplicação no cotidiano ou
+podem ser objetos usados para representar uma ideia".
+
+Estas atividades não foram aplicadas em sala de aula, porém, a
+elaboração permitiu muito aprendizado para os alunos de iniciação à
+docência. As dificuldades no estabelecimento dos objetivos, da
+metodologia a ser utilizada, da melhor forma de apresentar a atividade e
+suas etapas, entre outras tarefas, geraram inúmeras reescritas dessas
+propostas.
+
+A elaboração, a apresentação de cada proposta para os demais grupos e a
+inserção na escrita científica foram elementos que promoveram
+aprendizado e corroboraram com um dos objetivos do Pibid que é aprimorar
+a capacidade leitora e de produção textual -- oral e escrita -- por
+parte dos alunos bolsistas.
+
+Convém ressaltar que antes da elaboração desses materiais, o grupo se
+dedicou ao estudo dos documentos oficiais que regem a educação
+brasileira, como a Base Nacional Comum Curricular (BNCC) e dos
+documentos estaduais como o Referencial Curricular do Paraná e o
+Currículo Estadual Paranaense (CREP).
+
+As leituras e correções do material elaborado pelos bolsistas foram
+realizadas pelas professoras supervisora e colaboradoras, sempre
+agregando sugestões de melhoria ao texto, além de leituras que pudessem
+amplificar a temática sobre a qual versavam as propostas.
+
+Entendemos que esta ação contribuiu com o processo de aquisição do
+conhecimento necessário para ser um professor e oportunizou aos alunos
+de iniciação à docência, acréscimos importantes em suas formações, com o
+objetivo primordial de motivá-los à continuidade e ao comprometimento
+com a docência.
+
+## Notas
+
+1. ::: {#footnote-3}
+ Professoras do curso de Matemática, lotadas no Centro de Ciências
+ Exatas e Tecnológicas (CCET), da Universidade Estadual do Oeste do
+ Paraná (Unioeste), *campus* de Cascavel. Coordenadora e
+ colaboradoras de Área do Subprojeto Interdisciplinar
+ Matemática/Química, do Programa Institucional de Bolsas de Iniciação
+ à Docência (Pibid), da Unioeste. E-mail:
+ dulcyene.ribeiro@unioeste.br; ,
+ fabiana.papani@unioeste.br. [↑](#footnote-ref-3)
+ :::
+
+## Referências
\ No newline at end of file
diff --git a/css/estilo.css b/css/estilo.css
new file mode 100755
index 0000000..e69de29
diff --git a/css/jogosfoz.css b/css/jogosfoz.css
new file mode 100755
index 0000000..dad1224
--- /dev/null
+++ b/css/jogosfoz.css
@@ -0,0 +1,1243 @@
+@keyframes pulsar_animacao {
+ 0% {
+ transform: scale(1);
+ }
+ 50% {
+ transform: scale(1.2);
+ }
+ 100% {
+ transform: scale(1);
+ }
+ }
+
+ .pulsar {
+ animation: pulsar_animacao 1s infinite;
+ }
+
+ #container_pdf_jm {
+
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background: rgb(142,249,243);
+ background: linear-gradient(168deg, rgba(142,249,243,1) 29%, rgba(131,119,209,1) 94%);
+ padding: 3px;
+ height: 100vh;
+ box-sizing: border-box;
+ position: fixed;
+ overflow-y: auto;
+ font-family: Arial, Helvetica, sans-serif;
+ font-weight: bold;
+ color: white;
+ text-shadow: 1px 0px black;
+ display: none;
+ z-index: 9999;
+
+ }
+
+ .tela_inicial_pdf_jm {
+
+ display: flex;
+ flex-direction: column;
+ justify-content: space-around;
+ align-items: center;
+ width: 100%;
+ height: 50%;
+ color: rgba(131,119,209,1);
+ text-shadow: 0 0 white;
+
+ }
+
+ .tela_inicial_pdf_jm div {
+ margin: 5px 0;
+ }
+
+ .tela_inicial_pdf_jm h3 {
+ font-size: 2rem;
+ font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
+ margin-top: 0;
+ }
+
+ div#entrar_nomes_pdf_jm input {
+
+ border: none;
+ border-radius: 5px;
+ padding: 10px;
+ font-size: 14px;
+ margin: 3px 0;
+
+ }
+
+ div#entrar_nomes_pdf_jm input::placeholder {
+ font-size: 11px;
+ margin: 3px 0;
+ }
+
+ .iniciar_pdf_jm, .som_pdf_jm, .fechar_pdf_jm, .jogo_da_memoria_pdf_jm {
+
+ color: white;
+ font-weight: bold;
+ font-family: Arial, Helvetica, sans-serif;
+ border-radius: 3px;
+ margin: 3px;
+ border: none;
+ padding: 3px 5px;
+ cursor: pointer;
+
+ }
+
+ .iniciar_pdf_jm, .jogo_da_memoria_pdf_jm {
+ background-color: #00c0ff;
+ text-align: center;
+ }
+
+ .jogo_da_memoria_pdf_jm{
+ display: block;
+ margin: 3px auto;
+ padding: 5px 20px;
+ }
+
+ .som_pdf_jm {
+ background-color: #2196f3;
+ }
+
+ .fechar_pdf_jm {
+ background-color: #f44336;
+ }
+
+ .iniciar_pdf_jm:hover, .jogo_da_memoria_pdf_jm:hover {
+
+ background-color: #FFB400;
+
+ }
+
+ .som_pdf_jm:hover {
+
+ background-color: #73bcf7;
+
+ }
+
+
+ .som_desativado_pdf_jm {
+ background-color: #dfdfdf;
+ }
+
+ .fechar_pdf_jm:hover {
+
+ background-color: #ff6c61;
+
+ }
+
+
+ #info_pdf_jm {
+
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ align-items: center;
+ width: 100%;
+ height: 28px;
+ padding: 3px 5px;
+ border-radius: 5px;
+ background-color: #c6c9cf;
+ box-sizing: border-box;
+ margin: 5px 0;
+ visibility: hidden;
+ opacity:0;
+ transition: opacity 0.3s linear;
+
+ }
+
+ #info_pdf_jm div {
+ margin: auto;
+ }
+
+ #jogador1_pdf_jm, #jogador2_pdf_jm {display: flex; align-items: center;}
+
+ #container_cartas_pdf_jm {
+
+ display:flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+ justify-content: center;
+ align-items: center;
+ visibility: hidden;
+ opacity:0;
+ transition:opacity 0.3s linear;
+
+ }
+
+ .carta_pdf_jm {
+ position: relative;
+ min-width: 55px;
+ min-height: 70px;
+ width: 8vw;
+ height: 27vh;
+ perspective: 1000px;
+ font-family: Arial, Helvetica, sans-serif;
+ font-size: 0.8em;
+ -webkit-hyphens: auto;
+ -ms-hyphens: auto;
+ hyphens: auto;
+ margin: 3px;
+ color: #444;
+ text-shadow: none;
+ font-weight: 400;
+
+ }
+
+ .carta_interior_pdf_jm {
+
+ position: relative;
+ width: 100%;
+ height: 100%;
+ transition: transform 0.6s;
+ transform-style: preserve-3d;
+ border-radius: 3px;
+ box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
+
+ }
+
+ .carta_interior_pdf_jm button.fechar_pdf_jm {
+
+ position: absolute;
+ z-index: 3000;
+ left: 0;
+ right: 0;
+ top: -8px;
+ width: 14px;
+ height: 14px;
+ font-size: 7px;
+ margin: auto;
+ display: none;
+ text-align: center;
+ padding: 0;
+
+ }
+
+ .virada_pdf_jm {
+ transform: rotateY(180deg);
+ }
+
+ .frente_pdf_jm, .verso_pdf_jm {
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ -webkit-backface-visibility: hidden; /* Safari */
+ backface-visibility: hidden;
+ padding: 7px;
+ box-sizing: border-box;
+ overflow-y: auto;
+ border-radius: 3px;
+ display: flex;
+ align-items: center;
+ }
+
+ .verso_pdf_jm span{
+
+ margin-left: auto;
+ margin-right: auto;
+ max-width: 100%;
+
+ }
+
+ .frente_pdf_jm {
+
+ background-image: url('https://livro.online/wp-content/uploads/2022/02/LogoRegistroAlpha.svg');
+ background-repeat: no-repeat;
+ background-color: #444;
+ background-position: center;
+ background-size:contain;
+
+ }
+
+ .verso_pdf_jm {
+
+ transform: rotateY(180deg);
+ background-color: antiquewhite;
+ }
+
+ .verso_pdf_jm span {
+ margin: auto;
+ word-wrap: break-word;
+ overflow-wrap: break-word;
+ }
+
+ @media only screen and (max-width: 500px) {
+ .carta_pdf_jm {
+ font-size: 0.6em;
+ }
+ }
+
+ /* Estilo da scrollbar das cartas*/
+ .verso_pdf_jm::-webkit-scrollbar {
+ width: 5px; /* largura */
+ height: 10px; /* altura */
+ }
+
+ /* Cor da barra de rolagem */
+ .verso_pdf_jm::-webkit-scrollbar-thumb {
+ background-color: #999;
+ }
+
+ /* Cor da alça da barra de rolagem */
+ .verso_pdf_jm::-webkit-scrollbar-track {
+ background-color: #fff;
+ }
+
+ .nome_pdf_jm {
+ display:block;
+ margin-right: 3px;
+ text-align: right;
+ width: 23vw;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
+
+ .pontuacao_pdf_jm {display:inline-block;}
+
+
+ .disponivel_pdf_jm {
+ cursor: grabbing; /* Essa classe defini se podemos virar ou não uma carta. O código javascript leva ela em conta */
+ }
+
+
+ .tela_final_pdf_jm {
+
+ position: absolute;
+ display: none;
+ flex-direction: column;
+ flex-wrap: wrap;
+ justify-content: space-around;
+ align-items: center;
+ top: 0;
+ left: 0;
+ bottom: 0;
+ right: 0;
+ margin: auto;
+ width: 300px;
+ height: 200px;
+ box-sizing: border-box;
+ padding: 5px 15px;
+ color: #444;
+ border-radius: 6px;
+ box-shadow: 2px 1px 15px 7px #5c5f62;
+ background-color: antiquewhite;
+ font-weight: 500;
+ text-shadow: none;
+ font-size: 12px;
+ font-family: Arial, Helvetica, sans-serif;
+ z-index: 2000;
+
+ }
+
+ .tela_final_pdf_jm button {
+
+ border-radius: 6px;
+ box-sizing: border-box;
+ padding: 10px 15px;
+ color: #fff;
+ font-weight: bold;
+ background-color: #f44336;
+ cursor: pointer;
+ border: none;
+ margin: 10px;
+
+ }
+
+ .tela_final_pdf_jm button:hover {
+
+ background-color: #ff6c61;
+ }
+
+
+
+ /********************************************* Jogo Percurso das Frações *******************************************/
+
+
+
+
+ .btn_pf {
+
+ background-color: #00c0ff;
+ color: #fff;
+ padding: 8px 10px;
+ border: none;
+ font-weight: bold;
+ cursor: pointer;
+ border-radius: 5px;
+ display: block;
+ margin: 8px auto;
+
+ }
+
+ .btn_pf:hover {
+
+ background-color: #FFB400;
+
+ }
+
+ .jogo_ativo_pf {
+
+ background-color: #d70f00;
+
+ }
+
+ .jogo_ativo_pf:hover {
+
+ background-color: #e94d42;
+
+ }
+
+
+ #tela_inicial_pf {
+
+ width: 100%;
+ height: 100%;
+ display: none;
+ opacity: 0;
+ transition: opacity 1s ease-in-out;
+ flex-direction: column;
+ align-items: center;
+ justify-content: space-between;
+ color: #fff;
+ background: rgb(177,206,52);
+ background: linear-gradient(0deg, rgba(177,206,52,1) 1%, rgba(255,108,97,1) 50%);
+ padding: 20px 3px;
+ box-sizing: border-box;
+ flex-wrap: wrap;
+
+ }
+
+ #tela_inicial_pf button {
+ color: #fff;
+ background-color: rgb(255, 108, 97);
+ font-weight: bold;
+ font-size: 1.3rem;
+ border-radius: 5px;
+ padding: 5px;
+ cursor: pointer;
+ border: none;
+ }
+
+ #tela_inicial_pf button:hover {
+ background-color: rgb(255, 121, 111);
+ }
+
+ #numJogadores_pf {
+
+ border: 1px #fff solid;
+ background-color: #444;
+ color: #fff;
+ font-weight: bold;
+ border-radius: 5px;
+ cursor: pointer;
+
+ }
+
+ #info_inicial_jogadores_pf {
+
+ display: flex;
+ flex-wrap: wrap;
+ align-items: center;
+ justify-content: space-around;
+ margin: 25px 0;
+
+ }
+
+
+ .jogador_div_pf {
+
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ align-items: center;
+ padding: 10px 3px;
+ margin: 10px;
+ border: #fff 1px solid;
+ border-radius: 20px;
+
+ }
+
+ .jogador_div_pf div {
+ margin: 3px 0 10px 0;
+ font-weight: bold;;
+ }
+
+ .jogador_div_pf input {
+ width: 85%;
+ border: none;
+ border-radius: 2px;
+
+ }
+
+ .jogador_div_pf span {
+ font-size: 0.7rem;
+ margin-top: 3px;
+ margin-bottom: 10px;
+ }
+
+ #jogador_3_pf, #jogador_4_pf, #jogador_5_pf, #jogador_6_pf, #jogador_7_pf, #jogador_8_pf {
+
+ display: none;
+
+ }
+
+ .peca_pf, .peca_amostra_pf {
+ font-size: 25px;
+ width: 23px;
+ height: 28px;
+ text-shadow: 0 1px 1px #fff;
+ z-index: 10;
+ color: #000;
+ }
+
+ .peca_pf {
+ display: none;
+ }
+
+
+ .peao_solido_pf::before {
+ content: "♟";
+ }
+
+ .bispo_solido_pf::before {
+ content: "♝";
+ }
+
+ .cavalo_solido_pf::before {
+ content: "♞";
+ }
+
+ .torre_solida_pf::before {
+ content: "♜";
+ }
+ .peao_vazado_pf::before {
+ content: "♙";
+ }
+
+ .bispo_vazado_pf::before {
+ content: "♗";
+ }
+
+ .cavalo_vazado_pf::before {
+ content: "♘";
+ }
+
+ .torre_vazada_pf::before {
+ content: "♖";
+ }
+
+ #info_pf {
+ display: none;
+ justify-content: flex-start;
+ align-items: center;
+ background-color: #dfdfdf;
+ border-radius: 5px;
+ box-sizing: border-box;
+ padding: 10px;
+ position: -webkit-sticky;
+ position: sticky;
+ top: 0;
+ z-index: 40;
+ box-shadow: 2px 2px 5px #777;
+ }
+
+ .som_pf {
+
+ color: white;
+ font-weight: bold;
+ font-family: Arial, Helvetica, sans-serif;
+ border-radius: 3px;
+ margin: 3px;
+ border: none;
+ padding: 3px 5px;
+ cursor: pointer;
+ box-shadow: 2px 2px 1px #777;
+
+ }
+
+ .som_pf {
+ background-color: #2196f3;
+
+ }
+
+ .som_pf:hover {
+
+ background-color: #73bcf7;
+ box-shadow: -2px -2px 1px #777;
+
+ }
+
+
+ .som_desativado_pf {
+ background-color: #dfdfdf;
+ }
+
+ .vez_el_pf {
+ margin: 3px 8px;
+ color: #000;
+ }
+
+ @keyframes anim_pulsar_pf {
+ 0% {
+ transform: scale(1);
+ }
+ 50% {
+ transform: scale(1.9);
+ }
+ 100% {
+ transform: scale(1);
+ }
+ }
+
+ .pulsar_pf {
+ animation: anim_pulsar_pf 1s infinite;
+ }
+
+
+ .tabuleiro_pf{
+
+ display: none;
+ grid-template-columns: repeat(5, 1fr);
+ box-sizing: border-box;
+ background-color: cornflowerblue;
+ padding: 70px 3px;
+ border-radius: 3px;
+ opacity: 0;
+ transition: all .5s ease-in-out;
+
+ }
+
+ .tabuleiro_item_pf{
+
+
+ min-height: 120px;
+ min-width: 50px;
+ box-sizing: border-box;
+ display: flex;
+ flex-wrap: wrap;
+ align-content: space-between;
+ justify-content: center;
+
+ }
+
+ .casa_pf {
+
+ position: relative;
+ border: 2px solid #fff;
+ padding: 2px;
+ text-align: center;
+
+ }
+
+ .numero_casa_pf {
+
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ color: #fff;
+ font-weight: bold;
+ font-size: 1.9rem;
+
+ }
+
+ #c_34_pf {
+
+ background: linear-gradient(45deg, #ddd 25%, transparent 25%, transparent 75%, #ddd 75%),
+ linear-gradient(-45deg, #ddd 25%, transparent 25%, transparent 75%, #ddd 75%);
+ background-size: 20px 20px;
+ background-color: #999;
+
+ }
+
+
+ #janela_definicao_ordem_pf, #janela_de_jogadas_pf {
+
+ position: fixed;
+ display: none;
+ margin: 20px auto 35px auto;
+ box-sizing: border-box;
+ padding: 40px;
+ max-width: 800px;
+ min-width: 275px;
+ flex-direction: column;
+ align-items: center;
+ justify-content: space-between;
+ width: 91%;
+ max-height: 90vh;
+ height: 650px;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ background-color: #444;
+ color: #fff;
+ box-shadow: 2px 2px 5px #777;
+ z-index: 50;
+ overflow: auto;
+ border-radius: 10px;
+ transition: opacity 0.7s ease-in-out;
+
+ }
+
+ #janela_definicao_ordem_pf h3 {
+ color: #fff;
+ }
+
+ .el_pergunta_pf {
+
+ width: 95%;
+ box-sizing: border-box;
+ padding: 2px 10px 15px 10px;
+ margin: 30px auto;
+ background-color: antiquewhite;
+ border-radius: 3px;
+ color: #444;
+ font-weight: 300;
+
+ }
+
+ .numerador_pf, .denominador_pf, .el_resp_pf {
+
+ border: 1px solid #444;
+ background-color: #fff;
+ cursor: text;
+ width: 60px;
+ text-align: center;
+ margin: 0 27px;
+
+ }
+
+ .bt_responder_pf {
+
+ border: none;
+ background-color: rgb(4, 189, 236);
+ color: #fff;
+ border-radius: 3px;
+ cursor: pointer;
+ font-weight: bold;
+ padding: 5px 15px;
+ font-size: small;
+
+ }
+
+ .bt_responder_pf:hover {
+
+ background-color: rgb(65, 202, 236);
+
+
+ }
+
+
+ .msg_sorteio_ordem {
+ padding: 10px;
+ background-color: #73bcf7;
+ border-radius: 5px;
+ margin: 10px;
+ transition: opacity .3s ease-in-out;
+ }
+
+
+ .dado_pf-container {
+ perspective: 800px;
+ width: 210px;
+ height: 210px;
+ margin: auto;
+ position: relative;
+ }
+
+ .dado_pf {
+ width: 100px;
+ height: 100px;
+ position: relative;
+ top: 20px;
+ left: 5px;
+ transform-style: preserve-3d;
+ transition: transform 1s ease-in-out;
+ transform: rotateX(-14deg) rotateY(195deg) rotateZ(-30deg);
+ cursor: grab;
+ }
+
+ .dado_pf-face {
+ position: absolute;
+ width: 100px;
+ height: 100px;
+ border: 1px solid #eae7dd;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-evenly;
+ font-size: 24px;
+ border-radius: 5px;
+ box-shadow: 0 0 3px 1px #ece4d9;
+ color:#000;
+ text-shadow: 2px 2px 4px rgba(255, 255, 255, 0.95);
+ background: rgb(242,237,219);
+ background: linear-gradient(78deg, rgba(242,237,219,1) 27%, rgba(223,218,201,1) 64%);
+ }
+
+ .dado_pf-face div.linha {
+ width: 100%;
+ text-align: center;
+ display: flex;
+ justify-content: center;
+ }
+
+ div.linha div {
+
+ width: 100%;
+
+ }
+
+ .front {
+ transform: translateZ(50px);
+ }
+
+ .back {
+ transform: translateZ(-50px) rotateY(180deg);
+ }
+
+ .right {
+ transform: translateX(50px) rotateY(90deg);
+ }
+
+ .left {
+ transform: translateX(-50px) rotateY(-90deg);
+ }
+
+ .top {
+ transform: translateY(-50px) rotateX(90deg);
+ }
+
+ .bottom {
+ transform: translateY(50px) rotateX(-90deg);
+ }
+
+ #rolar_dado_pf {
+ margin: 30px 20px;
+ }
+
+ .mostrar_face_1 {
+ transform: rotateX(2deg) rotateY(-5deg);
+ }
+ .mostrar_face_2 {
+ transform: rotateX(-821deg) rotateY(715deg);
+ }
+ .mostrar_face_3 {
+ transform: rotateX(-362deg) rotateY(-458deg);
+ }
+ .mostrar_face_4 {
+ transform: rotateX(369deg) rotateY(444deg);
+ }
+ .mostrar_face_5 {
+ transform: rotateX(813deg) rotateZ(-371deg);
+ }
+ .mostrar_face_6 {
+ transform: rotateX(1623deg) rotateY(1448deg);
+ }
+
+
+
+ .dado_8_pf-container {
+ perspective: 400px;
+ width: 210px;
+ height: 210px;
+ margin: auto;
+ position: relative;
+ }
+
+ .dado_8_pf {
+ width: 100px;
+ height: 200px;
+ position: relative;
+ top: 20px;
+ left: 5px;
+ transform-style: preserve-3d;
+ transition: transform 1s ease-in-out;
+ transform: rotateX(-14deg) rotateY(228deg);
+ cursor: grab;
+ }
+
+ .dado_8_pf-face {
+ width: 0;
+ height: 0;
+ border-left: 50px solid transparent;
+ border-right: 50px solid transparent;
+ border-bottom: 100px solid #F0AB01; /* Cor e tamanho do triângulo */
+ position: absolute;
+ font-size: 24px;
+ border-radius: 6px;
+
+ }
+
+ .dado_8_pf-face span {
+ text-shadow: 0px 1px 3px rgb(0 0 0 / 95%);
+ color: #fff;
+ font-weight: bold;
+ position: absolute;
+ top: 65px;
+ left: -8px;
+ transform: translate(-50%, -50%);
+ text-align: center;
+ width: 100%; /* Definindo a largura do texto para ocupar todo o espaço */
+ line-height: 100px;
+
+ }
+
+ .superior_pf, .inferior_pf {
+ transform-style: preserve-3d;
+ }
+
+ .inferior_pf {
+ transform-origin: center center;
+ transform: rotateX(180deg) translateY(-200px) translateZ(100px);
+ }
+
+ .face_1_d8, .face_2_d8 {
+ transform-origin: center bottom;
+ transform: rotateX(30deg);
+ }
+
+ .face_3_d8, .face_8_d8 {
+ transform-origin: right bottom;
+ transform: translateZ(-100px) rotateY(90deg) rotateX(30deg);
+ }
+
+ .face_4_d8, .face_7_d8 {
+ transform-origin: left bottom;
+ transform: translateZ(-100px) rotateY(-90deg) rotateX(30deg);
+
+ }
+
+ .face_5_d8, .face_6_d8 {
+ transform-origin: center bottom;
+ transform: translateZ(-100px) rotateY(180deg) rotateX(30deg);
+ }
+
+
+ #rolar_dado_8_pf {
+ margin: 30px 20px;
+ }
+
+ .mostrar_face_1_d8{
+ transform: rotateX(0deg) rotateY(-2deg);
+ }
+ .mostrar_face_2_d8 {
+ transform: rotateX(162deg) rotateY(7deg);
+ }
+ .mostrar_face_3_d8 {
+ transform: rotateX(463deg) rotateY(442deg) rotateZ(404deg);
+ }
+ .mostrar_face_4_d8 {
+ transform: rotateX(369deg) rotateY(444deg);
+ }
+ .mostrar_face_5_d8 {
+ transform: rotateX(1242deg) rotateY(338deg) rotateZ(1292deg);
+ }
+ .mostrar_face_6_d8 {
+ transform: rotateX(888deg) rotateY(903deg) rotateZ(755deg);
+ }
+ .mostrar_face_7_d8 {
+ transform: rotateX(2505deg) rotateY(2428deg) rotateZ(2719deg);
+ }
+ .mostrar_face_8_d8 {
+ transform: rotateX(1898deg) rotateY(1724deg) rotateZ(1550deg);
+ }
+
+
+
+
+ /************************************************* FIM Jogo Percurso das Frações **************************************/
+
+
+
+ /********************************************* Jogo Card das Frações *******************************************/
+
+
+ .botao-jogo-cf {
+ background-color: #00c0ff;
+ color: #fff;
+ padding: 8px 10px;
+ border: none;
+ font-weight: bold;
+ cursor: pointer;
+ border-radius: 5px;
+ margin: 8px auto;
+ display: block;
+ }
+
+ .botao-jogo-cf:hover {
+
+ background-color: #FFB400;
+
+ }
+
+ .btn_ativo_cf {
+
+ background-color: #d70f00;
+
+ }
+
+ .btn_ativo_cf:hover {
+
+ background-color: #e94d42;
+
+ }
+
+ #container_cf {
+
+ background-color: #61d2ff;
+ box-sizing: border-box;
+ padding: 10px;
+ width: 100%;
+ border-radius: 5px;
+ margin-bottom: 20px;
+ }
+
+
+ .bt_pular_cf, .bt_corrigir_cf, .falar_el_cf, .som_el_cf {
+
+ color: #2a90ea;
+ border: none;
+ border-radius: 5px;
+ font-size: 25px;
+ width: 50px;
+ font-weight: bold;
+ cursor: pointer;
+ padding: 5px;
+ box-sizing: border-box;
+
+ }
+
+ .bt_pular_cf:hover, .bt_corrigir_cf:hover, .falar_el_cf:hover, .som_el_cf:hover {
+ background-color: #73bcf7;
+ }
+
+
+ .bt_desativado_cf, .bt_desativado_cf:hover {
+ background-color: rgba(0, 0, 0, 0);
+ color: #999;
+ cursor: auto;
+ }
+
+ .som_desativado_cf {
+ background-color: rgba(0, 0, 0, 0);
+ }
+
+
+ @keyframes deslizarParaEsquerda_anim_cf {
+ 0% {
+ transform: translateX(0);
+ }
+ 100% {
+ transform: translateX(-110%);
+ }
+ }
+
+ @keyframes deslizarParaDireita_anim_cf {
+ 0% {
+ transform: translateX(-110%);
+ }
+ 100% {
+ transform: translateX(0%);
+ }
+ }
+
+ .deslizarParaEsquerda_cf {
+
+ animation: deslizarParaEsquerda_anim_cf 0.7s ease-in-out forwards;
+
+ }
+
+ .deslizarParaDireita_cf {
+
+ animation: deslizarParaDireita_anim_cf 0.7s ease-in-out forwards;
+
+ }
+
+
+ #container_jogo_cf {
+
+ display: none;
+ box-sizing: border-box;
+
+ }
+
+
+
+ .container_tela_inicial_cf {
+ text-align: center;
+ opacity: 0;
+ transition: opacity .3s ease-in-out;
+ background: rgb(97,210,255);
+ background: linear-gradient(0deg, rgba(97,210,255,1) 14%, rgba(255,108,97,1) 80%);
+ color: #fff;
+ padding: 25px 10px;
+ }
+
+ .container_tela_inicial_cf h2 {
+ margin-bottom: 20px;
+ }
+
+ .grupo_cf {
+ margin-bottom: 20px;
+ }
+
+ .grupo_cf > div {
+ font-weight: bold;
+ margin-bottom: 5px;
+ }
+
+ .container_tela_inicial_cf input[type="text"] {
+ padding: 5px;
+ width: 200px;
+ border-radius: 5px;
+ }
+
+ button.bt_iniciar_cf {
+ background-color: green;
+ color: white;
+ padding: 10px 20px;
+ border: none;
+ font-weight: bolder;
+ border-radius: 5px;
+ cursor: pointer;
+ }
+
+ button.bt_iniciar_cf:hover{
+
+ background-color: rgb(25, 172, 25);
+
+ }
+
+
+
+ .trilha_dos_cards_cf{
+
+ overflow: hidden;
+ padding: 10px;
+ box-sizing: border-box;
+ display: flex;
+ gap: 20px;
+
+ }
+
+
+ .card_papel_cf {
+
+ box-sizing: border-box;
+ background-color: transparent;
+ perspective: 5000px;
+ width: 100%;
+ max-width: 767px;
+ flex: 0 0 auto;
+
+ }
+
+ .card_interior_cf {
+
+ position: relative;
+ border: none;
+ padding: 0;
+ font-family: Arial, sans-serif;
+ width: 100%;
+ height: 100%;
+ border-radius: 2px;
+ background-color: #f2f2f2;
+ box-shadow: 2px 2px 5px #999;
+ box-sizing: border-box;
+ transition: transform 0.6s;
+ transform-style: preserve-3d;
+
+ }
+
+ .container_linhas_cf {
+
+ position: relative;
+ left: 0;
+ top: 0;
+ width: 100%;
+ height: 100%;
+ padding-top: 40px;
+ padding-bottom: 10px;
+
+ }
+
+
+ .linha_cf {
+ width: 100%;
+ height: 20px;
+ background-image: repeating-linear-gradient(to bottom, transparent, transparent 10px, #2390f7 10px, #2377f5 11px);
+ background-size: 100% 20px;
+ margin-bottom: 10px;
+ opacity: 0.13;
+ transition: opacity .6s;
+ }
+
+ .primeira-linha_cf {
+
+ background-image: repeating-linear-gradient(to bottom, transparent, transparent 10px, #f33535 10px, #e01414 11px);
+
+ }
+
+ .papel_overlay_cf {
+
+ position: absolute;
+ top: 0;
+ left: 0;
+ opacity: 0.13;
+ background-color: aliceblue;
+ width: 100%;
+ height: 100%;
+ box-sizing: border-box;
+
+ }
+
+ .card_papel_cf.virado_cf .card_interior_cf {
+ transform: rotateY(180deg);
+ }
+
+ .card_papel_cf.virado_cf .linha_cf{
+ opacity: 0.1;
+ }
+
+ .frente_cf, .verso_cf {
+
+ position: absolute;
+ font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ box-sizing: border-box;
+ backface-visibility: hidden;
+ -webkit-backface-visibility: hidden;
+ display: flex;
+ align-items: center;
+ flex-direction: column;
+ padding: 15px;
+ font-size: 1.3rem;
+ transform-style: preserve-3d;
+ overflow: auto;
+
+ }
+
+ .verso_cf {transform: rotateY(180deg);}
+
+ .numerador_cf, .denominador_cf {
+
+ border: 1px solid #777;
+ background-color: #fff;
+ cursor: text;
+ width: 60px;
+ text-align: center;
+ margin: 0 27px;
+
+ }
+
+
+ /********************************************* FIM Jogo Card das Frações *******************************************/
+
\ No newline at end of file
diff --git a/css/jogovel.css b/css/jogovel.css
new file mode 100755
index 0000000..4dc0101
--- /dev/null
+++ b/css/jogovel.css
@@ -0,0 +1,354 @@
+@keyframes pulsar_animacao {
+ 0% {
+ transform: scale(1);
+ }
+ 50% {
+ transform: scale(1.2);
+ }
+ 100% {
+ transform: scale(1);
+ }
+ }
+
+ .pulsar {
+ animation: pulsar_animacao 1s infinite;
+ }
+
+ #container_pdf_jm {
+
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background: rgb(142,249,243);
+ background: linear-gradient(168deg, rgba(142,249,243,1) 29%, rgba(131,119,209,1) 94%);
+ padding: 3px;
+ height: 100vh;
+ box-sizing: border-box;
+ position: fixed;
+ overflow-y: auto;
+ font-family: Arial, Helvetica, sans-serif;
+ font-weight: bold;
+ color: white;
+ text-shadow: 1px 0px black;
+ display: none;
+ z-index: 9999;
+
+ }
+
+ .tela_inicial_pdf_jm {
+
+ display: flex;
+ flex-direction: column;
+ justify-content: space-around;
+ align-items: center;
+ width: 100%;
+ height: 50%;
+ color: rgba(131,119,209,1);
+ text-shadow: 0 0 white;
+
+ }
+
+ .tela_inicial_pdf_jm div {
+ margin: 5px 0;
+ }
+
+ .tela_inicial_pdf_jm h3 {
+ font-size: 2rem;
+ font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
+ margin-top: 0;
+ }
+
+ div#entrar_nomes_pdf_jm input {
+
+ border: none;
+ border-radius: 5px;
+ padding: 10px;
+ font-size: 14px;
+ margin: 3px 0;
+
+ }
+
+ div#entrar_nomes_pdf_jm input::placeholder {
+ font-size: 11px;
+ margin: 3px 0;
+ }
+
+ .iniciar_pdf_jm, .som_pdf_jm, .fechar_pdf_jm, .jogo_da_memoria_pdf_jm {
+
+ color: white;
+ font-weight: bold;
+ font-family: Arial, Helvetica, sans-serif;
+ border-radius: 3px;
+ margin: 3px;
+ border: none;
+ padding: 3px 5px;
+ cursor: pointer;
+
+ }
+
+ .iniciar_pdf_jm, .jogo_da_memoria_pdf_jm {
+ background-color: #00c0ff;
+ text-align: center;
+ }
+
+ .jogo_da_memoria_pdf_jm{
+ display: block;
+ margin: 3px auto;
+ padding: 5px 20px;
+ }
+
+ .som_pdf_jm {
+ background-color: #2196f3;
+ }
+
+ .fechar_pdf_jm {
+ background-color: #f44336;
+ }
+
+ .iniciar_pdf_jm:hover, .jogo_da_memoria_pdf_jm:hover {
+
+ background-color: #FFB400;
+
+ }
+
+ .som_pdf_jm:hover {
+
+ background-color: #73bcf7;
+
+ }
+
+
+ .som_desativado_pdf_jm {
+ background-color: #dfdfdf;
+ }
+
+ .fechar_pdf_jm:hover {
+
+ background-color: #ff6c61;
+
+ }
+
+
+ #info_pdf_jm {
+
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ align-items: center;
+ width: 100%;
+ height: 28px;
+ padding: 3px 5px;
+ border-radius: 5px;
+ background-color: #c6c9cf;
+ box-sizing: border-box;
+ margin: 5px 0;
+ visibility: hidden;
+ opacity:0;
+ transition: opacity 0.3s linear;
+
+ }
+
+ #info_pdf_jm div {
+ margin: auto;
+ }
+
+ #jogador1_pdf_jm, #jogador2_pdf_jm {display: flex; align-items: center;}
+
+ #container_cartas_pdf_jm {
+
+ display:flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+ justify-content: center;
+ align-items: center;
+ visibility: hidden;
+ opacity:0;
+ transition:opacity 0.3s linear;
+
+ }
+
+ .carta_pdf_jm {
+ position: relative;
+ min-width: 55px;
+ min-height: 70px;
+ width: 8vw;
+ height: 27vh;
+ perspective: 1000px;
+ font-family: Arial, Helvetica, sans-serif;
+ font-size: 0.8em;
+ -webkit-hyphens: auto;
+ -ms-hyphens: auto;
+ hyphens: auto;
+ margin: 3px;
+ color: #444;
+ text-shadow: none;
+ font-weight: 400;
+
+ }
+
+ .carta_interior_pdf_jm {
+
+ position: relative;
+ width: 100%;
+ height: 100%;
+ transition: transform 0.6s;
+ transform-style: preserve-3d;
+ border-radius: 3px;
+ box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
+
+ }
+
+ .carta_interior_pdf_jm button.fechar_pdf_jm {
+
+ position: absolute;
+ z-index: 3000;
+ left: 0;
+ right: 0;
+ top: -8px;
+ width: 14px;
+ height: 14px;
+ font-size: 7px;
+ margin: auto;
+ display: none;
+ text-align: center;
+ padding: 0;
+
+ }
+
+ .virada_pdf_jm {
+ transform: rotateY(180deg);
+ }
+
+ .frente_pdf_jm, .verso_pdf_jm {
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ -webkit-backface-visibility: hidden; /* Safari */
+ backface-visibility: hidden;
+ padding: 7px;
+ box-sizing: border-box;
+ overflow-y: auto;
+ border-radius: 3px;
+ display: flex;
+ align-items: center;
+ }
+
+ .verso_pdf_jm span{
+
+ margin-left: auto;
+ margin-right: auto;
+ max-width: 100%;
+
+ }
+
+ .frente_pdf_jm {
+
+ background-image: url('https://livro.online/wp-content/uploads/2022/02/LogoRegistroAlpha.svg');
+ background-repeat: no-repeat;
+ background-color: #444;
+ background-position: center;
+ background-size:contain;
+
+ }
+
+ .verso_pdf_jm {
+
+ transform: rotateY(180deg);
+ background-color: antiquewhite;
+ }
+
+ .verso_pdf_jm span {
+ margin: auto;
+ word-wrap: break-word;
+ overflow-wrap: break-word;
+ }
+
+ @media only screen and (max-width: 500px) {
+ .carta_pdf_jm {
+ font-size: 0.6em;
+ }
+ }
+
+ /* Estilo da scrollbar das cartas*/
+ .verso_pdf_jm::-webkit-scrollbar {
+ width: 5px; /* largura */
+ height: 10px; /* altura */
+ }
+
+ /* Cor da barra de rolagem */
+ .verso_pdf_jm::-webkit-scrollbar-thumb {
+ background-color: #999;
+ }
+
+ /* Cor da alça da barra de rolagem */
+ .verso_pdf_jm::-webkit-scrollbar-track {
+ background-color: #fff;
+ }
+
+ .nome_pdf_jm {
+ display:block;
+ margin-right: 3px;
+ text-align: right;
+ width: 23vw;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
+
+ .pontuacao_pdf_jm {display:inline-block;}
+
+
+ .disponivel_pdf_jm {
+ cursor: grabbing; /* Essa classe defini se podemos virar ou não uma carta. O código javascript leva ela em conta */
+ }
+
+
+ .tela_final_pdf_jm {
+
+ position: absolute;
+ display: none;
+ flex-direction: column;
+ flex-wrap: wrap;
+ justify-content: space-around;
+ align-items: center;
+ top: 0;
+ left: 0;
+ bottom: 0;
+ right: 0;
+ margin: auto;
+ width: 300px;
+ height: 200px;
+ box-sizing: border-box;
+ padding: 5px 15px;
+ color: #444;
+ border-radius: 6px;
+ box-shadow: 2px 1px 15px 7px #5c5f62;
+ background-color: antiquewhite;
+ font-weight: 500;
+ text-shadow: none;
+ font-size: 12px;
+ font-family: Arial, Helvetica, sans-serif;
+ z-index: 2000;
+
+ }
+
+ .tela_final_pdf_jm button {
+
+ border-radius: 6px;
+ box-sizing: border-box;
+ padding: 10px 15px;
+ color: #fff;
+ font-weight: bold;
+ background-color: #f44336;
+ cursor: pointer;
+ border: none;
+ margin: 10px;
+
+ }
+
+ .tela_final_pdf_jm button:hover {
+
+ background-color: #ff6c61;
+ }
\ No newline at end of file
diff --git a/css/moan.scss b/css/moan.scss
new file mode 100755
index 0000000..6be41a7
--- /dev/null
+++ b/css/moan.scss
@@ -0,0 +1,357 @@
+/*-- scss:defaults --*/
+$h2-font-size: 1.6rem !default;
+$headings-font-weight: 500 !default;
+$font-size-base: 1.1rem !default;
+
+/*-- scss:rules --*/
+main p, main li {
+ text-align: justify;
+ hyphens: auto;
+ font-kerning: auto;
+}
+
+main li {
+ margin-bottom: 15px;
+}
+
+h1{
+ margin-bottom: 18px !important;
+ text-align: center;
+}
+
+h2 {
+ box-shadow: inset 0 -.4em 0 #00C0FF;
+ display: table;
+ padding-bottom: 0.1em;
+}
+
+h2#toc-title {
+ box-shadow:none;
+}
+
+#TOC .small_h2{
+ font-size: inherit;
+}
+
+h3 {
+ text-align: left;
+ text-decoration: underline;
+ font-weight: bold;
+ font-variant: small-caps;
+}
+
+h4 {
+ text-align: center;
+ color: #999;
+ font-weight: bold;
+ font-variant: small-caps;
+}
+
+ #TOC a {
+ word-break: normal;
+ }
+
+.subtitle {
+ text-align: center;
+}
+
+div.autores{
+ margin-bottom: 30px;
+ margin-top: -15px;
+ font-size: 0.8em;
+ }
+
+div.autores p {
+ text-align: right;
+}
+
+blockquote{
+ text-align: justify;
+ hyphens: auto;
+ font-kerning: auto;
+ margin-top: 30px;
+}
+
+ blockquote+p span div {
+ text-align: left;
+ font-weight: normal;
+ font-size: unset;
+ }
+ .references div{
+ text-indent: -20px;
+ margin-left: 20px;
+ text-align: justify;
+ }
+
+ .citation div {
+ text-align: justify;
+ }
+ .assinatura{
+ width: 100%;
+ text-align: right;
+ }
+
+ .assinatura div{
+ margin-bottom: 0;
+ max-width: 280px;
+ text-align: center;
+ display: inline-block;
+ font-size: 0.95rem;
+ }
+
+ .assinatura div p:first-child {
+ margin-bottom: 0;
+ }
+
+ .assinatura div p {
+ text-align: center;
+ }
+
+
+.figure-caption {
+ text-align: center;
+}
+
+.contador-figura{
+ font-weight: bold;
+ font-variant: small-caps;
+}
+
+p:has(.btn_book){
+ text-align: center;
+ padding: 15px 3px;
+ box-sizing: border-box;
+}
+
+.btn_book{
+ padding: 7px 15px;
+ background-color: #00C0FF;
+ text-align: center;
+ cursor: pointer;
+ text-decoration: none;
+ color: #fff;
+ font-weight: bold;
+ border-radius: 5px;
+}
+
+.btn_book:hover{
+ background-color: #4ad0fd;
+ color: #fff;
+}
+
+mjx-container {
+ overflow-x: auto;
+}
+
+td mjx-container {
+ max-width: 350px;
+}
+
+@media (max-width:1305px){
+
+
+ td mjx-container {
+ max-width: 300px;
+ }
+
+
+}
+
+@media (max-width:1290px){
+
+
+ td mjx-container {
+ max-width: 270px;
+ }
+
+
+}
+
+@media (max-width:1260px){
+
+
+ td mjx-container {
+ max-width: 220px;
+ }
+
+
+}
+
+@media (max-width:1170px){
+
+
+ td mjx-container {
+ max-width: 180px;
+ }
+
+
+}
+
+@media (max-width:745px){
+
+
+ td mjx-container {
+ max-width: 200px;
+ }
+
+
+}
+
+@media (max-width:615px){
+
+
+ td mjx-container {
+ max-width: 120px;
+ }
+
+
+}
+
+
+
+ @media (max-width: 991.98px){
+ body .page-columns, body.fullcontent:not(.floating):not(.docked) .page-columns, body.slimcontent:not(.floating):not(.docked) .page-columns, body.docked .page-columns, body.docked.slimcontent .page-columns, body.docked.fullcontent .page-columns, body.floating .page-columns, body.floating.slimcontent .page-columns, body.floating.fullcontent .page-columns {
+ display: grid;
+ gap: 0;
+ grid-template-columns: [screen-start] 1.5em [screen-start-inset page-start page-start-inset body-start-outset body-start body-content-start] minmax(0px, 1fr) [body-content-end body-end body-end-outset page-end-inset page-end screen-end-inset] 1.5em [screen-end];
+ }
+
+ #quarto-margin-sidebar {
+ display: none;
+ }
+
+ #quarto-content {
+ max-width: 768px;
+ margin: auto;
+
+}
+ }
+
+
+ .bloco-imagem div {
+ margin-bottom: 0px;
+ }
+
+ .bloco-imagem p {
+ text-align: center;
+ }
+
+ .figure p {
+ margin-bottom: 0px;
+ }
+
+ .small_h2 {
+ font-size: 1.5rem;
+}
+
+:root {
+ --cinza_claro: #C4C4C4;
+ --cinza_extra_claro: #EBEBEB;
+ --cinza_extra_extra_claro: #F7F7F7;
+}
+
+#tbl-algebrica tr td:nth-child(2) {
+ background-color: #4ad0fd;
+}
+
+#tbl-algebrica thead {
+ background-color: #dddddd;
+}
+
+#tbl-quadro1 {
+ border-collapse: collapse;
+ text-align: left;
+ margin-bottom: 10px;
+}
+
+#tbl-quadro4, #tbl-quadro5, #tbl-quadro7{
+ border-collapse: collapse;
+}
+
+#tbl-quadro4 th, #tbl-quadro5 th, #tbl-quadro7 th, #tbl-quadro4 td, #tbl-quadro5 td, #tbl-quadro7 td {
+ border: 1px solid #aaa;
+}
+
+#tbl-quadro1 p {
+ text-align: left;
+}
+
+#tbl-quadro1 #tbl-quadro1 th, #tbl-quadro1 thead {
+ background-color: var(--cinza_claro);
+ text-align: center;
+ vertical-align: middle;
+}
+
+#tbl-quadro1 tr td:first-child {
+ text-align: center;
+}
+
+#tbl-quadro1 tr td:only-child {
+ text-align: left;
+}
+
+#tbl-quadro1 td, #tbl-quadro1 th {
+ border: 1px solid #aaa;
+}
+
+#tbl-quadro1 + p {
+ text-align: center;
+ margin-bottom: 1.5rem;
+}
+
+.quadro2 td {
+ text-align: center !important;
+}
+
+.config1 {
+ background-color: var(--cinza_claro);
+}
+
+.config1 td {
+ text-align: center;
+ vertical-align: middle;
+}
+
+.config2 {
+ background-color: var(--cinza_extra_claro);
+ text-align: justify;
+ vertical-align: middle;
+}
+
+.config3 {
+ background-color: var(--cinza_extra_extra_claro);
+ text-align: center;
+ vertical-align: middle;
+}
+
+.tab {
+ vertical-align: middle;
+ margin-bottom: 50px;
+}
+
+.tab img {
+ min-width: 30px;
+ max-height: 70px;
+ height: auto;
+}
+
+.tab td {
+ height: 85px;
+}
+
+.nobreak a{
+ word-break: keep-all;
+}
+
+.break a {
+ word-break: break-all;
+}
+
+#referencias a, .tippy-content a {
+ word-break: break-all;
+}
+
+@media (max-width:445px){
+ .grid{display: block;}
+}
+
diff --git a/img/BandeiraInicio.png b/img/BandeiraInicio.png
new file mode 100755
index 0000000000000000000000000000000000000000..458f70085b163ccc513a3167328bd6c29ce4b347
GIT binary patch
literal 5484
zcmeHLc~leU77zQPl&Gm9B8;gE0$C>z5($fd5G5E8Q7V>9CKHHeBMA_215^amip4_}
zw~C-pEiP232nZ-bD@*mL2#8=saRC9v4FujKpyGQy=N;d9{mqouU8;?6`-GZV?*?Nh+bQcUMk~)R;mJ_7(lL&2}NQAP{qm-08xvC
z7>v4E!d*4_5@7tU6URzCd$~Q*FTK9skhL-3bh@AzBpMgHJbF_S*8iy8VfNLZb25II
z7?`5~ebSGb)w2!FaVeo?S46{X@vOaD!_HkEoZjH3L$51&;LyM0ax~{gZf)EYKK;?m
zs7>ZaEEn>Yc3>k2i}H#O`P}|qwRPZ#|MBxZ>nzf478a3$jcSdkKTv?Xm;s$5`;J~I
zS4R~3{LwyNIN@#4agzbvCsRVq3vL+Sz+iN?iab5JY){Yk*`PTb*sz=Bd&%9ZDr{Ab
zw_Rd1cGBg>xSbGA;USX;fm-&$JTx}dxzmt6HIRX26blRULw&BI`W5qn(=54VTpSyay@
z+0#Jz%&^zJy)TKC1$P>T7;z6uDlog;t&mLVWEr+WoN3v);V-Ox3bl{X_nZH;*&92G
zJ9=kyX4QRnX!><9FZM6&8EzLZZ*vHHMe^~KOJ}nJ%ji!}*T!xy2+TWki}iNG=Gdq?
zby1m@l3^2**|Xdinjt|v{K6B9QxkCA)uHb^3*Fenlu(4MaQMm8AgkMGWOG}q<<>m*
zy!jS-#bFLlVO(#IZe205!DdzP3;kY}-ikFXVG>Ni;q1niZ{HX{YB40{w`Bfm6#5La
zd1+?u_QH;%j|sT=*Wkc0E3$k-|4ByaxmS?`7(wod2Q%8+u@?4$uZpi;&^uTo=
zHgnEy#c*v*gBoqSXc5|8D>;5lSSBGt0vR76swHx??=Tn_H?yLHClVp@jZ+}Y;{1c)xV11tfOm5>bx|`>012Xk0JTIcRWj8qycU;<
zt~Fv39?+Vo*0S&`Ib6U~ra%B1kwzpFyw##;D&Ex;a8U?^%s{V2V-V;a3m>6U$(bZl
zOiTTBr27FS`d`6QWc~oNR{7cAVx8~5GAY-$yFkm6wqKod|8x=
zg~y|M;C*}&IfwHBUaA~p0p)|FhU6p)kxY_ENaH<}D(`3%WGtY+^-u<(r<4?kC}mL!
z81arqq^fVmLkQpx{_-e=SeuRjCLv-(f|@GPT`8Yz>BHu5KX_;;2p37@S}&CBPb^g;
z;YYGQiA|%?rZYYe)cphQC)V$C*BYZ%91hb<21jYaV|%gin*Esq87vYowM#_6fCV%N
zA|L`9LZCT2A_Pc)PzZET0D^R?5Te4+I4HJMse+_1qJcuei6RsSc7&;9geD}wG?+o4
zInqG_gOAph41s)*>_iq)A;vg}r3w++m5_LRR2nD&3gyfP`7{u8CQvCtDuE^>GYAZt
zGoL_lf*Ew7BLxvS3AIoHn7K%%kU(fTMG`0+A<3oTT7`yirU#eJ!c&Rlj}opJQVCH9
z^bClk0$Ggmqbf)wL6)f?4WASz21ujP9i7M^gGQq{eKZP26iT!gHK-Ia5u|A~n!+&A
zbWmy`O{by&S~;2x(^G*!Dw!fkCKI#pnxFuU=La%Vk
zcB1nc4BBV~KcFjRLRAc;Ks>@x9#O8)2Gw!}*p8KI{-@EzL?D_vpp+5F&V+H4;Ynl3
zk~9hMo)0RUe%`7D0F(Dj9`
z&tl-SjK6f(7rH)+fzLAj(p~>Ix=cSlOd(SA7f=lPsN~hPE(CqdGLid+C@~mwNb}Lj
zbvrIXg+?ki$J?mW*hbe7^Rvfr90p@x$M*6FQa5+EE)nCRFx7oMo1%-m3-=T*$qS0D
znbEO3BFCJ+2e3?}@cDS_{zM~V505IWd8+k|T%(S5HY}l7v949xioj
zU_y?)^g?&^g#`;Xnd2fBuEMR!>m8h{+_%DMWT`M*nBJt5vnO!z{2b|Et^0%(w@UW6
zF1liYneo%@j&(LG@?X)!MY`FUP2l{tw2C^t)9s#5x=j2JZN6q=92>tWO3$XIzPx6(
zAP2ayb6@21%n0W9lnNhb0BCCf83$0K!Fsw=Np8Wiggk_Uj&#=CJzVc6rS0c
zG1WMxf;Fx3;cnJdy#n)1E6W@<9^dR@Cbnj#xw;)PfXz1kahBJq2FsX!Ps=vH;?j17
z*GJX2;U?9bwxuH$jkxy8$X&dNb{h$_UDA~0rRx^~myW$7?p+0@ULUf)*e&`7SK-p)
zdvn0efa+k^wIyq6L~8l!O%+)OmpUUYg>O$Cs1N^oiJr3S$FJ>Ax=TeB`nAl5)MJoc
z;WOI>^_Q|=Q46y2^Pjvd(4B7W``BUex1bl_^)XE_kLPDp>*{>X&xM+J?d7)aRc1*B
zQ?IOS+%hCyyAQh3G{^tQ%icb5rnz0?fbR6Ol{2}`x&{HB{todkeI~iAJJr{0rJFC?
zU>OmS5;=Fn%=PAnn3eB-xiGlu(oNn-I`RAX?O@!q9ewe}*z>O@stzgxE#ExelGj9U
z46c7VwdNNWgV4S;_EkNm{Y6PfDOS%7T~hU_wUd+G_qgk4>Ep3;unD#a#$G1q8(0kJ
z2Ix*o)++yZbw
zPOJ`xbtC7?4+t{Y%3Etq#eKVQH?CVGUa4FHu&dMRL&OYnd&=qM7OT0g&R=t&7Jtqb-pyZ>}!O#j`xJK@4OH&M8I37=Z+L7Nt(x@8e@rz4|uqXu(hC
zF5kQCXA_Ql^Ht-}#i)ddi`Uu*ACI@i4rO##$J?J$zsY`hu;kou{+!iTd-Wu9()R`a
znXq71WnNyI!_*pVQP%T1f8N@L%g>vqwaTb3j~HJosSe>bd#SIPWWo1d=Y8D`U5v^Sdl>0lbO-4uee_te1>S)HS<7e)V+YL!~Vmhe`_4H
zt3K%~w5!JVm3~%|TQXGMX+4p5GD$9<@hEajz{BhDgBu9HrX}3T)`)t4KfLs{WXA5+
rYUb3o5^~S)(PoD=V`_9(^$Z&hHlC)kS<`4@}r?eCSpkeB!`o`^=}
literal 0
HcmV?d00001
diff --git a/img/CapaAnim.gif b/img/CapaAnim.gif
new file mode 100755
index 0000000000000000000000000000000000000000..09790378ef9feb00b0eea805dc95d418299ae698
GIT binary patch
literal 178391
zcmagEWmFtdw=LR015I#;;7$lmaHkuWAdS1byLaOd+&w^W3l1THKyXb+aCf)h-Y?&I
z=iGaLym8nPuS)G}cb6L_peubEg
zELe;yIXXJ>WL4^O{{ZMl+@D-*r&Y(q#5y}WZ|&{0oFXn)cLKRJ#sX5CErU88BiGi}
z5P;M=^T4y2-}?Fn+U&zK6s>8!lbf1aj&th~T5UDP
z{)n4LM9S25=Wx7(e|L9JiH0-DFrqOoXDTcQ_72)&9aac+yDV(cglb>DAP{`jnTqyn
z&An@>mGFR&A^%j&(iud+P=t^+V&bsNIR;U-;L0GkkK};>B(!9f>x
zZbmSEI=j5+{!|~TWxG7_r>(7{yRYxFvG;mh5u$tRd}*z&zTtRh?
z1QYk6q2Z~nfjN109Wiq>amXVo7||7p)H{X?DY?d?6@
zK5lJoJwD$4bA>=Wdh%<0Vlpi!(hqN$3}#o0dZ#@WoO}9nap}*mlkDD&fbE6Y*bz4uPpA3)KQktIP6oa-$#t0DylYJymsDh`E>fzpI#}pPRX*qqP^U
zg|)4{i#Yw+*YEVS_EzHby8No#s%~IwJ9~uy4{NOeHK=8PqouGFy`%)Kn4gHBvzxQE
zmpQGUvy+Rbh@UvUxs|JhwaCBuf5cq$wEv~zf9#%FYnh?4F_V;fk
zPH*SsC4CI>S4>pBP=Y;#m&pb%ggakgTvF`#mn4}!^M-~e=I<(JuN-#
z-Ms8wU1dfV5?#9K#$<5{L{GZ(Z
zOWV^+)B1mh@&Bpq3H5ig=F+tGboKVIwEm~g@IT;x`}co$^dH54(TG4?ExnzsUAz<_
z;`IL{oL2T$A~L)@U;#NkS$>Exn1@GJRz_M*PDbDzFAq15EchLm|9`NGE}mZIE|%8+
zgSG$PSjhhsD+2bgHurM%fV#Rm{Z9qe?OeTFJ?&iG{;O29y7n$suD+iC+1dXN)Y`+|
z$J$EH!_}GgzqUri{{L{#CnwF%D<}l!7UX#+EGWw@C(S1a;TGZr3qW|~1i2yf|BbQw
zKhpjG#c=&|&h?)<{vUPyAJIRu{Ac>VnEG$=zqoGg@{iyi|Co$~czJ$$e7L{6y}7=+
zy!d;5c6xGrba=48x4W~wwYjmrwz{&sw74)oH#;-^=l9gFpOX{gW1}O(LxThTeLs48
zzIS(h``Y=XqrI)QrMaoG;d6amZB2DmWkq>e>8Fz7qK}0I`FXiH*;$zx>1nAc$w`R`
z@gL%1W1^!XBf`Vru+Wg;puhlsKVKhjFHaA5H&+*DCr1Z+J6juTD@zM=GgA{|BSQmy
zJzX7bsFtRN`g=816=fww1$jAH2v|m1N>V~xOjJZzNKk!pu4;Kd;3-c8Q2ptU-h=TmDAJE+cQC|TN0QP^a0q~!<
zCIEy0JY!HQG!*rQg9zD-h8v3eqVX7%@)a6O20oDSIV=ySFyLZ6%fwMCHkFQ~v1(Nt
zjWm^wWpP`M<|{UrPvi+H`Yew$SN!}a75<7!sfBfbjnX{n7
zW`~v0)~%r`v%WYg<+j>|OyfV*#$#=DOYLYWg$2s(^($Zf9(z~D+CQ&-hv9}yD0eh$
z^u@eKGa2t_+!~_VVJ=kp(zH{V%;&f|zVLT_tO)#px~`-7;7_HNVTMX)>(N}4_E@3n
z*PH&I4W37<*t2bCYd!YOyQ<$h+;e-=-kPqG-TvMC^(o0pt*g_!wXe)^t^2X__G~>|
z1hJ>q9khSG|EESWclz7oZQ9(}$M+xC{qF8Af7bo{E_rwSfXZs-`a*1H=5dQ%xgI7=
zwZ9(Tj5NF+K{N>5h$M5#G>fG4vD1vAjUvmApw84QiD50@pN(Q}6Dp459;_se<(#c7
ziWk}yBKjb36Z0`q3XNPpP=bWKC|QA75kE;zpsFBMUG58Bf|?F_LAsvJ8@x0fpOL&w
zGa1FQEUQD3-5ePY{oUM8#RoQtmQ8Q={9R|ON^(7SbFvG9;>aorVbrsGMP!@g`^7%^
z)s^9)^oOj*ALI@{7ANVjWtL|Do~ta&C&)gi*wzGX?^=%fSw7lx{^f0K6FdDu2~`t@`W^X%Kjtnyjc&F+V@?uVPPv+plxSm!;+
zq$=mVXhX`UKZ3QV259i)+5h$v={o%#AhWIgJ4oq!{C9{pn*Cy!G0W*K?Pi2ZW>-JH|qgwS5?<)ql{@#Rk`bdIZE5K`xs@wY5>SHD#RPpf}?Q~t2`<-mt`up8{-_!fOqG-;C{n9L#hl9$B
z`iH~X_S1)>h9S$CHk|`p466x2KP1J?LCd=l!IvPk)D5K0jTI3!Xh){*vc<
zzM9r`eZHQz{rr5h?0fcnyB^K;a<`r3`f|Tt@%iQ9xc%(q@qCC2@pLukig>=;`;2&b
zx;;Z608j-2di5|6-Y*!cSP?SeuoMajEk^2xL9|zRJ%>bQNMz$hXoADi*cS{SYBOmd
zZAS;Fp$FyZTne?yvlr_EC7jDh3dl
z=`X_h1Q(*Qz>ASqnZ$G5N5XY0iqmbOCuy&g#RVb(IKOQW`r8SSSS6!qKqrYvrFvr^
z3>XwKFd8v4FjHHKo0<`T=+9l=n~SYPqF6a3A@w0z0I!?>G6Ris^B`D<5m`F9m|%oe
zh_72cY{v$?
zDfAm2)=-45een2tB<;NcAsy2&9R{W*fCSPMZWj~-+|z?FputfXT4LlJbCR*g|Hg1$
zNn!Xb;#ZX5RVzW*w7GbvYb>;*D6`qX9s&J~Au}=3!3ys~UugqqwaYpBX%$BFk>Q2c
z;UQ9X58oE>Swh_Et&FAc@->nf8_c30Di#LhP4K=&?#5)|PXq%ZDP^2KvSl9^g+5SJ|N{XBL+d(?rdf|+pkd~-=F-PAm%`&UQfOOK+DT{}ZYm`zAB
z1asZD{BI?d@FcrEN&#j;bdk6O^SwBX$Q%6|8rTM51b60rul|<$Ymv=@^8dg9s&)F$
zW{Z(}nY2+mMZ}nQ7KDL~-GtpSaS1g;B;WNCB}2}UpJ@L?_6S51dKU?sJLx{5<@C{B
zSrFIg83Wwz#|&^hGl#?`Bj0s&hw)#er;N{%qDdpVUlh*6&^2Knm3;cePX7}3#Yh`Y
zre}#Q01P#ZlJh%rB4{&9%`QdoA6Ch~sNM{rDV-~hcoYp{kaO9D#!3UELKk39?PA
zpBd76m<-pVQn>K_e28o{Uh}9CvD@#=i4{Ox_jD1a?vn+WZJiFR1WtH_@#o(X5F&W8b)|;u7`br1Xgo=3?_Vl=NOd%|9^F|K(+MwZgz4hjG
zxBrYKBQkln5P0w_QWpB^NBPii())FG&W6C7I5bh|!fpUyxtn%!UHlJ46I7*}`g>ZE
z!eYT!Gq*vvX(D&Dzr9oen?Bui{#eKev(Wwi65amKt+n?(efmLN2D80vromcAR7gIb
z5WipF2R-sjjLxy(KVobsQPO#vR^Y!M!d)U(>+%ZNjK&B0DPFXTm$c*O?FAwC!m6)=
zy#_7(VR^PeMKd`pz!Q=815{b$lb60R#gZX_RS~SeIDwB
z8Wyl0O-QE@ydO!<7$h|nM2aZ4Qv&(p-pI$HdzZe8AZheg8E|OnM|P6OZy=6%x|Ol3
z^fSGUeT|Q;tR06A4=Jg{6CR2~{R_*}BSx;ouOW+x>j=jr38BD)-|UXj;AzJMh&9TY4Fv}85>7G&<@3Xvbi*oF@D-Pa%?ul!-Kk#)B~GCxiD^VxwkJ&~D2rA4mJK2wwoCpH
z!rx(%+Z}SSu!=ckRcz`Y?2nHAs{<3Ca%A%kAQgs@e=)1mRaO-uO02}M@J*&F4)U;$
z_uVyk8xf1=Zpc6FON`L>A;k}uDh}ISfCAoI8wu&BSVY9^a5;MvA{*(FIx2eI4ZwWAr*ljxw*X3)zU=@6;MFJvc2_}vMTc^rw}hotIVku>KD)*yavH%iq2!JJ?m76S?NM#kTB`#V
zZZX;B6;>|;rZzJMc)hSrR_E6wL~aK;MEdxd=gu28`40DlBO`cmS5R
z3~O`E6Y2}PQ6h@;QKPcl$l_6Spr+oYB3^-1Z3So=fhFWb!lYTwWZskHACKiTyR9;1
zX0)znP1W1-_T~ymq;mnn@qAu^X_;1YEjDm
z1ZsEW6GJN7aM`{5W@0(Ohvp9XTshD@(rvt@&vxC;7M+KZ2^OMe}_;x2#byd
z#Gq8ppp>&bYpeXdQ&|ZiPXW67M^SiA(@?Q$Tz*mMd**E<`-8lCG*9FM*u8ziw_$CQ
zg-^KE@`^hWhU7$89mUz#&XqZFYc?O*I|+Z?=L^Ptd^v!*d&$@z7{9v5dvgF2;IH^e
z3Jw@4wnZ%3%wBsqIV9>fmJ&;UXwJd+Kg_}ZLOAQI6vmP#l~Se6^gi*m7uMf&QU406
z#?;R-c
zr##6bDw~z+w9V^?kO~;t@U2+XR5K&<0umc_k&E8gugx~%r-T(K5^aEzWBc=jbSlIf
z6VDJ132TE5q=o@{=AV_UQ;rwoaK;K!uNwjnsvJjZ$PO}rQ(7VCEpEBS;X*oWG2yQt
zK8x-vEMB(^%c^RN)Pp}%OZIV@#seJ
z+}<{l7soy^E2rsc-06K_(~rI!Z6ObACEKXCFvR-_O41gprECm7_lru%%S{Tzo5-mp
zrYl3ADjurBhdQ{~R9X@5U@4cS#0G$~9>v}rlnZ+`5g@f62nO)KYofr2@wj)cK5}h|
z2&E_v?HH>Ajp6%`WfUF4`TMO#mrR3}TE;}vr2;#|M62RH;LH2And>>2+39~QZNfm{
zW6Rq%ZYn3fHqY0|#$#9RSY4=ac>6i~!Ff?3kEb6AfT!l!>fdEpeF}K
zPHLW||H?7*+O^Cde_!w$8a$E303Qv@Bc;u~sk$Bfp*QDEm#JvH7*yD{5ihG3yEqo}TO(I(3rISCz_x{_;``gZ)JMY-`3jFd
zJFQ)-4p2%L`QN5k@-{#%q)8b+B*I9^FQFk{^eUz77@ja~~w$7&V9HwdSJH=U
z=quZz=QYKkZ)HhT#_*HBmtK&8s8N6IT;LM9eMB^DX+iJxmD)xu-b01_nxL13SMSPY
zXY1=86xKlp15Y*LI#)D&X9ZK+mhv|?^+hZre|E=IchEbYig#-4PICOjWx@Ba@T(|I
zr|o4z_PtY?wA-AS@^vfUcgl&x8c)dq$K+=DbL#379vNx$0
z!`r`wpkIGL?)_OBSNCeej-FWt_j!^Ks6M$oL{?#Udy~x2HKm^)L-wM68A
z)mEg?he_(XI^2_tp50X!q#*30JB&(YFF!_x6xkkTGV$t@s-Os9#vD-+)
zV81WbRR%rw#_RF;mELnyz)$Q&SwSmval10ZWM=$zg#>86Vr4_v8(6a#pYU!frE0~!
zmpXs5jP)zo183*tnc@nUre+W3s3V|aJd+j1g;l}r+1DATk&DJ3s^)i1Zd%jfzGDSc
zvypX4e><|AWzWpXny)tOFi
zY%j%mBh{w*?O0jOF|+h^^Pzc>GenYudW(1R%R324zL2delr0fXN#WJ4zkOR$FA|ax+oufMa+4CWh1*Br
z+bV?;$}ijdTicp05*j8uJK!BX2?^cqoy|`>CO8t_#Om)TcWpv;?Fx4tx_6yccU@j~
z-Kh6GB=)>a_IyJ2{5XZeD>nV9#U!AU!QEp1SF>;l@!rUS5`^)-Ve|X%jfr2d$Osu%
z;;5NI0CFw^d#>*Ln0fmNb_W{b2OpXeU7d&}c4Vz37W1gd$b%1yLYPIJ{0%fdiZ+@m
zV3FbOdtk2~N?-iob|P+??Db+f0Qcrt5CKmrkK#0kS&k!4m)c(gzkMh^9;SX{>ZHKL
zN%Z~n*wy#MEhRuq>|{+tjhg?Ia$rMTqkz2uY?N|B!sAzFM6}zTbK$kNjzj&*sQAfj
z`i5$VSLaN+sl9nXpK5yYOFhX;VKI6CA$mX=TIhNAecr3j@_V!7
zxLo*f?{8_8rC8GC
zlZq6}w24C}ITh}EG>KzNrAr~rJi#$MME@V?7@a
z{rp@vs|SjPhj0Ovn$Hh-&ks#BkGwk%nWj~Q6UaH=tq%%UC3-c#y2>6*o{?zZYhpa<
z_dnurTt8plh!%(bd^89vb7E5Yqvs8sNoa@CL_rXd+H}*(>!sn6kMeU+Uwg?5~8j=cl&hlj&p=8TEf}E2h8EuD4qFy`!8>&%nMe?+I3cPnFykE2f|*6cUN&
zw?Kb@2O<;+=?C=abHO;o`uWQ}^uw}cN+}-m^KLc+c|Z=TE(Hxo{TBPL0#+J-Sw=yW
z4!IMZR~C3A=K9QU+%sH^zsisbywh`c8^#WK`VAEGt^e67#Pq)0XyL+oJcr-)RH)eo
zuS@8Y?1_K2Y{;M!u0@MlThs5m
zf`Mj+AEAmY#x5jnA1m1OkLuNek)k&v-{jtqA>F&IuIdB!mRFwx@BZ%m{K+2V;+{SE
zYPz`lSJO8AxMN99<
zDGADTD`hOlYy>``DU|?fYQsH>`2H>-%rqQHR?L3YII#5+$Wb}BXsS?6ByzMXiCl~b
z3p%sDmU(ta8BONQSDr-9--v+@)NZl-h$aDN6cf}w;ixB>@n7?aj1l?hS$yEn*r>P6G#n?U3Bl
z5rTTuDz=yL67SNs&05`3JFn6hoj0zsUOm%cO#4;+7pl$+mJFGG7I93>_$^~D{T)ih
z@hzH=H1-zG_o3fV?M;@BiS56#xGJ^$P#~SZW%9dkJr#`+x5$wUrwD6iu2-oZEpf*@
z^l+wl)_y
zUQt_n7r2}J$w9*${;fO))kAT#b%$~JWW3d{YSHIg6`^jB`=D09LQ_v*$uHaZ2JEb}
zjPbyx_f=AhKlwY~ANs9{;P^4=%>!~OMm@Y1X+f#38K`oWr}HhCo=&(34OcpUejeq
z%wEHVQ_Vk?&q1pziP8nhk6~obXshd0HwSaAXmPXHxm3n>oFU~wR;kc%I=_2q6b2o=
zLOwo{WCTwzH=`x_1Skt*Qk^MMk#0w17JsR%Jhhh4w-6lz43cVHqnojW4&pZj|80Tm`SBcs2TfJg(HmKP$3YQFp^hm=okkJ7d(+$iz
zjh3l&Hk7#%MKbRY1{v4!e~ZZ(z-Uqa^GnZf>#7Lo~dv
zdh>%me56dy-7Yb+QS%dZLiSbQCq42-0q<&`NH#DCM6*KD%H%F~A|Y9tx6&Yh9FXDc
zU3aAWqTbFZ!+&bk*e*C`HBIxqEFM4S)exNRXY=LNX<+{m!KV};J;BDLu^3+U(XQ@y
zE^^1*{+!u8bFQQed@fHoCMTb56o5}jh$glq68(w$
zol~oP`A_6SIlOO=V-iU3E#7+Sbop89P2G)efv!e%ZnK2?ik0&lynJVk9tlpFSVu|PBsIpSLfH~cfZLwla6>1$HPkG%_>U;N7K?7ZuOLDtDVLdR{ibw?>Id|
zmR_F~N1T0Dj~_2%T>e0RvWjI};F!XmPb&inR(R*qV7&HCx$kCZG?E$;rDk&b_}KBP
z4?!HEGtqVS$su9pz07M@rBen)v~Fdkw?sgc5XK;`N6=j0k=;tcVN(s&eQvN!(;eCB
z%dhHv%#M?liqKF+Ta2nnm#1>urD5Nt%k*O>=v+h4_{QfTc`U^<=og9bIBFa~&*X5H
z+fhulV|T_mox36zyrFGYOKL7#>iTPsCH!mhJyE1W%hp4TKL$r6L*wHI+M+MwVe_!r
z7s4JQ_HN{HN-g_#ucM>_iiF$7ioXospT3F`_k&RSr5G49Ul?LxUwR!B
z`Sz#8qV+`3#(7fifL@jKo?e;}q0
zi75Yw6wga1g!eLh1An;h*R%6gdJRv+`Acejha{Y~;-_63<9T>cmGn@W
z#CIMd%=Fs&%U2N?VTx~J1sN#=FsWbgno@=nGTozu7~`A4q{VbJ&wXIsTCy9=Sj@Ko
z+yer!H!`6ywMlm@5sKIv?<$Zhv2%s6Any`C!sA{21=`JUxvZ-8$sx&iEcGSy0%iU3lhiiRN%WEftl)v;
z@`2j`W_J=BrR;P-zwvaws}qMtj;w@Nf&lyAE_t%#8yKUI0`FU*59@qu`R_r{^z}P71*qEV8YN|1wu%P(ITuw}e=7@2LuutOZ3?tL)Y%z?a
z>Flr=Kngroz9gQ^pc-d)9^cIf!x(~95JZ5xE+6uauNf)HE3b3XE_bDepz4a*_JDfa
zA}??A#|&F-Jp`w-@4Iq3jkZ4)fP1V867%pIa-!Edv_9Hg%k=@m0b-1AgS`4CHkJWt
zE@2sH{+?eO4Hs>mi`&l|>|yOQa~oUjioH
zHoi$zZ!9bR%m-Gb{*tlU^4fNcdt@7brv>sO4P!58a-bjc
zsPLPtm#2h`^$)nxxFN%MeVW-aeM1Pw_!v8arGA2X0yU@mUoFGQ_>l~O)1Yc8bv*H@
zN?>|P`1{w!&6vt~MWV^_?zl-_a6NuHZdGdQ%qxv`8YcOYfcN_-G0^8DuFK
zsWglJyeFvBV4u+BSkdG>(d2s8)t7aMltG))Gq45-!jZ
zsnZhe(h{4{5?|4hIMI@P){?@8N>f2)IG|v0C`1)1YYdfhhRO#+6%wF|1yH3rsB#xn
zWdf?Y0#!SKzJG?QV{2Fv<(KJNNxahGvGa0
zG{ydmRi(BWQ>GP}js?}MrFy<4tBy5sga-^m`d7HTA5i>G`wj*$@&*7wI?halNWW0T
z$zZO}v*H~{pzK_uWF0rvIoDtyI0i$mN8307*DFRxe0bKmYmQ4l+-_wq*c&FFjaD^+
z8oDzV(gn|k&ET4$-)HOEx9SE3>)qi20+{B5Idl<~#Zj?Ldg$DGo96QYk$TDANrv7q
z8ZvaC&;mJ32ikcV91Ig<=
z+P+~S=NhEf1?R_u(dZc@;mymF0lbCuYh__YU4T4PJ?~_A#WPYg70CMzNzTuJyeP_&
zI0m;t-{Bk`cn1e(!!608!FVwKWc_Hjg=Xsrax%jtA+(RiC~|sm%k%k0)hK&zV0OY{
zE4KcyGe)d8jNA-Fem*Czw}ksE96m5Z-hsq2tQ{(aHt7w+<&JP{)z$Qim<)~})%qMN
z;@MG1b}OUetLb&dn-eBUco8YBEBy1zQB)v@j@6xsndJnd8}Zl_Ce$cBq|hDX(4xiP
zRC=x}^HWp+`x)J(37z|l*_~^h+3VFPp*g!Q9VCJ1T%f0n*b7
zik-DFk{xU8l9SC++RWi*qs0=h(^AJ+Ra&Us
z!H7GwC$06Pd-Uuxkn&Ww5a4WWtSBAvWcb@z-N}IkZ=p^3J0u^eD64FwC4Lh;mreZD
zb&BjLTs@1)3?z6F+F{)y`5laW-E@-QBr(}^as@@xZTrZ3%ZVx)g9HE+Li5Q+%g8XM
z;j~Wf(Dso9fMBpDVlxPi)hJVpfQy9{Y+E#B*n5@c!76o4B;CK-jnJb)}>#Nu3-W@O_(4yonFcfAD+1+6$0l=kp#6brCxXEC%
zns~nE>9RoiqKDPJacvB@YcrMZsSz@mJ?QQN{RkZdwhS<}<|@
zW$NrX$Ji#!#*xGTUi3T#B1}%S<%UfyW^Ida(0R)B4l}mtCc~q+?OA+a#AY!gOx9s!
z`erY7v%wBgzvf7MK-RP26x_fDG)J|&8GoC7cn8ufwyneZa)>t!i5nPrvg=y7c1>(U
ze}fJx((SRHmsdxRUU%%#M(?_bW{BFjvNpb>IxODZbEN_dk=RF5ZTc~R$|da3{g$e1
zjH{?Yb@dK)gNIuuPAdg#@J#Daen+^T1v<#KBLnVzx{S2Gi&uD5UFR6eVbO05>Tc6p
zS=B}KBt-PKZHdG5H
zHWfN&vXirkYA!%m5bX`9mwKyJ98Imr#Gr8fsC)x14m=2%Gu@3biqiR|7R5dro+IJ<
zkgzTO-y>7&!`JO6U%TCr+RV`vjuQbJCLh;A>rF#Y=QdWt@hh&Vql{U4&XYO-
zi(RvasOBu{4!;MqFPUR-rA&?fwG1~OyFCz)Oy2>41hoaps;%wJ%zy!_G``5LgZ8eU
zSNIhUe7%vwsmw$9Jz#?~;_Ej7zA*85pG2wEE9(gFA)Tg3V;dV_sO=5nW+GBg^&m+q
z3O5-EOdILc1=Eu??@gGA+1s@Lbw>;`i2I24VGm>-6G5K5Ni4M+MHa2sWs#ROW1p?>
z6*E)xva5IP$XOl*?m$w@hGY5}C4EFAD)*OJb@9@J+wc3wBapxy3s)~7Z@>E#8yA^O
z?J%JzOuzetXaH`eU$bOj%lp7q)4(>@!1mCd3eX?$CVmnc3PCLYmaR;$XGqF
zZ+n5gp9Q}U!9w<SCdm
zRY&eYJboVv3!z1s*bAB+!uW{@`bAU7dKWnF8^nGW{>CnN#WfZ&_xU-b2lh*sl3FTw
zt^HY2?|J3@OX~jf=Fi8btlT&I$bDQPOFxlzzK5ikg{+|m@v2Al)1hougbWSAmWM(v
zeL*LmgR%CJsnzqTKoJL|h@qsg%g+e7Lg@SuG7~GJ9|`30j7Gq2*FY0R`9i|$w0}<5
zA49;RS!?%~elY&EpvUq4Uxwjidihj#`wPa=bT-{4pgt-}R5*HLviYwIX0R-e^=N<3
zE0$kHGSLJa4p*$dOO>*C`R_egeun6Ep4*9dC`}hi)_I&9ULXBC0(o)ZyiDz<`D@n52
z?_f-$tRpLkWfEsuhrOd;&?2ql|H7mo_6l8#XcQ|FF%v}hnq)a+S+BW%K
zSL{tAoRFiS7dX_mUX#kv=(E^0X;o922Lp3smCYkZ$GA(tfgG2^p>u^j^)zkA2}xZ2
z*S}G0r{!%95soeSyHzgIbEA)EiUXN~96hLDh0pOtE&HOP7KQrJR<}e%V`5lHRIWXyo-hi{BGT`ioZ8)dFHr^_GrmcM?@CZ~wIi{CHp?H%#($ua6W-_&4E)y<@@LDJ
zqdKim2g3wBPmSHQ*lkNRzqLuUNR^T|&}#9#djK1e6efP_n8KcZ8>8oL_0n-zlR`UD
zEUWk~Ahr}im6N|zptl+w<`fE|&`F_oT=zbdw@co0CTpRlAyZ};^wY*Fp%D_13v4-U
zc}IbL)4n*`$*0K&6%41pHq&uQY>7wSzW)OG{Z{f(9;*X>>k!Cw7rmwpGS)gG#T?CoD}1
zWQZZ#QD_JwfnW{sHiGy|r
z{Vf7K7DuopCo`gl;p5B^=W(@wV2?i<4CrG|NISwl7c6oGpW@
z)99rwRCFHm4#IT4?#G&gOwJ6XQuR)h;EMo7r)Lj@uquXJZe@lGv3%#thmwD$CDEfiJ(x;^T6}sR2B?
z1q_>a0`y8cnFN@??NZ6~U!w!_e;KYWF)7Q|Giwk8v^=xwfrS
zbcmp^qAe49O9+zWWt56Fub>FnR#`M_rqkMwAFt#k5cFa$lz2dKCks=dziy&i2BnLg
zL?BtecF#iD*q5V>o{X2NU}n-l>$UA-X%WK|XXP3q(iC=A9{-<}Hv)BM^;0Z!cJpuvl>*OlL*^
zJEWWc6B#Spi)ZIacnbZEkc-X^jY=%gB+)Ia`4Fn9NBC(m(unA5JwLO9|HWdg
z(3bG2_T<}7_jsDEB$)k3r-9K&rSm@UmV;6@Rczp=%U7i;uZip&rAy~8fY;x7|F}T>
z9M`;`iRrg?Mi3g}<3(#?sGXsB4e(A!)7@=fV|dYltak0xGc{kESX2xzqo~CI5P5L+
z(mN|&pnHN=q!1Pqb61+Z2F#}yw&xR^`hH_usgb+RLz=wqA7%9
zRt?rvHH6+qbQ_wC!-kyJq~DIS?jJsN+nJCiIR+)ui1ts0ny9552^Zu4K@Vms@l1PD
z(unpL{@Fm2bM(o5hu9J_953M#jXP1qYv}c(q&v-;>4%NR?erh=L~Hq}pk)ff^wx@1
z){x-Zr6_g(@g$B)NVLGwxn6I(lf1|NT56lK@A(a;W9
z`3!MYgKZ@RszU|4aOf%u^~VwjC!*9l1GnqTsw==mWi|)cK%)>{jTQ$gj@&
zVIr|@6_0A+{x+O1(9^CnL7sVmzo(=~_m;Z$T+wF8x~_r9ca4sHd~4Xajd|A7xcIqK
zqZ&Qu-zW27kGK(iSb;%bm-nj4M@7F9aULZg9XO5
zY67$K__Dkv$mx&$7BdCV_=O;v^&0zk9ItE?lb1-BWJZHlir30Tx8F9OxMal;H`olb
zo0=3NIOQS^508=G4x44NCii;ZFWcc@NoF2P1xt|mf>7{q+^Nc6&f_=PgWbmcIxj2!
zrrfU5tcQ4pjX&mbYlQ80XmlJks9iQsRWJWurTLy9!LM1IH-6S#`;9MR&xWbswhWc8
z)}Rt5Wl~_y|7urB>D#kavQYDe%fI9(%QWasGF}nX=(8U|sYpPaHTi=~LVrV?
z(nT8KHE7p7q<_uHP7`VISHVF3%?8yFRT9QwJ~+ZuxC&?F8Y1~EWk@#T!90RxBq9YB
zK{1?x4v5M=cBWoNrPblkmW5KFL6CqJg*Er6wI@<2oztIL!Ne`AK|o|fBx;2#+T!b?
zqSA3`;dHw%l!e%svf~8v1-dxDNp5+7iz8`k&$KYAv85|?OtpSWv_D7Qh4OS+3TBHc
z+op1*c_Quw#4<)V{6I=JZ6b?RLLHT>ztJ-0Ktc7wAldAZh7I|S4W|L>wKqud!g~2)
zW{@Y!6ysHx>PC>$=E^li8#WadK}n=)MEsXbP8mpfx+X)eo>SwP!f-)rLl~O{1ot7L
zTDY*;96~D-%e4zkPtSgbGcM-^!*W@DO~RnqLEp5X)8P(8iP&V3jv%{0@3lts=MWpx
zv~A&R8g?rf-_0Z(rW2^yzvjx6=ac9sxKS1ghJ4MCmt@?6NEt%=Qvvi4u#LIv)KI;6
zzc4R|$zoL+*+{<#XD|`aQe4W%*{h8DUrukP^tS5}ICo_Dn^Oy|AG&LjW(^Frc
zlDrLoDC2Bvv~BS5PJw&O-}`I1F04rSPzm)K>vobP1GnqrKP7lG%BJh6gtjnSz(1Eb_S+NbW2=w#Zfn8sARY&E_99GQ)w6)?Q$l|n9
z@DnfiSx|&nyd)~T*l0K&20}2_Ewzhe&zZu5m>@kRjxs>s8%*-$BzZALk<>DgM2Ou*
zE|k7Z?i-%PI19Mf8RZ^JSz%ZjkvVRPVCKYSHG66
zCPX6>637|xAr8yK110IEGU;O9(;{tM*o@Qyf?mt|{)Gkh3ZX-cW}A;?>HK=EvR_e#
zcR!rIk4F!g*Xa!}B%Bi?%?*d%Tt-DffgWG8(yjbWE)L6;)pF2rxnwGXJncc}H|l`Y
z93P+Ge2LadAVy
zUPhD(W-tM3>N!MHC8o;#&<^@z8M?seL&8YuPzm1NEs!#hGO)I1L;o1C8xRL9!m)Rw
ziyZuAlS55fC!p_yvo8>Ao$zCqkGUknrHTm#u3!$QW$Y6I$+Rj-(V9n9rn1SJ?MDlh
zfyLPRx>jX7*;vX69c+NL^uW>;>&Tue+1j_krJtPZ5nCf~N})d-m0Av~@AgV`7HJYK
z{7W6ziRqOWNfL!vvwW&)^^SzZ*pcJG{e>uiNVZdj$VfCZ^V}nj)uLK!^)F$&3}~kE
z!$(Is2hlzIa`7zE%WMe`2XcVJ&-IKYiR|_|kdT|r?=GgFPVuR`nCfS1oNkU~j1DqA
zs{80+zv%%YtQ;amV5X}uwumq`XdN2>T;!#O1KrXZ1$7AYla?G7r0WmA*o&mF%MZUT
z^*<_btA)@qr#R*1^w!D^A2-pXj?qVO!~tDg{xq=ZHOc{Hm7*h+*dUD6FcRl*YK{sS
z_CGQ(5h;KO)(_HnIC+pXCJaWD+=CGV#>7JOiISmk+c}5+NKn{z{$X7qGnlq?qsO~)
zT=P)ZB(p10o;JotzmmJ()ji_g%BdK^5q`cP-x9uf%HBh8l578}SFS35@J-sq?k0UW
zzd}tvZ=DF_2da@2la(}f3k*5FhZzLM%9h54NrBjg7!rll4?H~>GHVZWG5{+XfKlp-?I*(umBZ!dg5dd2(!-?q1y@)0UQt|ZNR?+?^f2c7hpK9!AV%cr7Hea3eHm}>BSERL=
z!un+KAmh^szss{z78#$rEj7O1bBfIj_@Y?oJ}Rx4`zQ8O)3d^uon410MY@l$v*gMb
zn{9LhY&}{B(X&jwwS)N7K?9kLL;&@jL2u1|TqUq{X@@|%3R{3>_j|_sIm4Of(>qQ(
zRt^Ojtk~7F;vXlsg6%6_12+HTKgDD`D!Ts;ZMHXsb=#yX2cPCzvuOCOZ|lFkpMxqX
zf#i%u+{sVvnJl(8TIp0*6Or$iTmP)EdK44Xi=sSsRC>LD{<46V3=qcX+G5CCJfPv+
zuc66Mkt`8+**3G?k2)+BEMOc~M45{&@XC8c}qTq>o
zqnG}?WdXX}1pRmo+DE@U+^2Ih=*)uY+c=F0+9rRZQUa8RuAR2t_nz*ujj!8?`u1(X
zbxfu@B2$eANj!*bKu7KE)s3fPMS#(9ng4eOmlds)nNIf9=K^_Z(6ZI<-hRI9KXkF7
zd!<2gkNgWWI*y}1kpX^_M_GQGJz=)C%m2q$?L#7qfW_;fi?OoJBK=w5`ofde^$eFS
zZydP3@9hrrF^LI%3}>&ctaq8qH-3rKXBu(r$+jp1jsQJD$6`@xn!6yeuS2hZkc4ra
z`|5HpojqGwymx0nWl!On%wYX<9+ze_-n>gYebOwW`>c4u{hre<9op)>rEc4ul0Aox
zEwG6CJEA_?hW{r%E3!`UTz0fO*M*zAQ6=nkC*&IL%i1%q6qvi}CPIAzm^%0A$`MFL
z*B2q$GP(*$fDJ@61L^v`pc)yq-Saz3YTN$l)MeMq(1`Oc4ciw#e(_~xq}a`GzJ4mZ
zY*xMI{O6QaY=bu@dobsmJ5d^$&qL0y&EF~MSiHG)gP#^R_X~4tuZ6%qZ`j29@HR8X
z*EL_#?#QToA(bWsIt0LFfqgGs#Y=$JWMJm#*xG)x`A;y30db)1acwTEMTw@OUH^V~
zYH~K{y6sNoE-fc>IOmFjS|lS-fF(NIu=LI%;2;NXD6a
z7tTHaN)AI>;Ko<`+LsDa+urWX1?vbBi_dE*Xcf^P1mtD
zeR~`aJ~&c$Ev+t!#ql9u7;Y%Oq?)~F@!LxM3u{t;eNY?}B>3L7w}XB#O|vjG(ST=b
zuSpLC%b4F5y3N9!O^ZRN0KwAnJFO}MD*H(Wbd1zpr4rF3F_dd%a4k}sj-n99ax0g--D?Mqw_tIMIMf&wwRsz`0MjEWV%8
zH=rYCD)Y1T`+SwfD80Es`#GkDoK6rUxInt|@!tG0Z|!IXF@EVoduj87-LdEYT$+5}
zVg)8Ti7vdK?j7H|KKl1NXz^F$CsX7`gZn0`d^s!0_qSKrw^li|{`cMi1zR#s)ot?h
zE;@Pn-ij+H;Pw1p?*cLQsldrC|Djn-`__K*y#m`Th)^jY$`Bv2r^%LnEm&wRg_dqY
zD-coT2_X?3G6M=W_S^J=UReXABcM0JU>}!Zv43@Yf$4jGH#Q0@?q10CV7>7yLZiN07k4Dx!l`S2FGO?Si8Hdb6(_@Y?nN`9m
zCaIJu8iB2cJEJcQyd9Lf>&YUS`R}J3lCBekfArWLH+F_)TZM#v_HXKnS{A|YO{M8dYtp_JiG=f+{Cv=GbENHp6WT-aG;@@WA}RJqlqiTwBkFBmxGJ3sPzpTk$yT^k$+L$
zY15s58%$hWOi0FG3&2$k+-r_kY|=hX=IedIw)cD)?N
z0-TJz5Hc%^-LS*zn(qBgN1yifY55QDR2e<6{E9v5eI4892N#_=&u$W<>iD24jT^yS
zEE);yLsyO&RH#?(nnzB7$ujITY(g^%6S)@3>j`c|Anu%Y6eU*V`iK`pwtns}E5flz
zNyQE#Ip9vm#VS-ckADzqIW~|zl+3y94h?b2QT(@)qd=0Dr_W3TVONPGNjyGz0#=!?gBT(gMbN7N
z`eBV?8Y+Kt!xy_F8^1hEIO>?v`2r3iwt{emMRHFGi93Q6p+3^2J2coN#v*)V<6NaU
zm}YGOmanap;VaXAG9@dkOnFxaGlrl{ac7@iy~_2;WhBRTPJGcHtu`Tn`2E!z4~tI|
zq4Wf;kWE&MwB3)_aLU`aI^6dAXQTh=qHdQ{v*LZ(GybTR-RDogDam+uQwom{Fb>71
zuiH~tTVS!vUFRy_&q_4%%Ibmpo~JisepFs_CB)=g90Ao;cuWm~6wr&Opd`DCaXahr
z)?ZE3*2)=JCKo1)6|gp$siIC3nv-ITu1Pnc^W`E8VH$_$gQQ})P{WLl|J|mZ$H216aLIhPOE2y>Ibzbz3KQpeTZ$S2c@!
zJh7l2w3&_j(AT77{!r~axKQT$Yw(QC-H!16j+
z6gh0R--)lcydp;HR|6PQF&CzjLBds<=KEL|orp2W7ggq5xl
zsA@H>-q|S=866a^q7E)jOy+HgaWpl4k6rO?dq~oK)&^DQH-)kO0Y|TX5$zdFxRg~m
zXr)Urp8dhpt>!D)4*|y#+z|U>7*!HP0srN!TD1DopYKSRCZ=}Ev`XC}8+9tGGr$BJ
zOG4=!nI=ly07oYdDrwjszYw@pnJEDrj{z9%%FR*tNhP&fvy5df`paB*7oI0^{&CBY(Mh3)0J-Tbs
zOLa=v5CneiTqZX)enw$vP(tz@dx^wEFPWx*4+YjL;49c`KGF=oWbqh8l?+(4w2qw~
zCSqtb2rHTvqUaFu{8QF?UwKRK8mi0rt`lB!k$MU0{UyzAez$MGR{ghH6J_;vWRLd&
zdjWPbDevqJ@PdWiS=;qt2TzIhJr-+5>pB~fb@$D#dA?$_Id!K@?~84+%FU4Bm)r~_
ztv=bE5H?YL>tE*&H|?9V(3|)J`q_OS!Cv~~i4aDRLMuP=meli66aa^lPNF?rZ)fhj
z(f(c2&%Ie1>n47WbN(@){v`QMj!EDO6AD-xUV->eAXrPDAm`zpGJ>ThO5d-D`tGq|
z?#}p5$B;+D)#&LmpfXisQpWua+Xq%5iQ
ze8MB|k2w48tpPD$FFJgd0kq1|W*@l%NBYc2<0o|jLV;o=0Hy{Ra;cVKY&84hsSyLX
z6uOWE2w>-(mK%bk%8QSfCP5bb#56JIO7Ej#S2O;}jcGH(Rr?^_Nr1=Lxnum)lt{_7
zsAF?$Y`OCR*1wk1%j?xgwB5FmdMm)~I%1Q$5bHjxCqEXJna9e3vgUc
zu7(K7#%B+>F!<2P^fnC_IYY&wv+4AHD#{ti1;y4h@^xvE)%l>5z?K^G-WV5?2nhG~
zLQzPqiSCWQlMJ|IO(rVp`Jc&?NPB0+wyp8Ev^KB3>YbV1hMh7kvP!l=vnac^@VZkU
zp1-gA_|R(f;*viw2Dnc)5c3yTKTfsmTj@H{D_U;w>0Qc?mljVSsTY`N)^LZ6z9IR?
zp4ID0Ji#~R2CxgaIL=1;*@7qhYS9XiM0R^-
z&&C|&r!gQg9g499_nw@}oVet*{FHvSf_P?x*dR?8`W!ez&>DSSx**S7o9UhT_r|j~
zm)ixaUw>Fu=(({^U@gSYeQe4K(5hRzjTH0L?zhGE*+0zu|K3ZJM8W~}LqKHwCmW>~
z>EgSmDVnxHz$6!V2B^#f#3=xVTJE#J5*`IkRf*%3U=RuzC7a}ZfNyiZaOq01^qq?~
z+$u+4mWV9z4um-dXv4ke6|6}IFl>cuuna4f;k#4eVoDrKK^R&6w&gZu^WL?XleA9($`1K|q1EaRxjw946A5^q6L{`9j;WAhGvlzg+A+P-Np8VOUO}y+3~CyM=K9Y?%OI9L
zhBr=#y-pZY>}ldch-#ZhC#He|`o$Q)jJH`B>Jy6jUk;!v)LLxk;+4(tf0Fi3olqV@
zlzT{OTH~AFn;TqDRlAw7@9Ka54m%h=SpBCXR;j%)b#lh{3yJz_#_*n+ZMeu*9-I2N
z!T1QGq~~Bgm1O)OkLWD~vl0EZ@an%5{I_|#zJ8+G4I}gJBOct9>Y4k9cSye7cI|nD
zOp4N)1+yS^^Z(t+Y!K)Ns#|PFwBiqI<<#q>*XxM5Dz+i2Uu57gpi(O%5T)2U1@WT-
zkgnEd3BEKfgD)=;#;<1CakCXNY^*{jU}l0XLuVoITnv^gt!qDlPT|^)A1Hb??Ic#k
zCVq^6#3fdL(yez$(WENnB#L^|hQ7Q|y=wk@B35Zpbd5JLzMbEs{PqN1Z`|g6run+N
z4nYgcFPNBH_BgCnS9xfH=XN`WENpzi)YYv2$Al*$b#t(X%d_cD#$`^7Zo3wW^J;dU
z-&ksdK&kHx-YU#x-Gbxv3n!hIJZ=w7wT$qDqQ9{TmHt^3$aGe5QtHh3<><7+vd4YZ
zVULra&3?i9hbj8qpf(qT#$vP+sm5;Ly`7oB7loQpKR9_$$)bhO2kf}b*7;VC8A}OZ
zN;|~d$-sQL!v18AyYVejx93b@JubD@{t~O6N
zqR(m@_dufG4yQB2aY9VAW=}7FLM2;jc52Wg>Ih+Pub*|2Qi~Kn=V!6j(NBxvpQaf&
z*lTqdrQ6LQ!Tp}M80uyM&HXacXqn}`FmFQ{ZWvLyi&J+iQH~DM43@zu0LE1nmisYJ*VCe`Ee6P0;PcTfZjk@rX1KL!)7T;w$nCbX_DoFsXd~(TR1Q+!b5bZP-=5p{*>iG2P(uXQ(ws@6neaV_NX*Ebn7<
z9Rz#n9K9o}pUb81UR*=OJeIX*29Y1Jmsa`%Y~ozB6c-32W;J4pk&<9L=GM4}$Q^7T
z06($WyPmptbVzHM`l$NMhVSKDe&64+sKrH1n*J3T9*!{}(G4>N5hY(SlCNIl+r3S9
z60(Uq_zL1E0_95~c6x1{BkFD2r70VZ?{bv*aE(lgU4uHnA@=pY&vqRCB8v|@6H2~~
zJRD|)JAGB=QGtVTk6>+H?s{H91@FMQ%n?mp!uklEoftxW%qSW|axVgQq4!xN%b3qmX*R~Q^J3Qf&C0p%l8a_YNq8bl}S2wjDm7y==>`~FSc@b6P89x
zy{B_p)niEg@FNA>
zp~&Chi}#~|!6my^Hmcl4u(J&8ukZLQ`U@kDsjklsy
z@ub-BPH2vi&BRO)>6(=|*reC_;>}tviBZ;ut-KA(N1()X*g_DPB16l#Kcb{qu^G$*
zFj3M2ZHkh1B{&>&B{b3H#VmZ64i)Fxk583v(XEJkxZ$65BoYv#wd8H=jk&_WR$FR5
z#LWdGMu!Om*IgY51!JYabr)p^(#cQQI*)d>F3MzR*NThPl=IPaW#{sx`FYq$R;D4t
zwsPso$N}|XTT5AMEU;I6Cg<hjsty9{>C>Z^BJCMc2@ze|1X?=85yc
z>vYXN%6Vo;$V&k>T0tLYgBK5A^XYn%=dcEYSW$g_+E#29SLYB<+(!943ShXlRjwdo
zcf@3BBle=rg+~;ozXackRjUY!BM%Y|hv2>H)rb1Zzv{N;Mzt2`|P9{91W9zOQ8!*X
zUvtU4^7#LBr9ZDlIHUp2jJ-z%x^5&we2fPB@njSi8$nQ&QnOT@Pl{q3>$8J#b&9_p1An
zZ}iaW%lw}|xr>YLI)1NnXCg#*;H6g%%~JqO8DPuBnbl&miy$PZqZ)vRZ$LyvpPpjG
zZ-X8mRR7iw6A>Vy7@Gnd=(c%4tcAl(_cl3#DbkL*n!xbk)QvL3%7fSnyS;0s2YYIU
z?nU2vP`kcar!DMBuEQS7E1*_2sAoH0uzRC&mK0|r#SE;`b0ex(PUDzTXdY?Es3*J!
zrm_zLQc!YyNnQX5yi=$07y8d6!7oG;lqcEEQ`q+Fr^1I53zaaB6gQ9FIu$)V_D}V#
zElW89!%rh$2360M=zLQ$dk_;Mz*kE(rVtgjlwd=_@DN>1DRuy#e{}lVGCG;3z%5n-
z#smbT2k6--lpTY`^9o#_Y!?fFXQ{A=`q+uCDOQ7>CtuQDIWJhk#od
zH)^q7215zQp8tOOeAC+vW&IV~ypJCH22x2XY=D3$aPMW%T`{Ic2JyJ!1?ROYlrPcz
zleV(h_7NDFYd;{ZT+3Bw>c4FL+0IhzUJ$=x4JJ;{I%CVDPI2MDPR#I7_9-qwuU~iH
zx99&D&E;<11U;Mdj5unzUUe_sz^^{hwf@0F89HLgD?R$Sh8w^BJbK9Wg%+@)w^k)z
zw#OIAdJH^?Jfsra5BGA5N&sS@Vq4kVjW`8iAPMV)EQvO?F|P=VPsFbzr&aFKRfea-
z_idh2em<}IPhd%uLT$2S+D)`vE%spmMqh0U?`5dcQiedRu`TB>!J~I>yeXi@
zr^Msz+xy0rMvtvWPF$4UWB*T*F*9e>oKx$wYP$kg-aSSnB>Qnka5naJ?2VXHkxp(Z
zqhzb?NKh$3o9C5L?@KOGLmiM||9QnyHW8~Gr}?r*VUv^M34qa5qNz?@u#`ArmtSyh
z(oNFr%I6C4_9NU}q7ODkRDa=I*rFqr0`#LN0((?K{HV9jxNqM@OsZ4sm>;8Z7EzoCUd*q4F-$0Y@;=WWj1C;r>Io
zC=npE!UfUT_9&kt#RB!Z!o=#7(>D@p(i^J6s=VtpaA{4Xa(!`t%U3aq7tUvDBt+1!
zfp=x&V=j+|Bn*w%TT=uxxdOUDTI)rPS4#!`b7>ZmPJew?gae2hpyB;A%sNc+XlBLI
zEy^Yay+&NBh;oeqZkFh>Ja&9b>>MBlq;?G(>Bj_jZfYfRm=A~j>n;_JSn5%V0e{^s
zoEU*~AA2x=5obZ}9CNv;u)0+uG2mdx1Gq>AW)(8cL|aU7=~xq%MV`G_0^~zfGrEvy
zVPGcgC}T_>X9x>tMiJuAw|d>$TZ%J=^|p05=%dMa#y~ZBO)>MbUF3`RG*I
z%nw7pLQZg&?A>ChU$ObEuw_-M$rlZW+V6S943$85Q-D{DAGE$Vg@tv=y7HBgR_h=P
z3Y>8yJ|sNesdE{&;R^_<+?43J!UU=`@&PEjH)vQhaBmsoZ>T3fFzV@WSX}Ymq=q_`>}LDs3Ds?NTEG@MA#
zDeNexDDz0x;ESg;_=rlRM6GyU|E!S!?>fSSsk~aWkb(N>f>OE};dgsZY^XCtSE^~H
ztJwm%Y7=x#ZL-iwiwoP$y#QP!LXu9^*xyPDiiR)pBHN{MI2JTyAEUEU>fSVaoo^m1sw9^I+kCr%s>pcOy@>nzeNX`#jAs9^QmnCTkv6%Qze!&(z1NFFS)$4
znJNKqZs`w`hFr-p(j}(KKKSY2-s?J9-F=HIC
zlenGzIC9`GTMh+^xum3<#o#jSdwrujPG?>7*WN9xzZ?{YF;|XT`+GJwgdGDb@k+lL
zTrbvTG-Re`Lw2gTT=TgD*rZkvUCl3OBlH8>yqUl0Xvk?!iuE3q@#2suGV89tC1pUz
zrv4zr>^j|h>QvgcjcSJk#RrTdHrLU9h}C}LwA^#yEDF{AzmV1LtO%hRmw)E#SOG?f
zHxNnW8q63+fje06iBsiuRj;}He=qNai4d!%N9@dZ9(2=<
z^XLF-!%AEPq&3Pv-NP+_9;*#+7j%yFjvT<$Q0!E)IN&yXBgT}T0gZ9Qy{l%gIHmX0
zJRj?t*7}cG+V^I`o@_GxF-&8s?BF-6B*0WGB~wV6-hm|YwQGR-oyb(|n+Ja6h=*ZX
zQifVI(A4>MQMyl;{}KDe(s)^Mj9N|P_G>=4*Wo8~?k5##Y^F*#JXYK*ANZ<~Sa^Br
zEs>#gKUH8snTANc{X=%N+#SvL;2;7+M_XaFLMIt^k|DjXW?JtTBhOBMP4Zb!&%>-S
zWY`w%d7^23e&yJ$w^=9mJasDlTw?vBw;XXT-%tA#SY_O8)G43Zov
z#ig;~_{B2%C-@N!?{ef~;ABLPiyQG<=er^GGdOqcJ0;&rkMI4Edgx5;2hSRN;!9FK
z|L60+ztLziu=kJ#nZeu>Q|Q`nBbS9}*xR!2+T$J1@>V_?a_xGyU7`)+--+&+H3G%9;5+dgWz|W?YzG
zDT0fap|dM#Nk2dPZgQqv7~>A#wppQ-lU3zkY6cQKY@2%BHgA66F^dz<4Qdwy0l0Y)
z2|q6GEs6Wz`)&XJejVvGvD(b!^lCrYo%p-w&a-cS{`*HOqEze
za#z~X7gb?7fGt?9D|er|4?mxAn$pTzX=3jo55jz2*HR8rc~Pt6Su_snPrZ=~h1ea-
zTGv2IRN#-xv8s$57k19I?YVBPiJzTw7ET0rZ20Hm_MLxMi&n8$0hJq8G<(5f$1|GI
zhZJxf7cxbZoMM5>$q0um!$7U(0C%TS&7K7O6Mhs%6WxX
z;?{JkA-2~={)}z=7O?ak(0YZzeZi*5Pp}fl(4#^5xj@NR3C+j~c_nKGGoahi8`-zH9ps4sb!P+}x
z%Hsgv8KyQppCVoN{jOi*eZw`D!UHVmr&DO$`oy6r;oEiQX>ub>3@J&n>~lT$Aj@;s
zlKia)e~!P>PJ($nhmV!)*SQ;eoQBP%U`SmV@!vCktuFj9Qs&)e@p9*e3zm-G%(m*V
zwhrWBw$bnwfYOu$T+Ic1IqZZpWnUHs_X^mroeS=Ef$pxO8Viu^Pr3!w3x~P$Eq!r4xI69>#DLF6jD>6Pe@WN*3a{6VXy$x$laUUjZ=|fa5K?Sx@OcqeiS!LpDcW=
zh6>%W&xH#$@OS&n`s$c3dm%FSn`L)5q`jq*{79~*6yh(_V2MM-+vd%0yWn>jnA;J?
zTL8?@dr`VH(nZB#*TS4h4)JS2*&BA%jDKA-c*H~P(8cezMu(Nqb6bd=YqxORR4B@;
zC@Nnly2lft_#f+x6EJyQK^C2c*TVzfp+di2fRBD(^ffmR7P>~1QiC(CjMq1~*-;3)
zt)oIaH(Actej0aSL$2M9#-ADR3bSJ;X`me!J??6Ah)PW4;;kgE2P1Oyly<&|taEQ~
zbdITdQ&sh@aBWcQTIn3TfKv$zfyb+ijzdsgY}5-V-$IHqBMEC15OvCrA`dd-FQ;=*
zS0X|!xsc9F-$G5-%*tAVX=DH&@}QBniPziB*ZwjgGJAc@q(%$l5S^tHXS%Fc32)zX^rB~GiupS=a!zuPvLEz<2I<%k|2TkGJu(6{TI@*s
zsdQC79eC#mZ)gYNTh=v%>d^Sj+KAFB{&JW3ZQ4>?3kN%g5KHK%Pe^q=d5t9(|0x|k
z{UJxqyL!+3xfRE*9M!_DaHKa*V)IIW9DM{{xO+_)3tz?MEEd?_%qBDK5)
z(C&mInf0DYc&P-E%3xRmS<7HO3J7-YztJiFVY%mHdvCx2wKAJC0ew|Du?UX_)41r5
z^O|vhl7qB#{rn<3+O<7+14@q8$)=-1&GGMMf}Uui0wi572>b9$8{ReU$fJ{{T=;n6
z`fhdq-}Ng^uW^}KA^E-VT>x`Qic$eoQYlN^JS=y04MXc%&`~dXaTfgI#YxNr8Y2dv
zP>Slxp@fTEytN#qPEz~6LKJxO;)f!U#*sBF>ur{ChknhX{AS^Q8E8}-+Kv+Xx+^G%
zNpk7Ur*^XG5~=)bb5b7rw`nB76(TnqjUMs)4hB;@algY*&vvkHqfrD*Fl8Pdqc3k8
zz;sPnYw#}!e{BnK^0yOx1gP%tMH87CiKRO(o4
ztg5UVXUiZr*p+EZ)>~X11^t5Ww?K!LuP-fY#i0rRp6XudH;?YhF>2ssm6oqO
zY~Ip9Vp)!G13F;`DLSsA%eV6ie`D5f+@{AaEtD)JO**a|S(f-kR7G2hi>EuM&*eA}{suiZq
z>{0TigLn#_=DgRJyZQMB*hJTOofmi#pg#sNG!7w&L&)8+V_dg2Nxp~~Nx_(w8^6zh
zlBGEKPe%Ovn`Ox>j{3K43fJG;9QONVVL%Kb#U3Zp@FD=h1MEZ+1O`MlG`N|~qbVHF
z56Rc14^TKTI!q_~F{CR+(>0+0E++eNP^D$4v&1b5e*@C{_emhsz`?ARdGnjPmtd{#
zC3ZCc-62Cor~)&amY8qm)_PY;$BoMP7`5F?*w^=@l)RmfpOWAF_x<<>x3KN`L;|6y
zvS{p{dVkF?&9!PpRdJvTA9I}-d67gO-ned~4I!kuyxk>~F}ulP&cC#FBd|I(IScfl$879qQkJ+WdB%^L!R>$oPFJ
zX7|>WAGxeTR)K{C63WKkeHq`isZf*Y^$81JUN?5WD~??{X8mD!Sqa9ELTvT|?GfeJ
z7yv&N^@&QT!R)RzsOjosKivRg+b(ydB*(Zm`@S~JU@W(1W#z|15<1WaVAiWcyH~{O
zl6358uu>4Tic~}X9k~ew;ZXOwnXrXoU4FdIugo3m5p$LTvXGEBc|zNz;3O%1dH#d@
zX?v(w_E)~KHDKZkBwKnfVd^TA{(jxE>;tNf1}1WWi+m-|(By><>y-@vJ@jf!GDt{(
z+6a(62L-0NIMXjooXe`_fLpkW&GuZdGGD1OU$IaHF6pfc(t3M?lk0OeA2bKvo&(meai4;$xLd}u(tza<(eao
zbfm*<3N^n(IAWgBnr>abOH`ol!6-{aDF{GiQ&f}y%n5M}mtT*=cJYeUN%OWG@9$5ks9sYi`Bm7gChZ7xZ0H
zaZ_x4S@0J__k>On6>zqUV2^ALZB&*bhW;mTLCv_5bv`uF>QX=9lm3@S{m|eH^iinv
zg$cGc0-E!%rVQgag!vc>(>WNJgDENHnaO=u&AYM7BSP)0xRm9=+RzIwWTJqiB>66?
z&9vDdLsK`Xkk?tFE+&HlCySW
zF6)vtX#3yQmx@8CnL{+(H@|gd996~fhz(*a-`K0L+u7+;r3CfM5h=fkW=~j4Dj!-%_kUnwCU
zFiAi)U3FWRY77IA$|BbyyL|zCTo-}0<2TFPYAs#Z)py%;{_f^x)Iqhql8ntcH+EyG
zhqKr=7w+yBRYTvdhrS#AcHejdZe@}``TJQAdzWH5HgA%s1ue2v9k?K0!uF$}lW2Gz
z=SN#QY!ATN3ManA=HwJ=`}Qq5dAo={L{
zkH^oYInzYXNI^=Y2J~cwzb$%e?&@VG~H^~XpzPE?hHJ=^5TvU&#u*M
z_;2&oegFH5Hi($#4&$D9n)S$&y
zT0u=>bdhgsg$8pw<#}*aVh3;-L^fqJi=ZJqg!=LG(!mv&8BQDw*?|cNlZjR
zM9Lu}CzdS5mJ}^Vd((<&zDjJ0JCKj(M`8|_5vJO3?8;u`;I%O!AR>%%;;13w0AQqOjWubvND|lw=jw
zi8*0k6I(-FrN0LRpz_If*R=xc&vsS~em5L#Ae+&@F
zMF2HC!;!)uXEbqc7R9%zUq2Eye73`n|2*F_{le>(OX-)C%9M2j4y%cJ%vPC}95LSC
z7gN0GxiiWyQTf$RNN>ZbR}whZsWP;>ZaU&2B^mHh;5P9E7`>d)>=z0<1?}s>^2hg9
z-L=r8Cx2yc{O3%d>(#9iqxolh{_}d8jIi`{s%e5cy)g-P$1x0x?-I6QYfGU;opbWoahC83TG$*eS|waFxz#S)(M*w(DE^;-V54
zK)cbQg=Tj3G{J-JTaug_x2cxK(&hmws7}yAX>Q1Z4=Lf7gg7dep&vc3k!(9?IfnS5
zCL1I?4Z4&j-n}IhDsoSikSc~i6b)g+lu%0qVb8t|G_#kPDgC8m
zR!|D8WpbKf9|6|QUMgq=a(}#0Q?0m!a^jq*zNJgo(P~Bfc{I^0+KidKl`o3YMTqQf
z^FH#6x+Yk?^GNS?&xKF7H5@q@y^#~%=D14Gk*>;Cya4ckAi_qDSUQ8mI}dRlYhTuy
zlEM;{q=1SeApCG&>Or9ibpvUt*3LI=EG5iVEbarWl>q|SAh8QSyoD;7tlVQm@;*VJEJl={Zk&P`xn
zIbNJwwI=D7_!&4h7-(p~J#mXu1&zv`!qOPr>z6G?t-cy19b|=8TZL~WD1?dYM|Y$G
zC~qP~ML8OG!WqeJ4@4K$WS`I-8^M(~tUhFcxS;&VObtyMM7HgR|FNs_q*Km)uL7pFy9t8e(ctAIW21hFvJ8`?Rmk~pzXrG%nWSSe%0kzXJk>J!yKN8NiS*L#H
zVu9B}j!-$83w}(Q#@Trx!`VD_op>2sJtBjdKt8#atFc>!YzBun6Wod+*Zw@`9Cagn
zycGN09jUX3hsmwjK)*Jy!h+O+LtZY6Rug!BE7wxX&cp6B0M|LnbK{E-^c*ux6R+}$
zRo@og^pZ(GOrDe7cVq$=rPKc^qzDQ@+)O)fko+Wwh5?XuJK5S{8bP@|p@xdHp*l84
z;VKa7u;L
zimB`j=4+ct(Lunfxr#2dtBVrRA{FwsrK64=p<Ew4o6FqU>f3Wi|M{%G%jVAuJuD
zp!oAnWRb(!y#sW7VnAusLSckSN2^LG`v7*clZp35)Cm)HhDvK}Uatd^_P?!*JH`@x
zwpXwAi>?e;psT;2f}hB)Z6&Y5&RgeETa$I=q-*L~^bpbrsF36WrX`x~0+ju1|$}6V8(Jsk7bQZkkD7x5;mnd+2
z&Ov9ZRcNvzkeD_&M{y3iae>
zOk~u!4U3D%IIF*MDcJWuVdb8Smw!3#dAG5soTYbP@5Spq \n\n\n
\n\n```\n\n:::\n\n### Como jogar\n\nDivida a sala em grupos de 2 a 3 alunos; cada jogador, na sua vez,\ndesvira dois cartões, um azul^[9](#footnote-22){#footnote-ref-22}^ e um\nbranco. Se o cartão azul traduzir o que está escrito no cartão branco o\njogador fica com os dois cartões. Se o cartão azul não traduzir o que\nestá escrito no cartão branco, ambos devem ser virados, permanecendo nos\nmesmos lugares em que estavam antes, de forma similar a um jogo de\nmemória.\n\nAo terminar os cartões, cada jogador conta seus pontos de acordo com os\nnúmeros de cartões que acumulou.\n\n## Considerações finais\n\nA matemática possui particularidades na sua linguagem, sendo até mesmo\nconsiderada como uma disciplina alfabetizadora. A linguagem algébrica\nexige um acentuado grau de abstração por parte dos alunos que,\ncomumente, apresentam dificuldades. É um conteúdo a ser trabalhado com\nos alunos de sétimo ano do Ensino Fundamental e que tem se apresentado\ncomo um grande desafio, pois muitas vezes é desenvolvido de forma\ndescontextualizada e mecânica, criando nos alunos uma aversão pela\nmatemática [@pereira_2017].\n\nDesenvolver o pensamento algébrico é algo que pode ser iniciado desde a\nEducação Infantil, para que, à medida que o aluno avance na\nescolarização, seu pensamento seja potencializado para desenvolver uma\nlinguagem algébrica mais apropriada [@pereira_2017].\n\nNeste trabalho, apresentamos três sugestões de atividades que podem ser\ndesenvolvidas em sala de aula. Os materiais podem ser confeccionados\npelos próprios alunos. Por meio destes jogos é possível introduzir a\nlinguagem algébrica, apresentar as operações de adição e subtração de\npolinômios, adição e subtração com os números inteiros e relacionar a\nlinguagem algébrica com a linguagem corrente.\n\nÉ importante ressaltar que os jogos não devem ser utilizados como única\nforma de trabalhar a linguagem algébrica, mas são ótimos auxiliares para\na apresentação ou mesmo a fixação dos conteúdos. Além disso, eles\ncontribuem para aumentar o interesse dos alunos pelo conteúdo,\nfavorecendo a aprendizagem.\n\n## Notas\n\n1. ::: {#footnote-14}\n Acadêmica do curso de Matemática Unioeste/Cascavel. Bolsista do\n Programa Institucional de Bolsas de Iniciação à Docência (Pibid).\n E-mail:elizadcorte@outlook.com [↑](#footnote-ref-14)\n :::\n\n2. ::: {#footnote-15}\n Acadêmica do curso de Matemática Unioeste/Cascavel. Bolsista do\n Programa Institucional de Bolsas de Iniciação à Docência (Pibid).\n E-mail: nandaguerra_22@hotmail.com [↑](#footnote-ref-15)\n :::\n\n3. ::: {#footnote-16}\n Acadêmica do curso de Matemática Unioeste/Cascavel. Bolsista do\n Programa Institucional de Bolsas de Iniciação à Docência (Pibid).\n E-mail: thaissouza38@hotmail.com [↑](#footnote-ref-16)\n :::\n\n4. ::: {#footnote-17}\n Professora Supervisora do subprojeto Interdisciplinar\n Matemática/Química, do Programa Institucional de Bolsas de Iniciação\n à Docência (Pibid), da Unioeste. E-mail: adrilepreda@gmail.com\n [↑](#footnote-ref-17)\n :::\n\n5. ::: {#footnote-18}\n Procure usar um aplicativo ou um site de simulação de cores para\n daltônicos. A ideia é evitar que alguém não consiga distinguir uma\n cor da outra. [↑](#footnote-ref-18)\n :::\n\n6. ::: {#footnote-19}\n Essas cores, nas tonalidades usadas, funcionam para daltônicos. Se o\n leitor quiser alterá-las, lembre-se de usar *websites* ou *app* que\n simulem os diferentes tipos de daltonismo, de forma a não usar cores\n que não são distinguidas por daltônicos. [↑](#footnote-ref-19)\n :::\n\n7. ::: {#footnote-20}\n Procure usar um aplicativo ou um site de simulação de cores para\n daltônicos. A ideia é evitar que alguém não consiga distinguir uma\n cor da outra. [↑](#footnote-ref-20)\n :::\n\n8. ::: {#footnote-21}\n Essas cores, nas tonalidades usadas, funcionam para daltônicos. Se o\n leitor quiser alterá-las, lembre-se de usar *websites* ou *app* que\n simulem os diferentes tipos de daltonismo, de forma a não usar cores\n que não são distinguidas por daltônicos. [↑](#footnote-ref-21)\n :::\n\n9. ::: {#footnote-22}\n Nesse nosso exemplo é azul, no entanto, a cor pode ser qualquer uma.\n Mas lembre-se de usar simuladores para daltonismo, a fim de que a\n escolha das cores não inviabilize o jogo para os daltônicos.\n [↑](#footnote-ref-22)\n :::\n\n## Referências","srcMarkdownNoYaml":"\n\n# Atividades lúdicas \n\n \n\n \n \n
\n\nJogado da Memória
\n\n \n\n
\n\n
\n\nJogo da Memória
\n\n\n\n \n \n \n\t\n\t
\n\n \n\n \n \n \n\t\n
\n\t\n\n \n\n \n\n
\n\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n\n
\n\n \n\n \n
Para efetuar a compra de uma tv no valor de R$ 1420,00, José recebeu um desconto de R$ 426,00 no pagamento à vista. Qual a fração que representa a porcentagem de desconto?
Para efetuar a compra de uma tv no valor de R$ 1420,00, José recebeu um desconto de R$ 426,00 no pagamento à vista. Qual a fração que representa a porcentagem de desconto?
Para efetuar a compra de uma tv no valor de R$ 1420,00, José recebeu um desconto de R$ 426,00 no pagamento à vista. Qual a fração que representa a porcentagem de desconto?
Para efetuar a compra de uma tv no valor de R$ 1420,00, José recebeu um desconto de R$ 426,00 no pagamento à vista. Qual a fração que representa a porcentagem de desconto?
Para efetuar a compra de uma tv no valor de R$ 1420,00, José recebeu um desconto de R$ 426,00 no pagamento à vista. Qual a fração que representa a porcentagem de desconto?
Para efetuar a compra de uma tv no valor de R$ 1420,00, José recebeu um desconto de R$ 426,00 no pagamento à vista. Qual a fração que representa a porcentagem de desconto?
Para efetuar a compra de uma tv no valor de R$ 1420,00, José recebeu um desconto de R$ 426,00 no pagamento à vista. Qual a fração que representa a porcentagem de desconto?
Para efetuar a compra de uma tv no valor de R$ 1420,00, José recebeu um desconto de R$ 426,00 no pagamento à vista. Qual a fração que representa a porcentagem de desconto?
Para efetuar a compra de uma tv no valor de R$ 1420,00, José recebeu um desconto de R$ 426,00 no pagamento à vista. Qual a fração que representa a porcentagem de desconto?
Para efetuar a compra de uma tv no valor de R$ 1420,00, José recebeu um desconto de R$ 426,00 no pagamento à vista. Qual a fração que representa a porcentagem de desconto?
Para efetuar a compra de uma tv no valor de R$ 1420,00, José recebeu um desconto de R$ 426,00 no pagamento à vista. Qual a fração que representa a porcentagem de desconto?
Para efetuar a compra de uma tv no valor de R$ 1420,00, José recebeu um desconto de R$ 426,00 no pagamento à vista. Qual a fração que representa a porcentagem de desconto?
Para efetuar a compra de uma tv no valor de R$ 1420,00, José recebeu um desconto de R$ 426,00 no pagamento à vista. Qual a fração que representa a porcentagem de desconto?
Para efetuar a compra de uma tv no valor de R$ 1420,00, José recebeu um desconto de R$ 426,00 no pagamento à vista. Qual a fração que representa a porcentagem de desconto?
Para efetuar a compra de uma tv no valor de R$ 1420,00, José recebeu um desconto de R$ 426,00 no pagamento à vista. Qual a fração que representa a porcentagem de desconto?
Para efetuar a compra de uma tv no valor de R$ 1420,00, José recebeu um desconto de R$ 426,00 no pagamento à vista. Qual a fração que representa a porcentagem de desconto?
Para efetuar a compra de uma tv no valor de R$ 1420,00, José recebeu um desconto de R$ 426,00 no pagamento à vista. Qual a fração que representa a porcentagem de desconto?
Para efetuar a compra de uma tv no valor de R$ 1420,00, José recebeu um desconto de R$ 426,00 no pagamento à vista. Qual a fração que representa a porcentagem de desconto?
Para efetuar a compra de uma tv no valor de R$ 1420,00, José recebeu um desconto de R$ 426,00 no pagamento à vista. Qual a fração que representa a porcentagem de desconto?
Para efetuar a compra de uma tv no valor de R$ 1420,00, José recebeu um desconto de R$ 426,00 no pagamento à vista. Qual a fração que representa a porcentagem de desconto?
Para efetuar a compra de uma tv no valor de R$ 1420,00, José recebeu um desconto de R$ 426,00 no pagamento à vista. Qual a fração que representa a porcentagem de desconto?
Para efetuar a compra de uma tv no valor de R$ 1420,00, José recebeu um desconto de R$ 426,00 no pagamento à vista. Qual a fração que representa a porcentagem de desconto?
Para efetuar a compra de uma tv no valor de R$ 1420,00, José recebeu um desconto de R$ 426,00 no pagamento à vista. Qual a fração que representa a porcentagem de desconto?
Para efetuar a compra de uma tv no valor de R$ 1420,00, José recebeu um desconto de R$ 426,00 no pagamento à vista. Qual a fração que representa a porcentagem de desconto?
Para efetuar a compra de uma tv no valor de R$ 1420,00, José recebeu um desconto de R$ 426,00 no pagamento à vista. Qual a fração que representa a porcentagem de desconto?
Para efetuar a compra de uma tv no valor de R$ 1420,00, José recebeu um desconto de R$ 426,00 no pagamento à vista. Qual a fração que representa a porcentagem de desconto?
para o ensino da
linguagem algébrica\n\n::: autores\nEliza Bruna Dalla Corte Andreolla^[1](#footnote-14){#footnote-ref-14}^
\nFernanda Guerra^[2](#footnote-15){#footnote-ref-15}^
\nThais de Souza^[3](#footnote-16){#footnote-ref-16}^
\nAdriana Schawabe Reis Lepreda^[4](#footnote-17){#footnote-ref-17}^\n:::\n\n## Objetivo geral\n\nPropor atividades que auxiliem, principalmente professores do sétimo ano\ndo Ensino Fundamental, no ensino e na aprendizagem da linguagem\nalgébrica.\n\n## Introdução\n\nO ensino da linguagem algébrica tem sido um grande desafio a ser\ntrabalhado no sétimo ano do Ensino Fundamental. E, como afirma Pereira\n[-@pereira_2017], esse assunto é muitas vezes apresentado aos estudantes de forma\ndescontextualizada e por meio de exercícios de fixação mecânicos, o que\ncausa barreiras e dificulta ainda mais o ensino e a aprendizagem desse\nconteúdo, contribuindo para a aversão à matemática. Com objetivo de\nauxiliar a apresentação desse tema de forma clara e dinâmica aos alunos\ndo sétimo ano, este trabalho apresenta atividades que introduzem o uso\nda linguagem algébrica, de forma lúdica, buscando atingir o interesse\ndos alunos pelo assunto, favorecendo então, a aprendizagem de fato.\n\n## Atividade 1:
uso de cartões coloridos\n\n### Objetivo\n\nIntroduzir a linguagem algébrica e as operações de adição e subtração de\npolinômios de forma pictórica.\n\n### Material\n\n- Papel cartão ou cartolina de duas cores diferentes;\n- Tesoura;\n- Caneta.\n\n### Preparação\n\nNo papel cartão, desenhe e recorte em duas cores, grupos de figuras com,\npelo menos, três formatos diferentes. O objetivo é que cada figura\nsimbolize uma incógnita e as cores representem valores positivos e\nnegativos.\n\n### Procedimento\n\n#### Primeira parte\n\nExponha para os alunos certa quantidade de figuras de mesma cor, mas com\nformatos diferentes. Peça para que escrevam a quantidade de cada formato\nde figura observada. Repita o procedimento quantas vezes achar\nnecessário. As Figuras [-@fig-31] e [-@fig-32] exemplificam duas situações possíveis. A\nresposta esperada para a situação representada pela Figura [-@fig-31] é 4\nestrelas e 4 corações. Para a situação representada pela Figura [-@fig-32] a\nresposta esperada é 3 losangos e 7 corações. \n\n:::: {.grid}\n\n::: {.g-col-6}\n{#fig-31 fig-alt=\"Corações e estrelas de cartolima ma cor\nverde.\" loading=\"lazy\" style=\"width:230px; height: auto;\"}\n:::\n\n::: {.g-col-6}\n{#fig-32 fig-alt=\"Corações e losangos de cartolina na cor\nverde.\" loading=\"lazy\" style=\"width:230px; height: auto;\"}\n:::\n\n::::\n\nEstimule os alunos a trocar os nomes das figuras (corações, losangos e\nestrelas) por uma notação mais \"rápida\" e simples, utilizando, por\nexemplo, a inicial da palavra de cada figura. Assim, as respostas para\nas situações representadas pelas Figuras [-@fig-31] e [-@fig-32] seriam, 4E e 4C, e 3L e\n7C, respectivamente.\n\nApós a substituição dos nomes das figuras por letras, é natural trocar o\nconectivo \"e\" pelo sinal de adição, já que em outras palavras, está\nhavendo uma soma. Nas Figuras [-@fig-31] e [-@fig-32], temos, nessa ordem, 4 estrelas e 5\ncorações e 3 losangos e 7 corações, que seriam denotados como 4E + 4C e\n3L + 7C, respectivamente. Nesse instante, é conveniente dizer aos\nestudantes que não é possível somar figuras diferentes, podendo usar\ncomo justificativa o fato de possuírem formatos diferentes. Portanto,\nusando esse mesmo raciocínio na nova notação, ressalta-se que não devem\nser somadas ou subtraídas letras (incógnitas) diferentes.\n\n#### Segunda parte\n\nNesse momento, a proposta é trabalhar com formatos de figuras em duas\ncores diferentes^[5](#footnote-18){#footnote-ref-18}^, uma cor\nrepresentando valores positivos e outra cor representando valores\nnegativos. Por exemplo, trabalhar com figuras na cor verde e na cor\nvermelha^[6](#footnote-19){#footnote-ref-19}^. As figuras de cor verde\nrepresentarão valores positivos e carregarão o sinal +, as de cor\nvermelha representarão valores negativos e carregarão o sinal -.\n\nNessa etapa da atividade, o objetivo é levar o aluno a compreender a\nadição algébrica. Antes de trabalhar com a linguagem matemática, porém,\nsugere-se mostrar aos alunos que, por exemplo, cada figura vermelha\n\"anula\" uma figura verde, desde que sejam de mesmo formato.\nPrimeiramente, apresente grupos de figuras e deixe que os alunos\n\"descubram o resultado\" sozinhos. Deixe-os livres para registrar, ou\nnão, a quantidade de figuras. Repita o processo até perceber que os\nalunos o compreenderam.\n\nPosteriormente, comece a utilizar a notação matemática. Apresente\nnovamente aos alunos um ou mais grupos de figuras. Peça para anotarem as\nquantidades de cada figura, respeitando os valores positivos e\nnegativos.\n\n:::: {.grid}\n\n::: {.g-col-6}\n{#fig-33 fig-alt=\"Corações e losangos de cartolina, sendo alguns na cor verde e outros\nna cor vermelha.\" loading=\"lazy\"}\n:::\n\n::: {.g-col-6}\n{#fig-34 fig-alt=\"Corações e losangos de cartolina, sendo alguns na cor verde e outros\nna cor vermelha.\" loading=\"lazy\"}\n:::\n\n::::\n\nNas Figuras [-@fig-33] e [-@fig-34] são apresentados exemplos dessa situação. Na [@fig-33]\nhá 5 corações verdes, 4 corações vermelhos, 1 losango verde e 3 losangos\nvermelhos. Usando pensamento análogo à primeira parte da atividade,\ndenota-se a quantidade de figuras da seguinte maneira: (+5C) + (-4C) +\n(+1L) + (-3L). É natural que, nesse momento, os alunos encontrem um\npouco de dificuldades com a representação matemática, por isso, é\nimportante repetir o processo da notação e deixar claro o porquê do uso\ndos parênteses, para que isso não se torne um obstáculo futuramente.\n\nApós a representação da situação em linguagem algébrica, manuseando as\nfiguras e relembrando a atividade anterior, na qual figuras iguais e de\ncores diferentes se anulam, deve ser mostrado aos alunos que duas\nfiguras de mesmo formato, mesmo que de cores diferentes, podem e devem\nser somadas. Dessa forma, realizando a soma, obtém-se em linguagem\nalgébrica um total de 1C para os corações, já que + 5C + (- 4C) = 1C, e\npara os losangos -2L, pois + 1L + (- 3L) = - 2L. Os losangos e corações\nainda pertencem ao mesmo grupo, então devemos somá-los, tem-se 1C + (-\n2L) = 1C -- 2L.\n\nRepetindo o mesmo processo com a [@fig-34] (4 corações positivos e 5\ncorações negativos, 1 losango positivo e 3 losangos negativos), tem-se +\n4C + (- 5C) + 1L + (- 3L) = -1C -2L.\n\n#### Terceira parte\n\nA partir deste ponto, pode-se começar a estipular um \"valor\" para cada\nformato de figura, colocando uma certa quantidade de pontos em cada uma\ndelas, como na @fig-35.\n\n{#fig-35 fig-alt=\"Losangos verdes de cartolina com quatro pontos\ndentro\" loading=\"lazy\"}\n\nAgora, não será mais contado apenas a quantidade de figuras existentes,\ne sim a quantidade de pontos que há nesse conjunto de figuras. Iniciando\npela quantidade de losangos que aparece na @fig-35, tem-se 9 losangos\nou 9L. Observe que 1 losango possui 4 pontos. Como são 9 losangos e em\ncada um há 4 pontos, é possível calcular a quantidade total de pontos do\nconjunto dessa figura, multiplicando a quantidade total de losangos pela\nquantidade de pontos que cada losango possui, logo 9 x 4 = 36, ou seja,\njuntando todos os losangos será obtido um total de 36 pontos.\n\n{#fig-36 fig-alt=\"Losangos e estrelas verdes de cartolina com pontos dentro. Os losangos têm um ponto e as estrelas, dois\" loading=\"lazy\"}\n\nPode-se realizar o mesmo exercício com mais de um formato de figura. Na @fig-36, tem-se 4 estrelas e 4 losangos, ou seja, 4E + 4L. Observando a quantidade de pontos de cada figura (1 losango vale 2 pontos, 1 estrela,\n1 ponto, algebricamente: L = 2 e E = 1), pode-se calcular o valor total\ndo conjunto:\n\n4E = 4 x 1 = 4 e 4L = 4 x 2 = 8\n\n4E + 4L = 4 + 8 = 12\n\nPortanto, 12 será a quantidade total de pontos na [@fig-36].\n\nA mesma atividade pode ser realizada utilizando valores negativos como,\npor exemplo, na [@fig-37]{.nobreak}:\n\n{#fig-37 fig-alt=\"Corações e losangos de cartolina com pontos dentro. Cada coração\npossui quatro pontos dentros, já os losangos, 3 pontos cada. Existem\nlosangos verdes e também vermelhos, assim como, os corações também podem\nser verde ou vermelhos.\" loading=\"lazy\"}\n\nO processo de resolução é análogo ao anterior, envolvendo todas as\ndiscussões apresentadas no decorrer das três etapas da atividade.\n\n## Atividade 2:
jogo do alvo\n\nA atividade foi inspirada na proposta de Sirlei Miguel [-@miguel_2014] em seu\ncaderno desenvolvido no Programa de Desenvolvimento Educacional (PDE),\num programa promovido pela Secretaria de Estado da Educação do estado do\nParaná.\n\n### Objetivo\n\nTrabalhar as operações de adição e subtração com os números inteiros.\n\n### Material\n\n- Cartolina branca;\n- Compasso;\n- Tinta ou lápis de cor;\n- Lápis de escrever ou caneta;\n- Feijão.\n\n### Preparação\n\nPara confeccionar o alvo, que será no formato circular, pegue uma\ncartolina branca e desenhe 5 circunferências concêntricas, sendo a maior\ncom raio de 15 cm. Cada faixa formada pela delimitação das\ncircunferências, ficará com 3 cm de largura. Pinte cada uma delas com\ncores distintas, a sua escolha^[7](#footnote-20){#footnote-ref-20}^.\nUsaremos, como exemplo, as cores: vermelho, rosa, amarelo, azul-claro e\nazul-escuro^[8](#footnote-21){#footnote-ref-21}^, como ilustrado na\n[@fig-38]{.nobreak}. Depois de pintado, recorte o alvo sobre a circunferência\nmaior.\n\n{#fig-38 fig-alt=\"Círculo colorido com as cores variando da fronteira até o centro:\nvermelho, rosa, amarelo, azul claro e azul escuro. Não é um\ndegradê.\" loading=\"lazy\"}\n\nPara construir a borda lateral do alvo (que ficará como uma caixa\ncircular), desenhe em uma cartolina branca um retângulo de 94 cm de\ncomprimento e 4 cm de largura. Em uma das arestas menores, acrescente um\nretângulo de 4 cm por 2 cm (usado para colar uma aresta a outra) e, em\numa das arestas maiores, acrescente um retângulo de 94 cm por 1 cm\n(usado para colar a borda no alvo), como no molde da [@fig-39]{.nobreak}. Cole a\nfaixa lateral no alvo.\n\n{#fig-39 fig-alt=\"Molde com marcações de medidas e indicações de onde cortar e dobrar.\" loading=\"lazy\"}\n\nUma sugestão, para facilitar o processo da construção do alvo, é\nutilizar a tampa de uma embalagem de pizza. Ao final, ele deverá ficar\ncomo no exemplo, ilustrado na @fig-310.\n\n{#fig-310 fig-alt=\"Círculo colorido com as cores variando da fronteira até o centro:\nvermelho, rosa, amarelo, azul claro e azul escuro. Não é um\ndegradê\" loading=\"lazy\"}\n\n### Como jogar\n\nOs jogadores ou a pessoa que estiver aplicando o jogo, deverão estipular\num valor correspondente a cada faixa colorida, por exemplo, 5 pontos\npara cada feijão que cair sobre a faixa azul-escuro, 1 ponto para a\nazul-claro, 4 pontos na faixa amarela, 3 para a rosa e 2 pontos para a\nfaixa vermelha. Cada jogador, na sua vez, joga no alvo 15 feijões. Em\nseguida, deve contar quantos feijões caíram em cada uma das faixas do\nalvo e registrar em uma tabela a quantidade de feijões e os pontos\ncorrespondentes. Os jogadores podem jogar quantas rodadas quiserem ou\ndeterminarem entre si, de modo que todos joguem a mesma quantidade,\nsempre fazendo as respectivas anotações.\n\nPara facilitar as anotações, é conveniente induzir os alunos para que\nescolham uma única letra ou símbolo para representar cada faixa. É\nimportante que as anotações estejam organizadas de modo a auxiliar os\ncálculos ao final da brincadeira. Pode ser construído um quadro para tal\nfinalidade.\n\nPor exemplo, se na primeira rodada um aluno acertar 2 feijões na faixa\nazul-escuro, 3 na faixa azul-claro, 5 na faixa amarela, 1 na faixa rosa\ne 4 na faixa vermelha, e usar E para azul-escuro, C para azul-claro, A\npara amarelo, R para rosa e V para vermelho, pode anotar da seguinte\nforma:\n\n| Rodada | Soma dos feijões |\n|:-------:|:------------------:|\n| Primeira | 2E + 3C + 5A + 1R + 4V|\n| Segunda | | \n| Terceira | | \n| Quarta | | \n| Quinta | | \n| Sexta | | \n| Sétima | |\n\n: Expressões de cada rodada {#tbl-expressoes}\n\nAo final das rodadas, cada jogador calcula seu total de pontos. Vence\nquem tiver maior pontuação.\n\n:::{.callout-tip}\nQuando for conveniente, atribua valores negativos para algumas faixas,\npara introduzir a adição e a subtração com números inteiros.\n:::\n\n## Atividade 3:
jogo de memória\n\nEsse jogo foi baseado na proposta de Beatriz Rechia da Silva [-@silva_2012] em\nseu caderno desenvolvido no Programa de Desenvolvimento Educacional\n(PDE), um programa promovido pela Secretaria de Estado da Educação do\nestado do Paraná.\n\n### Objetivo\n\nExplorar e relacionar a linguagem algébrica com a linguagem corrente por\nmeio de um jogo.\n\n### Material\n\nDois grupos distintos de cartelas, variando a forma de apresentar as\nexpressões algébricas. Em um grupo, as expressões devem ser escritas por\nextenso e, no outro, deve-se usar a linguagem algébrica:\n\n| Escrito por Extenso | Linguagem Algébrica |\n|:--------------------:|:--------------------:|\n| O dobro de um número | $2x$ |\n| A diferença entre dois números | $a - b$ |\n| Metade de um número | $x/2$ |\n| A diferença entre um número e 2 | $z - 2$ |\n| A soma de dois números diferentes | $g + y$ |\n| A quinta parte de um número | $x/5$ |\n| Um número mais 1 | $x + 1$ |\n| Um número mais ele mesmo | $x + x = 2x$ |\n| O triplo de um número | $3x$ |\n| Um número menos ele mesmo | $x - x = 0$ |\n| Um número somado com o dobro de outro número | $c + 2d$ |\n| Um número multiplicado por ele mesmo três vezes | $x \\cdot x \\cdot x= x^3$ |\n| A soma de três números consecutivos | $x + (x + 1) + (x + 2)$ | \n\n: Linguagem corrente e linguagem algébrica {#tbl-algebrica}\n\nDevido a pandemia da COVID-19, pensou-se em atividades que pudessem ser\ndesenvolvidas de maneira remota, assim, foi desenvolvido uma versão\n*online* desse jogo. Ele encontra-se disponível em:\n\n[]{#jogo_memoria}\n\n### Acesso à atividade\n\n::: {.content-visible when-format=\"html\"}\n[Acessar](https://puzzel.org/pt/memory/play?p=-MekRbcdmNkkpY9jp_7c){.btn_book target=\"blank\"}\n:::\n\n::: {.content-visible when-format=\"pdf\"}\n
\n\n\n
\n\n```\n\n:::\n\n### Como jogar\n\nDivida a sala em grupos de 2 a 3 alunos; cada jogador, na sua vez,\ndesvira dois cartões, um azul^[9](#footnote-22){#footnote-ref-22}^ e um\nbranco. Se o cartão azul traduzir o que está escrito no cartão branco o\njogador fica com os dois cartões. Se o cartão azul não traduzir o que\nestá escrito no cartão branco, ambos devem ser virados, permanecendo nos\nmesmos lugares em que estavam antes, de forma similar a um jogo de\nmemória.\n\nAo terminar os cartões, cada jogador conta seus pontos de acordo com os\nnúmeros de cartões que acumulou.\n\n## Considerações finais\n\nA matemática possui particularidades na sua linguagem, sendo até mesmo\nconsiderada como uma disciplina alfabetizadora. A linguagem algébrica\nexige um acentuado grau de abstração por parte dos alunos que,\ncomumente, apresentam dificuldades. É um conteúdo a ser trabalhado com\nos alunos de sétimo ano do Ensino Fundamental e que tem se apresentado\ncomo um grande desafio, pois muitas vezes é desenvolvido de forma\ndescontextualizada e mecânica, criando nos alunos uma aversão pela\nmatemática [@pereira_2017].\n\nDesenvolver o pensamento algébrico é algo que pode ser iniciado desde a\nEducação Infantil, para que, à medida que o aluno avance na\nescolarização, seu pensamento seja potencializado para desenvolver uma\nlinguagem algébrica mais apropriada [@pereira_2017].\n\nNeste trabalho, apresentamos três sugestões de atividades que podem ser\ndesenvolvidas em sala de aula. Os materiais podem ser confeccionados\npelos próprios alunos. Por meio destes jogos é possível introduzir a\nlinguagem algébrica, apresentar as operações de adição e subtração de\npolinômios, adição e subtração com os números inteiros e relacionar a\nlinguagem algébrica com a linguagem corrente.\n\nÉ importante ressaltar que os jogos não devem ser utilizados como única\nforma de trabalhar a linguagem algébrica, mas são ótimos auxiliares para\na apresentação ou mesmo a fixação dos conteúdos. Além disso, eles\ncontribuem para aumentar o interesse dos alunos pelo conteúdo,\nfavorecendo a aprendizagem.\n\n## Notas\n\n1. ::: {#footnote-14}\n Acadêmica do curso de Matemática Unioeste/Cascavel. Bolsista do\n Programa Institucional de Bolsas de Iniciação à Docência (Pibid).\n E-mail:elizadcorte@outlook.com [↑](#footnote-ref-14)\n :::\n\n2. ::: {#footnote-15}\n Acadêmica do curso de Matemática Unioeste/Cascavel. Bolsista do\n Programa Institucional de Bolsas de Iniciação à Docência (Pibid).\n E-mail: nandaguerra_22@hotmail.com [↑](#footnote-ref-15)\n :::\n\n3. ::: {#footnote-16}\n Acadêmica do curso de Matemática Unioeste/Cascavel. Bolsista do\n Programa Institucional de Bolsas de Iniciação à Docência (Pibid).\n E-mail: thaissouza38@hotmail.com [↑](#footnote-ref-16)\n :::\n\n4. ::: {#footnote-17}\n Professora Supervisora do subprojeto Interdisciplinar\n Matemática/Química, do Programa Institucional de Bolsas de Iniciação\n à Docência (Pibid), da Unioeste. E-mail: adrilepreda@gmail.com\n [↑](#footnote-ref-17)\n :::\n\n5. ::: {#footnote-18}\n Procure usar um aplicativo ou um site de simulação de cores para\n daltônicos. A ideia é evitar que alguém não consiga distinguir uma\n cor da outra. [↑](#footnote-ref-18)\n :::\n\n6. ::: {#footnote-19}\n Essas cores, nas tonalidades usadas, funcionam para daltônicos. Se o\n leitor quiser alterá-las, lembre-se de usar *websites* ou *app* que\n simulem os diferentes tipos de daltonismo, de forma a não usar cores\n que não são distinguidas por daltônicos. [↑](#footnote-ref-19)\n :::\n\n7. ::: {#footnote-20}\n Procure usar um aplicativo ou um site de simulação de cores para\n daltônicos. A ideia é evitar que alguém não consiga distinguir uma\n cor da outra. [↑](#footnote-ref-20)\n :::\n\n8. ::: {#footnote-21}\n Essas cores, nas tonalidades usadas, funcionam para daltônicos. Se o\n leitor quiser alterá-las, lembre-se de usar *websites* ou *app* que\n simulem os diferentes tipos de daltonismo, de forma a não usar cores\n que não são distinguidas por daltônicos. [↑](#footnote-ref-21)\n :::\n\n9. ::: {#footnote-22}\n Nesse nosso exemplo é azul, no entanto, a cor pode ser qualquer uma.\n Mas lembre-se de usar simuladores para daltonismo, a fim de que a\n escolha das cores não inviabilize o jogo para os daltônicos.\n [↑](#footnote-ref-22)\n :::\n\n## Referências"},"formats":{"moan-livro-html":{"identifier":{"display-name":"HTML","target-format":"moan-livro-html","base-format":"html","extension-name":"moan-livro"},"execute":{"fig-width":7,"fig-height":5,"fig-format":"retina","fig-dpi":96,"df-print":"default","error":false,"eval":true,"cache":null,"freeze":false,"echo":true,"output":true,"warning":true,"include":true,"keep-md":false,"keep-ipynb":false,"ipynb":null,"enabled":null,"daemon":null,"daemon-restart":false,"debug":false,"ipynb-filters":[],"ipynb-shell-interactivity":null,"plotly-connected":true,"engine":"markdown"},"render":{"keep-tex":false,"keep-typ":false,"keep-source":false,"keep-hidden":false,"prefer-html":false,"output-divs":true,"output-ext":"html","fig-align":"default","fig-pos":null,"fig-env":null,"code-fold":"none","code-overflow":"scroll","code-link":false,"code-line-numbers":false,"code-tools":false,"tbl-colwidths":"auto","merge-includes":true,"inline-includes":false,"preserve-yaml":false,"latex-auto-mk":true,"latex-auto-install":true,"latex-clean":true,"latex-min-runs":1,"latex-max-runs":10,"latex-makeindex":"makeindex","latex-makeindex-opts":[],"latex-tlmgr-opts":[],"latex-input-paths":[],"latex-output-dir":null,"link-external-icon":false,"link-external-newwindow":false,"self-contained-math":false,"format-resources":[],"notebook-links":true,"shortcodes":[],"format-links":false},"pandoc":{"standalone":true,"wrap":"none","default-image-extension":"png","to":"html","filters":["lightbox"],"include-after-body":{"text":"\n\n\n\n"},"number-sections":false,"css":["css/jogovel.css"],"output-file":"atividades-ludicas-para-o-ensino-da-linguagem-algebrica.html"},"language":{"toc-title-document":"Neste capítulo","toc-title-website":"Nesta página","related-formats-title":"Outros formatos","related-notebooks-title":"Notebooks","source-notebooks-prefix":"Fonte","other-links-title":"Outros Links","code-links-title":"Links de código","launch-dev-container-title":"Iniciar Dev Container","launch-binder-title":"Iniciar Binder","article-notebook-label":"Caderno de Artigo","notebook-preview-download":"Baixar Caderno","notebook-preview-download-src":"Baixar código-fonte","notebook-preview-back":"Voltar ao Artigo","manuscript-meca-bundle":"Arquivo MECA","section-title-abstract":"Resumo","section-title-appendices":"Apêndices","section-title-footnotes":"Notas de rodapé","section-title-references":"Referências","section-title-reuse":"Reuso","section-title-copyright":"Direito autoral","section-title-citation":"Citação","appendix-attribution-cite-as":"Por favor, cite este trabalho como:","appendix-attribution-bibtex":"BibTeX","appendix-view-license":"Visualizar Licença","title-block-author-single":"Organizador","title-block-author-plural":"Organizadores","title-block-affiliation-single":"Afiliação","title-block-affiliation-plural":"Afiliações","title-block-published":"Data de Publicação","title-block-modified":"Data de Modificação","title-block-keywords":"Palavras-chave","callout-tip-title":"Dica","callout-note-title":"Nota","callout-warning-title":"Aviso","callout-important-title":"Importante","callout-caution-title":"Cuidado","code-summary":"Código","code-tools-menu-caption":"Código","code-tools-show-all-code":"Mostrar o código","code-tools-hide-all-code":"Esconder o código","code-tools-view-source":"Ver o código fonte","code-tools-source-code":"Código fonte","tools-share":"Compartilhar","tools-download":"Baixar","code-line":"Linha","code-lines":"Linhas","copy-button-tooltip":"Copiar para a área de transferência","copy-button-tooltip-success":"Copiada","repo-action-links-edit":"Editar essa página","repo-action-links-source":"Ver o código fonte","repo-action-links-issue":"Criar uma issue","back-to-top":"De volta ao topo","search-no-results-text":"Nenhum resultado","search-matching-documents-text":"documentos correspondentes","search-copy-link-title":"Copiar link para a busca","search-hide-matches-text":"Esconder correspondências adicionais","search-more-match-text":"mais correspondência neste documento","search-more-matches-text":"mais correspondências neste documento","search-clear-button-title":"Limpar","search-text-placeholder":"","search-detached-cancel-button-title":"Cancelar","search-submit-button-title":"Enviar","search-label":"Procurar","toggle-section":"Alternar seção","toggle-sidebar":"Alternar barra lateral","toggle-dark-mode":"Alternar modo escuro","toggle-reader-mode":"Alternar modo de leitor","toggle-navigation":"Alternar de navegação","crossref-fig-title":"Figura","crossref-tbl-title":"Tabela","crossref-lst-title":"Listagem","crossref-thm-title":"Teorema","crossref-lem-title":"Lema","crossref-cor-title":"Corolário","crossref-prp-title":"Proposição","crossref-cnj-title":"Conjectura","crossref-def-title":"Definição","crossref-exm-title":"Exemplo","crossref-exr-title":"Exercício","crossref-ch-prefix":"Capítulo","crossref-apx-prefix":"Apêndice","crossref-sec-prefix":"Seção","crossref-eq-prefix":"Equação","crossref-lof-title":"Lista de Figuras","crossref-lot-title":"Lista de Tabelas","crossref-lol-title":"Lista de Listagens","environment-proof-title":"Comprovação","environment-remark-title":"Comentário","environment-solution-title":"Solução","listing-page-order-by":"Ordenar por","listing-page-order-by-default":"Padrão","listing-page-order-by-date-asc":"Mais antigo","listing-page-order-by-date-desc":"O mais novo","listing-page-order-by-number-desc":"Decrescente","listing-page-order-by-number-asc":"Baixo para alto","listing-page-field-date":"Data","listing-page-field-title":"Título","listing-page-field-description":"Descrição","listing-page-field-author":"Autor","listing-page-field-filename":"Nome do arquivo","listing-page-field-filemodified":"Modificada","listing-page-field-subtitle":"Legenda","listing-page-field-readingtime":"Tempo de leitura","listing-page-field-wordcount":"Contagem de palavras","listing-page-field-categories":"Categorias","listing-page-minutes-compact":"{0}Min","listing-page-category-all":"Todos","listing-page-no-matches":"Sem itens correspondentes","listing-page-words":"{0} palavras","listing-page-filter":"Filtro","draft":"Rascunho"},"metadata":{"lang":"pt-BR","fig-responsive":true,"quarto-version":"1.6.39","mainfont":"Source Sans Pro","citation":true,"google-scholar":true,"smooth-scroll":true,"theme":{"light":["cosmo","_extensions/editoramoan/moan-livro/custom.scss","css/moan.scss"],"dark":["superhero","_extensions/editoramoan/moan-livro/custom.scss","css/moan.scss"]},"revealjs-plugins":[],"lightbox":"auto","crossref":{"chapters":true},"controle-moan":{"dicionario":false},"moan-dados":{"ark":"68745/eM96D","título":"Propostas didáticas para o ensino de Matemática","subtítulo":"contribuições no âmbito do Pibid","formato":"Livro Digital (online)","descrição":"Descubra novas possibilidades no ensino de Matemática! Este livro apresenta propostas didáticas que desafiam o paradigma tradicional e abrem espaço para a criatividade e a dinamicidade em sala de aula. Sabemos que romper com o modelo convencional de ensino pode ser intimidador para muitos professores. Dessa forma, oferecemos uma alternativa valiosa ao ensino tradicional. Apresentamos propostas dinâmicas e muitas delas com o uso de jogos — tanto os analógicos quanto os digitais online, acessíveis por QR Code na versão impressa — como ferramentas pedagógicas. Essas atividades lúdicas promovem o engajamento, a interação e a compreensão dos conceitos matemáticos de forma envolvente e prazerosa. As propostas didáticas, neste livro, foram desenvolvidas no Programa Institucional de Bolsas de Iniciação à Docência (Pibid) por professores e acadêmicos dos cursos de Licenciatura em Matemática da Unioeste, tanto do campus de Cascavel quanto do de Foz do Iguaçu, Paraná. Explore novas possibilidade e renove a sua prática docente!","organizador":"Arleni Elise Sella Langer, Adriana Schawabe Reis Lepreda, Dulcyene Maria Ribeiro, Fabiana Magda Garcia Papani, Renata Camacho Bezerra, Richael Silva Caetano","autor":"Arleni Elise Sella Langer, Adriana Schawabe Reis Lepreda, Dulcyene Maria Ribeiro, Fabiana Magda Garcia Papani, Renata Camacho Bezerra, Richael Silva Caetano, Erika Diana Alves de Oliveira, Ricardo Mondini Ferrazza, Thamara Tobaldini, Luiza Stunder, Eliza Bruna Dalla Corte Andreolla, Fernanda Guerra, Thais de Souza, Bruna Eduarda Unser, Eduardo Rossoni Zeni, Ana Carolina Marques Pauluk, Ashley Esquitine Fernandes Mello, Bruno Eduardo Duarte, Cassio Rafael Santos de Lima, Fabio Goulart de Campos, Gabrielle Thais Werle, Hevila Maria Simonetti, Letícia Santiago Silva e Patricia Alves de Oliveira, Janice Kunz Oenning","apoio-financeiro":"Coordenação de Aperfeiçoamento de Pessoal de Nível Superior – CAPES","realização":"Programa Institucional de Bolsas de Iniciação à Docência - PIBID/Unioeste. Rua Universitária, 1619 - Jardim Universitário - CEP 85819-100 - Cascavel-PR. E-mail: pibid@unioeste.br","apontamento":"https://livro.online/propostas-didaticas-ensino-matematica","editora":"Editora Moan","local":"Foz do Iguaçu - PR, Brasil","edição":1,"editor responsável":"Rafael Tavares Juliani","diagramador":"Rafael Tavares Juliani","capista":"Rafael Tavares Juliani","revisores":"Rafael tavares juliani, Jorge Luiz Pereira, os organizadores","conselho-editorial":"Rafael Tavares Juliani, Jorge Luiz Pereira, Carla Fernanda Sander Juliani","prefácio":"Cristiane Antonia Hauchild Johann","palavras-chave":"propostas didáticas, matemática, pibid, unioeste, jogos no ensino, atividades lúdicas","área":"Matemática – educação – método de ensino","cdd":"510.371.33","ano da edição":2023,"data de publicação":"22/10/2023","idioma":"Português do Brasil (pt-br)","país":"Brasil","faixa etária":"Acima de 18 anos","classificação indicativa":"Livre para todos os públicos","ícones":"Google Material Design","imagens-e-quadros":"dos autores, onde não especificado","outros créditos":"Na capa foram utilizadas as fontes Stolzl Light/Medium e Josefin Sans Light; imagem (com alterações): Geometria, from The Seven Liberal Arts de Johan Sadeler I, Maerten de Vos ca. 1570-1600 - Metropolitan Museum of Art","isbn-versao-impressa":"9786585027052","ark-versao-impressa":"68745/eM96D.77","direitos-autorais":"© 2023, Arleni Elise Sella Langer, Adriana Schawabe Reis Lepreda, Dulcyene Maria Ribeiro, Fabiana Magda Garcia Papani, Renata Camacho Bezerra, Richael Silva Caetano e a Editora Moan.","licenca":"CC BY-NC-SA 4.0 Internacional","licenca-link":"https://creativecommons.org/licenses/by-nc-sa/4.0/deed.pt_BR","licenca-img":"https://upload.wikimedia.org/wikipedia/commons/4/4b/CC_BY-NC-SA.svg"},"bibliography":["referencias.bib"],"csl":"_extensions/editoramoan/moan-livro/zotero.org_styles_universidade-estadual-paulista-faculdade-de-engenharia-de-guaratingueta-abnt.csl","fig-cap-location":"top","_quarto-vars":{"e-mail":"[editora@livro.online](mailto:editora@livro.online)","whatsapp":"[+55 (45) 9 3505-0721](https://api.whatsapp.com/send?phone=5545935050721)"},"comments":{"hypothesis":{"theme":"clean","openSidebar":false}},"number-depth":1,"anchor-sections":false},"extensions":{"book":{"multiFile":true}}}},"projectFormats":["moan-livro-html"]}
\ No newline at end of file
diff --git a/.quarto/idx/contextualizando-propostas-didaticas-_pibid-matematica-cascavel.qmd.json b/.quarto/idx/contextualizando-propostas-didaticas-_pibid-matematica-cascavel.qmd.json
new file mode 100644
index 0000000..6e02a4c
--- /dev/null
+++ b/.quarto/idx/contextualizando-propostas-didaticas-_pibid-matematica-cascavel.qmd.json
@@ -0,0 +1 @@
+{"title":"Contextualizando as \n\n \n\n \n \n
\n\nJogado da Memória
\n\n \n\n
\n\n
\n\nJogo da Memória
\n\n\n\n \n \n \n\t\n\t
\n\n \n\n \n \n \n\t\n
\n\t\n\n \n\n \n\n
\n\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n\n
\n\n \n\n \n
Para efetuar a compra de uma tv no valor de R$ 1420,00, José recebeu um desconto de R$ 426,00 no pagamento à vista. Qual a fração que representa a porcentagem de desconto?
Para efetuar a compra de uma tv no valor de R$ 1420,00, José recebeu um desconto de R$ 426,00 no pagamento à vista. Qual a fração que representa a porcentagem de desconto?
Para efetuar a compra de uma tv no valor de R$ 1420,00, José recebeu um desconto de R$ 426,00 no pagamento à vista. Qual a fração que representa a porcentagem de desconto?
Para efetuar a compra de uma tv no valor de R$ 1420,00, José recebeu um desconto de R$ 426,00 no pagamento à vista. Qual a fração que representa a porcentagem de desconto?
Para efetuar a compra de uma tv no valor de R$ 1420,00, José recebeu um desconto de R$ 426,00 no pagamento à vista. Qual a fração que representa a porcentagem de desconto?
Para efetuar a compra de uma tv no valor de R$ 1420,00, José recebeu um desconto de R$ 426,00 no pagamento à vista. Qual a fração que representa a porcentagem de desconto?
Para efetuar a compra de uma tv no valor de R$ 1420,00, José recebeu um desconto de R$ 426,00 no pagamento à vista. Qual a fração que representa a porcentagem de desconto?
Para efetuar a compra de uma tv no valor de R$ 1420,00, José recebeu um desconto de R$ 426,00 no pagamento à vista. Qual a fração que representa a porcentagem de desconto?
Para efetuar a compra de uma tv no valor de R$ 1420,00, José recebeu um desconto de R$ 426,00 no pagamento à vista. Qual a fração que representa a porcentagem de desconto?
Para efetuar a compra de uma tv no valor de R$ 1420,00, José recebeu um desconto de R$ 426,00 no pagamento à vista. Qual a fração que representa a porcentagem de desconto?
Para efetuar a compra de uma tv no valor de R$ 1420,00, José recebeu um desconto de R$ 426,00 no pagamento à vista. Qual a fração que representa a porcentagem de desconto?
Para efetuar a compra de uma tv no valor de R$ 1420,00, José recebeu um desconto de R$ 426,00 no pagamento à vista. Qual a fração que representa a porcentagem de desconto?
Para efetuar a compra de uma tv no valor de R$ 1420,00, José recebeu um desconto de R$ 426,00 no pagamento à vista. Qual a fração que representa a porcentagem de desconto?
Para efetuar a compra de uma tv no valor de R$ 1420,00, José recebeu um desconto de R$ 426,00 no pagamento à vista. Qual a fração que representa a porcentagem de desconto?
Para efetuar a compra de uma tv no valor de R$ 1420,00, José recebeu um desconto de R$ 426,00 no pagamento à vista. Qual a fração que representa a porcentagem de desconto?
Para efetuar a compra de uma tv no valor de R$ 1420,00, José recebeu um desconto de R$ 426,00 no pagamento à vista. Qual a fração que representa a porcentagem de desconto?
Para efetuar a compra de uma tv no valor de R$ 1420,00, José recebeu um desconto de R$ 426,00 no pagamento à vista. Qual a fração que representa a porcentagem de desconto?
Para efetuar a compra de uma tv no valor de R$ 1420,00, José recebeu um desconto de R$ 426,00 no pagamento à vista. Qual a fração que representa a porcentagem de desconto?
Para efetuar a compra de uma tv no valor de R$ 1420,00, José recebeu um desconto de R$ 426,00 no pagamento à vista. Qual a fração que representa a porcentagem de desconto?
Para efetuar a compra de uma tv no valor de R$ 1420,00, José recebeu um desconto de R$ 426,00 no pagamento à vista. Qual a fração que representa a porcentagem de desconto?
Para efetuar a compra de uma tv no valor de R$ 1420,00, José recebeu um desconto de R$ 426,00 no pagamento à vista. Qual a fração que representa a porcentagem de desconto?
Para efetuar a compra de uma tv no valor de R$ 1420,00, José recebeu um desconto de R$ 426,00 no pagamento à vista. Qual a fração que representa a porcentagem de desconto?
Para efetuar a compra de uma tv no valor de R$ 1420,00, José recebeu um desconto de R$ 426,00 no pagamento à vista. Qual a fração que representa a porcentagem de desconto?
Para efetuar a compra de uma tv no valor de R$ 1420,00, José recebeu um desconto de R$ 426,00 no pagamento à vista. Qual a fração que representa a porcentagem de desconto?
Para efetuar a compra de uma tv no valor de R$ 1420,00, José recebeu um desconto de R$ 426,00 no pagamento à vista. Qual a fração que representa a porcentagem de desconto?
Para efetuar a compra de uma tv no valor de R$ 1420,00, José recebeu um desconto de R$ 426,00 no pagamento à vista. Qual a fração que representa a porcentagem de desconto?
propostas didáticas do
Pibid/Matemática/Cascavel","markdown":{"headingText":"Contextualizando as
propostas didáticas do
Pibid/Matemática/Cascavel","headingAttr":{"id":"","classes":["unnumbered"],"keyvalue":[]},"containsRefs":false,"markdown":"\n::: autores\nDulcyene Maria Ribeiro
\nArleni Elise Sella Langer
\nFabiana Magda Garcia Papani^[1](#footnote-3){#footnote-ref-3}^\n:::\n\nAs propostas didáticas apresentadas nesta parte 1, são frutos das ações\ndos alunos de iniciação à docência, da professora supervisora e das\nprofessoras colaboradoras, vinculadas ao Programa Institucional de\nBolsas de Iniciação à Docência (Pibid), do curso de Matemática, do\n*campus* de Cascavel, da Universidade Estadual do Oeste do Paraná\n(Unioeste). Embora divididas em quatro propostas assinadas por grupos\ndistintos, são produções discutidas e elaboradas em conjunto nos\nencontros semanais, portanto é um trabalho colaborativo e compartilhado.\n\nEssas produções são dissertações a respeito de como materiais\nmanipulativos ou jogos podem contribuir para o processo de\nensino-aprendizagem de conteúdos matemáticos. A escolha por essa\ntemática deve-se ao fato de concordarmos com diversos autores em suas\nsustentações de que a aprendizagem também se dá por meio dos órgãos dos\nsentidos, como argumentado por Dienes, por exemplo:\n\n> As impressões sensoriais que agem sobre nossos órgãos sensoriais\n> durante nossa existência são muito numerosas e variadas. Devemos\n> selecionar tais impressões de algum modo que possamos nos encontrar\n> nesse ambiente de fenômenos extremamente complexo [@dienes_logica_1974, p. 13].\n\nTambém para Lorenzato:\n\n> A experiência tem mostrado que o Material Didático (MD) facilita a\n> aprendizagem, qualquer que seja o assunto, curso ou idade, o que\n> conflita com a crendice de que MD só deve ser utilizado com crianças [@lorenzato_o_2006, p. 30].\n\nCabe destacar que embora seja consenso que o uso de materiais\nmanipulativos contribua para a aprendizagem, corroboramos com Lorenzato,\nao afirmar que:\n\n> \\[\\...\\] o apelo ao tátil e visual deve manter-se forte, mas os\n> materiais devem visar mais diretamente à ampliação de conceitos, à\n> descoberta de propriedades, à percepção da necessidade do emprego de\n> termos ou símbolos, à compreensão de algoritmos, enfim, aos objetivos\n> matemáticos [@lorenzato_o_2006, p. 9].\n\nPercebe-se, pela citação mencionada acima, que não basta apenas haver um\nespaço físico, a disponibilidade de materiais e até a boa vontade de um\ndocente ou estagiário. Há outras condições necessárias, especialmente\nenvolvendo o planejamento e a fundamentação teórica adequada, sem os\nquais um trabalho com materiais, apesar de interessante, pode não\nproduzir os efeitos esperados quanto à aprendizagem significativa.\nRefletir e discutir a respeito dessa problemática justifica empreender\nesse trabalho coletivo. Lorenzato coloca ainda que:\n\n> Convém termos sempre em mente que a realização em si de atividades\n> manipulativas ou visuais não garante a aprendizagem. Para que esta\n> efetivamente aconteça, faz-se necessária também a atividade mental,\n> por parte do aluno [@lorenzato_o_2006, p. 21].\n\nAssim como asseveramos para os materiais manipulativos em geral, o uso\nde jogos requer o mesmo cuidado. Mota (2009), em sua pesquisa\ndesenvolvida em Portugal, menciona que há um número reduzido de\nprofessores que utiliza jogos no processo de ensino-aprendizagem, a\nautora sustenta que:\n\n> Entre os que fazem uso deste recurso, alguns não exploram devidamente\n> as potencialidades pedagógicas do jogo, esquecendo que são estas que\n> contribuem muito para a aprendizagem dos conceitos matemáticos [@mota_jogos_2009, p. 6].\n\nPara Borin [-@borin_jogos_2004], jogos podem contribuir como motivadores no processo\nde ensino-aprendizagem, atuando também como facilitadores no\n\"desenvolvimento da linguagem, criatividade e raciocínio dedutivo,\nexigidos na escolha de uma jogada e na argumentação necessária durante a\ntroca de informações\" [@borin_jogos_2004, p. 8].\n\nConsiderando que as atividades do subprojeto aconteceram praticamente\ntodas no formato remoto, sejam as reuniões semanais com o grupo, sejam\nas ações na escola, a produção desses materiais foi mais uma das ações\nque foi realizada quase totalmente à distância. A produção se mostrou\ndeterminante para que os acadêmicos bolsistas e voluntários assumissem a\npreparação de atividades, visando a utilização em sala de aula, já que\nem um primeiro momento pensávamos que tais atividades pudessem ser\nusadas nas aulas que aconteciam de modo remoto. Depois, com o passar do\ntempo, percebemos que tal ação não seria possível, já que as aulas na\nescola passaram a ser presenciais, mas os alunos de iniciação à\ndocência, porém, não tinham permissão para frequentá-las.\n\nMesmo remotamente, cada grupo que acompanhava a professora supervisora\nem dias e turmas diferentes, elegeu conteúdos que naquele momento eram\nabordados na turma em que atuavam. Como dito anteriormente, as propostas\napresentadas focam no uso de materiais manipulativos e jogos, sendo\nabordadas de diferentes formas e destacando diferentes conteúdos\nmatemáticos. O objetivo da proposta 1 consistiu em promover a\ncompreensão das operações de adição e subtração de números inteiros, por\nmeio de jogos. A proposta 2 apresenta o uso do jogo para trabalhar com\nequações. Atividades que auxiliam no ensino-aprendizagem da linguagem\nalgébrica foram abordadas na proposta 3. A proposta didática 4 sugere a\nconstrução de um astrolábio caseiro e a utilização de tal instrumento na\nsimulação do trabalho de agrimensores, geógrafos e/ou astrônomos para\nensinar trigonometria. Ela propõe ainda a inserção do uso de planilhas\neletrônicas como ferramenta de ensino, em particular no ensino da\ntrigonometria, conteúdo predominantemente abordado.\n\nA ideia foi preparar atividades que pudessem ser executadas em ambos os\nformatos de aulas: presencial ou remoto. Nesse sentido, cabe recordar a\nvisão de Reys [1971, *apud* @nacarato_eu_2005, p. 3] quando afirma que objetos concretos são:\n\"objetos ou coisas que o estudante é capaz de sentir, tocar, manipular e\nmovimentar. Podem ser objetos reais que têm aplicação no cotidiano ou\npodem ser objetos usados para representar uma ideia\".\n\nEstas atividades não foram aplicadas em sala de aula, porém, a\nelaboração permitiu muito aprendizado para os alunos de iniciação à\ndocência. As dificuldades no estabelecimento dos objetivos, da\nmetodologia a ser utilizada, da melhor forma de apresentar a atividade e\nsuas etapas, entre outras tarefas, geraram inúmeras reescritas dessas\npropostas.\n\nA elaboração, a apresentação de cada proposta para os demais grupos e a\ninserção na escrita científica foram elementos que promoveram\naprendizado e corroboraram com um dos objetivos do Pibid que é aprimorar\na capacidade leitora e de produção textual -- oral e escrita -- por\nparte dos alunos bolsistas.\n\nConvém ressaltar que antes da elaboração desses materiais, o grupo se\ndedicou ao estudo dos documentos oficiais que regem a educação\nbrasileira, como a Base Nacional Comum Curricular (BNCC) e dos\ndocumentos estaduais como o Referencial Curricular do Paraná e o\nCurrículo Estadual Paranaense (CREP).\n\nAs leituras e correções do material elaborado pelos bolsistas foram\nrealizadas pelas professoras supervisora e colaboradoras, sempre\nagregando sugestões de melhoria ao texto, além de leituras que pudessem\namplificar a temática sobre a qual versavam as propostas.\n\nEntendemos que esta ação contribuiu com o processo de aquisição do\nconhecimento necessário para ser um professor e oportunizou aos alunos\nde iniciação à docência, acréscimos importantes em suas formações, com o\nobjetivo primordial de motivá-los à continuidade e ao comprometimento\ncom a docência.\n\n## Notas\n\n1. ::: {#footnote-3}\n Professoras do curso de Matemática, lotadas no Centro de Ciências\n Exatas e Tecnológicas (CCET), da Universidade Estadual do Oeste do\n Paraná (Unioeste), *campus* de Cascavel. Coordenadora e\n colaboradoras de Área do Subprojeto Interdisciplinar\n Matemática/Química, do Programa Institucional de Bolsas de Iniciação\n à Docência (Pibid), da Unioeste. E-mail:\n dulcyene.ribeiro@unioeste.br;
Caso não esteja visualizando, acesse: https://ark.livro.online/json/ark_dp_68745_b_eM96D.json
\n\n\n```\n\n## YAML\n\n```{=html}\n\n\n\nCaso não esteja visualizando, acesse: https://ark.livro.online/yaml/ark_dp_68745_b_eM96D.yml
\n\n\n```\n\n:::\n\n## Como Citar\n\nBibTeX:\n\n::: {#como-citar-bibtex}\n```\n# Para o livro como um todo, use:\n\n@book{langer_et_al_2023,\n\taddress = {Foz do Iguaçu},\n\ttitle = {Propostas didáticas para o ensino de Matemática},\n\tsubtitle = {contribuições no âmbito do Pibid},\n\tpublisher = {Editora Moan},\n\teditor = {Langer, Arleni Elise Sella and Lepreda, Adriana Schawabe Reis and Ribeiro, Dulcyene Maria and Papani, Fabiana Magda Garcia and Bezerra, Renata Camacho and Caetano, Richael Silva},\n\tyear = {2023},\n\turl = {https://livro.online/ark:68745/eM96D},\n\turldate = {2023-10-23},\n}\n\n# obs.: Lembre-se de trocar para a data que você acessou (yyyy-mm-dd).\n\n# Para apenas um trabalho contido neste livro, por exemplo, \"Jogos no ensino de equações\", use:\n\n@inbook{in_langer_et_al_2023,\n\taddress = {Foz do Iguaçu},\n\ttitle = {Jogos no ensino de equações},\n\tbooksubtitle = {contribuições no âmbito do Pibid},\n\tbooktitle = {Propostas didáticas para o ensino de Matemática},\n\tpublisher = {Editora Moan},\n\tauthor = {Langer, Arleni Elise Sella and Stunder, Luiza},\n\tyear = {2023},\n\teditor = {Langer, Arleni Elise Sella and Lepreda, Adriana Schawabe Reis and Ribeiro, Dulcyene Maria and Papani, Fabiana Magda Garcia and Bezerra, Renata Camacho and Caetano, Richael Silva},\n\turl = {https://livro.online/ark:68745/eM96D/jogos-no-ensino-de-equacoes},\n\turldate = {2023-10-23},\n}\n\n# obs.1: Lembre-se de trocar para o nome dos autores do capítulo que você está citando.\n# obs.2: Lembre-se de trocar para a data que você acessou (yyyy-mm-dd).\n# obs.3: Lembre-se de trocar a url para o do capítulo que você está citando.\n```\n:::\n\nPara atribuição, cite este trabalho como:\n\n::: {#como-citar-atribuicao}\n##### Para o livro como um todo, use:\n\nLANGER, A. E. S.; LEPREDA, A. S. R.; RIBEIRO, D. M.; PAPANI, F. M. G.; BEZERRA, R. C.; CAETANO, R. S. (org.). **Propostas didáticas para o ensino de Matemática: contribuições no âmbito do Pibid**. Foz do Iguaçu: Editora Moan, 2023. Disponível em:Arleni Elise Sella Langer^[2](#footnote-12){#footnote-ref-12}^\n:::\n\n## Objetivo geral\n\nPropor jogos que auxiliem principalmente professores dos anos finais do\nensino fundamental, no ensino-aprendizagem de equações e que possam ser\nutilizados tanto em aulas remotas quanto em aulas presenciais.\n\n## Introdução\n\nNos encontros semanais do grupo de alunos do Curso de\nMatemática/Cascavel, no subprojeto Interdisciplinar Matemática/Química,\ndo Programa Institucional de Bolsa de Iniciação à Docência (Pibid),\ngrande parte das discussões estava relacionada ao ensino da matemática e\nas diferentes formas de abordagem dos seus conteúdos em sala de aula.\nDiante disso, foi sugerida a elaboração de uma proposta\ndidático-pedagógica com conteúdo pré-determinado para ser trabalhado nas\nturmas que acompanhamos na escola, na qual desenvolvemos as atividades\ndo subprojeto, na cidade de Cascavel. Entre as turmas acompanhadas estão\nas do 7º ano do ensino fundamental.\n\nSegundo os Parâmetros Curriculares Nacionais, grande parte da\ndificuldade encontrada pelos alunos nas aulas de matemática está\nrelacionada ao fato de não terem a percepção das aplicações e\nfuncionalidades da referida disciplina [@pcn_3_4_ciclos_1998]. Com isso, a\ninsegurança, o desinteresse e até mesmo a rejeição pela disciplina\nnorteiam a realidade da maioria dos estudantes. Esses problemas foram\nagravados no período de aulas remotas, ministradas de forma *online,*\ndevido ao cenário de pandemia da COVIDD-19 conforme mostram as pesquisas\nde 2021 citadas por Araújo [-@araujo_2021] em artigo publicado pela Agência\nSenado.\n\nSegundo a Base Nacional Comum Curricular (BNCC), a função da álgebra no\nensino fundamental é desenvolver o pensamento algébrico nos alunos,\nincentivá-los a criar modelos matemáticos para compreender situações e\nfenômenos, representar e analisar as relações quantitativas e\nqualitativas entre grandezas, utilizando-se de estruturas matemáticas\ncom símbolos e letras, conforme expõem Souza, Lopes e Nascimento [-@souza_lopes_nascimento_2020].\n\nObserva-se que comumente os conteúdos matemáticos são abordados de\nmaneira mais técnica, o que os desvincula totalmente da diversão.\nContudo há autores que sustentam a ideia de que a matemática:\n\n> \\[\\...\\] trabalha com raciocínios hipotético-dedutivos, com\n> demonstrações apoiadas sobre um conjunto de axiomas, postulados e\n> teoremas, no Ensino Fundamental é importante o tratamento lúdico da\n> disciplina que se utiliza de recursos concretos para que, através de\n> experimentações, os alunos possam tirar conclusões e desenvolver as\n> habilidades necessárias para resolver problemas inerentes ao seu\n> cotidiano. [@souza_lopes_nascimento_2020, p. 2]\n\nPor isso, parece ser importante realizar práticas pedagógicas em sala,\nconforme as necessidades e a realidade dos estudantes, de maneira que as\naulas sejam mais interessantes e que favoreçam a aprendizagem e o\ntrabalho do professor.\n\nSendo a matemática uma disciplina, que, como as demais, exige atenção,\ndedicação e motivação para que os conteúdos abordados possam ser\napreendidos, os jogos podem ser ferramentas que auxiliam no processo de\naprendizagem [@rocha_2017]. O jogo, como promotor de aprendizagem, pode\nser uma peça fundamental dentre as ferramentas educacionais utilizadas\npelo professor, pois a interação do indivíduo com o jogo e com os\ncolegas parceiros pode aproximá-lo do conteúdo a ser trabalhado. Quando\ncolocado em situações lúdicas, o indivíduo pode compreender a estrutura\nbásica do jogo e, consequentemente, o conteúdo trabalhado por meio dele\n[@farias_2008].\n\nAssim, ao decidirmos escrever sobre equações, conteúdo que estava sendo\nabordado nas turmas assistidas pelos alunos de iniciação à docência,\nconcluímos que o uso de jogos poderia ser uma boa alternativa para\ncontornar o problema do desinteresse. Essa seria uma maneira mais\ndescontraída de inserir a álgebra, facilitar e encorajar a compreensão\ndo que são equações e como trabalhar com elas.\n\n## Atividade 1:
balança de dois pratos\n\n### Objetivo\n\nIntroduzir e desenvolver o conceito de equações.\n\n### Material\n\nComputadores com acesso à internet ou uma balança de dois pratos e\nobjetos que representem os pesos.\n\n[]{#jogo_geogebra}\n\n### Acesso à atividade\n\n::: {.content-visible when-format=\"html\"}\n[Acessar](https://www.geogebra.org/m/mz6jb9wq){.btn_book target=\"blank\"}\n:::\n\n::: {.content-visible when-format=\"pdf\"}\n
\n
\n\n#### Terceira etapa -- operações\n\n::: {.bloco-imagem}\n\n{#fig-23 fig-alt=\"Captura de tela da atividade. Balança de dois pratos. Prato esquerdo:\num quadrado com 3x dentro e um círculo com o número um dentro. Prato\ndireito: um quadrado com 4x dentro e um círculo com fronteira pontilhada\ne o número -1 dentro.\" loading=\"lazy\"}\n\n[Fonte: *Phet*, Universidade do Colorado]{.figure-caption}\n:::\n\nNessa etapa, o educador trabalhará com os alunos a ideia de equações\nequivalentes, perguntando a eles se é possível equilibrar a balança\ncolocando equações diferentes em cada prato e até determinando uma das\nequações para mostrar aos alunos que uma equação pode ter várias\nequações equivalentes.\n\n#### Quarta etapa -- resolve!\n\nNessa etapa, os alunos colocam em prática todo o aprendizado, começando\na solucionar equações.\n\nO professor passará equações e o aluno deverá descobrir o valor da\nincógnita.\n\n::: {.bloco-imagem}\n\n{#fig-24 fig-alt=\"Captura de tela da atividade. Balança de dois pratos. Prato esquerdo:\num quadrado com 8x dentro e um círculo com o número 6 dentro. Prato\ndireito: um círculo de fronteira pontilhada e com o número -34\ndentro.\" loading=\"lazy\"}\n\n[Fonte: *Phet*, Universidade do Colorado]{.figure-caption}\n:::\n\n
\n\n## Atividade 2:
serpentes e escadas -- trilha das equações\n\n### Objetivo\n\nAjudar os alunos na reflexão e compreensão do conteúdo de equação,\nsanando possíveis dúvidas, usando desafios divertidos, inspirados em\nsituações cotidianas.\n\n### Material\n\n- 2 dados simples (6 faces)\n- Objetos para serem usados como peões\n- Tabuleiro do jogo escadas e serpentes\n- Cartões e cartões respostas\n\n[]{#tabuleiro_cartoes}\n\n### Acesso ao tabuleiro e cartões\n\n::: {.content-visible when-format=\"html\"}\n[Acessar](https://drive.google.com/drive/folders/1vKcna5bSvTXHF03W2iRrwnjjfjSrjtbO?usp=sharing){.btn_book target=\"blank\"}\n:::\n\n::: {.content-visible when-format=\"pdf\"}\n
Renata Camacho Bezerra e Richael Silva\nCaetano^[2](#footnote-28){#footnote-ref-28}^
Janice Kunz Oenning^[3](#footnote-29){#footnote-ref-29}^\n:::\n\nO presente capítulo apresenta 3 (três) jogos elaborados pelos\nacadêmicos^[4](#footnote-30){#footnote-ref-30}^ do curso de Licenciatura\nem Matemática da Universidade Estadual do Oeste do Paraná (Unioeste)\n*campus* de Foz do Iguaçu e participantes (bolsistas e voluntários) do\nPrograma Institucional de Bolsa de Iniciação à Docência (Pibid), em\nespecífico do subprojeto interdisciplinar Matemática (*campi* Cascavel e\nFoz do Iguaçu) e Química (campus Toledo). A elaboração desses jogos\npartiu de uma necessidade apresentada pela professora supervisora de\nMatemática, também participante do Pibid, ao compartilhar -- em um dos\nencontros síncronos realizados -- as dificuldades dos seus alunos do\nnono ano do Ensino Fundamental acerca da aprendizagem do objeto de\nconhecimento fração. Isso posto, o grupo Pibid decidiu que o jogo, por\nrepresentar uma alternativa metodológica pertinente ao ensino de\nMatemática (de maneira remota ou\npresencial)^[5](#footnote-31){#footnote-ref-31}^, seria uma boa opção\nenquanto um auxílio à professora supervisora de Matemática.\n\nContudo, antes de os licenciandos iniciarem a elaboração dos jogos,\nrealizou-se um estudo teórico em dois documentos oficiais (Parâmetros\nCurriculares Nacionais (PCN) e na Base Nacional Comum Curricular\n(BNCC)), orientado pelos professores universitários -- os coordenadores\nvoluntários de área do referido subprojeto -- de modo a subsidiar tal\nelaboração.\n\nEm um primeiro momento, e valendo-se dos Parâmetros Curriculares\nNacionais (PCN) -- Matemática [@pcn_1997], realizou-se o estudo e a\ndiscussão referente aos diferentes significados envolvendo o objeto de\nconhecimento fração, a saber: a) **parte-todo --** na qual a fração\nindica a relação que existe entre um número de partes e o total (p. ex.,\ndividir uma pizza em partes iguais); b) **quociente --** na qual a\nfração indica a divisão de um número natural por outro $(a \\div b =\\frac{a}{b}; b \\neq 0)$ (p. ex., dividir 2 chocolates para 5\npessoas; c) **índice comparativo** -- na qual a fração indica uma\ncomparação entre duas quantidades de mesma grandeza, sendo, portanto,\ninterpretada como razão (p. ex., 2 de cada 5 habitantes de um município\nsão imigrantes, escalas em mapas, o estudo de porcentagem); d)\n**operador** -- na qual a fração desempenha um papel de transformação e\nque atua sobre uma situação modificando-a (p. ex., o número que deve ser\nmultiplicado ao 3 para resultar em 2) e; e) **medida** -- na qual a\nfração é utilizada na situação em que divide-se uma unidade em partes\niguais e verifica-se quantas dessas partes cabem (p. ex., a quantidade\nde canecas de 2 litros necessárias para preencher um tambor com 11\nlitros de leite).\n\nEm seguida, os acadêmicos realizaram uma pesquisa a respeito do objeto\nde conhecimento fração, apresentado na Base Nacional Comum Curricular\n(BNCC) [@bncc_foz_2017]. A partir dessa pesquisa, o grupo concluiu que o\nreferido objeto de conhecimento é citado nos anos\nfinais^[6](#footnote-32){#footnote-ref-32}^ do Ensino Fundamental (6.º\nao 9.º ano) e que diversas habilidades estão relacionadas a diferentes\nobjetos de conhecimento que tratam explicitamente da fração. O quadro a\nseguir apresenta uma síntese dessa referida pesquisa e que foi objeto de\ndiscussão pelo grupo:\n\n```{=html}\n
| Ano | \nObjeto\nde \nconhecimento | \nHabilidade | \n
|---|---|---|
| 6º | \nFrações: significados (parte/todo, quociente),\nequivalência, comparação, adição e subtração; cálculo da fração de um\nnúmero natural; adição e subtração de frações | \n(EF06MA07) Compreender, comparar e ordenar frações\nassociadas às ideias de partes de inteiros e resultado de divisão,\nidentificando frações equivalentes. | \n
| (EF06MA08) Reconhecer que os números racionais\npositivos podem ser expressos nas formas fracionária e decimal,\nestabelecer relações entre essas representações, passando de uma\nrepresentação para outra, e relacioná-los a pontos na reta\nnumérica. | \n||
| (EF06MA09) Resolver e elaborar problemas que\nenvolvam o cálculo da fração de uma quantidade e cujo resultado seja um\nnúmero natural, com e sem uso de calculadora. | \n||
| (EF06MA10) Resolver e elaborar problemas que\nenvolvam adição ou subtração com números racionais positivos na\nrepresentação fracionária. | \n||
| 7º | \nFração e seus significados: como parte de \ninteiros, resultado da divisão, razão e operador | \n(EF07MA05) Resolver um mesmo problema utilizando\ndiferentes algoritmos. | \n
| (EF07MA06) Reconhecer que as resoluções de um grupo\nde problemas, que têm a mesma estrutura, podem ser obtidas utilizando os\nmesmos procedimentos. | \n||
| (EF07MA07) Representar por meio de um fluxograma os\npassos utilizados para resolver um grupo de problemas. | \n||
| (EF07MA08) Comparar e ordenar frações associadas às\nideias de partes de inteiros, resultado da divisão, razão e\noperador. | \n||
| (EF07MA09) Utilizar, na resolução de problemas, a\nassociação entre razão e fração, como a fração 2/3 para expressar a\nrazão de duas partes de uma grandeza para três partes da mesma ou três\npartes de outra grandeza. | \n||
Números racionais na representação fracionária \ne na decimal: usos, ordenação e associação com \npontos da reta numérica e operações | \n(EF07MA10) Comparar e ordenar números racionais em\ndiferentes contextos e associá-los a pontos da reta numérica. | \n|
| (EF07MA11) Compreender e utilizar a multiplicação e\na divisão de números racionais, a relação entre elas e suas propriedades\noperatórias. | \n||
| (EF07MA12) Resolver e elaborar problemas que\nenvolvam as operações com números racionais. | \n||
| 8º | \nDízimas periódicas: fração geratriz | \n(EF08MA05) Reconhecer e utilizar procedimentos para\na obtenção de uma fração geratriz para uma dízima periódica. | \n
| 9º | \nPotências com expoentes negativos e fracionários | \n(EF09MA03) Efetuar cálculos com números reais,\ninclusive potências com expoentes fracionários. | \n
O sublinhado no nome e pontos do grupo significa que é a vez dele de jogar (responder).
\n \n \n\n\n\n O javascript precisa estar ativado para jogar.\n\n
\n\n\n```\n:::\n\n### Regras do jogo\n\n1. A turma é dividida em dois grupos ou mais, de forma que,\n preferencialmente, os grupos tenham a mesma quantidade de\n integrantes.\n2. Em cada grupo deve ser estabelecida uma ordem que os jogadores\n deverão seguir durante o andamento do jogo (a ordem estabelecida\n pode ficar a critério dos alunos ou do professor).\n3. O professor deve mostrar o primeiro *card* e o primeiro aluno do\n Grupo 1, por exemplo, tem 2 minutos (o tempo pode ser alterado pelo\n professor) para resolver o que se pede no mesmo. Se o aluno\n responder corretamente, dentro do tempo, o grupo ganha um ponto;\n caso contrário, perde um ponto. Há a opção de pular o *card*,\n colocando-o no final da fila. Com essa opção não se perde ponto, no\n entanto, dá a chance de o adversário responder, caso apareça para o\n mesmo no futuro.\n4. Cada aluno de cada grupo resolve o que se pede no *card*, um de cada\n vez, alternando-se entre os grupos e respeitando a ordem\n preestabelecida.\n5. As respostas devem ser dadas na forma de frações irredutíveis.\n6. Caso o aluno responda corretamente, o grupo leva um ponto. Ganha o\n jogo o grupo que acumular mais pontos.\n\n### Situação exemplo:\n\nA turma foi separada em dois grupos:\n\n ------------- -------------\n **Grupo 1** **Grupo 2**\n Aluno A Aluno F\n Aluno B Aluno G\n Aluno C Aluno H\n Aluno D Aluno I\n Aluno E Aluno J\n ------------- -------------\n\n: Quadro 2: Exemplo de divisão em dois grupos {.quadro2}\n\nO primeiro a jogar será o Aluno A e este deverá resolver a operação\npresente no *card* apresentado pelo professor:\n\n::: bloco-imagem\n\n{#fig-cardVerde fig-alt=\"Ilustração de uma folha pautada e esverdeada com a questão a ser\nrespondida e local para o usuário colocar a sua\nresposta\" loading=\"lazy\"}\n:::\n\nO aluno deverá resolver a operação dentro do tempo estipulado e dar a\nsua resposta na forma de fração irredutível. Feito isso, o professor\nclica no comando de próximo *card* para que o *card* gire e seja feita a\ncorreção automática e, assim, os alunos podem conferir se a resposta\nestava correta.\n\nEm seguida, quem deverá responder o próximo *card* é o Aluno F do Grupo\n2, depois o Aluno B do grupo 1 e assim, sucessivamente, até que todos os\nalunos respondam pelo menos um *card*.\n\n### Os comandos do jogo:\n\nA visualização do jogo é a seguinte:\n\n::: bloco-imagem\n\n{#fig-telaCardDasFracoes fig-alt=\"Tela do jogo com uma folha pautada e rosada com a perguta e espaço\npara a resposta do jogador. Tem o placar, um botão com duas notas\nmusicais (duas colcheias unidas) para ativar/desativar o som, um botão\ncom um alto-falante para ouvir o que está escrito no card, um botão com\num x para pular o card, um botão com uma seta para direita para\nresponder, ver a resposta e ir para o próximo card e possui uma\nindicação de quantas perguntas já foram respondidas e quantas\nfaltam.\" loading=\"lazy\"}\n:::\n\nA seguir, apresentamos as funções de cada um desses comandos ao redor do\n*card*.\n\n| | |\n|:-----------------------------------------------------------------------------------------------------------------------------------------------------------------------:|:------------------------------------------------------------------------------------------:| \n| {fig-alt=\"Imagem de um botão cinza claro com um alto-falante em dois tons de cinza e imagem de ondas em azul saindo do alto-falante\" loading=\"lazy\"} | O que está escrito no *card* é reproduzido sonoramente; |\n| {fig-alt=\"Imagem de um botão cinza claro com duas notas musicais em azul. São duas colcheias unidas imediatamente ascendentes e com as hastes voltadas para cima.\" loading=\"lazy\"} | Ativa ou desativa os sons produzidos pelo jogo; |\n| {fig-alt=\"Botão cinza claro com um X em azul.\" loading=\"lazy\"} | Pula o *card* apresentado, colocando-o no final da fila e dando a chance do seu adversário responder; |\n| {fig-alt=\"Botão cinza claro com uma seta azul para a direita.\"loading=\"lazy\"} | Passa para o próximo *card*, efetuando a correção automática; |\n\n: Quadro 3: As Funções do jogo\n\nA seguir constam as situações-problema elaboradas e apresentadas nos\n*cards*.\n\n```{=html}\n| 6º ano | \n||
| Objeto de conhecimento: Frações:\nsignificados (parte/todo, quociente), equivalência, comparação, adição e\nsubtração; cálculo da fração de um número natural; adição e subtração de\nfrações. | \n||
| Habilidade | \nQuestão | \n|
(EF06MA07) \nCompreender, comparar e ordenar frações associadas às ideias de\npartes de inteiros e resultado de divisão, identificando frações\nequivalentes. | \nProfessora Helena comprou determinada quantidade de\npizzas para 3 turmas. Sabendo que a turma A comeu \\(\\frac{6}{16}\\) do\ntotal de pedaços, a turma B comeu \\(\\frac{2}{8}\\) e a turma C comeu\n\\(\\frac{5}{12}\\), qual fração representa a turma que comeu mais? \nResposta:\n\\(\\frac{5}{12}\\). | \n|
Comprei uma barra de chocolate que possui vinte\npedaços (quadradinhos) de mesmo tamanho. No primeiro dia comi\n\\(\\frac{1}{5}\\) da barra. Já no segundo dia, comi o equivalente a\n\\(\\frac{4}{10}\\) da barra inicial. Em qual dia eu comi mais\nchocolate? \nResposta: Segundo dia. | \n||
(EF06MA08) \nReconhecer que os números racionais positivos podem ser expressos nas\nformas fracionária e decimal, estabelecer relações entre essas\nrepresentações, passando de uma representação para outra, e\nrelacioná-los a pontos na reta numérica. | \nA fração \\(\\frac{2}{5}\\) pode ser representada por\nqual ponto na reta numérica? \n
Resposta: Ponto B. | \n|
A fração \\(\\frac{17}{9}\\) pode ser localizada entre\nquais pontos na reta numérica? \n
Resposta: Entre os pontos B e C. | \n||
Indique quais pontos podem representar as\nfrações \\(\\frac{7}{8}\\), \\(\\frac{35}{7}\\) e \\(\\frac{16}{6}\\) na reta\nnumérica, respectivamente. \n
Resposta: B, E e D. | \n||
(EF06MA09) \nResolver e elaborar* problemas que envolvam o cálculo da fração de\numa quantidade e cujo resultado seja um número natural, com e sem uso de\ncalculadora**. \n*Obs.: Nesta questão o processo cognitivo “elaborar” não foi\nabordado. \n**Obs.: O uso de calculadora fica a critério do(a)\nprofessor(a). | \nYara comprou um pote de sorvete que tinha as\nseguintes dimensões: 22 cm de comprimento, 8 cm de largura e 20 cm de\naltura. Beatriz também queria comprar um pote de sorvete, porém, não\ntinha dinheiro suficiente e então resolveu comprar um que tinha\n\\(\\frac{25}{88}\\) do volume do pote de Yara. Quantos mililitros têm o\npote de Beatriz? \nResposta: 1000 ml ou 1 litro. | \n|
Ana quer comprar um celular no Paraguai e que custa\n2.500,00 reais; ela já tem 2/5 do valor. Quantos reais faltam para ela\nconseguir comprar o celular? \nResposta: \\(\\text{R}\\$ \\thinspace\n1.500,00\\). | \n||
(EF06MA10) \nResolver e elaborar* problemas que envolvam adição ou subtração com\nnúmeros racionais positivos na representação fracionária. \n*Obs.: Nesta questão o processo cognitivo “elaborar” não foi\nabordado. | \nSabe-se que uma caixa d'água, inicialmente, estava\ncom \\(\\frac{1}{4}\\) da sua capacidade e foi completada com mais\n\\(\\frac{2}{5}\\) da sua capacidade. Responda: \na) Qual é a fração que representa a quantidade de água na caixa\nd'água? \nResposta: \\(\\frac{13}{20}\\). \nb) Qual é a fração que representa a parte vazia da caixa d'água? \nResposta: \\(\\frac{7}{20}\\). | \n|
| Exercícios envolvendo adição ou subtração com números\nracionais positivos na representação fracionária. | \n$$\\frac{3}{8} + \\frac{75}{3} = \\frac{203}{8}$$ \n$$\\frac{12}{15} + \\frac{22}{5} = \\frac{26}{5}$$ \n$$\\frac{5}{9} + \\frac{8}{5} = \\frac{97}{45}$$ \n$$\\frac{55}{9} + \\frac{8}{9} = 7$$ \n$$\\frac{2}{10} + \\frac{3}{5} = \\frac{4}{5}$$ \n$$\\frac{3}{4} + \\frac{2}{8} = 1$$ | \n$$\\frac{29}{2} - \\frac{1}{6} = \\frac{43}{3}$$ \n$$\\frac{60}{16} - \\frac{82}{4} = - \\frac{67}{4}$$ \n$$\\frac{71}{6} - \\frac{16}{3} = \\frac{13}{2}$$ \n$$\\frac{45}{4} - \\frac{6}{8} = \\frac{21}{2}$$ \n$$\\frac{6}{7} - \\frac{1}{3} = \\frac{11}{21}$$ \n$$\\frac{3}{8} - \\frac{4}{16} = \\frac{1}{8}$$ | \n
Obtenha o resultado, em forma de fração irredutível,\nda operação: \\(\\frac{3}{2} - \\frac{1}{4}\\). \nResposta: \\(\\frac{5}{4}\\). | \n||
Obtenha o resultado, em forma de fração irredutível,\nda operação: \\(\\frac{3}{2} + \\frac{1}{4}\\). \nResposta: \\(\\frac{7}{4}\\). | \n||
| 7º ano | \n||
| Objeto de conhecimento: Fração e seus\nsignificados: como parte de inteiros, resultado da divisão, razão e\noperador | \n||
| Habilidade | \nQuestão | \n|
(EF07MA08) \nComparar e ordenar frações associadas às ideias de partes de\ninteiros, resultado da divisão, razão e operador. | \nCaio, Raquel e Douglas estavam apostando uma corrida,\nna qual eles deveriam correr o máximo possível dentro de um determinado\ntempo estipulado por eles. Quando acabou o tempo, Caio, Raquel e Douglas\nverificaram a distância que cada um tinha percorrido que era,\nrespectivamente, \\(\\frac{6}{24}\\), \\(\\frac{9}{24}\\) e \\(\\frac{4}{30}\\)\ndo percurso em linha reta. Qual deles ficou em último lugar? \nResposta: Douglas. | \n|
A mãe de Lucas e Beatriz comprou uma pizza de 8\npedaços e resolveu dividi-la entre os três da seguinte maneira: Beatriz\nficaria com \\(1/2\\) da pizza, Lucas com \\(\\frac{1}{8}\\) e sua mãe com\n\\(\\frac{6}{16}\\). Qual deles ficou com mais pedaços? \nResposta: Beatriz. | \n||
(EF07MA09) \nUtilizar, na resolução de problemas, a associação entre razão e\nfração, como a fração 2/3 para expressar a razão de duas partes de uma\ngrandeza para três partes da mesma ou três partes de outra\ngrandeza. | \nLuana comprou 9 balões vermelhos e 15 amarelos. Qual\né a fração que representa a razão entre o número de balões amarelos e\nvermelhos? \nResposta: \\(\\frac{5}{3}\\). | \n|
Elisa possui uma coleção de 90 carrinhos\ncolecionáveis que são réplicas de diversas marcas, sendo 12 da\nVolkswagen, 27 da Chevrolet, 16 da Ford e 35 Fiat. Quais frações\nrepresentam a razão entre os carrinhos da marca Fiat e Chevrolet, e da\nmarca Ford e Volkswagen. \nResposta: \\(\\frac{35}{27}\\) e\n\\(\\frac{4}{3}\\). | \n||
Ao dividir um bolo, em partes iguais, para oito\npessoas, a razão estabelecida a cada pedaço do bolo será? \nResposta: \\(\\frac{1}{8}\\). | \n||
Considere que uma pizza tenha 4 sabores, possua ao\ntotal 12 pedaços do mesmo tamanho e que cada sabor possua a mesma\nquantidade de pedaços. Se uma pessoa comer um pedaço de cada sabor, qual\nserá a razão do que ela comeu em relação ao total de pizza? \nResposta: \\(\\frac{1}{3}\\). | \n||
| Objeto de conhecimento: Números\nracionais na representação fracionária e na decimal: usos, ordenação e\nassociação com pontos da reta numérica e operações. | \n||
| Habilidade | \nQuestão | \n|
(EF07MA11) \nCompreender* e utilizar a multiplicação e a divisão de números\nracionais, a relação entre elas e suas propriedades operatórias. \n*Obs.: Nesta questão, o processo cognitivo “compreender” não foi\nabordado. | \n$$\\frac{2}{3} \\times\\left( \\frac{16}{7} +\n\\frac{\\frac{5}{9}}{\\frac{4}{8}} \\right) = \\frac{428}{189}$$ \n$$\\left( \\frac{9}{5} - \\frac{3}{16} \\right) \\div \\frac{5}{4} \\times\n\\frac{1}{3} = \\frac{43}{100}$$ \n$$\\frac{1}{3} \\times 3 + \\frac{7}{38} \\div \\frac{5}{5} =\n\\frac{111}{76}$$ \n$$1 \\times \\frac{4}{9} \\div \\frac{55}{6} = \\frac{8}{165}$$ \n$$\\frac{48}{2} - \\frac{2}{35} \\times \\left( \\frac{67}{3} \\div\n\\frac{77}{7} \\right)= \\frac{27586}{1155}$$ | \n$$\\frac{8}{9} \\times \\left( \\frac{9}{8} \\times \\frac{1}{5}\n\\right)= \\frac{1}{5}$$ \n$$\\frac{8}{33} \\times \\left( \\frac{66}{4} + \\frac{3}{4} \\right)=\n\\frac{46}{11}$$ \n$$\\frac{2}{3} \\times \\left( \\frac{14}{8} \\div \\frac{3}{2} \\right)=\n\\frac{7}{9}$$ \n$$\\frac{3}{5} \\times \\left( \\frac{12}{32} + \\frac{5}{3} \\right)=\n\\frac{5}{8}$$ \n$$\\frac{1}{5} \\times \\left( \\frac{0}{3} + \\frac{5}{4} \\right)=\n\\frac{1}{4}$$ | \n
| 8º ano | \n||
| Objeto de conhecimento:\nPorcentagens. | \n||
| Habilidade | \nQuestão | \n|
(EF08MA04) \nResolver e elaborar* problemas, envolvendo cálculo de porcentagens,\nincluindo o uso de tecnologias digitais**. \n*Obs.: Nesta questão, o processo cognitivo “elaborar” não foi\nabordado. \n**Obs.: O uso de tecnologias digitais fica a critério do(a)\nprofessor(a). | \nUm comerciante oferece \\(7\\%\\) de desconto no\npagamento à vista de um determinado produto. Sabe-se que esse produto\ncusta \\(R\\$ 120,00\\) para pagamento a prazo. No pagamento à vista, qual\né o valor pago pelo produto? \nResposta: \\(\\text{R}\\$ \\thinspace 111,60\\). | \n|
Sabrina entrou em uma loja que anunciava a seguinte\npromoção: “Não perca essa chance! Calças por apenas \\(\\text{R}\\$\n\\thinspace 125,00\\) e na compra de duas pague apenas \\(\\text{R}\\$\n\\thinspace 95,00\\) em cada!”. Qual porcentagem de desconto Sabrina\nganhará no valor final caso compre duas calças? \nResposta: \\(24\\%\\). | \n||
Escreva três formas fracionárias que podem\nrepresentar 88%. \nResposta: \\(\\frac{88}{100}\\), \\(\\frac{44}{50}\\) e\n\\(\\frac{22}{25}\\). | \n||
| Objeto de conhecimento: Dízimas\nperiódicas: fração geratriz. | \n||
| Habilidade | \nQuestão | \n|
(EF08MA05) \nReconhecer e utilizar procedimentos para a obtenção de uma fração\ngeratriz para uma dízima periódica. | \nQual é a fração geratriz da dízima periódica\n0,4444...? \nResposta: \\(\\frac{4}{9}\\). | \n|
Qual é a fração geratriz da dízima periódica\n0,8888...? \nResposta: \\(\\frac{8}{9} = \\frac{8}{3}\\). | \n||
Qual é a fração geratriz da dízima periódica\n2,6666...? \nResposta: \\(\\frac{16}{6}\\). | \n
\n\n\n
\n\n```\n\n:::\n\n### Regras do jogo\n\n1. O jogo consiste na localização de pares correspondentes, sendo uma\n carta com uma questão/problema e seu par com a resposta.\n2. Caso seja na forma presencial, não é necessário cronometrar, pois\n quem obtiver o maior número de pares vence.\n3. Pode ser jogado em grupos, duplas e até sozinho (*online*).\n4. Esta atividade pode ser realizada com o intuito de verificar/avaliar\n o conhecimento dos alunos do 9º ano a respeito do conteúdo frações,\n aliado a algumas habilidades e unidades temáticas previstas na BNCC,\n já estudadas nos anos anteriores do Ensino Fundamental -- Anos\n Finais. Também promove a agilidade de raciocínio matemático, promove\n o trabalho em equipe e estimula a memorização.\n\n### Situação exemplo:\n\nOs problemas propostos na atividade/jogo podem ser resolvidos numa folha\nde caderno e entregues ao professor, para que ele possa avaliar os\ncaminhos que os alunos traçaram para chegar à solução e direcionar sua\nabordagem na hora da explicação do conteúdo.\n\n```{=html}\n\n\n \n\n \n \n
\n\nJogado da Memória
\n\n \n\n
\n\n
\n\nJogo da Memória
\n\n\n\n \n \n \n\t\n\t
\n\n \n\n \n \n \n\t\n
\n\t\n\n \n\n \n\n
\n\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n\n\n
\n\n \n\n \n
Para efetuar a compra de uma tv no valor de R$ 1420,00, José recebeu um desconto de R$ 426,00 no pagamento à vista. Qual a fração que representa a porcentagem de desconto?
Para efetuar a compra de uma tv no valor de R$ 1420,00, José recebeu um desconto de R$ 426,00 no pagamento à vista. Qual a fração que representa a porcentagem de desconto?
Para efetuar a compra de uma tv no valor de R$ 1420,00, José recebeu um desconto de R$ 426,00 no pagamento à vista. Qual a fração que representa a porcentagem de desconto?
Para efetuar a compra de uma tv no valor de R$ 1420,00, José recebeu um desconto de R$ 426,00 no pagamento à vista. Qual a fração que representa a porcentagem de desconto?
Para efetuar a compra de uma tv no valor de R$ 1420,00, José recebeu um desconto de R$ 426,00 no pagamento à vista. Qual a fração que representa a porcentagem de desconto?
Para efetuar a compra de uma tv no valor de R$ 1420,00, José recebeu um desconto de R$ 426,00 no pagamento à vista. Qual a fração que representa a porcentagem de desconto?
Para efetuar a compra de uma tv no valor de R$ 1420,00, José recebeu um desconto de R$ 426,00 no pagamento à vista. Qual a fração que representa a porcentagem de desconto?
Para efetuar a compra de uma tv no valor de R$ 1420,00, José recebeu um desconto de R$ 426,00 no pagamento à vista. Qual a fração que representa a porcentagem de desconto?
Para efetuar a compra de uma tv no valor de R$ 1420,00, José recebeu um desconto de R$ 426,00 no pagamento à vista. Qual a fração que representa a porcentagem de desconto?
Para efetuar a compra de uma tv no valor de R$ 1420,00, José recebeu um desconto de R$ 426,00 no pagamento à vista. Qual a fração que representa a porcentagem de desconto?
Para efetuar a compra de uma tv no valor de R$ 1420,00, José recebeu um desconto de R$ 426,00 no pagamento à vista. Qual a fração que representa a porcentagem de desconto?
Para efetuar a compra de uma tv no valor de R$ 1420,00, José recebeu um desconto de R$ 426,00 no pagamento à vista. Qual a fração que representa a porcentagem de desconto?
Para efetuar a compra de uma tv no valor de R$ 1420,00, José recebeu um desconto de R$ 426,00 no pagamento à vista. Qual a fração que representa a porcentagem de desconto?
Para efetuar a compra de uma tv no valor de R$ 1420,00, José recebeu um desconto de R$ 426,00 no pagamento à vista. Qual a fração que representa a porcentagem de desconto?
Para efetuar a compra de uma tv no valor de R$ 1420,00, José recebeu um desconto de R$ 426,00 no pagamento à vista. Qual a fração que representa a porcentagem de desconto?
Para efetuar a compra de uma tv no valor de R$ 1420,00, José recebeu um desconto de R$ 426,00 no pagamento à vista. Qual a fração que representa a porcentagem de desconto?
Para efetuar a compra de uma tv no valor de R$ 1420,00, José recebeu um desconto de R$ 426,00 no pagamento à vista. Qual a fração que representa a porcentagem de desconto?
Para efetuar a compra de uma tv no valor de R$ 1420,00, José recebeu um desconto de R$ 426,00 no pagamento à vista. Qual a fração que representa a porcentagem de desconto?
Para efetuar a compra de uma tv no valor de R$ 1420,00, José recebeu um desconto de R$ 426,00 no pagamento à vista. Qual a fração que representa a porcentagem de desconto?
Para efetuar a compra de uma tv no valor de R$ 1420,00, José recebeu um desconto de R$ 426,00 no pagamento à vista. Qual a fração que representa a porcentagem de desconto?
Para efetuar a compra de uma tv no valor de R$ 1420,00, José recebeu um desconto de R$ 426,00 no pagamento à vista. Qual a fração que representa a porcentagem de desconto?
Para efetuar a compra de uma tv no valor de R$ 1420,00, José recebeu um desconto de R$ 426,00 no pagamento à vista. Qual a fração que representa a porcentagem de desconto?
Para efetuar a compra de uma tv no valor de R$ 1420,00, José recebeu um desconto de R$ 426,00 no pagamento à vista. Qual a fração que representa a porcentagem de desconto?
Para efetuar a compra de uma tv no valor de R$ 1420,00, José recebeu um desconto de R$ 426,00 no pagamento à vista. Qual a fração que representa a porcentagem de desconto?
Para efetuar a compra de uma tv no valor de R$ 1420,00, José recebeu um desconto de R$ 426,00 no pagamento à vista. Qual a fração que representa a porcentagem de desconto?
Para efetuar a compra de uma tv no valor de R$ 1420,00, José recebeu um desconto de R$ 426,00 no pagamento à vista. Qual a fração que representa a porcentagem de desconto?
Para efetuar a compra de uma tv no valor de R$ 1420,00, José recebeu um desconto de R$ 426,00 no pagamento à vista. Qual a fração que representa a porcentagem de desconto?
Para efetuar a compra de uma tv no valor de R$ 1420,00, José recebeu um desconto de R$ 426,00 no pagamento à vista. Qual a fração que representa a porcentagem de desconto?
Para efetuar a compra de uma tv no valor de R$ 1420,00, José recebeu um desconto de R$ 426,00 no pagamento à vista. Qual a fração que representa a porcentagem de desconto?
Para efetuar a compra de uma tv no valor de R$ 1420,00, José recebeu um desconto de R$ 426,00 no pagamento à vista. Qual a fração que representa a porcentagem de desconto?
| 6º ano | \n|
| Objeto de conhecimento: Frações:\nsignificados (parte/todo, quociente), equivalência, comparação, adição e\nsubtração; cálculo da fração de um número natural; adição e subtração de\nfrações. | \n|
| Habilidade | \nQuestão | \n
(EF06MA07) \nCompreender, comparar e ordenar frações associadas às ideias de\npartes de inteiros e resultado de divisão, identificando frações\nequivalentes*. \n*Obs.: A questão não contempla a parte de “identificando frações\nequivalentes” contida na habilidade. | \nLaura comeu 1/6 de um bolo e João 1/3 desse mesmo bolo. Qual é a\nfração que representa a maior quantidade de bolo que foi comido? \nResposta: 1/3 > 1/6, João comeu mais\nbolo. | \n
(EF06MA08) \nReconhecer que os números racionais positivos podem ser expressos nas\nformas fracionária e decimal, estabelecer relações entre essas\nrepresentações, passando de uma representação para outra. | \nRepresente o número decimal 0,2 em forma de fração. Em seguida,\nrepresente essa fração na forma irredutível. \nResposta: \\(\\frac{2}{10} = \\frac{1}{5}\\). | \n
Dentre os números \\(\\frac{7}{5}\\), \\(1,25\\) e \\(\\frac{9}{8}\\),\nqual representa o maior e menor valor, respectivamente? \nResposta: \\(\\frac{7}{5}\\) e\n\\(\\frac{9}{8}\\). | \n|
| Objeto de conhecimento: Operações\n(adição, subtração, multiplicação, divisão e potenciação) com números\nracionais. | \n|
| Habilidade | \nQuestão | \n
(EF06MA09) \nResolver e elaborar* resolver problemas que envolvam o cálculo da\nfração de uma quantidade e cujo resultado seja um número natural, com e\nsem uso de calculadora. \n*Obs.: A questão não contempla a parte de “elaborar problemas”\ncontida na habilidade | \nNo aniversário de Maria, foram encomendados 900 salgadinhos,\nsendo \\(\\frac{2}{5}\\) de coxinha. Quantas coxinhas foram encomendadas\npara o aniversário? \nResposta: 360. | \n
(EF06MA10) \nResolver e elaborar* problemas que envolvam adição ou subtração com\nnúmeros racionais positivos na representação fracionária. \n*Obs.: A questão não contempla a parte de “elaboração de problemas”\ncontida na habilidade. | \nPara ir à escola, João utiliza sua bicicleta. Quando já havia\npercorrido \\(\\frac{1}{5}\\) da distância, sua bicicleta estragou. A\npartir daí ele foi caminhando. Qual a distância restante que ele deverá\ncaminhar até a escola? \nResposta: João caminhará \\(\\frac{4}{5}\\) do percurso\nrestante até a escola. | \n
| 7º ano | \n|
| Objeto de conhecimento: Números\nracionais na representação fracionária e na decimal: usos, ordenação e\nassociação com pontos da reta numérica e operações. | \n|
| Habilidade | \nQuestão | \n
(EF07MA12) \nResolver e elaborar* problemas que envolvam as operações com números\nracionais. \n*Obs.: A questão não contempla a parte de “elaboração de problemas”\ncontida na habilidade. | \nMaria e José estão comendo uma pizza de 18 fatias. Sabendo que\nMaria comeu 1/3 e José comeu 1/6, quantas fatias eles comeram no\ntotal? \nResposta: 9 fatias. | \n
| Objeto de conhecimento: Reconhecer a\noperação necessária para resolver um problema, calcular o resultado de\noperações com números racionais, e identificar e calcular frações\nequivalentes. | \n|
| Habilidade | \nQuestão | \n
(EF07MA12) \nResolver e elaborar* problemas que envolvam as operações com números\nracionais. \n*Obs.: A questão não contempla a parte de “elaborar problemas”\ncontida na habilidade. | \nNum centro de convivência com 260 alunos, foram ofertadas três\natividades extraclasse: música, dança e artes marciais. Sabe-se que\n\\(\\frac{3}{13}\\) escolheu música e dança, \\(\\frac{2}{5}\\) escolheu\nsomente música, \\(\\frac{1}{4}\\) escolheu artes marciais e o restante\nescolheu apenas dança. Quantos alunos escolheram apenas dança? \nResposta: 31 alunos escolheram apenas\ndança. | \n
Em uma corrida participaram 26 ciclistas. Desses ciclistas, 4/13\nabandonaram a corrida por problemas na bicicleta. Quantos ciclistas\nterminaram a corrida? \nResposta: 18 ciclistas. | \n|
Uma piscina teve 3/4 da sua capacidade preenchida. No entanto,\nainda faltam 2.700 litros para que ela seja enchida por completo. Qual é\na capacidade total dessa piscina? \nResposta: 10.800 litros. | \n|
(EF07MA02) \nResolver e elaborar* problemas que envolvam porcentagens, como os que\nlidam com acréscimos e decréscimos simples, utilizando estratégias\npessoais, cálculo mental e calculadora, no contexto de educação\nfinanceira, entre outros. \n*Obs.: A questão não contempla a parte de “elaborar problemas”\ncontida na habilidade | \nNicolau tinha previsto, no orçamento, um gasto de R$ 2.100,00\npara pintar sua casa. Mas devido a imprevistos na obra, o valor aumentou\n30%. Calcule quantos reais ele gastou na pintura? \nResposta: R$ 2.730,00. | \n
| 8º ano | \n|
| Objeto de conhecimento: Reconhecer uma\nexpressão algébrica. Reconhecer e efetuar operação usando as relações\ninversas de exponenciação e radiciação. Propriedades exponenciais com\nexpoente fracionário. | \n|
| Habilidade | \nQuestão | \n
(EF08MA02) \nResolver e elaborar* problemas usando a relação entre potenciação e\nradiciação, para representar uma raiz como potência de expoente\nfracionário. \n*Obs.: A questão não contempla a parte de “elaborar problemas”\ncontida na habilidade. | \nJoão corre todo fim de tarde. Sabe-se que ontem, a distância\npercorrida foi dada pela fórmula \\(P(n) = 4^{\\frac{n}{2}}\\), com \\(n =\n3\\). Quantos km ele correu ontem? \nResposta: 8 km. | \n
| Objeto de conhecimento: Efetuar\noperações com porcentagens, aliado a situações do cotidiano, como compra\ne venda de um produto. Compreender que a porcentagem, também pode ser\nrepresentada como uma fração de denominador 100. Utilizar a regra de\ntrês para obter o resultado. | \n|
| Habilidade | \nQuestão | \n
(EF08MA04) \nResolver e elaborar* problemas, envolvendo cálculo de porcentagens,\nincluindo o uso de tecnologias digitais. \n*Obs.: A questão não contempla a parte de “elaboração de problemas”\ncontido na habilidade. É indicado o uso da calculadora | \nPara efetuar a compra de uma tv no valor de R$ 1.420,00, José\nrecebeu um desconto de R$ 426,00 no pagamento à vista. Qual é a fração\nque representa a porcentagem de desconto? \nResposta: 30/100. | \n
| Objeto de conhecimento: Utilizar\nmétodos de obtenção de uma fração geratriz de uma dízima periódica.\nFração como parcela de um todo. | \n|
| Habilidade | \nQuestão | \n
(EF08MA05) \nReconhecer e utilizar procedimentos para a obtenção de uma fração\ngeratriz para uma dízima periódica. | \nManoela comeu a quantia equivalente a 0,4444 ... de fatias de uma\ntorta. Mostre em forma de fração quantas fatias ela comeu. \nResposta: 4/9. | \n
| 9º ano | \n|
| Objeto de conhecimento: Potências com\nexpoentes negativos e fracionários. Reconhecer e efetuar operação com\nexpoente fracionário e sua relação inversa. | \n|
| Habilidade | \nQuestão | \n
(EF09MA03) \nEfetuar cálculos com Números reais, inclusive potências com expoentes\nfracionários. | \nConsidere os números a seguir: \\({\\frac{1}{4}}^{\\frac{-1}{2}}\\) e\n\\((4)^{\\frac{-3}{2}}\\). Indique qual representa o maior valor. \nResposta: \\({\\frac{1}{4}}^{\\frac{-1}{2}} =\n(4)^{\\frac{1}{2}} = \\sqrt{4} = 2\\). | \n
| Objeto de conhecimento: Realizar\noperação de probabilidade. Reconhecer que a probabilidade se dá na forma\nde fração, onde o denominador é o número de eventos e o numerador o\nnúmero de ocorrências possíveis. | \n|
| Habilidade | \nQuestão | \n
(EF09MA20) \nReconhecer, em experimentos aleatórios, eventos independentes e\ndependentes* e calcular a probabilidade de sua ocorrência, nos dois\ncasos. \n*Obs.: A questão não contempla “eventos probabilísticos dependentes”\ncontido na habilidade. | \nLançando um dado comum (valores de 1 a 6), não viciado, qual as\nchances de se obter um valor ímpar? \nResposta: 3/6. | \n
\n\n\n
\n```\n\n:::\n\n### Material\n\n- 1 tabuleiro contendo um percurso com 33 quadrados coloridos. O\n percurso é composto por questões (de nível fácil, médio e difícil)\n que envolvam conteúdos de frações.\n- 1 dado simples (6 faces) e 1 ***card*** onde constam as questões\n variadas que envolvem cálculos com frações.\n- 8 marcadores (2 peões, 2 bispos, 2 cavalos e 2 torres nas versões\n branco e preto) para diferenciar os jogadores em cada rodada.\n\n### Regras do jogo\n\n1. O jogo pode ser realizado com um mínimo de 2 e máximo de 8\n jogadores. Cada jogador deve escolher um marcador para\n representá-lo. Na versão *online*, os marcadores são atribuídos\n automaticamente.\n2. Para iniciar o jogo, todos os participantes da rodada devem lançar o\n dado, sendo o primeiro jogador a iniciar o que tirar a maior face.\n Caso haja empate (faces de mesmo valor), os participantes empatados\n devem lançar o dado novamente até que saia um vencedor entre eles.\n Na versão *online*, é lançado um dado de 8 faces sem repetição,\n então não há empate.\n3. Iniciada a partida, cada jogador deve lançar o dado e responder à\n questão contida no ***card*** sorteado. O marcador só vai avançar a\n quantidade obtida no dado se acertar a questão, caso a questão seja\n respondida incorretamente, o marcador permanece onde está.\n4. Vence o jogador que primeiro ultrapassar o quadrado de número 33. O\n participante que, após acertar a questão do *card*, parar exatamente\n no quadrado de número 33, deverá realizar mais jogadas até\n ultrapassá-lo. (Em caso de REPETIR a pergunta e que não esteja\n jogando a versão *online*, o aplicador pode sortear um novo *card*\n ou deixar que o jogador responda à pergunta repetida).\n5. **CASA GANHA-PERDE**: Nessas casas, o jogador pode avançar mais um\n pouco ou retroceder, dependendo do valor contido nela.\n\n**ATENÇÃO**: Assim que o jogador acertar o *card*, ele deve avançar a\nquantidade de casas correspondente à face obtida no dado.\n\n### Situação exemplo:\n\nO jogador deve obedecer ao tempo limite estimado pelo aplicador. Em caso\nde não cumprimento, o jogador perde a rodada.\n\nO jogador só deve avançar nas casas se, e somente se, acertar a resposta\ndo *card* sorteado. Caso erre a questão, seu marcador deve permanecer\nonde está parado.\n\nÉ proibido o uso de tecnologias digitais (calculadora, celular) para\nfacilitar a resolução dos problemas.\n\nO aplicador é responsável pelo manuseio do jogo, levando ao êxito\ndurante a aplicação.\n\nA seguir apresentamos as funções de cada um dos comandos.\n\n| | |\n|:--------------------------------------------------------------------------------------------------------------:|:----------------------------------------------------------------------------------------:|\n| {fig-alt=\"Bandeira verde.\" loading=\"lazy\"} | Bandeira que sinaliza o início do jogo; |\n| {fig-alt=\"4 peças pretas e 4 peças brancas de xadrez: peão, bispo, cavalo e torre.\" loading=\"lazy\"} | Os marcadores para diferenciar os jogadores em cada rodada; |\n| {fig-alt=\"Dado amarelo de 8 faces, mostrando as faces 8 e 5 e, difícil de verde e de cabeça para baixo os números 3 e 2.\" loading=\"lazy\"} | Dado de 8 faces sem repetição para definir a ordem dos jogadores; |\n| {fig-alt=\"Dado creme/branco de 6 faces inclinado, mostrando o número 6 e aparecendo um poco do número 3 a esquerda. A quantidade de pontos é que representa o número. 6 são 6 pontos, por exemplo.\" loading=\"lazy\"} | Dado a ser lançado por cada jogador a cada rodada;|\n| {fig-alt=\"Botão azul com duas notas musicais, duas colcheias unidas e imediatamente ascendentes e com hastes voltadas para cima.\" loading=\"lazy\"} | Ativar ou desativar os sons produzidos pelo jogo; |\n| {fig-alt=\"Quadrado preto com +2 branco no centro\" loading=\"lazy\"} | Casa Ganha-Perde. Neste exemplo, indicando para avançar mais duas casas; | \n| {fig-alt=\"Quadrado com estampa xadrez, mas as casas (quadrados) do xadrez estão inclinados e alternam nas cores cinza e cinza claro.\" loading=\"lazy\"} | Bandeira que sinaliza a chegada, fim do jogo. |\n\n: Quadro 6: Comandos do Jogo Percurso de Frações {.tab}\n\n```{=html}\n\n\n
\n\n Percurso das frações
\n\n \n \n
\n \n\n \n \n \n \n \n \n \n \n\n\n
\n \n \n\n Jogador 1
Escolha um nome (opcional)Jogador 2
Escolha um nome (opcional)Jogador 3
Escolha um nome (opcional)Jogador 4
Escolha um nome (opcional)Jogador 5
Escolha um nome (opcional)Jogador 6
Escolha um nome (opcional)Jogador 7
Escolha um nome (opcional)Jogador 8
Escolha um nome (opcional)\n\n \n \n\n
\n\n \n \n
\n\n ⚑\n \n \n \n \n \n \n \n \n
\n \n \n \n \n 1
\n 2
\n 3
\n \n \n \n \n 4
\n \n 8
\n 7
\n 6
\n 5
\n \n 9
\n \n \n \n \n 10
\n 11
\n 12
\n 13
\n 14
\n \n \n \n \n 15
\n \n \n 18
\n 17
\n 16
\n 21
\n 20
\n 19
\n \n \n 22
\n \n \n \n \n 23
\n 24
\n 25
\n 26
\n 27
\n \n \n \n \n 28
\n \n 32
\n 31
\n 30
\n 29
\n \n 33
\n \n \n \n \n \n \n \n \n \n\n
\n\n Definindo a ordem
\n\n \n\n \n\n\n\n\n
\n \n\n \n \n
\n \n
\n \n 1
\n 8
\n 5
\n 4
\n \n
\n \n 6_
\n 3
\n 2
\n 7
\n \n\n \n\n
\n \n\n
\n\n\n \n \n \n \n \n \n \n
\n ●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
| 6º ano | \n|
| Objeto de conhecimento: Frações:\nsignificados (parte/todo, quociente), equivalência, comparação, adição e\nsubtração; cálculo da fração de um número natural; adição e subtração de\nfrações. | \n|
| Habilidade | \nQuestão | \n
(EF06MA10) \nResolver e elaborar* problemas que envolvam adição ou subtração com\nnúmeros racionais positivos na representação fracionária. \n*Obs.: O processo cognitivo elaborar não é contemplado nas questões\npropostas. | \nIsabel fez a festa de aniversário de seu filho. Do total dos\ndoces comprados, 5/20) era de brigadeiro com granulado e 6/20 de\nbrigadeiro com leite ninho. Qual a fração da quantidade de brigadeiros\nque Isabel comprou para a festa? \nResposta: 11/20. | \n
Estefani e Gisele trabalham de frentista em um posto de\nCombustível. Para chegar até o trabalho, Estefani percorre 2/9 de\nquilômetro e Gisele 2/3 de quilômetro. Que fração representa a\nquantidade de quilômetros que Estefani e Gisele percorrem juntas? \nResposta: 8/9. | \n|
Carla e Pietra trabalham em uma confeitaria. Em um determinado\ndia, Carla produziu 8/15 da produção total de salgadinhos da confeitaria\ne Pietra 3/15. Qual a fração que representa a quantidade de salgadinhos\nque Carla produziu a mais que Pietra? \nResposta: 5/15 = 1/3. | \n|
Gustavo tem uma tira retangular que está dividida em 11 partes\niguais. Nessa tira, ele pintou 5 partes iguais de verde, só que ele\neliminou 3 partes dessa parte verde. Com isso, a parte verde que restou\nrepresenta que fração da tira inicial? \nResposta: 2/11. | \n|
(EF06MA07) \nCompreender, comparar e ordenar frações associadas às ideias de\npartes de inteiros e resultado de divisão, identificando frações\nequivalentes. | \nEm uma eleição, há 2 candidatos concorrendo para ocuparem a vaga\nde vereador. O Candidato A está com 8/12 da intenção dos votos. O\ncandidato B está com 2/6 da intenção dos votos. Qual dos dois candidatos\npossui mais chances de ser eleito? Por quê? \nResposta: O candidato A possui mais chances de ser\neleito, pois 8/12 = 2/3. O candidato B possui 2/6 = 1/3. Logo 2/3 >\n1/3. | \n
A família de Francisco o saiu de Cascavel em direção a Curitiba.\nNo primeiro dia, percorreu 1/2 da distância que separa as duas cidades e\nno segundo dia foi percorrido 4/16 do percurso total. Qual dia eles\npercorreram o maior trajeto do percurso? \nResposta: O segundo dia foi o dia que percorreram a\nmaior distância, pois 1/2 > 1/4. | \n|
Em duas turmas com a mesma quantia de alunos do 9º ano, a\nprofessora de matemática quis comparar o desenvolvimento de seus alunos\nao resolverem a mesma prova. O 9º D teve 1/3 de suas provas gabaritadas,\nenquanto o 9ºF teve 6/9 de suas provas gabaritadas. Qual turma teve o\nmaior número de provas gabaritadas? \nResposta: 6/9 = 2/3. O 9º F teve o maior número de\nprovas gabaritadas se comparado ao 9ºD. | \n|
Rodolfo está vendendo duas casas de mesmo valor e recebeu duas\npropostas. Vanessa se interessou pela casa 1 e ofereceu 2/5 do valor\npara pagamento à vista. Augusto, que se interessou pela casa 2, fez uma\nproposta de 1/3 em cima do valor para pagamento à vista. Qual proposta é\nmais lucrativa para Rodolfo? \nResposta: Como 2/5 > 1/3, temos que a proposta de\nVanessa é a mais lucrativa para Rodolfo. | \n|
| 7º ano | \n|
| Objeto de conhecimento: Fração e seus\nsignificados: como parte de inteiros, resultado da divisão, razão e\noperador. | \n|
| Habilidade | \nQuestão | \n
(EF07MA08) \nComparar e ordenar frações associadas às ideias de partes de\ninteiros, resultado da divisão, razão e operador. | \nDois grupos de ciclistas saíram de Foz do Iguaçu com destino a\nMedianeira. Sabe-se que o primeiro grupo já percorreu 1/3 do percurso e\no segundo grupo percorreu 1/4 do percurso. Qual grupo percorreu a maior\nparte do percurso? \nResposta: 1/3 = 0.333 … e 1/4 = 0,25. Como 0,333...\n> 0,25, concluímos que o grupo 1 já percorreu a maior parte do\npercurso. | \n
Ellen trabalha em uma empresa que possui uma regra para as\nreuniões: é preciso ter pelo menos 2/5 dos funcionários da empresa\npresentes para que possam ser votadas algumas mudanças. Se no dia da\nreunião compareceram 4/7 do total funcionários, uma votação poderá ter\nocorrido? \nResposta: 2/5 = 0,4 e 4/7 = 0,571 ... Como 4/7 >\n2/5, concluímos que poderá haver uma votação. | \n|
Renato é professor de Educação Física de uma escola, onde o\nesporte preferido de seus alunos do 8º ano é o futebol. Então, o\nprofessor fez a seguinte proposta: ele os deixaria jogar futebol na\nsegunda parte da aula se pelo menos 2/3 da turma estiver a favor.\nSabendo que o 8º ano possui 30 alunos e 15 queriam jogar futebol, qual a\nfração que representa os alunos que concordaram em jogar futebol? Eles\nirão jogar futebol nesta aula? \nResposta: 15/30 = 1/2 representa a fração de alunos\nque estavam a favor de jogar futebol. Mas 1/2 < 2/3, logo, os alunos\nnão irão jogar futebol. | \n|
Gilberto leva 12/15 de 1 hora para ir da sua casa até a\nuniversidade de ônibus e seu colega de sala, Lucas, leva 6/12 de 1 hora\nindo de carro. Quem leva menos tempo para chegar à universidade? \nResposta: Lucas. | \n|
(EF07MA09) \nUtilizar, na resolução de problemas, a associação entre razão e\nfração, como a fração 2/3 para expressar a razão de duas partes de uma\ngrandeza para três partes da mesma ou três partes de outra\ngrandeza. | \nSara comprou 5 pacotes de chicletes de morango e 7 de chicletes\nde uva. Qual é a razão do número de pacotes de chicletes de uva para o\nde morango? \nResposta: 7/5. | \n
Beatriz foi ao mercado, comprou 6 refrigerantes e 4 sucos. Qual a\nrazão de refrigerantes e sucos equivale que Beatriz comprou? \nResposta: 6/4 = 3/2. | \n|
Pedro levou 100 salgadinhos para festa de sua sala e a professora\ndividiu em quantidades iguais para seus 20 alunos. Qual a razão\nestabelecida entre salgadinhos e alunos? \nResposta: 100/20 = 5/1 = 5. | \n|
| Objeto de conhecimento: Números\nracionais na representação fracionária e na decimal: usos, ordenação e\nassociação com pontos da reta numérica e operações. | \n|
| Habilidade | \nQuestão | \n
(EF07MA11) \nCompreender e utilizar a multiplicação e a divisão de números\nracionais, a relação entre elas e suas propriedades\noperatórias. | \nRoberta vende na feira a dúzia de Kiwi. Um de seus clientes pede\napenas 2/6 de uma dúzia. Quantos kiwis Roberta terá que separar? \nResposta: 2/6 de 12 unidades são 4, assim, Roberta\nvendeu 4 Kiwi a seu cliente. | \n
Um lavador de carro gasta 4/3 de um litro de água para lavar cada\ncarro. Quantos carros ele consegue lavar com 40 litros? \nResposta: O lavador consegue lavar 30 carros com 40\nlitros de água. | \n|
| 8º ano | \n|
| Objeto de conhecimento: Volume de bloco\nretangular. Medidas de capacidade. | \n|
| Habilidade | \nQuestão | \n
(EF08MA21) \nResolver e elaborar problemas que envolvam o cálculo do volume de\nrecipiente cujo formato é o de um bloco retangular. | \nPedro construiu uma piscina que tem a forma de um paralelepípedo\nretangular com as seguintes dimensões: 9,80 m de comprimento, 4,25 m de\nlargura e 1,40 m de profundidade. A capacidade dessa piscina em litros\né? \nResposta: A capacidade dessa piscina em litros é de\n58.310 L. | \n
Qual é o volume, em mililitros (ml), de uma caixa de bis que tem\na forma de um paralelepípedo retangular com largura de 3 cm, comprimento\nde 6 cm e altura de 19 cm? \nResposta: O volume dessa caixa de bis corresponde a\n342 ml. | \n|
| Objeto de conhecimento: Dízimas\nperiódicas: fração geratriz. | \n|
| Habilidade | \nQuestão | \n
(EF08MA05) \nReconhecer e utilizar procedimentos para a obtenção de uma fração\ngeratriz para uma dízima periódica. | \nQual é a fração geratriz da dízima periódica 0,4555...? \nResposta: 41/90 é a fração geratriz da dízima\nperiódica 0,4555... | \n
Renata Camacho Bezerra e Richael Silva\nCaetano^[2](#footnote-28){#footnote-ref-28}^
Janice Kunz Oenning^[3](#footnote-29){#footnote-ref-29}^\n:::\n\nO presente capítulo apresenta 3 (três) jogos elaborados pelos\nacadêmicos^[4](#footnote-30){#footnote-ref-30}^ do curso de Licenciatura\nem Matemática da Universidade Estadual do Oeste do Paraná (Unioeste)\n*campus* de Foz do Iguaçu e participantes (bolsistas e voluntários) do\nPrograma Institucional de Bolsa de Iniciação à Docência (Pibid), em\nespecífico do subprojeto interdisciplinar Matemática (*campi* Cascavel e\nFoz do Iguaçu) e Química (campus Toledo). A elaboração desses jogos\npartiu de uma necessidade apresentada pela professora supervisora de\nMatemática, também participante do Pibid, ao compartilhar -- em um dos\nencontros síncronos realizados -- as dificuldades dos seus alunos do\nnono ano do Ensino Fundamental acerca da aprendizagem do objeto de\nconhecimento fração. Isso posto, o grupo Pibid decidiu que o jogo, por\nrepresentar uma alternativa metodológica pertinente ao ensino de\nMatemática (de maneira remota ou\npresencial)^[5](#footnote-31){#footnote-ref-31}^, seria uma boa opção\nenquanto um auxílio à professora supervisora de Matemática.\n\nContudo, antes de os licenciandos iniciarem a elaboração dos jogos,\nrealizou-se um estudo teórico em dois documentos oficiais (Parâmetros\nCurriculares Nacionais (PCN) e na Base Nacional Comum Curricular\n(BNCC)), orientado pelos professores universitários -- os coordenadores\nvoluntários de área do referido subprojeto -- de modo a subsidiar tal\nelaboração.\n\nEm um primeiro momento, e valendo-se dos Parâmetros Curriculares\nNacionais (PCN) -- Matemática [@pcn_1997], realizou-se o estudo e a\ndiscussão referente aos diferentes significados envolvendo o objeto de\nconhecimento fração, a saber: a) **parte-todo --** na qual a fração\nindica a relação que existe entre um número de partes e o total (p. ex.,\ndividir uma pizza em partes iguais); b) **quociente --** na qual a\nfração indica a divisão de um número natural por outro $(a \\div b =\\frac{a}{b}; b \\neq 0)$ (p. ex., dividir 2 chocolates para 5\npessoas; c) **índice comparativo** -- na qual a fração indica uma\ncomparação entre duas quantidades de mesma grandeza, sendo, portanto,\ninterpretada como razão (p. ex., 2 de cada 5 habitantes de um município\nsão imigrantes, escalas em mapas, o estudo de porcentagem); d)\n**operador** -- na qual a fração desempenha um papel de transformação e\nque atua sobre uma situação modificando-a (p. ex., o número que deve ser\nmultiplicado ao 3 para resultar em 2) e; e) **medida** -- na qual a\nfração é utilizada na situação em que divide-se uma unidade em partes\niguais e verifica-se quantas dessas partes cabem (p. ex., a quantidade\nde canecas de 2 litros necessárias para preencher um tambor com 11\nlitros de leite).\n\nEm seguida, os acadêmicos realizaram uma pesquisa a respeito do objeto\nde conhecimento fração, apresentado na Base Nacional Comum Curricular\n(BNCC) [@bncc_foz_2017]. A partir dessa pesquisa, o grupo concluiu que o\nreferido objeto de conhecimento é citado nos anos\nfinais^[6](#footnote-32){#footnote-ref-32}^ do Ensino Fundamental (6.º\nao 9.º ano) e que diversas habilidades estão relacionadas a diferentes\nobjetos de conhecimento que tratam explicitamente da fração. O quadro a\nseguir apresenta uma síntese dessa referida pesquisa e que foi objeto de\ndiscussão pelo grupo:\n\n```{=html}\n
| Ano | \nObjeto\nde \nconhecimento | \nHabilidade | \n
|---|---|---|
| 6º | \nFrações: significados (parte/todo, quociente),\nequivalência, comparação, adição e subtração; cálculo da fração de um\nnúmero natural; adição e subtração de frações | \n(EF06MA07) Compreender, comparar e ordenar frações\nassociadas às ideias de partes de inteiros e resultado de divisão,\nidentificando frações equivalentes. | \n
| (EF06MA08) Reconhecer que os números racionais\npositivos podem ser expressos nas formas fracionária e decimal,\nestabelecer relações entre essas representações, passando de uma\nrepresentação para outra, e relacioná-los a pontos na reta\nnumérica. | \n||
| (EF06MA09) Resolver e elaborar problemas que\nenvolvam o cálculo da fração de uma quantidade e cujo resultado seja um\nnúmero natural, com e sem uso de calculadora. | \n||
| (EF06MA10) Resolver e elaborar problemas que\nenvolvam adição ou subtração com números racionais positivos na\nrepresentação fracionária. | \n||
| 7º | \nFração e seus significados: como parte de \ninteiros, resultado da divisão, razão e operador | \n(EF07MA05) Resolver um mesmo problema utilizando\ndiferentes algoritmos. | \n
| (EF07MA06) Reconhecer que as resoluções de um grupo\nde problemas, que têm a mesma estrutura, podem ser obtidas utilizando os\nmesmos procedimentos. | \n||
| (EF07MA07) Representar por meio de um fluxograma os\npassos utilizados para resolver um grupo de problemas. | \n||
| (EF07MA08) Comparar e ordenar frações associadas às\nideias de partes de inteiros, resultado da divisão, razão e\noperador. | \n||
| (EF07MA09) Utilizar, na resolução de problemas, a\nassociação entre razão e fração, como a fração 2/3 para expressar a\nrazão de duas partes de uma grandeza para três partes da mesma ou três\npartes de outra grandeza. | \n||
Números racionais na representação fracionária \ne na decimal: usos, ordenação e associação com \npontos da reta numérica e operações | \n(EF07MA10) Comparar e ordenar números racionais em\ndiferentes contextos e associá-los a pontos da reta numérica. | \n|
| (EF07MA11) Compreender e utilizar a multiplicação e\na divisão de números racionais, a relação entre elas e suas propriedades\noperatórias. | \n||
| (EF07MA12) Resolver e elaborar problemas que\nenvolvam as operações com números racionais. | \n||
| 8º | \nDízimas periódicas: fração geratriz | \n(EF08MA05) Reconhecer e utilizar procedimentos para\na obtenção de uma fração geratriz para uma dízima periódica. | \n
| 9º | \nPotências com expoentes negativos e fracionários | \n(EF09MA03) Efetuar cálculos com números reais,\ninclusive potências com expoentes fracionários. | \n
O sublinhado no nome e pontos do grupo significa que é a vez dele de jogar (responder).
\n \n \n\n\n\n O javascript precisa estar ativado para jogar.\n\n
\n\n\n```\n:::\n\n### Regras do jogo\n\n1. A turma é dividida em dois grupos ou mais, de forma que,\n preferencialmente, os grupos tenham a mesma quantidade de\n integrantes.\n2. Em cada grupo deve ser estabelecida uma ordem que os jogadores\n deverão seguir durante o andamento do jogo (a ordem estabelecida\n pode ficar a critério dos alunos ou do professor).\n3. O professor deve mostrar o primeiro *card* e o primeiro aluno do\n Grupo 1, por exemplo, tem 2 minutos (o tempo pode ser alterado pelo\n professor) para resolver o que se pede no mesmo. Se o aluno\n responder corretamente, dentro do tempo, o grupo ganha um ponto;\n caso contrário, perde um ponto. Há a opção de pular o *card*,\n colocando-o no final da fila. Com essa opção não se perde ponto, no\n entanto, dá a chance de o adversário responder, caso apareça para o\n mesmo no futuro.\n4. Cada aluno de cada grupo resolve o que se pede no *card*, um de cada\n vez, alternando-se entre os grupos e respeitando a ordem\n preestabelecida.\n5. As respostas devem ser dadas na forma de frações irredutíveis.\n6. Caso o aluno responda corretamente, o grupo leva um ponto. Ganha o\n jogo o grupo que acumular mais pontos.\n\n### Situação exemplo:\n\nA turma foi separada em dois grupos:\n\n ------------- -------------\n **Grupo 1** **Grupo 2**\n Aluno A Aluno F\n Aluno B Aluno G\n Aluno C Aluno H\n Aluno D Aluno I\n Aluno E Aluno J\n ------------- -------------\n\n: Quadro 2: Exemplo de divisão em dois grupos {.quadro2}\n\nO primeiro a jogar será o Aluno A e este deverá resolver a operação\npresente no *card* apresentado pelo professor:\n\n::: bloco-imagem\n\n{#fig-cardVerde fig-alt=\"Ilustração de uma folha pautada e esverdeada com a questão a ser\nrespondida e local para o usuário colocar a sua\nresposta\" loading=\"lazy\"}\n:::\n\nO aluno deverá resolver a operação dentro do tempo estipulado e dar a\nsua resposta na forma de fração irredutível. Feito isso, o professor\nclica no comando de próximo *card* para que o *card* gire e seja feita a\ncorreção automática e, assim, os alunos podem conferir se a resposta\nestava correta.\n\nEm seguida, quem deverá responder o próximo *card* é o Aluno F do Grupo\n2, depois o Aluno B do grupo 1 e assim, sucessivamente, até que todos os\nalunos respondam pelo menos um *card*.\n\n### Os comandos do jogo:\n\nA visualização do jogo é a seguinte:\n\n::: bloco-imagem\n\n{#fig-telaCardDasFracoes fig-alt=\"Tela do jogo com uma folha pautada e rosada com a perguta e espaço\npara a resposta do jogador. Tem o placar, um botão com duas notas\nmusicais (duas colcheias unidas) para ativar/desativar o som, um botão\ncom um alto-falante para ouvir o que está escrito no card, um botão com\num x para pular o card, um botão com uma seta para direita para\nresponder, ver a resposta e ir para o próximo card e possui uma\nindicação de quantas perguntas já foram respondidas e quantas\nfaltam.\" loading=\"lazy\"}\n:::\n\nA seguir, apresentamos as funções de cada um desses comandos ao redor do\n*card*.\n\n| | |\n|:-----------------------------------------------------------------------------------------------------------------------------------------------------------------------:|:------------------------------------------------------------------------------------------:| \n| {fig-alt=\"Imagem de um botão cinza claro com um alto-falante em dois tons de cinza e imagem de ondas em azul saindo do alto-falante\" loading=\"lazy\"} | O que está escrito no *card* é reproduzido sonoramente; |\n| {fig-alt=\"Imagem de um botão cinza claro com duas notas musicais em azul. São duas colcheias unidas imediatamente ascendentes e com as hastes voltadas para cima.\" loading=\"lazy\"} | Ativa ou desativa os sons produzidos pelo jogo; |\n| {fig-alt=\"Botão cinza claro com um X em azul.\" loading=\"lazy\"} | Pula o *card* apresentado, colocando-o no final da fila e dando a chance do seu adversário responder; |\n| {fig-alt=\"Botão cinza claro com uma seta azul para a direita.\"loading=\"lazy\"} | Passa para o próximo *card*, efetuando a correção automática; |\n\n: Quadro 3: As Funções do jogo\n\nA seguir constam as situações-problema elaboradas e apresentadas nos\n*cards*.\n\n```{=html}\n| 6º ano | \n||
| Objeto de conhecimento: Frações:\nsignificados (parte/todo, quociente), equivalência, comparação, adição e\nsubtração; cálculo da fração de um número natural; adição e subtração de\nfrações. | \n||
| Habilidade | \nQuestão | \n|
(EF06MA07) \nCompreender, comparar e ordenar frações associadas às ideias de\npartes de inteiros e resultado de divisão, identificando frações\nequivalentes. | \nProfessora Helena comprou determinada quantidade de\npizzas para 3 turmas. Sabendo que a turma A comeu \\(\\frac{6}{16}\\) do\ntotal de pedaços, a turma B comeu \\(\\frac{2}{8}\\) e a turma C comeu\n\\(\\frac{5}{12}\\), qual fração representa a turma que comeu mais? \nResposta:\n\\(\\frac{5}{12}\\). | \n|
Comprei uma barra de chocolate que possui vinte\npedaços (quadradinhos) de mesmo tamanho. No primeiro dia comi\n\\(\\frac{1}{5}\\) da barra. Já no segundo dia, comi o equivalente a\n\\(\\frac{4}{10}\\) da barra inicial. Em qual dia eu comi mais\nchocolate? \nResposta: Segundo dia. | \n||
(EF06MA08) \nReconhecer que os números racionais positivos podem ser expressos nas\nformas fracionária e decimal, estabelecer relações entre essas\nrepresentações, passando de uma representação para outra, e\nrelacioná-los a pontos na reta numérica. | \nA fração \\(\\frac{2}{5}\\) pode ser representada por\nqual ponto na reta numérica? \n
Resposta: Ponto B. | \n|
A fração \\(\\frac{17}{9}\\) pode ser localizada entre\nquais pontos na reta numérica? \n
Resposta: Entre os pontos B e C. | \n||
Indique quais pontos podem representar as\nfrações \\(\\frac{7}{8}\\), \\(\\frac{35}{7}\\) e \\(\\frac{16}{6}\\) na reta\nnumérica, respectivamente. \n
Resposta: B, E e D. | \n||
(EF06MA09) \nResolver e elaborar* problemas que envolvam o cálculo da fração de\numa quantidade e cujo resultado seja um número natural, com e sem uso de\ncalculadora**. \n*Obs.: Nesta questão o processo cognitivo “elaborar” não foi\nabordado. \n**Obs.: O uso de calculadora fica a critério do(a)\nprofessor(a). | \nYara comprou um pote de sorvete que tinha as\nseguintes dimensões: 22 cm de comprimento, 8 cm de largura e 20 cm de\naltura. Beatriz também queria comprar um pote de sorvete, porém, não\ntinha dinheiro suficiente e então resolveu comprar um que tinha\n\\(\\frac{25}{88}\\) do volume do pote de Yara. Quantos mililitros têm o\npote de Beatriz? \nResposta: 1000 ml ou 1 litro. | \n|
Ana quer comprar um celular no Paraguai e que custa\n2.500,00 reais; ela já tem 2/5 do valor. Quantos reais faltam para ela\nconseguir comprar o celular? \nResposta: \\(\\text{R}\\$ \\thinspace\n1.500,00\\). | \n||
(EF06MA10) \nResolver e elaborar* problemas que envolvam adição ou subtração com\nnúmeros racionais positivos na representação fracionária. \n*Obs.: Nesta questão o processo cognitivo “elaborar” não foi\nabordado. | \nSabe-se que uma caixa d'água, inicialmente, estava\ncom \\(\\frac{1}{4}\\) da sua capacidade e foi completada com mais\n\\(\\frac{2}{5}\\) da sua capacidade. Responda: \na) Qual é a fração que representa a quantidade de água na caixa\nd'água? \nResposta: \\(\\frac{13}{20}\\). \nb) Qual é a fração que representa a parte vazia da caixa d'água? \nResposta: \\(\\frac{7}{20}\\). | \n|
| Exercícios envolvendo adição ou subtração com números\nracionais positivos na representação fracionária. | \n$$\\frac{3}{8} + \\frac{75}{3} = \\frac{203}{8}$$ \n$$\\frac{12}{15} + \\frac{22}{5} = \\frac{26}{5}$$ \n$$\\frac{5}{9} + \\frac{8}{5} = \\frac{97}{45}$$ \n$$\\frac{55}{9} + \\frac{8}{9} = 7$$ \n$$\\frac{2}{10} + \\frac{3}{5} = \\frac{4}{5}$$ \n$$\\frac{3}{4} + \\frac{2}{8} = 1$$ | \n$$\\frac{29}{2} - \\frac{1}{6} = \\frac{43}{3}$$ \n$$\\frac{60}{16} - \\frac{82}{4} = - \\frac{67}{4}$$ \n$$\\frac{71}{6} - \\frac{16}{3} = \\frac{13}{2}$$ \n$$\\frac{45}{4} - \\frac{6}{8} = \\frac{21}{2}$$ \n$$\\frac{6}{7} - \\frac{1}{3} = \\frac{11}{21}$$ \n$$\\frac{3}{8} - \\frac{4}{16} = \\frac{1}{8}$$ | \n
Obtenha o resultado, em forma de fração irredutível,\nda operação: \\(\\frac{3}{2} - \\frac{1}{4}\\). \nResposta: \\(\\frac{5}{4}\\). | \n||
Obtenha o resultado, em forma de fração irredutível,\nda operação: \\(\\frac{3}{2} + \\frac{1}{4}\\). \nResposta: \\(\\frac{7}{4}\\). | \n||
| 7º ano | \n||
| Objeto de conhecimento: Fração e seus\nsignificados: como parte de inteiros, resultado da divisão, razão e\noperador | \n||
| Habilidade | \nQuestão | \n|
(EF07MA08) \nComparar e ordenar frações associadas às ideias de partes de\ninteiros, resultado da divisão, razão e operador. | \nCaio, Raquel e Douglas estavam apostando uma corrida,\nna qual eles deveriam correr o máximo possível dentro de um determinado\ntempo estipulado por eles. Quando acabou o tempo, Caio, Raquel e Douglas\nverificaram a distância que cada um tinha percorrido que era,\nrespectivamente, \\(\\frac{6}{24}\\), \\(\\frac{9}{24}\\) e \\(\\frac{4}{30}\\)\ndo percurso em linha reta. Qual deles ficou em último lugar? \nResposta: Douglas. | \n|
A mãe de Lucas e Beatriz comprou uma pizza de 8\npedaços e resolveu dividi-la entre os três da seguinte maneira: Beatriz\nficaria com \\(1/2\\) da pizza, Lucas com \\(\\frac{1}{8}\\) e sua mãe com\n\\(\\frac{6}{16}\\). Qual deles ficou com mais pedaços? \nResposta: Beatriz. | \n||
(EF07MA09) \nUtilizar, na resolução de problemas, a associação entre razão e\nfração, como a fração 2/3 para expressar a razão de duas partes de uma\ngrandeza para três partes da mesma ou três partes de outra\ngrandeza. | \nLuana comprou 9 balões vermelhos e 15 amarelos. Qual\né a fração que representa a razão entre o número de balões amarelos e\nvermelhos? \nResposta: \\(\\frac{5}{3}\\). | \n|
Elisa possui uma coleção de 90 carrinhos\ncolecionáveis que são réplicas de diversas marcas, sendo 12 da\nVolkswagen, 27 da Chevrolet, 16 da Ford e 35 Fiat. Quais frações\nrepresentam a razão entre os carrinhos da marca Fiat e Chevrolet, e da\nmarca Ford e Volkswagen. \nResposta: \\(\\frac{35}{27}\\) e\n\\(\\frac{4}{3}\\). | \n||
Ao dividir um bolo, em partes iguais, para oito\npessoas, a razão estabelecida a cada pedaço do bolo será? \nResposta: \\(\\frac{1}{8}\\). | \n||
Considere que uma pizza tenha 4 sabores, possua ao\ntotal 12 pedaços do mesmo tamanho e que cada sabor possua a mesma\nquantidade de pedaços. Se uma pessoa comer um pedaço de cada sabor, qual\nserá a razão do que ela comeu em relação ao total de pizza? \nResposta: \\(\\frac{1}{3}\\). | \n||
| Objeto de conhecimento: Números\nracionais na representação fracionária e na decimal: usos, ordenação e\nassociação com pontos da reta numérica e operações. | \n||
| Habilidade | \nQuestão | \n|
(EF07MA11) \nCompreender* e utilizar a multiplicação e a divisão de números\nracionais, a relação entre elas e suas propriedades operatórias. \n*Obs.: Nesta questão, o processo cognitivo “compreender” não foi\nabordado. | \n$$\\frac{2}{3} \\times\\left( \\frac{16}{7} +\n\\frac{\\frac{5}{9}}{\\frac{4}{8}} \\right) = \\frac{428}{189}$$ \n$$\\left( \\frac{9}{5} - \\frac{3}{16} \\right) \\div \\frac{5}{4} \\times\n\\frac{1}{3} = \\frac{43}{100}$$ \n$$\\frac{1}{3} \\times 3 + \\frac{7}{38} \\div \\frac{5}{5} =\n\\frac{111}{76}$$ \n$$1 \\times \\frac{4}{9} \\div \\frac{55}{6} = \\frac{8}{165}$$ \n$$\\frac{48}{2} - \\frac{2}{35} \\times \\left( \\frac{67}{3} \\div\n\\frac{77}{7} \\right)= \\frac{27586}{1155}$$ | \n$$\\frac{8}{9} \\times \\left( \\frac{9}{8} \\times \\frac{1}{5}\n\\right)= \\frac{1}{5}$$ \n$$\\frac{8}{33} \\times \\left( \\frac{66}{4} + \\frac{3}{4} \\right)=\n\\frac{46}{11}$$ \n$$\\frac{2}{3} \\times \\left( \\frac{14}{8} \\div \\frac{3}{2} \\right)=\n\\frac{7}{9}$$ \n$$\\frac{3}{5} \\times \\left( \\frac{12}{32} + \\frac{5}{3} \\right)=\n\\frac{5}{8}$$ \n$$\\frac{1}{5} \\times \\left( \\frac{0}{3} + \\frac{5}{4} \\right)=\n\\frac{1}{4}$$ | \n
| 8º ano | \n||
| Objeto de conhecimento:\nPorcentagens. | \n||
| Habilidade | \nQuestão | \n|
(EF08MA04) \nResolver e elaborar* problemas, envolvendo cálculo de porcentagens,\nincluindo o uso de tecnologias digitais**. \n*Obs.: Nesta questão, o processo cognitivo “elaborar” não foi\nabordado. \n**Obs.: O uso de tecnologias digitais fica a critério do(a)\nprofessor(a). | \nUm comerciante oferece \\(7\\%\\) de desconto no\npagamento à vista de um determinado produto. Sabe-se que esse produto\ncusta \\(R\\$ 120,00\\) para pagamento a prazo. No pagamento à vista, qual\né o valor pago pelo produto? \nResposta: \\(\\text{R}\\$ \\thinspace 111,60\\). | \n|
Sabrina entrou em uma loja que anunciava a seguinte\npromoção: “Não perca essa chance! Calças por apenas \\(\\text{R}\\$\n\\thinspace 125,00\\) e na compra de duas pague apenas \\(\\text{R}\\$\n\\thinspace 95,00\\) em cada!”. Qual porcentagem de desconto Sabrina\nganhará no valor final caso compre duas calças? \nResposta: \\(24\\%\\). | \n||
Escreva três formas fracionárias que podem\nrepresentar 88%. \nResposta: \\(\\frac{88}{100}\\), \\(\\frac{44}{50}\\) e\n\\(\\frac{22}{25}\\). | \n||
| Objeto de conhecimento: Dízimas\nperiódicas: fração geratriz. | \n||
| Habilidade | \nQuestão | \n|
(EF08MA05) \nReconhecer e utilizar procedimentos para a obtenção de uma fração\ngeratriz para uma dízima periódica. | \nQual é a fração geratriz da dízima periódica\n0,4444...? \nResposta: \\(\\frac{4}{9}\\). | \n|
Qual é a fração geratriz da dízima periódica\n0,8888...? \nResposta: \\(\\frac{8}{9} = \\frac{8}{3}\\). | \n||
Qual é a fração geratriz da dízima periódica\n2,6666...? \nResposta: \\(\\frac{16}{6}\\). | \n
\n\n\n
\n\n```\n\n:::\n\n### Regras do jogo\n\n1. O jogo consiste na localização de pares correspondentes, sendo uma\n carta com uma questão/problema e seu par com a resposta.\n2. Caso seja na forma presencial, não é necessário cronometrar, pois\n quem obtiver o maior número de pares vence.\n3. Pode ser jogado em grupos, duplas e até sozinho (*online*).\n4. Esta atividade pode ser realizada com o intuito de verificar/avaliar\n o conhecimento dos alunos do 9º ano a respeito do conteúdo frações,\n aliado a algumas habilidades e unidades temáticas previstas na BNCC,\n já estudadas nos anos anteriores do Ensino Fundamental -- Anos\n Finais. Também promove a agilidade de raciocínio matemático, promove\n o trabalho em equipe e estimula a memorização.\n\n### Situação exemplo:\n\nOs problemas propostos na atividade/jogo podem ser resolvidos numa folha\nde caderno e entregues ao professor, para que ele possa avaliar os\ncaminhos que os alunos traçaram para chegar à solução e direcionar sua\nabordagem na hora da explicação do conteúdo.\n\n```{=html}\n\n\n \n\n \n \n
\n\nJogado da Memória
\n\n \n\n
\n\n
\n\nJogo da Memória
\n\n\n\n \n \n \n\t\n\t
\n\n \n\n \n \n \n\t\n
\n\t\n\n \n\n \n\n
\n\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n\n\n
\n\n \n\n \n
Para efetuar a compra de uma tv no valor de R$ 1420,00, José recebeu um desconto de R$ 426,00 no pagamento à vista. Qual a fração que representa a porcentagem de desconto?
Para efetuar a compra de uma tv no valor de R$ 1420,00, José recebeu um desconto de R$ 426,00 no pagamento à vista. Qual a fração que representa a porcentagem de desconto?
Para efetuar a compra de uma tv no valor de R$ 1420,00, José recebeu um desconto de R$ 426,00 no pagamento à vista. Qual a fração que representa a porcentagem de desconto?
Para efetuar a compra de uma tv no valor de R$ 1420,00, José recebeu um desconto de R$ 426,00 no pagamento à vista. Qual a fração que representa a porcentagem de desconto?
Para efetuar a compra de uma tv no valor de R$ 1420,00, José recebeu um desconto de R$ 426,00 no pagamento à vista. Qual a fração que representa a porcentagem de desconto?
Para efetuar a compra de uma tv no valor de R$ 1420,00, José recebeu um desconto de R$ 426,00 no pagamento à vista. Qual a fração que representa a porcentagem de desconto?
Para efetuar a compra de uma tv no valor de R$ 1420,00, José recebeu um desconto de R$ 426,00 no pagamento à vista. Qual a fração que representa a porcentagem de desconto?
Para efetuar a compra de uma tv no valor de R$ 1420,00, José recebeu um desconto de R$ 426,00 no pagamento à vista. Qual a fração que representa a porcentagem de desconto?
Para efetuar a compra de uma tv no valor de R$ 1420,00, José recebeu um desconto de R$ 426,00 no pagamento à vista. Qual a fração que representa a porcentagem de desconto?
Para efetuar a compra de uma tv no valor de R$ 1420,00, José recebeu um desconto de R$ 426,00 no pagamento à vista. Qual a fração que representa a porcentagem de desconto?
Para efetuar a compra de uma tv no valor de R$ 1420,00, José recebeu um desconto de R$ 426,00 no pagamento à vista. Qual a fração que representa a porcentagem de desconto?
Para efetuar a compra de uma tv no valor de R$ 1420,00, José recebeu um desconto de R$ 426,00 no pagamento à vista. Qual a fração que representa a porcentagem de desconto?
Para efetuar a compra de uma tv no valor de R$ 1420,00, José recebeu um desconto de R$ 426,00 no pagamento à vista. Qual a fração que representa a porcentagem de desconto?
Para efetuar a compra de uma tv no valor de R$ 1420,00, José recebeu um desconto de R$ 426,00 no pagamento à vista. Qual a fração que representa a porcentagem de desconto?
Para efetuar a compra de uma tv no valor de R$ 1420,00, José recebeu um desconto de R$ 426,00 no pagamento à vista. Qual a fração que representa a porcentagem de desconto?
Para efetuar a compra de uma tv no valor de R$ 1420,00, José recebeu um desconto de R$ 426,00 no pagamento à vista. Qual a fração que representa a porcentagem de desconto?
Para efetuar a compra de uma tv no valor de R$ 1420,00, José recebeu um desconto de R$ 426,00 no pagamento à vista. Qual a fração que representa a porcentagem de desconto?
Para efetuar a compra de uma tv no valor de R$ 1420,00, José recebeu um desconto de R$ 426,00 no pagamento à vista. Qual a fração que representa a porcentagem de desconto?
Para efetuar a compra de uma tv no valor de R$ 1420,00, José recebeu um desconto de R$ 426,00 no pagamento à vista. Qual a fração que representa a porcentagem de desconto?
Para efetuar a compra de uma tv no valor de R$ 1420,00, José recebeu um desconto de R$ 426,00 no pagamento à vista. Qual a fração que representa a porcentagem de desconto?
Para efetuar a compra de uma tv no valor de R$ 1420,00, José recebeu um desconto de R$ 426,00 no pagamento à vista. Qual a fração que representa a porcentagem de desconto?
Para efetuar a compra de uma tv no valor de R$ 1420,00, José recebeu um desconto de R$ 426,00 no pagamento à vista. Qual a fração que representa a porcentagem de desconto?
Para efetuar a compra de uma tv no valor de R$ 1420,00, José recebeu um desconto de R$ 426,00 no pagamento à vista. Qual a fração que representa a porcentagem de desconto?
Para efetuar a compra de uma tv no valor de R$ 1420,00, José recebeu um desconto de R$ 426,00 no pagamento à vista. Qual a fração que representa a porcentagem de desconto?
Para efetuar a compra de uma tv no valor de R$ 1420,00, José recebeu um desconto de R$ 426,00 no pagamento à vista. Qual a fração que representa a porcentagem de desconto?
Para efetuar a compra de uma tv no valor de R$ 1420,00, José recebeu um desconto de R$ 426,00 no pagamento à vista. Qual a fração que representa a porcentagem de desconto?
Para efetuar a compra de uma tv no valor de R$ 1420,00, José recebeu um desconto de R$ 426,00 no pagamento à vista. Qual a fração que representa a porcentagem de desconto?
Para efetuar a compra de uma tv no valor de R$ 1420,00, José recebeu um desconto de R$ 426,00 no pagamento à vista. Qual a fração que representa a porcentagem de desconto?
Para efetuar a compra de uma tv no valor de R$ 1420,00, José recebeu um desconto de R$ 426,00 no pagamento à vista. Qual a fração que representa a porcentagem de desconto?
Para efetuar a compra de uma tv no valor de R$ 1420,00, José recebeu um desconto de R$ 426,00 no pagamento à vista. Qual a fração que representa a porcentagem de desconto?
| 6º ano | \n|
| Objeto de conhecimento: Frações:\nsignificados (parte/todo, quociente), equivalência, comparação, adição e\nsubtração; cálculo da fração de um número natural; adição e subtração de\nfrações. | \n|
| Habilidade | \nQuestão | \n
(EF06MA07) \nCompreender, comparar e ordenar frações associadas às ideias de\npartes de inteiros e resultado de divisão, identificando frações\nequivalentes*. \n*Obs.: A questão não contempla a parte de “identificando frações\nequivalentes” contida na habilidade. | \nLaura comeu 1/6 de um bolo e João 1/3 desse mesmo bolo. Qual é a\nfração que representa a maior quantidade de bolo que foi comido? \nResposta: 1/3 > 1/6, João comeu mais\nbolo. | \n
(EF06MA08) \nReconhecer que os números racionais positivos podem ser expressos nas\nformas fracionária e decimal, estabelecer relações entre essas\nrepresentações, passando de uma representação para outra. | \nRepresente o número decimal 0,2 em forma de fração. Em seguida,\nrepresente essa fração na forma irredutível. \nResposta: \\(\\frac{2}{10} = \\frac{1}{5}\\). | \n
Dentre os números \\(\\frac{7}{5}\\), \\(1,25\\) e \\(\\frac{9}{8}\\),\nqual representa o maior e menor valor, respectivamente? \nResposta: \\(\\frac{7}{5}\\) e\n\\(\\frac{9}{8}\\). | \n|
| Objeto de conhecimento: Operações\n(adição, subtração, multiplicação, divisão e potenciação) com números\nracionais. | \n|
| Habilidade | \nQuestão | \n
(EF06MA09) \nResolver e elaborar* resolver problemas que envolvam o cálculo da\nfração de uma quantidade e cujo resultado seja um número natural, com e\nsem uso de calculadora. \n*Obs.: A questão não contempla a parte de “elaborar problemas”\ncontida na habilidade | \nNo aniversário de Maria, foram encomendados 900 salgadinhos,\nsendo \\(\\frac{2}{5}\\) de coxinha. Quantas coxinhas foram encomendadas\npara o aniversário? \nResposta: 360. | \n
(EF06MA10) \nResolver e elaborar* problemas que envolvam adição ou subtração com\nnúmeros racionais positivos na representação fracionária. \n*Obs.: A questão não contempla a parte de “elaboração de problemas”\ncontida na habilidade. | \nPara ir à escola, João utiliza sua bicicleta. Quando já havia\npercorrido \\(\\frac{1}{5}\\) da distância, sua bicicleta estragou. A\npartir daí ele foi caminhando. Qual a distância restante que ele deverá\ncaminhar até a escola? \nResposta: João caminhará \\(\\frac{4}{5}\\) do percurso\nrestante até a escola. | \n
| 7º ano | \n|
| Objeto de conhecimento: Números\nracionais na representação fracionária e na decimal: usos, ordenação e\nassociação com pontos da reta numérica e operações. | \n|
| Habilidade | \nQuestão | \n
(EF07MA12) \nResolver e elaborar* problemas que envolvam as operações com números\nracionais. \n*Obs.: A questão não contempla a parte de “elaboração de problemas”\ncontida na habilidade. | \nMaria e José estão comendo uma pizza de 18 fatias. Sabendo que\nMaria comeu 1/3 e José comeu 1/6, quantas fatias eles comeram no\ntotal? \nResposta: 9 fatias. | \n
| Objeto de conhecimento: Reconhecer a\noperação necessária para resolver um problema, calcular o resultado de\noperações com números racionais, e identificar e calcular frações\nequivalentes. | \n|
| Habilidade | \nQuestão | \n
(EF07MA12) \nResolver e elaborar* problemas que envolvam as operações com números\nracionais. \n*Obs.: A questão não contempla a parte de “elaborar problemas”\ncontida na habilidade. | \nNum centro de convivência com 260 alunos, foram ofertadas três\natividades extraclasse: música, dança e artes marciais. Sabe-se que\n\\(\\frac{3}{13}\\) escolheu música e dança, \\(\\frac{2}{5}\\) escolheu\nsomente música, \\(\\frac{1}{4}\\) escolheu artes marciais e o restante\nescolheu apenas dança. Quantos alunos escolheram apenas dança? \nResposta: 31 alunos escolheram apenas\ndança. | \n
Em uma corrida participaram 26 ciclistas. Desses ciclistas, 4/13\nabandonaram a corrida por problemas na bicicleta. Quantos ciclistas\nterminaram a corrida? \nResposta: 18 ciclistas. | \n|
Uma piscina teve 3/4 da sua capacidade preenchida. No entanto,\nainda faltam 2.700 litros para que ela seja enchida por completo. Qual é\na capacidade total dessa piscina? \nResposta: 10.800 litros. | \n|
(EF07MA02) \nResolver e elaborar* problemas que envolvam porcentagens, como os que\nlidam com acréscimos e decréscimos simples, utilizando estratégias\npessoais, cálculo mental e calculadora, no contexto de educação\nfinanceira, entre outros. \n*Obs.: A questão não contempla a parte de “elaborar problemas”\ncontida na habilidade | \nNicolau tinha previsto, no orçamento, um gasto de R$ 2.100,00\npara pintar sua casa. Mas devido a imprevistos na obra, o valor aumentou\n30%. Calcule quantos reais ele gastou na pintura? \nResposta: R$ 2.730,00. | \n
| 8º ano | \n|
| Objeto de conhecimento: Reconhecer uma\nexpressão algébrica. Reconhecer e efetuar operação usando as relações\ninversas de exponenciação e radiciação. Propriedades exponenciais com\nexpoente fracionário. | \n|
| Habilidade | \nQuestão | \n
(EF08MA02) \nResolver e elaborar* problemas usando a relação entre potenciação e\nradiciação, para representar uma raiz como potência de expoente\nfracionário. \n*Obs.: A questão não contempla a parte de “elaborar problemas”\ncontida na habilidade. | \nJoão corre todo fim de tarde. Sabe-se que ontem, a distância\npercorrida foi dada pela fórmula \\(P(n) = 4^{\\frac{n}{2}}\\), com \\(n =\n3\\). Quantos km ele correu ontem? \nResposta: 8 km. | \n
| Objeto de conhecimento: Efetuar\noperações com porcentagens, aliado a situações do cotidiano, como compra\ne venda de um produto. Compreender que a porcentagem, também pode ser\nrepresentada como uma fração de denominador 100. Utilizar a regra de\ntrês para obter o resultado. | \n|
| Habilidade | \nQuestão | \n
(EF08MA04) \nResolver e elaborar* problemas, envolvendo cálculo de porcentagens,\nincluindo o uso de tecnologias digitais. \n*Obs.: A questão não contempla a parte de “elaboração de problemas”\ncontido na habilidade. É indicado o uso da calculadora | \nPara efetuar a compra de uma tv no valor de R$ 1.420,00, José\nrecebeu um desconto de R$ 426,00 no pagamento à vista. Qual é a fração\nque representa a porcentagem de desconto? \nResposta: 30/100. | \n
| Objeto de conhecimento: Utilizar\nmétodos de obtenção de uma fração geratriz de uma dízima periódica.\nFração como parcela de um todo. | \n|
| Habilidade | \nQuestão | \n
(EF08MA05) \nReconhecer e utilizar procedimentos para a obtenção de uma fração\ngeratriz para uma dízima periódica. | \nManoela comeu a quantia equivalente a 0,4444 ... de fatias de uma\ntorta. Mostre em forma de fração quantas fatias ela comeu. \nResposta: 4/9. | \n
| 9º ano | \n|
| Objeto de conhecimento: Potências com\nexpoentes negativos e fracionários. Reconhecer e efetuar operação com\nexpoente fracionário e sua relação inversa. | \n|
| Habilidade | \nQuestão | \n
(EF09MA03) \nEfetuar cálculos com Números reais, inclusive potências com expoentes\nfracionários. | \nConsidere os números a seguir: \\({\\frac{1}{4}}^{\\frac{-1}{2}}\\) e\n\\((4)^{\\frac{-3}{2}}\\). Indique qual representa o maior valor. \nResposta: \\({\\frac{1}{4}}^{\\frac{-1}{2}} =\n(4)^{\\frac{1}{2}} = \\sqrt{4} = 2\\). | \n
| Objeto de conhecimento: Realizar\noperação de probabilidade. Reconhecer que a probabilidade se dá na forma\nde fração, onde o denominador é o número de eventos e o numerador o\nnúmero de ocorrências possíveis. | \n|
| Habilidade | \nQuestão | \n
(EF09MA20) \nReconhecer, em experimentos aleatórios, eventos independentes e\ndependentes* e calcular a probabilidade de sua ocorrência, nos dois\ncasos. \n*Obs.: A questão não contempla “eventos probabilísticos dependentes”\ncontido na habilidade. | \nLançando um dado comum (valores de 1 a 6), não viciado, qual as\nchances de se obter um valor ímpar? \nResposta: 3/6. | \n
\n\n\n
\n```\n\n:::\n\n### Material\n\n- 1 tabuleiro contendo um percurso com 33 quadrados coloridos. O\n percurso é composto por questões (de nível fácil, médio e difícil)\n que envolvam conteúdos de frações.\n- 1 dado simples (6 faces) e 1 ***card*** onde constam as questões\n variadas que envolvem cálculos com frações.\n- 8 marcadores (2 peões, 2 bispos, 2 cavalos e 2 torres nas versões\n branco e preto) para diferenciar os jogadores em cada rodada.\n\n### Regras do jogo\n\n1. O jogo pode ser realizado com um mínimo de 2 e máximo de 8\n jogadores. Cada jogador deve escolher um marcador para\n representá-lo. Na versão *online*, os marcadores são atribuídos\n automaticamente.\n2. Para iniciar o jogo, todos os participantes da rodada devem lançar o\n dado, sendo o primeiro jogador a iniciar o que tirar a maior face.\n Caso haja empate (faces de mesmo valor), os participantes empatados\n devem lançar o dado novamente até que saia um vencedor entre eles.\n Na versão *online*, é lançado um dado de 8 faces sem repetição,\n então não há empate.\n3. Iniciada a partida, cada jogador deve lançar o dado e responder à\n questão contida no ***card*** sorteado. O marcador só vai avançar a\n quantidade obtida no dado se acertar a questão, caso a questão seja\n respondida incorretamente, o marcador permanece onde está.\n4. Vence o jogador que primeiro ultrapassar o quadrado de número 33. O\n participante que, após acertar a questão do *card*, parar exatamente\n no quadrado de número 33, deverá realizar mais jogadas até\n ultrapassá-lo. (Em caso de REPETIR a pergunta e que não esteja\n jogando a versão *online*, o aplicador pode sortear um novo *card*\n ou deixar que o jogador responda à pergunta repetida).\n5. **CASA GANHA-PERDE**: Nessas casas, o jogador pode avançar mais um\n pouco ou retroceder, dependendo do valor contido nela.\n\n**ATENÇÃO**: Assim que o jogador acertar o *card*, ele deve avançar a\nquantidade de casas correspondente à face obtida no dado.\n\n### Situação exemplo:\n\nO jogador deve obedecer ao tempo limite estimado pelo aplicador. Em caso\nde não cumprimento, o jogador perde a rodada.\n\nO jogador só deve avançar nas casas se, e somente se, acertar a resposta\ndo *card* sorteado. Caso erre a questão, seu marcador deve permanecer\nonde está parado.\n\nÉ proibido o uso de tecnologias digitais (calculadora, celular) para\nfacilitar a resolução dos problemas.\n\nO aplicador é responsável pelo manuseio do jogo, levando ao êxito\ndurante a aplicação.\n\nA seguir apresentamos as funções de cada um dos comandos.\n\n| | |\n|:--------------------------------------------------------------------------------------------------------------:|:----------------------------------------------------------------------------------------:|\n| {fig-alt=\"Bandeira verde.\" loading=\"lazy\"} | Bandeira que sinaliza o início do jogo; |\n| {fig-alt=\"4 peças pretas e 4 peças brancas de xadrez: peão, bispo, cavalo e torre.\" loading=\"lazy\"} | Os marcadores para diferenciar os jogadores em cada rodada; |\n| {fig-alt=\"Dado amarelo de 8 faces, mostrando as faces 8 e 5 e, difícil de verde e de cabeça para baixo os números 3 e 2.\" loading=\"lazy\"} | Dado de 8 faces sem repetição para definir a ordem dos jogadores; |\n| {fig-alt=\"Dado creme/branco de 6 faces inclinado, mostrando o número 6 e aparecendo um poco do número 3 a esquerda. A quantidade de pontos é que representa o número. 6 são 6 pontos, por exemplo.\" loading=\"lazy\"} | Dado a ser lançado por cada jogador a cada rodada;|\n| {fig-alt=\"Botão azul com duas notas musicais, duas colcheias unidas e imediatamente ascendentes e com hastes voltadas para cima.\" loading=\"lazy\"} | Ativar ou desativar os sons produzidos pelo jogo; |\n| {fig-alt=\"Quadrado preto com +2 branco no centro\" loading=\"lazy\"} | Casa Ganha-Perde. Neste exemplo, indicando para avançar mais duas casas; | \n| {fig-alt=\"Quadrado com estampa xadrez, mas as casas (quadrados) do xadrez estão inclinados e alternam nas cores cinza e cinza claro.\" loading=\"lazy\"} | Bandeira que sinaliza a chegada, fim do jogo. |\n\n: Quadro 6: Comandos do Jogo Percurso de Frações {.tab}\n\n```{=html}\n\n\n
\n\n Percurso das frações
\n\n \n \n
\n \n\n \n \n \n \n \n \n \n \n\n\n
\n \n \n\n Jogador 1
Escolha um nome (opcional)Jogador 2
Escolha um nome (opcional)Jogador 3
Escolha um nome (opcional)Jogador 4
Escolha um nome (opcional)Jogador 5
Escolha um nome (opcional)Jogador 6
Escolha um nome (opcional)Jogador 7
Escolha um nome (opcional)Jogador 8
Escolha um nome (opcional)\n\n \n \n\n
\n\n \n \n
\n\n ⚑\n \n \n \n \n \n \n \n \n
\n \n \n \n \n 1
\n 2
\n 3
\n \n \n \n \n 4
\n \n 8
\n 7
\n 6
\n 5
\n \n 9
\n \n \n \n \n 10
\n 11
\n 12
\n 13
\n 14
\n \n \n \n \n 15
\n \n \n 18
\n 17
\n 16
\n 21
\n 20
\n 19
\n \n \n 22
\n \n \n \n \n 23
\n 24
\n 25
\n 26
\n 27
\n \n \n \n \n 28
\n \n 32
\n 31
\n 30
\n 29
\n \n 33
\n \n \n \n \n \n \n \n \n \n\n
\n\n Definindo a ordem
\n\n \n\n \n\n\n\n\n
\n \n\n \n \n
\n \n
\n \n 1
\n 8
\n 5
\n 4
\n \n
\n \n 6_
\n 3
\n 2
\n 7
\n \n\n \n\n
\n \n\n
\n\n\n \n \n \n \n \n \n \n
\n ●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
| 6º ano | \n|
| Objeto de conhecimento: Frações:\nsignificados (parte/todo, quociente), equivalência, comparação, adição e\nsubtração; cálculo da fração de um número natural; adição e subtração de\nfrações. | \n|
| Habilidade | \nQuestão | \n
(EF06MA10) \nResolver e elaborar* problemas que envolvam adição ou subtração com\nnúmeros racionais positivos na representação fracionária. \n*Obs.: O processo cognitivo elaborar não é contemplado nas questões\npropostas. | \nIsabel fez a festa de aniversário de seu filho. Do total dos\ndoces comprados, 5/20) era de brigadeiro com granulado e 6/20 de\nbrigadeiro com leite ninho. Qual a fração da quantidade de brigadeiros\nque Isabel comprou para a festa? \nResposta: 11/20. | \n
Estefani e Gisele trabalham de frentista em um posto de\nCombustível. Para chegar até o trabalho, Estefani percorre 2/9 de\nquilômetro e Gisele 2/3 de quilômetro. Que fração representa a\nquantidade de quilômetros que Estefani e Gisele percorrem juntas? \nResposta: 8/9. | \n|
Carla e Pietra trabalham em uma confeitaria. Em um determinado\ndia, Carla produziu 8/15 da produção total de salgadinhos da confeitaria\ne Pietra 3/15. Qual a fração que representa a quantidade de salgadinhos\nque Carla produziu a mais que Pietra? \nResposta: 5/15 = 1/3. | \n|
Gustavo tem uma tira retangular que está dividida em 11 partes\niguais. Nessa tira, ele pintou 5 partes iguais de verde, só que ele\neliminou 3 partes dessa parte verde. Com isso, a parte verde que restou\nrepresenta que fração da tira inicial? \nResposta: 2/11. | \n|
(EF06MA07) \nCompreender, comparar e ordenar frações associadas às ideias de\npartes de inteiros e resultado de divisão, identificando frações\nequivalentes. | \nEm uma eleição, há 2 candidatos concorrendo para ocuparem a vaga\nde vereador. O Candidato A está com 8/12 da intenção dos votos. O\ncandidato B está com 2/6 da intenção dos votos. Qual dos dois candidatos\npossui mais chances de ser eleito? Por quê? \nResposta: O candidato A possui mais chances de ser\neleito, pois 8/12 = 2/3. O candidato B possui 2/6 = 1/3. Logo 2/3 >\n1/3. | \n
A família de Francisco o saiu de Cascavel em direção a Curitiba.\nNo primeiro dia, percorreu 1/2 da distância que separa as duas cidades e\nno segundo dia foi percorrido 4/16 do percurso total. Qual dia eles\npercorreram o maior trajeto do percurso? \nResposta: O segundo dia foi o dia que percorreram a\nmaior distância, pois 1/2 > 1/4. | \n|
Em duas turmas com a mesma quantia de alunos do 9º ano, a\nprofessora de matemática quis comparar o desenvolvimento de seus alunos\nao resolverem a mesma prova. O 9º D teve 1/3 de suas provas gabaritadas,\nenquanto o 9ºF teve 6/9 de suas provas gabaritadas. Qual turma teve o\nmaior número de provas gabaritadas? \nResposta: 6/9 = 2/3. O 9º F teve o maior número de\nprovas gabaritadas se comparado ao 9ºD. | \n|
Rodolfo está vendendo duas casas de mesmo valor e recebeu duas\npropostas. Vanessa se interessou pela casa 1 e ofereceu 2/5 do valor\npara pagamento à vista. Augusto, que se interessou pela casa 2, fez uma\nproposta de 1/3 em cima do valor para pagamento à vista. Qual proposta é\nmais lucrativa para Rodolfo? \nResposta: Como 2/5 > 1/3, temos que a proposta de\nVanessa é a mais lucrativa para Rodolfo. | \n|
| 7º ano | \n|
| Objeto de conhecimento: Fração e seus\nsignificados: como parte de inteiros, resultado da divisão, razão e\noperador. | \n|
| Habilidade | \nQuestão | \n
(EF07MA08) \nComparar e ordenar frações associadas às ideias de partes de\ninteiros, resultado da divisão, razão e operador. | \nDois grupos de ciclistas saíram de Foz do Iguaçu com destino a\nMedianeira. Sabe-se que o primeiro grupo já percorreu 1/3 do percurso e\no segundo grupo percorreu 1/4 do percurso. Qual grupo percorreu a maior\nparte do percurso? \nResposta: 1/3 = 0.333 … e 1/4 = 0,25. Como 0,333...\n> 0,25, concluímos que o grupo 1 já percorreu a maior parte do\npercurso. | \n
Ellen trabalha em uma empresa que possui uma regra para as\nreuniões: é preciso ter pelo menos 2/5 dos funcionários da empresa\npresentes para que possam ser votadas algumas mudanças. Se no dia da\nreunião compareceram 4/7 do total funcionários, uma votação poderá ter\nocorrido? \nResposta: 2/5 = 0,4 e 4/7 = 0,571 ... Como 4/7 >\n2/5, concluímos que poderá haver uma votação. | \n|
Renato é professor de Educação Física de uma escola, onde o\nesporte preferido de seus alunos do 8º ano é o futebol. Então, o\nprofessor fez a seguinte proposta: ele os deixaria jogar futebol na\nsegunda parte da aula se pelo menos 2/3 da turma estiver a favor.\nSabendo que o 8º ano possui 30 alunos e 15 queriam jogar futebol, qual a\nfração que representa os alunos que concordaram em jogar futebol? Eles\nirão jogar futebol nesta aula? \nResposta: 15/30 = 1/2 representa a fração de alunos\nque estavam a favor de jogar futebol. Mas 1/2 < 2/3, logo, os alunos\nnão irão jogar futebol. | \n|
Gilberto leva 12/15 de 1 hora para ir da sua casa até a\nuniversidade de ônibus e seu colega de sala, Lucas, leva 6/12 de 1 hora\nindo de carro. Quem leva menos tempo para chegar à universidade? \nResposta: Lucas. | \n|
(EF07MA09) \nUtilizar, na resolução de problemas, a associação entre razão e\nfração, como a fração 2/3 para expressar a razão de duas partes de uma\ngrandeza para três partes da mesma ou três partes de outra\ngrandeza. | \nSara comprou 5 pacotes de chicletes de morango e 7 de chicletes\nde uva. Qual é a razão do número de pacotes de chicletes de uva para o\nde morango? \nResposta: 7/5. | \n
Beatriz foi ao mercado, comprou 6 refrigerantes e 4 sucos. Qual a\nrazão de refrigerantes e sucos equivale que Beatriz comprou? \nResposta: 6/4 = 3/2. | \n|
Pedro levou 100 salgadinhos para festa de sua sala e a professora\ndividiu em quantidades iguais para seus 20 alunos. Qual a razão\nestabelecida entre salgadinhos e alunos? \nResposta: 100/20 = 5/1 = 5. | \n|
| Objeto de conhecimento: Números\nracionais na representação fracionária e na decimal: usos, ordenação e\nassociação com pontos da reta numérica e operações. | \n|
| Habilidade | \nQuestão | \n
(EF07MA11) \nCompreender e utilizar a multiplicação e a divisão de números\nracionais, a relação entre elas e suas propriedades\noperatórias. | \nRoberta vende na feira a dúzia de Kiwi. Um de seus clientes pede\napenas 2/6 de uma dúzia. Quantos kiwis Roberta terá que separar? \nResposta: 2/6 de 12 unidades são 4, assim, Roberta\nvendeu 4 Kiwi a seu cliente. | \n
Um lavador de carro gasta 4/3 de um litro de água para lavar cada\ncarro. Quantos carros ele consegue lavar com 40 litros? \nResposta: O lavador consegue lavar 30 carros com 40\nlitros de água. | \n|
| 8º ano | \n|
| Objeto de conhecimento: Volume de bloco\nretangular. Medidas de capacidade. | \n|
| Habilidade | \nQuestão | \n
(EF08MA21) \nResolver e elaborar problemas que envolvam o cálculo do volume de\nrecipiente cujo formato é o de um bloco retangular. | \nPedro construiu uma piscina que tem a forma de um paralelepípedo\nretangular com as seguintes dimensões: 9,80 m de comprimento, 4,25 m de\nlargura e 1,40 m de profundidade. A capacidade dessa piscina em litros\né? \nResposta: A capacidade dessa piscina em litros é de\n58.310 L. | \n
Qual é o volume, em mililitros (ml), de uma caixa de bis que tem\na forma de um paralelepípedo retangular com largura de 3 cm, comprimento\nde 6 cm e altura de 19 cm? \nResposta: O volume dessa caixa de bis corresponde a\n342 ml. | \n|
| Objeto de conhecimento: Dízimas\nperiódicas: fração geratriz. | \n|
| Habilidade | \nQuestão | \n
(EF08MA05) \nReconhecer e utilizar procedimentos para a obtenção de uma fração\ngeratriz para uma dízima periódica. | \nQual é a fração geratriz da dízima periódica 0,4555...? \nResposta: 41/90 é a fração geratriz da dízima\nperiódica 0,4555... | \n
\nRicardo Mondini Ferrazza^[2](#footnote-5){#footnote-ref-5}^
\nThamara Tobaldini^[3](#footnote-6){#footnote-ref-6}^
\nDulcyene Maria Ribeiro^[4](#footnote-7){#footnote-ref-7}^\n:::\n\n## Objetivo\n\nO objetivo desta proposta didática é promover a compreensão das\noperações de adição e subtração de números inteiros. As atividades\nsugeridas utilizam fichas coloridas para representarem quantidades\npositivas e negativas e jogos que envolvem as operações com números\ninteiros. Acreditamos que uma vez compreendidas as regras envolvidas nos\njogos, ficará mais fácil entender as regras das operações com números\ninteiros, pois os raciocínios são análogos.\n\n## Introdução\n\nQuando cursamos a disciplina de Didática Aplicada ao Ensino da\nMatemática, do curso de Licenciatura em Matemática da Universidade\nEstadual do Oeste do Paraná (Unioeste), elaboramos uma sequência\ndidática que tinha como objetivo contribuir com a superação dos\nobstáculos didáticos e epistemológicos presentes no ensino dos números\ninteiros. Na sequência didática elaborada, optamos por trabalhar com\nmateriais manipulativos, por compreendermos que o uso de materiais\ndidáticos auxilia em um processo de ensino e aprendizagem com\nsignificado.\n\nSegundo Lorenzato (2006, p.18), \"Material didático (MD) é qualquer\ninstrumento útil ao processo de ensino-aprendizagem. Portanto, MD pode\nser um giz, uma calculadora, um filme, um livro, um quebra-cabeça, um\njogo \\[\\...\\]\". Dentre os MD para o trabalho com números inteiros,\ndestacamos o ábaco dos números inteiros que, segundo os Parâmetros\nCurriculares Nacionais, é um recurso interessante para explorar tal\nassunto.\n\n> \\[\\...\\] para explorar a adição e subtração, outro recurso\n> interessante é o ábaco de inteiros, que consiste em duas varetas\n> verticais fixadas num bloco, nas quais se indica a que vai receber as\n> quantidades positivas e a que vai receber as quantidades negativas,\n> utilizando argolas de cores diferentes para marcar pontos. Esse\n> material permite a visualização de quantidades positivas e negativas e\n> das situações associadas ao zero: varetas com a mesma quantidade de\n> argolas. Ao manipular as argolas nas varetas, os alunos poderão\n> construir regras para o cálculo com os números inteiros [@pcn_1998, p. 99].\n\nNo desenvolvimento da atividade, nos deparamos com uma limitação do\nmaterial ao realizar a operação de subtração, pois os alunos, naquele\nmomento, não possuíam conhecimento da regra dos sinais para representar\na operação no ábaco. O ábaco utilizado possuía duas hastes, uma para as\nquantidades positivas e outra para as negativas. Na adição, as\nquantidades negativas eram representadas todas na haste negativa e as\nquantidades positivas eram representadas todas na haste positiva. Em\nseguida, anulava-se as argolas positivas com as negativas e o resultado\nera representado na haste que, após a anulação, ainda tivesse argolas.\nNa subtração, o aluno necessariamente deveria realizar a troca de sinais\nantes de representar as quantidades nas hastes, no exemplo\n$(-7)-(-2)$, se o aluno seguisse a mesma ideia da adição, os dois\nnúmeros deveriam ir à haste negativa, mas na operação de subtração\ndevemos representar sete argolas na haste negativa e duas argolas na\nhaste positiva, ficando com $(-7)+(2)$. Assim, não conseguimos\nrealizar a operação no ábaco sem aplicar a regra dos sinais antes da\nrepresentação.\n\nCom esses questionamentos e reflexões em mente, analisamos livros e\nartigos desenvolvidos na área que trabalham com o ensino de números\ninteiros, a fim de elaborar uma proposta que corresponda com o ensino\nque esperamos oferecer. Assim, desenvolvemos a presente proposta\ndidática.\n\n## Os obstáculos no ensino de números inteiros\n\nEstudos como o de Igliori [-@igliori_nocao_1999] e Pommer [-@pommer_1998] apontam que o aluno\npassa por diversas dificuldades no processo de construção do conceito de\nnúmeros negativos, decorrentes de obstáculos epistemológicos.\n\nDe acordo com Schubring [-@schubring_desenvolvimento_2009, p. 18], os obstáculos epistemológicos\n\"residem na natureza do conhecimento matemático, razão pela qual não\npodem ser evitados, já que são constitutivos dos respectivos\nconhecimentos e identificados na história dos conceitos\".\n\nPara Igliori,\n\n> A noção de obstáculo pode ser utilizada tanto para analisar a gênese\n> histórica de um conhecimento como o ensino ou a evolução espontânea do\n> aluno. Pode-se, portanto pesquisar os obstáculos epistemológicos a\n> partir de uma análise histórica ou a partir de dificuldades\n> resistentes entre os alunos procurando confrontá-las [@igliori_nocao_1999, p. 98].\n\nExistem diversos obstáculos epistemológicos no ensino, entre eles\nIgliori [-@igliori_nocao_1999] aponta a noção de números inteiros. Para a autora, a\naceitação dos números negativos demorou para se consolidar, pois\nenfrentou diversos obstáculos. Segundo Radford [1997 *apud* @igliori_nocao_1999], isso se deu devido às culturas locais e pela concepção de\nciências, matemática e objetos dessas culturas. Enquanto para Glaser\n[1981 *apud* @igliori_nocao_1999], essa lentidão ocorreu porque os\nhistoriadores e educadores não deram importância para as dificuldades\npresentes no ensino de números negativos.\n\nOs PCN identificam como barreiras no ensino de números inteiros a\natribuição de significado às quantidades negativas. Dentre as\ndificuldades, destaca-se o reconhecimento dos números em dois sentidos a\npartir do zero, o reconhecimento e identificação do zero, origem e do\nzero absoluto e a ideia intuitiva de que na operação de adição o\nresultado é um número maior que o original e que na operação de\nsubtração o resultado é sempre menor [@pcn_1998].\n\n## O uso de jogos no ensino\n\nPortanto, considerando os obstáculos didáticos e epistemológicos\noriundos das operações com números inteiros e diante da limitação\napresentada pelo ábaco de números inteiros (material escolhido na\nprimeira proposta didática que elaboramos a respeito do tema), sugerimos\noutra proposta de intervenção que tem como intenção proporcionar um\nensino significativo, em que o aluno tem papel ativo na sua\naprendizagem. Para isso, nos baseamos no uso de jogos, no qual buscamos\na compreensão para então formalizar o conteúdo, de modo a justificar a\nutilização da regra de sinais.\n\n> A introdução de situações contextualizadas, jogos e materiais\n> manipuláveis, associadas ao uso da linguagem matemática, expressas em\n> diversas possibilidades, viabilizam um trabalho didático que permite\n> superar os obstáculos epistemológicos, ao esclarecer as escolhas\n> realizadas ao longo do percurso de construção do conhecimento\n> matemático envolvendo os Números Inteiros [@pommer_1998 p.4].\n\nCorroborando com essa concepção, destacamos um trecho da Base Nacional\nComum Curricular (BNCC) que trata dos recursos didáticos e adverte que\nestes devem servir para levar à reflexão e à sistematização:\n\n> \\[\\...\\] recursos didáticos como malhas quadriculadas, ábacos, jogos,\n> livros, vídeos, calculadoras, planilhas eletrônicas e softwares de\n> geometria dinâmica têm um papel essencial para a compreensão e\n> utilização das noções matemáticas. Entretanto, esses materiais\n> precisam estar integrados a situações que levam a reflexão e à\n> sistematização, para que se inicie o processo de formalização [@bncc_2017, p. 276].\n\nVale destacar que o jogo não deve ser considerado apenas uma diversão ou\npassatempo, ele deve ser planejado e executado com cuidado, como aponta\nFiorentini e Miorim [-@fiorentini_miorim_1996, p. 9]:\n\n> O professor não pode subjugar sua metodologia de ensino a algum tipo\n> de material porque ele é atraente ou lúdico. Nenhum material é válido\n> por si só. Os materiais e seu emprego sempre devem estar em segundo\n> plano. A simples introdução de jogos ou atividades no ensino da\n> matemática não garante uma melhor aprendizagem desta disciplina.\n\nConsiderando o uso de jogos como estratégia de ensino, pela qual o aluno\ndesenvolve diversas habilidades, Smole, Diniz e Milani (2007, p. 9)\nafirmam que isso ocorre porque \"ao jogar, os alunos têm a oportunidade\nde resolver problemas, investigar e descobrir a melhor jogada; refletir\ne analisar as regras, estabelecendo relações entre os elementos do jogo\ne os conceitos matemáticos\".\n\nDesta forma, o jogo, por ser um momento mais descontraído, pode\noportunizar um ensino sem pressão, o que facilita para os alunos\nadquirirem os conhecimentos com mais significados e oferece um momento\nde socialização da turma [@smole_diniz_milani_2007].\n\n> Além disso, o trabalho com jogos é um dos recursos que favorece o\n> desenvolvimento da linguagem, diferentes processos de raciocínio e de\n> interação entre os alunos, uma vez que durante um jogo cada jogador\n> tem a possibilidade de acompanhar o trabalho de todos os outros,\n> defender pontos de vista e aprender a ser crítico e confiante em si\n> mesmo [@smole_diniz_milani_2007, p. 9].\n\nAs atividades propostas nesta unidade didática têm como intuito\ntrabalhar as operações com números inteiros, como uma tentativa de\npossibilitar aos alunos do 7° ano a compreensão das regras de sinais e,\nassim, evitar que elas sejam apenas decoradas.\n\nA primeira atividade consiste na manipulação de fichas, a fim de\nfamiliarizar o aluno com as regras das operações de adição e subtração\nde fichas. Já a segunda atividade trata-se de um jogo, que tem como\nobjetivo alcançar a transição da atividade concreta para a representação\nna linguagem matemática na cartela que acompanha o jogo. Enquanto isso,\na terceira atividade, que também é um jogo, pretende possibilitar que os\nalunos ultrapassem a ideia de que a operação de adição sempre aumenta e\nque a operação de subtração sempre diminui. Por fim, ao desenvolver a\nproposta didática, esperamos que os alunos compreendam as operações de\nadição e subtração, assim como o motivo da regra dos sinais.\n\n## Atividade 1:
[apresentação das operações por meio das fichas]{.small_h2}\n\nNeste primeiro momento, apresentaremos as operações de adição e\nsubtração através de fichas coloridas. Essas fichas foram confeccionadas\nlevando em consideração as ideias do material manipulável conhecido como\nAlgeplan, principalmente na função que o sinal negativo realiza diante\ndas operações.\n\nO professor disponibilizará aos alunos 20 quadrados com um dos lados do\nquadrado de cor vermelha e outro azul^[5](#footnote-8){#footnote-ref-8}^\n(@fig-frente_verso_fichas), de forma que, ao virar a ficha, troca-se de cor. Em seguida,\nexplicará como realizar as operações de adição e subtração utilizando as\nfichas, assim como a regra de virar a ficha quando se está subtraindo.\n\n\n{#fig-frente_verso_fichas fig-alt=\"Duas fichas: frente e verso, azul e\nvermelho\" loading=\"lazy\"}\n\n\n### Adição das fichas\n\n#### Adição de fichas de mesma cor:\n\nAo somar fichas de mesma cor, o valor final se dá pela quantidade de\nfichas reunidas. A cor das fichas diz se esse valor é positivo ou\nnegativo. Veja o exemplo abaixo:\n\n{#fig-adicao_fichas_mesma_cor fig-alt=\"Ilustração com fichas azuis sendo somadas e o mesmo com as\nvermelhas\" loading=\"lazy\"}\n\n\n#### Adição de fichas de cores diferentes:\n\nVale ressaltar que fichas de cores diferentes se anulam, isto é, uma\nazul se anula com uma vermelha. Após a anulação conta-se quantas fichas\nsobraram e verifica-se a sua cor.\n\n{#fig-adicao_fichas_cor_diferente fig-alt=\"Ilustração de fichas azuis e vermelhas sendo adicionadas. As fichas\nque se anulam estão com um x\" loading=\"lazy\"}\n\n### Subtração das fichas\n\nNa subtração o sinal negativo tem a função de virar as fichas de lado e\ntrocar o sinal da operação. Observe que após a troca do sinal retorna-se\naos casos de adição. Veja os exemplos abaixo:\n\n{#fig-subtracao_caso_1 fig-alt=\"Ilustração de fichas vermelhas e azuis invertendo o sinal - caso\n1\" loading=\"lazy\"}\n\n{#fig-subtracao_caso_2 fig-alt=\"Ilustração de fichas vermelhas e azuis invertendo o sinal - caso\n2\" loading=\"lazy\"}\n\n## Atividade 2:
jogo cartas das operações\n\nO jogo *cartas das operações* levará os alunos a realizarem operações\ncom as fichas, seguindo as regras apresentadas anteriormente. A\natividade trabalha a visualização da operação com as fichas e, em\nseguida, a passagem do material manipulável para a linguagem aritmética.\n\n### Participantes:\n\n2 jogadores.\n\n### Objetivo da atividade:\n\nExplorar e familiarizar o aluno com as regras das operações de adição e\nsubtração, utilizando as fichas, além de permitir a associação das\nfichas com os números inteiros.\n\n### Materiais\n\nPara cada dupla de jogadores é entregue:\n\n- 1 dado representando as operações de subtração e adição (@fig-dado);\n- 42 cartas numeradas de 0 a 10 (20 positivas numeradas de 1 a 10, 20\n negativas numeradas de 1 a 10 e 2 cartas com o número 0) com\n representação visual colorida em cada carta, sendo\n azul^[6](#footnote-9){#footnote-ref-9}^ a representação dos números\n negativos e vermelho^[7](#footnote-10){#footnote-ref-10}^ dos\n números positivos, como descrito nas fichas anteriores (@fig-cartas);\n- Cartela 7x4 (@fig-cartela) para anotar resultados de cada rodada.\n\n{#fig-dado fig-alt=\"Dado para recortar e dobrar\" loading=\"lazy\"}\n\n{#fig-cartas fig-alt=\"Cartela com o número zero e mais vinte cartelas. Em cada uma das\ncartelas aparecem retângulos e um número mostrando a quantidade de\nretângulos. Nas que possuem retângulos azuis, o número fica negativo, já\nnas que aparecem retângulo vermelhos,\nnão\" loading=\"lazy\"}\n\n{#fig-cartela fig-alt=\"Tabela com 4 colunas: primeira carta, operação, segunda carta e\nresposta. A tabela possui sete linhas a serem\npreenchidas\" loading=\"lazy\"}\n\n### Como jogar\n\n1. A cada jogada, as 42 cartas numéricas são embaralhadas.\n2. Cada jogador, na sua vez, deve retirar uma das 42 cartas do monte e\n anotá-la na cartela entregue.\n3. Em seguida, jogar o dado das operações e anotar a operação sorteada.\n4. Novamente no montante de cartas embaralhadas, retirar outra carta e\n anotar na cartela.\n5. Com as informações anotadas na cartela, deve-se fazer o processo da\n conta e anotar o resultado na coluna denominada de respostas.\n6. Então o outro jogador realiza os mesmos passos, retirando a carta e\n lançando o dado.\n7. Repete-se o processo por 7 vezes (ou de acordo com o n° de linhas na\n cartela).\n8. Posteriormente o professor fará a correção para analisar os acertos\n e erros, sendo atribuído um ponto a cada acerto. Para o resultado\n errado da operação não será atribuído ponto algum.\n9. O ganhador será o aluno que possuir o maior número de pontos.\n10. Se houver empate, os alunos empatados jogam de novo, até surgir um\n ganhador.\n\n## Atividade 3:
jogo tabuleiro dos sinais\n\nO jogo Tabuleiro dos sinais permite ao aluno perceber que a operação de\nadição nem sempre aumenta, assim como a subtração nem sempre diminui,\numa das dificuldades de compreensão das operações com números inteiros.\nEssa percepção será desenvolvida no decorrer do jogo, em que o aluno é\nposto a competir e tentar criar estratégias para vencer.\n\n### Participantes:\n\n2 jogadores.\n\n### Materiais\n\nCada dupla receberá:\n\n- Peças do jogo: Dado das operações, as fichas coloridas e as cartas\n utilizadas nas atividades 1 e 2;\n- Tabuleiro da Fase 1 (@fig-tabuleiro_fase_1);\n- Tabuleiro da Fase 2 (@fig-tabuleiro_fase_2).\n- Um lápis.\n\nO tabuleiro do jogo *Trilha dos Sinais* pode ser modificado de acordo\ncom as estratégias da aula elaborada pelo professor.\n\n### Fase 1: tabuleiro 1\n\n#### Objetivo do jogo\n\nExplorar e investigar as diversas situações que possam surgir nas\noperações de subtração e adição com números inteiros, por meio do jogo e\ndas fichas. O jogo permite que o aluno exercite o que aprendeu, até o\nmomento, sobre os números inteiros de forma lúdica.\n\n{#fig-tabuleiro_fase_1 fig-alt=\"Tabuleiro com casa redondas (bolhas) com setas e indicação de operação\nfeita com os símbolos de positivo e\nnegativo\" loading=\"lazy\"}\n\n#### Como jogar\n\n1. Cada jogador recebe 21 cartas (@fig-cartas).\n2. Cada jogador sorteia uma de suas 21 cartas. Na sequência, somam as\n cartas sorteadas, para preencher o círculo central ou círculo de\n origem, utilizando o lápis.\n3. O jogador que tirou a maior carta inicia a partida e escolhe qual\n lado do tabuleiro prefere jogar.\n4. Para iniciar a partida o jogador irá escolher o caminho que seguirá.\n5. O jogador 1, ao escolher um caminho em que a seta possui sinal\n positivo ou negativo, deve sortear uma carta do monte e então\n realizar a operação proposta pela seta. Por exemplo, se a seta tiver\n sinal negativo, o jogador subtrairá o valor da carta sorteada com o\n valor presente no círculo anterior à seta. Veja uma situação\n representada abaixo:\n\n{#fig-exemplo_1 fig-alt=\"Exemplo\" loading=\"lazy\"}\n\n6. Se a seta escolhida não tiver sinal, o jogador deve jogar o dado de\n operações para descobrir a operação a ser realizada e em seguida\n tirar uma carta do monte. Então preencher o círculo indicado pela\n seta com o resultado da operação realizada. Veja uma situação\n representada abaixo:\n\n{#fig-exemplo_2 fig-alt=\"Exemplo\" loading=\"lazy\"}\n\n:::{.callout-note title=\"Observação\" style=\"margin-left: 36px\"}\nO aluno pode utilizar as fichas coloridas para realizar essas operações, caso não se sinta confiante de realizar as contas sem utilizar o material.\n:::\n\n7. Agora é a vez do jogador 2. Ele realizará os mesmos passos descritos\n para o jogador 1;\n\n8. Na próxima operação, os jogadores devem realizar as contas levando\n em consideração o resultado anterior. Por exemplo, se o resultado da\n primeira operação foi 5 e a seta for de soma, terá que realizar a\n seguinte conta: 5 + Carta sorteada e assim por diante.\n9. Após seis jogadas, os jogadores completam o círculo final do\n tabuleiro da Fase 1. Quem tiver um número maior no círculo final\n será o vencedor. Se quiserem, os jogadores podem convencionar que o\n vencedor será o que tiver o número menor.\n\n### Fase 2: tabuleiro 2\n\n#### Objetivo do jogo:\n\nMostrar para o aluno que trabalhar apenas com as fichas torna-se\ninsuficiente para o jogo, por exemplo, ao subtrair ou somar números\nmuito grandes, apontando a necessidade de trabalhar utilizando a regra\ndos sinais.\n\n{#fig-tabuleiro_fase_2 fig-alt=\"Tabuleiro com casa redondas (bolhas) com setas e indicação de operação\nfeita com os símbolos de positivo e\nnegativo\" loading=\"lazy\"}\n\n#### Como jogar\n\n1. O andamento do jogo ocorre da mesma maneira que a fase 1. Os\n jogadores escolhem um caminho, se a seta tiver sinal, apenas retiram\n uma carta do monte, e se a seta não tiver sinal os jogadores jogam o\n dado de operações e retiram uma carta do monte.\n2. Neste tabuleiro há seis círculos finais, logo realiza-se o jogo até\n serem finalizados os seis caminhos.\n3. Após completar os seis círculos finais, os jogadores devem somar os\n valores presentes nestes círculos.\n\nCaso os alunos estejam utilizando as fichas coloridas para auxiliar nas\noperações, nesse momento a quantidade de fichas será insuficiente para\nas operações com os números presentes nos círculos finais. Portanto, o\naluno precisa de um momento de análise das relações observadas, para que\napós compreender o funcionamento do jogo dos sinais com as fichas, ele\npossa reformular suas ideias e passar da representação com o material\npara a representação com apenas números e símbolos. Pode ser também que\nalguns alunos não utilizem as fichas em momento algum do jogo, fazendo\napenas a representação numérica.\n\nPor meio do jogo, espera-se que os alunos possam compreender como os\nvalores das cartas, os seus sinais e a operação realizada interferem no\nresultado da partida. Assim, por mais que em uma jogada o jogador tenha\ndois números positivos grandes, dependendo da operação realizada, ele\npode obter um número menor que o esperado.\n\n## Considerações finais\n\nCom esta proposta consideramos que a compreensão do aluno sobre as\nregras de sinais presentes nas operações de adição e subtração com\nnúmeros inteiros será alcançada de maneira significativa, indo além da\nsimples memorização, pois os alunos terão a oportunidade de estabelecer\nrelações entre as fichas coloridas e a regra dos sinais. Espera-se\ntambém que se desvinculem dos materiais manipuláveis e adotem uma\nlinguagem matemática ao expressar suas ideias. Essas ações favorecem que\nos alunos exerçam um papel ativo no seu aprendizado.\n\nPor conta da situação causada pela pandemia da COVID-19, não tivemos a\noportunidade de aplicar a proposta em sala de aula, mas propomos que os\nprofessores utilizem as atividades com seus alunos, podendo alterá-las\nconforme o contexto escolar.\n\n## Notas\n\n1. ::: {#footnote-4}\n Acadêmica do curso de Matemática - Unioeste/Cascavel. Bolsista do\n Programa Institucional de Bolsas de Iniciação à Docência (Pibid).\n E-mail:
ensino da trigonometria","markdown":{"headingText":"O uso do astrolábio caseiro no
ensino da trigonometria","containsRefs":false,"markdown":"\n $$\\newcommand{\\sen}{\\mathrm{sen}\\thinspace}\\newcommand{\\tg}{\\mathrm{tg}\\thinspace}$$\n\n::: autores\nBruna Eduarda Unser^[1](#footnote-23){#footnote-ref-23}^
\nEduardo Rossoni Zeni^[2](#footnote-24){#footnote-ref-24}^
\nFabiana Magda Garcia Papani^[3](#footnote-25){#footnote-ref-25}^\n:::\n\n## Objetivo geral\n\nEsta proposta didática propõe a construção de um astrolábio caseiro e a\nutilização desse instrumento para realização de um experimento de\nmedições, simulando o trabalho, por exemplo, de geógrafos, agrimensores\nou astrônomos. Os resultados obtidos nessas medições serão utilizados\npara ensinar trigonometria. A proposta também prevê a inserção do uso de\nplanilhas eletrônicas como ferramenta para o ensino de trigonometria.\n\n## Introdução\n\nA trigonometria (TRI + GONO + METRIA que significa TRÊS + ÂNGULOS +\nMEDIDA), é \"\\[\\...\\] parte da matemática que tem como objeto de estudo\nos lados e os ângulos de um triângulo\" [@leite_2016, p. 15]. Surgiu com\nas necessidades práticas oriundas da astronomia, agrimensura, navegação,\nentre outras ciências. Para solucionar problemas, como por exemplo,\ncalcular as alturas das pirâmides ou a largura dos rios, os\ncientistas^[4](#footnote-26){#footnote-ref-26}^ dessas áreas se baseavam\nem dois conceitos matemáticos básicos: a razão entre dois números e\nsemelhança de triângulos.\n\nSegundo Boyer [@boyer_2001], a trigonometria não foi obra de um só homem, nem\nde um só povo, e seus primeiros indícios apareceram no Egito e na\nBabilônia. No Egito, rudimentos de trigonometria aparecem a partir da\nrevolução agrícola, quando o homem começou a demarcar terras, fixar\npropriedade e formas de plantio, gerando a necessidade de saber qual o\ntamanho do terreno, por exemplo. Na Babilônia, além da agricultura, a\nevolução da trigonometria se deu pelo trabalho dos astrônomos, que\ndurante muitos anos mediram os movimentos dos astros. \n\nO astrolábio, cuja origem do nome provém do grego *astrolabion*, foi um\ninstrumento desenvolvido e aprimorado durante séculos por diversos povos\ncom base em teorias aritméticas, trigonométricas, astrológicas e\ngeográficas. Quando do seu surgimento, tinha como função resolver\nproblemas relacionados à navegação, ao deslocamento e temporalidade dos\nastros, a medir a altura de objetos de difícil acesso, entre outras\naplicações.\n\nAutores discutem sobre o surgimento exato ou até mesmo a inexistência de\numa história completamente linear e definida de tal instrumento. No\nentanto, sua presença em diversas culturas e regiões distantes umas das\noutras demonstra seu movimento, utilização, bem como seu papel\ncientífico e social. No contexto islâmico, por exemplo, o indivíduo que\nsabia utilizar o astrolábio era considerado uma pessoa importante e\npossuir um astrolábio era sinal de poder político e religioso [@saraiva_2016].\n\n::: bloco-imagem\n\n{#fig-41 fig-alt=\"Astrolábio Esférico\" loading=\"lazy\"}\n\n[Fonte:]{.figure-caption} @brian\n:::\n\nCom o passar dos anos, os instrumentos criados pelos antepassados foram\nsofrendo melhorias em seus mecanismos, se adequando às necessidades e\nisso não foi diferente com o astrolábio. O instrumento passou por\ndiversas versões até chegar no que temos hoje. Podemos ver, na [[@fig-41]]{.nobreak}, o\nastrolábio esférico. Este possuía discos, nos quais pontuavam-se as\nlatitudes, longitudes, horizonte, mapa astrológico e movimento do sol.\nEsses adornos possibilitavam a descoberta de características do tempo e\ndo espaço, tais como dias, estações e partilhas geográficas durante todo\no ano. Devido às mudanças de contextos históricos e de realidade e,\nainda, pelo fato deste instrumento ser muito pesado e complexo,\ndificultando seu uso, este astrolábio caiu em desuso, sendo substituído\npor uma versão mais leve e simplificada, baseada na projeção\nestereográfica. O astrolábio planisférico, o qual podemos observar na\n[@fig-42], é capaz de resolver problemas sem precisar recorrer à\ntrigonometria esférica. Nos séculos XV e XVI, o astrolábio plano foi\nsimplificado dando origem ao astrolábio náutico, o qual foi amplamente\nutilizado no continente europeu [@fantuzzi]. Veja [@fig-43]. A\ninvenção do relógio de pêndulos e de instrumentos científicos como o\ntelescópio fez do astrolábio um instrumento obsoleto e atualmente\nastrolábios são construídos apenas por curiosidade, diversão ou para\nfins educacionais [@morrison].\n\n::: bloco-imagem\n\n{#fig-42 fig-alt=\"Astrolábio Planisférico\" loading=\"lazy\"}\n\n[Fonte:]{.figure-caption} [@sailko]\n:::\n\n::: bloco-imagem\n\n{#fig-43 fig-alt=\"Astrolábio Náutico\" loading=\"lazy\"}\n\nFonte: [@skoklosters]\n:::\n\nEssa proposta didática abordará a construção de uma versão caseira do\nastrolábio e a realização de experimentos com a sua utilização para\nensinar trigonometria. Vários autores relatam que atividades práticas em\nsala de aula, utilizando o astrolábio, têm trazido bons resultados para\numa aprendizagem com significado da trigonometria. Campos [-@campos_2017], por\nexemplo, apresenta um relato de experiência, no qual constrói o\nastrolábio e o utiliza em atividades práticas com o objetivo de estudar\nconceitos de razões trigonométricas com alunos do 1º ano do Ensino\nMédio. O autor conclui que a abordagem teórica tradicional aliada às\natividades práticas contribui para que o aluno perceba a matemática na\nsua vida e não apenas nos livros ou na escola. Soriano, Silva e\nDamasceno [@soriano] colocam que a ressignificação de conteúdos obsoletos,\npor meio da utilização da história da matemática em sala de aula,\ninstiga a curiosidade dos alunos e mostra o processo de criação dos\nconceitos matemáticos. Saito [-@saito_2016] salienta que quando o professor\nreintegra o conteúdo matemático ao processo histórico, ele consegue\npropor novas estratégias de ensino, dando outro significado à\nmatemática, mostrando que a matemática é uma construção humana, que\nocorreu aos poucos, com erros, aproximações e, então, pequenos acertos,\ndesconstruindo a visão de uma ciência construída por formas\nadivinhatórias completas e por poucos homens sábios.\n\nAlém disso, ao utilizar o astrolábio para realizar medições,\ntrabalharemos com a experimentação em sala de aula. Segundo Lorenzato [2010 *apud* @almeida_2019], \"experimentar é valorizar também a construção do conhecimento em vez do resultado dele, pois mais\nimportante que conhecer a solução é saber como encontrá-la. Tal aspecto\ndesperta o interesse do discente e favorece a aprendizagem com\nsignificado\".\n\nAs atividades de experimentação sugeridas nessa proposta didática estão\npropositalmente organizadas de forma a aumentar o grau de dificuldade do\nconteúdo abordado e permitir o avanço dos conteúdos da trigonometria,\naté que em um determinado momento, é introduzida a utilização de\nplanilhas eletrônicas como ferramenta facilitadora do ensino desse\nconteúdo. De acordo com Silva e Moraes [-@silva_2016], as planilhas eletrônicas\nse relacionam bem com a matemática e estão repletas de ferramentas que\nproporcionam uma aula bastante dinâmica e atrativa, deixando os alunos\nmais interessados pela disciplina e, consequentemente, alcançando o\nresultado esperado. Saldanha [-@saldanha_2016] ressalta que as atividades\nutilizando planilhas eletrônicas, além de tornar as aulas mais\natrativas, permitem que os alunos se concentrem no raciocínio e na\nprogramação, ao invés de efetuar cálculos muitas vezes entediantes.\n\n## Atividade 1:
construção do astrolábio caseiro\n\nPretendemos --- com a construção do astrolábio --- desenvolver a\ncriatividade, a interatividade entre os alunos e o professor e promover\no interesse pela história por trás do objeto construído e pelo estudo da\ntrigonometria.\n\n### Materiais e métodos\n\nA construção do astrolábio requer os seguintes materiais: um canudo ou\ntubo de caneta; um pedaço de arame; fio de *nylon* ou barbante; um\ntransferidor; fita adesiva e um objeto que sirva de peso, como metal ou\numa pedra. Observem a [@fig-44].\n\n::: bloco-imagem\n\n{#fig-44 fig-alt=\"Materiais para a construção: canudo, tubo de caneta, pedaço de arame,\nbarbante, transferidor, fita adesiva e um pedaço de\nmetal.\" loading=\"lazy\"}\n:::\n\nPara construir o astrolábio, deve-se --- com um alicate ou algum objeto\nsimilar --- segurar o arame, aquecê-lo e fazer um furo no centro do\ntransferidor, ou seja, sobre a reta com a marcação de 90°, como\napresentado na [@fig-45]. Em seguida, é necessário cortar e amarrar um\npedaço de barbante no furo realizado e amarrar na outra extremidade do\nbarbante o objeto escolhido como peso. Por fim, deve-se fixar o canudo\nsobre o transferidor, paralelo à reta que contém as marcações 0° e 180º,\nobserve a [@fig-46].\n\n::: bloco-imagem\n\n{#fig-45 fig-alt=\"Furando o transferidor\" loading=\"lazy\"}\n:::\n\n::: bloco-imagem\n\n{#fig-46 fig-alt=\"Canudo fixado nas marcações 0º e 180º\" loading=\"lazy\"}\n:::\n\n## Atividade 2:
medições com o astrolábio\n\n### Método de uso\n\nO objetivo é utilizar o astrolábio construído para realizar medições de\nalturas inacessíveis, simulando o trabalho de um topógrafo, por exemplo,\ne utilizar a dinâmica para a facilitar a compreensão dos conceitos de\ntrigonometria, tais como: seno, cosseno e tangente de ângulos notáveis;\nrelações trigonométricas em um triângulo retângulo; adição e subtração\nde arcos; apresentar aplicações desses conceitos matemáticos em outras\nciências e no nosso cotidiano, mostrando que a matemática, assim como\noutras ciências, é desenvolvida pouco a pouco.\n\nO primeiro passo para utilizar o astrolábio é definir o objeto de\nestudo. Tendo realizado a escolha, deve-se enxergar pelo canudo o topo\ndo objeto escolhido como ilustrado na [@fig-47].\n\n::: bloco-imagem\n\n{#fig-47 fig-alt=\"Modo de usar o astrolábio caseiro. Uma pessoa ao ar livre, em um gramado, usando o astrolábio caseiro para medir um prédio\" loading=\"lazy\"}\n:::\n\nEm seguida, deve-se observar o ângulo demarcado pelo astrolábio, o qual\nchamaremos de α (*alfa*). Para isso, basta verificar a marcação\ndeterminada pelo barbante sobre o transferidor.\n\n::: bloco-imagem\n\n{#fig-48 fig-alt=\"Uma imagem contendo pessoa, edifício, ao ar livre, usando o astrolábio caseiro para medir.\" loading=\"lazy\"}\n:::\n\nSe chamarmos de θ (*teta*) o ângulo complementar ao ângulo *α*, ou seja,\no ângulo que somado a *α* resulta em 90° ([@fig-48]), podemos observar na\n[[@fig-49]]{.nobreak} que o cateto oposto a *θ* é $h$ (a altura do objeto menos a\naltura do observador) e que o cateto adjacente a este mesmo ângulo é a\ndistância $(d)$ entre o observador e o objeto. Assim, devemos também\nmedir a altura do observador e a distância entre o mesmo e o objeto\nescolhido para estudo.\n\n::: bloco-imagem\n\n{#fig-49 fig-alt=\"Esquema gráfico da medição, mostrando alfa, teta, a altura do\nobservador, a altura do objeto e a distância do observador até o objeto.\" loading=\"lazy\"}\n:::\n\nDesta forma, a altura do objeto é obtida por meio da aplicação da\nrelação ([-@eq-tg]) abaixo, relação métrica no triângulo retângulo baseada na\ntangente do ângulo *θ* e, portanto, relaciona os catetos oposto e\nadjacente a este ângulo.\n\n$$\\tg\\theta = \\frac{h}{d}$${#eq-tg}\n\nConsidere $h$ a altura do objeto menos a altura do observador e $d$\né a distância entre o observador e o objeto.\n\nUma vez que conhecemos o ângulo θ, a altura do observador e a distância\nentre o observador e o objeto, temos na relação dois elementos\nconhecidos e apenas a altura do objeto desconhecida.\n\n### Medindo uma árvore\n\nPara calcular a altura da árvore, seguimos os passos definidos\nanteriormente. Primeiramente, tomou-se a distância da árvore ao observador e com a\nutilização do astrolábio demarcou-se o ângulo *α* --- formado entre o\ncanudo e o barbante --- e calculou-se o ângulo complementar $\\theta$.\nEm seguida, com uma trena, mediu-se a distância entre a árvore e o\nobservador e a altura do observador.\n\n::: bloco-imagem\n\n{#fig-410 fig-alt=\"Imagem ao ar livre com um gramado, um prédio, uma árvore e uma pessoa\nusando o astrolábio caseiro para medir a altura da árvore. Sobre a\nimagem há marcações em vermelho mostrando as medidas obtidas: os ângulos\nalfa e teta, a altura do observador e a distância do observador até a\nárvore. A altura da árvore desde a cabeça do observador até o topo é uma\nlinha pontilhada.\" loading=\"lazy\"}\n:::\n\nNesse exemplo, como exibido na [@fig-410], os resultados obtidos foram,\n$\\alpha = 60^\\circ$ e consequentemente $\\theta = 30^\\circ$, a\ndistância entre o observador e a árvore foi de $8,35 \\thinspace m$ e\na altura do observador $1,60 \\thinspace m$.\n\nAo término das medições, os alunos voltam à sala de aula e o professor\nutiliza os resultados das observações para introduzir ou aplicar\nconceitos de trigonometria.\n\nPodemos observar que nesta primeira situação o ângulo $\\theta$ é o\nângulo notável, de $30^\\circ$, cuja tangente mede\n$\\frac{\\sqrt{3}}{3}$. Os ângulos $30^\\circ$, $45^\\circ$ e\n$60^\\circ$ são chamados ângulos notáveis por suas aparições em\nvários problemas matemáticos e, assim, é importante conhecer os valores\ndo seno, cosseno e tangente desses ângulos. Desta forma, utilizando a\nrelação (1), temos que,\n\n$$\\tg30^\\circ =\\frac{h}{8,35}$$\n\nUtilizando $0,5773$ como valor aproximado para tangente de $30^\\circ$ e realizando as\ndevidas manipulações, temos que,\n\n$$h = 0,5773 \\cdot 8,35 = 4,82 \\thinspace m$$\n\nPara sabermos a altura da árvore, basta somarmos o valor encontrado com\na altura do observador, deste modo,\n\nAltura da árvore = $4,82 + 1,60 = 6,42 \\thinspace m$\n\n### Medindo uma porta\n\nO objetivo deste experimento é:\n\n::: bloco-imagem\n\n{#fig-411 fig-alt=\"Uma menina usando o astrolábio caseiro para medir uma porta. É uma\nárea aberta, mas coberta e com sombra.\" loading=\"lazy\"}\n:::\n\n- Medir um objeto acessível, para poder comparar o resultado da medida\n utilizando o astrolábio com a medida obtida em uma medição\n convencional. Escolhemos para isso uma porta, como mostra a [[@fig-411]]{.nobreak}.\n- Provocar uma situação didática na qual o ângulo $\\theta$ não é um ângulo\n notável, de modo a dar continuidade, em sala de aula, ao ensino da\n trigonometria, apresentando algumas relações trigonométricas.\n Realizamos o procedimento de medição como anteriormente, no caso da\n árvore. Obtivemos para este objeto as medidas: $2,60 \\thinspace m$ de distância do observador à porta, o ângulo demarcado no astrolábio foi $75^\\circ$ e, portanto, seu ângulo complementar é $15^\\circ$. Neste caso o ângulo encontrado não é um ângulo notável, mas pode ser obtido como a diferença entre dois ângulos\n notáveis. Sendo assim, podemos calcular sua tangente utilizando a\n relação entre a tangente da diferença e a tangente dos arcos, a\n saber:\n\n$$\\tg(a-b) = \\frac{\\tg a -\\tg b}{1+\\tg a \\cdot \\tg b}$${#eq-tgdif}\n\nPodemos expressar o ângulo de $15^\\circ$ como $45^\\circ - 30^\\circ$. Assim, uma vez que a tangente de $30^\\circ$ é\n$\\frac{\\sqrt{3}}{3}$ e a tangente de $45^\\circ$ é $1$, temos,\nutilizando a equação ([-@eq-tgdif]),\n\n$$\n \\begin{aligned}\n \\tg(15^\\circ) &= \\tg(45^\\circ - 30^\\circ) \\\\[10pt]\n &= \\frac{1 -\\frac{\\sqrt{3}}{3}}{1 + 1 \\cdot \\frac{\\sqrt{3}}{3}} \\\\[10pt]\n &= \\frac{\\frac{3 - \\sqrt{3}}{3}}{\\frac{3 + \\sqrt{3}}{3}} \\\\[10pt]\n &= \\frac{3 - \\sqrt{3}}{3 + \\sqrt{3}}\n \\end{aligned}\n$$\n\nNeste momento, podemos efetuar uma racionalização e encontrar\n\n$$\\begin{aligned} \\tg(15^\\circ) &= \\frac{3 - \\sqrt{3}}{3 + \\sqrt{3}}\\cdot \\frac{3 + \\sqrt{3}}{3 + \\sqrt{3}} \\\\[10pt]\n&= \\frac{12 - 6\\sqrt{3}}{6} = 2 - \\sqrt{3} \\\\[10pt]\n& \\approx 0,2679 \\end{aligned}$$\n\nAssim $h = 0,2679 \\cdot2,60 = 0,6965 \\thinspace m$.\n\nPara sabermos a altura da porta, basta somarmos o valor encontrado com a\naltura do observador $(1,60 \\thinspace m)$, deste modo a altura da\nporta é $2,2965 \\thinspace m$.\n\nCabe ressaltar que a altura da porta obtida pela medição convencional,\nisto é, medindo a porta como uma trena é de $2,30 \\thinspace m$.\nLogo, podemos notar que a medida obtida utilizando o astrolábio fornece\num resultado muito próximo a altura real da porta, sendo que a diferença\nobtida se deve às aproximações realizadas e a possíveis imprecisões nas\nmedições.\n\nPodemos aproveitar o contexto gerado pelo experimento para explorar o\nseno, cosseno ou tangente de arcos e as relações entre seno, cosseno e\ntangente da soma, ou diferença, dos respectivos arcos, tais como as\napresentadas na Tabela 1.\n\nTabela 1 -- Relações entre seno, cosseno e tangente da soma e/ou\ndiferença de arcos e os respectivos arcos\n\n| |\n|:---:|\n| $\\sen(a + b) = \\sen a \\cdot \\cos b + \\sen b \\cdot \\cos a$ |\n| $\\sen(a - b) = \\sen a \\cdot \\cos b - \\sen b \\cdot \\cos a$ |\n| $\\cos(a + b) = \\cos a \\cdot \\cos b - \\sen a \\cdot \\sen b$ |\n| $\\cos(a - b) = \\cos a \\cdot \\cos b + \\sen a \\cdot \\sen b$ |\n| $\\tg(a + b) = \\frac{\\tg a + \\tg b}{1 - \\tg a \\cdot \\tg b}$ |\n| $\\tg(a - b) = \\frac{\\tg a - \\tg b}{1 + \\tg a \\cdot \\tg b}$ |\n \nPodemos, ainda, explorar os conceitos de racionalização, bem como de\nvalor aproximado (arredondamento), números racionais e irracionais.\n\n### Medindo um prédio\n\n::: bloco-imagem\n\n{#fig-412 fig-alt=\"Imagem ao ar livre com um gramado, um prédio, uma árvore e uma pessoa\nusando o astrolábio caseiro para medir a altura do prédio. Sobre a\nimagem há marcações em verde mostrando as medidas obtidas: os ângulos\nalfa e teta, a altura do observador e a distância do observador até a\nárvore. A altura do prédio desde a cabeça do observador até o topo é uma\nlinha pontilhada.\" loading=\"lazy\"}\n:::\n\nO objetivo desse experimento foi criar uma situação diferente das\ngeradas nos dois casos anteriores. Neste caso o ângulo θ não é um ângulo\nnotável, tão pouco pode ser obtido por meio da soma ou subtração de\nângulos notáveis. Sendo assim, abordaremos a possibilidade de utilizar\nplanilhas eletrônicas. Escolhemos, para realizar o experimento, medir a\naltura de um prédio. Como nos casos anteriores, foram medidos o ângulo α\ncom ajuda do astrolábio, a distância entre o observador e o prédio e a\naltura do observador, como podemos ver na [@fig-412].\n\nO ângulo marcado no transferidor foi $\\alpha = 50 ^\\circ$, porém,\ndevemos lembrar que este ângulo é o complementar do ângulo formado pela\nlinha de visão do observador e o solo. Assim, o ângulo entre a linha de\nvisão do observador e o solo é $\\theta = 40 ^\\circ$. Temos também\nque a distância entre o observador e o objeto é $ d = 13,50 \\thinspace\nm $ e que a altura do observador é $ h = 1,80 \\thinspace m $.\n\nQuando voltarmos para a sala de aula e utilizar os resultados das\nmedições, observaremos que neste experimento, o ângulo encontrado não é\num ângulo notável e não conseguimos obtê-lo a partir da soma ou\ndiferença de ângulos notáveis. Portanto, exploraremos o uso de\ncalculadora ou planilhas eletrônicas como, por exemplo, o Excel (2020),\npara o cálculo de valores das funções trigonométricas. O Excel\ndisponibiliza as funções *sen, cos* e *tan*, que fornecem,\nrespectivamente o seno, o cosseno e a tangente de um ângulo dado em\nradianos. Neste momento cabe abordar a questão das diferentes unidades\nde medida que podem ser utilizadas para medir ângulos e a relação entre\nelas. Nas calculadoras científicas, por exemplo, devemos escolher qual\nunidade de medida (radianos, grau ou grado) vamos utilizar. No Excel,\npor exemplo, se digitarmos \"$\\sen(30)$\"\", o aplicativo irá retornar o\nvalor -0,98803. O leitor distraído pode achar que o software realizou um\ncálculo errado, pois sabe que seno de $30^\\circ$ é $0,5$. O\nacontece é que o Excel entende o argumento \"$30$\"\" como $30$\nradianos, que equivale aproximadamente $1719^\\circ$, que é um arco\nsituado no quarto quadrante.\n\nAssim, se optamos por utilizar o Excel e desejamos retornar o valor do\nseno (cosseno, tangente) de um ângulo dado em graus, devemos primeiro\ntransformá-lo em radianos, utilizando a função *radianos*. Por exemplo,\npara calcular o seno de $30^\\circ$, podemos digitar no Excel $\\sen(\\text{radianos}(30))$ e então o Excel retornará o valor $0,5$.\n\nRetornando ao nosso problema, podemos utilizar a função para encontrar\n$\\tg 40^\\circ = 0,8391$.\n\nAssim, utilizando a relação ([-@eq-tg]), obtemos\n\n$$h = 0,8391 \\cdot 13,50 = 11,33 \\thinspace m$$.\n\nPara sabermos o valor da altura do prédio, basta somarmos $h$ com a altura do observador, obtendo que a altura do prédio é $13,12 \\thinspace m$.\n\nDestacamos que por ocasião deste experimento, o professor, em sala de\naula, além de explorar a utilização de planilhas eletrônicas como\nferramenta para o ensino, neste caso da trigonometria, pode explorar a\nrelação entre as unidades de medida de ângulo, grau e radianos, o sinal\ndas funções seno, cosseno e tangente em cada um dos quadrantes e o\n(de)crescimento dessas funções trigonométricas, de modo que, o aluno,\nconhecendo os valores dessas funções para os ângulos notáveis, possa\navaliar a coerência da resposta retornada pelo software.\n\n## Considerações finais\n\nAcredita-se que as atividades apresentadas nesta proposta didática\npermitirão a utilização de aspectos da história da matemática para\nensinar conceitos de trigonometria, corroborando com a opinião de\ndiversos autores de que ao utilizar a história da matemática como\nferramenta didática, estamos proporcionando mais do que um recurso\ninformativo. Essa metodologia permite mostrar aos alunos uma matemática\nem construção, portanto fruto da invenção humana. Permitirá ainda uma\nabordagem diferente para o conteúdo de trigonometria, com as atividades\npráticas, possibilitando a percepção de que a trigonometria pode ser\nutilizada em atividades cotidianas. Por último, a proposta didática\nestimula e exemplifica a utilização de planilhas eletrônicas em sala de\naula. Essa prática, além de colocar os alunos em contato com uma\nferramenta muito presente na vida cotidiana, permite que os alunos\ndesenvolvam os cálculos mais rapidamente, podendo dar maior atenção às\nideias e conceitos presentes na atividade.\n\n## Notas\n\n1. ::: {#footnote-23}\n Acadêmica do Curso de Matemática -- Unioeste/Cascavel-PR. Bolsista\n do Programa Institucional de Bolsas de Iniciação à Docência (Pibid).\n E-mail: bruna.unser@unioeste.br [↑](#footnote-ref-23)\n :::\n\n2. ::: {#footnote-24}\n Acadêmico do Curso de Matemática -- Unioeste/Cascavel-PR. Bolsista\n do Programa Institucional de Bolsas de Iniciação à Docência (Pibid).\n E-mail: Eduardo.zeni1@unioeste.br [↑](#footnote-ref-24)\n :::\n\n3. ::: {#footnote-25}\n Professora do Curso de Matemática -- Unioeste/Cascavel. Colaboradora\n de área do subprojeto Interdisciplinar Matemática/Química, do\n Programa Institucional de Bolsas de Iniciação à Docência (Pibid), da\n Unioeste. E-mail:
'.concat(d,"
"))),k(d))){"none"==d.style.display&&(d.style.display="block");var c=document.createElement("div");c.className="ginlined-content",c.appendChild(d),s=c}if(r){var u=document.getElementById(r);if(!u)return!1;var g=u.cloneNode(!0);g.style.height=t.height,g.style.maxWidth=t.width,h(g,"ginlined-content"),s=g}if(!s)return console.error("Unable to append inline slide content",t),!1;o.style.height=t.height,o.style.width=t.width,o.appendChild(s),this.events["inlineclose"+r]=a("click",{onElement:o.querySelectorAll(".gtrigger-close"),withCallback:function(e){e.preventDefault(),l.close()}}),T(n)&&n()}function Z(e,t,i,n){var s=e.querySelector(".gslide-media"),l=function(e){var t=e.url,i=e.allow,n=e.callback,s=e.appendTo,l=document.createElement("iframe");return l.className="vimeo-video gvideo",l.src=t,l.style.width="100%",l.style.height="100%",i&&l.setAttribute("allow",i),l.onload=function(){l.onload=null,h(l,"node-ready"),T(n)&&n()},s&&s.appendChild(l),l}({url:t.href,callback:n});s.parentNode.style.maxWidth=t.width,s.parentNode.style.height=t.height,s.appendChild(l)}var U=function(){function e(){var i=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};t(this,e),this.defaults={href:"",sizes:"",srcset:"",title:"",type:"",videoProvider:"",description:"",alt:"",descPosition:"bottom",effect:"",width:"",height:"",content:!1,zoomable:!0,draggable:!0},L(i)&&(this.defaults=l(this.defaults,i))}return n(e,[{key:"sourceType",value:function(e){var t=e;if(null!==(e=e.toLowerCase()).match(/\.(jpeg|jpg|jpe|gif|png|apn|webp|avif|svg)/))return"image";if(e.match(/(youtube\.com|youtube-nocookie\.com)\/watch\?v=([a-zA-Z0-9\-_]+)/)||e.match(/youtu\.be\/([a-zA-Z0-9\-_]+)/)||e.match(/(youtube\.com|youtube-nocookie\.com)\/embed\/([a-zA-Z0-9\-_]+)/))return"video";if(e.match(/vimeo\.com\/([0-9]*)/))return"video";if(null!==e.match(/\.(mp4|ogg|webm|mov)/))return"video";if(null!==e.match(/\.(mp3|wav|wma|aac|ogg)/))return"audio";if(e.indexOf("#")>-1&&""!==t.split("#").pop().trim())return"inline";return e.indexOf("goajax=true")>-1?"ajax":"external"}},{key:"parseConfig",value:function(e,t){var i=this,n=l({descPosition:t.descPosition},this.defaults);if(L(e)&&!k(e)){O(e,"type")||(O(e,"content")&&e.content?e.type="inline":O(e,"href")&&(e.type=this.sourceType(e.href)));var s=l(n,e);return this.setSize(s,t),s}var r="",a=e.getAttribute("data-glightbox"),h=e.nodeName.toLowerCase();if("a"===h&&(r=e.href),"img"===h&&(r=e.src,n.alt=e.alt),n.href=r,o(n,(function(s,l){O(t,l)&&"width"!==l&&(n[l]=t[l]);var o=e.dataset[l];I(o)||(n[l]=i.sanitizeValue(o))})),n.content&&(n.type="inline"),!n.type&&r&&(n.type=this.sourceType(r)),I(a)){if(!n.title&&"a"==h){var d=e.title;I(d)||""===d||(n.title=d)}if(!n.title&&"img"==h){var c=e.alt;I(c)||""===c||(n.title=c)}}else{var u=[];o(n,(function(e,t){u.push(";\\s?"+t)})),u=u.join("\\s?:|"),""!==a.trim()&&o(n,(function(e,t){var s=a,l=new RegExp("s?"+t+"s?:s?(.*?)("+u+"s?:|$)"),o=s.match(l);if(o&&o.length&&o[1]){var r=o[1].trim().replace(/;\s*$/,"");n[t]=i.sanitizeValue(r)}}))}if(n.description&&"."===n.description.substring(0,1)){var g;try{g=document.querySelector(n.description).innerHTML}catch(e){if(!(e instanceof DOMException))throw e}g&&(n.description=g)}if(!n.description){var v=e.querySelector(".glightbox-desc");v&&(n.description=v.innerHTML)}return this.setSize(n,t,e),this.slideConfig=n,n}},{key:"setSize",value:function(e,t){var i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:null,n="video"==e.type?this.checkSize(t.videosWidth):this.checkSize(t.width),s=this.checkSize(t.height);return e.width=O(e,"width")&&""!==e.width?this.checkSize(e.width):n,e.height=O(e,"height")&&""!==e.height?this.checkSize(e.height):s,i&&"image"==e.type&&(e._hasCustomWidth=!!i.dataset.width,e._hasCustomHeight=!!i.dataset.height),e}},{key:"checkSize",value:function(e){return M(e)?"".concat(e,"px"):e}},{key:"sanitizeValue",value:function(e){return"true"!==e&&"false"!==e?e:"true"===e}}]),e}(),$=function(){function e(i,n,s){t(this,e),this.element=i,this.instance=n,this.index=s}return n(e,[{key:"setContent",value:function(){var e=this,t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:null,i=arguments.length>1&&void 0!==arguments[1]&&arguments[1];if(c(t,"loaded"))return!1;var n=this.instance.settings,s=this.slideConfig,l=w();T(n.beforeSlideLoad)&&n.beforeSlideLoad({index:this.index,slide:t,player:!1});var o=s.type,r=s.descPosition,a=t.querySelector(".gslide-media"),d=t.querySelector(".gslide-title"),u=t.querySelector(".gslide-desc"),g=t.querySelector(".gdesc-inner"),v=i,f="gSlideTitle_"+this.index,p="gSlideDesc_"+this.index;if(T(n.afterSlideLoad)&&(v=function(){T(i)&&i(),n.afterSlideLoad({index:e.index,slide:t,player:e.instance.getSlidePlayerInstance(e.index)})}),""==s.title&&""==s.description?g&&g.parentNode.parentNode.removeChild(g.parentNode):(d&&""!==s.title?(d.id=f,d.innerHTML=s.title):d.parentNode.removeChild(d),u&&""!==s.description?(u.id=p,l&&n.moreLength>0?(s.smallDescription=this.slideShortDesc(s.description,n.moreLength,n.moreText),u.innerHTML=s.smallDescription,this.descriptionEvents(u,s)):u.innerHTML=s.description):u.parentNode.removeChild(u),h(a.parentNode,"desc-".concat(r)),h(g.parentNode,"description-".concat(r))),h(a,"gslide-".concat(o)),h(t,"loaded"),"video"!==o){if("external"!==o)return"inline"===o?(G.apply(this.instance,[t,s,this.index,v]),void(s.draggable&&new V({dragEl:t.querySelector(".gslide-inline"),toleranceX:n.dragToleranceX,toleranceY:n.dragToleranceY,slide:t,instance:this.instance}))):void("image"!==o?T(v)&&v():j(t,s,this.index,(function(){var i=t.querySelector("img");s.draggable&&new V({dragEl:i,toleranceX:n.dragToleranceX,toleranceY:n.dragToleranceY,slide:t,instance:e.instance}),s.zoomable&&i.naturalWidth>i.offsetWidth&&(h(i,"zoomable"),new H(i,t,(function(){e.instance.resize()}))),T(v)&&v()})));Z.apply(this,[t,s,this.index,v])}else F.apply(this.instance,[t,s,this.index,v])}},{key:"slideShortDesc",value:function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:50,i=arguments.length>2&&void 0!==arguments[2]&&arguments[2],n=document.createElement("div");n.innerHTML=e;var s=n.innerText,l=i;if((e=s.trim()).length<=t)return e;var o=e.substr(0,t-1);return l?(n=null,o+'... '+i+""):o}},{key:"descriptionEvents",value:function(e,t){var i=this,n=e.querySelector(".desc-more");if(!n)return!1;a("click",{onElement:n,withCallback:function(e,n){e.preventDefault();var s=document.body,l=u(n,".gslide-desc");if(!l)return!1;l.innerHTML=t.description,h(s,"gdesc-open");var o=a("click",{onElement:[s,u(l,".gslide-description")],withCallback:function(e,n){"a"!==e.target.nodeName.toLowerCase()&&(d(s,"gdesc-open"),h(s,"gdesc-closed"),l.innerHTML=t.smallDescription,i.descriptionEvents(l,t),setTimeout((function(){d(s,"gdesc-closed")}),400),o.destroy())}})}})}},{key:"create",value:function(){return m(this.instance.settings.slideHTML)}},{key:"getConfig",value:function(){k(this.element)||this.element.hasOwnProperty("draggable")||(this.element.draggable=this.instance.settings.draggable);var e=new U(this.instance.settings.slideExtraAttributes);return this.slideConfig=e.parseConfig(this.element,this.instance.settings),this.slideConfig}}]),e}(),J=w(),K=null!==w()||void 0!==document.createTouch||"ontouchstart"in window||"onmsgesturechange"in window||navigator.msMaxTouchPoints,Q=document.getElementsByTagName("html")[0],ee={selector:".glightbox",elements:null,skin:"clean",theme:"clean",closeButton:!0,startAt:null,autoplayVideos:!0,autofocusVideos:!0,descPosition:"bottom",width:"900px",height:"506px",videosWidth:"960px",beforeSlideChange:null,afterSlideChange:null,beforeSlideLoad:null,afterSlideLoad:null,slideInserted:null,slideRemoved:null,slideExtraAttributes:null,onOpen:null,onClose:null,loop:!1,zoomable:!0,draggable:!0,dragAutoSnap:!1,dragToleranceX:40,dragToleranceY:65,preload:!0,oneSlidePerOpen:!1,touchNavigation:!0,touchFollowAxis:!0,keyboardNavigation:!0,closeOnOutsideClick:!0,plugins:!1,plyr:{css:"https://cdn.plyr.io/3.6.12/plyr.css",js:"https://cdn.plyr.io/3.6.12/plyr.js",config:{ratio:"16:9",fullscreen:{enabled:!0,iosNative:!0},youtube:{noCookie:!0,rel:0,showinfo:0,iv_load_policy:3},vimeo:{byline:!1,portrait:!1,title:!1,transparent:!1}}},openEffect:"zoom",closeEffect:"zoom",slideEffect:"slide",moreText:"See more",moreLength:60,cssEfects:{fade:{in:"fadeIn",out:"fadeOut"},zoom:{in:"zoomIn",out:"zoomOut"},slide:{in:"slideInRight",out:"slideOutLeft"},slideBack:{in:"slideInLeft",out:"slideOutRight"},none:{in:"none",out:"none"}},svg:{close:'',next:'',prev:''},slideHTML:'',lightboxHTML:'\n \n \n
'},te=function(){function e(){var i=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};t(this,e),this.customOptions=i,this.settings=l(ee,i),this.effectsClasses=this.getAnimationClasses(),this.videoPlayers={},this.apiEvents=[],this.fullElementsList=!1}return n(e,[{key:"init",value:function(){var e=this,t=this.getSelector();t&&(this.baseEvents=a("click",{onElement:t,withCallback:function(t,i){t.preventDefault(),e.open(i)}})),this.elements=this.getElements()}},{key:"open",value:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:null,t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:null;if(0===this.elements.length)return!1;this.activeSlide=null,this.prevActiveSlideIndex=null,this.prevActiveSlide=null;var i=M(t)?t:this.settings.startAt;if(k(e)){var n=e.getAttribute("data-gallery");n&&(this.fullElementsList=this.elements,this.elements=this.getGalleryElements(this.elements,n)),I(i)&&(i=this.getElementIndex(e))<0&&(i=0)}M(i)||(i=0),this.build(),g(this.overlay,"none"===this.settings.openEffect?"none":this.settings.cssEfects.fade.in);var s=document.body,l=window.innerWidth-document.documentElement.clientWidth;if(l>0){var o=document.createElement("style");o.type="text/css",o.className="gcss-styles",o.innerText=".gscrollbar-fixer {margin-right: ".concat(l,"px}"),document.head.appendChild(o),h(s,"gscrollbar-fixer")}h(s,"glightbox-open"),h(Q,"glightbox-open"),J&&(h(document.body,"glightbox-mobile"),this.settings.slideEffect="slide"),this.showSlide(i,!0),1===this.elements.length?(h(this.prevButton,"glightbox-button-hidden"),h(this.nextButton,"glightbox-button-hidden")):(d(this.prevButton,"glightbox-button-hidden"),d(this.nextButton,"glightbox-button-hidden")),this.lightboxOpen=!0,this.trigger("open"),T(this.settings.onOpen)&&this.settings.onOpen(),K&&this.settings.touchNavigation&&B(this),this.settings.keyboardNavigation&&X(this)}},{key:"openAt",value:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:0;this.open(null,e)}},{key:"showSlide",value:function(){var e=this,t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:0,i=arguments.length>1&&void 0!==arguments[1]&&arguments[1];f(this.loader),this.index=parseInt(t);var n=this.slidesContainer.querySelector(".current");n&&d(n,"current"),this.slideAnimateOut();var s=this.slidesContainer.querySelectorAll(".gslide")[t];if(c(s,"loaded"))this.slideAnimateIn(s,i),p(this.loader);else{f(this.loader);var l=this.elements[t],o={index:this.index,slide:s,slideNode:s,slideConfig:l.slideConfig,slideIndex:this.index,trigger:l.node,player:null};this.trigger("slide_before_load",o),l.instance.setContent(s,(function(){p(e.loader),e.resize(),e.slideAnimateIn(s,i),e.trigger("slide_after_load",o)}))}this.slideDescription=s.querySelector(".gslide-description"),this.slideDescriptionContained=this.slideDescription&&c(this.slideDescription.parentNode,"gslide-media"),this.settings.preload&&(this.preloadSlide(t+1),this.preloadSlide(t-1)),this.updateNavigationClasses(),this.activeSlide=s}},{key:"preloadSlide",value:function(e){var t=this;if(e<0||e>this.elements.length-1)return!1;if(I(this.elements[e]))return!1;var i=this.slidesContainer.querySelectorAll(".gslide")[e];if(c(i,"loaded"))return!1;var n=this.elements[e],s=n.type,l={index:e,slide:i,slideNode:i,slideConfig:n.slideConfig,slideIndex:e,trigger:n.node,player:null};this.trigger("slide_before_load",l),"video"===s||"external"===s?setTimeout((function(){n.instance.setContent(i,(function(){t.trigger("slide_after_load",l)}))}),200):n.instance.setContent(i,(function(){t.trigger("slide_after_load",l)}))}},{key:"prevSlide",value:function(){this.goToSlide(this.index-1)}},{key:"nextSlide",value:function(){this.goToSlide(this.index+1)}},{key:"goToSlide",value:function(){var e=arguments.length>0&&void 0!==arguments[0]&&arguments[0];if(this.prevActiveSlide=this.activeSlide,this.prevActiveSlideIndex=this.index,!this.loop()&&(e<0||e>this.elements.length-1))return!1;e<0?e=this.elements.length-1:e>=this.elements.length&&(e=0),this.showSlide(e)}},{key:"insertSlide",value:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:-1;t<0&&(t=this.elements.length);var i=new $(e,this,t),n=i.getConfig(),s=l({},n),o=i.create(),r=this.elements.length-1;s.index=t,s.node=!1,s.instance=i,s.slideConfig=n,this.elements.splice(t,0,s);var a=null,h=null;if(this.slidesContainer){if(t>r)this.slidesContainer.appendChild(o);else{var d=this.slidesContainer.querySelectorAll(".gslide")[t];this.slidesContainer.insertBefore(o,d)}(this.settings.preload&&0==this.index&&0==t||this.index-1==t||this.index+1==t)&&this.preloadSlide(t),0===this.index&&0===t&&(this.index=1),this.updateNavigationClasses(),a=this.slidesContainer.querySelectorAll(".gslide")[t],h=this.getSlidePlayerInstance(t),s.slideNode=a}this.trigger("slide_inserted",{index:t,slide:a,slideNode:a,slideConfig:n,slideIndex:t,trigger:null,player:h}),T(this.settings.slideInserted)&&this.settings.slideInserted({index:t,slide:a,player:h})}},{key:"removeSlide",value:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:-1;if(e<0||e>this.elements.length-1)return!1;var t=this.slidesContainer&&this.slidesContainer.querySelectorAll(".gslide")[e];t&&(this.getActiveSlideIndex()==e&&(e==this.elements.length-1?this.prevSlide():this.nextSlide()),t.parentNode.removeChild(t)),this.elements.splice(e,1),this.trigger("slide_removed",e),T(this.settings.slideRemoved)&&this.settings.slideRemoved(e)}},{key:"slideAnimateIn",value:function(e,t){var i=this,n=e.querySelector(".gslide-media"),s=e.querySelector(".gslide-description"),l={index:this.prevActiveSlideIndex,slide:this.prevActiveSlide,slideNode:this.prevActiveSlide,slideIndex:this.prevActiveSlide,slideConfig:I(this.prevActiveSlideIndex)?null:this.elements[this.prevActiveSlideIndex].slideConfig,trigger:I(this.prevActiveSlideIndex)?null:this.elements[this.prevActiveSlideIndex].node,player:this.getSlidePlayerInstance(this.prevActiveSlideIndex)},o={index:this.index,slide:this.activeSlide,slideNode:this.activeSlide,slideConfig:this.elements[this.index].slideConfig,slideIndex:this.index,trigger:this.elements[this.index].node,player:this.getSlidePlayerInstance(this.index)};if(n.offsetWidth>0&&s&&(p(s),s.style.display=""),d(e,this.effectsClasses),t)g(e,this.settings.cssEfects[this.settings.openEffect].in,(function(){i.settings.autoplayVideos&&i.slidePlayerPlay(e),i.trigger("slide_changed",{prev:l,current:o}),T(i.settings.afterSlideChange)&&i.settings.afterSlideChange.apply(i,[l,o])}));else{var r=this.settings.slideEffect,a="none"!==r?this.settings.cssEfects[r].in:r;this.prevActiveSlideIndex>this.index&&"slide"==this.settings.slideEffect&&(a=this.settings.cssEfects.slideBack.in),g(e,a,(function(){i.settings.autoplayVideos&&i.slidePlayerPlay(e),i.trigger("slide_changed",{prev:l,current:o}),T(i.settings.afterSlideChange)&&i.settings.afterSlideChange.apply(i,[l,o])}))}setTimeout((function(){i.resize(e)}),100),h(e,"current")}},{key:"slideAnimateOut",value:function(){if(!this.prevActiveSlide)return!1;var e=this.prevActiveSlide;d(e,this.effectsClasses),h(e,"prev");var t=this.settings.slideEffect,i="none"!==t?this.settings.cssEfects[t].out:t;this.slidePlayerPause(e),this.trigger("slide_before_change",{prev:{index:this.prevActiveSlideIndex,slide:this.prevActiveSlide,slideNode:this.prevActiveSlide,slideIndex:this.prevActiveSlideIndex,slideConfig:I(this.prevActiveSlideIndex)?null:this.elements[this.prevActiveSlideIndex].slideConfig,trigger:I(this.prevActiveSlideIndex)?null:this.elements[this.prevActiveSlideIndex].node,player:this.getSlidePlayerInstance(this.prevActiveSlideIndex)},current:{index:this.index,slide:this.activeSlide,slideNode:this.activeSlide,slideIndex:this.index,slideConfig:this.elements[this.index].slideConfig,trigger:this.elements[this.index].node,player:this.getSlidePlayerInstance(this.index)}}),T(this.settings.beforeSlideChange)&&this.settings.beforeSlideChange.apply(this,[{index:this.prevActiveSlideIndex,slide:this.prevActiveSlide,player:this.getSlidePlayerInstance(this.prevActiveSlideIndex)},{index:this.index,slide:this.activeSlide,player:this.getSlidePlayerInstance(this.index)}]),this.prevActiveSlideIndex>this.index&&"slide"==this.settings.slideEffect&&(i=this.settings.cssEfects.slideBack.out),g(e,i,(function(){var t=e.querySelector(".ginner-container"),i=e.querySelector(".gslide-media"),n=e.querySelector(".gslide-description");t.style.transform="",i.style.transform="",d(i,"greset"),i.style.opacity="",n&&(n.style.opacity=""),d(e,"prev")}))}},{key:"getAllPlayers",value:function(){return this.videoPlayers}},{key:"getSlidePlayerInstance",value:function(e){var t="gvideo"+e,i=this.getAllPlayers();return!(!O(i,t)||!i[t])&&i[t]}},{key:"stopSlideVideo",value:function(e){if(k(e)){var t=e.querySelector(".gvideo-wrapper");t&&(e=t.getAttribute("data-index"))}console.log("stopSlideVideo is deprecated, use slidePlayerPause");var i=this.getSlidePlayerInstance(e);i&&i.playing&&i.pause()}},{key:"slidePlayerPause",value:function(e){if(k(e)){var t=e.querySelector(".gvideo-wrapper");t&&(e=t.getAttribute("data-index"))}var i=this.getSlidePlayerInstance(e);i&&i.playing&&i.pause()}},{key:"playSlideVideo",value:function(e){if(k(e)){var t=e.querySelector(".gvideo-wrapper");t&&(e=t.getAttribute("data-index"))}console.log("playSlideVideo is deprecated, use slidePlayerPlay");var i=this.getSlidePlayerInstance(e);i&&!i.playing&&i.play()}},{key:"slidePlayerPlay",value:function(e){var t;if(!J||null!==(t=this.settings.plyr.config)&&void 0!==t&&t.muted){if(k(e)){var i=e.querySelector(".gvideo-wrapper");i&&(e=i.getAttribute("data-index"))}var n=this.getSlidePlayerInstance(e);n&&!n.playing&&(n.play(),this.settings.autofocusVideos&&n.elements.container.focus())}}},{key:"setElements",value:function(e){var t=this;this.settings.elements=!1;var i=[];e&&e.length&&o(e,(function(e,n){var s=new $(e,t,n),o=s.getConfig(),r=l({},o);r.slideConfig=o,r.instance=s,r.index=n,i.push(r)})),this.elements=i,this.lightboxOpen&&(this.slidesContainer.innerHTML="",this.elements.length&&(o(this.elements,(function(){var e=m(t.settings.slideHTML);t.slidesContainer.appendChild(e)})),this.showSlide(0,!0)))}},{key:"getElementIndex",value:function(e){var t=!1;return o(this.elements,(function(i,n){if(O(i,"node")&&i.node==e)return t=n,!0})),t}},{key:"getElements",value:function(){var e=this,t=[];this.elements=this.elements?this.elements:[],!I(this.settings.elements)&&E(this.settings.elements)&&this.settings.elements.length&&o(this.settings.elements,(function(i,n){var s=new $(i,e,n),o=s.getConfig(),r=l({},o);r.node=!1,r.index=n,r.instance=s,r.slideConfig=o,t.push(r)}));var i=!1;return this.getSelector()&&(i=document.querySelectorAll(this.getSelector())),i?(o(i,(function(i,n){var s=new $(i,e,n),o=s.getConfig(),r=l({},o);r.node=i,r.index=n,r.instance=s,r.slideConfig=o,r.gallery=i.getAttribute("data-gallery"),t.push(r)})),t):t}},{key:"getGalleryElements",value:function(e,t){return e.filter((function(e){return e.gallery==t}))}},{key:"getSelector",value:function(){return!this.settings.elements&&(this.settings.selector&&"data-"==this.settings.selector.substring(0,5)?"*[".concat(this.settings.selector,"]"):this.settings.selector)}},{key:"getActiveSlide",value:function(){return this.slidesContainer.querySelectorAll(".gslide")[this.index]}},{key:"getActiveSlideIndex",value:function(){return this.index}},{key:"getAnimationClasses",value:function(){var e=[];for(var t in this.settings.cssEfects)if(this.settings.cssEfects.hasOwnProperty(t)){var i=this.settings.cssEfects[t];e.push("g".concat(i.in)),e.push("g".concat(i.out))}return e.join(" ")}},{key:"build",value:function(){var e=this;if(this.built)return!1;var t=document.body.childNodes,i=[];o(t,(function(e){e.parentNode==document.body&&"#"!==e.nodeName.charAt(0)&&e.hasAttribute&&!e.hasAttribute("aria-hidden")&&(i.push(e),e.setAttribute("aria-hidden","true"))}));var n=O(this.settings.svg,"next")?this.settings.svg.next:"",s=O(this.settings.svg,"prev")?this.settings.svg.prev:"",l=O(this.settings.svg,"close")?this.settings.svg.close:"",r=this.settings.lightboxHTML;r=m(r=(r=(r=r.replace(/{nextSVG}/g,n)).replace(/{prevSVG}/g,s)).replace(/{closeSVG}/g,l)),document.body.appendChild(r);var d=document.getElementById("glightbox-body");this.modal=d;var g=d.querySelector(".gclose");this.prevButton=d.querySelector(".gprev"),this.nextButton=d.querySelector(".gnext"),this.overlay=d.querySelector(".goverlay"),this.loader=d.querySelector(".gloader"),this.slidesContainer=document.getElementById("glightbox-slider"),this.bodyHiddenChildElms=i,this.events={},h(this.modal,"glightbox-"+this.settings.skin),this.settings.closeButton&&g&&(this.events.close=a("click",{onElement:g,withCallback:function(t,i){t.preventDefault(),e.close()}})),g&&!this.settings.closeButton&&g.parentNode.removeChild(g),this.nextButton&&(this.events.next=a("click",{onElement:this.nextButton,withCallback:function(t,i){t.preventDefault(),e.nextSlide()}})),this.prevButton&&(this.events.prev=a("click",{onElement:this.prevButton,withCallback:function(t,i){t.preventDefault(),e.prevSlide()}})),this.settings.closeOnOutsideClick&&(this.events.outClose=a("click",{onElement:d,withCallback:function(t,i){e.preventOutsideClick||c(document.body,"glightbox-mobile")||u(t.target,".ginner-container")||u(t.target,".gbtn")||c(t.target,"gnext")||c(t.target,"gprev")||e.close()}})),o(this.elements,(function(t,i){e.slidesContainer.appendChild(t.instance.create()),t.slideNode=e.slidesContainer.querySelectorAll(".gslide")[i]})),K&&h(document.body,"glightbox-touch"),this.events.resize=a("resize",{onElement:window,withCallback:function(){e.resize()}}),this.built=!0}},{key:"resize",value:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:null;if((e=e||this.activeSlide)&&!c(e,"zoomed")){var t=y(),i=e.querySelector(".gvideo-wrapper"),n=e.querySelector(".gslide-image"),s=this.slideDescription,l=t.width,o=t.height;if(l<=768?h(document.body,"glightbox-mobile"):d(document.body,"glightbox-mobile"),i||n){var r=!1;if(s&&(c(s,"description-bottom")||c(s,"description-top"))&&!c(s,"gabsolute")&&(r=!0),n)if(l<=768)n.querySelector("img");else if(r){var a=s.offsetHeight,u=n.querySelector("img");u.setAttribute("style","max-height: calc(100vh - ".concat(a,"px)")),s.setAttribute("style","max-width: ".concat(u.offsetWidth,"px;"))}if(i){var g=O(this.settings.plyr.config,"ratio")?this.settings.plyr.config.ratio:"";if(!g){var v=i.clientWidth,f=i.clientHeight,p=v/f;g="".concat(v/p,":").concat(f/p)}var m=g.split(":"),x=this.settings.videosWidth,b=this.settings.videosWidth,S=(b=M(x)||-1!==x.indexOf("px")?parseInt(x):-1!==x.indexOf("vw")?l*parseInt(x)/100:-1!==x.indexOf("vh")?o*parseInt(x)/100:-1!==x.indexOf("%")?l*parseInt(x)/100:parseInt(i.clientWidth))/(parseInt(m[0])/parseInt(m[1]));if(S=Math.floor(S),r&&(o-=s.offsetHeight),b>l||S>o||o\n \n \n \n \n
\n
+ h1_tag = soup.find('h1')
+
+ # Todos os capítulos devem ter uma tag
+ if h1_tag:
+
+ # Encontre o primeiro com a classe 'chapter-number' dentro da tag
+ span_tag = h1_tag.find('span', class_='chapter-number')
+
+ # Verifique se o com a classe 'chapter-number' foi encontrado dentro do
+ if span_tag:
+
+ cap = span_tag.text
+
+ é_um_capitulo_numerado = True
+
+ ref_cap[cap] = capitulos_arquivo_html[index]
+
+
+
+
+ # Verifique se há pelo menos uma tag com a classe "um_capitulo", ou seja nae é capitulo de verbete caso seja um dicionario
+ encontrou_um_capitulo = bool(main_tag.find('div', class_='um_capitulo'))
+
+
+
+ # Se é um capítulo normal em um dicionário e nao é um capítulo numerado, seleciona a letra para marcar o capítulo
+ # Nao esquecer que deve haver uma div com as classes hidden e um_capitulo em todos os capítulos que nao forem de verbetes em um de um dicionario
+ if not encontrou_um_capitulo and é_dicionário:
+
+ é_um_capitulo_verbete = True
+
+ # Coloca os marcadores nos verbetes como o nome do próprio verbete
+ dt_tags = main_tag.find_all('dt')
+
+ for dt_tag in dt_tags:
+
+ # Para contar o numero de definicoes dd
+ Num_dd = 0
+
+ texto_titulo_dt = dt_tag.text
+
+ texto_a_ser_sanitizado = dt_tag.text
+
+ dt_tag['class'] = dt_tag.get("class", []) + ["unidade", "verbete"]
+
+ dt_tag['title'] = texto_titulo_dt
+
+ id_dt_tag = (texto_a_ser_sanitizado
+
+ .replace(' ', '_')
+ .replace('&', '_e_')
+ .replace('$', '_s_')
+ .replace('+', '_mais_')
+ .replace(',', '_vir_')
+ .replace('/', '_barra_')
+ .replace(':', '_dois_pontos_')
+ .replace(';', '_ponto_vir_')
+ .replace('?', '_interrog_')
+ .replace('=', '_igual_')
+ .replace('@', '_at_')
+ .replace('#', '_jv_')
+ .replace('>', '_maiq_')
+ .replace('<', '_menq_')
+ .replace('[', '_abre_colch_')
+ .replace(']', '_fecha_col_')
+ .replace('{', '_abre_ch_')
+ .replace('}', '_fecha_ch_')
+ .replace('.', '_ponto_')
+ .replace('|', '_barra_ver_')
+ .replace('\\', '_barra_inv_')
+ .replace('%', '_p_100_')
+ .replace('^', '_acen_chapeu_')
+
+ )
+
+ dt_tag['id'] = id_dt_tag
+
+
+
+
+ # Encontre o primeiro elemento irmão da tag
+ dd_tag = dt_tag.find_next_sibling('dd')
+
+ # Itere sobre todas as tags irmãs até encontrar uma tag não
+ while dd_tag and dd_tag.name == 'dd':
+
+ Num_dd += 1
+
+ dd_tag['title'] = texto_titulo_dt + " def. " + str(Num_dd)
+
+ dd_tag['id'] = id_dt_tag + "_def_" + str(Num_dd)
+
+ # Encontre o próximo elemento irmão da tag
+ dd_tag = dd_tag.find_next_sibling('dd')
+
+
+
+ #verifica de há outras tags além de dt, dd, e títulos (usado para o caso de um capítulo de verbete contiver mais conteúdos)
+ tags_procuradas = ['p', 'li', 'tr', 'blockquote', 'code', 'pre']
+
+ mais_conteudo_alem_verbetes = False
+
+ if é_um_capitulo_verbete and é_dicionário:
+
+ for tag in tags_procuradas:
+
+ # Verifique se a tag está presente em 'main_tag'
+ if main_tag.find(tag):
+
+ # Verifique se a tag não tem 'nav' como pai
+ if not main_tag.find(tag).find_parent("nav"):
+
+ mais_conteudo_alem_verbetes = True
+
+ break # Se ambas as condições forem atendidas, definimos como True e saímos do loop
+
+
+
+ # Verifica se nao é um capítulo sem numero e se nao for um capítulo de verbete ou se é um capitulo de verbete e se existe outro conteudo alem das definicoes dos verbetes
+ if (not é_um_capitulo_numerado and not é_um_capitulo_verbete) or (é_dicionário and not é_um_capitulo_numerado and é_um_capitulo_verbete and mais_conteudo_alem_verbetes):
+
+ letras_index_digito_1 += 1
+
+ cap = escolher_letra_para_capitulo(letras_index_digito_1)
+
+ ref_cap[cap] = capitulos_arquivo_html[index]
+
+
+
+
+
+
+
+ # Iterar sobre todas as tags dentro da tag 'main'
+ for tag in main_tag.find_all(True):
+
+ # Verifique se a classe 'unidade' está presente nos atributos da tag
+ if "unidade" in tag.get("class", []):
+
+ # Incrementa o número da referência
+ ref_num += 1
+
+ # Coloca a referência na tag
+ colocar_referencia(cap, tag, ref_num)
+
+ # Pula para a próxima tag
+ continue
+
+ parent_tag = tag.parent
+
+ # Não é filho direto de 'td' ou 'li'
+ if parent_tag.name not in ["td", "li", "p"]:
+
+ # Verifique se a tag é filha de uma tag chamada 'header' usando find_parents(). Em caso positivo, pula
+ is_descendant_of_header = tag.find_parents("header")
+
+ if is_descendant_of_header:
+ continue
+
+
+
+ # Se é um parágrafo
+ if tag.name == "p" or tag.name == "tr" or tag.name == "li" or tag.name == "code" or tag.name == "blockquote" or (tag.name == "dt" and not é_um_capitulo_verbete) or (tag.name == "dd" and not é_um_capitulo_verbete) or ("quarto-video" in tag.get("class", []) and tag.name == "div") or ("callout" in tag.get("class", []) and tag.name == "div") or ("csl-entry" in tag.get("class", []) and tag.name == "div"):
+
+ # Incrementa o número da referência
+ ref_num += 1
+
+ # Coloca a referência na tag
+ colocar_referencia(cap, tag, ref_num)
+
+ # Pula para a próxima tag
+ continue
+
+
+
+
+
+
+
+ # Se for criado pelo usuário um id para euqacoes, aqui coloco a classe unidade_silenciosa para poder ser referenciado quando o usuário solicitar pegar referencia, mas esse tipo de referencia nao deve aparecer na paginacao do capítulo, lá no rodapé
+ if "math" in tag.get("class", []) and tag.name == "span":
+
+ if tag.parent and tag.parent.name == "span":
+
+ if tag.parent.get("id"):
+
+ tag.parent["class"] = tag.parent.get("class", []) + ["unidade_silenciosa"]
+
+ tag.parent["title"] = tag.parent["id"]
+
+ continue
+
+
+
+
+
+ # Se tiver as classes de teoremas de matemática, colocar unidade_silenciosa
+ if any(classe in tag.get("class", []) for classe in {"theorema", "lemma", "corollary", "proposition", "conjecture", "definition", "example", "exercise"}) and tag.name == "div":
+
+ if tag.get("id"):
+
+ tag["class"] = tag.parent.get("class", []) + ["unidade_silenciosa"]
+
+ tag["title"] = tag.parent["id"]
+
+ continue
+
+
+
+ # Coloca o conteudo dentro de uma div com id chamado de papel, substituindo o conteudo original da tag main pela div papel
+
+ # Crie uma div com id "papel"
+ div_papel = soup.new_tag('div', id='papel')
+
+ # Copie a tag main
+ main_content_copy = copy.copy(main_tag.contents)
+
+ # Limpe o conteúdo da tag
+ main_tag.clear()
+
+ # Adicione a cópia do conteúdo à div "papel"
+ for item_copy in main_content_copy:
+ div_papel.append(item_copy)
+
+ # Acrescentar a div_papel na tag main
+ main_tag.append(div_papel)
+
+ # Salva o arquivo HTML modificado
+ with open(arquivo_html, "w", encoding="utf-8") as f:
+
+ f.write(str(soup))
+
+ # Gravar os marcadores de referencia do livro em um arquivo JSON. ele esta na variavel ref_cap e essa informacao será útil para o leitor do livro poder entrar na busca digitar a referenci e obter o conteudo.
+ nome_arquivo = "ref_capitulos.json"
+
+ caminho_arquivo = os.path.join(pasta_livro_renderizado, nome_arquivo)
+
+ with open(caminho_arquivo, "w", encoding="utf-8") as arquivo_json:
+
+ json.dump(ref_cap, arquivo_json, ensure_ascii=False, indent=4)
\ No newline at end of file
diff --git a/_extensions/editoramoan/moan-livro/universidade-estadual-de-alagoas-abnt.csl b/_extensions/editoramoan/moan-livro/universidade-estadual-de-alagoas-abnt.csl
new file mode 100755
index 0000000..ee2fdf8
--- /dev/null
+++ b/_extensions/editoramoan/moan-livro/universidade-estadual-de-alagoas-abnt.csl
@@ -0,0 +1,744 @@
+
+
diff --git a/_extensions/editoramoan/moan-livro/zotero.org_styles_universidade-estadual-paulista-faculdade-de-engenharia-de-guaratingueta-abnt.csl b/_extensions/editoramoan/moan-livro/zotero.org_styles_universidade-estadual-paulista-faculdade-de-engenharia-de-guaratingueta-abnt.csl
new file mode 100755
index 0000000..0b83bb7
--- /dev/null
+++ b/_extensions/editoramoan/moan-livro/zotero.org_styles_universidade-estadual-paulista-faculdade-de-engenharia-de-guaratingueta-abnt.csl
@@ -0,0 +1,1036 @@
+
+
diff --git a/_quarto.yml b/_quarto.yml
new file mode 100755
index 0000000..598b745
--- /dev/null
+++ b/_quarto.yml
@@ -0,0 +1,293 @@
+project:
+ type: book
+ output-dir: propostas-didaticas-ensino-matematica
+ post-render: _extensions/editoramoan/moan-livro/preparacao-moan.py
+ preview:
+ port: 4000
+ browser: true
+filters:
+- lightbox
+lightbox: auto
+include-after-body:
+ text: '
+
+
+
+
+
+ '
+lang: pt-BR
+language:
+ toc-title-document: Neste capítulo
+ title-block-author-single: Organizador
+ title-block-author-plural: Organizadores
+number-sections: true
+crossref:
+ chapters: true
+controle-moan:
+ dicionario: false
+moan-dados:
+ ark: 68745/eM96D
+ título: Propostas didáticas para o ensino de Matemática
+ subtítulo: contribuições no âmbito do Pibid
+ formato: Livro Digital (online)
+ descrição: Descubra novas possibilidades no ensino de Matemática! Este livro apresenta
+ propostas didáticas que desafiam o paradigma tradicional e abrem espaço para a
+ criatividade e a dinamicidade em sala de aula. Sabemos que romper com o modelo
+ convencional de ensino pode ser intimidador para muitos professores. Dessa forma,
+ oferecemos uma alternativa valiosa ao ensino tradicional. Apresentamos propostas
+ dinâmicas e muitas delas com o uso de jogos — tanto os analógicos quanto os digitais
+ online, acessíveis por QR Code na versão impressa — como ferramentas pedagógicas.
+ Essas atividades lúdicas promovem o engajamento, a interação e a compreensão dos
+ conceitos matemáticos de forma envolvente e prazerosa. As propostas didáticas,
+ neste livro, foram desenvolvidas no Programa Institucional de Bolsas de Iniciação
+ à Docência (Pibid) por professores e acadêmicos dos cursos de Licenciatura em
+ Matemática da Unioeste, tanto do campus de Cascavel quanto do de Foz do Iguaçu,
+ Paraná. Explore novas possibilidade e renove a sua prática docente!
+ organizador: Arleni Elise Sella Langer, Adriana Schawabe Reis Lepreda, Dulcyene
+ Maria Ribeiro, Fabiana Magda Garcia Papani, Renata Camacho Bezerra, Richael Silva
+ Caetano
+ autor: Arleni Elise Sella Langer, Adriana Schawabe Reis Lepreda, Dulcyene Maria
+ Ribeiro, Fabiana Magda Garcia Papani, Renata Camacho Bezerra, Richael Silva Caetano,
+ Erika Diana Alves de Oliveira, Ricardo Mondini Ferrazza, Thamara Tobaldini, Luiza
+ Stunder, Eliza Bruna Dalla Corte Andreolla, Fernanda Guerra, Thais de Souza, Bruna
+ Eduarda Unser, Eduardo Rossoni Zeni, Ana Carolina Marques Pauluk, Ashley Esquitine
+ Fernandes Mello, Bruno Eduardo Duarte, Cassio Rafael Santos de Lima, Fabio Goulart
+ de Campos, Gabrielle Thais Werle, Hevila Maria Simonetti, Letícia Santiago Silva
+ e Patricia Alves de Oliveira, Janice Kunz Oenning
+ apoio-financeiro: Coordenação de Aperfeiçoamento de Pessoal de Nível Superior –
+ CAPES
+ realização: 'Programa Institucional de Bolsas de Iniciação à Docência - PIBID/Unioeste.
+ Rua Universitária, 1619 - Jardim Universitário - CEP 85819-100 - Cascavel-PR.
+ E-mail: pibid@unioeste.br'
+ apontamento: https://livro.online/propostas-didaticas-ensino-matematica
+ editora: Editora Moan
+ local: Foz do Iguaçu - PR, Brasil
+ edição: 1
+ editor responsável: Rafael Tavares Juliani
+ diagramador: Rafael Tavares Juliani
+ capista: Rafael Tavares Juliani
+ revisores: Rafael tavares juliani, Jorge Luiz Pereira, os organizadores
+ conselho-editorial: Rafael Tavares Juliani, Jorge Luiz Pereira, Carla Fernanda Sander Juliani
+ prefácio: Cristiane Antonia Hauchild Johann
+ palavras-chave: propostas didáticas, matemática, pibid, unioeste, jogos no ensino,
+ atividades lúdicas
+ área: Matemática – educação – método de ensino
+ cdd: '510.371.33'
+ ano da edição: 2023
+ data de publicação: 22/10/2023
+ idioma: Português do Brasil (pt-br)
+ país: Brasil
+ faixa etária: Acima de 18 anos
+ classificação indicativa: Livre para todos os públicos
+ ícones: Google Material Design
+ imagens-e-quadros: dos autores, onde não especificado
+ outros créditos: 'Na capa foram utilizadas as fontes Stolzl Light/Medium e Josefin
+ Sans Light; imagem (com alterações): Geometria, from The Seven Liberal Arts de
+ Johan Sadeler I, Maerten de Vos ca. 1570-1600 - Metropolitan Museum of Art'
+ isbn-versao-impressa: '9786585027052'
+ ark-versao-impressa: '68745/eM96D.77'
+ direitos-autorais: © 2023, Arleni Elise Sella Langer, Adriana Schawabe Reis Lepreda,
+ Dulcyene Maria Ribeiro, Fabiana Magda Garcia Papani, Renata Camacho Bezerra, Richael
+ Silva Caetano e a Editora Moan.
+ licenca: CC BY-NC-SA 4.0 Internacional
+ licenca-link: https://creativecommons.org/licenses/by-nc-sa/4.0/deed.pt_BR
+ licenca-img: https://upload.wikimedia.org/wikipedia/commons/4/4b/CC_BY-NC-SA.svg
+book:
+ isbn: 978-65-85027-05-2
+ google-analytics: G-G6VT93GC1X
+ cookie-consent:
+ palette: light
+ policy-url: "https://livro.online/politica-de-cookies-br"
+ language: pt
+ prefs-text: Preferências de cookie
+ search:
+ type: textbox
+ favicon: img/favicon.png
+ open-graph:
+ image: img/og.jpg
+ twitter-card:
+ image: img/og.jpg
+ title: Propostas didáticas para o ensino de Matemática
+ subtitle: contribuições no âmbito do Pibid
+ description: Descubra novas possibilidades no ensino de Matemática! Este livro apresenta
+ propostas didáticas que desafiam o paradigma tradicional e abrem espaço para a
+ criatividade e a dinamicidade em sala de aula. Sabemos que romper com o modelo
+ convencional de ensino pode ser intimidador para muitos professores. Dessa forma,
+ oferecemos uma alternativa valiosa ao ensino tradicional. Apresentamos propostas
+ dinâmicas e muitas delas com o uso de jogos — tanto os analógicos quanto os digitais
+ online, acessíveis por QR Code na versão impressa — como ferramentas pedagógicas.
+ Essas atividades lúdicas promovem o engajamento, a interação e a compreensão dos
+ conceitos matemáticos de forma envolvente e prazerosa. As propostas didáticas,
+ neste livro, foram desenvolvidas no Programa Institucional de Bolsas de Iniciação
+ à Docência (Pibid) por professores e acadêmicos dos cursos de Licenciatura em
+ Matemática da Unioeste, tanto do campus de Cascavel quanto do de Foz do Iguaçu,
+ Paraná. Explore novas possibilidade e renove a sua prática docente!
+ author:
+ - name: Arleni Elise Sella Langer
+ email: arlenisella@hotmail.com
+ affiliations:
+ - name: Universidade Estadual do Oeste do Paraná
+ city: Cascavel
+ state: PR
+ country: BR
+ role: Organizadora
+ - name: Adriana Schawabe Reis Lepreda
+ email: adrilepreda@gmail
+ affiliations:
+ - name: Universidade Estadual do Oeste do Paraná
+ city: Cascavel
+ state: PR
+ country: BR
+ role: Organizadora
+ - name: Dulcyene Maria Ribeiro
+ email: dulcyene.ribeiro@unioeste.br
+ affiliations:
+ - name: Universidade Estadual do Oeste do Paraná
+ city: Cascavel
+ state: PR
+ country: BR
+ role: Organizadora
+ - name: Fabiana Magda Garcia Papani
+ email: fabiana.papani@unioeste.br
+ affiliations:
+ - name: Universidade Estadual do Oeste do Paraná
+ city: Cascavel
+ state: PR
+ country: BR
+ role: Organizadora
+ - name: Renata Camacho Bezerra
+ email: renata.bezerra@unioeste.br
+ affiliations:
+ - name: Universidade Estadual do Oeste do Paraná
+ city: Foz do Iguaçu
+ state: PR
+ country: BR
+ role: Organizadora
+ - name: Richael Silva Caetano
+ email: richael.caetano@unioeste.br
+ affiliations:
+ - name: Universidade Estadual do Oeste do Paraná
+ city: Foz do Iguaçu
+ state: PR
+ country: BR
+ role: Organizador
+ compiler:
+ - name: Arleni Elise Sella Langer
+ email: arlenisella@hotmail.com
+ affiliations:
+ - name: Universidade Estadual do Oeste do Paraná
+ city: Cascavel
+ state: PR
+ country: BR
+ role: Organizadora
+ - name: Adriana Schawabe Reis Lepreda
+ email: adrilepreda@gmail
+ affiliations:
+ - name: Universidade Estadual do Oeste do Paraná
+ city: Cascavel
+ state: PR
+ country: BR
+ role: Organizadora
+ - name: Dulcyene Maria Ribeiro
+ email: dulcyene.ribeiro@unioeste.br
+ affiliations:
+ - name: Universidade Estadual do Oeste do Paraná
+ city: Cascavel
+ state: PR
+ country: BR
+ role: Organizadora
+ - name: Fabiana Magda Garcia Papani
+ email: fabiana.papani@unioeste.br
+ affiliations:
+ - name: Universidade Estadual do Oeste do Paraná
+ city: Cascavel
+ state: PR
+ country: BR
+ role: Organizadora
+ - name: Renata Camacho Bezerra
+ email: renata.bezerra@unioeste.br
+ affiliations:
+ - name: Universidade Estadual do Oeste do Paraná
+ city: Foz do Iguaçu
+ state: PR
+ country: BR
+ role: Organizadora
+ - name: Richael Silva Caetano
+ email: richael.caetano@unioeste.br
+ affiliations:
+ - name: Universidade Estadual do Oeste do Paraná
+ city: Foz do Iguaçu
+ state: PR
+ country: BR
+ role: Organizador
+ date: 10/22/2023
+ editor: Rafael Tavares Juliani
+ publisher: Editora Moan
+ publisher-place: Foz do Iguaçu - PR, Brasil
+ page-navigation: true
+ reader-mode: true
+ sharing:
+ - facebook
+ - linkedin
+ sidebar:
+ title: Propostas didáticas para o ensino de matemática
+ logo: img/capa.png
+ tools:
+ - icon: card-image
+ text: Capa Animada
+ href: img/CapaAnim.gif
+ - icon: bi bi-git
+ text: Alterações e Versões
+ href: https://gitea.livro.online/editoramoan/propostas-didaticas-ensino-matematica/commits/branch/main
+ - icon: envelope-open-heart
+ href: https://livro.online/doacao
+ text: Doar
+ - icon: printer-fill
+ href: index.html#versão-impressa
+ text: Versão Impressa
+ - icon: book-half
+ href: https://livro.online
+ text: Outros Livros
+ navbar:
+ logo: img/capa.png
+ logo-href: img/CapaAnim.gif
+ comments:
+ hypothesis:
+ theme: clean
+ openSidebar: false
+ chapters:
+ - index.qmd
+ - prefacio.qmd
+ - apresentacao.qmd
+ - part: 'Parte 1: propostas didáticas Pibid/Matemática/Cascavel'
+ chapters:
+ - contextualizando-propostas-didaticas-_pibid-matematica-cascavel.qmd
+ - numeros-inteiros.qmd
+ - jogos-no-ensino-de-equacoes.qmd
+ - atividades-ludicas-para-o-ensino-da-linguagem-algebrica.qmd
+ - uso-do-astrolabio-caseiro-no-ensino-da-trigonometria.qmd
+ - part: 'Parte 2: propostas didáticas Pibid/Matemática/Foz do Iguaçu'
+ chapters:
+ - jogos-no-para-o-ensino-de-fracoes-no-9-ano-do-ensino-fundamental.qmd
+citation: true
+bibliography: referencias.bib
+csl: _extensions/editoramoan/moan-livro/zotero.org_styles_universidade-estadual-paulista-faculdade-de-engenharia-de-guaratingueta-abnt.csl
+google-scholar: true
+format:
+ moan-livro-html:
+ theme:
+ light:
+ - cosmo
+ - _extensions/editoramoan/moan-livro/custom.scss
+ - css/moan.scss
+ dark:
+ - superhero
+ - _extensions/editoramoan/moan-livro/custom.scss
+ - css/moan.scss
+ number-sections: false
+ number-depth: 1
+ anchor-sections: false
+format-links: false
+fig-cap-location: top
diff --git a/_quarto_internal_scss_error.scss b/_quarto_internal_scss_error.scss
new file mode 100644
index 0000000..4e3c262
--- /dev/null
+++ b/_quarto_internal_scss_error.scss
@@ -0,0 +1,13647 @@
+// quarto-scss-analysis-annotation { "quarto-version": "1.6.39" }
+
+// quarto-scss-analysis-annotation { "origin": "'use' section from format" }
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+// quarto-scss-analysis-annotation { "origin": "'use' section from Quarto" }
+
+
+
+
+
+
+
+
+
+
+
+@use "sass:map" as listing-map;
+
+
+
+
+
+
+@use "sass:color" as quarto-color;
+@use "sass:map" as quarto-map;
+@use "sass:math" as quarto-math;
+
+
+// quarto-scss-analysis-annotation { "origin": "'use' section from user-defined SCSS" }
+
+
+
+// quarto-scss-analysis-annotation { "origin": "'functions' section from format" }
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+// Bootstrap functions
+//
+// Utility mixins and functions for evaluating source code across our variables, maps, and mixins.
+
+// Ascending
+// Used to evaluate Sass maps like our grid breakpoints.
+@mixin _assert-ascending($map, $map-name) {
+ $prev-key: null;
+ $prev-num: null;
+ @each $key, $num in $map {
+ @if $prev-num == null or unit($num) == "%" or unit($prev-num) == "%" {
+ // Do nothing
+ } @else if not comparable($prev-num, $num) {
+ @warn "Potentially invalid value for #{$map-name}: This map must be in ascending order, but key '#{$key}' has value #{$num} whose unit makes it incomparable to #{$prev-num}, the value of the previous key '#{$prev-key}' !";
+ } @else if $prev-num >= $num {
+ @warn "Invalid value for #{$map-name}: This map must be in ascending order, but key '#{$key}' has value #{$num} which isn't greater than #{$prev-num}, the value of the previous key '#{$prev-key}' !";
+ }
+ $prev-key: $key;
+ $prev-num: $num;
+ }
+}
+
+// Starts at zero
+// Used to ensure the min-width of the lowest breakpoint starts at 0.
+@mixin _assert-starts-at-zero($map, $map-name: "$grid-breakpoints") {
+ @if length($map) > 0 {
+ $values: map-values($map);
+ $first-value: nth($values, 1);
+ @if $first-value != 0 {
+ @warn "First breakpoint in #{$map-name} must start at 0, but starts at #{$first-value}.";
+ }
+ }
+}
+
+// Colors
+@function to-rgb($value) {
+ @return red($value), green($value), blue($value);
+}
+
+// stylelint-disable scss/dollar-variable-pattern
+@function rgba-css-var($identifier, $target) {
+ @if $identifier == "body" and $target == "bg" {
+ @return rgba(var(--#{$prefix}#{$identifier}-bg-rgb), var(--#{$prefix}#{$target}-opacity));
+ } @if $identifier == "body" and $target == "text" {
+ @return rgba(var(--#{$prefix}#{$identifier}-color-rgb), var(--#{$prefix}#{$target}-opacity));
+ } @else {
+ @return rgba(var(--#{$prefix}#{$identifier}-rgb), var(--#{$prefix}#{$target}-opacity));
+ }
+}
+
+@function map-loop($map, $func, $args...) {
+ $_map: ();
+
+ @each $key, $value in $map {
+ // allow to pass the $key and $value of the map as an function argument
+ $_args: ();
+ @each $arg in $args {
+ $_args: append($_args, if($arg == "$key", $key, if($arg == "$value", $value, $arg)));
+ }
+
+ $_map: map-merge($_map, ($key: call(get-function($func), $_args...)));
+ }
+
+ @return $_map;
+}
+// stylelint-enable scss/dollar-variable-pattern
+
+@function varify($list) {
+ $result: null;
+ @each $entry in $list {
+ $result: append($result, var(--#{$prefix}#{$entry}), space);
+ }
+ @return $result;
+}
+
+// Internal Bootstrap function to turn maps into its negative variant.
+// It prefixes the keys with `n` and makes the value negative.
+@function negativify-map($map) {
+ $result: ();
+ @each $key, $value in $map {
+ @if $key != 0 {
+ $result: map-merge($result, ("n" + $key: (-$value)));
+ }
+ }
+ @return $result;
+}
+
+// Get multiple keys from a sass map
+@function map-get-multiple($map, $values) {
+ $result: ();
+ @each $key, $value in $map {
+ @if (index($values, $key) != null) {
+ $result: map-merge($result, ($key: $value));
+ }
+ }
+ @return $result;
+}
+
+// Merge multiple maps
+@function map-merge-multiple($maps...) {
+ $merged-maps: ();
+
+ @each $map in $maps {
+ $merged-maps: map-merge($merged-maps, $map);
+ }
+ @return $merged-maps;
+}
+
+// Replace `$search` with `$replace` in `$string`
+// Used on our SVG icon backgrounds for custom forms.
+//
+// @author Kitty Giraudel
+// @param {String} $string - Initial string
+// @param {String} $search - Substring to replace
+// @param {String} $replace ('') - New value
+// @return {String} - Updated string
+@function str-replace($string, $search, $replace: "") {
+ $index: str-index($string, $search);
+
+ @if $index {
+ @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
+ }
+
+ @return $string;
+}
+
+// See https://codepen.io/kevinweber/pen/dXWoRw
+//
+// Requires the use of quotes around data URIs.
+
+@function escape-svg($string) {
+ @if str-index($string, "data:image/svg+xml") {
+ @each $char, $encoded in $escaped-characters {
+ // Do not escape the url brackets
+ @if str-index($string, "url(") == 1 {
+ $string: url("#{str-replace(str-slice($string, 6, -3), $char, $encoded)}");
+ } @else {
+ $string: str-replace($string, $char, $encoded);
+ }
+ }
+ }
+
+ @return $string;
+}
+
+// Color contrast
+// See https://github.com/twbs/bootstrap/pull/30168
+
+// A list of pre-calculated numbers of pow(divide((divide($value, 255) + .055), 1.055), 2.4). (from 0 to 255)
+// stylelint-disable-next-line scss/dollar-variable-default, scss/dollar-variable-pattern
+$_luminance-list: .0008 .001 .0011 .0013 .0015 .0017 .002 .0022 .0025 .0027 .003 .0033 .0037 .004 .0044 .0048 .0052 .0056 .006 .0065 .007 .0075 .008 .0086 .0091 .0097 .0103 .011 .0116 .0123 .013 .0137 .0144 .0152 .016 .0168 .0176 .0185 .0194 .0203 .0212 .0222 .0232 .0242 .0252 .0262 .0273 .0284 .0296 .0307 .0319 .0331 .0343 .0356 .0369 .0382 .0395 .0409 .0423 .0437 .0452 .0467 .0482 .0497 .0513 .0529 .0545 .0561 .0578 .0595 .0612 .063 .0648 .0666 .0685 .0704 .0723 .0742 .0762 .0782 .0802 .0823 .0844 .0865 .0887 .0908 .0931 .0953 .0976 .0999 .1022 .1046 .107 .1095 .1119 .1144 .117 .1195 .1221 .1248 .1274 .1301 .1329 .1356 .1384 .1413 .1441 .147 .15 .1529 .1559 .159 .162 .1651 .1683 .1714 .1746 .1779 .1812 .1845 .1878 .1912 .1946 .1981 .2016 .2051 .2086 .2122 .2159 .2195 .2232 .227 .2307 .2346 .2384 .2423 .2462 .2502 .2542 .2582 .2623 .2664 .2705 .2747 .2789 .2831 .2874 .2918 .2961 .3005 .305 .3095 .314 .3185 .3231 .3278 .3325 .3372 .3419 .3467 .3515 .3564 .3613 .3663 .3712 .3763 .3813 .3864 .3916 .3968 .402 .4072 .4125 .4179 .4233 .4287 .4342 .4397 .4452 .4508 .4564 .4621 .4678 .4735 .4793 .4851 .491 .4969 .5029 .5089 .5149 .521 .5271 .5333 .5395 .5457 .552 .5583 .5647 .5711 .5776 .5841 .5906 .5972 .6038 .6105 .6172 .624 .6308 .6376 .6445 .6514 .6584 .6654 .6724 .6795 .6867 .6939 .7011 .7084 .7157 .7231 .7305 .7379 .7454 .7529 .7605 .7682 .7758 .7835 .7913 .7991 .807 .8148 .8228 .8308 .8388 .8469 .855 .8632 .8714 .8796 .8879 .8963 .9047 .9131 .9216 .9301 .9387 .9473 .956 .9647 .9734 .9823 .9911 1;
+
+@function color-contrast($background, $color-contrast-dark: $color-contrast-dark, $color-contrast-light: $color-contrast-light, $min-contrast-ratio: $min-contrast-ratio) {
+ $foregrounds: $color-contrast-light, $color-contrast-dark, $white, $black;
+ $max-ratio: 0;
+ $max-ratio-color: null;
+
+ @each $color in $foregrounds {
+ $contrast-ratio: contrast-ratio($background, $color);
+ @if $contrast-ratio > $min-contrast-ratio {
+ @return $color;
+ } @else if $contrast-ratio > $max-ratio {
+ $max-ratio: $contrast-ratio;
+ $max-ratio-color: $color;
+ }
+ }
+
+ @warn "Found no color leading to #{$min-contrast-ratio}:1 contrast ratio against #{$background}...";
+
+ @return $max-ratio-color;
+}
+
+@function contrast-ratio($background, $foreground: $color-contrast-light) {
+ $l1: luminance($background);
+ $l2: luminance(opaque($background, $foreground));
+
+ @return if($l1 > $l2, divide($l1 + .05, $l2 + .05), divide($l2 + .05, $l1 + .05));
+}
+
+// Return WCAG2.1 relative luminance
+// See https://www.w3.org/TR/WCAG/#dfn-relative-luminance
+// See https://www.w3.org/TR/WCAG/#dfn-contrast-ratio
+@function luminance($color) {
+ $rgb: (
+ "r": red($color),
+ "g": green($color),
+ "b": blue($color)
+ );
+
+ @each $name, $value in $rgb {
+ $value: if(divide($value, 255) < .04045, divide(divide($value, 255), 12.92), nth($_luminance-list, $value + 1));
+ $rgb: map-merge($rgb, ($name: $value));
+ }
+
+ @return (map-get($rgb, "r") * .2126) + (map-get($rgb, "g") * .7152) + (map-get($rgb, "b") * .0722);
+}
+
+// Return opaque color
+// opaque(#fff, rgba(0, 0, 0, .5)) => #808080
+@function opaque($background, $foreground) {
+ @return mix(rgba($foreground, 1), $background, opacity($foreground) * 100%);
+}
+
+// scss-docs-start color-functions
+// Tint a color: mix a color with white
+@function tint-color($color, $weight) {
+ @return mix(white, $color, $weight);
+}
+
+// Shade a color: mix a color with black
+@function shade-color($color, $weight) {
+ @return mix(black, $color, $weight);
+}
+
+// Shade the color if the weight is positive, else tint it
+@function shift-color($color, $weight) {
+ @return if($weight > 0, shade-color($color, $weight), tint-color($color, -$weight));
+}
+// scss-docs-end color-functions
+
+// Return valid calc
+@function add($value1, $value2, $return-calc: true) {
+ @if $value1 == null {
+ @return $value2;
+ }
+
+ @if $value2 == null {
+ @return $value1;
+ }
+
+ @if type-of($value1) == number and type-of($value2) == number and comparable($value1, $value2) {
+ @return $value1 + $value2;
+ }
+
+ @return if($return-calc == true, calc(#{$value1} + #{$value2}), $value1 + unquote(" + ") + $value2);
+}
+
+@function subtract($value1, $value2, $return-calc: true) {
+ @if $value1 == null and $value2 == null {
+ @return null;
+ }
+
+ @if $value1 == null {
+ @return -$value2;
+ }
+
+ @if $value2 == null {
+ @return $value1;
+ }
+
+ @if type-of($value1) == number and type-of($value2) == number and comparable($value1, $value2) {
+ @return $value1 - $value2;
+ }
+
+ @if type-of($value2) != number {
+ $value2: unquote("(") + $value2 + unquote(")");
+ }
+
+ @return if($return-calc == true, calc(#{$value1} - #{$value2}), $value1 + unquote(" - ") + $value2);
+}
+
+@function divide($dividend, $divisor, $precision: 10) {
+ $sign: if($dividend > 0 and $divisor > 0 or $dividend < 0 and $divisor < 0, 1, -1);
+ $dividend: abs($dividend);
+ $divisor: abs($divisor);
+ @if $dividend == 0 {
+ @return 0;
+ }
+ @if $divisor == 0 {
+ @error "Cannot divide by 0";
+ }
+ $remainder: $dividend;
+ $result: 0;
+ $factor: 10;
+ @while ($remainder > 0 and $precision >= 0) {
+ $quotient: 0;
+ @while ($remainder >= $divisor) {
+ $remainder: $remainder - $divisor;
+ $quotient: $quotient + 1;
+ }
+ $result: $result * 10 + $quotient;
+ $factor: $factor * .1;
+ $remainder: $remainder * 10;
+ $precision: $precision - 1;
+ @if ($precision < 0 and $remainder >= $divisor * 5) {
+ $result: $result + 1;
+ }
+ }
+ $result: $result * $factor * $sign;
+ $dividend-unit: unit($dividend);
+ $divisor-unit: unit($divisor);
+ $unit-map: (
+ "px": 1px,
+ "rem": 1rem,
+ "em": 1em,
+ "%": 1%
+ );
+ @if ($dividend-unit != $divisor-unit and map-has-key($unit-map, $dividend-unit)) {
+ $result: $result * map-get($unit-map, $dividend-unit);
+ }
+ @return $result;
+}
+
+/////////////////////////////////////////////////////////////////
+// Color contrasting (backported to BS4 from BS5)
+// See https://github.com/twbs/bootstrap/pull/30168
+/////////////////////////////////////////////////////////////////
+
+// A list of pre-calculated numbers of pow(divide((divide($value, 255) + .055), 1.055), 2.4). (from 0 to 255)
+// stylelint-disable-next-line scss/dollar-variable-default, scss/dollar-variable-pattern
+$_luminance-list: .0008 .001 .0011 .0013 .0015 .0017 .002 .0022 .0025 .0027 .003 .0033 .0037 .004 .0044 .0048 .0052 .0056 .006 .0065 .007 .0075 .008 .0086 .0091 .0097 .0103 .011 .0116 .0123 .013 .0137 .0144 .0152 .016 .0168 .0176 .0185 .0194 .0203 .0212 .0222 .0232 .0242 .0252 .0262 .0273 .0284 .0296 .0307 .0319 .0331 .0343 .0356 .0369 .0382 .0395 .0409 .0423 .0437 .0452 .0467 .0482 .0497 .0513 .0529 .0545 .0561 .0578 .0595 .0612 .063 .0648 .0666 .0685 .0704 .0723 .0742 .0762 .0782 .0802 .0823 .0844 .0865 .0887 .0908 .0931 .0953 .0976 .0999 .1022 .1046 .107 .1095 .1119 .1144 .117 .1195 .1221 .1248 .1274 .1301 .1329 .1356 .1384 .1413 .1441 .147 .15 .1529 .1559 .159 .162 .1651 .1683 .1714 .1746 .1779 .1812 .1845 .1878 .1912 .1946 .1981 .2016 .2051 .2086 .2122 .2159 .2195 .2232 .227 .2307 .2346 .2384 .2423 .2462 .2502 .2542 .2582 .2623 .2664 .2705 .2747 .2789 .2831 .2874 .2918 .2961 .3005 .305 .3095 .314 .3185 .3231 .3278 .3325 .3372 .3419 .3467 .3515 .3564 .3613 .3663 .3712 .3763 .3813 .3864 .3916 .3968 .402 .4072 .4125 .4179 .4233 .4287 .4342 .4397 .4452 .4508 .4564 .4621 .4678 .4735 .4793 .4851 .491 .4969 .5029 .5089 .5149 .521 .5271 .5333 .5395 .5457 .552 .5583 .5647 .5711 .5776 .5841 .5906 .5972 .6038 .6105 .6172 .624 .6308 .6376 .6445 .6514 .6584 .6654 .6724 .6795 .6867 .6939 .7011 .7084 .7157 .7231 .7305 .7379 .7454 .7529 .7605 .7682 .7758 .7835 .7913 .7991 .807 .8148 .8228 .8308 .8388 .8469 .855 .8632 .8714 .8796 .8879 .8963 .9047 .9131 .9216 .9301 .9387 .9473 .956 .9647 .9734 .9823 .9911 1;
+
+@function color-contrast($background, $foregrounds: null) {
+
+ // These variables should be defined in _variables.scss, but we also
+ // define them here so that 3rd party libs can use if they want
+ // without polluting the global namespace
+ $black: #000 !default;
+ $white: #fff !default;
+ $color-contrast-dark: $black !default;
+ $color-contrast-light: $white !default;
+ $min-contrast-ratio: 3 !default;
+
+ @if $foregrounds == null {
+ $foregrounds: $color-contrast-light, $color-contrast-dark, $white, $black;
+ } @else {
+ $foregrounds: $foregrounds, $color-contrast-light, $color-contrast-dark, $white, $black;
+ }
+
+ $max-ratio: 0;
+ $max-ratio-color: null;
+
+ @each $color in $foregrounds {
+ $contrast-ratio: contrast-ratio($background, $color);
+ @if $contrast-ratio > $min-contrast-ratio {
+ @return $color;
+ } @else if $contrast-ratio > $max-ratio {
+ $max-ratio: $contrast-ratio;
+ $max-ratio-color: $color;
+ }
+ }
+
+ $color-contrast-warnings: false !default;
+ @if $color-contrast-warnings {
+ @warn "Found no color leading to #{$min-contrast-ratio}:1 contrast ratio against #{$background}...";
+ }
+
+ @return $max-ratio-color;
+}
+
+@function contrast-ratio($background, $foreground: $color-contrast-light) {
+ $l1: luminance($background);
+ $l2: luminance(opaque($background, $foreground));
+
+ @return if($l1 > $l2, divide($l1 + .05, $l2 + .05), divide($l2 + .05, $l1 + .05));
+}
+
+// Return WCAG2.0 relative luminance
+// See https://www.w3.org/WAI/GL/wiki/Relative_luminance
+// See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
+@function luminance($color) {
+ $rgb: (
+ "r": red($color),
+ "g": green($color),
+ "b": blue($color)
+ );
+
+ @each $name, $value in $rgb {
+ $value: if(divide($value, 255) < .04045, divide(divide($value, 255), 12.92), nth($_luminance-list, $value + 1));
+ $rgb: map-merge($rgb, ($name: $value));
+ }
+
+ @return (map-get($rgb, "r") * .2126) + (map-get($rgb, "g") * .7152) + (map-get($rgb, "b") * .0722);
+}
+
+// Return opaque color
+// opaque(#fff, rgba(0, 0, 0, .5)) => #808080
+@function opaque($background, $foreground) {
+ @return mix(rgba($foreground, 1), $background, opacity($foreground) * 100%);
+}
+
+// Added in BS5 as an alternative to the \ operator, which
+// throws warnings in Dart Sass
+// https://github.com/twbs/bootstrap/pull/34245
+@function divide($dividend, $divisor, $precision: 10) {
+ $sign: if($dividend > 0 and $divisor > 0 or $dividend < 0 and $divisor < 0, 1, -1);
+ $dividend: abs($dividend);
+ $divisor: abs($divisor);
+ @if $dividend == 0 {
+ @return 0;
+ }
+ @if $divisor == 0 {
+ @error "Cannot divide by 0";
+ }
+ $remainder: $dividend;
+ $result: 0;
+ $factor: 10;
+ @while ($remainder > 0 and $precision >= 0) {
+ $quotient: 0;
+ @while ($remainder >= $divisor) {
+ $remainder: $remainder - $divisor;
+ $quotient: $quotient + 1;
+ }
+ $result: $result * 10 + $quotient;
+ $factor: $factor * .1;
+ $remainder: $remainder * 10;
+ $precision: $precision - 1;
+ @if ($precision < 0 and $remainder >= $divisor * 5) {
+ $result: $result + 1;
+ }
+ }
+ $result: $result * $factor * $sign;
+ $dividend-unit: unit($dividend);
+ $divisor-unit: unit($divisor);
+ $unit-map: (
+ "px": 1px,
+ "rem": 1rem,
+ "em": 1em,
+ "%": 1%
+ );
+ @if ($dividend-unit != $divisor-unit and map-has-key($unit-map, $dividend-unit)) {
+ $result: $result * map-get($unit-map, $dividend-unit);
+ }
+ @return $result;
+}
+
+
+// quarto-scss-analysis-annotation { "origin": "'functions' section from Quarto" }
+
+
+
+
+
+// Our website navbar implementation will shift the body down
+// to accomodate the navbar, but the height is variable. As a result
+// we compute the height using JS, so it is perfect. This can lead to
+// a content jump when the js executes, so place a padding there at render
+// time to minimize this.
+@function navbar-default-offset($theme) {
+ $offsets: (
+ darkly: 82px,
+ flatly: 82px,
+ litera: 67px,
+ lumen: 68px,
+ lux: 105px,
+ materia: 96px,
+ pulse: 89px,
+ quartz: 82px,
+ sandstone: 63px,
+ simplex: 80px,
+ sketchy: 68px,
+ slate: 66px,
+ zephyr: 76px,
+ );
+
+ $val: null;
+ @if ($theme != null) {
+ $val: quarto-map.get($offsets, $theme);
+ }
+
+ @if ($val != null) {
+ @return $val;
+ } @else {
+ @return 64px;
+ }
+}
+
+
+
+
+
+
+@function listing-override-value($theme, $varname, $default) {
+ // These will be defined in bootstrap, but creating values here
+ // That will make this function accessible to callers prior to bootstrap variables
+ // being set
+ $black: rgb(0, 0, 0) !default;
+ $white: rgb(255, 255, 255) !default;
+ $gray-300: #dee2e6 !default;
+ $gray-500: #adb5bd !default;
+ $gray-600: #6c757d !default;
+ $blue: #0d6efd !default;
+
+ $theme-overrides: (
+ cyborg: (
+ category-border: solid $gray-500 1px,
+ category-color: $gray-500,
+ form-background-color: $body-bg,
+ form-color: $body-color,
+ input-group-border: solid $text-muted 1px,
+ input-group-border-radius: $border-radius,
+ ),
+ darkly: (
+ form-background-color: $body-bg,
+ form-color: $body-color,
+ category-border: solid $gray-600 1px,
+ category-color: $gray-600,
+ ),
+ materia: (
+ input-text-margin: 0 0.5em 0 0,
+ ),
+ quartz: (
+ category-color: $gray-300,
+ input-text-placeholder-color: $gray-500,
+ ),
+ slate: (
+ category-border: solid $gray-600 1px,
+ category-color: $gray-600,
+ form-background-color: $body-bg,
+ form-color: $body-color,
+ input-text-background-color: $body-bg,
+ input-text-color: $body-color,
+ input-group-border: solid $gray-600 1px,
+ ),
+ solar: (
+ input-group-border: solid $gray-600 1px,
+ category-color: $body-color,
+ category-border: solid $body-color 1px,
+ ),
+ superhero: (
+ input-text-background-color: $body-bg,
+ input-text-color: $body-color,
+ input-group-border: solid $gray-600 1px,
+ category-color: $gray-600,
+ category-border: solid $gray-600 1px,
+ ),
+ vapor: (
+ category-border: solid $text-muted 1px,
+ input-group-border: solid $text-muted 1px,
+ ),
+ );
+
+ $val: null;
+ @if ($theme != null) {
+ $theme-vals: listing-map.get($theme-overrides, $theme);
+ @if ($theme-vals != null) {
+ $val: listing-map.get($theme-vals, $varname);
+ }
+ }
+
+ @if ($val != null) {
+ @return $val;
+ } @else {
+ @return $default;
+ }
+}
+
+/*-- scss:variables --*/
+
+// Since we use these colors, we need to ensure that they
+// are defined (for example, if no theme is specified)
+$gray-300: #dee2e6 !default;
+$gray-500: #adb5bd !default;
+$gray-600: #6c757d !default;
+$gray-600: #6c757d !default;
+$gray-800: #343a40 !default;
+
+$card-cap-bg: rgba($gray-800, 0.25) !default;
+
+$border-color: $gray-300 !default;
+$border-radius: 0.25rem !default;
+$border-radius-sm: 0.2em !default;
+
+$text-muted: $gray-600 !default;
+
+$theme-name: null !default;
+
+
+
+
+
+
+@function colorToRGB($color) {
+ @return "rgb(" + red($color) + ", " + green($color) + ", " + blue($color) +
+ ")";
+}
+
+@function colorToRGBA($color) {
+ @return "rgba(" + red($color) + ", " + green($color) + ", " + blue($color) +
+ ", " + alpha($color) + ")";
+}
+
+@function str-replace($string, $search, $replace: "") {
+ $index: str-index($string, $search);
+ @if $index {
+ @return str-slice($string, 1, $index - 1) + $replace +
+ str-replace(
+ str-slice($string, $index + str-length($search)),
+ $search,
+ $replace
+ );
+ }
+ @return $string;
+}
+
+// Dims a color (either making it more white or more black)
+@function theme-dim($baseColor, $amount) {
+ @if (tone($baseColor) == "dark") {
+ @return lighten($baseColor, $amount);
+ } @else {
+ @return darken($baseColor, $amount);
+ }
+}
+
+// Provides a contrast color for a given color
+// The color is the starting color that will used to form a contrasting color
+// The bgColor is the color that will be used to test contrast (e.g. the color
+// will be shifted until its contrast against the bgColor is acceptable)
+@function theme-contrast($color, $bgColor, $level: "AAA") {
+ // These will be defined in bootstrap, but creating values here
+ // That will make this function accessible to callers prior to bootstrap variables
+ // being set
+ $black: rgb(0, 0, 0) !default;
+ $white: rgb(255, 255, 255) !default;
+
+ @if tone($bgColor) == "light" {
+ @return accessibleContrast($color, $black, $bgColor, $level);
+ } @else {
+ @return accessibleContrast($color, $white, $bgColor, $level);
+ }
+}
+
+@function accessibleContrast($startColor, $mixColor, $bgColor, $level: "AAA") {
+ // A: 3:1
+ // AA: 4.5:1
+ // AAA: 7:1
+ $goalContrastRatio: 3;
+ @if $level == "AA" {
+ $goalContrastRatio: 4.5;
+ } @else {
+ $goalContrastRatio: 7;
+ }
+
+ $percentMix: 100;
+ $contrastRatio: 0;
+ $contrastColor: null;
+ @while ($contrastRatio < $goalContrastRatio and $percentMix > 0) {
+ $contrastColor: mix(
+ $startColor,
+ $mixColor,
+ percentage(quarto-math.div($percentMix, 100))
+ );
+ $contrastRatio: quarto-contrast($contrastColor, $bgColor);
+ $percentMix: $percentMix - 1;
+ }
+
+ @return $contrastColor;
+}
+
+// Fades a color towards the background color
+@function theme-fade($baseColor, $backgroundColor, $amount) {
+ @if (tone($backgroundColor) == "dark") {
+ @return darken($baseColor, $amount);
+ } @else {
+ @return lighten($baseColor, $amount);
+ }
+}
+
+@function theme-highlight($baseColor, $backgroundColor, $amount) {
+ @if (tone($backgroundColor) == "dark") {
+ @return lighten($baseColor, $amount);
+ } @else {
+ @return darken($baseColor, $amount);
+ }
+}
+
+@function theme-override-value($theme, $varname, $default) {
+ // These will be defined in bootstrap, but creating values here
+ // That will make this function accessible to callers prior to bootstrap variables
+ // being set
+ $black: rgb(0, 0, 0) !default;
+ $white: rgb(255, 255, 255) !default;
+ $gray-500: #adb5bd !default;
+ $gray-300: #dee2e6 !default;
+ $blue: #0d6efd !default;
+
+ $simplex-border-mix: mix($white, $black, 93.5%) !default;
+
+ $theme-overrides: (
+ cerulean: (
+ navbar-fg: $white,
+ valuebox-bg-primary: #2fa4e7,
+ valuebox-bg-info: #3d9dd1,
+ valuebox-bg-success: #67a34d,
+ valuebox-bg-warning: #aa9208,
+ valuebox-bg-danger: #c48282,
+ ),
+ cosmo: (
+ navbar-bg:
+ if(
+ $default == #2780e3,
+ if(variable-exists(light), $light, $gray-500),
+ $default
+ ),
+ link-color: #2761e3,
+ valuebox-bg-primary: #5397e9,
+ valuebox-bg-info: #9954bbb3,
+ valuebox-bg-success: #3aa716,
+ valuebox-bg-warning: #fa6400,
+ valuebox-bg-danger: #ff0039b3,
+ ),
+ cyborg: (
+ navbar-bg:
+ if(
+ $default == #2a9fd6,
+ if(variable-exists(secondary), $secondary, $black),
+ $default
+ ),
+ navbar-hl: $white,
+ ),
+ darkly: (
+ navbar-fg: $gray-300,
+ navbar-hl: $white,
+ input-border-color: $gray-500,
+ ),
+ flatly: (
+ navbar-hl: $white,
+ valuebox-bg-primary: rgba(39, 128, 227, 0.7),
+ valuebox-bg-info: rgba(153, 84, 187, 0.7),
+ valuebox-bg-success: rgba(63, 182, 24, 0.7),
+ valuebox-bg-warning: rgba(255, 117, 24, 0.7),
+ valuebox-bg-danger: rgba(255, 0, 57, 0.7),
+ ),
+ journal: (
+ navbar-fg: rgba($white, 0.7),
+ navbar-hl: $white,
+ valuebox-bg-primary: #f0938f,
+ valuebox-bg-info: #3d9dd1,
+ valuebox-bg-success: #65a244,
+ valuebox-bg-warning: #ad9310,
+ valuebox-bg-danger: #c77f7f,
+ ),
+ litera: (
+ navbar-bg: if($default == #4582ec, $white, $default),
+ ),
+ lumen: (
+ navbar-fg: rgba($white, 0.7),
+ navbar-hl: $white,
+ valuebox-bg-primary: #67abcc,
+ valuebox-bg-info: #3d9dd1,
+ valuebox-bg-success: #5ea343,
+ valuebox-bg-warning: #a79011,
+ valuebox-bg-danger: #ca8181,
+ ),
+ lux: (),
+ materia: (
+ navbar-fg: rgba($white, 0.7),
+ navbar-hl: $white,
+ ),
+ minty: (
+ navbar-fg: $white,
+ ),
+ morph: (
+ navbar-bg:
+ if(
+ $default == #378dfc,
+ if(variable-exists(body-bg), $body-bg, $black),
+ $default
+ ),
+ navbar-fg: rgba($black, 0.5),
+ ),
+ paper: (
+ valuebox-bg-primary: #4396ea,
+ valuebox-bg-info: #c277cf,
+ valuebox-bg-success: #59a343,
+ valuebox-bg-warning: #d68100,
+ valuebox-bg-danger: #f46762,
+ ),
+ pulse: (
+ navbar-fg: rgba($white, 0.7),
+ navbar-hl: $white,
+ ),
+ quartz: (
+ navbar-fg: rgba($white, 0.8),
+ navbar-hl: $white,
+ ),
+ sandstone: (
+ navbar-bg:
+ if(
+ $default == #325d88,
+ if(variable-exists(dark), $dark, $black),
+ $default
+ ),
+ navbar-fg: rgba($white, 0.7),
+ navbar-hl: $white,
+ valuebox-bg-primary: #7b98ad,
+ valuebox-bg-info: #3d9dd1,
+ valuebox-bg-success: #60a545,
+ valuebox-bg-warning: #af8e08,
+ valuebox-bg-danger: #ca8181,
+ ),
+ simplex: (
+ navbar-bg: if($default == #d9230f, $white, $default),
+ navbar-fg: rgba($black, 0.6),
+ navbar-hl: $black,
+ nav-tabs-link-active-border-color: $simplex-border-mix $simplex-border-mix
+ transparent,
+ valuebox-bg-primary: #db766b,
+ valuebox-bg-info: #359ed0,
+ valuebox-bg-success: #59a343,
+ valuebox-bg-warning: #a59212,
+ valuebox-bg-danger: #c48282,
+ ),
+ sketchy: (
+ navbar-fg: $white,
+ ),
+ slate: (),
+ solar: (
+ navbar-bg:
+ if(
+ $default == #b58900,
+ if(variable-exists(dark), $dark, $black),
+ $default
+ ),
+ navbar-hl: $white,
+ ),
+ spacelab: (
+ navbar-bg:
+ if(
+ $default == #446e9b,
+ if(variable-exists(light), $light, #bbb),
+ $default
+ ),
+ navbar-hl: if(variable-exists(link-color), $link-color, $blue),
+ valuebox-bg-primary: #7e97ae,
+ valuebox-bg-info: #3d9dd1,
+ valuebox-bg-success: #62a540,
+ valuebox-bg-warning: #a59212,
+ valuebox-bg-danger: #c97e7e,
+ ),
+ superhero: (
+ navbar-bg:
+ if(
+ $default == #df6919,
+ if(variable-exists(dark), $dark, $black),
+ $default
+ ),
+ navbar-hl: $white,
+ ),
+ united: (
+ navbar-fg: rgba($white, 0.8),
+ navbar-hl: $white,
+ valuebox-bg-primary: #5c9bbc,
+ valuebox-bg-info: #3d9dd1,
+ valuebox-bg-success: #60a545,
+ valuebox-bg-warning: #9a9623,
+ valuebox-bg-danger: #c48282,
+ ),
+ vapor: (
+ navbar-fg: rgba($white, 0.8),
+ navbar-hl: $white,
+ ),
+ yeti: (),
+ zephyr: (),
+ );
+
+ $val: null;
+ @if ($theme != null) {
+ $theme-vals: quarto-map.get($theme-overrides, $theme);
+ @if ($theme-vals != null) {
+ $val: quarto-map.get($theme-vals, $varname);
+ }
+ }
+
+ @if ($val != null) {
+ @return $val;
+ } @else {
+ @return $default;
+ }
+}
+
+@function theme-navbar-bg($theme, $primary) {
+ $white: rgb(255, 255, 255) !default;
+
+ // These will be defined in bootstrap, but creating values here
+ // That will make this function accessible to callers prior to bootstrap variables
+ // being set
+ $theme-bgs: (
+ litera: $white,
+ cyborg: if(variable-exists(body-bg), $body-bg, #000),
+ );
+
+ $bg: quarto-map.get($theme-bgs, $theme);
+ @if ($bg != null) {
+ @return $bg;
+ } @else {
+ @return if(variable-exists(primary), $primary, #fff);
+ }
+}
+
+@function theme-navbar-fg($theme, $primary) {
+ $white: rgb(255, 255, 255) !default;
+
+ // These will be defined in bootstrap, but creating values here
+ // That will make this function accessible to callers prior to bootstrap variables
+ // being set
+ $theme-fgs: (
+ cerulean: $white,
+ );
+
+ $bg: quarto-map.get($theme-bgs, $theme);
+ @if ($bg != null) {
+ @return $bg;
+ } @else {
+ @return if(variable-exists(primary), $primary, #fff);
+ }
+}
+
+@function repeat-chars($chars, $n) {
+ $final: "";
+ @for $i from 1 through $n {
+ $final: $final + $chars;
+ }
+ @return $final;
+}
+
+@function _linear-channel-value($channel-value) {
+ $normalized-channel-value: quarto-math.div($channel-value, 255);
+ @if $normalized-channel-value < 0.03928 {
+ @return quarto-math.div($normalized-channel-value, 12.92);
+ }
+
+ @return quarto-math.pow(
+ quarto-math.div(($normalized-channel-value + 0.055), 1.055),
+ 2.4
+ );
+}
+
+// Calculate the luminance for a color.
+// See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
+@function luminance($color) {
+ $red: _linear-channel-value(quarto-color.red($color));
+ $green: _linear-channel-value(quarto-color.green($color));
+ $blue: _linear-channel-value(quarto-color.blue($color));
+
+ @return 0.2126 * $red + 0.7152 * $green + 0.0722 * $blue;
+}
+
+// Calculate the contrast ratio between two colors.
+// See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
+@function quarto-contrast($back, $front) {
+ $backLum: luminance($back) + 0.05;
+ $foreLum: luminance($front) + 0.05;
+
+ @return quarto-math.div(
+ quarto-math.max($backLum, $foreLum),
+ quarto-math.min($backLum, $foreLum)
+ );
+}
+
+// Determine whether the color is 'light' or 'dark'.
+@function tone($color) {
+ @if $color == "dark" or $color == "light" {
+ @return $color;
+ }
+
+ $minimumContrast: 3.1;
+
+ $lightContrast: quarto-contrast($color, white);
+ $darkContrast: quarto-contrast($color, rgba(black, 0.87));
+
+ @if ($lightContrast < $minimumContrast) and ($darkContrast > $lightContrast) {
+ @return "light";
+ } @else {
+ @return "dark";
+ }
+}
+
+// Determine whether to use dark or light text on top of given color to meet accessibility standards for contrast.
+// Returns 'dark' if the given color is light and 'light' if the given color is dark.
+@function contrast-tone($color) {
+ @return if(tone($color) == "dark", "light", "dark");
+}
+
+
+// quarto-scss-analysis-annotation { "origin": "'functions' section from user-defined SCSS" }
+
+
+
+// quarto-scss-analysis-annotation { "origin": "Defaults from user-defined SCSS" }
+
+$h2-font-size: 1.6rem !default;
+$headings-font-weight: 500 !default;
+$font-size-base: 1.1rem !default;
+
+
+/* TODO: Customize html appearance by setting SCSS variables */
+/* See https://quarto.org/docs/output-formats/html-themes.html#theme-options */
+
+$h2-font-size: 1.6rem !default;
+$headings-font-weight: 500 !default;
+$font-size-base: 1.1rem !default;
+
+
+// Heading font size customization
+$h1-font-size: 2rem !default;
+$h2-font-size: 1.65rem !default;
+$h3-font-size: 1.45rem !default;
+$h4-font-size: 1.25rem !default;
+$h5-font-size: 1.1rem !default;
+
+$kbd-padding-y: 0.4rem !default;
+$kbd-padding-x: 0.4rem !default;
+
+// Speed up the default transition for the navbar
+$transition-collapse: height 0.2s ease !default;
+
+// Adjust the base font size up a little
+$font-size-root: 17px !default;
+
+// Disable smooth scrolling
+$enable-smooth-scroll: false !default;
+
+// quarto-scss-analysis-annotation { "origin": "superhero (builtin theme)" }
+
+$theme: "superhero" !default;
+
+//
+// Color system
+//
+
+$white: #fff !default;
+$gray-100: #ebebeb !default;
+$gray-200: #dee2e6 !default;
+$gray-300: #ced4da !default;
+$gray-400: #adb5bd !default;
+$gray-500: #868e96 !default;
+$gray-600: #4e5d6c !default;
+$gray-700: #495057 !default;
+$gray-800: #343a40 !default;
+$gray-900: #212529 !default;
+$black: #000 !default;
+
+$blue: #4c9be8 !default;
+$indigo: #6610f2 !default;
+$purple: #6f42c1 !default;
+$pink: #e83e8c !default;
+$red: #d9534f !default;
+$orange: #df6919 !default;
+$yellow: #ffc107 !default;
+$green: #5cb85c !default;
+$teal: #20c997 !default;
+$cyan: #5bc0de !default;
+
+ // Body
+$body-bg: #0f2537 !default;
+$body-color: $gray-100 !default;
+
+@function body-mix($weight) {
+ @return mix($body-bg, $body-color, $weight);
+}
+
+$contrast-bg: color-contrast($body-bg) !default;
+$contrast-fg: color-contrast($contrast-bg) !default;
+
+$primary: $orange !default;
+$secondary: body-mix(80%) !default;
+$success: $green !default;
+$info: $cyan !default;
+$warning: $yellow !default;
+$danger: $red !default;
+$light: body-mix(48%) !default;
+$dark: body-mix(80%) !default;
+
+$min-contrast-ratio: 1.6 !default;
+
+// Components
+
+$border-radius: 0 !default;
+$border-radius-lg: 0 !default;
+$border-radius-sm: 0 !default;
+
+// Fonts
+
+// stylelint-disable-next-line value-keyword-case
+$font-family-sans-serif: Lato, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;
+
+$text-muted: rgba($contrast-bg, .4) !default;
+
+// Tables
+
+$table-accent-bg: rgba($contrast-bg, .05) !default;
+$table-hover-bg: rgba($contrast-bg, .075) !default;
+$table-border-color: rgba($contrast-fg, .15) !default;
+$table-head-bg: $light !default;
+$table-dark-bg: $light !default;
+$table-dark-border-color: body-mix(80%) !default;
+$table-dark-color: $body-bg !default;
+
+$table-bg-scale: 0% !default;
+
+// Forms
+
+$input-bg: $contrast-bg !default;
+$input-disabled-color: body-mix(80%) !default;
+$input-disabled-bg: $body-color !default;
+
+$input-color: $gray-900 !default;
+$input-border-color: transparent !default;
+$input-border-width: 0 !default;
+
+$input-placeholder-color: $gray-500 !default;
+
+$input-group-addon-color: $body-color !default;
+$input-group-addon-bg: body-mix(80%) !default;
+
+$form-select-disabled-bg: $input-disabled-bg !default;
+$form-select-disabled-color: $input-disabled-color !default;
+
+$form-check-input-bg: $contrast-bg !default;
+$form-check-input-border: none !default;
+
+$form-file-button-color: $input-group-addon-color !default;
+$form-file-button-bg: $input-group-addon-bg !default;
+$form-file-button-hover-bg: darken($form-file-button-bg, 5%) !default;
+
+$form-floating-label-opacity: 1 !default;
+
+// Dropdowns
+
+$dropdown-bg: body-mix(80%) !default;
+$dropdown-divider-bg: rgba($contrast-fg, .15) !default;
+$dropdown-link-color: $body-color !default;
+$dropdown-link-hover-color: $dropdown-link-color !default;
+$dropdown-link-hover-bg: $table-hover-bg !default;
+
+// Navs
+
+$nav-link-disabled-color: rgba(255, 255, 255, .4) !default;
+$nav-tabs-border-color: body-mix(80%) !default;
+$nav-tabs-link-active-color: $body-color !default;
+$nav-tabs-link-active-border-color: body-mix(80%) !default;
+
+// Navbar
+
+
+// Pagination
+
+$pagination-color: $contrast-bg !default;
+$pagination-bg: body-mix(80%) !default;
+$pagination-border-color: transparent !default;
+$pagination-hover-color: $contrast-bg !default;
+$pagination-hover-bg: $nav-link-disabled-color !default;
+$pagination-hover-border-color: $pagination-border-color !default;
+$pagination-disabled-color: $nav-link-disabled-color !default;
+$pagination-disabled-bg: $pagination-bg !default;
+$pagination-disabled-border-color: $pagination-border-color !default;
+
+// Cards
+
+$card-cap-bg: $table-hover-bg !default;
+$card-bg: body-mix(80%) !default;
+$card-inner-border-radius: 0 !default;
+
+// Accordion
+
+$accordion-bg: $card-bg !default;
+$accordion-border-width: 0 !default;
+$accordion-button-bg: $card-cap-bg !default;
+$accordion-button-active-bg: $primary !default;
+$accordion-button-active-color: $body-color !default;
+
+
+// Popovers
+
+$popover-bg: body-mix(80%) !default;
+$popover-header-bg: $table-hover-bg !default;
+
+// Toasts
+
+$toast-background-color: body-mix(80%) !default;
+$toast-border-color: rgba(0, 0, 0, .2) !default;
+$toast-header-color: $body-color !default;
+$toast-header-background-color: $toast-background-color !default;
+$toast-header-border-color: $toast-border-color !default;
+
+// Modals
+
+$modal-content-bg: body-mix(80%) !default;
+$modal-header-border-color: rgba(0, 0, 0, .2) !default;
+
+// Progress bars
+
+$progress-bg: body-mix(80%) !default;
+
+// List group
+
+$list-group-color: $contrast-bg !default;
+$list-group-bg: body-mix(80%) !default;
+$list-group-border-color: transparent !default;
+$list-group-hover-bg: $nav-link-disabled-color !default;
+$list-group-disabled-color: $nav-link-disabled-color !default;
+$list-group-action-color: $contrast-bg !default;
+$list-group-action-hover-color: $contrast-bg !default;
+
+// Breadcrumbs
+
+$breadcrumb-padding-y: .375rem !default;
+$breadcrumb-padding-x: .75rem !default;
+$breadcrumb-bg: body-mix(80%) !default;
+$breadcrumb-divider-color: $body-color !default;
+$breadcrumb-active-color: $body-color !default;
+
+// Close
+
+$btn-close-color: $contrast-bg !default;
+$btn-close-opacity: .5 !default;
+$btn-close-hover-opacity: 1 !default;
+
+// Code
+
+$pre-color: inherit !default;
+
+
+
+/*-- scss: functions --*/
+
+@function bannerColor() {
+ @if $title-banner-color {
+ @return $title-banner-color;
+ } @else {
+ @if variable-exists(navbar-fg) {
+ @return $navbar-fg;
+ } @else {
+ @return $body-bg;
+ }
+ }
+}
+
+@function bannerDim() {
+ @return theme-fade(bannerColor(), bannerBg(), 20%);
+}
+
+@function bannerBg() {
+ @if $title-banner-bg {
+ @return $title-banner-bg;
+ } @else {
+ // figure out default background, navbar of body color
+ @if variable-exists(navbar-bg) {
+ @return $navbar-bg;
+ } @else {
+ @return $body-color;
+ }
+ }
+}
+
+/*-- scss:variables --*/
+$title-banner-color: null !default;
+$title-banner-bg: null !default;
+$title-banner-image: null !default;
+
+
+$btn-code-copy-color: #f8f8f2 !default;
+$btn-code-copy-color-active: #ffa07a !default;
+
+// quarto-scss-analysis-annotation { "origin": "Defaults from Quarto's SCSS" }
+
+$code-copy-selector: "pre.sourceCode:hover > " !default;
+$code-white-space: pre !default;
+$tbl-cap-location: top !default;
+$sidebar-border: false !default;
+$sidebar-bg: if(variable-exists(body-bg), $body-bg, #fff) !default;
+// Default the theme name
+$theme-name: if(variable-exists(theme), $theme, "");
+
+// Colors that must be defined
+$blue: #0d6efd !default;
+$primary: $blue !default;
+$white: #ffffff !default;
+$gray-200: #e9ecef !default;
+$gray-100: #f8f9fa !default;
+$gray-900: #212529 !default;
+// Pending SCSS change until Charles clears it with us
+// $link-color: theme-override-value($theme-name, "link-color", $primary) !default;
+//
+$link-color: $primary !default;
+$link-color: if(
+ $link-color == $blue,
+ theme-override-value($theme-name, "link-color", $link-color),
+ $link-color
+);
+$link-color-bg: transparent !default;
+
+/* Code Block Formatting */
+// Code Block Border Treatment
+$code-block-border-left: false !default;
+$code-block-border-left-style: solid !default;
+$code-block-border-left-size: 3px !default;
+$code-block-padding-left: 0.6em !default;
+
+// Code Block Background Treatment
+// $code-block-bg, $code-block-bg-padding, $code-block-bg-alpha
+$code-block-bg: true !default;
+$code-block-bg-padding: 0.4em !default;
+$code-block-bg-alpha: -0.35 !default;
+
+// Controls when the code block will switch to a dark
+// version of a theme
+$code-block-theme-dark-threshhold: 40% !default;
+
+/* Inline Code Formatting */
+// $code-bg, $code-color, $code-padding
+$code-color: #7d12ba !default;
+
+// Set a default body emphasis color
+$code-bg: $gray-100 !default;
+
+// toc variables
+$toc-color: $link-color !default;
+$toc-font-size: 0.875rem !default;
+$toc-active-border: $toc-color !default;
+$toc-inactive-border: $gray-200 !default;
+
+$toc-tools-font-size: 0.8rem !default;
+
+/* Callout customization */
+// Formatting
+$callout-border-width: 5px !default;
+$callout-border-scale: 0% !default;
+$callout-icon-scale: 10% !default;
+$callout-margin-top: 1.25rem !default;
+$callout-margin-bottom: 1.25rem !default;
+
+// Navbar
+$navbar-default: if(
+ variable-exists(theme),
+ if(variable-exists(primary), $primary, #517699),
+ #517699
+);
+
+// If the user provides a navbar-bg, we ned to ignore the
+// theme overide and just recalculate a good value
+$navbar-hl-override: if(
+ variable-exists(navbar-bg) and variable-exists(link-color),
+ theme-contrast($link-color, $navbar-bg),
+ false
+);
+$navbar-bg: theme-override-value(
+ $theme-name,
+ "navbar-bg",
+ $navbar-default
+) !default;
+
+$btn-bg: if(variable-exists(secondary), $secondary, #6c757d) !default;
+$btn-fg: theme-contrast($btn-bg, $btn-bg) !default;
+
+$body-contrast-bg: if(variable-exists(body-bg), $body-bg, $white);
+$body-contrast-color: if(variable-exists(body-color), $body-color, $gray-900);
+$navbar-fg: if(
+ $navbar-bg == transparent,
+ theme-override-value(
+ $theme-name,
+ "navbar-fg",
+ theme-contrast($body-contrast-color, $body-contrast-bg)
+ ),
+ theme-override-value(
+ $theme-name,
+ "navbar-fg",
+ theme-contrast($navbar-bg, $navbar-bg)
+ )
+) !default;
+
+$navbar-hl: if(
+ $navbar-hl-override != false,
+ $navbar-hl-override,
+ theme-override-value(
+ $theme-name,
+ "navbar-hl",
+ if(
+ variable-exists(link-color),
+ theme-contrast($link-color, $navbar-bg),
+ $navbar-fg
+ )
+ )
+) !default;
+$navbar-brand: theme-override-value(
+ $theme-name,
+ "navbar-brand",
+ $navbar-fg
+) !default;
+$navbar-brand-hl: theme-override-value(
+ $theme-name,
+ "navbar-brand-hl",
+ $navbar-hl
+) !default;
+
+$navbar-toggler-icon-bg: url("data:image/svg+xml,") !default;
+$navbar-toggler-border-color: rgba($navbar-fg, 0) !default;
+$navbar-hover-color: rgba($navbar-hl, 0.8) !default;
+$navbar-disabled-color: rgba($navbar-fg, 0.75) !default;
+$navbar-toggler-padding-x: 0 !default;
+$navbar-toggler-padding-y: 0.25 !default;
+
+// We omit the !default here b/c the dark and light variants
+// are not meaningful in our usage of bootstrap. Instead, we will explicitly
+// manage these using the above documented variables
+$navbar-dark-bg: $navbar-bg;
+$navbar-dark-color: $navbar-fg;
+$navbar-dark-hover-color: $navbar-hover-color;
+$navbar-dark-active-color: $navbar-hl;
+$navbar-dark-disabled-color: $navbar-disabled-color;
+$navbar-dark-toggler-icon-bg: $navbar-toggler-icon-bg;
+$navbar-dark-toggler-border-color: $navbar-toggler-border-color;
+
+$navbar-light-bg: $navbar-bg;
+$navbar-light-color: $navbar-fg;
+$navbar-light-hover-color: $navbar-hover-color;
+$navbar-light-active-color: $navbar-hl;
+$navbar-light-disabled-color: $navbar-disabled-color;
+$navbar-light-toggler-icon-bg: $navbar-toggler-icon-bg;
+$navbar-light-toggler-border-color: $navbar-toggler-border-color;
+
+$navbar-light-brand-color: $navbar-brand;
+$navbar-light-brand-hover-color: $navbar-brand-hl;
+$navbar-dark-brand-color: $navbar-brand;
+$navbar-dark-brand-hover-color: $navbar-brand-hl;
+
+// Sidebar coloring
+$sidebar-bg: if(variable-exists(light), $light, #fff) !default;
+$sidebar-fg: null !default;
+@if $sidebar-bg == transparent {
+ $sidebar-fg: theme-contrast($body-contrast-color, $body-contrast-bg) !default;
+} @else {
+ $sidebar-fg: theme-contrast($sidebar-bg, $sidebar-bg) !default;
+}
+$sidebar-hl: null;
+$sidebar-font-size: 0.925rem !default;
+$sidebar-font-size-section: 0.875rem !default;
+$sidebar-font-size-collapse: 1rem !default;
+$sidebar-font-size-section-collapse: 1.1rem !default;
+$sidebar-border: false !default;
+
+// Title block variables
+$title-block-color: $body-contrast-color !default;
+$title-block-contast-color: $body-contrast-bg !default;
+$title-block-padding-top: 2.5em !default;
+
+// Footer coloring
+$footer-bg: if(variable-exists(body-bg), $body-bg, #fff) !default;
+$footer-fg: theme-contrast($footer-bg, $footer-bg, "AA") !default;
+$footer-font-size: 0.825em !default;
+$footer-left-font-size: $footer-font-size !default;
+$footer-center-font-size: $footer-font-size !default;
+$footer-right-font-size: $footer-font-size !default;
+
+// Disable default grid system and switch to CSS grid
+$enable-grid-classes: false;
+$enable-cssgrid: true;
+
+$zindex-pagelayout: 998;
+
+$popover-bg: if(variable-exists(body-bg), $body-bg, null) !default;
+$input-bg: if(variable-exists(body-bg), $body-bg, null) !default;
+
+// Note that 'default' is intentionally omitted from this
+// because we're using the default value if one is defined at this
+// point (the if variable exists check in the default).
+// This is a change to override the input border color for
+// darkly, which sets the border color to the body color for
+// whatever reason.
+$input-border-color: theme-override-value(
+ $theme-name,
+ "input-border-color",
+ if(variable-exists(input-border-color), $input-border-color, null)
+);
+
+// Same as above (default is respected if there is not override
+// so the `!default` keyword is omitted). Some themes don't provide
+// active tab border colors and they customize the main border
+// color which results in the tabs looking slightly weird since the
+// colors may not match (for example, simplex).
+$nav-tabs-link-active-border-color: theme-override-value(
+ $theme-name,
+ "nav-tabs-link-active-border-color",
+ if(
+ variable-exists(nav-tabs-link-active-border-color),
+ $nav-tabs-link-active-border-color,
+ null
+ )
+);
+
+/* GRID VARIABLES */
+// The left hand sidebar
+$grid-sidebar-width: 250px !default;
+// The main body
+$grid-body-width: 800px !default;
+// The right hand margin bar
+$grid-margin-width: 250px !default;
+// The gutter that appears between the above columns
+$grid-column-gutter-width: 1.5em !default;
+
+/* CODE ANNOTATION COLORS */
+$code-annotation-higlight-color: #aaaaaa44 !default;
+$code-annotation-higlight-bg: #aaaaaa22 !default;
+
+$breadcrumb-divider: quote(">") !default;
+
+// table variable overrides
+$table-group-separator-color: mix(
+ if(variable-exists(body-color), $body-color, $gray-900),
+ $body-contrast-bg,
+ 50%
+) !default;
+$table-group-separator-color-lighter: mix(
+ if(variable-exists(body-color), $body-color, $gray-900),
+ $body-contrast-bg,
+ 20%
+) !default;
+
+$bootstrap-version: 5;
+
+$h1h2h3-font-weight: 600 !default;
+
+// variables required by _brand.yml
+
+// these variables need to have been defined here already
+// and are repeated in the framework's own _variables.scss
+// This will require us to monitor framework changes
+// to avoid drift
+$font-weight-base: 400 !default;
+$small-font-size: 0.875em !default;
+$code-font-size: $small-font-size !default;
+$font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas,
+ "Liberation Mono", "Courier New", monospace !default;
+
+$font-family-monospace-block: $font-family-monospace !default;
+$font-family-monospace-inline: $font-family-monospace !default;
+$font-weight-monospace: $font-weight-base !default;
+$font-weight-monospace-block: $font-weight-monospace !default;
+$font-weight-monospace-inline: $font-weight-monospace !default;
+$code-block-font-size: $code-font-size !default;
+$code-inline-font-size: $code-font-size !default;
+$link-weight: $font-weight-base !default;
+$link-decoration: null !default;
+
+// border colors
+$border-color: mix(
+ if(variable-exists(body-color), $body-color, #fff),
+ $body-contrast-bg,
+ 30%
+) !default;
+$table-border-color: $border-color !default;
+
+// code block colors
+$btn-code-copy-color: if(
+ variable-exists(text-muted),
+ $text-muted,
+ if(variable-exists(body-color), $body-color, $gray-900)
+) !default;
+
+$btn-code-copy-color-active: if(
+ variable-exists(link-color),
+ $link-color,
+ #0d6efd
+) !default;
+
+
+
+
+
+
+
+
+$dashboard-card-toolbar-top-margin: 6px !default;
+
+
+$quarto-navbar-search-input-width: 180px !default;
+$quarto-sidebar-search-input-width: 100% !default;
+$quarto-search-results-width: 400px !default;
+
+$quarto-search-collapse-icon-size: 26px !default;
+
+
+$content-padding-top: 14px !default;
+$sidebar-glass-bg: #66666666 !default;
+$sidebar-anim-duration: 0.15s !default;
+
+$navbar-toggle-position: left !default;
+
+$navbar-toggler-order: if($navbar-toggle-position == "left", 1, 4) !default;
+$navbar-title-order: if($navbar-toggle-position == "left", 2, 1) !default;
+$navbar-search-order: if($navbar-toggle-position == "left", 4, 3) !default;
+$navbar-tools-order: if($navbar-toggle-position == "left", 3, 2) !default;
+$navbar-menu-order: if($navbar-toggle-position == "left", 20, 20) !default;
+
+
+
+
+
+
+// quarto-scss-analysis-annotation { "origin": "Defaults from the format SCSS" }
+
+// Variables
+//
+// Variables should follow the `$component-state-property-size` formula for
+// consistent naming. Ex: $nav-link-disabled-color and $modal-content-box-shadow-xs.
+
+// Color system
+
+// scss-docs-start gray-color-variables
+$white: #fff !default;
+$gray-100: #f8f9fa !default;
+$gray-200: #e9ecef !default;
+$gray-300: #dee2e6 !default;
+$gray-400: #ced4da !default;
+$gray-500: #adb5bd !default;
+$gray-600: #6c757d !default;
+$gray-700: #495057 !default;
+$gray-800: #343a40 !default;
+$gray-900: #212529 !default;
+$black: #000 !default;
+// scss-docs-end gray-color-variables
+
+// fusv-disable
+// scss-docs-start gray-colors-map
+$grays: (
+ "100": $gray-100,
+ "200": $gray-200,
+ "300": $gray-300,
+ "400": $gray-400,
+ "500": $gray-500,
+ "600": $gray-600,
+ "700": $gray-700,
+ "800": $gray-800,
+ "900": $gray-900
+) !default;
+// scss-docs-end gray-colors-map
+// fusv-enable
+
+// scss-docs-start color-variables
+$blue: #0d6efd !default;
+$indigo: #6610f2 !default;
+$purple: #6f42c1 !default;
+$pink: #d63384 !default;
+$red: #dc3545 !default;
+$orange: #fd7e14 !default;
+$yellow: #ffc107 !default;
+$green: #198754 !default;
+$teal: #20c997 !default;
+$cyan: #0dcaf0 !default;
+// scss-docs-end color-variables
+
+// scss-docs-start colors-map
+$colors: (
+ "blue": $blue,
+ "indigo": $indigo,
+ "purple": $purple,
+ "pink": $pink,
+ "red": $red,
+ "orange": $orange,
+ "yellow": $yellow,
+ "green": $green,
+ "teal": $teal,
+ "cyan": $cyan,
+ "black": $black,
+ "white": $white,
+ "gray": $gray-600,
+ "gray-dark": $gray-800
+) !default;
+// scss-docs-end colors-map
+
+// The contrast ratio to reach against white, to determine if color changes from "light" to "dark". Acceptable values for WCAG 2.0 are 3, 4.5 and 7.
+// See https://www.w3.org/TR/WCAG20/#visual-audio-contrast-contrast
+$min-contrast-ratio: 4.5 !default;
+
+// Customize the light and dark text colors for use in our color contrast function.
+$color-contrast-dark: $black !default;
+$color-contrast-light: $white !default;
+
+// fusv-disable
+$blue-100: tint-color($blue, 80%) !default;
+$blue-200: tint-color($blue, 60%) !default;
+$blue-300: tint-color($blue, 40%) !default;
+$blue-400: tint-color($blue, 20%) !default;
+$blue-500: $blue !default;
+$blue-600: shade-color($blue, 20%) !default;
+$blue-700: shade-color($blue, 40%) !default;
+$blue-800: shade-color($blue, 60%) !default;
+$blue-900: shade-color($blue, 80%) !default;
+
+$indigo-100: tint-color($indigo, 80%) !default;
+$indigo-200: tint-color($indigo, 60%) !default;
+$indigo-300: tint-color($indigo, 40%) !default;
+$indigo-400: tint-color($indigo, 20%) !default;
+$indigo-500: $indigo !default;
+$indigo-600: shade-color($indigo, 20%) !default;
+$indigo-700: shade-color($indigo, 40%) !default;
+$indigo-800: shade-color($indigo, 60%) !default;
+$indigo-900: shade-color($indigo, 80%) !default;
+
+$purple-100: tint-color($purple, 80%) !default;
+$purple-200: tint-color($purple, 60%) !default;
+$purple-300: tint-color($purple, 40%) !default;
+$purple-400: tint-color($purple, 20%) !default;
+$purple-500: $purple !default;
+$purple-600: shade-color($purple, 20%) !default;
+$purple-700: shade-color($purple, 40%) !default;
+$purple-800: shade-color($purple, 60%) !default;
+$purple-900: shade-color($purple, 80%) !default;
+
+$pink-100: tint-color($pink, 80%) !default;
+$pink-200: tint-color($pink, 60%) !default;
+$pink-300: tint-color($pink, 40%) !default;
+$pink-400: tint-color($pink, 20%) !default;
+$pink-500: $pink !default;
+$pink-600: shade-color($pink, 20%) !default;
+$pink-700: shade-color($pink, 40%) !default;
+$pink-800: shade-color($pink, 60%) !default;
+$pink-900: shade-color($pink, 80%) !default;
+
+$red-100: tint-color($red, 80%) !default;
+$red-200: tint-color($red, 60%) !default;
+$red-300: tint-color($red, 40%) !default;
+$red-400: tint-color($red, 20%) !default;
+$red-500: $red !default;
+$red-600: shade-color($red, 20%) !default;
+$red-700: shade-color($red, 40%) !default;
+$red-800: shade-color($red, 60%) !default;
+$red-900: shade-color($red, 80%) !default;
+
+$orange-100: tint-color($orange, 80%) !default;
+$orange-200: tint-color($orange, 60%) !default;
+$orange-300: tint-color($orange, 40%) !default;
+$orange-400: tint-color($orange, 20%) !default;
+$orange-500: $orange !default;
+$orange-600: shade-color($orange, 20%) !default;
+$orange-700: shade-color($orange, 40%) !default;
+$orange-800: shade-color($orange, 60%) !default;
+$orange-900: shade-color($orange, 80%) !default;
+
+$yellow-100: tint-color($yellow, 80%) !default;
+$yellow-200: tint-color($yellow, 60%) !default;
+$yellow-300: tint-color($yellow, 40%) !default;
+$yellow-400: tint-color($yellow, 20%) !default;
+$yellow-500: $yellow !default;
+$yellow-600: shade-color($yellow, 20%) !default;
+$yellow-700: shade-color($yellow, 40%) !default;
+$yellow-800: shade-color($yellow, 60%) !default;
+$yellow-900: shade-color($yellow, 80%) !default;
+
+$green-100: tint-color($green, 80%) !default;
+$green-200: tint-color($green, 60%) !default;
+$green-300: tint-color($green, 40%) !default;
+$green-400: tint-color($green, 20%) !default;
+$green-500: $green !default;
+$green-600: shade-color($green, 20%) !default;
+$green-700: shade-color($green, 40%) !default;
+$green-800: shade-color($green, 60%) !default;
+$green-900: shade-color($green, 80%) !default;
+
+$teal-100: tint-color($teal, 80%) !default;
+$teal-200: tint-color($teal, 60%) !default;
+$teal-300: tint-color($teal, 40%) !default;
+$teal-400: tint-color($teal, 20%) !default;
+$teal-500: $teal !default;
+$teal-600: shade-color($teal, 20%) !default;
+$teal-700: shade-color($teal, 40%) !default;
+$teal-800: shade-color($teal, 60%) !default;
+$teal-900: shade-color($teal, 80%) !default;
+
+$cyan-100: tint-color($cyan, 80%) !default;
+$cyan-200: tint-color($cyan, 60%) !default;
+$cyan-300: tint-color($cyan, 40%) !default;
+$cyan-400: tint-color($cyan, 20%) !default;
+$cyan-500: $cyan !default;
+$cyan-600: shade-color($cyan, 20%) !default;
+$cyan-700: shade-color($cyan, 40%) !default;
+$cyan-800: shade-color($cyan, 60%) !default;
+$cyan-900: shade-color($cyan, 80%) !default;
+
+$blues: (
+ "blue-100": $blue-100,
+ "blue-200": $blue-200,
+ "blue-300": $blue-300,
+ "blue-400": $blue-400,
+ "blue-500": $blue-500,
+ "blue-600": $blue-600,
+ "blue-700": $blue-700,
+ "blue-800": $blue-800,
+ "blue-900": $blue-900
+) !default;
+
+$indigos: (
+ "indigo-100": $indigo-100,
+ "indigo-200": $indigo-200,
+ "indigo-300": $indigo-300,
+ "indigo-400": $indigo-400,
+ "indigo-500": $indigo-500,
+ "indigo-600": $indigo-600,
+ "indigo-700": $indigo-700,
+ "indigo-800": $indigo-800,
+ "indigo-900": $indigo-900
+) !default;
+
+$purples: (
+ "purple-100": $purple-100,
+ "purple-200": $purple-200,
+ "purple-300": $purple-300,
+ "purple-400": $purple-400,
+ "purple-500": $purple-500,
+ "purple-600": $purple-600,
+ "purple-700": $purple-700,
+ "purple-800": $purple-800,
+ "purple-900": $purple-900
+) !default;
+
+$pinks: (
+ "pink-100": $pink-100,
+ "pink-200": $pink-200,
+ "pink-300": $pink-300,
+ "pink-400": $pink-400,
+ "pink-500": $pink-500,
+ "pink-600": $pink-600,
+ "pink-700": $pink-700,
+ "pink-800": $pink-800,
+ "pink-900": $pink-900
+) !default;
+
+$reds: (
+ "red-100": $red-100,
+ "red-200": $red-200,
+ "red-300": $red-300,
+ "red-400": $red-400,
+ "red-500": $red-500,
+ "red-600": $red-600,
+ "red-700": $red-700,
+ "red-800": $red-800,
+ "red-900": $red-900
+) !default;
+
+$oranges: (
+ "orange-100": $orange-100,
+ "orange-200": $orange-200,
+ "orange-300": $orange-300,
+ "orange-400": $orange-400,
+ "orange-500": $orange-500,
+ "orange-600": $orange-600,
+ "orange-700": $orange-700,
+ "orange-800": $orange-800,
+ "orange-900": $orange-900
+) !default;
+
+$yellows: (
+ "yellow-100": $yellow-100,
+ "yellow-200": $yellow-200,
+ "yellow-300": $yellow-300,
+ "yellow-400": $yellow-400,
+ "yellow-500": $yellow-500,
+ "yellow-600": $yellow-600,
+ "yellow-700": $yellow-700,
+ "yellow-800": $yellow-800,
+ "yellow-900": $yellow-900
+) !default;
+
+$greens: (
+ "green-100": $green-100,
+ "green-200": $green-200,
+ "green-300": $green-300,
+ "green-400": $green-400,
+ "green-500": $green-500,
+ "green-600": $green-600,
+ "green-700": $green-700,
+ "green-800": $green-800,
+ "green-900": $green-900
+) !default;
+
+$teals: (
+ "teal-100": $teal-100,
+ "teal-200": $teal-200,
+ "teal-300": $teal-300,
+ "teal-400": $teal-400,
+ "teal-500": $teal-500,
+ "teal-600": $teal-600,
+ "teal-700": $teal-700,
+ "teal-800": $teal-800,
+ "teal-900": $teal-900
+) !default;
+
+$cyans: (
+ "cyan-100": $cyan-100,
+ "cyan-200": $cyan-200,
+ "cyan-300": $cyan-300,
+ "cyan-400": $cyan-400,
+ "cyan-500": $cyan-500,
+ "cyan-600": $cyan-600,
+ "cyan-700": $cyan-700,
+ "cyan-800": $cyan-800,
+ "cyan-900": $cyan-900
+) !default;
+// fusv-enable
+
+// Semantically, $secondary is closest to BS3's 'default' theme color;
+// so use that if specified. Otherwise, use a light instead of dark gray
+// default color for $default since that's closer to bootstrap 3's default
+$default: if(variable-exists("secondary"), $secondary, $gray-300) !default;
+
+// scss-docs-start theme-color-variables
+$primary: $blue !default;
+$secondary: $gray-600 !default;
+$success: $green !default;
+$info: $cyan !default;
+$warning: $yellow !default;
+$danger: $red !default;
+$light: $gray-100 !default;
+$dark: $gray-900 !default;
+// scss-docs-end theme-color-variables
+
+// scss-docs-start theme-colors-map
+$theme-colors: (
+ // default needs to be 1st so that .btn-default comes before .btn-primary
+ // & therefore has lower priority.
+ "default": $default,
+ "primary": $primary,
+ "secondary": $secondary,
+ "success": $success,
+ "info": $info,
+ "warning": $warning,
+ "danger": $danger,
+ "light": $light,
+ "dark": $dark
+) !default;
+// scss-docs-end theme-colors-map
+
+// scss-docs-start theme-text-variables
+$primary-text-emphasis: shade-color($primary, 60%) !default;
+$secondary-text-emphasis: shade-color($secondary, 60%) !default;
+$success-text-emphasis: shade-color($success, 60%) !default;
+$info-text-emphasis: shade-color($info, 60%) !default;
+$warning-text-emphasis: shade-color($warning, 60%) !default;
+$danger-text-emphasis: shade-color($danger, 60%) !default;
+$light-text-emphasis: $gray-700 !default;
+$dark-text-emphasis: $gray-700 !default;
+// scss-docs-end theme-text-variables
+
+// scss-docs-start theme-bg-subtle-variables
+$primary-bg-subtle: tint-color($primary, 80%) !default;
+$secondary-bg-subtle: tint-color($secondary, 80%) !default;
+$success-bg-subtle: tint-color($success, 80%) !default;
+$info-bg-subtle: tint-color($info, 80%) !default;
+$warning-bg-subtle: tint-color($warning, 80%) !default;
+$danger-bg-subtle: tint-color($danger, 80%) !default;
+$light-bg-subtle: mix($gray-100, $white) !default;
+$dark-bg-subtle: $gray-400 !default;
+// scss-docs-end theme-bg-subtle-variables
+
+// scss-docs-start theme-border-subtle-variables
+$primary-border-subtle: tint-color($primary, 60%) !default;
+$secondary-border-subtle: tint-color($secondary, 60%) !default;
+$success-border-subtle: tint-color($success, 60%) !default;
+$info-border-subtle: tint-color($info, 60%) !default;
+$warning-border-subtle: tint-color($warning, 60%) !default;
+$danger-border-subtle: tint-color($danger, 60%) !default;
+$light-border-subtle: $gray-200 !default;
+$dark-border-subtle: $gray-500 !default;
+// scss-docs-end theme-border-subtle-variables
+
+// Characters which are escaped by the escape-svg function
+$escaped-characters: (
+ ("<", "%3c"),
+ (">", "%3e"),
+ ("#", "%23"),
+ ("(", "%28"),
+ (")", "%29"),
+) !default;
+
+// Options
+//
+// Quickly modify global styling by enabling or disabling optional features.
+
+$enable-caret: true !default;
+$enable-rounded: true !default;
+$enable-shadows: false !default;
+$enable-gradients: false !default;
+$enable-transitions: true !default;
+$enable-reduced-motion: true !default;
+$enable-smooth-scroll: true !default;
+$enable-grid-classes: true !default;
+$enable-container-classes: true !default;
+$enable-cssgrid: false !default;
+$enable-button-pointers: true !default;
+$enable-rfs: true !default;
+$enable-validation-icons: true !default;
+$enable-negative-margins: false !default;
+$enable-deprecation-messages: true !default;
+$enable-important-utilities: true !default;
+
+$enable-dark-mode: true !default;
+$color-mode-type: data !default; // `data` or `media-query`
+
+// Prefix for :root CSS variables
+
+$variable-prefix: bs- !default; // Deprecated in v5.2.0 for the shorter `$prefix`
+$prefix: $variable-prefix !default;
+
+// Gradient
+//
+// The gradient which is added to components if `$enable-gradients` is `true`
+// This gradient is also added to elements with `.bg-gradient`
+// scss-docs-start variable-gradient
+$gradient: linear-gradient(180deg, rgba($white, .15), rgba($white, 0)) !default;
+// scss-docs-end variable-gradient
+
+// Spacing
+//
+// Control the default styling of most Bootstrap elements by modifying these
+// variables. Mostly focused on spacing.
+// You can add more entries to the $spacers map, should you need more variation.
+
+// scss-docs-start spacer-variables-maps
+$spacer: 1rem !default;
+$spacers: (
+ 0: 0,
+ 1: $spacer * .25,
+ 2: $spacer * .5,
+ 3: $spacer,
+ 4: $spacer * 1.5,
+ 5: $spacer * 3,
+) !default;
+// scss-docs-end spacer-variables-maps
+
+// Position
+//
+// Define the edge positioning anchors of the position utilities.
+
+// scss-docs-start position-map
+$position-values: (
+ 0: 0,
+ 50: 50%,
+ 100: 100%
+) !default;
+// scss-docs-end position-map
+
+// Body
+//
+// Settings for the `` element.
+
+$body-text-align: null !default;
+$body-color: $gray-900 !default;
+$body-bg: $white !default;
+
+$body-secondary-color: rgba($body-color, .75) !default;
+$body-secondary-bg: $gray-200 !default;
+
+$body-tertiary-color: rgba($body-color, .5) !default;
+$body-tertiary-bg: $gray-100 !default;
+
+$body-emphasis-color: $black !default;
+
+// Links
+//
+// Style anchor elements.
+
+$link-color: $primary !default;
+$link-decoration: underline !default;
+$link-shade-percentage: 20% !default;
+$link-hover-color: shift-color($link-color, $link-shade-percentage) !default;
+$link-hover-decoration: null !default;
+
+$stretched-link-pseudo-element: after !default;
+$stretched-link-z-index: 1 !default;
+
+// Icon links
+// scss-docs-start icon-link-variables
+$icon-link-gap: .375rem !default;
+$icon-link-underline-offset: .25em !default;
+$icon-link-icon-size: 1em !default;
+$icon-link-icon-transition: .2s ease-in-out transform !default;
+$icon-link-icon-transform: translate3d(.25em, 0, 0) !default;
+// scss-docs-end icon-link-variables
+
+// Paragraphs
+//
+// Style p element.
+
+$paragraph-margin-bottom: 1rem !default;
+
+
+// Grid breakpoints
+//
+// Define the minimum dimensions at which your layout will change,
+// adapting to different screen sizes, for use in media queries.
+
+// scss-docs-start grid-breakpoints
+$grid-breakpoints: (
+ xs: 0,
+ sm: 576px,
+ md: 768px,
+ lg: 992px,
+ xl: 1200px,
+ xxl: 1400px
+) !default;
+// scss-docs-end grid-breakpoints
+
+@include _assert-ascending($grid-breakpoints, "$grid-breakpoints");
+@include _assert-starts-at-zero($grid-breakpoints, "$grid-breakpoints");
+
+
+// Grid containers
+//
+// Define the maximum width of `.container` for different screen sizes.
+
+// scss-docs-start container-max-widths
+$container-max-widths: (
+ sm: 540px,
+ md: 720px,
+ lg: 960px,
+ xl: 1140px,
+ xxl: 1320px
+) !default;
+// scss-docs-end container-max-widths
+
+@include _assert-ascending($container-max-widths, "$container-max-widths");
+
+
+// Grid columns
+//
+// Set the number of columns and specify the width of the gutters.
+
+$grid-columns: 12 !default;
+$grid-gutter-width: 1.5rem !default;
+$grid-row-columns: 6 !default;
+
+// Container padding
+
+$container-padding-x: $grid-gutter-width !default;
+
+
+// Components
+//
+// Define common padding and border radius sizes and more.
+
+// scss-docs-start border-variables
+$border-width: 1px !default;
+$border-widths: (
+ 1: 1px,
+ 2: 2px,
+ 3: 3px,
+ 4: 4px,
+ 5: 5px
+) !default;
+$border-style: solid !default;
+$border-color: $gray-300 !default;
+$border-color-translucent: rgba($black, .175) !default;
+// scss-docs-end border-variables
+
+// scss-docs-start border-radius-variables
+$border-radius: .375rem !default;
+$border-radius-sm: .25rem !default;
+$border-radius-lg: .5rem !default;
+$border-radius-xl: 1rem !default;
+$border-radius-xxl: 2rem !default;
+$border-radius-pill: 50rem !default;
+// scss-docs-end border-radius-variables
+// fusv-disable
+$border-radius-2xl: $border-radius-xxl !default; // Deprecated in v5.3.0
+// fusv-enable
+
+// scss-docs-start box-shadow-variables
+$box-shadow: 0 .5rem 1rem rgba($black, .15) !default;
+$box-shadow-sm: 0 .125rem .25rem rgba($black, .075) !default;
+$box-shadow-lg: 0 1rem 3rem rgba($black, .175) !default;
+$box-shadow-inset: inset 0 1px 2px rgba($black, .075) !default;
+// scss-docs-end box-shadow-variables
+
+$component-active-bg: $primary !default;
+$component-active-color: color-contrast($component-active-bg) !default;
+
+// scss-docs-start focus-ring-variables
+$focus-ring-width: .25rem !default;
+$focus-ring-opacity: .25 !default;
+$focus-ring-color: rgba($primary, $focus-ring-opacity) !default;
+$focus-ring-blur: 0 !default;
+$focus-ring-box-shadow: 0 0 $focus-ring-blur $focus-ring-width $focus-ring-color !default;
+// scss-docs-end focus-ring-variables
+
+// scss-docs-start caret-variables
+$caret-width: .3em !default;
+$caret-vertical-align: $caret-width * .85 !default;
+$caret-spacing: $caret-width * .85 !default;
+// scss-docs-end caret-variables
+
+$transition-base: all .2s ease-in-out !default;
+$transition-fade: opacity .15s linear !default;
+// scss-docs-start collapse-transition
+$transition-collapse: height .35s ease !default;
+$transition-collapse-width: width .35s ease !default;
+// scss-docs-end collapse-transition
+
+// stylelint-disable function-disallowed-list
+// scss-docs-start aspect-ratios
+$aspect-ratios: (
+ "1x1": 100%,
+ "4x3": calc(3 / 4 * 100%),
+ "16x9": calc(9 / 16 * 100%),
+ "21x9": calc(9 / 21 * 100%)
+) !default;
+// scss-docs-end aspect-ratios
+// stylelint-enable function-disallowed-list
+
+// Typography
+//
+// Font, line-height, and color for body text, headings, and more.
+
+// scss-docs-start font-variables
+// stylelint-disable value-keyword-case
+$font-family-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
+$font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default;
+// stylelint-enable value-keyword-case
+$font-family-base: $font-family-sans-serif !default;
+$font-family-code: $font-family-monospace !default;
+
+// $font-size-root affects the value of `rem`, which is used for as well font sizes, paddings, and margins
+// $font-size-base affects the font size of the body text
+$font-size-root: null !default;
+$font-size-base: 1rem !default; // Assumes the browser default, typically `16px`
+$font-size-sm: $font-size-base * .875 !default;
+$font-size-lg: $font-size-base * 1.25 !default;
+
+$font-weight-lighter: lighter !default;
+$font-weight-light: 300 !default;
+$font-weight-normal: 400 !default;
+$font-weight-medium: 500 !default;
+$font-weight-semibold: 600 !default;
+$font-weight-bold: 700 !default;
+$font-weight-bolder: bolder !default;
+
+$font-weight-base: $font-weight-normal !default;
+
+$line-height-base: 1.5 !default;
+$line-height-sm: 1.25 !default;
+$line-height-lg: 2 !default;
+
+$h1-font-size: $font-size-base * 2.5 !default;
+$h2-font-size: $font-size-base * 2 !default;
+$h3-font-size: $font-size-base * 1.75 !default;
+$h4-font-size: $font-size-base * 1.5 !default;
+$h5-font-size: $font-size-base * 1.25 !default;
+$h6-font-size: $font-size-base !default;
+// scss-docs-end font-variables
+
+// scss-docs-start font-sizes
+$font-sizes: (
+ 1: $h1-font-size,
+ 2: $h2-font-size,
+ 3: $h3-font-size,
+ 4: $h4-font-size,
+ 5: $h5-font-size,
+ 6: $h6-font-size
+) !default;
+// scss-docs-end font-sizes
+
+// scss-docs-start headings-variables
+$headings-margin-bottom: $spacer * .5 !default;
+$headings-font-family: null !default;
+$headings-font-style: null !default;
+$headings-font-weight: 500 !default;
+$headings-line-height: 1.2 !default;
+$headings-color: inherit !default;
+// scss-docs-end headings-variables
+
+// scss-docs-start display-headings
+$display-font-sizes: (
+ 1: 5rem,
+ 2: 4.5rem,
+ 3: 4rem,
+ 4: 3.5rem,
+ 5: 3rem,
+ 6: 2.5rem
+) !default;
+
+$display-font-family: null !default;
+$display-font-style: null !default;
+$display-font-weight: 300 !default;
+$display-line-height: $headings-line-height !default;
+// scss-docs-end display-headings
+
+// scss-docs-start type-variables
+$lead-font-size: $font-size-base * 1.25 !default;
+$lead-font-weight: 300 !default;
+
+$small-font-size: .875em !default;
+
+$sub-sup-font-size: .75em !default;
+
+// fusv-disable
+$text-muted: $body-secondary-color !default; // Deprecated in 5.3.0
+// fusv-enable
+
+$initialism-font-size: $small-font-size !default;
+
+$blockquote-margin-y: $spacer !default;
+$blockquote-font-size: $font-size-base * 1.25 !default;
+$blockquote-footer-color: $gray-600 !default;
+$blockquote-footer-font-size: $small-font-size !default;
+$blockquote-border-width: $spacer / 4 !default;
+$blockquote-border-color: $gray-200 !default;
+
+$hr-margin-y: $spacer !default;
+$hr-color: inherit !default;
+
+// fusv-disable
+$hr-bg-color: null !default; // Deprecated in v5.2.0
+$hr-height: null !default; // Deprecated in v5.2.0
+// fusv-enable
+
+$hr-border-color: null !default; // Allows for inherited colors
+$hr-border-width: $border-width !default;
+$hr-opacity: .25 !default;
+
+// scss-docs-start vr-variables
+$vr-border-width: $border-width !default;
+// scss-docs-end vr-variables
+
+$legend-margin-bottom: .5rem !default;
+$legend-font-size: 1.5rem !default;
+$legend-font-weight: null !default;
+
+$dt-font-weight: $font-weight-bold !default;
+
+$list-inline-padding: .5rem !default;
+
+$mark-padding: .1875em !default;
+$mark-bg: $yellow-100 !default;
+// scss-docs-end type-variables
+
+
+// Tables
+//
+// Customizes the `.table` component with basic values, each used across all table variations.
+
+// scss-docs-start table-variables
+$table-cell-padding-y: .5rem !default;
+$table-cell-padding-x: .5rem !default;
+$table-cell-padding-y-sm: .25rem !default;
+$table-cell-padding-x-sm: .25rem !default;
+
+$table-cell-vertical-align: top !default;
+
+$table-color: $body-color !default;
+$table-bg: $body-bg !default;
+$table-accent-bg: transparent !default;
+
+$table-th-font-weight: null !default;
+
+$table-striped-color: $table-color !default;
+$table-striped-bg-factor: .05 !default;
+$table-striped-bg: rgba($black, $table-striped-bg-factor) !default;
+
+$table-active-color: $table-color !default;
+$table-active-bg-factor: .1 !default;
+$table-active-bg: rgba($black, $table-active-bg-factor) !default;
+
+$table-hover-color: $table-color !default;
+$table-hover-bg-factor: .075 !default;
+$table-hover-bg: rgba($black, $table-hover-bg-factor) !default;
+
+$table-border-factor: .1 !default;
+$table-border-width: $border-width !default;
+$table-border-color: $border-color !default;
+
+$table-striped-order: odd !default;
+$table-striped-columns-order: even !default;
+
+$table-group-separator-color: currentcolor !default;
+
+$table-caption-color: $body-secondary-color !default;
+
+$table-bg-scale: -80% !default;
+// scss-docs-end table-variables
+
+// scss-docs-start table-loop
+$table-variants: (
+ "primary": shift-color($primary, $table-bg-scale),
+ "secondary": shift-color($secondary, $table-bg-scale),
+ "success": shift-color($success, $table-bg-scale),
+ "info": shift-color($info, $table-bg-scale),
+ "warning": shift-color($warning, $table-bg-scale),
+ "danger": shift-color($danger, $table-bg-scale),
+ "light": $light,
+ "dark": $dark,
+) !default;
+// scss-docs-end table-loop
+
+
+// Buttons + Forms
+//
+// Shared variables that are reassigned to `$input-` and `$btn-` specific variables.
+
+// scss-docs-start input-btn-variables
+$input-btn-padding-y: .375rem !default;
+$input-btn-padding-x: .75rem !default;
+$input-btn-font-family: null !default;
+$input-btn-font-size: $font-size-base !default;
+$input-btn-line-height: $line-height-base !default;
+
+$input-btn-focus-width: $focus-ring-width !default;
+$input-btn-focus-color-opacity: $focus-ring-opacity !default;
+$input-btn-focus-color: $focus-ring-color !default;
+$input-btn-focus-blur: $focus-ring-blur !default;
+$input-btn-focus-box-shadow: $focus-ring-box-shadow !default;
+
+$input-btn-padding-y-sm: .25rem !default;
+$input-btn-padding-x-sm: .5rem !default;
+$input-btn-font-size-sm: $font-size-sm !default;
+
+$input-btn-padding-y-lg: .5rem !default;
+$input-btn-padding-x-lg: 1rem !default;
+$input-btn-font-size-lg: $font-size-lg !default;
+
+$input-btn-border-width: $border-width !default;
+// scss-docs-end input-btn-variables
+
+
+// Buttons
+//
+// For each of Bootstrap's buttons, define text, background, and border color.
+
+// scss-docs-start btn-variables
+$btn-color: $body-color !default;
+$btn-padding-y: $input-btn-padding-y !default;
+$btn-padding-x: $input-btn-padding-x !default;
+$btn-font-family: $input-btn-font-family !default;
+$btn-font-size: $input-btn-font-size !default;
+$btn-line-height: $input-btn-line-height !default;
+$btn-white-space: null !default; // Set to `nowrap` to prevent text wrapping
+
+$btn-padding-y-sm: $input-btn-padding-y-sm !default;
+$btn-padding-x-sm: $input-btn-padding-x-sm !default;
+$btn-font-size-sm: $input-btn-font-size-sm !default;
+
+$btn-padding-y-lg: $input-btn-padding-y-lg !default;
+$btn-padding-x-lg: $input-btn-padding-x-lg !default;
+$btn-font-size-lg: $input-btn-font-size-lg !default;
+
+$btn-border-width: $input-btn-border-width !default;
+
+$btn-font-weight: $font-weight-normal !default;
+$btn-box-shadow: inset 0 1px 0 rgba($white, .15), 0 1px 1px rgba($black, .075) !default;
+$btn-focus-width: $input-btn-focus-width !default;
+$btn-focus-box-shadow: $input-btn-focus-box-shadow !default;
+$btn-disabled-opacity: .65 !default;
+$btn-active-box-shadow: inset 0 3px 5px rgba($black, .125) !default;
+
+$btn-link-color: $link-color !default;
+$btn-link-hover-color: $link-hover-color !default;
+$btn-link-disabled-color: $gray-600 !default;
+
+// Allows for customizing button radius independently from global border radius
+$btn-border-radius: $border-radius !default;
+$btn-border-radius-sm: $border-radius-sm !default;
+$btn-border-radius-lg: $border-radius-lg !default;
+
+$btn-transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
+
+$btn-hover-bg-shade-amount: 15% !default;
+$btn-hover-bg-tint-amount: 15% !default;
+$btn-hover-border-shade-amount: 20% !default;
+$btn-hover-border-tint-amount: 10% !default;
+$btn-active-bg-shade-amount: 20% !default;
+$btn-active-bg-tint-amount: 20% !default;
+$btn-active-border-shade-amount: 25% !default;
+$btn-active-border-tint-amount: 10% !default;
+// scss-docs-end btn-variables
+
+
+// Forms
+
+// scss-docs-start form-text-variables
+$form-text-margin-top: .25rem !default;
+$form-text-font-size: $small-font-size !default;
+$form-text-font-style: null !default;
+$form-text-font-weight: null !default;
+$form-text-color: $body-secondary-color !default;
+// scss-docs-end form-text-variables
+
+// scss-docs-start form-label-variables
+$form-label-margin-bottom: .5rem !default;
+$form-label-font-size: null !default;
+$form-label-font-style: null !default;
+$form-label-font-weight: null !default;
+$form-label-color: null !default;
+// scss-docs-end form-label-variables
+
+// scss-docs-start form-input-variables
+$input-padding-y: $input-btn-padding-y !default;
+$input-padding-x: $input-btn-padding-x !default;
+$input-font-family: $input-btn-font-family !default;
+$input-font-size: $input-btn-font-size !default;
+$input-font-weight: $font-weight-base !default;
+$input-line-height: $input-btn-line-height !default;
+
+$input-padding-y-sm: $input-btn-padding-y-sm !default;
+$input-padding-x-sm: $input-btn-padding-x-sm !default;
+$input-font-size-sm: $input-btn-font-size-sm !default;
+
+$input-padding-y-lg: $input-btn-padding-y-lg !default;
+$input-padding-x-lg: $input-btn-padding-x-lg !default;
+$input-font-size-lg: $input-btn-font-size-lg !default;
+
+$input-bg: $body-bg !default;
+$input-disabled-color: null !default;
+$input-disabled-bg: $body-secondary-bg !default;
+$input-disabled-border-color: null !default;
+
+$input-color: $body-color !default;
+$input-border-color: $border-color !default;
+$input-border-width: $input-btn-border-width !default;
+$input-box-shadow: $box-shadow-inset !default;
+
+$input-border-radius: $border-radius !default;
+$input-border-radius-sm: $border-radius-sm !default;
+$input-border-radius-lg: $border-radius-lg !default;
+
+$input-focus-bg: $input-bg !default;
+$input-focus-border-color: tint-color($component-active-bg, 50%) !default;
+$input-focus-color: $input-color !default;
+$input-focus-width: $input-btn-focus-width !default;
+$input-focus-box-shadow: $input-btn-focus-box-shadow !default;
+
+$input-placeholder-color: $body-secondary-color !default;
+$input-plaintext-color: $body-color !default;
+
+$input-height-border: calc(#{$input-border-width} * 2) !default; // stylelint-disable-line function-disallowed-list
+
+$input-height-inner: add($input-line-height * 1em, $input-padding-y * 2) !default;
+$input-height-inner-half: add($input-line-height * .5em, $input-padding-y) !default;
+$input-height-inner-quarter: add($input-line-height * .25em, $input-padding-y * .5) !default;
+
+$input-height: add($input-line-height * 1em, add($input-padding-y * 2, $input-height-border, false)) !default;
+$input-height-sm: add($input-line-height * 1em, add($input-padding-y-sm * 2, $input-height-border, false)) !default;
+$input-height-lg: add($input-line-height * 1em, add($input-padding-y-lg * 2, $input-height-border, false)) !default;
+
+$input-transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
+
+$form-color-width: 3rem !default;
+// scss-docs-end form-input-variables
+
+// scss-docs-start form-check-variables
+$form-check-input-width: 1em !default;
+$form-check-min-height: $font-size-base * $line-height-base !default;
+$form-check-padding-start: 0 !default;
+$form-check-margin-bottom: .125rem !default;
+$form-check-label-color: null !default;
+$form-check-label-cursor: pointer !default;
+$form-check-transition: null !default;
+
+$form-check-input-active-filter: brightness(90%) !default;
+
+$form-check-input-bg: $input-bg !default;
+$form-check-input-border: $border-width solid $border-color !default;
+$form-check-input-border-radius: .25em !default;
+$form-check-radio-border-radius: 50% !default;
+$form-check-input-focus-border: $input-focus-border-color !default;
+$form-check-input-focus-box-shadow: $focus-ring-box-shadow !default;
+
+$form-check-input-checked-color: $component-active-color !default;
+$form-check-input-checked-bg-color: $component-active-bg !default;
+$form-check-input-checked-border-color: $form-check-input-checked-bg-color !default;
+$form-check-input-checked-bg-image: url("data:image/svg+xml,") !default;
+$form-check-radio-checked-bg-image: url("data:image/svg+xml,") !default;
+
+$form-check-input-indeterminate-color: $component-active-color !default;
+$form-check-input-indeterminate-bg-color: $component-active-bg !default;
+$form-check-input-indeterminate-border-color: $form-check-input-indeterminate-bg-color !default;
+$form-check-input-indeterminate-bg-image: url("data:image/svg+xml,") !default;
+
+$form-check-input-disabled-opacity: .5 !default;
+$form-check-label-disabled-opacity: $form-check-input-disabled-opacity !default;
+$form-check-btn-check-disabled-opacity: $btn-disabled-opacity !default;
+
+$form-check-inline-margin-end: 1rem !default;
+// scss-docs-end form-check-variables
+
+// scss-docs-start form-switch-variables
+$form-switch-color: rgba($black, .25) !default;
+$form-switch-width: 2em !default;
+$form-switch-padding-start: $form-switch-width + .5em !default;
+$form-switch-bg-image: url("data:image/svg+xml,") !default;
+$form-switch-border-radius: $form-switch-width !default;
+$form-switch-transition: background-position .15s ease-in-out !default;
+
+$form-switch-focus-color: $input-focus-border-color !default;
+$form-switch-focus-bg-image: url("data:image/svg+xml,") !default;
+
+$form-switch-checked-color: $component-active-color !default;
+$form-switch-checked-bg-image: url("data:image/svg+xml,") !default;
+$form-switch-checked-bg-position: right center !default;
+// scss-docs-end form-switch-variables
+
+// scss-docs-start input-group-variables
+$input-group-addon-padding-y: $input-padding-y !default;
+$input-group-addon-padding-x: $input-padding-x !default;
+$input-group-addon-font-weight: $input-font-weight !default;
+$input-group-addon-color: $input-color !default;
+$input-group-addon-bg: $body-tertiary-bg !default;
+$input-group-addon-border-color: $input-border-color !default;
+// scss-docs-end input-group-variables
+
+// scss-docs-start form-select-variables
+$form-select-padding-y: $input-padding-y !default;
+$form-select-padding-x: $input-padding-x !default;
+$form-select-font-family: $input-font-family !default;
+$form-select-font-size: $input-font-size !default;
+$form-select-indicator-padding: $form-select-padding-x * 3 !default; // Extra padding for background-image
+$form-select-font-weight: $input-font-weight !default;
+$form-select-line-height: $input-line-height !default;
+$form-select-color: $input-color !default;
+$form-select-bg: $input-bg !default;
+$form-select-disabled-color: null !default;
+$form-select-disabled-bg: $input-disabled-bg !default;
+$form-select-disabled-border-color: $input-disabled-border-color !default;
+$form-select-bg-position: right $form-select-padding-x center !default;
+$form-select-bg-size: 16px 12px !default; // In pixels because image dimensions
+$form-select-indicator-color: $gray-800 !default;
+$form-select-indicator: url("data:image/svg+xml,") !default;
+
+$form-select-feedback-icon-padding-end: $form-select-padding-x * 2.5 + $form-select-indicator-padding !default;
+$form-select-feedback-icon-position: center right $form-select-indicator-padding !default;
+$form-select-feedback-icon-size: $input-height-inner-half $input-height-inner-half !default;
+
+$form-select-border-width: $input-border-width !default;
+$form-select-border-color: $input-border-color !default;
+$form-select-border-radius: $input-border-radius !default;
+$form-select-box-shadow: $box-shadow-inset !default;
+
+$form-select-focus-border-color: $input-focus-border-color !default;
+$form-select-focus-width: $input-focus-width !default;
+$form-select-focus-box-shadow: 0 0 0 $form-select-focus-width $input-btn-focus-color !default;
+
+$form-select-padding-y-sm: $input-padding-y-sm !default;
+$form-select-padding-x-sm: $input-padding-x-sm !default;
+$form-select-font-size-sm: $input-font-size-sm !default;
+$form-select-border-radius-sm: $input-border-radius-sm !default;
+
+$form-select-padding-y-lg: $input-padding-y-lg !default;
+$form-select-padding-x-lg: $input-padding-x-lg !default;
+$form-select-font-size-lg: $input-font-size-lg !default;
+$form-select-border-radius-lg: $input-border-radius-lg !default;
+
+$form-select-transition: $input-transition !default;
+// scss-docs-end form-select-variables
+
+// scss-docs-start form-range-variables
+$form-range-track-width: 100% !default;
+$form-range-track-height: .5rem !default;
+$form-range-track-cursor: pointer !default;
+$form-range-track-bg: $body-tertiary-bg !default;
+$form-range-track-border-radius: 1rem !default;
+$form-range-track-box-shadow: $box-shadow-inset !default;
+
+$form-range-thumb-width: 1rem !default;
+$form-range-thumb-height: $form-range-thumb-width !default;
+$form-range-thumb-bg: $component-active-bg !default;
+$form-range-thumb-border: 0 !default;
+$form-range-thumb-border-radius: 1rem !default;
+$form-range-thumb-box-shadow: 0 .1rem .25rem rgba($black, .1) !default;
+$form-range-thumb-focus-box-shadow: 0 0 0 1px $body-bg, $input-focus-box-shadow !default;
+$form-range-thumb-focus-box-shadow-width: $input-focus-width !default; // For focus box shadow issue in Edge
+$form-range-thumb-active-bg: tint-color($component-active-bg, 70%) !default;
+$form-range-thumb-disabled-bg: $body-secondary-color !default;
+$form-range-thumb-transition: background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
+// scss-docs-end form-range-variables
+
+// scss-docs-start form-file-variables
+$form-file-button-color: $input-color !default;
+$form-file-button-bg: $body-tertiary-bg !default;
+$form-file-button-hover-bg: $body-secondary-bg !default;
+// scss-docs-end form-file-variables
+
+// scss-docs-start form-floating-variables
+$form-floating-height: add(3.5rem, $input-height-border) !default;
+$form-floating-line-height: 1.25 !default;
+$form-floating-padding-x: $input-padding-x !default;
+$form-floating-padding-y: 1rem !default;
+$form-floating-input-padding-t: 1.625rem !default;
+$form-floating-input-padding-b: .625rem !default;
+$form-floating-label-height: 1.5em !default;
+$form-floating-label-opacity: .65 !default;
+$form-floating-label-transform: scale(.85) translateY(-.5rem) translateX(.15rem) !default;
+$form-floating-label-disabled-color: $gray-600 !default;
+$form-floating-transition: opacity .1s ease-in-out, transform .1s ease-in-out !default;
+// scss-docs-end form-floating-variables
+
+// Form validation
+
+// scss-docs-start form-feedback-variables
+$form-feedback-margin-top: $form-text-margin-top !default;
+$form-feedback-font-size: $form-text-font-size !default;
+$form-feedback-font-style: $form-text-font-style !default;
+$form-feedback-valid-color: $success !default;
+$form-feedback-invalid-color: $danger !default;
+
+$form-feedback-icon-valid-color: $form-feedback-valid-color !default;
+$form-feedback-icon-valid: url("data:image/svg+xml,") !default;
+$form-feedback-icon-invalid-color: $form-feedback-invalid-color !default;
+$form-feedback-icon-invalid: url("data:image/svg+xml,") !default;
+// scss-docs-end form-feedback-variables
+
+// scss-docs-start form-validation-colors
+$form-valid-color: $form-feedback-valid-color !default;
+$form-valid-border-color: $form-feedback-valid-color !default;
+$form-invalid-color: $form-feedback-invalid-color !default;
+$form-invalid-border-color: $form-feedback-invalid-color !default;
+// scss-docs-end form-validation-colors
+
+// scss-docs-start form-validation-states
+$form-validation-states: (
+ "valid": (
+ "color": $form-valid-color,
+ "icon": $form-feedback-icon-valid,
+ "tooltip-color": #fff,
+ "tooltip-bg-color": $success,
+ "focus-box-shadow": 0 0 $input-btn-focus-blur $input-focus-width rgba($success, $input-btn-focus-color-opacity),
+ "border-color": $form-valid-border-color,
+ ),
+ "invalid": (
+ "color": $form-invalid-color,
+ "icon": $form-feedback-icon-invalid,
+ "tooltip-color": #fff,
+ "tooltip-bg-color": $danger,
+ "focus-box-shadow": 0 0 $input-btn-focus-blur $input-focus-width rgba($danger, $input-btn-focus-color-opacity),
+ "border-color": $form-invalid-border-color,
+ )
+) !default;
+// scss-docs-end form-validation-states
+
+// Z-index master list
+//
+// Warning: Avoid customizing these values. They're used for a bird's eye view
+// of components dependent on the z-axis and are designed to all work together.
+
+// scss-docs-start zindex-stack
+$zindex-dropdown: 1000 !default;
+$zindex-sticky: 1020 !default;
+$zindex-fixed: 1030 !default;
+$zindex-offcanvas-backdrop: 1040 !default;
+$zindex-offcanvas: 1045 !default;
+$zindex-modal-backdrop: 1050 !default;
+$zindex-modal: 1055 !default;
+$zindex-popover: 1070 !default;
+$zindex-tooltip: 1080 !default;
+$zindex-toast: 1090 !default;
+// scss-docs-end zindex-stack
+
+// scss-docs-start zindex-levels-map
+$zindex-levels: (
+ n1: -1,
+ 0: 0,
+ 1: 1,
+ 2: 2,
+ 3: 3
+) !default;
+// scss-docs-end zindex-levels-map
+
+
+// Navs
+
+// scss-docs-start nav-variables
+$nav-link-padding-y: ($font-size-base * 0.5) !default;
+$nav-link-padding-x: $font-size-base !default;
+$nav-link-font-size: null !default;
+$nav-link-font-weight: null !default;
+$nav-link-color: $link-color !default;
+$nav-link-hover-color: $link-hover-color !default;
+$nav-link-transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out !default;
+$nav-link-disabled-color: $body-secondary-color !default;
+$nav-link-focus-box-shadow: $focus-ring-box-shadow !default;
+
+$nav-tabs-border-color: $border-color !default;
+$nav-tabs-border-width: $border-width !default;
+$nav-tabs-border-radius: $border-radius !default;
+$nav-tabs-link-hover-border-color: $body-secondary-bg $body-secondary-bg $nav-tabs-border-color !default;
+$nav-tabs-link-active-color: $body-emphasis-color !default;
+$nav-tabs-link-active-bg: $body-bg !default;
+$nav-tabs-link-active-border-color: $border-color $border-color $nav-tabs-link-active-bg !default;
+
+$nav-pills-border-radius: $border-radius !default;
+$nav-pills-link-active-bg: $component-active-bg !default;
+$nav-pills-link-active-color: color-contrast($nav-pills-link-active-bg, $component-active-color) !default;
+
+$nav-underline-gap: 1rem !default;
+$nav-underline-border-width: .125rem !default;
+$nav-underline-link-active-color: $body-emphasis-color !default;
+// scss-docs-end nav-variables
+
+
+// Navbar
+
+// scss-docs-start navbar-variables
+$navbar-padding-y: $spacer * .5 !default;
+$navbar-padding-x: null !default;
+
+$navbar-nav-link-padding-x: .5rem !default;
+
+$navbar-brand-font-size: $font-size-lg !default;
+// Compute the navbar-brand padding-y so the navbar-brand will have the same height as navbar-text and nav-link
+$nav-link-height: $font-size-base * $line-height-base + $nav-link-padding-y * 2 !default;
+$navbar-brand-height: $navbar-brand-font-size * $line-height-base !default;
+$navbar-brand-padding-y: ($nav-link-height - $navbar-brand-height) * .5 !default;
+$navbar-brand-margin-end: 1rem !default;
+
+$navbar-toggler-padding-y: .25rem !default;
+$navbar-toggler-padding-x: .75rem !default;
+$navbar-toggler-font-size: $font-size-lg !default;
+$navbar-toggler-border-radius: $btn-border-radius !default;
+$navbar-toggler-focus-width: $btn-focus-width !default;
+$navbar-toggler-transition: box-shadow .15s ease-in-out !default;
+
+$navbar-bg: null !default; // Background color for any navbarPage()
+$navbar-light-bg: if($navbar-bg, $navbar-bg, var(--bs-light)) !default; // Background color for navbarPage(inverse = FALSE)
+$navbar-dark-bg: if($navbar-bg, $navbar-bg, var(--bs-dark)) !default; // Background color for navbarPage(inverse = TRUE)
+
+$navbar-light-contrast: if(
+ type-of($navbar-light-bg) == color,
+ color-contrast($navbar-light-bg),
+ $body-emphasis-color
+) !default; // Deepest contrasting color for navbarPage(inverse = FALSE).
+$navbar-dark-contrast: if(
+ type-of($navbar-dark-bg) == color,
+ color-contrast($navbar-dark-bg),
+ $body-emphasis-color
+) !default; // Deepest contrasting color for navbarPage(inverse = TRUE).
+
+$navbar-light-color: rgba($navbar-light-contrast, .65) !default;
+$navbar-light-hover-color: rgba($navbar-light-contrast, .8) !default;
+$navbar-light-active-color: rgba($navbar-light-contrast, 1) !default;
+$navbar-light-disabled-color: rgba($navbar-light-contrast, .3) !default;
+$navbar-light-icon-color: rgba(if(type-of($navbar-light-contrast)==color, $navbar-light-contrast, $body-color), .75) !default;
+$navbar-light-toggler-icon-bg: url("data:image/svg+xml,") !default;
+$navbar-light-toggler-border-color: rgba($navbar-light-contrast, .15) !default;
+$navbar-light-brand-color: $navbar-light-active-color !default;
+$navbar-light-brand-hover-color: $navbar-light-active-color !default;
+// scss-docs-end navbar-variables
+
+// scss-docs-start navbar-dark-variables
+$navbar-dark-color: rgba($navbar-dark-contrast, .55) !default;
+$navbar-dark-hover-color: rgba($navbar-dark-contrast, .75) !default;
+$navbar-dark-active-color: rgba($navbar-dark-contrast, 1) !default;
+$navbar-dark-disabled-color: rgba($navbar-dark-contrast, .25) !default;
+$navbar-dark-icon-color: rgba(if(type-of($navbar-dark-contrast)==color, $navbar-dark-contrast, $white), .75) !default;
+$navbar-dark-toggler-icon-bg: url("data:image/svg+xml,") !default;
+$navbar-dark-toggler-border-color: rgba($navbar-dark-contrast, .1) !default;
+$navbar-dark-brand-color: $navbar-dark-active-color !default;
+$navbar-dark-brand-hover-color: $navbar-dark-active-color !default;
+// scss-docs-end navbar-dark-variables
+
+
+// Dropdowns
+//
+// Dropdown menu container and contents.
+
+// scss-docs-start dropdown-variables
+$dropdown-min-width: 10rem !default;
+$dropdown-padding-x: 0 !default;
+$dropdown-padding-y: .5rem !default;
+$dropdown-spacer: .125rem !default;
+$dropdown-font-size: $font-size-base !default;
+$dropdown-color: $body-color !default;
+$dropdown-bg: $body-bg !default;
+$dropdown-border-color: $border-color-translucent !default;
+$dropdown-border-radius: $border-radius !default;
+$dropdown-border-width: $border-width !default;
+$dropdown-inner-border-radius: calc(#{$dropdown-border-radius} - #{$dropdown-border-width}) !default; // stylelint-disable-line function-disallowed-list
+$dropdown-divider-bg: $dropdown-border-color !default;
+$dropdown-divider-margin-y: $spacer * .5 !default;
+$dropdown-box-shadow: $box-shadow !default;
+
+$dropdown-link-color: $body-color !default;
+$dropdown-link-hover-color: $dropdown-link-color !default;
+$dropdown-link-hover-bg: $body-tertiary-bg !default;
+
+$dropdown-link-active-bg: $component-active-bg !default;
+$dropdown-link-active-color: color-contrast($dropdown-link-active-bg, $component-active-color) !default;
+
+$dropdown-link-disabled-color: $body-tertiary-color !default;
+
+$dropdown-item-padding-y: $spacer * .25 !default;
+$dropdown-item-padding-x: $spacer !default;
+
+$dropdown-header-color: $gray-600 !default;
+$dropdown-header-padding-x: $dropdown-item-padding-x !default;
+$dropdown-header-padding-y: $dropdown-padding-y !default;
+// fusv-disable
+$dropdown-header-padding: $dropdown-header-padding-y $dropdown-header-padding-x !default; // Deprecated in v5.2.0
+// fusv-enable
+// scss-docs-end dropdown-variables
+
+// scss-docs-start dropdown-dark-variables
+$dropdown-dark-color: $gray-300 !default;
+$dropdown-dark-bg: $gray-800 !default;
+$dropdown-dark-border-color: $dropdown-border-color !default;
+$dropdown-dark-divider-bg: $dropdown-divider-bg !default;
+$dropdown-dark-box-shadow: null !default;
+$dropdown-dark-link-color: $dropdown-dark-color !default;
+$dropdown-dark-link-hover-color: $white !default;
+$dropdown-dark-link-hover-bg: rgba($white, .15) !default;
+$dropdown-dark-link-active-color: $dropdown-link-active-color !default;
+$dropdown-dark-link-active-bg: $dropdown-link-active-bg !default;
+$dropdown-dark-link-disabled-color: $gray-500 !default;
+$dropdown-dark-header-color: $gray-500 !default;
+// scss-docs-end dropdown-dark-variables
+
+
+// Pagination
+
+// scss-docs-start pagination-variables
+$pagination-padding-y: .375rem !default;
+$pagination-padding-x: .75rem !default;
+$pagination-padding-y-sm: .25rem !default;
+$pagination-padding-x-sm: .5rem !default;
+$pagination-padding-y-lg: .75rem !default;
+$pagination-padding-x-lg: 1.5rem !default;
+
+$pagination-font-size: $font-size-base !default;
+
+$pagination-color: $link-color !default;
+$pagination-bg: $body-bg !default;
+$pagination-border-radius: $border-radius !default;
+$pagination-border-width: $border-width !default;
+$pagination-margin-start: calc(#{$pagination-border-width} * -1) !default; // stylelint-disable-line function-disallowed-list
+$pagination-border-color: $border-color !default;
+
+$pagination-focus-color: $link-hover-color !default;
+$pagination-focus-bg: $body-secondary-bg !default;
+$pagination-focus-box-shadow: $focus-ring-box-shadow !default;
+$pagination-focus-outline: 0 !default;
+
+$pagination-hover-color: $link-hover-color !default;
+$pagination-hover-bg: $body-tertiary-bg !default;
+$pagination-hover-border-color: $border-color !default; // Todo in v6: remove this?
+
+$pagination-active-color: $component-active-color !default;
+$pagination-active-bg: $component-active-bg !default;
+$pagination-active-border-color: $component-active-bg !default;
+
+$pagination-disabled-color: $body-secondary-color !default;
+$pagination-disabled-bg: $body-secondary-bg !default;
+$pagination-disabled-border-color: $border-color !default;
+
+$pagination-transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
+
+$pagination-border-radius-sm: $border-radius-sm !default;
+$pagination-border-radius-lg: $border-radius-lg !default;
+// scss-docs-end pagination-variables
+
+
+// Placeholders
+
+// scss-docs-start placeholders
+$placeholder-opacity-max: .5 !default;
+$placeholder-opacity-min: .2 !default;
+// scss-docs-end placeholders
+
+// Cards
+
+// scss-docs-start card-variables
+$card-spacer-y: $spacer !default;
+$card-spacer-x: $spacer !default;
+$card-title-spacer-y: $spacer * .5 !default;
+$card-title-color: null !default;
+$card-subtitle-color: null !default;
+$card-border-width: $border-width !default;
+$card-border-color: $border-color-translucent !default;
+$card-border-radius: $border-radius !default;
+$card-box-shadow: null !default;
+$card-inner-border-radius: subtract($card-border-radius, $card-border-width) !default;
+$card-cap-padding-y: $card-spacer-y * .5 !default;
+$card-cap-padding-x: $card-spacer-x !default;
+$card-cap-bg: rgba($body-color, .03) !default;
+$card-cap-color: null !default;
+$card-height: null !default;
+$card-color: null !default;
+$card-bg: $body-bg !default;
+$card-img-overlay-padding: $spacer !default;
+$card-group-margin: $grid-gutter-width * .5 !default;
+// scss-docs-end card-variables
+
+// Accordion
+
+// scss-docs-start accordion-variables
+$accordion-padding-y: 1rem !default;
+$accordion-padding-x: 1.25rem !default;
+$accordion-color: $body-color !default;
+$accordion-bg: $body-bg !default;
+$accordion-border-width: $border-width !default;
+$accordion-border-color: $border-color !default;
+$accordion-border-radius: $border-radius !default;
+$accordion-inner-border-radius: subtract($accordion-border-radius, $accordion-border-width) !default;
+
+$accordion-body-padding-y: $accordion-padding-y !default;
+$accordion-body-padding-x: $accordion-padding-x !default;
+
+$accordion-button-padding-y: $accordion-padding-y !default;
+$accordion-button-padding-x: $accordion-padding-x !default;
+$accordion-button-color: $body-color !default;
+$accordion-button-bg: $accordion-bg !default;
+$accordion-transition: $btn-transition, border-radius .15s ease !default;
+$accordion-button-active-bg: $primary-bg-subtle !default;
+$accordion-button-active-color: $primary-text-emphasis !default;
+
+$accordion-button-focus-border-color: $input-focus-border-color !default;
+$accordion-button-focus-box-shadow: $btn-focus-box-shadow !default;
+
+$accordion-icon-width: 1.25rem !default;
+$accordion-icon-color: $body-color !default;
+$accordion-icon-active-color: $primary-text-emphasis !default;
+$accordion-icon-transition: transform .2s ease-in-out !default;
+$accordion-icon-transform: rotate(-180deg) !default;
+
+$accordion-button-icon: url("data:image/svg+xml,") !default;
+$accordion-button-active-icon: url("data:image/svg+xml,") !default;
+// scss-docs-end accordion-variables
+
+// Tooltips
+
+// scss-docs-start tooltip-variables
+$tooltip-font-size: $font-size-sm !default;
+$tooltip-max-width: 200px !default;
+$tooltip-color: $body-bg !default;
+$tooltip-bg: $body-emphasis-color !default;
+$tooltip-border-radius: $border-radius !default;
+$tooltip-opacity: .9 !default;
+$tooltip-padding-y: $spacer * .25 !default;
+$tooltip-padding-x: $spacer * .5 !default;
+$tooltip-margin: null !default; // TODO: remove this in v6
+
+$tooltip-arrow-width: .8rem !default;
+$tooltip-arrow-height: .4rem !default;
+// fusv-disable
+$tooltip-arrow-color: null !default; // Deprecated in Bootstrap 5.2.0 for CSS variables
+// fusv-enable
+// scss-docs-end tooltip-variables
+
+// Form tooltips must come after regular tooltips
+// scss-docs-start tooltip-feedback-variables
+$form-feedback-tooltip-padding-y: $tooltip-padding-y !default;
+$form-feedback-tooltip-padding-x: $tooltip-padding-x !default;
+$form-feedback-tooltip-font-size: $tooltip-font-size !default;
+$form-feedback-tooltip-line-height: null !default;
+$form-feedback-tooltip-opacity: $tooltip-opacity !default;
+$form-feedback-tooltip-border-radius: $tooltip-border-radius !default;
+// scss-docs-end tooltip-feedback-variables
+
+
+// Popovers
+
+// scss-docs-start popover-variables
+$popover-font-size: $font-size-sm !default;
+$popover-bg: $body-bg !default;
+$popover-max-width: 276px !default;
+$popover-border-width: $border-width !default;
+$popover-border-color: $border-color-translucent !default;
+$popover-border-radius: $border-radius-lg !default;
+$popover-inner-border-radius: calc(#{$popover-border-radius} - #{$popover-border-width}) !default; // stylelint-disable-line function-disallowed-list
+$popover-box-shadow: $box-shadow !default;
+
+$popover-header-font-size: $font-size-base !default;
+$popover-header-bg: $body-secondary-bg !default;
+$popover-header-color: $headings-color !default;
+$popover-header-padding-y: .5rem !default;
+$popover-header-padding-x: $spacer !default;
+
+$popover-body-color: $body-color !default;
+$popover-body-padding-y: $spacer !default;
+$popover-body-padding-x: $spacer !default;
+
+$popover-arrow-width: 1rem !default;
+$popover-arrow-height: .5rem !default;
+// scss-docs-end popover-variables
+
+// fusv-disable
+// Deprecated in Bootstrap 5.2.0 for CSS variables
+$popover-arrow-color: $popover-bg !default;
+$popover-arrow-outer-color: $border-color-translucent !default;
+// fusv-enable
+
+
+// Toasts
+
+// scss-docs-start toast-variables
+$toast-max-width: 350px !default;
+$toast-padding-x: .75rem !default;
+$toast-padding-y: .5rem !default;
+$toast-font-size: .875rem !default;
+$toast-color: null !default;
+$toast-background-color: rgba($body-bg, .85) !default;
+$toast-border-width: $border-width !default;
+$toast-border-color: $border-color-translucent !default;
+$toast-border-radius: $border-radius !default;
+$toast-box-shadow: $box-shadow !default;
+$toast-spacing: $container-padding-x !default;
+
+$toast-header-color: $body-secondary-color !default;
+$toast-header-background-color: rgba($body-bg, .85) !default;
+$toast-header-border-color: $toast-border-color !default;
+// scss-docs-end toast-variables
+
+
+// Badges
+
+// scss-docs-start badge-variables
+$badge-font-size: .75em !default;
+$badge-font-weight: $font-weight-bold !default;
+$badge-color: $white !default;
+$badge-padding-y: .35em !default;
+$badge-padding-x: .65em !default;
+$badge-border-radius: $border-radius !default;
+// scss-docs-end badge-variables
+
+
+// Modals
+
+// scss-docs-start modal-variables
+$modal-inner-padding: $spacer !default;
+
+$modal-footer-margin-between: .5rem !default;
+
+$modal-dialog-margin: .5rem !default;
+$modal-dialog-margin-y-sm-up: 1.75rem !default;
+
+$modal-title-line-height: $line-height-base !default;
+
+$modal-content-color: null !default;
+$modal-content-bg: $body-bg !default;
+$modal-content-border-color: $border-color-translucent !default;
+$modal-content-border-width: $border-width !default;
+$modal-content-border-radius: $border-radius-lg !default;
+$modal-content-inner-border-radius: subtract($modal-content-border-radius, $modal-content-border-width) !default;
+$modal-content-box-shadow-xs: $box-shadow-sm !default;
+$modal-content-box-shadow-sm-up: $box-shadow !default;
+
+$modal-backdrop-bg: $black !default;
+$modal-backdrop-opacity: .5 !default;
+
+$modal-header-border-color: $border-color !default;
+$modal-header-border-width: $modal-content-border-width !default;
+$modal-header-padding-y: $modal-inner-padding !default;
+$modal-header-padding-x: $modal-inner-padding !default;
+$modal-header-padding: $modal-header-padding-y $modal-header-padding-x !default; // Keep this for backwards compatibility
+
+$modal-footer-bg: null !default;
+$modal-footer-border-color: $modal-header-border-color !default;
+$modal-footer-border-width: $modal-header-border-width !default;
+
+$modal-sm: 300px !default;
+$modal-md: 500px !default;
+$modal-lg: 800px !default;
+$modal-xl: 1140px !default;
+
+$modal-fade-transform: translate(0, -50px) !default;
+$modal-show-transform: none !default;
+$modal-transition: transform .3s ease-out !default;
+$modal-scale-transform: scale(1.02) !default;
+// scss-docs-end modal-variables
+
+
+// Alerts
+//
+// Define alert colors, border radius, and padding.
+
+// scss-docs-start alert-variables
+$alert-padding-y: $spacer !default;
+$alert-padding-x: $spacer !default;
+$alert-margin-bottom: 1rem !default;
+$alert-border-radius: $border-radius !default;
+$alert-link-font-weight: $font-weight-bold !default;
+$alert-border-width: $border-width !default;
+$alert-dismissible-padding-r: $alert-padding-x * 3 !default; // 3x covers width of x plus default padding on either side
+// scss-docs-end alert-variables
+
+// fusv-disable
+$alert-bg-scale: -80% !default; // Deprecated in v5.2.0, to be removed in v6
+$alert-border-scale: -70% !default; // Deprecated in v5.2.0, to be removed in v6
+$alert-color-scale: 40% !default; // Deprecated in v5.2.0, to be removed in v6
+// fusv-enable
+
+// Progress bars
+
+// scss-docs-start progress-variables
+$progress-height: 1rem !default;
+$progress-font-size: $font-size-base * .75 !default;
+$progress-bg: $body-secondary-bg !default;
+$progress-border-radius: $border-radius !default;
+$progress-box-shadow: $box-shadow-inset !default;
+$progress-bar-color: $white !default;
+$progress-bar-bg: $primary !default;
+$progress-bar-animation-timing: 1s linear infinite !default;
+$progress-bar-transition: width .6s ease !default;
+// scss-docs-end progress-variables
+
+
+// List group
+
+// scss-docs-start list-group-variables
+$list-group-color: $body-color !default;
+$list-group-bg: $body-bg !default;
+$list-group-border-color: $border-color !default;
+$list-group-border-width: $border-width !default;
+$list-group-border-radius: $border-radius !default;
+
+$list-group-item-padding-y: $spacer * .5 !default;
+$list-group-item-padding-x: $spacer !default;
+// fusv-disable
+$list-group-item-bg-scale: -80% !default; // Deprecated in v5.3.0
+$list-group-item-color-scale: 40% !default; // Deprecated in v5.3.0
+// fusv-enable
+
+$list-group-hover-bg: $body-tertiary-bg !default;
+$list-group-active-bg: $component-active-bg !default;
+$list-group-active-color: color-contrast($list-group-active-bg, $component-active-color) !default;
+$list-group-active-border-color: $list-group-active-bg !default;
+
+$list-group-disabled-color: $body-secondary-color !default;
+$list-group-disabled-bg: $list-group-bg !default;
+
+$list-group-action-color: $body-secondary-color !default;
+$list-group-action-hover-color: $body-emphasis-color !default;
+
+$list-group-action-active-color: $body-color !default;
+$list-group-action-active-bg: $body-secondary-bg !default;
+// scss-docs-end list-group-variables
+
+
+// Image thumbnails
+
+// scss-docs-start thumbnail-variables
+$thumbnail-padding: .25rem !default;
+$thumbnail-bg: $body-bg !default;
+$thumbnail-border-width: $border-width !default;
+$thumbnail-border-color: $border-color !default;
+$thumbnail-border-radius: $border-radius !default;
+$thumbnail-box-shadow: $box-shadow-sm !default;
+// scss-docs-end thumbnail-variables
+
+
+// Figures
+
+// scss-docs-start figure-variables
+$figure-caption-font-size: $small-font-size !default;
+$figure-caption-color: $body-secondary-color !default;
+// scss-docs-end figure-variables
+
+
+// Breadcrumbs
+
+// scss-docs-start breadcrumb-variables
+$breadcrumb-font-size: null !default;
+$breadcrumb-padding-y: 0 !default;
+$breadcrumb-padding-x: 0 !default;
+$breadcrumb-item-padding-x: .5rem !default;
+$breadcrumb-margin-bottom: 1rem !default;
+$breadcrumb-bg: null !default;
+$breadcrumb-divider-color: $body-secondary-color !default;
+$breadcrumb-active-color: $body-secondary-color !default;
+$breadcrumb-divider: quote("/") !default;
+$breadcrumb-divider-flipped: $breadcrumb-divider !default;
+$breadcrumb-border-radius: null !default;
+// scss-docs-end breadcrumb-variables
+
+// Carousel
+
+// scss-docs-start carousel-variables
+$carousel-control-color: $white !default;
+$carousel-control-width: 15% !default;
+$carousel-control-opacity: .5 !default;
+$carousel-control-hover-opacity: .9 !default;
+$carousel-control-transition: opacity .15s ease !default;
+
+$carousel-indicator-width: 30px !default;
+$carousel-indicator-height: 3px !default;
+$carousel-indicator-hit-area-height: 10px !default;
+$carousel-indicator-spacer: 3px !default;
+$carousel-indicator-opacity: .5 !default;
+$carousel-indicator-active-bg: $white !default;
+$carousel-indicator-active-opacity: 1 !default;
+$carousel-indicator-transition: opacity .6s ease !default;
+
+$carousel-caption-width: 70% !default;
+$carousel-caption-color: $white !default;
+$carousel-caption-padding-y: 1.25rem !default;
+$carousel-caption-spacer: 1.25rem !default;
+
+$carousel-control-icon-width: 2rem !default;
+
+$carousel-control-prev-icon-bg: url("data:image/svg+xml,") !default;
+$carousel-control-next-icon-bg: url("data:image/svg+xml,") !default;
+
+$carousel-transition-duration: .6s !default;
+$carousel-transition: transform $carousel-transition-duration ease-in-out !default; // Define transform transition first if using multiple transitions (e.g., `transform 2s ease, opacity .5s ease-out`)
+// scss-docs-end carousel-variables
+
+// scss-docs-start carousel-dark-variables
+$carousel-dark-indicator-active-bg: $black !default;
+$carousel-dark-caption-color: $black !default;
+$carousel-dark-control-icon-filter: invert(1) grayscale(100) !default;
+// scss-docs-end carousel-dark-variables
+
+
+// Spinners
+
+// scss-docs-start spinner-variables
+$spinner-width: 2rem !default;
+$spinner-height: $spinner-width !default;
+$spinner-vertical-align: -.125em !default;
+$spinner-border-width: .25em !default;
+$spinner-animation-speed: .75s !default;
+
+$spinner-width-sm: 1rem !default;
+$spinner-height-sm: $spinner-width-sm !default;
+$spinner-border-width-sm: .2em !default;
+// scss-docs-end spinner-variables
+
+
+// Close
+
+// scss-docs-start close-variables
+$btn-close-width: 1em !default;
+$btn-close-height: $btn-close-width !default;
+$btn-close-padding-x: .25em !default;
+$btn-close-padding-y: $btn-close-padding-x !default;
+$btn-close-color: $black !default;
+$btn-close-bg: url("data:image/svg+xml,") !default;
+$btn-close-focus-shadow: $focus-ring-box-shadow !default;
+$btn-close-opacity: .5 !default;
+$btn-close-hover-opacity: .75 !default;
+$btn-close-focus-opacity: 1 !default;
+$btn-close-disabled-opacity: .25 !default;
+$btn-close-white-filter: invert(1) grayscale(100%) brightness(200%) !default;
+// scss-docs-end close-variables
+
+
+// Offcanvas
+
+// scss-docs-start offcanvas-variables
+$offcanvas-padding-y: $modal-inner-padding !default;
+$offcanvas-padding-x: $modal-inner-padding !default;
+$offcanvas-horizontal-width: 400px !default;
+$offcanvas-vertical-height: 30vh !default;
+$offcanvas-transition-duration: .3s !default;
+$offcanvas-border-color: $modal-content-border-color !default;
+$offcanvas-border-width: $modal-content-border-width !default;
+$offcanvas-title-line-height: $modal-title-line-height !default;
+$offcanvas-bg-color: $body-bg !default;
+$offcanvas-color: $body-color !default;
+$offcanvas-box-shadow: $modal-content-box-shadow-xs !default;
+$offcanvas-backdrop-bg: $modal-backdrop-bg !default;
+$offcanvas-backdrop-opacity: $modal-backdrop-opacity !default;
+// scss-docs-end offcanvas-variables
+
+// Code
+
+$code-font-size: $small-font-size !default;
+// Amount intentionally matches mixture amount of shiny::inputPanel()
+// https://github.com/rstudio/shiny/blob/4eeb4a1/inst/www/shared/shiny_scss/bootstrap.scss#L25
+$code-bg: $body-emphasis-color !default;
+$code-color: black !default;
+$code-color-dark: white !default;
+
+$kbd-padding-y: .1875rem !default;
+$kbd-padding-x: .375rem !default;
+$kbd-font-size: $code-font-size !default;
+$kbd-color: $body-bg !default;
+$kbd-bg: $body-color !default;
+$nested-kbd-font-weight: null !default; // Deprecated in v5.2.0, removing in v6
+
+$pre-bg: $code-bg !default;
+$pre-color: $body-emphasis-color !default;
+$pre-line-height: $line-height-base !default;
+$font-family-base: "Source Sans Pro";
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+// quarto-scss-analysis-annotation { "origin": "'mixins' section from format" }
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+// Toggles
+//
+// Used in conjunction with global variables to enable certain theme features.
+
+// Vendor
+@import "vendor/rfs";
+
+// Deprecate
+@import "mixins/deprecate";
+
+// Helpers
+@import "mixins/breakpoints";
+@import "mixins/color-mode";
+@import "mixins/color-scheme";
+@import "mixins/image";
+@import "mixins/resize";
+@import "mixins/visually-hidden";
+@import "mixins/reset-text";
+@import "mixins/text-truncate";
+
+// Utilities
+@import "mixins/utilities";
+
+// Components
+@import "mixins/backdrop";
+@import "mixins/buttons";
+@import "mixins/caret";
+@import "mixins/pagination";
+@import "mixins/lists";
+@import "mixins/forms";
+@import "mixins/table-variants";
+
+// Skins
+@import "mixins/border-radius";
+@import "mixins/box-shadow";
+@import "mixins/gradients";
+@import "mixins/transition";
+
+// Layout
+@import "mixins/clearfix";
+@import "mixins/container";
+@import "mixins/grid";
+
+@mixin bslib-breakpoints-css-vars(
+ $breakpoint-var,
+ $breakpoints,
+ $allow-cascade: false
+) {
+ @each $breakpoint in $breakpoints {
+ @if not $allow-cascade {
+ --#{$breakpoint-var}--#{$breakpoint}: unset;
+ }
+
+ @include media-breakpoint-up(#{$breakpoint}) {
+ &.#{$breakpoint-var}--#{$breakpoint} {
+ --#{$breakpoint-var}: var(--#{$breakpoint-var}--#{$breakpoint});
+ }
+ }
+ }
+}
+
+
+// Intentionally replicates Bootstrap's %heading placeholder
+// https://github.com/twbs/bootstrap/blob/2c7f88/scss/_reboot.scss#L83-L96
+@mixin bootstrap-heading-font-and-spacing($font-size) {
+ @include font-size($font-size);
+ margin-top: 0; // 1
+ margin-bottom: $headings-margin-bottom;
+ font-family: $headings-font-family;
+ font-style: $headings-font-style;
+ font-weight: $headings-font-weight;
+ line-height: $headings-line-height;
+
+}
+
+@mixin bootstrap-heading($font-size) {
+ @include bootstrap-heading-font-and-spacing($font-size);
+ color: var(--#{$prefix}heading-color);
+}
+
+
+// quarto-scss-analysis-annotation { "origin": "'mixins' section from Quarto" }
+
+
+
+
+
+
+
+
+
+@mixin shiny-date-range {
+ .input-daterange {
+ width: inherit;
+ input[type="text"] {
+ height: 2.4em;
+ width: 10em;
+ }
+
+ .input-group-addon {
+ height: auto;
+ padding: 0;
+ margin-left: -5px !important;
+ margin-right: -5px;
+
+ .input-group-text {
+ padding-top: 0;
+ padding-bottom: 0;
+ height: 100%;
+ }
+ }
+ }
+}
+
+@mixin shiny-text-input {
+ input[type="text"] {
+ line-height: 1;
+ width: inherit;
+ }
+}
+
+@mixin shiny-input-checkboxgroup {
+ .shiny-input-checkboxgroup {
+ > label {
+ margin-top: $dashboard-card-toolbar-top-margin;
+ }
+ > .shiny-options-group {
+ margin-top: 0;
+ align-items: baseline;
+ }
+ }
+}
+
+@mixin shiny-input-radiogroup {
+ .shiny-input-radiogroup {
+ > label {
+ margin-top: $dashboard-card-toolbar-top-margin;
+ }
+ }
+
+ .shiny-input-radiogroup > .shiny-options-group {
+ align-items: baseline;
+ margin-top: 0;
+ > .radio {
+ margin-right: 0.3em;
+ }
+ }
+}
+
+@mixin shiny-input-checkbox {
+ div.checkbox {
+ margin-bottom: 0px;
+ }
+
+ > .checkbox:first-child {
+ margin-top: $dashboard-card-toolbar-top-margin;
+ }
+}
+
+@mixin shiny-input-slider {
+ span.irs.irs--shiny {
+ width: 10em;
+ .irs-line {
+ top: 9px;
+ }
+ .irs-min,
+ .irs-max,
+ .irs-from,
+ .irs-to,
+ .irs-single {
+ top: 20px;
+ }
+ .irs-bar {
+ top: 8px;
+ }
+ .irs-handle {
+ top: 0px;
+ }
+ }
+}
+
+@mixin shiny-input-select {
+ .form-select {
+ padding-top: 0.2em;
+ padding-bottom: 0.2em;
+ }
+ .shiny-input-select {
+ min-width: 6em;
+ }
+}
+
+@mixin shiny-input-container {
+ .shiny-input-container {
+ padding-bottom: 0;
+ margin-bottom: 0;
+ > * {
+ flex-shrink: 0;
+ flex-grow: 0;
+ }
+ }
+
+ .form-group.shiny-input-container:not([role="group"]) > label {
+ margin-bottom: 0;
+ }
+
+ .shiny-input-container.no-baseline {
+ align-items: start;
+ padding-top: $dashboard-card-toolbar-top-margin;
+ }
+
+ .shiny-input-container {
+ display: flex;
+ align-items: baseline;
+
+ label {
+ padding-right: 0.4em;
+ }
+
+ .bslib-input-switch {
+ margin-top: $dashboard-card-toolbar-top-margin;
+ }
+ }
+}
+
+@mixin shiny-toolbar-customizations {
+ @include toolbar-layout();
+ @include shiny-input-container();
+ @include shiny-text-input();
+ @include shiny-date-range();
+ @include shiny-input-slider();
+ @include shiny-input-checkboxgroup();
+ @include shiny-input-radiogroup();
+ @include shiny-input-select();
+ @include shiny-input-checkbox();
+}
+
+@mixin toolbar-layout {
+ .cell-output-display {
+ display: flex;
+ }
+
+ .shiny-input-container {
+ padding-bottom: 0.5em;
+ margin-bottom: 0.5em;
+ width: inherit;
+
+ > .checkbox:first-child {
+ margin-top: $dashboard-card-toolbar-top-margin;
+ }
+ }
+
+ > *:last-child {
+ margin-right: 0;
+ }
+
+ > * > * {
+ margin-right: 1em;
+ align-items: baseline;
+ > a {
+ text-decoration: none;
+ margin-top: auto;
+ margin-bottom: auto;
+ }
+ }
+}
+
+@mixin itables {
+ .itables {
+ @include media-breakpoint-down(md) {
+ div.dataTables_wrapper div.dataTables_length,
+ div.dataTables_wrapper div.dataTables_info,
+ div.dataTables_wrapper div.dataTables_paginate {
+ text-align: initial;
+ }
+
+ div.dataTables_wrapper div.dataTables_filter {
+ text-align: right;
+ }
+
+ div.dataTables_wrapper div.dataTables_paginate ul.pagination {
+ justify-content: initial;
+ }
+ }
+
+ .dataTables_wrapper {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: space-between;
+ align-items: center;
+ padding-top: 0;
+ table {
+ flex-shrink: 0;
+ }
+
+ // The buttons control (download/copy)
+ .dt-buttons {
+ margin-bottom: 0.5em;
+ margin-left: auto;
+
+ width: fit-content;
+
+ float: right;
+ &.btn-group {
+ background: $body-bg;
+ border: none;
+ }
+
+ .btn-secondary {
+ background-color: $body-bg;
+ background-image: none;
+ border: solid $border-color $border-width;
+ padding: 0.2em 0.7em;
+ }
+
+ .btn span {
+ font-size: 0.8em;
+ color: $body-color;
+ }
+ }
+
+ // The number of items (info) text
+ .dataTables_info {
+ margin-left: 0.5em;
+ margin-bottom: 0.5em;
+
+ @include media-breakpoint-up(md) {
+ font-size: 0.875em;
+ }
+ @include media-breakpoint-down(md) {
+ font-size: 0.8em;
+ }
+
+ padding-top: 0;
+ }
+
+ // The table filter / search
+ .dataTables_filter {
+ margin-bottom: 0.5em;
+ font-size: 0.875em;
+ input[type="search"] {
+ padding: 1px 5px 1px 5px;
+ font-size: 0.875em;
+ }
+ }
+
+ // The pagination size selector
+ .dataTables_length {
+ flex-basis: 1 1 50%;
+ margin-bottom: 0.5em;
+ font-size: 0.875em;
+ select {
+ padding: 0.4em 3em 0.4em 0.5em;
+ font-size: 0.875em;
+ margin-left: 0.2em;
+ margin-right: 0.2em;
+ }
+ }
+
+ // The pagination control
+ .dataTables_paginate {
+ @include media-breakpoint-up(md) {
+ margin-left: auto;
+ }
+ flex-shrink: 0;
+
+ ul.pagination .paginate_button .page-link {
+ font-size: 0.8em;
+ }
+ }
+ }
+ }
+}
+
+@mixin observable-toolbar-inputs {
+ form {
+ width: fit-content;
+
+ label {
+ padding-top: 0.2em;
+ padding-bottom: 0.2em;
+ width: fit-content;
+ }
+
+ input[type="date"] {
+ width: fit-content;
+ }
+
+ input[type="color"] {
+ width: 3em;
+ }
+
+ button {
+ padding: 0.4em;
+ }
+
+ select {
+ width: fit-content;
+ }
+ }
+}
+
+@mixin observable-sidebar-inputs {
+ form {
+ flex-direction: column;
+ align-items: start;
+ margin-bottom: 1em;
+
+ div[class*="oi-"][class$="-input"] {
+ flex-direction: column;
+ }
+
+ &[class*="oi-"][class$="-toggle"] {
+ flex-direction: row-reverse;
+ align-items: center;
+ justify-content: start;
+ }
+
+ input[type="range"] {
+ margin-top: 0.5em;
+ margin-right: 0.8em;
+ margin-left: 1em;
+ }
+ }
+ label {
+ width: fit-content;
+ }
+}
+
+
+@mixin listing-category {
+ display: flex;
+ flex-wrap: wrap;
+ padding-bottom: 5px;
+
+ .listing-category {
+ color: listing-override-value($theme-name, "category-color", $text-muted);
+
+ $val: listing-override-value($theme-name, "category-border", null);
+ @if $val != null {
+ border: $val;
+ } @else {
+ border: solid 1px $border-color;
+ }
+
+ border-radius: $border-radius;
+ text-transform: uppercase;
+ font-size: 0.65em;
+ padding-left: 0.5em;
+ padding-right: 0.5em;
+ padding-top: 0.15em;
+ padding-bottom: 0.15em;
+ cursor: pointer;
+ margin-right: 4px;
+ margin-bottom: 4px;
+ }
+}
+
+// Provide theme level customization of the listing inputs
+@mixin input-group {
+}
+
+@mixin input-form-control {
+ $val: listing-override-value($theme-name, "form-background-color", null);
+ @if $val != null {
+ background-color: $val;
+ }
+ $val: listing-override-value($theme-name, "form-color", null);
+ @if $val != null {
+ color: $val;
+ }
+}
+
+@mixin input-group-text {
+ $val: listing-override-value($theme-name, "input-group-border-radius", null);
+ @if $val != null {
+ border-radius: $val;
+ }
+
+ $val: listing-override-value($theme-name, "input-group-border", null);
+ @if $val != null {
+ border: $val;
+ }
+
+ $val: listing-override-value($theme-name, "input-text-margin", null);
+ @if $val != null {
+ margin: $val;
+ }
+ $val: listing-override-value(
+ $theme-name,
+ "input-text-background-color",
+ null
+ );
+ @if $val != null {
+ background-color: $val;
+ }
+ $val: listing-override-value($theme-name, "input-text-color", null);
+ @if $val != null {
+ color: $val;
+ }
+}
+
+@mixin input-placeholder {
+ $val: listing-override-value(
+ $theme-name,
+ "input-text-placeholder-color",
+ null
+ );
+ @if $val != null {
+ ::placeholder {
+ color: $val;
+ }
+ }
+}
+
+
+@mixin responsive-buttons {
+ display: flex;
+ @include media-breakpoint-up(lg) {
+ flex-direction: row;
+ column-gap: 0.8em;
+ row-gap: 15px;
+ flex-wrap: wrap;
+ }
+ @include media-breakpoint-down(lg) {
+ flex-direction: column;
+ row-gap: 1em;
+ width: 100%;
+ padding-bottom: 1.5em;
+ }
+}
+
+@mixin responsive-button {
+ @include media-breakpoint-up(lg) {
+ font-size: 0.8em;
+ padding: 0.25em 0.5em;
+ border-radius: 4px;
+ }
+
+ @include media-breakpoint-down(lg) {
+ font-size: 1.1em;
+ padding: 0.5em 0.5em;
+ text-align: center;
+ border-radius: 6px;
+ }
+
+ color: lighten($body-color, 20%);
+ text-decoration: none;
+ &:hover {
+ color: $link-color;
+ }
+
+ border: solid 1px;
+
+ i.bi {
+ margin-right: 0.15em;
+ }
+}
+
+@mixin image-shapes {
+ img.round {
+ border-radius: 50%;
+ }
+
+ img.rounded {
+ border-radius: 10px;
+ }
+}
+
+
+
+
+@mixin body-secondary {
+ @if variable-exists(body-secondary) {
+ color: $body-secondary;
+ } @else {
+ color: theme-dim($body-color, 25%);
+ }
+}
+
+@mixin page-columns {
+ display: grid;
+ gap: 0;
+}
+
+@mixin column-spanning-element {
+ table {
+ background: $body-bg;
+ }
+}
+
+// GRID CASCADE
+$grid-body-column-max: $grid-body-width !default;
+$grid-body-column-min: quarto-math.min(500px, $grid-body-column-max) !default;
+
+// Margin variables
+$grid-page-gutter: $grid-column-gutter-width !default;
+$grid-page-gutter-start: $grid-page-gutter !default;
+$grid-page-gutter-end: $grid-page-gutter !default;
+
+$grid-body-gutter: $grid-column-gutter-width !default;
+$grid-body-gutter-start: $grid-body-gutter !default;
+$grid-body-gutter-end: $grid-body-gutter !default;
+
+/* FLOATING GRID */
+$grid-page-gutter-float: 5fr !default;
+$grid-float-sidebar-width: $grid-sidebar-width !default;
+$grid-float-margin-width: $grid-margin-width !default;
+
+/* Float Wide Default Grid */
+
+// Margins
+$grid-float-wide-page-gutter-start: $grid-page-gutter-start !default;
+$grid-float-wide-page-gutter-end: $grid-page-gutter-end !default;
+$grid-float-wide-body-gutter-start: $grid-body-gutter-start !default;
+$grid-float-wide-body-gutter-end: $grid-body-gutter-end !default;
+$grid-float-wide-sidebar-gutter: $grid-page-gutter-float !default;
+$grid-float-wide-margin-gutter: $grid-page-gutter-float !default;
+
+// Sidebars
+$grid-float-wide-sidebar-width: $grid-float-sidebar-width !default;
+$grid-float-wide-sidebar-seg1: minmax(
+ #{0.1 * $grid-float-wide-sidebar-width},
+ #{0.2 * $grid-float-wide-sidebar-width}
+) !default;
+$grid-float-wide-sidebar-seg2: minmax(
+ #{0.2 * $grid-float-wide-sidebar-width},
+ #{0.6 * $grid-float-wide-sidebar-width}
+) !default;
+$grid-float-wide-sidebar-seg3: minmax(
+ #{0.1 * $grid-float-wide-sidebar-width},
+ #{0.2 * $grid-float-wide-sidebar-width}
+) !default;
+
+// Margins
+$grid-float-wide-margin-width: $grid-float-margin-width !default;
+$grid-float-wide-margin-seg3: minmax(
+ #{0.1 * $grid-float-wide-margin-width},
+ #{0.2 * $grid-float-wide-margin-width}
+) !default;
+$grid-float-wide-margin-seg2: minmax(
+ #{0.2 * $grid-float-wide-margin-width},
+ #{0.6 * $grid-float-wide-margin-width}
+) !default;
+$grid-float-wide-margin-seg1: minmax(
+ #{0.1 * $grid-float-wide-margin-width},
+ #{0.2 * $grid-float-wide-margin-width}
+) !default;
+
+// Body
+$grid-float-wide-body-column-min: $grid-body-column-min !default;
+$grid-float-wide-body-column-max: $grid-body-column-max !default;
+$grid-float-wide-body: minmax(
+ $grid-float-wide-body-column-min,
+ calc(
+ #{$grid-float-wide-body-column-max} - #{$grid-float-wide-page-gutter-start +
+ $grid-float-wide-page-gutter-end}
+ )
+) !default;
+
+/* Float Wide Slim Content Grid */
+
+// Margins
+$grid-float-wide-slim-page-gutter-start: $grid-page-gutter-start !default;
+$grid-float-wide-slim-page-gutter-end: $grid-page-gutter-end !default;
+$grid-float-wide-slim-body-gutter-start: $grid-body-gutter-start !default;
+$grid-float-wide-slim-body-gutter-end: $grid-body-gutter-end !default;
+$grid-float-wide-slim-sidebar-gutter: $grid-page-gutter-float !default;
+$grid-float-wide-slim-margin-gutter: $grid-page-gutter-float !default;
+
+// Sidebars
+$grid-float-wide-slim-sidebar-width: $grid-float-sidebar-width !default;
+$grid-float-wide-slim-sidebar-seg1: 0.2 * $grid-float-wide-slim-sidebar-width !default;
+$grid-float-wide-slim-sidebar-seg2: minmax(
+ #{0.2 * $grid-float-wide-slim-sidebar-width},
+ #{0.6 * $grid-float-wide-slim-sidebar-width}
+) !default;
+$grid-float-wide-slim-sidebar-seg3: 0.2 * $grid-float-wide-slim-sidebar-width !default;
+
+// Margins
+$grid-float-wide-slim-margin-width: $grid-float-margin-width !default;
+$grid-float-wide-slim-margin-seg3: 0.2 * $grid-float-wide-slim-margin-width !default;
+$grid-float-wide-slim-margin-seg2: minmax(
+ #{0.2 * $grid-float-wide-slim-margin-width},
+ #{0.6 * $grid-float-wide-slim-margin-width}
+) !default;
+$grid-float-wide-slim-margin-seg1: 0.2 * $grid-float-wide-slim-margin-width !default;
+
+// Body
+$grid-float-wide-slim-body-column-min: $grid-body-column-min - 50px !default;
+$grid-float-wide-slim-body-column-max: $grid-body-column-max - 50px !default;
+$grid-float-wide-slim-body: minmax(
+ $grid-float-wide-slim-body-column-min,
+ calc(
+ #{$grid-float-wide-slim-body-column-max} - #{$grid-float-wide-slim-page-gutter-start +
+ $grid-float-wide-slim-page-gutter-end}
+ )
+) !default;
+
+/* Float Wide Full Grid */
+// Margins
+$grid-float-wide-full-page-gutter-start: $grid-page-gutter-start !default;
+$grid-float-wide-full-page-gutter-end: $grid-page-gutter-end !default;
+$grid-float-wide-full-body-gutter-start: $grid-body-gutter-start !default;
+$grid-float-wide-full-body-gutter-end: $grid-body-gutter-end !default;
+$grid-float-wide-full-sidebar-gutter: $grid-page-gutter-float !default;
+$grid-float-wide-full-margin-gutter: $grid-page-gutter-float !default;
+
+// Sidebars
+$grid-float-wide-full-sidebar-width: $grid-float-sidebar-width !default;
+$grid-float-wide-full-sidebar-seg1: 0.2 * $grid-float-wide-full-sidebar-width !default;
+$grid-float-wide-full-sidebar-seg2: minmax(
+ #{0.2 * $grid-float-wide-full-sidebar-width},
+ #{0.6 * $grid-float-wide-full-sidebar-width}
+) !default;
+$grid-float-wide-full-sidebar-seg3: 0.2 * $grid-float-wide-full-sidebar-width !default;
+
+// Margins
+$grid-float-wide-full-margin-width: $grid-float-margin-width !default;
+$grid-float-wide-full-margin-seg3: 0.2 * $grid-float-wide-full-margin-width !default;
+$grid-float-wide-full-margin-seg2: minmax(
+ #{0.2 * $grid-float-wide-full-margin-width},
+ #{0.6 * $grid-float-wide-full-margin-width}
+) !default;
+$grid-float-wide-full-margin-seg1: 0.2 * $grid-float-wide-full-margin-width !default;
+
+// Body
+$grid-float-wide-full-body-column-min: $grid-body-column-min !default;
+$grid-float-wide-full-body-column-max: $grid-body-column-max !default;
+$grid-float-wide-full-body: minmax(
+ $grid-float-wide-full-body-column-min,
+ calc(
+ #{$grid-float-wide-full-body-column-max} - #{$grid-float-wide-full-page-gutter-start +
+ $grid-float-wide-full-page-gutter-end}
+ )
+) !default;
+
+/* Float Wide Listing Grid */
+// Margins
+$grid-float-wide-listing-page-gutter-start: $grid-page-gutter-start !default;
+$grid-float-wide-listing-page-gutter-end: $grid-page-gutter-end !default;
+$grid-float-wide-listing-body-gutter-start: $grid-body-gutter-start !default;
+$grid-float-wide-listing-body-gutter-end: $grid-body-gutter-end !default;
+$grid-float-wide-listing-sidebar-gutter: $grid-page-gutter-float !default;
+$grid-float-wide-listing-margin-gutter: $grid-page-gutter-float !default;
+
+// Sidebars
+$grid-float-wide-listing-sidebar-width: $grid-float-sidebar-width !default;
+$grid-float-wide-listing-sidebar-seg1: minmax(
+ #{0.1 * $grid-float-wide-listing-sidebar-width},
+ #{0.2 * $grid-float-wide-listing-sidebar-width}
+) !default;
+$grid-float-wide-listing-sidebar-seg2: minmax(
+ #{0.2 * $grid-float-wide-listing-sidebar-width},
+ #{0.6 * $grid-float-wide-listing-sidebar-width}
+) !default;
+$grid-float-wide-listing-sidebar-seg3: minmax(
+ #{0.1 * $grid-float-wide-listing-sidebar-width},
+ #{0.2 * $grid-float-wide-listing-sidebar-width}
+) !default;
+
+// Margins
+$grid-float-wide-listing-margin-width: $grid-float-margin-width !default;
+$grid-float-wide-listing-margin-seg3: minmax(
+ #{0.1 * $grid-float-wide-listing-margin-width},
+ #{0.2 * $grid-float-wide-listing-margin-width}
+) !default;
+$grid-float-wide-listing-margin-seg2: minmax(
+ #{0.2 * $grid-float-wide-listing-margin-width},
+ #{0.6 * $grid-float-wide-listing-margin-width}
+) !default;
+$grid-float-wide-listing-margin-seg1: minmax(
+ #{0.1 * $grid-float-wide-listing-margin-width},
+ #{0.2 * $grid-float-wide-listing-margin-width}
+) !default;
+
+// Body
+$grid-float-wide-listing-body-column-min: $grid-body-column-min !default;
+$grid-float-wide-listing-body-column-max: $grid-body-column-max !default;
+$grid-float-wide-listing-body: minmax(
+ $grid-float-wide-listing-body-column-min,
+ calc(
+ #{$grid-float-wide-listing-body-column-max} - #{$grid-float-wide-listing-page-gutter-start +
+ $grid-float-wide-listing-page-gutter-end}
+ )
+) !default;
+
+/* Float Mid Default Grid */
+// Margins
+$grid-float-mid-page-gutter-start: $grid-page-gutter-start !default;
+$grid-float-mid-page-gutter-end: $grid-page-gutter-end !default;
+$grid-float-mid-body-gutter-start: $grid-body-gutter-start !default;
+$grid-float-mid-body-gutter-end: $grid-body-gutter-end !default;
+$grid-float-mid-sidebar-gutter: $grid-page-gutter-float !default;
+$grid-float-mid-margin-gutter: $grid-page-gutter-float !default;
+
+// No sidebar, only margins
+$grid-float-mid-margin-width: $grid-float-margin-width !default;
+$grid-float-mid-margin-seg3: 0.2 * $grid-float-mid-margin-width !default;
+$grid-float-mid-margin-seg2: minmax(
+ #{0.3 * $grid-float-mid-margin-width},
+ #{0.6 * $grid-float-mid-margin-width}
+) !default;
+$grid-float-mid-margin-seg1: 0.1 * $grid-float-mid-margin-width !default;
+
+// Body
+$grid-float-mid-body-column-min: $grid-body-column-min !default;
+$grid-float-mid-body-column-max: $grid-body-column-max - 50px !default;
+$grid-float-mid-body: minmax(
+ $grid-float-mid-body-column-min,
+ calc(
+ #{$grid-float-mid-body-column-max} - #{$grid-float-mid-page-gutter-start + $grid-float-mid-page-gutter-end}
+ )
+) !default;
+
+/* Float Mid Slim Content Grid */
+// Margins
+$grid-float-mid-slim-page-gutter-start: $grid-page-gutter-start !default;
+$grid-float-mid-slim-page-gutter-end: $grid-page-gutter-end !default;
+$grid-float-mid-slim-body-gutter-start: 2 *
+ quarto-math.div($grid-body-gutter-start, 3) !default;
+$grid-float-mid-slim-body-gutter-end: $grid-body-gutter-end !default;
+$grid-float-mid-slim-sidebar-gutter: $grid-page-gutter-float !default;
+$grid-float-mid-slim-margin-gutter: 0.8 * $grid-page-gutter-float !default;
+
+// No sidebar, only margins
+$grid-float-mid-slim-margin-width: $grid-float-margin-width !default;
+$grid-float-mid-slim-margin-seg3: 0.14 * $grid-float-mid-slim-margin-width !default;
+$grid-float-mid-slim-margin-seg2: minmax(
+ #{0.3 * $grid-float-mid-slim-margin-width},
+ #{0.58 * $grid-float-mid-slim-margin-width}
+) !default;
+$grid-float-mid-slim-margin-seg1: 0.14 * $grid-float-mid-slim-margin-width !default;
+
+// Body
+$grid-float-mid-slim-body-column-min: $grid-body-column-min !default;
+$grid-float-mid-slim-body-column-max: $grid-body-column-max - 50px !default;
+$grid-float-mid-slim-body: minmax(
+ $grid-float-mid-slim-body-column-min,
+ calc(
+ #{$grid-float-mid-slim-body-column-max} - #{$grid-float-mid-slim-page-gutter-start +
+ $grid-float-mid-slim-page-gutter-end}
+ )
+) !default;
+
+/* Float Mid Full Content Grid */
+// Margins
+$grid-float-mid-full-page-gutter-start: $grid-page-gutter-start !default;
+$grid-float-mid-full-page-gutter-end: $grid-page-gutter-end !default;
+$grid-float-mid-full-body-gutter-start: 2 *
+ quarto-math.div($grid-body-gutter-start, 3) !default;
+$grid-float-mid-full-body-gutter-end: $grid-body-gutter-end !default;
+$grid-float-mid-full-sidebar-gutter: $grid-page-gutter-float !default;
+$grid-float-mid-full-margin-gutter: 0.8 * $grid-page-gutter-float !default;
+
+// No sidebar or margins
+
+// Body
+$grid-float-mid-full-body-column-min: $grid-body-column-min !default;
+$grid-float-mid-full-body-column-max: $grid-body-column-max !default;
+$grid-float-mid-full-body: minmax(
+ $grid-float-mid-full-body-column-min,
+ calc(
+ #{$grid-float-mid-full-body-column-max} - #{$grid-float-mid-full-page-gutter-start +
+ $grid-float-mid-full-page-gutter-end}
+ )
+) !default;
+
+/* Float Mid Listing Content Grid */
+// Margins
+$grid-float-mid-listing-page-gutter-start: $grid-page-gutter-start !default;
+$grid-float-mid-listing-page-gutter-end: $grid-page-gutter-end !default;
+$grid-float-mid-listing-body-gutter-start: 2 *
+ quarto-math.div($grid-body-gutter-start, 3) !default;
+$grid-float-mid-listing-body-gutter-end: $grid-body-gutter-end !default;
+$grid-float-mid-listing-sidebar-gutter: $grid-page-gutter-float !default;
+$grid-float-mid-listing-margin-gutter: 0.8 * $grid-page-gutter-float !default;
+
+// No sidebar, only margins
+$grid-float-mid-listing-margin-width: $grid-float-margin-width !default;
+$grid-float-mid-listing-margin-seg3: 0.2 * $grid-float-mid-listing-margin-width !default;
+$grid-float-mid-listing-margin-seg2: minmax(
+ #{0.3 * $grid-float-mid-listing-margin-width},
+ #{0.6 * $grid-float-mid-listing-margin-width}
+) !default;
+$grid-float-mid-listing-margin-seg1: 0.1 * $grid-float-mid-listing-margin-width !default;
+
+// Body
+$grid-float-mid-listing-body-column-min: $grid-body-column-min !default;
+$grid-float-mid-listing-body-column-max: $grid-body-column-max - 50px !default;
+$grid-float-mid-listing-body: minmax(
+ $grid-float-mid-listing-body-column-min,
+ calc(
+ #{$grid-float-mid-listing-body-column-max} - #{$grid-float-mid-listing-page-gutter-start +
+ $grid-float-mid-listing-page-gutter-end}
+ )
+) !default;
+
+/* DOCKED GRID */
+$grid-docked-sidebar-width: $grid-sidebar-width !default;
+$grid-docked-margin-width: $grid-margin-width !default;
+$grid-docked-body-width: $grid-body-column-max + 200px !default;
+
+/* Docked Wide Default Grid */
+
+// Margins
+$grid-docked-wide-page-gutter-start: $grid-page-gutter-start !default;
+$grid-docked-wide-page-gutter-end: $grid-page-gutter-end !default;
+$grid-docked-wide-body-gutter-start: $grid-body-gutter-start !default;
+$grid-docked-wide-body-gutter-end: $grid-body-gutter-end !default;
+$grid-docked-wide-margin-gutter: 5fr !default;
+
+// Sidebars
+$grid-docked-wide-sidebar-width: $grid-docked-sidebar-width !default;
+$grid-docked-wide-sidebar-seg1: minmax(
+ #{0.2 * $grid-docked-wide-sidebar-width},
+ #{0.4 * $grid-docked-wide-sidebar-width}
+) !default;
+$grid-docked-wide-sidebar-seg2: 0.2 * $grid-docked-wide-sidebar-width !default;
+$grid-docked-wide-sidebar-seg3: 0.2 * $grid-docked-wide-sidebar-width !default;
+
+// Margins
+$grid-docked-wide-margin-width: $grid-docked-margin-width !default;
+$grid-docked-wide-margin-seg3: 0.2 * $grid-docked-wide-margin-width !default;
+$grid-docked-wide-margin-seg2: minmax(
+ #{0.2 * $grid-docked-wide-margin-width},
+ #{0.4 * $grid-docked-wide-margin-width}
+) !default;
+$grid-docked-wide-margin-seg1: 0.2 * $grid-docked-wide-margin-width !default;
+
+// Body
+$grid-docked-wide-body-column-min: $grid-body-column-min !default;
+$grid-docked-wide-body-column-max: $grid-docked-body-width !default;
+$grid-docked-wide-body: minmax(
+ $grid-docked-wide-body-column-min,
+ calc(
+ #{$grid-docked-wide-body-column-max} - #{$grid-docked-wide-page-gutter-start +
+ $grid-docked-wide-page-gutter-end}
+ )
+) !default;
+
+/* Docked Slim Content Grid */
+
+// Margins
+$grid-docked-wide-slim-page-gutter-start: $grid-page-gutter-start !default;
+$grid-docked-wide-slim-page-gutter-end: $grid-page-gutter-end !default;
+$grid-docked-wide-slim-body-gutter-start: $grid-body-gutter-start !default;
+$grid-docked-wide-slim-body-gutter-end: $grid-body-gutter-end !default;
+$grid-docked-wide-slim-margin-gutter: 5fr !default;
+
+// Sidebars
+$grid-docked-wide-slim-sidebar-width: $grid-docked-sidebar-width !default;
+$grid-docked-wide-slim-sidebar-seg1: minmax(
+ #{0.2 * $grid-docked-wide-slim-sidebar-width},
+ #{0.4 * $grid-docked-wide-slim-sidebar-width}
+) !default;
+$grid-docked-wide-slim-sidebar-seg2: 0.2 * $grid-docked-wide-slim-sidebar-width !default;
+$grid-docked-wide-slim-sidebar-seg3: 0.2 * $grid-docked-wide-slim-sidebar-width !default;
+
+// Margins
+$grid-docked-wide-slim-margin-width: $grid-docked-margin-width !default;
+$grid-docked-wide-slim-margin-seg3: 0.2 * $grid-docked-wide-slim-margin-width !default;
+$grid-docked-wide-slim-margin-seg2: minmax(
+ #{0 * $grid-docked-wide-slim-margin-width},
+ #{0.8 * $grid-docked-wide-slim-margin-width}
+) !default;
+$grid-docked-wide-slim-margin-seg1: 0.2 * $grid-docked-wide-slim-margin-width !default;
+
+// Body
+$grid-docked-wide-slim-body-column-min: $grid-body-column-min - 50px !default;
+$grid-docked-wide-slim-body-column-max: $grid-body-column-max - 50px !default;
+$grid-docked-wide-slim-body: minmax(
+ $grid-docked-wide-slim-body-column-min,
+ calc(
+ #{$grid-docked-wide-slim-body-column-max} - #{$grid-docked-wide-slim-page-gutter-start +
+ $grid-docked-wide-slim-page-gutter-end}
+ )
+) !default;
+
+/* Docked Full Content Grid */
+
+// Margins
+$grid-docked-wide-full-page-gutter-start: $grid-page-gutter-start !default;
+$grid-docked-wide-full-body-gutter-start: $grid-body-gutter-start !default;
+$grid-docked-wide-full-body-gutter-end: $grid-body-gutter-end !default;
+$grid-docked-wide-full-margin-gutter: 5fr !default;
+$grid-docked-wide-full-page-gutter-end: $grid-page-gutter-end !default;
+
+// Sidebars
+$grid-docked-wide-full-sidebar-width: $grid-docked-sidebar-width !default;
+$grid-docked-wide-full-sidebar-seg1: minmax(
+ #{0.2 * $grid-docked-wide-full-sidebar-width},
+ #{0.4 * $grid-docked-wide-full-sidebar-width}
+) !default;
+$grid-docked-wide-full-sidebar-seg2: 0.2 * $grid-docked-wide-full-sidebar-width !default;
+$grid-docked-wide-full-sidebar-seg3: 0.2 * $grid-docked-wide-full-sidebar-width !default;
+
+// No Margins
+
+// Body
+$grid-docked-wide-full-body-column-min: $grid-body-column-min !default;
+$grid-docked-wide-full-body-column-max: $grid-docked-body-width !default;
+$grid-docked-wide-full-body: minmax(
+ $grid-docked-wide-full-body-column-min,
+ calc(
+ #{$grid-docked-wide-full-body-column-max} - #{$grid-docked-wide-full-page-gutter-start +
+ $grid-docked-wide-full-page-gutter-end}
+ )
+) !default;
+
+/* Docked Listing Grid */
+
+// Margins
+$grid-docked-wide-listing-page-gutter-start: $grid-page-gutter-start !default;
+$grid-docked-wide-listing-body-gutter-start: $grid-body-gutter-start !default;
+$grid-docked-wide-listing-body-gutter-end: $grid-body-gutter-end !default;
+$grid-docked-wide-listing-margin-gutter: 5fr !default;
+$grid-docked-wide-listing-page-gutter-end: $grid-page-gutter-end !default;
+
+// Sidebars
+$grid-docked-wide-listing-sidebar-width: $grid-docked-sidebar-width !default;
+$grid-docked-wide-listing-sidebar-seg1: minmax(
+ #{0.2 * $grid-docked-wide-listing-sidebar-width},
+ #{0.4 * $grid-docked-wide-listing-sidebar-width}
+) !default;
+$grid-docked-wide-listing-sidebar-seg2: 0.2 *
+ $grid-docked-wide-listing-sidebar-width !default;
+$grid-docked-wide-listing-sidebar-seg3: 0.2 *
+ $grid-docked-wide-listing-sidebar-width !default;
+
+// Margins
+$grid-docked-wide-listing-margin-width: $grid-docked-margin-width !default;
+$grid-docked-wide-listing-margin-seg3: 0.2 *
+ $grid-docked-wide-listing-margin-width !default;
+$grid-docked-wide-listing-margin-seg2: minmax(
+ #{0 * $grid-docked-wide-listing-margin-width},
+ #{0.8 * $grid-docked-wide-listing-margin-width}
+) !default;
+$grid-docked-wide-listing-margin-seg1: 0.2 *
+ $grid-docked-wide-listing-margin-width !default;
+
+// Body
+$grid-docked-wide-listing-body-column-min: $grid-body-column-min !default;
+$grid-docked-wide-listing-body-column-max: $grid-docked-body-width !default;
+$grid-docked-wide-listing-body: minmax(
+ $grid-docked-wide-listing-body-column-min,
+ calc(
+ #{$grid-docked-wide-listing-body-column-max} - #{$grid-docked-wide-listing-page-gutter-start +
+ $grid-docked-wide-listing-page-gutter-end}
+ )
+) !default;
+
+/* Docked Mid Default Grid */
+// Margins
+$grid-docked-mid-page-gutter-start: $grid-page-gutter-start !default;
+$grid-docked-mid-body-gutter-start: $grid-body-gutter-start !default;
+$grid-docked-mid-body-gutter-end: $grid-body-gutter-end !default;
+$grid-docked-mid-margin-gutter: 5fr !default;
+$grid-docked-mid-page-gutter-end: $grid-page-gutter-end !default;
+
+// No sidebar, only margins
+$grid-docked-mid-margin-width: $grid-docked-margin-width !default;
+$grid-docked-mid-margin-seg3: 0.2 * $grid-docked-mid-margin-width !default;
+$grid-docked-mid-margin-seg2: minmax(
+ #{0.1 * $grid-docked-mid-margin-width},
+ #{0.2 * $grid-docked-mid-margin-width}
+) !default;
+$grid-docked-mid-margin-seg1: 0.2 * $grid-docked-mid-margin-width !default;
+
+// Body
+$grid-docked-mid-body-column-min: $grid-body-column-min !default;
+$grid-docked-mid-body-column-max: $grid-body-column-max - 50px !default;
+$grid-docked-mid-body: minmax(
+ $grid-docked-mid-body-column-min,
+ calc(
+ #{$grid-docked-mid-body-column-max} - #{$grid-docked-mid-page-gutter-start +
+ $grid-docked-mid-page-gutter-end}
+ )
+) !default;
+
+/* Docked Mid Slim Content Grid */
+// Margins
+$grid-docked-mid-slim-page-gutter-start: $grid-page-gutter-start !default;
+$grid-docked-mid-slim-body-gutter-start: $grid-body-gutter-start !default;
+$grid-docked-mid-slim-body-gutter-end: $grid-body-gutter-end !default;
+$grid-docked-mid-slim-margin-gutter: 5fr !default;
+$grid-docked-mid-slim-page-gutter-end: $grid-page-gutter-end !default;
+
+// No sidebar, only margins
+$grid-docked-mid-slim-margin-width: $grid-docked-margin-width !default;
+$grid-docked-mid-slim-margin-seg3: 0.2 * $grid-docked-mid-slim-margin-width !default;
+$grid-docked-mid-slim-margin-seg2: minmax(
+ #{0.1 * $grid-docked-mid-slim-margin-width},
+ #{0.2 * $grid-docked-mid-slim-margin-width}
+) !default;
+$grid-docked-mid-slim-margin-seg1: 0.2 * $grid-docked-mid-slim-margin-width !default;
+
+// Body
+$grid-docked-mid-slim-body-column-min: $grid-body-column-min !default;
+$grid-docked-mid-slim-body-column-max: $grid-body-column-max - 50px !default;
+$grid-docked-mid-slim-body: minmax(
+ $grid-docked-mid-slim-body-column-min,
+ calc(
+ #{$grid-docked-mid-slim-body-column-max} - #{$grid-docked-mid-slim-page-gutter-start +
+ $grid-docked-mid-slim-page-gutter-end}
+ )
+) !default;
+
+/* Docked Mid Full Content Grid */
+// Margins
+$grid-docked-mid-full-page-gutter-start: $grid-page-gutter-start !default;
+$grid-docked-mid-full-body-gutter-start: $grid-body-gutter-start !default;
+$grid-docked-mid-full-body-gutter-end: $grid-body-gutter-end !default;
+$grid-docked-mid-full-margin-gutter: 5fr !default;
+$grid-docked-mid-full-page-gutter-end: $grid-page-gutter-end !default;
+
+// No sidebar or margins
+
+// Body
+$grid-docked-mid-full-body-column-min: $grid-body-column-min !default;
+$grid-docked-mid-full-body-column-max: $grid-docked-body-width !default;
+$grid-docked-mid-full-body: minmax(
+ $grid-docked-mid-full-body-column-min,
+ calc(
+ #{$grid-docked-mid-full-body-column-max} - #{$grid-docked-mid-full-page-gutter-start +
+ $grid-docked-mid-full-page-gutter-end}
+ )
+) !default;
+
+/* Float Mid Listing Content Grid */
+// Margins
+$grid-docked-mid-listing-page-gutter-start: $grid-page-gutter-start !default;
+$grid-docked-mid-listing-body-gutter-start: $grid-body-gutter-start !default;
+$grid-docked-mid-listing-body-gutter-end: $grid-body-gutter-end !default;
+$grid-docked-mid-listing-margin-gutter: $grid-page-gutter-float !default;
+$grid-docked-mid-listing-page-gutter-end: $grid-page-gutter-end !default;
+
+// No sidebar, only margins
+$grid-docked-mid-listing-margin-width: $grid-docked-margin-width !default;
+$grid-docked-mid-listing-margin-seg3: 0.2 *
+ $grid-docked-mid-listing-margin-width !default;
+$grid-docked-mid-listing-margin-seg2: minmax(
+ #{0.3 * $grid-docked-mid-listing-margin-width},
+ #{0.6 * $grid-docked-mid-listing-margin-width}
+) !default;
+$grid-docked-mid-listing-margin-seg1: 0.1 *
+ $grid-docked-mid-listing-margin-width !default;
+
+// Body
+$grid-docked-mid-listing-body-column-min: $grid-body-column-min !default;
+$grid-docked-mid-listing-body-column-max: $grid-body-column-max - 50px !default;
+$grid-docked-mid-listing-body: minmax(
+ $grid-docked-mid-listing-body-column-min,
+ calc(
+ #{$grid-docked-mid-listing-body-column-max} - #{$grid-docked-mid-listing-page-gutter-start +
+ $grid-docked-mid-listing-page-gutter-end}
+ )
+) !default;
+
+/* DEFAULT (HTML PAGE, NOT IN WEBSITE) GRID */
+$grid-default-sidebar-width: $grid-sidebar-width !default;
+$grid-default-margin-width: $grid-margin-width !default;
+$grid-default-body-width: $grid-body-column-max + 50px !default;
+
+/* Default Wide Grid */
+// Margins
+$grid-default-wide-page-gutter-start: $grid-page-gutter-start !default;
+$grid-default-wide-sidebar-gutter: 5fr !default;
+$grid-default-wide-body-gutter-start: $grid-body-gutter-start !default;
+$grid-default-wide-body-gutter-end: $grid-body-gutter-end !default;
+$grid-default-wide-margin-gutter: 5fr !default;
+$grid-default-wide-page-gutter-end: $grid-page-gutter-end !default;
+
+// Sidebars
+$grid-default-wide-sidebar-width: $grid-default-sidebar-width !default;
+$grid-default-wide-sidebar-seg1: 0.14 * $grid-default-wide-sidebar-width !default;
+$grid-default-wide-sidebar-seg2: 0.14 * $grid-default-wide-sidebar-width !default;
+
+// Margins
+$grid-default-wide-margin-width: $grid-default-margin-width !default;
+$grid-default-wide-margin-seg3: 0.14 * $grid-default-wide-margin-width !default;
+$grid-default-wide-margin-seg2: minmax(
+ #{0.3 * $grid-default-wide-margin-width},
+ #{0.58 * $grid-default-wide-margin-width}
+) !default;
+$grid-default-wide-margin-seg1: 0.14 * $grid-default-wide-margin-width !default;
+
+// Body
+$grid-default-wide-body-column-min: $grid-body-column-min !default;
+$grid-default-wide-body-column-max: $grid-default-body-width !default;
+$grid-default-wide-body: minmax(
+ $grid-default-wide-body-column-min,
+ calc(
+ #{$grid-default-wide-body-column-max} - #{$grid-default-wide-page-gutter-start +
+ $grid-default-wide-page-gutter-end}
+ )
+) !default;
+
+/* Default Mid Grid */
+// Margins
+$grid-default-mid-page-gutter-start: $grid-page-gutter-start !default;
+$grid-default-mid-sidebar-gutter: 5fr !default;
+$grid-default-mid-body-gutter-start: $grid-body-gutter-start !default;
+$grid-default-mid-body-gutter-end: $grid-body-gutter-end !default;
+$grid-default-mid-margin-gutter: 5fr !default;
+$grid-default-mid-page-gutter-end: $grid-page-gutter-end !default;
+
+// Sidebars
+$grid-default-mid-sidebar-width: $grid-default-sidebar-width !default;
+$grid-default-mid-sidebar-seg1: 0.14 * $grid-default-mid-sidebar-width !default;
+$grid-default-mid-sidebar-seg2: 0.14 * $grid-default-mid-sidebar-width !default;
+
+// Margins
+$grid-default-mid-margin-width: $grid-default-margin-width !default;
+$grid-default-mid-margin-seg3: 0.14 * $grid-default-mid-margin-width !default;
+$grid-default-mid-margin-seg2: minmax(
+ #{0.3 * $grid-default-mid-margin-width},
+ #{0.58 * $grid-default-mid-margin-width}
+) !default;
+$grid-default-mid-margin-seg1: 0.14 * $grid-default-mid-margin-width !default;
+
+// Body
+$grid-default-mid-body-column-min: $grid-body-column-min !default;
+$grid-default-mid-body-column-max: $grid-default-body-width - 50px !default;
+$grid-default-mid-body: minmax(
+ $grid-default-mid-body-column-min,
+ calc(
+ #{$grid-default-mid-body-column-max} - #{$grid-default-mid-page-gutter-start +
+ $grid-default-mid-page-gutter-end}
+ )
+) !default;
+
+/* Full Content Wide Grid */
+// Margins
+$grid-default-full-wide-page-gutter-start: $grid-page-gutter-start !default;
+$grid-default-full-wide-sidebar-gutter: 5fr !default;
+$grid-default-full-wide-body-gutter-start: $grid-body-gutter-start !default;
+$grid-default-full-wide-body-gutter-end: $grid-body-gutter-end !default;
+$grid-default-full-wide-margin-gutter: 5fr !default;
+$grid-default-full-wide-page-gutter-end: $grid-page-gutter-end !default;
+
+// Sidebars
+$grid-default-full-wide-sidebar-width: $grid-default-sidebar-width !default;
+$grid-default-full-wide-sidebar-seg1: 0.14 *
+ $grid-default-full-wide-sidebar-width !default;
+$grid-default-full-wide-sidebar-seg2: 0.14 *
+ $grid-default-full-wide-sidebar-width !default;
+
+// Margins
+$grid-default-full-wide-margin-width: $grid-default-margin-width !default;
+$grid-default-full-wide-margin-seg2: 0.14 * $grid-default-full-wide-margin-width !default;
+$grid-default-full-wide-margin-seg1: 0.14 * $grid-default-full-wide-margin-width !default;
+
+// Body
+$grid-default-full-wide-body-column-min: $grid-body-column-min !default;
+$grid-default-full-wide-body-column-max: $grid-default-body-width !default;
+$grid-default-full-wide-body: minmax(
+ $grid-default-full-wide-body-column-min,
+ calc(
+ #{$grid-default-full-wide-body-column-max} - #{$grid-default-full-wide-page-gutter-start +
+ $grid-default-full-wide-page-gutter-end}
+ )
+) !default;
+
+/* Full Content Mid Grid */
+// Margins
+$grid-default-full-mid-page-gutter-start: $grid-page-gutter-start !default;
+$grid-default-full-mid-sidebar-gutter: 5fr !default;
+$grid-default-full-mid-body-gutter-start: $grid-body-gutter-start !default;
+$grid-default-full-mid-body-gutter-end: $grid-body-gutter-end !default;
+$grid-default-full-mid-margin-gutter: 5fr !default;
+$grid-default-full-mid-page-gutter-end: $grid-page-gutter-end !default;
+
+// No margins or sidebars
+
+// Body
+$grid-default-full-mid-body-column-min: $grid-body-column-min !default;
+$grid-default-full-mid-body-column-max: $grid-default-body-width - 50px !default;
+$grid-default-full-mid-body: minmax(
+ $grid-default-full-mid-body-column-min,
+ calc(
+ #{$grid-default-full-mid-body-column-max} - #{$grid-default-full-mid-page-gutter-start +
+ $grid-default-full-mid-page-gutter-end}
+ )
+) !default;
+
+/* Listing Wide Grid */
+// Margins
+$grid-default-listing-wide-page-gutter-start: $grid-page-gutter-start !default;
+$grid-default-listing-wide-sidebar-gutter: 5fr !default;
+$grid-default-listing-wide-body-gutter-start: $grid-body-gutter-start !default;
+$grid-default-listing-wide-body-gutter-end: 2 * $grid-body-gutter-end !default;
+$grid-default-listing-wide-margin-gutter: 1fr !default;
+$grid-default-listing-wide-page-gutter-end: $grid-page-gutter-end !default;
+
+// Sidebars
+$grid-default-listing-wide-sidebar-width: $grid-default-sidebar-width !default;
+$grid-default-listing-wide-sidebar-seg1: minmax(
+ #{0.2 * $grid-default-listing-wide-sidebar-width},
+ #{0.4 * $grid-default-listing-wide-sidebar-width}
+) !default;
+$grid-default-listing-wide-sidebar-seg2: 0.2 *
+ $grid-default-listing-wide-sidebar-width !default;
+$grid-default-listing-wide-sidebar-seg3: 0.2 *
+ $grid-default-listing-wide-sidebar-width !default;
+
+// Margins
+$grid-default-listing-wide-margin-width: $grid-default-margin-width !default;
+$grid-default-listing-wide-sidebar-seg3: 0.2 *
+ $grid-default-listing-wide-margin-width !default;
+$grid-default-listing-wide-margin-seg2: minmax(
+ #{0 * $grid-default-listing-wide-margin-width},
+ #{1 * $grid-default-listing-wide-margin-width}
+) !default;
+$grid-default-listing-wide-margin-seg1: 0.2 *
+ $grid-default-listing-wide-margin-width !default;
+
+// Body
+$grid-default-listing-wide-body-column-min: $grid-body-column-min !default;
+$grid-default-listing-wide-body-column-max: $grid-default-body-width !default;
+$grid-default-listing-wide-body: minmax(
+ $grid-default-listing-wide-body-column-min,
+ calc(
+ #{$grid-default-listing-wide-body-column-max} - #{$grid-default-listing-wide-page-gutter-start +
+ $grid-default-listing-wide-page-gutter-end}
+ )
+) !default;
+
+/* Listing Mid Grid */
+// Margins
+$grid-default-listing-mid-page-gutter-start: $grid-page-gutter-start !default;
+$grid-default-listing-mid-sidebar-gutter: 5fr !default;
+$grid-default-listing-mid-body-gutter-start: $grid-body-gutter-start !default;
+$grid-default-listing-mid-body-gutter-end: $grid-body-gutter-end !default;
+$grid-default-listing-mid-margin-gutter: 5fr !default;
+$grid-default-listing-mid-page-gutter-end: $grid-page-gutter-end !default;
+
+// No margins or sidebars
+
+// Body
+$grid-default-listing-mid-body-column-min: $grid-body-column-min !default;
+$grid-default-listing-mid-body-column-max: $grid-default-body-width + 400px !default;
+$grid-default-listing-mid-body: minmax(
+ $grid-default-listing-mid-body-column-min,
+ calc(
+ #{$grid-default-listing-mid-body-column-max} - #{$grid-default-listing-mid-page-gutter-start +
+ $grid-default-listing-mid-page-gutter-end}
+ )
+) !default;
+
+/* Slim Wide Grid */
+// Margins
+$grid-default-slim-wide-page-gutter-start: $grid-page-gutter-start !default;
+$grid-default-slim-wide-sidebar-gutter: 5fr !default;
+$grid-default-slim-wide-body-gutter-start: $grid-body-gutter-start !default;
+$grid-default-slim-wide-body-gutter-end: $grid-body-gutter-end !default;
+$grid-default-slim-wide-margin-gutter: 5fr !default;
+$grid-default-slim-wide-page-gutter-end: $grid-page-gutter-end !default;
+
+// Sidebars
+$grid-default-slim-wide-sidebar-width: $grid-default-sidebar-width !default;
+$grid-default-slim-wide-sidebar-seg1: 0.14 *
+ $grid-default-slim-wide-sidebar-width !default;
+$grid-default-slim-wide-sidebar-seg2: 0.14 *
+ $grid-default-slim-wide-sidebar-width !default;
+
+// Margins
+$grid-default-slim-wide-margin-width: $grid-default-margin-width !default;
+$grid-default-slim-wide-sidebar-seg3: 0.2 * $grid-default-slim-wide-margin-width !default;
+$grid-default-slim-wide-margin-seg2: minmax(
+ #{0 * $grid-default-slim-wide-margin-width},
+ #{0.8 * $grid-default-slim-wide-margin-width}
+) !default;
+$grid-default-slim-wide-margin-seg1: 0.2 * $grid-default-slim-wide-margin-width !default;
+
+// Body
+$grid-default-slim-wide-body-column-min: $grid-body-column-min !default;
+$grid-default-slim-wide-body-column-max: $grid-default-body-width !default;
+$grid-default-slim-wide-body: minmax(
+ $grid-default-slim-wide-body-column-min,
+ calc(
+ #{$grid-default-slim-wide-body-column-max} - #{$grid-default-slim-wide-page-gutter-start +
+ $grid-default-slim-wide-page-gutter-end}
+ )
+) !default;
+
+/* Slim Mid Grid */
+// Margins
+$grid-default-slim-mid-page-gutter-start: $grid-page-gutter-start !default;
+$grid-default-slim-mid-sidebar-gutter: 5fr !default;
+$grid-default-slim-mid-body-gutter-start: $grid-body-gutter-start !default;
+$grid-default-slim-mid-body-gutter-end: $grid-body-gutter-end !default;
+$grid-default-slim-mid-margin-gutter: 5fr !default;
+$grid-default-slim-mid-page-gutter-end: $grid-page-gutter-end !default;
+
+// Margins
+$grid-default-slim-mid-margin-width: $grid-default-margin-width !default;
+$grid-default-slim-mid-margin-seg3: 0.14 * $grid-default-slim-mid-margin-width !default;
+$grid-default-slim-mid-margin-seg2: minmax(
+ #{0.3 * $grid-default-slim-mid-margin-width},
+ #{0.58 * $grid-default-slim-mid-margin-width}
+) !default;
+$grid-default-slim-mid-margin-seg1: 0.14 * $grid-default-slim-mid-margin-width !default;
+
+// Body
+$grid-default-slim-mid-body-column-min: $grid-body-column-min !default;
+$grid-default-slim-mid-body-column-max: $grid-default-body-width - 50px !default;
+$grid-default-slim-mid-body: minmax(
+ $grid-default-slim-mid-body-column-min,
+ calc(
+ #{$grid-default-slim-mid-body-column-max} - #{$grid-default-slim-mid-page-gutter-start +
+ $grid-default-slim-mid-page-gutter-end}
+ )
+) !default;
+
+/* TOC Wide Grid */
+// Margins
+$grid-default-toc-wide-page-gutter-start: $grid-page-gutter-start !default;
+$grid-default-toc-wide-sidebar-gutter: 5fr !default;
+$grid-default-toc-wide-body-gutter-start: $grid-body-gutter-start !default;
+$grid-default-toc-wide-body-gutter-end: $grid-body-gutter-end !default;
+$grid-default-toc-wide-margin-gutter: 5fr !default;
+$grid-default-toc-wide-page-gutter-end: $grid-page-gutter-end !default;
+
+// Sidebars
+$grid-default-toc-wide-sidebar-width: $grid-default-sidebar-width !default;
+$grid-default-toc-wide-sidebar-seg1: 0.14 * $grid-default-toc-wide-sidebar-width !default;
+$grid-default-toc-wide-sidebar-seg2: minmax(
+ #{0 * $grid-default-toc-wide-sidebar-width},
+ #{0.7 * $grid-default-toc-wide-sidebar-width}
+) !default;
+$grid-default-toc-wide-sidebar-seg3: 0.14 * $grid-default-toc-wide-sidebar-width !default;
+
+// Margins
+$grid-default-toc-wide-margin-width: $grid-default-margin-width !default;
+$grid-default-toc-wide-margin-seg3: 0.2 * $grid-default-toc-wide-margin-width !default;
+$grid-default-toc-wide-margin-seg2: minmax(
+ #{0 * $grid-default-toc-wide-margin-width},
+ #{0.8 * $grid-default-toc-wide-margin-width}
+) !default;
+$grid-default-toc-wide-margin-seg1: 0.2 * $grid-default-toc-wide-margin-width !default;
+
+// Body
+$grid-default-toc-wide-body-column-min: $grid-body-column-min - 50px !default;
+$grid-default-toc-wide-body-column-max: $grid-default-body-width - 50px !default;
+$grid-default-toc-wide-body: minmax(
+ $grid-default-toc-wide-body-column-min,
+ calc(
+ #{$grid-default-toc-wide-body-column-max} - #{$grid-default-toc-wide-page-gutter-start +
+ $grid-default-toc-wide-page-gutter-end}
+ )
+) !default;
+
+/* TOC Mid Grid */
+// Margins
+$grid-default-toc-mid-page-gutter-start: $grid-page-gutter-start !default;
+$grid-default-toc-mid-sidebar-gutter: 5fr !default;
+$grid-default-toc-mid-body-gutter-start: $grid-body-gutter-start !default;
+$grid-default-toc-mid-body-gutter-end: $grid-body-gutter-end !default;
+$grid-default-toc-mid-margin-gutter: 5fr !default;
+$grid-default-toc-mid-page-gutter-end: $grid-page-gutter-end !default;
+
+// Margins
+$grid-default-toc-mid-sidebar-width: $grid-default-sidebar-width !default;
+$grid-default-toc-mid-sidebar-seg1: 0.14 * $grid-default-toc-mid-sidebar-width !default;
+$grid-default-toc-mid-sidebar-seg2: minmax(
+ #{0 * $grid-default-toc-mid-sidebar-width},
+ #{0.58 * $grid-default-toc-mid-sidebar-width}
+) !default;
+$grid-default-toc-mid-sidebar-seg3: 0.14 * $grid-default-toc-mid-sidebar-width !default;
+
+// Body
+$grid-default-toc-mid-body-column-min: $grid-body-column-min - 50px !default;
+$grid-default-toc-mid-body-column-max: $grid-default-body-width - 50px !default;
+$grid-default-toc-mid-body: minmax(
+ $grid-default-toc-mid-body-column-min,
+ calc(
+ #{$grid-default-toc-mid-body-column-max} - #{$grid-default-toc-mid-page-gutter-start +
+ $grid-default-toc-mid-page-gutter-end}
+ )
+) !default;
+
+// Floating Grid Definitions
+@mixin page-columns-float-wide {
+ @include page-columns();
+ grid-template-columns:
+ [screen-start] $grid-float-wide-page-gutter-start
+ [screen-start-inset] $grid-float-wide-sidebar-gutter
+ [page-start] $grid-float-wide-sidebar-seg1
+ [page-start-inset] $grid-float-wide-sidebar-seg2
+ [body-start-outset] $grid-float-wide-sidebar-seg3
+ [body-start] $grid-float-wide-body-gutter-start
+ [body-content-start] $grid-float-wide-body
+ [body-content-end] $grid-float-wide-body-gutter-end
+ [body-end] $grid-float-wide-margin-seg3
+ [body-end-outset] $grid-float-wide-margin-seg2
+ [page-end-inset] $grid-float-wide-margin-seg1
+ [page-end] $grid-float-wide-margin-gutter
+ [screen-end-inset] $grid-float-wide-page-gutter-end
+ [screen-end];
+}
+
+@mixin page-columns-float-slimcontent-wide {
+ @include page-columns();
+ grid-template-columns:
+ [screen-start] $grid-float-wide-slim-page-gutter-start
+ [screen-start-inset] $grid-float-wide-slim-sidebar-gutter
+ [page-start] $grid-float-wide-slim-sidebar-seg1
+ [page-start-inset] $grid-float-wide-slim-sidebar-seg2
+ [body-start-outset] $grid-float-wide-slim-sidebar-seg3
+ [body-start] $grid-float-wide-slim-body-gutter-start
+ [body-content-start] $grid-float-wide-slim-body
+ [body-content-end] $grid-float-wide-slim-body-gutter-end
+ [body-end] $grid-float-wide-slim-margin-seg3
+ [body-end-outset] $grid-float-wide-slim-margin-seg2
+ [page-end-inset] $grid-float-wide-slim-margin-seg1
+ [page-end] $grid-float-wide-slim-margin-gutter
+ [screen-end-inset] $grid-float-wide-slim-page-gutter-end
+ [screen-end];
+}
+
+@mixin page-columns-float-fullcontent-wide {
+ @include page-columns();
+ grid-template-columns:
+ [screen-start] $grid-float-wide-full-page-gutter-start
+ [screen-start-inset] $grid-float-wide-full-sidebar-gutter
+ [page-start] $grid-float-wide-full-sidebar-seg1
+ [page-start-inset] $grid-float-wide-full-sidebar-seg2
+ [body-start-outset] $grid-float-wide-full-sidebar-seg3
+ [body-start] $grid-float-wide-full-body-gutter-start
+ [body-content-start] $grid-float-wide-full-body
+ [body-content-end] $grid-float-wide-full-body-gutter-end
+ [body-end body-end-outset page-end-inset page-end] $grid-float-wide-full-margin-gutter
+ [screen-end-inset] $grid-float-wide-full-page-gutter-end
+ [screen-end];
+}
+
+@mixin page-columns-float-listing-wide {
+ @include page-columns();
+ grid-template-columns:
+ [screen-start] $grid-float-wide-listing-page-gutter-start
+ [screen-start-inset] $grid-float-wide-listing-sidebar-gutter
+ [page-start] $grid-float-wide-listing-sidebar-seg1
+ [page-start-inset] $grid-float-wide-listing-sidebar-seg2
+ [body-start-outset] $grid-float-wide-listing-sidebar-seg3
+ [body-start] $grid-float-wide-listing-body-gutter-start
+ [body-content-start] $grid-float-wide-listing-body
+ [body-content-end] $grid-float-wide-listing-body-gutter-end
+ [body-end] $grid-float-wide-listing-margin-seg3
+ [body-end-outset] $grid-float-wide-listing-margin-seg2
+ [page-end-inset] $grid-float-wide-listing-margin-seg1
+ [page-end] $grid-float-wide-listing-margin-gutter
+ [screen-end-inset] $grid-float-wide-listing-page-gutter-end
+ [screen-end];
+}
+
+// medium 976 down
+@mixin page-columns-float-mid {
+ @include page-columns();
+ grid-template-columns:
+ [screen-start] $grid-float-mid-page-gutter-start
+ [screen-start-inset] $grid-float-mid-sidebar-gutter
+ [page-start page-start-inset body-start-outset body-start] $grid-float-mid-body-gutter-start
+ [body-content-start] $grid-float-mid-body
+ [body-content-end] $grid-float-mid-body-gutter-end
+ [body-end] $grid-float-mid-margin-seg3
+ [body-end-outset] $grid-float-mid-margin-seg2
+ [page-end-inset] $grid-float-mid-margin-seg1
+ [page-end] $grid-float-mid-margin-gutter
+ [screen-end-inset] $grid-float-mid-page-gutter-end
+ [screen-end];
+}
+
+@mixin page-columns-float-slimcontent-mid {
+ @include page-columns();
+ grid-template-columns:
+ [screen-start] $grid-float-mid-slim-page-gutter-start
+ [screen-start-inset] $grid-float-mid-slim-sidebar-gutter
+ [page-start page-start-inset body-start-outset body-start] $grid-float-mid-slim-body-gutter-start
+ [body-content-start] $grid-float-mid-slim-body
+ [body-content-end] $grid-float-mid-slim-body-gutter-end
+ [body-end] $grid-float-mid-slim-margin-seg3
+ [body-end-outset] $grid-float-mid-slim-margin-seg2
+ [page-end-inset] $grid-float-mid-slim-margin-seg1
+ [page-end] $grid-float-mid-slim-margin-gutter
+ [screen-end-inset] $grid-float-mid-slim-page-gutter-end
+ [screen-end];
+}
+
+@mixin page-columns-float-fullcontent-mid {
+ @include page-columns();
+ grid-template-columns:
+ [screen-start] $grid-float-mid-full-page-gutter-start
+ [screen-start-inset] $grid-float-mid-full-sidebar-gutter
+ [page-start page-start-inset body-start-outset body-start] $grid-float-mid-full-body-gutter-start
+ [body-content-start] $grid-float-mid-full-body
+ [body-content-end]$grid-float-mid-full-body-gutter-end
+ [body-end body-end-outset page-end-inset page-end] $grid-float-mid-full-margin-gutter
+ [screen-end-inset] $grid-float-mid-full-page-gutter-end
+ [screen-end];
+}
+
+@mixin page-columns-float-listing-mid {
+ @include page-columns();
+ grid-template-columns:
+ [screen-start] $grid-float-mid-listing-page-gutter-start
+ [screen-start-inset] $grid-float-mid-listing-sidebar-gutter
+ [page-start page-start-inset body-start-outset body-start] $grid-float-mid-listing-body-gutter-start
+ [body-content-start] $grid-float-mid-listing-body
+ [body-content-end] $grid-float-mid-listing-body-gutter-end
+ [body-end] $grid-float-mid-listing-margin-seg3
+ [body-end-outset] $grid-float-mid-listing-margin-seg2
+ [page-end-inset] $grid-float-mid-listing-margin-seg1
+ [page-end] $grid-float-mid-listing-margin-gutter
+ [screen-end-inset] $grid-float-mid-listing-page-gutter-end
+ [screen-end];
+}
+
+// Docked Grid Definitions
+@mixin page-columns-docked-wide {
+ @include page-columns();
+ grid-template-columns:
+ [screen-start] $grid-docked-wide-page-gutter-start
+ [screen-start-inset page-start] $grid-docked-wide-sidebar-seg1
+ [page-start-inset] $grid-docked-wide-sidebar-seg2
+ [body-start-outset] $grid-docked-wide-sidebar-seg3
+ [body-start] $grid-docked-wide-body-gutter-start
+ [body-content-start] $grid-docked-wide-body
+ [body-content-end] $grid-docked-wide-body-gutter-end
+ [body-end] $grid-docked-wide-margin-seg3
+ [body-end-outset] $grid-docked-wide-margin-seg2
+ [page-end-inset] $grid-docked-wide-margin-seg1
+ [page-end] $grid-docked-wide-margin-gutter
+ [screen-end-inset] $grid-docked-wide-page-gutter-end
+ [screen-end];
+}
+
+@mixin page-columns-docked-slimcontent-wide {
+ @include page-columns();
+ grid-template-columns:
+ [screen-start] $grid-docked-wide-slim-page-gutter-start
+ [screen-start-inset page-start] $grid-docked-wide-slim-sidebar-seg1
+ [page-start-inset] $grid-docked-wide-slim-sidebar-seg2
+ [body-start-outset] $grid-docked-wide-slim-sidebar-seg3
+ [body-start] $grid-docked-wide-slim-body-gutter-start
+ [body-content-start] $grid-docked-wide-slim-body
+ [body-content-end] $grid-docked-wide-slim-body-gutter-end
+ [body-end] $grid-docked-wide-slim-margin-seg3
+ [body-end-outset] $grid-docked-wide-slim-margin-seg2
+ [page-end-inset] $grid-docked-wide-slim-margin-seg1
+ [page-end] $grid-docked-wide-slim-margin-gutter
+ [screen-end-inset] $grid-docked-wide-slim-page-gutter-end
+ [screen-end];
+}
+
+@mixin page-columns-docked-fullcontent-wide {
+ @include page-columns();
+ grid-template-columns:
+ [screen-start] $grid-docked-wide-full-page-gutter-start
+ [screen-start-inset page-start] $grid-docked-wide-full-sidebar-seg1
+ [page-start-inset] $grid-docked-wide-full-sidebar-seg2
+ [body-start-outset] $grid-docked-wide-full-sidebar-seg3
+ [body-start] $grid-docked-wide-full-body-gutter-start
+ [body-content-start] $grid-docked-wide-full-body
+ [body-content-end] $grid-docked-wide-full-body-gutter-end
+ [body-end body-end-outset page-end-inset page-end] $grid-docked-wide-full-margin-gutter
+ [screen-end-inset] $grid-docked-wide-full-page-gutter-end
+ [screen-end];
+}
+
+@mixin page-columns-docked-listing-wide {
+ @include page-columns();
+ grid-template-columns:
+ [screen-start] $grid-docked-wide-listing-page-gutter-start
+ [screen-start-inset page-start] $grid-docked-wide-listing-sidebar-seg1
+ [page-start-inset] $grid-docked-wide-listing-sidebar-seg2
+ [body-start-outset] $grid-docked-wide-listing-sidebar-seg3
+ [body-start] $grid-docked-wide-listing-body-gutter-start
+ [body-content-start] $grid-docked-wide-listing-body
+ [body-content-end] $grid-docked-wide-listing-body-gutter-end
+ [body-end] $grid-docked-wide-listing-margin-seg3
+ [body-end-outset] $grid-docked-wide-listing-margin-seg2
+ [page-end-inset] $grid-docked-wide-listing-margin-seg1
+ [page-end] $grid-docked-wide-listing-margin-gutter
+ [screen-end-inset] $grid-docked-wide-listing-page-gutter-end
+ [screen-end];
+}
+
+@mixin page-columns-docked-mid {
+ @include page-columns();
+ grid-template-columns:
+ [screen-start] $grid-docked-mid-page-gutter-start
+ [screen-start-inset page-start page-start-inset body-start-outset body-start body-content-start] $grid-docked-mid-body
+ [body-content-end] $grid-docked-mid-body-gutter-end
+ [body-end] $grid-docked-mid-margin-seg3
+ [body-end-outset] $grid-docked-mid-margin-seg2
+ [page-end-inset] $grid-docked-mid-margin-seg1
+ [page-end] $grid-docked-mid-margin-gutter
+ [screen-end-inset] $grid-docked-mid-page-gutter-end
+ [screen-end];
+}
+
+@mixin page-columns-docked-slimcontent-mid {
+ @include page-columns();
+ grid-template-columns:
+ [screen-start] $grid-docked-mid-slim-page-gutter-start
+ [screen-start-inset page-start page-start-inset body-start-outset body-start body-content-start] $grid-docked-mid-slim-body
+ [body-content-end] $grid-docked-mid-slim-body-gutter-end
+ [body-end] $grid-docked-mid-slim-margin-seg3
+ [body-end-outset] $grid-docked-mid-slim-margin-seg2
+ [page-end-inset] $grid-docked-mid-slim-margin-seg1
+ [page-end] $grid-docked-mid-slim-margin-gutter
+ [screen-end-inset] $grid-docked-mid-slim-page-gutter-end
+ [screen-end];
+}
+
+@mixin page-columns-docked-fullcontent-mid {
+ @include page-columns();
+ grid-template-columns:
+ [screen-start] $grid-docked-mid-full-page-gutter-start
+ [screen-start-inset page-start page-start-inset body-start-outset body-start body-content-start] $grid-docked-mid-full-body
+ [body-content-end] $grid-docked-mid-full-body-gutter-end
+ [body-end body-end-outset page-end-inset page-end] $grid-docked-mid-full-margin-gutter
+ [screen-end-inset] $grid-docked-mid-full-page-gutter-end
+ [screen-end];
+}
+
+@mixin page-columns-docked-listing-mid {
+ @include page-columns();
+ grid-template-columns:
+ [screen-start] $grid-docked-mid-listing-page-gutter-start
+ [screen-start-inset page-start page-start-inset body-start-outset body-start body-content-start] $grid-docked-mid-listing-body
+ [body-content-end] $grid-docked-mid-listing-body-gutter-start
+ [body-end] $grid-docked-mid-slim-margin-seg3
+ [body-end-outset] $grid-docked-mid-slim-margin-seg2
+ [page-end-inset] $grid-docked-mid-slim-margin-seg1
+ [page-end] $grid-docked-mid-listing-margin-gutter
+ [screen-end-inset] $grid-docked-mid-listing-page-gutter-end
+ [screen-end];
+}
+
+// Plain Grid Definitions
+@mixin page-columns-default-wide {
+ @include page-columns();
+ grid-template-columns:
+ [screen-start] $grid-default-wide-page-gutter-start
+ [screen-start-inset] $grid-default-wide-sidebar-gutter
+ [page-start page-start-inset] $grid-default-wide-sidebar-seg1
+ [body-start-outset] $grid-default-wide-sidebar-seg2
+ [body-start] $grid-default-wide-body-gutter-start
+ [body-content-start] $grid-default-wide-body
+ [body-content-end] $grid-default-wide-body-gutter-end
+ [body-end] $grid-default-wide-margin-seg3
+ [body-end-outset] $grid-default-wide-margin-seg2
+ [page-end-inset] $grid-default-wide-margin-seg1
+ [page-end] $grid-default-wide-margin-gutter
+ [screen-end-inset] $grid-default-wide-page-gutter-end
+ [screen-end];
+}
+
+@mixin page-columns-default-mid {
+ @include page-columns();
+ grid-template-columns:
+ [screen-start] $grid-default-mid-page-gutter-start
+ [screen-start-inset page-start page-start-inset body-start-outset] $grid-default-mid-sidebar-gutter
+ [body-start] $grid-default-mid-body-gutter-start
+ [body-content-start] $grid-default-mid-body
+ [body-content-end] $grid-default-mid-body-gutter-end
+ [body-end] $grid-default-mid-margin-seg3
+ [body-end-outset] $grid-default-mid-margin-seg2
+ [page-end-inset] $grid-default-mid-margin-seg1
+ [page-end] $grid-default-mid-margin-gutter
+ [screen-end-inset] $grid-default-mid-page-gutter-end
+ [screen-end];
+}
+
+// Full content grid definitions
+@mixin page-columns-fullcontent-wide {
+ @include page-columns();
+ grid-template-columns:
+ [screen-start] $grid-default-full-wide-page-gutter-start
+ [screen-start-inset] $grid-default-full-wide-sidebar-gutter
+ [page-start page-start-inset] $grid-default-full-wide-sidebar-seg1
+ [body-start-outset] $grid-default-full-wide-sidebar-seg2
+ [body-start] $grid-default-full-wide-body-gutter-start
+ [body-content-start] $grid-default-full-wide-body
+ [body-content-end] $grid-default-full-wide-body-gutter-end
+ [body-end] $grid-default-full-wide-margin-seg2
+ [body-end-outset] $grid-default-full-wide-margin-seg1
+ [page-end-inset page-end] $grid-default-full-wide-margin-gutter
+ [screen-end-inset] $grid-default-full-wide-page-gutter-end;
+}
+
+@mixin page-columns-fullcontent-mid {
+ @include page-columns();
+ grid-template-columns:
+ [screen-start] $grid-default-full-mid-page-gutter-start
+ [screen-start-inset page-start page-start-inset body-start-outset] $grid-default-full-mid-sidebar-gutter
+ [body-start] $grid-default-full-mid-body-gutter-start
+ [body-content-start] $grid-default-full-mid-body
+ [body-content-end] $grid-default-full-mid-body-gutter-end
+ [body-end body-end-outset page-end-inset page-end] $grid-default-full-mid-margin-gutter
+ [screen-end-inset] $grid-default-full-mid-page-gutter-end
+ [screen-end];
+}
+
+// Listing content grid definitions
+@mixin page-columns-listing-wide {
+ @include page-columns();
+ grid-template-columns:
+ [screen-start] $grid-default-listing-wide-page-gutter-start
+ [screen-start-inset page-start] $grid-default-listing-wide-sidebar-seg1
+ [page-start-inset] $grid-default-listing-wide-sidebar-seg2
+ [body-start-outset] $grid-default-listing-wide-sidebar-seg3
+ [body-start] $grid-default-listing-wide-body-gutter-start
+ [body-content-start] $grid-default-listing-wide-body
+ [body-content-end] $grid-default-listing-wide-body-gutter-end
+ [body-end] $grid-default-listing-wide-sidebar-seg3
+ [body-end-outset] $grid-default-listing-wide-margin-seg2
+ [page-end-inset] $grid-default-listing-wide-sidebar-seg1
+ [page-end] $grid-default-listing-wide-margin-gutter
+ [screen-end-inset] $grid-default-listing-wide-page-gutter-end
+ [screen-end];
+}
+
+@mixin page-columns-listing-mid {
+ @include page-columns();
+ grid-template-columns:
+ [screen-start] $grid-default-listing-mid-page-gutter-start
+ [screen-start-inset page-start page-start-inset body-start-outset] $grid-default-listing-mid-sidebar-gutter
+ [body-start] $grid-default-listing-mid-body-gutter-start
+ [body-content-start] $grid-default-listing-mid-body
+ [body-content-end body-end body-end-outset page-end-inset page-end] $grid-default-listing-mid-margin-gutter
+ [screen-end-inset] $grid-default-listing-mid-page-gutter-end
+ [screen-end];
+}
+
+// Slim content grid definitions
+@mixin page-columns-slimcontent-wide {
+ @include page-columns();
+ grid-template-columns:
+ [screen-start] $grid-default-slim-wide-page-gutter-start
+ [screen-start-inset] $grid-default-slim-wide-sidebar-gutter
+ [page-start page-start-inset] $grid-default-slim-wide-sidebar-seg1
+ [body-start-outset] $grid-default-slim-wide-sidebar-seg2
+ [body-start] $grid-default-slim-wide-body-gutter-start
+ [body-content-start] $grid-default-slim-wide-body
+ [body-content-end] $grid-default-slim-wide-body-gutter-end
+ [body-end] $grid-default-slim-wide-sidebar-seg3
+ [body-end-outset] $grid-default-slim-wide-margin-seg2
+ [page-end-inset] $grid-default-slim-wide-sidebar-seg1
+ [page-end] $grid-default-slim-wide-margin-gutter
+ [screen-end-inset] $grid-default-slim-wide-page-gutter-end
+ [screen-end];
+}
+
+@mixin page-columns-slimcontent-mid {
+ @include page-columns();
+ grid-template-columns:
+ [screen-start] $grid-default-slim-mid-page-gutter-start
+ [screen-start-inset page-start page-start-inset body-start-outset] $grid-default-slim-mid-sidebar-gutter
+ [body-start] $grid-default-slim-mid-body-gutter-start
+ [body-content-start] $grid-default-slim-mid-body
+ [body-content-end] $grid-default-slim-mid-body-gutter-end
+ [body-end] $grid-default-slim-mid-margin-seg3
+ [body-end-outset] $grid-default-slim-mid-margin-seg2
+ [page-end-inset] $grid-default-slim-mid-margin-seg1
+ [page-end] $grid-default-slim-mid-margin-gutter
+ [screen-end-inset] $grid-default-slim-mid-page-gutter-end
+ [screen-end];
+}
+
+// TOC left grid
+@mixin page-columns-tocleft-wide {
+ @include page-columns();
+ grid-template-columns:
+ [screen-start] $grid-default-toc-wide-page-gutter-start
+ [screen-start-inset] $grid-default-toc-wide-sidebar-gutter
+ [page-start] $grid-default-toc-wide-sidebar-seg1
+ [page-start-inset] $grid-default-toc-wide-sidebar-seg2
+ [body-start-outset] $grid-default-toc-wide-sidebar-seg3
+ [body-start] $grid-default-toc-wide-body-gutter-start
+ [body-content-start] $grid-default-toc-wide-body
+ [body-content-end] $grid-default-toc-wide-body-gutter-end
+ [body-end] $grid-default-toc-wide-margin-seg3
+ [body-end-outset] $grid-default-toc-wide-margin-seg2
+ [page-end-inset] $grid-default-toc-wide-margin-seg1
+ [page-end] $grid-default-toc-wide-margin-gutter
+ [screen-end-inset] $grid-default-toc-wide-page-gutter-end
+ [screen-end];
+}
+
+@mixin page-columns-tocleft-mid {
+ @include page-columns();
+ grid-template-columns:
+ [screen-start] $grid-default-toc-mid-page-gutter-start
+ [screen-start-inset] $grid-default-toc-mid-sidebar-gutter
+ [page-start] $grid-default-toc-mid-sidebar-seg1
+ [page-start-inset] $grid-default-toc-mid-sidebar-seg2
+ [body-start-outset] $grid-default-toc-mid-sidebar-seg3
+ [body-start] $grid-default-toc-mid-body-gutter-start
+ [body-content-start] $grid-default-toc-mid-body
+ [body-content-end] $grid-default-toc-mid-body-gutter-end
+ [body-end body-end-outset page-end-inset page-end] $grid-default-toc-mid-margin-gutter
+ [screen-end-inset] $grid-default-toc-mid-page-gutter-end
+ [screen-end];
+}
+
+// Small size responsive grid
+// All grids share this fully collapsed mode which hides
+// the sidebar and margin
+@mixin grid-template-columns-narrow {
+ grid-template-columns:
+ [screen-start] $grid-page-gutter-start
+ [screen-start-inset page-start page-start-inset body-start-outset body-start body-content-start] minmax(
+ 0px,
+ 1fr
+ )
+ [body-content-end body-end body-end-outset page-end-inset page-end screen-end-inset] $grid-page-gutter-end
+ [screen-end];
+}
+
+
+// quarto-scss-analysis-annotation { "origin": "'mixins' section from user-defined SCSS" }
+
+
+
+// quarto-scss-analysis-annotation { "origin": "'rules' section from format" }
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+@import "mixins/banner";
+@include bsBanner("");
+
+
+// scss-docs-start import-stack
+// Configuration
+@import "variables-dark";
+@import "maps";
+@import "utilities";
+
+// Layout & components
+@import "root";
+@import "reboot";
+@import "type";
+@import "images";
+@import "containers";
+@import "grid";
+@import "tables";
+@import "forms";
+@import "buttons";
+@import "transitions";
+@import "dropdown";
+@import "button-group";
+@import "nav";
+@import "navbar";
+@import "card";
+@import "accordion";
+@import "breadcrumb";
+@import "pagination";
+@import "badge";
+@import "alert";
+@import "progress";
+@import "list-group";
+@import "close";
+@import "toasts";
+@import "modal";
+@import "tooltip";
+@import "popover";
+@import "carousel";
+@import "spinners";
+@import "offcanvas";
+@import "placeholders";
+
+// Helpers
+@import "helpers";
+
+// Utilities
+@import "utilities/api";
+// scss-docs-end import-stack
+
+@import "spacer";
+@import "tab-fill";
+@import "color-utilities";
+
+$spacer: 1rem !default;
+
+:root {
+ // Controls default spacing in layout containers (e.g, layout_columns())
+ --bslib-spacer: #{$spacer};
+ --bslib-mb-spacer: var(--bslib-spacer, 1rem);
+}
+
+// Some things like card(), p(), inputs, etc. want some margin-bottom by default
+// so you can plop them anywhere and you get spacing between rows. However, now
+// that we have layout utilities like page_fillable(), layout_columns(),
+// layout_sidebar(), etc. where we can control the gap between rows/columns, we
+// need a way to reset those margin-bottom to 0 in those special contexts
+//
+// We do this by adding this class to components (e.g., card())...
+.bslib-mb-spacing {
+ margin-bottom: var(--bslib-mb-spacer);
+}
+
+// ...And this class for layout containers (e.g, layout_columns())
+.bslib-gap-spacing {
+ gap: var(--bslib-mb-spacer);
+ > .bslib-mb-spacing, > .form-group, > p, > pre {
+ margin-bottom: 0;
+ }
+}
+
+// We generally don't want mb spacing for _activated_ fill items
+.html-fill-container > .html-fill-item.bslib-mb-spacing {
+ margin-bottom: 0;
+}
+// color-contrast() was introduced in Bootstrap 5.
+// We include our own version for a few reasons:
+// 1. Easily turn off warnings options(bslib.color_contrast_warnings=F)
+// 2. Allow Bootstrap 3 & 4 to use color-contrast() in variable definitions
+// 3. Allow Bootstrap 3 & 4 to use bs_get_contrast()
+
+// Also note that color-contrast() lives in sass-utils since projects like Quarto
+// and flexdashboard currently assume it exists there....
+@import "../sass-utils/color-contrast.scss";
+
+
+@function is-css-variable($x) {
+ @if (type-of($x) != string) {
+ @return false;
+ } @else {
+ @return str-slice($x, 1, 6) == 'var(--';
+ }
+}
+
+$bslib-enable-color-utilities: $bootstrap-version >= 5 !default;
+
+@if ($bslib-enable-color-utilities) {
+ $bslib-gradient-colors: () !default;
+
+ $bslib-gradient-colors-defaults: ();
+ $bslib-color-names: ("blue", "indigo", "purple", "pink", "red", "orange", "yellow", "green", "teal", "cyan");
+
+ @each $name in $bslib-color-names {
+ @if (map-has-key($colors, $name)) {
+ $bslib-gradient-colors-defaults: map-merge(
+ $bslib-gradient-colors-defaults,
+ ($name: map-get($colors, $name))
+ );
+ }
+ }
+
+ $bslib-gradient-colors: map-merge(
+ $bslib-gradient-colors-defaults,
+ $bslib-gradient-colors
+ );
+
+ // Named color background and foreground utility classes ---------------------
+ @each $name, $color in $bslib-gradient-colors {
+ .bg-#{$name} {
+ --bslib-color-bg: #{$color};
+ --bslib-color-fg: #{color-contrast($color)};
+ background-color: var(--bslib-color-bg);
+ color: var(--bslib-color-fg);
+ }
+
+ .text-#{$name} {
+ --bslib-color-fg: #{$color};
+ color: var(--bslib-color-fg);
+ }
+ }
+
+ // Fill in the `--color-*` variables
+ @each $name, $color in $theme-colors {
+ .text-#{$name} {
+ --bslib-color-fg: #{$color};
+ }
+ .bg-#{$name} {
+ --bslib-color-bg: #{$color};
+ --bslib-color-fg: #{color-contrast($color)};
+ }
+ }
+
+ // Gradient backgrounds ------------------------------------------------------
+ //
+ // Creates gradient background for every named color pair. Users can add
+ // additional colors into the mix by setting $bslib-gradient-colors to a map of
+ // color names to colors. Creates class names like: .bg-gradient-{from}-{to}.
+ @each $name1, $color1 in $bslib-gradient-colors {
+ @each $name2, $color2 in $bslib-gradient-colors {
+ @if $name1 != $name2 {
+ .bg-gradient-#{$name1}-#{$name2} {
+ $color-mid: mix($color1, $color2, 60%);
+ $color-fg: color-contrast($color-mid);
+
+ --bslib-color-fg: #{$color-fg};
+ --bslib-color-bg: #{$color-mid};
+
+ background: linear-gradient(
+ var(--bg-gradient-deg, 140deg),
+ $color1 var(--bg-gradient-start, 36%),
+ $color2 var(--bg-gradient-end, 180%)
+ ) $color-mid;
+ color: $color-fg;
+ }
+ }
+ }
+ }
+}
+
+.tab-content {
+ // Workaround for pkgdown's CSS to make tab-pane all a consistent height
+ // https://github.com/r-lib/pkgdown/blob/956f07/inst/BS5/assets/pkgdown.scss#L342-L355
+ >.tab-pane.html-fill-container {
+ display: none;
+ }
+
+ // Take precedence over Bootstrap's `display:block` rule
+ >.active.html-fill-container {
+ display: flex;
+ }
+
+ // Another workaround for pkgdown adding extra padding we didn't ask for
+ // https://github.com/r-lib/pkgdown/blob/956f07/inst/BS5/assets/pkgdown.scss#L335-L337
+ &.html-fill-container {
+ padding: 0;
+ }
+}
+
+$bslib-value-box-enable-border: "auto" !default; // "auto" | "never" | "always"
+$bslib-value-box-enable-shadow: $enable-shadows !default;
+$bslib-value-box-horizontal-break-point: 300px;
+
+:root {
+ --bslib-value-box-shadow: #{if($bslib-value-box-enable-shadow, #{$box-shadow}, none)};
+ // value box border width is set to "-auto-yes" when the card has .border-auto
+ // or "-auto-no" by default. These cards all use "-baseline", where the border
+ // can be disabled entirely by setting $bslib-value-box-enable-border: "never"
+ // or --bslib-value-box-border-width-baseline: 0. In "auto" mode, the border
+ // is disabled without the border-auto class, or disabled if shadow is enabled.
+ --bslib-value-box-border-width-auto-yes: #{if($bslib-value-box-enable-shadow, 0, var(--bslib-value-box-border-width-baseline))};
+ --bslib-value-box-border-width-auto-no: #{if($bslib-value-box-enable-border == "auto", 0, var(--bslib-value-box-border-width-baseline))};
+ --bslib-value-box-border-width-baseline: #{if($bslib-value-box-enable-border == "never", 0, $card-border-width)};
+}
+
+// CSS variables that start with --- (3 dashes instead of 2) are private vars
+// that are set by user arguments in the R calls. The CSS properties below only
+// apply to the default value box style; the standard way to theme individual
+// value boxes is with CSS classes on the value box container.
+// :root {
+// --bslib-value-box-color:;
+// --bslib-value-box-bg:;
+// --bslib-value-box-border-color:;
+// }
+
+.bslib-value-box {
+ &.card {
+ // .card also sets box-shadow by default, likely to an empty css variable
+ box-shadow: var(--bslib-value-box-shadow);
+ }
+
+ border-width: var(--bslib-value-box-border-width-auto-no, var(--bslib-value-box-border-width-baseline));
+ &.border-auto {
+ border-width: var(--bslib-value-box-border-width-auto-yes, var(--bslib-value-box-border-width-baseline));
+ }
+
+ &.default {
+ --bslib-value-box-bg-default: var(--bs-card-bg, #{$body-bg});
+ --bslib-value-box-border-color-default: var(--bs-card-border-color, #{$card-border-color});
+ color: var(--bslib-value-box-color);
+ background-color: var(--bslib-value-box-bg, var(--bslib-value-box-bg-default));
+ border-color: var(--bslib-value-box-border-color, var(--bslib-value-box-border-color-default));
+ }
+
+ container-name: bslib-value-box;
+ container-type: inline-size;
+
+ .value-box-grid {
+ display: grid;
+ grid-template-areas: "left right";
+ align-items: center;
+ overflow: hidden;
+ }
+
+ .value-box-showcase {
+ height: 100%;
+ max-height: var(---bslib-value-box-showcase-max-h, 100%);
+ &, > .html-fill-item {
+ width: 100%;
+ }
+ }
+
+ &[data-full-screen="true"] {
+ .value-box-showcase {
+ max-height: var(---bslib-value-box-showcase-max-h-fs, 100%);
+ }
+ }
+
+ // When value boxes get too small, we lay them out vertically using a container query.
+ // But we don't need this for mobile, where we have one box per row. This media query
+ // is the inverse of `@include media-breakpoint-down(sm)` but that mixin doesn't work
+ // inside nested queries.
+ @media screen and (min-width: breakpoint-max(sm, $grid-breakpoints)) {
+ @container bslib-value-box (max-width: #{$bslib-value-box-horizontal-break-point}) {
+ &:not(.showcase-bottom) .value-box-grid {
+ // override specificity of showcase layouts for small value boxes
+ grid-template-columns: 1fr !important;
+ grid-template-rows: auto auto;
+ grid-template-areas:
+ "top"
+ "bottom";
+
+ .value-box-showcase {
+ grid-area: top !important;
+ }
+
+ .value-box-area {
+ grid-area: bottom !important;
+ justify-content: end;
+ }
+ }
+ }
+ }
+
+ // Should also be fillable/fill (i.e., d-flex; flex: 1)
+ .value-box-area {
+ justify-content: center;
+ padding: 1.5rem 1rem;
+ font-size: .9rem;
+ font-weight: 500;
+ * {
+ margin-bottom: 0;
+ margin-top: 0;
+ }
+ }
+
+ .value-box-title {
+ @include bootstrap-heading-font-and-spacing($h6-font-size);
+ // add a non-breaking space to ensure it's not 0 height
+ &:empty::after {
+ content: '\00a0 ';
+ }
+ }
+
+ .value-box-value {
+ @include bootstrap-heading-font-and-spacing($h2-font-size);
+ // add a non-breaking space to ensure it's not 0 height
+ &:empty::after {
+ content: '\00a0 ';
+ }
+ }
+
+ // Should also be fillable/fill (i.e., d-flex; flex: 1)
+ .value-box-showcase {
+ align-items: center;
+ justify-content: center;
+ margin-top: auto;
+ margin-bottom: auto;
+ padding: 1rem;
+
+ .bi, .fa, .fab, .fas, .far {
+ opacity: .85;
+ min-width: 50px;
+ max-width: 125%;
+ }
+ // We set font size because {bsicons}/{fontawesome} both
+ // set height/width to 1em by default (as an inline style)
+ .bi, .fa, .fab, .fas, .far { font-size: 4rem; }
+ }
+
+
+ &.showcase-top-right {
+ .value-box-grid {
+ grid-template-columns: 1fr var(---bslib-value-box-showcase-w, 50%);
+
+ .value-box-showcase {
+ grid-area: right;
+ margin-left: auto;
+ align-self: start;
+ align-items: end;
+ padding-left: 0;
+ padding-bottom: 0;
+ }
+
+ .value-box-area {
+ grid-area: left;
+ align-self: end;
+ }
+ }
+
+ &[data-full-screen="true"] {
+ .value-box-grid {
+ grid-template-columns: auto var(---bslib-value-box-showcase-w-fs, 1fr);
+ > div {
+ align-self: center;
+ }
+ }
+ }
+
+ &:not([data-full-screen="true"]) {
+ .value-box-showcase {
+ margin-top: 0;
+ }
+
+ @container bslib-value-box (max-width: #{$bslib-value-box-horizontal-break-point}) {
+ .value-box-grid {
+ .value-box-showcase { // reset padding on showcase_container
+ padding-left: 1rem;
+ }
+ }
+ }
+ }
+ }
+
+ &.showcase-left-center {
+ .value-box-grid {
+ grid-template-columns: var(---bslib-value-box-showcase-w, 30%) auto;
+ }
+
+ &[data-full-screen="true"] {
+ .value-box-grid {
+ grid-template-columns: var(---bslib-value-box-showcase-w-fs, 1fr) auto;
+ }
+ }
+
+ &:not([data-fill-screen="true"]) {
+ .value-box-grid {
+ .value-box-showcase {
+ grid-area: left;
+ }
+
+ .value-box-area {
+ grid-area: right;
+ }
+ }
+ }
+ }
+
+ &.showcase-bottom {
+ .value-box-grid {
+ grid-template-columns: 1fr;
+ grid-template-rows: 1fr var(---bslib-value-box-showcase-h, auto);
+ grid-template-areas:
+ "top"
+ "bottom";
+ overflow: hidden;
+
+ .value-box-showcase {
+ grid-area: bottom;
+ padding: 0;
+ margin: 0;
+ }
+
+ .value-box-area {
+ grid-area: top;
+ }
+ }
+
+ &[data-full-screen="true"] {
+ .value-box-grid {
+ grid-template-rows: 1fr var(---bslib-value-box-showcase-h-fs, 2fr);
+
+ .value-box-showcase {
+ padding: 1rem;
+ }
+ }
+ }
+ }
+}
+
+@include color-mode(dark) {
+ .bslib-value-box {
+ // Bootstrap doesn't have a dark shadow, but the default isn't quite right
+ --bslib-value-box-shadow: 0 0.5rem 1rem rgb(0 0 0 / 50%);
+ }
+}
+
+.bslib-grid {
+ display: grid !important;
+ gap: var(--bslib-spacer, 1rem);
+ height: var(--bslib-grid-height);
+ &.grid {
+ // Don't let intrinsic width of a column affect the width of grid cols
+ grid-template-columns: repeat(var(--bs-columns, 12), minmax(0, 1fr));
+ // For some reason, Bootstrap sets `grid-template-rows: 1fr` by default, which
+ // is problematic for a multi-row filling layout. This fixes it...
+ // > page_fillable(layout_columns(c(12, 12), plotly::plot_ly(), plotly::plot_ly()))
+ grid-template-rows: unset;
+ grid-auto-rows: var(--bslib-grid--row-heights);
+ @include bslib-breakpoints-css-vars('bslib-grid--row-heights', map-keys($grid-breakpoints));
+ }
+
+ & > * > .shiny-input-container {
+ width: 100%;
+ }
+}
+
+.bslib-grid-item {
+ grid-column: auto/span 1;
+}
+
+@include media-breakpoint-down(md) {
+ // collapse all columns to a single column below medium (by default only)
+ .bslib-grid-item {
+ grid-column: 1 / -1;
+ }
+}
+
+@include media-breakpoint-down(sm) {
+ // with each "row" taking its natural height
+ .bslib-grid {
+ grid-template-columns: 1fr !important;
+ height: var(--bslib-grid-height-mobile);
+ &.grid {
+ height: unset !important;
+ grid-auto-rows: var(--bslib-grid--row-heights--xs, auto);
+ }
+ }
+}
+
+.navbar+.container-fluid {
+
+ // When the tab/page is fillable, undo the padding on the container-fluid
+ // (in this case, the user has control over padding/gap)
+ &:has(> .tab-content > .tab-pane.active.html-fill-container) {
+ padding-left: 0;
+ padding-right: 0;
+ }
+
+ // When the tab/page is fillable, add sensible default padding
+ >.tab-content>.tab-pane.active.html-fill-container {
+ padding: var(--bslib-spacer, 1rem);
+ gap: var(--bslib-spacer, 1rem);
+
+ // ...but if it holds a single sidebar layout, remove the padding
+ &:has(> .bslib-sidebar-layout:only-child) {
+ padding: 0;
+ }
+
+ // And smart border defaults for nav_panel("Foo", layout_sidebar())
+ >.bslib-sidebar-layout:only-child {
+ &:not([data-bslib-sidebar-border="true"]) {
+ border-left: none;
+ border-right: none;
+ border-bottom: none;
+ }
+
+ &:not([data-bslib-sidebar-border-radius="true"]) {
+ border-radius: 0;
+ }
+ }
+ }
+}
+
+// Make sure a border appears between the navbar and the sidebar layout
+// (especially important when page_navbar(inverse = FALSE, sidebar = sidebar())
+.navbar+div>.bslib-sidebar-layout {
+ border-top: var(--bslib-sidebar-border);
+}
+.bslib-card {
+ // TODO: allow a way to opt out
+ overflow: auto;
+
+ // Avoid "double padding" when two card_body()s are immediate siblings
+ .card-body + .card-body {
+ padding-top: 0;
+ }
+
+ .card-body {
+ overflow: auto;
+ p {
+ margin-top: 0;
+
+ &:last-child {
+ margin-bottom: 0;
+ }
+ }
+ }
+
+ .card-body {
+ max-height: var(--bslib-card-body-max-height, none);
+ }
+
+ &[data-full-screen="true"] > .card-body {
+ max-height: var(--bslib-card-body-max-height-full-screen, none);
+ }
+
+ .card-header {
+ .form-group {
+ margin-bottom: 0;
+ }
+ .selectize-control {
+ margin-bottom: 0;
+ // TODO: we should probably add this to selectize's SCSS since this actually makes selectInput()
+ // usable with width="fit-content"
+ .item {
+ margin-right: 1.15rem;
+ }
+ }
+ }
+
+ .card-footer {
+ margin-top: auto;
+ }
+
+ // For navs_tab_card(title = ...)
+ .bslib-navs-card-title {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: space-between;
+ align-items: center;
+ .nav {
+ margin-left: auto;
+ }
+ }
+
+ .bslib-sidebar-layout:not([data-bslib-sidebar-border="true"]) {
+ border: none;
+ }
+ .bslib-sidebar-layout:not([data-bslib-sidebar-border-radius="true"]) {
+ border-top-left-radius: 0;
+ border-top-right-radius: 0;
+ }
+
+}
+
+
+/*************************************************
+* Full screen card logic
+*************************************************/
+
+[data-full-screen="true"] {
+ position: fixed;
+ inset: 3.5rem 1rem 1rem;
+ height: auto !important;
+ max-height: none !important;
+ width: auto !important;
+ z-index: $zindex-popover;
+}
+
+.bslib-full-screen-enter {
+ display: none;
+ position: absolute;
+ bottom: var(--bslib-full-screen-enter-bottom, 0.2rem);
+ right: var(--bslib-full-screen-enter-right, 0);
+ top: var(--bslib-full-screen-enter-top);
+ left: var(--bslib-full-screen-enter-left);
+ color: var(--bslib-color-fg, var(--bs-card-color));
+ background-color: var(--bslib-color-bg, var(--bs-card-bg, var(--bs-body-bg)));
+ border: var(--bs-card-border-width) solid var(--bslib-color-fg, var(--bs-card-border-color));
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
+ margin: 0.2rem 0.4rem;
+ padding: 0.55rem !important;
+ font-size: .8rem;
+ cursor: pointer;
+ opacity: 0.7;
+ &:hover { opacity: 1; }
+ z-index: $zindex-popover;
+}
+
+.card[data-full-screen="false"]:hover > * > .bslib-full-screen-enter {
+ display: block;
+}
+
+// Hide all enter-full-screen buttons when *any* card is full-screenified
+.bslib-has-full-screen .card:hover > * > .bslib-full-screen-enter {
+ display: none;
+}
+
+// Only allow full_screen on desktop screens
+@include media-breakpoint-down(sm) {
+ .bslib-full-screen-enter { display: none !important; }
+}
+
+.bslib-full-screen-exit {
+ position: relative;
+ top: 1.35rem;
+ font-size: 0.9rem;
+ cursor: pointer;
+ text-decoration: none;
+ display: flex;
+ float: right;
+ margin-right: 2.15rem;
+ align-items: center;
+ color: rgba(var(--bs-body-bg-rgb), 0.8);
+ &:hover {
+ color: rgba(var(--bs-body-bg-rgb), 1);
+ }
+ svg {
+ margin-left: 0.5rem;
+ font-size: 1.5rem;
+ }
+}
+
+#bslib-full-screen-overlay {
+ position: fixed;
+ inset: 0;
+ background-color: rgba(var(--bs-body-color-rgb), 0.6);
+ backdrop-filter: blur(2px);
+ -webkit-backdrop-filter: blur(2px);
+ z-index: $zindex-popover - 1;
+ animation: bslib-full-screen-overlay-enter 400ms cubic-bezier(.6,.02,.65,1) forwards;
+}
+
+@keyframes bslib-full-screen-overlay-enter {
+ 0% {
+ opacity: 0;
+ }
+ 100% {
+ opacity: 1;
+ }
+}
+
+$bslib-sidebar-bg: rgba(var(--bs-emphasis-color-rgb, 0,0,0), 0.05) !default;
+$bslib-sidebar-fg: var(--bs-emphasis-color, black) !default;
+$bslib-sidebar-toggle-bg: rgba(var(--bs-emphasis-color-rgb, 0,0,0), 0.1) !default;
+$bslib-sidebar-border: var(--bs-card-border-width, #{$card-border-width}) solid var(--bs-card-border-color, #{$card-border-color}) !default;
+$bslib-sidebar-column-sidebar: Min(calc(100% - var(--bslib-sidebar-icon-size)), var(--bslib-sidebar-width, 250px));
+
+
+.bslib-sidebar-layout {
+ --bslib-sidebar-transition-duration: 500ms;
+ --bslib-sidebar-transition-easing-x: cubic-bezier(0.8, 0.78, 0.22, 1.07);
+ --bslib-sidebar-border: #{$bslib-sidebar-border};
+ --bslib-sidebar-border-radius: var(--bs-border-radius);
+ --bslib-sidebar-vert-border: #{$bslib-sidebar-border};
+ --bslib-sidebar-bg: #{$bslib-sidebar-bg};
+ --bslib-sidebar-fg: #{$bslib-sidebar-fg};
+ --bslib-sidebar-main-fg: var(--bs-card-color, var(--bs-body-color));
+ --bslib-sidebar-main-bg: var(--bs-card-bg, var(--bs-body-bg));
+ --bslib-sidebar-toggle-bg: #{$bslib-sidebar-toggle-bg};
+ --bslib-sidebar-padding: calc(var(--bslib-spacer) * 1.5);
+ --bslib-sidebar-icon-size: var(--bslib-spacer, 1rem);
+ --bslib-sidebar-icon-button-size: calc(var(--bslib-sidebar-icon-size, 1rem) * 2);
+ --bslib-sidebar-padding-icon: calc(var(--bslib-sidebar-icon-button-size, 2rem) * 1.5);
+ // We intentionally don't give a value here, but it could be set by someone else
+ // --bslib-collapse-toggle-border: ;
+ --bslib-collapse-toggle-border-radius: var(--bs-border-radius, #{$border-radius});
+ --bslib-collapse-toggle-transform: 0deg;
+ --bslib-sidebar-toggle-transition-easing: cubic-bezier(1, 0, 0, 1);
+ --bslib-collapse-toggle-right-transform: 180deg;
+ --bslib-sidebar-column-main: minmax(0, 1fr);
+
+ display: grid !important;
+ grid-template-columns: $bslib-sidebar-column-sidebar var(--bslib-sidebar-column-main);
+ position: relative;
+
+ @include transition(grid-template-columns ease-in-out var(--bslib-sidebar-transition-duration));
+
+ border: var(--bslib-sidebar-border);
+ border-radius: var(--bslib-sidebar-border-radius);
+
+ &[data-bslib-sidebar-border="false"] {
+ border: none;
+ }
+ &[data-bslib-sidebar-border-radius="false"] {
+ border-radius: initial;
+ }
+
+ > .main, > .sidebar {
+ grid-row: 1 / 2;
+ border-radius: inherit;
+ overflow: auto;
+ }
+
+ > .main {
+ grid-column: 2 / 3;
+ border-top-left-radius: 0;
+ border-bottom-left-radius: 0;
+ padding: var(--bslib-sidebar-padding);
+ transition: padding var(--bslib-sidebar-transition-easing-x) var(--bslib-sidebar-transition-duration);
+ color: var(--bslib-sidebar-main-fg);
+ background-color: var(--bslib-sidebar-main-bg);
+ }
+
+ > .sidebar {
+ grid-column: 1 / 2;
+ width: 100%;
+ height: 100%;
+ border-right: var(--bslib-sidebar-vert-border);
+ border-top-right-radius: 0;
+ border-bottom-right-radius: 0;
+ color: var(--bslib-sidebar-fg);
+ background-color: var(--bslib-sidebar-bg);
+ backdrop-filter: blur(5px);
+
+ > .sidebar-content {
+ display: flex;
+ flex-direction: column;
+ gap: var(--bslib-spacer, 1rem);
+ padding: var(--bslib-sidebar-padding);
+ // Add space for the toggle button (removed if sidebar is always open)
+ padding-top: var(--bslib-sidebar-padding-icon);
+
+ > :last-child:not(.sidebar-title) {
+ // Remove margin-bottom from the last item because sidebar has padding.
+ // We make an exception for .sidebar-title because it might be common to
+ // have a title and bare text nodes (that don't count as children).
+ margin-bottom: 0;
+ }
+
+ > .accordion {
+ margin-left: calc(-1 * var(--bslib-sidebar-padding));
+ margin-right: calc(-1 * var(--bslib-sidebar-padding));
+ &:last-child {
+ margin-bottom: calc(-1 * var(--bslib-sidebar-padding));
+ }
+ &:not(:last-child) {
+ margin-bottom: $spacer;
+ }
+ .accordion-body {
+ display: flex;
+ flex-direction: column;
+ }
+ }
+
+ // Accordions in sidebars are made flush with `.accordion-flush`, which
+ // removes the top and bottom border of the first or last accordion item.
+ // But in our usage, the accordions might not be the first or last item in
+ // the sidebar. In that case, it's better to keep the top/bottom borders.
+ > .accordion:not(:first-child) .accordion-item:first-child {
+ border-top: var(--#{$prefix}accordion-border-width) solid var(--#{$prefix}accordion-border-color);
+ }
+ > .accordion:not(:last-child) .accordion-item:last-child {
+ border-bottom: var(--#{$prefix}accordion-border-width) solid var(--#{$prefix}accordion-border-color);
+ }
+
+ &.has-accordion > .sidebar-title {
+ border-bottom: none;
+ padding-bottom: 0;
+ }
+ }
+
+ .shiny-input-container {
+ width: 100%;
+ }
+ }
+
+ &[data-bslib-sidebar-open="always"] {
+ > .sidebar > .sidebar-content {
+ // Always-open sidebars don't have a toggle & can use normal top padding
+ padding-top: var(--bslib-sidebar-padding);
+ }
+ }
+
+ > .collapse-toggle {
+ grid-row: 1 / 2;
+ grid-column: 1 / 2;
+ display: inline-flex;
+ align-items: center;
+ position: absolute;
+ right: calc(var(--bslib-sidebar-icon-size));
+ top: calc(var(--bslib-sidebar-icon-size, 1rem) / 2);
+ border: none;
+ border-radius: var(--bslib-collapse-toggle-border-radius);
+ height: var(--bslib-sidebar-icon-button-size, 2rem);
+ width: var(--bslib-sidebar-icon-button-size, 2rem);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ padding: 0;
+ color: var(--bslib-sidebar-fg);
+ background-color: unset; // don't take `button` background color
+ transition:
+ color var(--bslib-sidebar-transition-easing-x) var(--bslib-sidebar-transition-duration),
+ top var(--bslib-sidebar-transition-easing-x) var(--bslib-sidebar-transition-duration),
+ right var(--bslib-sidebar-transition-easing-x) var(--bslib-sidebar-transition-duration),
+ left var(--bslib-sidebar-transition-easing-x) var(--bslib-sidebar-transition-duration);
+
+ &:hover {
+ background-color: var(--bslib-sidebar-toggle-bg);
+ }
+
+ > .collapse-icon {
+ opacity: 0.8;
+ width: var(--bslib-sidebar-icon-size);
+ height: var(--bslib-sidebar-icon-size);
+ transform: rotateY(var(--bslib-collapse-toggle-transform));
+ // N.B. since mobile view won't trigger a transition of grid-template-columns,
+ // we transition this toggle to ensure _some_ transition event always happens.
+ transition: transform var(--bslib-sidebar-toggle-transition-easing) var(--bslib-sidebar-transition-duration);
+ }
+
+ &:hover > .collapse-icon {
+ opacity: 1;
+ }
+ }
+
+ .sidebar-title {
+ font-size: $font-size-base * 1.25;
+ line-height: $line-height-sm;
+ margin-top: 0;
+ margin-bottom: $spacer;
+ padding-bottom: $spacer;
+ border-bottom: var(--bslib-sidebar-border);
+ }
+
+ &.sidebar-right {
+ grid-template-columns: var(--bslib-sidebar-column-main) $bslib-sidebar-column-sidebar;
+
+ > .main {
+ grid-column: 1 / 2;
+ border-top-right-radius: 0;
+ border-bottom-right-radius: 0;
+ border-top-left-radius: inherit;
+ border-bottom-left-radius: inherit;
+ }
+
+ > .sidebar {
+ grid-column: 2 / 3;
+ border-right: none;
+ border-left: var(--bslib-sidebar-vert-border);
+ border-top-left-radius: 0;
+ border-bottom-left-radius: 0;
+ }
+
+ > .collapse-toggle {
+ grid-column: 2 / 3;
+ left: var(--bslib-sidebar-icon-size);
+ right: unset;
+ border: var(--bslib-collapse-toggle-border);
+ > .collapse-icon {
+ transform: rotateY(var(--bslib-collapse-toggle-right-transform));
+ }
+ }
+ }
+
+ &.sidebar-collapsed {
+ --bslib-collapse-toggle-transform: 180deg;
+ --bslib-collapse-toggle-right-transform: 0deg;
+ --bslib-sidebar-vert-border: none;
+
+ grid-template-columns: 0 minmax(0, 1fr);
+
+ &.sidebar-right {
+ grid-template-columns: minmax(0, 1fr) 0;
+ }
+
+ // Hide the sidebar contents after it's done transitioning so that
+ // those contents don't impact the overall layout (i.e., height)
+ &:not(.transitioning) {
+ // Putting `display:none` on .sidebar would change the number of columns
+ // in the grid, and I don't think we can transition between those states
+ > .sidebar > * {
+ display: none;
+ }
+ }
+
+ > .main {
+ border-radius: inherit;
+ }
+
+ &:not(.sidebar-right) > .main {
+ padding-left: var(--bslib-sidebar-padding-icon);
+ }
+ &.sidebar-right > .main {
+ padding-right: var(--bslib-sidebar-padding-icon);
+ }
+
+ > .collapse-toggle {
+ color: var(--bslib-sidebar-main-fg);
+ // The CSS variable (set via JS) is here to help avoid overlapping toggles
+ top: calc(
+ var(--bslib-sidebar-overlap-counter, 0) *
+ calc(var(--bslib-sidebar-icon-size) +
+ var(--bslib-sidebar-padding)
+ ) + var(--bslib-sidebar-icon-size, 1rem) / 2);
+ right: calc(-2.5 * var(--bslib-sidebar-icon-size) - var(--bs-card-border-width, 1px));
+ }
+
+ &.sidebar-right > .collapse-toggle {
+ left: calc(-2.5 * var(--bslib-sidebar-icon-size) - var(--bs-card-border-width, 1px));
+ right: unset;
+ }
+ }
+}
+
+@include media-breakpoint-up(sm) {
+ // hide sidebar content while we transition the parent .sidebar on desktop
+ // (on mobile the reveal happens immediately)
+ .bslib-sidebar-layout.transitioning > .sidebar > .sidebar-content {
+ display: none;
+ }
+}
+
+@include media-breakpoint-down(sm) {
+ .bslib-sidebar-layout {
+ // Tell sidebar init js we're on mobile for `sidebar(open = "desktop")`
+ &[data-bslib-sidebar-open="desktop"] {
+ --bslib-sidebar-js-init-collapsed: true;
+ }
+
+ &, &.sidebar-right {
+ // Remove sidebar borders in mobile view (except always-open, added below)
+ > .sidebar { border: none; }
+
+ // Main area takes up entire layout area to avoid layout shift when
+ // sidebar is expanded as an overlay.
+ > .main {
+ grid-column: 1 / 3;
+ }
+ }
+
+ // Always open sidebars become "flow" layouts in mobile view
+ &[data-bslib-sidebar-open="always"] {
+ display: block !important;
+ > .sidebar {
+ max-height: var(--bslib-sidebar-max-height-mobile);
+ overflow-y: auto;
+ border-top: var(--bslib-sidebar-vert-border);
+ }
+ }
+
+ &:not([data-bslib-sidebar-open="always"]) {
+ // Sidebar layer has to be lifted up to cover other (nested) sidebars
+ &:not(.sidebar-collapsed) {
+ > .sidebar { z-index: 1; }
+ > .collapse-toggle { z-index: 1; }
+ }
+
+ // Either sidebar or main area take up entire layout depending on state
+ $full-closed: 100% 0;
+ $closed-full: 0 100%;
+ grid-template-columns: $full-closed;
+ &.sidebar-right {
+ grid-template-columns: $closed-full;
+ }
+
+ &.sidebar-collapsed {
+ grid-template-columns: $closed-full;
+ &.sidebar-right {
+ grid-template-columns: $full-closed;
+ }
+ }
+
+
+ // Keep padding on main contents when sidebar is expanded (avoid shifts)
+ &:not(.sidebar-right) > .main {
+ padding-left: var(--bslib-sidebar-padding-icon);
+ }
+ &.sidebar-right > .main {
+ padding-right: var(--bslib-sidebar-padding-icon);
+ }
+
+ // Make main contents transparent while sidebar is expanded
+ > .main {
+ opacity: 0;
+ transition: opacity var(--bslib-sidebar-transition-easing-x) var(--bslib-sidebar-transition-duration);
+ }
+ &.sidebar-collapsed > .main {
+ opacity: 1;
+ }
+ }
+ }
+}
+
+/* CSS behind nav_spacer() */
+@mixin nav-spacer() {
+ .nav:not(.nav-hidden) {
+ /* Make sure nav container is flexbox (they aren't in BS3) */
+ display: flex !important;
+ display: -webkit-flex !important;
+ // Logic for horizontal nav (e.g., navset_tab(), etc)
+ &:not(.nav-stacked):not(.flex-column) {
+ float: none !important;
+ > .bslib-nav-spacer {
+ margin-left: auto !important;
+ }
+ /* .form-inline doesn't vertically align in BS3? */
+ > .form-inline {
+ margin-top: auto;
+ margin-bottom: auto;
+ }
+ }
+ // Logic for vertical nav (e.g., navset_pill_list())
+ &.nav-stacked {
+ flex-direction: column;
+ -webkit-flex-direction: column;
+ height: 100%;
+ > .bslib-nav-spacer {
+ margin-top: auto !important;
+ }
+ }
+ }
+}
+
+/* BS4+ uses this mixin for configurable breakpoints */
+@if mixin-exists("media-breakpoint-up") {
+ @include media-breakpoint-up(sm) {
+ @include nav-spacer();
+ }
+} @else {
+ /* BS3 default navbar breakpoint */
+ @media (min-width: 768px) {
+ @include nav-spacer();
+ }
+}
+
+.accordion {
+ .accordion-header {
+ @include bootstrap-heading($h2-font-size);
+ margin-bottom: 0;
+ }
+ .accordion-icon:not(:empty) {
+ margin-right: 0.75rem;
+ display: flex; /* Without flex, the height/alignment is messed up */
+ }
+ .accordion-button:not(.collapsed) {
+ box-shadow: none;
+ // This none overrides the box-shadow applied to
+ // .accordion-button:focus (and, as a result, non-collapsed buttons
+ // won't show a visual indication of focus, #488).
+ // So, repeat the .accordion-button:focus below to give it a
+ // higher priority.
+ &:focus {
+ box-shadow: var(--#{$prefix}accordion-btn-focus-box-shadow);
+ }
+ }
+}
+
+$bslib-page-sidebar-title-bg: if($navbar-bg, $navbar-bg, $dark) !default;
+$bslib-page-sidebar-title-color: color-contrast($bslib-page-sidebar-title-bg) !default;
+$bslib-sidebar-padding: $spacer * 1.5 !default;
+
+:root {
+ --bslib-page-sidebar-title-bg: #{$bslib-page-sidebar-title-bg};
+ --bslib-page-sidebar-title-color: #{$bslib-page-sidebar-title-color};
+}
+
+.bslib-page-title {
+ background-color: var(--bslib-page-sidebar-title-bg);
+ color: var(--bslib-page-sidebar-title-color);
+ font-size: $h4-font-size;
+ font-weight: 300;
+ padding: var(--bslib-spacer, 1rem);
+ padding-left: $bslib-sidebar-padding;
+ margin-bottom: 0;
+ border-bottom: $border-width solid $border-color;
+}
+
+html {
+ height: 100%;
+}
+
+.bslib-page-fill {
+ width: 100%;
+ height: 100%;
+ margin: 0;
+ padding: var(--bslib-spacer, 1rem);
+ gap: var(--bslib-spacer, 1rem);
+}
+
+@include media-breakpoint-down(sm) {
+ .bslib-page-fill {
+ height: var(--bslib-page-fill-mobile-height, auto);
+ }
+}
+
+.html-fill-container {
+ display: flex;
+ flex-direction: column;
+ /* Prevent the container from expanding vertically or horizontally beyond its
+ parent's constraints. */
+ min-height: 0;
+ min-width: 0;
+}
+.html-fill-container > .html-fill-item {
+ /* Fill items can grow and shrink freely within
+ available vertical space in fillable container */
+ flex: 1 1 auto;
+ min-height: 0;
+ min-width: 0;
+}
+.html-fill-container > :not(.html-fill-item) {
+ /* Prevent shrinking or growing of non-fill items */
+ flex: 0 0 auto;
+}
+
+
+// quarto-scss-analysis-annotation { "origin": "'rules' section from Quarto" }
+
+
+
+
+
+.sidebar-item .chapter-number {
+ color: $body-color;
+}
+
+
+
+
+.quarto-container {
+ min-height: calc(100vh - 132px);
+}
+
+body.hypothesis-enabled {
+ #quarto-header {
+ margin-right: 16px;
+ }
+}
+
+footer.footer .nav-footer,
+#quarto-header > nav {
+ padding-left: 1em;
+ padding-right: 1em;
+}
+
+footer.footer div.nav-footer p:first-child {
+ margin-top: 0;
+}
+
+footer.footer div.nav-footer p:last-child {
+ margin-bottom: 0;
+}
+
+// content padding
+#quarto-content > * {
+ padding-top: $content-padding-top;
+}
+
+#quarto-content > #quarto-sidebar-glass {
+ padding-top: 0px;
+}
+
+@include media-breakpoint-down(lg) {
+ #quarto-content > * {
+ padding-top: 0;
+ }
+
+ #quarto-content .subtitle {
+ padding-top: $content-padding-top;
+ }
+
+ #quarto-content section:first-of-type h2:first-of-type {
+ margin-top: 1rem;
+ }
+}
+
+// headroom
+.headroom-target,
+header.headroom {
+ will-change: transform;
+ transition: position 200ms linear;
+ transition: all 200ms linear;
+}
+
+header.headroom--pinned {
+ transform: translateY(0%);
+}
+
+header.headroom--unpinned {
+ transform: translateY(-100%);
+}
+
+.navbar-container {
+ width: 100%;
+}
+
+.navbar-brand {
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+
+.navbar-brand-container {
+ max-width: calc(100% - 115px);
+ min-width: 0;
+ display: flex;
+ align-items: center;
+
+ @include media-breakpoint-up(lg) {
+ margin-right: 1em;
+ }
+}
+
+.navbar-brand.navbar-brand-logo {
+ margin-right: 4px;
+ display: inline-flex;
+}
+
+.navbar-toggler {
+ flex-basis: content;
+ flex-shrink: 0;
+}
+
+.navbar {
+ .navbar-brand-container {
+ order: $navbar-title-order;
+ }
+
+ .navbar-toggler {
+ order: $navbar-toggler-order;
+ }
+
+ .navbar-container > .navbar-nav {
+ order: $navbar-menu-order;
+ }
+
+ .navbar-container > .navbar-brand-container {
+ margin-left: 0 !important;
+ margin-right: 0 !important;
+ }
+
+ .navbar-collapse {
+ order: $navbar-menu-order;
+ }
+
+ #quarto-search {
+ order: $navbar-search-order;
+ margin-left: auto;
+ }
+}
+
+@include media-breakpoint-down(med) {
+ .navbar {
+ @if $navbar-toggle-position == "left" {
+ .navbar-toggler {
+ margin-right: 0.5em;
+ }
+ } @else {
+ #quarto-search {
+ margin-right: 0.5em;
+ }
+
+ .quarto-navbar-tools .dropdown-menu {
+ left: 0;
+ }
+ }
+ }
+
+ .navbar-collapse .quarto-navbar-tools {
+ margin-left: 0.5em;
+ }
+}
+
+.navbar-logo {
+ max-height: 24px;
+ width: auto;
+ padding-right: 4px;
+}
+
+nav .nav-item:not(.compact) {
+ padding-top: 1px;
+}
+
+nav .nav-link i,
+nav .dropdown-item i {
+ padding-right: 1px;
+}
+
+.navbar-expand-lg .navbar-nav .nav-link {
+ padding-left: 0.6rem;
+ padding-right: 0.6rem;
+}
+
+nav .nav-item.compact .nav-link {
+ padding-left: 0.5rem;
+ padding-right: 0.5rem;
+ font-size: 1.1rem;
+}
+
+.navbar {
+ .quarto-navbar-tools {
+ order: $navbar-tools-order;
+ div.dropdown {
+ display: inline-block;
+ }
+ .quarto-navigation-tool {
+ color: $navbar-fg;
+ }
+ .quarto-navigation-tool:hover {
+ color: $navbar-hl;
+ }
+ }
+}
+
+.navbar-nav .dropdown-menu {
+ min-width: 220px;
+ font-size: 0.9rem;
+}
+
+.navbar {
+ .navbar-nav {
+ .nav-link.dropdown-toggle::after {
+ opacity: 0.75;
+ vertical-align: 0.175em;
+ }
+ }
+
+ ul.dropdown-menu {
+ padding-top: 0;
+ padding-bottom: 0;
+ }
+ .dropdown-header {
+ text-transform: uppercase;
+ font-size: 0.8rem;
+ padding: 0 0.5rem;
+ }
+
+ .dropdown-item {
+ padding: 0.4rem 0.5rem;
+ & > i.bi {
+ margin-left: 0.1rem;
+ margin-right: 0.25em;
+ }
+ }
+}
+
+.sidebar #quarto-search {
+ margin-top: -1px;
+ svg.aa-SubmitIcon {
+ width: 16px;
+ height: 16px;
+ }
+}
+
+.sidebar-navigation a {
+ color: inherit;
+}
+
+.sidebar-title {
+ margin-top: 0.25rem;
+ padding-bottom: 0.5rem;
+ font-size: 1.3rem;
+ line-height: 1.6rem;
+ visibility: visible;
+}
+
+.sidebar-title > a {
+ font-size: inherit;
+ text-decoration: none;
+}
+
+.sidebar-title .sidebar-tools-main {
+ margin-top: -6px;
+}
+
+@include media-breakpoint-down(lg) {
+ #quarto-sidebar {
+ div.sidebar-header {
+ padding-top: 0.2em;
+ }
+ }
+}
+
+.sidebar-header-stacked .sidebar-title {
+ margin-top: 0.6rem;
+}
+
+.sidebar-logo {
+ max-width: 90%;
+ padding-bottom: 0.5rem;
+}
+
+.sidebar-logo-link {
+ text-decoration: none;
+}
+
+.sidebar-navigation li a {
+ text-decoration: none;
+}
+
+// Sidebar tools
+.sidebar-navigation .quarto-navigation-tool {
+ opacity: 0.7;
+ font-size: 0.875rem;
+}
+
+#quarto-sidebar > nav > .sidebar-tools-main {
+ margin-left: 14px;
+}
+
+.sidebar-tools-main {
+ display: inline-flex;
+ margin-left: 0px;
+ order: 2;
+}
+
+.sidebar-tools-main:not(.tools-wide) {
+ vertical-align: middle;
+}
+
+.sidebar-navigation .quarto-navigation-tool.dropdown-toggle::after {
+ display: none;
+}
+
+// Sidebar navigation items
+$sidebar-items-gap-spacing: 0.2em;
+$sidebar-section-indent: 0.5em;
+$sidebar-section-bottom-margin: 0.2em;
+
+.sidebar.sidebar-navigation > * {
+ padding-top: 1em;
+}
+
+.sidebar-item {
+ margin-bottom: $sidebar-items-gap-spacing;
+ line-height: 1rem;
+ margin-top: 0.4rem;
+}
+
+.sidebar-section {
+ padding-left: $sidebar-section-indent;
+ padding-bottom: $sidebar-section-bottom-margin;
+}
+
+.sidebar-item .sidebar-item-container {
+ // Positions the link and dongle
+ display: flex;
+ justify-content: space-between;
+ cursor: pointer;
+}
+
+.sidebar-item-toggle:hover {
+ cursor: pointer;
+}
+
+.sidebar-item .sidebar-item-toggle .bi {
+ // The dongle for opening and closing sections
+ font-size: 0.7rem;
+ text-align: center;
+}
+
+.sidebar-item .sidebar-item-toggle .bi-chevron-right::before {
+ transition: transform 200ms ease;
+}
+
+.sidebar-item
+ .sidebar-item-toggle[aria-expanded="false"]
+ .bi-chevron-right::before {
+ transform: none;
+}
+
+.sidebar-item
+ .sidebar-item-toggle[aria-expanded="true"]
+ .bi-chevron-right::before {
+ transform: rotate(90deg);
+}
+
+.sidebar-item-text {
+ width: 100%;
+}
+
+.sidebar-navigation .sidebar-divider {
+ margin-left: 0;
+ margin-right: 0;
+ margin-top: 0.5rem;
+ margin-bottom: 0.5rem;
+}
+
+// Toggle the top secondary navigation bar
+@include media-breakpoint-down(lg) {
+ .quarto-secondary-nav {
+ display: block;
+
+ button.quarto-search-button {
+ padding-right: 0em;
+ padding-left: 2em;
+ }
+
+ button.quarto-btn-toggle {
+ margin-left: -0.75rem;
+ margin-right: 0.15rem;
+ }
+
+ nav.quarto-title-breadcrumbs {
+ display: none;
+ }
+
+ nav.quarto-page-breadcrumbs {
+ display: flex;
+ align-items: center;
+ padding-right: 1em;
+ margin-left: -0.25em;
+
+ a {
+ text-decoration: none;
+ }
+
+ ol.breadcrumb {
+ margin-bottom: 0;
+ }
+ }
+ }
+}
+
+@include media-breakpoint-up(lg) {
+ .quarto-secondary-nav {
+ display: none;
+ }
+}
+
+.quarto-title-breadcrumbs .breadcrumb {
+ margin-bottom: 0.5em;
+ font-size: 0.9rem;
+
+ li:last-of-type {
+ a {
+ color: $text-muted;
+ }
+ }
+}
+
+$sidebar-hl: if(
+ $sidebar-hl,
+ sidebar-hl,
+ theme-contrast($nav-link-color, $sidebar-bg)
+);
+$sidebar-color: rgba($sidebar-fg, 1) !default;
+$sidebar-hover-color: rgba($sidebar-hl, 0.8) !default;
+$sidebar-active-color: $sidebar-hl !default;
+$sidebar-disabled-color: rgba($sidebar-fg, 0.75) !default;
+
+.quarto-secondary-nav .quarto-btn-toggle {
+ color: $sidebar-color;
+}
+
+.quarto-secondary-nav[aria-expanded="false"]
+ .quarto-btn-toggle
+ .bi-chevron-right::before {
+ transform: none;
+}
+
+.quarto-secondary-nav[aria-expanded="true"]
+ .quarto-btn-toggle
+ .bi-chevron-right::before {
+ transform: rotate(90deg);
+}
+
+.quarto-secondary-nav .quarto-btn-toggle .bi-chevron-right::before {
+ transition: transform 200ms ease;
+}
+
+.quarto-secondary-nav {
+ cursor: pointer;
+}
+
+.no-decor {
+ text-decoration: none;
+}
+
+.quarto-secondary-nav-title {
+ margin-top: 0.3em;
+ color: $sidebar-color;
+ padding-top: 4px;
+}
+
+.quarto-secondary-nav nav.quarto-page-breadcrumbs {
+ color: $sidebar-color;
+ a {
+ color: $sidebar-color;
+ }
+ a:hover {
+ color: $sidebar-hover-color;
+ }
+ .breadcrumb-item::before {
+ color: theme-dim($sidebar-color, 20%);
+ }
+}
+
+.breadcrumb-item {
+ line-height: 1.2rem;
+}
+
+div.sidebar-item-container {
+ color: $sidebar-color;
+ &:hover,
+ &:focus {
+ color: $sidebar-hover-color;
+ }
+
+ &.disabled {
+ color: $sidebar-disabled-color;
+ }
+
+ .active,
+ .show > .nav-link,
+ .sidebar-link > code {
+ color: $sidebar-active-color;
+ }
+}
+
+div.sidebar.sidebar-navigation.rollup.quarto-sidebar-toggle-contents,
+nav.sidebar.sidebar-navigation:not(.rollup) {
+ @if $sidebar-bg {
+ background-color: $sidebar-bg;
+ } @else {
+ background-color: $body-bg;
+ }
+}
+
+@if $sidebar-border {
+ .sidebar.sidebar-navigation:not(.rollup) {
+ border-right: 1px solid $table-border-color !important;
+ }
+}
+
+@include media-breakpoint-down(lg) {
+ .sidebar-navigation .sidebar-item a,
+ .nav-page .nav-page-text,
+ .sidebar-navigation {
+ font-size: $sidebar-font-size-collapse;
+ }
+
+ .sidebar-navigation ul.sidebar-section.depth1 .sidebar-section-item {
+ font-size: $sidebar-font-size-section-collapse;
+ }
+
+ .sidebar-logo {
+ display: none;
+ }
+
+ .sidebar.sidebar-navigation {
+ position: static;
+ border-bottom: 1px solid $table-border-color;
+ }
+
+ .sidebar.sidebar-navigation.collapsing {
+ position: fixed;
+ z-index: 1000;
+ }
+
+ .sidebar.sidebar-navigation.show {
+ position: fixed;
+ z-index: 1000;
+ }
+
+ .sidebar.sidebar-navigation {
+ min-height: 100%;
+ }
+
+ nav.quarto-secondary-nav {
+ @if $sidebar-bg {
+ background-color: $sidebar-bg;
+ } @else {
+ background-color: $body-bg;
+ }
+ border-bottom: 1px solid $table-border-color;
+ }
+
+ .quarto-banner nav.quarto-secondary-nav {
+ @if variable-exists(navbar-bg) {
+ background-color: $navbar-bg;
+ }
+
+ @if (variable-exists(navbar-fg)) {
+ color: $navbar-fg;
+ }
+ border-top: 1px solid $table-border-color;
+ }
+
+ .sidebar .sidebar-footer {
+ visibility: visible;
+ padding-top: 1rem;
+ position: inherit;
+ }
+
+ .sidebar-tools-collapse {
+ display: block;
+ }
+}
+
+#quarto-sidebar {
+ transition: width $sidebar-anim-duration ease-in;
+ > * {
+ padding-right: 1em;
+ }
+}
+
+@include media-breakpoint-down(lg) {
+ #quarto-sidebar .sidebar-menu-container {
+ white-space: nowrap;
+ min-width: 225px;
+ }
+
+ #quarto-sidebar.show {
+ transition: width $sidebar-anim-duration ease-out;
+ }
+}
+
+@include media-breakpoint-up(lg) {
+ #quarto-sidebar {
+ display: flex;
+ flex-direction: column;
+ }
+ .nav-page .nav-page-text,
+ .sidebar-navigation .sidebar-section .sidebar-item {
+ font-size: $sidebar-font-size-section;
+ }
+
+ .sidebar-navigation .sidebar-item {
+ font-size: $sidebar-font-size;
+ }
+
+ .sidebar.sidebar-navigation {
+ display: block;
+ position: sticky;
+ }
+
+ .sidebar-search {
+ width: 100%;
+ }
+
+ .sidebar .sidebar-footer {
+ visibility: visible;
+ }
+}
+
+@include media-breakpoint-up(lg) {
+ #quarto-sidebar-glass {
+ display: none;
+ }
+}
+
+@include media-breakpoint-down(lg) {
+ #quarto-sidebar-glass {
+ position: fixed;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ background-color: #ffffff00;
+ transition: background-color $sidebar-anim-duration ease-in;
+ z-index: -1;
+ }
+
+ #quarto-sidebar-glass.collapsing {
+ z-index: $zindex-dropdown;
+ }
+
+ #quarto-sidebar-glass.show {
+ transition: background-color $sidebar-anim-duration ease-out;
+ background-color: $sidebar-glass-bg;
+ z-index: $zindex-dropdown;
+ }
+}
+
+.sidebar .sidebar-footer {
+ padding: 0.5rem 1rem;
+ align-self: flex-end;
+ color: $text-muted;
+ width: 100%;
+}
+
+.quarto-page-breadcrumbs .breadcrumb-item + .breadcrumb-item,
+.quarto-page-breadcrumbs .breadcrumb-item {
+ padding-right: 0.33em;
+ padding-left: 0;
+}
+
+.quarto-page-breadcrumbs .breadcrumb-item::before {
+ padding-right: 0.33em;
+}
+
+.quarto-sidebar-footer {
+ font-size: 0.875em;
+}
+
+.sidebar-section .bi-chevron-right {
+ vertical-align: middle;
+}
+
+.sidebar-section .bi-chevron-right::before {
+ font-size: 0.9em;
+}
+
+.notransition {
+ -webkit-transition: none !important;
+ -moz-transition: none !important;
+ -o-transition: none !important;
+ transition: none !important;
+}
+
+// This is used to suppress the focus borders on Chrome when the user is simply
+// clicking with the mouse vs using the keyboard to move focus.
+.btn:focus:not(:focus-visible) {
+ box-shadow: none;
+}
+
+.page-navigation {
+ display: flex;
+ justify-content: space-between;
+}
+
+.nav-page {
+ padding-bottom: 0.75em;
+}
+
+.nav-page .bi {
+ font-size: 1.8rem;
+ vertical-align: middle;
+}
+
+.nav-page .nav-page-text {
+ padding-left: 0.25em;
+ padding-right: 0.25em;
+}
+
+.nav-page a {
+ color: $text-muted;
+ text-decoration: none;
+ display: flex;
+ align-items: center;
+}
+
+.nav-page a:hover {
+ color: $link-hover-color;
+}
+
+.nav-footer .toc-actions {
+ a,
+ a:hover {
+ text-decoration: none;
+ }
+
+ ul {
+ display: flex;
+ list-style: none;
+
+ :first-child {
+ margin-left: auto;
+ }
+ :last-child {
+ margin-right: auto;
+ }
+
+ li {
+ padding-right: 1.5em;
+
+ i.bi {
+ padding-right: 0.4em;
+ }
+ }
+
+ li:last-of-type {
+ padding-right: 0;
+ }
+ }
+
+ padding-bottom: 0.5em;
+ padding-top: 0.5em;
+}
+
+// border weight
+// border style
+.nav-footer {
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+ justify-content: space-between;
+ align-items: baseline;
+ text-align: center;
+ padding-top: 0.5rem;
+ padding-bottom: 0.5rem;
+ @if variable-exists(footer-bg) {
+ background-color: $footer-bg;
+ }
+}
+
+// Immediate set the top offset if a fixed top header is present
+// This prevents a 'flash / jerk' when the page loads
+body.nav-fixed {
+ padding-top: navbar-default-offset($theme-name);
+}
+
+body .nav-footer {
+ @if variable-exists(footer-border) and $footer-border {
+ @if variable-exists(footer-border-color) {
+ border-top: 1px solid $footer-border-color;
+ } @else {
+ border-top: 1px solid $table-border-color;
+ }
+ }
+}
+
+.nav-footer-contents {
+ color: $text-muted;
+ margin-top: 0.25rem;
+}
+
+.nav-footer {
+ min-height: 3.5em;
+ color: $footer-fg;
+ a {
+ @if variable-exists(footer-fg) {
+ color: $footer-fg;
+ }
+ }
+}
+
+@if variable-exists(footer-left-font-size) {
+ .nav-footer .nav-footer-left {
+ font-size: $footer-left-font-size;
+ }
+}
+
+@if variable-exists(footer-center-font-size) {
+ .nav-footer .nav-footer-center {
+ font-size: $footer-center-font-size;
+ }
+}
+
+@if variable-exists(footer-right-font-size) {
+ .nav-footer .nav-footer-right {
+ font-size: $footer-right-font-size;
+ }
+}
+
+.nav-footer-left .footer-items,
+.nav-footer-center .footer-items,
+.nav-footer-right .footer-items {
+ display: inline-flex;
+ padding-top: 0.3em;
+ padding-bottom: 0.3em;
+ margin-bottom: 0em;
+}
+
+.nav-footer-left .footer-items .nav-link,
+.nav-footer-center .footer-items .nav-link,
+.nav-footer-right .footer-items .nav-link {
+ padding-left: 0.6em;
+ padding-right: 0.6em;
+}
+.nav-footer-left {
+ @include media-breakpoint-up(md) {
+ flex: 1 1 0px;
+ text-align: left;
+ }
+ @include media-breakpoint-down(sm) {
+ margin-bottom: 1em;
+ flex: 100%;
+ }
+}
+.nav-footer-right {
+ @include media-breakpoint-up(md) {
+ flex: 1 1 0px;
+ text-align: right;
+ }
+ @include media-breakpoint-down(sm) {
+ margin-bottom: 1em;
+ flex: 100%;
+ }
+}
+
+.nav-footer-center {
+ @include media-breakpoint-up(md) {
+ flex: 1 1 0px;
+ }
+ text-align: center;
+ min-height: 3em;
+ .footer-items {
+ justify-content: center;
+ }
+ @include media-breakpoint-down(md) {
+ margin-bottom: 1em;
+ flex: 100%;
+ }
+}
+
+@include media-breakpoint-down(md) {
+ .nav-footer-center {
+ margin-top: 3em;
+ order: 10;
+ }
+}
+
+.navbar .quarto-reader-toggle.reader .quarto-reader-toggle-btn {
+ background-color: $navbar-fg;
+ border-radius: 3px;
+}
+
+@include media-breakpoint-down(lg) {
+ .quarto-reader-toggle {
+ display: none;
+ }
+}
+
+.quarto-reader-toggle.reader.quarto-navigation-tool .quarto-reader-toggle-btn {
+ background-color: $sidebar-fg;
+ border-radius: 3px;
+}
+
+.quarto-reader-toggle .quarto-reader-toggle-btn {
+ display: inline-flex;
+ padding-left: 0.2em;
+ padding-right: 0.2em;
+ margin-left: -0.2em;
+ margin-right: -0.2em;
+ text-align: center;
+}
+
+.navbar .quarto-reader-toggle:not(.reader) .bi::before {
+ background-image: url('data:image/svg+xml,');
+}
+
+.navbar .quarto-reader-toggle.reader .bi::before {
+ background-image: url('data:image/svg+xml,');
+}
+
+.sidebar-navigation .quarto-reader-toggle:not(.reader) .bi::before {
+ background-image: url('data:image/svg+xml,');
+}
+
+.sidebar-navigation .quarto-reader-toggle.reader .bi::before {
+ background-image: url('data:image/svg+xml,');
+}
+
+#quarto-back-to-top {
+ display: none;
+ position: fixed;
+ bottom: 50px;
+ background-color: $body-bg;
+ border-radius: $border-radius;
+ box-shadow: 0 0.2rem 0.5rem $text-muted, 0 0 0.05rem $text-muted;
+ color: $text-muted;
+ text-decoration: none;
+ font-size: 0.9em;
+ text-align: center;
+ left: 50%;
+ padding: 0.4rem 0.8rem;
+ transform: translate(-50%, 0);
+}
+
+/* announcement bar */
+#quarto-announcement {
+ padding: 0.5em;
+ display: flex;
+ justify-content: space-between;
+ margin-bottom: 0;
+ font-size: 0.9em;
+
+ .quarto-announcement-content {
+ margin-right: auto;
+ p {
+ margin-bottom: 0;
+ }
+ }
+ .quarto-announcement-icon {
+ margin-right: 0.5em;
+ font-size: 1.2em;
+ margin-top: -0.15em;
+ }
+ .quarto-announcement-action {
+ cursor: pointer;
+ }
+}
+
+
+.aa-DetachedSearchButtonQuery {
+ display: none;
+}
+
+.aa-DetachedOverlay,
+#quarto-search-results {
+ ul.aa-List {
+ list-style: none;
+ padding-left: 0;
+ }
+
+ .aa-Panel {
+ background-color: $body-bg;
+ position: absolute;
+ z-index: 2000;
+ }
+}
+#quarto-search-results {
+ .aa-Panel {
+ max-width: $quarto-search-results-width;
+ }
+}
+
+#quarto-search input {
+ font-size: 0.925rem;
+}
+
+.navbar #quarto-search {
+ @include media-breakpoint-up(lg) {
+ margin-left: 0.25rem;
+ order: 999;
+ }
+}
+
+.navbar.navbar-expand-sm #quarto-search,
+.navbar.navbar-expand-md #quarto-search {
+ order: 999;
+}
+
+.navbar .quarto-navbar-tools {
+ @include media-breakpoint-up(lg) {
+ order: 900;
+ }
+ &.tools-end {
+ @include media-breakpoint-up(lg) {
+ margin-left: auto !important;
+ }
+ }
+}
+
+#quarto-sidebar {
+ .sidebar-search {
+ @include media-breakpoint-down(lg) {
+ display: none;
+ }
+ .aa-Autocomplete {
+ width: $quarto-sidebar-search-input-width;
+ }
+ }
+}
+
+.navbar {
+ .aa-Autocomplete {
+ .aa-Form {
+ width: $quarto-navbar-search-input-width;
+ }
+ }
+}
+
+.navbar #quarto-search.type-overlay {
+ .aa-Autocomplete {
+ width: 40px;
+ .aa-Form {
+ background-color: inherit;
+ border: none;
+ &:focus-within {
+ box-shadow: none;
+ outline: none;
+ }
+ .aa-InputWrapper {
+ display: none;
+ &:focus-within {
+ display: inherit;
+ }
+ }
+
+ .aa-Label,
+ .aa-LoadingIndicator {
+ svg {
+ width: $quarto-search-collapse-icon-size;
+ height: $quarto-search-collapse-icon-size;
+
+ color: $navbar-fg;
+ opacity: 1;
+ }
+ }
+ }
+
+ svg.aa-SubmitIcon {
+ width: $quarto-search-collapse-icon-size;
+ height: $quarto-search-collapse-icon-size;
+
+ color: $navbar-fg;
+ opacity: 1;
+ }
+ }
+}
+
+.aa-Autocomplete,
+.aa-DetachedFormContainer {
+ // Search box
+ .aa-Form {
+ align-items: center;
+ background-color: $input-bg;
+ border: $input-border-width solid $input-border-color;
+ border-radius: $input-border-radius;
+ color: $input-color;
+ display: flex;
+ line-height: 1em;
+ margin: 0;
+ position: relative;
+ width: 100%;
+ &:focus-within {
+ box-shadow: rgba($primary, 0.6) 0 0 0 1px;
+ outline: currentColor none medium;
+ }
+ .aa-InputWrapperPrefix {
+ align-items: center;
+ display: flex;
+ flex-shrink: 0;
+ order: 1;
+ // Container for search and loading icons
+ .aa-Label,
+ .aa-LoadingIndicator {
+ cursor: initial;
+ flex-shrink: 0;
+ padding: 0;
+ text-align: left;
+ svg {
+ color: $input-color;
+ opacity: 0.5;
+ }
+ }
+ .aa-SubmitButton {
+ appearance: none;
+ background: none;
+ border: 0;
+ margin: 0;
+ }
+ .aa-LoadingIndicator {
+ align-items: center;
+ display: flex;
+ justify-content: center;
+ &[hidden] {
+ display: none;
+ }
+ }
+ }
+ .aa-InputWrapper {
+ order: 3;
+ position: relative;
+ width: 100%;
+
+ // Search box input (with placeholder and query)
+ .aa-Input {
+ appearance: none;
+ background: none;
+ border: 0;
+ color: $input-color;
+ font: inherit;
+ height: calc(1.5em + (0.1rem + 2px));
+ padding: 0;
+ width: 100%;
+ &::placeholder {
+ color: $input-color;
+ opacity: 0.8;
+ }
+ // Focus is set and styled on the parent, it isn't necessary here
+ &:focus {
+ border-color: none;
+ box-shadow: none;
+ outline: none;
+ }
+ // Remove native appearence
+ &::-webkit-search-decoration,
+ &::-webkit-search-cancel-button,
+ &::-webkit-search-results-button,
+ &::-webkit-search-results-decoration {
+ display: none;
+ }
+ }
+ }
+ .aa-InputWrapperSuffix {
+ align-items: center;
+ display: flex;
+ order: 4;
+ // Accelerator to clear the query
+ .aa-ClearButton {
+ align-items: center;
+ background: none;
+ border: 0;
+ color: $input-color;
+ opacity: 0.8;
+ cursor: pointer;
+ display: flex;
+ margin: 0;
+ width: calc(1.5em + (0.1rem + 2px));
+ &:hover,
+ &:focus {
+ color: $input-color;
+ opacity: 0.8;
+ }
+ &[hidden] {
+ display: none;
+ }
+ svg {
+ width: $input-height;
+ }
+ }
+
+ .aa-CopyButton {
+ border: none;
+ align-items: center;
+ background: none;
+ color: $input-color;
+ opacity: 0.4;
+ font-size: 0.7rem;
+ cursor: pointer;
+ display: none;
+ margin: 0;
+ width: calc(1em + (0.1rem + 2px));
+ &:hover,
+ &:focus {
+ color: $input-color;
+ opacity: 0.8;
+ }
+ &[hidden] {
+ display: none;
+ }
+ }
+ }
+ }
+}
+
+.aa-PanelLayout:empty {
+ display: none;
+}
+
+.quarto-search-no-results.no-query {
+ display: none;
+}
+
+.aa-Source:has(.no-query) {
+ display: none;
+}
+
+#quarto-search-results .aa-Panel {
+ border: solid $input-border-color $input-border-width;
+}
+
+#quarto-search-results .aa-SourceNoResults {
+ width: $quarto-search-results-width - 2 * $input-border-width;
+}
+
+.aa-DetachedOverlay,
+#quarto-search-results {
+ .aa-Panel {
+ max-height: 65vh;
+ overflow-y: auto;
+ font-size: 0.925rem;
+ }
+
+ .aa-SourceNoResults {
+ height: 60px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ }
+
+ .search-error {
+ padding-top: 10px;
+ padding-left: 20px;
+ padding-right: 20px;
+ cursor: default;
+ .search-error-title {
+ font-size: 1.1rem;
+ margin-bottom: 0.5rem;
+ .search-error-icon {
+ margin-right: 8px;
+ }
+ }
+ .search-error-text {
+ font-weight: 300;
+ }
+ }
+
+ .search-result-text {
+ font-weight: 300;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ display: -webkit-box;
+ -webkit-line-clamp: 2; /* number of lines to show */
+ -webkit-box-orient: vertical;
+ line-height: 1.2rem; /* fallback */
+ max-height: 2.4rem; /* fallback */
+ }
+
+ .aa-SourceHeader {
+ .search-result-header {
+ font-size: 0.875rem;
+ background-color: theme-dim($body-bg, 5%);
+ padding-left: 14px;
+ padding-bottom: 4px;
+ padding-top: 4px;
+ }
+
+ .search-result-header-no-results {
+ display: none;
+ }
+ }
+
+ .aa-SourceFooter {
+ .algolia-search-logo {
+ width: 110px;
+ opacity: 0.85;
+ margin: 8px;
+ float: right;
+ }
+ }
+
+ .search-result-section {
+ font-size: 0.925em;
+ }
+
+ a.search-result-link {
+ color: inherit;
+ text-decoration: none;
+ }
+
+ li.aa-Item[aria-selected="true"] {
+ .search-item {
+ background-color: $component-active-bg;
+
+ &.search-result-more,
+ .search-result-section,
+ .search-result-text,
+ .search-result-title-container,
+ .search-result-text-container {
+ color: $component-active-color;
+ background-color: $component-active-bg;
+ }
+
+ mark.search-match {
+ color: $component-active-color;
+ background-color: theme-fade($component-active-bg, $body-bg, 8%);
+ }
+ }
+ }
+
+ li.aa-Item[aria-selected="false"] {
+ .search-item {
+ background-color: $popover-bg;
+
+ &.search-result-more,
+ .search-result-section,
+ .search-result-text,
+ .search-result-title-container,
+ .search-result-text-container {
+ color: $popover-body-color;
+ }
+
+ mark.search-match {
+ color: inherit;
+ background-color: theme-fade($component-active-bg, $body-bg, 42%);
+ }
+ }
+ }
+
+ .aa-Item {
+ .search-result-doc:not(.document-selectable) {
+ .search-result-title-container {
+ background-color: $popover-bg;
+ color: $body-color;
+ }
+ .search-result-text-container {
+ padding-top: 0px;
+ }
+ }
+ }
+ li.aa-Item {
+ .search-result-doc.document-selectable {
+ .search-result-text-container {
+ margin-top: -4px;
+ }
+ }
+ }
+
+ .aa-Item {
+ cursor: pointer;
+
+ .search-item {
+ border-left: none;
+ border-right: none;
+ border-top: none;
+ background-color: $popover-bg;
+ border-color: $input-border-color;
+ color: $popover-body-color;
+ }
+
+ .search-item {
+ p {
+ margin-top: 0;
+ margin-bottom: 0;
+ }
+
+ i.bi {
+ padding-left: 8px;
+ padding-right: 8px;
+ font-size: 1.3em;
+ }
+
+ .search-result-title {
+ margin-top: 0.3em;
+ margin-bottom: 0em;
+ }
+
+ .search-result-crumbs {
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ font-size: 0.8em;
+ font-weight: 300;
+ margin-right: 1em;
+ }
+
+ .search-result-crumbs:not(.search-result-crumbs-wrap) {
+ max-width: 30%;
+ margin-left: auto;
+ margin-top: 0.5em;
+ margin-bottom: 0.1rem;
+ }
+
+ .search-result-crumbs.search-result-crumbs-wrap {
+ flex-basis: 100%;
+ margin-top: 0em;
+ margin-bottom: 0.2em;
+ margin-left: 37px;
+ }
+ }
+
+ .search-result-title-container {
+ font-size: 1em;
+ display: flex;
+ flex-wrap: wrap;
+ padding: 6px 4px 6px 4px;
+ }
+
+ .search-result-text-container {
+ padding-bottom: 8px;
+ padding-right: 8px;
+ margin-left: 42px;
+ }
+
+ .search-result-doc-section,
+ .search-result-more {
+ padding-top: 8px;
+ padding-bottom: 8px;
+ padding-left: 44px;
+ }
+
+ .search-result-more {
+ font-size: 0.8em;
+ font-weight: 400;
+ }
+
+ .search-result-doc {
+ border-top: $input-border-width solid $input-border-color;
+ }
+ }
+}
+
+// Detached Mode
+.aa-DetachedSearchButton {
+ background: none;
+ border: none;
+
+ .aa-DetachedSearchButtonPlaceholder {
+ display: none;
+ }
+}
+.navbar {
+ .aa-DetachedSearchButton {
+ .aa-DetachedSearchButtonIcon {
+ color: $navbar-fg;
+ }
+ }
+}
+.sidebar-tools-collapse,
+.sidebar-tools-main {
+ #quarto-search {
+ display: inline;
+ .aa-Autocomplete {
+ display: inline;
+ }
+ .aa-DetachedSearchButton {
+ padding-left: 4px;
+ padding-right: 4px;
+ .aa-DetachedSearchButtonIcon {
+ color: $sidebar-fg;
+ .aa-SubmitIcon {
+ margin-top: -3px;
+ }
+ }
+ }
+ }
+}
+.aa-DetachedContainer {
+ background: rgba($body-bg, 0.65);
+ width: 90%;
+ bottom: 0;
+ box-shadow: rgba($input-border-color, 0.6) 0 0 0 1px;
+ outline: currentColor none medium;
+ display: flex;
+ flex-direction: column;
+ left: 0;
+ margin: 0;
+ overflow: hidden;
+ padding: 0;
+ position: fixed;
+ right: 0;
+ top: 0;
+ z-index: 1101;
+ &::after {
+ height: 32px;
+ }
+ .aa-SourceHeader {
+ margin: var(--aa-spacing-half) 0 var(--aa-spacing-half) 2px;
+ }
+ .aa-Panel {
+ background-color: rgba($body-bg, 1);
+ border-radius: 0;
+ box-shadow: none;
+ flex-grow: 1;
+ margin: 0;
+ padding: 0;
+ position: relative;
+ }
+ .aa-PanelLayout {
+ bottom: 0;
+ box-shadow: none;
+ left: 0;
+ margin: 0;
+ max-height: none;
+ overflow-y: auto;
+ position: absolute;
+ right: 0;
+ top: 0;
+ width: 100%;
+ }
+ @at-root .aa-DetachedFormContainer {
+ background-color: rgba($body-bg, 1);
+ border-bottom: $input-border-width solid $input-border-color;
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+ margin: 0;
+ padding: 0.5em;
+ @at-root .aa-DetachedCancelButton {
+ background: none;
+ font-size: 0.8em;
+ border: 0;
+ border-radius: 3px;
+ color: $body-color;
+ cursor: pointer;
+ margin: 0 0 0 0.5em;
+ padding: 0 0.5em;
+ &:hover,
+ &:focus {
+ box-shadow: rgba($primary, 0.6) 0 0 0 1px;
+ outline: currentColor none medium;
+ }
+ }
+ }
+ @at-root .aa-DetachedContainer--modal {
+ bottom: inherit;
+ height: auto;
+ margin: 0 auto;
+ position: absolute;
+ @include media-breakpoint-down(sm) {
+ width: 100%;
+ top: 0px;
+ border-radius: 0px;
+ border: none;
+ }
+
+ @include media-breakpoint-up(med) {
+ top: 100px;
+ border-radius: 6px;
+ max-width: 850px;
+ }
+
+ .aa-PanelLayout {
+ max-height: var(--aa-detached-modal-max-height);
+ padding-bottom: var(--aa-spacing-half);
+ position: static;
+ }
+ }
+}
+
+.aa-Detached {
+ height: 100vh;
+ overflow: hidden;
+}
+
+.aa-DetachedOverlay {
+ background-color: rgba($body-color, 0.4);
+ position: fixed;
+ left: 0;
+ right: 0;
+ top: 0;
+ margin: 0;
+ padding: 0;
+ height: 100vh;
+ z-index: 1100;
+}
+
+
+
+// Value Boxes
+$valuebox-bg-primary: theme-override-value(
+ $theme-name,
+ "valuebox-bg-primary",
+ $primary
+) !default;
+$valuebox-bg-secondary: theme-override-value(
+ $theme-name,
+ "valuebox-bg-secondary",
+ $secondary
+) !default;
+$valuebox-bg-success: theme-override-value(
+ $theme-name,
+ "valuebox-bg-success",
+ $success
+) !default;
+$valuebox-bg-info: theme-override-value(
+ $theme-name,
+ "valuebox-bg-info",
+ $info
+) !default;
+$valuebox-bg-warning: theme-override-value(
+ $theme-name,
+ "valuebox-bg-warning",
+ $warning
+) !default;
+$valuebox-bg-danger: theme-override-value(
+ $theme-name,
+ "valuebox-bg-danger",
+ $danger
+) !default;
+$valuebox-bg-light: theme-override-value(
+ $theme-name,
+ "valuebox-bg-light",
+ $light
+) !default;
+$valuebox-bg-dark: theme-override-value(
+ $theme-name,
+ "valuebox-bg-dark",
+ $dark
+) !default;
+
+$valuebox-colors: (
+ "primary": $valuebox-bg-primary,
+ "secondary": $valuebox-bg-secondary,
+ "success": $valuebox-bg-success,
+ "info": $valuebox-bg-info,
+ "warning": $valuebox-bg-warning,
+ "danger": $valuebox-bg-danger,
+ "light": $valuebox-bg-light,
+ "dark": $valuebox-bg-dark,
+);
+
+// Dashboards
+.quarto-dashboard {
+ &.nav-fixed.dashboard-sidebar #quarto-content.quarto-dashboard-content {
+ padding: 0em;
+ }
+
+ #quarto-content.quarto-dashboard-content {
+ padding: 1em;
+ > * {
+ padding-top: 0;
+ }
+ }
+
+ @include media-breakpoint-up(sm) {
+ height: 100%;
+ }
+
+ @each $valuebox-color, $valuebox-color-value in $valuebox-colors {
+ .card.valuebox.bslib-card.bg-#{$valuebox-color} {
+ background-color: $valuebox-color-value !important;
+ }
+ }
+
+ &.dashboard-fill {
+ display: flex;
+ flex-direction: column;
+ }
+
+ #quarto-appendix {
+ display: none;
+ }
+
+ // Navbar / Navigation
+ #quarto-header #quarto-dashboard-header {
+ border-top: solid 1px theme-dim($navbar-bg, 10%);
+ border-bottom: solid 1px theme-dim($navbar-bg, 10%);
+
+ > nav {
+ padding-left: 1em;
+ padding-right: 1em;
+ .navbar-brand-container {
+ padding-left: 0;
+ }
+ }
+ .navbar-toggler {
+ margin-right: 0;
+ }
+
+ .navbar-toggler-icon {
+ height: 1em;
+ width: 1em;
+ background-image: url('data:image/svg+xml,');
+ }
+
+ .navbar-brand-container {
+ padding-right: 1em;
+ }
+
+ .navbar-title {
+ font-size: 1.1em;
+ }
+
+ .navbar-nav {
+ font-size: 0.9em;
+ }
+ }
+
+ #quarto-dashboard-header {
+ .navbar {
+ padding: 0;
+
+ .navbar-container {
+ padding-left: 1em;
+ }
+
+ &.slim {
+ .navbar-brand-container,
+ .navbar-nav {
+ .nav-link {
+ padding: 0.7em;
+ }
+ }
+ }
+
+ .quarto-color-scheme-toggle {
+ order: 9;
+ }
+
+ .navbar-toggler {
+ margin-left: 0.5em;
+ order: 10;
+ }
+
+ .navbar-nav {
+ .nav-link {
+ padding: 0.5em;
+ height: 100%;
+ display: flex;
+ align-items: center;
+ }
+ & .active {
+ background-color: theme-dim($navbar-bg, 8%);
+ }
+ }
+
+ .navbar-brand-container {
+ padding: 0.5em 0.5em 0.5em 0;
+ display: flex;
+ flex-direction: row;
+ margin-right: 2em;
+ align-items: center;
+ @include media-breakpoint-down(md) {
+ margin-right: auto;
+ }
+ }
+
+ .navbar-collapse {
+ @include media-breakpoint-up(md) {
+ order: 8;
+ }
+ @include media-breakpoint-down(md) {
+ order: 1000;
+ padding-bottom: 0.5em;
+ }
+ align-self: stretch;
+ .navbar-nav {
+ align-self: stretch;
+ }
+ }
+
+ .navbar-title {
+ font-size: 1.25em;
+ line-height: 1.1em;
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+ align-items: baseline;
+ .navbar-title-text {
+ margin-right: 0.4em;
+ }
+ a {
+ text-decoration: none;
+ color: inherit;
+ }
+ }
+
+ .navbar-subtitle,
+ .navbar-author {
+ font-size: 0.9rem;
+ margin-right: 0.5em;
+ }
+
+ .navbar-author {
+ margin-left: auto;
+ }
+
+ .navbar-logo {
+ max-height: 48px;
+ min-height: 30px;
+ object-fit: cover;
+ margin-right: 1em;
+ }
+
+ .quarto-dashboard-links {
+ order: 9;
+ padding-right: 1em;
+ }
+ .quarto-dashboard-link-text {
+ margin-left: 0.25em;
+ }
+
+ .quarto-dashboard-link {
+ padding-right: 0em;
+ padding-left: 0.7em;
+ text-decoration: none;
+ color: $navbar-fg;
+ }
+ }
+ }
+
+ .page-layout-custom .tab-content {
+ padding: 0;
+ border: none;
+ }
+}
+
+.quarto-dashboard-img-contain {
+ height: 100%;
+ width: 100%;
+ object-fit: contain;
+}
+
+.quarto-dashboard {
+ // Mobile sizes convert into 'scrolling' layouts
+ @include media-breakpoint-down(sm) {
+ .bslib-grid {
+ grid-template-rows: minmax(1em, max-content) !important;
+ }
+ .sidebar-content {
+ height: inherit;
+ }
+ .page-layout-custom {
+ min-height: 100vh;
+ }
+ }
+
+ &.dashboard-toolbar > .page-layout-custom,
+ &.dashboard-sidebar > .page-layout-custom {
+ padding: 0;
+ }
+
+ .quarto-dashboard-content.quarto-dashboard-pages {
+ padding: 0;
+ }
+
+ .callout {
+ margin-bottom: 0;
+ margin-top: 0;
+ }
+
+ .html-fill-container figure {
+ overflow: hidden;
+ }
+
+ bslib-tooltip {
+ .rounded-pill {
+ .svg {
+ fill: $body-color;
+ }
+ border: solid $text-muted 1px;
+ }
+ }
+
+ .tabset .dashboard-card-no-title .nav-tabs {
+ margin-left: 0;
+ margin-right: auto;
+ }
+
+ .tabset .tab-content {
+ border: none;
+ }
+
+ .tabset .card-header {
+ .nav-link[role="tab"] {
+ margin-top: -6px;
+ padding-top: 6px;
+ padding-bottom: 6px;
+ }
+ }
+
+ .card.valuebox,
+ .card.bslib-value-box {
+ min-height: 3rem;
+ .card-body {
+ padding: 0;
+ }
+ }
+
+ .bslib-value-box {
+ .value-box-value {
+ font-size: clamp(0.1em, 15cqw, 5em);
+ }
+
+ .value-box-showcase .bi {
+ font-size: clamp(0.1em, max(18cqw, 5.2cqh), 5em);
+
+ text-align: center;
+ height: 1em;
+ }
+
+ .value-box-showcase .bi::before {
+ vertical-align: 1em;
+ }
+
+ .value-box-area {
+ margin-top: auto;
+ margin-bottom: auto;
+ }
+ }
+
+ .card figure.quarto-float {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ }
+
+ .dashboard-scrolling {
+ padding: 1em;
+ }
+
+ .full-height {
+ height: 100%;
+ }
+
+ .showcase-bottom {
+ .value-box-grid {
+ display: grid;
+ grid-template-columns: 1fr;
+ grid-template-rows: 1fr auto;
+ grid-template-areas: "top" "bottom";
+
+ .value-box-showcase {
+ grid-area: bottom;
+ padding: 0;
+ margin: 0;
+ i.bi {
+ font-size: 4rem;
+ }
+ }
+ .value-box-area {
+ grid-area: top;
+ }
+ }
+ }
+
+ .tab-content {
+ margin-bottom: 0;
+ }
+
+ .bslib-card .bslib-navs-card-title {
+ justify-content: stretch;
+ align-items: end;
+ }
+
+ .card-header {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: space-between;
+
+ .card-title {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ margin-bottom: 0;
+ }
+ }
+
+ .tabset {
+ .card-toolbar {
+ margin-bottom: 1em;
+ }
+ }
+
+ /* Sidebar */
+ .bslib-grid > .bslib-sidebar-layout {
+ border: none;
+ gap: var(--bslib-spacer, 1rem);
+ > .main {
+ padding: 0;
+ }
+ > .sidebar {
+ border-radius: $card-border-radius;
+ border: $card-border-width solid $card-border-color;
+ }
+ > .collapse-toggle {
+ display: none;
+ }
+
+ @include media-breakpoint-down(md) {
+ grid-template-columns: 1fr;
+ grid-template-rows: max-content 1fr;
+ > .main {
+ grid-column: 1;
+ grid-row: 2;
+ }
+ .sidebar {
+ grid-column: 1;
+ grid-row: 1;
+ }
+ }
+ }
+
+ .sidebar-right {
+ .sidebar {
+ padding-left: 2.5em;
+ }
+
+ .collapse-toggle {
+ left: 2px;
+ }
+ }
+
+ .quarto-dashboard .sidebar-right button.collapse-toggle:not(.transitioning) {
+ left: unset;
+ }
+
+ aside.sidebar {
+ padding-left: 1em;
+ padding-right: 1em;
+ background-color: $card-cap-bg;
+ color: $card-cap-color or $body-color;
+ }
+
+ .bslib-sidebar-layout {
+ > div.main {
+ padding: 0.7em;
+ }
+
+ button.collapse-toggle {
+ margin-top: 0.3em;
+ }
+ }
+
+ .bslib-sidebar-layout .collapse-toggle {
+ top: 0;
+ }
+
+ .bslib-sidebar-layout.sidebar-collapsed:not(.transitioning):not(
+ .sidebar-right
+ )
+ .collapse-toggle {
+ left: 2px;
+ }
+
+ .sidebar > section > .h3:first-of-type {
+ margin-top: 0em;
+ }
+
+ .sidebar .h3,
+ .sidebar .h4,
+ .sidebar .h5,
+ .sidebar .h6 {
+ margin-top: 0.5em;
+ }
+
+ .sidebar {
+ @include observable-sidebar-inputs();
+
+ .card-body {
+ margin-bottom: 2em;
+ }
+
+ .shiny-input-container {
+ margin-bottom: 1em;
+ }
+
+ .shiny-options-group {
+ margin-top: 0;
+ }
+ .control-label {
+ margin-bottom: 0.3em;
+ }
+ }
+ .card .card-body .quarto-layout-row {
+ align-items: stretch;
+ }
+
+ /* Toolbar */
+ .toolbar {
+ font-size: 0.9em;
+ display: flex;
+ flex-direction: row;
+ border-top: solid 1px theme-dim($secondary-bg-subtle, 10%);
+ padding: 1em;
+ flex-wrap: wrap;
+ background-color: $card-cap-bg;
+
+ @include shiny-toolbar-customizations();
+ @include observable-toolbar-inputs();
+
+ > * {
+ font-size: 0.9em;
+ flex-grow: 0;
+ }
+
+ .shiny-input-container {
+ label {
+ margin-bottom: 1px;
+ }
+ }
+ }
+
+ // Positions the toolbar at the bottom of the flexbox
+ .toolbar-bottom {
+ margin-top: 1em;
+ margin-bottom: 0 !important;
+ order: 2;
+ }
+
+ // If there is are pages, move the padding down inside the
+ // the nested tab contents (Global)
+ .quarto-dashboard-content
+ > .dashboard-toolbar-container
+ > .toolbar-content
+ > .tab-content
+ > .tab-pane
+ > *:not(.bslib-sidebar-layout) {
+ padding: 1em;
+ }
+
+ // If this is simple dashboard with a top level tool bar
+ .quarto-dashboard-content
+ > .dashboard-toolbar-container
+ > .toolbar-content
+ > *:not(.tab-content) {
+ padding: 1em;
+ }
+
+ // If there are pages, but no global toolbar
+ .quarto-dashboard-content
+ > .tab-content
+ > .dashboard-page
+ > .dashboard-toolbar-container
+ > .toolbar-content,
+ .quarto-dashboard-content
+ > .tab-content
+ > .dashboard-page:not(.dashboard-sidebar-container)
+ > *:not(.dashboard-toolbar-container) {
+ padding: 1em;
+ }
+
+ .toolbar-content {
+ padding: 0;
+ }
+
+ .quarto-dashboard-content.quarto-dashboard-pages
+ .tab-pane
+ > .dashboard-toolbar-container {
+ .toolbar {
+ border-radius: 0;
+ margin-bottom: 0;
+ }
+ }
+
+ .dashboard-toolbar-container.toolbar-toplevel {
+ .toolbar {
+ border-bottom: $card-border-width solid $card-border-color;
+ }
+ .toolbar-bottom {
+ margin-top: 0;
+ }
+ }
+
+ .dashboard-toolbar-container:not(.toolbar-toplevel) {
+ .toolbar {
+ margin-bottom: 1em;
+ border-top: none;
+ border-radius: $border-radius;
+ border: $card-border-width solid $card-border-color;
+ }
+ }
+
+ .vega-embed.has-actions {
+ details {
+ width: 1.7em;
+ height: 2em;
+ position: absolute !important;
+ top: 0;
+ right: 0;
+ }
+ }
+
+ .dashboard-toolbar-container {
+ padding: 0;
+ }
+
+ /* Card Toolbar */
+ /* Card */
+ .card {
+ .card-header,
+ .card-footer {
+ p:last-child {
+ margin-bottom: 0;
+ }
+ }
+
+ .card-body > .h4:first-child {
+ margin-top: 0;
+ }
+
+ // This ensures that elements in the card body (notably the expansion toggle)
+ // appear above the elements inside of it (notably itables, which cause issues)
+ .card-body {
+ z-index: 4;
+
+ // Customize appearance of elements within cards
+ @include itables();
+ }
+
+ .card-footer {
+ font-size: 0.9em;
+ }
+
+ .card-toolbar {
+ display: flex;
+ flex-grow: 1;
+ flex-direction: row;
+ width: 100%;
+ > * {
+ font-size: 0.8em;
+ flex-grow: 0;
+ }
+
+ > .card-title {
+ font-size: 1em;
+ flex-grow: 1;
+ align-self: flex-start;
+ margin-top: 0.1em;
+ }
+
+ flex-wrap: wrap;
+
+ @include toolbar-layout();
+
+ @include observable-toolbar-inputs();
+ @include shiny-toolbar-customizations();
+ }
+ }
+
+ /*-- Misc HTML elements --*/
+ .card-body > table > thead {
+ border-top: none;
+ }
+
+ .card-body > .table > :not(caption) > * > * {
+ background-color: $card-bg;
+ color: $card-color;
+ }
+}
+
+/*-- itables --*/
+.tableFloatingHeaderOriginal {
+ background-color: $card-bg;
+ position: sticky !important;
+ top: 0 !important;
+}
+
+.dashboard-data-table {
+ margin-top: -1px;
+}
+
+/*-- ojs --*/
+
+div.value-box-area span.observablehq--number {
+ /* the calculation below is pretty horrible, but it's our best effort to match
+ the font sizes of these two different ways of rendering a number in a value-box:
+
+```{ojs}
+//| content: valuebox
+//| title: "Articles per day"
+//| icon: pencil
+//| color: primary
+12
+```
+
+```{python}
+#| content: valuebox
+#| title: "Articles per day"
+#| icon: pencil
+#| color: primary
+dict(
+ value = 12
+)
+```
+
+ See https://github.com/quarto-dev/quarto-cli/issues/8823
+
+ */
+ font-size: calc(clamp(0.1em, 15cqw, 5em) * 1.25);
+ line-height: 1.2;
+ color: inherit;
+ font-family: var(--bs-body-font-family);
+}
+
+
+
+.quarto-listing {
+ padding-bottom: 1em;
+}
+
+// General Pagination / Filter Control Styling
+.listing-pagination {
+ padding-top: 0.5em;
+}
+
+ul.pagination {
+ float: right;
+ padding-left: 8px;
+ padding-top: 0.5em;
+ li {
+ padding-right: 0.75em;
+ }
+ li.disabled,
+ li.active {
+ a {
+ color: $pagination-active-color;
+ text-decoration: none;
+ }
+ }
+ li:last-of-type {
+ padding-right: 0;
+ }
+}
+
+.listing-actions-group {
+ display: flex;
+ .form-select,
+ .form-control {
+ @include input-form-control();
+ }
+ .input-group {
+ @include input-group();
+ @include input-placeholder();
+ }
+}
+
+// Filtering and Sorting
+.quarto-listing-filter {
+ margin-bottom: 1em;
+ width: 200px;
+ margin-left: auto;
+}
+
+.quarto-listing-sort {
+ margin-bottom: 1em;
+ margin-right: auto;
+ .input-group-text {
+ font-size: 0.8em;
+ }
+ width: auto;
+}
+
+.input-group input,
+.input-group select {
+ @include input-group-text();
+}
+.input-group-text {
+ @include input-group-text();
+ border-right: none;
+}
+
+.quarto-listing-sort select.form-select {
+ font-size: 0.8em;
+}
+
+.listing-no-matching {
+ text-align: center;
+ padding-top: 2em;
+ padding-bottom: 3em;
+ font-size: 1em;
+}
+
+// Category styling
+#quarto-margin-sidebar {
+ .quarto-listing-category {
+ padding-top: 0;
+ font-size: 1rem;
+ }
+ .quarto-listing-category-title {
+ cursor: pointer;
+ font-weight: 600;
+ font-size: 1rem;
+ }
+}
+
+.quarto-listing-category {
+ .category {
+ cursor: pointer;
+ }
+ .category.active {
+ font-weight: 600;
+ }
+}
+
+.quarto-listing-category.category-cloud {
+ display: flex;
+ flex-wrap: wrap;
+ align-items: baseline;
+ .category {
+ padding-right: 5px;
+ }
+
+ @for $count from 1 through 10 {
+ .category-cloud-#{$count} {
+ font-size: 0.55em + ($count * 0.2em);
+ }
+ }
+}
+
+// Grid Listing Styling
+@for $colcount from 1 through 12 {
+ .quarto-listing-cols-#{$colcount} {
+ grid-template-columns: repeat($colcount, minmax(0, 1fr));
+ gap: 1.5em;
+ }
+
+ @include media-breakpoint-down(md) {
+ .quarto-listing-cols-#{$colcount} {
+ grid-template-columns: repeat(min(2, $colcount), minmax(0, 1fr));
+ gap: 1.5em;
+ }
+ }
+
+ @include media-breakpoint-down(sm) {
+ .quarto-listing-cols-#{$colcount} {
+ grid-template-columns: minmax(0, 1fr);
+ gap: 1.5em;
+ }
+ }
+}
+
+.quarto-listing-grid {
+ gap: 1.5em;
+}
+
+.quarto-grid-item.borderless {
+ border: none;
+ .listing-categories {
+ .listing-category:last-of-type,
+ .listing-category:first-of-type {
+ padding-left: 0;
+ }
+ .listing-category {
+ border: 0;
+ }
+ }
+}
+
+.quarto-grid-link {
+ text-decoration: none;
+ color: inherit;
+}
+
+.quarto-grid-link:hover {
+ text-decoration: none;
+ color: inherit;
+}
+
+.quarto-grid-item {
+ h5.title {
+ margin-top: 0;
+ margin-bottom: 0;
+ }
+
+ .card-footer {
+ display: flex;
+ justify-content: space-between;
+ font-size: 0.8em;
+ p {
+ margin-bottom: 0;
+ }
+ }
+
+ p.card-img-top {
+ margin-bottom: 0;
+ > img {
+ object-fit: cover;
+ }
+ }
+
+ .card-other-values {
+ margin-top: 0.5em;
+ font-size: 0.8em;
+ tr {
+ margin-bottom: 0.5em;
+ }
+ tr > td:first-of-type {
+ font-weight: 600;
+ padding-right: 1em;
+ padding-left: 1em;
+ vertical-align: top;
+ }
+ }
+
+ div.post-contents {
+ display: flex;
+ flex-direction: column;
+ text-decoration: none;
+ height: 100%;
+ }
+
+ .listing-item-img-placeholder {
+ background-color: $card-cap-bg;
+ flex-shrink: 0;
+ }
+
+ .card-attribution {
+ padding-top: 1em;
+ display: flex;
+ gap: 1em;
+ text-transform: uppercase;
+ color: $text-muted;
+ font-weight: 500;
+ flex-grow: 10;
+ align-items: flex-end;
+ }
+
+ .description {
+ padding-bottom: 1em;
+ }
+
+ .card-attribution .date {
+ align-self: flex-end;
+ }
+
+ .card-attribution.justify {
+ justify-content: space-between;
+ }
+
+ .card-attribution.start {
+ justify-content: flex-start;
+ }
+
+ .card-attribution.end {
+ justify-content: flex-end;
+ }
+
+ .card-title {
+ margin-bottom: 0.1em;
+ }
+ .card-subtitle {
+ padding-top: 0.25em;
+ }
+
+ .card-text {
+ font-size: 0.9em;
+ }
+
+ .listing-reading-time {
+ padding-bottom: 0.25em;
+ }
+
+ .card-text-small {
+ font-size: 0.8em;
+ }
+
+ .card-subtitle.subtitle {
+ font-size: 0.9em;
+ font-weight: 600;
+ padding-bottom: 0.5em;
+ }
+
+ .listing-categories {
+ @include listing-category();
+ }
+}
+
+.quarto-grid-item.card-right {
+ text-align: right;
+ .listing-categories {
+ justify-content: flex-end;
+ }
+}
+
+.quarto-grid-item.card-left {
+ text-align: left;
+}
+
+.quarto-grid-item.card-center {
+ text-align: center;
+ .listing-description {
+ text-align: justify;
+ }
+ .listing-categories {
+ justify-content: center;
+ }
+}
+
+// Table Listing Styling
+table.quarto-listing-table {
+ td.image {
+ padding: 0px;
+ img {
+ width: 100%;
+ max-width: 50px;
+ object-fit: contain;
+ }
+ }
+
+ a {
+ text-decoration: none;
+ word-break: keep-all;
+ }
+
+ th a {
+ color: inherit;
+ }
+
+ th a.asc:after {
+ margin-bottom: -2px;
+ margin-left: 5px;
+ display: inline-block;
+ height: 1rem;
+ width: 1rem;
+ background-repeat: no-repeat;
+ background-size: 1rem 1rem;
+ background-image: url('data:image/svg+xml,');
+ content: "";
+ }
+
+ th a.desc:after {
+ margin-bottom: -2px;
+ margin-left: 5px;
+ display: inline-block;
+ height: 1rem;
+ width: 1rem;
+ background-repeat: no-repeat;
+ background-size: 1rem 1rem;
+ background-image: url('data:image/svg+xml,');
+ content: "";
+ }
+}
+
+table.quarto-listing-table.table-hover td {
+ cursor: pointer;
+}
+
+.quarto-post.image-left {
+ flex-direction: row;
+}
+
+.quarto-post.image-right {
+ flex-direction: row-reverse;
+}
+
+@include media-breakpoint-down(md) {
+ .quarto-post.image-right,
+ .quarto-post.image-left {
+ gap: 0em;
+ flex-direction: column;
+ }
+
+ .quarto-post .metadata {
+ padding-bottom: 1em;
+ order: 2;
+ }
+
+ .quarto-post .body {
+ order: 1;
+ }
+
+ .quarto-post .thumbnail {
+ order: 3;
+ }
+}
+
+// Post (default) Styling
+.list.quarto-listing-default div:last-of-type {
+ border-bottom: none;
+}
+
+.quarto-listing-container-default {
+ @include media-breakpoint-up(lg) {
+ margin-right: 2em;
+ }
+}
+
+div.quarto-post {
+ display: flex;
+ gap: 2em;
+ margin-bottom: 1.5em;
+ @include media-breakpoint-down(md) {
+ padding-bottom: 1em;
+ }
+ border-bottom: 1px solid $border-color;
+
+ .metadata {
+ flex-basis: 20%;
+ flex-grow: 0;
+ margin-top: 0.2em;
+ flex-shrink: 10;
+ }
+
+ .thumbnail {
+ flex-basis: 30%;
+ flex-grow: 0;
+ flex-shrink: 0;
+ img {
+ margin-top: 0.4em;
+ width: 100%;
+ object-fit: cover;
+ }
+ }
+
+ .body {
+ flex-basis: 45%;
+ flex-grow: 1;
+ flex-shrink: 0;
+
+ h3.listing-title {
+ margin-top: 0px;
+ margin-bottom: 0px;
+ border-bottom: none;
+ }
+
+ .listing-subtitle {
+ font-size: 0.875em;
+ margin-bottom: 0.5em;
+ margin-top: 0.2em;
+ }
+
+ .description {
+ font-size: 0.9em;
+ }
+
+ pre code {
+ white-space: pre-wrap;
+ }
+ }
+
+ a {
+ color: $body-color;
+ text-decoration: none;
+ }
+
+ .metadata {
+ display: flex;
+ flex-direction: column;
+ font-size: 0.8em;
+ font-family: $font-family-base;
+ flex-basis: 33%;
+ }
+
+ .listing-categories {
+ @include listing-category();
+ }
+
+ .listing-description {
+ margin-bottom: 0.5em;
+ }
+}
+
+
+
+// Jolla
+
+div.quarto-about-jolla {
+ display: flex !important;
+ flex-direction: column;
+ align-items: center;
+ margin-top: 10%;
+ padding-bottom: 1em;
+
+ .about-image {
+ object-fit: cover;
+ margin-left: auto;
+ margin-right: auto;
+ margin-bottom: 1.5em;
+ }
+ @include image-shapes();
+
+ .quarto-title h1.title {
+ text-align: center;
+ }
+
+ .quarto-title .description {
+ text-align: center;
+ }
+
+ h2 {
+ border-bottom: none;
+ }
+
+ .about-sep {
+ width: 60%;
+ }
+
+ main {
+ text-align: center;
+ }
+
+ .about-links {
+ @include responsive-buttons();
+ }
+
+ .about-link {
+ @include responsive-button();
+ }
+}
+
+// Solana
+div.quarto-about-solana {
+ display: flex !important;
+ flex-direction: column;
+ padding-top: 3em !important;
+ padding-bottom: 1em;
+
+ .about-entity {
+ display: flex !important;
+
+ @include media-breakpoint-up(lg) {
+ flex-direction: row;
+ }
+ @include media-breakpoint-down(lg) {
+ flex-direction: column-reverse;
+ align-items: center;
+ text-align: center;
+ }
+
+ align-items: start;
+ justify-content: space-between;
+
+ .entity-contents {
+ display: flex;
+ flex-direction: column;
+ @include media-breakpoint-down(md) {
+ width: 100%;
+ }
+ }
+
+ .about-image {
+ object-fit: cover;
+ @include media-breakpoint-down(lg) {
+ margin-bottom: 1.5em;
+ }
+ }
+ @include image-shapes();
+
+ .about-links {
+ @include responsive-buttons();
+ justify-content: left;
+ padding-bottom: 1.2em;
+ }
+
+ .about-link {
+ @include responsive-button();
+ }
+ }
+
+ .about-contents {
+ padding-right: 1.5em;
+
+ flex-basis: 0;
+ flex-grow: 1;
+ main.content {
+ margin-top: 0;
+ }
+ h2 {
+ border-bottom: none;
+ }
+ }
+}
+
+// Trestles
+div.quarto-about-trestles {
+ display: flex !important;
+ flex-direction: row;
+ padding-top: 3em !important;
+ padding-bottom: 1em;
+
+ @include media-breakpoint-down(lg) {
+ flex-direction: column;
+ padding-top: 0em !important;
+ }
+
+ .about-entity {
+ @include media-breakpoint-up(lg) {
+ //max-width: 42%;
+ flex: 0 0 42%;
+ }
+ display: flex !important;
+ flex-direction: column;
+ align-items: center;
+ text-align: center;
+ padding-right: 1em;
+
+ .about-image {
+ object-fit: cover;
+ margin-bottom: 1.5em;
+ }
+ @include image-shapes();
+
+ .about-links {
+ @include responsive-buttons();
+ justify-content: center;
+ }
+
+ .about-link {
+ @include responsive-button();
+ }
+ }
+
+ .about-contents {
+ flex-basis: 0;
+ flex-grow: 1;
+
+ h2 {
+ border-bottom: none;
+ }
+
+ @include media-breakpoint-up(lg) {
+ border-left: solid 1px $border-color;
+ padding-left: 1.5em;
+ }
+
+ main.content {
+ margin-top: 0;
+ }
+ }
+}
+
+// Marquee
+div.quarto-about-marquee {
+ padding-bottom: 1em;
+
+ .about-contents {
+ display: flex;
+ flex-direction: column;
+ }
+
+ .about-image {
+ max-height: 550px;
+ margin-bottom: 1.5em;
+ object-fit: cover;
+ }
+ @include image-shapes();
+
+ h2 {
+ border-bottom: none;
+ }
+
+ .about-links {
+ @include responsive-buttons();
+ justify-content: center;
+ padding-top: 1.5em;
+ }
+
+ .about-link {
+ @include responsive-button();
+ @include media-breakpoint-up(lg) {
+ border: none;
+ }
+ }
+}
+
+// Broadside
+div.quarto-about-broadside {
+ display: flex;
+ flex-direction: column;
+ padding-bottom: 1em;
+
+ .about-main {
+ display: flex !important;
+ padding-top: 0 !important;
+ @include media-breakpoint-up(lg) {
+ flex-direction: row;
+ align-items: flex-start;
+ }
+
+ @include media-breakpoint-down(lg) {
+ flex-direction: column;
+ }
+
+ .about-entity {
+ @include media-breakpoint-down(lg) {
+ flex-shrink: 0;
+ width: 100%;
+ height: 450px;
+ margin-bottom: 1.5em;
+ background-size: cover;
+ background-repeat: no-repeat;
+ }
+ @include media-breakpoint-up(lg) {
+ flex: 0 10 50%;
+ margin-right: 1.5em;
+ width: 100%;
+ height: 100%;
+ background-size: 100%;
+ background-repeat: no-repeat;
+ }
+ }
+
+ .about-contents {
+ padding-top: 14px;
+ flex: 0 0 50%;
+ }
+ }
+
+ h2 {
+ border-bottom: none;
+ }
+
+ .about-sep {
+ margin-top: 1.5em;
+ width: 60%;
+ align-self: center;
+ }
+
+ .about-links {
+ @include responsive-buttons();
+ justify-content: center;
+ column-gap: 20px;
+ padding-top: 1.5em;
+ }
+
+ .about-link {
+ @include responsive-button();
+ @include media-breakpoint-up(lg) {
+ border: none;
+ }
+ }
+}
+
+
+// Tippy customizations
+
+.tippy-box[data-theme~="quarto"] {
+ background-color: $body-bg;
+ border: solid $border-width $border-color;
+ border-radius: $border-radius;
+ color: $body-color;
+ font-size: $font-size-sm;
+}
+.tippy-box[data-theme~="quarto"] > .tippy-backdrop {
+ background-color: $body-bg;
+}
+.tippy-box[data-theme~="quarto"] > .tippy-arrow:after,
+.tippy-box[data-theme~="quarto"] > .tippy-svg-arrow:after {
+ content: "";
+ position: absolute;
+ z-index: -1;
+}
+.tippy-box[data-theme~="quarto"] > .tippy-arrow:after {
+ border-color: transparent;
+ border-style: solid;
+}
+
+.tippy-box[data-placement^="top"] > .tippy-arrow:before {
+ bottom: -6px;
+}
+.tippy-box[data-placement^="bottom"] > .tippy-arrow:before {
+ top: -6px;
+}
+.tippy-box[data-placement^="right"] > .tippy-arrow:before {
+ left: -6px;
+}
+.tippy-box[data-placement^="left"] > .tippy-arrow:before {
+ right: -6px;
+}
+
+.tippy-box[data-theme~="quarto"][data-placement^="top"] > .tippy-arrow:before {
+ border-top-color: $body-bg;
+}
+.tippy-box[data-theme~="quarto"][data-placement^="top"] > .tippy-arrow:after {
+ border-top-color: $border-color;
+ border-width: 7px 7px 0;
+ top: 17px;
+ left: 1px;
+}
+.tippy-box[data-theme~="quarto"][data-placement^="top"]
+ > .tippy-svg-arrow
+ > svg {
+ top: 16px;
+}
+.tippy-box[data-theme~="quarto"][data-placement^="top"]
+ > .tippy-svg-arrow:after {
+ top: 17px;
+}
+.tippy-box[data-theme~="quarto"][data-placement^="bottom"]
+ > .tippy-arrow:before {
+ border-bottom-color: $body-bg;
+ bottom: 16px;
+}
+.tippy-box[data-theme~="quarto"][data-placement^="bottom"]
+ > .tippy-arrow:after {
+ border-bottom-color: $border-color;
+ border-width: 0 7px 7px;
+ bottom: 17px;
+ left: 1px;
+}
+.tippy-box[data-theme~="quarto"][data-placement^="bottom"]
+ > .tippy-svg-arrow
+ > svg {
+ bottom: 15px;
+}
+.tippy-box[data-theme~="quarto"][data-placement^="bottom"]
+ > .tippy-svg-arrow:after {
+ bottom: 17px;
+}
+.tippy-box[data-theme~="quarto"][data-placement^="left"] > .tippy-arrow:before {
+ border-left-color: $body-bg;
+}
+.tippy-box[data-theme~="quarto"][data-placement^="left"] > .tippy-arrow:after {
+ border-left-color: $border-color;
+ border-width: 7px 0 7px 7px;
+ left: 17px;
+ top: 1px;
+}
+.tippy-box[data-theme~="quarto"][data-placement^="left"]
+ > .tippy-svg-arrow
+ > svg {
+ left: 11px;
+}
+.tippy-box[data-theme~="quarto"][data-placement^="left"]
+ > .tippy-svg-arrow:after {
+ left: 12px;
+}
+.tippy-box[data-theme~="quarto"][data-placement^="right"]
+ > .tippy-arrow:before {
+ border-right-color: $body-bg;
+ right: 16px;
+}
+.tippy-box[data-theme~="quarto"][data-placement^="right"] > .tippy-arrow:after {
+ border-width: 7px 7px 7px 0;
+ right: 17px;
+ top: 1px;
+ border-right-color: $border-color;
+}
+.tippy-box[data-theme~="quarto"][data-placement^="right"]
+ > .tippy-svg-arrow
+ > svg {
+ right: 11px;
+}
+.tippy-box[data-theme~="quarto"][data-placement^="right"]
+ > .tippy-svg-arrow:after {
+ right: 12px;
+}
+.tippy-box[data-theme~="quarto"] > .tippy-svg-arrow {
+ fill: $body-color;
+}
+.tippy-box[data-theme~="quarto"] > .tippy-svg-arrow:after {
+ background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iNiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMCA2czEuNzk2LS4wMTMgNC42Ny0zLjYxNUM1Ljg1MS45IDYuOTMuMDA2IDggMGMxLjA3LS4wMDYgMi4xNDguODg3IDMuMzQzIDIuMzg1QzE0LjIzMyA2LjAwNSAxNiA2IDE2IDZIMHoiIGZpbGw9InJnYmEoMCwgOCwgMTYsIDAuMikiLz48L3N2Zz4=);
+ background-size: 16px 6px;
+ width: 16px;
+ height: 6px;
+}
+
+
+// floating
+
+.top-right {
+ position: absolute;
+ top: 1em;
+ right: 1em;
+}
+
+// hidden
+
+// https://github.com/quarto-dev/quarto-cli/issues/5403#issuecomment-1533791947
+.visually-hidden {
+ border: 0;
+ clip: rect(0 0 0 0);
+ height: auto;
+ margin: 0;
+ overflow: hidden;
+ padding: 0;
+ position: absolute;
+ width: 1px;
+ white-space: nowrap;
+}
+
+.hidden {
+ display: none !important;
+}
+
+.zindex-bottom {
+ z-index: -1 !important;
+}
+
+// layout and figures
+
+figure.figure {
+ display: block;
+}
+
+.quarto-layout-panel {
+ margin-bottom: 1em;
+}
+
+.quarto-layout-panel > figure {
+ width: 100%;
+}
+.quarto-layout-panel > figure > figcaption,
+.quarto-layout-panel > .panel-caption {
+ margin-top: 10pt;
+}
+
+.quarto-layout-panel > .table-caption {
+ margin-top: 0px;
+}
+
+.table-caption p {
+ margin-bottom: 0.5em;
+}
+
+.quarto-layout-row {
+ display: flex;
+ flex-direction: row;
+ align-items: flex-start;
+}
+.quarto-layout-valign-top {
+ align-items: flex-start;
+}
+.quarto-layout-valign-bottom {
+ align-items: flex-end;
+}
+.quarto-layout-valign-center {
+ align-items: center;
+}
+.quarto-layout-cell {
+ position: relative;
+ margin-right: 20px;
+}
+.quarto-layout-cell:last-child {
+ margin-right: 0;
+}
+.quarto-layout-cell figure,
+.quarto-layout-cell > p {
+ margin: 0.2em;
+}
+.quarto-layout-cell img {
+ max-width: 100%;
+}
+.quarto-layout-cell .html-widget {
+ width: 100% !important;
+}
+.quarto-layout-cell div figure p {
+ margin: 0;
+}
+.quarto-layout-cell figure {
+ display: block;
+ margin-inline-start: 0;
+ margin-inline-end: 0;
+}
+.quarto-layout-cell table {
+ display: inline-table;
+}
+.quarto-layout-cell-subref figcaption,
+figure .quarto-layout-row figure figcaption {
+ text-align: center;
+ font-style: italic;
+}
+.quarto-figure {
+ position: relative;
+ margin-bottom: 1em;
+}
+
+.quarto-figure > figure {
+ width: 100%;
+ margin-bottom: 0;
+}
+.quarto-figure-left > figure > p,
+.quarto-figure-left > figure > div /* for mermaid and dot diagrams */ {
+ text-align: left;
+}
+.quarto-figure-center > figure > p,
+.quarto-figure-center > figure > div /* for mermaid and dot diagrams */ {
+ text-align: center;
+}
+.quarto-figure-right > figure > p,
+.quarto-figure-right > figure > div /* for mermaid and dot diagrams */ {
+ text-align: right;
+}
+
+.quarto-figure > figure > div.cell-annotation,
+.quarto-figure > figure > div code {
+ text-align: left; /* override align center for code blocks */
+}
+
+figure > p:empty {
+ display: none;
+}
+figure > p:first-child {
+ margin-top: 0;
+ margin-bottom: 0;
+}
+
+figure > figcaption.quarto-float-caption-bottom {
+ margin-bottom: 0.5em;
+}
+figure > figcaption.quarto-float-caption-top {
+ margin-top: 0.5em;
+}
+
+// anchor
+
+// anchor js
+
+div[id^="tbl-"] {
+ position: relative;
+}
+
+.quarto-figure > .anchorjs-link {
+ position: absolute;
+ top: 0.6em;
+ right: 0.5em;
+}
+
+div[id^="tbl-"] > .anchorjs-link {
+ position: absolute;
+ top: 0.7em;
+ right: 0.3em;
+}
+
+/* workaround for anchorjs not hitting on generic :hover selector */
+.quarto-figure:hover > .anchorjs-link,
+div[id^="tbl-"]:hover > .anchorjs-link,
+h2:hover > .anchorjs-link,
+h3:hover > .anchorjs-link,
+h4:hover > .anchorjs-link,
+h5:hover > .anchorjs-link,
+h6:hover > .anchorjs-link,
+.reveal-anchorjs-link > .anchorjs-link {
+ opacity: 1;
+}
+
+#title-block-header {
+ margin-block-end: 1rem;
+ position: relative;
+ margin-top: -1px; // Chrome draws 1px white line between navbar and title block
+}
+
+#title-block-header .abstract {
+ margin-block-start: 1rem;
+}
+
+#title-block-header .abstract .abstract-title {
+ font-weight: 600;
+}
+
+#title-block-header a {
+ text-decoration: none;
+}
+
+#title-block-header .author,
+#title-block-header .date,
+#title-block-header .doi {
+ margin-block-end: 0.2rem;
+}
+
+#title-block-header .quarto-title-block > div {
+ display: flex;
+}
+
+#title-block-header .quarto-title-block > div > h1 {
+ flex-grow: 1;
+}
+
+#title-block-header .quarto-title-block > div > button {
+ flex-shrink: 0;
+ height: 2.25rem;
+ margin-top: 0;
+}
+
+#title-block-header .quarto-title-block > div > button {
+ @if mixin-exists(media-breakpoint-up) {
+ @include media-breakpoint-up(lg) {
+ margin-top: 5px;
+ }
+ }
+}
+
+// (Remove bottom margin from paragraphs in table headers)
+tr.header > th > p:last-of-type {
+ margin-bottom: 0px;
+}
+
+table,
+table.table {
+ margin-top: 0.5rem;
+ margin-bottom: 0.5rem;
+}
+
+caption,
+.table-caption {
+ padding-top: 0.5rem;
+ padding-bottom: 0.5rem;
+ text-align: center;
+}
+
+figure.quarto-float-tbl figcaption.quarto-float-caption-top {
+ margin-top: 0.5rem;
+ margin-bottom: 0.25rem;
+ text-align: center;
+}
+
+figure.quarto-float-tbl figcaption.quarto-float-caption-bottom {
+ padding-top: 0.25rem;
+ margin-bottom: 0.5rem;
+ text-align: center;
+}
+
+// utterances
+.utterances {
+ max-width: none;
+ margin-left: -8px;
+}
+
+// iframe
+iframe {
+ margin-bottom: 1em;
+}
+
+// details
+details {
+ margin-bottom: 1em;
+}
+details[show] {
+ margin-bottom: 0;
+}
+
+details > summary {
+ @if variable-exists(text-muted) {
+ color: $text-muted;
+ }
+}
+
+details > summary > p:only-child {
+ display: inline;
+}
+
+// codeCopy
+pre.sourceCode,
+code.sourceCode {
+ position: relative;
+}
+
+// Inline code should wrap
+// See https://github.com/quarto-dev/quarto-cli/issues/2649
+dd code:not(.sourceCode),
+p code:not(.sourceCode) {
+ white-space: pre-wrap;
+}
+
+// default to scrolling
+ span_tag = h1_tag.find('span', class_='chapter-number')
+
+ # Verifique se o com a classe 'chapter-number' foi encontrado dentro do
+ if span_tag:
+
+ cap = span_tag.text
+
+ é_um_capitulo_numerado = True
+
+ ref_cap[cap] = capitulos_arquivo_html[index]
+
+
+
+
+ # Verifique se há pelo menos uma tag com a classe "um_capitulo", ou seja nae é capitulo de verbete caso seja um dicionario
+ encontrou_um_capitulo = bool(main_tag.find('div', class_='um_capitulo'))
+
+
+
+ # Se é um capítulo normal em um dicionário e nao é um capítulo numerado, seleciona a letra para marcar o capítulo
+ # Nao esquecer que deve haver uma div com as classes hidden e um_capitulo em todos os capítulos que nao forem de verbetes em um de um dicionario
+ if not encontrou_um_capitulo and é_dicionário:
+
+ é_um_capitulo_verbete = True
+
+ # Coloca os marcadores nos verbetes como o nome do próprio verbete
+ dt_tags = main_tag.find_all('dt')
+
+ for dt_tag in dt_tags:
+
+ # Para contar o numero de definicoes dd
+ Num_dd = 0
+
+ texto_titulo_dt = dt_tag.text
+
+ texto_a_ser_sanitizado = dt_tag.text
+
+ dt_tag['class'] = dt_tag.get("class", []) + ["unidade", "verbete"]
+
+ dt_tag['title'] = texto_titulo_dt
+
+ id_dt_tag = (texto_a_ser_sanitizado
+
+ .replace(' ', '_')
+ .replace('&', '_e_')
+ .replace('$', '_s_')
+ .replace('+', '_mais_')
+ .replace(',', '_vir_')
+ .replace('/', '_barra_')
+ .replace(':', '_dois_pontos_')
+ .replace(';', '_ponto_vir_')
+ .replace('?', '_interrog_')
+ .replace('=', '_igual_')
+ .replace('@', '_at_')
+ .replace('#', '_jv_')
+ .replace('>', '_maiq_')
+ .replace('<', '_menq_')
+ .replace('[', '_abre_colch_')
+ .replace(']', '_fecha_col_')
+ .replace('{', '_abre_ch_')
+ .replace('}', '_fecha_ch_')
+ .replace('.', '_ponto_')
+ .replace('|', '_barra_ver_')
+ .replace('\\', '_barra_inv_')
+ .replace('%', '_p_100_')
+ .replace('^', '_acen_chapeu_')
+
+ )
+
+ dt_tag['id'] = id_dt_tag
+
+
+
+
+ # Encontre o primeiro elemento irmão da tag
+ dd_tag = dt_tag.find_next_sibling('dd')
+
+ # Itere sobre todas as tags irmãs até encontrar uma tag não
+ while dd_tag and dd_tag.name == 'dd':
+
+ Num_dd += 1
+
+ dd_tag['title'] = texto_titulo_dt + " def. " + str(Num_dd)
+
+ dd_tag['id'] = id_dt_tag + "_def_" + str(Num_dd)
+
+ # Encontre o próximo elemento irmão da tag
+ dd_tag = dd_tag.find_next_sibling('dd')
+
+
+
+ #verifica de há outras tags além de dt, dd, e títulos (usado para o caso de um capítulo de verbete contiver mais conteúdos)
+ tags_procuradas = ['p', 'li', 'tr', 'blockquote', 'code', 'pre']
+
+ mais_conteudo_alem_verbetes = False
+
+ if é_um_capitulo_verbete and é_dicionário:
+
+ for tag in tags_procuradas:
+
+ # Verifique se a tag está presente em 'main_tag'
+ if main_tag.find(tag):
+
+ # Verifique se a tag não tem 'nav' como pai
+ if not main_tag.find(tag).find_parent("nav"):
+
+ mais_conteudo_alem_verbetes = True
+
+ break # Se ambas as condições forem atendidas, definimos como True e saímos do loop
+
+
+
+ # Verifica se nao é um capítulo sem numero e se nao for um capítulo de verbete ou se é um capitulo de verbete e se existe outro conteudo alem das definicoes dos verbetes
+ if (not é_um_capitulo_numerado and not é_um_capitulo_verbete) or (é_dicionário and not é_um_capitulo_numerado and é_um_capitulo_verbete and mais_conteudo_alem_verbetes):
+
+ letras_index_digito_1 += 1
+
+ cap = escolher_letra_para_capitulo(letras_index_digito_1)
+
+ ref_cap[cap] = capitulos_arquivo_html[index]
+
+
+
+
+
+
+
+ # Iterar sobre todas as tags dentro da tag 'main'
+ for tag in main_tag.find_all(True):
+
+ # Verifique se a classe 'unidade' está presente nos atributos da tag
+ if "unidade" in tag.get("class", []):
+
+ # Incrementa o número da referência
+ ref_num += 1
+
+ # Coloca a referência na tag
+ colocar_referencia(cap, tag, ref_num)
+
+ # Pula para a próxima tag
+ continue
+
+ parent_tag = tag.parent
+
+ # Não é filho direto de 'td' ou 'li'
+ if parent_tag.name not in ["td", "li", "p"]:
+
+ # Verifique se a tag é filha de uma tag chamada 'header' usando find_parents(). Em caso positivo, pula
+ is_descendant_of_header = tag.find_parents("header")
+
+ if is_descendant_of_header:
+ continue
+
+
+
+ # Se é um parágrafo
+ if tag.name == "p" or tag.name == "tr" or tag.name == "li" or tag.name == "code" or tag.name == "blockquote" or (tag.name == "dt" and not é_um_capitulo_verbete) or (tag.name == "dd" and not é_um_capitulo_verbete) or ("quarto-video" in tag.get("class", []) and tag.name == "div") or ("callout" in tag.get("class", []) and tag.name == "div") or ("csl-entry" in tag.get("class", []) and tag.name == "div"):
+
+ # Incrementa o número da referência
+ ref_num += 1
+
+ # Coloca a referência na tag
+ colocar_referencia(cap, tag, ref_num)
+
+ # Pula para a próxima tag
+ continue
+
+
+
+
+
+
+
+ # Se for criado pelo usuário um id para euqacoes, aqui coloco a classe unidade_silenciosa para poder ser referenciado quando o usuário solicitar pegar referencia, mas esse tipo de referencia nao deve aparecer na paginacao do capítulo, lá no rodapé
+ if "math" in tag.get("class", []) and tag.name == "span":
+
+ if tag.parent and tag.parent.name == "span":
+
+ if tag.parent.get("id"):
+
+ tag.parent["class"] = tag.parent.get("class", []) + ["unidade_silenciosa"]
+
+ tag.parent["title"] = tag.parent["id"]
+
+ continue
+
+
+
+
+
+ # Se tiver as classes de teoremas de matemática, colocar unidade_silenciosa
+ if any(classe in tag.get("class", []) for classe in {"theorema", "lemma", "corollary", "proposition", "conjecture", "definition", "example", "exercise"}) and tag.name == "div":
+
+ if tag.get("id"):
+
+ tag["class"] = tag.parent.get("class", []) + ["unidade_silenciosa"]
+
+ tag["title"] = tag.parent["id"]
+
+ continue
+
+
+
+ # Coloca o conteudo dentro de uma div com id chamado de papel, substituindo o conteudo original da tag main pela div papel
+
+ # Crie uma div com id "papel"
+ div_papel = soup.new_tag('div', id='papel')
+
+ # Copie a tag main
+ main_content_copy = copy.copy(main_tag.contents)
+
+ # Limpe o conteúdo da tag
+ main_tag.clear()
+
+ # Adicione a cópia do conteúdo à div "papel"
+ for item_copy in main_content_copy:
+ div_papel.append(item_copy)
+
+ # Acrescentar a div_papel na tag main
+ main_tag.append(div_papel)
+
+ # Salva o arquivo HTML modificado
+ with open(arquivo_html, "w", encoding="utf-8") as f:
+
+ f.write(str(soup))
+
+ # Gravar os marcadores de referencia do livro em um arquivo JSON. ele esta na variavel ref_cap e essa informacao será útil para o leitor do livro poder entrar na busca digitar a referenci e obter o conteudo.
+ nome_arquivo = "ref_capitulos.json"
+
+ caminho_arquivo = os.path.join(pasta_livro_renderizado, nome_arquivo)
+
+ with open(caminho_arquivo, "w", encoding="utf-8") as arquivo_json:
+
+ json.dump(ref_cap, arquivo_json, ensure_ascii=False, indent=4)
\ No newline at end of file
diff --git a/_extensions/editoramoan/moan-livro/universidade-estadual-de-alagoas-abnt.csl b/_extensions/editoramoan/moan-livro/universidade-estadual-de-alagoas-abnt.csl
new file mode 100755
index 0000000..ee2fdf8
--- /dev/null
+++ b/_extensions/editoramoan/moan-livro/universidade-estadual-de-alagoas-abnt.csl
@@ -0,0 +1,744 @@
+
+
diff --git a/_extensions/editoramoan/moan-livro/zotero.org_styles_universidade-estadual-paulista-faculdade-de-engenharia-de-guaratingueta-abnt.csl b/_extensions/editoramoan/moan-livro/zotero.org_styles_universidade-estadual-paulista-faculdade-de-engenharia-de-guaratingueta-abnt.csl
new file mode 100755
index 0000000..0b83bb7
--- /dev/null
+++ b/_extensions/editoramoan/moan-livro/zotero.org_styles_universidade-estadual-paulista-faculdade-de-engenharia-de-guaratingueta-abnt.csl
@@ -0,0 +1,1036 @@
+
+
diff --git a/_quarto.yml b/_quarto.yml
new file mode 100755
index 0000000..598b745
--- /dev/null
+++ b/_quarto.yml
@@ -0,0 +1,293 @@
+project:
+ type: book
+ output-dir: propostas-didaticas-ensino-matematica
+ post-render: _extensions/editoramoan/moan-livro/preparacao-moan.py
+ preview:
+ port: 4000
+ browser: true
+filters:
+- lightbox
+lightbox: auto
+include-after-body:
+ text: '
+
+
+
+
+
+ '
+lang: pt-BR
+language:
+ toc-title-document: Neste capítulo
+ title-block-author-single: Organizador
+ title-block-author-plural: Organizadores
+number-sections: true
+crossref:
+ chapters: true
+controle-moan:
+ dicionario: false
+moan-dados:
+ ark: 68745/eM96D
+ título: Propostas didáticas para o ensino de Matemática
+ subtítulo: contribuições no âmbito do Pibid
+ formato: Livro Digital (online)
+ descrição: Descubra novas possibilidades no ensino de Matemática! Este livro apresenta
+ propostas didáticas que desafiam o paradigma tradicional e abrem espaço para a
+ criatividade e a dinamicidade em sala de aula. Sabemos que romper com o modelo
+ convencional de ensino pode ser intimidador para muitos professores. Dessa forma,
+ oferecemos uma alternativa valiosa ao ensino tradicional. Apresentamos propostas
+ dinâmicas e muitas delas com o uso de jogos — tanto os analógicos quanto os digitais
+ online, acessíveis por QR Code na versão impressa — como ferramentas pedagógicas.
+ Essas atividades lúdicas promovem o engajamento, a interação e a compreensão dos
+ conceitos matemáticos de forma envolvente e prazerosa. As propostas didáticas,
+ neste livro, foram desenvolvidas no Programa Institucional de Bolsas de Iniciação
+ à Docência (Pibid) por professores e acadêmicos dos cursos de Licenciatura em
+ Matemática da Unioeste, tanto do campus de Cascavel quanto do de Foz do Iguaçu,
+ Paraná. Explore novas possibilidade e renove a sua prática docente!
+ organizador: Arleni Elise Sella Langer, Adriana Schawabe Reis Lepreda, Dulcyene
+ Maria Ribeiro, Fabiana Magda Garcia Papani, Renata Camacho Bezerra, Richael Silva
+ Caetano
+ autor: Arleni Elise Sella Langer, Adriana Schawabe Reis Lepreda, Dulcyene Maria
+ Ribeiro, Fabiana Magda Garcia Papani, Renata Camacho Bezerra, Richael Silva Caetano,
+ Erika Diana Alves de Oliveira, Ricardo Mondini Ferrazza, Thamara Tobaldini, Luiza
+ Stunder, Eliza Bruna Dalla Corte Andreolla, Fernanda Guerra, Thais de Souza, Bruna
+ Eduarda Unser, Eduardo Rossoni Zeni, Ana Carolina Marques Pauluk, Ashley Esquitine
+ Fernandes Mello, Bruno Eduardo Duarte, Cassio Rafael Santos de Lima, Fabio Goulart
+ de Campos, Gabrielle Thais Werle, Hevila Maria Simonetti, Letícia Santiago Silva
+ e Patricia Alves de Oliveira, Janice Kunz Oenning
+ apoio-financeiro: Coordenação de Aperfeiçoamento de Pessoal de Nível Superior –
+ CAPES
+ realização: 'Programa Institucional de Bolsas de Iniciação à Docência - PIBID/Unioeste.
+ Rua Universitária, 1619 - Jardim Universitário - CEP 85819-100 - Cascavel-PR.
+ E-mail: pibid@unioeste.br'
+ apontamento: https://livro.online/propostas-didaticas-ensino-matematica
+ editora: Editora Moan
+ local: Foz do Iguaçu - PR, Brasil
+ edição: 1
+ editor responsável: Rafael Tavares Juliani
+ diagramador: Rafael Tavares Juliani
+ capista: Rafael Tavares Juliani
+ revisores: Rafael tavares juliani, Jorge Luiz Pereira, os organizadores
+ conselho-editorial: Rafael Tavares Juliani, Jorge Luiz Pereira, Carla Fernanda Sander Juliani
+ prefácio: Cristiane Antonia Hauchild Johann
+ palavras-chave: propostas didáticas, matemática, pibid, unioeste, jogos no ensino,
+ atividades lúdicas
+ área: Matemática – educação – método de ensino
+ cdd: '510.371.33'
+ ano da edição: 2023
+ data de publicação: 22/10/2023
+ idioma: Português do Brasil (pt-br)
+ país: Brasil
+ faixa etária: Acima de 18 anos
+ classificação indicativa: Livre para todos os públicos
+ ícones: Google Material Design
+ imagens-e-quadros: dos autores, onde não especificado
+ outros créditos: 'Na capa foram utilizadas as fontes Stolzl Light/Medium e Josefin
+ Sans Light; imagem (com alterações): Geometria, from The Seven Liberal Arts de
+ Johan Sadeler I, Maerten de Vos ca. 1570-1600 - Metropolitan Museum of Art'
+ isbn-versao-impressa: '9786585027052'
+ ark-versao-impressa: '68745/eM96D.77'
+ direitos-autorais: © 2023, Arleni Elise Sella Langer, Adriana Schawabe Reis Lepreda,
+ Dulcyene Maria Ribeiro, Fabiana Magda Garcia Papani, Renata Camacho Bezerra, Richael
+ Silva Caetano e a Editora Moan.
+ licenca: CC BY-NC-SA 4.0 Internacional
+ licenca-link: https://creativecommons.org/licenses/by-nc-sa/4.0/deed.pt_BR
+ licenca-img: https://upload.wikimedia.org/wikipedia/commons/4/4b/CC_BY-NC-SA.svg
+book:
+ isbn: 978-65-85027-05-2
+ google-analytics: G-G6VT93GC1X
+ cookie-consent:
+ palette: light
+ policy-url: "https://livro.online/politica-de-cookies-br"
+ language: pt
+ prefs-text: Preferências de cookie
+ search:
+ type: textbox
+ favicon: img/favicon.png
+ open-graph:
+ image: img/og.jpg
+ twitter-card:
+ image: img/og.jpg
+ title: Propostas didáticas para o ensino de Matemática
+ subtitle: contribuições no âmbito do Pibid
+ description: Descubra novas possibilidades no ensino de Matemática! Este livro apresenta
+ propostas didáticas que desafiam o paradigma tradicional e abrem espaço para a
+ criatividade e a dinamicidade em sala de aula. Sabemos que romper com o modelo
+ convencional de ensino pode ser intimidador para muitos professores. Dessa forma,
+ oferecemos uma alternativa valiosa ao ensino tradicional. Apresentamos propostas
+ dinâmicas e muitas delas com o uso de jogos — tanto os analógicos quanto os digitais
+ online, acessíveis por QR Code na versão impressa — como ferramentas pedagógicas.
+ Essas atividades lúdicas promovem o engajamento, a interação e a compreensão dos
+ conceitos matemáticos de forma envolvente e prazerosa. As propostas didáticas,
+ neste livro, foram desenvolvidas no Programa Institucional de Bolsas de Iniciação
+ à Docência (Pibid) por professores e acadêmicos dos cursos de Licenciatura em
+ Matemática da Unioeste, tanto do campus de Cascavel quanto do de Foz do Iguaçu,
+ Paraná. Explore novas possibilidade e renove a sua prática docente!
+ author:
+ - name: Arleni Elise Sella Langer
+ email: arlenisella@hotmail.com
+ affiliations:
+ - name: Universidade Estadual do Oeste do Paraná
+ city: Cascavel
+ state: PR
+ country: BR
+ role: Organizadora
+ - name: Adriana Schawabe Reis Lepreda
+ email: adrilepreda@gmail
+ affiliations:
+ - name: Universidade Estadual do Oeste do Paraná
+ city: Cascavel
+ state: PR
+ country: BR
+ role: Organizadora
+ - name: Dulcyene Maria Ribeiro
+ email: dulcyene.ribeiro@unioeste.br
+ affiliations:
+ - name: Universidade Estadual do Oeste do Paraná
+ city: Cascavel
+ state: PR
+ country: BR
+ role: Organizadora
+ - name: Fabiana Magda Garcia Papani
+ email: fabiana.papani@unioeste.br
+ affiliations:
+ - name: Universidade Estadual do Oeste do Paraná
+ city: Cascavel
+ state: PR
+ country: BR
+ role: Organizadora
+ - name: Renata Camacho Bezerra
+ email: renata.bezerra@unioeste.br
+ affiliations:
+ - name: Universidade Estadual do Oeste do Paraná
+ city: Foz do Iguaçu
+ state: PR
+ country: BR
+ role: Organizadora
+ - name: Richael Silva Caetano
+ email: richael.caetano@unioeste.br
+ affiliations:
+ - name: Universidade Estadual do Oeste do Paraná
+ city: Foz do Iguaçu
+ state: PR
+ country: BR
+ role: Organizador
+ compiler:
+ - name: Arleni Elise Sella Langer
+ email: arlenisella@hotmail.com
+ affiliations:
+ - name: Universidade Estadual do Oeste do Paraná
+ city: Cascavel
+ state: PR
+ country: BR
+ role: Organizadora
+ - name: Adriana Schawabe Reis Lepreda
+ email: adrilepreda@gmail
+ affiliations:
+ - name: Universidade Estadual do Oeste do Paraná
+ city: Cascavel
+ state: PR
+ country: BR
+ role: Organizadora
+ - name: Dulcyene Maria Ribeiro
+ email: dulcyene.ribeiro@unioeste.br
+ affiliations:
+ - name: Universidade Estadual do Oeste do Paraná
+ city: Cascavel
+ state: PR
+ country: BR
+ role: Organizadora
+ - name: Fabiana Magda Garcia Papani
+ email: fabiana.papani@unioeste.br
+ affiliations:
+ - name: Universidade Estadual do Oeste do Paraná
+ city: Cascavel
+ state: PR
+ country: BR
+ role: Organizadora
+ - name: Renata Camacho Bezerra
+ email: renata.bezerra@unioeste.br
+ affiliations:
+ - name: Universidade Estadual do Oeste do Paraná
+ city: Foz do Iguaçu
+ state: PR
+ country: BR
+ role: Organizadora
+ - name: Richael Silva Caetano
+ email: richael.caetano@unioeste.br
+ affiliations:
+ - name: Universidade Estadual do Oeste do Paraná
+ city: Foz do Iguaçu
+ state: PR
+ country: BR
+ role: Organizador
+ date: 10/22/2023
+ editor: Rafael Tavares Juliani
+ publisher: Editora Moan
+ publisher-place: Foz do Iguaçu - PR, Brasil
+ page-navigation: true
+ reader-mode: true
+ sharing:
+ - facebook
+ - linkedin
+ sidebar:
+ title: Propostas didáticas para o ensino de matemática
+ logo: img/capa.png
+ tools:
+ - icon: card-image
+ text: Capa Animada
+ href: img/CapaAnim.gif
+ - icon: bi bi-git
+ text: Alterações e Versões
+ href: https://gitea.livro.online/editoramoan/propostas-didaticas-ensino-matematica/commits/branch/main
+ - icon: envelope-open-heart
+ href: https://livro.online/doacao
+ text: Doar
+ - icon: printer-fill
+ href: index.html#versão-impressa
+ text: Versão Impressa
+ - icon: book-half
+ href: https://livro.online
+ text: Outros Livros
+ navbar:
+ logo: img/capa.png
+ logo-href: img/CapaAnim.gif
+ comments:
+ hypothesis:
+ theme: clean
+ openSidebar: false
+ chapters:
+ - index.qmd
+ - prefacio.qmd
+ - apresentacao.qmd
+ - part: 'Parte 1: propostas didáticas Pibid/Matemática/Cascavel'
+ chapters:
+ - contextualizando-propostas-didaticas-_pibid-matematica-cascavel.qmd
+ - numeros-inteiros.qmd
+ - jogos-no-ensino-de-equacoes.qmd
+ - atividades-ludicas-para-o-ensino-da-linguagem-algebrica.qmd
+ - uso-do-astrolabio-caseiro-no-ensino-da-trigonometria.qmd
+ - part: 'Parte 2: propostas didáticas Pibid/Matemática/Foz do Iguaçu'
+ chapters:
+ - jogos-no-para-o-ensino-de-fracoes-no-9-ano-do-ensino-fundamental.qmd
+citation: true
+bibliography: referencias.bib
+csl: _extensions/editoramoan/moan-livro/zotero.org_styles_universidade-estadual-paulista-faculdade-de-engenharia-de-guaratingueta-abnt.csl
+google-scholar: true
+format:
+ moan-livro-html:
+ theme:
+ light:
+ - cosmo
+ - _extensions/editoramoan/moan-livro/custom.scss
+ - css/moan.scss
+ dark:
+ - superhero
+ - _extensions/editoramoan/moan-livro/custom.scss
+ - css/moan.scss
+ number-sections: false
+ number-depth: 1
+ anchor-sections: false
+format-links: false
+fig-cap-location: top
diff --git a/_quarto_internal_scss_error.scss b/_quarto_internal_scss_error.scss
new file mode 100644
index 0000000..4e3c262
--- /dev/null
+++ b/_quarto_internal_scss_error.scss
@@ -0,0 +1,13647 @@
+// quarto-scss-analysis-annotation { "quarto-version": "1.6.39" }
+
+// quarto-scss-analysis-annotation { "origin": "'use' section from format" }
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+// quarto-scss-analysis-annotation { "origin": "'use' section from Quarto" }
+
+
+
+
+
+
+
+
+
+
+
+@use "sass:map" as listing-map;
+
+
+
+
+
+
+@use "sass:color" as quarto-color;
+@use "sass:map" as quarto-map;
+@use "sass:math" as quarto-math;
+
+
+// quarto-scss-analysis-annotation { "origin": "'use' section from user-defined SCSS" }
+
+
+
+// quarto-scss-analysis-annotation { "origin": "'functions' section from format" }
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+// Bootstrap functions
+//
+// Utility mixins and functions for evaluating source code across our variables, maps, and mixins.
+
+// Ascending
+// Used to evaluate Sass maps like our grid breakpoints.
+@mixin _assert-ascending($map, $map-name) {
+ $prev-key: null;
+ $prev-num: null;
+ @each $key, $num in $map {
+ @if $prev-num == null or unit($num) == "%" or unit($prev-num) == "%" {
+ // Do nothing
+ } @else if not comparable($prev-num, $num) {
+ @warn "Potentially invalid value for #{$map-name}: This map must be in ascending order, but key '#{$key}' has value #{$num} whose unit makes it incomparable to #{$prev-num}, the value of the previous key '#{$prev-key}' !";
+ } @else if $prev-num >= $num {
+ @warn "Invalid value for #{$map-name}: This map must be in ascending order, but key '#{$key}' has value #{$num} which isn't greater than #{$prev-num}, the value of the previous key '#{$prev-key}' !";
+ }
+ $prev-key: $key;
+ $prev-num: $num;
+ }
+}
+
+// Starts at zero
+// Used to ensure the min-width of the lowest breakpoint starts at 0.
+@mixin _assert-starts-at-zero($map, $map-name: "$grid-breakpoints") {
+ @if length($map) > 0 {
+ $values: map-values($map);
+ $first-value: nth($values, 1);
+ @if $first-value != 0 {
+ @warn "First breakpoint in #{$map-name} must start at 0, but starts at #{$first-value}.";
+ }
+ }
+}
+
+// Colors
+@function to-rgb($value) {
+ @return red($value), green($value), blue($value);
+}
+
+// stylelint-disable scss/dollar-variable-pattern
+@function rgba-css-var($identifier, $target) {
+ @if $identifier == "body" and $target == "bg" {
+ @return rgba(var(--#{$prefix}#{$identifier}-bg-rgb), var(--#{$prefix}#{$target}-opacity));
+ } @if $identifier == "body" and $target == "text" {
+ @return rgba(var(--#{$prefix}#{$identifier}-color-rgb), var(--#{$prefix}#{$target}-opacity));
+ } @else {
+ @return rgba(var(--#{$prefix}#{$identifier}-rgb), var(--#{$prefix}#{$target}-opacity));
+ }
+}
+
+@function map-loop($map, $func, $args...) {
+ $_map: ();
+
+ @each $key, $value in $map {
+ // allow to pass the $key and $value of the map as an function argument
+ $_args: ();
+ @each $arg in $args {
+ $_args: append($_args, if($arg == "$key", $key, if($arg == "$value", $value, $arg)));
+ }
+
+ $_map: map-merge($_map, ($key: call(get-function($func), $_args...)));
+ }
+
+ @return $_map;
+}
+// stylelint-enable scss/dollar-variable-pattern
+
+@function varify($list) {
+ $result: null;
+ @each $entry in $list {
+ $result: append($result, var(--#{$prefix}#{$entry}), space);
+ }
+ @return $result;
+}
+
+// Internal Bootstrap function to turn maps into its negative variant.
+// It prefixes the keys with `n` and makes the value negative.
+@function negativify-map($map) {
+ $result: ();
+ @each $key, $value in $map {
+ @if $key != 0 {
+ $result: map-merge($result, ("n" + $key: (-$value)));
+ }
+ }
+ @return $result;
+}
+
+// Get multiple keys from a sass map
+@function map-get-multiple($map, $values) {
+ $result: ();
+ @each $key, $value in $map {
+ @if (index($values, $key) != null) {
+ $result: map-merge($result, ($key: $value));
+ }
+ }
+ @return $result;
+}
+
+// Merge multiple maps
+@function map-merge-multiple($maps...) {
+ $merged-maps: ();
+
+ @each $map in $maps {
+ $merged-maps: map-merge($merged-maps, $map);
+ }
+ @return $merged-maps;
+}
+
+// Replace `$search` with `$replace` in `$string`
+// Used on our SVG icon backgrounds for custom forms.
+//
+// @author Kitty Giraudel
+// @param {String} $string - Initial string
+// @param {String} $search - Substring to replace
+// @param {String} $replace ('') - New value
+// @return {String} - Updated string
+@function str-replace($string, $search, $replace: "") {
+ $index: str-index($string, $search);
+
+ @if $index {
+ @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
+ }
+
+ @return $string;
+}
+
+// See https://codepen.io/kevinweber/pen/dXWoRw
+//
+// Requires the use of quotes around data URIs.
+
+@function escape-svg($string) {
+ @if str-index($string, "data:image/svg+xml") {
+ @each $char, $encoded in $escaped-characters {
+ // Do not escape the url brackets
+ @if str-index($string, "url(") == 1 {
+ $string: url("#{str-replace(str-slice($string, 6, -3), $char, $encoded)}");
+ } @else {
+ $string: str-replace($string, $char, $encoded);
+ }
+ }
+ }
+
+ @return $string;
+}
+
+// Color contrast
+// See https://github.com/twbs/bootstrap/pull/30168
+
+// A list of pre-calculated numbers of pow(divide((divide($value, 255) + .055), 1.055), 2.4). (from 0 to 255)
+// stylelint-disable-next-line scss/dollar-variable-default, scss/dollar-variable-pattern
+$_luminance-list: .0008 .001 .0011 .0013 .0015 .0017 .002 .0022 .0025 .0027 .003 .0033 .0037 .004 .0044 .0048 .0052 .0056 .006 .0065 .007 .0075 .008 .0086 .0091 .0097 .0103 .011 .0116 .0123 .013 .0137 .0144 .0152 .016 .0168 .0176 .0185 .0194 .0203 .0212 .0222 .0232 .0242 .0252 .0262 .0273 .0284 .0296 .0307 .0319 .0331 .0343 .0356 .0369 .0382 .0395 .0409 .0423 .0437 .0452 .0467 .0482 .0497 .0513 .0529 .0545 .0561 .0578 .0595 .0612 .063 .0648 .0666 .0685 .0704 .0723 .0742 .0762 .0782 .0802 .0823 .0844 .0865 .0887 .0908 .0931 .0953 .0976 .0999 .1022 .1046 .107 .1095 .1119 .1144 .117 .1195 .1221 .1248 .1274 .1301 .1329 .1356 .1384 .1413 .1441 .147 .15 .1529 .1559 .159 .162 .1651 .1683 .1714 .1746 .1779 .1812 .1845 .1878 .1912 .1946 .1981 .2016 .2051 .2086 .2122 .2159 .2195 .2232 .227 .2307 .2346 .2384 .2423 .2462 .2502 .2542 .2582 .2623 .2664 .2705 .2747 .2789 .2831 .2874 .2918 .2961 .3005 .305 .3095 .314 .3185 .3231 .3278 .3325 .3372 .3419 .3467 .3515 .3564 .3613 .3663 .3712 .3763 .3813 .3864 .3916 .3968 .402 .4072 .4125 .4179 .4233 .4287 .4342 .4397 .4452 .4508 .4564 .4621 .4678 .4735 .4793 .4851 .491 .4969 .5029 .5089 .5149 .521 .5271 .5333 .5395 .5457 .552 .5583 .5647 .5711 .5776 .5841 .5906 .5972 .6038 .6105 .6172 .624 .6308 .6376 .6445 .6514 .6584 .6654 .6724 .6795 .6867 .6939 .7011 .7084 .7157 .7231 .7305 .7379 .7454 .7529 .7605 .7682 .7758 .7835 .7913 .7991 .807 .8148 .8228 .8308 .8388 .8469 .855 .8632 .8714 .8796 .8879 .8963 .9047 .9131 .9216 .9301 .9387 .9473 .956 .9647 .9734 .9823 .9911 1;
+
+@function color-contrast($background, $color-contrast-dark: $color-contrast-dark, $color-contrast-light: $color-contrast-light, $min-contrast-ratio: $min-contrast-ratio) {
+ $foregrounds: $color-contrast-light, $color-contrast-dark, $white, $black;
+ $max-ratio: 0;
+ $max-ratio-color: null;
+
+ @each $color in $foregrounds {
+ $contrast-ratio: contrast-ratio($background, $color);
+ @if $contrast-ratio > $min-contrast-ratio {
+ @return $color;
+ } @else if $contrast-ratio > $max-ratio {
+ $max-ratio: $contrast-ratio;
+ $max-ratio-color: $color;
+ }
+ }
+
+ @warn "Found no color leading to #{$min-contrast-ratio}:1 contrast ratio against #{$background}...";
+
+ @return $max-ratio-color;
+}
+
+@function contrast-ratio($background, $foreground: $color-contrast-light) {
+ $l1: luminance($background);
+ $l2: luminance(opaque($background, $foreground));
+
+ @return if($l1 > $l2, divide($l1 + .05, $l2 + .05), divide($l2 + .05, $l1 + .05));
+}
+
+// Return WCAG2.1 relative luminance
+// See https://www.w3.org/TR/WCAG/#dfn-relative-luminance
+// See https://www.w3.org/TR/WCAG/#dfn-contrast-ratio
+@function luminance($color) {
+ $rgb: (
+ "r": red($color),
+ "g": green($color),
+ "b": blue($color)
+ );
+
+ @each $name, $value in $rgb {
+ $value: if(divide($value, 255) < .04045, divide(divide($value, 255), 12.92), nth($_luminance-list, $value + 1));
+ $rgb: map-merge($rgb, ($name: $value));
+ }
+
+ @return (map-get($rgb, "r") * .2126) + (map-get($rgb, "g") * .7152) + (map-get($rgb, "b") * .0722);
+}
+
+// Return opaque color
+// opaque(#fff, rgba(0, 0, 0, .5)) => #808080
+@function opaque($background, $foreground) {
+ @return mix(rgba($foreground, 1), $background, opacity($foreground) * 100%);
+}
+
+// scss-docs-start color-functions
+// Tint a color: mix a color with white
+@function tint-color($color, $weight) {
+ @return mix(white, $color, $weight);
+}
+
+// Shade a color: mix a color with black
+@function shade-color($color, $weight) {
+ @return mix(black, $color, $weight);
+}
+
+// Shade the color if the weight is positive, else tint it
+@function shift-color($color, $weight) {
+ @return if($weight > 0, shade-color($color, $weight), tint-color($color, -$weight));
+}
+// scss-docs-end color-functions
+
+// Return valid calc
+@function add($value1, $value2, $return-calc: true) {
+ @if $value1 == null {
+ @return $value2;
+ }
+
+ @if $value2 == null {
+ @return $value1;
+ }
+
+ @if type-of($value1) == number and type-of($value2) == number and comparable($value1, $value2) {
+ @return $value1 + $value2;
+ }
+
+ @return if($return-calc == true, calc(#{$value1} + #{$value2}), $value1 + unquote(" + ") + $value2);
+}
+
+@function subtract($value1, $value2, $return-calc: true) {
+ @if $value1 == null and $value2 == null {
+ @return null;
+ }
+
+ @if $value1 == null {
+ @return -$value2;
+ }
+
+ @if $value2 == null {
+ @return $value1;
+ }
+
+ @if type-of($value1) == number and type-of($value2) == number and comparable($value1, $value2) {
+ @return $value1 - $value2;
+ }
+
+ @if type-of($value2) != number {
+ $value2: unquote("(") + $value2 + unquote(")");
+ }
+
+ @return if($return-calc == true, calc(#{$value1} - #{$value2}), $value1 + unquote(" - ") + $value2);
+}
+
+@function divide($dividend, $divisor, $precision: 10) {
+ $sign: if($dividend > 0 and $divisor > 0 or $dividend < 0 and $divisor < 0, 1, -1);
+ $dividend: abs($dividend);
+ $divisor: abs($divisor);
+ @if $dividend == 0 {
+ @return 0;
+ }
+ @if $divisor == 0 {
+ @error "Cannot divide by 0";
+ }
+ $remainder: $dividend;
+ $result: 0;
+ $factor: 10;
+ @while ($remainder > 0 and $precision >= 0) {
+ $quotient: 0;
+ @while ($remainder >= $divisor) {
+ $remainder: $remainder - $divisor;
+ $quotient: $quotient + 1;
+ }
+ $result: $result * 10 + $quotient;
+ $factor: $factor * .1;
+ $remainder: $remainder * 10;
+ $precision: $precision - 1;
+ @if ($precision < 0 and $remainder >= $divisor * 5) {
+ $result: $result + 1;
+ }
+ }
+ $result: $result * $factor * $sign;
+ $dividend-unit: unit($dividend);
+ $divisor-unit: unit($divisor);
+ $unit-map: (
+ "px": 1px,
+ "rem": 1rem,
+ "em": 1em,
+ "%": 1%
+ );
+ @if ($dividend-unit != $divisor-unit and map-has-key($unit-map, $dividend-unit)) {
+ $result: $result * map-get($unit-map, $dividend-unit);
+ }
+ @return $result;
+}
+
+/////////////////////////////////////////////////////////////////
+// Color contrasting (backported to BS4 from BS5)
+// See https://github.com/twbs/bootstrap/pull/30168
+/////////////////////////////////////////////////////////////////
+
+// A list of pre-calculated numbers of pow(divide((divide($value, 255) + .055), 1.055), 2.4). (from 0 to 255)
+// stylelint-disable-next-line scss/dollar-variable-default, scss/dollar-variable-pattern
+$_luminance-list: .0008 .001 .0011 .0013 .0015 .0017 .002 .0022 .0025 .0027 .003 .0033 .0037 .004 .0044 .0048 .0052 .0056 .006 .0065 .007 .0075 .008 .0086 .0091 .0097 .0103 .011 .0116 .0123 .013 .0137 .0144 .0152 .016 .0168 .0176 .0185 .0194 .0203 .0212 .0222 .0232 .0242 .0252 .0262 .0273 .0284 .0296 .0307 .0319 .0331 .0343 .0356 .0369 .0382 .0395 .0409 .0423 .0437 .0452 .0467 .0482 .0497 .0513 .0529 .0545 .0561 .0578 .0595 .0612 .063 .0648 .0666 .0685 .0704 .0723 .0742 .0762 .0782 .0802 .0823 .0844 .0865 .0887 .0908 .0931 .0953 .0976 .0999 .1022 .1046 .107 .1095 .1119 .1144 .117 .1195 .1221 .1248 .1274 .1301 .1329 .1356 .1384 .1413 .1441 .147 .15 .1529 .1559 .159 .162 .1651 .1683 .1714 .1746 .1779 .1812 .1845 .1878 .1912 .1946 .1981 .2016 .2051 .2086 .2122 .2159 .2195 .2232 .227 .2307 .2346 .2384 .2423 .2462 .2502 .2542 .2582 .2623 .2664 .2705 .2747 .2789 .2831 .2874 .2918 .2961 .3005 .305 .3095 .314 .3185 .3231 .3278 .3325 .3372 .3419 .3467 .3515 .3564 .3613 .3663 .3712 .3763 .3813 .3864 .3916 .3968 .402 .4072 .4125 .4179 .4233 .4287 .4342 .4397 .4452 .4508 .4564 .4621 .4678 .4735 .4793 .4851 .491 .4969 .5029 .5089 .5149 .521 .5271 .5333 .5395 .5457 .552 .5583 .5647 .5711 .5776 .5841 .5906 .5972 .6038 .6105 .6172 .624 .6308 .6376 .6445 .6514 .6584 .6654 .6724 .6795 .6867 .6939 .7011 .7084 .7157 .7231 .7305 .7379 .7454 .7529 .7605 .7682 .7758 .7835 .7913 .7991 .807 .8148 .8228 .8308 .8388 .8469 .855 .8632 .8714 .8796 .8879 .8963 .9047 .9131 .9216 .9301 .9387 .9473 .956 .9647 .9734 .9823 .9911 1;
+
+@function color-contrast($background, $foregrounds: null) {
+
+ // These variables should be defined in _variables.scss, but we also
+ // define them here so that 3rd party libs can use if they want
+ // without polluting the global namespace
+ $black: #000 !default;
+ $white: #fff !default;
+ $color-contrast-dark: $black !default;
+ $color-contrast-light: $white !default;
+ $min-contrast-ratio: 3 !default;
+
+ @if $foregrounds == null {
+ $foregrounds: $color-contrast-light, $color-contrast-dark, $white, $black;
+ } @else {
+ $foregrounds: $foregrounds, $color-contrast-light, $color-contrast-dark, $white, $black;
+ }
+
+ $max-ratio: 0;
+ $max-ratio-color: null;
+
+ @each $color in $foregrounds {
+ $contrast-ratio: contrast-ratio($background, $color);
+ @if $contrast-ratio > $min-contrast-ratio {
+ @return $color;
+ } @else if $contrast-ratio > $max-ratio {
+ $max-ratio: $contrast-ratio;
+ $max-ratio-color: $color;
+ }
+ }
+
+ $color-contrast-warnings: false !default;
+ @if $color-contrast-warnings {
+ @warn "Found no color leading to #{$min-contrast-ratio}:1 contrast ratio against #{$background}...";
+ }
+
+ @return $max-ratio-color;
+}
+
+@function contrast-ratio($background, $foreground: $color-contrast-light) {
+ $l1: luminance($background);
+ $l2: luminance(opaque($background, $foreground));
+
+ @return if($l1 > $l2, divide($l1 + .05, $l2 + .05), divide($l2 + .05, $l1 + .05));
+}
+
+// Return WCAG2.0 relative luminance
+// See https://www.w3.org/WAI/GL/wiki/Relative_luminance
+// See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
+@function luminance($color) {
+ $rgb: (
+ "r": red($color),
+ "g": green($color),
+ "b": blue($color)
+ );
+
+ @each $name, $value in $rgb {
+ $value: if(divide($value, 255) < .04045, divide(divide($value, 255), 12.92), nth($_luminance-list, $value + 1));
+ $rgb: map-merge($rgb, ($name: $value));
+ }
+
+ @return (map-get($rgb, "r") * .2126) + (map-get($rgb, "g") * .7152) + (map-get($rgb, "b") * .0722);
+}
+
+// Return opaque color
+// opaque(#fff, rgba(0, 0, 0, .5)) => #808080
+@function opaque($background, $foreground) {
+ @return mix(rgba($foreground, 1), $background, opacity($foreground) * 100%);
+}
+
+// Added in BS5 as an alternative to the \ operator, which
+// throws warnings in Dart Sass
+// https://github.com/twbs/bootstrap/pull/34245
+@function divide($dividend, $divisor, $precision: 10) {
+ $sign: if($dividend > 0 and $divisor > 0 or $dividend < 0 and $divisor < 0, 1, -1);
+ $dividend: abs($dividend);
+ $divisor: abs($divisor);
+ @if $dividend == 0 {
+ @return 0;
+ }
+ @if $divisor == 0 {
+ @error "Cannot divide by 0";
+ }
+ $remainder: $dividend;
+ $result: 0;
+ $factor: 10;
+ @while ($remainder > 0 and $precision >= 0) {
+ $quotient: 0;
+ @while ($remainder >= $divisor) {
+ $remainder: $remainder - $divisor;
+ $quotient: $quotient + 1;
+ }
+ $result: $result * 10 + $quotient;
+ $factor: $factor * .1;
+ $remainder: $remainder * 10;
+ $precision: $precision - 1;
+ @if ($precision < 0 and $remainder >= $divisor * 5) {
+ $result: $result + 1;
+ }
+ }
+ $result: $result * $factor * $sign;
+ $dividend-unit: unit($dividend);
+ $divisor-unit: unit($divisor);
+ $unit-map: (
+ "px": 1px,
+ "rem": 1rem,
+ "em": 1em,
+ "%": 1%
+ );
+ @if ($dividend-unit != $divisor-unit and map-has-key($unit-map, $dividend-unit)) {
+ $result: $result * map-get($unit-map, $dividend-unit);
+ }
+ @return $result;
+}
+
+
+// quarto-scss-analysis-annotation { "origin": "'functions' section from Quarto" }
+
+
+
+
+
+// Our website navbar implementation will shift the body down
+// to accomodate the navbar, but the height is variable. As a result
+// we compute the height using JS, so it is perfect. This can lead to
+// a content jump when the js executes, so place a padding there at render
+// time to minimize this.
+@function navbar-default-offset($theme) {
+ $offsets: (
+ darkly: 82px,
+ flatly: 82px,
+ litera: 67px,
+ lumen: 68px,
+ lux: 105px,
+ materia: 96px,
+ pulse: 89px,
+ quartz: 82px,
+ sandstone: 63px,
+ simplex: 80px,
+ sketchy: 68px,
+ slate: 66px,
+ zephyr: 76px,
+ );
+
+ $val: null;
+ @if ($theme != null) {
+ $val: quarto-map.get($offsets, $theme);
+ }
+
+ @if ($val != null) {
+ @return $val;
+ } @else {
+ @return 64px;
+ }
+}
+
+
+
+
+
+
+@function listing-override-value($theme, $varname, $default) {
+ // These will be defined in bootstrap, but creating values here
+ // That will make this function accessible to callers prior to bootstrap variables
+ // being set
+ $black: rgb(0, 0, 0) !default;
+ $white: rgb(255, 255, 255) !default;
+ $gray-300: #dee2e6 !default;
+ $gray-500: #adb5bd !default;
+ $gray-600: #6c757d !default;
+ $blue: #0d6efd !default;
+
+ $theme-overrides: (
+ cyborg: (
+ category-border: solid $gray-500 1px,
+ category-color: $gray-500,
+ form-background-color: $body-bg,
+ form-color: $body-color,
+ input-group-border: solid $text-muted 1px,
+ input-group-border-radius: $border-radius,
+ ),
+ darkly: (
+ form-background-color: $body-bg,
+ form-color: $body-color,
+ category-border: solid $gray-600 1px,
+ category-color: $gray-600,
+ ),
+ materia: (
+ input-text-margin: 0 0.5em 0 0,
+ ),
+ quartz: (
+ category-color: $gray-300,
+ input-text-placeholder-color: $gray-500,
+ ),
+ slate: (
+ category-border: solid $gray-600 1px,
+ category-color: $gray-600,
+ form-background-color: $body-bg,
+ form-color: $body-color,
+ input-text-background-color: $body-bg,
+ input-text-color: $body-color,
+ input-group-border: solid $gray-600 1px,
+ ),
+ solar: (
+ input-group-border: solid $gray-600 1px,
+ category-color: $body-color,
+ category-border: solid $body-color 1px,
+ ),
+ superhero: (
+ input-text-background-color: $body-bg,
+ input-text-color: $body-color,
+ input-group-border: solid $gray-600 1px,
+ category-color: $gray-600,
+ category-border: solid $gray-600 1px,
+ ),
+ vapor: (
+ category-border: solid $text-muted 1px,
+ input-group-border: solid $text-muted 1px,
+ ),
+ );
+
+ $val: null;
+ @if ($theme != null) {
+ $theme-vals: listing-map.get($theme-overrides, $theme);
+ @if ($theme-vals != null) {
+ $val: listing-map.get($theme-vals, $varname);
+ }
+ }
+
+ @if ($val != null) {
+ @return $val;
+ } @else {
+ @return $default;
+ }
+}
+
+/*-- scss:variables --*/
+
+// Since we use these colors, we need to ensure that they
+// are defined (for example, if no theme is specified)
+$gray-300: #dee2e6 !default;
+$gray-500: #adb5bd !default;
+$gray-600: #6c757d !default;
+$gray-600: #6c757d !default;
+$gray-800: #343a40 !default;
+
+$card-cap-bg: rgba($gray-800, 0.25) !default;
+
+$border-color: $gray-300 !default;
+$border-radius: 0.25rem !default;
+$border-radius-sm: 0.2em !default;
+
+$text-muted: $gray-600 !default;
+
+$theme-name: null !default;
+
+
+
+
+
+
+@function colorToRGB($color) {
+ @return "rgb(" + red($color) + ", " + green($color) + ", " + blue($color) +
+ ")";
+}
+
+@function colorToRGBA($color) {
+ @return "rgba(" + red($color) + ", " + green($color) + ", " + blue($color) +
+ ", " + alpha($color) + ")";
+}
+
+@function str-replace($string, $search, $replace: "") {
+ $index: str-index($string, $search);
+ @if $index {
+ @return str-slice($string, 1, $index - 1) + $replace +
+ str-replace(
+ str-slice($string, $index + str-length($search)),
+ $search,
+ $replace
+ );
+ }
+ @return $string;
+}
+
+// Dims a color (either making it more white or more black)
+@function theme-dim($baseColor, $amount) {
+ @if (tone($baseColor) == "dark") {
+ @return lighten($baseColor, $amount);
+ } @else {
+ @return darken($baseColor, $amount);
+ }
+}
+
+// Provides a contrast color for a given color
+// The color is the starting color that will used to form a contrasting color
+// The bgColor is the color that will be used to test contrast (e.g. the color
+// will be shifted until its contrast against the bgColor is acceptable)
+@function theme-contrast($color, $bgColor, $level: "AAA") {
+ // These will be defined in bootstrap, but creating values here
+ // That will make this function accessible to callers prior to bootstrap variables
+ // being set
+ $black: rgb(0, 0, 0) !default;
+ $white: rgb(255, 255, 255) !default;
+
+ @if tone($bgColor) == "light" {
+ @return accessibleContrast($color, $black, $bgColor, $level);
+ } @else {
+ @return accessibleContrast($color, $white, $bgColor, $level);
+ }
+}
+
+@function accessibleContrast($startColor, $mixColor, $bgColor, $level: "AAA") {
+ // A: 3:1
+ // AA: 4.5:1
+ // AAA: 7:1
+ $goalContrastRatio: 3;
+ @if $level == "AA" {
+ $goalContrastRatio: 4.5;
+ } @else {
+ $goalContrastRatio: 7;
+ }
+
+ $percentMix: 100;
+ $contrastRatio: 0;
+ $contrastColor: null;
+ @while ($contrastRatio < $goalContrastRatio and $percentMix > 0) {
+ $contrastColor: mix(
+ $startColor,
+ $mixColor,
+ percentage(quarto-math.div($percentMix, 100))
+ );
+ $contrastRatio: quarto-contrast($contrastColor, $bgColor);
+ $percentMix: $percentMix - 1;
+ }
+
+ @return $contrastColor;
+}
+
+// Fades a color towards the background color
+@function theme-fade($baseColor, $backgroundColor, $amount) {
+ @if (tone($backgroundColor) == "dark") {
+ @return darken($baseColor, $amount);
+ } @else {
+ @return lighten($baseColor, $amount);
+ }
+}
+
+@function theme-highlight($baseColor, $backgroundColor, $amount) {
+ @if (tone($backgroundColor) == "dark") {
+ @return lighten($baseColor, $amount);
+ } @else {
+ @return darken($baseColor, $amount);
+ }
+}
+
+@function theme-override-value($theme, $varname, $default) {
+ // These will be defined in bootstrap, but creating values here
+ // That will make this function accessible to callers prior to bootstrap variables
+ // being set
+ $black: rgb(0, 0, 0) !default;
+ $white: rgb(255, 255, 255) !default;
+ $gray-500: #adb5bd !default;
+ $gray-300: #dee2e6 !default;
+ $blue: #0d6efd !default;
+
+ $simplex-border-mix: mix($white, $black, 93.5%) !default;
+
+ $theme-overrides: (
+ cerulean: (
+ navbar-fg: $white,
+ valuebox-bg-primary: #2fa4e7,
+ valuebox-bg-info: #3d9dd1,
+ valuebox-bg-success: #67a34d,
+ valuebox-bg-warning: #aa9208,
+ valuebox-bg-danger: #c48282,
+ ),
+ cosmo: (
+ navbar-bg:
+ if(
+ $default == #2780e3,
+ if(variable-exists(light), $light, $gray-500),
+ $default
+ ),
+ link-color: #2761e3,
+ valuebox-bg-primary: #5397e9,
+ valuebox-bg-info: #9954bbb3,
+ valuebox-bg-success: #3aa716,
+ valuebox-bg-warning: #fa6400,
+ valuebox-bg-danger: #ff0039b3,
+ ),
+ cyborg: (
+ navbar-bg:
+ if(
+ $default == #2a9fd6,
+ if(variable-exists(secondary), $secondary, $black),
+ $default
+ ),
+ navbar-hl: $white,
+ ),
+ darkly: (
+ navbar-fg: $gray-300,
+ navbar-hl: $white,
+ input-border-color: $gray-500,
+ ),
+ flatly: (
+ navbar-hl: $white,
+ valuebox-bg-primary: rgba(39, 128, 227, 0.7),
+ valuebox-bg-info: rgba(153, 84, 187, 0.7),
+ valuebox-bg-success: rgba(63, 182, 24, 0.7),
+ valuebox-bg-warning: rgba(255, 117, 24, 0.7),
+ valuebox-bg-danger: rgba(255, 0, 57, 0.7),
+ ),
+ journal: (
+ navbar-fg: rgba($white, 0.7),
+ navbar-hl: $white,
+ valuebox-bg-primary: #f0938f,
+ valuebox-bg-info: #3d9dd1,
+ valuebox-bg-success: #65a244,
+ valuebox-bg-warning: #ad9310,
+ valuebox-bg-danger: #c77f7f,
+ ),
+ litera: (
+ navbar-bg: if($default == #4582ec, $white, $default),
+ ),
+ lumen: (
+ navbar-fg: rgba($white, 0.7),
+ navbar-hl: $white,
+ valuebox-bg-primary: #67abcc,
+ valuebox-bg-info: #3d9dd1,
+ valuebox-bg-success: #5ea343,
+ valuebox-bg-warning: #a79011,
+ valuebox-bg-danger: #ca8181,
+ ),
+ lux: (),
+ materia: (
+ navbar-fg: rgba($white, 0.7),
+ navbar-hl: $white,
+ ),
+ minty: (
+ navbar-fg: $white,
+ ),
+ morph: (
+ navbar-bg:
+ if(
+ $default == #378dfc,
+ if(variable-exists(body-bg), $body-bg, $black),
+ $default
+ ),
+ navbar-fg: rgba($black, 0.5),
+ ),
+ paper: (
+ valuebox-bg-primary: #4396ea,
+ valuebox-bg-info: #c277cf,
+ valuebox-bg-success: #59a343,
+ valuebox-bg-warning: #d68100,
+ valuebox-bg-danger: #f46762,
+ ),
+ pulse: (
+ navbar-fg: rgba($white, 0.7),
+ navbar-hl: $white,
+ ),
+ quartz: (
+ navbar-fg: rgba($white, 0.8),
+ navbar-hl: $white,
+ ),
+ sandstone: (
+ navbar-bg:
+ if(
+ $default == #325d88,
+ if(variable-exists(dark), $dark, $black),
+ $default
+ ),
+ navbar-fg: rgba($white, 0.7),
+ navbar-hl: $white,
+ valuebox-bg-primary: #7b98ad,
+ valuebox-bg-info: #3d9dd1,
+ valuebox-bg-success: #60a545,
+ valuebox-bg-warning: #af8e08,
+ valuebox-bg-danger: #ca8181,
+ ),
+ simplex: (
+ navbar-bg: if($default == #d9230f, $white, $default),
+ navbar-fg: rgba($black, 0.6),
+ navbar-hl: $black,
+ nav-tabs-link-active-border-color: $simplex-border-mix $simplex-border-mix
+ transparent,
+ valuebox-bg-primary: #db766b,
+ valuebox-bg-info: #359ed0,
+ valuebox-bg-success: #59a343,
+ valuebox-bg-warning: #a59212,
+ valuebox-bg-danger: #c48282,
+ ),
+ sketchy: (
+ navbar-fg: $white,
+ ),
+ slate: (),
+ solar: (
+ navbar-bg:
+ if(
+ $default == #b58900,
+ if(variable-exists(dark), $dark, $black),
+ $default
+ ),
+ navbar-hl: $white,
+ ),
+ spacelab: (
+ navbar-bg:
+ if(
+ $default == #446e9b,
+ if(variable-exists(light), $light, #bbb),
+ $default
+ ),
+ navbar-hl: if(variable-exists(link-color), $link-color, $blue),
+ valuebox-bg-primary: #7e97ae,
+ valuebox-bg-info: #3d9dd1,
+ valuebox-bg-success: #62a540,
+ valuebox-bg-warning: #a59212,
+ valuebox-bg-danger: #c97e7e,
+ ),
+ superhero: (
+ navbar-bg:
+ if(
+ $default == #df6919,
+ if(variable-exists(dark), $dark, $black),
+ $default
+ ),
+ navbar-hl: $white,
+ ),
+ united: (
+ navbar-fg: rgba($white, 0.8),
+ navbar-hl: $white,
+ valuebox-bg-primary: #5c9bbc,
+ valuebox-bg-info: #3d9dd1,
+ valuebox-bg-success: #60a545,
+ valuebox-bg-warning: #9a9623,
+ valuebox-bg-danger: #c48282,
+ ),
+ vapor: (
+ navbar-fg: rgba($white, 0.8),
+ navbar-hl: $white,
+ ),
+ yeti: (),
+ zephyr: (),
+ );
+
+ $val: null;
+ @if ($theme != null) {
+ $theme-vals: quarto-map.get($theme-overrides, $theme);
+ @if ($theme-vals != null) {
+ $val: quarto-map.get($theme-vals, $varname);
+ }
+ }
+
+ @if ($val != null) {
+ @return $val;
+ } @else {
+ @return $default;
+ }
+}
+
+@function theme-navbar-bg($theme, $primary) {
+ $white: rgb(255, 255, 255) !default;
+
+ // These will be defined in bootstrap, but creating values here
+ // That will make this function accessible to callers prior to bootstrap variables
+ // being set
+ $theme-bgs: (
+ litera: $white,
+ cyborg: if(variable-exists(body-bg), $body-bg, #000),
+ );
+
+ $bg: quarto-map.get($theme-bgs, $theme);
+ @if ($bg != null) {
+ @return $bg;
+ } @else {
+ @return if(variable-exists(primary), $primary, #fff);
+ }
+}
+
+@function theme-navbar-fg($theme, $primary) {
+ $white: rgb(255, 255, 255) !default;
+
+ // These will be defined in bootstrap, but creating values here
+ // That will make this function accessible to callers prior to bootstrap variables
+ // being set
+ $theme-fgs: (
+ cerulean: $white,
+ );
+
+ $bg: quarto-map.get($theme-bgs, $theme);
+ @if ($bg != null) {
+ @return $bg;
+ } @else {
+ @return if(variable-exists(primary), $primary, #fff);
+ }
+}
+
+@function repeat-chars($chars, $n) {
+ $final: "";
+ @for $i from 1 through $n {
+ $final: $final + $chars;
+ }
+ @return $final;
+}
+
+@function _linear-channel-value($channel-value) {
+ $normalized-channel-value: quarto-math.div($channel-value, 255);
+ @if $normalized-channel-value < 0.03928 {
+ @return quarto-math.div($normalized-channel-value, 12.92);
+ }
+
+ @return quarto-math.pow(
+ quarto-math.div(($normalized-channel-value + 0.055), 1.055),
+ 2.4
+ );
+}
+
+// Calculate the luminance for a color.
+// See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
+@function luminance($color) {
+ $red: _linear-channel-value(quarto-color.red($color));
+ $green: _linear-channel-value(quarto-color.green($color));
+ $blue: _linear-channel-value(quarto-color.blue($color));
+
+ @return 0.2126 * $red + 0.7152 * $green + 0.0722 * $blue;
+}
+
+// Calculate the contrast ratio between two colors.
+// See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
+@function quarto-contrast($back, $front) {
+ $backLum: luminance($back) + 0.05;
+ $foreLum: luminance($front) + 0.05;
+
+ @return quarto-math.div(
+ quarto-math.max($backLum, $foreLum),
+ quarto-math.min($backLum, $foreLum)
+ );
+}
+
+// Determine whether the color is 'light' or 'dark'.
+@function tone($color) {
+ @if $color == "dark" or $color == "light" {
+ @return $color;
+ }
+
+ $minimumContrast: 3.1;
+
+ $lightContrast: quarto-contrast($color, white);
+ $darkContrast: quarto-contrast($color, rgba(black, 0.87));
+
+ @if ($lightContrast < $minimumContrast) and ($darkContrast > $lightContrast) {
+ @return "light";
+ } @else {
+ @return "dark";
+ }
+}
+
+// Determine whether to use dark or light text on top of given color to meet accessibility standards for contrast.
+// Returns 'dark' if the given color is light and 'light' if the given color is dark.
+@function contrast-tone($color) {
+ @return if(tone($color) == "dark", "light", "dark");
+}
+
+
+// quarto-scss-analysis-annotation { "origin": "'functions' section from user-defined SCSS" }
+
+
+
+// quarto-scss-analysis-annotation { "origin": "Defaults from user-defined SCSS" }
+
+$h2-font-size: 1.6rem !default;
+$headings-font-weight: 500 !default;
+$font-size-base: 1.1rem !default;
+
+
+/* TODO: Customize html appearance by setting SCSS variables */
+/* See https://quarto.org/docs/output-formats/html-themes.html#theme-options */
+
+$h2-font-size: 1.6rem !default;
+$headings-font-weight: 500 !default;
+$font-size-base: 1.1rem !default;
+
+
+// Heading font size customization
+$h1-font-size: 2rem !default;
+$h2-font-size: 1.65rem !default;
+$h3-font-size: 1.45rem !default;
+$h4-font-size: 1.25rem !default;
+$h5-font-size: 1.1rem !default;
+
+$kbd-padding-y: 0.4rem !default;
+$kbd-padding-x: 0.4rem !default;
+
+// Speed up the default transition for the navbar
+$transition-collapse: height 0.2s ease !default;
+
+// Adjust the base font size up a little
+$font-size-root: 17px !default;
+
+// Disable smooth scrolling
+$enable-smooth-scroll: false !default;
+
+// quarto-scss-analysis-annotation { "origin": "superhero (builtin theme)" }
+
+$theme: "superhero" !default;
+
+//
+// Color system
+//
+
+$white: #fff !default;
+$gray-100: #ebebeb !default;
+$gray-200: #dee2e6 !default;
+$gray-300: #ced4da !default;
+$gray-400: #adb5bd !default;
+$gray-500: #868e96 !default;
+$gray-600: #4e5d6c !default;
+$gray-700: #495057 !default;
+$gray-800: #343a40 !default;
+$gray-900: #212529 !default;
+$black: #000 !default;
+
+$blue: #4c9be8 !default;
+$indigo: #6610f2 !default;
+$purple: #6f42c1 !default;
+$pink: #e83e8c !default;
+$red: #d9534f !default;
+$orange: #df6919 !default;
+$yellow: #ffc107 !default;
+$green: #5cb85c !default;
+$teal: #20c997 !default;
+$cyan: #5bc0de !default;
+
+ // Body
+$body-bg: #0f2537 !default;
+$body-color: $gray-100 !default;
+
+@function body-mix($weight) {
+ @return mix($body-bg, $body-color, $weight);
+}
+
+$contrast-bg: color-contrast($body-bg) !default;
+$contrast-fg: color-contrast($contrast-bg) !default;
+
+$primary: $orange !default;
+$secondary: body-mix(80%) !default;
+$success: $green !default;
+$info: $cyan !default;
+$warning: $yellow !default;
+$danger: $red !default;
+$light: body-mix(48%) !default;
+$dark: body-mix(80%) !default;
+
+$min-contrast-ratio: 1.6 !default;
+
+// Components
+
+$border-radius: 0 !default;
+$border-radius-lg: 0 !default;
+$border-radius-sm: 0 !default;
+
+// Fonts
+
+// stylelint-disable-next-line value-keyword-case
+$font-family-sans-serif: Lato, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;
+
+$text-muted: rgba($contrast-bg, .4) !default;
+
+// Tables
+
+$table-accent-bg: rgba($contrast-bg, .05) !default;
+$table-hover-bg: rgba($contrast-bg, .075) !default;
+$table-border-color: rgba($contrast-fg, .15) !default;
+$table-head-bg: $light !default;
+$table-dark-bg: $light !default;
+$table-dark-border-color: body-mix(80%) !default;
+$table-dark-color: $body-bg !default;
+
+$table-bg-scale: 0% !default;
+
+// Forms
+
+$input-bg: $contrast-bg !default;
+$input-disabled-color: body-mix(80%) !default;
+$input-disabled-bg: $body-color !default;
+
+$input-color: $gray-900 !default;
+$input-border-color: transparent !default;
+$input-border-width: 0 !default;
+
+$input-placeholder-color: $gray-500 !default;
+
+$input-group-addon-color: $body-color !default;
+$input-group-addon-bg: body-mix(80%) !default;
+
+$form-select-disabled-bg: $input-disabled-bg !default;
+$form-select-disabled-color: $input-disabled-color !default;
+
+$form-check-input-bg: $contrast-bg !default;
+$form-check-input-border: none !default;
+
+$form-file-button-color: $input-group-addon-color !default;
+$form-file-button-bg: $input-group-addon-bg !default;
+$form-file-button-hover-bg: darken($form-file-button-bg, 5%) !default;
+
+$form-floating-label-opacity: 1 !default;
+
+// Dropdowns
+
+$dropdown-bg: body-mix(80%) !default;
+$dropdown-divider-bg: rgba($contrast-fg, .15) !default;
+$dropdown-link-color: $body-color !default;
+$dropdown-link-hover-color: $dropdown-link-color !default;
+$dropdown-link-hover-bg: $table-hover-bg !default;
+
+// Navs
+
+$nav-link-disabled-color: rgba(255, 255, 255, .4) !default;
+$nav-tabs-border-color: body-mix(80%) !default;
+$nav-tabs-link-active-color: $body-color !default;
+$nav-tabs-link-active-border-color: body-mix(80%) !default;
+
+// Navbar
+
+
+// Pagination
+
+$pagination-color: $contrast-bg !default;
+$pagination-bg: body-mix(80%) !default;
+$pagination-border-color: transparent !default;
+$pagination-hover-color: $contrast-bg !default;
+$pagination-hover-bg: $nav-link-disabled-color !default;
+$pagination-hover-border-color: $pagination-border-color !default;
+$pagination-disabled-color: $nav-link-disabled-color !default;
+$pagination-disabled-bg: $pagination-bg !default;
+$pagination-disabled-border-color: $pagination-border-color !default;
+
+// Cards
+
+$card-cap-bg: $table-hover-bg !default;
+$card-bg: body-mix(80%) !default;
+$card-inner-border-radius: 0 !default;
+
+// Accordion
+
+$accordion-bg: $card-bg !default;
+$accordion-border-width: 0 !default;
+$accordion-button-bg: $card-cap-bg !default;
+$accordion-button-active-bg: $primary !default;
+$accordion-button-active-color: $body-color !default;
+
+
+// Popovers
+
+$popover-bg: body-mix(80%) !default;
+$popover-header-bg: $table-hover-bg !default;
+
+// Toasts
+
+$toast-background-color: body-mix(80%) !default;
+$toast-border-color: rgba(0, 0, 0, .2) !default;
+$toast-header-color: $body-color !default;
+$toast-header-background-color: $toast-background-color !default;
+$toast-header-border-color: $toast-border-color !default;
+
+// Modals
+
+$modal-content-bg: body-mix(80%) !default;
+$modal-header-border-color: rgba(0, 0, 0, .2) !default;
+
+// Progress bars
+
+$progress-bg: body-mix(80%) !default;
+
+// List group
+
+$list-group-color: $contrast-bg !default;
+$list-group-bg: body-mix(80%) !default;
+$list-group-border-color: transparent !default;
+$list-group-hover-bg: $nav-link-disabled-color !default;
+$list-group-disabled-color: $nav-link-disabled-color !default;
+$list-group-action-color: $contrast-bg !default;
+$list-group-action-hover-color: $contrast-bg !default;
+
+// Breadcrumbs
+
+$breadcrumb-padding-y: .375rem !default;
+$breadcrumb-padding-x: .75rem !default;
+$breadcrumb-bg: body-mix(80%) !default;
+$breadcrumb-divider-color: $body-color !default;
+$breadcrumb-active-color: $body-color !default;
+
+// Close
+
+$btn-close-color: $contrast-bg !default;
+$btn-close-opacity: .5 !default;
+$btn-close-hover-opacity: 1 !default;
+
+// Code
+
+$pre-color: inherit !default;
+
+
+
+/*-- scss: functions --*/
+
+@function bannerColor() {
+ @if $title-banner-color {
+ @return $title-banner-color;
+ } @else {
+ @if variable-exists(navbar-fg) {
+ @return $navbar-fg;
+ } @else {
+ @return $body-bg;
+ }
+ }
+}
+
+@function bannerDim() {
+ @return theme-fade(bannerColor(), bannerBg(), 20%);
+}
+
+@function bannerBg() {
+ @if $title-banner-bg {
+ @return $title-banner-bg;
+ } @else {
+ // figure out default background, navbar of body color
+ @if variable-exists(navbar-bg) {
+ @return $navbar-bg;
+ } @else {
+ @return $body-color;
+ }
+ }
+}
+
+/*-- scss:variables --*/
+$title-banner-color: null !default;
+$title-banner-bg: null !default;
+$title-banner-image: null !default;
+
+
+$btn-code-copy-color: #f8f8f2 !default;
+$btn-code-copy-color-active: #ffa07a !default;
+
+// quarto-scss-analysis-annotation { "origin": "Defaults from Quarto's SCSS" }
+
+$code-copy-selector: "pre.sourceCode:hover > " !default;
+$code-white-space: pre !default;
+$tbl-cap-location: top !default;
+$sidebar-border: false !default;
+$sidebar-bg: if(variable-exists(body-bg), $body-bg, #fff) !default;
+// Default the theme name
+$theme-name: if(variable-exists(theme), $theme, "");
+
+// Colors that must be defined
+$blue: #0d6efd !default;
+$primary: $blue !default;
+$white: #ffffff !default;
+$gray-200: #e9ecef !default;
+$gray-100: #f8f9fa !default;
+$gray-900: #212529 !default;
+// Pending SCSS change until Charles clears it with us
+// $link-color: theme-override-value($theme-name, "link-color", $primary) !default;
+//
+$link-color: $primary !default;
+$link-color: if(
+ $link-color == $blue,
+ theme-override-value($theme-name, "link-color", $link-color),
+ $link-color
+);
+$link-color-bg: transparent !default;
+
+/* Code Block Formatting */
+// Code Block Border Treatment
+$code-block-border-left: false !default;
+$code-block-border-left-style: solid !default;
+$code-block-border-left-size: 3px !default;
+$code-block-padding-left: 0.6em !default;
+
+// Code Block Background Treatment
+// $code-block-bg, $code-block-bg-padding, $code-block-bg-alpha
+$code-block-bg: true !default;
+$code-block-bg-padding: 0.4em !default;
+$code-block-bg-alpha: -0.35 !default;
+
+// Controls when the code block will switch to a dark
+// version of a theme
+$code-block-theme-dark-threshhold: 40% !default;
+
+/* Inline Code Formatting */
+// $code-bg, $code-color, $code-padding
+$code-color: #7d12ba !default;
+
+// Set a default body emphasis color
+$code-bg: $gray-100 !default;
+
+// toc variables
+$toc-color: $link-color !default;
+$toc-font-size: 0.875rem !default;
+$toc-active-border: $toc-color !default;
+$toc-inactive-border: $gray-200 !default;
+
+$toc-tools-font-size: 0.8rem !default;
+
+/* Callout customization */
+// Formatting
+$callout-border-width: 5px !default;
+$callout-border-scale: 0% !default;
+$callout-icon-scale: 10% !default;
+$callout-margin-top: 1.25rem !default;
+$callout-margin-bottom: 1.25rem !default;
+
+// Navbar
+$navbar-default: if(
+ variable-exists(theme),
+ if(variable-exists(primary), $primary, #517699),
+ #517699
+);
+
+// If the user provides a navbar-bg, we ned to ignore the
+// theme overide and just recalculate a good value
+$navbar-hl-override: if(
+ variable-exists(navbar-bg) and variable-exists(link-color),
+ theme-contrast($link-color, $navbar-bg),
+ false
+);
+$navbar-bg: theme-override-value(
+ $theme-name,
+ "navbar-bg",
+ $navbar-default
+) !default;
+
+$btn-bg: if(variable-exists(secondary), $secondary, #6c757d) !default;
+$btn-fg: theme-contrast($btn-bg, $btn-bg) !default;
+
+$body-contrast-bg: if(variable-exists(body-bg), $body-bg, $white);
+$body-contrast-color: if(variable-exists(body-color), $body-color, $gray-900);
+$navbar-fg: if(
+ $navbar-bg == transparent,
+ theme-override-value(
+ $theme-name,
+ "navbar-fg",
+ theme-contrast($body-contrast-color, $body-contrast-bg)
+ ),
+ theme-override-value(
+ $theme-name,
+ "navbar-fg",
+ theme-contrast($navbar-bg, $navbar-bg)
+ )
+) !default;
+
+$navbar-hl: if(
+ $navbar-hl-override != false,
+ $navbar-hl-override,
+ theme-override-value(
+ $theme-name,
+ "navbar-hl",
+ if(
+ variable-exists(link-color),
+ theme-contrast($link-color, $navbar-bg),
+ $navbar-fg
+ )
+ )
+) !default;
+$navbar-brand: theme-override-value(
+ $theme-name,
+ "navbar-brand",
+ $navbar-fg
+) !default;
+$navbar-brand-hl: theme-override-value(
+ $theme-name,
+ "navbar-brand-hl",
+ $navbar-hl
+) !default;
+
+$navbar-toggler-icon-bg: url("data:image/svg+xml,") !default;
+$navbar-toggler-border-color: rgba($navbar-fg, 0) !default;
+$navbar-hover-color: rgba($navbar-hl, 0.8) !default;
+$navbar-disabled-color: rgba($navbar-fg, 0.75) !default;
+$navbar-toggler-padding-x: 0 !default;
+$navbar-toggler-padding-y: 0.25 !default;
+
+// We omit the !default here b/c the dark and light variants
+// are not meaningful in our usage of bootstrap. Instead, we will explicitly
+// manage these using the above documented variables
+$navbar-dark-bg: $navbar-bg;
+$navbar-dark-color: $navbar-fg;
+$navbar-dark-hover-color: $navbar-hover-color;
+$navbar-dark-active-color: $navbar-hl;
+$navbar-dark-disabled-color: $navbar-disabled-color;
+$navbar-dark-toggler-icon-bg: $navbar-toggler-icon-bg;
+$navbar-dark-toggler-border-color: $navbar-toggler-border-color;
+
+$navbar-light-bg: $navbar-bg;
+$navbar-light-color: $navbar-fg;
+$navbar-light-hover-color: $navbar-hover-color;
+$navbar-light-active-color: $navbar-hl;
+$navbar-light-disabled-color: $navbar-disabled-color;
+$navbar-light-toggler-icon-bg: $navbar-toggler-icon-bg;
+$navbar-light-toggler-border-color: $navbar-toggler-border-color;
+
+$navbar-light-brand-color: $navbar-brand;
+$navbar-light-brand-hover-color: $navbar-brand-hl;
+$navbar-dark-brand-color: $navbar-brand;
+$navbar-dark-brand-hover-color: $navbar-brand-hl;
+
+// Sidebar coloring
+$sidebar-bg: if(variable-exists(light), $light, #fff) !default;
+$sidebar-fg: null !default;
+@if $sidebar-bg == transparent {
+ $sidebar-fg: theme-contrast($body-contrast-color, $body-contrast-bg) !default;
+} @else {
+ $sidebar-fg: theme-contrast($sidebar-bg, $sidebar-bg) !default;
+}
+$sidebar-hl: null;
+$sidebar-font-size: 0.925rem !default;
+$sidebar-font-size-section: 0.875rem !default;
+$sidebar-font-size-collapse: 1rem !default;
+$sidebar-font-size-section-collapse: 1.1rem !default;
+$sidebar-border: false !default;
+
+// Title block variables
+$title-block-color: $body-contrast-color !default;
+$title-block-contast-color: $body-contrast-bg !default;
+$title-block-padding-top: 2.5em !default;
+
+// Footer coloring
+$footer-bg: if(variable-exists(body-bg), $body-bg, #fff) !default;
+$footer-fg: theme-contrast($footer-bg, $footer-bg, "AA") !default;
+$footer-font-size: 0.825em !default;
+$footer-left-font-size: $footer-font-size !default;
+$footer-center-font-size: $footer-font-size !default;
+$footer-right-font-size: $footer-font-size !default;
+
+// Disable default grid system and switch to CSS grid
+$enable-grid-classes: false;
+$enable-cssgrid: true;
+
+$zindex-pagelayout: 998;
+
+$popover-bg: if(variable-exists(body-bg), $body-bg, null) !default;
+$input-bg: if(variable-exists(body-bg), $body-bg, null) !default;
+
+// Note that 'default' is intentionally omitted from this
+// because we're using the default value if one is defined at this
+// point (the if variable exists check in the default).
+// This is a change to override the input border color for
+// darkly, which sets the border color to the body color for
+// whatever reason.
+$input-border-color: theme-override-value(
+ $theme-name,
+ "input-border-color",
+ if(variable-exists(input-border-color), $input-border-color, null)
+);
+
+// Same as above (default is respected if there is not override
+// so the `!default` keyword is omitted). Some themes don't provide
+// active tab border colors and they customize the main border
+// color which results in the tabs looking slightly weird since the
+// colors may not match (for example, simplex).
+$nav-tabs-link-active-border-color: theme-override-value(
+ $theme-name,
+ "nav-tabs-link-active-border-color",
+ if(
+ variable-exists(nav-tabs-link-active-border-color),
+ $nav-tabs-link-active-border-color,
+ null
+ )
+);
+
+/* GRID VARIABLES */
+// The left hand sidebar
+$grid-sidebar-width: 250px !default;
+// The main body
+$grid-body-width: 800px !default;
+// The right hand margin bar
+$grid-margin-width: 250px !default;
+// The gutter that appears between the above columns
+$grid-column-gutter-width: 1.5em !default;
+
+/* CODE ANNOTATION COLORS */
+$code-annotation-higlight-color: #aaaaaa44 !default;
+$code-annotation-higlight-bg: #aaaaaa22 !default;
+
+$breadcrumb-divider: quote(">") !default;
+
+// table variable overrides
+$table-group-separator-color: mix(
+ if(variable-exists(body-color), $body-color, $gray-900),
+ $body-contrast-bg,
+ 50%
+) !default;
+$table-group-separator-color-lighter: mix(
+ if(variable-exists(body-color), $body-color, $gray-900),
+ $body-contrast-bg,
+ 20%
+) !default;
+
+$bootstrap-version: 5;
+
+$h1h2h3-font-weight: 600 !default;
+
+// variables required by _brand.yml
+
+// these variables need to have been defined here already
+// and are repeated in the framework's own _variables.scss
+// This will require us to monitor framework changes
+// to avoid drift
+$font-weight-base: 400 !default;
+$small-font-size: 0.875em !default;
+$code-font-size: $small-font-size !default;
+$font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas,
+ "Liberation Mono", "Courier New", monospace !default;
+
+$font-family-monospace-block: $font-family-monospace !default;
+$font-family-monospace-inline: $font-family-monospace !default;
+$font-weight-monospace: $font-weight-base !default;
+$font-weight-monospace-block: $font-weight-monospace !default;
+$font-weight-monospace-inline: $font-weight-monospace !default;
+$code-block-font-size: $code-font-size !default;
+$code-inline-font-size: $code-font-size !default;
+$link-weight: $font-weight-base !default;
+$link-decoration: null !default;
+
+// border colors
+$border-color: mix(
+ if(variable-exists(body-color), $body-color, #fff),
+ $body-contrast-bg,
+ 30%
+) !default;
+$table-border-color: $border-color !default;
+
+// code block colors
+$btn-code-copy-color: if(
+ variable-exists(text-muted),
+ $text-muted,
+ if(variable-exists(body-color), $body-color, $gray-900)
+) !default;
+
+$btn-code-copy-color-active: if(
+ variable-exists(link-color),
+ $link-color,
+ #0d6efd
+) !default;
+
+
+
+
+
+
+
+
+$dashboard-card-toolbar-top-margin: 6px !default;
+
+
+$quarto-navbar-search-input-width: 180px !default;
+$quarto-sidebar-search-input-width: 100% !default;
+$quarto-search-results-width: 400px !default;
+
+$quarto-search-collapse-icon-size: 26px !default;
+
+
+$content-padding-top: 14px !default;
+$sidebar-glass-bg: #66666666 !default;
+$sidebar-anim-duration: 0.15s !default;
+
+$navbar-toggle-position: left !default;
+
+$navbar-toggler-order: if($navbar-toggle-position == "left", 1, 4) !default;
+$navbar-title-order: if($navbar-toggle-position == "left", 2, 1) !default;
+$navbar-search-order: if($navbar-toggle-position == "left", 4, 3) !default;
+$navbar-tools-order: if($navbar-toggle-position == "left", 3, 2) !default;
+$navbar-menu-order: if($navbar-toggle-position == "left", 20, 20) !default;
+
+
+
+
+
+
+// quarto-scss-analysis-annotation { "origin": "Defaults from the format SCSS" }
+
+// Variables
+//
+// Variables should follow the `$component-state-property-size` formula for
+// consistent naming. Ex: $nav-link-disabled-color and $modal-content-box-shadow-xs.
+
+// Color system
+
+// scss-docs-start gray-color-variables
+$white: #fff !default;
+$gray-100: #f8f9fa !default;
+$gray-200: #e9ecef !default;
+$gray-300: #dee2e6 !default;
+$gray-400: #ced4da !default;
+$gray-500: #adb5bd !default;
+$gray-600: #6c757d !default;
+$gray-700: #495057 !default;
+$gray-800: #343a40 !default;
+$gray-900: #212529 !default;
+$black: #000 !default;
+// scss-docs-end gray-color-variables
+
+// fusv-disable
+// scss-docs-start gray-colors-map
+$grays: (
+ "100": $gray-100,
+ "200": $gray-200,
+ "300": $gray-300,
+ "400": $gray-400,
+ "500": $gray-500,
+ "600": $gray-600,
+ "700": $gray-700,
+ "800": $gray-800,
+ "900": $gray-900
+) !default;
+// scss-docs-end gray-colors-map
+// fusv-enable
+
+// scss-docs-start color-variables
+$blue: #0d6efd !default;
+$indigo: #6610f2 !default;
+$purple: #6f42c1 !default;
+$pink: #d63384 !default;
+$red: #dc3545 !default;
+$orange: #fd7e14 !default;
+$yellow: #ffc107 !default;
+$green: #198754 !default;
+$teal: #20c997 !default;
+$cyan: #0dcaf0 !default;
+// scss-docs-end color-variables
+
+// scss-docs-start colors-map
+$colors: (
+ "blue": $blue,
+ "indigo": $indigo,
+ "purple": $purple,
+ "pink": $pink,
+ "red": $red,
+ "orange": $orange,
+ "yellow": $yellow,
+ "green": $green,
+ "teal": $teal,
+ "cyan": $cyan,
+ "black": $black,
+ "white": $white,
+ "gray": $gray-600,
+ "gray-dark": $gray-800
+) !default;
+// scss-docs-end colors-map
+
+// The contrast ratio to reach against white, to determine if color changes from "light" to "dark". Acceptable values for WCAG 2.0 are 3, 4.5 and 7.
+// See https://www.w3.org/TR/WCAG20/#visual-audio-contrast-contrast
+$min-contrast-ratio: 4.5 !default;
+
+// Customize the light and dark text colors for use in our color contrast function.
+$color-contrast-dark: $black !default;
+$color-contrast-light: $white !default;
+
+// fusv-disable
+$blue-100: tint-color($blue, 80%) !default;
+$blue-200: tint-color($blue, 60%) !default;
+$blue-300: tint-color($blue, 40%) !default;
+$blue-400: tint-color($blue, 20%) !default;
+$blue-500: $blue !default;
+$blue-600: shade-color($blue, 20%) !default;
+$blue-700: shade-color($blue, 40%) !default;
+$blue-800: shade-color($blue, 60%) !default;
+$blue-900: shade-color($blue, 80%) !default;
+
+$indigo-100: tint-color($indigo, 80%) !default;
+$indigo-200: tint-color($indigo, 60%) !default;
+$indigo-300: tint-color($indigo, 40%) !default;
+$indigo-400: tint-color($indigo, 20%) !default;
+$indigo-500: $indigo !default;
+$indigo-600: shade-color($indigo, 20%) !default;
+$indigo-700: shade-color($indigo, 40%) !default;
+$indigo-800: shade-color($indigo, 60%) !default;
+$indigo-900: shade-color($indigo, 80%) !default;
+
+$purple-100: tint-color($purple, 80%) !default;
+$purple-200: tint-color($purple, 60%) !default;
+$purple-300: tint-color($purple, 40%) !default;
+$purple-400: tint-color($purple, 20%) !default;
+$purple-500: $purple !default;
+$purple-600: shade-color($purple, 20%) !default;
+$purple-700: shade-color($purple, 40%) !default;
+$purple-800: shade-color($purple, 60%) !default;
+$purple-900: shade-color($purple, 80%) !default;
+
+$pink-100: tint-color($pink, 80%) !default;
+$pink-200: tint-color($pink, 60%) !default;
+$pink-300: tint-color($pink, 40%) !default;
+$pink-400: tint-color($pink, 20%) !default;
+$pink-500: $pink !default;
+$pink-600: shade-color($pink, 20%) !default;
+$pink-700: shade-color($pink, 40%) !default;
+$pink-800: shade-color($pink, 60%) !default;
+$pink-900: shade-color($pink, 80%) !default;
+
+$red-100: tint-color($red, 80%) !default;
+$red-200: tint-color($red, 60%) !default;
+$red-300: tint-color($red, 40%) !default;
+$red-400: tint-color($red, 20%) !default;
+$red-500: $red !default;
+$red-600: shade-color($red, 20%) !default;
+$red-700: shade-color($red, 40%) !default;
+$red-800: shade-color($red, 60%) !default;
+$red-900: shade-color($red, 80%) !default;
+
+$orange-100: tint-color($orange, 80%) !default;
+$orange-200: tint-color($orange, 60%) !default;
+$orange-300: tint-color($orange, 40%) !default;
+$orange-400: tint-color($orange, 20%) !default;
+$orange-500: $orange !default;
+$orange-600: shade-color($orange, 20%) !default;
+$orange-700: shade-color($orange, 40%) !default;
+$orange-800: shade-color($orange, 60%) !default;
+$orange-900: shade-color($orange, 80%) !default;
+
+$yellow-100: tint-color($yellow, 80%) !default;
+$yellow-200: tint-color($yellow, 60%) !default;
+$yellow-300: tint-color($yellow, 40%) !default;
+$yellow-400: tint-color($yellow, 20%) !default;
+$yellow-500: $yellow !default;
+$yellow-600: shade-color($yellow, 20%) !default;
+$yellow-700: shade-color($yellow, 40%) !default;
+$yellow-800: shade-color($yellow, 60%) !default;
+$yellow-900: shade-color($yellow, 80%) !default;
+
+$green-100: tint-color($green, 80%) !default;
+$green-200: tint-color($green, 60%) !default;
+$green-300: tint-color($green, 40%) !default;
+$green-400: tint-color($green, 20%) !default;
+$green-500: $green !default;
+$green-600: shade-color($green, 20%) !default;
+$green-700: shade-color($green, 40%) !default;
+$green-800: shade-color($green, 60%) !default;
+$green-900: shade-color($green, 80%) !default;
+
+$teal-100: tint-color($teal, 80%) !default;
+$teal-200: tint-color($teal, 60%) !default;
+$teal-300: tint-color($teal, 40%) !default;
+$teal-400: tint-color($teal, 20%) !default;
+$teal-500: $teal !default;
+$teal-600: shade-color($teal, 20%) !default;
+$teal-700: shade-color($teal, 40%) !default;
+$teal-800: shade-color($teal, 60%) !default;
+$teal-900: shade-color($teal, 80%) !default;
+
+$cyan-100: tint-color($cyan, 80%) !default;
+$cyan-200: tint-color($cyan, 60%) !default;
+$cyan-300: tint-color($cyan, 40%) !default;
+$cyan-400: tint-color($cyan, 20%) !default;
+$cyan-500: $cyan !default;
+$cyan-600: shade-color($cyan, 20%) !default;
+$cyan-700: shade-color($cyan, 40%) !default;
+$cyan-800: shade-color($cyan, 60%) !default;
+$cyan-900: shade-color($cyan, 80%) !default;
+
+$blues: (
+ "blue-100": $blue-100,
+ "blue-200": $blue-200,
+ "blue-300": $blue-300,
+ "blue-400": $blue-400,
+ "blue-500": $blue-500,
+ "blue-600": $blue-600,
+ "blue-700": $blue-700,
+ "blue-800": $blue-800,
+ "blue-900": $blue-900
+) !default;
+
+$indigos: (
+ "indigo-100": $indigo-100,
+ "indigo-200": $indigo-200,
+ "indigo-300": $indigo-300,
+ "indigo-400": $indigo-400,
+ "indigo-500": $indigo-500,
+ "indigo-600": $indigo-600,
+ "indigo-700": $indigo-700,
+ "indigo-800": $indigo-800,
+ "indigo-900": $indigo-900
+) !default;
+
+$purples: (
+ "purple-100": $purple-100,
+ "purple-200": $purple-200,
+ "purple-300": $purple-300,
+ "purple-400": $purple-400,
+ "purple-500": $purple-500,
+ "purple-600": $purple-600,
+ "purple-700": $purple-700,
+ "purple-800": $purple-800,
+ "purple-900": $purple-900
+) !default;
+
+$pinks: (
+ "pink-100": $pink-100,
+ "pink-200": $pink-200,
+ "pink-300": $pink-300,
+ "pink-400": $pink-400,
+ "pink-500": $pink-500,
+ "pink-600": $pink-600,
+ "pink-700": $pink-700,
+ "pink-800": $pink-800,
+ "pink-900": $pink-900
+) !default;
+
+$reds: (
+ "red-100": $red-100,
+ "red-200": $red-200,
+ "red-300": $red-300,
+ "red-400": $red-400,
+ "red-500": $red-500,
+ "red-600": $red-600,
+ "red-700": $red-700,
+ "red-800": $red-800,
+ "red-900": $red-900
+) !default;
+
+$oranges: (
+ "orange-100": $orange-100,
+ "orange-200": $orange-200,
+ "orange-300": $orange-300,
+ "orange-400": $orange-400,
+ "orange-500": $orange-500,
+ "orange-600": $orange-600,
+ "orange-700": $orange-700,
+ "orange-800": $orange-800,
+ "orange-900": $orange-900
+) !default;
+
+$yellows: (
+ "yellow-100": $yellow-100,
+ "yellow-200": $yellow-200,
+ "yellow-300": $yellow-300,
+ "yellow-400": $yellow-400,
+ "yellow-500": $yellow-500,
+ "yellow-600": $yellow-600,
+ "yellow-700": $yellow-700,
+ "yellow-800": $yellow-800,
+ "yellow-900": $yellow-900
+) !default;
+
+$greens: (
+ "green-100": $green-100,
+ "green-200": $green-200,
+ "green-300": $green-300,
+ "green-400": $green-400,
+ "green-500": $green-500,
+ "green-600": $green-600,
+ "green-700": $green-700,
+ "green-800": $green-800,
+ "green-900": $green-900
+) !default;
+
+$teals: (
+ "teal-100": $teal-100,
+ "teal-200": $teal-200,
+ "teal-300": $teal-300,
+ "teal-400": $teal-400,
+ "teal-500": $teal-500,
+ "teal-600": $teal-600,
+ "teal-700": $teal-700,
+ "teal-800": $teal-800,
+ "teal-900": $teal-900
+) !default;
+
+$cyans: (
+ "cyan-100": $cyan-100,
+ "cyan-200": $cyan-200,
+ "cyan-300": $cyan-300,
+ "cyan-400": $cyan-400,
+ "cyan-500": $cyan-500,
+ "cyan-600": $cyan-600,
+ "cyan-700": $cyan-700,
+ "cyan-800": $cyan-800,
+ "cyan-900": $cyan-900
+) !default;
+// fusv-enable
+
+// Semantically, $secondary is closest to BS3's 'default' theme color;
+// so use that if specified. Otherwise, use a light instead of dark gray
+// default color for $default since that's closer to bootstrap 3's default
+$default: if(variable-exists("secondary"), $secondary, $gray-300) !default;
+
+// scss-docs-start theme-color-variables
+$primary: $blue !default;
+$secondary: $gray-600 !default;
+$success: $green !default;
+$info: $cyan !default;
+$warning: $yellow !default;
+$danger: $red !default;
+$light: $gray-100 !default;
+$dark: $gray-900 !default;
+// scss-docs-end theme-color-variables
+
+// scss-docs-start theme-colors-map
+$theme-colors: (
+ // default needs to be 1st so that .btn-default comes before .btn-primary
+ // & therefore has lower priority.
+ "default": $default,
+ "primary": $primary,
+ "secondary": $secondary,
+ "success": $success,
+ "info": $info,
+ "warning": $warning,
+ "danger": $danger,
+ "light": $light,
+ "dark": $dark
+) !default;
+// scss-docs-end theme-colors-map
+
+// scss-docs-start theme-text-variables
+$primary-text-emphasis: shade-color($primary, 60%) !default;
+$secondary-text-emphasis: shade-color($secondary, 60%) !default;
+$success-text-emphasis: shade-color($success, 60%) !default;
+$info-text-emphasis: shade-color($info, 60%) !default;
+$warning-text-emphasis: shade-color($warning, 60%) !default;
+$danger-text-emphasis: shade-color($danger, 60%) !default;
+$light-text-emphasis: $gray-700 !default;
+$dark-text-emphasis: $gray-700 !default;
+// scss-docs-end theme-text-variables
+
+// scss-docs-start theme-bg-subtle-variables
+$primary-bg-subtle: tint-color($primary, 80%) !default;
+$secondary-bg-subtle: tint-color($secondary, 80%) !default;
+$success-bg-subtle: tint-color($success, 80%) !default;
+$info-bg-subtle: tint-color($info, 80%) !default;
+$warning-bg-subtle: tint-color($warning, 80%) !default;
+$danger-bg-subtle: tint-color($danger, 80%) !default;
+$light-bg-subtle: mix($gray-100, $white) !default;
+$dark-bg-subtle: $gray-400 !default;
+// scss-docs-end theme-bg-subtle-variables
+
+// scss-docs-start theme-border-subtle-variables
+$primary-border-subtle: tint-color($primary, 60%) !default;
+$secondary-border-subtle: tint-color($secondary, 60%) !default;
+$success-border-subtle: tint-color($success, 60%) !default;
+$info-border-subtle: tint-color($info, 60%) !default;
+$warning-border-subtle: tint-color($warning, 60%) !default;
+$danger-border-subtle: tint-color($danger, 60%) !default;
+$light-border-subtle: $gray-200 !default;
+$dark-border-subtle: $gray-500 !default;
+// scss-docs-end theme-border-subtle-variables
+
+// Characters which are escaped by the escape-svg function
+$escaped-characters: (
+ ("<", "%3c"),
+ (">", "%3e"),
+ ("#", "%23"),
+ ("(", "%28"),
+ (")", "%29"),
+) !default;
+
+// Options
+//
+// Quickly modify global styling by enabling or disabling optional features.
+
+$enable-caret: true !default;
+$enable-rounded: true !default;
+$enable-shadows: false !default;
+$enable-gradients: false !default;
+$enable-transitions: true !default;
+$enable-reduced-motion: true !default;
+$enable-smooth-scroll: true !default;
+$enable-grid-classes: true !default;
+$enable-container-classes: true !default;
+$enable-cssgrid: false !default;
+$enable-button-pointers: true !default;
+$enable-rfs: true !default;
+$enable-validation-icons: true !default;
+$enable-negative-margins: false !default;
+$enable-deprecation-messages: true !default;
+$enable-important-utilities: true !default;
+
+$enable-dark-mode: true !default;
+$color-mode-type: data !default; // `data` or `media-query`
+
+// Prefix for :root CSS variables
+
+$variable-prefix: bs- !default; // Deprecated in v5.2.0 for the shorter `$prefix`
+$prefix: $variable-prefix !default;
+
+// Gradient
+//
+// The gradient which is added to components if `$enable-gradients` is `true`
+// This gradient is also added to elements with `.bg-gradient`
+// scss-docs-start variable-gradient
+$gradient: linear-gradient(180deg, rgba($white, .15), rgba($white, 0)) !default;
+// scss-docs-end variable-gradient
+
+// Spacing
+//
+// Control the default styling of most Bootstrap elements by modifying these
+// variables. Mostly focused on spacing.
+// You can add more entries to the $spacers map, should you need more variation.
+
+// scss-docs-start spacer-variables-maps
+$spacer: 1rem !default;
+$spacers: (
+ 0: 0,
+ 1: $spacer * .25,
+ 2: $spacer * .5,
+ 3: $spacer,
+ 4: $spacer * 1.5,
+ 5: $spacer * 3,
+) !default;
+// scss-docs-end spacer-variables-maps
+
+// Position
+//
+// Define the edge positioning anchors of the position utilities.
+
+// scss-docs-start position-map
+$position-values: (
+ 0: 0,
+ 50: 50%,
+ 100: 100%
+) !default;
+// scss-docs-end position-map
+
+// Body
+//
+// Settings for the `` element.
+
+$body-text-align: null !default;
+$body-color: $gray-900 !default;
+$body-bg: $white !default;
+
+$body-secondary-color: rgba($body-color, .75) !default;
+$body-secondary-bg: $gray-200 !default;
+
+$body-tertiary-color: rgba($body-color, .5) !default;
+$body-tertiary-bg: $gray-100 !default;
+
+$body-emphasis-color: $black !default;
+
+// Links
+//
+// Style anchor elements.
+
+$link-color: $primary !default;
+$link-decoration: underline !default;
+$link-shade-percentage: 20% !default;
+$link-hover-color: shift-color($link-color, $link-shade-percentage) !default;
+$link-hover-decoration: null !default;
+
+$stretched-link-pseudo-element: after !default;
+$stretched-link-z-index: 1 !default;
+
+// Icon links
+// scss-docs-start icon-link-variables
+$icon-link-gap: .375rem !default;
+$icon-link-underline-offset: .25em !default;
+$icon-link-icon-size: 1em !default;
+$icon-link-icon-transition: .2s ease-in-out transform !default;
+$icon-link-icon-transform: translate3d(.25em, 0, 0) !default;
+// scss-docs-end icon-link-variables
+
+// Paragraphs
+//
+// Style p element.
+
+$paragraph-margin-bottom: 1rem !default;
+
+
+// Grid breakpoints
+//
+// Define the minimum dimensions at which your layout will change,
+// adapting to different screen sizes, for use in media queries.
+
+// scss-docs-start grid-breakpoints
+$grid-breakpoints: (
+ xs: 0,
+ sm: 576px,
+ md: 768px,
+ lg: 992px,
+ xl: 1200px,
+ xxl: 1400px
+) !default;
+// scss-docs-end grid-breakpoints
+
+@include _assert-ascending($grid-breakpoints, "$grid-breakpoints");
+@include _assert-starts-at-zero($grid-breakpoints, "$grid-breakpoints");
+
+
+// Grid containers
+//
+// Define the maximum width of `.container` for different screen sizes.
+
+// scss-docs-start container-max-widths
+$container-max-widths: (
+ sm: 540px,
+ md: 720px,
+ lg: 960px,
+ xl: 1140px,
+ xxl: 1320px
+) !default;
+// scss-docs-end container-max-widths
+
+@include _assert-ascending($container-max-widths, "$container-max-widths");
+
+
+// Grid columns
+//
+// Set the number of columns and specify the width of the gutters.
+
+$grid-columns: 12 !default;
+$grid-gutter-width: 1.5rem !default;
+$grid-row-columns: 6 !default;
+
+// Container padding
+
+$container-padding-x: $grid-gutter-width !default;
+
+
+// Components
+//
+// Define common padding and border radius sizes and more.
+
+// scss-docs-start border-variables
+$border-width: 1px !default;
+$border-widths: (
+ 1: 1px,
+ 2: 2px,
+ 3: 3px,
+ 4: 4px,
+ 5: 5px
+) !default;
+$border-style: solid !default;
+$border-color: $gray-300 !default;
+$border-color-translucent: rgba($black, .175) !default;
+// scss-docs-end border-variables
+
+// scss-docs-start border-radius-variables
+$border-radius: .375rem !default;
+$border-radius-sm: .25rem !default;
+$border-radius-lg: .5rem !default;
+$border-radius-xl: 1rem !default;
+$border-radius-xxl: 2rem !default;
+$border-radius-pill: 50rem !default;
+// scss-docs-end border-radius-variables
+// fusv-disable
+$border-radius-2xl: $border-radius-xxl !default; // Deprecated in v5.3.0
+// fusv-enable
+
+// scss-docs-start box-shadow-variables
+$box-shadow: 0 .5rem 1rem rgba($black, .15) !default;
+$box-shadow-sm: 0 .125rem .25rem rgba($black, .075) !default;
+$box-shadow-lg: 0 1rem 3rem rgba($black, .175) !default;
+$box-shadow-inset: inset 0 1px 2px rgba($black, .075) !default;
+// scss-docs-end box-shadow-variables
+
+$component-active-bg: $primary !default;
+$component-active-color: color-contrast($component-active-bg) !default;
+
+// scss-docs-start focus-ring-variables
+$focus-ring-width: .25rem !default;
+$focus-ring-opacity: .25 !default;
+$focus-ring-color: rgba($primary, $focus-ring-opacity) !default;
+$focus-ring-blur: 0 !default;
+$focus-ring-box-shadow: 0 0 $focus-ring-blur $focus-ring-width $focus-ring-color !default;
+// scss-docs-end focus-ring-variables
+
+// scss-docs-start caret-variables
+$caret-width: .3em !default;
+$caret-vertical-align: $caret-width * .85 !default;
+$caret-spacing: $caret-width * .85 !default;
+// scss-docs-end caret-variables
+
+$transition-base: all .2s ease-in-out !default;
+$transition-fade: opacity .15s linear !default;
+// scss-docs-start collapse-transition
+$transition-collapse: height .35s ease !default;
+$transition-collapse-width: width .35s ease !default;
+// scss-docs-end collapse-transition
+
+// stylelint-disable function-disallowed-list
+// scss-docs-start aspect-ratios
+$aspect-ratios: (
+ "1x1": 100%,
+ "4x3": calc(3 / 4 * 100%),
+ "16x9": calc(9 / 16 * 100%),
+ "21x9": calc(9 / 21 * 100%)
+) !default;
+// scss-docs-end aspect-ratios
+// stylelint-enable function-disallowed-list
+
+// Typography
+//
+// Font, line-height, and color for body text, headings, and more.
+
+// scss-docs-start font-variables
+// stylelint-disable value-keyword-case
+$font-family-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
+$font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default;
+// stylelint-enable value-keyword-case
+$font-family-base: $font-family-sans-serif !default;
+$font-family-code: $font-family-monospace !default;
+
+// $font-size-root affects the value of `rem`, which is used for as well font sizes, paddings, and margins
+// $font-size-base affects the font size of the body text
+$font-size-root: null !default;
+$font-size-base: 1rem !default; // Assumes the browser default, typically `16px`
+$font-size-sm: $font-size-base * .875 !default;
+$font-size-lg: $font-size-base * 1.25 !default;
+
+$font-weight-lighter: lighter !default;
+$font-weight-light: 300 !default;
+$font-weight-normal: 400 !default;
+$font-weight-medium: 500 !default;
+$font-weight-semibold: 600 !default;
+$font-weight-bold: 700 !default;
+$font-weight-bolder: bolder !default;
+
+$font-weight-base: $font-weight-normal !default;
+
+$line-height-base: 1.5 !default;
+$line-height-sm: 1.25 !default;
+$line-height-lg: 2 !default;
+
+$h1-font-size: $font-size-base * 2.5 !default;
+$h2-font-size: $font-size-base * 2 !default;
+$h3-font-size: $font-size-base * 1.75 !default;
+$h4-font-size: $font-size-base * 1.5 !default;
+$h5-font-size: $font-size-base * 1.25 !default;
+$h6-font-size: $font-size-base !default;
+// scss-docs-end font-variables
+
+// scss-docs-start font-sizes
+$font-sizes: (
+ 1: $h1-font-size,
+ 2: $h2-font-size,
+ 3: $h3-font-size,
+ 4: $h4-font-size,
+ 5: $h5-font-size,
+ 6: $h6-font-size
+) !default;
+// scss-docs-end font-sizes
+
+// scss-docs-start headings-variables
+$headings-margin-bottom: $spacer * .5 !default;
+$headings-font-family: null !default;
+$headings-font-style: null !default;
+$headings-font-weight: 500 !default;
+$headings-line-height: 1.2 !default;
+$headings-color: inherit !default;
+// scss-docs-end headings-variables
+
+// scss-docs-start display-headings
+$display-font-sizes: (
+ 1: 5rem,
+ 2: 4.5rem,
+ 3: 4rem,
+ 4: 3.5rem,
+ 5: 3rem,
+ 6: 2.5rem
+) !default;
+
+$display-font-family: null !default;
+$display-font-style: null !default;
+$display-font-weight: 300 !default;
+$display-line-height: $headings-line-height !default;
+// scss-docs-end display-headings
+
+// scss-docs-start type-variables
+$lead-font-size: $font-size-base * 1.25 !default;
+$lead-font-weight: 300 !default;
+
+$small-font-size: .875em !default;
+
+$sub-sup-font-size: .75em !default;
+
+// fusv-disable
+$text-muted: $body-secondary-color !default; // Deprecated in 5.3.0
+// fusv-enable
+
+$initialism-font-size: $small-font-size !default;
+
+$blockquote-margin-y: $spacer !default;
+$blockquote-font-size: $font-size-base * 1.25 !default;
+$blockquote-footer-color: $gray-600 !default;
+$blockquote-footer-font-size: $small-font-size !default;
+$blockquote-border-width: $spacer / 4 !default;
+$blockquote-border-color: $gray-200 !default;
+
+$hr-margin-y: $spacer !default;
+$hr-color: inherit !default;
+
+// fusv-disable
+$hr-bg-color: null !default; // Deprecated in v5.2.0
+$hr-height: null !default; // Deprecated in v5.2.0
+// fusv-enable
+
+$hr-border-color: null !default; // Allows for inherited colors
+$hr-border-width: $border-width !default;
+$hr-opacity: .25 !default;
+
+// scss-docs-start vr-variables
+$vr-border-width: $border-width !default;
+// scss-docs-end vr-variables
+
+$legend-margin-bottom: .5rem !default;
+$legend-font-size: 1.5rem !default;
+$legend-font-weight: null !default;
+
+$dt-font-weight: $font-weight-bold !default;
+
+$list-inline-padding: .5rem !default;
+
+$mark-padding: .1875em !default;
+$mark-bg: $yellow-100 !default;
+// scss-docs-end type-variables
+
+
+// Tables
+//
+// Customizes the `.table` component with basic values, each used across all table variations.
+
+// scss-docs-start table-variables
+$table-cell-padding-y: .5rem !default;
+$table-cell-padding-x: .5rem !default;
+$table-cell-padding-y-sm: .25rem !default;
+$table-cell-padding-x-sm: .25rem !default;
+
+$table-cell-vertical-align: top !default;
+
+$table-color: $body-color !default;
+$table-bg: $body-bg !default;
+$table-accent-bg: transparent !default;
+
+$table-th-font-weight: null !default;
+
+$table-striped-color: $table-color !default;
+$table-striped-bg-factor: .05 !default;
+$table-striped-bg: rgba($black, $table-striped-bg-factor) !default;
+
+$table-active-color: $table-color !default;
+$table-active-bg-factor: .1 !default;
+$table-active-bg: rgba($black, $table-active-bg-factor) !default;
+
+$table-hover-color: $table-color !default;
+$table-hover-bg-factor: .075 !default;
+$table-hover-bg: rgba($black, $table-hover-bg-factor) !default;
+
+$table-border-factor: .1 !default;
+$table-border-width: $border-width !default;
+$table-border-color: $border-color !default;
+
+$table-striped-order: odd !default;
+$table-striped-columns-order: even !default;
+
+$table-group-separator-color: currentcolor !default;
+
+$table-caption-color: $body-secondary-color !default;
+
+$table-bg-scale: -80% !default;
+// scss-docs-end table-variables
+
+// scss-docs-start table-loop
+$table-variants: (
+ "primary": shift-color($primary, $table-bg-scale),
+ "secondary": shift-color($secondary, $table-bg-scale),
+ "success": shift-color($success, $table-bg-scale),
+ "info": shift-color($info, $table-bg-scale),
+ "warning": shift-color($warning, $table-bg-scale),
+ "danger": shift-color($danger, $table-bg-scale),
+ "light": $light,
+ "dark": $dark,
+) !default;
+// scss-docs-end table-loop
+
+
+// Buttons + Forms
+//
+// Shared variables that are reassigned to `$input-` and `$btn-` specific variables.
+
+// scss-docs-start input-btn-variables
+$input-btn-padding-y: .375rem !default;
+$input-btn-padding-x: .75rem !default;
+$input-btn-font-family: null !default;
+$input-btn-font-size: $font-size-base !default;
+$input-btn-line-height: $line-height-base !default;
+
+$input-btn-focus-width: $focus-ring-width !default;
+$input-btn-focus-color-opacity: $focus-ring-opacity !default;
+$input-btn-focus-color: $focus-ring-color !default;
+$input-btn-focus-blur: $focus-ring-blur !default;
+$input-btn-focus-box-shadow: $focus-ring-box-shadow !default;
+
+$input-btn-padding-y-sm: .25rem !default;
+$input-btn-padding-x-sm: .5rem !default;
+$input-btn-font-size-sm: $font-size-sm !default;
+
+$input-btn-padding-y-lg: .5rem !default;
+$input-btn-padding-x-lg: 1rem !default;
+$input-btn-font-size-lg: $font-size-lg !default;
+
+$input-btn-border-width: $border-width !default;
+// scss-docs-end input-btn-variables
+
+
+// Buttons
+//
+// For each of Bootstrap's buttons, define text, background, and border color.
+
+// scss-docs-start btn-variables
+$btn-color: $body-color !default;
+$btn-padding-y: $input-btn-padding-y !default;
+$btn-padding-x: $input-btn-padding-x !default;
+$btn-font-family: $input-btn-font-family !default;
+$btn-font-size: $input-btn-font-size !default;
+$btn-line-height: $input-btn-line-height !default;
+$btn-white-space: null !default; // Set to `nowrap` to prevent text wrapping
+
+$btn-padding-y-sm: $input-btn-padding-y-sm !default;
+$btn-padding-x-sm: $input-btn-padding-x-sm !default;
+$btn-font-size-sm: $input-btn-font-size-sm !default;
+
+$btn-padding-y-lg: $input-btn-padding-y-lg !default;
+$btn-padding-x-lg: $input-btn-padding-x-lg !default;
+$btn-font-size-lg: $input-btn-font-size-lg !default;
+
+$btn-border-width: $input-btn-border-width !default;
+
+$btn-font-weight: $font-weight-normal !default;
+$btn-box-shadow: inset 0 1px 0 rgba($white, .15), 0 1px 1px rgba($black, .075) !default;
+$btn-focus-width: $input-btn-focus-width !default;
+$btn-focus-box-shadow: $input-btn-focus-box-shadow !default;
+$btn-disabled-opacity: .65 !default;
+$btn-active-box-shadow: inset 0 3px 5px rgba($black, .125) !default;
+
+$btn-link-color: $link-color !default;
+$btn-link-hover-color: $link-hover-color !default;
+$btn-link-disabled-color: $gray-600 !default;
+
+// Allows for customizing button radius independently from global border radius
+$btn-border-radius: $border-radius !default;
+$btn-border-radius-sm: $border-radius-sm !default;
+$btn-border-radius-lg: $border-radius-lg !default;
+
+$btn-transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
+
+$btn-hover-bg-shade-amount: 15% !default;
+$btn-hover-bg-tint-amount: 15% !default;
+$btn-hover-border-shade-amount: 20% !default;
+$btn-hover-border-tint-amount: 10% !default;
+$btn-active-bg-shade-amount: 20% !default;
+$btn-active-bg-tint-amount: 20% !default;
+$btn-active-border-shade-amount: 25% !default;
+$btn-active-border-tint-amount: 10% !default;
+// scss-docs-end btn-variables
+
+
+// Forms
+
+// scss-docs-start form-text-variables
+$form-text-margin-top: .25rem !default;
+$form-text-font-size: $small-font-size !default;
+$form-text-font-style: null !default;
+$form-text-font-weight: null !default;
+$form-text-color: $body-secondary-color !default;
+// scss-docs-end form-text-variables
+
+// scss-docs-start form-label-variables
+$form-label-margin-bottom: .5rem !default;
+$form-label-font-size: null !default;
+$form-label-font-style: null !default;
+$form-label-font-weight: null !default;
+$form-label-color: null !default;
+// scss-docs-end form-label-variables
+
+// scss-docs-start form-input-variables
+$input-padding-y: $input-btn-padding-y !default;
+$input-padding-x: $input-btn-padding-x !default;
+$input-font-family: $input-btn-font-family !default;
+$input-font-size: $input-btn-font-size !default;
+$input-font-weight: $font-weight-base !default;
+$input-line-height: $input-btn-line-height !default;
+
+$input-padding-y-sm: $input-btn-padding-y-sm !default;
+$input-padding-x-sm: $input-btn-padding-x-sm !default;
+$input-font-size-sm: $input-btn-font-size-sm !default;
+
+$input-padding-y-lg: $input-btn-padding-y-lg !default;
+$input-padding-x-lg: $input-btn-padding-x-lg !default;
+$input-font-size-lg: $input-btn-font-size-lg !default;
+
+$input-bg: $body-bg !default;
+$input-disabled-color: null !default;
+$input-disabled-bg: $body-secondary-bg !default;
+$input-disabled-border-color: null !default;
+
+$input-color: $body-color !default;
+$input-border-color: $border-color !default;
+$input-border-width: $input-btn-border-width !default;
+$input-box-shadow: $box-shadow-inset !default;
+
+$input-border-radius: $border-radius !default;
+$input-border-radius-sm: $border-radius-sm !default;
+$input-border-radius-lg: $border-radius-lg !default;
+
+$input-focus-bg: $input-bg !default;
+$input-focus-border-color: tint-color($component-active-bg, 50%) !default;
+$input-focus-color: $input-color !default;
+$input-focus-width: $input-btn-focus-width !default;
+$input-focus-box-shadow: $input-btn-focus-box-shadow !default;
+
+$input-placeholder-color: $body-secondary-color !default;
+$input-plaintext-color: $body-color !default;
+
+$input-height-border: calc(#{$input-border-width} * 2) !default; // stylelint-disable-line function-disallowed-list
+
+$input-height-inner: add($input-line-height * 1em, $input-padding-y * 2) !default;
+$input-height-inner-half: add($input-line-height * .5em, $input-padding-y) !default;
+$input-height-inner-quarter: add($input-line-height * .25em, $input-padding-y * .5) !default;
+
+$input-height: add($input-line-height * 1em, add($input-padding-y * 2, $input-height-border, false)) !default;
+$input-height-sm: add($input-line-height * 1em, add($input-padding-y-sm * 2, $input-height-border, false)) !default;
+$input-height-lg: add($input-line-height * 1em, add($input-padding-y-lg * 2, $input-height-border, false)) !default;
+
+$input-transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
+
+$form-color-width: 3rem !default;
+// scss-docs-end form-input-variables
+
+// scss-docs-start form-check-variables
+$form-check-input-width: 1em !default;
+$form-check-min-height: $font-size-base * $line-height-base !default;
+$form-check-padding-start: 0 !default;
+$form-check-margin-bottom: .125rem !default;
+$form-check-label-color: null !default;
+$form-check-label-cursor: pointer !default;
+$form-check-transition: null !default;
+
+$form-check-input-active-filter: brightness(90%) !default;
+
+$form-check-input-bg: $input-bg !default;
+$form-check-input-border: $border-width solid $border-color !default;
+$form-check-input-border-radius: .25em !default;
+$form-check-radio-border-radius: 50% !default;
+$form-check-input-focus-border: $input-focus-border-color !default;
+$form-check-input-focus-box-shadow: $focus-ring-box-shadow !default;
+
+$form-check-input-checked-color: $component-active-color !default;
+$form-check-input-checked-bg-color: $component-active-bg !default;
+$form-check-input-checked-border-color: $form-check-input-checked-bg-color !default;
+$form-check-input-checked-bg-image: url("data:image/svg+xml,") !default;
+$form-check-radio-checked-bg-image: url("data:image/svg+xml,") !default;
+
+$form-check-input-indeterminate-color: $component-active-color !default;
+$form-check-input-indeterminate-bg-color: $component-active-bg !default;
+$form-check-input-indeterminate-border-color: $form-check-input-indeterminate-bg-color !default;
+$form-check-input-indeterminate-bg-image: url("data:image/svg+xml,") !default;
+
+$form-check-input-disabled-opacity: .5 !default;
+$form-check-label-disabled-opacity: $form-check-input-disabled-opacity !default;
+$form-check-btn-check-disabled-opacity: $btn-disabled-opacity !default;
+
+$form-check-inline-margin-end: 1rem !default;
+// scss-docs-end form-check-variables
+
+// scss-docs-start form-switch-variables
+$form-switch-color: rgba($black, .25) !default;
+$form-switch-width: 2em !default;
+$form-switch-padding-start: $form-switch-width + .5em !default;
+$form-switch-bg-image: url("data:image/svg+xml,") !default;
+$form-switch-border-radius: $form-switch-width !default;
+$form-switch-transition: background-position .15s ease-in-out !default;
+
+$form-switch-focus-color: $input-focus-border-color !default;
+$form-switch-focus-bg-image: url("data:image/svg+xml,") !default;
+
+$form-switch-checked-color: $component-active-color !default;
+$form-switch-checked-bg-image: url("data:image/svg+xml,") !default;
+$form-switch-checked-bg-position: right center !default;
+// scss-docs-end form-switch-variables
+
+// scss-docs-start input-group-variables
+$input-group-addon-padding-y: $input-padding-y !default;
+$input-group-addon-padding-x: $input-padding-x !default;
+$input-group-addon-font-weight: $input-font-weight !default;
+$input-group-addon-color: $input-color !default;
+$input-group-addon-bg: $body-tertiary-bg !default;
+$input-group-addon-border-color: $input-border-color !default;
+// scss-docs-end input-group-variables
+
+// scss-docs-start form-select-variables
+$form-select-padding-y: $input-padding-y !default;
+$form-select-padding-x: $input-padding-x !default;
+$form-select-font-family: $input-font-family !default;
+$form-select-font-size: $input-font-size !default;
+$form-select-indicator-padding: $form-select-padding-x * 3 !default; // Extra padding for background-image
+$form-select-font-weight: $input-font-weight !default;
+$form-select-line-height: $input-line-height !default;
+$form-select-color: $input-color !default;
+$form-select-bg: $input-bg !default;
+$form-select-disabled-color: null !default;
+$form-select-disabled-bg: $input-disabled-bg !default;
+$form-select-disabled-border-color: $input-disabled-border-color !default;
+$form-select-bg-position: right $form-select-padding-x center !default;
+$form-select-bg-size: 16px 12px !default; // In pixels because image dimensions
+$form-select-indicator-color: $gray-800 !default;
+$form-select-indicator: url("data:image/svg+xml,") !default;
+
+$form-select-feedback-icon-padding-end: $form-select-padding-x * 2.5 + $form-select-indicator-padding !default;
+$form-select-feedback-icon-position: center right $form-select-indicator-padding !default;
+$form-select-feedback-icon-size: $input-height-inner-half $input-height-inner-half !default;
+
+$form-select-border-width: $input-border-width !default;
+$form-select-border-color: $input-border-color !default;
+$form-select-border-radius: $input-border-radius !default;
+$form-select-box-shadow: $box-shadow-inset !default;
+
+$form-select-focus-border-color: $input-focus-border-color !default;
+$form-select-focus-width: $input-focus-width !default;
+$form-select-focus-box-shadow: 0 0 0 $form-select-focus-width $input-btn-focus-color !default;
+
+$form-select-padding-y-sm: $input-padding-y-sm !default;
+$form-select-padding-x-sm: $input-padding-x-sm !default;
+$form-select-font-size-sm: $input-font-size-sm !default;
+$form-select-border-radius-sm: $input-border-radius-sm !default;
+
+$form-select-padding-y-lg: $input-padding-y-lg !default;
+$form-select-padding-x-lg: $input-padding-x-lg !default;
+$form-select-font-size-lg: $input-font-size-lg !default;
+$form-select-border-radius-lg: $input-border-radius-lg !default;
+
+$form-select-transition: $input-transition !default;
+// scss-docs-end form-select-variables
+
+// scss-docs-start form-range-variables
+$form-range-track-width: 100% !default;
+$form-range-track-height: .5rem !default;
+$form-range-track-cursor: pointer !default;
+$form-range-track-bg: $body-tertiary-bg !default;
+$form-range-track-border-radius: 1rem !default;
+$form-range-track-box-shadow: $box-shadow-inset !default;
+
+$form-range-thumb-width: 1rem !default;
+$form-range-thumb-height: $form-range-thumb-width !default;
+$form-range-thumb-bg: $component-active-bg !default;
+$form-range-thumb-border: 0 !default;
+$form-range-thumb-border-radius: 1rem !default;
+$form-range-thumb-box-shadow: 0 .1rem .25rem rgba($black, .1) !default;
+$form-range-thumb-focus-box-shadow: 0 0 0 1px $body-bg, $input-focus-box-shadow !default;
+$form-range-thumb-focus-box-shadow-width: $input-focus-width !default; // For focus box shadow issue in Edge
+$form-range-thumb-active-bg: tint-color($component-active-bg, 70%) !default;
+$form-range-thumb-disabled-bg: $body-secondary-color !default;
+$form-range-thumb-transition: background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
+// scss-docs-end form-range-variables
+
+// scss-docs-start form-file-variables
+$form-file-button-color: $input-color !default;
+$form-file-button-bg: $body-tertiary-bg !default;
+$form-file-button-hover-bg: $body-secondary-bg !default;
+// scss-docs-end form-file-variables
+
+// scss-docs-start form-floating-variables
+$form-floating-height: add(3.5rem, $input-height-border) !default;
+$form-floating-line-height: 1.25 !default;
+$form-floating-padding-x: $input-padding-x !default;
+$form-floating-padding-y: 1rem !default;
+$form-floating-input-padding-t: 1.625rem !default;
+$form-floating-input-padding-b: .625rem !default;
+$form-floating-label-height: 1.5em !default;
+$form-floating-label-opacity: .65 !default;
+$form-floating-label-transform: scale(.85) translateY(-.5rem) translateX(.15rem) !default;
+$form-floating-label-disabled-color: $gray-600 !default;
+$form-floating-transition: opacity .1s ease-in-out, transform .1s ease-in-out !default;
+// scss-docs-end form-floating-variables
+
+// Form validation
+
+// scss-docs-start form-feedback-variables
+$form-feedback-margin-top: $form-text-margin-top !default;
+$form-feedback-font-size: $form-text-font-size !default;
+$form-feedback-font-style: $form-text-font-style !default;
+$form-feedback-valid-color: $success !default;
+$form-feedback-invalid-color: $danger !default;
+
+$form-feedback-icon-valid-color: $form-feedback-valid-color !default;
+$form-feedback-icon-valid: url("data:image/svg+xml,") !default;
+$form-feedback-icon-invalid-color: $form-feedback-invalid-color !default;
+$form-feedback-icon-invalid: url("data:image/svg+xml,") !default;
+// scss-docs-end form-feedback-variables
+
+// scss-docs-start form-validation-colors
+$form-valid-color: $form-feedback-valid-color !default;
+$form-valid-border-color: $form-feedback-valid-color !default;
+$form-invalid-color: $form-feedback-invalid-color !default;
+$form-invalid-border-color: $form-feedback-invalid-color !default;
+// scss-docs-end form-validation-colors
+
+// scss-docs-start form-validation-states
+$form-validation-states: (
+ "valid": (
+ "color": $form-valid-color,
+ "icon": $form-feedback-icon-valid,
+ "tooltip-color": #fff,
+ "tooltip-bg-color": $success,
+ "focus-box-shadow": 0 0 $input-btn-focus-blur $input-focus-width rgba($success, $input-btn-focus-color-opacity),
+ "border-color": $form-valid-border-color,
+ ),
+ "invalid": (
+ "color": $form-invalid-color,
+ "icon": $form-feedback-icon-invalid,
+ "tooltip-color": #fff,
+ "tooltip-bg-color": $danger,
+ "focus-box-shadow": 0 0 $input-btn-focus-blur $input-focus-width rgba($danger, $input-btn-focus-color-opacity),
+ "border-color": $form-invalid-border-color,
+ )
+) !default;
+// scss-docs-end form-validation-states
+
+// Z-index master list
+//
+// Warning: Avoid customizing these values. They're used for a bird's eye view
+// of components dependent on the z-axis and are designed to all work together.
+
+// scss-docs-start zindex-stack
+$zindex-dropdown: 1000 !default;
+$zindex-sticky: 1020 !default;
+$zindex-fixed: 1030 !default;
+$zindex-offcanvas-backdrop: 1040 !default;
+$zindex-offcanvas: 1045 !default;
+$zindex-modal-backdrop: 1050 !default;
+$zindex-modal: 1055 !default;
+$zindex-popover: 1070 !default;
+$zindex-tooltip: 1080 !default;
+$zindex-toast: 1090 !default;
+// scss-docs-end zindex-stack
+
+// scss-docs-start zindex-levels-map
+$zindex-levels: (
+ n1: -1,
+ 0: 0,
+ 1: 1,
+ 2: 2,
+ 3: 3
+) !default;
+// scss-docs-end zindex-levels-map
+
+
+// Navs
+
+// scss-docs-start nav-variables
+$nav-link-padding-y: ($font-size-base * 0.5) !default;
+$nav-link-padding-x: $font-size-base !default;
+$nav-link-font-size: null !default;
+$nav-link-font-weight: null !default;
+$nav-link-color: $link-color !default;
+$nav-link-hover-color: $link-hover-color !default;
+$nav-link-transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out !default;
+$nav-link-disabled-color: $body-secondary-color !default;
+$nav-link-focus-box-shadow: $focus-ring-box-shadow !default;
+
+$nav-tabs-border-color: $border-color !default;
+$nav-tabs-border-width: $border-width !default;
+$nav-tabs-border-radius: $border-radius !default;
+$nav-tabs-link-hover-border-color: $body-secondary-bg $body-secondary-bg $nav-tabs-border-color !default;
+$nav-tabs-link-active-color: $body-emphasis-color !default;
+$nav-tabs-link-active-bg: $body-bg !default;
+$nav-tabs-link-active-border-color: $border-color $border-color $nav-tabs-link-active-bg !default;
+
+$nav-pills-border-radius: $border-radius !default;
+$nav-pills-link-active-bg: $component-active-bg !default;
+$nav-pills-link-active-color: color-contrast($nav-pills-link-active-bg, $component-active-color) !default;
+
+$nav-underline-gap: 1rem !default;
+$nav-underline-border-width: .125rem !default;
+$nav-underline-link-active-color: $body-emphasis-color !default;
+// scss-docs-end nav-variables
+
+
+// Navbar
+
+// scss-docs-start navbar-variables
+$navbar-padding-y: $spacer * .5 !default;
+$navbar-padding-x: null !default;
+
+$navbar-nav-link-padding-x: .5rem !default;
+
+$navbar-brand-font-size: $font-size-lg !default;
+// Compute the navbar-brand padding-y so the navbar-brand will have the same height as navbar-text and nav-link
+$nav-link-height: $font-size-base * $line-height-base + $nav-link-padding-y * 2 !default;
+$navbar-brand-height: $navbar-brand-font-size * $line-height-base !default;
+$navbar-brand-padding-y: ($nav-link-height - $navbar-brand-height) * .5 !default;
+$navbar-brand-margin-end: 1rem !default;
+
+$navbar-toggler-padding-y: .25rem !default;
+$navbar-toggler-padding-x: .75rem !default;
+$navbar-toggler-font-size: $font-size-lg !default;
+$navbar-toggler-border-radius: $btn-border-radius !default;
+$navbar-toggler-focus-width: $btn-focus-width !default;
+$navbar-toggler-transition: box-shadow .15s ease-in-out !default;
+
+$navbar-bg: null !default; // Background color for any navbarPage()
+$navbar-light-bg: if($navbar-bg, $navbar-bg, var(--bs-light)) !default; // Background color for navbarPage(inverse = FALSE)
+$navbar-dark-bg: if($navbar-bg, $navbar-bg, var(--bs-dark)) !default; // Background color for navbarPage(inverse = TRUE)
+
+$navbar-light-contrast: if(
+ type-of($navbar-light-bg) == color,
+ color-contrast($navbar-light-bg),
+ $body-emphasis-color
+) !default; // Deepest contrasting color for navbarPage(inverse = FALSE).
+$navbar-dark-contrast: if(
+ type-of($navbar-dark-bg) == color,
+ color-contrast($navbar-dark-bg),
+ $body-emphasis-color
+) !default; // Deepest contrasting color for navbarPage(inverse = TRUE).
+
+$navbar-light-color: rgba($navbar-light-contrast, .65) !default;
+$navbar-light-hover-color: rgba($navbar-light-contrast, .8) !default;
+$navbar-light-active-color: rgba($navbar-light-contrast, 1) !default;
+$navbar-light-disabled-color: rgba($navbar-light-contrast, .3) !default;
+$navbar-light-icon-color: rgba(if(type-of($navbar-light-contrast)==color, $navbar-light-contrast, $body-color), .75) !default;
+$navbar-light-toggler-icon-bg: url("data:image/svg+xml,") !default;
+$navbar-light-toggler-border-color: rgba($navbar-light-contrast, .15) !default;
+$navbar-light-brand-color: $navbar-light-active-color !default;
+$navbar-light-brand-hover-color: $navbar-light-active-color !default;
+// scss-docs-end navbar-variables
+
+// scss-docs-start navbar-dark-variables
+$navbar-dark-color: rgba($navbar-dark-contrast, .55) !default;
+$navbar-dark-hover-color: rgba($navbar-dark-contrast, .75) !default;
+$navbar-dark-active-color: rgba($navbar-dark-contrast, 1) !default;
+$navbar-dark-disabled-color: rgba($navbar-dark-contrast, .25) !default;
+$navbar-dark-icon-color: rgba(if(type-of($navbar-dark-contrast)==color, $navbar-dark-contrast, $white), .75) !default;
+$navbar-dark-toggler-icon-bg: url("data:image/svg+xml,") !default;
+$navbar-dark-toggler-border-color: rgba($navbar-dark-contrast, .1) !default;
+$navbar-dark-brand-color: $navbar-dark-active-color !default;
+$navbar-dark-brand-hover-color: $navbar-dark-active-color !default;
+// scss-docs-end navbar-dark-variables
+
+
+// Dropdowns
+//
+// Dropdown menu container and contents.
+
+// scss-docs-start dropdown-variables
+$dropdown-min-width: 10rem !default;
+$dropdown-padding-x: 0 !default;
+$dropdown-padding-y: .5rem !default;
+$dropdown-spacer: .125rem !default;
+$dropdown-font-size: $font-size-base !default;
+$dropdown-color: $body-color !default;
+$dropdown-bg: $body-bg !default;
+$dropdown-border-color: $border-color-translucent !default;
+$dropdown-border-radius: $border-radius !default;
+$dropdown-border-width: $border-width !default;
+$dropdown-inner-border-radius: calc(#{$dropdown-border-radius} - #{$dropdown-border-width}) !default; // stylelint-disable-line function-disallowed-list
+$dropdown-divider-bg: $dropdown-border-color !default;
+$dropdown-divider-margin-y: $spacer * .5 !default;
+$dropdown-box-shadow: $box-shadow !default;
+
+$dropdown-link-color: $body-color !default;
+$dropdown-link-hover-color: $dropdown-link-color !default;
+$dropdown-link-hover-bg: $body-tertiary-bg !default;
+
+$dropdown-link-active-bg: $component-active-bg !default;
+$dropdown-link-active-color: color-contrast($dropdown-link-active-bg, $component-active-color) !default;
+
+$dropdown-link-disabled-color: $body-tertiary-color !default;
+
+$dropdown-item-padding-y: $spacer * .25 !default;
+$dropdown-item-padding-x: $spacer !default;
+
+$dropdown-header-color: $gray-600 !default;
+$dropdown-header-padding-x: $dropdown-item-padding-x !default;
+$dropdown-header-padding-y: $dropdown-padding-y !default;
+// fusv-disable
+$dropdown-header-padding: $dropdown-header-padding-y $dropdown-header-padding-x !default; // Deprecated in v5.2.0
+// fusv-enable
+// scss-docs-end dropdown-variables
+
+// scss-docs-start dropdown-dark-variables
+$dropdown-dark-color: $gray-300 !default;
+$dropdown-dark-bg: $gray-800 !default;
+$dropdown-dark-border-color: $dropdown-border-color !default;
+$dropdown-dark-divider-bg: $dropdown-divider-bg !default;
+$dropdown-dark-box-shadow: null !default;
+$dropdown-dark-link-color: $dropdown-dark-color !default;
+$dropdown-dark-link-hover-color: $white !default;
+$dropdown-dark-link-hover-bg: rgba($white, .15) !default;
+$dropdown-dark-link-active-color: $dropdown-link-active-color !default;
+$dropdown-dark-link-active-bg: $dropdown-link-active-bg !default;
+$dropdown-dark-link-disabled-color: $gray-500 !default;
+$dropdown-dark-header-color: $gray-500 !default;
+// scss-docs-end dropdown-dark-variables
+
+
+// Pagination
+
+// scss-docs-start pagination-variables
+$pagination-padding-y: .375rem !default;
+$pagination-padding-x: .75rem !default;
+$pagination-padding-y-sm: .25rem !default;
+$pagination-padding-x-sm: .5rem !default;
+$pagination-padding-y-lg: .75rem !default;
+$pagination-padding-x-lg: 1.5rem !default;
+
+$pagination-font-size: $font-size-base !default;
+
+$pagination-color: $link-color !default;
+$pagination-bg: $body-bg !default;
+$pagination-border-radius: $border-radius !default;
+$pagination-border-width: $border-width !default;
+$pagination-margin-start: calc(#{$pagination-border-width} * -1) !default; // stylelint-disable-line function-disallowed-list
+$pagination-border-color: $border-color !default;
+
+$pagination-focus-color: $link-hover-color !default;
+$pagination-focus-bg: $body-secondary-bg !default;
+$pagination-focus-box-shadow: $focus-ring-box-shadow !default;
+$pagination-focus-outline: 0 !default;
+
+$pagination-hover-color: $link-hover-color !default;
+$pagination-hover-bg: $body-tertiary-bg !default;
+$pagination-hover-border-color: $border-color !default; // Todo in v6: remove this?
+
+$pagination-active-color: $component-active-color !default;
+$pagination-active-bg: $component-active-bg !default;
+$pagination-active-border-color: $component-active-bg !default;
+
+$pagination-disabled-color: $body-secondary-color !default;
+$pagination-disabled-bg: $body-secondary-bg !default;
+$pagination-disabled-border-color: $border-color !default;
+
+$pagination-transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
+
+$pagination-border-radius-sm: $border-radius-sm !default;
+$pagination-border-radius-lg: $border-radius-lg !default;
+// scss-docs-end pagination-variables
+
+
+// Placeholders
+
+// scss-docs-start placeholders
+$placeholder-opacity-max: .5 !default;
+$placeholder-opacity-min: .2 !default;
+// scss-docs-end placeholders
+
+// Cards
+
+// scss-docs-start card-variables
+$card-spacer-y: $spacer !default;
+$card-spacer-x: $spacer !default;
+$card-title-spacer-y: $spacer * .5 !default;
+$card-title-color: null !default;
+$card-subtitle-color: null !default;
+$card-border-width: $border-width !default;
+$card-border-color: $border-color-translucent !default;
+$card-border-radius: $border-radius !default;
+$card-box-shadow: null !default;
+$card-inner-border-radius: subtract($card-border-radius, $card-border-width) !default;
+$card-cap-padding-y: $card-spacer-y * .5 !default;
+$card-cap-padding-x: $card-spacer-x !default;
+$card-cap-bg: rgba($body-color, .03) !default;
+$card-cap-color: null !default;
+$card-height: null !default;
+$card-color: null !default;
+$card-bg: $body-bg !default;
+$card-img-overlay-padding: $spacer !default;
+$card-group-margin: $grid-gutter-width * .5 !default;
+// scss-docs-end card-variables
+
+// Accordion
+
+// scss-docs-start accordion-variables
+$accordion-padding-y: 1rem !default;
+$accordion-padding-x: 1.25rem !default;
+$accordion-color: $body-color !default;
+$accordion-bg: $body-bg !default;
+$accordion-border-width: $border-width !default;
+$accordion-border-color: $border-color !default;
+$accordion-border-radius: $border-radius !default;
+$accordion-inner-border-radius: subtract($accordion-border-radius, $accordion-border-width) !default;
+
+$accordion-body-padding-y: $accordion-padding-y !default;
+$accordion-body-padding-x: $accordion-padding-x !default;
+
+$accordion-button-padding-y: $accordion-padding-y !default;
+$accordion-button-padding-x: $accordion-padding-x !default;
+$accordion-button-color: $body-color !default;
+$accordion-button-bg: $accordion-bg !default;
+$accordion-transition: $btn-transition, border-radius .15s ease !default;
+$accordion-button-active-bg: $primary-bg-subtle !default;
+$accordion-button-active-color: $primary-text-emphasis !default;
+
+$accordion-button-focus-border-color: $input-focus-border-color !default;
+$accordion-button-focus-box-shadow: $btn-focus-box-shadow !default;
+
+$accordion-icon-width: 1.25rem !default;
+$accordion-icon-color: $body-color !default;
+$accordion-icon-active-color: $primary-text-emphasis !default;
+$accordion-icon-transition: transform .2s ease-in-out !default;
+$accordion-icon-transform: rotate(-180deg) !default;
+
+$accordion-button-icon: url("data:image/svg+xml,") !default;
+$accordion-button-active-icon: url("data:image/svg+xml,") !default;
+// scss-docs-end accordion-variables
+
+// Tooltips
+
+// scss-docs-start tooltip-variables
+$tooltip-font-size: $font-size-sm !default;
+$tooltip-max-width: 200px !default;
+$tooltip-color: $body-bg !default;
+$tooltip-bg: $body-emphasis-color !default;
+$tooltip-border-radius: $border-radius !default;
+$tooltip-opacity: .9 !default;
+$tooltip-padding-y: $spacer * .25 !default;
+$tooltip-padding-x: $spacer * .5 !default;
+$tooltip-margin: null !default; // TODO: remove this in v6
+
+$tooltip-arrow-width: .8rem !default;
+$tooltip-arrow-height: .4rem !default;
+// fusv-disable
+$tooltip-arrow-color: null !default; // Deprecated in Bootstrap 5.2.0 for CSS variables
+// fusv-enable
+// scss-docs-end tooltip-variables
+
+// Form tooltips must come after regular tooltips
+// scss-docs-start tooltip-feedback-variables
+$form-feedback-tooltip-padding-y: $tooltip-padding-y !default;
+$form-feedback-tooltip-padding-x: $tooltip-padding-x !default;
+$form-feedback-tooltip-font-size: $tooltip-font-size !default;
+$form-feedback-tooltip-line-height: null !default;
+$form-feedback-tooltip-opacity: $tooltip-opacity !default;
+$form-feedback-tooltip-border-radius: $tooltip-border-radius !default;
+// scss-docs-end tooltip-feedback-variables
+
+
+// Popovers
+
+// scss-docs-start popover-variables
+$popover-font-size: $font-size-sm !default;
+$popover-bg: $body-bg !default;
+$popover-max-width: 276px !default;
+$popover-border-width: $border-width !default;
+$popover-border-color: $border-color-translucent !default;
+$popover-border-radius: $border-radius-lg !default;
+$popover-inner-border-radius: calc(#{$popover-border-radius} - #{$popover-border-width}) !default; // stylelint-disable-line function-disallowed-list
+$popover-box-shadow: $box-shadow !default;
+
+$popover-header-font-size: $font-size-base !default;
+$popover-header-bg: $body-secondary-bg !default;
+$popover-header-color: $headings-color !default;
+$popover-header-padding-y: .5rem !default;
+$popover-header-padding-x: $spacer !default;
+
+$popover-body-color: $body-color !default;
+$popover-body-padding-y: $spacer !default;
+$popover-body-padding-x: $spacer !default;
+
+$popover-arrow-width: 1rem !default;
+$popover-arrow-height: .5rem !default;
+// scss-docs-end popover-variables
+
+// fusv-disable
+// Deprecated in Bootstrap 5.2.0 for CSS variables
+$popover-arrow-color: $popover-bg !default;
+$popover-arrow-outer-color: $border-color-translucent !default;
+// fusv-enable
+
+
+// Toasts
+
+// scss-docs-start toast-variables
+$toast-max-width: 350px !default;
+$toast-padding-x: .75rem !default;
+$toast-padding-y: .5rem !default;
+$toast-font-size: .875rem !default;
+$toast-color: null !default;
+$toast-background-color: rgba($body-bg, .85) !default;
+$toast-border-width: $border-width !default;
+$toast-border-color: $border-color-translucent !default;
+$toast-border-radius: $border-radius !default;
+$toast-box-shadow: $box-shadow !default;
+$toast-spacing: $container-padding-x !default;
+
+$toast-header-color: $body-secondary-color !default;
+$toast-header-background-color: rgba($body-bg, .85) !default;
+$toast-header-border-color: $toast-border-color !default;
+// scss-docs-end toast-variables
+
+
+// Badges
+
+// scss-docs-start badge-variables
+$badge-font-size: .75em !default;
+$badge-font-weight: $font-weight-bold !default;
+$badge-color: $white !default;
+$badge-padding-y: .35em !default;
+$badge-padding-x: .65em !default;
+$badge-border-radius: $border-radius !default;
+// scss-docs-end badge-variables
+
+
+// Modals
+
+// scss-docs-start modal-variables
+$modal-inner-padding: $spacer !default;
+
+$modal-footer-margin-between: .5rem !default;
+
+$modal-dialog-margin: .5rem !default;
+$modal-dialog-margin-y-sm-up: 1.75rem !default;
+
+$modal-title-line-height: $line-height-base !default;
+
+$modal-content-color: null !default;
+$modal-content-bg: $body-bg !default;
+$modal-content-border-color: $border-color-translucent !default;
+$modal-content-border-width: $border-width !default;
+$modal-content-border-radius: $border-radius-lg !default;
+$modal-content-inner-border-radius: subtract($modal-content-border-radius, $modal-content-border-width) !default;
+$modal-content-box-shadow-xs: $box-shadow-sm !default;
+$modal-content-box-shadow-sm-up: $box-shadow !default;
+
+$modal-backdrop-bg: $black !default;
+$modal-backdrop-opacity: .5 !default;
+
+$modal-header-border-color: $border-color !default;
+$modal-header-border-width: $modal-content-border-width !default;
+$modal-header-padding-y: $modal-inner-padding !default;
+$modal-header-padding-x: $modal-inner-padding !default;
+$modal-header-padding: $modal-header-padding-y $modal-header-padding-x !default; // Keep this for backwards compatibility
+
+$modal-footer-bg: null !default;
+$modal-footer-border-color: $modal-header-border-color !default;
+$modal-footer-border-width: $modal-header-border-width !default;
+
+$modal-sm: 300px !default;
+$modal-md: 500px !default;
+$modal-lg: 800px !default;
+$modal-xl: 1140px !default;
+
+$modal-fade-transform: translate(0, -50px) !default;
+$modal-show-transform: none !default;
+$modal-transition: transform .3s ease-out !default;
+$modal-scale-transform: scale(1.02) !default;
+// scss-docs-end modal-variables
+
+
+// Alerts
+//
+// Define alert colors, border radius, and padding.
+
+// scss-docs-start alert-variables
+$alert-padding-y: $spacer !default;
+$alert-padding-x: $spacer !default;
+$alert-margin-bottom: 1rem !default;
+$alert-border-radius: $border-radius !default;
+$alert-link-font-weight: $font-weight-bold !default;
+$alert-border-width: $border-width !default;
+$alert-dismissible-padding-r: $alert-padding-x * 3 !default; // 3x covers width of x plus default padding on either side
+// scss-docs-end alert-variables
+
+// fusv-disable
+$alert-bg-scale: -80% !default; // Deprecated in v5.2.0, to be removed in v6
+$alert-border-scale: -70% !default; // Deprecated in v5.2.0, to be removed in v6
+$alert-color-scale: 40% !default; // Deprecated in v5.2.0, to be removed in v6
+// fusv-enable
+
+// Progress bars
+
+// scss-docs-start progress-variables
+$progress-height: 1rem !default;
+$progress-font-size: $font-size-base * .75 !default;
+$progress-bg: $body-secondary-bg !default;
+$progress-border-radius: $border-radius !default;
+$progress-box-shadow: $box-shadow-inset !default;
+$progress-bar-color: $white !default;
+$progress-bar-bg: $primary !default;
+$progress-bar-animation-timing: 1s linear infinite !default;
+$progress-bar-transition: width .6s ease !default;
+// scss-docs-end progress-variables
+
+
+// List group
+
+// scss-docs-start list-group-variables
+$list-group-color: $body-color !default;
+$list-group-bg: $body-bg !default;
+$list-group-border-color: $border-color !default;
+$list-group-border-width: $border-width !default;
+$list-group-border-radius: $border-radius !default;
+
+$list-group-item-padding-y: $spacer * .5 !default;
+$list-group-item-padding-x: $spacer !default;
+// fusv-disable
+$list-group-item-bg-scale: -80% !default; // Deprecated in v5.3.0
+$list-group-item-color-scale: 40% !default; // Deprecated in v5.3.0
+// fusv-enable
+
+$list-group-hover-bg: $body-tertiary-bg !default;
+$list-group-active-bg: $component-active-bg !default;
+$list-group-active-color: color-contrast($list-group-active-bg, $component-active-color) !default;
+$list-group-active-border-color: $list-group-active-bg !default;
+
+$list-group-disabled-color: $body-secondary-color !default;
+$list-group-disabled-bg: $list-group-bg !default;
+
+$list-group-action-color: $body-secondary-color !default;
+$list-group-action-hover-color: $body-emphasis-color !default;
+
+$list-group-action-active-color: $body-color !default;
+$list-group-action-active-bg: $body-secondary-bg !default;
+// scss-docs-end list-group-variables
+
+
+// Image thumbnails
+
+// scss-docs-start thumbnail-variables
+$thumbnail-padding: .25rem !default;
+$thumbnail-bg: $body-bg !default;
+$thumbnail-border-width: $border-width !default;
+$thumbnail-border-color: $border-color !default;
+$thumbnail-border-radius: $border-radius !default;
+$thumbnail-box-shadow: $box-shadow-sm !default;
+// scss-docs-end thumbnail-variables
+
+
+// Figures
+
+// scss-docs-start figure-variables
+$figure-caption-font-size: $small-font-size !default;
+$figure-caption-color: $body-secondary-color !default;
+// scss-docs-end figure-variables
+
+
+// Breadcrumbs
+
+// scss-docs-start breadcrumb-variables
+$breadcrumb-font-size: null !default;
+$breadcrumb-padding-y: 0 !default;
+$breadcrumb-padding-x: 0 !default;
+$breadcrumb-item-padding-x: .5rem !default;
+$breadcrumb-margin-bottom: 1rem !default;
+$breadcrumb-bg: null !default;
+$breadcrumb-divider-color: $body-secondary-color !default;
+$breadcrumb-active-color: $body-secondary-color !default;
+$breadcrumb-divider: quote("/") !default;
+$breadcrumb-divider-flipped: $breadcrumb-divider !default;
+$breadcrumb-border-radius: null !default;
+// scss-docs-end breadcrumb-variables
+
+// Carousel
+
+// scss-docs-start carousel-variables
+$carousel-control-color: $white !default;
+$carousel-control-width: 15% !default;
+$carousel-control-opacity: .5 !default;
+$carousel-control-hover-opacity: .9 !default;
+$carousel-control-transition: opacity .15s ease !default;
+
+$carousel-indicator-width: 30px !default;
+$carousel-indicator-height: 3px !default;
+$carousel-indicator-hit-area-height: 10px !default;
+$carousel-indicator-spacer: 3px !default;
+$carousel-indicator-opacity: .5 !default;
+$carousel-indicator-active-bg: $white !default;
+$carousel-indicator-active-opacity: 1 !default;
+$carousel-indicator-transition: opacity .6s ease !default;
+
+$carousel-caption-width: 70% !default;
+$carousel-caption-color: $white !default;
+$carousel-caption-padding-y: 1.25rem !default;
+$carousel-caption-spacer: 1.25rem !default;
+
+$carousel-control-icon-width: 2rem !default;
+
+$carousel-control-prev-icon-bg: url("data:image/svg+xml,") !default;
+$carousel-control-next-icon-bg: url("data:image/svg+xml,") !default;
+
+$carousel-transition-duration: .6s !default;
+$carousel-transition: transform $carousel-transition-duration ease-in-out !default; // Define transform transition first if using multiple transitions (e.g., `transform 2s ease, opacity .5s ease-out`)
+// scss-docs-end carousel-variables
+
+// scss-docs-start carousel-dark-variables
+$carousel-dark-indicator-active-bg: $black !default;
+$carousel-dark-caption-color: $black !default;
+$carousel-dark-control-icon-filter: invert(1) grayscale(100) !default;
+// scss-docs-end carousel-dark-variables
+
+
+// Spinners
+
+// scss-docs-start spinner-variables
+$spinner-width: 2rem !default;
+$spinner-height: $spinner-width !default;
+$spinner-vertical-align: -.125em !default;
+$spinner-border-width: .25em !default;
+$spinner-animation-speed: .75s !default;
+
+$spinner-width-sm: 1rem !default;
+$spinner-height-sm: $spinner-width-sm !default;
+$spinner-border-width-sm: .2em !default;
+// scss-docs-end spinner-variables
+
+
+// Close
+
+// scss-docs-start close-variables
+$btn-close-width: 1em !default;
+$btn-close-height: $btn-close-width !default;
+$btn-close-padding-x: .25em !default;
+$btn-close-padding-y: $btn-close-padding-x !default;
+$btn-close-color: $black !default;
+$btn-close-bg: url("data:image/svg+xml,") !default;
+$btn-close-focus-shadow: $focus-ring-box-shadow !default;
+$btn-close-opacity: .5 !default;
+$btn-close-hover-opacity: .75 !default;
+$btn-close-focus-opacity: 1 !default;
+$btn-close-disabled-opacity: .25 !default;
+$btn-close-white-filter: invert(1) grayscale(100%) brightness(200%) !default;
+// scss-docs-end close-variables
+
+
+// Offcanvas
+
+// scss-docs-start offcanvas-variables
+$offcanvas-padding-y: $modal-inner-padding !default;
+$offcanvas-padding-x: $modal-inner-padding !default;
+$offcanvas-horizontal-width: 400px !default;
+$offcanvas-vertical-height: 30vh !default;
+$offcanvas-transition-duration: .3s !default;
+$offcanvas-border-color: $modal-content-border-color !default;
+$offcanvas-border-width: $modal-content-border-width !default;
+$offcanvas-title-line-height: $modal-title-line-height !default;
+$offcanvas-bg-color: $body-bg !default;
+$offcanvas-color: $body-color !default;
+$offcanvas-box-shadow: $modal-content-box-shadow-xs !default;
+$offcanvas-backdrop-bg: $modal-backdrop-bg !default;
+$offcanvas-backdrop-opacity: $modal-backdrop-opacity !default;
+// scss-docs-end offcanvas-variables
+
+// Code
+
+$code-font-size: $small-font-size !default;
+// Amount intentionally matches mixture amount of shiny::inputPanel()
+// https://github.com/rstudio/shiny/blob/4eeb4a1/inst/www/shared/shiny_scss/bootstrap.scss#L25
+$code-bg: $body-emphasis-color !default;
+$code-color: black !default;
+$code-color-dark: white !default;
+
+$kbd-padding-y: .1875rem !default;
+$kbd-padding-x: .375rem !default;
+$kbd-font-size: $code-font-size !default;
+$kbd-color: $body-bg !default;
+$kbd-bg: $body-color !default;
+$nested-kbd-font-weight: null !default; // Deprecated in v5.2.0, removing in v6
+
+$pre-bg: $code-bg !default;
+$pre-color: $body-emphasis-color !default;
+$pre-line-height: $line-height-base !default;
+$font-family-base: "Source Sans Pro";
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+// quarto-scss-analysis-annotation { "origin": "'mixins' section from format" }
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+// Toggles
+//
+// Used in conjunction with global variables to enable certain theme features.
+
+// Vendor
+@import "vendor/rfs";
+
+// Deprecate
+@import "mixins/deprecate";
+
+// Helpers
+@import "mixins/breakpoints";
+@import "mixins/color-mode";
+@import "mixins/color-scheme";
+@import "mixins/image";
+@import "mixins/resize";
+@import "mixins/visually-hidden";
+@import "mixins/reset-text";
+@import "mixins/text-truncate";
+
+// Utilities
+@import "mixins/utilities";
+
+// Components
+@import "mixins/backdrop";
+@import "mixins/buttons";
+@import "mixins/caret";
+@import "mixins/pagination";
+@import "mixins/lists";
+@import "mixins/forms";
+@import "mixins/table-variants";
+
+// Skins
+@import "mixins/border-radius";
+@import "mixins/box-shadow";
+@import "mixins/gradients";
+@import "mixins/transition";
+
+// Layout
+@import "mixins/clearfix";
+@import "mixins/container";
+@import "mixins/grid";
+
+@mixin bslib-breakpoints-css-vars(
+ $breakpoint-var,
+ $breakpoints,
+ $allow-cascade: false
+) {
+ @each $breakpoint in $breakpoints {
+ @if not $allow-cascade {
+ --#{$breakpoint-var}--#{$breakpoint}: unset;
+ }
+
+ @include media-breakpoint-up(#{$breakpoint}) {
+ &.#{$breakpoint-var}--#{$breakpoint} {
+ --#{$breakpoint-var}: var(--#{$breakpoint-var}--#{$breakpoint});
+ }
+ }
+ }
+}
+
+
+// Intentionally replicates Bootstrap's %heading placeholder
+// https://github.com/twbs/bootstrap/blob/2c7f88/scss/_reboot.scss#L83-L96
+@mixin bootstrap-heading-font-and-spacing($font-size) {
+ @include font-size($font-size);
+ margin-top: 0; // 1
+ margin-bottom: $headings-margin-bottom;
+ font-family: $headings-font-family;
+ font-style: $headings-font-style;
+ font-weight: $headings-font-weight;
+ line-height: $headings-line-height;
+
+}
+
+@mixin bootstrap-heading($font-size) {
+ @include bootstrap-heading-font-and-spacing($font-size);
+ color: var(--#{$prefix}heading-color);
+}
+
+
+// quarto-scss-analysis-annotation { "origin": "'mixins' section from Quarto" }
+
+
+
+
+
+
+
+
+
+@mixin shiny-date-range {
+ .input-daterange {
+ width: inherit;
+ input[type="text"] {
+ height: 2.4em;
+ width: 10em;
+ }
+
+ .input-group-addon {
+ height: auto;
+ padding: 0;
+ margin-left: -5px !important;
+ margin-right: -5px;
+
+ .input-group-text {
+ padding-top: 0;
+ padding-bottom: 0;
+ height: 100%;
+ }
+ }
+ }
+}
+
+@mixin shiny-text-input {
+ input[type="text"] {
+ line-height: 1;
+ width: inherit;
+ }
+}
+
+@mixin shiny-input-checkboxgroup {
+ .shiny-input-checkboxgroup {
+ > label {
+ margin-top: $dashboard-card-toolbar-top-margin;
+ }
+ > .shiny-options-group {
+ margin-top: 0;
+ align-items: baseline;
+ }
+ }
+}
+
+@mixin shiny-input-radiogroup {
+ .shiny-input-radiogroup {
+ > label {
+ margin-top: $dashboard-card-toolbar-top-margin;
+ }
+ }
+
+ .shiny-input-radiogroup > .shiny-options-group {
+ align-items: baseline;
+ margin-top: 0;
+ > .radio {
+ margin-right: 0.3em;
+ }
+ }
+}
+
+@mixin shiny-input-checkbox {
+ div.checkbox {
+ margin-bottom: 0px;
+ }
+
+ > .checkbox:first-child {
+ margin-top: $dashboard-card-toolbar-top-margin;
+ }
+}
+
+@mixin shiny-input-slider {
+ span.irs.irs--shiny {
+ width: 10em;
+ .irs-line {
+ top: 9px;
+ }
+ .irs-min,
+ .irs-max,
+ .irs-from,
+ .irs-to,
+ .irs-single {
+ top: 20px;
+ }
+ .irs-bar {
+ top: 8px;
+ }
+ .irs-handle {
+ top: 0px;
+ }
+ }
+}
+
+@mixin shiny-input-select {
+ .form-select {
+ padding-top: 0.2em;
+ padding-bottom: 0.2em;
+ }
+ .shiny-input-select {
+ min-width: 6em;
+ }
+}
+
+@mixin shiny-input-container {
+ .shiny-input-container {
+ padding-bottom: 0;
+ margin-bottom: 0;
+ > * {
+ flex-shrink: 0;
+ flex-grow: 0;
+ }
+ }
+
+ .form-group.shiny-input-container:not([role="group"]) > label {
+ margin-bottom: 0;
+ }
+
+ .shiny-input-container.no-baseline {
+ align-items: start;
+ padding-top: $dashboard-card-toolbar-top-margin;
+ }
+
+ .shiny-input-container {
+ display: flex;
+ align-items: baseline;
+
+ label {
+ padding-right: 0.4em;
+ }
+
+ .bslib-input-switch {
+ margin-top: $dashboard-card-toolbar-top-margin;
+ }
+ }
+}
+
+@mixin shiny-toolbar-customizations {
+ @include toolbar-layout();
+ @include shiny-input-container();
+ @include shiny-text-input();
+ @include shiny-date-range();
+ @include shiny-input-slider();
+ @include shiny-input-checkboxgroup();
+ @include shiny-input-radiogroup();
+ @include shiny-input-select();
+ @include shiny-input-checkbox();
+}
+
+@mixin toolbar-layout {
+ .cell-output-display {
+ display: flex;
+ }
+
+ .shiny-input-container {
+ padding-bottom: 0.5em;
+ margin-bottom: 0.5em;
+ width: inherit;
+
+ > .checkbox:first-child {
+ margin-top: $dashboard-card-toolbar-top-margin;
+ }
+ }
+
+ > *:last-child {
+ margin-right: 0;
+ }
+
+ > * > * {
+ margin-right: 1em;
+ align-items: baseline;
+ > a {
+ text-decoration: none;
+ margin-top: auto;
+ margin-bottom: auto;
+ }
+ }
+}
+
+@mixin itables {
+ .itables {
+ @include media-breakpoint-down(md) {
+ div.dataTables_wrapper div.dataTables_length,
+ div.dataTables_wrapper div.dataTables_info,
+ div.dataTables_wrapper div.dataTables_paginate {
+ text-align: initial;
+ }
+
+ div.dataTables_wrapper div.dataTables_filter {
+ text-align: right;
+ }
+
+ div.dataTables_wrapper div.dataTables_paginate ul.pagination {
+ justify-content: initial;
+ }
+ }
+
+ .dataTables_wrapper {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: space-between;
+ align-items: center;
+ padding-top: 0;
+ table {
+ flex-shrink: 0;
+ }
+
+ // The buttons control (download/copy)
+ .dt-buttons {
+ margin-bottom: 0.5em;
+ margin-left: auto;
+
+ width: fit-content;
+
+ float: right;
+ &.btn-group {
+ background: $body-bg;
+ border: none;
+ }
+
+ .btn-secondary {
+ background-color: $body-bg;
+ background-image: none;
+ border: solid $border-color $border-width;
+ padding: 0.2em 0.7em;
+ }
+
+ .btn span {
+ font-size: 0.8em;
+ color: $body-color;
+ }
+ }
+
+ // The number of items (info) text
+ .dataTables_info {
+ margin-left: 0.5em;
+ margin-bottom: 0.5em;
+
+ @include media-breakpoint-up(md) {
+ font-size: 0.875em;
+ }
+ @include media-breakpoint-down(md) {
+ font-size: 0.8em;
+ }
+
+ padding-top: 0;
+ }
+
+ // The table filter / search
+ .dataTables_filter {
+ margin-bottom: 0.5em;
+ font-size: 0.875em;
+ input[type="search"] {
+ padding: 1px 5px 1px 5px;
+ font-size: 0.875em;
+ }
+ }
+
+ // The pagination size selector
+ .dataTables_length {
+ flex-basis: 1 1 50%;
+ margin-bottom: 0.5em;
+ font-size: 0.875em;
+ select {
+ padding: 0.4em 3em 0.4em 0.5em;
+ font-size: 0.875em;
+ margin-left: 0.2em;
+ margin-right: 0.2em;
+ }
+ }
+
+ // The pagination control
+ .dataTables_paginate {
+ @include media-breakpoint-up(md) {
+ margin-left: auto;
+ }
+ flex-shrink: 0;
+
+ ul.pagination .paginate_button .page-link {
+ font-size: 0.8em;
+ }
+ }
+ }
+ }
+}
+
+@mixin observable-toolbar-inputs {
+ form {
+ width: fit-content;
+
+ label {
+ padding-top: 0.2em;
+ padding-bottom: 0.2em;
+ width: fit-content;
+ }
+
+ input[type="date"] {
+ width: fit-content;
+ }
+
+ input[type="color"] {
+ width: 3em;
+ }
+
+ button {
+ padding: 0.4em;
+ }
+
+ select {
+ width: fit-content;
+ }
+ }
+}
+
+@mixin observable-sidebar-inputs {
+ form {
+ flex-direction: column;
+ align-items: start;
+ margin-bottom: 1em;
+
+ div[class*="oi-"][class$="-input"] {
+ flex-direction: column;
+ }
+
+ &[class*="oi-"][class$="-toggle"] {
+ flex-direction: row-reverse;
+ align-items: center;
+ justify-content: start;
+ }
+
+ input[type="range"] {
+ margin-top: 0.5em;
+ margin-right: 0.8em;
+ margin-left: 1em;
+ }
+ }
+ label {
+ width: fit-content;
+ }
+}
+
+
+@mixin listing-category {
+ display: flex;
+ flex-wrap: wrap;
+ padding-bottom: 5px;
+
+ .listing-category {
+ color: listing-override-value($theme-name, "category-color", $text-muted);
+
+ $val: listing-override-value($theme-name, "category-border", null);
+ @if $val != null {
+ border: $val;
+ } @else {
+ border: solid 1px $border-color;
+ }
+
+ border-radius: $border-radius;
+ text-transform: uppercase;
+ font-size: 0.65em;
+ padding-left: 0.5em;
+ padding-right: 0.5em;
+ padding-top: 0.15em;
+ padding-bottom: 0.15em;
+ cursor: pointer;
+ margin-right: 4px;
+ margin-bottom: 4px;
+ }
+}
+
+// Provide theme level customization of the listing inputs
+@mixin input-group {
+}
+
+@mixin input-form-control {
+ $val: listing-override-value($theme-name, "form-background-color", null);
+ @if $val != null {
+ background-color: $val;
+ }
+ $val: listing-override-value($theme-name, "form-color", null);
+ @if $val != null {
+ color: $val;
+ }
+}
+
+@mixin input-group-text {
+ $val: listing-override-value($theme-name, "input-group-border-radius", null);
+ @if $val != null {
+ border-radius: $val;
+ }
+
+ $val: listing-override-value($theme-name, "input-group-border", null);
+ @if $val != null {
+ border: $val;
+ }
+
+ $val: listing-override-value($theme-name, "input-text-margin", null);
+ @if $val != null {
+ margin: $val;
+ }
+ $val: listing-override-value(
+ $theme-name,
+ "input-text-background-color",
+ null
+ );
+ @if $val != null {
+ background-color: $val;
+ }
+ $val: listing-override-value($theme-name, "input-text-color", null);
+ @if $val != null {
+ color: $val;
+ }
+}
+
+@mixin input-placeholder {
+ $val: listing-override-value(
+ $theme-name,
+ "input-text-placeholder-color",
+ null
+ );
+ @if $val != null {
+ ::placeholder {
+ color: $val;
+ }
+ }
+}
+
+
+@mixin responsive-buttons {
+ display: flex;
+ @include media-breakpoint-up(lg) {
+ flex-direction: row;
+ column-gap: 0.8em;
+ row-gap: 15px;
+ flex-wrap: wrap;
+ }
+ @include media-breakpoint-down(lg) {
+ flex-direction: column;
+ row-gap: 1em;
+ width: 100%;
+ padding-bottom: 1.5em;
+ }
+}
+
+@mixin responsive-button {
+ @include media-breakpoint-up(lg) {
+ font-size: 0.8em;
+ padding: 0.25em 0.5em;
+ border-radius: 4px;
+ }
+
+ @include media-breakpoint-down(lg) {
+ font-size: 1.1em;
+ padding: 0.5em 0.5em;
+ text-align: center;
+ border-radius: 6px;
+ }
+
+ color: lighten($body-color, 20%);
+ text-decoration: none;
+ &:hover {
+ color: $link-color;
+ }
+
+ border: solid 1px;
+
+ i.bi {
+ margin-right: 0.15em;
+ }
+}
+
+@mixin image-shapes {
+ img.round {
+ border-radius: 50%;
+ }
+
+ img.rounded {
+ border-radius: 10px;
+ }
+}
+
+
+
+
+@mixin body-secondary {
+ @if variable-exists(body-secondary) {
+ color: $body-secondary;
+ } @else {
+ color: theme-dim($body-color, 25%);
+ }
+}
+
+@mixin page-columns {
+ display: grid;
+ gap: 0;
+}
+
+@mixin column-spanning-element {
+ table {
+ background: $body-bg;
+ }
+}
+
+// GRID CASCADE
+$grid-body-column-max: $grid-body-width !default;
+$grid-body-column-min: quarto-math.min(500px, $grid-body-column-max) !default;
+
+// Margin variables
+$grid-page-gutter: $grid-column-gutter-width !default;
+$grid-page-gutter-start: $grid-page-gutter !default;
+$grid-page-gutter-end: $grid-page-gutter !default;
+
+$grid-body-gutter: $grid-column-gutter-width !default;
+$grid-body-gutter-start: $grid-body-gutter !default;
+$grid-body-gutter-end: $grid-body-gutter !default;
+
+/* FLOATING GRID */
+$grid-page-gutter-float: 5fr !default;
+$grid-float-sidebar-width: $grid-sidebar-width !default;
+$grid-float-margin-width: $grid-margin-width !default;
+
+/* Float Wide Default Grid */
+
+// Margins
+$grid-float-wide-page-gutter-start: $grid-page-gutter-start !default;
+$grid-float-wide-page-gutter-end: $grid-page-gutter-end !default;
+$grid-float-wide-body-gutter-start: $grid-body-gutter-start !default;
+$grid-float-wide-body-gutter-end: $grid-body-gutter-end !default;
+$grid-float-wide-sidebar-gutter: $grid-page-gutter-float !default;
+$grid-float-wide-margin-gutter: $grid-page-gutter-float !default;
+
+// Sidebars
+$grid-float-wide-sidebar-width: $grid-float-sidebar-width !default;
+$grid-float-wide-sidebar-seg1: minmax(
+ #{0.1 * $grid-float-wide-sidebar-width},
+ #{0.2 * $grid-float-wide-sidebar-width}
+) !default;
+$grid-float-wide-sidebar-seg2: minmax(
+ #{0.2 * $grid-float-wide-sidebar-width},
+ #{0.6 * $grid-float-wide-sidebar-width}
+) !default;
+$grid-float-wide-sidebar-seg3: minmax(
+ #{0.1 * $grid-float-wide-sidebar-width},
+ #{0.2 * $grid-float-wide-sidebar-width}
+) !default;
+
+// Margins
+$grid-float-wide-margin-width: $grid-float-margin-width !default;
+$grid-float-wide-margin-seg3: minmax(
+ #{0.1 * $grid-float-wide-margin-width},
+ #{0.2 * $grid-float-wide-margin-width}
+) !default;
+$grid-float-wide-margin-seg2: minmax(
+ #{0.2 * $grid-float-wide-margin-width},
+ #{0.6 * $grid-float-wide-margin-width}
+) !default;
+$grid-float-wide-margin-seg1: minmax(
+ #{0.1 * $grid-float-wide-margin-width},
+ #{0.2 * $grid-float-wide-margin-width}
+) !default;
+
+// Body
+$grid-float-wide-body-column-min: $grid-body-column-min !default;
+$grid-float-wide-body-column-max: $grid-body-column-max !default;
+$grid-float-wide-body: minmax(
+ $grid-float-wide-body-column-min,
+ calc(
+ #{$grid-float-wide-body-column-max} - #{$grid-float-wide-page-gutter-start +
+ $grid-float-wide-page-gutter-end}
+ )
+) !default;
+
+/* Float Wide Slim Content Grid */
+
+// Margins
+$grid-float-wide-slim-page-gutter-start: $grid-page-gutter-start !default;
+$grid-float-wide-slim-page-gutter-end: $grid-page-gutter-end !default;
+$grid-float-wide-slim-body-gutter-start: $grid-body-gutter-start !default;
+$grid-float-wide-slim-body-gutter-end: $grid-body-gutter-end !default;
+$grid-float-wide-slim-sidebar-gutter: $grid-page-gutter-float !default;
+$grid-float-wide-slim-margin-gutter: $grid-page-gutter-float !default;
+
+// Sidebars
+$grid-float-wide-slim-sidebar-width: $grid-float-sidebar-width !default;
+$grid-float-wide-slim-sidebar-seg1: 0.2 * $grid-float-wide-slim-sidebar-width !default;
+$grid-float-wide-slim-sidebar-seg2: minmax(
+ #{0.2 * $grid-float-wide-slim-sidebar-width},
+ #{0.6 * $grid-float-wide-slim-sidebar-width}
+) !default;
+$grid-float-wide-slim-sidebar-seg3: 0.2 * $grid-float-wide-slim-sidebar-width !default;
+
+// Margins
+$grid-float-wide-slim-margin-width: $grid-float-margin-width !default;
+$grid-float-wide-slim-margin-seg3: 0.2 * $grid-float-wide-slim-margin-width !default;
+$grid-float-wide-slim-margin-seg2: minmax(
+ #{0.2 * $grid-float-wide-slim-margin-width},
+ #{0.6 * $grid-float-wide-slim-margin-width}
+) !default;
+$grid-float-wide-slim-margin-seg1: 0.2 * $grid-float-wide-slim-margin-width !default;
+
+// Body
+$grid-float-wide-slim-body-column-min: $grid-body-column-min - 50px !default;
+$grid-float-wide-slim-body-column-max: $grid-body-column-max - 50px !default;
+$grid-float-wide-slim-body: minmax(
+ $grid-float-wide-slim-body-column-min,
+ calc(
+ #{$grid-float-wide-slim-body-column-max} - #{$grid-float-wide-slim-page-gutter-start +
+ $grid-float-wide-slim-page-gutter-end}
+ )
+) !default;
+
+/* Float Wide Full Grid */
+// Margins
+$grid-float-wide-full-page-gutter-start: $grid-page-gutter-start !default;
+$grid-float-wide-full-page-gutter-end: $grid-page-gutter-end !default;
+$grid-float-wide-full-body-gutter-start: $grid-body-gutter-start !default;
+$grid-float-wide-full-body-gutter-end: $grid-body-gutter-end !default;
+$grid-float-wide-full-sidebar-gutter: $grid-page-gutter-float !default;
+$grid-float-wide-full-margin-gutter: $grid-page-gutter-float !default;
+
+// Sidebars
+$grid-float-wide-full-sidebar-width: $grid-float-sidebar-width !default;
+$grid-float-wide-full-sidebar-seg1: 0.2 * $grid-float-wide-full-sidebar-width !default;
+$grid-float-wide-full-sidebar-seg2: minmax(
+ #{0.2 * $grid-float-wide-full-sidebar-width},
+ #{0.6 * $grid-float-wide-full-sidebar-width}
+) !default;
+$grid-float-wide-full-sidebar-seg3: 0.2 * $grid-float-wide-full-sidebar-width !default;
+
+// Margins
+$grid-float-wide-full-margin-width: $grid-float-margin-width !default;
+$grid-float-wide-full-margin-seg3: 0.2 * $grid-float-wide-full-margin-width !default;
+$grid-float-wide-full-margin-seg2: minmax(
+ #{0.2 * $grid-float-wide-full-margin-width},
+ #{0.6 * $grid-float-wide-full-margin-width}
+) !default;
+$grid-float-wide-full-margin-seg1: 0.2 * $grid-float-wide-full-margin-width !default;
+
+// Body
+$grid-float-wide-full-body-column-min: $grid-body-column-min !default;
+$grid-float-wide-full-body-column-max: $grid-body-column-max !default;
+$grid-float-wide-full-body: minmax(
+ $grid-float-wide-full-body-column-min,
+ calc(
+ #{$grid-float-wide-full-body-column-max} - #{$grid-float-wide-full-page-gutter-start +
+ $grid-float-wide-full-page-gutter-end}
+ )
+) !default;
+
+/* Float Wide Listing Grid */
+// Margins
+$grid-float-wide-listing-page-gutter-start: $grid-page-gutter-start !default;
+$grid-float-wide-listing-page-gutter-end: $grid-page-gutter-end !default;
+$grid-float-wide-listing-body-gutter-start: $grid-body-gutter-start !default;
+$grid-float-wide-listing-body-gutter-end: $grid-body-gutter-end !default;
+$grid-float-wide-listing-sidebar-gutter: $grid-page-gutter-float !default;
+$grid-float-wide-listing-margin-gutter: $grid-page-gutter-float !default;
+
+// Sidebars
+$grid-float-wide-listing-sidebar-width: $grid-float-sidebar-width !default;
+$grid-float-wide-listing-sidebar-seg1: minmax(
+ #{0.1 * $grid-float-wide-listing-sidebar-width},
+ #{0.2 * $grid-float-wide-listing-sidebar-width}
+) !default;
+$grid-float-wide-listing-sidebar-seg2: minmax(
+ #{0.2 * $grid-float-wide-listing-sidebar-width},
+ #{0.6 * $grid-float-wide-listing-sidebar-width}
+) !default;
+$grid-float-wide-listing-sidebar-seg3: minmax(
+ #{0.1 * $grid-float-wide-listing-sidebar-width},
+ #{0.2 * $grid-float-wide-listing-sidebar-width}
+) !default;
+
+// Margins
+$grid-float-wide-listing-margin-width: $grid-float-margin-width !default;
+$grid-float-wide-listing-margin-seg3: minmax(
+ #{0.1 * $grid-float-wide-listing-margin-width},
+ #{0.2 * $grid-float-wide-listing-margin-width}
+) !default;
+$grid-float-wide-listing-margin-seg2: minmax(
+ #{0.2 * $grid-float-wide-listing-margin-width},
+ #{0.6 * $grid-float-wide-listing-margin-width}
+) !default;
+$grid-float-wide-listing-margin-seg1: minmax(
+ #{0.1 * $grid-float-wide-listing-margin-width},
+ #{0.2 * $grid-float-wide-listing-margin-width}
+) !default;
+
+// Body
+$grid-float-wide-listing-body-column-min: $grid-body-column-min !default;
+$grid-float-wide-listing-body-column-max: $grid-body-column-max !default;
+$grid-float-wide-listing-body: minmax(
+ $grid-float-wide-listing-body-column-min,
+ calc(
+ #{$grid-float-wide-listing-body-column-max} - #{$grid-float-wide-listing-page-gutter-start +
+ $grid-float-wide-listing-page-gutter-end}
+ )
+) !default;
+
+/* Float Mid Default Grid */
+// Margins
+$grid-float-mid-page-gutter-start: $grid-page-gutter-start !default;
+$grid-float-mid-page-gutter-end: $grid-page-gutter-end !default;
+$grid-float-mid-body-gutter-start: $grid-body-gutter-start !default;
+$grid-float-mid-body-gutter-end: $grid-body-gutter-end !default;
+$grid-float-mid-sidebar-gutter: $grid-page-gutter-float !default;
+$grid-float-mid-margin-gutter: $grid-page-gutter-float !default;
+
+// No sidebar, only margins
+$grid-float-mid-margin-width: $grid-float-margin-width !default;
+$grid-float-mid-margin-seg3: 0.2 * $grid-float-mid-margin-width !default;
+$grid-float-mid-margin-seg2: minmax(
+ #{0.3 * $grid-float-mid-margin-width},
+ #{0.6 * $grid-float-mid-margin-width}
+) !default;
+$grid-float-mid-margin-seg1: 0.1 * $grid-float-mid-margin-width !default;
+
+// Body
+$grid-float-mid-body-column-min: $grid-body-column-min !default;
+$grid-float-mid-body-column-max: $grid-body-column-max - 50px !default;
+$grid-float-mid-body: minmax(
+ $grid-float-mid-body-column-min,
+ calc(
+ #{$grid-float-mid-body-column-max} - #{$grid-float-mid-page-gutter-start + $grid-float-mid-page-gutter-end}
+ )
+) !default;
+
+/* Float Mid Slim Content Grid */
+// Margins
+$grid-float-mid-slim-page-gutter-start: $grid-page-gutter-start !default;
+$grid-float-mid-slim-page-gutter-end: $grid-page-gutter-end !default;
+$grid-float-mid-slim-body-gutter-start: 2 *
+ quarto-math.div($grid-body-gutter-start, 3) !default;
+$grid-float-mid-slim-body-gutter-end: $grid-body-gutter-end !default;
+$grid-float-mid-slim-sidebar-gutter: $grid-page-gutter-float !default;
+$grid-float-mid-slim-margin-gutter: 0.8 * $grid-page-gutter-float !default;
+
+// No sidebar, only margins
+$grid-float-mid-slim-margin-width: $grid-float-margin-width !default;
+$grid-float-mid-slim-margin-seg3: 0.14 * $grid-float-mid-slim-margin-width !default;
+$grid-float-mid-slim-margin-seg2: minmax(
+ #{0.3 * $grid-float-mid-slim-margin-width},
+ #{0.58 * $grid-float-mid-slim-margin-width}
+) !default;
+$grid-float-mid-slim-margin-seg1: 0.14 * $grid-float-mid-slim-margin-width !default;
+
+// Body
+$grid-float-mid-slim-body-column-min: $grid-body-column-min !default;
+$grid-float-mid-slim-body-column-max: $grid-body-column-max - 50px !default;
+$grid-float-mid-slim-body: minmax(
+ $grid-float-mid-slim-body-column-min,
+ calc(
+ #{$grid-float-mid-slim-body-column-max} - #{$grid-float-mid-slim-page-gutter-start +
+ $grid-float-mid-slim-page-gutter-end}
+ )
+) !default;
+
+/* Float Mid Full Content Grid */
+// Margins
+$grid-float-mid-full-page-gutter-start: $grid-page-gutter-start !default;
+$grid-float-mid-full-page-gutter-end: $grid-page-gutter-end !default;
+$grid-float-mid-full-body-gutter-start: 2 *
+ quarto-math.div($grid-body-gutter-start, 3) !default;
+$grid-float-mid-full-body-gutter-end: $grid-body-gutter-end !default;
+$grid-float-mid-full-sidebar-gutter: $grid-page-gutter-float !default;
+$grid-float-mid-full-margin-gutter: 0.8 * $grid-page-gutter-float !default;
+
+// No sidebar or margins
+
+// Body
+$grid-float-mid-full-body-column-min: $grid-body-column-min !default;
+$grid-float-mid-full-body-column-max: $grid-body-column-max !default;
+$grid-float-mid-full-body: minmax(
+ $grid-float-mid-full-body-column-min,
+ calc(
+ #{$grid-float-mid-full-body-column-max} - #{$grid-float-mid-full-page-gutter-start +
+ $grid-float-mid-full-page-gutter-end}
+ )
+) !default;
+
+/* Float Mid Listing Content Grid */
+// Margins
+$grid-float-mid-listing-page-gutter-start: $grid-page-gutter-start !default;
+$grid-float-mid-listing-page-gutter-end: $grid-page-gutter-end !default;
+$grid-float-mid-listing-body-gutter-start: 2 *
+ quarto-math.div($grid-body-gutter-start, 3) !default;
+$grid-float-mid-listing-body-gutter-end: $grid-body-gutter-end !default;
+$grid-float-mid-listing-sidebar-gutter: $grid-page-gutter-float !default;
+$grid-float-mid-listing-margin-gutter: 0.8 * $grid-page-gutter-float !default;
+
+// No sidebar, only margins
+$grid-float-mid-listing-margin-width: $grid-float-margin-width !default;
+$grid-float-mid-listing-margin-seg3: 0.2 * $grid-float-mid-listing-margin-width !default;
+$grid-float-mid-listing-margin-seg2: minmax(
+ #{0.3 * $grid-float-mid-listing-margin-width},
+ #{0.6 * $grid-float-mid-listing-margin-width}
+) !default;
+$grid-float-mid-listing-margin-seg1: 0.1 * $grid-float-mid-listing-margin-width !default;
+
+// Body
+$grid-float-mid-listing-body-column-min: $grid-body-column-min !default;
+$grid-float-mid-listing-body-column-max: $grid-body-column-max - 50px !default;
+$grid-float-mid-listing-body: minmax(
+ $grid-float-mid-listing-body-column-min,
+ calc(
+ #{$grid-float-mid-listing-body-column-max} - #{$grid-float-mid-listing-page-gutter-start +
+ $grid-float-mid-listing-page-gutter-end}
+ )
+) !default;
+
+/* DOCKED GRID */
+$grid-docked-sidebar-width: $grid-sidebar-width !default;
+$grid-docked-margin-width: $grid-margin-width !default;
+$grid-docked-body-width: $grid-body-column-max + 200px !default;
+
+/* Docked Wide Default Grid */
+
+// Margins
+$grid-docked-wide-page-gutter-start: $grid-page-gutter-start !default;
+$grid-docked-wide-page-gutter-end: $grid-page-gutter-end !default;
+$grid-docked-wide-body-gutter-start: $grid-body-gutter-start !default;
+$grid-docked-wide-body-gutter-end: $grid-body-gutter-end !default;
+$grid-docked-wide-margin-gutter: 5fr !default;
+
+// Sidebars
+$grid-docked-wide-sidebar-width: $grid-docked-sidebar-width !default;
+$grid-docked-wide-sidebar-seg1: minmax(
+ #{0.2 * $grid-docked-wide-sidebar-width},
+ #{0.4 * $grid-docked-wide-sidebar-width}
+) !default;
+$grid-docked-wide-sidebar-seg2: 0.2 * $grid-docked-wide-sidebar-width !default;
+$grid-docked-wide-sidebar-seg3: 0.2 * $grid-docked-wide-sidebar-width !default;
+
+// Margins
+$grid-docked-wide-margin-width: $grid-docked-margin-width !default;
+$grid-docked-wide-margin-seg3: 0.2 * $grid-docked-wide-margin-width !default;
+$grid-docked-wide-margin-seg2: minmax(
+ #{0.2 * $grid-docked-wide-margin-width},
+ #{0.4 * $grid-docked-wide-margin-width}
+) !default;
+$grid-docked-wide-margin-seg1: 0.2 * $grid-docked-wide-margin-width !default;
+
+// Body
+$grid-docked-wide-body-column-min: $grid-body-column-min !default;
+$grid-docked-wide-body-column-max: $grid-docked-body-width !default;
+$grid-docked-wide-body: minmax(
+ $grid-docked-wide-body-column-min,
+ calc(
+ #{$grid-docked-wide-body-column-max} - #{$grid-docked-wide-page-gutter-start +
+ $grid-docked-wide-page-gutter-end}
+ )
+) !default;
+
+/* Docked Slim Content Grid */
+
+// Margins
+$grid-docked-wide-slim-page-gutter-start: $grid-page-gutter-start !default;
+$grid-docked-wide-slim-page-gutter-end: $grid-page-gutter-end !default;
+$grid-docked-wide-slim-body-gutter-start: $grid-body-gutter-start !default;
+$grid-docked-wide-slim-body-gutter-end: $grid-body-gutter-end !default;
+$grid-docked-wide-slim-margin-gutter: 5fr !default;
+
+// Sidebars
+$grid-docked-wide-slim-sidebar-width: $grid-docked-sidebar-width !default;
+$grid-docked-wide-slim-sidebar-seg1: minmax(
+ #{0.2 * $grid-docked-wide-slim-sidebar-width},
+ #{0.4 * $grid-docked-wide-slim-sidebar-width}
+) !default;
+$grid-docked-wide-slim-sidebar-seg2: 0.2 * $grid-docked-wide-slim-sidebar-width !default;
+$grid-docked-wide-slim-sidebar-seg3: 0.2 * $grid-docked-wide-slim-sidebar-width !default;
+
+// Margins
+$grid-docked-wide-slim-margin-width: $grid-docked-margin-width !default;
+$grid-docked-wide-slim-margin-seg3: 0.2 * $grid-docked-wide-slim-margin-width !default;
+$grid-docked-wide-slim-margin-seg2: minmax(
+ #{0 * $grid-docked-wide-slim-margin-width},
+ #{0.8 * $grid-docked-wide-slim-margin-width}
+) !default;
+$grid-docked-wide-slim-margin-seg1: 0.2 * $grid-docked-wide-slim-margin-width !default;
+
+// Body
+$grid-docked-wide-slim-body-column-min: $grid-body-column-min - 50px !default;
+$grid-docked-wide-slim-body-column-max: $grid-body-column-max - 50px !default;
+$grid-docked-wide-slim-body: minmax(
+ $grid-docked-wide-slim-body-column-min,
+ calc(
+ #{$grid-docked-wide-slim-body-column-max} - #{$grid-docked-wide-slim-page-gutter-start +
+ $grid-docked-wide-slim-page-gutter-end}
+ )
+) !default;
+
+/* Docked Full Content Grid */
+
+// Margins
+$grid-docked-wide-full-page-gutter-start: $grid-page-gutter-start !default;
+$grid-docked-wide-full-body-gutter-start: $grid-body-gutter-start !default;
+$grid-docked-wide-full-body-gutter-end: $grid-body-gutter-end !default;
+$grid-docked-wide-full-margin-gutter: 5fr !default;
+$grid-docked-wide-full-page-gutter-end: $grid-page-gutter-end !default;
+
+// Sidebars
+$grid-docked-wide-full-sidebar-width: $grid-docked-sidebar-width !default;
+$grid-docked-wide-full-sidebar-seg1: minmax(
+ #{0.2 * $grid-docked-wide-full-sidebar-width},
+ #{0.4 * $grid-docked-wide-full-sidebar-width}
+) !default;
+$grid-docked-wide-full-sidebar-seg2: 0.2 * $grid-docked-wide-full-sidebar-width !default;
+$grid-docked-wide-full-sidebar-seg3: 0.2 * $grid-docked-wide-full-sidebar-width !default;
+
+// No Margins
+
+// Body
+$grid-docked-wide-full-body-column-min: $grid-body-column-min !default;
+$grid-docked-wide-full-body-column-max: $grid-docked-body-width !default;
+$grid-docked-wide-full-body: minmax(
+ $grid-docked-wide-full-body-column-min,
+ calc(
+ #{$grid-docked-wide-full-body-column-max} - #{$grid-docked-wide-full-page-gutter-start +
+ $grid-docked-wide-full-page-gutter-end}
+ )
+) !default;
+
+/* Docked Listing Grid */
+
+// Margins
+$grid-docked-wide-listing-page-gutter-start: $grid-page-gutter-start !default;
+$grid-docked-wide-listing-body-gutter-start: $grid-body-gutter-start !default;
+$grid-docked-wide-listing-body-gutter-end: $grid-body-gutter-end !default;
+$grid-docked-wide-listing-margin-gutter: 5fr !default;
+$grid-docked-wide-listing-page-gutter-end: $grid-page-gutter-end !default;
+
+// Sidebars
+$grid-docked-wide-listing-sidebar-width: $grid-docked-sidebar-width !default;
+$grid-docked-wide-listing-sidebar-seg1: minmax(
+ #{0.2 * $grid-docked-wide-listing-sidebar-width},
+ #{0.4 * $grid-docked-wide-listing-sidebar-width}
+) !default;
+$grid-docked-wide-listing-sidebar-seg2: 0.2 *
+ $grid-docked-wide-listing-sidebar-width !default;
+$grid-docked-wide-listing-sidebar-seg3: 0.2 *
+ $grid-docked-wide-listing-sidebar-width !default;
+
+// Margins
+$grid-docked-wide-listing-margin-width: $grid-docked-margin-width !default;
+$grid-docked-wide-listing-margin-seg3: 0.2 *
+ $grid-docked-wide-listing-margin-width !default;
+$grid-docked-wide-listing-margin-seg2: minmax(
+ #{0 * $grid-docked-wide-listing-margin-width},
+ #{0.8 * $grid-docked-wide-listing-margin-width}
+) !default;
+$grid-docked-wide-listing-margin-seg1: 0.2 *
+ $grid-docked-wide-listing-margin-width !default;
+
+// Body
+$grid-docked-wide-listing-body-column-min: $grid-body-column-min !default;
+$grid-docked-wide-listing-body-column-max: $grid-docked-body-width !default;
+$grid-docked-wide-listing-body: minmax(
+ $grid-docked-wide-listing-body-column-min,
+ calc(
+ #{$grid-docked-wide-listing-body-column-max} - #{$grid-docked-wide-listing-page-gutter-start +
+ $grid-docked-wide-listing-page-gutter-end}
+ )
+) !default;
+
+/* Docked Mid Default Grid */
+// Margins
+$grid-docked-mid-page-gutter-start: $grid-page-gutter-start !default;
+$grid-docked-mid-body-gutter-start: $grid-body-gutter-start !default;
+$grid-docked-mid-body-gutter-end: $grid-body-gutter-end !default;
+$grid-docked-mid-margin-gutter: 5fr !default;
+$grid-docked-mid-page-gutter-end: $grid-page-gutter-end !default;
+
+// No sidebar, only margins
+$grid-docked-mid-margin-width: $grid-docked-margin-width !default;
+$grid-docked-mid-margin-seg3: 0.2 * $grid-docked-mid-margin-width !default;
+$grid-docked-mid-margin-seg2: minmax(
+ #{0.1 * $grid-docked-mid-margin-width},
+ #{0.2 * $grid-docked-mid-margin-width}
+) !default;
+$grid-docked-mid-margin-seg1: 0.2 * $grid-docked-mid-margin-width !default;
+
+// Body
+$grid-docked-mid-body-column-min: $grid-body-column-min !default;
+$grid-docked-mid-body-column-max: $grid-body-column-max - 50px !default;
+$grid-docked-mid-body: minmax(
+ $grid-docked-mid-body-column-min,
+ calc(
+ #{$grid-docked-mid-body-column-max} - #{$grid-docked-mid-page-gutter-start +
+ $grid-docked-mid-page-gutter-end}
+ )
+) !default;
+
+/* Docked Mid Slim Content Grid */
+// Margins
+$grid-docked-mid-slim-page-gutter-start: $grid-page-gutter-start !default;
+$grid-docked-mid-slim-body-gutter-start: $grid-body-gutter-start !default;
+$grid-docked-mid-slim-body-gutter-end: $grid-body-gutter-end !default;
+$grid-docked-mid-slim-margin-gutter: 5fr !default;
+$grid-docked-mid-slim-page-gutter-end: $grid-page-gutter-end !default;
+
+// No sidebar, only margins
+$grid-docked-mid-slim-margin-width: $grid-docked-margin-width !default;
+$grid-docked-mid-slim-margin-seg3: 0.2 * $grid-docked-mid-slim-margin-width !default;
+$grid-docked-mid-slim-margin-seg2: minmax(
+ #{0.1 * $grid-docked-mid-slim-margin-width},
+ #{0.2 * $grid-docked-mid-slim-margin-width}
+) !default;
+$grid-docked-mid-slim-margin-seg1: 0.2 * $grid-docked-mid-slim-margin-width !default;
+
+// Body
+$grid-docked-mid-slim-body-column-min: $grid-body-column-min !default;
+$grid-docked-mid-slim-body-column-max: $grid-body-column-max - 50px !default;
+$grid-docked-mid-slim-body: minmax(
+ $grid-docked-mid-slim-body-column-min,
+ calc(
+ #{$grid-docked-mid-slim-body-column-max} - #{$grid-docked-mid-slim-page-gutter-start +
+ $grid-docked-mid-slim-page-gutter-end}
+ )
+) !default;
+
+/* Docked Mid Full Content Grid */
+// Margins
+$grid-docked-mid-full-page-gutter-start: $grid-page-gutter-start !default;
+$grid-docked-mid-full-body-gutter-start: $grid-body-gutter-start !default;
+$grid-docked-mid-full-body-gutter-end: $grid-body-gutter-end !default;
+$grid-docked-mid-full-margin-gutter: 5fr !default;
+$grid-docked-mid-full-page-gutter-end: $grid-page-gutter-end !default;
+
+// No sidebar or margins
+
+// Body
+$grid-docked-mid-full-body-column-min: $grid-body-column-min !default;
+$grid-docked-mid-full-body-column-max: $grid-docked-body-width !default;
+$grid-docked-mid-full-body: minmax(
+ $grid-docked-mid-full-body-column-min,
+ calc(
+ #{$grid-docked-mid-full-body-column-max} - #{$grid-docked-mid-full-page-gutter-start +
+ $grid-docked-mid-full-page-gutter-end}
+ )
+) !default;
+
+/* Float Mid Listing Content Grid */
+// Margins
+$grid-docked-mid-listing-page-gutter-start: $grid-page-gutter-start !default;
+$grid-docked-mid-listing-body-gutter-start: $grid-body-gutter-start !default;
+$grid-docked-mid-listing-body-gutter-end: $grid-body-gutter-end !default;
+$grid-docked-mid-listing-margin-gutter: $grid-page-gutter-float !default;
+$grid-docked-mid-listing-page-gutter-end: $grid-page-gutter-end !default;
+
+// No sidebar, only margins
+$grid-docked-mid-listing-margin-width: $grid-docked-margin-width !default;
+$grid-docked-mid-listing-margin-seg3: 0.2 *
+ $grid-docked-mid-listing-margin-width !default;
+$grid-docked-mid-listing-margin-seg2: minmax(
+ #{0.3 * $grid-docked-mid-listing-margin-width},
+ #{0.6 * $grid-docked-mid-listing-margin-width}
+) !default;
+$grid-docked-mid-listing-margin-seg1: 0.1 *
+ $grid-docked-mid-listing-margin-width !default;
+
+// Body
+$grid-docked-mid-listing-body-column-min: $grid-body-column-min !default;
+$grid-docked-mid-listing-body-column-max: $grid-body-column-max - 50px !default;
+$grid-docked-mid-listing-body: minmax(
+ $grid-docked-mid-listing-body-column-min,
+ calc(
+ #{$grid-docked-mid-listing-body-column-max} - #{$grid-docked-mid-listing-page-gutter-start +
+ $grid-docked-mid-listing-page-gutter-end}
+ )
+) !default;
+
+/* DEFAULT (HTML PAGE, NOT IN WEBSITE) GRID */
+$grid-default-sidebar-width: $grid-sidebar-width !default;
+$grid-default-margin-width: $grid-margin-width !default;
+$grid-default-body-width: $grid-body-column-max + 50px !default;
+
+/* Default Wide Grid */
+// Margins
+$grid-default-wide-page-gutter-start: $grid-page-gutter-start !default;
+$grid-default-wide-sidebar-gutter: 5fr !default;
+$grid-default-wide-body-gutter-start: $grid-body-gutter-start !default;
+$grid-default-wide-body-gutter-end: $grid-body-gutter-end !default;
+$grid-default-wide-margin-gutter: 5fr !default;
+$grid-default-wide-page-gutter-end: $grid-page-gutter-end !default;
+
+// Sidebars
+$grid-default-wide-sidebar-width: $grid-default-sidebar-width !default;
+$grid-default-wide-sidebar-seg1: 0.14 * $grid-default-wide-sidebar-width !default;
+$grid-default-wide-sidebar-seg2: 0.14 * $grid-default-wide-sidebar-width !default;
+
+// Margins
+$grid-default-wide-margin-width: $grid-default-margin-width !default;
+$grid-default-wide-margin-seg3: 0.14 * $grid-default-wide-margin-width !default;
+$grid-default-wide-margin-seg2: minmax(
+ #{0.3 * $grid-default-wide-margin-width},
+ #{0.58 * $grid-default-wide-margin-width}
+) !default;
+$grid-default-wide-margin-seg1: 0.14 * $grid-default-wide-margin-width !default;
+
+// Body
+$grid-default-wide-body-column-min: $grid-body-column-min !default;
+$grid-default-wide-body-column-max: $grid-default-body-width !default;
+$grid-default-wide-body: minmax(
+ $grid-default-wide-body-column-min,
+ calc(
+ #{$grid-default-wide-body-column-max} - #{$grid-default-wide-page-gutter-start +
+ $grid-default-wide-page-gutter-end}
+ )
+) !default;
+
+/* Default Mid Grid */
+// Margins
+$grid-default-mid-page-gutter-start: $grid-page-gutter-start !default;
+$grid-default-mid-sidebar-gutter: 5fr !default;
+$grid-default-mid-body-gutter-start: $grid-body-gutter-start !default;
+$grid-default-mid-body-gutter-end: $grid-body-gutter-end !default;
+$grid-default-mid-margin-gutter: 5fr !default;
+$grid-default-mid-page-gutter-end: $grid-page-gutter-end !default;
+
+// Sidebars
+$grid-default-mid-sidebar-width: $grid-default-sidebar-width !default;
+$grid-default-mid-sidebar-seg1: 0.14 * $grid-default-mid-sidebar-width !default;
+$grid-default-mid-sidebar-seg2: 0.14 * $grid-default-mid-sidebar-width !default;
+
+// Margins
+$grid-default-mid-margin-width: $grid-default-margin-width !default;
+$grid-default-mid-margin-seg3: 0.14 * $grid-default-mid-margin-width !default;
+$grid-default-mid-margin-seg2: minmax(
+ #{0.3 * $grid-default-mid-margin-width},
+ #{0.58 * $grid-default-mid-margin-width}
+) !default;
+$grid-default-mid-margin-seg1: 0.14 * $grid-default-mid-margin-width !default;
+
+// Body
+$grid-default-mid-body-column-min: $grid-body-column-min !default;
+$grid-default-mid-body-column-max: $grid-default-body-width - 50px !default;
+$grid-default-mid-body: minmax(
+ $grid-default-mid-body-column-min,
+ calc(
+ #{$grid-default-mid-body-column-max} - #{$grid-default-mid-page-gutter-start +
+ $grid-default-mid-page-gutter-end}
+ )
+) !default;
+
+/* Full Content Wide Grid */
+// Margins
+$grid-default-full-wide-page-gutter-start: $grid-page-gutter-start !default;
+$grid-default-full-wide-sidebar-gutter: 5fr !default;
+$grid-default-full-wide-body-gutter-start: $grid-body-gutter-start !default;
+$grid-default-full-wide-body-gutter-end: $grid-body-gutter-end !default;
+$grid-default-full-wide-margin-gutter: 5fr !default;
+$grid-default-full-wide-page-gutter-end: $grid-page-gutter-end !default;
+
+// Sidebars
+$grid-default-full-wide-sidebar-width: $grid-default-sidebar-width !default;
+$grid-default-full-wide-sidebar-seg1: 0.14 *
+ $grid-default-full-wide-sidebar-width !default;
+$grid-default-full-wide-sidebar-seg2: 0.14 *
+ $grid-default-full-wide-sidebar-width !default;
+
+// Margins
+$grid-default-full-wide-margin-width: $grid-default-margin-width !default;
+$grid-default-full-wide-margin-seg2: 0.14 * $grid-default-full-wide-margin-width !default;
+$grid-default-full-wide-margin-seg1: 0.14 * $grid-default-full-wide-margin-width !default;
+
+// Body
+$grid-default-full-wide-body-column-min: $grid-body-column-min !default;
+$grid-default-full-wide-body-column-max: $grid-default-body-width !default;
+$grid-default-full-wide-body: minmax(
+ $grid-default-full-wide-body-column-min,
+ calc(
+ #{$grid-default-full-wide-body-column-max} - #{$grid-default-full-wide-page-gutter-start +
+ $grid-default-full-wide-page-gutter-end}
+ )
+) !default;
+
+/* Full Content Mid Grid */
+// Margins
+$grid-default-full-mid-page-gutter-start: $grid-page-gutter-start !default;
+$grid-default-full-mid-sidebar-gutter: 5fr !default;
+$grid-default-full-mid-body-gutter-start: $grid-body-gutter-start !default;
+$grid-default-full-mid-body-gutter-end: $grid-body-gutter-end !default;
+$grid-default-full-mid-margin-gutter: 5fr !default;
+$grid-default-full-mid-page-gutter-end: $grid-page-gutter-end !default;
+
+// No margins or sidebars
+
+// Body
+$grid-default-full-mid-body-column-min: $grid-body-column-min !default;
+$grid-default-full-mid-body-column-max: $grid-default-body-width - 50px !default;
+$grid-default-full-mid-body: minmax(
+ $grid-default-full-mid-body-column-min,
+ calc(
+ #{$grid-default-full-mid-body-column-max} - #{$grid-default-full-mid-page-gutter-start +
+ $grid-default-full-mid-page-gutter-end}
+ )
+) !default;
+
+/* Listing Wide Grid */
+// Margins
+$grid-default-listing-wide-page-gutter-start: $grid-page-gutter-start !default;
+$grid-default-listing-wide-sidebar-gutter: 5fr !default;
+$grid-default-listing-wide-body-gutter-start: $grid-body-gutter-start !default;
+$grid-default-listing-wide-body-gutter-end: 2 * $grid-body-gutter-end !default;
+$grid-default-listing-wide-margin-gutter: 1fr !default;
+$grid-default-listing-wide-page-gutter-end: $grid-page-gutter-end !default;
+
+// Sidebars
+$grid-default-listing-wide-sidebar-width: $grid-default-sidebar-width !default;
+$grid-default-listing-wide-sidebar-seg1: minmax(
+ #{0.2 * $grid-default-listing-wide-sidebar-width},
+ #{0.4 * $grid-default-listing-wide-sidebar-width}
+) !default;
+$grid-default-listing-wide-sidebar-seg2: 0.2 *
+ $grid-default-listing-wide-sidebar-width !default;
+$grid-default-listing-wide-sidebar-seg3: 0.2 *
+ $grid-default-listing-wide-sidebar-width !default;
+
+// Margins
+$grid-default-listing-wide-margin-width: $grid-default-margin-width !default;
+$grid-default-listing-wide-sidebar-seg3: 0.2 *
+ $grid-default-listing-wide-margin-width !default;
+$grid-default-listing-wide-margin-seg2: minmax(
+ #{0 * $grid-default-listing-wide-margin-width},
+ #{1 * $grid-default-listing-wide-margin-width}
+) !default;
+$grid-default-listing-wide-margin-seg1: 0.2 *
+ $grid-default-listing-wide-margin-width !default;
+
+// Body
+$grid-default-listing-wide-body-column-min: $grid-body-column-min !default;
+$grid-default-listing-wide-body-column-max: $grid-default-body-width !default;
+$grid-default-listing-wide-body: minmax(
+ $grid-default-listing-wide-body-column-min,
+ calc(
+ #{$grid-default-listing-wide-body-column-max} - #{$grid-default-listing-wide-page-gutter-start +
+ $grid-default-listing-wide-page-gutter-end}
+ )
+) !default;
+
+/* Listing Mid Grid */
+// Margins
+$grid-default-listing-mid-page-gutter-start: $grid-page-gutter-start !default;
+$grid-default-listing-mid-sidebar-gutter: 5fr !default;
+$grid-default-listing-mid-body-gutter-start: $grid-body-gutter-start !default;
+$grid-default-listing-mid-body-gutter-end: $grid-body-gutter-end !default;
+$grid-default-listing-mid-margin-gutter: 5fr !default;
+$grid-default-listing-mid-page-gutter-end: $grid-page-gutter-end !default;
+
+// No margins or sidebars
+
+// Body
+$grid-default-listing-mid-body-column-min: $grid-body-column-min !default;
+$grid-default-listing-mid-body-column-max: $grid-default-body-width + 400px !default;
+$grid-default-listing-mid-body: minmax(
+ $grid-default-listing-mid-body-column-min,
+ calc(
+ #{$grid-default-listing-mid-body-column-max} - #{$grid-default-listing-mid-page-gutter-start +
+ $grid-default-listing-mid-page-gutter-end}
+ )
+) !default;
+
+/* Slim Wide Grid */
+// Margins
+$grid-default-slim-wide-page-gutter-start: $grid-page-gutter-start !default;
+$grid-default-slim-wide-sidebar-gutter: 5fr !default;
+$grid-default-slim-wide-body-gutter-start: $grid-body-gutter-start !default;
+$grid-default-slim-wide-body-gutter-end: $grid-body-gutter-end !default;
+$grid-default-slim-wide-margin-gutter: 5fr !default;
+$grid-default-slim-wide-page-gutter-end: $grid-page-gutter-end !default;
+
+// Sidebars
+$grid-default-slim-wide-sidebar-width: $grid-default-sidebar-width !default;
+$grid-default-slim-wide-sidebar-seg1: 0.14 *
+ $grid-default-slim-wide-sidebar-width !default;
+$grid-default-slim-wide-sidebar-seg2: 0.14 *
+ $grid-default-slim-wide-sidebar-width !default;
+
+// Margins
+$grid-default-slim-wide-margin-width: $grid-default-margin-width !default;
+$grid-default-slim-wide-sidebar-seg3: 0.2 * $grid-default-slim-wide-margin-width !default;
+$grid-default-slim-wide-margin-seg2: minmax(
+ #{0 * $grid-default-slim-wide-margin-width},
+ #{0.8 * $grid-default-slim-wide-margin-width}
+) !default;
+$grid-default-slim-wide-margin-seg1: 0.2 * $grid-default-slim-wide-margin-width !default;
+
+// Body
+$grid-default-slim-wide-body-column-min: $grid-body-column-min !default;
+$grid-default-slim-wide-body-column-max: $grid-default-body-width !default;
+$grid-default-slim-wide-body: minmax(
+ $grid-default-slim-wide-body-column-min,
+ calc(
+ #{$grid-default-slim-wide-body-column-max} - #{$grid-default-slim-wide-page-gutter-start +
+ $grid-default-slim-wide-page-gutter-end}
+ )
+) !default;
+
+/* Slim Mid Grid */
+// Margins
+$grid-default-slim-mid-page-gutter-start: $grid-page-gutter-start !default;
+$grid-default-slim-mid-sidebar-gutter: 5fr !default;
+$grid-default-slim-mid-body-gutter-start: $grid-body-gutter-start !default;
+$grid-default-slim-mid-body-gutter-end: $grid-body-gutter-end !default;
+$grid-default-slim-mid-margin-gutter: 5fr !default;
+$grid-default-slim-mid-page-gutter-end: $grid-page-gutter-end !default;
+
+// Margins
+$grid-default-slim-mid-margin-width: $grid-default-margin-width !default;
+$grid-default-slim-mid-margin-seg3: 0.14 * $grid-default-slim-mid-margin-width !default;
+$grid-default-slim-mid-margin-seg2: minmax(
+ #{0.3 * $grid-default-slim-mid-margin-width},
+ #{0.58 * $grid-default-slim-mid-margin-width}
+) !default;
+$grid-default-slim-mid-margin-seg1: 0.14 * $grid-default-slim-mid-margin-width !default;
+
+// Body
+$grid-default-slim-mid-body-column-min: $grid-body-column-min !default;
+$grid-default-slim-mid-body-column-max: $grid-default-body-width - 50px !default;
+$grid-default-slim-mid-body: minmax(
+ $grid-default-slim-mid-body-column-min,
+ calc(
+ #{$grid-default-slim-mid-body-column-max} - #{$grid-default-slim-mid-page-gutter-start +
+ $grid-default-slim-mid-page-gutter-end}
+ )
+) !default;
+
+/* TOC Wide Grid */
+// Margins
+$grid-default-toc-wide-page-gutter-start: $grid-page-gutter-start !default;
+$grid-default-toc-wide-sidebar-gutter: 5fr !default;
+$grid-default-toc-wide-body-gutter-start: $grid-body-gutter-start !default;
+$grid-default-toc-wide-body-gutter-end: $grid-body-gutter-end !default;
+$grid-default-toc-wide-margin-gutter: 5fr !default;
+$grid-default-toc-wide-page-gutter-end: $grid-page-gutter-end !default;
+
+// Sidebars
+$grid-default-toc-wide-sidebar-width: $grid-default-sidebar-width !default;
+$grid-default-toc-wide-sidebar-seg1: 0.14 * $grid-default-toc-wide-sidebar-width !default;
+$grid-default-toc-wide-sidebar-seg2: minmax(
+ #{0 * $grid-default-toc-wide-sidebar-width},
+ #{0.7 * $grid-default-toc-wide-sidebar-width}
+) !default;
+$grid-default-toc-wide-sidebar-seg3: 0.14 * $grid-default-toc-wide-sidebar-width !default;
+
+// Margins
+$grid-default-toc-wide-margin-width: $grid-default-margin-width !default;
+$grid-default-toc-wide-margin-seg3: 0.2 * $grid-default-toc-wide-margin-width !default;
+$grid-default-toc-wide-margin-seg2: minmax(
+ #{0 * $grid-default-toc-wide-margin-width},
+ #{0.8 * $grid-default-toc-wide-margin-width}
+) !default;
+$grid-default-toc-wide-margin-seg1: 0.2 * $grid-default-toc-wide-margin-width !default;
+
+// Body
+$grid-default-toc-wide-body-column-min: $grid-body-column-min - 50px !default;
+$grid-default-toc-wide-body-column-max: $grid-default-body-width - 50px !default;
+$grid-default-toc-wide-body: minmax(
+ $grid-default-toc-wide-body-column-min,
+ calc(
+ #{$grid-default-toc-wide-body-column-max} - #{$grid-default-toc-wide-page-gutter-start +
+ $grid-default-toc-wide-page-gutter-end}
+ )
+) !default;
+
+/* TOC Mid Grid */
+// Margins
+$grid-default-toc-mid-page-gutter-start: $grid-page-gutter-start !default;
+$grid-default-toc-mid-sidebar-gutter: 5fr !default;
+$grid-default-toc-mid-body-gutter-start: $grid-body-gutter-start !default;
+$grid-default-toc-mid-body-gutter-end: $grid-body-gutter-end !default;
+$grid-default-toc-mid-margin-gutter: 5fr !default;
+$grid-default-toc-mid-page-gutter-end: $grid-page-gutter-end !default;
+
+// Margins
+$grid-default-toc-mid-sidebar-width: $grid-default-sidebar-width !default;
+$grid-default-toc-mid-sidebar-seg1: 0.14 * $grid-default-toc-mid-sidebar-width !default;
+$grid-default-toc-mid-sidebar-seg2: minmax(
+ #{0 * $grid-default-toc-mid-sidebar-width},
+ #{0.58 * $grid-default-toc-mid-sidebar-width}
+) !default;
+$grid-default-toc-mid-sidebar-seg3: 0.14 * $grid-default-toc-mid-sidebar-width !default;
+
+// Body
+$grid-default-toc-mid-body-column-min: $grid-body-column-min - 50px !default;
+$grid-default-toc-mid-body-column-max: $grid-default-body-width - 50px !default;
+$grid-default-toc-mid-body: minmax(
+ $grid-default-toc-mid-body-column-min,
+ calc(
+ #{$grid-default-toc-mid-body-column-max} - #{$grid-default-toc-mid-page-gutter-start +
+ $grid-default-toc-mid-page-gutter-end}
+ )
+) !default;
+
+// Floating Grid Definitions
+@mixin page-columns-float-wide {
+ @include page-columns();
+ grid-template-columns:
+ [screen-start] $grid-float-wide-page-gutter-start
+ [screen-start-inset] $grid-float-wide-sidebar-gutter
+ [page-start] $grid-float-wide-sidebar-seg1
+ [page-start-inset] $grid-float-wide-sidebar-seg2
+ [body-start-outset] $grid-float-wide-sidebar-seg3
+ [body-start] $grid-float-wide-body-gutter-start
+ [body-content-start] $grid-float-wide-body
+ [body-content-end] $grid-float-wide-body-gutter-end
+ [body-end] $grid-float-wide-margin-seg3
+ [body-end-outset] $grid-float-wide-margin-seg2
+ [page-end-inset] $grid-float-wide-margin-seg1
+ [page-end] $grid-float-wide-margin-gutter
+ [screen-end-inset] $grid-float-wide-page-gutter-end
+ [screen-end];
+}
+
+@mixin page-columns-float-slimcontent-wide {
+ @include page-columns();
+ grid-template-columns:
+ [screen-start] $grid-float-wide-slim-page-gutter-start
+ [screen-start-inset] $grid-float-wide-slim-sidebar-gutter
+ [page-start] $grid-float-wide-slim-sidebar-seg1
+ [page-start-inset] $grid-float-wide-slim-sidebar-seg2
+ [body-start-outset] $grid-float-wide-slim-sidebar-seg3
+ [body-start] $grid-float-wide-slim-body-gutter-start
+ [body-content-start] $grid-float-wide-slim-body
+ [body-content-end] $grid-float-wide-slim-body-gutter-end
+ [body-end] $grid-float-wide-slim-margin-seg3
+ [body-end-outset] $grid-float-wide-slim-margin-seg2
+ [page-end-inset] $grid-float-wide-slim-margin-seg1
+ [page-end] $grid-float-wide-slim-margin-gutter
+ [screen-end-inset] $grid-float-wide-slim-page-gutter-end
+ [screen-end];
+}
+
+@mixin page-columns-float-fullcontent-wide {
+ @include page-columns();
+ grid-template-columns:
+ [screen-start] $grid-float-wide-full-page-gutter-start
+ [screen-start-inset] $grid-float-wide-full-sidebar-gutter
+ [page-start] $grid-float-wide-full-sidebar-seg1
+ [page-start-inset] $grid-float-wide-full-sidebar-seg2
+ [body-start-outset] $grid-float-wide-full-sidebar-seg3
+ [body-start] $grid-float-wide-full-body-gutter-start
+ [body-content-start] $grid-float-wide-full-body
+ [body-content-end] $grid-float-wide-full-body-gutter-end
+ [body-end body-end-outset page-end-inset page-end] $grid-float-wide-full-margin-gutter
+ [screen-end-inset] $grid-float-wide-full-page-gutter-end
+ [screen-end];
+}
+
+@mixin page-columns-float-listing-wide {
+ @include page-columns();
+ grid-template-columns:
+ [screen-start] $grid-float-wide-listing-page-gutter-start
+ [screen-start-inset] $grid-float-wide-listing-sidebar-gutter
+ [page-start] $grid-float-wide-listing-sidebar-seg1
+ [page-start-inset] $grid-float-wide-listing-sidebar-seg2
+ [body-start-outset] $grid-float-wide-listing-sidebar-seg3
+ [body-start] $grid-float-wide-listing-body-gutter-start
+ [body-content-start] $grid-float-wide-listing-body
+ [body-content-end] $grid-float-wide-listing-body-gutter-end
+ [body-end] $grid-float-wide-listing-margin-seg3
+ [body-end-outset] $grid-float-wide-listing-margin-seg2
+ [page-end-inset] $grid-float-wide-listing-margin-seg1
+ [page-end] $grid-float-wide-listing-margin-gutter
+ [screen-end-inset] $grid-float-wide-listing-page-gutter-end
+ [screen-end];
+}
+
+// medium 976 down
+@mixin page-columns-float-mid {
+ @include page-columns();
+ grid-template-columns:
+ [screen-start] $grid-float-mid-page-gutter-start
+ [screen-start-inset] $grid-float-mid-sidebar-gutter
+ [page-start page-start-inset body-start-outset body-start] $grid-float-mid-body-gutter-start
+ [body-content-start] $grid-float-mid-body
+ [body-content-end] $grid-float-mid-body-gutter-end
+ [body-end] $grid-float-mid-margin-seg3
+ [body-end-outset] $grid-float-mid-margin-seg2
+ [page-end-inset] $grid-float-mid-margin-seg1
+ [page-end] $grid-float-mid-margin-gutter
+ [screen-end-inset] $grid-float-mid-page-gutter-end
+ [screen-end];
+}
+
+@mixin page-columns-float-slimcontent-mid {
+ @include page-columns();
+ grid-template-columns:
+ [screen-start] $grid-float-mid-slim-page-gutter-start
+ [screen-start-inset] $grid-float-mid-slim-sidebar-gutter
+ [page-start page-start-inset body-start-outset body-start] $grid-float-mid-slim-body-gutter-start
+ [body-content-start] $grid-float-mid-slim-body
+ [body-content-end] $grid-float-mid-slim-body-gutter-end
+ [body-end] $grid-float-mid-slim-margin-seg3
+ [body-end-outset] $grid-float-mid-slim-margin-seg2
+ [page-end-inset] $grid-float-mid-slim-margin-seg1
+ [page-end] $grid-float-mid-slim-margin-gutter
+ [screen-end-inset] $grid-float-mid-slim-page-gutter-end
+ [screen-end];
+}
+
+@mixin page-columns-float-fullcontent-mid {
+ @include page-columns();
+ grid-template-columns:
+ [screen-start] $grid-float-mid-full-page-gutter-start
+ [screen-start-inset] $grid-float-mid-full-sidebar-gutter
+ [page-start page-start-inset body-start-outset body-start] $grid-float-mid-full-body-gutter-start
+ [body-content-start] $grid-float-mid-full-body
+ [body-content-end]$grid-float-mid-full-body-gutter-end
+ [body-end body-end-outset page-end-inset page-end] $grid-float-mid-full-margin-gutter
+ [screen-end-inset] $grid-float-mid-full-page-gutter-end
+ [screen-end];
+}
+
+@mixin page-columns-float-listing-mid {
+ @include page-columns();
+ grid-template-columns:
+ [screen-start] $grid-float-mid-listing-page-gutter-start
+ [screen-start-inset] $grid-float-mid-listing-sidebar-gutter
+ [page-start page-start-inset body-start-outset body-start] $grid-float-mid-listing-body-gutter-start
+ [body-content-start] $grid-float-mid-listing-body
+ [body-content-end] $grid-float-mid-listing-body-gutter-end
+ [body-end] $grid-float-mid-listing-margin-seg3
+ [body-end-outset] $grid-float-mid-listing-margin-seg2
+ [page-end-inset] $grid-float-mid-listing-margin-seg1
+ [page-end] $grid-float-mid-listing-margin-gutter
+ [screen-end-inset] $grid-float-mid-listing-page-gutter-end
+ [screen-end];
+}
+
+// Docked Grid Definitions
+@mixin page-columns-docked-wide {
+ @include page-columns();
+ grid-template-columns:
+ [screen-start] $grid-docked-wide-page-gutter-start
+ [screen-start-inset page-start] $grid-docked-wide-sidebar-seg1
+ [page-start-inset] $grid-docked-wide-sidebar-seg2
+ [body-start-outset] $grid-docked-wide-sidebar-seg3
+ [body-start] $grid-docked-wide-body-gutter-start
+ [body-content-start] $grid-docked-wide-body
+ [body-content-end] $grid-docked-wide-body-gutter-end
+ [body-end] $grid-docked-wide-margin-seg3
+ [body-end-outset] $grid-docked-wide-margin-seg2
+ [page-end-inset] $grid-docked-wide-margin-seg1
+ [page-end] $grid-docked-wide-margin-gutter
+ [screen-end-inset] $grid-docked-wide-page-gutter-end
+ [screen-end];
+}
+
+@mixin page-columns-docked-slimcontent-wide {
+ @include page-columns();
+ grid-template-columns:
+ [screen-start] $grid-docked-wide-slim-page-gutter-start
+ [screen-start-inset page-start] $grid-docked-wide-slim-sidebar-seg1
+ [page-start-inset] $grid-docked-wide-slim-sidebar-seg2
+ [body-start-outset] $grid-docked-wide-slim-sidebar-seg3
+ [body-start] $grid-docked-wide-slim-body-gutter-start
+ [body-content-start] $grid-docked-wide-slim-body
+ [body-content-end] $grid-docked-wide-slim-body-gutter-end
+ [body-end] $grid-docked-wide-slim-margin-seg3
+ [body-end-outset] $grid-docked-wide-slim-margin-seg2
+ [page-end-inset] $grid-docked-wide-slim-margin-seg1
+ [page-end] $grid-docked-wide-slim-margin-gutter
+ [screen-end-inset] $grid-docked-wide-slim-page-gutter-end
+ [screen-end];
+}
+
+@mixin page-columns-docked-fullcontent-wide {
+ @include page-columns();
+ grid-template-columns:
+ [screen-start] $grid-docked-wide-full-page-gutter-start
+ [screen-start-inset page-start] $grid-docked-wide-full-sidebar-seg1
+ [page-start-inset] $grid-docked-wide-full-sidebar-seg2
+ [body-start-outset] $grid-docked-wide-full-sidebar-seg3
+ [body-start] $grid-docked-wide-full-body-gutter-start
+ [body-content-start] $grid-docked-wide-full-body
+ [body-content-end] $grid-docked-wide-full-body-gutter-end
+ [body-end body-end-outset page-end-inset page-end] $grid-docked-wide-full-margin-gutter
+ [screen-end-inset] $grid-docked-wide-full-page-gutter-end
+ [screen-end];
+}
+
+@mixin page-columns-docked-listing-wide {
+ @include page-columns();
+ grid-template-columns:
+ [screen-start] $grid-docked-wide-listing-page-gutter-start
+ [screen-start-inset page-start] $grid-docked-wide-listing-sidebar-seg1
+ [page-start-inset] $grid-docked-wide-listing-sidebar-seg2
+ [body-start-outset] $grid-docked-wide-listing-sidebar-seg3
+ [body-start] $grid-docked-wide-listing-body-gutter-start
+ [body-content-start] $grid-docked-wide-listing-body
+ [body-content-end] $grid-docked-wide-listing-body-gutter-end
+ [body-end] $grid-docked-wide-listing-margin-seg3
+ [body-end-outset] $grid-docked-wide-listing-margin-seg2
+ [page-end-inset] $grid-docked-wide-listing-margin-seg1
+ [page-end] $grid-docked-wide-listing-margin-gutter
+ [screen-end-inset] $grid-docked-wide-listing-page-gutter-end
+ [screen-end];
+}
+
+@mixin page-columns-docked-mid {
+ @include page-columns();
+ grid-template-columns:
+ [screen-start] $grid-docked-mid-page-gutter-start
+ [screen-start-inset page-start page-start-inset body-start-outset body-start body-content-start] $grid-docked-mid-body
+ [body-content-end] $grid-docked-mid-body-gutter-end
+ [body-end] $grid-docked-mid-margin-seg3
+ [body-end-outset] $grid-docked-mid-margin-seg2
+ [page-end-inset] $grid-docked-mid-margin-seg1
+ [page-end] $grid-docked-mid-margin-gutter
+ [screen-end-inset] $grid-docked-mid-page-gutter-end
+ [screen-end];
+}
+
+@mixin page-columns-docked-slimcontent-mid {
+ @include page-columns();
+ grid-template-columns:
+ [screen-start] $grid-docked-mid-slim-page-gutter-start
+ [screen-start-inset page-start page-start-inset body-start-outset body-start body-content-start] $grid-docked-mid-slim-body
+ [body-content-end] $grid-docked-mid-slim-body-gutter-end
+ [body-end] $grid-docked-mid-slim-margin-seg3
+ [body-end-outset] $grid-docked-mid-slim-margin-seg2
+ [page-end-inset] $grid-docked-mid-slim-margin-seg1
+ [page-end] $grid-docked-mid-slim-margin-gutter
+ [screen-end-inset] $grid-docked-mid-slim-page-gutter-end
+ [screen-end];
+}
+
+@mixin page-columns-docked-fullcontent-mid {
+ @include page-columns();
+ grid-template-columns:
+ [screen-start] $grid-docked-mid-full-page-gutter-start
+ [screen-start-inset page-start page-start-inset body-start-outset body-start body-content-start] $grid-docked-mid-full-body
+ [body-content-end] $grid-docked-mid-full-body-gutter-end
+ [body-end body-end-outset page-end-inset page-end] $grid-docked-mid-full-margin-gutter
+ [screen-end-inset] $grid-docked-mid-full-page-gutter-end
+ [screen-end];
+}
+
+@mixin page-columns-docked-listing-mid {
+ @include page-columns();
+ grid-template-columns:
+ [screen-start] $grid-docked-mid-listing-page-gutter-start
+ [screen-start-inset page-start page-start-inset body-start-outset body-start body-content-start] $grid-docked-mid-listing-body
+ [body-content-end] $grid-docked-mid-listing-body-gutter-start
+ [body-end] $grid-docked-mid-slim-margin-seg3
+ [body-end-outset] $grid-docked-mid-slim-margin-seg2
+ [page-end-inset] $grid-docked-mid-slim-margin-seg1
+ [page-end] $grid-docked-mid-listing-margin-gutter
+ [screen-end-inset] $grid-docked-mid-listing-page-gutter-end
+ [screen-end];
+}
+
+// Plain Grid Definitions
+@mixin page-columns-default-wide {
+ @include page-columns();
+ grid-template-columns:
+ [screen-start] $grid-default-wide-page-gutter-start
+ [screen-start-inset] $grid-default-wide-sidebar-gutter
+ [page-start page-start-inset] $grid-default-wide-sidebar-seg1
+ [body-start-outset] $grid-default-wide-sidebar-seg2
+ [body-start] $grid-default-wide-body-gutter-start
+ [body-content-start] $grid-default-wide-body
+ [body-content-end] $grid-default-wide-body-gutter-end
+ [body-end] $grid-default-wide-margin-seg3
+ [body-end-outset] $grid-default-wide-margin-seg2
+ [page-end-inset] $grid-default-wide-margin-seg1
+ [page-end] $grid-default-wide-margin-gutter
+ [screen-end-inset] $grid-default-wide-page-gutter-end
+ [screen-end];
+}
+
+@mixin page-columns-default-mid {
+ @include page-columns();
+ grid-template-columns:
+ [screen-start] $grid-default-mid-page-gutter-start
+ [screen-start-inset page-start page-start-inset body-start-outset] $grid-default-mid-sidebar-gutter
+ [body-start] $grid-default-mid-body-gutter-start
+ [body-content-start] $grid-default-mid-body
+ [body-content-end] $grid-default-mid-body-gutter-end
+ [body-end] $grid-default-mid-margin-seg3
+ [body-end-outset] $grid-default-mid-margin-seg2
+ [page-end-inset] $grid-default-mid-margin-seg1
+ [page-end] $grid-default-mid-margin-gutter
+ [screen-end-inset] $grid-default-mid-page-gutter-end
+ [screen-end];
+}
+
+// Full content grid definitions
+@mixin page-columns-fullcontent-wide {
+ @include page-columns();
+ grid-template-columns:
+ [screen-start] $grid-default-full-wide-page-gutter-start
+ [screen-start-inset] $grid-default-full-wide-sidebar-gutter
+ [page-start page-start-inset] $grid-default-full-wide-sidebar-seg1
+ [body-start-outset] $grid-default-full-wide-sidebar-seg2
+ [body-start] $grid-default-full-wide-body-gutter-start
+ [body-content-start] $grid-default-full-wide-body
+ [body-content-end] $grid-default-full-wide-body-gutter-end
+ [body-end] $grid-default-full-wide-margin-seg2
+ [body-end-outset] $grid-default-full-wide-margin-seg1
+ [page-end-inset page-end] $grid-default-full-wide-margin-gutter
+ [screen-end-inset] $grid-default-full-wide-page-gutter-end;
+}
+
+@mixin page-columns-fullcontent-mid {
+ @include page-columns();
+ grid-template-columns:
+ [screen-start] $grid-default-full-mid-page-gutter-start
+ [screen-start-inset page-start page-start-inset body-start-outset] $grid-default-full-mid-sidebar-gutter
+ [body-start] $grid-default-full-mid-body-gutter-start
+ [body-content-start] $grid-default-full-mid-body
+ [body-content-end] $grid-default-full-mid-body-gutter-end
+ [body-end body-end-outset page-end-inset page-end] $grid-default-full-mid-margin-gutter
+ [screen-end-inset] $grid-default-full-mid-page-gutter-end
+ [screen-end];
+}
+
+// Listing content grid definitions
+@mixin page-columns-listing-wide {
+ @include page-columns();
+ grid-template-columns:
+ [screen-start] $grid-default-listing-wide-page-gutter-start
+ [screen-start-inset page-start] $grid-default-listing-wide-sidebar-seg1
+ [page-start-inset] $grid-default-listing-wide-sidebar-seg2
+ [body-start-outset] $grid-default-listing-wide-sidebar-seg3
+ [body-start] $grid-default-listing-wide-body-gutter-start
+ [body-content-start] $grid-default-listing-wide-body
+ [body-content-end] $grid-default-listing-wide-body-gutter-end
+ [body-end] $grid-default-listing-wide-sidebar-seg3
+ [body-end-outset] $grid-default-listing-wide-margin-seg2
+ [page-end-inset] $grid-default-listing-wide-sidebar-seg1
+ [page-end] $grid-default-listing-wide-margin-gutter
+ [screen-end-inset] $grid-default-listing-wide-page-gutter-end
+ [screen-end];
+}
+
+@mixin page-columns-listing-mid {
+ @include page-columns();
+ grid-template-columns:
+ [screen-start] $grid-default-listing-mid-page-gutter-start
+ [screen-start-inset page-start page-start-inset body-start-outset] $grid-default-listing-mid-sidebar-gutter
+ [body-start] $grid-default-listing-mid-body-gutter-start
+ [body-content-start] $grid-default-listing-mid-body
+ [body-content-end body-end body-end-outset page-end-inset page-end] $grid-default-listing-mid-margin-gutter
+ [screen-end-inset] $grid-default-listing-mid-page-gutter-end
+ [screen-end];
+}
+
+// Slim content grid definitions
+@mixin page-columns-slimcontent-wide {
+ @include page-columns();
+ grid-template-columns:
+ [screen-start] $grid-default-slim-wide-page-gutter-start
+ [screen-start-inset] $grid-default-slim-wide-sidebar-gutter
+ [page-start page-start-inset] $grid-default-slim-wide-sidebar-seg1
+ [body-start-outset] $grid-default-slim-wide-sidebar-seg2
+ [body-start] $grid-default-slim-wide-body-gutter-start
+ [body-content-start] $grid-default-slim-wide-body
+ [body-content-end] $grid-default-slim-wide-body-gutter-end
+ [body-end] $grid-default-slim-wide-sidebar-seg3
+ [body-end-outset] $grid-default-slim-wide-margin-seg2
+ [page-end-inset] $grid-default-slim-wide-sidebar-seg1
+ [page-end] $grid-default-slim-wide-margin-gutter
+ [screen-end-inset] $grid-default-slim-wide-page-gutter-end
+ [screen-end];
+}
+
+@mixin page-columns-slimcontent-mid {
+ @include page-columns();
+ grid-template-columns:
+ [screen-start] $grid-default-slim-mid-page-gutter-start
+ [screen-start-inset page-start page-start-inset body-start-outset] $grid-default-slim-mid-sidebar-gutter
+ [body-start] $grid-default-slim-mid-body-gutter-start
+ [body-content-start] $grid-default-slim-mid-body
+ [body-content-end] $grid-default-slim-mid-body-gutter-end
+ [body-end] $grid-default-slim-mid-margin-seg3
+ [body-end-outset] $grid-default-slim-mid-margin-seg2
+ [page-end-inset] $grid-default-slim-mid-margin-seg1
+ [page-end] $grid-default-slim-mid-margin-gutter
+ [screen-end-inset] $grid-default-slim-mid-page-gutter-end
+ [screen-end];
+}
+
+// TOC left grid
+@mixin page-columns-tocleft-wide {
+ @include page-columns();
+ grid-template-columns:
+ [screen-start] $grid-default-toc-wide-page-gutter-start
+ [screen-start-inset] $grid-default-toc-wide-sidebar-gutter
+ [page-start] $grid-default-toc-wide-sidebar-seg1
+ [page-start-inset] $grid-default-toc-wide-sidebar-seg2
+ [body-start-outset] $grid-default-toc-wide-sidebar-seg3
+ [body-start] $grid-default-toc-wide-body-gutter-start
+ [body-content-start] $grid-default-toc-wide-body
+ [body-content-end] $grid-default-toc-wide-body-gutter-end
+ [body-end] $grid-default-toc-wide-margin-seg3
+ [body-end-outset] $grid-default-toc-wide-margin-seg2
+ [page-end-inset] $grid-default-toc-wide-margin-seg1
+ [page-end] $grid-default-toc-wide-margin-gutter
+ [screen-end-inset] $grid-default-toc-wide-page-gutter-end
+ [screen-end];
+}
+
+@mixin page-columns-tocleft-mid {
+ @include page-columns();
+ grid-template-columns:
+ [screen-start] $grid-default-toc-mid-page-gutter-start
+ [screen-start-inset] $grid-default-toc-mid-sidebar-gutter
+ [page-start] $grid-default-toc-mid-sidebar-seg1
+ [page-start-inset] $grid-default-toc-mid-sidebar-seg2
+ [body-start-outset] $grid-default-toc-mid-sidebar-seg3
+ [body-start] $grid-default-toc-mid-body-gutter-start
+ [body-content-start] $grid-default-toc-mid-body
+ [body-content-end] $grid-default-toc-mid-body-gutter-end
+ [body-end body-end-outset page-end-inset page-end] $grid-default-toc-mid-margin-gutter
+ [screen-end-inset] $grid-default-toc-mid-page-gutter-end
+ [screen-end];
+}
+
+// Small size responsive grid
+// All grids share this fully collapsed mode which hides
+// the sidebar and margin
+@mixin grid-template-columns-narrow {
+ grid-template-columns:
+ [screen-start] $grid-page-gutter-start
+ [screen-start-inset page-start page-start-inset body-start-outset body-start body-content-start] minmax(
+ 0px,
+ 1fr
+ )
+ [body-content-end body-end body-end-outset page-end-inset page-end screen-end-inset] $grid-page-gutter-end
+ [screen-end];
+}
+
+
+// quarto-scss-analysis-annotation { "origin": "'mixins' section from user-defined SCSS" }
+
+
+
+// quarto-scss-analysis-annotation { "origin": "'rules' section from format" }
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+@import "mixins/banner";
+@include bsBanner("");
+
+
+// scss-docs-start import-stack
+// Configuration
+@import "variables-dark";
+@import "maps";
+@import "utilities";
+
+// Layout & components
+@import "root";
+@import "reboot";
+@import "type";
+@import "images";
+@import "containers";
+@import "grid";
+@import "tables";
+@import "forms";
+@import "buttons";
+@import "transitions";
+@import "dropdown";
+@import "button-group";
+@import "nav";
+@import "navbar";
+@import "card";
+@import "accordion";
+@import "breadcrumb";
+@import "pagination";
+@import "badge";
+@import "alert";
+@import "progress";
+@import "list-group";
+@import "close";
+@import "toasts";
+@import "modal";
+@import "tooltip";
+@import "popover";
+@import "carousel";
+@import "spinners";
+@import "offcanvas";
+@import "placeholders";
+
+// Helpers
+@import "helpers";
+
+// Utilities
+@import "utilities/api";
+// scss-docs-end import-stack
+
+@import "spacer";
+@import "tab-fill";
+@import "color-utilities";
+
+$spacer: 1rem !default;
+
+:root {
+ // Controls default spacing in layout containers (e.g, layout_columns())
+ --bslib-spacer: #{$spacer};
+ --bslib-mb-spacer: var(--bslib-spacer, 1rem);
+}
+
+// Some things like card(), p(), inputs, etc. want some margin-bottom by default
+// so you can plop them anywhere and you get spacing between rows. However, now
+// that we have layout utilities like page_fillable(), layout_columns(),
+// layout_sidebar(), etc. where we can control the gap between rows/columns, we
+// need a way to reset those margin-bottom to 0 in those special contexts
+//
+// We do this by adding this class to components (e.g., card())...
+.bslib-mb-spacing {
+ margin-bottom: var(--bslib-mb-spacer);
+}
+
+// ...And this class for layout containers (e.g, layout_columns())
+.bslib-gap-spacing {
+ gap: var(--bslib-mb-spacer);
+ > .bslib-mb-spacing, > .form-group, > p, > pre {
+ margin-bottom: 0;
+ }
+}
+
+// We generally don't want mb spacing for _activated_ fill items
+.html-fill-container > .html-fill-item.bslib-mb-spacing {
+ margin-bottom: 0;
+}
+// color-contrast() was introduced in Bootstrap 5.
+// We include our own version for a few reasons:
+// 1. Easily turn off warnings options(bslib.color_contrast_warnings=F)
+// 2. Allow Bootstrap 3 & 4 to use color-contrast() in variable definitions
+// 3. Allow Bootstrap 3 & 4 to use bs_get_contrast()
+
+// Also note that color-contrast() lives in sass-utils since projects like Quarto
+// and flexdashboard currently assume it exists there....
+@import "../sass-utils/color-contrast.scss";
+
+
+@function is-css-variable($x) {
+ @if (type-of($x) != string) {
+ @return false;
+ } @else {
+ @return str-slice($x, 1, 6) == 'var(--';
+ }
+}
+
+$bslib-enable-color-utilities: $bootstrap-version >= 5 !default;
+
+@if ($bslib-enable-color-utilities) {
+ $bslib-gradient-colors: () !default;
+
+ $bslib-gradient-colors-defaults: ();
+ $bslib-color-names: ("blue", "indigo", "purple", "pink", "red", "orange", "yellow", "green", "teal", "cyan");
+
+ @each $name in $bslib-color-names {
+ @if (map-has-key($colors, $name)) {
+ $bslib-gradient-colors-defaults: map-merge(
+ $bslib-gradient-colors-defaults,
+ ($name: map-get($colors, $name))
+ );
+ }
+ }
+
+ $bslib-gradient-colors: map-merge(
+ $bslib-gradient-colors-defaults,
+ $bslib-gradient-colors
+ );
+
+ // Named color background and foreground utility classes ---------------------
+ @each $name, $color in $bslib-gradient-colors {
+ .bg-#{$name} {
+ --bslib-color-bg: #{$color};
+ --bslib-color-fg: #{color-contrast($color)};
+ background-color: var(--bslib-color-bg);
+ color: var(--bslib-color-fg);
+ }
+
+ .text-#{$name} {
+ --bslib-color-fg: #{$color};
+ color: var(--bslib-color-fg);
+ }
+ }
+
+ // Fill in the `--color-*` variables
+ @each $name, $color in $theme-colors {
+ .text-#{$name} {
+ --bslib-color-fg: #{$color};
+ }
+ .bg-#{$name} {
+ --bslib-color-bg: #{$color};
+ --bslib-color-fg: #{color-contrast($color)};
+ }
+ }
+
+ // Gradient backgrounds ------------------------------------------------------
+ //
+ // Creates gradient background for every named color pair. Users can add
+ // additional colors into the mix by setting $bslib-gradient-colors to a map of
+ // color names to colors. Creates class names like: .bg-gradient-{from}-{to}.
+ @each $name1, $color1 in $bslib-gradient-colors {
+ @each $name2, $color2 in $bslib-gradient-colors {
+ @if $name1 != $name2 {
+ .bg-gradient-#{$name1}-#{$name2} {
+ $color-mid: mix($color1, $color2, 60%);
+ $color-fg: color-contrast($color-mid);
+
+ --bslib-color-fg: #{$color-fg};
+ --bslib-color-bg: #{$color-mid};
+
+ background: linear-gradient(
+ var(--bg-gradient-deg, 140deg),
+ $color1 var(--bg-gradient-start, 36%),
+ $color2 var(--bg-gradient-end, 180%)
+ ) $color-mid;
+ color: $color-fg;
+ }
+ }
+ }
+ }
+}
+
+.tab-content {
+ // Workaround for pkgdown's CSS to make tab-pane all a consistent height
+ // https://github.com/r-lib/pkgdown/blob/956f07/inst/BS5/assets/pkgdown.scss#L342-L355
+ >.tab-pane.html-fill-container {
+ display: none;
+ }
+
+ // Take precedence over Bootstrap's `display:block` rule
+ >.active.html-fill-container {
+ display: flex;
+ }
+
+ // Another workaround for pkgdown adding extra padding we didn't ask for
+ // https://github.com/r-lib/pkgdown/blob/956f07/inst/BS5/assets/pkgdown.scss#L335-L337
+ &.html-fill-container {
+ padding: 0;
+ }
+}
+
+$bslib-value-box-enable-border: "auto" !default; // "auto" | "never" | "always"
+$bslib-value-box-enable-shadow: $enable-shadows !default;
+$bslib-value-box-horizontal-break-point: 300px;
+
+:root {
+ --bslib-value-box-shadow: #{if($bslib-value-box-enable-shadow, #{$box-shadow}, none)};
+ // value box border width is set to "-auto-yes" when the card has .border-auto
+ // or "-auto-no" by default. These cards all use "-baseline", where the border
+ // can be disabled entirely by setting $bslib-value-box-enable-border: "never"
+ // or --bslib-value-box-border-width-baseline: 0. In "auto" mode, the border
+ // is disabled without the border-auto class, or disabled if shadow is enabled.
+ --bslib-value-box-border-width-auto-yes: #{if($bslib-value-box-enable-shadow, 0, var(--bslib-value-box-border-width-baseline))};
+ --bslib-value-box-border-width-auto-no: #{if($bslib-value-box-enable-border == "auto", 0, var(--bslib-value-box-border-width-baseline))};
+ --bslib-value-box-border-width-baseline: #{if($bslib-value-box-enable-border == "never", 0, $card-border-width)};
+}
+
+// CSS variables that start with --- (3 dashes instead of 2) are private vars
+// that are set by user arguments in the R calls. The CSS properties below only
+// apply to the default value box style; the standard way to theme individual
+// value boxes is with CSS classes on the value box container.
+// :root {
+// --bslib-value-box-color:;
+// --bslib-value-box-bg:;
+// --bslib-value-box-border-color:;
+// }
+
+.bslib-value-box {
+ &.card {
+ // .card also sets box-shadow by default, likely to an empty css variable
+ box-shadow: var(--bslib-value-box-shadow);
+ }
+
+ border-width: var(--bslib-value-box-border-width-auto-no, var(--bslib-value-box-border-width-baseline));
+ &.border-auto {
+ border-width: var(--bslib-value-box-border-width-auto-yes, var(--bslib-value-box-border-width-baseline));
+ }
+
+ &.default {
+ --bslib-value-box-bg-default: var(--bs-card-bg, #{$body-bg});
+ --bslib-value-box-border-color-default: var(--bs-card-border-color, #{$card-border-color});
+ color: var(--bslib-value-box-color);
+ background-color: var(--bslib-value-box-bg, var(--bslib-value-box-bg-default));
+ border-color: var(--bslib-value-box-border-color, var(--bslib-value-box-border-color-default));
+ }
+
+ container-name: bslib-value-box;
+ container-type: inline-size;
+
+ .value-box-grid {
+ display: grid;
+ grid-template-areas: "left right";
+ align-items: center;
+ overflow: hidden;
+ }
+
+ .value-box-showcase {
+ height: 100%;
+ max-height: var(---bslib-value-box-showcase-max-h, 100%);
+ &, > .html-fill-item {
+ width: 100%;
+ }
+ }
+
+ &[data-full-screen="true"] {
+ .value-box-showcase {
+ max-height: var(---bslib-value-box-showcase-max-h-fs, 100%);
+ }
+ }
+
+ // When value boxes get too small, we lay them out vertically using a container query.
+ // But we don't need this for mobile, where we have one box per row. This media query
+ // is the inverse of `@include media-breakpoint-down(sm)` but that mixin doesn't work
+ // inside nested queries.
+ @media screen and (min-width: breakpoint-max(sm, $grid-breakpoints)) {
+ @container bslib-value-box (max-width: #{$bslib-value-box-horizontal-break-point}) {
+ &:not(.showcase-bottom) .value-box-grid {
+ // override specificity of showcase layouts for small value boxes
+ grid-template-columns: 1fr !important;
+ grid-template-rows: auto auto;
+ grid-template-areas:
+ "top"
+ "bottom";
+
+ .value-box-showcase {
+ grid-area: top !important;
+ }
+
+ .value-box-area {
+ grid-area: bottom !important;
+ justify-content: end;
+ }
+ }
+ }
+ }
+
+ // Should also be fillable/fill (i.e., d-flex; flex: 1)
+ .value-box-area {
+ justify-content: center;
+ padding: 1.5rem 1rem;
+ font-size: .9rem;
+ font-weight: 500;
+ * {
+ margin-bottom: 0;
+ margin-top: 0;
+ }
+ }
+
+ .value-box-title {
+ @include bootstrap-heading-font-and-spacing($h6-font-size);
+ // add a non-breaking space to ensure it's not 0 height
+ &:empty::after {
+ content: '\00a0 ';
+ }
+ }
+
+ .value-box-value {
+ @include bootstrap-heading-font-and-spacing($h2-font-size);
+ // add a non-breaking space to ensure it's not 0 height
+ &:empty::after {
+ content: '\00a0 ';
+ }
+ }
+
+ // Should also be fillable/fill (i.e., d-flex; flex: 1)
+ .value-box-showcase {
+ align-items: center;
+ justify-content: center;
+ margin-top: auto;
+ margin-bottom: auto;
+ padding: 1rem;
+
+ .bi, .fa, .fab, .fas, .far {
+ opacity: .85;
+ min-width: 50px;
+ max-width: 125%;
+ }
+ // We set font size because {bsicons}/{fontawesome} both
+ // set height/width to 1em by default (as an inline style)
+ .bi, .fa, .fab, .fas, .far { font-size: 4rem; }
+ }
+
+
+ &.showcase-top-right {
+ .value-box-grid {
+ grid-template-columns: 1fr var(---bslib-value-box-showcase-w, 50%);
+
+ .value-box-showcase {
+ grid-area: right;
+ margin-left: auto;
+ align-self: start;
+ align-items: end;
+ padding-left: 0;
+ padding-bottom: 0;
+ }
+
+ .value-box-area {
+ grid-area: left;
+ align-self: end;
+ }
+ }
+
+ &[data-full-screen="true"] {
+ .value-box-grid {
+ grid-template-columns: auto var(---bslib-value-box-showcase-w-fs, 1fr);
+ > div {
+ align-self: center;
+ }
+ }
+ }
+
+ &:not([data-full-screen="true"]) {
+ .value-box-showcase {
+ margin-top: 0;
+ }
+
+ @container bslib-value-box (max-width: #{$bslib-value-box-horizontal-break-point}) {
+ .value-box-grid {
+ .value-box-showcase { // reset padding on showcase_container
+ padding-left: 1rem;
+ }
+ }
+ }
+ }
+ }
+
+ &.showcase-left-center {
+ .value-box-grid {
+ grid-template-columns: var(---bslib-value-box-showcase-w, 30%) auto;
+ }
+
+ &[data-full-screen="true"] {
+ .value-box-grid {
+ grid-template-columns: var(---bslib-value-box-showcase-w-fs, 1fr) auto;
+ }
+ }
+
+ &:not([data-fill-screen="true"]) {
+ .value-box-grid {
+ .value-box-showcase {
+ grid-area: left;
+ }
+
+ .value-box-area {
+ grid-area: right;
+ }
+ }
+ }
+ }
+
+ &.showcase-bottom {
+ .value-box-grid {
+ grid-template-columns: 1fr;
+ grid-template-rows: 1fr var(---bslib-value-box-showcase-h, auto);
+ grid-template-areas:
+ "top"
+ "bottom";
+ overflow: hidden;
+
+ .value-box-showcase {
+ grid-area: bottom;
+ padding: 0;
+ margin: 0;
+ }
+
+ .value-box-area {
+ grid-area: top;
+ }
+ }
+
+ &[data-full-screen="true"] {
+ .value-box-grid {
+ grid-template-rows: 1fr var(---bslib-value-box-showcase-h-fs, 2fr);
+
+ .value-box-showcase {
+ padding: 1rem;
+ }
+ }
+ }
+ }
+}
+
+@include color-mode(dark) {
+ .bslib-value-box {
+ // Bootstrap doesn't have a dark shadow, but the default isn't quite right
+ --bslib-value-box-shadow: 0 0.5rem 1rem rgb(0 0 0 / 50%);
+ }
+}
+
+.bslib-grid {
+ display: grid !important;
+ gap: var(--bslib-spacer, 1rem);
+ height: var(--bslib-grid-height);
+ &.grid {
+ // Don't let intrinsic width of a column affect the width of grid cols
+ grid-template-columns: repeat(var(--bs-columns, 12), minmax(0, 1fr));
+ // For some reason, Bootstrap sets `grid-template-rows: 1fr` by default, which
+ // is problematic for a multi-row filling layout. This fixes it...
+ // > page_fillable(layout_columns(c(12, 12), plotly::plot_ly(), plotly::plot_ly()))
+ grid-template-rows: unset;
+ grid-auto-rows: var(--bslib-grid--row-heights);
+ @include bslib-breakpoints-css-vars('bslib-grid--row-heights', map-keys($grid-breakpoints));
+ }
+
+ & > * > .shiny-input-container {
+ width: 100%;
+ }
+}
+
+.bslib-grid-item {
+ grid-column: auto/span 1;
+}
+
+@include media-breakpoint-down(md) {
+ // collapse all columns to a single column below medium (by default only)
+ .bslib-grid-item {
+ grid-column: 1 / -1;
+ }
+}
+
+@include media-breakpoint-down(sm) {
+ // with each "row" taking its natural height
+ .bslib-grid {
+ grid-template-columns: 1fr !important;
+ height: var(--bslib-grid-height-mobile);
+ &.grid {
+ height: unset !important;
+ grid-auto-rows: var(--bslib-grid--row-heights--xs, auto);
+ }
+ }
+}
+
+.navbar+.container-fluid {
+
+ // When the tab/page is fillable, undo the padding on the container-fluid
+ // (in this case, the user has control over padding/gap)
+ &:has(> .tab-content > .tab-pane.active.html-fill-container) {
+ padding-left: 0;
+ padding-right: 0;
+ }
+
+ // When the tab/page is fillable, add sensible default padding
+ >.tab-content>.tab-pane.active.html-fill-container {
+ padding: var(--bslib-spacer, 1rem);
+ gap: var(--bslib-spacer, 1rem);
+
+ // ...but if it holds a single sidebar layout, remove the padding
+ &:has(> .bslib-sidebar-layout:only-child) {
+ padding: 0;
+ }
+
+ // And smart border defaults for nav_panel("Foo", layout_sidebar())
+ >.bslib-sidebar-layout:only-child {
+ &:not([data-bslib-sidebar-border="true"]) {
+ border-left: none;
+ border-right: none;
+ border-bottom: none;
+ }
+
+ &:not([data-bslib-sidebar-border-radius="true"]) {
+ border-radius: 0;
+ }
+ }
+ }
+}
+
+// Make sure a border appears between the navbar and the sidebar layout
+// (especially important when page_navbar(inverse = FALSE, sidebar = sidebar())
+.navbar+div>.bslib-sidebar-layout {
+ border-top: var(--bslib-sidebar-border);
+}
+.bslib-card {
+ // TODO: allow a way to opt out
+ overflow: auto;
+
+ // Avoid "double padding" when two card_body()s are immediate siblings
+ .card-body + .card-body {
+ padding-top: 0;
+ }
+
+ .card-body {
+ overflow: auto;
+ p {
+ margin-top: 0;
+
+ &:last-child {
+ margin-bottom: 0;
+ }
+ }
+ }
+
+ .card-body {
+ max-height: var(--bslib-card-body-max-height, none);
+ }
+
+ &[data-full-screen="true"] > .card-body {
+ max-height: var(--bslib-card-body-max-height-full-screen, none);
+ }
+
+ .card-header {
+ .form-group {
+ margin-bottom: 0;
+ }
+ .selectize-control {
+ margin-bottom: 0;
+ // TODO: we should probably add this to selectize's SCSS since this actually makes selectInput()
+ // usable with width="fit-content"
+ .item {
+ margin-right: 1.15rem;
+ }
+ }
+ }
+
+ .card-footer {
+ margin-top: auto;
+ }
+
+ // For navs_tab_card(title = ...)
+ .bslib-navs-card-title {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: space-between;
+ align-items: center;
+ .nav {
+ margin-left: auto;
+ }
+ }
+
+ .bslib-sidebar-layout:not([data-bslib-sidebar-border="true"]) {
+ border: none;
+ }
+ .bslib-sidebar-layout:not([data-bslib-sidebar-border-radius="true"]) {
+ border-top-left-radius: 0;
+ border-top-right-radius: 0;
+ }
+
+}
+
+
+/*************************************************
+* Full screen card logic
+*************************************************/
+
+[data-full-screen="true"] {
+ position: fixed;
+ inset: 3.5rem 1rem 1rem;
+ height: auto !important;
+ max-height: none !important;
+ width: auto !important;
+ z-index: $zindex-popover;
+}
+
+.bslib-full-screen-enter {
+ display: none;
+ position: absolute;
+ bottom: var(--bslib-full-screen-enter-bottom, 0.2rem);
+ right: var(--bslib-full-screen-enter-right, 0);
+ top: var(--bslib-full-screen-enter-top);
+ left: var(--bslib-full-screen-enter-left);
+ color: var(--bslib-color-fg, var(--bs-card-color));
+ background-color: var(--bslib-color-bg, var(--bs-card-bg, var(--bs-body-bg)));
+ border: var(--bs-card-border-width) solid var(--bslib-color-fg, var(--bs-card-border-color));
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
+ margin: 0.2rem 0.4rem;
+ padding: 0.55rem !important;
+ font-size: .8rem;
+ cursor: pointer;
+ opacity: 0.7;
+ &:hover { opacity: 1; }
+ z-index: $zindex-popover;
+}
+
+.card[data-full-screen="false"]:hover > * > .bslib-full-screen-enter {
+ display: block;
+}
+
+// Hide all enter-full-screen buttons when *any* card is full-screenified
+.bslib-has-full-screen .card:hover > * > .bslib-full-screen-enter {
+ display: none;
+}
+
+// Only allow full_screen on desktop screens
+@include media-breakpoint-down(sm) {
+ .bslib-full-screen-enter { display: none !important; }
+}
+
+.bslib-full-screen-exit {
+ position: relative;
+ top: 1.35rem;
+ font-size: 0.9rem;
+ cursor: pointer;
+ text-decoration: none;
+ display: flex;
+ float: right;
+ margin-right: 2.15rem;
+ align-items: center;
+ color: rgba(var(--bs-body-bg-rgb), 0.8);
+ &:hover {
+ color: rgba(var(--bs-body-bg-rgb), 1);
+ }
+ svg {
+ margin-left: 0.5rem;
+ font-size: 1.5rem;
+ }
+}
+
+#bslib-full-screen-overlay {
+ position: fixed;
+ inset: 0;
+ background-color: rgba(var(--bs-body-color-rgb), 0.6);
+ backdrop-filter: blur(2px);
+ -webkit-backdrop-filter: blur(2px);
+ z-index: $zindex-popover - 1;
+ animation: bslib-full-screen-overlay-enter 400ms cubic-bezier(.6,.02,.65,1) forwards;
+}
+
+@keyframes bslib-full-screen-overlay-enter {
+ 0% {
+ opacity: 0;
+ }
+ 100% {
+ opacity: 1;
+ }
+}
+
+$bslib-sidebar-bg: rgba(var(--bs-emphasis-color-rgb, 0,0,0), 0.05) !default;
+$bslib-sidebar-fg: var(--bs-emphasis-color, black) !default;
+$bslib-sidebar-toggle-bg: rgba(var(--bs-emphasis-color-rgb, 0,0,0), 0.1) !default;
+$bslib-sidebar-border: var(--bs-card-border-width, #{$card-border-width}) solid var(--bs-card-border-color, #{$card-border-color}) !default;
+$bslib-sidebar-column-sidebar: Min(calc(100% - var(--bslib-sidebar-icon-size)), var(--bslib-sidebar-width, 250px));
+
+
+.bslib-sidebar-layout {
+ --bslib-sidebar-transition-duration: 500ms;
+ --bslib-sidebar-transition-easing-x: cubic-bezier(0.8, 0.78, 0.22, 1.07);
+ --bslib-sidebar-border: #{$bslib-sidebar-border};
+ --bslib-sidebar-border-radius: var(--bs-border-radius);
+ --bslib-sidebar-vert-border: #{$bslib-sidebar-border};
+ --bslib-sidebar-bg: #{$bslib-sidebar-bg};
+ --bslib-sidebar-fg: #{$bslib-sidebar-fg};
+ --bslib-sidebar-main-fg: var(--bs-card-color, var(--bs-body-color));
+ --bslib-sidebar-main-bg: var(--bs-card-bg, var(--bs-body-bg));
+ --bslib-sidebar-toggle-bg: #{$bslib-sidebar-toggle-bg};
+ --bslib-sidebar-padding: calc(var(--bslib-spacer) * 1.5);
+ --bslib-sidebar-icon-size: var(--bslib-spacer, 1rem);
+ --bslib-sidebar-icon-button-size: calc(var(--bslib-sidebar-icon-size, 1rem) * 2);
+ --bslib-sidebar-padding-icon: calc(var(--bslib-sidebar-icon-button-size, 2rem) * 1.5);
+ // We intentionally don't give a value here, but it could be set by someone else
+ // --bslib-collapse-toggle-border: ;
+ --bslib-collapse-toggle-border-radius: var(--bs-border-radius, #{$border-radius});
+ --bslib-collapse-toggle-transform: 0deg;
+ --bslib-sidebar-toggle-transition-easing: cubic-bezier(1, 0, 0, 1);
+ --bslib-collapse-toggle-right-transform: 180deg;
+ --bslib-sidebar-column-main: minmax(0, 1fr);
+
+ display: grid !important;
+ grid-template-columns: $bslib-sidebar-column-sidebar var(--bslib-sidebar-column-main);
+ position: relative;
+
+ @include transition(grid-template-columns ease-in-out var(--bslib-sidebar-transition-duration));
+
+ border: var(--bslib-sidebar-border);
+ border-radius: var(--bslib-sidebar-border-radius);
+
+ &[data-bslib-sidebar-border="false"] {
+ border: none;
+ }
+ &[data-bslib-sidebar-border-radius="false"] {
+ border-radius: initial;
+ }
+
+ > .main, > .sidebar {
+ grid-row: 1 / 2;
+ border-radius: inherit;
+ overflow: auto;
+ }
+
+ > .main {
+ grid-column: 2 / 3;
+ border-top-left-radius: 0;
+ border-bottom-left-radius: 0;
+ padding: var(--bslib-sidebar-padding);
+ transition: padding var(--bslib-sidebar-transition-easing-x) var(--bslib-sidebar-transition-duration);
+ color: var(--bslib-sidebar-main-fg);
+ background-color: var(--bslib-sidebar-main-bg);
+ }
+
+ > .sidebar {
+ grid-column: 1 / 2;
+ width: 100%;
+ height: 100%;
+ border-right: var(--bslib-sidebar-vert-border);
+ border-top-right-radius: 0;
+ border-bottom-right-radius: 0;
+ color: var(--bslib-sidebar-fg);
+ background-color: var(--bslib-sidebar-bg);
+ backdrop-filter: blur(5px);
+
+ > .sidebar-content {
+ display: flex;
+ flex-direction: column;
+ gap: var(--bslib-spacer, 1rem);
+ padding: var(--bslib-sidebar-padding);
+ // Add space for the toggle button (removed if sidebar is always open)
+ padding-top: var(--bslib-sidebar-padding-icon);
+
+ > :last-child:not(.sidebar-title) {
+ // Remove margin-bottom from the last item because sidebar has padding.
+ // We make an exception for .sidebar-title because it might be common to
+ // have a title and bare text nodes (that don't count as children).
+ margin-bottom: 0;
+ }
+
+ > .accordion {
+ margin-left: calc(-1 * var(--bslib-sidebar-padding));
+ margin-right: calc(-1 * var(--bslib-sidebar-padding));
+ &:last-child {
+ margin-bottom: calc(-1 * var(--bslib-sidebar-padding));
+ }
+ &:not(:last-child) {
+ margin-bottom: $spacer;
+ }
+ .accordion-body {
+ display: flex;
+ flex-direction: column;
+ }
+ }
+
+ // Accordions in sidebars are made flush with `.accordion-flush`, which
+ // removes the top and bottom border of the first or last accordion item.
+ // But in our usage, the accordions might not be the first or last item in
+ // the sidebar. In that case, it's better to keep the top/bottom borders.
+ > .accordion:not(:first-child) .accordion-item:first-child {
+ border-top: var(--#{$prefix}accordion-border-width) solid var(--#{$prefix}accordion-border-color);
+ }
+ > .accordion:not(:last-child) .accordion-item:last-child {
+ border-bottom: var(--#{$prefix}accordion-border-width) solid var(--#{$prefix}accordion-border-color);
+ }
+
+ &.has-accordion > .sidebar-title {
+ border-bottom: none;
+ padding-bottom: 0;
+ }
+ }
+
+ .shiny-input-container {
+ width: 100%;
+ }
+ }
+
+ &[data-bslib-sidebar-open="always"] {
+ > .sidebar > .sidebar-content {
+ // Always-open sidebars don't have a toggle & can use normal top padding
+ padding-top: var(--bslib-sidebar-padding);
+ }
+ }
+
+ > .collapse-toggle {
+ grid-row: 1 / 2;
+ grid-column: 1 / 2;
+ display: inline-flex;
+ align-items: center;
+ position: absolute;
+ right: calc(var(--bslib-sidebar-icon-size));
+ top: calc(var(--bslib-sidebar-icon-size, 1rem) / 2);
+ border: none;
+ border-radius: var(--bslib-collapse-toggle-border-radius);
+ height: var(--bslib-sidebar-icon-button-size, 2rem);
+ width: var(--bslib-sidebar-icon-button-size, 2rem);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ padding: 0;
+ color: var(--bslib-sidebar-fg);
+ background-color: unset; // don't take `button` background color
+ transition:
+ color var(--bslib-sidebar-transition-easing-x) var(--bslib-sidebar-transition-duration),
+ top var(--bslib-sidebar-transition-easing-x) var(--bslib-sidebar-transition-duration),
+ right var(--bslib-sidebar-transition-easing-x) var(--bslib-sidebar-transition-duration),
+ left var(--bslib-sidebar-transition-easing-x) var(--bslib-sidebar-transition-duration);
+
+ &:hover {
+ background-color: var(--bslib-sidebar-toggle-bg);
+ }
+
+ > .collapse-icon {
+ opacity: 0.8;
+ width: var(--bslib-sidebar-icon-size);
+ height: var(--bslib-sidebar-icon-size);
+ transform: rotateY(var(--bslib-collapse-toggle-transform));
+ // N.B. since mobile view won't trigger a transition of grid-template-columns,
+ // we transition this toggle to ensure _some_ transition event always happens.
+ transition: transform var(--bslib-sidebar-toggle-transition-easing) var(--bslib-sidebar-transition-duration);
+ }
+
+ &:hover > .collapse-icon {
+ opacity: 1;
+ }
+ }
+
+ .sidebar-title {
+ font-size: $font-size-base * 1.25;
+ line-height: $line-height-sm;
+ margin-top: 0;
+ margin-bottom: $spacer;
+ padding-bottom: $spacer;
+ border-bottom: var(--bslib-sidebar-border);
+ }
+
+ &.sidebar-right {
+ grid-template-columns: var(--bslib-sidebar-column-main) $bslib-sidebar-column-sidebar;
+
+ > .main {
+ grid-column: 1 / 2;
+ border-top-right-radius: 0;
+ border-bottom-right-radius: 0;
+ border-top-left-radius: inherit;
+ border-bottom-left-radius: inherit;
+ }
+
+ > .sidebar {
+ grid-column: 2 / 3;
+ border-right: none;
+ border-left: var(--bslib-sidebar-vert-border);
+ border-top-left-radius: 0;
+ border-bottom-left-radius: 0;
+ }
+
+ > .collapse-toggle {
+ grid-column: 2 / 3;
+ left: var(--bslib-sidebar-icon-size);
+ right: unset;
+ border: var(--bslib-collapse-toggle-border);
+ > .collapse-icon {
+ transform: rotateY(var(--bslib-collapse-toggle-right-transform));
+ }
+ }
+ }
+
+ &.sidebar-collapsed {
+ --bslib-collapse-toggle-transform: 180deg;
+ --bslib-collapse-toggle-right-transform: 0deg;
+ --bslib-sidebar-vert-border: none;
+
+ grid-template-columns: 0 minmax(0, 1fr);
+
+ &.sidebar-right {
+ grid-template-columns: minmax(0, 1fr) 0;
+ }
+
+ // Hide the sidebar contents after it's done transitioning so that
+ // those contents don't impact the overall layout (i.e., height)
+ &:not(.transitioning) {
+ // Putting `display:none` on .sidebar would change the number of columns
+ // in the grid, and I don't think we can transition between those states
+ > .sidebar > * {
+ display: none;
+ }
+ }
+
+ > .main {
+ border-radius: inherit;
+ }
+
+ &:not(.sidebar-right) > .main {
+ padding-left: var(--bslib-sidebar-padding-icon);
+ }
+ &.sidebar-right > .main {
+ padding-right: var(--bslib-sidebar-padding-icon);
+ }
+
+ > .collapse-toggle {
+ color: var(--bslib-sidebar-main-fg);
+ // The CSS variable (set via JS) is here to help avoid overlapping toggles
+ top: calc(
+ var(--bslib-sidebar-overlap-counter, 0) *
+ calc(var(--bslib-sidebar-icon-size) +
+ var(--bslib-sidebar-padding)
+ ) + var(--bslib-sidebar-icon-size, 1rem) / 2);
+ right: calc(-2.5 * var(--bslib-sidebar-icon-size) - var(--bs-card-border-width, 1px));
+ }
+
+ &.sidebar-right > .collapse-toggle {
+ left: calc(-2.5 * var(--bslib-sidebar-icon-size) - var(--bs-card-border-width, 1px));
+ right: unset;
+ }
+ }
+}
+
+@include media-breakpoint-up(sm) {
+ // hide sidebar content while we transition the parent .sidebar on desktop
+ // (on mobile the reveal happens immediately)
+ .bslib-sidebar-layout.transitioning > .sidebar > .sidebar-content {
+ display: none;
+ }
+}
+
+@include media-breakpoint-down(sm) {
+ .bslib-sidebar-layout {
+ // Tell sidebar init js we're on mobile for `sidebar(open = "desktop")`
+ &[data-bslib-sidebar-open="desktop"] {
+ --bslib-sidebar-js-init-collapsed: true;
+ }
+
+ &, &.sidebar-right {
+ // Remove sidebar borders in mobile view (except always-open, added below)
+ > .sidebar { border: none; }
+
+ // Main area takes up entire layout area to avoid layout shift when
+ // sidebar is expanded as an overlay.
+ > .main {
+ grid-column: 1 / 3;
+ }
+ }
+
+ // Always open sidebars become "flow" layouts in mobile view
+ &[data-bslib-sidebar-open="always"] {
+ display: block !important;
+ > .sidebar {
+ max-height: var(--bslib-sidebar-max-height-mobile);
+ overflow-y: auto;
+ border-top: var(--bslib-sidebar-vert-border);
+ }
+ }
+
+ &:not([data-bslib-sidebar-open="always"]) {
+ // Sidebar layer has to be lifted up to cover other (nested) sidebars
+ &:not(.sidebar-collapsed) {
+ > .sidebar { z-index: 1; }
+ > .collapse-toggle { z-index: 1; }
+ }
+
+ // Either sidebar or main area take up entire layout depending on state
+ $full-closed: 100% 0;
+ $closed-full: 0 100%;
+ grid-template-columns: $full-closed;
+ &.sidebar-right {
+ grid-template-columns: $closed-full;
+ }
+
+ &.sidebar-collapsed {
+ grid-template-columns: $closed-full;
+ &.sidebar-right {
+ grid-template-columns: $full-closed;
+ }
+ }
+
+
+ // Keep padding on main contents when sidebar is expanded (avoid shifts)
+ &:not(.sidebar-right) > .main {
+ padding-left: var(--bslib-sidebar-padding-icon);
+ }
+ &.sidebar-right > .main {
+ padding-right: var(--bslib-sidebar-padding-icon);
+ }
+
+ // Make main contents transparent while sidebar is expanded
+ > .main {
+ opacity: 0;
+ transition: opacity var(--bslib-sidebar-transition-easing-x) var(--bslib-sidebar-transition-duration);
+ }
+ &.sidebar-collapsed > .main {
+ opacity: 1;
+ }
+ }
+ }
+}
+
+/* CSS behind nav_spacer() */
+@mixin nav-spacer() {
+ .nav:not(.nav-hidden) {
+ /* Make sure nav container is flexbox (they aren't in BS3) */
+ display: flex !important;
+ display: -webkit-flex !important;
+ // Logic for horizontal nav (e.g., navset_tab(), etc)
+ &:not(.nav-stacked):not(.flex-column) {
+ float: none !important;
+ > .bslib-nav-spacer {
+ margin-left: auto !important;
+ }
+ /* .form-inline doesn't vertically align in BS3? */
+ > .form-inline {
+ margin-top: auto;
+ margin-bottom: auto;
+ }
+ }
+ // Logic for vertical nav (e.g., navset_pill_list())
+ &.nav-stacked {
+ flex-direction: column;
+ -webkit-flex-direction: column;
+ height: 100%;
+ > .bslib-nav-spacer {
+ margin-top: auto !important;
+ }
+ }
+ }
+}
+
+/* BS4+ uses this mixin for configurable breakpoints */
+@if mixin-exists("media-breakpoint-up") {
+ @include media-breakpoint-up(sm) {
+ @include nav-spacer();
+ }
+} @else {
+ /* BS3 default navbar breakpoint */
+ @media (min-width: 768px) {
+ @include nav-spacer();
+ }
+}
+
+.accordion {
+ .accordion-header {
+ @include bootstrap-heading($h2-font-size);
+ margin-bottom: 0;
+ }
+ .accordion-icon:not(:empty) {
+ margin-right: 0.75rem;
+ display: flex; /* Without flex, the height/alignment is messed up */
+ }
+ .accordion-button:not(.collapsed) {
+ box-shadow: none;
+ // This none overrides the box-shadow applied to
+ // .accordion-button:focus (and, as a result, non-collapsed buttons
+ // won't show a visual indication of focus, #488).
+ // So, repeat the .accordion-button:focus below to give it a
+ // higher priority.
+ &:focus {
+ box-shadow: var(--#{$prefix}accordion-btn-focus-box-shadow);
+ }
+ }
+}
+
+$bslib-page-sidebar-title-bg: if($navbar-bg, $navbar-bg, $dark) !default;
+$bslib-page-sidebar-title-color: color-contrast($bslib-page-sidebar-title-bg) !default;
+$bslib-sidebar-padding: $spacer * 1.5 !default;
+
+:root {
+ --bslib-page-sidebar-title-bg: #{$bslib-page-sidebar-title-bg};
+ --bslib-page-sidebar-title-color: #{$bslib-page-sidebar-title-color};
+}
+
+.bslib-page-title {
+ background-color: var(--bslib-page-sidebar-title-bg);
+ color: var(--bslib-page-sidebar-title-color);
+ font-size: $h4-font-size;
+ font-weight: 300;
+ padding: var(--bslib-spacer, 1rem);
+ padding-left: $bslib-sidebar-padding;
+ margin-bottom: 0;
+ border-bottom: $border-width solid $border-color;
+}
+
+html {
+ height: 100%;
+}
+
+.bslib-page-fill {
+ width: 100%;
+ height: 100%;
+ margin: 0;
+ padding: var(--bslib-spacer, 1rem);
+ gap: var(--bslib-spacer, 1rem);
+}
+
+@include media-breakpoint-down(sm) {
+ .bslib-page-fill {
+ height: var(--bslib-page-fill-mobile-height, auto);
+ }
+}
+
+.html-fill-container {
+ display: flex;
+ flex-direction: column;
+ /* Prevent the container from expanding vertically or horizontally beyond its
+ parent's constraints. */
+ min-height: 0;
+ min-width: 0;
+}
+.html-fill-container > .html-fill-item {
+ /* Fill items can grow and shrink freely within
+ available vertical space in fillable container */
+ flex: 1 1 auto;
+ min-height: 0;
+ min-width: 0;
+}
+.html-fill-container > :not(.html-fill-item) {
+ /* Prevent shrinking or growing of non-fill items */
+ flex: 0 0 auto;
+}
+
+
+// quarto-scss-analysis-annotation { "origin": "'rules' section from Quarto" }
+
+
+
+
+
+.sidebar-item .chapter-number {
+ color: $body-color;
+}
+
+
+
+
+.quarto-container {
+ min-height: calc(100vh - 132px);
+}
+
+body.hypothesis-enabled {
+ #quarto-header {
+ margin-right: 16px;
+ }
+}
+
+footer.footer .nav-footer,
+#quarto-header > nav {
+ padding-left: 1em;
+ padding-right: 1em;
+}
+
+footer.footer div.nav-footer p:first-child {
+ margin-top: 0;
+}
+
+footer.footer div.nav-footer p:last-child {
+ margin-bottom: 0;
+}
+
+// content padding
+#quarto-content > * {
+ padding-top: $content-padding-top;
+}
+
+#quarto-content > #quarto-sidebar-glass {
+ padding-top: 0px;
+}
+
+@include media-breakpoint-down(lg) {
+ #quarto-content > * {
+ padding-top: 0;
+ }
+
+ #quarto-content .subtitle {
+ padding-top: $content-padding-top;
+ }
+
+ #quarto-content section:first-of-type h2:first-of-type {
+ margin-top: 1rem;
+ }
+}
+
+// headroom
+.headroom-target,
+header.headroom {
+ will-change: transform;
+ transition: position 200ms linear;
+ transition: all 200ms linear;
+}
+
+header.headroom--pinned {
+ transform: translateY(0%);
+}
+
+header.headroom--unpinned {
+ transform: translateY(-100%);
+}
+
+.navbar-container {
+ width: 100%;
+}
+
+.navbar-brand {
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+
+.navbar-brand-container {
+ max-width: calc(100% - 115px);
+ min-width: 0;
+ display: flex;
+ align-items: center;
+
+ @include media-breakpoint-up(lg) {
+ margin-right: 1em;
+ }
+}
+
+.navbar-brand.navbar-brand-logo {
+ margin-right: 4px;
+ display: inline-flex;
+}
+
+.navbar-toggler {
+ flex-basis: content;
+ flex-shrink: 0;
+}
+
+.navbar {
+ .navbar-brand-container {
+ order: $navbar-title-order;
+ }
+
+ .navbar-toggler {
+ order: $navbar-toggler-order;
+ }
+
+ .navbar-container > .navbar-nav {
+ order: $navbar-menu-order;
+ }
+
+ .navbar-container > .navbar-brand-container {
+ margin-left: 0 !important;
+ margin-right: 0 !important;
+ }
+
+ .navbar-collapse {
+ order: $navbar-menu-order;
+ }
+
+ #quarto-search {
+ order: $navbar-search-order;
+ margin-left: auto;
+ }
+}
+
+@include media-breakpoint-down(med) {
+ .navbar {
+ @if $navbar-toggle-position == "left" {
+ .navbar-toggler {
+ margin-right: 0.5em;
+ }
+ } @else {
+ #quarto-search {
+ margin-right: 0.5em;
+ }
+
+ .quarto-navbar-tools .dropdown-menu {
+ left: 0;
+ }
+ }
+ }
+
+ .navbar-collapse .quarto-navbar-tools {
+ margin-left: 0.5em;
+ }
+}
+
+.navbar-logo {
+ max-height: 24px;
+ width: auto;
+ padding-right: 4px;
+}
+
+nav .nav-item:not(.compact) {
+ padding-top: 1px;
+}
+
+nav .nav-link i,
+nav .dropdown-item i {
+ padding-right: 1px;
+}
+
+.navbar-expand-lg .navbar-nav .nav-link {
+ padding-left: 0.6rem;
+ padding-right: 0.6rem;
+}
+
+nav .nav-item.compact .nav-link {
+ padding-left: 0.5rem;
+ padding-right: 0.5rem;
+ font-size: 1.1rem;
+}
+
+.navbar {
+ .quarto-navbar-tools {
+ order: $navbar-tools-order;
+ div.dropdown {
+ display: inline-block;
+ }
+ .quarto-navigation-tool {
+ color: $navbar-fg;
+ }
+ .quarto-navigation-tool:hover {
+ color: $navbar-hl;
+ }
+ }
+}
+
+.navbar-nav .dropdown-menu {
+ min-width: 220px;
+ font-size: 0.9rem;
+}
+
+.navbar {
+ .navbar-nav {
+ .nav-link.dropdown-toggle::after {
+ opacity: 0.75;
+ vertical-align: 0.175em;
+ }
+ }
+
+ ul.dropdown-menu {
+ padding-top: 0;
+ padding-bottom: 0;
+ }
+ .dropdown-header {
+ text-transform: uppercase;
+ font-size: 0.8rem;
+ padding: 0 0.5rem;
+ }
+
+ .dropdown-item {
+ padding: 0.4rem 0.5rem;
+ & > i.bi {
+ margin-left: 0.1rem;
+ margin-right: 0.25em;
+ }
+ }
+}
+
+.sidebar #quarto-search {
+ margin-top: -1px;
+ svg.aa-SubmitIcon {
+ width: 16px;
+ height: 16px;
+ }
+}
+
+.sidebar-navigation a {
+ color: inherit;
+}
+
+.sidebar-title {
+ margin-top: 0.25rem;
+ padding-bottom: 0.5rem;
+ font-size: 1.3rem;
+ line-height: 1.6rem;
+ visibility: visible;
+}
+
+.sidebar-title > a {
+ font-size: inherit;
+ text-decoration: none;
+}
+
+.sidebar-title .sidebar-tools-main {
+ margin-top: -6px;
+}
+
+@include media-breakpoint-down(lg) {
+ #quarto-sidebar {
+ div.sidebar-header {
+ padding-top: 0.2em;
+ }
+ }
+}
+
+.sidebar-header-stacked .sidebar-title {
+ margin-top: 0.6rem;
+}
+
+.sidebar-logo {
+ max-width: 90%;
+ padding-bottom: 0.5rem;
+}
+
+.sidebar-logo-link {
+ text-decoration: none;
+}
+
+.sidebar-navigation li a {
+ text-decoration: none;
+}
+
+// Sidebar tools
+.sidebar-navigation .quarto-navigation-tool {
+ opacity: 0.7;
+ font-size: 0.875rem;
+}
+
+#quarto-sidebar > nav > .sidebar-tools-main {
+ margin-left: 14px;
+}
+
+.sidebar-tools-main {
+ display: inline-flex;
+ margin-left: 0px;
+ order: 2;
+}
+
+.sidebar-tools-main:not(.tools-wide) {
+ vertical-align: middle;
+}
+
+.sidebar-navigation .quarto-navigation-tool.dropdown-toggle::after {
+ display: none;
+}
+
+// Sidebar navigation items
+$sidebar-items-gap-spacing: 0.2em;
+$sidebar-section-indent: 0.5em;
+$sidebar-section-bottom-margin: 0.2em;
+
+.sidebar.sidebar-navigation > * {
+ padding-top: 1em;
+}
+
+.sidebar-item {
+ margin-bottom: $sidebar-items-gap-spacing;
+ line-height: 1rem;
+ margin-top: 0.4rem;
+}
+
+.sidebar-section {
+ padding-left: $sidebar-section-indent;
+ padding-bottom: $sidebar-section-bottom-margin;
+}
+
+.sidebar-item .sidebar-item-container {
+ // Positions the link and dongle
+ display: flex;
+ justify-content: space-between;
+ cursor: pointer;
+}
+
+.sidebar-item-toggle:hover {
+ cursor: pointer;
+}
+
+.sidebar-item .sidebar-item-toggle .bi {
+ // The dongle for opening and closing sections
+ font-size: 0.7rem;
+ text-align: center;
+}
+
+.sidebar-item .sidebar-item-toggle .bi-chevron-right::before {
+ transition: transform 200ms ease;
+}
+
+.sidebar-item
+ .sidebar-item-toggle[aria-expanded="false"]
+ .bi-chevron-right::before {
+ transform: none;
+}
+
+.sidebar-item
+ .sidebar-item-toggle[aria-expanded="true"]
+ .bi-chevron-right::before {
+ transform: rotate(90deg);
+}
+
+.sidebar-item-text {
+ width: 100%;
+}
+
+.sidebar-navigation .sidebar-divider {
+ margin-left: 0;
+ margin-right: 0;
+ margin-top: 0.5rem;
+ margin-bottom: 0.5rem;
+}
+
+// Toggle the top secondary navigation bar
+@include media-breakpoint-down(lg) {
+ .quarto-secondary-nav {
+ display: block;
+
+ button.quarto-search-button {
+ padding-right: 0em;
+ padding-left: 2em;
+ }
+
+ button.quarto-btn-toggle {
+ margin-left: -0.75rem;
+ margin-right: 0.15rem;
+ }
+
+ nav.quarto-title-breadcrumbs {
+ display: none;
+ }
+
+ nav.quarto-page-breadcrumbs {
+ display: flex;
+ align-items: center;
+ padding-right: 1em;
+ margin-left: -0.25em;
+
+ a {
+ text-decoration: none;
+ }
+
+ ol.breadcrumb {
+ margin-bottom: 0;
+ }
+ }
+ }
+}
+
+@include media-breakpoint-up(lg) {
+ .quarto-secondary-nav {
+ display: none;
+ }
+}
+
+.quarto-title-breadcrumbs .breadcrumb {
+ margin-bottom: 0.5em;
+ font-size: 0.9rem;
+
+ li:last-of-type {
+ a {
+ color: $text-muted;
+ }
+ }
+}
+
+$sidebar-hl: if(
+ $sidebar-hl,
+ sidebar-hl,
+ theme-contrast($nav-link-color, $sidebar-bg)
+);
+$sidebar-color: rgba($sidebar-fg, 1) !default;
+$sidebar-hover-color: rgba($sidebar-hl, 0.8) !default;
+$sidebar-active-color: $sidebar-hl !default;
+$sidebar-disabled-color: rgba($sidebar-fg, 0.75) !default;
+
+.quarto-secondary-nav .quarto-btn-toggle {
+ color: $sidebar-color;
+}
+
+.quarto-secondary-nav[aria-expanded="false"]
+ .quarto-btn-toggle
+ .bi-chevron-right::before {
+ transform: none;
+}
+
+.quarto-secondary-nav[aria-expanded="true"]
+ .quarto-btn-toggle
+ .bi-chevron-right::before {
+ transform: rotate(90deg);
+}
+
+.quarto-secondary-nav .quarto-btn-toggle .bi-chevron-right::before {
+ transition: transform 200ms ease;
+}
+
+.quarto-secondary-nav {
+ cursor: pointer;
+}
+
+.no-decor {
+ text-decoration: none;
+}
+
+.quarto-secondary-nav-title {
+ margin-top: 0.3em;
+ color: $sidebar-color;
+ padding-top: 4px;
+}
+
+.quarto-secondary-nav nav.quarto-page-breadcrumbs {
+ color: $sidebar-color;
+ a {
+ color: $sidebar-color;
+ }
+ a:hover {
+ color: $sidebar-hover-color;
+ }
+ .breadcrumb-item::before {
+ color: theme-dim($sidebar-color, 20%);
+ }
+}
+
+.breadcrumb-item {
+ line-height: 1.2rem;
+}
+
+div.sidebar-item-container {
+ color: $sidebar-color;
+ &:hover,
+ &:focus {
+ color: $sidebar-hover-color;
+ }
+
+ &.disabled {
+ color: $sidebar-disabled-color;
+ }
+
+ .active,
+ .show > .nav-link,
+ .sidebar-link > code {
+ color: $sidebar-active-color;
+ }
+}
+
+div.sidebar.sidebar-navigation.rollup.quarto-sidebar-toggle-contents,
+nav.sidebar.sidebar-navigation:not(.rollup) {
+ @if $sidebar-bg {
+ background-color: $sidebar-bg;
+ } @else {
+ background-color: $body-bg;
+ }
+}
+
+@if $sidebar-border {
+ .sidebar.sidebar-navigation:not(.rollup) {
+ border-right: 1px solid $table-border-color !important;
+ }
+}
+
+@include media-breakpoint-down(lg) {
+ .sidebar-navigation .sidebar-item a,
+ .nav-page .nav-page-text,
+ .sidebar-navigation {
+ font-size: $sidebar-font-size-collapse;
+ }
+
+ .sidebar-navigation ul.sidebar-section.depth1 .sidebar-section-item {
+ font-size: $sidebar-font-size-section-collapse;
+ }
+
+ .sidebar-logo {
+ display: none;
+ }
+
+ .sidebar.sidebar-navigation {
+ position: static;
+ border-bottom: 1px solid $table-border-color;
+ }
+
+ .sidebar.sidebar-navigation.collapsing {
+ position: fixed;
+ z-index: 1000;
+ }
+
+ .sidebar.sidebar-navigation.show {
+ position: fixed;
+ z-index: 1000;
+ }
+
+ .sidebar.sidebar-navigation {
+ min-height: 100%;
+ }
+
+ nav.quarto-secondary-nav {
+ @if $sidebar-bg {
+ background-color: $sidebar-bg;
+ } @else {
+ background-color: $body-bg;
+ }
+ border-bottom: 1px solid $table-border-color;
+ }
+
+ .quarto-banner nav.quarto-secondary-nav {
+ @if variable-exists(navbar-bg) {
+ background-color: $navbar-bg;
+ }
+
+ @if (variable-exists(navbar-fg)) {
+ color: $navbar-fg;
+ }
+ border-top: 1px solid $table-border-color;
+ }
+
+ .sidebar .sidebar-footer {
+ visibility: visible;
+ padding-top: 1rem;
+ position: inherit;
+ }
+
+ .sidebar-tools-collapse {
+ display: block;
+ }
+}
+
+#quarto-sidebar {
+ transition: width $sidebar-anim-duration ease-in;
+ > * {
+ padding-right: 1em;
+ }
+}
+
+@include media-breakpoint-down(lg) {
+ #quarto-sidebar .sidebar-menu-container {
+ white-space: nowrap;
+ min-width: 225px;
+ }
+
+ #quarto-sidebar.show {
+ transition: width $sidebar-anim-duration ease-out;
+ }
+}
+
+@include media-breakpoint-up(lg) {
+ #quarto-sidebar {
+ display: flex;
+ flex-direction: column;
+ }
+ .nav-page .nav-page-text,
+ .sidebar-navigation .sidebar-section .sidebar-item {
+ font-size: $sidebar-font-size-section;
+ }
+
+ .sidebar-navigation .sidebar-item {
+ font-size: $sidebar-font-size;
+ }
+
+ .sidebar.sidebar-navigation {
+ display: block;
+ position: sticky;
+ }
+
+ .sidebar-search {
+ width: 100%;
+ }
+
+ .sidebar .sidebar-footer {
+ visibility: visible;
+ }
+}
+
+@include media-breakpoint-up(lg) {
+ #quarto-sidebar-glass {
+ display: none;
+ }
+}
+
+@include media-breakpoint-down(lg) {
+ #quarto-sidebar-glass {
+ position: fixed;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ background-color: #ffffff00;
+ transition: background-color $sidebar-anim-duration ease-in;
+ z-index: -1;
+ }
+
+ #quarto-sidebar-glass.collapsing {
+ z-index: $zindex-dropdown;
+ }
+
+ #quarto-sidebar-glass.show {
+ transition: background-color $sidebar-anim-duration ease-out;
+ background-color: $sidebar-glass-bg;
+ z-index: $zindex-dropdown;
+ }
+}
+
+.sidebar .sidebar-footer {
+ padding: 0.5rem 1rem;
+ align-self: flex-end;
+ color: $text-muted;
+ width: 100%;
+}
+
+.quarto-page-breadcrumbs .breadcrumb-item + .breadcrumb-item,
+.quarto-page-breadcrumbs .breadcrumb-item {
+ padding-right: 0.33em;
+ padding-left: 0;
+}
+
+.quarto-page-breadcrumbs .breadcrumb-item::before {
+ padding-right: 0.33em;
+}
+
+.quarto-sidebar-footer {
+ font-size: 0.875em;
+}
+
+.sidebar-section .bi-chevron-right {
+ vertical-align: middle;
+}
+
+.sidebar-section .bi-chevron-right::before {
+ font-size: 0.9em;
+}
+
+.notransition {
+ -webkit-transition: none !important;
+ -moz-transition: none !important;
+ -o-transition: none !important;
+ transition: none !important;
+}
+
+// This is used to suppress the focus borders on Chrome when the user is simply
+// clicking with the mouse vs using the keyboard to move focus.
+.btn:focus:not(:focus-visible) {
+ box-shadow: none;
+}
+
+.page-navigation {
+ display: flex;
+ justify-content: space-between;
+}
+
+.nav-page {
+ padding-bottom: 0.75em;
+}
+
+.nav-page .bi {
+ font-size: 1.8rem;
+ vertical-align: middle;
+}
+
+.nav-page .nav-page-text {
+ padding-left: 0.25em;
+ padding-right: 0.25em;
+}
+
+.nav-page a {
+ color: $text-muted;
+ text-decoration: none;
+ display: flex;
+ align-items: center;
+}
+
+.nav-page a:hover {
+ color: $link-hover-color;
+}
+
+.nav-footer .toc-actions {
+ a,
+ a:hover {
+ text-decoration: none;
+ }
+
+ ul {
+ display: flex;
+ list-style: none;
+
+ :first-child {
+ margin-left: auto;
+ }
+ :last-child {
+ margin-right: auto;
+ }
+
+ li {
+ padding-right: 1.5em;
+
+ i.bi {
+ padding-right: 0.4em;
+ }
+ }
+
+ li:last-of-type {
+ padding-right: 0;
+ }
+ }
+
+ padding-bottom: 0.5em;
+ padding-top: 0.5em;
+}
+
+// border weight
+// border style
+.nav-footer {
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+ justify-content: space-between;
+ align-items: baseline;
+ text-align: center;
+ padding-top: 0.5rem;
+ padding-bottom: 0.5rem;
+ @if variable-exists(footer-bg) {
+ background-color: $footer-bg;
+ }
+}
+
+// Immediate set the top offset if a fixed top header is present
+// This prevents a 'flash / jerk' when the page loads
+body.nav-fixed {
+ padding-top: navbar-default-offset($theme-name);
+}
+
+body .nav-footer {
+ @if variable-exists(footer-border) and $footer-border {
+ @if variable-exists(footer-border-color) {
+ border-top: 1px solid $footer-border-color;
+ } @else {
+ border-top: 1px solid $table-border-color;
+ }
+ }
+}
+
+.nav-footer-contents {
+ color: $text-muted;
+ margin-top: 0.25rem;
+}
+
+.nav-footer {
+ min-height: 3.5em;
+ color: $footer-fg;
+ a {
+ @if variable-exists(footer-fg) {
+ color: $footer-fg;
+ }
+ }
+}
+
+@if variable-exists(footer-left-font-size) {
+ .nav-footer .nav-footer-left {
+ font-size: $footer-left-font-size;
+ }
+}
+
+@if variable-exists(footer-center-font-size) {
+ .nav-footer .nav-footer-center {
+ font-size: $footer-center-font-size;
+ }
+}
+
+@if variable-exists(footer-right-font-size) {
+ .nav-footer .nav-footer-right {
+ font-size: $footer-right-font-size;
+ }
+}
+
+.nav-footer-left .footer-items,
+.nav-footer-center .footer-items,
+.nav-footer-right .footer-items {
+ display: inline-flex;
+ padding-top: 0.3em;
+ padding-bottom: 0.3em;
+ margin-bottom: 0em;
+}
+
+.nav-footer-left .footer-items .nav-link,
+.nav-footer-center .footer-items .nav-link,
+.nav-footer-right .footer-items .nav-link {
+ padding-left: 0.6em;
+ padding-right: 0.6em;
+}
+.nav-footer-left {
+ @include media-breakpoint-up(md) {
+ flex: 1 1 0px;
+ text-align: left;
+ }
+ @include media-breakpoint-down(sm) {
+ margin-bottom: 1em;
+ flex: 100%;
+ }
+}
+.nav-footer-right {
+ @include media-breakpoint-up(md) {
+ flex: 1 1 0px;
+ text-align: right;
+ }
+ @include media-breakpoint-down(sm) {
+ margin-bottom: 1em;
+ flex: 100%;
+ }
+}
+
+.nav-footer-center {
+ @include media-breakpoint-up(md) {
+ flex: 1 1 0px;
+ }
+ text-align: center;
+ min-height: 3em;
+ .footer-items {
+ justify-content: center;
+ }
+ @include media-breakpoint-down(md) {
+ margin-bottom: 1em;
+ flex: 100%;
+ }
+}
+
+@include media-breakpoint-down(md) {
+ .nav-footer-center {
+ margin-top: 3em;
+ order: 10;
+ }
+}
+
+.navbar .quarto-reader-toggle.reader .quarto-reader-toggle-btn {
+ background-color: $navbar-fg;
+ border-radius: 3px;
+}
+
+@include media-breakpoint-down(lg) {
+ .quarto-reader-toggle {
+ display: none;
+ }
+}
+
+.quarto-reader-toggle.reader.quarto-navigation-tool .quarto-reader-toggle-btn {
+ background-color: $sidebar-fg;
+ border-radius: 3px;
+}
+
+.quarto-reader-toggle .quarto-reader-toggle-btn {
+ display: inline-flex;
+ padding-left: 0.2em;
+ padding-right: 0.2em;
+ margin-left: -0.2em;
+ margin-right: -0.2em;
+ text-align: center;
+}
+
+.navbar .quarto-reader-toggle:not(.reader) .bi::before {
+ background-image: url('data:image/svg+xml,');
+}
+
+.navbar .quarto-reader-toggle.reader .bi::before {
+ background-image: url('data:image/svg+xml,');
+}
+
+.sidebar-navigation .quarto-reader-toggle:not(.reader) .bi::before {
+ background-image: url('data:image/svg+xml,');
+}
+
+.sidebar-navigation .quarto-reader-toggle.reader .bi::before {
+ background-image: url('data:image/svg+xml,');
+}
+
+#quarto-back-to-top {
+ display: none;
+ position: fixed;
+ bottom: 50px;
+ background-color: $body-bg;
+ border-radius: $border-radius;
+ box-shadow: 0 0.2rem 0.5rem $text-muted, 0 0 0.05rem $text-muted;
+ color: $text-muted;
+ text-decoration: none;
+ font-size: 0.9em;
+ text-align: center;
+ left: 50%;
+ padding: 0.4rem 0.8rem;
+ transform: translate(-50%, 0);
+}
+
+/* announcement bar */
+#quarto-announcement {
+ padding: 0.5em;
+ display: flex;
+ justify-content: space-between;
+ margin-bottom: 0;
+ font-size: 0.9em;
+
+ .quarto-announcement-content {
+ margin-right: auto;
+ p {
+ margin-bottom: 0;
+ }
+ }
+ .quarto-announcement-icon {
+ margin-right: 0.5em;
+ font-size: 1.2em;
+ margin-top: -0.15em;
+ }
+ .quarto-announcement-action {
+ cursor: pointer;
+ }
+}
+
+
+.aa-DetachedSearchButtonQuery {
+ display: none;
+}
+
+.aa-DetachedOverlay,
+#quarto-search-results {
+ ul.aa-List {
+ list-style: none;
+ padding-left: 0;
+ }
+
+ .aa-Panel {
+ background-color: $body-bg;
+ position: absolute;
+ z-index: 2000;
+ }
+}
+#quarto-search-results {
+ .aa-Panel {
+ max-width: $quarto-search-results-width;
+ }
+}
+
+#quarto-search input {
+ font-size: 0.925rem;
+}
+
+.navbar #quarto-search {
+ @include media-breakpoint-up(lg) {
+ margin-left: 0.25rem;
+ order: 999;
+ }
+}
+
+.navbar.navbar-expand-sm #quarto-search,
+.navbar.navbar-expand-md #quarto-search {
+ order: 999;
+}
+
+.navbar .quarto-navbar-tools {
+ @include media-breakpoint-up(lg) {
+ order: 900;
+ }
+ &.tools-end {
+ @include media-breakpoint-up(lg) {
+ margin-left: auto !important;
+ }
+ }
+}
+
+#quarto-sidebar {
+ .sidebar-search {
+ @include media-breakpoint-down(lg) {
+ display: none;
+ }
+ .aa-Autocomplete {
+ width: $quarto-sidebar-search-input-width;
+ }
+ }
+}
+
+.navbar {
+ .aa-Autocomplete {
+ .aa-Form {
+ width: $quarto-navbar-search-input-width;
+ }
+ }
+}
+
+.navbar #quarto-search.type-overlay {
+ .aa-Autocomplete {
+ width: 40px;
+ .aa-Form {
+ background-color: inherit;
+ border: none;
+ &:focus-within {
+ box-shadow: none;
+ outline: none;
+ }
+ .aa-InputWrapper {
+ display: none;
+ &:focus-within {
+ display: inherit;
+ }
+ }
+
+ .aa-Label,
+ .aa-LoadingIndicator {
+ svg {
+ width: $quarto-search-collapse-icon-size;
+ height: $quarto-search-collapse-icon-size;
+
+ color: $navbar-fg;
+ opacity: 1;
+ }
+ }
+ }
+
+ svg.aa-SubmitIcon {
+ width: $quarto-search-collapse-icon-size;
+ height: $quarto-search-collapse-icon-size;
+
+ color: $navbar-fg;
+ opacity: 1;
+ }
+ }
+}
+
+.aa-Autocomplete,
+.aa-DetachedFormContainer {
+ // Search box
+ .aa-Form {
+ align-items: center;
+ background-color: $input-bg;
+ border: $input-border-width solid $input-border-color;
+ border-radius: $input-border-radius;
+ color: $input-color;
+ display: flex;
+ line-height: 1em;
+ margin: 0;
+ position: relative;
+ width: 100%;
+ &:focus-within {
+ box-shadow: rgba($primary, 0.6) 0 0 0 1px;
+ outline: currentColor none medium;
+ }
+ .aa-InputWrapperPrefix {
+ align-items: center;
+ display: flex;
+ flex-shrink: 0;
+ order: 1;
+ // Container for search and loading icons
+ .aa-Label,
+ .aa-LoadingIndicator {
+ cursor: initial;
+ flex-shrink: 0;
+ padding: 0;
+ text-align: left;
+ svg {
+ color: $input-color;
+ opacity: 0.5;
+ }
+ }
+ .aa-SubmitButton {
+ appearance: none;
+ background: none;
+ border: 0;
+ margin: 0;
+ }
+ .aa-LoadingIndicator {
+ align-items: center;
+ display: flex;
+ justify-content: center;
+ &[hidden] {
+ display: none;
+ }
+ }
+ }
+ .aa-InputWrapper {
+ order: 3;
+ position: relative;
+ width: 100%;
+
+ // Search box input (with placeholder and query)
+ .aa-Input {
+ appearance: none;
+ background: none;
+ border: 0;
+ color: $input-color;
+ font: inherit;
+ height: calc(1.5em + (0.1rem + 2px));
+ padding: 0;
+ width: 100%;
+ &::placeholder {
+ color: $input-color;
+ opacity: 0.8;
+ }
+ // Focus is set and styled on the parent, it isn't necessary here
+ &:focus {
+ border-color: none;
+ box-shadow: none;
+ outline: none;
+ }
+ // Remove native appearence
+ &::-webkit-search-decoration,
+ &::-webkit-search-cancel-button,
+ &::-webkit-search-results-button,
+ &::-webkit-search-results-decoration {
+ display: none;
+ }
+ }
+ }
+ .aa-InputWrapperSuffix {
+ align-items: center;
+ display: flex;
+ order: 4;
+ // Accelerator to clear the query
+ .aa-ClearButton {
+ align-items: center;
+ background: none;
+ border: 0;
+ color: $input-color;
+ opacity: 0.8;
+ cursor: pointer;
+ display: flex;
+ margin: 0;
+ width: calc(1.5em + (0.1rem + 2px));
+ &:hover,
+ &:focus {
+ color: $input-color;
+ opacity: 0.8;
+ }
+ &[hidden] {
+ display: none;
+ }
+ svg {
+ width: $input-height;
+ }
+ }
+
+ .aa-CopyButton {
+ border: none;
+ align-items: center;
+ background: none;
+ color: $input-color;
+ opacity: 0.4;
+ font-size: 0.7rem;
+ cursor: pointer;
+ display: none;
+ margin: 0;
+ width: calc(1em + (0.1rem + 2px));
+ &:hover,
+ &:focus {
+ color: $input-color;
+ opacity: 0.8;
+ }
+ &[hidden] {
+ display: none;
+ }
+ }
+ }
+ }
+}
+
+.aa-PanelLayout:empty {
+ display: none;
+}
+
+.quarto-search-no-results.no-query {
+ display: none;
+}
+
+.aa-Source:has(.no-query) {
+ display: none;
+}
+
+#quarto-search-results .aa-Panel {
+ border: solid $input-border-color $input-border-width;
+}
+
+#quarto-search-results .aa-SourceNoResults {
+ width: $quarto-search-results-width - 2 * $input-border-width;
+}
+
+.aa-DetachedOverlay,
+#quarto-search-results {
+ .aa-Panel {
+ max-height: 65vh;
+ overflow-y: auto;
+ font-size: 0.925rem;
+ }
+
+ .aa-SourceNoResults {
+ height: 60px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ }
+
+ .search-error {
+ padding-top: 10px;
+ padding-left: 20px;
+ padding-right: 20px;
+ cursor: default;
+ .search-error-title {
+ font-size: 1.1rem;
+ margin-bottom: 0.5rem;
+ .search-error-icon {
+ margin-right: 8px;
+ }
+ }
+ .search-error-text {
+ font-weight: 300;
+ }
+ }
+
+ .search-result-text {
+ font-weight: 300;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ display: -webkit-box;
+ -webkit-line-clamp: 2; /* number of lines to show */
+ -webkit-box-orient: vertical;
+ line-height: 1.2rem; /* fallback */
+ max-height: 2.4rem; /* fallback */
+ }
+
+ .aa-SourceHeader {
+ .search-result-header {
+ font-size: 0.875rem;
+ background-color: theme-dim($body-bg, 5%);
+ padding-left: 14px;
+ padding-bottom: 4px;
+ padding-top: 4px;
+ }
+
+ .search-result-header-no-results {
+ display: none;
+ }
+ }
+
+ .aa-SourceFooter {
+ .algolia-search-logo {
+ width: 110px;
+ opacity: 0.85;
+ margin: 8px;
+ float: right;
+ }
+ }
+
+ .search-result-section {
+ font-size: 0.925em;
+ }
+
+ a.search-result-link {
+ color: inherit;
+ text-decoration: none;
+ }
+
+ li.aa-Item[aria-selected="true"] {
+ .search-item {
+ background-color: $component-active-bg;
+
+ &.search-result-more,
+ .search-result-section,
+ .search-result-text,
+ .search-result-title-container,
+ .search-result-text-container {
+ color: $component-active-color;
+ background-color: $component-active-bg;
+ }
+
+ mark.search-match {
+ color: $component-active-color;
+ background-color: theme-fade($component-active-bg, $body-bg, 8%);
+ }
+ }
+ }
+
+ li.aa-Item[aria-selected="false"] {
+ .search-item {
+ background-color: $popover-bg;
+
+ &.search-result-more,
+ .search-result-section,
+ .search-result-text,
+ .search-result-title-container,
+ .search-result-text-container {
+ color: $popover-body-color;
+ }
+
+ mark.search-match {
+ color: inherit;
+ background-color: theme-fade($component-active-bg, $body-bg, 42%);
+ }
+ }
+ }
+
+ .aa-Item {
+ .search-result-doc:not(.document-selectable) {
+ .search-result-title-container {
+ background-color: $popover-bg;
+ color: $body-color;
+ }
+ .search-result-text-container {
+ padding-top: 0px;
+ }
+ }
+ }
+ li.aa-Item {
+ .search-result-doc.document-selectable {
+ .search-result-text-container {
+ margin-top: -4px;
+ }
+ }
+ }
+
+ .aa-Item {
+ cursor: pointer;
+
+ .search-item {
+ border-left: none;
+ border-right: none;
+ border-top: none;
+ background-color: $popover-bg;
+ border-color: $input-border-color;
+ color: $popover-body-color;
+ }
+
+ .search-item {
+ p {
+ margin-top: 0;
+ margin-bottom: 0;
+ }
+
+ i.bi {
+ padding-left: 8px;
+ padding-right: 8px;
+ font-size: 1.3em;
+ }
+
+ .search-result-title {
+ margin-top: 0.3em;
+ margin-bottom: 0em;
+ }
+
+ .search-result-crumbs {
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ font-size: 0.8em;
+ font-weight: 300;
+ margin-right: 1em;
+ }
+
+ .search-result-crumbs:not(.search-result-crumbs-wrap) {
+ max-width: 30%;
+ margin-left: auto;
+ margin-top: 0.5em;
+ margin-bottom: 0.1rem;
+ }
+
+ .search-result-crumbs.search-result-crumbs-wrap {
+ flex-basis: 100%;
+ margin-top: 0em;
+ margin-bottom: 0.2em;
+ margin-left: 37px;
+ }
+ }
+
+ .search-result-title-container {
+ font-size: 1em;
+ display: flex;
+ flex-wrap: wrap;
+ padding: 6px 4px 6px 4px;
+ }
+
+ .search-result-text-container {
+ padding-bottom: 8px;
+ padding-right: 8px;
+ margin-left: 42px;
+ }
+
+ .search-result-doc-section,
+ .search-result-more {
+ padding-top: 8px;
+ padding-bottom: 8px;
+ padding-left: 44px;
+ }
+
+ .search-result-more {
+ font-size: 0.8em;
+ font-weight: 400;
+ }
+
+ .search-result-doc {
+ border-top: $input-border-width solid $input-border-color;
+ }
+ }
+}
+
+// Detached Mode
+.aa-DetachedSearchButton {
+ background: none;
+ border: none;
+
+ .aa-DetachedSearchButtonPlaceholder {
+ display: none;
+ }
+}
+.navbar {
+ .aa-DetachedSearchButton {
+ .aa-DetachedSearchButtonIcon {
+ color: $navbar-fg;
+ }
+ }
+}
+.sidebar-tools-collapse,
+.sidebar-tools-main {
+ #quarto-search {
+ display: inline;
+ .aa-Autocomplete {
+ display: inline;
+ }
+ .aa-DetachedSearchButton {
+ padding-left: 4px;
+ padding-right: 4px;
+ .aa-DetachedSearchButtonIcon {
+ color: $sidebar-fg;
+ .aa-SubmitIcon {
+ margin-top: -3px;
+ }
+ }
+ }
+ }
+}
+.aa-DetachedContainer {
+ background: rgba($body-bg, 0.65);
+ width: 90%;
+ bottom: 0;
+ box-shadow: rgba($input-border-color, 0.6) 0 0 0 1px;
+ outline: currentColor none medium;
+ display: flex;
+ flex-direction: column;
+ left: 0;
+ margin: 0;
+ overflow: hidden;
+ padding: 0;
+ position: fixed;
+ right: 0;
+ top: 0;
+ z-index: 1101;
+ &::after {
+ height: 32px;
+ }
+ .aa-SourceHeader {
+ margin: var(--aa-spacing-half) 0 var(--aa-spacing-half) 2px;
+ }
+ .aa-Panel {
+ background-color: rgba($body-bg, 1);
+ border-radius: 0;
+ box-shadow: none;
+ flex-grow: 1;
+ margin: 0;
+ padding: 0;
+ position: relative;
+ }
+ .aa-PanelLayout {
+ bottom: 0;
+ box-shadow: none;
+ left: 0;
+ margin: 0;
+ max-height: none;
+ overflow-y: auto;
+ position: absolute;
+ right: 0;
+ top: 0;
+ width: 100%;
+ }
+ @at-root .aa-DetachedFormContainer {
+ background-color: rgba($body-bg, 1);
+ border-bottom: $input-border-width solid $input-border-color;
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+ margin: 0;
+ padding: 0.5em;
+ @at-root .aa-DetachedCancelButton {
+ background: none;
+ font-size: 0.8em;
+ border: 0;
+ border-radius: 3px;
+ color: $body-color;
+ cursor: pointer;
+ margin: 0 0 0 0.5em;
+ padding: 0 0.5em;
+ &:hover,
+ &:focus {
+ box-shadow: rgba($primary, 0.6) 0 0 0 1px;
+ outline: currentColor none medium;
+ }
+ }
+ }
+ @at-root .aa-DetachedContainer--modal {
+ bottom: inherit;
+ height: auto;
+ margin: 0 auto;
+ position: absolute;
+ @include media-breakpoint-down(sm) {
+ width: 100%;
+ top: 0px;
+ border-radius: 0px;
+ border: none;
+ }
+
+ @include media-breakpoint-up(med) {
+ top: 100px;
+ border-radius: 6px;
+ max-width: 850px;
+ }
+
+ .aa-PanelLayout {
+ max-height: var(--aa-detached-modal-max-height);
+ padding-bottom: var(--aa-spacing-half);
+ position: static;
+ }
+ }
+}
+
+.aa-Detached {
+ height: 100vh;
+ overflow: hidden;
+}
+
+.aa-DetachedOverlay {
+ background-color: rgba($body-color, 0.4);
+ position: fixed;
+ left: 0;
+ right: 0;
+ top: 0;
+ margin: 0;
+ padding: 0;
+ height: 100vh;
+ z-index: 1100;
+}
+
+
+
+// Value Boxes
+$valuebox-bg-primary: theme-override-value(
+ $theme-name,
+ "valuebox-bg-primary",
+ $primary
+) !default;
+$valuebox-bg-secondary: theme-override-value(
+ $theme-name,
+ "valuebox-bg-secondary",
+ $secondary
+) !default;
+$valuebox-bg-success: theme-override-value(
+ $theme-name,
+ "valuebox-bg-success",
+ $success
+) !default;
+$valuebox-bg-info: theme-override-value(
+ $theme-name,
+ "valuebox-bg-info",
+ $info
+) !default;
+$valuebox-bg-warning: theme-override-value(
+ $theme-name,
+ "valuebox-bg-warning",
+ $warning
+) !default;
+$valuebox-bg-danger: theme-override-value(
+ $theme-name,
+ "valuebox-bg-danger",
+ $danger
+) !default;
+$valuebox-bg-light: theme-override-value(
+ $theme-name,
+ "valuebox-bg-light",
+ $light
+) !default;
+$valuebox-bg-dark: theme-override-value(
+ $theme-name,
+ "valuebox-bg-dark",
+ $dark
+) !default;
+
+$valuebox-colors: (
+ "primary": $valuebox-bg-primary,
+ "secondary": $valuebox-bg-secondary,
+ "success": $valuebox-bg-success,
+ "info": $valuebox-bg-info,
+ "warning": $valuebox-bg-warning,
+ "danger": $valuebox-bg-danger,
+ "light": $valuebox-bg-light,
+ "dark": $valuebox-bg-dark,
+);
+
+// Dashboards
+.quarto-dashboard {
+ &.nav-fixed.dashboard-sidebar #quarto-content.quarto-dashboard-content {
+ padding: 0em;
+ }
+
+ #quarto-content.quarto-dashboard-content {
+ padding: 1em;
+ > * {
+ padding-top: 0;
+ }
+ }
+
+ @include media-breakpoint-up(sm) {
+ height: 100%;
+ }
+
+ @each $valuebox-color, $valuebox-color-value in $valuebox-colors {
+ .card.valuebox.bslib-card.bg-#{$valuebox-color} {
+ background-color: $valuebox-color-value !important;
+ }
+ }
+
+ &.dashboard-fill {
+ display: flex;
+ flex-direction: column;
+ }
+
+ #quarto-appendix {
+ display: none;
+ }
+
+ // Navbar / Navigation
+ #quarto-header #quarto-dashboard-header {
+ border-top: solid 1px theme-dim($navbar-bg, 10%);
+ border-bottom: solid 1px theme-dim($navbar-bg, 10%);
+
+ > nav {
+ padding-left: 1em;
+ padding-right: 1em;
+ .navbar-brand-container {
+ padding-left: 0;
+ }
+ }
+ .navbar-toggler {
+ margin-right: 0;
+ }
+
+ .navbar-toggler-icon {
+ height: 1em;
+ width: 1em;
+ background-image: url('data:image/svg+xml,');
+ }
+
+ .navbar-brand-container {
+ padding-right: 1em;
+ }
+
+ .navbar-title {
+ font-size: 1.1em;
+ }
+
+ .navbar-nav {
+ font-size: 0.9em;
+ }
+ }
+
+ #quarto-dashboard-header {
+ .navbar {
+ padding: 0;
+
+ .navbar-container {
+ padding-left: 1em;
+ }
+
+ &.slim {
+ .navbar-brand-container,
+ .navbar-nav {
+ .nav-link {
+ padding: 0.7em;
+ }
+ }
+ }
+
+ .quarto-color-scheme-toggle {
+ order: 9;
+ }
+
+ .navbar-toggler {
+ margin-left: 0.5em;
+ order: 10;
+ }
+
+ .navbar-nav {
+ .nav-link {
+ padding: 0.5em;
+ height: 100%;
+ display: flex;
+ align-items: center;
+ }
+ & .active {
+ background-color: theme-dim($navbar-bg, 8%);
+ }
+ }
+
+ .navbar-brand-container {
+ padding: 0.5em 0.5em 0.5em 0;
+ display: flex;
+ flex-direction: row;
+ margin-right: 2em;
+ align-items: center;
+ @include media-breakpoint-down(md) {
+ margin-right: auto;
+ }
+ }
+
+ .navbar-collapse {
+ @include media-breakpoint-up(md) {
+ order: 8;
+ }
+ @include media-breakpoint-down(md) {
+ order: 1000;
+ padding-bottom: 0.5em;
+ }
+ align-self: stretch;
+ .navbar-nav {
+ align-self: stretch;
+ }
+ }
+
+ .navbar-title {
+ font-size: 1.25em;
+ line-height: 1.1em;
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+ align-items: baseline;
+ .navbar-title-text {
+ margin-right: 0.4em;
+ }
+ a {
+ text-decoration: none;
+ color: inherit;
+ }
+ }
+
+ .navbar-subtitle,
+ .navbar-author {
+ font-size: 0.9rem;
+ margin-right: 0.5em;
+ }
+
+ .navbar-author {
+ margin-left: auto;
+ }
+
+ .navbar-logo {
+ max-height: 48px;
+ min-height: 30px;
+ object-fit: cover;
+ margin-right: 1em;
+ }
+
+ .quarto-dashboard-links {
+ order: 9;
+ padding-right: 1em;
+ }
+ .quarto-dashboard-link-text {
+ margin-left: 0.25em;
+ }
+
+ .quarto-dashboard-link {
+ padding-right: 0em;
+ padding-left: 0.7em;
+ text-decoration: none;
+ color: $navbar-fg;
+ }
+ }
+ }
+
+ .page-layout-custom .tab-content {
+ padding: 0;
+ border: none;
+ }
+}
+
+.quarto-dashboard-img-contain {
+ height: 100%;
+ width: 100%;
+ object-fit: contain;
+}
+
+.quarto-dashboard {
+ // Mobile sizes convert into 'scrolling' layouts
+ @include media-breakpoint-down(sm) {
+ .bslib-grid {
+ grid-template-rows: minmax(1em, max-content) !important;
+ }
+ .sidebar-content {
+ height: inherit;
+ }
+ .page-layout-custom {
+ min-height: 100vh;
+ }
+ }
+
+ &.dashboard-toolbar > .page-layout-custom,
+ &.dashboard-sidebar > .page-layout-custom {
+ padding: 0;
+ }
+
+ .quarto-dashboard-content.quarto-dashboard-pages {
+ padding: 0;
+ }
+
+ .callout {
+ margin-bottom: 0;
+ margin-top: 0;
+ }
+
+ .html-fill-container figure {
+ overflow: hidden;
+ }
+
+ bslib-tooltip {
+ .rounded-pill {
+ .svg {
+ fill: $body-color;
+ }
+ border: solid $text-muted 1px;
+ }
+ }
+
+ .tabset .dashboard-card-no-title .nav-tabs {
+ margin-left: 0;
+ margin-right: auto;
+ }
+
+ .tabset .tab-content {
+ border: none;
+ }
+
+ .tabset .card-header {
+ .nav-link[role="tab"] {
+ margin-top: -6px;
+ padding-top: 6px;
+ padding-bottom: 6px;
+ }
+ }
+
+ .card.valuebox,
+ .card.bslib-value-box {
+ min-height: 3rem;
+ .card-body {
+ padding: 0;
+ }
+ }
+
+ .bslib-value-box {
+ .value-box-value {
+ font-size: clamp(0.1em, 15cqw, 5em);
+ }
+
+ .value-box-showcase .bi {
+ font-size: clamp(0.1em, max(18cqw, 5.2cqh), 5em);
+
+ text-align: center;
+ height: 1em;
+ }
+
+ .value-box-showcase .bi::before {
+ vertical-align: 1em;
+ }
+
+ .value-box-area {
+ margin-top: auto;
+ margin-bottom: auto;
+ }
+ }
+
+ .card figure.quarto-float {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ }
+
+ .dashboard-scrolling {
+ padding: 1em;
+ }
+
+ .full-height {
+ height: 100%;
+ }
+
+ .showcase-bottom {
+ .value-box-grid {
+ display: grid;
+ grid-template-columns: 1fr;
+ grid-template-rows: 1fr auto;
+ grid-template-areas: "top" "bottom";
+
+ .value-box-showcase {
+ grid-area: bottom;
+ padding: 0;
+ margin: 0;
+ i.bi {
+ font-size: 4rem;
+ }
+ }
+ .value-box-area {
+ grid-area: top;
+ }
+ }
+ }
+
+ .tab-content {
+ margin-bottom: 0;
+ }
+
+ .bslib-card .bslib-navs-card-title {
+ justify-content: stretch;
+ align-items: end;
+ }
+
+ .card-header {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: space-between;
+
+ .card-title {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ margin-bottom: 0;
+ }
+ }
+
+ .tabset {
+ .card-toolbar {
+ margin-bottom: 1em;
+ }
+ }
+
+ /* Sidebar */
+ .bslib-grid > .bslib-sidebar-layout {
+ border: none;
+ gap: var(--bslib-spacer, 1rem);
+ > .main {
+ padding: 0;
+ }
+ > .sidebar {
+ border-radius: $card-border-radius;
+ border: $card-border-width solid $card-border-color;
+ }
+ > .collapse-toggle {
+ display: none;
+ }
+
+ @include media-breakpoint-down(md) {
+ grid-template-columns: 1fr;
+ grid-template-rows: max-content 1fr;
+ > .main {
+ grid-column: 1;
+ grid-row: 2;
+ }
+ .sidebar {
+ grid-column: 1;
+ grid-row: 1;
+ }
+ }
+ }
+
+ .sidebar-right {
+ .sidebar {
+ padding-left: 2.5em;
+ }
+
+ .collapse-toggle {
+ left: 2px;
+ }
+ }
+
+ .quarto-dashboard .sidebar-right button.collapse-toggle:not(.transitioning) {
+ left: unset;
+ }
+
+ aside.sidebar {
+ padding-left: 1em;
+ padding-right: 1em;
+ background-color: $card-cap-bg;
+ color: $card-cap-color or $body-color;
+ }
+
+ .bslib-sidebar-layout {
+ > div.main {
+ padding: 0.7em;
+ }
+
+ button.collapse-toggle {
+ margin-top: 0.3em;
+ }
+ }
+
+ .bslib-sidebar-layout .collapse-toggle {
+ top: 0;
+ }
+
+ .bslib-sidebar-layout.sidebar-collapsed:not(.transitioning):not(
+ .sidebar-right
+ )
+ .collapse-toggle {
+ left: 2px;
+ }
+
+ .sidebar > section > .h3:first-of-type {
+ margin-top: 0em;
+ }
+
+ .sidebar .h3,
+ .sidebar .h4,
+ .sidebar .h5,
+ .sidebar .h6 {
+ margin-top: 0.5em;
+ }
+
+ .sidebar {
+ @include observable-sidebar-inputs();
+
+ .card-body {
+ margin-bottom: 2em;
+ }
+
+ .shiny-input-container {
+ margin-bottom: 1em;
+ }
+
+ .shiny-options-group {
+ margin-top: 0;
+ }
+ .control-label {
+ margin-bottom: 0.3em;
+ }
+ }
+ .card .card-body .quarto-layout-row {
+ align-items: stretch;
+ }
+
+ /* Toolbar */
+ .toolbar {
+ font-size: 0.9em;
+ display: flex;
+ flex-direction: row;
+ border-top: solid 1px theme-dim($secondary-bg-subtle, 10%);
+ padding: 1em;
+ flex-wrap: wrap;
+ background-color: $card-cap-bg;
+
+ @include shiny-toolbar-customizations();
+ @include observable-toolbar-inputs();
+
+ > * {
+ font-size: 0.9em;
+ flex-grow: 0;
+ }
+
+ .shiny-input-container {
+ label {
+ margin-bottom: 1px;
+ }
+ }
+ }
+
+ // Positions the toolbar at the bottom of the flexbox
+ .toolbar-bottom {
+ margin-top: 1em;
+ margin-bottom: 0 !important;
+ order: 2;
+ }
+
+ // If there is are pages, move the padding down inside the
+ // the nested tab contents (Global)
+ .quarto-dashboard-content
+ > .dashboard-toolbar-container
+ > .toolbar-content
+ > .tab-content
+ > .tab-pane
+ > *:not(.bslib-sidebar-layout) {
+ padding: 1em;
+ }
+
+ // If this is simple dashboard with a top level tool bar
+ .quarto-dashboard-content
+ > .dashboard-toolbar-container
+ > .toolbar-content
+ > *:not(.tab-content) {
+ padding: 1em;
+ }
+
+ // If there are pages, but no global toolbar
+ .quarto-dashboard-content
+ > .tab-content
+ > .dashboard-page
+ > .dashboard-toolbar-container
+ > .toolbar-content,
+ .quarto-dashboard-content
+ > .tab-content
+ > .dashboard-page:not(.dashboard-sidebar-container)
+ > *:not(.dashboard-toolbar-container) {
+ padding: 1em;
+ }
+
+ .toolbar-content {
+ padding: 0;
+ }
+
+ .quarto-dashboard-content.quarto-dashboard-pages
+ .tab-pane
+ > .dashboard-toolbar-container {
+ .toolbar {
+ border-radius: 0;
+ margin-bottom: 0;
+ }
+ }
+
+ .dashboard-toolbar-container.toolbar-toplevel {
+ .toolbar {
+ border-bottom: $card-border-width solid $card-border-color;
+ }
+ .toolbar-bottom {
+ margin-top: 0;
+ }
+ }
+
+ .dashboard-toolbar-container:not(.toolbar-toplevel) {
+ .toolbar {
+ margin-bottom: 1em;
+ border-top: none;
+ border-radius: $border-radius;
+ border: $card-border-width solid $card-border-color;
+ }
+ }
+
+ .vega-embed.has-actions {
+ details {
+ width: 1.7em;
+ height: 2em;
+ position: absolute !important;
+ top: 0;
+ right: 0;
+ }
+ }
+
+ .dashboard-toolbar-container {
+ padding: 0;
+ }
+
+ /* Card Toolbar */
+ /* Card */
+ .card {
+ .card-header,
+ .card-footer {
+ p:last-child {
+ margin-bottom: 0;
+ }
+ }
+
+ .card-body > .h4:first-child {
+ margin-top: 0;
+ }
+
+ // This ensures that elements in the card body (notably the expansion toggle)
+ // appear above the elements inside of it (notably itables, which cause issues)
+ .card-body {
+ z-index: 4;
+
+ // Customize appearance of elements within cards
+ @include itables();
+ }
+
+ .card-footer {
+ font-size: 0.9em;
+ }
+
+ .card-toolbar {
+ display: flex;
+ flex-grow: 1;
+ flex-direction: row;
+ width: 100%;
+ > * {
+ font-size: 0.8em;
+ flex-grow: 0;
+ }
+
+ > .card-title {
+ font-size: 1em;
+ flex-grow: 1;
+ align-self: flex-start;
+ margin-top: 0.1em;
+ }
+
+ flex-wrap: wrap;
+
+ @include toolbar-layout();
+
+ @include observable-toolbar-inputs();
+ @include shiny-toolbar-customizations();
+ }
+ }
+
+ /*-- Misc HTML elements --*/
+ .card-body > table > thead {
+ border-top: none;
+ }
+
+ .card-body > .table > :not(caption) > * > * {
+ background-color: $card-bg;
+ color: $card-color;
+ }
+}
+
+/*-- itables --*/
+.tableFloatingHeaderOriginal {
+ background-color: $card-bg;
+ position: sticky !important;
+ top: 0 !important;
+}
+
+.dashboard-data-table {
+ margin-top: -1px;
+}
+
+/*-- ojs --*/
+
+div.value-box-area span.observablehq--number {
+ /* the calculation below is pretty horrible, but it's our best effort to match
+ the font sizes of these two different ways of rendering a number in a value-box:
+
+```{ojs}
+//| content: valuebox
+//| title: "Articles per day"
+//| icon: pencil
+//| color: primary
+12
+```
+
+```{python}
+#| content: valuebox
+#| title: "Articles per day"
+#| icon: pencil
+#| color: primary
+dict(
+ value = 12
+)
+```
+
+ See https://github.com/quarto-dev/quarto-cli/issues/8823
+
+ */
+ font-size: calc(clamp(0.1em, 15cqw, 5em) * 1.25);
+ line-height: 1.2;
+ color: inherit;
+ font-family: var(--bs-body-font-family);
+}
+
+
+
+.quarto-listing {
+ padding-bottom: 1em;
+}
+
+// General Pagination / Filter Control Styling
+.listing-pagination {
+ padding-top: 0.5em;
+}
+
+ul.pagination {
+ float: right;
+ padding-left: 8px;
+ padding-top: 0.5em;
+ li {
+ padding-right: 0.75em;
+ }
+ li.disabled,
+ li.active {
+ a {
+ color: $pagination-active-color;
+ text-decoration: none;
+ }
+ }
+ li:last-of-type {
+ padding-right: 0;
+ }
+}
+
+.listing-actions-group {
+ display: flex;
+ .form-select,
+ .form-control {
+ @include input-form-control();
+ }
+ .input-group {
+ @include input-group();
+ @include input-placeholder();
+ }
+}
+
+// Filtering and Sorting
+.quarto-listing-filter {
+ margin-bottom: 1em;
+ width: 200px;
+ margin-left: auto;
+}
+
+.quarto-listing-sort {
+ margin-bottom: 1em;
+ margin-right: auto;
+ .input-group-text {
+ font-size: 0.8em;
+ }
+ width: auto;
+}
+
+.input-group input,
+.input-group select {
+ @include input-group-text();
+}
+.input-group-text {
+ @include input-group-text();
+ border-right: none;
+}
+
+.quarto-listing-sort select.form-select {
+ font-size: 0.8em;
+}
+
+.listing-no-matching {
+ text-align: center;
+ padding-top: 2em;
+ padding-bottom: 3em;
+ font-size: 1em;
+}
+
+// Category styling
+#quarto-margin-sidebar {
+ .quarto-listing-category {
+ padding-top: 0;
+ font-size: 1rem;
+ }
+ .quarto-listing-category-title {
+ cursor: pointer;
+ font-weight: 600;
+ font-size: 1rem;
+ }
+}
+
+.quarto-listing-category {
+ .category {
+ cursor: pointer;
+ }
+ .category.active {
+ font-weight: 600;
+ }
+}
+
+.quarto-listing-category.category-cloud {
+ display: flex;
+ flex-wrap: wrap;
+ align-items: baseline;
+ .category {
+ padding-right: 5px;
+ }
+
+ @for $count from 1 through 10 {
+ .category-cloud-#{$count} {
+ font-size: 0.55em + ($count * 0.2em);
+ }
+ }
+}
+
+// Grid Listing Styling
+@for $colcount from 1 through 12 {
+ .quarto-listing-cols-#{$colcount} {
+ grid-template-columns: repeat($colcount, minmax(0, 1fr));
+ gap: 1.5em;
+ }
+
+ @include media-breakpoint-down(md) {
+ .quarto-listing-cols-#{$colcount} {
+ grid-template-columns: repeat(min(2, $colcount), minmax(0, 1fr));
+ gap: 1.5em;
+ }
+ }
+
+ @include media-breakpoint-down(sm) {
+ .quarto-listing-cols-#{$colcount} {
+ grid-template-columns: minmax(0, 1fr);
+ gap: 1.5em;
+ }
+ }
+}
+
+.quarto-listing-grid {
+ gap: 1.5em;
+}
+
+.quarto-grid-item.borderless {
+ border: none;
+ .listing-categories {
+ .listing-category:last-of-type,
+ .listing-category:first-of-type {
+ padding-left: 0;
+ }
+ .listing-category {
+ border: 0;
+ }
+ }
+}
+
+.quarto-grid-link {
+ text-decoration: none;
+ color: inherit;
+}
+
+.quarto-grid-link:hover {
+ text-decoration: none;
+ color: inherit;
+}
+
+.quarto-grid-item {
+ h5.title {
+ margin-top: 0;
+ margin-bottom: 0;
+ }
+
+ .card-footer {
+ display: flex;
+ justify-content: space-between;
+ font-size: 0.8em;
+ p {
+ margin-bottom: 0;
+ }
+ }
+
+ p.card-img-top {
+ margin-bottom: 0;
+ > img {
+ object-fit: cover;
+ }
+ }
+
+ .card-other-values {
+ margin-top: 0.5em;
+ font-size: 0.8em;
+ tr {
+ margin-bottom: 0.5em;
+ }
+ tr > td:first-of-type {
+ font-weight: 600;
+ padding-right: 1em;
+ padding-left: 1em;
+ vertical-align: top;
+ }
+ }
+
+ div.post-contents {
+ display: flex;
+ flex-direction: column;
+ text-decoration: none;
+ height: 100%;
+ }
+
+ .listing-item-img-placeholder {
+ background-color: $card-cap-bg;
+ flex-shrink: 0;
+ }
+
+ .card-attribution {
+ padding-top: 1em;
+ display: flex;
+ gap: 1em;
+ text-transform: uppercase;
+ color: $text-muted;
+ font-weight: 500;
+ flex-grow: 10;
+ align-items: flex-end;
+ }
+
+ .description {
+ padding-bottom: 1em;
+ }
+
+ .card-attribution .date {
+ align-self: flex-end;
+ }
+
+ .card-attribution.justify {
+ justify-content: space-between;
+ }
+
+ .card-attribution.start {
+ justify-content: flex-start;
+ }
+
+ .card-attribution.end {
+ justify-content: flex-end;
+ }
+
+ .card-title {
+ margin-bottom: 0.1em;
+ }
+ .card-subtitle {
+ padding-top: 0.25em;
+ }
+
+ .card-text {
+ font-size: 0.9em;
+ }
+
+ .listing-reading-time {
+ padding-bottom: 0.25em;
+ }
+
+ .card-text-small {
+ font-size: 0.8em;
+ }
+
+ .card-subtitle.subtitle {
+ font-size: 0.9em;
+ font-weight: 600;
+ padding-bottom: 0.5em;
+ }
+
+ .listing-categories {
+ @include listing-category();
+ }
+}
+
+.quarto-grid-item.card-right {
+ text-align: right;
+ .listing-categories {
+ justify-content: flex-end;
+ }
+}
+
+.quarto-grid-item.card-left {
+ text-align: left;
+}
+
+.quarto-grid-item.card-center {
+ text-align: center;
+ .listing-description {
+ text-align: justify;
+ }
+ .listing-categories {
+ justify-content: center;
+ }
+}
+
+// Table Listing Styling
+table.quarto-listing-table {
+ td.image {
+ padding: 0px;
+ img {
+ width: 100%;
+ max-width: 50px;
+ object-fit: contain;
+ }
+ }
+
+ a {
+ text-decoration: none;
+ word-break: keep-all;
+ }
+
+ th a {
+ color: inherit;
+ }
+
+ th a.asc:after {
+ margin-bottom: -2px;
+ margin-left: 5px;
+ display: inline-block;
+ height: 1rem;
+ width: 1rem;
+ background-repeat: no-repeat;
+ background-size: 1rem 1rem;
+ background-image: url('data:image/svg+xml,');
+ content: "";
+ }
+
+ th a.desc:after {
+ margin-bottom: -2px;
+ margin-left: 5px;
+ display: inline-block;
+ height: 1rem;
+ width: 1rem;
+ background-repeat: no-repeat;
+ background-size: 1rem 1rem;
+ background-image: url('data:image/svg+xml,');
+ content: "";
+ }
+}
+
+table.quarto-listing-table.table-hover td {
+ cursor: pointer;
+}
+
+.quarto-post.image-left {
+ flex-direction: row;
+}
+
+.quarto-post.image-right {
+ flex-direction: row-reverse;
+}
+
+@include media-breakpoint-down(md) {
+ .quarto-post.image-right,
+ .quarto-post.image-left {
+ gap: 0em;
+ flex-direction: column;
+ }
+
+ .quarto-post .metadata {
+ padding-bottom: 1em;
+ order: 2;
+ }
+
+ .quarto-post .body {
+ order: 1;
+ }
+
+ .quarto-post .thumbnail {
+ order: 3;
+ }
+}
+
+// Post (default) Styling
+.list.quarto-listing-default div:last-of-type {
+ border-bottom: none;
+}
+
+.quarto-listing-container-default {
+ @include media-breakpoint-up(lg) {
+ margin-right: 2em;
+ }
+}
+
+div.quarto-post {
+ display: flex;
+ gap: 2em;
+ margin-bottom: 1.5em;
+ @include media-breakpoint-down(md) {
+ padding-bottom: 1em;
+ }
+ border-bottom: 1px solid $border-color;
+
+ .metadata {
+ flex-basis: 20%;
+ flex-grow: 0;
+ margin-top: 0.2em;
+ flex-shrink: 10;
+ }
+
+ .thumbnail {
+ flex-basis: 30%;
+ flex-grow: 0;
+ flex-shrink: 0;
+ img {
+ margin-top: 0.4em;
+ width: 100%;
+ object-fit: cover;
+ }
+ }
+
+ .body {
+ flex-basis: 45%;
+ flex-grow: 1;
+ flex-shrink: 0;
+
+ h3.listing-title {
+ margin-top: 0px;
+ margin-bottom: 0px;
+ border-bottom: none;
+ }
+
+ .listing-subtitle {
+ font-size: 0.875em;
+ margin-bottom: 0.5em;
+ margin-top: 0.2em;
+ }
+
+ .description {
+ font-size: 0.9em;
+ }
+
+ pre code {
+ white-space: pre-wrap;
+ }
+ }
+
+ a {
+ color: $body-color;
+ text-decoration: none;
+ }
+
+ .metadata {
+ display: flex;
+ flex-direction: column;
+ font-size: 0.8em;
+ font-family: $font-family-base;
+ flex-basis: 33%;
+ }
+
+ .listing-categories {
+ @include listing-category();
+ }
+
+ .listing-description {
+ margin-bottom: 0.5em;
+ }
+}
+
+
+
+// Jolla
+
+div.quarto-about-jolla {
+ display: flex !important;
+ flex-direction: column;
+ align-items: center;
+ margin-top: 10%;
+ padding-bottom: 1em;
+
+ .about-image {
+ object-fit: cover;
+ margin-left: auto;
+ margin-right: auto;
+ margin-bottom: 1.5em;
+ }
+ @include image-shapes();
+
+ .quarto-title h1.title {
+ text-align: center;
+ }
+
+ .quarto-title .description {
+ text-align: center;
+ }
+
+ h2 {
+ border-bottom: none;
+ }
+
+ .about-sep {
+ width: 60%;
+ }
+
+ main {
+ text-align: center;
+ }
+
+ .about-links {
+ @include responsive-buttons();
+ }
+
+ .about-link {
+ @include responsive-button();
+ }
+}
+
+// Solana
+div.quarto-about-solana {
+ display: flex !important;
+ flex-direction: column;
+ padding-top: 3em !important;
+ padding-bottom: 1em;
+
+ .about-entity {
+ display: flex !important;
+
+ @include media-breakpoint-up(lg) {
+ flex-direction: row;
+ }
+ @include media-breakpoint-down(lg) {
+ flex-direction: column-reverse;
+ align-items: center;
+ text-align: center;
+ }
+
+ align-items: start;
+ justify-content: space-between;
+
+ .entity-contents {
+ display: flex;
+ flex-direction: column;
+ @include media-breakpoint-down(md) {
+ width: 100%;
+ }
+ }
+
+ .about-image {
+ object-fit: cover;
+ @include media-breakpoint-down(lg) {
+ margin-bottom: 1.5em;
+ }
+ }
+ @include image-shapes();
+
+ .about-links {
+ @include responsive-buttons();
+ justify-content: left;
+ padding-bottom: 1.2em;
+ }
+
+ .about-link {
+ @include responsive-button();
+ }
+ }
+
+ .about-contents {
+ padding-right: 1.5em;
+
+ flex-basis: 0;
+ flex-grow: 1;
+ main.content {
+ margin-top: 0;
+ }
+ h2 {
+ border-bottom: none;
+ }
+ }
+}
+
+// Trestles
+div.quarto-about-trestles {
+ display: flex !important;
+ flex-direction: row;
+ padding-top: 3em !important;
+ padding-bottom: 1em;
+
+ @include media-breakpoint-down(lg) {
+ flex-direction: column;
+ padding-top: 0em !important;
+ }
+
+ .about-entity {
+ @include media-breakpoint-up(lg) {
+ //max-width: 42%;
+ flex: 0 0 42%;
+ }
+ display: flex !important;
+ flex-direction: column;
+ align-items: center;
+ text-align: center;
+ padding-right: 1em;
+
+ .about-image {
+ object-fit: cover;
+ margin-bottom: 1.5em;
+ }
+ @include image-shapes();
+
+ .about-links {
+ @include responsive-buttons();
+ justify-content: center;
+ }
+
+ .about-link {
+ @include responsive-button();
+ }
+ }
+
+ .about-contents {
+ flex-basis: 0;
+ flex-grow: 1;
+
+ h2 {
+ border-bottom: none;
+ }
+
+ @include media-breakpoint-up(lg) {
+ border-left: solid 1px $border-color;
+ padding-left: 1.5em;
+ }
+
+ main.content {
+ margin-top: 0;
+ }
+ }
+}
+
+// Marquee
+div.quarto-about-marquee {
+ padding-bottom: 1em;
+
+ .about-contents {
+ display: flex;
+ flex-direction: column;
+ }
+
+ .about-image {
+ max-height: 550px;
+ margin-bottom: 1.5em;
+ object-fit: cover;
+ }
+ @include image-shapes();
+
+ h2 {
+ border-bottom: none;
+ }
+
+ .about-links {
+ @include responsive-buttons();
+ justify-content: center;
+ padding-top: 1.5em;
+ }
+
+ .about-link {
+ @include responsive-button();
+ @include media-breakpoint-up(lg) {
+ border: none;
+ }
+ }
+}
+
+// Broadside
+div.quarto-about-broadside {
+ display: flex;
+ flex-direction: column;
+ padding-bottom: 1em;
+
+ .about-main {
+ display: flex !important;
+ padding-top: 0 !important;
+ @include media-breakpoint-up(lg) {
+ flex-direction: row;
+ align-items: flex-start;
+ }
+
+ @include media-breakpoint-down(lg) {
+ flex-direction: column;
+ }
+
+ .about-entity {
+ @include media-breakpoint-down(lg) {
+ flex-shrink: 0;
+ width: 100%;
+ height: 450px;
+ margin-bottom: 1.5em;
+ background-size: cover;
+ background-repeat: no-repeat;
+ }
+ @include media-breakpoint-up(lg) {
+ flex: 0 10 50%;
+ margin-right: 1.5em;
+ width: 100%;
+ height: 100%;
+ background-size: 100%;
+ background-repeat: no-repeat;
+ }
+ }
+
+ .about-contents {
+ padding-top: 14px;
+ flex: 0 0 50%;
+ }
+ }
+
+ h2 {
+ border-bottom: none;
+ }
+
+ .about-sep {
+ margin-top: 1.5em;
+ width: 60%;
+ align-self: center;
+ }
+
+ .about-links {
+ @include responsive-buttons();
+ justify-content: center;
+ column-gap: 20px;
+ padding-top: 1.5em;
+ }
+
+ .about-link {
+ @include responsive-button();
+ @include media-breakpoint-up(lg) {
+ border: none;
+ }
+ }
+}
+
+
+// Tippy customizations
+
+.tippy-box[data-theme~="quarto"] {
+ background-color: $body-bg;
+ border: solid $border-width $border-color;
+ border-radius: $border-radius;
+ color: $body-color;
+ font-size: $font-size-sm;
+}
+.tippy-box[data-theme~="quarto"] > .tippy-backdrop {
+ background-color: $body-bg;
+}
+.tippy-box[data-theme~="quarto"] > .tippy-arrow:after,
+.tippy-box[data-theme~="quarto"] > .tippy-svg-arrow:after {
+ content: "";
+ position: absolute;
+ z-index: -1;
+}
+.tippy-box[data-theme~="quarto"] > .tippy-arrow:after {
+ border-color: transparent;
+ border-style: solid;
+}
+
+.tippy-box[data-placement^="top"] > .tippy-arrow:before {
+ bottom: -6px;
+}
+.tippy-box[data-placement^="bottom"] > .tippy-arrow:before {
+ top: -6px;
+}
+.tippy-box[data-placement^="right"] > .tippy-arrow:before {
+ left: -6px;
+}
+.tippy-box[data-placement^="left"] > .tippy-arrow:before {
+ right: -6px;
+}
+
+.tippy-box[data-theme~="quarto"][data-placement^="top"] > .tippy-arrow:before {
+ border-top-color: $body-bg;
+}
+.tippy-box[data-theme~="quarto"][data-placement^="top"] > .tippy-arrow:after {
+ border-top-color: $border-color;
+ border-width: 7px 7px 0;
+ top: 17px;
+ left: 1px;
+}
+.tippy-box[data-theme~="quarto"][data-placement^="top"]
+ > .tippy-svg-arrow
+ > svg {
+ top: 16px;
+}
+.tippy-box[data-theme~="quarto"][data-placement^="top"]
+ > .tippy-svg-arrow:after {
+ top: 17px;
+}
+.tippy-box[data-theme~="quarto"][data-placement^="bottom"]
+ > .tippy-arrow:before {
+ border-bottom-color: $body-bg;
+ bottom: 16px;
+}
+.tippy-box[data-theme~="quarto"][data-placement^="bottom"]
+ > .tippy-arrow:after {
+ border-bottom-color: $border-color;
+ border-width: 0 7px 7px;
+ bottom: 17px;
+ left: 1px;
+}
+.tippy-box[data-theme~="quarto"][data-placement^="bottom"]
+ > .tippy-svg-arrow
+ > svg {
+ bottom: 15px;
+}
+.tippy-box[data-theme~="quarto"][data-placement^="bottom"]
+ > .tippy-svg-arrow:after {
+ bottom: 17px;
+}
+.tippy-box[data-theme~="quarto"][data-placement^="left"] > .tippy-arrow:before {
+ border-left-color: $body-bg;
+}
+.tippy-box[data-theme~="quarto"][data-placement^="left"] > .tippy-arrow:after {
+ border-left-color: $border-color;
+ border-width: 7px 0 7px 7px;
+ left: 17px;
+ top: 1px;
+}
+.tippy-box[data-theme~="quarto"][data-placement^="left"]
+ > .tippy-svg-arrow
+ > svg {
+ left: 11px;
+}
+.tippy-box[data-theme~="quarto"][data-placement^="left"]
+ > .tippy-svg-arrow:after {
+ left: 12px;
+}
+.tippy-box[data-theme~="quarto"][data-placement^="right"]
+ > .tippy-arrow:before {
+ border-right-color: $body-bg;
+ right: 16px;
+}
+.tippy-box[data-theme~="quarto"][data-placement^="right"] > .tippy-arrow:after {
+ border-width: 7px 7px 7px 0;
+ right: 17px;
+ top: 1px;
+ border-right-color: $border-color;
+}
+.tippy-box[data-theme~="quarto"][data-placement^="right"]
+ > .tippy-svg-arrow
+ > svg {
+ right: 11px;
+}
+.tippy-box[data-theme~="quarto"][data-placement^="right"]
+ > .tippy-svg-arrow:after {
+ right: 12px;
+}
+.tippy-box[data-theme~="quarto"] > .tippy-svg-arrow {
+ fill: $body-color;
+}
+.tippy-box[data-theme~="quarto"] > .tippy-svg-arrow:after {
+ background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iNiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMCA2czEuNzk2LS4wMTMgNC42Ny0zLjYxNUM1Ljg1MS45IDYuOTMuMDA2IDggMGMxLjA3LS4wMDYgMi4xNDguODg3IDMuMzQzIDIuMzg1QzE0LjIzMyA2LjAwNSAxNiA2IDE2IDZIMHoiIGZpbGw9InJnYmEoMCwgOCwgMTYsIDAuMikiLz48L3N2Zz4=);
+ background-size: 16px 6px;
+ width: 16px;
+ height: 6px;
+}
+
+
+// floating
+
+.top-right {
+ position: absolute;
+ top: 1em;
+ right: 1em;
+}
+
+// hidden
+
+// https://github.com/quarto-dev/quarto-cli/issues/5403#issuecomment-1533791947
+.visually-hidden {
+ border: 0;
+ clip: rect(0 0 0 0);
+ height: auto;
+ margin: 0;
+ overflow: hidden;
+ padding: 0;
+ position: absolute;
+ width: 1px;
+ white-space: nowrap;
+}
+
+.hidden {
+ display: none !important;
+}
+
+.zindex-bottom {
+ z-index: -1 !important;
+}
+
+// layout and figures
+
+figure.figure {
+ display: block;
+}
+
+.quarto-layout-panel {
+ margin-bottom: 1em;
+}
+
+.quarto-layout-panel > figure {
+ width: 100%;
+}
+.quarto-layout-panel > figure > figcaption,
+.quarto-layout-panel > .panel-caption {
+ margin-top: 10pt;
+}
+
+.quarto-layout-panel > .table-caption {
+ margin-top: 0px;
+}
+
+.table-caption p {
+ margin-bottom: 0.5em;
+}
+
+.quarto-layout-row {
+ display: flex;
+ flex-direction: row;
+ align-items: flex-start;
+}
+.quarto-layout-valign-top {
+ align-items: flex-start;
+}
+.quarto-layout-valign-bottom {
+ align-items: flex-end;
+}
+.quarto-layout-valign-center {
+ align-items: center;
+}
+.quarto-layout-cell {
+ position: relative;
+ margin-right: 20px;
+}
+.quarto-layout-cell:last-child {
+ margin-right: 0;
+}
+.quarto-layout-cell figure,
+.quarto-layout-cell > p {
+ margin: 0.2em;
+}
+.quarto-layout-cell img {
+ max-width: 100%;
+}
+.quarto-layout-cell .html-widget {
+ width: 100% !important;
+}
+.quarto-layout-cell div figure p {
+ margin: 0;
+}
+.quarto-layout-cell figure {
+ display: block;
+ margin-inline-start: 0;
+ margin-inline-end: 0;
+}
+.quarto-layout-cell table {
+ display: inline-table;
+}
+.quarto-layout-cell-subref figcaption,
+figure .quarto-layout-row figure figcaption {
+ text-align: center;
+ font-style: italic;
+}
+.quarto-figure {
+ position: relative;
+ margin-bottom: 1em;
+}
+
+.quarto-figure > figure {
+ width: 100%;
+ margin-bottom: 0;
+}
+.quarto-figure-left > figure > p,
+.quarto-figure-left > figure > div /* for mermaid and dot diagrams */ {
+ text-align: left;
+}
+.quarto-figure-center > figure > p,
+.quarto-figure-center > figure > div /* for mermaid and dot diagrams */ {
+ text-align: center;
+}
+.quarto-figure-right > figure > p,
+.quarto-figure-right > figure > div /* for mermaid and dot diagrams */ {
+ text-align: right;
+}
+
+.quarto-figure > figure > div.cell-annotation,
+.quarto-figure > figure > div code {
+ text-align: left; /* override align center for code blocks */
+}
+
+figure > p:empty {
+ display: none;
+}
+figure > p:first-child {
+ margin-top: 0;
+ margin-bottom: 0;
+}
+
+figure > figcaption.quarto-float-caption-bottom {
+ margin-bottom: 0.5em;
+}
+figure > figcaption.quarto-float-caption-top {
+ margin-top: 0.5em;
+}
+
+// anchor
+
+// anchor js
+
+div[id^="tbl-"] {
+ position: relative;
+}
+
+.quarto-figure > .anchorjs-link {
+ position: absolute;
+ top: 0.6em;
+ right: 0.5em;
+}
+
+div[id^="tbl-"] > .anchorjs-link {
+ position: absolute;
+ top: 0.7em;
+ right: 0.3em;
+}
+
+/* workaround for anchorjs not hitting on generic :hover selector */
+.quarto-figure:hover > .anchorjs-link,
+div[id^="tbl-"]:hover > .anchorjs-link,
+h2:hover > .anchorjs-link,
+h3:hover > .anchorjs-link,
+h4:hover > .anchorjs-link,
+h5:hover > .anchorjs-link,
+h6:hover > .anchorjs-link,
+.reveal-anchorjs-link > .anchorjs-link {
+ opacity: 1;
+}
+
+#title-block-header {
+ margin-block-end: 1rem;
+ position: relative;
+ margin-top: -1px; // Chrome draws 1px white line between navbar and title block
+}
+
+#title-block-header .abstract {
+ margin-block-start: 1rem;
+}
+
+#title-block-header .abstract .abstract-title {
+ font-weight: 600;
+}
+
+#title-block-header a {
+ text-decoration: none;
+}
+
+#title-block-header .author,
+#title-block-header .date,
+#title-block-header .doi {
+ margin-block-end: 0.2rem;
+}
+
+#title-block-header .quarto-title-block > div {
+ display: flex;
+}
+
+#title-block-header .quarto-title-block > div > h1 {
+ flex-grow: 1;
+}
+
+#title-block-header .quarto-title-block > div > button {
+ flex-shrink: 0;
+ height: 2.25rem;
+ margin-top: 0;
+}
+
+#title-block-header .quarto-title-block > div > button {
+ @if mixin-exists(media-breakpoint-up) {
+ @include media-breakpoint-up(lg) {
+ margin-top: 5px;
+ }
+ }
+}
+
+// (Remove bottom margin from paragraphs in table headers)
+tr.header > th > p:last-of-type {
+ margin-bottom: 0px;
+}
+
+table,
+table.table {
+ margin-top: 0.5rem;
+ margin-bottom: 0.5rem;
+}
+
+caption,
+.table-caption {
+ padding-top: 0.5rem;
+ padding-bottom: 0.5rem;
+ text-align: center;
+}
+
+figure.quarto-float-tbl figcaption.quarto-float-caption-top {
+ margin-top: 0.5rem;
+ margin-bottom: 0.25rem;
+ text-align: center;
+}
+
+figure.quarto-float-tbl figcaption.quarto-float-caption-bottom {
+ padding-top: 0.25rem;
+ margin-bottom: 0.5rem;
+ text-align: center;
+}
+
+// utterances
+.utterances {
+ max-width: none;
+ margin-left: -8px;
+}
+
+// iframe
+iframe {
+ margin-bottom: 1em;
+}
+
+// details
+details {
+ margin-bottom: 1em;
+}
+details[show] {
+ margin-bottom: 0;
+}
+
+details > summary {
+ @if variable-exists(text-muted) {
+ color: $text-muted;
+ }
+}
+
+details > summary > p:only-child {
+ display: inline;
+}
+
+// codeCopy
+pre.sourceCode,
+code.sourceCode {
+ position: relative;
+}
+
+// Inline code should wrap
+// See https://github.com/quarto-dev/quarto-cli/issues/2649
+dd code:not(.sourceCode),
+p code:not(.sourceCode) {
+ white-space: pre-wrap;
+}
+
+// default to scrolling
com a classe "um_capitulo", ou seja nae é capitulo de verbete caso seja um dicionario
+ encontrou_um_capitulo = bool(main_tag.find('div', class_='um_capitulo'))
+
+
+
+ # Se é um capítulo normal em um dicionário e nao é um capítulo numerado, seleciona a letra para marcar o capítulo
+ # Nao esquecer que deve haver uma div com as classes hidden e um_capitulo em todos os capítulos que nao forem de verbetes em um de um dicionario
+ if not encontrou_um_capitulo and é_dicionário:
+
+ é_um_capitulo_verbete = True
+
+ # Coloca os marcadores nos verbetes como o nome do próprio verbete
+ dt_tags = main_tag.find_all('dt')
+
+ for dt_tag in dt_tags:
+
+ # Para contar o numero de definicoes dd
+ Num_dd = 0
+
+ texto_titulo_dt = dt_tag.text
+
+ texto_a_ser_sanitizado = dt_tag.text
+
+ dt_tag['class'] = dt_tag.get("class", []) + ["unidade", "verbete"]
+
+ dt_tag['title'] = texto_titulo_dt
+
+ id_dt_tag = (texto_a_ser_sanitizado
+
+ .replace(' ', '_')
+ .replace('&', '_e_')
+ .replace('$', '_s_')
+ .replace('+', '_mais_')
+ .replace(',', '_vir_')
+ .replace('/', '_barra_')
+ .replace(':', '_dois_pontos_')
+ .replace(';', '_ponto_vir_')
+ .replace('?', '_interrog_')
+ .replace('=', '_igual_')
+ .replace('@', '_at_')
+ .replace('#', '_jv_')
+ .replace('>', '_maiq_')
+ .replace('<', '_menq_')
+ .replace('[', '_abre_colch_')
+ .replace(']', '_fecha_col_')
+ .replace('{', '_abre_ch_')
+ .replace('}', '_fecha_ch_')
+ .replace('.', '_ponto_')
+ .replace('|', '_barra_ver_')
+ .replace('\\', '_barra_inv_')
+ .replace('%', '_p_100_')
+ .replace('^', '_acen_chapeu_')
+
+ )
+
+ dt_tag['id'] = id_dt_tag
+
+
+
+
+ # Encontre o primeiro elemento irmão da tag
+ dd_tag = dt_tag.find_next_sibling('dd')
+
+ # Itere sobre todas as tags irmãs até encontrar uma tag não
+ while dd_tag and dd_tag.name == 'dd':
+
+ Num_dd += 1
+
+ dd_tag['title'] = texto_titulo_dt + " def. " + str(Num_dd)
+
+ dd_tag['id'] = id_dt_tag + "_def_" + str(Num_dd)
+
+ # Encontre o próximo elemento irmão da tag
+ dd_tag = dd_tag.find_next_sibling('dd')
+
+
+
+ #verifica de há outras tags além de dt, dd, e títulos (usado para o caso de um capítulo de verbete contiver mais conteúdos)
+ tags_procuradas = ['p', 'li', 'tr', 'blockquote', 'code', 'pre']
+
+ mais_conteudo_alem_verbetes = False
+
+ if é_um_capitulo_verbete and é_dicionário:
+
+ for tag in tags_procuradas:
+
+ # Verifique se a tag está presente em 'main_tag'
+ if main_tag.find(tag):
+
+ # Verifique se a tag não tem 'nav' como pai
+ if not main_tag.find(tag).find_parent("nav"):
+
+ mais_conteudo_alem_verbetes = True
+
+ break # Se ambas as condições forem atendidas, definimos como True e saímos do loop
+
+
+
+ # Verifica se nao é um capítulo sem numero e se nao for um capítulo de verbete ou se é um capitulo de verbete e se existe outro conteudo alem das definicoes dos verbetes
+ if (not é_um_capitulo_numerado and not é_um_capitulo_verbete) or (é_dicionário and not é_um_capitulo_numerado and é_um_capitulo_verbete and mais_conteudo_alem_verbetes):
+
+ letras_index_digito_1 += 1
+
+ cap = escolher_letra_para_capitulo(letras_index_digito_1)
+
+ ref_cap[cap] = capitulos_arquivo_html[index]
+
+
+
+
+
+
+
+ # Iterar sobre todas as tags dentro da tag 'main'
+ for tag in main_tag.find_all(True):
+
+ # Verifique se a classe 'unidade' está presente nos atributos da tag
+ if "unidade" in tag.get("class", []):
+
+ # Incrementa o número da referência
+ ref_num += 1
+
+ # Coloca a referência na tag
+ colocar_referencia(cap, tag, ref_num)
+
+ # Pula para a próxima tag
+ continue
+
+ parent_tag = tag.parent
+
+ # Não é filho direto de 'td' ou 'li'
+ if parent_tag.name not in ["td", "li", "p"]:
+
+ # Verifique se a tag é filha de uma tag chamada 'header' usando find_parents(). Em caso positivo, pula
+ is_descendant_of_header = tag.find_parents("header")
+
+ if is_descendant_of_header:
+ continue
+
+
+
+ # Se é um parágrafo
+ if tag.name == "p" or tag.name == "tr" or tag.name == "li" or tag.name == "code" or tag.name == "blockquote" or (tag.name == "dt" and not é_um_capitulo_verbete) or (tag.name == "dd" and not é_um_capitulo_verbete) or ("quarto-video" in tag.get("class", []) and tag.name == "div") or ("callout" in tag.get("class", []) and tag.name == "div") or ("csl-entry" in tag.get("class", []) and tag.name == "div"):
+
+ # Incrementa o número da referência
+ ref_num += 1
+
+ # Coloca a referência na tag
+ colocar_referencia(cap, tag, ref_num)
+
+ # Pula para a próxima tag
+ continue
+
+
+
+
+
+
+
+ # Se for criado pelo usuário um id para euqacoes, aqui coloco a classe unidade_silenciosa para poder ser referenciado quando o usuário solicitar pegar referencia, mas esse tipo de referencia nao deve aparecer na paginacao do capítulo, lá no rodapé
+ if "math" in tag.get("class", []) and tag.name == "span":
+
+ if tag.parent and tag.parent.name == "span":
+
+ if tag.parent.get("id"):
+
+ tag.parent["class"] = tag.parent.get("class", []) + ["unidade_silenciosa"]
+
+ tag.parent["title"] = tag.parent["id"]
+
+ continue
+
+
+
+
+
+ # Se tiver as classes de teoremas de matemática, colocar unidade_silenciosa
+ if any(classe in tag.get("class", []) for classe in {"theorema", "lemma", "corollary", "proposition", "conjecture", "definition", "example", "exercise"}) and tag.name == "div":
+
+ if tag.get("id"):
+
+ tag["class"] = tag.parent.get("class", []) + ["unidade_silenciosa"]
+
+ tag["title"] = tag.parent["id"]
+
+ continue
+
+
+
+ # Coloca o conteudo dentro de uma div com id chamado de papel, substituindo o conteudo original da tag main pela div papel
+
+ # Crie uma div com id "papel"
+ div_papel = soup.new_tag('div', id='papel')
+
+ # Copie a tag main
+ main_content_copy = copy.copy(main_tag.contents)
+
+ # Limpe o conteúdo da tag
+ main_tag.clear()
+
+ # Adicione a cópia do conteúdo à div "papel"
+ for item_copy in main_content_copy:
+ div_papel.append(item_copy)
+
+ # Acrescentar a div_papel na tag main
+ main_tag.append(div_papel)
+
+ # Salva o arquivo HTML modificado
+ with open(arquivo_html, "w", encoding="utf-8") as f:
+
+ f.write(str(soup))
+
+ # Gravar os marcadores de referencia do livro em um arquivo JSON. ele esta na variavel ref_cap e essa informacao será útil para o leitor do livro poder entrar na busca digitar a referenci e obter o conteudo.
+ nome_arquivo = "ref_capitulos.json"
+
+ caminho_arquivo = os.path.join(pasta_livro_renderizado, nome_arquivo)
+
+ with open(caminho_arquivo, "w", encoding="utf-8") as arquivo_json:
+
+ json.dump(ref_cap, arquivo_json, ensure_ascii=False, indent=4)
\ No newline at end of file
diff --git a/_extensions/editoramoan/moan-livro/universidade-estadual-de-alagoas-abnt.csl b/_extensions/editoramoan/moan-livro/universidade-estadual-de-alagoas-abnt.csl
new file mode 100755
index 0000000..ee2fdf8
--- /dev/null
+++ b/_extensions/editoramoan/moan-livro/universidade-estadual-de-alagoas-abnt.csl
@@ -0,0 +1,744 @@
+
+
diff --git a/_extensions/editoramoan/moan-livro/zotero.org_styles_universidade-estadual-paulista-faculdade-de-engenharia-de-guaratingueta-abnt.csl b/_extensions/editoramoan/moan-livro/zotero.org_styles_universidade-estadual-paulista-faculdade-de-engenharia-de-guaratingueta-abnt.csl
new file mode 100755
index 0000000..0b83bb7
--- /dev/null
+++ b/_extensions/editoramoan/moan-livro/zotero.org_styles_universidade-estadual-paulista-faculdade-de-engenharia-de-guaratingueta-abnt.csl
@@ -0,0 +1,1036 @@
+
+
diff --git a/_quarto.yml b/_quarto.yml
new file mode 100755
index 0000000..598b745
--- /dev/null
+++ b/_quarto.yml
@@ -0,0 +1,293 @@
+project:
+ type: book
+ output-dir: propostas-didaticas-ensino-matematica
+ post-render: _extensions/editoramoan/moan-livro/preparacao-moan.py
+ preview:
+ port: 4000
+ browser: true
+filters:
+- lightbox
+lightbox: auto
+include-after-body:
+ text: '
+
+
+
+
+
+ '
+lang: pt-BR
+language:
+ toc-title-document: Neste capítulo
+ title-block-author-single: Organizador
+ title-block-author-plural: Organizadores
+number-sections: true
+crossref:
+ chapters: true
+controle-moan:
+ dicionario: false
+moan-dados:
+ ark: 68745/eM96D
+ título: Propostas didáticas para o ensino de Matemática
+ subtítulo: contribuições no âmbito do Pibid
+ formato: Livro Digital (online)
+ descrição: Descubra novas possibilidades no ensino de Matemática! Este livro apresenta
+ propostas didáticas que desafiam o paradigma tradicional e abrem espaço para a
+ criatividade e a dinamicidade em sala de aula. Sabemos que romper com o modelo
+ convencional de ensino pode ser intimidador para muitos professores. Dessa forma,
+ oferecemos uma alternativa valiosa ao ensino tradicional. Apresentamos propostas
+ dinâmicas e muitas delas com o uso de jogos — tanto os analógicos quanto os digitais
+ online, acessíveis por QR Code na versão impressa — como ferramentas pedagógicas.
+ Essas atividades lúdicas promovem o engajamento, a interação e a compreensão dos
+ conceitos matemáticos de forma envolvente e prazerosa. As propostas didáticas,
+ neste livro, foram desenvolvidas no Programa Institucional de Bolsas de Iniciação
+ à Docência (Pibid) por professores e acadêmicos dos cursos de Licenciatura em
+ Matemática da Unioeste, tanto do campus de Cascavel quanto do de Foz do Iguaçu,
+ Paraná. Explore novas possibilidade e renove a sua prática docente!
+ organizador: Arleni Elise Sella Langer, Adriana Schawabe Reis Lepreda, Dulcyene
+ Maria Ribeiro, Fabiana Magda Garcia Papani, Renata Camacho Bezerra, Richael Silva
+ Caetano
+ autor: Arleni Elise Sella Langer, Adriana Schawabe Reis Lepreda, Dulcyene Maria
+ Ribeiro, Fabiana Magda Garcia Papani, Renata Camacho Bezerra, Richael Silva Caetano,
+ Erika Diana Alves de Oliveira, Ricardo Mondini Ferrazza, Thamara Tobaldini, Luiza
+ Stunder, Eliza Bruna Dalla Corte Andreolla, Fernanda Guerra, Thais de Souza, Bruna
+ Eduarda Unser, Eduardo Rossoni Zeni, Ana Carolina Marques Pauluk, Ashley Esquitine
+ Fernandes Mello, Bruno Eduardo Duarte, Cassio Rafael Santos de Lima, Fabio Goulart
+ de Campos, Gabrielle Thais Werle, Hevila Maria Simonetti, Letícia Santiago Silva
+ e Patricia Alves de Oliveira, Janice Kunz Oenning
+ apoio-financeiro: Coordenação de Aperfeiçoamento de Pessoal de Nível Superior –
+ CAPES
+ realização: 'Programa Institucional de Bolsas de Iniciação à Docência - PIBID/Unioeste.
+ Rua Universitária, 1619 - Jardim Universitário - CEP 85819-100 - Cascavel-PR.
+ E-mail: pibid@unioeste.br'
+ apontamento: https://livro.online/propostas-didaticas-ensino-matematica
+ editora: Editora Moan
+ local: Foz do Iguaçu - PR, Brasil
+ edição: 1
+ editor responsável: Rafael Tavares Juliani
+ diagramador: Rafael Tavares Juliani
+ capista: Rafael Tavares Juliani
+ revisores: Rafael tavares juliani, Jorge Luiz Pereira, os organizadores
+ conselho-editorial: Rafael Tavares Juliani, Jorge Luiz Pereira, Carla Fernanda Sander Juliani
+ prefácio: Cristiane Antonia Hauchild Johann
+ palavras-chave: propostas didáticas, matemática, pibid, unioeste, jogos no ensino,
+ atividades lúdicas
+ área: Matemática – educação – método de ensino
+ cdd: '510.371.33'
+ ano da edição: 2023
+ data de publicação: 22/10/2023
+ idioma: Português do Brasil (pt-br)
+ país: Brasil
+ faixa etária: Acima de 18 anos
+ classificação indicativa: Livre para todos os públicos
+ ícones: Google Material Design
+ imagens-e-quadros: dos autores, onde não especificado
+ outros créditos: 'Na capa foram utilizadas as fontes Stolzl Light/Medium e Josefin
+ Sans Light; imagem (com alterações): Geometria, from The Seven Liberal Arts de
+ Johan Sadeler I, Maerten de Vos ca. 1570-1600 - Metropolitan Museum of Art'
+ isbn-versao-impressa: '9786585027052'
+ ark-versao-impressa: '68745/eM96D.77'
+ direitos-autorais: © 2023, Arleni Elise Sella Langer, Adriana Schawabe Reis Lepreda,
+ Dulcyene Maria Ribeiro, Fabiana Magda Garcia Papani, Renata Camacho Bezerra, Richael
+ Silva Caetano e a Editora Moan.
+ licenca: CC BY-NC-SA 4.0 Internacional
+ licenca-link: https://creativecommons.org/licenses/by-nc-sa/4.0/deed.pt_BR
+ licenca-img: https://upload.wikimedia.org/wikipedia/commons/4/4b/CC_BY-NC-SA.svg
+book:
+ isbn: 978-65-85027-05-2
+ google-analytics: G-G6VT93GC1X
+ cookie-consent:
+ palette: light
+ policy-url: "https://livro.online/politica-de-cookies-br"
+ language: pt
+ prefs-text: Preferências de cookie
+ search:
+ type: textbox
+ favicon: img/favicon.png
+ open-graph:
+ image: img/og.jpg
+ twitter-card:
+ image: img/og.jpg
+ title: Propostas didáticas para o ensino de Matemática
+ subtitle: contribuições no âmbito do Pibid
+ description: Descubra novas possibilidades no ensino de Matemática! Este livro apresenta
+ propostas didáticas que desafiam o paradigma tradicional e abrem espaço para a
+ criatividade e a dinamicidade em sala de aula. Sabemos que romper com o modelo
+ convencional de ensino pode ser intimidador para muitos professores. Dessa forma,
+ oferecemos uma alternativa valiosa ao ensino tradicional. Apresentamos propostas
+ dinâmicas e muitas delas com o uso de jogos — tanto os analógicos quanto os digitais
+ online, acessíveis por QR Code na versão impressa — como ferramentas pedagógicas.
+ Essas atividades lúdicas promovem o engajamento, a interação e a compreensão dos
+ conceitos matemáticos de forma envolvente e prazerosa. As propostas didáticas,
+ neste livro, foram desenvolvidas no Programa Institucional de Bolsas de Iniciação
+ à Docência (Pibid) por professores e acadêmicos dos cursos de Licenciatura em
+ Matemática da Unioeste, tanto do campus de Cascavel quanto do de Foz do Iguaçu,
+ Paraná. Explore novas possibilidade e renove a sua prática docente!
+ author:
+ - name: Arleni Elise Sella Langer
+ email: arlenisella@hotmail.com
+ affiliations:
+ - name: Universidade Estadual do Oeste do Paraná
+ city: Cascavel
+ state: PR
+ country: BR
+ role: Organizadora
+ - name: Adriana Schawabe Reis Lepreda
+ email: adrilepreda@gmail
+ affiliations:
+ - name: Universidade Estadual do Oeste do Paraná
+ city: Cascavel
+ state: PR
+ country: BR
+ role: Organizadora
+ - name: Dulcyene Maria Ribeiro
+ email: dulcyene.ribeiro@unioeste.br
+ affiliations:
+ - name: Universidade Estadual do Oeste do Paraná
+ city: Cascavel
+ state: PR
+ country: BR
+ role: Organizadora
+ - name: Fabiana Magda Garcia Papani
+ email: fabiana.papani@unioeste.br
+ affiliations:
+ - name: Universidade Estadual do Oeste do Paraná
+ city: Cascavel
+ state: PR
+ country: BR
+ role: Organizadora
+ - name: Renata Camacho Bezerra
+ email: renata.bezerra@unioeste.br
+ affiliations:
+ - name: Universidade Estadual do Oeste do Paraná
+ city: Foz do Iguaçu
+ state: PR
+ country: BR
+ role: Organizadora
+ - name: Richael Silva Caetano
+ email: richael.caetano@unioeste.br
+ affiliations:
+ - name: Universidade Estadual do Oeste do Paraná
+ city: Foz do Iguaçu
+ state: PR
+ country: BR
+ role: Organizador
+ compiler:
+ - name: Arleni Elise Sella Langer
+ email: arlenisella@hotmail.com
+ affiliations:
+ - name: Universidade Estadual do Oeste do Paraná
+ city: Cascavel
+ state: PR
+ country: BR
+ role: Organizadora
+ - name: Adriana Schawabe Reis Lepreda
+ email: adrilepreda@gmail
+ affiliations:
+ - name: Universidade Estadual do Oeste do Paraná
+ city: Cascavel
+ state: PR
+ country: BR
+ role: Organizadora
+ - name: Dulcyene Maria Ribeiro
+ email: dulcyene.ribeiro@unioeste.br
+ affiliations:
+ - name: Universidade Estadual do Oeste do Paraná
+ city: Cascavel
+ state: PR
+ country: BR
+ role: Organizadora
+ - name: Fabiana Magda Garcia Papani
+ email: fabiana.papani@unioeste.br
+ affiliations:
+ - name: Universidade Estadual do Oeste do Paraná
+ city: Cascavel
+ state: PR
+ country: BR
+ role: Organizadora
+ - name: Renata Camacho Bezerra
+ email: renata.bezerra@unioeste.br
+ affiliations:
+ - name: Universidade Estadual do Oeste do Paraná
+ city: Foz do Iguaçu
+ state: PR
+ country: BR
+ role: Organizadora
+ - name: Richael Silva Caetano
+ email: richael.caetano@unioeste.br
+ affiliations:
+ - name: Universidade Estadual do Oeste do Paraná
+ city: Foz do Iguaçu
+ state: PR
+ country: BR
+ role: Organizador
+ date: 10/22/2023
+ editor: Rafael Tavares Juliani
+ publisher: Editora Moan
+ publisher-place: Foz do Iguaçu - PR, Brasil
+ page-navigation: true
+ reader-mode: true
+ sharing:
+ - facebook
+ - linkedin
+ sidebar:
+ title: Propostas didáticas para o ensino de matemática
+ logo: img/capa.png
+ tools:
+ - icon: card-image
+ text: Capa Animada
+ href: img/CapaAnim.gif
+ - icon: bi bi-git
+ text: Alterações e Versões
+ href: https://gitea.livro.online/editoramoan/propostas-didaticas-ensino-matematica/commits/branch/main
+ - icon: envelope-open-heart
+ href: https://livro.online/doacao
+ text: Doar
+ - icon: printer-fill
+ href: index.html#versão-impressa
+ text: Versão Impressa
+ - icon: book-half
+ href: https://livro.online
+ text: Outros Livros
+ navbar:
+ logo: img/capa.png
+ logo-href: img/CapaAnim.gif
+ comments:
+ hypothesis:
+ theme: clean
+ openSidebar: false
+ chapters:
+ - index.qmd
+ - prefacio.qmd
+ - apresentacao.qmd
+ - part: 'Parte 1: propostas didáticas Pibid/Matemática/Cascavel'
+ chapters:
+ - contextualizando-propostas-didaticas-_pibid-matematica-cascavel.qmd
+ - numeros-inteiros.qmd
+ - jogos-no-ensino-de-equacoes.qmd
+ - atividades-ludicas-para-o-ensino-da-linguagem-algebrica.qmd
+ - uso-do-astrolabio-caseiro-no-ensino-da-trigonometria.qmd
+ - part: 'Parte 2: propostas didáticas Pibid/Matemática/Foz do Iguaçu'
+ chapters:
+ - jogos-no-para-o-ensino-de-fracoes-no-9-ano-do-ensino-fundamental.qmd
+citation: true
+bibliography: referencias.bib
+csl: _extensions/editoramoan/moan-livro/zotero.org_styles_universidade-estadual-paulista-faculdade-de-engenharia-de-guaratingueta-abnt.csl
+google-scholar: true
+format:
+ moan-livro-html:
+ theme:
+ light:
+ - cosmo
+ - _extensions/editoramoan/moan-livro/custom.scss
+ - css/moan.scss
+ dark:
+ - superhero
+ - _extensions/editoramoan/moan-livro/custom.scss
+ - css/moan.scss
+ number-sections: false
+ number-depth: 1
+ anchor-sections: false
+format-links: false
+fig-cap-location: top
diff --git a/_quarto_internal_scss_error.scss b/_quarto_internal_scss_error.scss
new file mode 100644
index 0000000..4e3c262
--- /dev/null
+++ b/_quarto_internal_scss_error.scss
@@ -0,0 +1,13647 @@
+// quarto-scss-analysis-annotation { "quarto-version": "1.6.39" }
+
+// quarto-scss-analysis-annotation { "origin": "'use' section from format" }
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+// quarto-scss-analysis-annotation { "origin": "'use' section from Quarto" }
+
+
+
+
+
+
+
+
+
+
+
+@use "sass:map" as listing-map;
+
+
+
+
+
+
+@use "sass:color" as quarto-color;
+@use "sass:map" as quarto-map;
+@use "sass:math" as quarto-math;
+
+
+// quarto-scss-analysis-annotation { "origin": "'use' section from user-defined SCSS" }
+
+
+
+// quarto-scss-analysis-annotation { "origin": "'functions' section from format" }
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+// Bootstrap functions
+//
+// Utility mixins and functions for evaluating source code across our variables, maps, and mixins.
+
+// Ascending
+// Used to evaluate Sass maps like our grid breakpoints.
+@mixin _assert-ascending($map, $map-name) {
+ $prev-key: null;
+ $prev-num: null;
+ @each $key, $num in $map {
+ @if $prev-num == null or unit($num) == "%" or unit($prev-num) == "%" {
+ // Do nothing
+ } @else if not comparable($prev-num, $num) {
+ @warn "Potentially invalid value for #{$map-name}: This map must be in ascending order, but key '#{$key}' has value #{$num} whose unit makes it incomparable to #{$prev-num}, the value of the previous key '#{$prev-key}' !";
+ } @else if $prev-num >= $num {
+ @warn "Invalid value for #{$map-name}: This map must be in ascending order, but key '#{$key}' has value #{$num} which isn't greater than #{$prev-num}, the value of the previous key '#{$prev-key}' !";
+ }
+ $prev-key: $key;
+ $prev-num: $num;
+ }
+}
+
+// Starts at zero
+// Used to ensure the min-width of the lowest breakpoint starts at 0.
+@mixin _assert-starts-at-zero($map, $map-name: "$grid-breakpoints") {
+ @if length($map) > 0 {
+ $values: map-values($map);
+ $first-value: nth($values, 1);
+ @if $first-value != 0 {
+ @warn "First breakpoint in #{$map-name} must start at 0, but starts at #{$first-value}.";
+ }
+ }
+}
+
+// Colors
+@function to-rgb($value) {
+ @return red($value), green($value), blue($value);
+}
+
+// stylelint-disable scss/dollar-variable-pattern
+@function rgba-css-var($identifier, $target) {
+ @if $identifier == "body" and $target == "bg" {
+ @return rgba(var(--#{$prefix}#{$identifier}-bg-rgb), var(--#{$prefix}#{$target}-opacity));
+ } @if $identifier == "body" and $target == "text" {
+ @return rgba(var(--#{$prefix}#{$identifier}-color-rgb), var(--#{$prefix}#{$target}-opacity));
+ } @else {
+ @return rgba(var(--#{$prefix}#{$identifier}-rgb), var(--#{$prefix}#{$target}-opacity));
+ }
+}
+
+@function map-loop($map, $func, $args...) {
+ $_map: ();
+
+ @each $key, $value in $map {
+ // allow to pass the $key and $value of the map as an function argument
+ $_args: ();
+ @each $arg in $args {
+ $_args: append($_args, if($arg == "$key", $key, if($arg == "$value", $value, $arg)));
+ }
+
+ $_map: map-merge($_map, ($key: call(get-function($func), $_args...)));
+ }
+
+ @return $_map;
+}
+// stylelint-enable scss/dollar-variable-pattern
+
+@function varify($list) {
+ $result: null;
+ @each $entry in $list {
+ $result: append($result, var(--#{$prefix}#{$entry}), space);
+ }
+ @return $result;
+}
+
+// Internal Bootstrap function to turn maps into its negative variant.
+// It prefixes the keys with `n` and makes the value negative.
+@function negativify-map($map) {
+ $result: ();
+ @each $key, $value in $map {
+ @if $key != 0 {
+ $result: map-merge($result, ("n" + $key: (-$value)));
+ }
+ }
+ @return $result;
+}
+
+// Get multiple keys from a sass map
+@function map-get-multiple($map, $values) {
+ $result: ();
+ @each $key, $value in $map {
+ @if (index($values, $key) != null) {
+ $result: map-merge($result, ($key: $value));
+ }
+ }
+ @return $result;
+}
+
+// Merge multiple maps
+@function map-merge-multiple($maps...) {
+ $merged-maps: ();
+
+ @each $map in $maps {
+ $merged-maps: map-merge($merged-maps, $map);
+ }
+ @return $merged-maps;
+}
+
+// Replace `$search` with `$replace` in `$string`
+// Used on our SVG icon backgrounds for custom forms.
+//
+// @author Kitty Giraudel
+// @param {String} $string - Initial string
+// @param {String} $search - Substring to replace
+// @param {String} $replace ('') - New value
+// @return {String} - Updated string
+@function str-replace($string, $search, $replace: "") {
+ $index: str-index($string, $search);
+
+ @if $index {
+ @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
+ }
+
+ @return $string;
+}
+
+// See https://codepen.io/kevinweber/pen/dXWoRw
+//
+// Requires the use of quotes around data URIs.
+
+@function escape-svg($string) {
+ @if str-index($string, "data:image/svg+xml") {
+ @each $char, $encoded in $escaped-characters {
+ // Do not escape the url brackets
+ @if str-index($string, "url(") == 1 {
+ $string: url("#{str-replace(str-slice($string, 6, -3), $char, $encoded)}");
+ } @else {
+ $string: str-replace($string, $char, $encoded);
+ }
+ }
+ }
+
+ @return $string;
+}
+
+// Color contrast
+// See https://github.com/twbs/bootstrap/pull/30168
+
+// A list of pre-calculated numbers of pow(divide((divide($value, 255) + .055), 1.055), 2.4). (from 0 to 255)
+// stylelint-disable-next-line scss/dollar-variable-default, scss/dollar-variable-pattern
+$_luminance-list: .0008 .001 .0011 .0013 .0015 .0017 .002 .0022 .0025 .0027 .003 .0033 .0037 .004 .0044 .0048 .0052 .0056 .006 .0065 .007 .0075 .008 .0086 .0091 .0097 .0103 .011 .0116 .0123 .013 .0137 .0144 .0152 .016 .0168 .0176 .0185 .0194 .0203 .0212 .0222 .0232 .0242 .0252 .0262 .0273 .0284 .0296 .0307 .0319 .0331 .0343 .0356 .0369 .0382 .0395 .0409 .0423 .0437 .0452 .0467 .0482 .0497 .0513 .0529 .0545 .0561 .0578 .0595 .0612 .063 .0648 .0666 .0685 .0704 .0723 .0742 .0762 .0782 .0802 .0823 .0844 .0865 .0887 .0908 .0931 .0953 .0976 .0999 .1022 .1046 .107 .1095 .1119 .1144 .117 .1195 .1221 .1248 .1274 .1301 .1329 .1356 .1384 .1413 .1441 .147 .15 .1529 .1559 .159 .162 .1651 .1683 .1714 .1746 .1779 .1812 .1845 .1878 .1912 .1946 .1981 .2016 .2051 .2086 .2122 .2159 .2195 .2232 .227 .2307 .2346 .2384 .2423 .2462 .2502 .2542 .2582 .2623 .2664 .2705 .2747 .2789 .2831 .2874 .2918 .2961 .3005 .305 .3095 .314 .3185 .3231 .3278 .3325 .3372 .3419 .3467 .3515 .3564 .3613 .3663 .3712 .3763 .3813 .3864 .3916 .3968 .402 .4072 .4125 .4179 .4233 .4287 .4342 .4397 .4452 .4508 .4564 .4621 .4678 .4735 .4793 .4851 .491 .4969 .5029 .5089 .5149 .521 .5271 .5333 .5395 .5457 .552 .5583 .5647 .5711 .5776 .5841 .5906 .5972 .6038 .6105 .6172 .624 .6308 .6376 .6445 .6514 .6584 .6654 .6724 .6795 .6867 .6939 .7011 .7084 .7157 .7231 .7305 .7379 .7454 .7529 .7605 .7682 .7758 .7835 .7913 .7991 .807 .8148 .8228 .8308 .8388 .8469 .855 .8632 .8714 .8796 .8879 .8963 .9047 .9131 .9216 .9301 .9387 .9473 .956 .9647 .9734 .9823 .9911 1;
+
+@function color-contrast($background, $color-contrast-dark: $color-contrast-dark, $color-contrast-light: $color-contrast-light, $min-contrast-ratio: $min-contrast-ratio) {
+ $foregrounds: $color-contrast-light, $color-contrast-dark, $white, $black;
+ $max-ratio: 0;
+ $max-ratio-color: null;
+
+ @each $color in $foregrounds {
+ $contrast-ratio: contrast-ratio($background, $color);
+ @if $contrast-ratio > $min-contrast-ratio {
+ @return $color;
+ } @else if $contrast-ratio > $max-ratio {
+ $max-ratio: $contrast-ratio;
+ $max-ratio-color: $color;
+ }
+ }
+
+ @warn "Found no color leading to #{$min-contrast-ratio}:1 contrast ratio against #{$background}...";
+
+ @return $max-ratio-color;
+}
+
+@function contrast-ratio($background, $foreground: $color-contrast-light) {
+ $l1: luminance($background);
+ $l2: luminance(opaque($background, $foreground));
+
+ @return if($l1 > $l2, divide($l1 + .05, $l2 + .05), divide($l2 + .05, $l1 + .05));
+}
+
+// Return WCAG2.1 relative luminance
+// See https://www.w3.org/TR/WCAG/#dfn-relative-luminance
+// See https://www.w3.org/TR/WCAG/#dfn-contrast-ratio
+@function luminance($color) {
+ $rgb: (
+ "r": red($color),
+ "g": green($color),
+ "b": blue($color)
+ );
+
+ @each $name, $value in $rgb {
+ $value: if(divide($value, 255) < .04045, divide(divide($value, 255), 12.92), nth($_luminance-list, $value + 1));
+ $rgb: map-merge($rgb, ($name: $value));
+ }
+
+ @return (map-get($rgb, "r") * .2126) + (map-get($rgb, "g") * .7152) + (map-get($rgb, "b") * .0722);
+}
+
+// Return opaque color
+// opaque(#fff, rgba(0, 0, 0, .5)) => #808080
+@function opaque($background, $foreground) {
+ @return mix(rgba($foreground, 1), $background, opacity($foreground) * 100%);
+}
+
+// scss-docs-start color-functions
+// Tint a color: mix a color with white
+@function tint-color($color, $weight) {
+ @return mix(white, $color, $weight);
+}
+
+// Shade a color: mix a color with black
+@function shade-color($color, $weight) {
+ @return mix(black, $color, $weight);
+}
+
+// Shade the color if the weight is positive, else tint it
+@function shift-color($color, $weight) {
+ @return if($weight > 0, shade-color($color, $weight), tint-color($color, -$weight));
+}
+// scss-docs-end color-functions
+
+// Return valid calc
+@function add($value1, $value2, $return-calc: true) {
+ @if $value1 == null {
+ @return $value2;
+ }
+
+ @if $value2 == null {
+ @return $value1;
+ }
+
+ @if type-of($value1) == number and type-of($value2) == number and comparable($value1, $value2) {
+ @return $value1 + $value2;
+ }
+
+ @return if($return-calc == true, calc(#{$value1} + #{$value2}), $value1 + unquote(" + ") + $value2);
+}
+
+@function subtract($value1, $value2, $return-calc: true) {
+ @if $value1 == null and $value2 == null {
+ @return null;
+ }
+
+ @if $value1 == null {
+ @return -$value2;
+ }
+
+ @if $value2 == null {
+ @return $value1;
+ }
+
+ @if type-of($value1) == number and type-of($value2) == number and comparable($value1, $value2) {
+ @return $value1 - $value2;
+ }
+
+ @if type-of($value2) != number {
+ $value2: unquote("(") + $value2 + unquote(")");
+ }
+
+ @return if($return-calc == true, calc(#{$value1} - #{$value2}), $value1 + unquote(" - ") + $value2);
+}
+
+@function divide($dividend, $divisor, $precision: 10) {
+ $sign: if($dividend > 0 and $divisor > 0 or $dividend < 0 and $divisor < 0, 1, -1);
+ $dividend: abs($dividend);
+ $divisor: abs($divisor);
+ @if $dividend == 0 {
+ @return 0;
+ }
+ @if $divisor == 0 {
+ @error "Cannot divide by 0";
+ }
+ $remainder: $dividend;
+ $result: 0;
+ $factor: 10;
+ @while ($remainder > 0 and $precision >= 0) {
+ $quotient: 0;
+ @while ($remainder >= $divisor) {
+ $remainder: $remainder - $divisor;
+ $quotient: $quotient + 1;
+ }
+ $result: $result * 10 + $quotient;
+ $factor: $factor * .1;
+ $remainder: $remainder * 10;
+ $precision: $precision - 1;
+ @if ($precision < 0 and $remainder >= $divisor * 5) {
+ $result: $result + 1;
+ }
+ }
+ $result: $result * $factor * $sign;
+ $dividend-unit: unit($dividend);
+ $divisor-unit: unit($divisor);
+ $unit-map: (
+ "px": 1px,
+ "rem": 1rem,
+ "em": 1em,
+ "%": 1%
+ );
+ @if ($dividend-unit != $divisor-unit and map-has-key($unit-map, $dividend-unit)) {
+ $result: $result * map-get($unit-map, $dividend-unit);
+ }
+ @return $result;
+}
+
+/////////////////////////////////////////////////////////////////
+// Color contrasting (backported to BS4 from BS5)
+// See https://github.com/twbs/bootstrap/pull/30168
+/////////////////////////////////////////////////////////////////
+
+// A list of pre-calculated numbers of pow(divide((divide($value, 255) + .055), 1.055), 2.4). (from 0 to 255)
+// stylelint-disable-next-line scss/dollar-variable-default, scss/dollar-variable-pattern
+$_luminance-list: .0008 .001 .0011 .0013 .0015 .0017 .002 .0022 .0025 .0027 .003 .0033 .0037 .004 .0044 .0048 .0052 .0056 .006 .0065 .007 .0075 .008 .0086 .0091 .0097 .0103 .011 .0116 .0123 .013 .0137 .0144 .0152 .016 .0168 .0176 .0185 .0194 .0203 .0212 .0222 .0232 .0242 .0252 .0262 .0273 .0284 .0296 .0307 .0319 .0331 .0343 .0356 .0369 .0382 .0395 .0409 .0423 .0437 .0452 .0467 .0482 .0497 .0513 .0529 .0545 .0561 .0578 .0595 .0612 .063 .0648 .0666 .0685 .0704 .0723 .0742 .0762 .0782 .0802 .0823 .0844 .0865 .0887 .0908 .0931 .0953 .0976 .0999 .1022 .1046 .107 .1095 .1119 .1144 .117 .1195 .1221 .1248 .1274 .1301 .1329 .1356 .1384 .1413 .1441 .147 .15 .1529 .1559 .159 .162 .1651 .1683 .1714 .1746 .1779 .1812 .1845 .1878 .1912 .1946 .1981 .2016 .2051 .2086 .2122 .2159 .2195 .2232 .227 .2307 .2346 .2384 .2423 .2462 .2502 .2542 .2582 .2623 .2664 .2705 .2747 .2789 .2831 .2874 .2918 .2961 .3005 .305 .3095 .314 .3185 .3231 .3278 .3325 .3372 .3419 .3467 .3515 .3564 .3613 .3663 .3712 .3763 .3813 .3864 .3916 .3968 .402 .4072 .4125 .4179 .4233 .4287 .4342 .4397 .4452 .4508 .4564 .4621 .4678 .4735 .4793 .4851 .491 .4969 .5029 .5089 .5149 .521 .5271 .5333 .5395 .5457 .552 .5583 .5647 .5711 .5776 .5841 .5906 .5972 .6038 .6105 .6172 .624 .6308 .6376 .6445 .6514 .6584 .6654 .6724 .6795 .6867 .6939 .7011 .7084 .7157 .7231 .7305 .7379 .7454 .7529 .7605 .7682 .7758 .7835 .7913 .7991 .807 .8148 .8228 .8308 .8388 .8469 .855 .8632 .8714 .8796 .8879 .8963 .9047 .9131 .9216 .9301 .9387 .9473 .956 .9647 .9734 .9823 .9911 1;
+
+@function color-contrast($background, $foregrounds: null) {
+
+ // These variables should be defined in _variables.scss, but we also
+ // define them here so that 3rd party libs can use if they want
+ // without polluting the global namespace
+ $black: #000 !default;
+ $white: #fff !default;
+ $color-contrast-dark: $black !default;
+ $color-contrast-light: $white !default;
+ $min-contrast-ratio: 3 !default;
+
+ @if $foregrounds == null {
+ $foregrounds: $color-contrast-light, $color-contrast-dark, $white, $black;
+ } @else {
+ $foregrounds: $foregrounds, $color-contrast-light, $color-contrast-dark, $white, $black;
+ }
+
+ $max-ratio: 0;
+ $max-ratio-color: null;
+
+ @each $color in $foregrounds {
+ $contrast-ratio: contrast-ratio($background, $color);
+ @if $contrast-ratio > $min-contrast-ratio {
+ @return $color;
+ } @else if $contrast-ratio > $max-ratio {
+ $max-ratio: $contrast-ratio;
+ $max-ratio-color: $color;
+ }
+ }
+
+ $color-contrast-warnings: false !default;
+ @if $color-contrast-warnings {
+ @warn "Found no color leading to #{$min-contrast-ratio}:1 contrast ratio against #{$background}...";
+ }
+
+ @return $max-ratio-color;
+}
+
+@function contrast-ratio($background, $foreground: $color-contrast-light) {
+ $l1: luminance($background);
+ $l2: luminance(opaque($background, $foreground));
+
+ @return if($l1 > $l2, divide($l1 + .05, $l2 + .05), divide($l2 + .05, $l1 + .05));
+}
+
+// Return WCAG2.0 relative luminance
+// See https://www.w3.org/WAI/GL/wiki/Relative_luminance
+// See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
+@function luminance($color) {
+ $rgb: (
+ "r": red($color),
+ "g": green($color),
+ "b": blue($color)
+ );
+
+ @each $name, $value in $rgb {
+ $value: if(divide($value, 255) < .04045, divide(divide($value, 255), 12.92), nth($_luminance-list, $value + 1));
+ $rgb: map-merge($rgb, ($name: $value));
+ }
+
+ @return (map-get($rgb, "r") * .2126) + (map-get($rgb, "g") * .7152) + (map-get($rgb, "b") * .0722);
+}
+
+// Return opaque color
+// opaque(#fff, rgba(0, 0, 0, .5)) => #808080
+@function opaque($background, $foreground) {
+ @return mix(rgba($foreground, 1), $background, opacity($foreground) * 100%);
+}
+
+// Added in BS5 as an alternative to the \ operator, which
+// throws warnings in Dart Sass
+// https://github.com/twbs/bootstrap/pull/34245
+@function divide($dividend, $divisor, $precision: 10) {
+ $sign: if($dividend > 0 and $divisor > 0 or $dividend < 0 and $divisor < 0, 1, -1);
+ $dividend: abs($dividend);
+ $divisor: abs($divisor);
+ @if $dividend == 0 {
+ @return 0;
+ }
+ @if $divisor == 0 {
+ @error "Cannot divide by 0";
+ }
+ $remainder: $dividend;
+ $result: 0;
+ $factor: 10;
+ @while ($remainder > 0 and $precision >= 0) {
+ $quotient: 0;
+ @while ($remainder >= $divisor) {
+ $remainder: $remainder - $divisor;
+ $quotient: $quotient + 1;
+ }
+ $result: $result * 10 + $quotient;
+ $factor: $factor * .1;
+ $remainder: $remainder * 10;
+ $precision: $precision - 1;
+ @if ($precision < 0 and $remainder >= $divisor * 5) {
+ $result: $result + 1;
+ }
+ }
+ $result: $result * $factor * $sign;
+ $dividend-unit: unit($dividend);
+ $divisor-unit: unit($divisor);
+ $unit-map: (
+ "px": 1px,
+ "rem": 1rem,
+ "em": 1em,
+ "%": 1%
+ );
+ @if ($dividend-unit != $divisor-unit and map-has-key($unit-map, $dividend-unit)) {
+ $result: $result * map-get($unit-map, $dividend-unit);
+ }
+ @return $result;
+}
+
+
+// quarto-scss-analysis-annotation { "origin": "'functions' section from Quarto" }
+
+
+
+
+
+// Our website navbar implementation will shift the body down
+// to accomodate the navbar, but the height is variable. As a result
+// we compute the height using JS, so it is perfect. This can lead to
+// a content jump when the js executes, so place a padding there at render
+// time to minimize this.
+@function navbar-default-offset($theme) {
+ $offsets: (
+ darkly: 82px,
+ flatly: 82px,
+ litera: 67px,
+ lumen: 68px,
+ lux: 105px,
+ materia: 96px,
+ pulse: 89px,
+ quartz: 82px,
+ sandstone: 63px,
+ simplex: 80px,
+ sketchy: 68px,
+ slate: 66px,
+ zephyr: 76px,
+ );
+
+ $val: null;
+ @if ($theme != null) {
+ $val: quarto-map.get($offsets, $theme);
+ }
+
+ @if ($val != null) {
+ @return $val;
+ } @else {
+ @return 64px;
+ }
+}
+
+
+
+
+
+
+@function listing-override-value($theme, $varname, $default) {
+ // These will be defined in bootstrap, but creating values here
+ // That will make this function accessible to callers prior to bootstrap variables
+ // being set
+ $black: rgb(0, 0, 0) !default;
+ $white: rgb(255, 255, 255) !default;
+ $gray-300: #dee2e6 !default;
+ $gray-500: #adb5bd !default;
+ $gray-600: #6c757d !default;
+ $blue: #0d6efd !default;
+
+ $theme-overrides: (
+ cyborg: (
+ category-border: solid $gray-500 1px,
+ category-color: $gray-500,
+ form-background-color: $body-bg,
+ form-color: $body-color,
+ input-group-border: solid $text-muted 1px,
+ input-group-border-radius: $border-radius,
+ ),
+ darkly: (
+ form-background-color: $body-bg,
+ form-color: $body-color,
+ category-border: solid $gray-600 1px,
+ category-color: $gray-600,
+ ),
+ materia: (
+ input-text-margin: 0 0.5em 0 0,
+ ),
+ quartz: (
+ category-color: $gray-300,
+ input-text-placeholder-color: $gray-500,
+ ),
+ slate: (
+ category-border: solid $gray-600 1px,
+ category-color: $gray-600,
+ form-background-color: $body-bg,
+ form-color: $body-color,
+ input-text-background-color: $body-bg,
+ input-text-color: $body-color,
+ input-group-border: solid $gray-600 1px,
+ ),
+ solar: (
+ input-group-border: solid $gray-600 1px,
+ category-color: $body-color,
+ category-border: solid $body-color 1px,
+ ),
+ superhero: (
+ input-text-background-color: $body-bg,
+ input-text-color: $body-color,
+ input-group-border: solid $gray-600 1px,
+ category-color: $gray-600,
+ category-border: solid $gray-600 1px,
+ ),
+ vapor: (
+ category-border: solid $text-muted 1px,
+ input-group-border: solid $text-muted 1px,
+ ),
+ );
+
+ $val: null;
+ @if ($theme != null) {
+ $theme-vals: listing-map.get($theme-overrides, $theme);
+ @if ($theme-vals != null) {
+ $val: listing-map.get($theme-vals, $varname);
+ }
+ }
+
+ @if ($val != null) {
+ @return $val;
+ } @else {
+ @return $default;
+ }
+}
+
+/*-- scss:variables --*/
+
+// Since we use these colors, we need to ensure that they
+// are defined (for example, if no theme is specified)
+$gray-300: #dee2e6 !default;
+$gray-500: #adb5bd !default;
+$gray-600: #6c757d !default;
+$gray-600: #6c757d !default;
+$gray-800: #343a40 !default;
+
+$card-cap-bg: rgba($gray-800, 0.25) !default;
+
+$border-color: $gray-300 !default;
+$border-radius: 0.25rem !default;
+$border-radius-sm: 0.2em !default;
+
+$text-muted: $gray-600 !default;
+
+$theme-name: null !default;
+
+
+
+
+
+
+@function colorToRGB($color) {
+ @return "rgb(" + red($color) + ", " + green($color) + ", " + blue($color) +
+ ")";
+}
+
+@function colorToRGBA($color) {
+ @return "rgba(" + red($color) + ", " + green($color) + ", " + blue($color) +
+ ", " + alpha($color) + ")";
+}
+
+@function str-replace($string, $search, $replace: "") {
+ $index: str-index($string, $search);
+ @if $index {
+ @return str-slice($string, 1, $index - 1) + $replace +
+ str-replace(
+ str-slice($string, $index + str-length($search)),
+ $search,
+ $replace
+ );
+ }
+ @return $string;
+}
+
+// Dims a color (either making it more white or more black)
+@function theme-dim($baseColor, $amount) {
+ @if (tone($baseColor) == "dark") {
+ @return lighten($baseColor, $amount);
+ } @else {
+ @return darken($baseColor, $amount);
+ }
+}
+
+// Provides a contrast color for a given color
+// The color is the starting color that will used to form a contrasting color
+// The bgColor is the color that will be used to test contrast (e.g. the color
+// will be shifted until its contrast against the bgColor is acceptable)
+@function theme-contrast($color, $bgColor, $level: "AAA") {
+ // These will be defined in bootstrap, but creating values here
+ // That will make this function accessible to callers prior to bootstrap variables
+ // being set
+ $black: rgb(0, 0, 0) !default;
+ $white: rgb(255, 255, 255) !default;
+
+ @if tone($bgColor) == "light" {
+ @return accessibleContrast($color, $black, $bgColor, $level);
+ } @else {
+ @return accessibleContrast($color, $white, $bgColor, $level);
+ }
+}
+
+@function accessibleContrast($startColor, $mixColor, $bgColor, $level: "AAA") {
+ // A: 3:1
+ // AA: 4.5:1
+ // AAA: 7:1
+ $goalContrastRatio: 3;
+ @if $level == "AA" {
+ $goalContrastRatio: 4.5;
+ } @else {
+ $goalContrastRatio: 7;
+ }
+
+ $percentMix: 100;
+ $contrastRatio: 0;
+ $contrastColor: null;
+ @while ($contrastRatio < $goalContrastRatio and $percentMix > 0) {
+ $contrastColor: mix(
+ $startColor,
+ $mixColor,
+ percentage(quarto-math.div($percentMix, 100))
+ );
+ $contrastRatio: quarto-contrast($contrastColor, $bgColor);
+ $percentMix: $percentMix - 1;
+ }
+
+ @return $contrastColor;
+}
+
+// Fades a color towards the background color
+@function theme-fade($baseColor, $backgroundColor, $amount) {
+ @if (tone($backgroundColor) == "dark") {
+ @return darken($baseColor, $amount);
+ } @else {
+ @return lighten($baseColor, $amount);
+ }
+}
+
+@function theme-highlight($baseColor, $backgroundColor, $amount) {
+ @if (tone($backgroundColor) == "dark") {
+ @return lighten($baseColor, $amount);
+ } @else {
+ @return darken($baseColor, $amount);
+ }
+}
+
+@function theme-override-value($theme, $varname, $default) {
+ // These will be defined in bootstrap, but creating values here
+ // That will make this function accessible to callers prior to bootstrap variables
+ // being set
+ $black: rgb(0, 0, 0) !default;
+ $white: rgb(255, 255, 255) !default;
+ $gray-500: #adb5bd !default;
+ $gray-300: #dee2e6 !default;
+ $blue: #0d6efd !default;
+
+ $simplex-border-mix: mix($white, $black, 93.5%) !default;
+
+ $theme-overrides: (
+ cerulean: (
+ navbar-fg: $white,
+ valuebox-bg-primary: #2fa4e7,
+ valuebox-bg-info: #3d9dd1,
+ valuebox-bg-success: #67a34d,
+ valuebox-bg-warning: #aa9208,
+ valuebox-bg-danger: #c48282,
+ ),
+ cosmo: (
+ navbar-bg:
+ if(
+ $default == #2780e3,
+ if(variable-exists(light), $light, $gray-500),
+ $default
+ ),
+ link-color: #2761e3,
+ valuebox-bg-primary: #5397e9,
+ valuebox-bg-info: #9954bbb3,
+ valuebox-bg-success: #3aa716,
+ valuebox-bg-warning: #fa6400,
+ valuebox-bg-danger: #ff0039b3,
+ ),
+ cyborg: (
+ navbar-bg:
+ if(
+ $default == #2a9fd6,
+ if(variable-exists(secondary), $secondary, $black),
+ $default
+ ),
+ navbar-hl: $white,
+ ),
+ darkly: (
+ navbar-fg: $gray-300,
+ navbar-hl: $white,
+ input-border-color: $gray-500,
+ ),
+ flatly: (
+ navbar-hl: $white,
+ valuebox-bg-primary: rgba(39, 128, 227, 0.7),
+ valuebox-bg-info: rgba(153, 84, 187, 0.7),
+ valuebox-bg-success: rgba(63, 182, 24, 0.7),
+ valuebox-bg-warning: rgba(255, 117, 24, 0.7),
+ valuebox-bg-danger: rgba(255, 0, 57, 0.7),
+ ),
+ journal: (
+ navbar-fg: rgba($white, 0.7),
+ navbar-hl: $white,
+ valuebox-bg-primary: #f0938f,
+ valuebox-bg-info: #3d9dd1,
+ valuebox-bg-success: #65a244,
+ valuebox-bg-warning: #ad9310,
+ valuebox-bg-danger: #c77f7f,
+ ),
+ litera: (
+ navbar-bg: if($default == #4582ec, $white, $default),
+ ),
+ lumen: (
+ navbar-fg: rgba($white, 0.7),
+ navbar-hl: $white,
+ valuebox-bg-primary: #67abcc,
+ valuebox-bg-info: #3d9dd1,
+ valuebox-bg-success: #5ea343,
+ valuebox-bg-warning: #a79011,
+ valuebox-bg-danger: #ca8181,
+ ),
+ lux: (),
+ materia: (
+ navbar-fg: rgba($white, 0.7),
+ navbar-hl: $white,
+ ),
+ minty: (
+ navbar-fg: $white,
+ ),
+ morph: (
+ navbar-bg:
+ if(
+ $default == #378dfc,
+ if(variable-exists(body-bg), $body-bg, $black),
+ $default
+ ),
+ navbar-fg: rgba($black, 0.5),
+ ),
+ paper: (
+ valuebox-bg-primary: #4396ea,
+ valuebox-bg-info: #c277cf,
+ valuebox-bg-success: #59a343,
+ valuebox-bg-warning: #d68100,
+ valuebox-bg-danger: #f46762,
+ ),
+ pulse: (
+ navbar-fg: rgba($white, 0.7),
+ navbar-hl: $white,
+ ),
+ quartz: (
+ navbar-fg: rgba($white, 0.8),
+ navbar-hl: $white,
+ ),
+ sandstone: (
+ navbar-bg:
+ if(
+ $default == #325d88,
+ if(variable-exists(dark), $dark, $black),
+ $default
+ ),
+ navbar-fg: rgba($white, 0.7),
+ navbar-hl: $white,
+ valuebox-bg-primary: #7b98ad,
+ valuebox-bg-info: #3d9dd1,
+ valuebox-bg-success: #60a545,
+ valuebox-bg-warning: #af8e08,
+ valuebox-bg-danger: #ca8181,
+ ),
+ simplex: (
+ navbar-bg: if($default == #d9230f, $white, $default),
+ navbar-fg: rgba($black, 0.6),
+ navbar-hl: $black,
+ nav-tabs-link-active-border-color: $simplex-border-mix $simplex-border-mix
+ transparent,
+ valuebox-bg-primary: #db766b,
+ valuebox-bg-info: #359ed0,
+ valuebox-bg-success: #59a343,
+ valuebox-bg-warning: #a59212,
+ valuebox-bg-danger: #c48282,
+ ),
+ sketchy: (
+ navbar-fg: $white,
+ ),
+ slate: (),
+ solar: (
+ navbar-bg:
+ if(
+ $default == #b58900,
+ if(variable-exists(dark), $dark, $black),
+ $default
+ ),
+ navbar-hl: $white,
+ ),
+ spacelab: (
+ navbar-bg:
+ if(
+ $default == #446e9b,
+ if(variable-exists(light), $light, #bbb),
+ $default
+ ),
+ navbar-hl: if(variable-exists(link-color), $link-color, $blue),
+ valuebox-bg-primary: #7e97ae,
+ valuebox-bg-info: #3d9dd1,
+ valuebox-bg-success: #62a540,
+ valuebox-bg-warning: #a59212,
+ valuebox-bg-danger: #c97e7e,
+ ),
+ superhero: (
+ navbar-bg:
+ if(
+ $default == #df6919,
+ if(variable-exists(dark), $dark, $black),
+ $default
+ ),
+ navbar-hl: $white,
+ ),
+ united: (
+ navbar-fg: rgba($white, 0.8),
+ navbar-hl: $white,
+ valuebox-bg-primary: #5c9bbc,
+ valuebox-bg-info: #3d9dd1,
+ valuebox-bg-success: #60a545,
+ valuebox-bg-warning: #9a9623,
+ valuebox-bg-danger: #c48282,
+ ),
+ vapor: (
+ navbar-fg: rgba($white, 0.8),
+ navbar-hl: $white,
+ ),
+ yeti: (),
+ zephyr: (),
+ );
+
+ $val: null;
+ @if ($theme != null) {
+ $theme-vals: quarto-map.get($theme-overrides, $theme);
+ @if ($theme-vals != null) {
+ $val: quarto-map.get($theme-vals, $varname);
+ }
+ }
+
+ @if ($val != null) {
+ @return $val;
+ } @else {
+ @return $default;
+ }
+}
+
+@function theme-navbar-bg($theme, $primary) {
+ $white: rgb(255, 255, 255) !default;
+
+ // These will be defined in bootstrap, but creating values here
+ // That will make this function accessible to callers prior to bootstrap variables
+ // being set
+ $theme-bgs: (
+ litera: $white,
+ cyborg: if(variable-exists(body-bg), $body-bg, #000),
+ );
+
+ $bg: quarto-map.get($theme-bgs, $theme);
+ @if ($bg != null) {
+ @return $bg;
+ } @else {
+ @return if(variable-exists(primary), $primary, #fff);
+ }
+}
+
+@function theme-navbar-fg($theme, $primary) {
+ $white: rgb(255, 255, 255) !default;
+
+ // These will be defined in bootstrap, but creating values here
+ // That will make this function accessible to callers prior to bootstrap variables
+ // being set
+ $theme-fgs: (
+ cerulean: $white,
+ );
+
+ $bg: quarto-map.get($theme-bgs, $theme);
+ @if ($bg != null) {
+ @return $bg;
+ } @else {
+ @return if(variable-exists(primary), $primary, #fff);
+ }
+}
+
+@function repeat-chars($chars, $n) {
+ $final: "";
+ @for $i from 1 through $n {
+ $final: $final + $chars;
+ }
+ @return $final;
+}
+
+@function _linear-channel-value($channel-value) {
+ $normalized-channel-value: quarto-math.div($channel-value, 255);
+ @if $normalized-channel-value < 0.03928 {
+ @return quarto-math.div($normalized-channel-value, 12.92);
+ }
+
+ @return quarto-math.pow(
+ quarto-math.div(($normalized-channel-value + 0.055), 1.055),
+ 2.4
+ );
+}
+
+// Calculate the luminance for a color.
+// See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
+@function luminance($color) {
+ $red: _linear-channel-value(quarto-color.red($color));
+ $green: _linear-channel-value(quarto-color.green($color));
+ $blue: _linear-channel-value(quarto-color.blue($color));
+
+ @return 0.2126 * $red + 0.7152 * $green + 0.0722 * $blue;
+}
+
+// Calculate the contrast ratio between two colors.
+// See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
+@function quarto-contrast($back, $front) {
+ $backLum: luminance($back) + 0.05;
+ $foreLum: luminance($front) + 0.05;
+
+ @return quarto-math.div(
+ quarto-math.max($backLum, $foreLum),
+ quarto-math.min($backLum, $foreLum)
+ );
+}
+
+// Determine whether the color is 'light' or 'dark'.
+@function tone($color) {
+ @if $color == "dark" or $color == "light" {
+ @return $color;
+ }
+
+ $minimumContrast: 3.1;
+
+ $lightContrast: quarto-contrast($color, white);
+ $darkContrast: quarto-contrast($color, rgba(black, 0.87));
+
+ @if ($lightContrast < $minimumContrast) and ($darkContrast > $lightContrast) {
+ @return "light";
+ } @else {
+ @return "dark";
+ }
+}
+
+// Determine whether to use dark or light text on top of given color to meet accessibility standards for contrast.
+// Returns 'dark' if the given color is light and 'light' if the given color is dark.
+@function contrast-tone($color) {
+ @return if(tone($color) == "dark", "light", "dark");
+}
+
+
+// quarto-scss-analysis-annotation { "origin": "'functions' section from user-defined SCSS" }
+
+
+
+// quarto-scss-analysis-annotation { "origin": "Defaults from user-defined SCSS" }
+
+$h2-font-size: 1.6rem !default;
+$headings-font-weight: 500 !default;
+$font-size-base: 1.1rem !default;
+
+
+/* TODO: Customize html appearance by setting SCSS variables */
+/* See https://quarto.org/docs/output-formats/html-themes.html#theme-options */
+
+$h2-font-size: 1.6rem !default;
+$headings-font-weight: 500 !default;
+$font-size-base: 1.1rem !default;
+
+
+// Heading font size customization
+$h1-font-size: 2rem !default;
+$h2-font-size: 1.65rem !default;
+$h3-font-size: 1.45rem !default;
+$h4-font-size: 1.25rem !default;
+$h5-font-size: 1.1rem !default;
+
+$kbd-padding-y: 0.4rem !default;
+$kbd-padding-x: 0.4rem !default;
+
+// Speed up the default transition for the navbar
+$transition-collapse: height 0.2s ease !default;
+
+// Adjust the base font size up a little
+$font-size-root: 17px !default;
+
+// Disable smooth scrolling
+$enable-smooth-scroll: false !default;
+
+// quarto-scss-analysis-annotation { "origin": "superhero (builtin theme)" }
+
+$theme: "superhero" !default;
+
+//
+// Color system
+//
+
+$white: #fff !default;
+$gray-100: #ebebeb !default;
+$gray-200: #dee2e6 !default;
+$gray-300: #ced4da !default;
+$gray-400: #adb5bd !default;
+$gray-500: #868e96 !default;
+$gray-600: #4e5d6c !default;
+$gray-700: #495057 !default;
+$gray-800: #343a40 !default;
+$gray-900: #212529 !default;
+$black: #000 !default;
+
+$blue: #4c9be8 !default;
+$indigo: #6610f2 !default;
+$purple: #6f42c1 !default;
+$pink: #e83e8c !default;
+$red: #d9534f !default;
+$orange: #df6919 !default;
+$yellow: #ffc107 !default;
+$green: #5cb85c !default;
+$teal: #20c997 !default;
+$cyan: #5bc0de !default;
+
+ // Body
+$body-bg: #0f2537 !default;
+$body-color: $gray-100 !default;
+
+@function body-mix($weight) {
+ @return mix($body-bg, $body-color, $weight);
+}
+
+$contrast-bg: color-contrast($body-bg) !default;
+$contrast-fg: color-contrast($contrast-bg) !default;
+
+$primary: $orange !default;
+$secondary: body-mix(80%) !default;
+$success: $green !default;
+$info: $cyan !default;
+$warning: $yellow !default;
+$danger: $red !default;
+$light: body-mix(48%) !default;
+$dark: body-mix(80%) !default;
+
+$min-contrast-ratio: 1.6 !default;
+
+// Components
+
+$border-radius: 0 !default;
+$border-radius-lg: 0 !default;
+$border-radius-sm: 0 !default;
+
+// Fonts
+
+// stylelint-disable-next-line value-keyword-case
+$font-family-sans-serif: Lato, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;
+
+$text-muted: rgba($contrast-bg, .4) !default;
+
+// Tables
+
+$table-accent-bg: rgba($contrast-bg, .05) !default;
+$table-hover-bg: rgba($contrast-bg, .075) !default;
+$table-border-color: rgba($contrast-fg, .15) !default;
+$table-head-bg: $light !default;
+$table-dark-bg: $light !default;
+$table-dark-border-color: body-mix(80%) !default;
+$table-dark-color: $body-bg !default;
+
+$table-bg-scale: 0% !default;
+
+// Forms
+
+$input-bg: $contrast-bg !default;
+$input-disabled-color: body-mix(80%) !default;
+$input-disabled-bg: $body-color !default;
+
+$input-color: $gray-900 !default;
+$input-border-color: transparent !default;
+$input-border-width: 0 !default;
+
+$input-placeholder-color: $gray-500 !default;
+
+$input-group-addon-color: $body-color !default;
+$input-group-addon-bg: body-mix(80%) !default;
+
+$form-select-disabled-bg: $input-disabled-bg !default;
+$form-select-disabled-color: $input-disabled-color !default;
+
+$form-check-input-bg: $contrast-bg !default;
+$form-check-input-border: none !default;
+
+$form-file-button-color: $input-group-addon-color !default;
+$form-file-button-bg: $input-group-addon-bg !default;
+$form-file-button-hover-bg: darken($form-file-button-bg, 5%) !default;
+
+$form-floating-label-opacity: 1 !default;
+
+// Dropdowns
+
+$dropdown-bg: body-mix(80%) !default;
+$dropdown-divider-bg: rgba($contrast-fg, .15) !default;
+$dropdown-link-color: $body-color !default;
+$dropdown-link-hover-color: $dropdown-link-color !default;
+$dropdown-link-hover-bg: $table-hover-bg !default;
+
+// Navs
+
+$nav-link-disabled-color: rgba(255, 255, 255, .4) !default;
+$nav-tabs-border-color: body-mix(80%) !default;
+$nav-tabs-link-active-color: $body-color !default;
+$nav-tabs-link-active-border-color: body-mix(80%) !default;
+
+// Navbar
+
+
+// Pagination
+
+$pagination-color: $contrast-bg !default;
+$pagination-bg: body-mix(80%) !default;
+$pagination-border-color: transparent !default;
+$pagination-hover-color: $contrast-bg !default;
+$pagination-hover-bg: $nav-link-disabled-color !default;
+$pagination-hover-border-color: $pagination-border-color !default;
+$pagination-disabled-color: $nav-link-disabled-color !default;
+$pagination-disabled-bg: $pagination-bg !default;
+$pagination-disabled-border-color: $pagination-border-color !default;
+
+// Cards
+
+$card-cap-bg: $table-hover-bg !default;
+$card-bg: body-mix(80%) !default;
+$card-inner-border-radius: 0 !default;
+
+// Accordion
+
+$accordion-bg: $card-bg !default;
+$accordion-border-width: 0 !default;
+$accordion-button-bg: $card-cap-bg !default;
+$accordion-button-active-bg: $primary !default;
+$accordion-button-active-color: $body-color !default;
+
+
+// Popovers
+
+$popover-bg: body-mix(80%) !default;
+$popover-header-bg: $table-hover-bg !default;
+
+// Toasts
+
+$toast-background-color: body-mix(80%) !default;
+$toast-border-color: rgba(0, 0, 0, .2) !default;
+$toast-header-color: $body-color !default;
+$toast-header-background-color: $toast-background-color !default;
+$toast-header-border-color: $toast-border-color !default;
+
+// Modals
+
+$modal-content-bg: body-mix(80%) !default;
+$modal-header-border-color: rgba(0, 0, 0, .2) !default;
+
+// Progress bars
+
+$progress-bg: body-mix(80%) !default;
+
+// List group
+
+$list-group-color: $contrast-bg !default;
+$list-group-bg: body-mix(80%) !default;
+$list-group-border-color: transparent !default;
+$list-group-hover-bg: $nav-link-disabled-color !default;
+$list-group-disabled-color: $nav-link-disabled-color !default;
+$list-group-action-color: $contrast-bg !default;
+$list-group-action-hover-color: $contrast-bg !default;
+
+// Breadcrumbs
+
+$breadcrumb-padding-y: .375rem !default;
+$breadcrumb-padding-x: .75rem !default;
+$breadcrumb-bg: body-mix(80%) !default;
+$breadcrumb-divider-color: $body-color !default;
+$breadcrumb-active-color: $body-color !default;
+
+// Close
+
+$btn-close-color: $contrast-bg !default;
+$btn-close-opacity: .5 !default;
+$btn-close-hover-opacity: 1 !default;
+
+// Code
+
+$pre-color: inherit !default;
+
+
+
+/*-- scss: functions --*/
+
+@function bannerColor() {
+ @if $title-banner-color {
+ @return $title-banner-color;
+ } @else {
+ @if variable-exists(navbar-fg) {
+ @return $navbar-fg;
+ } @else {
+ @return $body-bg;
+ }
+ }
+}
+
+@function bannerDim() {
+ @return theme-fade(bannerColor(), bannerBg(), 20%);
+}
+
+@function bannerBg() {
+ @if $title-banner-bg {
+ @return $title-banner-bg;
+ } @else {
+ // figure out default background, navbar of body color
+ @if variable-exists(navbar-bg) {
+ @return $navbar-bg;
+ } @else {
+ @return $body-color;
+ }
+ }
+}
+
+/*-- scss:variables --*/
+$title-banner-color: null !default;
+$title-banner-bg: null !default;
+$title-banner-image: null !default;
+
+
+$btn-code-copy-color: #f8f8f2 !default;
+$btn-code-copy-color-active: #ffa07a !default;
+
+// quarto-scss-analysis-annotation { "origin": "Defaults from Quarto's SCSS" }
+
+$code-copy-selector: "pre.sourceCode:hover > " !default;
+$code-white-space: pre !default;
+$tbl-cap-location: top !default;
+$sidebar-border: false !default;
+$sidebar-bg: if(variable-exists(body-bg), $body-bg, #fff) !default;
+// Default the theme name
+$theme-name: if(variable-exists(theme), $theme, "");
+
+// Colors that must be defined
+$blue: #0d6efd !default;
+$primary: $blue !default;
+$white: #ffffff !default;
+$gray-200: #e9ecef !default;
+$gray-100: #f8f9fa !default;
+$gray-900: #212529 !default;
+// Pending SCSS change until Charles clears it with us
+// $link-color: theme-override-value($theme-name, "link-color", $primary) !default;
+//
+$link-color: $primary !default;
+$link-color: if(
+ $link-color == $blue,
+ theme-override-value($theme-name, "link-color", $link-color),
+ $link-color
+);
+$link-color-bg: transparent !default;
+
+/* Code Block Formatting */
+// Code Block Border Treatment
+$code-block-border-left: false !default;
+$code-block-border-left-style: solid !default;
+$code-block-border-left-size: 3px !default;
+$code-block-padding-left: 0.6em !default;
+
+// Code Block Background Treatment
+// $code-block-bg, $code-block-bg-padding, $code-block-bg-alpha
+$code-block-bg: true !default;
+$code-block-bg-padding: 0.4em !default;
+$code-block-bg-alpha: -0.35 !default;
+
+// Controls when the code block will switch to a dark
+// version of a theme
+$code-block-theme-dark-threshhold: 40% !default;
+
+/* Inline Code Formatting */
+// $code-bg, $code-color, $code-padding
+$code-color: #7d12ba !default;
+
+// Set a default body emphasis color
+$code-bg: $gray-100 !default;
+
+// toc variables
+$toc-color: $link-color !default;
+$toc-font-size: 0.875rem !default;
+$toc-active-border: $toc-color !default;
+$toc-inactive-border: $gray-200 !default;
+
+$toc-tools-font-size: 0.8rem !default;
+
+/* Callout customization */
+// Formatting
+$callout-border-width: 5px !default;
+$callout-border-scale: 0% !default;
+$callout-icon-scale: 10% !default;
+$callout-margin-top: 1.25rem !default;
+$callout-margin-bottom: 1.25rem !default;
+
+// Navbar
+$navbar-default: if(
+ variable-exists(theme),
+ if(variable-exists(primary), $primary, #517699),
+ #517699
+);
+
+// If the user provides a navbar-bg, we ned to ignore the
+// theme overide and just recalculate a good value
+$navbar-hl-override: if(
+ variable-exists(navbar-bg) and variable-exists(link-color),
+ theme-contrast($link-color, $navbar-bg),
+ false
+);
+$navbar-bg: theme-override-value(
+ $theme-name,
+ "navbar-bg",
+ $navbar-default
+) !default;
+
+$btn-bg: if(variable-exists(secondary), $secondary, #6c757d) !default;
+$btn-fg: theme-contrast($btn-bg, $btn-bg) !default;
+
+$body-contrast-bg: if(variable-exists(body-bg), $body-bg, $white);
+$body-contrast-color: if(variable-exists(body-color), $body-color, $gray-900);
+$navbar-fg: if(
+ $navbar-bg == transparent,
+ theme-override-value(
+ $theme-name,
+ "navbar-fg",
+ theme-contrast($body-contrast-color, $body-contrast-bg)
+ ),
+ theme-override-value(
+ $theme-name,
+ "navbar-fg",
+ theme-contrast($navbar-bg, $navbar-bg)
+ )
+) !default;
+
+$navbar-hl: if(
+ $navbar-hl-override != false,
+ $navbar-hl-override,
+ theme-override-value(
+ $theme-name,
+ "navbar-hl",
+ if(
+ variable-exists(link-color),
+ theme-contrast($link-color, $navbar-bg),
+ $navbar-fg
+ )
+ )
+) !default;
+$navbar-brand: theme-override-value(
+ $theme-name,
+ "navbar-brand",
+ $navbar-fg
+) !default;
+$navbar-brand-hl: theme-override-value(
+ $theme-name,
+ "navbar-brand-hl",
+ $navbar-hl
+) !default;
+
+$navbar-toggler-icon-bg: url("data:image/svg+xml,") !default;
+$navbar-toggler-border-color: rgba($navbar-fg, 0) !default;
+$navbar-hover-color: rgba($navbar-hl, 0.8) !default;
+$navbar-disabled-color: rgba($navbar-fg, 0.75) !default;
+$navbar-toggler-padding-x: 0 !default;
+$navbar-toggler-padding-y: 0.25 !default;
+
+// We omit the !default here b/c the dark and light variants
+// are not meaningful in our usage of bootstrap. Instead, we will explicitly
+// manage these using the above documented variables
+$navbar-dark-bg: $navbar-bg;
+$navbar-dark-color: $navbar-fg;
+$navbar-dark-hover-color: $navbar-hover-color;
+$navbar-dark-active-color: $navbar-hl;
+$navbar-dark-disabled-color: $navbar-disabled-color;
+$navbar-dark-toggler-icon-bg: $navbar-toggler-icon-bg;
+$navbar-dark-toggler-border-color: $navbar-toggler-border-color;
+
+$navbar-light-bg: $navbar-bg;
+$navbar-light-color: $navbar-fg;
+$navbar-light-hover-color: $navbar-hover-color;
+$navbar-light-active-color: $navbar-hl;
+$navbar-light-disabled-color: $navbar-disabled-color;
+$navbar-light-toggler-icon-bg: $navbar-toggler-icon-bg;
+$navbar-light-toggler-border-color: $navbar-toggler-border-color;
+
+$navbar-light-brand-color: $navbar-brand;
+$navbar-light-brand-hover-color: $navbar-brand-hl;
+$navbar-dark-brand-color: $navbar-brand;
+$navbar-dark-brand-hover-color: $navbar-brand-hl;
+
+// Sidebar coloring
+$sidebar-bg: if(variable-exists(light), $light, #fff) !default;
+$sidebar-fg: null !default;
+@if $sidebar-bg == transparent {
+ $sidebar-fg: theme-contrast($body-contrast-color, $body-contrast-bg) !default;
+} @else {
+ $sidebar-fg: theme-contrast($sidebar-bg, $sidebar-bg) !default;
+}
+$sidebar-hl: null;
+$sidebar-font-size: 0.925rem !default;
+$sidebar-font-size-section: 0.875rem !default;
+$sidebar-font-size-collapse: 1rem !default;
+$sidebar-font-size-section-collapse: 1.1rem !default;
+$sidebar-border: false !default;
+
+// Title block variables
+$title-block-color: $body-contrast-color !default;
+$title-block-contast-color: $body-contrast-bg !default;
+$title-block-padding-top: 2.5em !default;
+
+// Footer coloring
+$footer-bg: if(variable-exists(body-bg), $body-bg, #fff) !default;
+$footer-fg: theme-contrast($footer-bg, $footer-bg, "AA") !default;
+$footer-font-size: 0.825em !default;
+$footer-left-font-size: $footer-font-size !default;
+$footer-center-font-size: $footer-font-size !default;
+$footer-right-font-size: $footer-font-size !default;
+
+// Disable default grid system and switch to CSS grid
+$enable-grid-classes: false;
+$enable-cssgrid: true;
+
+$zindex-pagelayout: 998;
+
+$popover-bg: if(variable-exists(body-bg), $body-bg, null) !default;
+$input-bg: if(variable-exists(body-bg), $body-bg, null) !default;
+
+// Note that 'default' is intentionally omitted from this
+// because we're using the default value if one is defined at this
+// point (the if variable exists check in the default).
+// This is a change to override the input border color for
+// darkly, which sets the border color to the body color for
+// whatever reason.
+$input-border-color: theme-override-value(
+ $theme-name,
+ "input-border-color",
+ if(variable-exists(input-border-color), $input-border-color, null)
+);
+
+// Same as above (default is respected if there is not override
+// so the `!default` keyword is omitted). Some themes don't provide
+// active tab border colors and they customize the main border
+// color which results in the tabs looking slightly weird since the
+// colors may not match (for example, simplex).
+$nav-tabs-link-active-border-color: theme-override-value(
+ $theme-name,
+ "nav-tabs-link-active-border-color",
+ if(
+ variable-exists(nav-tabs-link-active-border-color),
+ $nav-tabs-link-active-border-color,
+ null
+ )
+);
+
+/* GRID VARIABLES */
+// The left hand sidebar
+$grid-sidebar-width: 250px !default;
+// The main body
+$grid-body-width: 800px !default;
+// The right hand margin bar
+$grid-margin-width: 250px !default;
+// The gutter that appears between the above columns
+$grid-column-gutter-width: 1.5em !default;
+
+/* CODE ANNOTATION COLORS */
+$code-annotation-higlight-color: #aaaaaa44 !default;
+$code-annotation-higlight-bg: #aaaaaa22 !default;
+
+$breadcrumb-divider: quote(">") !default;
+
+// table variable overrides
+$table-group-separator-color: mix(
+ if(variable-exists(body-color), $body-color, $gray-900),
+ $body-contrast-bg,
+ 50%
+) !default;
+$table-group-separator-color-lighter: mix(
+ if(variable-exists(body-color), $body-color, $gray-900),
+ $body-contrast-bg,
+ 20%
+) !default;
+
+$bootstrap-version: 5;
+
+$h1h2h3-font-weight: 600 !default;
+
+// variables required by _brand.yml
+
+// these variables need to have been defined here already
+// and are repeated in the framework's own _variables.scss
+// This will require us to monitor framework changes
+// to avoid drift
+$font-weight-base: 400 !default;
+$small-font-size: 0.875em !default;
+$code-font-size: $small-font-size !default;
+$font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas,
+ "Liberation Mono", "Courier New", monospace !default;
+
+$font-family-monospace-block: $font-family-monospace !default;
+$font-family-monospace-inline: $font-family-monospace !default;
+$font-weight-monospace: $font-weight-base !default;
+$font-weight-monospace-block: $font-weight-monospace !default;
+$font-weight-monospace-inline: $font-weight-monospace !default;
+$code-block-font-size: $code-font-size !default;
+$code-inline-font-size: $code-font-size !default;
+$link-weight: $font-weight-base !default;
+$link-decoration: null !default;
+
+// border colors
+$border-color: mix(
+ if(variable-exists(body-color), $body-color, #fff),
+ $body-contrast-bg,
+ 30%
+) !default;
+$table-border-color: $border-color !default;
+
+// code block colors
+$btn-code-copy-color: if(
+ variable-exists(text-muted),
+ $text-muted,
+ if(variable-exists(body-color), $body-color, $gray-900)
+) !default;
+
+$btn-code-copy-color-active: if(
+ variable-exists(link-color),
+ $link-color,
+ #0d6efd
+) !default;
+
+
+
+
+
+
+
+
+$dashboard-card-toolbar-top-margin: 6px !default;
+
+
+$quarto-navbar-search-input-width: 180px !default;
+$quarto-sidebar-search-input-width: 100% !default;
+$quarto-search-results-width: 400px !default;
+
+$quarto-search-collapse-icon-size: 26px !default;
+
+
+$content-padding-top: 14px !default;
+$sidebar-glass-bg: #66666666 !default;
+$sidebar-anim-duration: 0.15s !default;
+
+$navbar-toggle-position: left !default;
+
+$navbar-toggler-order: if($navbar-toggle-position == "left", 1, 4) !default;
+$navbar-title-order: if($navbar-toggle-position == "left", 2, 1) !default;
+$navbar-search-order: if($navbar-toggle-position == "left", 4, 3) !default;
+$navbar-tools-order: if($navbar-toggle-position == "left", 3, 2) !default;
+$navbar-menu-order: if($navbar-toggle-position == "left", 20, 20) !default;
+
+
+
+
+
+
+// quarto-scss-analysis-annotation { "origin": "Defaults from the format SCSS" }
+
+// Variables
+//
+// Variables should follow the `$component-state-property-size` formula for
+// consistent naming. Ex: $nav-link-disabled-color and $modal-content-box-shadow-xs.
+
+// Color system
+
+// scss-docs-start gray-color-variables
+$white: #fff !default;
+$gray-100: #f8f9fa !default;
+$gray-200: #e9ecef !default;
+$gray-300: #dee2e6 !default;
+$gray-400: #ced4da !default;
+$gray-500: #adb5bd !default;
+$gray-600: #6c757d !default;
+$gray-700: #495057 !default;
+$gray-800: #343a40 !default;
+$gray-900: #212529 !default;
+$black: #000 !default;
+// scss-docs-end gray-color-variables
+
+// fusv-disable
+// scss-docs-start gray-colors-map
+$grays: (
+ "100": $gray-100,
+ "200": $gray-200,
+ "300": $gray-300,
+ "400": $gray-400,
+ "500": $gray-500,
+ "600": $gray-600,
+ "700": $gray-700,
+ "800": $gray-800,
+ "900": $gray-900
+) !default;
+// scss-docs-end gray-colors-map
+// fusv-enable
+
+// scss-docs-start color-variables
+$blue: #0d6efd !default;
+$indigo: #6610f2 !default;
+$purple: #6f42c1 !default;
+$pink: #d63384 !default;
+$red: #dc3545 !default;
+$orange: #fd7e14 !default;
+$yellow: #ffc107 !default;
+$green: #198754 !default;
+$teal: #20c997 !default;
+$cyan: #0dcaf0 !default;
+// scss-docs-end color-variables
+
+// scss-docs-start colors-map
+$colors: (
+ "blue": $blue,
+ "indigo": $indigo,
+ "purple": $purple,
+ "pink": $pink,
+ "red": $red,
+ "orange": $orange,
+ "yellow": $yellow,
+ "green": $green,
+ "teal": $teal,
+ "cyan": $cyan,
+ "black": $black,
+ "white": $white,
+ "gray": $gray-600,
+ "gray-dark": $gray-800
+) !default;
+// scss-docs-end colors-map
+
+// The contrast ratio to reach against white, to determine if color changes from "light" to "dark". Acceptable values for WCAG 2.0 are 3, 4.5 and 7.
+// See https://www.w3.org/TR/WCAG20/#visual-audio-contrast-contrast
+$min-contrast-ratio: 4.5 !default;
+
+// Customize the light and dark text colors for use in our color contrast function.
+$color-contrast-dark: $black !default;
+$color-contrast-light: $white !default;
+
+// fusv-disable
+$blue-100: tint-color($blue, 80%) !default;
+$blue-200: tint-color($blue, 60%) !default;
+$blue-300: tint-color($blue, 40%) !default;
+$blue-400: tint-color($blue, 20%) !default;
+$blue-500: $blue !default;
+$blue-600: shade-color($blue, 20%) !default;
+$blue-700: shade-color($blue, 40%) !default;
+$blue-800: shade-color($blue, 60%) !default;
+$blue-900: shade-color($blue, 80%) !default;
+
+$indigo-100: tint-color($indigo, 80%) !default;
+$indigo-200: tint-color($indigo, 60%) !default;
+$indigo-300: tint-color($indigo, 40%) !default;
+$indigo-400: tint-color($indigo, 20%) !default;
+$indigo-500: $indigo !default;
+$indigo-600: shade-color($indigo, 20%) !default;
+$indigo-700: shade-color($indigo, 40%) !default;
+$indigo-800: shade-color($indigo, 60%) !default;
+$indigo-900: shade-color($indigo, 80%) !default;
+
+$purple-100: tint-color($purple, 80%) !default;
+$purple-200: tint-color($purple, 60%) !default;
+$purple-300: tint-color($purple, 40%) !default;
+$purple-400: tint-color($purple, 20%) !default;
+$purple-500: $purple !default;
+$purple-600: shade-color($purple, 20%) !default;
+$purple-700: shade-color($purple, 40%) !default;
+$purple-800: shade-color($purple, 60%) !default;
+$purple-900: shade-color($purple, 80%) !default;
+
+$pink-100: tint-color($pink, 80%) !default;
+$pink-200: tint-color($pink, 60%) !default;
+$pink-300: tint-color($pink, 40%) !default;
+$pink-400: tint-color($pink, 20%) !default;
+$pink-500: $pink !default;
+$pink-600: shade-color($pink, 20%) !default;
+$pink-700: shade-color($pink, 40%) !default;
+$pink-800: shade-color($pink, 60%) !default;
+$pink-900: shade-color($pink, 80%) !default;
+
+$red-100: tint-color($red, 80%) !default;
+$red-200: tint-color($red, 60%) !default;
+$red-300: tint-color($red, 40%) !default;
+$red-400: tint-color($red, 20%) !default;
+$red-500: $red !default;
+$red-600: shade-color($red, 20%) !default;
+$red-700: shade-color($red, 40%) !default;
+$red-800: shade-color($red, 60%) !default;
+$red-900: shade-color($red, 80%) !default;
+
+$orange-100: tint-color($orange, 80%) !default;
+$orange-200: tint-color($orange, 60%) !default;
+$orange-300: tint-color($orange, 40%) !default;
+$orange-400: tint-color($orange, 20%) !default;
+$orange-500: $orange !default;
+$orange-600: shade-color($orange, 20%) !default;
+$orange-700: shade-color($orange, 40%) !default;
+$orange-800: shade-color($orange, 60%) !default;
+$orange-900: shade-color($orange, 80%) !default;
+
+$yellow-100: tint-color($yellow, 80%) !default;
+$yellow-200: tint-color($yellow, 60%) !default;
+$yellow-300: tint-color($yellow, 40%) !default;
+$yellow-400: tint-color($yellow, 20%) !default;
+$yellow-500: $yellow !default;
+$yellow-600: shade-color($yellow, 20%) !default;
+$yellow-700: shade-color($yellow, 40%) !default;
+$yellow-800: shade-color($yellow, 60%) !default;
+$yellow-900: shade-color($yellow, 80%) !default;
+
+$green-100: tint-color($green, 80%) !default;
+$green-200: tint-color($green, 60%) !default;
+$green-300: tint-color($green, 40%) !default;
+$green-400: tint-color($green, 20%) !default;
+$green-500: $green !default;
+$green-600: shade-color($green, 20%) !default;
+$green-700: shade-color($green, 40%) !default;
+$green-800: shade-color($green, 60%) !default;
+$green-900: shade-color($green, 80%) !default;
+
+$teal-100: tint-color($teal, 80%) !default;
+$teal-200: tint-color($teal, 60%) !default;
+$teal-300: tint-color($teal, 40%) !default;
+$teal-400: tint-color($teal, 20%) !default;
+$teal-500: $teal !default;
+$teal-600: shade-color($teal, 20%) !default;
+$teal-700: shade-color($teal, 40%) !default;
+$teal-800: shade-color($teal, 60%) !default;
+$teal-900: shade-color($teal, 80%) !default;
+
+$cyan-100: tint-color($cyan, 80%) !default;
+$cyan-200: tint-color($cyan, 60%) !default;
+$cyan-300: tint-color($cyan, 40%) !default;
+$cyan-400: tint-color($cyan, 20%) !default;
+$cyan-500: $cyan !default;
+$cyan-600: shade-color($cyan, 20%) !default;
+$cyan-700: shade-color($cyan, 40%) !default;
+$cyan-800: shade-color($cyan, 60%) !default;
+$cyan-900: shade-color($cyan, 80%) !default;
+
+$blues: (
+ "blue-100": $blue-100,
+ "blue-200": $blue-200,
+ "blue-300": $blue-300,
+ "blue-400": $blue-400,
+ "blue-500": $blue-500,
+ "blue-600": $blue-600,
+ "blue-700": $blue-700,
+ "blue-800": $blue-800,
+ "blue-900": $blue-900
+) !default;
+
+$indigos: (
+ "indigo-100": $indigo-100,
+ "indigo-200": $indigo-200,
+ "indigo-300": $indigo-300,
+ "indigo-400": $indigo-400,
+ "indigo-500": $indigo-500,
+ "indigo-600": $indigo-600,
+ "indigo-700": $indigo-700,
+ "indigo-800": $indigo-800,
+ "indigo-900": $indigo-900
+) !default;
+
+$purples: (
+ "purple-100": $purple-100,
+ "purple-200": $purple-200,
+ "purple-300": $purple-300,
+ "purple-400": $purple-400,
+ "purple-500": $purple-500,
+ "purple-600": $purple-600,
+ "purple-700": $purple-700,
+ "purple-800": $purple-800,
+ "purple-900": $purple-900
+) !default;
+
+$pinks: (
+ "pink-100": $pink-100,
+ "pink-200": $pink-200,
+ "pink-300": $pink-300,
+ "pink-400": $pink-400,
+ "pink-500": $pink-500,
+ "pink-600": $pink-600,
+ "pink-700": $pink-700,
+ "pink-800": $pink-800,
+ "pink-900": $pink-900
+) !default;
+
+$reds: (
+ "red-100": $red-100,
+ "red-200": $red-200,
+ "red-300": $red-300,
+ "red-400": $red-400,
+ "red-500": $red-500,
+ "red-600": $red-600,
+ "red-700": $red-700,
+ "red-800": $red-800,
+ "red-900": $red-900
+) !default;
+
+$oranges: (
+ "orange-100": $orange-100,
+ "orange-200": $orange-200,
+ "orange-300": $orange-300,
+ "orange-400": $orange-400,
+ "orange-500": $orange-500,
+ "orange-600": $orange-600,
+ "orange-700": $orange-700,
+ "orange-800": $orange-800,
+ "orange-900": $orange-900
+) !default;
+
+$yellows: (
+ "yellow-100": $yellow-100,
+ "yellow-200": $yellow-200,
+ "yellow-300": $yellow-300,
+ "yellow-400": $yellow-400,
+ "yellow-500": $yellow-500,
+ "yellow-600": $yellow-600,
+ "yellow-700": $yellow-700,
+ "yellow-800": $yellow-800,
+ "yellow-900": $yellow-900
+) !default;
+
+$greens: (
+ "green-100": $green-100,
+ "green-200": $green-200,
+ "green-300": $green-300,
+ "green-400": $green-400,
+ "green-500": $green-500,
+ "green-600": $green-600,
+ "green-700": $green-700,
+ "green-800": $green-800,
+ "green-900": $green-900
+) !default;
+
+$teals: (
+ "teal-100": $teal-100,
+ "teal-200": $teal-200,
+ "teal-300": $teal-300,
+ "teal-400": $teal-400,
+ "teal-500": $teal-500,
+ "teal-600": $teal-600,
+ "teal-700": $teal-700,
+ "teal-800": $teal-800,
+ "teal-900": $teal-900
+) !default;
+
+$cyans: (
+ "cyan-100": $cyan-100,
+ "cyan-200": $cyan-200,
+ "cyan-300": $cyan-300,
+ "cyan-400": $cyan-400,
+ "cyan-500": $cyan-500,
+ "cyan-600": $cyan-600,
+ "cyan-700": $cyan-700,
+ "cyan-800": $cyan-800,
+ "cyan-900": $cyan-900
+) !default;
+// fusv-enable
+
+// Semantically, $secondary is closest to BS3's 'default' theme color;
+// so use that if specified. Otherwise, use a light instead of dark gray
+// default color for $default since that's closer to bootstrap 3's default
+$default: if(variable-exists("secondary"), $secondary, $gray-300) !default;
+
+// scss-docs-start theme-color-variables
+$primary: $blue !default;
+$secondary: $gray-600 !default;
+$success: $green !default;
+$info: $cyan !default;
+$warning: $yellow !default;
+$danger: $red !default;
+$light: $gray-100 !default;
+$dark: $gray-900 !default;
+// scss-docs-end theme-color-variables
+
+// scss-docs-start theme-colors-map
+$theme-colors: (
+ // default needs to be 1st so that .btn-default comes before .btn-primary
+ // & therefore has lower priority.
+ "default": $default,
+ "primary": $primary,
+ "secondary": $secondary,
+ "success": $success,
+ "info": $info,
+ "warning": $warning,
+ "danger": $danger,
+ "light": $light,
+ "dark": $dark
+) !default;
+// scss-docs-end theme-colors-map
+
+// scss-docs-start theme-text-variables
+$primary-text-emphasis: shade-color($primary, 60%) !default;
+$secondary-text-emphasis: shade-color($secondary, 60%) !default;
+$success-text-emphasis: shade-color($success, 60%) !default;
+$info-text-emphasis: shade-color($info, 60%) !default;
+$warning-text-emphasis: shade-color($warning, 60%) !default;
+$danger-text-emphasis: shade-color($danger, 60%) !default;
+$light-text-emphasis: $gray-700 !default;
+$dark-text-emphasis: $gray-700 !default;
+// scss-docs-end theme-text-variables
+
+// scss-docs-start theme-bg-subtle-variables
+$primary-bg-subtle: tint-color($primary, 80%) !default;
+$secondary-bg-subtle: tint-color($secondary, 80%) !default;
+$success-bg-subtle: tint-color($success, 80%) !default;
+$info-bg-subtle: tint-color($info, 80%) !default;
+$warning-bg-subtle: tint-color($warning, 80%) !default;
+$danger-bg-subtle: tint-color($danger, 80%) !default;
+$light-bg-subtle: mix($gray-100, $white) !default;
+$dark-bg-subtle: $gray-400 !default;
+// scss-docs-end theme-bg-subtle-variables
+
+// scss-docs-start theme-border-subtle-variables
+$primary-border-subtle: tint-color($primary, 60%) !default;
+$secondary-border-subtle: tint-color($secondary, 60%) !default;
+$success-border-subtle: tint-color($success, 60%) !default;
+$info-border-subtle: tint-color($info, 60%) !default;
+$warning-border-subtle: tint-color($warning, 60%) !default;
+$danger-border-subtle: tint-color($danger, 60%) !default;
+$light-border-subtle: $gray-200 !default;
+$dark-border-subtle: $gray-500 !default;
+// scss-docs-end theme-border-subtle-variables
+
+// Characters which are escaped by the escape-svg function
+$escaped-characters: (
+ ("<", "%3c"),
+ (">", "%3e"),
+ ("#", "%23"),
+ ("(", "%28"),
+ (")", "%29"),
+) !default;
+
+// Options
+//
+// Quickly modify global styling by enabling or disabling optional features.
+
+$enable-caret: true !default;
+$enable-rounded: true !default;
+$enable-shadows: false !default;
+$enable-gradients: false !default;
+$enable-transitions: true !default;
+$enable-reduced-motion: true !default;
+$enable-smooth-scroll: true !default;
+$enable-grid-classes: true !default;
+$enable-container-classes: true !default;
+$enable-cssgrid: false !default;
+$enable-button-pointers: true !default;
+$enable-rfs: true !default;
+$enable-validation-icons: true !default;
+$enable-negative-margins: false !default;
+$enable-deprecation-messages: true !default;
+$enable-important-utilities: true !default;
+
+$enable-dark-mode: true !default;
+$color-mode-type: data !default; // `data` or `media-query`
+
+// Prefix for :root CSS variables
+
+$variable-prefix: bs- !default; // Deprecated in v5.2.0 for the shorter `$prefix`
+$prefix: $variable-prefix !default;
+
+// Gradient
+//
+// The gradient which is added to components if `$enable-gradients` is `true`
+// This gradient is also added to elements with `.bg-gradient`
+// scss-docs-start variable-gradient
+$gradient: linear-gradient(180deg, rgba($white, .15), rgba($white, 0)) !default;
+// scss-docs-end variable-gradient
+
+// Spacing
+//
+// Control the default styling of most Bootstrap elements by modifying these
+// variables. Mostly focused on spacing.
+// You can add more entries to the $spacers map, should you need more variation.
+
+// scss-docs-start spacer-variables-maps
+$spacer: 1rem !default;
+$spacers: (
+ 0: 0,
+ 1: $spacer * .25,
+ 2: $spacer * .5,
+ 3: $spacer,
+ 4: $spacer * 1.5,
+ 5: $spacer * 3,
+) !default;
+// scss-docs-end spacer-variables-maps
+
+// Position
+//
+// Define the edge positioning anchors of the position utilities.
+
+// scss-docs-start position-map
+$position-values: (
+ 0: 0,
+ 50: 50%,
+ 100: 100%
+) !default;
+// scss-docs-end position-map
+
+// Body
+//
+// Settings for the `` element.
+
+$body-text-align: null !default;
+$body-color: $gray-900 !default;
+$body-bg: $white !default;
+
+$body-secondary-color: rgba($body-color, .75) !default;
+$body-secondary-bg: $gray-200 !default;
+
+$body-tertiary-color: rgba($body-color, .5) !default;
+$body-tertiary-bg: $gray-100 !default;
+
+$body-emphasis-color: $black !default;
+
+// Links
+//
+// Style anchor elements.
+
+$link-color: $primary !default;
+$link-decoration: underline !default;
+$link-shade-percentage: 20% !default;
+$link-hover-color: shift-color($link-color, $link-shade-percentage) !default;
+$link-hover-decoration: null !default;
+
+$stretched-link-pseudo-element: after !default;
+$stretched-link-z-index: 1 !default;
+
+// Icon links
+// scss-docs-start icon-link-variables
+$icon-link-gap: .375rem !default;
+$icon-link-underline-offset: .25em !default;
+$icon-link-icon-size: 1em !default;
+$icon-link-icon-transition: .2s ease-in-out transform !default;
+$icon-link-icon-transform: translate3d(.25em, 0, 0) !default;
+// scss-docs-end icon-link-variables
+
+// Paragraphs
+//
+// Style p element.
+
+$paragraph-margin-bottom: 1rem !default;
+
+
+// Grid breakpoints
+//
+// Define the minimum dimensions at which your layout will change,
+// adapting to different screen sizes, for use in media queries.
+
+// scss-docs-start grid-breakpoints
+$grid-breakpoints: (
+ xs: 0,
+ sm: 576px,
+ md: 768px,
+ lg: 992px,
+ xl: 1200px,
+ xxl: 1400px
+) !default;
+// scss-docs-end grid-breakpoints
+
+@include _assert-ascending($grid-breakpoints, "$grid-breakpoints");
+@include _assert-starts-at-zero($grid-breakpoints, "$grid-breakpoints");
+
+
+// Grid containers
+//
+// Define the maximum width of `.container` for different screen sizes.
+
+// scss-docs-start container-max-widths
+$container-max-widths: (
+ sm: 540px,
+ md: 720px,
+ lg: 960px,
+ xl: 1140px,
+ xxl: 1320px
+) !default;
+// scss-docs-end container-max-widths
+
+@include _assert-ascending($container-max-widths, "$container-max-widths");
+
+
+// Grid columns
+//
+// Set the number of columns and specify the width of the gutters.
+
+$grid-columns: 12 !default;
+$grid-gutter-width: 1.5rem !default;
+$grid-row-columns: 6 !default;
+
+// Container padding
+
+$container-padding-x: $grid-gutter-width !default;
+
+
+// Components
+//
+// Define common padding and border radius sizes and more.
+
+// scss-docs-start border-variables
+$border-width: 1px !default;
+$border-widths: (
+ 1: 1px,
+ 2: 2px,
+ 3: 3px,
+ 4: 4px,
+ 5: 5px
+) !default;
+$border-style: solid !default;
+$border-color: $gray-300 !default;
+$border-color-translucent: rgba($black, .175) !default;
+// scss-docs-end border-variables
+
+// scss-docs-start border-radius-variables
+$border-radius: .375rem !default;
+$border-radius-sm: .25rem !default;
+$border-radius-lg: .5rem !default;
+$border-radius-xl: 1rem !default;
+$border-radius-xxl: 2rem !default;
+$border-radius-pill: 50rem !default;
+// scss-docs-end border-radius-variables
+// fusv-disable
+$border-radius-2xl: $border-radius-xxl !default; // Deprecated in v5.3.0
+// fusv-enable
+
+// scss-docs-start box-shadow-variables
+$box-shadow: 0 .5rem 1rem rgba($black, .15) !default;
+$box-shadow-sm: 0 .125rem .25rem rgba($black, .075) !default;
+$box-shadow-lg: 0 1rem 3rem rgba($black, .175) !default;
+$box-shadow-inset: inset 0 1px 2px rgba($black, .075) !default;
+// scss-docs-end box-shadow-variables
+
+$component-active-bg: $primary !default;
+$component-active-color: color-contrast($component-active-bg) !default;
+
+// scss-docs-start focus-ring-variables
+$focus-ring-width: .25rem !default;
+$focus-ring-opacity: .25 !default;
+$focus-ring-color: rgba($primary, $focus-ring-opacity) !default;
+$focus-ring-blur: 0 !default;
+$focus-ring-box-shadow: 0 0 $focus-ring-blur $focus-ring-width $focus-ring-color !default;
+// scss-docs-end focus-ring-variables
+
+// scss-docs-start caret-variables
+$caret-width: .3em !default;
+$caret-vertical-align: $caret-width * .85 !default;
+$caret-spacing: $caret-width * .85 !default;
+// scss-docs-end caret-variables
+
+$transition-base: all .2s ease-in-out !default;
+$transition-fade: opacity .15s linear !default;
+// scss-docs-start collapse-transition
+$transition-collapse: height .35s ease !default;
+$transition-collapse-width: width .35s ease !default;
+// scss-docs-end collapse-transition
+
+// stylelint-disable function-disallowed-list
+// scss-docs-start aspect-ratios
+$aspect-ratios: (
+ "1x1": 100%,
+ "4x3": calc(3 / 4 * 100%),
+ "16x9": calc(9 / 16 * 100%),
+ "21x9": calc(9 / 21 * 100%)
+) !default;
+// scss-docs-end aspect-ratios
+// stylelint-enable function-disallowed-list
+
+// Typography
+//
+// Font, line-height, and color for body text, headings, and more.
+
+// scss-docs-start font-variables
+// stylelint-disable value-keyword-case
+$font-family-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
+$font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default;
+// stylelint-enable value-keyword-case
+$font-family-base: $font-family-sans-serif !default;
+$font-family-code: $font-family-monospace !default;
+
+// $font-size-root affects the value of `rem`, which is used for as well font sizes, paddings, and margins
+// $font-size-base affects the font size of the body text
+$font-size-root: null !default;
+$font-size-base: 1rem !default; // Assumes the browser default, typically `16px`
+$font-size-sm: $font-size-base * .875 !default;
+$font-size-lg: $font-size-base * 1.25 !default;
+
+$font-weight-lighter: lighter !default;
+$font-weight-light: 300 !default;
+$font-weight-normal: 400 !default;
+$font-weight-medium: 500 !default;
+$font-weight-semibold: 600 !default;
+$font-weight-bold: 700 !default;
+$font-weight-bolder: bolder !default;
+
+$font-weight-base: $font-weight-normal !default;
+
+$line-height-base: 1.5 !default;
+$line-height-sm: 1.25 !default;
+$line-height-lg: 2 !default;
+
+$h1-font-size: $font-size-base * 2.5 !default;
+$h2-font-size: $font-size-base * 2 !default;
+$h3-font-size: $font-size-base * 1.75 !default;
+$h4-font-size: $font-size-base * 1.5 !default;
+$h5-font-size: $font-size-base * 1.25 !default;
+$h6-font-size: $font-size-base !default;
+// scss-docs-end font-variables
+
+// scss-docs-start font-sizes
+$font-sizes: (
+ 1: $h1-font-size,
+ 2: $h2-font-size,
+ 3: $h3-font-size,
+ 4: $h4-font-size,
+ 5: $h5-font-size,
+ 6: $h6-font-size
+) !default;
+// scss-docs-end font-sizes
+
+// scss-docs-start headings-variables
+$headings-margin-bottom: $spacer * .5 !default;
+$headings-font-family: null !default;
+$headings-font-style: null !default;
+$headings-font-weight: 500 !default;
+$headings-line-height: 1.2 !default;
+$headings-color: inherit !default;
+// scss-docs-end headings-variables
+
+// scss-docs-start display-headings
+$display-font-sizes: (
+ 1: 5rem,
+ 2: 4.5rem,
+ 3: 4rem,
+ 4: 3.5rem,
+ 5: 3rem,
+ 6: 2.5rem
+) !default;
+
+$display-font-family: null !default;
+$display-font-style: null !default;
+$display-font-weight: 300 !default;
+$display-line-height: $headings-line-height !default;
+// scss-docs-end display-headings
+
+// scss-docs-start type-variables
+$lead-font-size: $font-size-base * 1.25 !default;
+$lead-font-weight: 300 !default;
+
+$small-font-size: .875em !default;
+
+$sub-sup-font-size: .75em !default;
+
+// fusv-disable
+$text-muted: $body-secondary-color !default; // Deprecated in 5.3.0
+// fusv-enable
+
+$initialism-font-size: $small-font-size !default;
+
+$blockquote-margin-y: $spacer !default;
+$blockquote-font-size: $font-size-base * 1.25 !default;
+$blockquote-footer-color: $gray-600 !default;
+$blockquote-footer-font-size: $small-font-size !default;
+$blockquote-border-width: $spacer / 4 !default;
+$blockquote-border-color: $gray-200 !default;
+
+$hr-margin-y: $spacer !default;
+$hr-color: inherit !default;
+
+// fusv-disable
+$hr-bg-color: null !default; // Deprecated in v5.2.0
+$hr-height: null !default; // Deprecated in v5.2.0
+// fusv-enable
+
+$hr-border-color: null !default; // Allows for inherited colors
+$hr-border-width: $border-width !default;
+$hr-opacity: .25 !default;
+
+// scss-docs-start vr-variables
+$vr-border-width: $border-width !default;
+// scss-docs-end vr-variables
+
+$legend-margin-bottom: .5rem !default;
+$legend-font-size: 1.5rem !default;
+$legend-font-weight: null !default;
+
+$dt-font-weight: $font-weight-bold !default;
+
+$list-inline-padding: .5rem !default;
+
+$mark-padding: .1875em !default;
+$mark-bg: $yellow-100 !default;
+// scss-docs-end type-variables
+
+
+// Tables
+//
+// Customizes the `.table` component with basic values, each used across all table variations.
+
+// scss-docs-start table-variables
+$table-cell-padding-y: .5rem !default;
+$table-cell-padding-x: .5rem !default;
+$table-cell-padding-y-sm: .25rem !default;
+$table-cell-padding-x-sm: .25rem !default;
+
+$table-cell-vertical-align: top !default;
+
+$table-color: $body-color !default;
+$table-bg: $body-bg !default;
+$table-accent-bg: transparent !default;
+
+$table-th-font-weight: null !default;
+
+$table-striped-color: $table-color !default;
+$table-striped-bg-factor: .05 !default;
+$table-striped-bg: rgba($black, $table-striped-bg-factor) !default;
+
+$table-active-color: $table-color !default;
+$table-active-bg-factor: .1 !default;
+$table-active-bg: rgba($black, $table-active-bg-factor) !default;
+
+$table-hover-color: $table-color !default;
+$table-hover-bg-factor: .075 !default;
+$table-hover-bg: rgba($black, $table-hover-bg-factor) !default;
+
+$table-border-factor: .1 !default;
+$table-border-width: $border-width !default;
+$table-border-color: $border-color !default;
+
+$table-striped-order: odd !default;
+$table-striped-columns-order: even !default;
+
+$table-group-separator-color: currentcolor !default;
+
+$table-caption-color: $body-secondary-color !default;
+
+$table-bg-scale: -80% !default;
+// scss-docs-end table-variables
+
+// scss-docs-start table-loop
+$table-variants: (
+ "primary": shift-color($primary, $table-bg-scale),
+ "secondary": shift-color($secondary, $table-bg-scale),
+ "success": shift-color($success, $table-bg-scale),
+ "info": shift-color($info, $table-bg-scale),
+ "warning": shift-color($warning, $table-bg-scale),
+ "danger": shift-color($danger, $table-bg-scale),
+ "light": $light,
+ "dark": $dark,
+) !default;
+// scss-docs-end table-loop
+
+
+// Buttons + Forms
+//
+// Shared variables that are reassigned to `$input-` and `$btn-` specific variables.
+
+// scss-docs-start input-btn-variables
+$input-btn-padding-y: .375rem !default;
+$input-btn-padding-x: .75rem !default;
+$input-btn-font-family: null !default;
+$input-btn-font-size: $font-size-base !default;
+$input-btn-line-height: $line-height-base !default;
+
+$input-btn-focus-width: $focus-ring-width !default;
+$input-btn-focus-color-opacity: $focus-ring-opacity !default;
+$input-btn-focus-color: $focus-ring-color !default;
+$input-btn-focus-blur: $focus-ring-blur !default;
+$input-btn-focus-box-shadow: $focus-ring-box-shadow !default;
+
+$input-btn-padding-y-sm: .25rem !default;
+$input-btn-padding-x-sm: .5rem !default;
+$input-btn-font-size-sm: $font-size-sm !default;
+
+$input-btn-padding-y-lg: .5rem !default;
+$input-btn-padding-x-lg: 1rem !default;
+$input-btn-font-size-lg: $font-size-lg !default;
+
+$input-btn-border-width: $border-width !default;
+// scss-docs-end input-btn-variables
+
+
+// Buttons
+//
+// For each of Bootstrap's buttons, define text, background, and border color.
+
+// scss-docs-start btn-variables
+$btn-color: $body-color !default;
+$btn-padding-y: $input-btn-padding-y !default;
+$btn-padding-x: $input-btn-padding-x !default;
+$btn-font-family: $input-btn-font-family !default;
+$btn-font-size: $input-btn-font-size !default;
+$btn-line-height: $input-btn-line-height !default;
+$btn-white-space: null !default; // Set to `nowrap` to prevent text wrapping
+
+$btn-padding-y-sm: $input-btn-padding-y-sm !default;
+$btn-padding-x-sm: $input-btn-padding-x-sm !default;
+$btn-font-size-sm: $input-btn-font-size-sm !default;
+
+$btn-padding-y-lg: $input-btn-padding-y-lg !default;
+$btn-padding-x-lg: $input-btn-padding-x-lg !default;
+$btn-font-size-lg: $input-btn-font-size-lg !default;
+
+$btn-border-width: $input-btn-border-width !default;
+
+$btn-font-weight: $font-weight-normal !default;
+$btn-box-shadow: inset 0 1px 0 rgba($white, .15), 0 1px 1px rgba($black, .075) !default;
+$btn-focus-width: $input-btn-focus-width !default;
+$btn-focus-box-shadow: $input-btn-focus-box-shadow !default;
+$btn-disabled-opacity: .65 !default;
+$btn-active-box-shadow: inset 0 3px 5px rgba($black, .125) !default;
+
+$btn-link-color: $link-color !default;
+$btn-link-hover-color: $link-hover-color !default;
+$btn-link-disabled-color: $gray-600 !default;
+
+// Allows for customizing button radius independently from global border radius
+$btn-border-radius: $border-radius !default;
+$btn-border-radius-sm: $border-radius-sm !default;
+$btn-border-radius-lg: $border-radius-lg !default;
+
+$btn-transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
+
+$btn-hover-bg-shade-amount: 15% !default;
+$btn-hover-bg-tint-amount: 15% !default;
+$btn-hover-border-shade-amount: 20% !default;
+$btn-hover-border-tint-amount: 10% !default;
+$btn-active-bg-shade-amount: 20% !default;
+$btn-active-bg-tint-amount: 20% !default;
+$btn-active-border-shade-amount: 25% !default;
+$btn-active-border-tint-amount: 10% !default;
+// scss-docs-end btn-variables
+
+
+// Forms
+
+// scss-docs-start form-text-variables
+$form-text-margin-top: .25rem !default;
+$form-text-font-size: $small-font-size !default;
+$form-text-font-style: null !default;
+$form-text-font-weight: null !default;
+$form-text-color: $body-secondary-color !default;
+// scss-docs-end form-text-variables
+
+// scss-docs-start form-label-variables
+$form-label-margin-bottom: .5rem !default;
+$form-label-font-size: null !default;
+$form-label-font-style: null !default;
+$form-label-font-weight: null !default;
+$form-label-color: null !default;
+// scss-docs-end form-label-variables
+
+// scss-docs-start form-input-variables
+$input-padding-y: $input-btn-padding-y !default;
+$input-padding-x: $input-btn-padding-x !default;
+$input-font-family: $input-btn-font-family !default;
+$input-font-size: $input-btn-font-size !default;
+$input-font-weight: $font-weight-base !default;
+$input-line-height: $input-btn-line-height !default;
+
+$input-padding-y-sm: $input-btn-padding-y-sm !default;
+$input-padding-x-sm: $input-btn-padding-x-sm !default;
+$input-font-size-sm: $input-btn-font-size-sm !default;
+
+$input-padding-y-lg: $input-btn-padding-y-lg !default;
+$input-padding-x-lg: $input-btn-padding-x-lg !default;
+$input-font-size-lg: $input-btn-font-size-lg !default;
+
+$input-bg: $body-bg !default;
+$input-disabled-color: null !default;
+$input-disabled-bg: $body-secondary-bg !default;
+$input-disabled-border-color: null !default;
+
+$input-color: $body-color !default;
+$input-border-color: $border-color !default;
+$input-border-width: $input-btn-border-width !default;
+$input-box-shadow: $box-shadow-inset !default;
+
+$input-border-radius: $border-radius !default;
+$input-border-radius-sm: $border-radius-sm !default;
+$input-border-radius-lg: $border-radius-lg !default;
+
+$input-focus-bg: $input-bg !default;
+$input-focus-border-color: tint-color($component-active-bg, 50%) !default;
+$input-focus-color: $input-color !default;
+$input-focus-width: $input-btn-focus-width !default;
+$input-focus-box-shadow: $input-btn-focus-box-shadow !default;
+
+$input-placeholder-color: $body-secondary-color !default;
+$input-plaintext-color: $body-color !default;
+
+$input-height-border: calc(#{$input-border-width} * 2) !default; // stylelint-disable-line function-disallowed-list
+
+$input-height-inner: add($input-line-height * 1em, $input-padding-y * 2) !default;
+$input-height-inner-half: add($input-line-height * .5em, $input-padding-y) !default;
+$input-height-inner-quarter: add($input-line-height * .25em, $input-padding-y * .5) !default;
+
+$input-height: add($input-line-height * 1em, add($input-padding-y * 2, $input-height-border, false)) !default;
+$input-height-sm: add($input-line-height * 1em, add($input-padding-y-sm * 2, $input-height-border, false)) !default;
+$input-height-lg: add($input-line-height * 1em, add($input-padding-y-lg * 2, $input-height-border, false)) !default;
+
+$input-transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
+
+$form-color-width: 3rem !default;
+// scss-docs-end form-input-variables
+
+// scss-docs-start form-check-variables
+$form-check-input-width: 1em !default;
+$form-check-min-height: $font-size-base * $line-height-base !default;
+$form-check-padding-start: 0 !default;
+$form-check-margin-bottom: .125rem !default;
+$form-check-label-color: null !default;
+$form-check-label-cursor: pointer !default;
+$form-check-transition: null !default;
+
+$form-check-input-active-filter: brightness(90%) !default;
+
+$form-check-input-bg: $input-bg !default;
+$form-check-input-border: $border-width solid $border-color !default;
+$form-check-input-border-radius: .25em !default;
+$form-check-radio-border-radius: 50% !default;
+$form-check-input-focus-border: $input-focus-border-color !default;
+$form-check-input-focus-box-shadow: $focus-ring-box-shadow !default;
+
+$form-check-input-checked-color: $component-active-color !default;
+$form-check-input-checked-bg-color: $component-active-bg !default;
+$form-check-input-checked-border-color: $form-check-input-checked-bg-color !default;
+$form-check-input-checked-bg-image: url("data:image/svg+xml,") !default;
+$form-check-radio-checked-bg-image: url("data:image/svg+xml,") !default;
+
+$form-check-input-indeterminate-color: $component-active-color !default;
+$form-check-input-indeterminate-bg-color: $component-active-bg !default;
+$form-check-input-indeterminate-border-color: $form-check-input-indeterminate-bg-color !default;
+$form-check-input-indeterminate-bg-image: url("data:image/svg+xml,") !default;
+
+$form-check-input-disabled-opacity: .5 !default;
+$form-check-label-disabled-opacity: $form-check-input-disabled-opacity !default;
+$form-check-btn-check-disabled-opacity: $btn-disabled-opacity !default;
+
+$form-check-inline-margin-end: 1rem !default;
+// scss-docs-end form-check-variables
+
+// scss-docs-start form-switch-variables
+$form-switch-color: rgba($black, .25) !default;
+$form-switch-width: 2em !default;
+$form-switch-padding-start: $form-switch-width + .5em !default;
+$form-switch-bg-image: url("data:image/svg+xml,") !default;
+$form-switch-border-radius: $form-switch-width !default;
+$form-switch-transition: background-position .15s ease-in-out !default;
+
+$form-switch-focus-color: $input-focus-border-color !default;
+$form-switch-focus-bg-image: url("data:image/svg+xml,") !default;
+
+$form-switch-checked-color: $component-active-color !default;
+$form-switch-checked-bg-image: url("data:image/svg+xml,") !default;
+$form-switch-checked-bg-position: right center !default;
+// scss-docs-end form-switch-variables
+
+// scss-docs-start input-group-variables
+$input-group-addon-padding-y: $input-padding-y !default;
+$input-group-addon-padding-x: $input-padding-x !default;
+$input-group-addon-font-weight: $input-font-weight !default;
+$input-group-addon-color: $input-color !default;
+$input-group-addon-bg: $body-tertiary-bg !default;
+$input-group-addon-border-color: $input-border-color !default;
+// scss-docs-end input-group-variables
+
+// scss-docs-start form-select-variables
+$form-select-padding-y: $input-padding-y !default;
+$form-select-padding-x: $input-padding-x !default;
+$form-select-font-family: $input-font-family !default;
+$form-select-font-size: $input-font-size !default;
+$form-select-indicator-padding: $form-select-padding-x * 3 !default; // Extra padding for background-image
+$form-select-font-weight: $input-font-weight !default;
+$form-select-line-height: $input-line-height !default;
+$form-select-color: $input-color !default;
+$form-select-bg: $input-bg !default;
+$form-select-disabled-color: null !default;
+$form-select-disabled-bg: $input-disabled-bg !default;
+$form-select-disabled-border-color: $input-disabled-border-color !default;
+$form-select-bg-position: right $form-select-padding-x center !default;
+$form-select-bg-size: 16px 12px !default; // In pixels because image dimensions
+$form-select-indicator-color: $gray-800 !default;
+$form-select-indicator: url("data:image/svg+xml,") !default;
+
+$form-select-feedback-icon-padding-end: $form-select-padding-x * 2.5 + $form-select-indicator-padding !default;
+$form-select-feedback-icon-position: center right $form-select-indicator-padding !default;
+$form-select-feedback-icon-size: $input-height-inner-half $input-height-inner-half !default;
+
+$form-select-border-width: $input-border-width !default;
+$form-select-border-color: $input-border-color !default;
+$form-select-border-radius: $input-border-radius !default;
+$form-select-box-shadow: $box-shadow-inset !default;
+
+$form-select-focus-border-color: $input-focus-border-color !default;
+$form-select-focus-width: $input-focus-width !default;
+$form-select-focus-box-shadow: 0 0 0 $form-select-focus-width $input-btn-focus-color !default;
+
+$form-select-padding-y-sm: $input-padding-y-sm !default;
+$form-select-padding-x-sm: $input-padding-x-sm !default;
+$form-select-font-size-sm: $input-font-size-sm !default;
+$form-select-border-radius-sm: $input-border-radius-sm !default;
+
+$form-select-padding-y-lg: $input-padding-y-lg !default;
+$form-select-padding-x-lg: $input-padding-x-lg !default;
+$form-select-font-size-lg: $input-font-size-lg !default;
+$form-select-border-radius-lg: $input-border-radius-lg !default;
+
+$form-select-transition: $input-transition !default;
+// scss-docs-end form-select-variables
+
+// scss-docs-start form-range-variables
+$form-range-track-width: 100% !default;
+$form-range-track-height: .5rem !default;
+$form-range-track-cursor: pointer !default;
+$form-range-track-bg: $body-tertiary-bg !default;
+$form-range-track-border-radius: 1rem !default;
+$form-range-track-box-shadow: $box-shadow-inset !default;
+
+$form-range-thumb-width: 1rem !default;
+$form-range-thumb-height: $form-range-thumb-width !default;
+$form-range-thumb-bg: $component-active-bg !default;
+$form-range-thumb-border: 0 !default;
+$form-range-thumb-border-radius: 1rem !default;
+$form-range-thumb-box-shadow: 0 .1rem .25rem rgba($black, .1) !default;
+$form-range-thumb-focus-box-shadow: 0 0 0 1px $body-bg, $input-focus-box-shadow !default;
+$form-range-thumb-focus-box-shadow-width: $input-focus-width !default; // For focus box shadow issue in Edge
+$form-range-thumb-active-bg: tint-color($component-active-bg, 70%) !default;
+$form-range-thumb-disabled-bg: $body-secondary-color !default;
+$form-range-thumb-transition: background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
+// scss-docs-end form-range-variables
+
+// scss-docs-start form-file-variables
+$form-file-button-color: $input-color !default;
+$form-file-button-bg: $body-tertiary-bg !default;
+$form-file-button-hover-bg: $body-secondary-bg !default;
+// scss-docs-end form-file-variables
+
+// scss-docs-start form-floating-variables
+$form-floating-height: add(3.5rem, $input-height-border) !default;
+$form-floating-line-height: 1.25 !default;
+$form-floating-padding-x: $input-padding-x !default;
+$form-floating-padding-y: 1rem !default;
+$form-floating-input-padding-t: 1.625rem !default;
+$form-floating-input-padding-b: .625rem !default;
+$form-floating-label-height: 1.5em !default;
+$form-floating-label-opacity: .65 !default;
+$form-floating-label-transform: scale(.85) translateY(-.5rem) translateX(.15rem) !default;
+$form-floating-label-disabled-color: $gray-600 !default;
+$form-floating-transition: opacity .1s ease-in-out, transform .1s ease-in-out !default;
+// scss-docs-end form-floating-variables
+
+// Form validation
+
+// scss-docs-start form-feedback-variables
+$form-feedback-margin-top: $form-text-margin-top !default;
+$form-feedback-font-size: $form-text-font-size !default;
+$form-feedback-font-style: $form-text-font-style !default;
+$form-feedback-valid-color: $success !default;
+$form-feedback-invalid-color: $danger !default;
+
+$form-feedback-icon-valid-color: $form-feedback-valid-color !default;
+$form-feedback-icon-valid: url("data:image/svg+xml,") !default;
+$form-feedback-icon-invalid-color: $form-feedback-invalid-color !default;
+$form-feedback-icon-invalid: url("data:image/svg+xml,") !default;
+// scss-docs-end form-feedback-variables
+
+// scss-docs-start form-validation-colors
+$form-valid-color: $form-feedback-valid-color !default;
+$form-valid-border-color: $form-feedback-valid-color !default;
+$form-invalid-color: $form-feedback-invalid-color !default;
+$form-invalid-border-color: $form-feedback-invalid-color !default;
+// scss-docs-end form-validation-colors
+
+// scss-docs-start form-validation-states
+$form-validation-states: (
+ "valid": (
+ "color": $form-valid-color,
+ "icon": $form-feedback-icon-valid,
+ "tooltip-color": #fff,
+ "tooltip-bg-color": $success,
+ "focus-box-shadow": 0 0 $input-btn-focus-blur $input-focus-width rgba($success, $input-btn-focus-color-opacity),
+ "border-color": $form-valid-border-color,
+ ),
+ "invalid": (
+ "color": $form-invalid-color,
+ "icon": $form-feedback-icon-invalid,
+ "tooltip-color": #fff,
+ "tooltip-bg-color": $danger,
+ "focus-box-shadow": 0 0 $input-btn-focus-blur $input-focus-width rgba($danger, $input-btn-focus-color-opacity),
+ "border-color": $form-invalid-border-color,
+ )
+) !default;
+// scss-docs-end form-validation-states
+
+// Z-index master list
+//
+// Warning: Avoid customizing these values. They're used for a bird's eye view
+// of components dependent on the z-axis and are designed to all work together.
+
+// scss-docs-start zindex-stack
+$zindex-dropdown: 1000 !default;
+$zindex-sticky: 1020 !default;
+$zindex-fixed: 1030 !default;
+$zindex-offcanvas-backdrop: 1040 !default;
+$zindex-offcanvas: 1045 !default;
+$zindex-modal-backdrop: 1050 !default;
+$zindex-modal: 1055 !default;
+$zindex-popover: 1070 !default;
+$zindex-tooltip: 1080 !default;
+$zindex-toast: 1090 !default;
+// scss-docs-end zindex-stack
+
+// scss-docs-start zindex-levels-map
+$zindex-levels: (
+ n1: -1,
+ 0: 0,
+ 1: 1,
+ 2: 2,
+ 3: 3
+) !default;
+// scss-docs-end zindex-levels-map
+
+
+// Navs
+
+// scss-docs-start nav-variables
+$nav-link-padding-y: ($font-size-base * 0.5) !default;
+$nav-link-padding-x: $font-size-base !default;
+$nav-link-font-size: null !default;
+$nav-link-font-weight: null !default;
+$nav-link-color: $link-color !default;
+$nav-link-hover-color: $link-hover-color !default;
+$nav-link-transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out !default;
+$nav-link-disabled-color: $body-secondary-color !default;
+$nav-link-focus-box-shadow: $focus-ring-box-shadow !default;
+
+$nav-tabs-border-color: $border-color !default;
+$nav-tabs-border-width: $border-width !default;
+$nav-tabs-border-radius: $border-radius !default;
+$nav-tabs-link-hover-border-color: $body-secondary-bg $body-secondary-bg $nav-tabs-border-color !default;
+$nav-tabs-link-active-color: $body-emphasis-color !default;
+$nav-tabs-link-active-bg: $body-bg !default;
+$nav-tabs-link-active-border-color: $border-color $border-color $nav-tabs-link-active-bg !default;
+
+$nav-pills-border-radius: $border-radius !default;
+$nav-pills-link-active-bg: $component-active-bg !default;
+$nav-pills-link-active-color: color-contrast($nav-pills-link-active-bg, $component-active-color) !default;
+
+$nav-underline-gap: 1rem !default;
+$nav-underline-border-width: .125rem !default;
+$nav-underline-link-active-color: $body-emphasis-color !default;
+// scss-docs-end nav-variables
+
+
+// Navbar
+
+// scss-docs-start navbar-variables
+$navbar-padding-y: $spacer * .5 !default;
+$navbar-padding-x: null !default;
+
+$navbar-nav-link-padding-x: .5rem !default;
+
+$navbar-brand-font-size: $font-size-lg !default;
+// Compute the navbar-brand padding-y so the navbar-brand will have the same height as navbar-text and nav-link
+$nav-link-height: $font-size-base * $line-height-base + $nav-link-padding-y * 2 !default;
+$navbar-brand-height: $navbar-brand-font-size * $line-height-base !default;
+$navbar-brand-padding-y: ($nav-link-height - $navbar-brand-height) * .5 !default;
+$navbar-brand-margin-end: 1rem !default;
+
+$navbar-toggler-padding-y: .25rem !default;
+$navbar-toggler-padding-x: .75rem !default;
+$navbar-toggler-font-size: $font-size-lg !default;
+$navbar-toggler-border-radius: $btn-border-radius !default;
+$navbar-toggler-focus-width: $btn-focus-width !default;
+$navbar-toggler-transition: box-shadow .15s ease-in-out !default;
+
+$navbar-bg: null !default; // Background color for any navbarPage()
+$navbar-light-bg: if($navbar-bg, $navbar-bg, var(--bs-light)) !default; // Background color for navbarPage(inverse = FALSE)
+$navbar-dark-bg: if($navbar-bg, $navbar-bg, var(--bs-dark)) !default; // Background color for navbarPage(inverse = TRUE)
+
+$navbar-light-contrast: if(
+ type-of($navbar-light-bg) == color,
+ color-contrast($navbar-light-bg),
+ $body-emphasis-color
+) !default; // Deepest contrasting color for navbarPage(inverse = FALSE).
+$navbar-dark-contrast: if(
+ type-of($navbar-dark-bg) == color,
+ color-contrast($navbar-dark-bg),
+ $body-emphasis-color
+) !default; // Deepest contrasting color for navbarPage(inverse = TRUE).
+
+$navbar-light-color: rgba($navbar-light-contrast, .65) !default;
+$navbar-light-hover-color: rgba($navbar-light-contrast, .8) !default;
+$navbar-light-active-color: rgba($navbar-light-contrast, 1) !default;
+$navbar-light-disabled-color: rgba($navbar-light-contrast, .3) !default;
+$navbar-light-icon-color: rgba(if(type-of($navbar-light-contrast)==color, $navbar-light-contrast, $body-color), .75) !default;
+$navbar-light-toggler-icon-bg: url("data:image/svg+xml,") !default;
+$navbar-light-toggler-border-color: rgba($navbar-light-contrast, .15) !default;
+$navbar-light-brand-color: $navbar-light-active-color !default;
+$navbar-light-brand-hover-color: $navbar-light-active-color !default;
+// scss-docs-end navbar-variables
+
+// scss-docs-start navbar-dark-variables
+$navbar-dark-color: rgba($navbar-dark-contrast, .55) !default;
+$navbar-dark-hover-color: rgba($navbar-dark-contrast, .75) !default;
+$navbar-dark-active-color: rgba($navbar-dark-contrast, 1) !default;
+$navbar-dark-disabled-color: rgba($navbar-dark-contrast, .25) !default;
+$navbar-dark-icon-color: rgba(if(type-of($navbar-dark-contrast)==color, $navbar-dark-contrast, $white), .75) !default;
+$navbar-dark-toggler-icon-bg: url("data:image/svg+xml,") !default;
+$navbar-dark-toggler-border-color: rgba($navbar-dark-contrast, .1) !default;
+$navbar-dark-brand-color: $navbar-dark-active-color !default;
+$navbar-dark-brand-hover-color: $navbar-dark-active-color !default;
+// scss-docs-end navbar-dark-variables
+
+
+// Dropdowns
+//
+// Dropdown menu container and contents.
+
+// scss-docs-start dropdown-variables
+$dropdown-min-width: 10rem !default;
+$dropdown-padding-x: 0 !default;
+$dropdown-padding-y: .5rem !default;
+$dropdown-spacer: .125rem !default;
+$dropdown-font-size: $font-size-base !default;
+$dropdown-color: $body-color !default;
+$dropdown-bg: $body-bg !default;
+$dropdown-border-color: $border-color-translucent !default;
+$dropdown-border-radius: $border-radius !default;
+$dropdown-border-width: $border-width !default;
+$dropdown-inner-border-radius: calc(#{$dropdown-border-radius} - #{$dropdown-border-width}) !default; // stylelint-disable-line function-disallowed-list
+$dropdown-divider-bg: $dropdown-border-color !default;
+$dropdown-divider-margin-y: $spacer * .5 !default;
+$dropdown-box-shadow: $box-shadow !default;
+
+$dropdown-link-color: $body-color !default;
+$dropdown-link-hover-color: $dropdown-link-color !default;
+$dropdown-link-hover-bg: $body-tertiary-bg !default;
+
+$dropdown-link-active-bg: $component-active-bg !default;
+$dropdown-link-active-color: color-contrast($dropdown-link-active-bg, $component-active-color) !default;
+
+$dropdown-link-disabled-color: $body-tertiary-color !default;
+
+$dropdown-item-padding-y: $spacer * .25 !default;
+$dropdown-item-padding-x: $spacer !default;
+
+$dropdown-header-color: $gray-600 !default;
+$dropdown-header-padding-x: $dropdown-item-padding-x !default;
+$dropdown-header-padding-y: $dropdown-padding-y !default;
+// fusv-disable
+$dropdown-header-padding: $dropdown-header-padding-y $dropdown-header-padding-x !default; // Deprecated in v5.2.0
+// fusv-enable
+// scss-docs-end dropdown-variables
+
+// scss-docs-start dropdown-dark-variables
+$dropdown-dark-color: $gray-300 !default;
+$dropdown-dark-bg: $gray-800 !default;
+$dropdown-dark-border-color: $dropdown-border-color !default;
+$dropdown-dark-divider-bg: $dropdown-divider-bg !default;
+$dropdown-dark-box-shadow: null !default;
+$dropdown-dark-link-color: $dropdown-dark-color !default;
+$dropdown-dark-link-hover-color: $white !default;
+$dropdown-dark-link-hover-bg: rgba($white, .15) !default;
+$dropdown-dark-link-active-color: $dropdown-link-active-color !default;
+$dropdown-dark-link-active-bg: $dropdown-link-active-bg !default;
+$dropdown-dark-link-disabled-color: $gray-500 !default;
+$dropdown-dark-header-color: $gray-500 !default;
+// scss-docs-end dropdown-dark-variables
+
+
+// Pagination
+
+// scss-docs-start pagination-variables
+$pagination-padding-y: .375rem !default;
+$pagination-padding-x: .75rem !default;
+$pagination-padding-y-sm: .25rem !default;
+$pagination-padding-x-sm: .5rem !default;
+$pagination-padding-y-lg: .75rem !default;
+$pagination-padding-x-lg: 1.5rem !default;
+
+$pagination-font-size: $font-size-base !default;
+
+$pagination-color: $link-color !default;
+$pagination-bg: $body-bg !default;
+$pagination-border-radius: $border-radius !default;
+$pagination-border-width: $border-width !default;
+$pagination-margin-start: calc(#{$pagination-border-width} * -1) !default; // stylelint-disable-line function-disallowed-list
+$pagination-border-color: $border-color !default;
+
+$pagination-focus-color: $link-hover-color !default;
+$pagination-focus-bg: $body-secondary-bg !default;
+$pagination-focus-box-shadow: $focus-ring-box-shadow !default;
+$pagination-focus-outline: 0 !default;
+
+$pagination-hover-color: $link-hover-color !default;
+$pagination-hover-bg: $body-tertiary-bg !default;
+$pagination-hover-border-color: $border-color !default; // Todo in v6: remove this?
+
+$pagination-active-color: $component-active-color !default;
+$pagination-active-bg: $component-active-bg !default;
+$pagination-active-border-color: $component-active-bg !default;
+
+$pagination-disabled-color: $body-secondary-color !default;
+$pagination-disabled-bg: $body-secondary-bg !default;
+$pagination-disabled-border-color: $border-color !default;
+
+$pagination-transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
+
+$pagination-border-radius-sm: $border-radius-sm !default;
+$pagination-border-radius-lg: $border-radius-lg !default;
+// scss-docs-end pagination-variables
+
+
+// Placeholders
+
+// scss-docs-start placeholders
+$placeholder-opacity-max: .5 !default;
+$placeholder-opacity-min: .2 !default;
+// scss-docs-end placeholders
+
+// Cards
+
+// scss-docs-start card-variables
+$card-spacer-y: $spacer !default;
+$card-spacer-x: $spacer !default;
+$card-title-spacer-y: $spacer * .5 !default;
+$card-title-color: null !default;
+$card-subtitle-color: null !default;
+$card-border-width: $border-width !default;
+$card-border-color: $border-color-translucent !default;
+$card-border-radius: $border-radius !default;
+$card-box-shadow: null !default;
+$card-inner-border-radius: subtract($card-border-radius, $card-border-width) !default;
+$card-cap-padding-y: $card-spacer-y * .5 !default;
+$card-cap-padding-x: $card-spacer-x !default;
+$card-cap-bg: rgba($body-color, .03) !default;
+$card-cap-color: null !default;
+$card-height: null !default;
+$card-color: null !default;
+$card-bg: $body-bg !default;
+$card-img-overlay-padding: $spacer !default;
+$card-group-margin: $grid-gutter-width * .5 !default;
+// scss-docs-end card-variables
+
+// Accordion
+
+// scss-docs-start accordion-variables
+$accordion-padding-y: 1rem !default;
+$accordion-padding-x: 1.25rem !default;
+$accordion-color: $body-color !default;
+$accordion-bg: $body-bg !default;
+$accordion-border-width: $border-width !default;
+$accordion-border-color: $border-color !default;
+$accordion-border-radius: $border-radius !default;
+$accordion-inner-border-radius: subtract($accordion-border-radius, $accordion-border-width) !default;
+
+$accordion-body-padding-y: $accordion-padding-y !default;
+$accordion-body-padding-x: $accordion-padding-x !default;
+
+$accordion-button-padding-y: $accordion-padding-y !default;
+$accordion-button-padding-x: $accordion-padding-x !default;
+$accordion-button-color: $body-color !default;
+$accordion-button-bg: $accordion-bg !default;
+$accordion-transition: $btn-transition, border-radius .15s ease !default;
+$accordion-button-active-bg: $primary-bg-subtle !default;
+$accordion-button-active-color: $primary-text-emphasis !default;
+
+$accordion-button-focus-border-color: $input-focus-border-color !default;
+$accordion-button-focus-box-shadow: $btn-focus-box-shadow !default;
+
+$accordion-icon-width: 1.25rem !default;
+$accordion-icon-color: $body-color !default;
+$accordion-icon-active-color: $primary-text-emphasis !default;
+$accordion-icon-transition: transform .2s ease-in-out !default;
+$accordion-icon-transform: rotate(-180deg) !default;
+
+$accordion-button-icon: url("data:image/svg+xml,") !default;
+$accordion-button-active-icon: url("data:image/svg+xml,") !default;
+// scss-docs-end accordion-variables
+
+// Tooltips
+
+// scss-docs-start tooltip-variables
+$tooltip-font-size: $font-size-sm !default;
+$tooltip-max-width: 200px !default;
+$tooltip-color: $body-bg !default;
+$tooltip-bg: $body-emphasis-color !default;
+$tooltip-border-radius: $border-radius !default;
+$tooltip-opacity: .9 !default;
+$tooltip-padding-y: $spacer * .25 !default;
+$tooltip-padding-x: $spacer * .5 !default;
+$tooltip-margin: null !default; // TODO: remove this in v6
+
+$tooltip-arrow-width: .8rem !default;
+$tooltip-arrow-height: .4rem !default;
+// fusv-disable
+$tooltip-arrow-color: null !default; // Deprecated in Bootstrap 5.2.0 for CSS variables
+// fusv-enable
+// scss-docs-end tooltip-variables
+
+// Form tooltips must come after regular tooltips
+// scss-docs-start tooltip-feedback-variables
+$form-feedback-tooltip-padding-y: $tooltip-padding-y !default;
+$form-feedback-tooltip-padding-x: $tooltip-padding-x !default;
+$form-feedback-tooltip-font-size: $tooltip-font-size !default;
+$form-feedback-tooltip-line-height: null !default;
+$form-feedback-tooltip-opacity: $tooltip-opacity !default;
+$form-feedback-tooltip-border-radius: $tooltip-border-radius !default;
+// scss-docs-end tooltip-feedback-variables
+
+
+// Popovers
+
+// scss-docs-start popover-variables
+$popover-font-size: $font-size-sm !default;
+$popover-bg: $body-bg !default;
+$popover-max-width: 276px !default;
+$popover-border-width: $border-width !default;
+$popover-border-color: $border-color-translucent !default;
+$popover-border-radius: $border-radius-lg !default;
+$popover-inner-border-radius: calc(#{$popover-border-radius} - #{$popover-border-width}) !default; // stylelint-disable-line function-disallowed-list
+$popover-box-shadow: $box-shadow !default;
+
+$popover-header-font-size: $font-size-base !default;
+$popover-header-bg: $body-secondary-bg !default;
+$popover-header-color: $headings-color !default;
+$popover-header-padding-y: .5rem !default;
+$popover-header-padding-x: $spacer !default;
+
+$popover-body-color: $body-color !default;
+$popover-body-padding-y: $spacer !default;
+$popover-body-padding-x: $spacer !default;
+
+$popover-arrow-width: 1rem !default;
+$popover-arrow-height: .5rem !default;
+// scss-docs-end popover-variables
+
+// fusv-disable
+// Deprecated in Bootstrap 5.2.0 for CSS variables
+$popover-arrow-color: $popover-bg !default;
+$popover-arrow-outer-color: $border-color-translucent !default;
+// fusv-enable
+
+
+// Toasts
+
+// scss-docs-start toast-variables
+$toast-max-width: 350px !default;
+$toast-padding-x: .75rem !default;
+$toast-padding-y: .5rem !default;
+$toast-font-size: .875rem !default;
+$toast-color: null !default;
+$toast-background-color: rgba($body-bg, .85) !default;
+$toast-border-width: $border-width !default;
+$toast-border-color: $border-color-translucent !default;
+$toast-border-radius: $border-radius !default;
+$toast-box-shadow: $box-shadow !default;
+$toast-spacing: $container-padding-x !default;
+
+$toast-header-color: $body-secondary-color !default;
+$toast-header-background-color: rgba($body-bg, .85) !default;
+$toast-header-border-color: $toast-border-color !default;
+// scss-docs-end toast-variables
+
+
+// Badges
+
+// scss-docs-start badge-variables
+$badge-font-size: .75em !default;
+$badge-font-weight: $font-weight-bold !default;
+$badge-color: $white !default;
+$badge-padding-y: .35em !default;
+$badge-padding-x: .65em !default;
+$badge-border-radius: $border-radius !default;
+// scss-docs-end badge-variables
+
+
+// Modals
+
+// scss-docs-start modal-variables
+$modal-inner-padding: $spacer !default;
+
+$modal-footer-margin-between: .5rem !default;
+
+$modal-dialog-margin: .5rem !default;
+$modal-dialog-margin-y-sm-up: 1.75rem !default;
+
+$modal-title-line-height: $line-height-base !default;
+
+$modal-content-color: null !default;
+$modal-content-bg: $body-bg !default;
+$modal-content-border-color: $border-color-translucent !default;
+$modal-content-border-width: $border-width !default;
+$modal-content-border-radius: $border-radius-lg !default;
+$modal-content-inner-border-radius: subtract($modal-content-border-radius, $modal-content-border-width) !default;
+$modal-content-box-shadow-xs: $box-shadow-sm !default;
+$modal-content-box-shadow-sm-up: $box-shadow !default;
+
+$modal-backdrop-bg: $black !default;
+$modal-backdrop-opacity: .5 !default;
+
+$modal-header-border-color: $border-color !default;
+$modal-header-border-width: $modal-content-border-width !default;
+$modal-header-padding-y: $modal-inner-padding !default;
+$modal-header-padding-x: $modal-inner-padding !default;
+$modal-header-padding: $modal-header-padding-y $modal-header-padding-x !default; // Keep this for backwards compatibility
+
+$modal-footer-bg: null !default;
+$modal-footer-border-color: $modal-header-border-color !default;
+$modal-footer-border-width: $modal-header-border-width !default;
+
+$modal-sm: 300px !default;
+$modal-md: 500px !default;
+$modal-lg: 800px !default;
+$modal-xl: 1140px !default;
+
+$modal-fade-transform: translate(0, -50px) !default;
+$modal-show-transform: none !default;
+$modal-transition: transform .3s ease-out !default;
+$modal-scale-transform: scale(1.02) !default;
+// scss-docs-end modal-variables
+
+
+// Alerts
+//
+// Define alert colors, border radius, and padding.
+
+// scss-docs-start alert-variables
+$alert-padding-y: $spacer !default;
+$alert-padding-x: $spacer !default;
+$alert-margin-bottom: 1rem !default;
+$alert-border-radius: $border-radius !default;
+$alert-link-font-weight: $font-weight-bold !default;
+$alert-border-width: $border-width !default;
+$alert-dismissible-padding-r: $alert-padding-x * 3 !default; // 3x covers width of x plus default padding on either side
+// scss-docs-end alert-variables
+
+// fusv-disable
+$alert-bg-scale: -80% !default; // Deprecated in v5.2.0, to be removed in v6
+$alert-border-scale: -70% !default; // Deprecated in v5.2.0, to be removed in v6
+$alert-color-scale: 40% !default; // Deprecated in v5.2.0, to be removed in v6
+// fusv-enable
+
+// Progress bars
+
+// scss-docs-start progress-variables
+$progress-height: 1rem !default;
+$progress-font-size: $font-size-base * .75 !default;
+$progress-bg: $body-secondary-bg !default;
+$progress-border-radius: $border-radius !default;
+$progress-box-shadow: $box-shadow-inset !default;
+$progress-bar-color: $white !default;
+$progress-bar-bg: $primary !default;
+$progress-bar-animation-timing: 1s linear infinite !default;
+$progress-bar-transition: width .6s ease !default;
+// scss-docs-end progress-variables
+
+
+// List group
+
+// scss-docs-start list-group-variables
+$list-group-color: $body-color !default;
+$list-group-bg: $body-bg !default;
+$list-group-border-color: $border-color !default;
+$list-group-border-width: $border-width !default;
+$list-group-border-radius: $border-radius !default;
+
+$list-group-item-padding-y: $spacer * .5 !default;
+$list-group-item-padding-x: $spacer !default;
+// fusv-disable
+$list-group-item-bg-scale: -80% !default; // Deprecated in v5.3.0
+$list-group-item-color-scale: 40% !default; // Deprecated in v5.3.0
+// fusv-enable
+
+$list-group-hover-bg: $body-tertiary-bg !default;
+$list-group-active-bg: $component-active-bg !default;
+$list-group-active-color: color-contrast($list-group-active-bg, $component-active-color) !default;
+$list-group-active-border-color: $list-group-active-bg !default;
+
+$list-group-disabled-color: $body-secondary-color !default;
+$list-group-disabled-bg: $list-group-bg !default;
+
+$list-group-action-color: $body-secondary-color !default;
+$list-group-action-hover-color: $body-emphasis-color !default;
+
+$list-group-action-active-color: $body-color !default;
+$list-group-action-active-bg: $body-secondary-bg !default;
+// scss-docs-end list-group-variables
+
+
+// Image thumbnails
+
+// scss-docs-start thumbnail-variables
+$thumbnail-padding: .25rem !default;
+$thumbnail-bg: $body-bg !default;
+$thumbnail-border-width: $border-width !default;
+$thumbnail-border-color: $border-color !default;
+$thumbnail-border-radius: $border-radius !default;
+$thumbnail-box-shadow: $box-shadow-sm !default;
+// scss-docs-end thumbnail-variables
+
+
+// Figures
+
+// scss-docs-start figure-variables
+$figure-caption-font-size: $small-font-size !default;
+$figure-caption-color: $body-secondary-color !default;
+// scss-docs-end figure-variables
+
+
+// Breadcrumbs
+
+// scss-docs-start breadcrumb-variables
+$breadcrumb-font-size: null !default;
+$breadcrumb-padding-y: 0 !default;
+$breadcrumb-padding-x: 0 !default;
+$breadcrumb-item-padding-x: .5rem !default;
+$breadcrumb-margin-bottom: 1rem !default;
+$breadcrumb-bg: null !default;
+$breadcrumb-divider-color: $body-secondary-color !default;
+$breadcrumb-active-color: $body-secondary-color !default;
+$breadcrumb-divider: quote("/") !default;
+$breadcrumb-divider-flipped: $breadcrumb-divider !default;
+$breadcrumb-border-radius: null !default;
+// scss-docs-end breadcrumb-variables
+
+// Carousel
+
+// scss-docs-start carousel-variables
+$carousel-control-color: $white !default;
+$carousel-control-width: 15% !default;
+$carousel-control-opacity: .5 !default;
+$carousel-control-hover-opacity: .9 !default;
+$carousel-control-transition: opacity .15s ease !default;
+
+$carousel-indicator-width: 30px !default;
+$carousel-indicator-height: 3px !default;
+$carousel-indicator-hit-area-height: 10px !default;
+$carousel-indicator-spacer: 3px !default;
+$carousel-indicator-opacity: .5 !default;
+$carousel-indicator-active-bg: $white !default;
+$carousel-indicator-active-opacity: 1 !default;
+$carousel-indicator-transition: opacity .6s ease !default;
+
+$carousel-caption-width: 70% !default;
+$carousel-caption-color: $white !default;
+$carousel-caption-padding-y: 1.25rem !default;
+$carousel-caption-spacer: 1.25rem !default;
+
+$carousel-control-icon-width: 2rem !default;
+
+$carousel-control-prev-icon-bg: url("data:image/svg+xml,") !default;
+$carousel-control-next-icon-bg: url("data:image/svg+xml,") !default;
+
+$carousel-transition-duration: .6s !default;
+$carousel-transition: transform $carousel-transition-duration ease-in-out !default; // Define transform transition first if using multiple transitions (e.g., `transform 2s ease, opacity .5s ease-out`)
+// scss-docs-end carousel-variables
+
+// scss-docs-start carousel-dark-variables
+$carousel-dark-indicator-active-bg: $black !default;
+$carousel-dark-caption-color: $black !default;
+$carousel-dark-control-icon-filter: invert(1) grayscale(100) !default;
+// scss-docs-end carousel-dark-variables
+
+
+// Spinners
+
+// scss-docs-start spinner-variables
+$spinner-width: 2rem !default;
+$spinner-height: $spinner-width !default;
+$spinner-vertical-align: -.125em !default;
+$spinner-border-width: .25em !default;
+$spinner-animation-speed: .75s !default;
+
+$spinner-width-sm: 1rem !default;
+$spinner-height-sm: $spinner-width-sm !default;
+$spinner-border-width-sm: .2em !default;
+// scss-docs-end spinner-variables
+
+
+// Close
+
+// scss-docs-start close-variables
+$btn-close-width: 1em !default;
+$btn-close-height: $btn-close-width !default;
+$btn-close-padding-x: .25em !default;
+$btn-close-padding-y: $btn-close-padding-x !default;
+$btn-close-color: $black !default;
+$btn-close-bg: url("data:image/svg+xml,") !default;
+$btn-close-focus-shadow: $focus-ring-box-shadow !default;
+$btn-close-opacity: .5 !default;
+$btn-close-hover-opacity: .75 !default;
+$btn-close-focus-opacity: 1 !default;
+$btn-close-disabled-opacity: .25 !default;
+$btn-close-white-filter: invert(1) grayscale(100%) brightness(200%) !default;
+// scss-docs-end close-variables
+
+
+// Offcanvas
+
+// scss-docs-start offcanvas-variables
+$offcanvas-padding-y: $modal-inner-padding !default;
+$offcanvas-padding-x: $modal-inner-padding !default;
+$offcanvas-horizontal-width: 400px !default;
+$offcanvas-vertical-height: 30vh !default;
+$offcanvas-transition-duration: .3s !default;
+$offcanvas-border-color: $modal-content-border-color !default;
+$offcanvas-border-width: $modal-content-border-width !default;
+$offcanvas-title-line-height: $modal-title-line-height !default;
+$offcanvas-bg-color: $body-bg !default;
+$offcanvas-color: $body-color !default;
+$offcanvas-box-shadow: $modal-content-box-shadow-xs !default;
+$offcanvas-backdrop-bg: $modal-backdrop-bg !default;
+$offcanvas-backdrop-opacity: $modal-backdrop-opacity !default;
+// scss-docs-end offcanvas-variables
+
+// Code
+
+$code-font-size: $small-font-size !default;
+// Amount intentionally matches mixture amount of shiny::inputPanel()
+// https://github.com/rstudio/shiny/blob/4eeb4a1/inst/www/shared/shiny_scss/bootstrap.scss#L25
+$code-bg: $body-emphasis-color !default;
+$code-color: black !default;
+$code-color-dark: white !default;
+
+$kbd-padding-y: .1875rem !default;
+$kbd-padding-x: .375rem !default;
+$kbd-font-size: $code-font-size !default;
+$kbd-color: $body-bg !default;
+$kbd-bg: $body-color !default;
+$nested-kbd-font-weight: null !default; // Deprecated in v5.2.0, removing in v6
+
+$pre-bg: $code-bg !default;
+$pre-color: $body-emphasis-color !default;
+$pre-line-height: $line-height-base !default;
+$font-family-base: "Source Sans Pro";
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+// quarto-scss-analysis-annotation { "origin": "'mixins' section from format" }
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+// Toggles
+//
+// Used in conjunction with global variables to enable certain theme features.
+
+// Vendor
+@import "vendor/rfs";
+
+// Deprecate
+@import "mixins/deprecate";
+
+// Helpers
+@import "mixins/breakpoints";
+@import "mixins/color-mode";
+@import "mixins/color-scheme";
+@import "mixins/image";
+@import "mixins/resize";
+@import "mixins/visually-hidden";
+@import "mixins/reset-text";
+@import "mixins/text-truncate";
+
+// Utilities
+@import "mixins/utilities";
+
+// Components
+@import "mixins/backdrop";
+@import "mixins/buttons";
+@import "mixins/caret";
+@import "mixins/pagination";
+@import "mixins/lists";
+@import "mixins/forms";
+@import "mixins/table-variants";
+
+// Skins
+@import "mixins/border-radius";
+@import "mixins/box-shadow";
+@import "mixins/gradients";
+@import "mixins/transition";
+
+// Layout
+@import "mixins/clearfix";
+@import "mixins/container";
+@import "mixins/grid";
+
+@mixin bslib-breakpoints-css-vars(
+ $breakpoint-var,
+ $breakpoints,
+ $allow-cascade: false
+) {
+ @each $breakpoint in $breakpoints {
+ @if not $allow-cascade {
+ --#{$breakpoint-var}--#{$breakpoint}: unset;
+ }
+
+ @include media-breakpoint-up(#{$breakpoint}) {
+ &.#{$breakpoint-var}--#{$breakpoint} {
+ --#{$breakpoint-var}: var(--#{$breakpoint-var}--#{$breakpoint});
+ }
+ }
+ }
+}
+
+
+// Intentionally replicates Bootstrap's %heading placeholder
+// https://github.com/twbs/bootstrap/blob/2c7f88/scss/_reboot.scss#L83-L96
+@mixin bootstrap-heading-font-and-spacing($font-size) {
+ @include font-size($font-size);
+ margin-top: 0; // 1
+ margin-bottom: $headings-margin-bottom;
+ font-family: $headings-font-family;
+ font-style: $headings-font-style;
+ font-weight: $headings-font-weight;
+ line-height: $headings-line-height;
+
+}
+
+@mixin bootstrap-heading($font-size) {
+ @include bootstrap-heading-font-and-spacing($font-size);
+ color: var(--#{$prefix}heading-color);
+}
+
+
+// quarto-scss-analysis-annotation { "origin": "'mixins' section from Quarto" }
+
+
+
+
+
+
+
+
+
+@mixin shiny-date-range {
+ .input-daterange {
+ width: inherit;
+ input[type="text"] {
+ height: 2.4em;
+ width: 10em;
+ }
+
+ .input-group-addon {
+ height: auto;
+ padding: 0;
+ margin-left: -5px !important;
+ margin-right: -5px;
+
+ .input-group-text {
+ padding-top: 0;
+ padding-bottom: 0;
+ height: 100%;
+ }
+ }
+ }
+}
+
+@mixin shiny-text-input {
+ input[type="text"] {
+ line-height: 1;
+ width: inherit;
+ }
+}
+
+@mixin shiny-input-checkboxgroup {
+ .shiny-input-checkboxgroup {
+ > label {
+ margin-top: $dashboard-card-toolbar-top-margin;
+ }
+ > .shiny-options-group {
+ margin-top: 0;
+ align-items: baseline;
+ }
+ }
+}
+
+@mixin shiny-input-radiogroup {
+ .shiny-input-radiogroup {
+ > label {
+ margin-top: $dashboard-card-toolbar-top-margin;
+ }
+ }
+
+ .shiny-input-radiogroup > .shiny-options-group {
+ align-items: baseline;
+ margin-top: 0;
+ > .radio {
+ margin-right: 0.3em;
+ }
+ }
+}
+
+@mixin shiny-input-checkbox {
+ div.checkbox {
+ margin-bottom: 0px;
+ }
+
+ > .checkbox:first-child {
+ margin-top: $dashboard-card-toolbar-top-margin;
+ }
+}
+
+@mixin shiny-input-slider {
+ span.irs.irs--shiny {
+ width: 10em;
+ .irs-line {
+ top: 9px;
+ }
+ .irs-min,
+ .irs-max,
+ .irs-from,
+ .irs-to,
+ .irs-single {
+ top: 20px;
+ }
+ .irs-bar {
+ top: 8px;
+ }
+ .irs-handle {
+ top: 0px;
+ }
+ }
+}
+
+@mixin shiny-input-select {
+ .form-select {
+ padding-top: 0.2em;
+ padding-bottom: 0.2em;
+ }
+ .shiny-input-select {
+ min-width: 6em;
+ }
+}
+
+@mixin shiny-input-container {
+ .shiny-input-container {
+ padding-bottom: 0;
+ margin-bottom: 0;
+ > * {
+ flex-shrink: 0;
+ flex-grow: 0;
+ }
+ }
+
+ .form-group.shiny-input-container:not([role="group"]) > label {
+ margin-bottom: 0;
+ }
+
+ .shiny-input-container.no-baseline {
+ align-items: start;
+ padding-top: $dashboard-card-toolbar-top-margin;
+ }
+
+ .shiny-input-container {
+ display: flex;
+ align-items: baseline;
+
+ label {
+ padding-right: 0.4em;
+ }
+
+ .bslib-input-switch {
+ margin-top: $dashboard-card-toolbar-top-margin;
+ }
+ }
+}
+
+@mixin shiny-toolbar-customizations {
+ @include toolbar-layout();
+ @include shiny-input-container();
+ @include shiny-text-input();
+ @include shiny-date-range();
+ @include shiny-input-slider();
+ @include shiny-input-checkboxgroup();
+ @include shiny-input-radiogroup();
+ @include shiny-input-select();
+ @include shiny-input-checkbox();
+}
+
+@mixin toolbar-layout {
+ .cell-output-display {
+ display: flex;
+ }
+
+ .shiny-input-container {
+ padding-bottom: 0.5em;
+ margin-bottom: 0.5em;
+ width: inherit;
+
+ > .checkbox:first-child {
+ margin-top: $dashboard-card-toolbar-top-margin;
+ }
+ }
+
+ > *:last-child {
+ margin-right: 0;
+ }
+
+ > * > * {
+ margin-right: 1em;
+ align-items: baseline;
+ > a {
+ text-decoration: none;
+ margin-top: auto;
+ margin-bottom: auto;
+ }
+ }
+}
+
+@mixin itables {
+ .itables {
+ @include media-breakpoint-down(md) {
+ div.dataTables_wrapper div.dataTables_length,
+ div.dataTables_wrapper div.dataTables_info,
+ div.dataTables_wrapper div.dataTables_paginate {
+ text-align: initial;
+ }
+
+ div.dataTables_wrapper div.dataTables_filter {
+ text-align: right;
+ }
+
+ div.dataTables_wrapper div.dataTables_paginate ul.pagination {
+ justify-content: initial;
+ }
+ }
+
+ .dataTables_wrapper {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: space-between;
+ align-items: center;
+ padding-top: 0;
+ table {
+ flex-shrink: 0;
+ }
+
+ // The buttons control (download/copy)
+ .dt-buttons {
+ margin-bottom: 0.5em;
+ margin-left: auto;
+
+ width: fit-content;
+
+ float: right;
+ &.btn-group {
+ background: $body-bg;
+ border: none;
+ }
+
+ .btn-secondary {
+ background-color: $body-bg;
+ background-image: none;
+ border: solid $border-color $border-width;
+ padding: 0.2em 0.7em;
+ }
+
+ .btn span {
+ font-size: 0.8em;
+ color: $body-color;
+ }
+ }
+
+ // The number of items (info) text
+ .dataTables_info {
+ margin-left: 0.5em;
+ margin-bottom: 0.5em;
+
+ @include media-breakpoint-up(md) {
+ font-size: 0.875em;
+ }
+ @include media-breakpoint-down(md) {
+ font-size: 0.8em;
+ }
+
+ padding-top: 0;
+ }
+
+ // The table filter / search
+ .dataTables_filter {
+ margin-bottom: 0.5em;
+ font-size: 0.875em;
+ input[type="search"] {
+ padding: 1px 5px 1px 5px;
+ font-size: 0.875em;
+ }
+ }
+
+ // The pagination size selector
+ .dataTables_length {
+ flex-basis: 1 1 50%;
+ margin-bottom: 0.5em;
+ font-size: 0.875em;
+ select {
+ padding: 0.4em 3em 0.4em 0.5em;
+ font-size: 0.875em;
+ margin-left: 0.2em;
+ margin-right: 0.2em;
+ }
+ }
+
+ // The pagination control
+ .dataTables_paginate {
+ @include media-breakpoint-up(md) {
+ margin-left: auto;
+ }
+ flex-shrink: 0;
+
+ ul.pagination .paginate_button .page-link {
+ font-size: 0.8em;
+ }
+ }
+ }
+ }
+}
+
+@mixin observable-toolbar-inputs {
+ form {
+ width: fit-content;
+
+ label {
+ padding-top: 0.2em;
+ padding-bottom: 0.2em;
+ width: fit-content;
+ }
+
+ input[type="date"] {
+ width: fit-content;
+ }
+
+ input[type="color"] {
+ width: 3em;
+ }
+
+ button {
+ padding: 0.4em;
+ }
+
+ select {
+ width: fit-content;
+ }
+ }
+}
+
+@mixin observable-sidebar-inputs {
+ form {
+ flex-direction: column;
+ align-items: start;
+ margin-bottom: 1em;
+
+ div[class*="oi-"][class$="-input"] {
+ flex-direction: column;
+ }
+
+ &[class*="oi-"][class$="-toggle"] {
+ flex-direction: row-reverse;
+ align-items: center;
+ justify-content: start;
+ }
+
+ input[type="range"] {
+ margin-top: 0.5em;
+ margin-right: 0.8em;
+ margin-left: 1em;
+ }
+ }
+ label {
+ width: fit-content;
+ }
+}
+
+
+@mixin listing-category {
+ display: flex;
+ flex-wrap: wrap;
+ padding-bottom: 5px;
+
+ .listing-category {
+ color: listing-override-value($theme-name, "category-color", $text-muted);
+
+ $val: listing-override-value($theme-name, "category-border", null);
+ @if $val != null {
+ border: $val;
+ } @else {
+ border: solid 1px $border-color;
+ }
+
+ border-radius: $border-radius;
+ text-transform: uppercase;
+ font-size: 0.65em;
+ padding-left: 0.5em;
+ padding-right: 0.5em;
+ padding-top: 0.15em;
+ padding-bottom: 0.15em;
+ cursor: pointer;
+ margin-right: 4px;
+ margin-bottom: 4px;
+ }
+}
+
+// Provide theme level customization of the listing inputs
+@mixin input-group {
+}
+
+@mixin input-form-control {
+ $val: listing-override-value($theme-name, "form-background-color", null);
+ @if $val != null {
+ background-color: $val;
+ }
+ $val: listing-override-value($theme-name, "form-color", null);
+ @if $val != null {
+ color: $val;
+ }
+}
+
+@mixin input-group-text {
+ $val: listing-override-value($theme-name, "input-group-border-radius", null);
+ @if $val != null {
+ border-radius: $val;
+ }
+
+ $val: listing-override-value($theme-name, "input-group-border", null);
+ @if $val != null {
+ border: $val;
+ }
+
+ $val: listing-override-value($theme-name, "input-text-margin", null);
+ @if $val != null {
+ margin: $val;
+ }
+ $val: listing-override-value(
+ $theme-name,
+ "input-text-background-color",
+ null
+ );
+ @if $val != null {
+ background-color: $val;
+ }
+ $val: listing-override-value($theme-name, "input-text-color", null);
+ @if $val != null {
+ color: $val;
+ }
+}
+
+@mixin input-placeholder {
+ $val: listing-override-value(
+ $theme-name,
+ "input-text-placeholder-color",
+ null
+ );
+ @if $val != null {
+ ::placeholder {
+ color: $val;
+ }
+ }
+}
+
+
+@mixin responsive-buttons {
+ display: flex;
+ @include media-breakpoint-up(lg) {
+ flex-direction: row;
+ column-gap: 0.8em;
+ row-gap: 15px;
+ flex-wrap: wrap;
+ }
+ @include media-breakpoint-down(lg) {
+ flex-direction: column;
+ row-gap: 1em;
+ width: 100%;
+ padding-bottom: 1.5em;
+ }
+}
+
+@mixin responsive-button {
+ @include media-breakpoint-up(lg) {
+ font-size: 0.8em;
+ padding: 0.25em 0.5em;
+ border-radius: 4px;
+ }
+
+ @include media-breakpoint-down(lg) {
+ font-size: 1.1em;
+ padding: 0.5em 0.5em;
+ text-align: center;
+ border-radius: 6px;
+ }
+
+ color: lighten($body-color, 20%);
+ text-decoration: none;
+ &:hover {
+ color: $link-color;
+ }
+
+ border: solid 1px;
+
+ i.bi {
+ margin-right: 0.15em;
+ }
+}
+
+@mixin image-shapes {
+ img.round {
+ border-radius: 50%;
+ }
+
+ img.rounded {
+ border-radius: 10px;
+ }
+}
+
+
+
+
+@mixin body-secondary {
+ @if variable-exists(body-secondary) {
+ color: $body-secondary;
+ } @else {
+ color: theme-dim($body-color, 25%);
+ }
+}
+
+@mixin page-columns {
+ display: grid;
+ gap: 0;
+}
+
+@mixin column-spanning-element {
+ table {
+ background: $body-bg;
+ }
+}
+
+// GRID CASCADE
+$grid-body-column-max: $grid-body-width !default;
+$grid-body-column-min: quarto-math.min(500px, $grid-body-column-max) !default;
+
+// Margin variables
+$grid-page-gutter: $grid-column-gutter-width !default;
+$grid-page-gutter-start: $grid-page-gutter !default;
+$grid-page-gutter-end: $grid-page-gutter !default;
+
+$grid-body-gutter: $grid-column-gutter-width !default;
+$grid-body-gutter-start: $grid-body-gutter !default;
+$grid-body-gutter-end: $grid-body-gutter !default;
+
+/* FLOATING GRID */
+$grid-page-gutter-float: 5fr !default;
+$grid-float-sidebar-width: $grid-sidebar-width !default;
+$grid-float-margin-width: $grid-margin-width !default;
+
+/* Float Wide Default Grid */
+
+// Margins
+$grid-float-wide-page-gutter-start: $grid-page-gutter-start !default;
+$grid-float-wide-page-gutter-end: $grid-page-gutter-end !default;
+$grid-float-wide-body-gutter-start: $grid-body-gutter-start !default;
+$grid-float-wide-body-gutter-end: $grid-body-gutter-end !default;
+$grid-float-wide-sidebar-gutter: $grid-page-gutter-float !default;
+$grid-float-wide-margin-gutter: $grid-page-gutter-float !default;
+
+// Sidebars
+$grid-float-wide-sidebar-width: $grid-float-sidebar-width !default;
+$grid-float-wide-sidebar-seg1: minmax(
+ #{0.1 * $grid-float-wide-sidebar-width},
+ #{0.2 * $grid-float-wide-sidebar-width}
+) !default;
+$grid-float-wide-sidebar-seg2: minmax(
+ #{0.2 * $grid-float-wide-sidebar-width},
+ #{0.6 * $grid-float-wide-sidebar-width}
+) !default;
+$grid-float-wide-sidebar-seg3: minmax(
+ #{0.1 * $grid-float-wide-sidebar-width},
+ #{0.2 * $grid-float-wide-sidebar-width}
+) !default;
+
+// Margins
+$grid-float-wide-margin-width: $grid-float-margin-width !default;
+$grid-float-wide-margin-seg3: minmax(
+ #{0.1 * $grid-float-wide-margin-width},
+ #{0.2 * $grid-float-wide-margin-width}
+) !default;
+$grid-float-wide-margin-seg2: minmax(
+ #{0.2 * $grid-float-wide-margin-width},
+ #{0.6 * $grid-float-wide-margin-width}
+) !default;
+$grid-float-wide-margin-seg1: minmax(
+ #{0.1 * $grid-float-wide-margin-width},
+ #{0.2 * $grid-float-wide-margin-width}
+) !default;
+
+// Body
+$grid-float-wide-body-column-min: $grid-body-column-min !default;
+$grid-float-wide-body-column-max: $grid-body-column-max !default;
+$grid-float-wide-body: minmax(
+ $grid-float-wide-body-column-min,
+ calc(
+ #{$grid-float-wide-body-column-max} - #{$grid-float-wide-page-gutter-start +
+ $grid-float-wide-page-gutter-end}
+ )
+) !default;
+
+/* Float Wide Slim Content Grid */
+
+// Margins
+$grid-float-wide-slim-page-gutter-start: $grid-page-gutter-start !default;
+$grid-float-wide-slim-page-gutter-end: $grid-page-gutter-end !default;
+$grid-float-wide-slim-body-gutter-start: $grid-body-gutter-start !default;
+$grid-float-wide-slim-body-gutter-end: $grid-body-gutter-end !default;
+$grid-float-wide-slim-sidebar-gutter: $grid-page-gutter-float !default;
+$grid-float-wide-slim-margin-gutter: $grid-page-gutter-float !default;
+
+// Sidebars
+$grid-float-wide-slim-sidebar-width: $grid-float-sidebar-width !default;
+$grid-float-wide-slim-sidebar-seg1: 0.2 * $grid-float-wide-slim-sidebar-width !default;
+$grid-float-wide-slim-sidebar-seg2: minmax(
+ #{0.2 * $grid-float-wide-slim-sidebar-width},
+ #{0.6 * $grid-float-wide-slim-sidebar-width}
+) !default;
+$grid-float-wide-slim-sidebar-seg3: 0.2 * $grid-float-wide-slim-sidebar-width !default;
+
+// Margins
+$grid-float-wide-slim-margin-width: $grid-float-margin-width !default;
+$grid-float-wide-slim-margin-seg3: 0.2 * $grid-float-wide-slim-margin-width !default;
+$grid-float-wide-slim-margin-seg2: minmax(
+ #{0.2 * $grid-float-wide-slim-margin-width},
+ #{0.6 * $grid-float-wide-slim-margin-width}
+) !default;
+$grid-float-wide-slim-margin-seg1: 0.2 * $grid-float-wide-slim-margin-width !default;
+
+// Body
+$grid-float-wide-slim-body-column-min: $grid-body-column-min - 50px !default;
+$grid-float-wide-slim-body-column-max: $grid-body-column-max - 50px !default;
+$grid-float-wide-slim-body: minmax(
+ $grid-float-wide-slim-body-column-min,
+ calc(
+ #{$grid-float-wide-slim-body-column-max} - #{$grid-float-wide-slim-page-gutter-start +
+ $grid-float-wide-slim-page-gutter-end}
+ )
+) !default;
+
+/* Float Wide Full Grid */
+// Margins
+$grid-float-wide-full-page-gutter-start: $grid-page-gutter-start !default;
+$grid-float-wide-full-page-gutter-end: $grid-page-gutter-end !default;
+$grid-float-wide-full-body-gutter-start: $grid-body-gutter-start !default;
+$grid-float-wide-full-body-gutter-end: $grid-body-gutter-end !default;
+$grid-float-wide-full-sidebar-gutter: $grid-page-gutter-float !default;
+$grid-float-wide-full-margin-gutter: $grid-page-gutter-float !default;
+
+// Sidebars
+$grid-float-wide-full-sidebar-width: $grid-float-sidebar-width !default;
+$grid-float-wide-full-sidebar-seg1: 0.2 * $grid-float-wide-full-sidebar-width !default;
+$grid-float-wide-full-sidebar-seg2: minmax(
+ #{0.2 * $grid-float-wide-full-sidebar-width},
+ #{0.6 * $grid-float-wide-full-sidebar-width}
+) !default;
+$grid-float-wide-full-sidebar-seg3: 0.2 * $grid-float-wide-full-sidebar-width !default;
+
+// Margins
+$grid-float-wide-full-margin-width: $grid-float-margin-width !default;
+$grid-float-wide-full-margin-seg3: 0.2 * $grid-float-wide-full-margin-width !default;
+$grid-float-wide-full-margin-seg2: minmax(
+ #{0.2 * $grid-float-wide-full-margin-width},
+ #{0.6 * $grid-float-wide-full-margin-width}
+) !default;
+$grid-float-wide-full-margin-seg1: 0.2 * $grid-float-wide-full-margin-width !default;
+
+// Body
+$grid-float-wide-full-body-column-min: $grid-body-column-min !default;
+$grid-float-wide-full-body-column-max: $grid-body-column-max !default;
+$grid-float-wide-full-body: minmax(
+ $grid-float-wide-full-body-column-min,
+ calc(
+ #{$grid-float-wide-full-body-column-max} - #{$grid-float-wide-full-page-gutter-start +
+ $grid-float-wide-full-page-gutter-end}
+ )
+) !default;
+
+/* Float Wide Listing Grid */
+// Margins
+$grid-float-wide-listing-page-gutter-start: $grid-page-gutter-start !default;
+$grid-float-wide-listing-page-gutter-end: $grid-page-gutter-end !default;
+$grid-float-wide-listing-body-gutter-start: $grid-body-gutter-start !default;
+$grid-float-wide-listing-body-gutter-end: $grid-body-gutter-end !default;
+$grid-float-wide-listing-sidebar-gutter: $grid-page-gutter-float !default;
+$grid-float-wide-listing-margin-gutter: $grid-page-gutter-float !default;
+
+// Sidebars
+$grid-float-wide-listing-sidebar-width: $grid-float-sidebar-width !default;
+$grid-float-wide-listing-sidebar-seg1: minmax(
+ #{0.1 * $grid-float-wide-listing-sidebar-width},
+ #{0.2 * $grid-float-wide-listing-sidebar-width}
+) !default;
+$grid-float-wide-listing-sidebar-seg2: minmax(
+ #{0.2 * $grid-float-wide-listing-sidebar-width},
+ #{0.6 * $grid-float-wide-listing-sidebar-width}
+) !default;
+$grid-float-wide-listing-sidebar-seg3: minmax(
+ #{0.1 * $grid-float-wide-listing-sidebar-width},
+ #{0.2 * $grid-float-wide-listing-sidebar-width}
+) !default;
+
+// Margins
+$grid-float-wide-listing-margin-width: $grid-float-margin-width !default;
+$grid-float-wide-listing-margin-seg3: minmax(
+ #{0.1 * $grid-float-wide-listing-margin-width},
+ #{0.2 * $grid-float-wide-listing-margin-width}
+) !default;
+$grid-float-wide-listing-margin-seg2: minmax(
+ #{0.2 * $grid-float-wide-listing-margin-width},
+ #{0.6 * $grid-float-wide-listing-margin-width}
+) !default;
+$grid-float-wide-listing-margin-seg1: minmax(
+ #{0.1 * $grid-float-wide-listing-margin-width},
+ #{0.2 * $grid-float-wide-listing-margin-width}
+) !default;
+
+// Body
+$grid-float-wide-listing-body-column-min: $grid-body-column-min !default;
+$grid-float-wide-listing-body-column-max: $grid-body-column-max !default;
+$grid-float-wide-listing-body: minmax(
+ $grid-float-wide-listing-body-column-min,
+ calc(
+ #{$grid-float-wide-listing-body-column-max} - #{$grid-float-wide-listing-page-gutter-start +
+ $grid-float-wide-listing-page-gutter-end}
+ )
+) !default;
+
+/* Float Mid Default Grid */
+// Margins
+$grid-float-mid-page-gutter-start: $grid-page-gutter-start !default;
+$grid-float-mid-page-gutter-end: $grid-page-gutter-end !default;
+$grid-float-mid-body-gutter-start: $grid-body-gutter-start !default;
+$grid-float-mid-body-gutter-end: $grid-body-gutter-end !default;
+$grid-float-mid-sidebar-gutter: $grid-page-gutter-float !default;
+$grid-float-mid-margin-gutter: $grid-page-gutter-float !default;
+
+// No sidebar, only margins
+$grid-float-mid-margin-width: $grid-float-margin-width !default;
+$grid-float-mid-margin-seg3: 0.2 * $grid-float-mid-margin-width !default;
+$grid-float-mid-margin-seg2: minmax(
+ #{0.3 * $grid-float-mid-margin-width},
+ #{0.6 * $grid-float-mid-margin-width}
+) !default;
+$grid-float-mid-margin-seg1: 0.1 * $grid-float-mid-margin-width !default;
+
+// Body
+$grid-float-mid-body-column-min: $grid-body-column-min !default;
+$grid-float-mid-body-column-max: $grid-body-column-max - 50px !default;
+$grid-float-mid-body: minmax(
+ $grid-float-mid-body-column-min,
+ calc(
+ #{$grid-float-mid-body-column-max} - #{$grid-float-mid-page-gutter-start + $grid-float-mid-page-gutter-end}
+ )
+) !default;
+
+/* Float Mid Slim Content Grid */
+// Margins
+$grid-float-mid-slim-page-gutter-start: $grid-page-gutter-start !default;
+$grid-float-mid-slim-page-gutter-end: $grid-page-gutter-end !default;
+$grid-float-mid-slim-body-gutter-start: 2 *
+ quarto-math.div($grid-body-gutter-start, 3) !default;
+$grid-float-mid-slim-body-gutter-end: $grid-body-gutter-end !default;
+$grid-float-mid-slim-sidebar-gutter: $grid-page-gutter-float !default;
+$grid-float-mid-slim-margin-gutter: 0.8 * $grid-page-gutter-float !default;
+
+// No sidebar, only margins
+$grid-float-mid-slim-margin-width: $grid-float-margin-width !default;
+$grid-float-mid-slim-margin-seg3: 0.14 * $grid-float-mid-slim-margin-width !default;
+$grid-float-mid-slim-margin-seg2: minmax(
+ #{0.3 * $grid-float-mid-slim-margin-width},
+ #{0.58 * $grid-float-mid-slim-margin-width}
+) !default;
+$grid-float-mid-slim-margin-seg1: 0.14 * $grid-float-mid-slim-margin-width !default;
+
+// Body
+$grid-float-mid-slim-body-column-min: $grid-body-column-min !default;
+$grid-float-mid-slim-body-column-max: $grid-body-column-max - 50px !default;
+$grid-float-mid-slim-body: minmax(
+ $grid-float-mid-slim-body-column-min,
+ calc(
+ #{$grid-float-mid-slim-body-column-max} - #{$grid-float-mid-slim-page-gutter-start +
+ $grid-float-mid-slim-page-gutter-end}
+ )
+) !default;
+
+/* Float Mid Full Content Grid */
+// Margins
+$grid-float-mid-full-page-gutter-start: $grid-page-gutter-start !default;
+$grid-float-mid-full-page-gutter-end: $grid-page-gutter-end !default;
+$grid-float-mid-full-body-gutter-start: 2 *
+ quarto-math.div($grid-body-gutter-start, 3) !default;
+$grid-float-mid-full-body-gutter-end: $grid-body-gutter-end !default;
+$grid-float-mid-full-sidebar-gutter: $grid-page-gutter-float !default;
+$grid-float-mid-full-margin-gutter: 0.8 * $grid-page-gutter-float !default;
+
+// No sidebar or margins
+
+// Body
+$grid-float-mid-full-body-column-min: $grid-body-column-min !default;
+$grid-float-mid-full-body-column-max: $grid-body-column-max !default;
+$grid-float-mid-full-body: minmax(
+ $grid-float-mid-full-body-column-min,
+ calc(
+ #{$grid-float-mid-full-body-column-max} - #{$grid-float-mid-full-page-gutter-start +
+ $grid-float-mid-full-page-gutter-end}
+ )
+) !default;
+
+/* Float Mid Listing Content Grid */
+// Margins
+$grid-float-mid-listing-page-gutter-start: $grid-page-gutter-start !default;
+$grid-float-mid-listing-page-gutter-end: $grid-page-gutter-end !default;
+$grid-float-mid-listing-body-gutter-start: 2 *
+ quarto-math.div($grid-body-gutter-start, 3) !default;
+$grid-float-mid-listing-body-gutter-end: $grid-body-gutter-end !default;
+$grid-float-mid-listing-sidebar-gutter: $grid-page-gutter-float !default;
+$grid-float-mid-listing-margin-gutter: 0.8 * $grid-page-gutter-float !default;
+
+// No sidebar, only margins
+$grid-float-mid-listing-margin-width: $grid-float-margin-width !default;
+$grid-float-mid-listing-margin-seg3: 0.2 * $grid-float-mid-listing-margin-width !default;
+$grid-float-mid-listing-margin-seg2: minmax(
+ #{0.3 * $grid-float-mid-listing-margin-width},
+ #{0.6 * $grid-float-mid-listing-margin-width}
+) !default;
+$grid-float-mid-listing-margin-seg1: 0.1 * $grid-float-mid-listing-margin-width !default;
+
+// Body
+$grid-float-mid-listing-body-column-min: $grid-body-column-min !default;
+$grid-float-mid-listing-body-column-max: $grid-body-column-max - 50px !default;
+$grid-float-mid-listing-body: minmax(
+ $grid-float-mid-listing-body-column-min,
+ calc(
+ #{$grid-float-mid-listing-body-column-max} - #{$grid-float-mid-listing-page-gutter-start +
+ $grid-float-mid-listing-page-gutter-end}
+ )
+) !default;
+
+/* DOCKED GRID */
+$grid-docked-sidebar-width: $grid-sidebar-width !default;
+$grid-docked-margin-width: $grid-margin-width !default;
+$grid-docked-body-width: $grid-body-column-max + 200px !default;
+
+/* Docked Wide Default Grid */
+
+// Margins
+$grid-docked-wide-page-gutter-start: $grid-page-gutter-start !default;
+$grid-docked-wide-page-gutter-end: $grid-page-gutter-end !default;
+$grid-docked-wide-body-gutter-start: $grid-body-gutter-start !default;
+$grid-docked-wide-body-gutter-end: $grid-body-gutter-end !default;
+$grid-docked-wide-margin-gutter: 5fr !default;
+
+// Sidebars
+$grid-docked-wide-sidebar-width: $grid-docked-sidebar-width !default;
+$grid-docked-wide-sidebar-seg1: minmax(
+ #{0.2 * $grid-docked-wide-sidebar-width},
+ #{0.4 * $grid-docked-wide-sidebar-width}
+) !default;
+$grid-docked-wide-sidebar-seg2: 0.2 * $grid-docked-wide-sidebar-width !default;
+$grid-docked-wide-sidebar-seg3: 0.2 * $grid-docked-wide-sidebar-width !default;
+
+// Margins
+$grid-docked-wide-margin-width: $grid-docked-margin-width !default;
+$grid-docked-wide-margin-seg3: 0.2 * $grid-docked-wide-margin-width !default;
+$grid-docked-wide-margin-seg2: minmax(
+ #{0.2 * $grid-docked-wide-margin-width},
+ #{0.4 * $grid-docked-wide-margin-width}
+) !default;
+$grid-docked-wide-margin-seg1: 0.2 * $grid-docked-wide-margin-width !default;
+
+// Body
+$grid-docked-wide-body-column-min: $grid-body-column-min !default;
+$grid-docked-wide-body-column-max: $grid-docked-body-width !default;
+$grid-docked-wide-body: minmax(
+ $grid-docked-wide-body-column-min,
+ calc(
+ #{$grid-docked-wide-body-column-max} - #{$grid-docked-wide-page-gutter-start +
+ $grid-docked-wide-page-gutter-end}
+ )
+) !default;
+
+/* Docked Slim Content Grid */
+
+// Margins
+$grid-docked-wide-slim-page-gutter-start: $grid-page-gutter-start !default;
+$grid-docked-wide-slim-page-gutter-end: $grid-page-gutter-end !default;
+$grid-docked-wide-slim-body-gutter-start: $grid-body-gutter-start !default;
+$grid-docked-wide-slim-body-gutter-end: $grid-body-gutter-end !default;
+$grid-docked-wide-slim-margin-gutter: 5fr !default;
+
+// Sidebars
+$grid-docked-wide-slim-sidebar-width: $grid-docked-sidebar-width !default;
+$grid-docked-wide-slim-sidebar-seg1: minmax(
+ #{0.2 * $grid-docked-wide-slim-sidebar-width},
+ #{0.4 * $grid-docked-wide-slim-sidebar-width}
+) !default;
+$grid-docked-wide-slim-sidebar-seg2: 0.2 * $grid-docked-wide-slim-sidebar-width !default;
+$grid-docked-wide-slim-sidebar-seg3: 0.2 * $grid-docked-wide-slim-sidebar-width !default;
+
+// Margins
+$grid-docked-wide-slim-margin-width: $grid-docked-margin-width !default;
+$grid-docked-wide-slim-margin-seg3: 0.2 * $grid-docked-wide-slim-margin-width !default;
+$grid-docked-wide-slim-margin-seg2: minmax(
+ #{0 * $grid-docked-wide-slim-margin-width},
+ #{0.8 * $grid-docked-wide-slim-margin-width}
+) !default;
+$grid-docked-wide-slim-margin-seg1: 0.2 * $grid-docked-wide-slim-margin-width !default;
+
+// Body
+$grid-docked-wide-slim-body-column-min: $grid-body-column-min - 50px !default;
+$grid-docked-wide-slim-body-column-max: $grid-body-column-max - 50px !default;
+$grid-docked-wide-slim-body: minmax(
+ $grid-docked-wide-slim-body-column-min,
+ calc(
+ #{$grid-docked-wide-slim-body-column-max} - #{$grid-docked-wide-slim-page-gutter-start +
+ $grid-docked-wide-slim-page-gutter-end}
+ )
+) !default;
+
+/* Docked Full Content Grid */
+
+// Margins
+$grid-docked-wide-full-page-gutter-start: $grid-page-gutter-start !default;
+$grid-docked-wide-full-body-gutter-start: $grid-body-gutter-start !default;
+$grid-docked-wide-full-body-gutter-end: $grid-body-gutter-end !default;
+$grid-docked-wide-full-margin-gutter: 5fr !default;
+$grid-docked-wide-full-page-gutter-end: $grid-page-gutter-end !default;
+
+// Sidebars
+$grid-docked-wide-full-sidebar-width: $grid-docked-sidebar-width !default;
+$grid-docked-wide-full-sidebar-seg1: minmax(
+ #{0.2 * $grid-docked-wide-full-sidebar-width},
+ #{0.4 * $grid-docked-wide-full-sidebar-width}
+) !default;
+$grid-docked-wide-full-sidebar-seg2: 0.2 * $grid-docked-wide-full-sidebar-width !default;
+$grid-docked-wide-full-sidebar-seg3: 0.2 * $grid-docked-wide-full-sidebar-width !default;
+
+// No Margins
+
+// Body
+$grid-docked-wide-full-body-column-min: $grid-body-column-min !default;
+$grid-docked-wide-full-body-column-max: $grid-docked-body-width !default;
+$grid-docked-wide-full-body: minmax(
+ $grid-docked-wide-full-body-column-min,
+ calc(
+ #{$grid-docked-wide-full-body-column-max} - #{$grid-docked-wide-full-page-gutter-start +
+ $grid-docked-wide-full-page-gutter-end}
+ )
+) !default;
+
+/* Docked Listing Grid */
+
+// Margins
+$grid-docked-wide-listing-page-gutter-start: $grid-page-gutter-start !default;
+$grid-docked-wide-listing-body-gutter-start: $grid-body-gutter-start !default;
+$grid-docked-wide-listing-body-gutter-end: $grid-body-gutter-end !default;
+$grid-docked-wide-listing-margin-gutter: 5fr !default;
+$grid-docked-wide-listing-page-gutter-end: $grid-page-gutter-end !default;
+
+// Sidebars
+$grid-docked-wide-listing-sidebar-width: $grid-docked-sidebar-width !default;
+$grid-docked-wide-listing-sidebar-seg1: minmax(
+ #{0.2 * $grid-docked-wide-listing-sidebar-width},
+ #{0.4 * $grid-docked-wide-listing-sidebar-width}
+) !default;
+$grid-docked-wide-listing-sidebar-seg2: 0.2 *
+ $grid-docked-wide-listing-sidebar-width !default;
+$grid-docked-wide-listing-sidebar-seg3: 0.2 *
+ $grid-docked-wide-listing-sidebar-width !default;
+
+// Margins
+$grid-docked-wide-listing-margin-width: $grid-docked-margin-width !default;
+$grid-docked-wide-listing-margin-seg3: 0.2 *
+ $grid-docked-wide-listing-margin-width !default;
+$grid-docked-wide-listing-margin-seg2: minmax(
+ #{0 * $grid-docked-wide-listing-margin-width},
+ #{0.8 * $grid-docked-wide-listing-margin-width}
+) !default;
+$grid-docked-wide-listing-margin-seg1: 0.2 *
+ $grid-docked-wide-listing-margin-width !default;
+
+// Body
+$grid-docked-wide-listing-body-column-min: $grid-body-column-min !default;
+$grid-docked-wide-listing-body-column-max: $grid-docked-body-width !default;
+$grid-docked-wide-listing-body: minmax(
+ $grid-docked-wide-listing-body-column-min,
+ calc(
+ #{$grid-docked-wide-listing-body-column-max} - #{$grid-docked-wide-listing-page-gutter-start +
+ $grid-docked-wide-listing-page-gutter-end}
+ )
+) !default;
+
+/* Docked Mid Default Grid */
+// Margins
+$grid-docked-mid-page-gutter-start: $grid-page-gutter-start !default;
+$grid-docked-mid-body-gutter-start: $grid-body-gutter-start !default;
+$grid-docked-mid-body-gutter-end: $grid-body-gutter-end !default;
+$grid-docked-mid-margin-gutter: 5fr !default;
+$grid-docked-mid-page-gutter-end: $grid-page-gutter-end !default;
+
+// No sidebar, only margins
+$grid-docked-mid-margin-width: $grid-docked-margin-width !default;
+$grid-docked-mid-margin-seg3: 0.2 * $grid-docked-mid-margin-width !default;
+$grid-docked-mid-margin-seg2: minmax(
+ #{0.1 * $grid-docked-mid-margin-width},
+ #{0.2 * $grid-docked-mid-margin-width}
+) !default;
+$grid-docked-mid-margin-seg1: 0.2 * $grid-docked-mid-margin-width !default;
+
+// Body
+$grid-docked-mid-body-column-min: $grid-body-column-min !default;
+$grid-docked-mid-body-column-max: $grid-body-column-max - 50px !default;
+$grid-docked-mid-body: minmax(
+ $grid-docked-mid-body-column-min,
+ calc(
+ #{$grid-docked-mid-body-column-max} - #{$grid-docked-mid-page-gutter-start +
+ $grid-docked-mid-page-gutter-end}
+ )
+) !default;
+
+/* Docked Mid Slim Content Grid */
+// Margins
+$grid-docked-mid-slim-page-gutter-start: $grid-page-gutter-start !default;
+$grid-docked-mid-slim-body-gutter-start: $grid-body-gutter-start !default;
+$grid-docked-mid-slim-body-gutter-end: $grid-body-gutter-end !default;
+$grid-docked-mid-slim-margin-gutter: 5fr !default;
+$grid-docked-mid-slim-page-gutter-end: $grid-page-gutter-end !default;
+
+// No sidebar, only margins
+$grid-docked-mid-slim-margin-width: $grid-docked-margin-width !default;
+$grid-docked-mid-slim-margin-seg3: 0.2 * $grid-docked-mid-slim-margin-width !default;
+$grid-docked-mid-slim-margin-seg2: minmax(
+ #{0.1 * $grid-docked-mid-slim-margin-width},
+ #{0.2 * $grid-docked-mid-slim-margin-width}
+) !default;
+$grid-docked-mid-slim-margin-seg1: 0.2 * $grid-docked-mid-slim-margin-width !default;
+
+// Body
+$grid-docked-mid-slim-body-column-min: $grid-body-column-min !default;
+$grid-docked-mid-slim-body-column-max: $grid-body-column-max - 50px !default;
+$grid-docked-mid-slim-body: minmax(
+ $grid-docked-mid-slim-body-column-min,
+ calc(
+ #{$grid-docked-mid-slim-body-column-max} - #{$grid-docked-mid-slim-page-gutter-start +
+ $grid-docked-mid-slim-page-gutter-end}
+ )
+) !default;
+
+/* Docked Mid Full Content Grid */
+// Margins
+$grid-docked-mid-full-page-gutter-start: $grid-page-gutter-start !default;
+$grid-docked-mid-full-body-gutter-start: $grid-body-gutter-start !default;
+$grid-docked-mid-full-body-gutter-end: $grid-body-gutter-end !default;
+$grid-docked-mid-full-margin-gutter: 5fr !default;
+$grid-docked-mid-full-page-gutter-end: $grid-page-gutter-end !default;
+
+// No sidebar or margins
+
+// Body
+$grid-docked-mid-full-body-column-min: $grid-body-column-min !default;
+$grid-docked-mid-full-body-column-max: $grid-docked-body-width !default;
+$grid-docked-mid-full-body: minmax(
+ $grid-docked-mid-full-body-column-min,
+ calc(
+ #{$grid-docked-mid-full-body-column-max} - #{$grid-docked-mid-full-page-gutter-start +
+ $grid-docked-mid-full-page-gutter-end}
+ )
+) !default;
+
+/* Float Mid Listing Content Grid */
+// Margins
+$grid-docked-mid-listing-page-gutter-start: $grid-page-gutter-start !default;
+$grid-docked-mid-listing-body-gutter-start: $grid-body-gutter-start !default;
+$grid-docked-mid-listing-body-gutter-end: $grid-body-gutter-end !default;
+$grid-docked-mid-listing-margin-gutter: $grid-page-gutter-float !default;
+$grid-docked-mid-listing-page-gutter-end: $grid-page-gutter-end !default;
+
+// No sidebar, only margins
+$grid-docked-mid-listing-margin-width: $grid-docked-margin-width !default;
+$grid-docked-mid-listing-margin-seg3: 0.2 *
+ $grid-docked-mid-listing-margin-width !default;
+$grid-docked-mid-listing-margin-seg2: minmax(
+ #{0.3 * $grid-docked-mid-listing-margin-width},
+ #{0.6 * $grid-docked-mid-listing-margin-width}
+) !default;
+$grid-docked-mid-listing-margin-seg1: 0.1 *
+ $grid-docked-mid-listing-margin-width !default;
+
+// Body
+$grid-docked-mid-listing-body-column-min: $grid-body-column-min !default;
+$grid-docked-mid-listing-body-column-max: $grid-body-column-max - 50px !default;
+$grid-docked-mid-listing-body: minmax(
+ $grid-docked-mid-listing-body-column-min,
+ calc(
+ #{$grid-docked-mid-listing-body-column-max} - #{$grid-docked-mid-listing-page-gutter-start +
+ $grid-docked-mid-listing-page-gutter-end}
+ )
+) !default;
+
+/* DEFAULT (HTML PAGE, NOT IN WEBSITE) GRID */
+$grid-default-sidebar-width: $grid-sidebar-width !default;
+$grid-default-margin-width: $grid-margin-width !default;
+$grid-default-body-width: $grid-body-column-max + 50px !default;
+
+/* Default Wide Grid */
+// Margins
+$grid-default-wide-page-gutter-start: $grid-page-gutter-start !default;
+$grid-default-wide-sidebar-gutter: 5fr !default;
+$grid-default-wide-body-gutter-start: $grid-body-gutter-start !default;
+$grid-default-wide-body-gutter-end: $grid-body-gutter-end !default;
+$grid-default-wide-margin-gutter: 5fr !default;
+$grid-default-wide-page-gutter-end: $grid-page-gutter-end !default;
+
+// Sidebars
+$grid-default-wide-sidebar-width: $grid-default-sidebar-width !default;
+$grid-default-wide-sidebar-seg1: 0.14 * $grid-default-wide-sidebar-width !default;
+$grid-default-wide-sidebar-seg2: 0.14 * $grid-default-wide-sidebar-width !default;
+
+// Margins
+$grid-default-wide-margin-width: $grid-default-margin-width !default;
+$grid-default-wide-margin-seg3: 0.14 * $grid-default-wide-margin-width !default;
+$grid-default-wide-margin-seg2: minmax(
+ #{0.3 * $grid-default-wide-margin-width},
+ #{0.58 * $grid-default-wide-margin-width}
+) !default;
+$grid-default-wide-margin-seg1: 0.14 * $grid-default-wide-margin-width !default;
+
+// Body
+$grid-default-wide-body-column-min: $grid-body-column-min !default;
+$grid-default-wide-body-column-max: $grid-default-body-width !default;
+$grid-default-wide-body: minmax(
+ $grid-default-wide-body-column-min,
+ calc(
+ #{$grid-default-wide-body-column-max} - #{$grid-default-wide-page-gutter-start +
+ $grid-default-wide-page-gutter-end}
+ )
+) !default;
+
+/* Default Mid Grid */
+// Margins
+$grid-default-mid-page-gutter-start: $grid-page-gutter-start !default;
+$grid-default-mid-sidebar-gutter: 5fr !default;
+$grid-default-mid-body-gutter-start: $grid-body-gutter-start !default;
+$grid-default-mid-body-gutter-end: $grid-body-gutter-end !default;
+$grid-default-mid-margin-gutter: 5fr !default;
+$grid-default-mid-page-gutter-end: $grid-page-gutter-end !default;
+
+// Sidebars
+$grid-default-mid-sidebar-width: $grid-default-sidebar-width !default;
+$grid-default-mid-sidebar-seg1: 0.14 * $grid-default-mid-sidebar-width !default;
+$grid-default-mid-sidebar-seg2: 0.14 * $grid-default-mid-sidebar-width !default;
+
+// Margins
+$grid-default-mid-margin-width: $grid-default-margin-width !default;
+$grid-default-mid-margin-seg3: 0.14 * $grid-default-mid-margin-width !default;
+$grid-default-mid-margin-seg2: minmax(
+ #{0.3 * $grid-default-mid-margin-width},
+ #{0.58 * $grid-default-mid-margin-width}
+) !default;
+$grid-default-mid-margin-seg1: 0.14 * $grid-default-mid-margin-width !default;
+
+// Body
+$grid-default-mid-body-column-min: $grid-body-column-min !default;
+$grid-default-mid-body-column-max: $grid-default-body-width - 50px !default;
+$grid-default-mid-body: minmax(
+ $grid-default-mid-body-column-min,
+ calc(
+ #{$grid-default-mid-body-column-max} - #{$grid-default-mid-page-gutter-start +
+ $grid-default-mid-page-gutter-end}
+ )
+) !default;
+
+/* Full Content Wide Grid */
+// Margins
+$grid-default-full-wide-page-gutter-start: $grid-page-gutter-start !default;
+$grid-default-full-wide-sidebar-gutter: 5fr !default;
+$grid-default-full-wide-body-gutter-start: $grid-body-gutter-start !default;
+$grid-default-full-wide-body-gutter-end: $grid-body-gutter-end !default;
+$grid-default-full-wide-margin-gutter: 5fr !default;
+$grid-default-full-wide-page-gutter-end: $grid-page-gutter-end !default;
+
+// Sidebars
+$grid-default-full-wide-sidebar-width: $grid-default-sidebar-width !default;
+$grid-default-full-wide-sidebar-seg1: 0.14 *
+ $grid-default-full-wide-sidebar-width !default;
+$grid-default-full-wide-sidebar-seg2: 0.14 *
+ $grid-default-full-wide-sidebar-width !default;
+
+// Margins
+$grid-default-full-wide-margin-width: $grid-default-margin-width !default;
+$grid-default-full-wide-margin-seg2: 0.14 * $grid-default-full-wide-margin-width !default;
+$grid-default-full-wide-margin-seg1: 0.14 * $grid-default-full-wide-margin-width !default;
+
+// Body
+$grid-default-full-wide-body-column-min: $grid-body-column-min !default;
+$grid-default-full-wide-body-column-max: $grid-default-body-width !default;
+$grid-default-full-wide-body: minmax(
+ $grid-default-full-wide-body-column-min,
+ calc(
+ #{$grid-default-full-wide-body-column-max} - #{$grid-default-full-wide-page-gutter-start +
+ $grid-default-full-wide-page-gutter-end}
+ )
+) !default;
+
+/* Full Content Mid Grid */
+// Margins
+$grid-default-full-mid-page-gutter-start: $grid-page-gutter-start !default;
+$grid-default-full-mid-sidebar-gutter: 5fr !default;
+$grid-default-full-mid-body-gutter-start: $grid-body-gutter-start !default;
+$grid-default-full-mid-body-gutter-end: $grid-body-gutter-end !default;
+$grid-default-full-mid-margin-gutter: 5fr !default;
+$grid-default-full-mid-page-gutter-end: $grid-page-gutter-end !default;
+
+// No margins or sidebars
+
+// Body
+$grid-default-full-mid-body-column-min: $grid-body-column-min !default;
+$grid-default-full-mid-body-column-max: $grid-default-body-width - 50px !default;
+$grid-default-full-mid-body: minmax(
+ $grid-default-full-mid-body-column-min,
+ calc(
+ #{$grid-default-full-mid-body-column-max} - #{$grid-default-full-mid-page-gutter-start +
+ $grid-default-full-mid-page-gutter-end}
+ )
+) !default;
+
+/* Listing Wide Grid */
+// Margins
+$grid-default-listing-wide-page-gutter-start: $grid-page-gutter-start !default;
+$grid-default-listing-wide-sidebar-gutter: 5fr !default;
+$grid-default-listing-wide-body-gutter-start: $grid-body-gutter-start !default;
+$grid-default-listing-wide-body-gutter-end: 2 * $grid-body-gutter-end !default;
+$grid-default-listing-wide-margin-gutter: 1fr !default;
+$grid-default-listing-wide-page-gutter-end: $grid-page-gutter-end !default;
+
+// Sidebars
+$grid-default-listing-wide-sidebar-width: $grid-default-sidebar-width !default;
+$grid-default-listing-wide-sidebar-seg1: minmax(
+ #{0.2 * $grid-default-listing-wide-sidebar-width},
+ #{0.4 * $grid-default-listing-wide-sidebar-width}
+) !default;
+$grid-default-listing-wide-sidebar-seg2: 0.2 *
+ $grid-default-listing-wide-sidebar-width !default;
+$grid-default-listing-wide-sidebar-seg3: 0.2 *
+ $grid-default-listing-wide-sidebar-width !default;
+
+// Margins
+$grid-default-listing-wide-margin-width: $grid-default-margin-width !default;
+$grid-default-listing-wide-sidebar-seg3: 0.2 *
+ $grid-default-listing-wide-margin-width !default;
+$grid-default-listing-wide-margin-seg2: minmax(
+ #{0 * $grid-default-listing-wide-margin-width},
+ #{1 * $grid-default-listing-wide-margin-width}
+) !default;
+$grid-default-listing-wide-margin-seg1: 0.2 *
+ $grid-default-listing-wide-margin-width !default;
+
+// Body
+$grid-default-listing-wide-body-column-min: $grid-body-column-min !default;
+$grid-default-listing-wide-body-column-max: $grid-default-body-width !default;
+$grid-default-listing-wide-body: minmax(
+ $grid-default-listing-wide-body-column-min,
+ calc(
+ #{$grid-default-listing-wide-body-column-max} - #{$grid-default-listing-wide-page-gutter-start +
+ $grid-default-listing-wide-page-gutter-end}
+ )
+) !default;
+
+/* Listing Mid Grid */
+// Margins
+$grid-default-listing-mid-page-gutter-start: $grid-page-gutter-start !default;
+$grid-default-listing-mid-sidebar-gutter: 5fr !default;
+$grid-default-listing-mid-body-gutter-start: $grid-body-gutter-start !default;
+$grid-default-listing-mid-body-gutter-end: $grid-body-gutter-end !default;
+$grid-default-listing-mid-margin-gutter: 5fr !default;
+$grid-default-listing-mid-page-gutter-end: $grid-page-gutter-end !default;
+
+// No margins or sidebars
+
+// Body
+$grid-default-listing-mid-body-column-min: $grid-body-column-min !default;
+$grid-default-listing-mid-body-column-max: $grid-default-body-width + 400px !default;
+$grid-default-listing-mid-body: minmax(
+ $grid-default-listing-mid-body-column-min,
+ calc(
+ #{$grid-default-listing-mid-body-column-max} - #{$grid-default-listing-mid-page-gutter-start +
+ $grid-default-listing-mid-page-gutter-end}
+ )
+) !default;
+
+/* Slim Wide Grid */
+// Margins
+$grid-default-slim-wide-page-gutter-start: $grid-page-gutter-start !default;
+$grid-default-slim-wide-sidebar-gutter: 5fr !default;
+$grid-default-slim-wide-body-gutter-start: $grid-body-gutter-start !default;
+$grid-default-slim-wide-body-gutter-end: $grid-body-gutter-end !default;
+$grid-default-slim-wide-margin-gutter: 5fr !default;
+$grid-default-slim-wide-page-gutter-end: $grid-page-gutter-end !default;
+
+// Sidebars
+$grid-default-slim-wide-sidebar-width: $grid-default-sidebar-width !default;
+$grid-default-slim-wide-sidebar-seg1: 0.14 *
+ $grid-default-slim-wide-sidebar-width !default;
+$grid-default-slim-wide-sidebar-seg2: 0.14 *
+ $grid-default-slim-wide-sidebar-width !default;
+
+// Margins
+$grid-default-slim-wide-margin-width: $grid-default-margin-width !default;
+$grid-default-slim-wide-sidebar-seg3: 0.2 * $grid-default-slim-wide-margin-width !default;
+$grid-default-slim-wide-margin-seg2: minmax(
+ #{0 * $grid-default-slim-wide-margin-width},
+ #{0.8 * $grid-default-slim-wide-margin-width}
+) !default;
+$grid-default-slim-wide-margin-seg1: 0.2 * $grid-default-slim-wide-margin-width !default;
+
+// Body
+$grid-default-slim-wide-body-column-min: $grid-body-column-min !default;
+$grid-default-slim-wide-body-column-max: $grid-default-body-width !default;
+$grid-default-slim-wide-body: minmax(
+ $grid-default-slim-wide-body-column-min,
+ calc(
+ #{$grid-default-slim-wide-body-column-max} - #{$grid-default-slim-wide-page-gutter-start +
+ $grid-default-slim-wide-page-gutter-end}
+ )
+) !default;
+
+/* Slim Mid Grid */
+// Margins
+$grid-default-slim-mid-page-gutter-start: $grid-page-gutter-start !default;
+$grid-default-slim-mid-sidebar-gutter: 5fr !default;
+$grid-default-slim-mid-body-gutter-start: $grid-body-gutter-start !default;
+$grid-default-slim-mid-body-gutter-end: $grid-body-gutter-end !default;
+$grid-default-slim-mid-margin-gutter: 5fr !default;
+$grid-default-slim-mid-page-gutter-end: $grid-page-gutter-end !default;
+
+// Margins
+$grid-default-slim-mid-margin-width: $grid-default-margin-width !default;
+$grid-default-slim-mid-margin-seg3: 0.14 * $grid-default-slim-mid-margin-width !default;
+$grid-default-slim-mid-margin-seg2: minmax(
+ #{0.3 * $grid-default-slim-mid-margin-width},
+ #{0.58 * $grid-default-slim-mid-margin-width}
+) !default;
+$grid-default-slim-mid-margin-seg1: 0.14 * $grid-default-slim-mid-margin-width !default;
+
+// Body
+$grid-default-slim-mid-body-column-min: $grid-body-column-min !default;
+$grid-default-slim-mid-body-column-max: $grid-default-body-width - 50px !default;
+$grid-default-slim-mid-body: minmax(
+ $grid-default-slim-mid-body-column-min,
+ calc(
+ #{$grid-default-slim-mid-body-column-max} - #{$grid-default-slim-mid-page-gutter-start +
+ $grid-default-slim-mid-page-gutter-end}
+ )
+) !default;
+
+/* TOC Wide Grid */
+// Margins
+$grid-default-toc-wide-page-gutter-start: $grid-page-gutter-start !default;
+$grid-default-toc-wide-sidebar-gutter: 5fr !default;
+$grid-default-toc-wide-body-gutter-start: $grid-body-gutter-start !default;
+$grid-default-toc-wide-body-gutter-end: $grid-body-gutter-end !default;
+$grid-default-toc-wide-margin-gutter: 5fr !default;
+$grid-default-toc-wide-page-gutter-end: $grid-page-gutter-end !default;
+
+// Sidebars
+$grid-default-toc-wide-sidebar-width: $grid-default-sidebar-width !default;
+$grid-default-toc-wide-sidebar-seg1: 0.14 * $grid-default-toc-wide-sidebar-width !default;
+$grid-default-toc-wide-sidebar-seg2: minmax(
+ #{0 * $grid-default-toc-wide-sidebar-width},
+ #{0.7 * $grid-default-toc-wide-sidebar-width}
+) !default;
+$grid-default-toc-wide-sidebar-seg3: 0.14 * $grid-default-toc-wide-sidebar-width !default;
+
+// Margins
+$grid-default-toc-wide-margin-width: $grid-default-margin-width !default;
+$grid-default-toc-wide-margin-seg3: 0.2 * $grid-default-toc-wide-margin-width !default;
+$grid-default-toc-wide-margin-seg2: minmax(
+ #{0 * $grid-default-toc-wide-margin-width},
+ #{0.8 * $grid-default-toc-wide-margin-width}
+) !default;
+$grid-default-toc-wide-margin-seg1: 0.2 * $grid-default-toc-wide-margin-width !default;
+
+// Body
+$grid-default-toc-wide-body-column-min: $grid-body-column-min - 50px !default;
+$grid-default-toc-wide-body-column-max: $grid-default-body-width - 50px !default;
+$grid-default-toc-wide-body: minmax(
+ $grid-default-toc-wide-body-column-min,
+ calc(
+ #{$grid-default-toc-wide-body-column-max} - #{$grid-default-toc-wide-page-gutter-start +
+ $grid-default-toc-wide-page-gutter-end}
+ )
+) !default;
+
+/* TOC Mid Grid */
+// Margins
+$grid-default-toc-mid-page-gutter-start: $grid-page-gutter-start !default;
+$grid-default-toc-mid-sidebar-gutter: 5fr !default;
+$grid-default-toc-mid-body-gutter-start: $grid-body-gutter-start !default;
+$grid-default-toc-mid-body-gutter-end: $grid-body-gutter-end !default;
+$grid-default-toc-mid-margin-gutter: 5fr !default;
+$grid-default-toc-mid-page-gutter-end: $grid-page-gutter-end !default;
+
+// Margins
+$grid-default-toc-mid-sidebar-width: $grid-default-sidebar-width !default;
+$grid-default-toc-mid-sidebar-seg1: 0.14 * $grid-default-toc-mid-sidebar-width !default;
+$grid-default-toc-mid-sidebar-seg2: minmax(
+ #{0 * $grid-default-toc-mid-sidebar-width},
+ #{0.58 * $grid-default-toc-mid-sidebar-width}
+) !default;
+$grid-default-toc-mid-sidebar-seg3: 0.14 * $grid-default-toc-mid-sidebar-width !default;
+
+// Body
+$grid-default-toc-mid-body-column-min: $grid-body-column-min - 50px !default;
+$grid-default-toc-mid-body-column-max: $grid-default-body-width - 50px !default;
+$grid-default-toc-mid-body: minmax(
+ $grid-default-toc-mid-body-column-min,
+ calc(
+ #{$grid-default-toc-mid-body-column-max} - #{$grid-default-toc-mid-page-gutter-start +
+ $grid-default-toc-mid-page-gutter-end}
+ )
+) !default;
+
+// Floating Grid Definitions
+@mixin page-columns-float-wide {
+ @include page-columns();
+ grid-template-columns:
+ [screen-start] $grid-float-wide-page-gutter-start
+ [screen-start-inset] $grid-float-wide-sidebar-gutter
+ [page-start] $grid-float-wide-sidebar-seg1
+ [page-start-inset] $grid-float-wide-sidebar-seg2
+ [body-start-outset] $grid-float-wide-sidebar-seg3
+ [body-start] $grid-float-wide-body-gutter-start
+ [body-content-start] $grid-float-wide-body
+ [body-content-end] $grid-float-wide-body-gutter-end
+ [body-end] $grid-float-wide-margin-seg3
+ [body-end-outset] $grid-float-wide-margin-seg2
+ [page-end-inset] $grid-float-wide-margin-seg1
+ [page-end] $grid-float-wide-margin-gutter
+ [screen-end-inset] $grid-float-wide-page-gutter-end
+ [screen-end];
+}
+
+@mixin page-columns-float-slimcontent-wide {
+ @include page-columns();
+ grid-template-columns:
+ [screen-start] $grid-float-wide-slim-page-gutter-start
+ [screen-start-inset] $grid-float-wide-slim-sidebar-gutter
+ [page-start] $grid-float-wide-slim-sidebar-seg1
+ [page-start-inset] $grid-float-wide-slim-sidebar-seg2
+ [body-start-outset] $grid-float-wide-slim-sidebar-seg3
+ [body-start] $grid-float-wide-slim-body-gutter-start
+ [body-content-start] $grid-float-wide-slim-body
+ [body-content-end] $grid-float-wide-slim-body-gutter-end
+ [body-end] $grid-float-wide-slim-margin-seg3
+ [body-end-outset] $grid-float-wide-slim-margin-seg2
+ [page-end-inset] $grid-float-wide-slim-margin-seg1
+ [page-end] $grid-float-wide-slim-margin-gutter
+ [screen-end-inset] $grid-float-wide-slim-page-gutter-end
+ [screen-end];
+}
+
+@mixin page-columns-float-fullcontent-wide {
+ @include page-columns();
+ grid-template-columns:
+ [screen-start] $grid-float-wide-full-page-gutter-start
+ [screen-start-inset] $grid-float-wide-full-sidebar-gutter
+ [page-start] $grid-float-wide-full-sidebar-seg1
+ [page-start-inset] $grid-float-wide-full-sidebar-seg2
+ [body-start-outset] $grid-float-wide-full-sidebar-seg3
+ [body-start] $grid-float-wide-full-body-gutter-start
+ [body-content-start] $grid-float-wide-full-body
+ [body-content-end] $grid-float-wide-full-body-gutter-end
+ [body-end body-end-outset page-end-inset page-end] $grid-float-wide-full-margin-gutter
+ [screen-end-inset] $grid-float-wide-full-page-gutter-end
+ [screen-end];
+}
+
+@mixin page-columns-float-listing-wide {
+ @include page-columns();
+ grid-template-columns:
+ [screen-start] $grid-float-wide-listing-page-gutter-start
+ [screen-start-inset] $grid-float-wide-listing-sidebar-gutter
+ [page-start] $grid-float-wide-listing-sidebar-seg1
+ [page-start-inset] $grid-float-wide-listing-sidebar-seg2
+ [body-start-outset] $grid-float-wide-listing-sidebar-seg3
+ [body-start] $grid-float-wide-listing-body-gutter-start
+ [body-content-start] $grid-float-wide-listing-body
+ [body-content-end] $grid-float-wide-listing-body-gutter-end
+ [body-end] $grid-float-wide-listing-margin-seg3
+ [body-end-outset] $grid-float-wide-listing-margin-seg2
+ [page-end-inset] $grid-float-wide-listing-margin-seg1
+ [page-end] $grid-float-wide-listing-margin-gutter
+ [screen-end-inset] $grid-float-wide-listing-page-gutter-end
+ [screen-end];
+}
+
+// medium 976 down
+@mixin page-columns-float-mid {
+ @include page-columns();
+ grid-template-columns:
+ [screen-start] $grid-float-mid-page-gutter-start
+ [screen-start-inset] $grid-float-mid-sidebar-gutter
+ [page-start page-start-inset body-start-outset body-start] $grid-float-mid-body-gutter-start
+ [body-content-start] $grid-float-mid-body
+ [body-content-end] $grid-float-mid-body-gutter-end
+ [body-end] $grid-float-mid-margin-seg3
+ [body-end-outset] $grid-float-mid-margin-seg2
+ [page-end-inset] $grid-float-mid-margin-seg1
+ [page-end] $grid-float-mid-margin-gutter
+ [screen-end-inset] $grid-float-mid-page-gutter-end
+ [screen-end];
+}
+
+@mixin page-columns-float-slimcontent-mid {
+ @include page-columns();
+ grid-template-columns:
+ [screen-start] $grid-float-mid-slim-page-gutter-start
+ [screen-start-inset] $grid-float-mid-slim-sidebar-gutter
+ [page-start page-start-inset body-start-outset body-start] $grid-float-mid-slim-body-gutter-start
+ [body-content-start] $grid-float-mid-slim-body
+ [body-content-end] $grid-float-mid-slim-body-gutter-end
+ [body-end] $grid-float-mid-slim-margin-seg3
+ [body-end-outset] $grid-float-mid-slim-margin-seg2
+ [page-end-inset] $grid-float-mid-slim-margin-seg1
+ [page-end] $grid-float-mid-slim-margin-gutter
+ [screen-end-inset] $grid-float-mid-slim-page-gutter-end
+ [screen-end];
+}
+
+@mixin page-columns-float-fullcontent-mid {
+ @include page-columns();
+ grid-template-columns:
+ [screen-start] $grid-float-mid-full-page-gutter-start
+ [screen-start-inset] $grid-float-mid-full-sidebar-gutter
+ [page-start page-start-inset body-start-outset body-start] $grid-float-mid-full-body-gutter-start
+ [body-content-start] $grid-float-mid-full-body
+ [body-content-end]$grid-float-mid-full-body-gutter-end
+ [body-end body-end-outset page-end-inset page-end] $grid-float-mid-full-margin-gutter
+ [screen-end-inset] $grid-float-mid-full-page-gutter-end
+ [screen-end];
+}
+
+@mixin page-columns-float-listing-mid {
+ @include page-columns();
+ grid-template-columns:
+ [screen-start] $grid-float-mid-listing-page-gutter-start
+ [screen-start-inset] $grid-float-mid-listing-sidebar-gutter
+ [page-start page-start-inset body-start-outset body-start] $grid-float-mid-listing-body-gutter-start
+ [body-content-start] $grid-float-mid-listing-body
+ [body-content-end] $grid-float-mid-listing-body-gutter-end
+ [body-end] $grid-float-mid-listing-margin-seg3
+ [body-end-outset] $grid-float-mid-listing-margin-seg2
+ [page-end-inset] $grid-float-mid-listing-margin-seg1
+ [page-end] $grid-float-mid-listing-margin-gutter
+ [screen-end-inset] $grid-float-mid-listing-page-gutter-end
+ [screen-end];
+}
+
+// Docked Grid Definitions
+@mixin page-columns-docked-wide {
+ @include page-columns();
+ grid-template-columns:
+ [screen-start] $grid-docked-wide-page-gutter-start
+ [screen-start-inset page-start] $grid-docked-wide-sidebar-seg1
+ [page-start-inset] $grid-docked-wide-sidebar-seg2
+ [body-start-outset] $grid-docked-wide-sidebar-seg3
+ [body-start] $grid-docked-wide-body-gutter-start
+ [body-content-start] $grid-docked-wide-body
+ [body-content-end] $grid-docked-wide-body-gutter-end
+ [body-end] $grid-docked-wide-margin-seg3
+ [body-end-outset] $grid-docked-wide-margin-seg2
+ [page-end-inset] $grid-docked-wide-margin-seg1
+ [page-end] $grid-docked-wide-margin-gutter
+ [screen-end-inset] $grid-docked-wide-page-gutter-end
+ [screen-end];
+}
+
+@mixin page-columns-docked-slimcontent-wide {
+ @include page-columns();
+ grid-template-columns:
+ [screen-start] $grid-docked-wide-slim-page-gutter-start
+ [screen-start-inset page-start] $grid-docked-wide-slim-sidebar-seg1
+ [page-start-inset] $grid-docked-wide-slim-sidebar-seg2
+ [body-start-outset] $grid-docked-wide-slim-sidebar-seg3
+ [body-start] $grid-docked-wide-slim-body-gutter-start
+ [body-content-start] $grid-docked-wide-slim-body
+ [body-content-end] $grid-docked-wide-slim-body-gutter-end
+ [body-end] $grid-docked-wide-slim-margin-seg3
+ [body-end-outset] $grid-docked-wide-slim-margin-seg2
+ [page-end-inset] $grid-docked-wide-slim-margin-seg1
+ [page-end] $grid-docked-wide-slim-margin-gutter
+ [screen-end-inset] $grid-docked-wide-slim-page-gutter-end
+ [screen-end];
+}
+
+@mixin page-columns-docked-fullcontent-wide {
+ @include page-columns();
+ grid-template-columns:
+ [screen-start] $grid-docked-wide-full-page-gutter-start
+ [screen-start-inset page-start] $grid-docked-wide-full-sidebar-seg1
+ [page-start-inset] $grid-docked-wide-full-sidebar-seg2
+ [body-start-outset] $grid-docked-wide-full-sidebar-seg3
+ [body-start] $grid-docked-wide-full-body-gutter-start
+ [body-content-start] $grid-docked-wide-full-body
+ [body-content-end] $grid-docked-wide-full-body-gutter-end
+ [body-end body-end-outset page-end-inset page-end] $grid-docked-wide-full-margin-gutter
+ [screen-end-inset] $grid-docked-wide-full-page-gutter-end
+ [screen-end];
+}
+
+@mixin page-columns-docked-listing-wide {
+ @include page-columns();
+ grid-template-columns:
+ [screen-start] $grid-docked-wide-listing-page-gutter-start
+ [screen-start-inset page-start] $grid-docked-wide-listing-sidebar-seg1
+ [page-start-inset] $grid-docked-wide-listing-sidebar-seg2
+ [body-start-outset] $grid-docked-wide-listing-sidebar-seg3
+ [body-start] $grid-docked-wide-listing-body-gutter-start
+ [body-content-start] $grid-docked-wide-listing-body
+ [body-content-end] $grid-docked-wide-listing-body-gutter-end
+ [body-end] $grid-docked-wide-listing-margin-seg3
+ [body-end-outset] $grid-docked-wide-listing-margin-seg2
+ [page-end-inset] $grid-docked-wide-listing-margin-seg1
+ [page-end] $grid-docked-wide-listing-margin-gutter
+ [screen-end-inset] $grid-docked-wide-listing-page-gutter-end
+ [screen-end];
+}
+
+@mixin page-columns-docked-mid {
+ @include page-columns();
+ grid-template-columns:
+ [screen-start] $grid-docked-mid-page-gutter-start
+ [screen-start-inset page-start page-start-inset body-start-outset body-start body-content-start] $grid-docked-mid-body
+ [body-content-end] $grid-docked-mid-body-gutter-end
+ [body-end] $grid-docked-mid-margin-seg3
+ [body-end-outset] $grid-docked-mid-margin-seg2
+ [page-end-inset] $grid-docked-mid-margin-seg1
+ [page-end] $grid-docked-mid-margin-gutter
+ [screen-end-inset] $grid-docked-mid-page-gutter-end
+ [screen-end];
+}
+
+@mixin page-columns-docked-slimcontent-mid {
+ @include page-columns();
+ grid-template-columns:
+ [screen-start] $grid-docked-mid-slim-page-gutter-start
+ [screen-start-inset page-start page-start-inset body-start-outset body-start body-content-start] $grid-docked-mid-slim-body
+ [body-content-end] $grid-docked-mid-slim-body-gutter-end
+ [body-end] $grid-docked-mid-slim-margin-seg3
+ [body-end-outset] $grid-docked-mid-slim-margin-seg2
+ [page-end-inset] $grid-docked-mid-slim-margin-seg1
+ [page-end] $grid-docked-mid-slim-margin-gutter
+ [screen-end-inset] $grid-docked-mid-slim-page-gutter-end
+ [screen-end];
+}
+
+@mixin page-columns-docked-fullcontent-mid {
+ @include page-columns();
+ grid-template-columns:
+ [screen-start] $grid-docked-mid-full-page-gutter-start
+ [screen-start-inset page-start page-start-inset body-start-outset body-start body-content-start] $grid-docked-mid-full-body
+ [body-content-end] $grid-docked-mid-full-body-gutter-end
+ [body-end body-end-outset page-end-inset page-end] $grid-docked-mid-full-margin-gutter
+ [screen-end-inset] $grid-docked-mid-full-page-gutter-end
+ [screen-end];
+}
+
+@mixin page-columns-docked-listing-mid {
+ @include page-columns();
+ grid-template-columns:
+ [screen-start] $grid-docked-mid-listing-page-gutter-start
+ [screen-start-inset page-start page-start-inset body-start-outset body-start body-content-start] $grid-docked-mid-listing-body
+ [body-content-end] $grid-docked-mid-listing-body-gutter-start
+ [body-end] $grid-docked-mid-slim-margin-seg3
+ [body-end-outset] $grid-docked-mid-slim-margin-seg2
+ [page-end-inset] $grid-docked-mid-slim-margin-seg1
+ [page-end] $grid-docked-mid-listing-margin-gutter
+ [screen-end-inset] $grid-docked-mid-listing-page-gutter-end
+ [screen-end];
+}
+
+// Plain Grid Definitions
+@mixin page-columns-default-wide {
+ @include page-columns();
+ grid-template-columns:
+ [screen-start] $grid-default-wide-page-gutter-start
+ [screen-start-inset] $grid-default-wide-sidebar-gutter
+ [page-start page-start-inset] $grid-default-wide-sidebar-seg1
+ [body-start-outset] $grid-default-wide-sidebar-seg2
+ [body-start] $grid-default-wide-body-gutter-start
+ [body-content-start] $grid-default-wide-body
+ [body-content-end] $grid-default-wide-body-gutter-end
+ [body-end] $grid-default-wide-margin-seg3
+ [body-end-outset] $grid-default-wide-margin-seg2
+ [page-end-inset] $grid-default-wide-margin-seg1
+ [page-end] $grid-default-wide-margin-gutter
+ [screen-end-inset] $grid-default-wide-page-gutter-end
+ [screen-end];
+}
+
+@mixin page-columns-default-mid {
+ @include page-columns();
+ grid-template-columns:
+ [screen-start] $grid-default-mid-page-gutter-start
+ [screen-start-inset page-start page-start-inset body-start-outset] $grid-default-mid-sidebar-gutter
+ [body-start] $grid-default-mid-body-gutter-start
+ [body-content-start] $grid-default-mid-body
+ [body-content-end] $grid-default-mid-body-gutter-end
+ [body-end] $grid-default-mid-margin-seg3
+ [body-end-outset] $grid-default-mid-margin-seg2
+ [page-end-inset] $grid-default-mid-margin-seg1
+ [page-end] $grid-default-mid-margin-gutter
+ [screen-end-inset] $grid-default-mid-page-gutter-end
+ [screen-end];
+}
+
+// Full content grid definitions
+@mixin page-columns-fullcontent-wide {
+ @include page-columns();
+ grid-template-columns:
+ [screen-start] $grid-default-full-wide-page-gutter-start
+ [screen-start-inset] $grid-default-full-wide-sidebar-gutter
+ [page-start page-start-inset] $grid-default-full-wide-sidebar-seg1
+ [body-start-outset] $grid-default-full-wide-sidebar-seg2
+ [body-start] $grid-default-full-wide-body-gutter-start
+ [body-content-start] $grid-default-full-wide-body
+ [body-content-end] $grid-default-full-wide-body-gutter-end
+ [body-end] $grid-default-full-wide-margin-seg2
+ [body-end-outset] $grid-default-full-wide-margin-seg1
+ [page-end-inset page-end] $grid-default-full-wide-margin-gutter
+ [screen-end-inset] $grid-default-full-wide-page-gutter-end;
+}
+
+@mixin page-columns-fullcontent-mid {
+ @include page-columns();
+ grid-template-columns:
+ [screen-start] $grid-default-full-mid-page-gutter-start
+ [screen-start-inset page-start page-start-inset body-start-outset] $grid-default-full-mid-sidebar-gutter
+ [body-start] $grid-default-full-mid-body-gutter-start
+ [body-content-start] $grid-default-full-mid-body
+ [body-content-end] $grid-default-full-mid-body-gutter-end
+ [body-end body-end-outset page-end-inset page-end] $grid-default-full-mid-margin-gutter
+ [screen-end-inset] $grid-default-full-mid-page-gutter-end
+ [screen-end];
+}
+
+// Listing content grid definitions
+@mixin page-columns-listing-wide {
+ @include page-columns();
+ grid-template-columns:
+ [screen-start] $grid-default-listing-wide-page-gutter-start
+ [screen-start-inset page-start] $grid-default-listing-wide-sidebar-seg1
+ [page-start-inset] $grid-default-listing-wide-sidebar-seg2
+ [body-start-outset] $grid-default-listing-wide-sidebar-seg3
+ [body-start] $grid-default-listing-wide-body-gutter-start
+ [body-content-start] $grid-default-listing-wide-body
+ [body-content-end] $grid-default-listing-wide-body-gutter-end
+ [body-end] $grid-default-listing-wide-sidebar-seg3
+ [body-end-outset] $grid-default-listing-wide-margin-seg2
+ [page-end-inset] $grid-default-listing-wide-sidebar-seg1
+ [page-end] $grid-default-listing-wide-margin-gutter
+ [screen-end-inset] $grid-default-listing-wide-page-gutter-end
+ [screen-end];
+}
+
+@mixin page-columns-listing-mid {
+ @include page-columns();
+ grid-template-columns:
+ [screen-start] $grid-default-listing-mid-page-gutter-start
+ [screen-start-inset page-start page-start-inset body-start-outset] $grid-default-listing-mid-sidebar-gutter
+ [body-start] $grid-default-listing-mid-body-gutter-start
+ [body-content-start] $grid-default-listing-mid-body
+ [body-content-end body-end body-end-outset page-end-inset page-end] $grid-default-listing-mid-margin-gutter
+ [screen-end-inset] $grid-default-listing-mid-page-gutter-end
+ [screen-end];
+}
+
+// Slim content grid definitions
+@mixin page-columns-slimcontent-wide {
+ @include page-columns();
+ grid-template-columns:
+ [screen-start] $grid-default-slim-wide-page-gutter-start
+ [screen-start-inset] $grid-default-slim-wide-sidebar-gutter
+ [page-start page-start-inset] $grid-default-slim-wide-sidebar-seg1
+ [body-start-outset] $grid-default-slim-wide-sidebar-seg2
+ [body-start] $grid-default-slim-wide-body-gutter-start
+ [body-content-start] $grid-default-slim-wide-body
+ [body-content-end] $grid-default-slim-wide-body-gutter-end
+ [body-end] $grid-default-slim-wide-sidebar-seg3
+ [body-end-outset] $grid-default-slim-wide-margin-seg2
+ [page-end-inset] $grid-default-slim-wide-sidebar-seg1
+ [page-end] $grid-default-slim-wide-margin-gutter
+ [screen-end-inset] $grid-default-slim-wide-page-gutter-end
+ [screen-end];
+}
+
+@mixin page-columns-slimcontent-mid {
+ @include page-columns();
+ grid-template-columns:
+ [screen-start] $grid-default-slim-mid-page-gutter-start
+ [screen-start-inset page-start page-start-inset body-start-outset] $grid-default-slim-mid-sidebar-gutter
+ [body-start] $grid-default-slim-mid-body-gutter-start
+ [body-content-start] $grid-default-slim-mid-body
+ [body-content-end] $grid-default-slim-mid-body-gutter-end
+ [body-end] $grid-default-slim-mid-margin-seg3
+ [body-end-outset] $grid-default-slim-mid-margin-seg2
+ [page-end-inset] $grid-default-slim-mid-margin-seg1
+ [page-end] $grid-default-slim-mid-margin-gutter
+ [screen-end-inset] $grid-default-slim-mid-page-gutter-end
+ [screen-end];
+}
+
+// TOC left grid
+@mixin page-columns-tocleft-wide {
+ @include page-columns();
+ grid-template-columns:
+ [screen-start] $grid-default-toc-wide-page-gutter-start
+ [screen-start-inset] $grid-default-toc-wide-sidebar-gutter
+ [page-start] $grid-default-toc-wide-sidebar-seg1
+ [page-start-inset] $grid-default-toc-wide-sidebar-seg2
+ [body-start-outset] $grid-default-toc-wide-sidebar-seg3
+ [body-start] $grid-default-toc-wide-body-gutter-start
+ [body-content-start] $grid-default-toc-wide-body
+ [body-content-end] $grid-default-toc-wide-body-gutter-end
+ [body-end] $grid-default-toc-wide-margin-seg3
+ [body-end-outset] $grid-default-toc-wide-margin-seg2
+ [page-end-inset] $grid-default-toc-wide-margin-seg1
+ [page-end] $grid-default-toc-wide-margin-gutter
+ [screen-end-inset] $grid-default-toc-wide-page-gutter-end
+ [screen-end];
+}
+
+@mixin page-columns-tocleft-mid {
+ @include page-columns();
+ grid-template-columns:
+ [screen-start] $grid-default-toc-mid-page-gutter-start
+ [screen-start-inset] $grid-default-toc-mid-sidebar-gutter
+ [page-start] $grid-default-toc-mid-sidebar-seg1
+ [page-start-inset] $grid-default-toc-mid-sidebar-seg2
+ [body-start-outset] $grid-default-toc-mid-sidebar-seg3
+ [body-start] $grid-default-toc-mid-body-gutter-start
+ [body-content-start] $grid-default-toc-mid-body
+ [body-content-end] $grid-default-toc-mid-body-gutter-end
+ [body-end body-end-outset page-end-inset page-end] $grid-default-toc-mid-margin-gutter
+ [screen-end-inset] $grid-default-toc-mid-page-gutter-end
+ [screen-end];
+}
+
+// Small size responsive grid
+// All grids share this fully collapsed mode which hides
+// the sidebar and margin
+@mixin grid-template-columns-narrow {
+ grid-template-columns:
+ [screen-start] $grid-page-gutter-start
+ [screen-start-inset page-start page-start-inset body-start-outset body-start body-content-start] minmax(
+ 0px,
+ 1fr
+ )
+ [body-content-end body-end body-end-outset page-end-inset page-end screen-end-inset] $grid-page-gutter-end
+ [screen-end];
+}
+
+
+// quarto-scss-analysis-annotation { "origin": "'mixins' section from user-defined SCSS" }
+
+
+
+// quarto-scss-analysis-annotation { "origin": "'rules' section from format" }
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+@import "mixins/banner";
+@include bsBanner("");
+
+
+// scss-docs-start import-stack
+// Configuration
+@import "variables-dark";
+@import "maps";
+@import "utilities";
+
+// Layout & components
+@import "root";
+@import "reboot";
+@import "type";
+@import "images";
+@import "containers";
+@import "grid";
+@import "tables";
+@import "forms";
+@import "buttons";
+@import "transitions";
+@import "dropdown";
+@import "button-group";
+@import "nav";
+@import "navbar";
+@import "card";
+@import "accordion";
+@import "breadcrumb";
+@import "pagination";
+@import "badge";
+@import "alert";
+@import "progress";
+@import "list-group";
+@import "close";
+@import "toasts";
+@import "modal";
+@import "tooltip";
+@import "popover";
+@import "carousel";
+@import "spinners";
+@import "offcanvas";
+@import "placeholders";
+
+// Helpers
+@import "helpers";
+
+// Utilities
+@import "utilities/api";
+// scss-docs-end import-stack
+
+@import "spacer";
+@import "tab-fill";
+@import "color-utilities";
+
+$spacer: 1rem !default;
+
+:root {
+ // Controls default spacing in layout containers (e.g, layout_columns())
+ --bslib-spacer: #{$spacer};
+ --bslib-mb-spacer: var(--bslib-spacer, 1rem);
+}
+
+// Some things like card(), p(), inputs, etc. want some margin-bottom by default
+// so you can plop them anywhere and you get spacing between rows. However, now
+// that we have layout utilities like page_fillable(), layout_columns(),
+// layout_sidebar(), etc. where we can control the gap between rows/columns, we
+// need a way to reset those margin-bottom to 0 in those special contexts
+//
+// We do this by adding this class to components (e.g., card())...
+.bslib-mb-spacing {
+ margin-bottom: var(--bslib-mb-spacer);
+}
+
+// ...And this class for layout containers (e.g, layout_columns())
+.bslib-gap-spacing {
+ gap: var(--bslib-mb-spacer);
+ > .bslib-mb-spacing, > .form-group, > p, > pre {
+ margin-bottom: 0;
+ }
+}
+
+// We generally don't want mb spacing for _activated_ fill items
+.html-fill-container > .html-fill-item.bslib-mb-spacing {
+ margin-bottom: 0;
+}
+// color-contrast() was introduced in Bootstrap 5.
+// We include our own version for a few reasons:
+// 1. Easily turn off warnings options(bslib.color_contrast_warnings=F)
+// 2. Allow Bootstrap 3 & 4 to use color-contrast() in variable definitions
+// 3. Allow Bootstrap 3 & 4 to use bs_get_contrast()
+
+// Also note that color-contrast() lives in sass-utils since projects like Quarto
+// and flexdashboard currently assume it exists there....
+@import "../sass-utils/color-contrast.scss";
+
+
+@function is-css-variable($x) {
+ @if (type-of($x) != string) {
+ @return false;
+ } @else {
+ @return str-slice($x, 1, 6) == 'var(--';
+ }
+}
+
+$bslib-enable-color-utilities: $bootstrap-version >= 5 !default;
+
+@if ($bslib-enable-color-utilities) {
+ $bslib-gradient-colors: () !default;
+
+ $bslib-gradient-colors-defaults: ();
+ $bslib-color-names: ("blue", "indigo", "purple", "pink", "red", "orange", "yellow", "green", "teal", "cyan");
+
+ @each $name in $bslib-color-names {
+ @if (map-has-key($colors, $name)) {
+ $bslib-gradient-colors-defaults: map-merge(
+ $bslib-gradient-colors-defaults,
+ ($name: map-get($colors, $name))
+ );
+ }
+ }
+
+ $bslib-gradient-colors: map-merge(
+ $bslib-gradient-colors-defaults,
+ $bslib-gradient-colors
+ );
+
+ // Named color background and foreground utility classes ---------------------
+ @each $name, $color in $bslib-gradient-colors {
+ .bg-#{$name} {
+ --bslib-color-bg: #{$color};
+ --bslib-color-fg: #{color-contrast($color)};
+ background-color: var(--bslib-color-bg);
+ color: var(--bslib-color-fg);
+ }
+
+ .text-#{$name} {
+ --bslib-color-fg: #{$color};
+ color: var(--bslib-color-fg);
+ }
+ }
+
+ // Fill in the `--color-*` variables
+ @each $name, $color in $theme-colors {
+ .text-#{$name} {
+ --bslib-color-fg: #{$color};
+ }
+ .bg-#{$name} {
+ --bslib-color-bg: #{$color};
+ --bslib-color-fg: #{color-contrast($color)};
+ }
+ }
+
+ // Gradient backgrounds ------------------------------------------------------
+ //
+ // Creates gradient background for every named color pair. Users can add
+ // additional colors into the mix by setting $bslib-gradient-colors to a map of
+ // color names to colors. Creates class names like: .bg-gradient-{from}-{to}.
+ @each $name1, $color1 in $bslib-gradient-colors {
+ @each $name2, $color2 in $bslib-gradient-colors {
+ @if $name1 != $name2 {
+ .bg-gradient-#{$name1}-#{$name2} {
+ $color-mid: mix($color1, $color2, 60%);
+ $color-fg: color-contrast($color-mid);
+
+ --bslib-color-fg: #{$color-fg};
+ --bslib-color-bg: #{$color-mid};
+
+ background: linear-gradient(
+ var(--bg-gradient-deg, 140deg),
+ $color1 var(--bg-gradient-start, 36%),
+ $color2 var(--bg-gradient-end, 180%)
+ ) $color-mid;
+ color: $color-fg;
+ }
+ }
+ }
+ }
+}
+
+.tab-content {
+ // Workaround for pkgdown's CSS to make tab-pane all a consistent height
+ // https://github.com/r-lib/pkgdown/blob/956f07/inst/BS5/assets/pkgdown.scss#L342-L355
+ >.tab-pane.html-fill-container {
+ display: none;
+ }
+
+ // Take precedence over Bootstrap's `display:block` rule
+ >.active.html-fill-container {
+ display: flex;
+ }
+
+ // Another workaround for pkgdown adding extra padding we didn't ask for
+ // https://github.com/r-lib/pkgdown/blob/956f07/inst/BS5/assets/pkgdown.scss#L335-L337
+ &.html-fill-container {
+ padding: 0;
+ }
+}
+
+$bslib-value-box-enable-border: "auto" !default; // "auto" | "never" | "always"
+$bslib-value-box-enable-shadow: $enable-shadows !default;
+$bslib-value-box-horizontal-break-point: 300px;
+
+:root {
+ --bslib-value-box-shadow: #{if($bslib-value-box-enable-shadow, #{$box-shadow}, none)};
+ // value box border width is set to "-auto-yes" when the card has .border-auto
+ // or "-auto-no" by default. These cards all use "-baseline", where the border
+ // can be disabled entirely by setting $bslib-value-box-enable-border: "never"
+ // or --bslib-value-box-border-width-baseline: 0. In "auto" mode, the border
+ // is disabled without the border-auto class, or disabled if shadow is enabled.
+ --bslib-value-box-border-width-auto-yes: #{if($bslib-value-box-enable-shadow, 0, var(--bslib-value-box-border-width-baseline))};
+ --bslib-value-box-border-width-auto-no: #{if($bslib-value-box-enable-border == "auto", 0, var(--bslib-value-box-border-width-baseline))};
+ --bslib-value-box-border-width-baseline: #{if($bslib-value-box-enable-border == "never", 0, $card-border-width)};
+}
+
+// CSS variables that start with --- (3 dashes instead of 2) are private vars
+// that are set by user arguments in the R calls. The CSS properties below only
+// apply to the default value box style; the standard way to theme individual
+// value boxes is with CSS classes on the value box container.
+// :root {
+// --bslib-value-box-color:;
+// --bslib-value-box-bg:;
+// --bslib-value-box-border-color:;
+// }
+
+.bslib-value-box {
+ &.card {
+ // .card also sets box-shadow by default, likely to an empty css variable
+ box-shadow: var(--bslib-value-box-shadow);
+ }
+
+ border-width: var(--bslib-value-box-border-width-auto-no, var(--bslib-value-box-border-width-baseline));
+ &.border-auto {
+ border-width: var(--bslib-value-box-border-width-auto-yes, var(--bslib-value-box-border-width-baseline));
+ }
+
+ &.default {
+ --bslib-value-box-bg-default: var(--bs-card-bg, #{$body-bg});
+ --bslib-value-box-border-color-default: var(--bs-card-border-color, #{$card-border-color});
+ color: var(--bslib-value-box-color);
+ background-color: var(--bslib-value-box-bg, var(--bslib-value-box-bg-default));
+ border-color: var(--bslib-value-box-border-color, var(--bslib-value-box-border-color-default));
+ }
+
+ container-name: bslib-value-box;
+ container-type: inline-size;
+
+ .value-box-grid {
+ display: grid;
+ grid-template-areas: "left right";
+ align-items: center;
+ overflow: hidden;
+ }
+
+ .value-box-showcase {
+ height: 100%;
+ max-height: var(---bslib-value-box-showcase-max-h, 100%);
+ &, > .html-fill-item {
+ width: 100%;
+ }
+ }
+
+ &[data-full-screen="true"] {
+ .value-box-showcase {
+ max-height: var(---bslib-value-box-showcase-max-h-fs, 100%);
+ }
+ }
+
+ // When value boxes get too small, we lay them out vertically using a container query.
+ // But we don't need this for mobile, where we have one box per row. This media query
+ // is the inverse of `@include media-breakpoint-down(sm)` but that mixin doesn't work
+ // inside nested queries.
+ @media screen and (min-width: breakpoint-max(sm, $grid-breakpoints)) {
+ @container bslib-value-box (max-width: #{$bslib-value-box-horizontal-break-point}) {
+ &:not(.showcase-bottom) .value-box-grid {
+ // override specificity of showcase layouts for small value boxes
+ grid-template-columns: 1fr !important;
+ grid-template-rows: auto auto;
+ grid-template-areas:
+ "top"
+ "bottom";
+
+ .value-box-showcase {
+ grid-area: top !important;
+ }
+
+ .value-box-area {
+ grid-area: bottom !important;
+ justify-content: end;
+ }
+ }
+ }
+ }
+
+ // Should also be fillable/fill (i.e., d-flex; flex: 1)
+ .value-box-area {
+ justify-content: center;
+ padding: 1.5rem 1rem;
+ font-size: .9rem;
+ font-weight: 500;
+ * {
+ margin-bottom: 0;
+ margin-top: 0;
+ }
+ }
+
+ .value-box-title {
+ @include bootstrap-heading-font-and-spacing($h6-font-size);
+ // add a non-breaking space to ensure it's not 0 height
+ &:empty::after {
+ content: '\00a0 ';
+ }
+ }
+
+ .value-box-value {
+ @include bootstrap-heading-font-and-spacing($h2-font-size);
+ // add a non-breaking space to ensure it's not 0 height
+ &:empty::after {
+ content: '\00a0 ';
+ }
+ }
+
+ // Should also be fillable/fill (i.e., d-flex; flex: 1)
+ .value-box-showcase {
+ align-items: center;
+ justify-content: center;
+ margin-top: auto;
+ margin-bottom: auto;
+ padding: 1rem;
+
+ .bi, .fa, .fab, .fas, .far {
+ opacity: .85;
+ min-width: 50px;
+ max-width: 125%;
+ }
+ // We set font size because {bsicons}/{fontawesome} both
+ // set height/width to 1em by default (as an inline style)
+ .bi, .fa, .fab, .fas, .far { font-size: 4rem; }
+ }
+
+
+ &.showcase-top-right {
+ .value-box-grid {
+ grid-template-columns: 1fr var(---bslib-value-box-showcase-w, 50%);
+
+ .value-box-showcase {
+ grid-area: right;
+ margin-left: auto;
+ align-self: start;
+ align-items: end;
+ padding-left: 0;
+ padding-bottom: 0;
+ }
+
+ .value-box-area {
+ grid-area: left;
+ align-self: end;
+ }
+ }
+
+ &[data-full-screen="true"] {
+ .value-box-grid {
+ grid-template-columns: auto var(---bslib-value-box-showcase-w-fs, 1fr);
+ > div {
+ align-self: center;
+ }
+ }
+ }
+
+ &:not([data-full-screen="true"]) {
+ .value-box-showcase {
+ margin-top: 0;
+ }
+
+ @container bslib-value-box (max-width: #{$bslib-value-box-horizontal-break-point}) {
+ .value-box-grid {
+ .value-box-showcase { // reset padding on showcase_container
+ padding-left: 1rem;
+ }
+ }
+ }
+ }
+ }
+
+ &.showcase-left-center {
+ .value-box-grid {
+ grid-template-columns: var(---bslib-value-box-showcase-w, 30%) auto;
+ }
+
+ &[data-full-screen="true"] {
+ .value-box-grid {
+ grid-template-columns: var(---bslib-value-box-showcase-w-fs, 1fr) auto;
+ }
+ }
+
+ &:not([data-fill-screen="true"]) {
+ .value-box-grid {
+ .value-box-showcase {
+ grid-area: left;
+ }
+
+ .value-box-area {
+ grid-area: right;
+ }
+ }
+ }
+ }
+
+ &.showcase-bottom {
+ .value-box-grid {
+ grid-template-columns: 1fr;
+ grid-template-rows: 1fr var(---bslib-value-box-showcase-h, auto);
+ grid-template-areas:
+ "top"
+ "bottom";
+ overflow: hidden;
+
+ .value-box-showcase {
+ grid-area: bottom;
+ padding: 0;
+ margin: 0;
+ }
+
+ .value-box-area {
+ grid-area: top;
+ }
+ }
+
+ &[data-full-screen="true"] {
+ .value-box-grid {
+ grid-template-rows: 1fr var(---bslib-value-box-showcase-h-fs, 2fr);
+
+ .value-box-showcase {
+ padding: 1rem;
+ }
+ }
+ }
+ }
+}
+
+@include color-mode(dark) {
+ .bslib-value-box {
+ // Bootstrap doesn't have a dark shadow, but the default isn't quite right
+ --bslib-value-box-shadow: 0 0.5rem 1rem rgb(0 0 0 / 50%);
+ }
+}
+
+.bslib-grid {
+ display: grid !important;
+ gap: var(--bslib-spacer, 1rem);
+ height: var(--bslib-grid-height);
+ &.grid {
+ // Don't let intrinsic width of a column affect the width of grid cols
+ grid-template-columns: repeat(var(--bs-columns, 12), minmax(0, 1fr));
+ // For some reason, Bootstrap sets `grid-template-rows: 1fr` by default, which
+ // is problematic for a multi-row filling layout. This fixes it...
+ // > page_fillable(layout_columns(c(12, 12), plotly::plot_ly(), plotly::plot_ly()))
+ grid-template-rows: unset;
+ grid-auto-rows: var(--bslib-grid--row-heights);
+ @include bslib-breakpoints-css-vars('bslib-grid--row-heights', map-keys($grid-breakpoints));
+ }
+
+ & > * > .shiny-input-container {
+ width: 100%;
+ }
+}
+
+.bslib-grid-item {
+ grid-column: auto/span 1;
+}
+
+@include media-breakpoint-down(md) {
+ // collapse all columns to a single column below medium (by default only)
+ .bslib-grid-item {
+ grid-column: 1 / -1;
+ }
+}
+
+@include media-breakpoint-down(sm) {
+ // with each "row" taking its natural height
+ .bslib-grid {
+ grid-template-columns: 1fr !important;
+ height: var(--bslib-grid-height-mobile);
+ &.grid {
+ height: unset !important;
+ grid-auto-rows: var(--bslib-grid--row-heights--xs, auto);
+ }
+ }
+}
+
+.navbar+.container-fluid {
+
+ // When the tab/page is fillable, undo the padding on the container-fluid
+ // (in this case, the user has control over padding/gap)
+ &:has(> .tab-content > .tab-pane.active.html-fill-container) {
+ padding-left: 0;
+ padding-right: 0;
+ }
+
+ // When the tab/page is fillable, add sensible default padding
+ >.tab-content>.tab-pane.active.html-fill-container {
+ padding: var(--bslib-spacer, 1rem);
+ gap: var(--bslib-spacer, 1rem);
+
+ // ...but if it holds a single sidebar layout, remove the padding
+ &:has(> .bslib-sidebar-layout:only-child) {
+ padding: 0;
+ }
+
+ // And smart border defaults for nav_panel("Foo", layout_sidebar())
+ >.bslib-sidebar-layout:only-child {
+ &:not([data-bslib-sidebar-border="true"]) {
+ border-left: none;
+ border-right: none;
+ border-bottom: none;
+ }
+
+ &:not([data-bslib-sidebar-border-radius="true"]) {
+ border-radius: 0;
+ }
+ }
+ }
+}
+
+// Make sure a border appears between the navbar and the sidebar layout
+// (especially important when page_navbar(inverse = FALSE, sidebar = sidebar())
+.navbar+div>.bslib-sidebar-layout {
+ border-top: var(--bslib-sidebar-border);
+}
+.bslib-card {
+ // TODO: allow a way to opt out
+ overflow: auto;
+
+ // Avoid "double padding" when two card_body()s are immediate siblings
+ .card-body + .card-body {
+ padding-top: 0;
+ }
+
+ .card-body {
+ overflow: auto;
+ p {
+ margin-top: 0;
+
+ &:last-child {
+ margin-bottom: 0;
+ }
+ }
+ }
+
+ .card-body {
+ max-height: var(--bslib-card-body-max-height, none);
+ }
+
+ &[data-full-screen="true"] > .card-body {
+ max-height: var(--bslib-card-body-max-height-full-screen, none);
+ }
+
+ .card-header {
+ .form-group {
+ margin-bottom: 0;
+ }
+ .selectize-control {
+ margin-bottom: 0;
+ // TODO: we should probably add this to selectize's SCSS since this actually makes selectInput()
+ // usable with width="fit-content"
+ .item {
+ margin-right: 1.15rem;
+ }
+ }
+ }
+
+ .card-footer {
+ margin-top: auto;
+ }
+
+ // For navs_tab_card(title = ...)
+ .bslib-navs-card-title {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: space-between;
+ align-items: center;
+ .nav {
+ margin-left: auto;
+ }
+ }
+
+ .bslib-sidebar-layout:not([data-bslib-sidebar-border="true"]) {
+ border: none;
+ }
+ .bslib-sidebar-layout:not([data-bslib-sidebar-border-radius="true"]) {
+ border-top-left-radius: 0;
+ border-top-right-radius: 0;
+ }
+
+}
+
+
+/*************************************************
+* Full screen card logic
+*************************************************/
+
+[data-full-screen="true"] {
+ position: fixed;
+ inset: 3.5rem 1rem 1rem;
+ height: auto !important;
+ max-height: none !important;
+ width: auto !important;
+ z-index: $zindex-popover;
+}
+
+.bslib-full-screen-enter {
+ display: none;
+ position: absolute;
+ bottom: var(--bslib-full-screen-enter-bottom, 0.2rem);
+ right: var(--bslib-full-screen-enter-right, 0);
+ top: var(--bslib-full-screen-enter-top);
+ left: var(--bslib-full-screen-enter-left);
+ color: var(--bslib-color-fg, var(--bs-card-color));
+ background-color: var(--bslib-color-bg, var(--bs-card-bg, var(--bs-body-bg)));
+ border: var(--bs-card-border-width) solid var(--bslib-color-fg, var(--bs-card-border-color));
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
+ margin: 0.2rem 0.4rem;
+ padding: 0.55rem !important;
+ font-size: .8rem;
+ cursor: pointer;
+ opacity: 0.7;
+ &:hover { opacity: 1; }
+ z-index: $zindex-popover;
+}
+
+.card[data-full-screen="false"]:hover > * > .bslib-full-screen-enter {
+ display: block;
+}
+
+// Hide all enter-full-screen buttons when *any* card is full-screenified
+.bslib-has-full-screen .card:hover > * > .bslib-full-screen-enter {
+ display: none;
+}
+
+// Only allow full_screen on desktop screens
+@include media-breakpoint-down(sm) {
+ .bslib-full-screen-enter { display: none !important; }
+}
+
+.bslib-full-screen-exit {
+ position: relative;
+ top: 1.35rem;
+ font-size: 0.9rem;
+ cursor: pointer;
+ text-decoration: none;
+ display: flex;
+ float: right;
+ margin-right: 2.15rem;
+ align-items: center;
+ color: rgba(var(--bs-body-bg-rgb), 0.8);
+ &:hover {
+ color: rgba(var(--bs-body-bg-rgb), 1);
+ }
+ svg {
+ margin-left: 0.5rem;
+ font-size: 1.5rem;
+ }
+}
+
+#bslib-full-screen-overlay {
+ position: fixed;
+ inset: 0;
+ background-color: rgba(var(--bs-body-color-rgb), 0.6);
+ backdrop-filter: blur(2px);
+ -webkit-backdrop-filter: blur(2px);
+ z-index: $zindex-popover - 1;
+ animation: bslib-full-screen-overlay-enter 400ms cubic-bezier(.6,.02,.65,1) forwards;
+}
+
+@keyframes bslib-full-screen-overlay-enter {
+ 0% {
+ opacity: 0;
+ }
+ 100% {
+ opacity: 1;
+ }
+}
+
+$bslib-sidebar-bg: rgba(var(--bs-emphasis-color-rgb, 0,0,0), 0.05) !default;
+$bslib-sidebar-fg: var(--bs-emphasis-color, black) !default;
+$bslib-sidebar-toggle-bg: rgba(var(--bs-emphasis-color-rgb, 0,0,0), 0.1) !default;
+$bslib-sidebar-border: var(--bs-card-border-width, #{$card-border-width}) solid var(--bs-card-border-color, #{$card-border-color}) !default;
+$bslib-sidebar-column-sidebar: Min(calc(100% - var(--bslib-sidebar-icon-size)), var(--bslib-sidebar-width, 250px));
+
+
+.bslib-sidebar-layout {
+ --bslib-sidebar-transition-duration: 500ms;
+ --bslib-sidebar-transition-easing-x: cubic-bezier(0.8, 0.78, 0.22, 1.07);
+ --bslib-sidebar-border: #{$bslib-sidebar-border};
+ --bslib-sidebar-border-radius: var(--bs-border-radius);
+ --bslib-sidebar-vert-border: #{$bslib-sidebar-border};
+ --bslib-sidebar-bg: #{$bslib-sidebar-bg};
+ --bslib-sidebar-fg: #{$bslib-sidebar-fg};
+ --bslib-sidebar-main-fg: var(--bs-card-color, var(--bs-body-color));
+ --bslib-sidebar-main-bg: var(--bs-card-bg, var(--bs-body-bg));
+ --bslib-sidebar-toggle-bg: #{$bslib-sidebar-toggle-bg};
+ --bslib-sidebar-padding: calc(var(--bslib-spacer) * 1.5);
+ --bslib-sidebar-icon-size: var(--bslib-spacer, 1rem);
+ --bslib-sidebar-icon-button-size: calc(var(--bslib-sidebar-icon-size, 1rem) * 2);
+ --bslib-sidebar-padding-icon: calc(var(--bslib-sidebar-icon-button-size, 2rem) * 1.5);
+ // We intentionally don't give a value here, but it could be set by someone else
+ // --bslib-collapse-toggle-border: ;
+ --bslib-collapse-toggle-border-radius: var(--bs-border-radius, #{$border-radius});
+ --bslib-collapse-toggle-transform: 0deg;
+ --bslib-sidebar-toggle-transition-easing: cubic-bezier(1, 0, 0, 1);
+ --bslib-collapse-toggle-right-transform: 180deg;
+ --bslib-sidebar-column-main: minmax(0, 1fr);
+
+ display: grid !important;
+ grid-template-columns: $bslib-sidebar-column-sidebar var(--bslib-sidebar-column-main);
+ position: relative;
+
+ @include transition(grid-template-columns ease-in-out var(--bslib-sidebar-transition-duration));
+
+ border: var(--bslib-sidebar-border);
+ border-radius: var(--bslib-sidebar-border-radius);
+
+ &[data-bslib-sidebar-border="false"] {
+ border: none;
+ }
+ &[data-bslib-sidebar-border-radius="false"] {
+ border-radius: initial;
+ }
+
+ > .main, > .sidebar {
+ grid-row: 1 / 2;
+ border-radius: inherit;
+ overflow: auto;
+ }
+
+ > .main {
+ grid-column: 2 / 3;
+ border-top-left-radius: 0;
+ border-bottom-left-radius: 0;
+ padding: var(--bslib-sidebar-padding);
+ transition: padding var(--bslib-sidebar-transition-easing-x) var(--bslib-sidebar-transition-duration);
+ color: var(--bslib-sidebar-main-fg);
+ background-color: var(--bslib-sidebar-main-bg);
+ }
+
+ > .sidebar {
+ grid-column: 1 / 2;
+ width: 100%;
+ height: 100%;
+ border-right: var(--bslib-sidebar-vert-border);
+ border-top-right-radius: 0;
+ border-bottom-right-radius: 0;
+ color: var(--bslib-sidebar-fg);
+ background-color: var(--bslib-sidebar-bg);
+ backdrop-filter: blur(5px);
+
+ > .sidebar-content {
+ display: flex;
+ flex-direction: column;
+ gap: var(--bslib-spacer, 1rem);
+ padding: var(--bslib-sidebar-padding);
+ // Add space for the toggle button (removed if sidebar is always open)
+ padding-top: var(--bslib-sidebar-padding-icon);
+
+ > :last-child:not(.sidebar-title) {
+ // Remove margin-bottom from the last item because sidebar has padding.
+ // We make an exception for .sidebar-title because it might be common to
+ // have a title and bare text nodes (that don't count as children).
+ margin-bottom: 0;
+ }
+
+ > .accordion {
+ margin-left: calc(-1 * var(--bslib-sidebar-padding));
+ margin-right: calc(-1 * var(--bslib-sidebar-padding));
+ &:last-child {
+ margin-bottom: calc(-1 * var(--bslib-sidebar-padding));
+ }
+ &:not(:last-child) {
+ margin-bottom: $spacer;
+ }
+ .accordion-body {
+ display: flex;
+ flex-direction: column;
+ }
+ }
+
+ // Accordions in sidebars are made flush with `.accordion-flush`, which
+ // removes the top and bottom border of the first or last accordion item.
+ // But in our usage, the accordions might not be the first or last item in
+ // the sidebar. In that case, it's better to keep the top/bottom borders.
+ > .accordion:not(:first-child) .accordion-item:first-child {
+ border-top: var(--#{$prefix}accordion-border-width) solid var(--#{$prefix}accordion-border-color);
+ }
+ > .accordion:not(:last-child) .accordion-item:last-child {
+ border-bottom: var(--#{$prefix}accordion-border-width) solid var(--#{$prefix}accordion-border-color);
+ }
+
+ &.has-accordion > .sidebar-title {
+ border-bottom: none;
+ padding-bottom: 0;
+ }
+ }
+
+ .shiny-input-container {
+ width: 100%;
+ }
+ }
+
+ &[data-bslib-sidebar-open="always"] {
+ > .sidebar > .sidebar-content {
+ // Always-open sidebars don't have a toggle & can use normal top padding
+ padding-top: var(--bslib-sidebar-padding);
+ }
+ }
+
+ > .collapse-toggle {
+ grid-row: 1 / 2;
+ grid-column: 1 / 2;
+ display: inline-flex;
+ align-items: center;
+ position: absolute;
+ right: calc(var(--bslib-sidebar-icon-size));
+ top: calc(var(--bslib-sidebar-icon-size, 1rem) / 2);
+ border: none;
+ border-radius: var(--bslib-collapse-toggle-border-radius);
+ height: var(--bslib-sidebar-icon-button-size, 2rem);
+ width: var(--bslib-sidebar-icon-button-size, 2rem);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ padding: 0;
+ color: var(--bslib-sidebar-fg);
+ background-color: unset; // don't take `button` background color
+ transition:
+ color var(--bslib-sidebar-transition-easing-x) var(--bslib-sidebar-transition-duration),
+ top var(--bslib-sidebar-transition-easing-x) var(--bslib-sidebar-transition-duration),
+ right var(--bslib-sidebar-transition-easing-x) var(--bslib-sidebar-transition-duration),
+ left var(--bslib-sidebar-transition-easing-x) var(--bslib-sidebar-transition-duration);
+
+ &:hover {
+ background-color: var(--bslib-sidebar-toggle-bg);
+ }
+
+ > .collapse-icon {
+ opacity: 0.8;
+ width: var(--bslib-sidebar-icon-size);
+ height: var(--bslib-sidebar-icon-size);
+ transform: rotateY(var(--bslib-collapse-toggle-transform));
+ // N.B. since mobile view won't trigger a transition of grid-template-columns,
+ // we transition this toggle to ensure _some_ transition event always happens.
+ transition: transform var(--bslib-sidebar-toggle-transition-easing) var(--bslib-sidebar-transition-duration);
+ }
+
+ &:hover > .collapse-icon {
+ opacity: 1;
+ }
+ }
+
+ .sidebar-title {
+ font-size: $font-size-base * 1.25;
+ line-height: $line-height-sm;
+ margin-top: 0;
+ margin-bottom: $spacer;
+ padding-bottom: $spacer;
+ border-bottom: var(--bslib-sidebar-border);
+ }
+
+ &.sidebar-right {
+ grid-template-columns: var(--bslib-sidebar-column-main) $bslib-sidebar-column-sidebar;
+
+ > .main {
+ grid-column: 1 / 2;
+ border-top-right-radius: 0;
+ border-bottom-right-radius: 0;
+ border-top-left-radius: inherit;
+ border-bottom-left-radius: inherit;
+ }
+
+ > .sidebar {
+ grid-column: 2 / 3;
+ border-right: none;
+ border-left: var(--bslib-sidebar-vert-border);
+ border-top-left-radius: 0;
+ border-bottom-left-radius: 0;
+ }
+
+ > .collapse-toggle {
+ grid-column: 2 / 3;
+ left: var(--bslib-sidebar-icon-size);
+ right: unset;
+ border: var(--bslib-collapse-toggle-border);
+ > .collapse-icon {
+ transform: rotateY(var(--bslib-collapse-toggle-right-transform));
+ }
+ }
+ }
+
+ &.sidebar-collapsed {
+ --bslib-collapse-toggle-transform: 180deg;
+ --bslib-collapse-toggle-right-transform: 0deg;
+ --bslib-sidebar-vert-border: none;
+
+ grid-template-columns: 0 minmax(0, 1fr);
+
+ &.sidebar-right {
+ grid-template-columns: minmax(0, 1fr) 0;
+ }
+
+ // Hide the sidebar contents after it's done transitioning so that
+ // those contents don't impact the overall layout (i.e., height)
+ &:not(.transitioning) {
+ // Putting `display:none` on .sidebar would change the number of columns
+ // in the grid, and I don't think we can transition between those states
+ > .sidebar > * {
+ display: none;
+ }
+ }
+
+ > .main {
+ border-radius: inherit;
+ }
+
+ &:not(.sidebar-right) > .main {
+ padding-left: var(--bslib-sidebar-padding-icon);
+ }
+ &.sidebar-right > .main {
+ padding-right: var(--bslib-sidebar-padding-icon);
+ }
+
+ > .collapse-toggle {
+ color: var(--bslib-sidebar-main-fg);
+ // The CSS variable (set via JS) is here to help avoid overlapping toggles
+ top: calc(
+ var(--bslib-sidebar-overlap-counter, 0) *
+ calc(var(--bslib-sidebar-icon-size) +
+ var(--bslib-sidebar-padding)
+ ) + var(--bslib-sidebar-icon-size, 1rem) / 2);
+ right: calc(-2.5 * var(--bslib-sidebar-icon-size) - var(--bs-card-border-width, 1px));
+ }
+
+ &.sidebar-right > .collapse-toggle {
+ left: calc(-2.5 * var(--bslib-sidebar-icon-size) - var(--bs-card-border-width, 1px));
+ right: unset;
+ }
+ }
+}
+
+@include media-breakpoint-up(sm) {
+ // hide sidebar content while we transition the parent .sidebar on desktop
+ // (on mobile the reveal happens immediately)
+ .bslib-sidebar-layout.transitioning > .sidebar > .sidebar-content {
+ display: none;
+ }
+}
+
+@include media-breakpoint-down(sm) {
+ .bslib-sidebar-layout {
+ // Tell sidebar init js we're on mobile for `sidebar(open = "desktop")`
+ &[data-bslib-sidebar-open="desktop"] {
+ --bslib-sidebar-js-init-collapsed: true;
+ }
+
+ &, &.sidebar-right {
+ // Remove sidebar borders in mobile view (except always-open, added below)
+ > .sidebar { border: none; }
+
+ // Main area takes up entire layout area to avoid layout shift when
+ // sidebar is expanded as an overlay.
+ > .main {
+ grid-column: 1 / 3;
+ }
+ }
+
+ // Always open sidebars become "flow" layouts in mobile view
+ &[data-bslib-sidebar-open="always"] {
+ display: block !important;
+ > .sidebar {
+ max-height: var(--bslib-sidebar-max-height-mobile);
+ overflow-y: auto;
+ border-top: var(--bslib-sidebar-vert-border);
+ }
+ }
+
+ &:not([data-bslib-sidebar-open="always"]) {
+ // Sidebar layer has to be lifted up to cover other (nested) sidebars
+ &:not(.sidebar-collapsed) {
+ > .sidebar { z-index: 1; }
+ > .collapse-toggle { z-index: 1; }
+ }
+
+ // Either sidebar or main area take up entire layout depending on state
+ $full-closed: 100% 0;
+ $closed-full: 0 100%;
+ grid-template-columns: $full-closed;
+ &.sidebar-right {
+ grid-template-columns: $closed-full;
+ }
+
+ &.sidebar-collapsed {
+ grid-template-columns: $closed-full;
+ &.sidebar-right {
+ grid-template-columns: $full-closed;
+ }
+ }
+
+
+ // Keep padding on main contents when sidebar is expanded (avoid shifts)
+ &:not(.sidebar-right) > .main {
+ padding-left: var(--bslib-sidebar-padding-icon);
+ }
+ &.sidebar-right > .main {
+ padding-right: var(--bslib-sidebar-padding-icon);
+ }
+
+ // Make main contents transparent while sidebar is expanded
+ > .main {
+ opacity: 0;
+ transition: opacity var(--bslib-sidebar-transition-easing-x) var(--bslib-sidebar-transition-duration);
+ }
+ &.sidebar-collapsed > .main {
+ opacity: 1;
+ }
+ }
+ }
+}
+
+/* CSS behind nav_spacer() */
+@mixin nav-spacer() {
+ .nav:not(.nav-hidden) {
+ /* Make sure nav container is flexbox (they aren't in BS3) */
+ display: flex !important;
+ display: -webkit-flex !important;
+ // Logic for horizontal nav (e.g., navset_tab(), etc)
+ &:not(.nav-stacked):not(.flex-column) {
+ float: none !important;
+ > .bslib-nav-spacer {
+ margin-left: auto !important;
+ }
+ /* .form-inline doesn't vertically align in BS3? */
+ > .form-inline {
+ margin-top: auto;
+ margin-bottom: auto;
+ }
+ }
+ // Logic for vertical nav (e.g., navset_pill_list())
+ &.nav-stacked {
+ flex-direction: column;
+ -webkit-flex-direction: column;
+ height: 100%;
+ > .bslib-nav-spacer {
+ margin-top: auto !important;
+ }
+ }
+ }
+}
+
+/* BS4+ uses this mixin for configurable breakpoints */
+@if mixin-exists("media-breakpoint-up") {
+ @include media-breakpoint-up(sm) {
+ @include nav-spacer();
+ }
+} @else {
+ /* BS3 default navbar breakpoint */
+ @media (min-width: 768px) {
+ @include nav-spacer();
+ }
+}
+
+.accordion {
+ .accordion-header {
+ @include bootstrap-heading($h2-font-size);
+ margin-bottom: 0;
+ }
+ .accordion-icon:not(:empty) {
+ margin-right: 0.75rem;
+ display: flex; /* Without flex, the height/alignment is messed up */
+ }
+ .accordion-button:not(.collapsed) {
+ box-shadow: none;
+ // This none overrides the box-shadow applied to
+ // .accordion-button:focus (and, as a result, non-collapsed buttons
+ // won't show a visual indication of focus, #488).
+ // So, repeat the .accordion-button:focus below to give it a
+ // higher priority.
+ &:focus {
+ box-shadow: var(--#{$prefix}accordion-btn-focus-box-shadow);
+ }
+ }
+}
+
+$bslib-page-sidebar-title-bg: if($navbar-bg, $navbar-bg, $dark) !default;
+$bslib-page-sidebar-title-color: color-contrast($bslib-page-sidebar-title-bg) !default;
+$bslib-sidebar-padding: $spacer * 1.5 !default;
+
+:root {
+ --bslib-page-sidebar-title-bg: #{$bslib-page-sidebar-title-bg};
+ --bslib-page-sidebar-title-color: #{$bslib-page-sidebar-title-color};
+}
+
+.bslib-page-title {
+ background-color: var(--bslib-page-sidebar-title-bg);
+ color: var(--bslib-page-sidebar-title-color);
+ font-size: $h4-font-size;
+ font-weight: 300;
+ padding: var(--bslib-spacer, 1rem);
+ padding-left: $bslib-sidebar-padding;
+ margin-bottom: 0;
+ border-bottom: $border-width solid $border-color;
+}
+
+html {
+ height: 100%;
+}
+
+.bslib-page-fill {
+ width: 100%;
+ height: 100%;
+ margin: 0;
+ padding: var(--bslib-spacer, 1rem);
+ gap: var(--bslib-spacer, 1rem);
+}
+
+@include media-breakpoint-down(sm) {
+ .bslib-page-fill {
+ height: var(--bslib-page-fill-mobile-height, auto);
+ }
+}
+
+.html-fill-container {
+ display: flex;
+ flex-direction: column;
+ /* Prevent the container from expanding vertically or horizontally beyond its
+ parent's constraints. */
+ min-height: 0;
+ min-width: 0;
+}
+.html-fill-container > .html-fill-item {
+ /* Fill items can grow and shrink freely within
+ available vertical space in fillable container */
+ flex: 1 1 auto;
+ min-height: 0;
+ min-width: 0;
+}
+.html-fill-container > :not(.html-fill-item) {
+ /* Prevent shrinking or growing of non-fill items */
+ flex: 0 0 auto;
+}
+
+
+// quarto-scss-analysis-annotation { "origin": "'rules' section from Quarto" }
+
+
+
+
+
+.sidebar-item .chapter-number {
+ color: $body-color;
+}
+
+
+
+
+.quarto-container {
+ min-height: calc(100vh - 132px);
+}
+
+body.hypothesis-enabled {
+ #quarto-header {
+ margin-right: 16px;
+ }
+}
+
+footer.footer .nav-footer,
+#quarto-header > nav {
+ padding-left: 1em;
+ padding-right: 1em;
+}
+
+footer.footer div.nav-footer p:first-child {
+ margin-top: 0;
+}
+
+footer.footer div.nav-footer p:last-child {
+ margin-bottom: 0;
+}
+
+// content padding
+#quarto-content > * {
+ padding-top: $content-padding-top;
+}
+
+#quarto-content > #quarto-sidebar-glass {
+ padding-top: 0px;
+}
+
+@include media-breakpoint-down(lg) {
+ #quarto-content > * {
+ padding-top: 0;
+ }
+
+ #quarto-content .subtitle {
+ padding-top: $content-padding-top;
+ }
+
+ #quarto-content section:first-of-type h2:first-of-type {
+ margin-top: 1rem;
+ }
+}
+
+// headroom
+.headroom-target,
+header.headroom {
+ will-change: transform;
+ transition: position 200ms linear;
+ transition: all 200ms linear;
+}
+
+header.headroom--pinned {
+ transform: translateY(0%);
+}
+
+header.headroom--unpinned {
+ transform: translateY(-100%);
+}
+
+.navbar-container {
+ width: 100%;
+}
+
+.navbar-brand {
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+
+.navbar-brand-container {
+ max-width: calc(100% - 115px);
+ min-width: 0;
+ display: flex;
+ align-items: center;
+
+ @include media-breakpoint-up(lg) {
+ margin-right: 1em;
+ }
+}
+
+.navbar-brand.navbar-brand-logo {
+ margin-right: 4px;
+ display: inline-flex;
+}
+
+.navbar-toggler {
+ flex-basis: content;
+ flex-shrink: 0;
+}
+
+.navbar {
+ .navbar-brand-container {
+ order: $navbar-title-order;
+ }
+
+ .navbar-toggler {
+ order: $navbar-toggler-order;
+ }
+
+ .navbar-container > .navbar-nav {
+ order: $navbar-menu-order;
+ }
+
+ .navbar-container > .navbar-brand-container {
+ margin-left: 0 !important;
+ margin-right: 0 !important;
+ }
+
+ .navbar-collapse {
+ order: $navbar-menu-order;
+ }
+
+ #quarto-search {
+ order: $navbar-search-order;
+ margin-left: auto;
+ }
+}
+
+@include media-breakpoint-down(med) {
+ .navbar {
+ @if $navbar-toggle-position == "left" {
+ .navbar-toggler {
+ margin-right: 0.5em;
+ }
+ } @else {
+ #quarto-search {
+ margin-right: 0.5em;
+ }
+
+ .quarto-navbar-tools .dropdown-menu {
+ left: 0;
+ }
+ }
+ }
+
+ .navbar-collapse .quarto-navbar-tools {
+ margin-left: 0.5em;
+ }
+}
+
+.navbar-logo {
+ max-height: 24px;
+ width: auto;
+ padding-right: 4px;
+}
+
+nav .nav-item:not(.compact) {
+ padding-top: 1px;
+}
+
+nav .nav-link i,
+nav .dropdown-item i {
+ padding-right: 1px;
+}
+
+.navbar-expand-lg .navbar-nav .nav-link {
+ padding-left: 0.6rem;
+ padding-right: 0.6rem;
+}
+
+nav .nav-item.compact .nav-link {
+ padding-left: 0.5rem;
+ padding-right: 0.5rem;
+ font-size: 1.1rem;
+}
+
+.navbar {
+ .quarto-navbar-tools {
+ order: $navbar-tools-order;
+ div.dropdown {
+ display: inline-block;
+ }
+ .quarto-navigation-tool {
+ color: $navbar-fg;
+ }
+ .quarto-navigation-tool:hover {
+ color: $navbar-hl;
+ }
+ }
+}
+
+.navbar-nav .dropdown-menu {
+ min-width: 220px;
+ font-size: 0.9rem;
+}
+
+.navbar {
+ .navbar-nav {
+ .nav-link.dropdown-toggle::after {
+ opacity: 0.75;
+ vertical-align: 0.175em;
+ }
+ }
+
+ ul.dropdown-menu {
+ padding-top: 0;
+ padding-bottom: 0;
+ }
+ .dropdown-header {
+ text-transform: uppercase;
+ font-size: 0.8rem;
+ padding: 0 0.5rem;
+ }
+
+ .dropdown-item {
+ padding: 0.4rem 0.5rem;
+ & > i.bi {
+ margin-left: 0.1rem;
+ margin-right: 0.25em;
+ }
+ }
+}
+
+.sidebar #quarto-search {
+ margin-top: -1px;
+ svg.aa-SubmitIcon {
+ width: 16px;
+ height: 16px;
+ }
+}
+
+.sidebar-navigation a {
+ color: inherit;
+}
+
+.sidebar-title {
+ margin-top: 0.25rem;
+ padding-bottom: 0.5rem;
+ font-size: 1.3rem;
+ line-height: 1.6rem;
+ visibility: visible;
+}
+
+.sidebar-title > a {
+ font-size: inherit;
+ text-decoration: none;
+}
+
+.sidebar-title .sidebar-tools-main {
+ margin-top: -6px;
+}
+
+@include media-breakpoint-down(lg) {
+ #quarto-sidebar {
+ div.sidebar-header {
+ padding-top: 0.2em;
+ }
+ }
+}
+
+.sidebar-header-stacked .sidebar-title {
+ margin-top: 0.6rem;
+}
+
+.sidebar-logo {
+ max-width: 90%;
+ padding-bottom: 0.5rem;
+}
+
+.sidebar-logo-link {
+ text-decoration: none;
+}
+
+.sidebar-navigation li a {
+ text-decoration: none;
+}
+
+// Sidebar tools
+.sidebar-navigation .quarto-navigation-tool {
+ opacity: 0.7;
+ font-size: 0.875rem;
+}
+
+#quarto-sidebar > nav > .sidebar-tools-main {
+ margin-left: 14px;
+}
+
+.sidebar-tools-main {
+ display: inline-flex;
+ margin-left: 0px;
+ order: 2;
+}
+
+.sidebar-tools-main:not(.tools-wide) {
+ vertical-align: middle;
+}
+
+.sidebar-navigation .quarto-navigation-tool.dropdown-toggle::after {
+ display: none;
+}
+
+// Sidebar navigation items
+$sidebar-items-gap-spacing: 0.2em;
+$sidebar-section-indent: 0.5em;
+$sidebar-section-bottom-margin: 0.2em;
+
+.sidebar.sidebar-navigation > * {
+ padding-top: 1em;
+}
+
+.sidebar-item {
+ margin-bottom: $sidebar-items-gap-spacing;
+ line-height: 1rem;
+ margin-top: 0.4rem;
+}
+
+.sidebar-section {
+ padding-left: $sidebar-section-indent;
+ padding-bottom: $sidebar-section-bottom-margin;
+}
+
+.sidebar-item .sidebar-item-container {
+ // Positions the link and dongle
+ display: flex;
+ justify-content: space-between;
+ cursor: pointer;
+}
+
+.sidebar-item-toggle:hover {
+ cursor: pointer;
+}
+
+.sidebar-item .sidebar-item-toggle .bi {
+ // The dongle for opening and closing sections
+ font-size: 0.7rem;
+ text-align: center;
+}
+
+.sidebar-item .sidebar-item-toggle .bi-chevron-right::before {
+ transition: transform 200ms ease;
+}
+
+.sidebar-item
+ .sidebar-item-toggle[aria-expanded="false"]
+ .bi-chevron-right::before {
+ transform: none;
+}
+
+.sidebar-item
+ .sidebar-item-toggle[aria-expanded="true"]
+ .bi-chevron-right::before {
+ transform: rotate(90deg);
+}
+
+.sidebar-item-text {
+ width: 100%;
+}
+
+.sidebar-navigation .sidebar-divider {
+ margin-left: 0;
+ margin-right: 0;
+ margin-top: 0.5rem;
+ margin-bottom: 0.5rem;
+}
+
+// Toggle the top secondary navigation bar
+@include media-breakpoint-down(lg) {
+ .quarto-secondary-nav {
+ display: block;
+
+ button.quarto-search-button {
+ padding-right: 0em;
+ padding-left: 2em;
+ }
+
+ button.quarto-btn-toggle {
+ margin-left: -0.75rem;
+ margin-right: 0.15rem;
+ }
+
+ nav.quarto-title-breadcrumbs {
+ display: none;
+ }
+
+ nav.quarto-page-breadcrumbs {
+ display: flex;
+ align-items: center;
+ padding-right: 1em;
+ margin-left: -0.25em;
+
+ a {
+ text-decoration: none;
+ }
+
+ ol.breadcrumb {
+ margin-bottom: 0;
+ }
+ }
+ }
+}
+
+@include media-breakpoint-up(lg) {
+ .quarto-secondary-nav {
+ display: none;
+ }
+}
+
+.quarto-title-breadcrumbs .breadcrumb {
+ margin-bottom: 0.5em;
+ font-size: 0.9rem;
+
+ li:last-of-type {
+ a {
+ color: $text-muted;
+ }
+ }
+}
+
+$sidebar-hl: if(
+ $sidebar-hl,
+ sidebar-hl,
+ theme-contrast($nav-link-color, $sidebar-bg)
+);
+$sidebar-color: rgba($sidebar-fg, 1) !default;
+$sidebar-hover-color: rgba($sidebar-hl, 0.8) !default;
+$sidebar-active-color: $sidebar-hl !default;
+$sidebar-disabled-color: rgba($sidebar-fg, 0.75) !default;
+
+.quarto-secondary-nav .quarto-btn-toggle {
+ color: $sidebar-color;
+}
+
+.quarto-secondary-nav[aria-expanded="false"]
+ .quarto-btn-toggle
+ .bi-chevron-right::before {
+ transform: none;
+}
+
+.quarto-secondary-nav[aria-expanded="true"]
+ .quarto-btn-toggle
+ .bi-chevron-right::before {
+ transform: rotate(90deg);
+}
+
+.quarto-secondary-nav .quarto-btn-toggle .bi-chevron-right::before {
+ transition: transform 200ms ease;
+}
+
+.quarto-secondary-nav {
+ cursor: pointer;
+}
+
+.no-decor {
+ text-decoration: none;
+}
+
+.quarto-secondary-nav-title {
+ margin-top: 0.3em;
+ color: $sidebar-color;
+ padding-top: 4px;
+}
+
+.quarto-secondary-nav nav.quarto-page-breadcrumbs {
+ color: $sidebar-color;
+ a {
+ color: $sidebar-color;
+ }
+ a:hover {
+ color: $sidebar-hover-color;
+ }
+ .breadcrumb-item::before {
+ color: theme-dim($sidebar-color, 20%);
+ }
+}
+
+.breadcrumb-item {
+ line-height: 1.2rem;
+}
+
+div.sidebar-item-container {
+ color: $sidebar-color;
+ &:hover,
+ &:focus {
+ color: $sidebar-hover-color;
+ }
+
+ &.disabled {
+ color: $sidebar-disabled-color;
+ }
+
+ .active,
+ .show > .nav-link,
+ .sidebar-link > code {
+ color: $sidebar-active-color;
+ }
+}
+
+div.sidebar.sidebar-navigation.rollup.quarto-sidebar-toggle-contents,
+nav.sidebar.sidebar-navigation:not(.rollup) {
+ @if $sidebar-bg {
+ background-color: $sidebar-bg;
+ } @else {
+ background-color: $body-bg;
+ }
+}
+
+@if $sidebar-border {
+ .sidebar.sidebar-navigation:not(.rollup) {
+ border-right: 1px solid $table-border-color !important;
+ }
+}
+
+@include media-breakpoint-down(lg) {
+ .sidebar-navigation .sidebar-item a,
+ .nav-page .nav-page-text,
+ .sidebar-navigation {
+ font-size: $sidebar-font-size-collapse;
+ }
+
+ .sidebar-navigation ul.sidebar-section.depth1 .sidebar-section-item {
+ font-size: $sidebar-font-size-section-collapse;
+ }
+
+ .sidebar-logo {
+ display: none;
+ }
+
+ .sidebar.sidebar-navigation {
+ position: static;
+ border-bottom: 1px solid $table-border-color;
+ }
+
+ .sidebar.sidebar-navigation.collapsing {
+ position: fixed;
+ z-index: 1000;
+ }
+
+ .sidebar.sidebar-navigation.show {
+ position: fixed;
+ z-index: 1000;
+ }
+
+ .sidebar.sidebar-navigation {
+ min-height: 100%;
+ }
+
+ nav.quarto-secondary-nav {
+ @if $sidebar-bg {
+ background-color: $sidebar-bg;
+ } @else {
+ background-color: $body-bg;
+ }
+ border-bottom: 1px solid $table-border-color;
+ }
+
+ .quarto-banner nav.quarto-secondary-nav {
+ @if variable-exists(navbar-bg) {
+ background-color: $navbar-bg;
+ }
+
+ @if (variable-exists(navbar-fg)) {
+ color: $navbar-fg;
+ }
+ border-top: 1px solid $table-border-color;
+ }
+
+ .sidebar .sidebar-footer {
+ visibility: visible;
+ padding-top: 1rem;
+ position: inherit;
+ }
+
+ .sidebar-tools-collapse {
+ display: block;
+ }
+}
+
+#quarto-sidebar {
+ transition: width $sidebar-anim-duration ease-in;
+ > * {
+ padding-right: 1em;
+ }
+}
+
+@include media-breakpoint-down(lg) {
+ #quarto-sidebar .sidebar-menu-container {
+ white-space: nowrap;
+ min-width: 225px;
+ }
+
+ #quarto-sidebar.show {
+ transition: width $sidebar-anim-duration ease-out;
+ }
+}
+
+@include media-breakpoint-up(lg) {
+ #quarto-sidebar {
+ display: flex;
+ flex-direction: column;
+ }
+ .nav-page .nav-page-text,
+ .sidebar-navigation .sidebar-section .sidebar-item {
+ font-size: $sidebar-font-size-section;
+ }
+
+ .sidebar-navigation .sidebar-item {
+ font-size: $sidebar-font-size;
+ }
+
+ .sidebar.sidebar-navigation {
+ display: block;
+ position: sticky;
+ }
+
+ .sidebar-search {
+ width: 100%;
+ }
+
+ .sidebar .sidebar-footer {
+ visibility: visible;
+ }
+}
+
+@include media-breakpoint-up(lg) {
+ #quarto-sidebar-glass {
+ display: none;
+ }
+}
+
+@include media-breakpoint-down(lg) {
+ #quarto-sidebar-glass {
+ position: fixed;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ background-color: #ffffff00;
+ transition: background-color $sidebar-anim-duration ease-in;
+ z-index: -1;
+ }
+
+ #quarto-sidebar-glass.collapsing {
+ z-index: $zindex-dropdown;
+ }
+
+ #quarto-sidebar-glass.show {
+ transition: background-color $sidebar-anim-duration ease-out;
+ background-color: $sidebar-glass-bg;
+ z-index: $zindex-dropdown;
+ }
+}
+
+.sidebar .sidebar-footer {
+ padding: 0.5rem 1rem;
+ align-self: flex-end;
+ color: $text-muted;
+ width: 100%;
+}
+
+.quarto-page-breadcrumbs .breadcrumb-item + .breadcrumb-item,
+.quarto-page-breadcrumbs .breadcrumb-item {
+ padding-right: 0.33em;
+ padding-left: 0;
+}
+
+.quarto-page-breadcrumbs .breadcrumb-item::before {
+ padding-right: 0.33em;
+}
+
+.quarto-sidebar-footer {
+ font-size: 0.875em;
+}
+
+.sidebar-section .bi-chevron-right {
+ vertical-align: middle;
+}
+
+.sidebar-section .bi-chevron-right::before {
+ font-size: 0.9em;
+}
+
+.notransition {
+ -webkit-transition: none !important;
+ -moz-transition: none !important;
+ -o-transition: none !important;
+ transition: none !important;
+}
+
+// This is used to suppress the focus borders on Chrome when the user is simply
+// clicking with the mouse vs using the keyboard to move focus.
+.btn:focus:not(:focus-visible) {
+ box-shadow: none;
+}
+
+.page-navigation {
+ display: flex;
+ justify-content: space-between;
+}
+
+.nav-page {
+ padding-bottom: 0.75em;
+}
+
+.nav-page .bi {
+ font-size: 1.8rem;
+ vertical-align: middle;
+}
+
+.nav-page .nav-page-text {
+ padding-left: 0.25em;
+ padding-right: 0.25em;
+}
+
+.nav-page a {
+ color: $text-muted;
+ text-decoration: none;
+ display: flex;
+ align-items: center;
+}
+
+.nav-page a:hover {
+ color: $link-hover-color;
+}
+
+.nav-footer .toc-actions {
+ a,
+ a:hover {
+ text-decoration: none;
+ }
+
+ ul {
+ display: flex;
+ list-style: none;
+
+ :first-child {
+ margin-left: auto;
+ }
+ :last-child {
+ margin-right: auto;
+ }
+
+ li {
+ padding-right: 1.5em;
+
+ i.bi {
+ padding-right: 0.4em;
+ }
+ }
+
+ li:last-of-type {
+ padding-right: 0;
+ }
+ }
+
+ padding-bottom: 0.5em;
+ padding-top: 0.5em;
+}
+
+// border weight
+// border style
+.nav-footer {
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+ justify-content: space-between;
+ align-items: baseline;
+ text-align: center;
+ padding-top: 0.5rem;
+ padding-bottom: 0.5rem;
+ @if variable-exists(footer-bg) {
+ background-color: $footer-bg;
+ }
+}
+
+// Immediate set the top offset if a fixed top header is present
+// This prevents a 'flash / jerk' when the page loads
+body.nav-fixed {
+ padding-top: navbar-default-offset($theme-name);
+}
+
+body .nav-footer {
+ @if variable-exists(footer-border) and $footer-border {
+ @if variable-exists(footer-border-color) {
+ border-top: 1px solid $footer-border-color;
+ } @else {
+ border-top: 1px solid $table-border-color;
+ }
+ }
+}
+
+.nav-footer-contents {
+ color: $text-muted;
+ margin-top: 0.25rem;
+}
+
+.nav-footer {
+ min-height: 3.5em;
+ color: $footer-fg;
+ a {
+ @if variable-exists(footer-fg) {
+ color: $footer-fg;
+ }
+ }
+}
+
+@if variable-exists(footer-left-font-size) {
+ .nav-footer .nav-footer-left {
+ font-size: $footer-left-font-size;
+ }
+}
+
+@if variable-exists(footer-center-font-size) {
+ .nav-footer .nav-footer-center {
+ font-size: $footer-center-font-size;
+ }
+}
+
+@if variable-exists(footer-right-font-size) {
+ .nav-footer .nav-footer-right {
+ font-size: $footer-right-font-size;
+ }
+}
+
+.nav-footer-left .footer-items,
+.nav-footer-center .footer-items,
+.nav-footer-right .footer-items {
+ display: inline-flex;
+ padding-top: 0.3em;
+ padding-bottom: 0.3em;
+ margin-bottom: 0em;
+}
+
+.nav-footer-left .footer-items .nav-link,
+.nav-footer-center .footer-items .nav-link,
+.nav-footer-right .footer-items .nav-link {
+ padding-left: 0.6em;
+ padding-right: 0.6em;
+}
+.nav-footer-left {
+ @include media-breakpoint-up(md) {
+ flex: 1 1 0px;
+ text-align: left;
+ }
+ @include media-breakpoint-down(sm) {
+ margin-bottom: 1em;
+ flex: 100%;
+ }
+}
+.nav-footer-right {
+ @include media-breakpoint-up(md) {
+ flex: 1 1 0px;
+ text-align: right;
+ }
+ @include media-breakpoint-down(sm) {
+ margin-bottom: 1em;
+ flex: 100%;
+ }
+}
+
+.nav-footer-center {
+ @include media-breakpoint-up(md) {
+ flex: 1 1 0px;
+ }
+ text-align: center;
+ min-height: 3em;
+ .footer-items {
+ justify-content: center;
+ }
+ @include media-breakpoint-down(md) {
+ margin-bottom: 1em;
+ flex: 100%;
+ }
+}
+
+@include media-breakpoint-down(md) {
+ .nav-footer-center {
+ margin-top: 3em;
+ order: 10;
+ }
+}
+
+.navbar .quarto-reader-toggle.reader .quarto-reader-toggle-btn {
+ background-color: $navbar-fg;
+ border-radius: 3px;
+}
+
+@include media-breakpoint-down(lg) {
+ .quarto-reader-toggle {
+ display: none;
+ }
+}
+
+.quarto-reader-toggle.reader.quarto-navigation-tool .quarto-reader-toggle-btn {
+ background-color: $sidebar-fg;
+ border-radius: 3px;
+}
+
+.quarto-reader-toggle .quarto-reader-toggle-btn {
+ display: inline-flex;
+ padding-left: 0.2em;
+ padding-right: 0.2em;
+ margin-left: -0.2em;
+ margin-right: -0.2em;
+ text-align: center;
+}
+
+.navbar .quarto-reader-toggle:not(.reader) .bi::before {
+ background-image: url('data:image/svg+xml,');
+}
+
+.navbar .quarto-reader-toggle.reader .bi::before {
+ background-image: url('data:image/svg+xml,');
+}
+
+.sidebar-navigation .quarto-reader-toggle:not(.reader) .bi::before {
+ background-image: url('data:image/svg+xml,');
+}
+
+.sidebar-navigation .quarto-reader-toggle.reader .bi::before {
+ background-image: url('data:image/svg+xml,');
+}
+
+#quarto-back-to-top {
+ display: none;
+ position: fixed;
+ bottom: 50px;
+ background-color: $body-bg;
+ border-radius: $border-radius;
+ box-shadow: 0 0.2rem 0.5rem $text-muted, 0 0 0.05rem $text-muted;
+ color: $text-muted;
+ text-decoration: none;
+ font-size: 0.9em;
+ text-align: center;
+ left: 50%;
+ padding: 0.4rem 0.8rem;
+ transform: translate(-50%, 0);
+}
+
+/* announcement bar */
+#quarto-announcement {
+ padding: 0.5em;
+ display: flex;
+ justify-content: space-between;
+ margin-bottom: 0;
+ font-size: 0.9em;
+
+ .quarto-announcement-content {
+ margin-right: auto;
+ p {
+ margin-bottom: 0;
+ }
+ }
+ .quarto-announcement-icon {
+ margin-right: 0.5em;
+ font-size: 1.2em;
+ margin-top: -0.15em;
+ }
+ .quarto-announcement-action {
+ cursor: pointer;
+ }
+}
+
+
+.aa-DetachedSearchButtonQuery {
+ display: none;
+}
+
+.aa-DetachedOverlay,
+#quarto-search-results {
+ ul.aa-List {
+ list-style: none;
+ padding-left: 0;
+ }
+
+ .aa-Panel {
+ background-color: $body-bg;
+ position: absolute;
+ z-index: 2000;
+ }
+}
+#quarto-search-results {
+ .aa-Panel {
+ max-width: $quarto-search-results-width;
+ }
+}
+
+#quarto-search input {
+ font-size: 0.925rem;
+}
+
+.navbar #quarto-search {
+ @include media-breakpoint-up(lg) {
+ margin-left: 0.25rem;
+ order: 999;
+ }
+}
+
+.navbar.navbar-expand-sm #quarto-search,
+.navbar.navbar-expand-md #quarto-search {
+ order: 999;
+}
+
+.navbar .quarto-navbar-tools {
+ @include media-breakpoint-up(lg) {
+ order: 900;
+ }
+ &.tools-end {
+ @include media-breakpoint-up(lg) {
+ margin-left: auto !important;
+ }
+ }
+}
+
+#quarto-sidebar {
+ .sidebar-search {
+ @include media-breakpoint-down(lg) {
+ display: none;
+ }
+ .aa-Autocomplete {
+ width: $quarto-sidebar-search-input-width;
+ }
+ }
+}
+
+.navbar {
+ .aa-Autocomplete {
+ .aa-Form {
+ width: $quarto-navbar-search-input-width;
+ }
+ }
+}
+
+.navbar #quarto-search.type-overlay {
+ .aa-Autocomplete {
+ width: 40px;
+ .aa-Form {
+ background-color: inherit;
+ border: none;
+ &:focus-within {
+ box-shadow: none;
+ outline: none;
+ }
+ .aa-InputWrapper {
+ display: none;
+ &:focus-within {
+ display: inherit;
+ }
+ }
+
+ .aa-Label,
+ .aa-LoadingIndicator {
+ svg {
+ width: $quarto-search-collapse-icon-size;
+ height: $quarto-search-collapse-icon-size;
+
+ color: $navbar-fg;
+ opacity: 1;
+ }
+ }
+ }
+
+ svg.aa-SubmitIcon {
+ width: $quarto-search-collapse-icon-size;
+ height: $quarto-search-collapse-icon-size;
+
+ color: $navbar-fg;
+ opacity: 1;
+ }
+ }
+}
+
+.aa-Autocomplete,
+.aa-DetachedFormContainer {
+ // Search box
+ .aa-Form {
+ align-items: center;
+ background-color: $input-bg;
+ border: $input-border-width solid $input-border-color;
+ border-radius: $input-border-radius;
+ color: $input-color;
+ display: flex;
+ line-height: 1em;
+ margin: 0;
+ position: relative;
+ width: 100%;
+ &:focus-within {
+ box-shadow: rgba($primary, 0.6) 0 0 0 1px;
+ outline: currentColor none medium;
+ }
+ .aa-InputWrapperPrefix {
+ align-items: center;
+ display: flex;
+ flex-shrink: 0;
+ order: 1;
+ // Container for search and loading icons
+ .aa-Label,
+ .aa-LoadingIndicator {
+ cursor: initial;
+ flex-shrink: 0;
+ padding: 0;
+ text-align: left;
+ svg {
+ color: $input-color;
+ opacity: 0.5;
+ }
+ }
+ .aa-SubmitButton {
+ appearance: none;
+ background: none;
+ border: 0;
+ margin: 0;
+ }
+ .aa-LoadingIndicator {
+ align-items: center;
+ display: flex;
+ justify-content: center;
+ &[hidden] {
+ display: none;
+ }
+ }
+ }
+ .aa-InputWrapper {
+ order: 3;
+ position: relative;
+ width: 100%;
+
+ // Search box input (with placeholder and query)
+ .aa-Input {
+ appearance: none;
+ background: none;
+ border: 0;
+ color: $input-color;
+ font: inherit;
+ height: calc(1.5em + (0.1rem + 2px));
+ padding: 0;
+ width: 100%;
+ &::placeholder {
+ color: $input-color;
+ opacity: 0.8;
+ }
+ // Focus is set and styled on the parent, it isn't necessary here
+ &:focus {
+ border-color: none;
+ box-shadow: none;
+ outline: none;
+ }
+ // Remove native appearence
+ &::-webkit-search-decoration,
+ &::-webkit-search-cancel-button,
+ &::-webkit-search-results-button,
+ &::-webkit-search-results-decoration {
+ display: none;
+ }
+ }
+ }
+ .aa-InputWrapperSuffix {
+ align-items: center;
+ display: flex;
+ order: 4;
+ // Accelerator to clear the query
+ .aa-ClearButton {
+ align-items: center;
+ background: none;
+ border: 0;
+ color: $input-color;
+ opacity: 0.8;
+ cursor: pointer;
+ display: flex;
+ margin: 0;
+ width: calc(1.5em + (0.1rem + 2px));
+ &:hover,
+ &:focus {
+ color: $input-color;
+ opacity: 0.8;
+ }
+ &[hidden] {
+ display: none;
+ }
+ svg {
+ width: $input-height;
+ }
+ }
+
+ .aa-CopyButton {
+ border: none;
+ align-items: center;
+ background: none;
+ color: $input-color;
+ opacity: 0.4;
+ font-size: 0.7rem;
+ cursor: pointer;
+ display: none;
+ margin: 0;
+ width: calc(1em + (0.1rem + 2px));
+ &:hover,
+ &:focus {
+ color: $input-color;
+ opacity: 0.8;
+ }
+ &[hidden] {
+ display: none;
+ }
+ }
+ }
+ }
+}
+
+.aa-PanelLayout:empty {
+ display: none;
+}
+
+.quarto-search-no-results.no-query {
+ display: none;
+}
+
+.aa-Source:has(.no-query) {
+ display: none;
+}
+
+#quarto-search-results .aa-Panel {
+ border: solid $input-border-color $input-border-width;
+}
+
+#quarto-search-results .aa-SourceNoResults {
+ width: $quarto-search-results-width - 2 * $input-border-width;
+}
+
+.aa-DetachedOverlay,
+#quarto-search-results {
+ .aa-Panel {
+ max-height: 65vh;
+ overflow-y: auto;
+ font-size: 0.925rem;
+ }
+
+ .aa-SourceNoResults {
+ height: 60px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ }
+
+ .search-error {
+ padding-top: 10px;
+ padding-left: 20px;
+ padding-right: 20px;
+ cursor: default;
+ .search-error-title {
+ font-size: 1.1rem;
+ margin-bottom: 0.5rem;
+ .search-error-icon {
+ margin-right: 8px;
+ }
+ }
+ .search-error-text {
+ font-weight: 300;
+ }
+ }
+
+ .search-result-text {
+ font-weight: 300;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ display: -webkit-box;
+ -webkit-line-clamp: 2; /* number of lines to show */
+ -webkit-box-orient: vertical;
+ line-height: 1.2rem; /* fallback */
+ max-height: 2.4rem; /* fallback */
+ }
+
+ .aa-SourceHeader {
+ .search-result-header {
+ font-size: 0.875rem;
+ background-color: theme-dim($body-bg, 5%);
+ padding-left: 14px;
+ padding-bottom: 4px;
+ padding-top: 4px;
+ }
+
+ .search-result-header-no-results {
+ display: none;
+ }
+ }
+
+ .aa-SourceFooter {
+ .algolia-search-logo {
+ width: 110px;
+ opacity: 0.85;
+ margin: 8px;
+ float: right;
+ }
+ }
+
+ .search-result-section {
+ font-size: 0.925em;
+ }
+
+ a.search-result-link {
+ color: inherit;
+ text-decoration: none;
+ }
+
+ li.aa-Item[aria-selected="true"] {
+ .search-item {
+ background-color: $component-active-bg;
+
+ &.search-result-more,
+ .search-result-section,
+ .search-result-text,
+ .search-result-title-container,
+ .search-result-text-container {
+ color: $component-active-color;
+ background-color: $component-active-bg;
+ }
+
+ mark.search-match {
+ color: $component-active-color;
+ background-color: theme-fade($component-active-bg, $body-bg, 8%);
+ }
+ }
+ }
+
+ li.aa-Item[aria-selected="false"] {
+ .search-item {
+ background-color: $popover-bg;
+
+ &.search-result-more,
+ .search-result-section,
+ .search-result-text,
+ .search-result-title-container,
+ .search-result-text-container {
+ color: $popover-body-color;
+ }
+
+ mark.search-match {
+ color: inherit;
+ background-color: theme-fade($component-active-bg, $body-bg, 42%);
+ }
+ }
+ }
+
+ .aa-Item {
+ .search-result-doc:not(.document-selectable) {
+ .search-result-title-container {
+ background-color: $popover-bg;
+ color: $body-color;
+ }
+ .search-result-text-container {
+ padding-top: 0px;
+ }
+ }
+ }
+ li.aa-Item {
+ .search-result-doc.document-selectable {
+ .search-result-text-container {
+ margin-top: -4px;
+ }
+ }
+ }
+
+ .aa-Item {
+ cursor: pointer;
+
+ .search-item {
+ border-left: none;
+ border-right: none;
+ border-top: none;
+ background-color: $popover-bg;
+ border-color: $input-border-color;
+ color: $popover-body-color;
+ }
+
+ .search-item {
+ p {
+ margin-top: 0;
+ margin-bottom: 0;
+ }
+
+ i.bi {
+ padding-left: 8px;
+ padding-right: 8px;
+ font-size: 1.3em;
+ }
+
+ .search-result-title {
+ margin-top: 0.3em;
+ margin-bottom: 0em;
+ }
+
+ .search-result-crumbs {
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ font-size: 0.8em;
+ font-weight: 300;
+ margin-right: 1em;
+ }
+
+ .search-result-crumbs:not(.search-result-crumbs-wrap) {
+ max-width: 30%;
+ margin-left: auto;
+ margin-top: 0.5em;
+ margin-bottom: 0.1rem;
+ }
+
+ .search-result-crumbs.search-result-crumbs-wrap {
+ flex-basis: 100%;
+ margin-top: 0em;
+ margin-bottom: 0.2em;
+ margin-left: 37px;
+ }
+ }
+
+ .search-result-title-container {
+ font-size: 1em;
+ display: flex;
+ flex-wrap: wrap;
+ padding: 6px 4px 6px 4px;
+ }
+
+ .search-result-text-container {
+ padding-bottom: 8px;
+ padding-right: 8px;
+ margin-left: 42px;
+ }
+
+ .search-result-doc-section,
+ .search-result-more {
+ padding-top: 8px;
+ padding-bottom: 8px;
+ padding-left: 44px;
+ }
+
+ .search-result-more {
+ font-size: 0.8em;
+ font-weight: 400;
+ }
+
+ .search-result-doc {
+ border-top: $input-border-width solid $input-border-color;
+ }
+ }
+}
+
+// Detached Mode
+.aa-DetachedSearchButton {
+ background: none;
+ border: none;
+
+ .aa-DetachedSearchButtonPlaceholder {
+ display: none;
+ }
+}
+.navbar {
+ .aa-DetachedSearchButton {
+ .aa-DetachedSearchButtonIcon {
+ color: $navbar-fg;
+ }
+ }
+}
+.sidebar-tools-collapse,
+.sidebar-tools-main {
+ #quarto-search {
+ display: inline;
+ .aa-Autocomplete {
+ display: inline;
+ }
+ .aa-DetachedSearchButton {
+ padding-left: 4px;
+ padding-right: 4px;
+ .aa-DetachedSearchButtonIcon {
+ color: $sidebar-fg;
+ .aa-SubmitIcon {
+ margin-top: -3px;
+ }
+ }
+ }
+ }
+}
+.aa-DetachedContainer {
+ background: rgba($body-bg, 0.65);
+ width: 90%;
+ bottom: 0;
+ box-shadow: rgba($input-border-color, 0.6) 0 0 0 1px;
+ outline: currentColor none medium;
+ display: flex;
+ flex-direction: column;
+ left: 0;
+ margin: 0;
+ overflow: hidden;
+ padding: 0;
+ position: fixed;
+ right: 0;
+ top: 0;
+ z-index: 1101;
+ &::after {
+ height: 32px;
+ }
+ .aa-SourceHeader {
+ margin: var(--aa-spacing-half) 0 var(--aa-spacing-half) 2px;
+ }
+ .aa-Panel {
+ background-color: rgba($body-bg, 1);
+ border-radius: 0;
+ box-shadow: none;
+ flex-grow: 1;
+ margin: 0;
+ padding: 0;
+ position: relative;
+ }
+ .aa-PanelLayout {
+ bottom: 0;
+ box-shadow: none;
+ left: 0;
+ margin: 0;
+ max-height: none;
+ overflow-y: auto;
+ position: absolute;
+ right: 0;
+ top: 0;
+ width: 100%;
+ }
+ @at-root .aa-DetachedFormContainer {
+ background-color: rgba($body-bg, 1);
+ border-bottom: $input-border-width solid $input-border-color;
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+ margin: 0;
+ padding: 0.5em;
+ @at-root .aa-DetachedCancelButton {
+ background: none;
+ font-size: 0.8em;
+ border: 0;
+ border-radius: 3px;
+ color: $body-color;
+ cursor: pointer;
+ margin: 0 0 0 0.5em;
+ padding: 0 0.5em;
+ &:hover,
+ &:focus {
+ box-shadow: rgba($primary, 0.6) 0 0 0 1px;
+ outline: currentColor none medium;
+ }
+ }
+ }
+ @at-root .aa-DetachedContainer--modal {
+ bottom: inherit;
+ height: auto;
+ margin: 0 auto;
+ position: absolute;
+ @include media-breakpoint-down(sm) {
+ width: 100%;
+ top: 0px;
+ border-radius: 0px;
+ border: none;
+ }
+
+ @include media-breakpoint-up(med) {
+ top: 100px;
+ border-radius: 6px;
+ max-width: 850px;
+ }
+
+ .aa-PanelLayout {
+ max-height: var(--aa-detached-modal-max-height);
+ padding-bottom: var(--aa-spacing-half);
+ position: static;
+ }
+ }
+}
+
+.aa-Detached {
+ height: 100vh;
+ overflow: hidden;
+}
+
+.aa-DetachedOverlay {
+ background-color: rgba($body-color, 0.4);
+ position: fixed;
+ left: 0;
+ right: 0;
+ top: 0;
+ margin: 0;
+ padding: 0;
+ height: 100vh;
+ z-index: 1100;
+}
+
+
+
+// Value Boxes
+$valuebox-bg-primary: theme-override-value(
+ $theme-name,
+ "valuebox-bg-primary",
+ $primary
+) !default;
+$valuebox-bg-secondary: theme-override-value(
+ $theme-name,
+ "valuebox-bg-secondary",
+ $secondary
+) !default;
+$valuebox-bg-success: theme-override-value(
+ $theme-name,
+ "valuebox-bg-success",
+ $success
+) !default;
+$valuebox-bg-info: theme-override-value(
+ $theme-name,
+ "valuebox-bg-info",
+ $info
+) !default;
+$valuebox-bg-warning: theme-override-value(
+ $theme-name,
+ "valuebox-bg-warning",
+ $warning
+) !default;
+$valuebox-bg-danger: theme-override-value(
+ $theme-name,
+ "valuebox-bg-danger",
+ $danger
+) !default;
+$valuebox-bg-light: theme-override-value(
+ $theme-name,
+ "valuebox-bg-light",
+ $light
+) !default;
+$valuebox-bg-dark: theme-override-value(
+ $theme-name,
+ "valuebox-bg-dark",
+ $dark
+) !default;
+
+$valuebox-colors: (
+ "primary": $valuebox-bg-primary,
+ "secondary": $valuebox-bg-secondary,
+ "success": $valuebox-bg-success,
+ "info": $valuebox-bg-info,
+ "warning": $valuebox-bg-warning,
+ "danger": $valuebox-bg-danger,
+ "light": $valuebox-bg-light,
+ "dark": $valuebox-bg-dark,
+);
+
+// Dashboards
+.quarto-dashboard {
+ &.nav-fixed.dashboard-sidebar #quarto-content.quarto-dashboard-content {
+ padding: 0em;
+ }
+
+ #quarto-content.quarto-dashboard-content {
+ padding: 1em;
+ > * {
+ padding-top: 0;
+ }
+ }
+
+ @include media-breakpoint-up(sm) {
+ height: 100%;
+ }
+
+ @each $valuebox-color, $valuebox-color-value in $valuebox-colors {
+ .card.valuebox.bslib-card.bg-#{$valuebox-color} {
+ background-color: $valuebox-color-value !important;
+ }
+ }
+
+ &.dashboard-fill {
+ display: flex;
+ flex-direction: column;
+ }
+
+ #quarto-appendix {
+ display: none;
+ }
+
+ // Navbar / Navigation
+ #quarto-header #quarto-dashboard-header {
+ border-top: solid 1px theme-dim($navbar-bg, 10%);
+ border-bottom: solid 1px theme-dim($navbar-bg, 10%);
+
+ > nav {
+ padding-left: 1em;
+ padding-right: 1em;
+ .navbar-brand-container {
+ padding-left: 0;
+ }
+ }
+ .navbar-toggler {
+ margin-right: 0;
+ }
+
+ .navbar-toggler-icon {
+ height: 1em;
+ width: 1em;
+ background-image: url('data:image/svg+xml,');
+ }
+
+ .navbar-brand-container {
+ padding-right: 1em;
+ }
+
+ .navbar-title {
+ font-size: 1.1em;
+ }
+
+ .navbar-nav {
+ font-size: 0.9em;
+ }
+ }
+
+ #quarto-dashboard-header {
+ .navbar {
+ padding: 0;
+
+ .navbar-container {
+ padding-left: 1em;
+ }
+
+ &.slim {
+ .navbar-brand-container,
+ .navbar-nav {
+ .nav-link {
+ padding: 0.7em;
+ }
+ }
+ }
+
+ .quarto-color-scheme-toggle {
+ order: 9;
+ }
+
+ .navbar-toggler {
+ margin-left: 0.5em;
+ order: 10;
+ }
+
+ .navbar-nav {
+ .nav-link {
+ padding: 0.5em;
+ height: 100%;
+ display: flex;
+ align-items: center;
+ }
+ & .active {
+ background-color: theme-dim($navbar-bg, 8%);
+ }
+ }
+
+ .navbar-brand-container {
+ padding: 0.5em 0.5em 0.5em 0;
+ display: flex;
+ flex-direction: row;
+ margin-right: 2em;
+ align-items: center;
+ @include media-breakpoint-down(md) {
+ margin-right: auto;
+ }
+ }
+
+ .navbar-collapse {
+ @include media-breakpoint-up(md) {
+ order: 8;
+ }
+ @include media-breakpoint-down(md) {
+ order: 1000;
+ padding-bottom: 0.5em;
+ }
+ align-self: stretch;
+ .navbar-nav {
+ align-self: stretch;
+ }
+ }
+
+ .navbar-title {
+ font-size: 1.25em;
+ line-height: 1.1em;
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+ align-items: baseline;
+ .navbar-title-text {
+ margin-right: 0.4em;
+ }
+ a {
+ text-decoration: none;
+ color: inherit;
+ }
+ }
+
+ .navbar-subtitle,
+ .navbar-author {
+ font-size: 0.9rem;
+ margin-right: 0.5em;
+ }
+
+ .navbar-author {
+ margin-left: auto;
+ }
+
+ .navbar-logo {
+ max-height: 48px;
+ min-height: 30px;
+ object-fit: cover;
+ margin-right: 1em;
+ }
+
+ .quarto-dashboard-links {
+ order: 9;
+ padding-right: 1em;
+ }
+ .quarto-dashboard-link-text {
+ margin-left: 0.25em;
+ }
+
+ .quarto-dashboard-link {
+ padding-right: 0em;
+ padding-left: 0.7em;
+ text-decoration: none;
+ color: $navbar-fg;
+ }
+ }
+ }
+
+ .page-layout-custom .tab-content {
+ padding: 0;
+ border: none;
+ }
+}
+
+.quarto-dashboard-img-contain {
+ height: 100%;
+ width: 100%;
+ object-fit: contain;
+}
+
+.quarto-dashboard {
+ // Mobile sizes convert into 'scrolling' layouts
+ @include media-breakpoint-down(sm) {
+ .bslib-grid {
+ grid-template-rows: minmax(1em, max-content) !important;
+ }
+ .sidebar-content {
+ height: inherit;
+ }
+ .page-layout-custom {
+ min-height: 100vh;
+ }
+ }
+
+ &.dashboard-toolbar > .page-layout-custom,
+ &.dashboard-sidebar > .page-layout-custom {
+ padding: 0;
+ }
+
+ .quarto-dashboard-content.quarto-dashboard-pages {
+ padding: 0;
+ }
+
+ .callout {
+ margin-bottom: 0;
+ margin-top: 0;
+ }
+
+ .html-fill-container figure {
+ overflow: hidden;
+ }
+
+ bslib-tooltip {
+ .rounded-pill {
+ .svg {
+ fill: $body-color;
+ }
+ border: solid $text-muted 1px;
+ }
+ }
+
+ .tabset .dashboard-card-no-title .nav-tabs {
+ margin-left: 0;
+ margin-right: auto;
+ }
+
+ .tabset .tab-content {
+ border: none;
+ }
+
+ .tabset .card-header {
+ .nav-link[role="tab"] {
+ margin-top: -6px;
+ padding-top: 6px;
+ padding-bottom: 6px;
+ }
+ }
+
+ .card.valuebox,
+ .card.bslib-value-box {
+ min-height: 3rem;
+ .card-body {
+ padding: 0;
+ }
+ }
+
+ .bslib-value-box {
+ .value-box-value {
+ font-size: clamp(0.1em, 15cqw, 5em);
+ }
+
+ .value-box-showcase .bi {
+ font-size: clamp(0.1em, max(18cqw, 5.2cqh), 5em);
+
+ text-align: center;
+ height: 1em;
+ }
+
+ .value-box-showcase .bi::before {
+ vertical-align: 1em;
+ }
+
+ .value-box-area {
+ margin-top: auto;
+ margin-bottom: auto;
+ }
+ }
+
+ .card figure.quarto-float {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ }
+
+ .dashboard-scrolling {
+ padding: 1em;
+ }
+
+ .full-height {
+ height: 100%;
+ }
+
+ .showcase-bottom {
+ .value-box-grid {
+ display: grid;
+ grid-template-columns: 1fr;
+ grid-template-rows: 1fr auto;
+ grid-template-areas: "top" "bottom";
+
+ .value-box-showcase {
+ grid-area: bottom;
+ padding: 0;
+ margin: 0;
+ i.bi {
+ font-size: 4rem;
+ }
+ }
+ .value-box-area {
+ grid-area: top;
+ }
+ }
+ }
+
+ .tab-content {
+ margin-bottom: 0;
+ }
+
+ .bslib-card .bslib-navs-card-title {
+ justify-content: stretch;
+ align-items: end;
+ }
+
+ .card-header {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: space-between;
+
+ .card-title {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ margin-bottom: 0;
+ }
+ }
+
+ .tabset {
+ .card-toolbar {
+ margin-bottom: 1em;
+ }
+ }
+
+ /* Sidebar */
+ .bslib-grid > .bslib-sidebar-layout {
+ border: none;
+ gap: var(--bslib-spacer, 1rem);
+ > .main {
+ padding: 0;
+ }
+ > .sidebar {
+ border-radius: $card-border-radius;
+ border: $card-border-width solid $card-border-color;
+ }
+ > .collapse-toggle {
+ display: none;
+ }
+
+ @include media-breakpoint-down(md) {
+ grid-template-columns: 1fr;
+ grid-template-rows: max-content 1fr;
+ > .main {
+ grid-column: 1;
+ grid-row: 2;
+ }
+ .sidebar {
+ grid-column: 1;
+ grid-row: 1;
+ }
+ }
+ }
+
+ .sidebar-right {
+ .sidebar {
+ padding-left: 2.5em;
+ }
+
+ .collapse-toggle {
+ left: 2px;
+ }
+ }
+
+ .quarto-dashboard .sidebar-right button.collapse-toggle:not(.transitioning) {
+ left: unset;
+ }
+
+ aside.sidebar {
+ padding-left: 1em;
+ padding-right: 1em;
+ background-color: $card-cap-bg;
+ color: $card-cap-color or $body-color;
+ }
+
+ .bslib-sidebar-layout {
+ > div.main {
+ padding: 0.7em;
+ }
+
+ button.collapse-toggle {
+ margin-top: 0.3em;
+ }
+ }
+
+ .bslib-sidebar-layout .collapse-toggle {
+ top: 0;
+ }
+
+ .bslib-sidebar-layout.sidebar-collapsed:not(.transitioning):not(
+ .sidebar-right
+ )
+ .collapse-toggle {
+ left: 2px;
+ }
+
+ .sidebar > section > .h3:first-of-type {
+ margin-top: 0em;
+ }
+
+ .sidebar .h3,
+ .sidebar .h4,
+ .sidebar .h5,
+ .sidebar .h6 {
+ margin-top: 0.5em;
+ }
+
+ .sidebar {
+ @include observable-sidebar-inputs();
+
+ .card-body {
+ margin-bottom: 2em;
+ }
+
+ .shiny-input-container {
+ margin-bottom: 1em;
+ }
+
+ .shiny-options-group {
+ margin-top: 0;
+ }
+ .control-label {
+ margin-bottom: 0.3em;
+ }
+ }
+ .card .card-body .quarto-layout-row {
+ align-items: stretch;
+ }
+
+ /* Toolbar */
+ .toolbar {
+ font-size: 0.9em;
+ display: flex;
+ flex-direction: row;
+ border-top: solid 1px theme-dim($secondary-bg-subtle, 10%);
+ padding: 1em;
+ flex-wrap: wrap;
+ background-color: $card-cap-bg;
+
+ @include shiny-toolbar-customizations();
+ @include observable-toolbar-inputs();
+
+ > * {
+ font-size: 0.9em;
+ flex-grow: 0;
+ }
+
+ .shiny-input-container {
+ label {
+ margin-bottom: 1px;
+ }
+ }
+ }
+
+ // Positions the toolbar at the bottom of the flexbox
+ .toolbar-bottom {
+ margin-top: 1em;
+ margin-bottom: 0 !important;
+ order: 2;
+ }
+
+ // If there is are pages, move the padding down inside the
+ // the nested tab contents (Global)
+ .quarto-dashboard-content
+ > .dashboard-toolbar-container
+ > .toolbar-content
+ > .tab-content
+ > .tab-pane
+ > *:not(.bslib-sidebar-layout) {
+ padding: 1em;
+ }
+
+ // If this is simple dashboard with a top level tool bar
+ .quarto-dashboard-content
+ > .dashboard-toolbar-container
+ > .toolbar-content
+ > *:not(.tab-content) {
+ padding: 1em;
+ }
+
+ // If there are pages, but no global toolbar
+ .quarto-dashboard-content
+ > .tab-content
+ > .dashboard-page
+ > .dashboard-toolbar-container
+ > .toolbar-content,
+ .quarto-dashboard-content
+ > .tab-content
+ > .dashboard-page:not(.dashboard-sidebar-container)
+ > *:not(.dashboard-toolbar-container) {
+ padding: 1em;
+ }
+
+ .toolbar-content {
+ padding: 0;
+ }
+
+ .quarto-dashboard-content.quarto-dashboard-pages
+ .tab-pane
+ > .dashboard-toolbar-container {
+ .toolbar {
+ border-radius: 0;
+ margin-bottom: 0;
+ }
+ }
+
+ .dashboard-toolbar-container.toolbar-toplevel {
+ .toolbar {
+ border-bottom: $card-border-width solid $card-border-color;
+ }
+ .toolbar-bottom {
+ margin-top: 0;
+ }
+ }
+
+ .dashboard-toolbar-container:not(.toolbar-toplevel) {
+ .toolbar {
+ margin-bottom: 1em;
+ border-top: none;
+ border-radius: $border-radius;
+ border: $card-border-width solid $card-border-color;
+ }
+ }
+
+ .vega-embed.has-actions {
+ details {
+ width: 1.7em;
+ height: 2em;
+ position: absolute !important;
+ top: 0;
+ right: 0;
+ }
+ }
+
+ .dashboard-toolbar-container {
+ padding: 0;
+ }
+
+ /* Card Toolbar */
+ /* Card */
+ .card {
+ .card-header,
+ .card-footer {
+ p:last-child {
+ margin-bottom: 0;
+ }
+ }
+
+ .card-body > .h4:first-child {
+ margin-top: 0;
+ }
+
+ // This ensures that elements in the card body (notably the expansion toggle)
+ // appear above the elements inside of it (notably itables, which cause issues)
+ .card-body {
+ z-index: 4;
+
+ // Customize appearance of elements within cards
+ @include itables();
+ }
+
+ .card-footer {
+ font-size: 0.9em;
+ }
+
+ .card-toolbar {
+ display: flex;
+ flex-grow: 1;
+ flex-direction: row;
+ width: 100%;
+ > * {
+ font-size: 0.8em;
+ flex-grow: 0;
+ }
+
+ > .card-title {
+ font-size: 1em;
+ flex-grow: 1;
+ align-self: flex-start;
+ margin-top: 0.1em;
+ }
+
+ flex-wrap: wrap;
+
+ @include toolbar-layout();
+
+ @include observable-toolbar-inputs();
+ @include shiny-toolbar-customizations();
+ }
+ }
+
+ /*-- Misc HTML elements --*/
+ .card-body > table > thead {
+ border-top: none;
+ }
+
+ .card-body > .table > :not(caption) > * > * {
+ background-color: $card-bg;
+ color: $card-color;
+ }
+}
+
+/*-- itables --*/
+.tableFloatingHeaderOriginal {
+ background-color: $card-bg;
+ position: sticky !important;
+ top: 0 !important;
+}
+
+.dashboard-data-table {
+ margin-top: -1px;
+}
+
+/*-- ojs --*/
+
+div.value-box-area span.observablehq--number {
+ /* the calculation below is pretty horrible, but it's our best effort to match
+ the font sizes of these two different ways of rendering a number in a value-box:
+
+```{ojs}
+//| content: valuebox
+//| title: "Articles per day"
+//| icon: pencil
+//| color: primary
+12
+```
+
+```{python}
+#| content: valuebox
+#| title: "Articles per day"
+#| icon: pencil
+#| color: primary
+dict(
+ value = 12
+)
+```
+
+ See https://github.com/quarto-dev/quarto-cli/issues/8823
+
+ */
+ font-size: calc(clamp(0.1em, 15cqw, 5em) * 1.25);
+ line-height: 1.2;
+ color: inherit;
+ font-family: var(--bs-body-font-family);
+}
+
+
+
+.quarto-listing {
+ padding-bottom: 1em;
+}
+
+// General Pagination / Filter Control Styling
+.listing-pagination {
+ padding-top: 0.5em;
+}
+
+ul.pagination {
+ float: right;
+ padding-left: 8px;
+ padding-top: 0.5em;
+ li {
+ padding-right: 0.75em;
+ }
+ li.disabled,
+ li.active {
+ a {
+ color: $pagination-active-color;
+ text-decoration: none;
+ }
+ }
+ li:last-of-type {
+ padding-right: 0;
+ }
+}
+
+.listing-actions-group {
+ display: flex;
+ .form-select,
+ .form-control {
+ @include input-form-control();
+ }
+ .input-group {
+ @include input-group();
+ @include input-placeholder();
+ }
+}
+
+// Filtering and Sorting
+.quarto-listing-filter {
+ margin-bottom: 1em;
+ width: 200px;
+ margin-left: auto;
+}
+
+.quarto-listing-sort {
+ margin-bottom: 1em;
+ margin-right: auto;
+ .input-group-text {
+ font-size: 0.8em;
+ }
+ width: auto;
+}
+
+.input-group input,
+.input-group select {
+ @include input-group-text();
+}
+.input-group-text {
+ @include input-group-text();
+ border-right: none;
+}
+
+.quarto-listing-sort select.form-select {
+ font-size: 0.8em;
+}
+
+.listing-no-matching {
+ text-align: center;
+ padding-top: 2em;
+ padding-bottom: 3em;
+ font-size: 1em;
+}
+
+// Category styling
+#quarto-margin-sidebar {
+ .quarto-listing-category {
+ padding-top: 0;
+ font-size: 1rem;
+ }
+ .quarto-listing-category-title {
+ cursor: pointer;
+ font-weight: 600;
+ font-size: 1rem;
+ }
+}
+
+.quarto-listing-category {
+ .category {
+ cursor: pointer;
+ }
+ .category.active {
+ font-weight: 600;
+ }
+}
+
+.quarto-listing-category.category-cloud {
+ display: flex;
+ flex-wrap: wrap;
+ align-items: baseline;
+ .category {
+ padding-right: 5px;
+ }
+
+ @for $count from 1 through 10 {
+ .category-cloud-#{$count} {
+ font-size: 0.55em + ($count * 0.2em);
+ }
+ }
+}
+
+// Grid Listing Styling
+@for $colcount from 1 through 12 {
+ .quarto-listing-cols-#{$colcount} {
+ grid-template-columns: repeat($colcount, minmax(0, 1fr));
+ gap: 1.5em;
+ }
+
+ @include media-breakpoint-down(md) {
+ .quarto-listing-cols-#{$colcount} {
+ grid-template-columns: repeat(min(2, $colcount), minmax(0, 1fr));
+ gap: 1.5em;
+ }
+ }
+
+ @include media-breakpoint-down(sm) {
+ .quarto-listing-cols-#{$colcount} {
+ grid-template-columns: minmax(0, 1fr);
+ gap: 1.5em;
+ }
+ }
+}
+
+.quarto-listing-grid {
+ gap: 1.5em;
+}
+
+.quarto-grid-item.borderless {
+ border: none;
+ .listing-categories {
+ .listing-category:last-of-type,
+ .listing-category:first-of-type {
+ padding-left: 0;
+ }
+ .listing-category {
+ border: 0;
+ }
+ }
+}
+
+.quarto-grid-link {
+ text-decoration: none;
+ color: inherit;
+}
+
+.quarto-grid-link:hover {
+ text-decoration: none;
+ color: inherit;
+}
+
+.quarto-grid-item {
+ h5.title {
+ margin-top: 0;
+ margin-bottom: 0;
+ }
+
+ .card-footer {
+ display: flex;
+ justify-content: space-between;
+ font-size: 0.8em;
+ p {
+ margin-bottom: 0;
+ }
+ }
+
+ p.card-img-top {
+ margin-bottom: 0;
+ > img {
+ object-fit: cover;
+ }
+ }
+
+ .card-other-values {
+ margin-top: 0.5em;
+ font-size: 0.8em;
+ tr {
+ margin-bottom: 0.5em;
+ }
+ tr > td:first-of-type {
+ font-weight: 600;
+ padding-right: 1em;
+ padding-left: 1em;
+ vertical-align: top;
+ }
+ }
+
+ div.post-contents {
+ display: flex;
+ flex-direction: column;
+ text-decoration: none;
+ height: 100%;
+ }
+
+ .listing-item-img-placeholder {
+ background-color: $card-cap-bg;
+ flex-shrink: 0;
+ }
+
+ .card-attribution {
+ padding-top: 1em;
+ display: flex;
+ gap: 1em;
+ text-transform: uppercase;
+ color: $text-muted;
+ font-weight: 500;
+ flex-grow: 10;
+ align-items: flex-end;
+ }
+
+ .description {
+ padding-bottom: 1em;
+ }
+
+ .card-attribution .date {
+ align-self: flex-end;
+ }
+
+ .card-attribution.justify {
+ justify-content: space-between;
+ }
+
+ .card-attribution.start {
+ justify-content: flex-start;
+ }
+
+ .card-attribution.end {
+ justify-content: flex-end;
+ }
+
+ .card-title {
+ margin-bottom: 0.1em;
+ }
+ .card-subtitle {
+ padding-top: 0.25em;
+ }
+
+ .card-text {
+ font-size: 0.9em;
+ }
+
+ .listing-reading-time {
+ padding-bottom: 0.25em;
+ }
+
+ .card-text-small {
+ font-size: 0.8em;
+ }
+
+ .card-subtitle.subtitle {
+ font-size: 0.9em;
+ font-weight: 600;
+ padding-bottom: 0.5em;
+ }
+
+ .listing-categories {
+ @include listing-category();
+ }
+}
+
+.quarto-grid-item.card-right {
+ text-align: right;
+ .listing-categories {
+ justify-content: flex-end;
+ }
+}
+
+.quarto-grid-item.card-left {
+ text-align: left;
+}
+
+.quarto-grid-item.card-center {
+ text-align: center;
+ .listing-description {
+ text-align: justify;
+ }
+ .listing-categories {
+ justify-content: center;
+ }
+}
+
+// Table Listing Styling
+table.quarto-listing-table {
+ td.image {
+ padding: 0px;
+ img {
+ width: 100%;
+ max-width: 50px;
+ object-fit: contain;
+ }
+ }
+
+ a {
+ text-decoration: none;
+ word-break: keep-all;
+ }
+
+ th a {
+ color: inherit;
+ }
+
+ th a.asc:after {
+ margin-bottom: -2px;
+ margin-left: 5px;
+ display: inline-block;
+ height: 1rem;
+ width: 1rem;
+ background-repeat: no-repeat;
+ background-size: 1rem 1rem;
+ background-image: url('data:image/svg+xml,');
+ content: "";
+ }
+
+ th a.desc:after {
+ margin-bottom: -2px;
+ margin-left: 5px;
+ display: inline-block;
+ height: 1rem;
+ width: 1rem;
+ background-repeat: no-repeat;
+ background-size: 1rem 1rem;
+ background-image: url('data:image/svg+xml,');
+ content: "";
+ }
+}
+
+table.quarto-listing-table.table-hover td {
+ cursor: pointer;
+}
+
+.quarto-post.image-left {
+ flex-direction: row;
+}
+
+.quarto-post.image-right {
+ flex-direction: row-reverse;
+}
+
+@include media-breakpoint-down(md) {
+ .quarto-post.image-right,
+ .quarto-post.image-left {
+ gap: 0em;
+ flex-direction: column;
+ }
+
+ .quarto-post .metadata {
+ padding-bottom: 1em;
+ order: 2;
+ }
+
+ .quarto-post .body {
+ order: 1;
+ }
+
+ .quarto-post .thumbnail {
+ order: 3;
+ }
+}
+
+// Post (default) Styling
+.list.quarto-listing-default div:last-of-type {
+ border-bottom: none;
+}
+
+.quarto-listing-container-default {
+ @include media-breakpoint-up(lg) {
+ margin-right: 2em;
+ }
+}
+
+div.quarto-post {
+ display: flex;
+ gap: 2em;
+ margin-bottom: 1.5em;
+ @include media-breakpoint-down(md) {
+ padding-bottom: 1em;
+ }
+ border-bottom: 1px solid $border-color;
+
+ .metadata {
+ flex-basis: 20%;
+ flex-grow: 0;
+ margin-top: 0.2em;
+ flex-shrink: 10;
+ }
+
+ .thumbnail {
+ flex-basis: 30%;
+ flex-grow: 0;
+ flex-shrink: 0;
+ img {
+ margin-top: 0.4em;
+ width: 100%;
+ object-fit: cover;
+ }
+ }
+
+ .body {
+ flex-basis: 45%;
+ flex-grow: 1;
+ flex-shrink: 0;
+
+ h3.listing-title {
+ margin-top: 0px;
+ margin-bottom: 0px;
+ border-bottom: none;
+ }
+
+ .listing-subtitle {
+ font-size: 0.875em;
+ margin-bottom: 0.5em;
+ margin-top: 0.2em;
+ }
+
+ .description {
+ font-size: 0.9em;
+ }
+
+ pre code {
+ white-space: pre-wrap;
+ }
+ }
+
+ a {
+ color: $body-color;
+ text-decoration: none;
+ }
+
+ .metadata {
+ display: flex;
+ flex-direction: column;
+ font-size: 0.8em;
+ font-family: $font-family-base;
+ flex-basis: 33%;
+ }
+
+ .listing-categories {
+ @include listing-category();
+ }
+
+ .listing-description {
+ margin-bottom: 0.5em;
+ }
+}
+
+
+
+// Jolla
+
+div.quarto-about-jolla {
+ display: flex !important;
+ flex-direction: column;
+ align-items: center;
+ margin-top: 10%;
+ padding-bottom: 1em;
+
+ .about-image {
+ object-fit: cover;
+ margin-left: auto;
+ margin-right: auto;
+ margin-bottom: 1.5em;
+ }
+ @include image-shapes();
+
+ .quarto-title h1.title {
+ text-align: center;
+ }
+
+ .quarto-title .description {
+ text-align: center;
+ }
+
+ h2 {
+ border-bottom: none;
+ }
+
+ .about-sep {
+ width: 60%;
+ }
+
+ main {
+ text-align: center;
+ }
+
+ .about-links {
+ @include responsive-buttons();
+ }
+
+ .about-link {
+ @include responsive-button();
+ }
+}
+
+// Solana
+div.quarto-about-solana {
+ display: flex !important;
+ flex-direction: column;
+ padding-top: 3em !important;
+ padding-bottom: 1em;
+
+ .about-entity {
+ display: flex !important;
+
+ @include media-breakpoint-up(lg) {
+ flex-direction: row;
+ }
+ @include media-breakpoint-down(lg) {
+ flex-direction: column-reverse;
+ align-items: center;
+ text-align: center;
+ }
+
+ align-items: start;
+ justify-content: space-between;
+
+ .entity-contents {
+ display: flex;
+ flex-direction: column;
+ @include media-breakpoint-down(md) {
+ width: 100%;
+ }
+ }
+
+ .about-image {
+ object-fit: cover;
+ @include media-breakpoint-down(lg) {
+ margin-bottom: 1.5em;
+ }
+ }
+ @include image-shapes();
+
+ .about-links {
+ @include responsive-buttons();
+ justify-content: left;
+ padding-bottom: 1.2em;
+ }
+
+ .about-link {
+ @include responsive-button();
+ }
+ }
+
+ .about-contents {
+ padding-right: 1.5em;
+
+ flex-basis: 0;
+ flex-grow: 1;
+ main.content {
+ margin-top: 0;
+ }
+ h2 {
+ border-bottom: none;
+ }
+ }
+}
+
+// Trestles
+div.quarto-about-trestles {
+ display: flex !important;
+ flex-direction: row;
+ padding-top: 3em !important;
+ padding-bottom: 1em;
+
+ @include media-breakpoint-down(lg) {
+ flex-direction: column;
+ padding-top: 0em !important;
+ }
+
+ .about-entity {
+ @include media-breakpoint-up(lg) {
+ //max-width: 42%;
+ flex: 0 0 42%;
+ }
+ display: flex !important;
+ flex-direction: column;
+ align-items: center;
+ text-align: center;
+ padding-right: 1em;
+
+ .about-image {
+ object-fit: cover;
+ margin-bottom: 1.5em;
+ }
+ @include image-shapes();
+
+ .about-links {
+ @include responsive-buttons();
+ justify-content: center;
+ }
+
+ .about-link {
+ @include responsive-button();
+ }
+ }
+
+ .about-contents {
+ flex-basis: 0;
+ flex-grow: 1;
+
+ h2 {
+ border-bottom: none;
+ }
+
+ @include media-breakpoint-up(lg) {
+ border-left: solid 1px $border-color;
+ padding-left: 1.5em;
+ }
+
+ main.content {
+ margin-top: 0;
+ }
+ }
+}
+
+// Marquee
+div.quarto-about-marquee {
+ padding-bottom: 1em;
+
+ .about-contents {
+ display: flex;
+ flex-direction: column;
+ }
+
+ .about-image {
+ max-height: 550px;
+ margin-bottom: 1.5em;
+ object-fit: cover;
+ }
+ @include image-shapes();
+
+ h2 {
+ border-bottom: none;
+ }
+
+ .about-links {
+ @include responsive-buttons();
+ justify-content: center;
+ padding-top: 1.5em;
+ }
+
+ .about-link {
+ @include responsive-button();
+ @include media-breakpoint-up(lg) {
+ border: none;
+ }
+ }
+}
+
+// Broadside
+div.quarto-about-broadside {
+ display: flex;
+ flex-direction: column;
+ padding-bottom: 1em;
+
+ .about-main {
+ display: flex !important;
+ padding-top: 0 !important;
+ @include media-breakpoint-up(lg) {
+ flex-direction: row;
+ align-items: flex-start;
+ }
+
+ @include media-breakpoint-down(lg) {
+ flex-direction: column;
+ }
+
+ .about-entity {
+ @include media-breakpoint-down(lg) {
+ flex-shrink: 0;
+ width: 100%;
+ height: 450px;
+ margin-bottom: 1.5em;
+ background-size: cover;
+ background-repeat: no-repeat;
+ }
+ @include media-breakpoint-up(lg) {
+ flex: 0 10 50%;
+ margin-right: 1.5em;
+ width: 100%;
+ height: 100%;
+ background-size: 100%;
+ background-repeat: no-repeat;
+ }
+ }
+
+ .about-contents {
+ padding-top: 14px;
+ flex: 0 0 50%;
+ }
+ }
+
+ h2 {
+ border-bottom: none;
+ }
+
+ .about-sep {
+ margin-top: 1.5em;
+ width: 60%;
+ align-self: center;
+ }
+
+ .about-links {
+ @include responsive-buttons();
+ justify-content: center;
+ column-gap: 20px;
+ padding-top: 1.5em;
+ }
+
+ .about-link {
+ @include responsive-button();
+ @include media-breakpoint-up(lg) {
+ border: none;
+ }
+ }
+}
+
+
+// Tippy customizations
+
+.tippy-box[data-theme~="quarto"] {
+ background-color: $body-bg;
+ border: solid $border-width $border-color;
+ border-radius: $border-radius;
+ color: $body-color;
+ font-size: $font-size-sm;
+}
+.tippy-box[data-theme~="quarto"] > .tippy-backdrop {
+ background-color: $body-bg;
+}
+.tippy-box[data-theme~="quarto"] > .tippy-arrow:after,
+.tippy-box[data-theme~="quarto"] > .tippy-svg-arrow:after {
+ content: "";
+ position: absolute;
+ z-index: -1;
+}
+.tippy-box[data-theme~="quarto"] > .tippy-arrow:after {
+ border-color: transparent;
+ border-style: solid;
+}
+
+.tippy-box[data-placement^="top"] > .tippy-arrow:before {
+ bottom: -6px;
+}
+.tippy-box[data-placement^="bottom"] > .tippy-arrow:before {
+ top: -6px;
+}
+.tippy-box[data-placement^="right"] > .tippy-arrow:before {
+ left: -6px;
+}
+.tippy-box[data-placement^="left"] > .tippy-arrow:before {
+ right: -6px;
+}
+
+.tippy-box[data-theme~="quarto"][data-placement^="top"] > .tippy-arrow:before {
+ border-top-color: $body-bg;
+}
+.tippy-box[data-theme~="quarto"][data-placement^="top"] > .tippy-arrow:after {
+ border-top-color: $border-color;
+ border-width: 7px 7px 0;
+ top: 17px;
+ left: 1px;
+}
+.tippy-box[data-theme~="quarto"][data-placement^="top"]
+ > .tippy-svg-arrow
+ > svg {
+ top: 16px;
+}
+.tippy-box[data-theme~="quarto"][data-placement^="top"]
+ > .tippy-svg-arrow:after {
+ top: 17px;
+}
+.tippy-box[data-theme~="quarto"][data-placement^="bottom"]
+ > .tippy-arrow:before {
+ border-bottom-color: $body-bg;
+ bottom: 16px;
+}
+.tippy-box[data-theme~="quarto"][data-placement^="bottom"]
+ > .tippy-arrow:after {
+ border-bottom-color: $border-color;
+ border-width: 0 7px 7px;
+ bottom: 17px;
+ left: 1px;
+}
+.tippy-box[data-theme~="quarto"][data-placement^="bottom"]
+ > .tippy-svg-arrow
+ > svg {
+ bottom: 15px;
+}
+.tippy-box[data-theme~="quarto"][data-placement^="bottom"]
+ > .tippy-svg-arrow:after {
+ bottom: 17px;
+}
+.tippy-box[data-theme~="quarto"][data-placement^="left"] > .tippy-arrow:before {
+ border-left-color: $body-bg;
+}
+.tippy-box[data-theme~="quarto"][data-placement^="left"] > .tippy-arrow:after {
+ border-left-color: $border-color;
+ border-width: 7px 0 7px 7px;
+ left: 17px;
+ top: 1px;
+}
+.tippy-box[data-theme~="quarto"][data-placement^="left"]
+ > .tippy-svg-arrow
+ > svg {
+ left: 11px;
+}
+.tippy-box[data-theme~="quarto"][data-placement^="left"]
+ > .tippy-svg-arrow:after {
+ left: 12px;
+}
+.tippy-box[data-theme~="quarto"][data-placement^="right"]
+ > .tippy-arrow:before {
+ border-right-color: $body-bg;
+ right: 16px;
+}
+.tippy-box[data-theme~="quarto"][data-placement^="right"] > .tippy-arrow:after {
+ border-width: 7px 7px 7px 0;
+ right: 17px;
+ top: 1px;
+ border-right-color: $border-color;
+}
+.tippy-box[data-theme~="quarto"][data-placement^="right"]
+ > .tippy-svg-arrow
+ > svg {
+ right: 11px;
+}
+.tippy-box[data-theme~="quarto"][data-placement^="right"]
+ > .tippy-svg-arrow:after {
+ right: 12px;
+}
+.tippy-box[data-theme~="quarto"] > .tippy-svg-arrow {
+ fill: $body-color;
+}
+.tippy-box[data-theme~="quarto"] > .tippy-svg-arrow:after {
+ background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iNiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMCA2czEuNzk2LS4wMTMgNC42Ny0zLjYxNUM1Ljg1MS45IDYuOTMuMDA2IDggMGMxLjA3LS4wMDYgMi4xNDguODg3IDMuMzQzIDIuMzg1QzE0LjIzMyA2LjAwNSAxNiA2IDE2IDZIMHoiIGZpbGw9InJnYmEoMCwgOCwgMTYsIDAuMikiLz48L3N2Zz4=);
+ background-size: 16px 6px;
+ width: 16px;
+ height: 6px;
+}
+
+
+// floating
+
+.top-right {
+ position: absolute;
+ top: 1em;
+ right: 1em;
+}
+
+// hidden
+
+// https://github.com/quarto-dev/quarto-cli/issues/5403#issuecomment-1533791947
+.visually-hidden {
+ border: 0;
+ clip: rect(0 0 0 0);
+ height: auto;
+ margin: 0;
+ overflow: hidden;
+ padding: 0;
+ position: absolute;
+ width: 1px;
+ white-space: nowrap;
+}
+
+.hidden {
+ display: none !important;
+}
+
+.zindex-bottom {
+ z-index: -1 !important;
+}
+
+// layout and figures
+
+figure.figure {
+ display: block;
+}
+
+.quarto-layout-panel {
+ margin-bottom: 1em;
+}
+
+.quarto-layout-panel > figure {
+ width: 100%;
+}
+.quarto-layout-panel > figure > figcaption,
+.quarto-layout-panel > .panel-caption {
+ margin-top: 10pt;
+}
+
+.quarto-layout-panel > .table-caption {
+ margin-top: 0px;
+}
+
+.table-caption p {
+ margin-bottom: 0.5em;
+}
+
+.quarto-layout-row {
+ display: flex;
+ flex-direction: row;
+ align-items: flex-start;
+}
+.quarto-layout-valign-top {
+ align-items: flex-start;
+}
+.quarto-layout-valign-bottom {
+ align-items: flex-end;
+}
+.quarto-layout-valign-center {
+ align-items: center;
+}
+.quarto-layout-cell {
+ position: relative;
+ margin-right: 20px;
+}
+.quarto-layout-cell:last-child {
+ margin-right: 0;
+}
+.quarto-layout-cell figure,
+.quarto-layout-cell > p {
+ margin: 0.2em;
+}
+.quarto-layout-cell img {
+ max-width: 100%;
+}
+.quarto-layout-cell .html-widget {
+ width: 100% !important;
+}
+.quarto-layout-cell div figure p {
+ margin: 0;
+}
+.quarto-layout-cell figure {
+ display: block;
+ margin-inline-start: 0;
+ margin-inline-end: 0;
+}
+.quarto-layout-cell table {
+ display: inline-table;
+}
+.quarto-layout-cell-subref figcaption,
+figure .quarto-layout-row figure figcaption {
+ text-align: center;
+ font-style: italic;
+}
+.quarto-figure {
+ position: relative;
+ margin-bottom: 1em;
+}
+
+.quarto-figure > figure {
+ width: 100%;
+ margin-bottom: 0;
+}
+.quarto-figure-left > figure > p,
+.quarto-figure-left > figure > div /* for mermaid and dot diagrams */ {
+ text-align: left;
+}
+.quarto-figure-center > figure > p,
+.quarto-figure-center > figure > div /* for mermaid and dot diagrams */ {
+ text-align: center;
+}
+.quarto-figure-right > figure > p,
+.quarto-figure-right > figure > div /* for mermaid and dot diagrams */ {
+ text-align: right;
+}
+
+.quarto-figure > figure > div.cell-annotation,
+.quarto-figure > figure > div code {
+ text-align: left; /* override align center for code blocks */
+}
+
+figure > p:empty {
+ display: none;
+}
+figure > p:first-child {
+ margin-top: 0;
+ margin-bottom: 0;
+}
+
+figure > figcaption.quarto-float-caption-bottom {
+ margin-bottom: 0.5em;
+}
+figure > figcaption.quarto-float-caption-top {
+ margin-top: 0.5em;
+}
+
+// anchor
+
+// anchor js
+
+div[id^="tbl-"] {
+ position: relative;
+}
+
+.quarto-figure > .anchorjs-link {
+ position: absolute;
+ top: 0.6em;
+ right: 0.5em;
+}
+
+div[id^="tbl-"] > .anchorjs-link {
+ position: absolute;
+ top: 0.7em;
+ right: 0.3em;
+}
+
+/* workaround for anchorjs not hitting on generic :hover selector */
+.quarto-figure:hover > .anchorjs-link,
+div[id^="tbl-"]:hover > .anchorjs-link,
+h2:hover > .anchorjs-link,
+h3:hover > .anchorjs-link,
+h4:hover > .anchorjs-link,
+h5:hover > .anchorjs-link,
+h6:hover > .anchorjs-link,
+.reveal-anchorjs-link > .anchorjs-link {
+ opacity: 1;
+}
+
+#title-block-header {
+ margin-block-end: 1rem;
+ position: relative;
+ margin-top: -1px; // Chrome draws 1px white line between navbar and title block
+}
+
+#title-block-header .abstract {
+ margin-block-start: 1rem;
+}
+
+#title-block-header .abstract .abstract-title {
+ font-weight: 600;
+}
+
+#title-block-header a {
+ text-decoration: none;
+}
+
+#title-block-header .author,
+#title-block-header .date,
+#title-block-header .doi {
+ margin-block-end: 0.2rem;
+}
+
+#title-block-header .quarto-title-block > div {
+ display: flex;
+}
+
+#title-block-header .quarto-title-block > div > h1 {
+ flex-grow: 1;
+}
+
+#title-block-header .quarto-title-block > div > button {
+ flex-shrink: 0;
+ height: 2.25rem;
+ margin-top: 0;
+}
+
+#title-block-header .quarto-title-block > div > button {
+ @if mixin-exists(media-breakpoint-up) {
+ @include media-breakpoint-up(lg) {
+ margin-top: 5px;
+ }
+ }
+}
+
+// (Remove bottom margin from paragraphs in table headers)
+tr.header > th > p:last-of-type {
+ margin-bottom: 0px;
+}
+
+table,
+table.table {
+ margin-top: 0.5rem;
+ margin-bottom: 0.5rem;
+}
+
+caption,
+.table-caption {
+ padding-top: 0.5rem;
+ padding-bottom: 0.5rem;
+ text-align: center;
+}
+
+figure.quarto-float-tbl figcaption.quarto-float-caption-top {
+ margin-top: 0.5rem;
+ margin-bottom: 0.25rem;
+ text-align: center;
+}
+
+figure.quarto-float-tbl figcaption.quarto-float-caption-bottom {
+ padding-top: 0.25rem;
+ margin-bottom: 0.5rem;
+ text-align: center;
+}
+
+// utterances
+.utterances {
+ max-width: none;
+ margin-left: -8px;
+}
+
+// iframe
+iframe {
+ margin-bottom: 1em;
+}
+
+// details
+details {
+ margin-bottom: 1em;
+}
+details[show] {
+ margin-bottom: 0;
+}
+
+details > summary {
+ @if variable-exists(text-muted) {
+ color: $text-muted;
+ }
+}
+
+details > summary > p:only-child {
+ display: inline;
+}
+
+// codeCopy
+pre.sourceCode,
+code.sourceCode {
+ position: relative;
+}
+
+// Inline code should wrap
+// See https://github.com/quarto-dev/quarto-cli/issues/2649
+dd code:not(.sourceCode),
+p code:not(.sourceCode) {
+ white-space: pre-wrap;
+}
+
+// default to scrolling